tvolkmann/labswp_2019_sose_geocaching
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

StaionView shows active and already visited stations in correct colored markers

Browse Source
This commit is contained in:
Katharina Will 2019-06-06 14:58:33 +02:00
parent 5626c52537
commit 9967df0508
2 changed files with 33 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
labswp_2019_sose_geocaching_frontend/frontend/src/pages/CacheStart.vue
View File

@ -87,6 +87,7 @@ Vue.use(VueLayers);
this.stationID = cache.stationen[0];
this.lon = this.stationID.longitude;
this.lat = this.stationID.lattitude;
this.center = [this.lon, this.lat]
})
},
checkStation() {

57
labswp_2019_sose_geocaching_frontend/frontend/src/pages/StationView.vue
View File

@ -4,12 +4,21 @@
data-projection="EPSG:4326" style="height: 200px" v-if="!cameraActive">
<vl-view :zoom.sync="zoom" :center.sync="center" :rotation.sync="rotation"></vl-view>
<vl-feature ref="marker" v-for="station in cache.stationen" :key="station.id">
<vl-feature ref="marker">
<template>
<vl-geom-point :coordinates="[station.longitude, station.lattitude]"></vl-geom-point>
<vl-style-box>
<vl-style-icon :src="getMarkerURL(station)" :scale="2.0" :anchor="[0.5, 1]"></vl-style-icon>
<vl-style-icon src="./statics/map-marker_red.svg" :scale="2.0" :anchor="[0.5, 1]"></vl-style-icon>
</vl-style-box>
</template>
</vl-feature>
<vl-feature ref="marker" v-for="station in filteredStations" :key="station.id">
<template>
<vl-geom-point :coordinates="[station.longitude, station.lattitude]"></vl-geom-point>
<vl-style-box>
<vl-style-icon src="./statics/map-marker_grey.svg" :scale="2.0" :anchor="[0.5, 1]"></vl-style-icon>
</vl-style-box>
</template>
</vl-feature>
@ -64,6 +73,7 @@ Vue.use(VueLayers);
center: [ 9.208858198755664, 49.14785422283188],
rotation: 0,
geolocPosition: undefined,
filteredStations: [],
}
},
beforeRouteUpdate(to, from, next) {
@ -105,31 +115,28 @@ Vue.use(VueLayers);
},
methods: {
fetchData() {
this.$axios.get('/api/allCaches')
.then((response) => {
console.log("/api/allCaches");
console.log(response.data);
const cache = response.data.find(cache => cache.id === Number(this.$route.params.cache));
this.cache = cache;
this.station = cache.stationen.find(station => station.id === Number(this.$route.params.id));
this.cacheName = cache.name;
this.cacheID = this.$route.params.cache;
console.log(JSON.stringify(this.cache));
console.log(JSON.stringify(this.station));
console.log(this.cache);
if (localStorage.getItem('userToken')) {
let params = {cacheID: this.$route.params.cache};
params.token = JSON.parse(localStorage.getItem('userToken')).token;
this.$axios.get('/api/getCurrentStation',{params})
.then((response) => {
console.log("/api/getCurrentStation");
console.log(response.data);
const cache = response.data.cache;
this.cache = cache;
this.station = response.data.aktuelleStation;
this.cacheName = cache.name;
this.cacheID = this.$route.params.cache;
console.log(JSON.stringify(this.cache));
console.log(JSON.stringify(this.station));
console.log(this.cache);
let stationIndex = this.cache.stationen.findIndex(s => s.id === this.station.id);
for( let i=0; i< stationIndex; i++){
this.filteredStations.push(this.cache.stationen[i])
}
this.center = [this.station.longitude, this.station.lattitude]
})
},
getMarkerURL(station) {
return `./statics/map-marker_${this.setMarkercolor(station)}.svg`
},
setMarkercolor(station){
if(this.station === cache.stationen.find(station => station.id === Number(this.$route.params.id))) {
this.markercolor = "red";
} else if (this.station) {
this.markercolor = "grey";
}
return this.markercolor
},
updateResult(event) {