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

Merge branch 'frontend/timo_neu' into develop

Browse Source
This commit is contained in:
Timo Volkmann 2019-06-03 20:04:24 +02:00
commit 1d4b964f51
5 changed files with 238 additions and 400 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

283
labswp_2019_sose_geocaching_frontend/frontend/src/components/mapClickable.vue
View File

@ -1,128 +1,78 @@
<template> <template>
<div style="height: 400px"> <div>
<vl-map v-if="mapVisible" class="map" ref="map" :load-tiles-while-animating="true" <div class="q-mb-sm" style="height: 400px">
:load-tiles-while-interacting="true" <vl-map v-if="mapVisible" class="map" ref="map" :load-tiles-while-animating="true"
@click="clickCoordinate = $event.coordinate" @postcompose="onMapPostCompose" :load-tiles-while-interacting="true"
data-projection="EPSG:4326" @mounted="onMapMounted"> @click="clickCoordinate = $event.coordinate" @postcompose="onMapPostCompose"
<!-- map view aka ol.View --> data-projection="EPSG:4326" @mounted="onMapMounted">
<vl-view ref="view" :center.sync="computedCoords" :zoom.sync="zoom" :rotation.sync="rotation"></vl-view> <!-- map view aka ol.View -->
<vl-view ref="view" :center.sync="computedCoords" :zoom.sync="zoom" :rotation.sync="rotation"></vl-view>
<!-- interactions --> <!-- interactions -->
<vl-interaction-select :features.sync="selectedFeatures" v-if="drawType == null"> <!-- <vl-interaction-select :features.sync="selectedFeatures" v-if="drawType == null">-->
<template slot-scope="select"> <!-- <template slot-scope="select">-->
<!-- select styles --> <!-- &lt;!&ndash; select styles &ndash;&gt;-->
<vl-style-box> <!-- <vl-style-box>-->
<vl-style-stroke color="#423e9e" :width="7"></vl-style-stroke> <!-- <vl-style-stroke color="#423e9e" :width="7"></vl-style-stroke>-->
<vl-style-fill :color="[254, 178, 76, 0.7]"></vl-style-fill> <!-- <vl-style-fill :color="[254, 178, 76, 0.7]"></vl-style-fill>-->
<vl-style-circle :radius="5"> <!-- <vl-style-circle :radius="5">-->
<vl-style-stroke color="#423e9e" :width="7"></vl-style-stroke> <!-- <vl-style-stroke color="#423e9e" :width="7"></vl-style-stroke>-->
<vl-style-fill :color="[254, 178, 76, 0.7]"></vl-style-fill> <!-- <vl-style-fill :color="[254, 178, 76, 0.7]"></vl-style-fill>-->
</vl-style-circle> <!-- </vl-style-circle>-->
</vl-style-box> <!-- </vl-style-box>-->
<vl-style-box :z-index="1"> <!-- <vl-style-box :z-index="1">-->
<vl-style-stroke color="#d43f45" :width="2"></vl-style-stroke> <!-- <vl-style-stroke color="#d43f45" :width="2"></vl-style-stroke>-->
<vl-style-circle :radius="5"> <!-- <vl-style-circle :radius="5">-->
<vl-style-stroke color="#d43f45" :width="2"></vl-style-stroke> <!-- <vl-style-stroke color="#d43f45" :width="2"></vl-style-stroke>-->
</vl-style-circle> <!-- </vl-style-circle>-->
</vl-style-box> <!-- </vl-style-box>-->
<!--// select styles --> <!-- &lt;!&ndash;// select styles &ndash;&gt;-->
<!-- selected feature popup --> <!-- </template>-->
<vl-overlay class="feature-popup" v-for="feature in select.features" :key="feature.id" :id="feature.id" <!-- </vl-interaction-select>-->
:position="pointOnSurface(feature.geometry)" :auto-pan="true" <!--// interactions -->
:auto-pan-animation="{ duration: 300 }">
<template slot-scope="popup">
<section class="card">
<header class="card-header">
<p class="card-header-title">
Feature ID {{ feature.id }}
</p>
<a class="card-header-icon" title="Close"
@click="selectedFeatures = selectedFeatures.filter(f => f.id !== feature.id)">
<b-icon icon="close"></b-icon>
</a>
</header>
<div class="card-content">
<div class="content">
<p>
Overlay popup content for Feature with ID <strong>{{ feature.id }}</strong>
</p>
<p>
Popup: {{ JSON.stringify(popup) }}
</p>
<p>
Feature: {{ JSON.stringify({ id: feature.id, properties: feature.properties }) }}
</p>
</div>
</div>
</section>
</template>
</vl-overlay>
<!--// selected popup -->
</template>
</vl-interaction-select>
<!--// interactions -->
<!-- geolocation --> <!-- geolocation -->
<vl-geoloc @update:position="onUpdatePosition"> <vl-geoloc @update:position="onUpdatePosition">
<template slot-scope="geoloc"> <template slot-scope="geoloc">
<!-- !!Snippet --> <vl-feature v-if="geoloc.position" id="position-feature">
<vl-feature v-if="geoloc.position" id="position-feature"> <vl-geom-point :coordinates="geoloc.position"></vl-geom-point>
<vl-geom-point :coordinates="geoloc.position"></vl-geom-point> </vl-feature>
</template>
</vl-geoloc>
<!--// geolocation -->
<vl-feature id="marker" ref="marker">
<template>
<vl-geom-point :coordinates="center"></vl-geom-point>
<vl-style-box> <vl-style-box>
<vl-style-icon src="./statics/map-marker.svg" :scale="2" :anchor="[0.095,0.17]" <vl-style-icon src="./statics/map-marker.svg" :scale="2" :anchor="[0.095,0.17]"
:size="[64, 64]"></vl-style-icon> :size="[128, 128]"></vl-style-icon>
</vl-style-box> </vl-style-box>
</vl-feature> </template>
<!-- !!Snippet --> </vl-feature>
</template> <!-- !!Snippet -->
</vl-geoloc> <!--// overlay marker -->
<!--// geolocation -->
<!-- <vl-feature id="point">-->
<!-- <vl-geom-point :coordinates=""></vl-geom-point>-->
<!-- </vl-feature>-->
<!-- overlay marker with animation -->
<!-- !!Snippet -->
<!-- <vl-feature id="marker" ref="marker" :properties="{ start: Date.now(), duration: 2500 }">-->
<vl-feature id="marker" ref="marker">
<!-- <template slot-scope="feature">-->
<template>
<vl-geom-point :coordinates="center"></vl-geom-point>
<vl-style-box>
<vl-style-icon src="./statics/map-marker.svg" :scale="2" :anchor="[0.095,0.17]"
:size="[128, 128]"></vl-style-icon>
</vl-style-box>
<!-- overlay binded to feature -->
<!-- <vl-overlay v-if="feature.geometry" :position="pointOnSurface(feature.geometry)" :offset="[10, 10]">-->
<!-- <p class="is-light box content">-->
<!-- Always opened overlay for Feature ID <strong>{{ feature.id }}</strong>-->
<!-- </p>-->
<!-- </vl-overlay>-->
</template>
</vl-feature>
<!-- !!Snippet -->
<!--// overlay marker -->
<!-- base layers --> <!-- base layers -->
<vl-layer-tile v-for="layer in baseLayers" :key="layer.name" :id="layer.name" :visible="layer.visible"> <vl-layer-tile v-for="layer in baseLayers" :key="layer.name" :id="layer.name" :visible="layer.visible">
<component :is="'vl-source-' + layer.name" v-bind="layer"></component> <component :is="'vl-source-' + layer.name" v-bind="layer"></component>
</vl-layer-tile> </vl-layer-tile>
<!--// base layers --> <!--// base layers -->
<!-- draw components --> </vl-map>
<!-- <vl-layer-vector id="draw-pane" v-if="mapPanel.tab === 'state'">--> </div>
<!-- <vl-source-vector ident="draw-target" :features.sync="drawnFeatures">--> <div class="row q-col-gutter-md">
<q-input class="col" dense stack-label filled v-model="center[1]"
label="Breitengrad"/>
<q-input class="col" dense stack-label filled v-model="center[0]"
label="Längengrad"/>
<div class="col-shrink">
<q-btn unelevated color="primary" class="full-height" icon="my_location" @click="setCenter(deviceCoordinate)"/>
</div>
</div>
<!-- </vl-source-vector>-->
<!-- </vl-layer-vector>-->
<!-- <vl-interaction-draw v-if="mapPanel.tab === 'state' && drawType" source="draw-target" :type="drawType"></vl-interaction-draw>-->
<!-- <vl-interaction-modify v-if="mapPanel.tab === 'state'" source="draw-target"></vl-interaction-modify>-->
<!-- <vl-interaction-snap v-if="mapPanel.tab === 'state'" source="draw-target" :priority="10"></vl-interaction-snap>-->
</vl-map>
</div> </div>
</template> </template>
@ -192,17 +142,6 @@
imageFillColor: '#444444', imageFillColor: '#444444',
}), }),
] ]
return function __pacmanStyleFunc(feature) {
switch (feature.getId()) {
case 'pacman':
return pacman
case 'pacman-path':
return path
case 'pacman-eye':
return eye
}
}
}, },
/** /**
* Cluster layer style function factory * Cluster layer style function factory
@ -271,12 +210,12 @@
// now ol.Map instance is ready and we can work with it directly // now ol.Map instance is ready and we can work with it directly
this.$refs.map.$map.getControls().extend([ this.$refs.map.$map.getControls().extend([
new ScaleLine(), new ScaleLine(),
new FullScreen(), // new FullScreen(),
new OverviewMap({ // new OverviewMap({
collapsed: false, // collapsed: false,
collapsible: true, // collapsible: true,
}), // }),
new ZoomSlider(), // new ZoomSlider(),
]) ])
}, },
// base layers // base layers
@ -306,6 +245,10 @@
this.drawType = undefined this.drawType = undefined
} }
}, },
setCenter(position) {
this.center = position;
this.$emit('updatecoords', this.center);
}
} }
@ -330,33 +273,33 @@
}, },
panelOpen: true, panelOpen: true,
mapVisible: true, mapVisible: true,
drawControls: [ // drawControls: [
{ // {
type: 'point', // type: 'point',
label: 'Draw Point', // label: 'Draw Point',
icon: 'map-marker', // icon: 'map-marker',
}, // },
{ // {
type: 'line-string', // type: 'line-string',
label: 'Draw LineString', // label: 'Draw LineString',
icon: 'minus', // icon: 'minus',
}, // },
{ // {
type: 'polygon', // type: 'polygon',
label: 'Draw Polygon', // label: 'Draw Polygon',
icon: 'square-o', // icon: 'square-o',
}, // },
{ // {
type: 'circle', // type: 'circle',
label: 'Draw Circle', // label: 'Draw Circle',
icon: 'circle-thin', // icon: 'circle-thin',
}, // },
{ // {
type: undefined, // type: undefined,
label: 'Stop drawing', // label: 'Stop drawing',
icon: 'times', // icon: 'times',
}, // },
], // ],
drawType: "point", drawType: "point",
drawnFeatures: [], drawnFeatures: [],
// base layers // base layers
@ -366,28 +309,14 @@
title: 'OpenStreetMap', title: 'OpenStreetMap',
visible: true, visible: true,
}, },
{
name: 'sputnik',
title: 'Sputnik Maps',
visible: false,
},
// needs paid plan to get key
// {
// name: 'mapbox',
// title: 'Mapbox',
// },
{
name: 'bingmaps',
title: 'Bing Maps',
apiKey: 'ArbsA9NX-AZmebC6VyXAnDqjXk6mo2wGCmeYM8EwyDaxKfQhUYyk0jtx6hX5fpMn',
imagerySet: 'CanvasGray',
visible: false,
},
], ],
// layers config // layers config
} }
}, },
mounted() { created() {
if (!(this.coords === undefined || this.coords[0] === undefined || this.coords[1] === undefined)) {
this.center = this.coords;
}
}, },
computed: { computed: {
computedCoords: { computedCoords: {
@ -400,7 +329,7 @@
} }
} }
} },
} }
</script> </script>

119
labswp_2019_sose_geocaching_frontend/frontend/src/pages/Cache.vue
View File

@ -60,9 +60,11 @@
</q-item> </q-item>
</q-list> </q-list>
<p class=""><b>Hinweis:</b> Ein Cache muss mindestens aus zwei Stationen bestehen (inklusive der Endstation).</p> <p class=""><b>Hinweis:</b> Ein Cache muss mindestens aus zwei Stationen bestehen (inklusive der Endstation).
</p>
<div class="row reverse"> <div class="row reverse">
<q-btn @click="addStation" class="full-width" unelevated color="primary" label="Station hinzufügen" icon-right="add"/> <q-btn @click="addStation" class="full-width" unelevated color="primary" label="Station hinzufügen"
icon-right="add"/>
</div> </div>
<p class="text-h6">Endstation</p> <p class="text-h6">Endstation</p>
<q-card flat bordered class="rounded-borders"> <q-card flat bordered class="rounded-borders">
@ -95,7 +97,7 @@
<div class="row q-mt-xl"> <div class="row q-mt-xl">
<q-btn @click="saveCache" class="full-width q-mb-md" color="primary" unelevated stack label="Cache speichern" <q-btn @click="saveCache" class="full-width q-mb-md" color="primary" unelevated stack label="Cache speichern"
icon="save_alt"/> icon="save_alt"/>
<q-btn to="/overview" class="full-width" color="negative" unelevated stack label="Abbrechen" /> <q-btn to="/overview" class="full-width" color="negative" unelevated stack label="Abbrechen"/>
</div> </div>
</div> </div>
</form> </form>
@ -123,7 +125,7 @@
}, },
created: function () { created: function () {
console.log("isNewCache: " + this.isNewCache); console.log("isNewCache: " + this.isNewCache);
console.log("Route Params: " + this.$route.params.id); //console.log("Route Params: " + this.$route.params.id);
if (!this.isNewCache && !this.$store.getters['cacheCollector/GET_LOCK']) { if (!this.isNewCache && !this.$store.getters['cacheCollector/GET_LOCK']) {
this.$axios.get('/api/allCaches') this.$axios.get('/api/allCaches')
.then((response) => { .then((response) => {
@ -163,6 +165,7 @@
const station = this.$store.getters['cacheCollector/GET_ENDSTATION']; const station = this.$store.getters['cacheCollector/GET_ENDSTATION'];
console.log(station); console.log(station);
this.$store.commit('cacheCollector/SET_TEMPSTATION', station); this.$store.commit('cacheCollector/SET_TEMPSTATION', station);
this.$store.commit('cacheCollector/SET_LOCK', true);
this.$router.push({path: `/tempendstation/`}); // add parameter this.$router.push({path: `/tempendstation/`}); // add parameter
}, },
@ -187,67 +190,65 @@
let cache = JSON.parse(JSON.stringify(this.computedCache)); let cache = JSON.parse(JSON.stringify(this.computedCache));
console.log(cache); console.log(cache);
cache.stationen.push(this.computedEndstation); cache.stationen.push(this.computedEndstation);
console.log("isnewcache "+this.isNewCache) console.log("isnewcache " + this.isNewCache)
//Error messages //Error messages
if(!this.validateRankingPoints()){ if (!this.validateRankingPoints()) {
let title = "Falsche Formatierung"; let title = "Falsche Formatierung";
let msg = "Die Ranglistenpunkte müssen eine ganze Zahl sein"; let msg = "Die Ranglistenpunkte müssen eine ganze Zahl sein";
this.$store.commit('dialog/NEW_MESSAGE_DIALOG', {message: msg, title: title,}); this.$store.commit('dialog/NEW_MESSAGE_DIALOG', {message: msg, title: title,});
} }
if(this.validateEverything()) { if (this.isNewCache) {
if (this.isNewCache) { console.log("CREATECACHE")
console.log("CREATECACHE") this.$axios.post('/api/createCache', cache)
this.$axios.post('/api/createCache', cache) .then((response) => {
.then((response) => { console.log("POST api/createCache: " + response.statusText);
console.log("POST api/createCache: " + response.statusText); this.$store.commit('cacheCollector/RESET_NEW_CACHE');
this.$store.commit('cacheCollector/RESET_NEW_CACHE'); this.$router.push({path: '/overview'});
this.$router.push({path: '/overview'}); }).catch((error) => {
}).catch((error) => { let msg;
let msg; let title;
let title; if (error.response) {
if (error.response) { title = "Bitte Eingaben überprüfen!";
title = "Bitte Eingaben überprüfen!"; msg = error.response.data;
msg = error.response.data; } else if (error.request) {
} else if (error.request) { title = "Verbindungsfehler!";
title = "Verbindungsfehler!"; msg = "Es konnte keine Verbindung zum Server aufgebaut werden. Versuchen Sie es später noch einmal!"
msg = "Es konnte keine Verbindung zum Server aufgebaut werden. Versuchen Sie es später noch einmal!" console.log(error.request);
console.log(error.request); } else {
} else { title = "Error";
title = "Error"; msg = error.message;
msg = error.message; console.log('Error', error.message);
console.log('Error', error.message); }
} console.log(error.config);
console.log(error.config); this.$store.commit('dialog/NEW_MESSAGE_DIALOG', {message: msg, title: title,});
this.$store.commit('dialog/NEW_MESSAGE_DIALOG', {message: msg, title: title,}); })
}) } else {
} else { console.log("EDITCACHE")
console.log("EDITCACHE") this.$axios.put('/api/editCache', cache)
this.$axios.put('/api/editCache', cache) .then((response) => {
.then((response) => { console.log("POST api/editCache: " + response.statusText);
console.log("POST api/editCache: " + response.statusText); this.$store.commit('cacheCollector/RESET_NEW_CACHE');
this.$store.commit('cacheCollector/RESET_NEW_CACHE'); this.$router.push({path: '/overview'});
this.$router.push({path: '/overview'}); }).catch((error) => {
}).catch((error) => { let msg;
let msg; let title;
let title; if (error.response) {
if (error.response) { title = "Bitte Eingaben überprüfen!";
title = "Bitte Eingaben überprüfen!"; msg = error.response.data;
msg = error.response.data; } else if (error.request) {
} else if (error.request) { title = "Verbindungsfehler!";
title = "Verbindungsfehler!"; msg = "Es konnte keine Verbindung zum Server aufgebaut werden. Versuchen Sie es später noch einmal!"
msg = "Es konnte keine Verbindung zum Server aufgebaut werden. Versuchen Sie es später noch einmal!" console.log(error.request);
console.log(error.request); } else {
} else { title = "Error";
title = "Error"; msg = error.message;
msg = error.message; console.log('Error', error.message);
console.log('Error', error.message); }
} console.log(error.config);
console.log(error.config); this.$store.commit('dialog/NEW_MESSAGE_DIALOG', {message: msg, title: title,});
this.$store.commit('dialog/NEW_MESSAGE_DIALOG', {message: msg, title: title,}); })
})
}
} }
}, },
validateRankingPoints: function () { validateRankingPoints: function () {
@ -255,7 +256,7 @@
let rps = String(this.computedCache.rankingPoints); let rps = String(this.computedCache.rankingPoints);
return re.test(rps); return re.test(rps);
}, },
validateEverything(){ validateEverything() {
return this.validateRankingPoints(); return this.validateRankingPoints();
} }
}, },

135
labswp_2019_sose_geocaching_frontend/frontend/src/pages/StationEdit.vue
View File

@ -1,53 +1,25 @@
<template> <template>
<div class="q-ma-md"> <div class="q-ma-md">
<p class="text-h5">Neue Station</p> <p class="text-h5">{{ isEndstation ? "Endstation bearbeiten"
<q-editor : isNewStation ? "Neue Station"
:toolbar="[ : "Station bearbeiten"}}</p>
<q-editor v-show="!isEndstation && station.description"
:toolbar="[
['bold', 'italic', 'strike', 'underline'], ['bold', 'italic', 'strike', 'underline'],
['undo', 'redo'], ['undo', 'redo'],
['hr', 'link'], ['hr', 'link'],
['fullscreen'], ['fullscreen'],
]" ]"
v-model="station.description" min-height="10rem"/> v-model="station.description" min-height="10rem"/>
<!--<q-input--> <!--<q-input-->
<!--v-model="description"--> <!--v-model="description"-->
<!--filled--> <!--filled-->
<!--type="textarea"--> <!--type="textarea"-->
<!--/>--> <!--/>-->
<p class="text-h6 q-mt-md">Location</p> <p class="text-h6 q-mt-md">Location</p>
<mapclick :coords="[this.station.longitude, this.station.lattitude]" @updatecoords="updateCoords($event)"> <mapclick v-if="!loading" :coords="[this.station.longitude, this.station.lattitude]" @updatecoords="updateCoords($event)">
</mapclick> </mapclick>
<!-- <vl-map :load-tiles-while-animating="true" :load-tiles-while-interacting="true"-->
<!-- data-projection="EPSG:4326">-->
<!-- <vl-view :zoom.sync="zoom" :center.sync="center" :rotation.sync="rotation"></vl-view>-->
<!-- <vl-geoloc @update:position="geolocPosition = $event">-->
<!-- <template slot-scope="geoloc">-->
<!-- <vl-feature v-if="geoloc.position" id="position-feature">-->
<!-- <vl-geom-point :coordinates="geoloc.position"></vl-geom-point>-->
<!-- </vl-feature>-->
<!-- </template>-->
<!-- </vl-geoloc>-->
<!-- <vl-layer-tile id="osm">-->
<!-- <vl-source-osm></vl-source-osm>-->
<!-- </vl-layer-tile>-->
<!-- </vl-map>-->
<div class="row q-col-gutter-md">
<q-input class="col" dense stack-label filled v-model="latlang" @input="separateLatlang"
label="Breitengrad/Längengrad"/>
<q-input class="col-12" dense stack-label filled v-model="station.lattitude"
label="Breitengrad"/>
<q-input class="col-12" dense stack-label filled v-model="station.longitude"
label="Längengrad"/>
<div class="col-shrink">
<q-btn unelevated color="primary" class="full-height" icon="my_location"/>
</div>
</div>
<!-- <p class="text-h6 q-mt-md">Lösung</p>-->
<!-- <q-input class="col" dense stack-label filled v-model="station.solution" label="Lösung"/>-->
<!-- <q-input class="col q-mt-md" dense stack-label filled v-model="station.code" label="Code" readonly/>-->
<div class="row reverse q-mt-md q-gutter-x-md"> <div class="row reverse q-mt-md q-gutter-x-md">
<q-btn @click="saveStation" unelevated color="primary" label="Speichern" icon-right="add"/> <q-btn @click="saveStation" unelevated color="primary" label="Speichern" icon-right="add"/>
<q-btn @click="dismiss" unelevated color="negative" label="verwerfen" icon-right="delete"/> <q-btn @click="dismiss" unelevated color="negative" label="verwerfen" icon-right="delete"/>
@ -62,11 +34,11 @@
export default { export default {
name: "Station", name: "Station",
components: { mapclick }, components: {mapclick},
data() { data() {
return { return {
description: "Rätsel, Aufgabe und Informationen zur Station.", description: "Rätsel, Aufgabe und Informationen zur Station.",
latlang: "", // latlang: "",
station: { station: {
description: "Rätsel, Aufgabe und Informationen zur Station.", description: "Rätsel, Aufgabe und Informationen zur Station.",
lattitude: 49.1474082, lattitude: 49.1474082,
@ -75,35 +47,63 @@
code: "" code: ""
}, },
isNewStation: true, isNewStation: true,
// stationObject: null, isEndstation: false,
loading: true,
} }
}, },
// props: [ 'stationObject' ], // props: [ 'stationObject' ],
created: function () { created: function () {
this.isNewStation = (this.$route.params.pos === undefined); console.log("CREATED");
console.log(this.tempStation);
if (this.$route.path.includes("endstation")) {
this.isEndstation = true;
this.station.description = "Endstation";
}
this.isNewStation = this.isEndstation ? false : (this.$route.params.pos === undefined);
// this.isNewStation = (this.$route.query.page === );
console.log(this.$route.path)
if (!this.isNewStation) {
this.station = JSON.parse(JSON.stringify(this.tempStation));
}
console.log("neu: " + this.isNewStation); console.log("neu: " + this.isNewStation);
console.log("pos: " + this.$route.params.pos); console.log("pos: " + this.$route.params.pos);
console.log(this.$route); console.log(this.$route);
console.log(this.station); console.log(this.station);
if (!this.isNewStation) { console.log("is newStation & is Endstation");
this.station = JSON.parse(JSON.stringify(this.tempStation)); console.log(this.isNewStation);
}
console.log(this.isEndstation);
console.log(this.station); console.log(this.station);
this.loading = false;
}, },
beforeMount: function () { beforeMount: function () {
}, },
mounted: function () { mounted: function () {
this.concatLatlang(); // this.concatLatlang();
}, },
computed: { computed: {
...mapGetters({ ...mapGetters({
tempStation: 'cacheCollector/GET_TEMPSTATION' tempStation: 'cacheCollector/GET_TEMPSTATION',
endStation: 'cacheCollector/GET_ENDSTATION'
}), }),
}, sourceStation() {
if (this.isEndstation) {
console.log("returned this.endStation")
return this.endStation;
} else {
console.log("returned this.tempStation")
return this.tempStation;
}
}
},
methods: { methods: {
updateCoords(event) { updateCoords(event) {
this.station.longitude = event[0]; // console.log("updateCoords")
this.station.lattitude = event[1]; // console.log(event)
if (!(event === undefined || event[0] === undefined || event[1] === undefined)) {
this.station.longitude = event[0];
this.station.lattitude = event[1];
}
}, },
separateLatlang() { separateLatlang() {
//console.log("separateLatlang()"); //console.log("separateLatlang()");
@ -121,40 +121,45 @@
console.log("saveStation(): "); console.log("saveStation(): ");
console.log(this.station); console.log(this.station);
console.log(this.isNewStation); console.log(this.isNewStation);
console.log(this.isEndstation);
console.log(this.$route.params.pos); console.log(this.$route.params.pos);
console.log("Test Latlang: " + this.validateLatLangFormat()); // console.log("Test Latlang: " + this.validateLatLangFormat());
if(!this.validateLatLangFormat()){ // if(!this.validateLatLangFormat()){
let title = "Falsche Formatierung"; // let title = "Falsche Formatierung";
let msg = "Die Koordinaten sind in einer falschen Formatierung eingegeben. Beispiel: 49.98767, 9.87637"; // let msg = "Die Koordinaten sind in einer falschen Formatierung eingegeben. Beispiel: 49.98767, 9.87637";
this.$store.commit('dialog/NEW_MESSAGE_DIALOG', {message: msg, title: title,}); // this.$store.commit('dialog/NEW_MESSAGE_DIALOG', {message: msg, title: title,});
} // }
if(this.validateEverything()) { if (this.isEndstation) {
console.log(this.station)
console.log("cacheCollector/SET_ENDSTATION")
this.$store.commit('cacheCollector/SET_ENDSTATION', this.station);
} else {
if (this.isNewStation) { if (this.isNewStation) {
this.$store.commit('cacheCollector/ADD_STATION', this.station); this.$store.commit('cacheCollector/ADD_STATION', this.station);
} else { } else {
this.$store.commit('cacheCollector/EDIT_STATION', {index: this.$route.params.pos, station: this.station}); this.$store.commit('cacheCollector/EDIT_STATION', {index: this.$route.params.pos, station: this.station});
this.$store.commit('cacheCollector/SET_TEMPSTATION', null); this.$store.commit('cacheCollector/SET_TEMPSTATION', null);
} }
let cache = this.$store.getters['cacheCollector/GET_CACHE'];
if (cache.hasOwnProperty('id')) {
this.$router.push({path: `/cache/${cache.id}`});
} else {
this.$router.push({path: `/cache`});
}
console.log("Station saved");
} }
let cache = this.$store.getters['cacheCollector/GET_CACHE'];
if (cache.hasOwnProperty('id')) {
this.$router.push({path: `/cache/${cache.id}`});
} else {
this.$router.push({path: `/cache`});
}
console.log("Station saved");
}, },
dismiss() { dismiss() {
this.$store.commit('cacheCollector/SET_TEMPSTATION', null); if (!this.isEndstation) this.$store.commit('cacheCollector/SET_TEMPSTATION', null);
this.$router.push({path: `/cache`}); this.$router.push({path: `/cache`});
}, },
validateLatLangFormat(){ validateLatLangFormat() {
var re = new RegExp('\\d+(\\.\\d+)?\\,(\\s)?\\d+(\\.\\d+)?'); var re = new RegExp('\\d+(\\.\\d+)?\\,(\\s)?\\d+(\\.\\d+)?');
return re.test(this.latlang); return re.test(this.latlang);
}, },
validateEverything(){ validateEverything() {
return this.validateLatLangFormat(); return this.validateLatLangFormat();
} }
} }

97
labswp_2019_sose_geocaching_frontend/frontend/src/pages/StationEndEdit.vue
View File

@ -1,97 +0,0 @@
<template>
<div class="q-ma-md">
<p class="text-h5">Endstation</p>
<p class="text-h6 q-mt-md">Location</p>
<q-img transition="fade"
class="q-mb-md "
:ratio="16/9"
src="https://www.buga2019.de/we-bilder/3.Gartenausstellung/Gelaendeplan/190320_Gelaendeplan-quadratisch.jpg"
></q-img>
<div class="row q-col-gutter-md">
<q-input class="col" dense stack-label filled v-model="latlang" @input="separateLatlang"
label="Breitengrad/Längengrad"/>
<div class="col-shrink">
<q-btn unelevated color="primary" class="full-height" icon="my_location"/>
</div>
</div>
<!-- <p class="text-h6 q-mt-md">Lösung</p>-->
<!-- <q-input class="col" dense stack-label filled v-model="station.solution" label="Lösung"/>-->
<!-- <q-input class="col q-mt-md" dense stack-label filled v-model="station.code" label="Code" readonly/>-->
<div class="row reverse q-mt-md q-gutter-x-md">
<q-btn @click="saveStation" unelevated color="primary" label="Speichern" icon-right="add"/>
<q-btn @click="dismiss" unelevated color="negative" label="verwerfen" icon-right="delete"/>
</div>
</div>
</template>
<script>
import {mapGetters} from 'vuex';
export default {
name: "Station",
data() {
return {
description: "Rätsel, Aufgabe und Informationen zur Station.",
latlang: "",
station: {
description: "Beschreibung",
lattitude: 49.1474082,
longitude: 9.2065282,
solution: "",
code: ""
},
// stationObject: null,
}
},
// props: [ 'stationObject' ],
created: function () {
//this.isNewStation = (this.$route.params.pos === undefined);
console.log("pos: " + this.$route.params.pos);
console.log(this.$route);
console.log(this.station);
this.station = JSON.parse(JSON.stringify(this.tempStation));
console.log(this.station);
},
beforeMount: function () {
},
mounted: function () {
this.concatLatlang();
},
computed: {
...mapGetters({
tempStation: 'cacheCollector/GET_ENDSTATION'
}),
},
methods: {
separateLatlang() {
//console.log("separateLatlang()");
if (this.latlang.includes(',')) {
this.station.lattitude = this.latlang.substr(0, this.latlang.indexOf(',')).trim();
this.station.longitude = this.latlang.substr(this.latlang.indexOf(',') + 1, this.latlang.length).trim();
console.log(this.latlang);
console.log(this.station.lattitude + ", " + this.station.longitude);
}
},
concatLatlang() {
this.latlang = this.station.lattitude + ", " + this.station.longitude;
},
saveStation() {
console.log("saveStation(): ");
console.log(this.station);
this.$store.commit('cacheCollector/SET_ENDSTATION', this.station);
this.$router.push({path: `/cache`});
console.log("station saved..");
},
dismiss() {
//this.$store.commit('cacheCollector/SET_ENDSTATION', null);
this.$router.push({path: `/cache`});
}
}
}
</script>
<style scoped>
</style>

4
labswp_2019_sose_geocaching_frontend/frontend/src/router/routes.js
View File

@ -63,7 +63,7 @@ const routes = [
{ {
path: "/endstation/", path: "/endstation/",
component: () => import("layouts/MyLayout.vue"), component: () => import("layouts/MyLayout.vue"),
children: [{ path: "", component: () => import("pages/StationEndEdit.vue") }], children: [{ path: "", component: () => import("pages/StationEdit.vue") }],
meta: { meta: {
public: false, // Allow access to even if not logged in public: false, // Allow access to even if not logged in
onlyWhenLoggedOut: false, onlyWhenLoggedOut: false,
@ -83,7 +83,7 @@ const routes = [
{ {
path: "/tempendstation/", path: "/tempendstation/",
component: () => import("layouts/MyLayout.vue"), component: () => import("layouts/MyLayout.vue"),
children: [{path: "", component: () => import("pages/StationEndEdit.vue")}], children: [{path: "", component: () => import("pages/StationEdit.vue")}],
meta: { meta: {
public: false, // Allow access to even if not logged in public: false, // Allow access to even if not logged in
onlyWhenLoggedOut: false, onlyWhenLoggedOut: false,