diff --git a/src/app/analyze/analyze.component.html b/src/app/analyze/analyze.component.html index bf9a04f..58d1341 100644 --- a/src/app/analyze/analyze.component.html +++ b/src/app/analyze/analyze.component.html @@ -1,9 +1,32 @@ -
- 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 }} + +
+ +
+
+ +
+

Bus

+
+ +
+

Tram

+
+ +
+

Subway

+
+ +
+

Train

+
+ +
+

Light rail

+
+ +
+

Monotrail

+
+
diff --git a/src/app/analyze/analyze.component.scss b/src/app/analyze/analyze.component.scss index e69de29..42ead80 100644 --- a/src/app/analyze/analyze.component.scss +++ b/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'); + } + +} diff --git a/src/app/analyze/analyze.component.ts b/src/app/analyze/analyze.component.ts index 805bab1..3028ffc 100644 --- a/src/app/analyze/analyze.component.ts +++ b/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); - let osm: OSM = this.osmService.parseOsmContent(data); - // Analyze the OSM data - this.osmAnalysis = this.osmAnalysisService.getOsmAnalysis(osm); + this.overpassApiService.sendQueryRequest(`${minLon},${minLat},${maxLon},${maxLat}`) + .pipe(catchError(err => { + console.error(err); + this.status = "\ +
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 = ""; + } }); } diff --git a/src/assets/images/cross.svg b/src/assets/images/cross.svg new file mode 100644 index 0000000..b344dce --- /dev/null +++ b/src/assets/images/cross.svg @@ -0,0 +1,41 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/images/tick.svg b/src/assets/images/tick.svg new file mode 100644 index 0000000..8738f16 --- /dev/null +++ b/src/assets/images/tick.svg @@ -0,0 +1,3 @@ + \ No newline at end of file