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-geom-point :coordinates="[lon, lat]"></vl-geom-point>
<vl-style-box> <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> </vl-style-box>
</template> </template>
</vl-feature> </vl-feature>
@ -87,6 +87,7 @@ Vue.use(VueLayers);
this.stationID = cache.stationen[0]; this.stationID = cache.stationen[0];
this.lon = this.stationID.longitude; this.lon = this.stationID.longitude;
this.lat = this.stationID.lattitude; this.lat = this.stationID.lattitude;
this.center = [this.lon, this.lat]
}) })
}, },
checkStation() { checkStation() {

View File

@ -4,12 +4,21 @@
data-projection="EPSG:4326" style="height: 200px" v-if="!cameraActive"> data-projection="EPSG:4326" style="height: 200px" v-if="!cameraActive">
<vl-view :zoom.sync="zoom" :center.sync="center" :rotation.sync="rotation"></vl-view> <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> <template>
<vl-geom-point :coordinates="[station.longitude, station.lattitude]"></vl-geom-point> <vl-geom-point :coordinates="[station.longitude, station.lattitude]"></vl-geom-point>
<vl-style-box> <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> </vl-style-box>
</template> </template>
</vl-feature> </vl-feature>
@ -57,13 +66,14 @@ Vue.use(VueLayers);
stationen: [], stationen: [],
}, },
station: {}, station: {},
markercolor: "red", markercolor: "grey",
cameraActive: false, cameraActive: false,
result: null, result: null,
zoom: 15, zoom: 15,
center: [ 9.208858198755664, 49.14785422283188], center: [ 9.208858198755664, 49.14785422283188],
rotation: 0, rotation: 0,
geolocPosition: undefined, geolocPosition: undefined,
filteredStations: [],
} }
}, },
beforeRouteUpdate(to, from, next) { beforeRouteUpdate(to, from, next) {
@ -105,24 +115,28 @@ Vue.use(VueLayers);
}, },
methods: { methods: {
fetchData() { fetchData() {
this.$axios.get('/api/allCaches') 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) => { .then((response) => {
console.log("/api/allCaches"); console.log("/api/getCurrentStation");
console.log(response.data); console.log(response.data);
const cache = response.data.find(cache => cache.id === Number(this.$route.params.cache)); const cache = response.data.cache;
this.cache = cache; this.cache = cache;
this.station = cache.stationen.find(station => station.id === Number(this.$route.params.id)); this.station = response.data.aktuelleStation;
this.cacheName = cache.name; this.cacheName = cache.name;
this.cacheID = this.$route.params.cache; this.cacheID = this.$route.params.cache;
console.log(JSON.stringify(this.cache)); console.log(JSON.stringify(this.cache));
console.log(JSON.stringify(this.station)); console.log(JSON.stringify(this.station));
console.log(this.cache); 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) { updateResult(event) {