This commit is contained in:
Michael 2019-06-06 15:03:33 +02:00
commit fcbe0301c4
2 changed files with 36 additions and 21 deletions

View File

@ -9,7 +9,7 @@
<vl-geom-point :coordinates="[lon, lat]"></vl-geom-point>
<vl-style-box>
<vl-style-icon src="./statics/map-marker.svg" :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>
@ -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() {

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>
@ -57,13 +66,14 @@ Vue.use(VueLayers);
stationen: [],
},
station: {},
markercolor: "red",
markercolor: "grey",
cameraActive: false,
result: null,
zoom: 15,
center: [ 9.208858198755664, 49.14785422283188],
rotation: 0,
geolocPosition: undefined,
filteredStations: [],
}
},
beforeRouteUpdate(to, from, next) {
@ -105,24 +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) {
console.log(station);
return `./statics/map-marker_${this.markercolor}.svg`
}
},
updateResult(event) {