mirror of
https://github.com/DerTyp7/local-analyzer-angular.git
synced 2025-10-29 12:52:14 +01:00
added analyze html
This commit is contained in:
j.mei7
@@ -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>
|
||||
|
||||
|
||||
@@ -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');
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@@ -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 = "<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 = "";
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
41
src/assets/images/cross.svg
Normal file
41
src/assets/images/cross.svg
Normal file
@@ -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>
|
||||
|
After Width: | Height: | Size: 998 B |
3
src/assets/images/tick.svg
Normal file
3
src/assets/images/tick.svg
Normal file
@@ -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>
|
||||
|
After Width: | Height: | Size: 417 B |
Reference in New Issue
Block a user