added analyze html

src/app/analyze/analyze.component.html

@@ -1,9 +1,32 @@
-<div *ngIf="osmAnalysis">
-  bus: {{ osmAnalysis.publicTransportAccessability.isBusAccessible }}
-  train: {{ osmAnalysis.publicTransportAccessability.isTrainAccessible }}
-  tram: {{ osmAnalysis.publicTransportAccessability.isTramAccessible }}
-  subway: {{ osmAnalysis.publicTransportAccessability.isSubwayAccessible }}
-  monorail: {{ osmAnalysis.publicTransportAccessability.isMonorailAccessible }}
-  light rail: {{ osmAnalysis.publicTransportAccessability.isLightRailAccessible }}
+
+<h5 [innerHTML]="status"></h5>
+
+<div *ngIf="osmAnalysis" class="result-container center">
+  <div class="result-container-pta ">
+
+    <div class="pta-circle pta-circle-{{osmAnalysis.publicTransportAccessability.isBusAccessible}}">
+      <p class="pta-circle-text">Bus</p>
+    </div>
+
+    <div class="pta-circle pta-circle-{{osmAnalysis.publicTransportAccessability.isTramAccessible}}">
+      <p class="pta-circle-text">Tram</p>
+    </div>
+
+    <div class="pta-circle pta-circle-{{osmAnalysis.publicTransportAccessability.isSubwayAccessible}}">
+      <p class="pta-circle-text">Subway</p>
+    </div>
+
+    <div class="pta-circle pta-circle-{{osmAnalysis.publicTransportAccessability.isTrainAccessible}}">
+      <p class="pta-circle-text">Train</p>
+    </div>
+
+    <div class="pta-circle pta-circle-{{osmAnalysis.publicTransportAccessability.isLightRailAccessible}}">
+      <p class="pta-circle-text">Light rail</p>
+    </div>
+
+    <div class="pta-circle pta-circle-{{osmAnalysis.publicTransportAccessability.isMonorailAccessible}}">
+      <p class="pta-circle-text">Monotrail</p>
+    </div>
+  </div>
 </div>
 

src/app/analyze/analyze.component.scss

@@ -0,0 +1,49 @@
+h5{
+  padding-top: 30px;
+  text-align: center;
+}
+
+.result-container{
+  padding-top: 30px;
+  width: 700px;
+
+
+  .result-container-pta{
+    height: 100px;
+    border-bottom: 1px solid rgb(63, 63, 63);
+  }
+
+  .pta-circle{
+    width: 65px;
+    height: 65px;
+    border-radius: 50%;
+    margin-left: 44px;
+    border: 5px solid transparent;
+    background-color: rgba(250, 250, 250, 0.103);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    float: left;
+    background-size: 30px 30px;
+    background-repeat: no-repeat;
+    background-position: center;
+
+    .pta-circle-text{
+      margin-top: 85px;
+      font-size: 10pt;
+      font-weight: bold;
+      display: block;
+    }
+  }
+
+  .pta-circle-true{
+    border-color: rgb(76, 231, 140);
+    background-image: url('/assets/images/tick.svg');
+  }
+
+  .pta-circle-false{
+    border-color: rgb(209, 39, 39);
+    background-image: url('/assets/images/cross.svg');
+  }
+
+}

src/app/analyze/analyze.component.ts

@@ -5,6 +5,7 @@ import { OsmAnalysis } from '../interfaces/osmAnalysis';
 import { OsmService } from '../services/osm.service';
 import { OSM } from '../interfaces/osm';
 import { OsmAnalysisService } from '../services/osm-analysis.service';
+import { catchError, of } from 'rxjs';
 
 @Component({
   selector: 'app-analyze',
@@ -15,6 +16,8 @@ export class AnalyzeComponent implements OnInit {
   lon!: string | null;
   lat!: string | null;
 
+  status: string = "";
+
   osmAnalysis?: OsmAnalysis;
 
   constructor(
@@ -33,12 +36,23 @@ export class AnalyzeComponent implements OnInit {
     let minLat: number = parseFloat(this.lat!) - 0.13;
     let maxLat: number = parseFloat(this.lat!) + 0.13;
 
+    this.status = "Downloading OSM data...";
 
-    this.overpassApiService.sendQueryRequest(`${minLon},${minLat},${maxLon},${maxLat}`).subscribe(data => {
-      console.log(data);
+    this.overpassApiService.sendQueryRequest(`${minLon},${minLat},${maxLon},${maxLat}`)
+    .pipe(catchError(err => {
+      console.error(err);
+      this.status = "<label style='color:rgb(209, 39, 39); font-weight:bold;'>Dowloading OSM data failed!</label>\
+      <br>You may have been set on pause by the server, because of too many requests in a short amount of time.";
+      return of("");
+    }))
+    .subscribe((data: string) => {
+      if(data != ""){
         let osm: OSM = this.osmService.parseOsmContent(data);
         // Analyze the OSM data
+        this.status = "Analyze OSM data...";
         this.osmAnalysis = this.osmAnalysisService.getOsmAnalysis(osm);
+        this.status = "";
+      }
     });
   }
 

src/assets/images/cross.svg

@@ -0,0 +1,41 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 18.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 212.982 212.982" style="enable-background:new 0 0 212.982 212.982;" xml:space="preserve">
+<g id="Close">
+	<path style="fill-rule:evenodd;clip-rule:evenodd;" fill="red" d="M131.804,106.491l75.936-75.936c6.99-6.99,6.99-18.323,0-25.312
+		c-6.99-6.99-18.322-6.99-25.312,0l-75.937,75.937L30.554,5.242c-6.99-6.99-18.322-6.99-25.312,0c-6.989,6.99-6.989,18.323,0,25.312
+		l75.937,75.936L5.242,182.427c-6.989,6.99-6.989,18.323,0,25.312c6.99,6.99,18.322,6.99,25.312,0l75.937-75.937l75.937,75.937
+		c6.989,6.99,18.322,6.99,25.312,0c6.99-6.99,6.99-18.322,0-25.312L131.804,106.491z"/>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>

src/assets/images/tick.svg

@@ -0,0 +1,3 @@
+<?xml version="1.0" ?><svg id="Layer_1" style="enable-background:new 0 0 512 512;" version="1.1" viewBox="0 0 512 512" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><style type="text/css">
+	.st0{fill:#41AD49;}
+</style><g><polygon class="st0" points="434.8,49 174.2,309.7 76.8,212.3 0,289.2 174.1,463.3 196.6,440.9 196.6,440.9 511.7,125.8 434.8,49     "/></g></svg>