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>
<div style="height: 400px">
<vl-map v-if="mapVisible" class="map" ref="map" :load-tiles-while-animating="true"
:load-tiles-while-interacting="true"
@click="clickCoordinate = $event.coordinate" @postcompose="onMapPostCompose"
data-projection="EPSG:4326" @mounted="onMapMounted">
<!-- map view aka ol.View -->
<vl-view ref="view" :center.sync="computedCoords" :zoom.sync="zoom" :rotation.sync="rotation"></vl-view>
<div>
<div class="q-mb-sm" style="height: 400px">
<vl-map v-if="mapVisible" class="map" ref="map" :load-tiles-while-animating="true"
:load-tiles-while-interacting="true"
@click="clickCoordinate = $event.coordinate" @postcompose="onMapPostCompose"
data-projection="EPSG:4326" @mounted="onMapMounted">
<!-- map view aka ol.View -->
<vl-view ref="view" :center.sync="computedCoords" :zoom.sync="zoom" :rotation.sync="rotation"></vl-view>
<!-- interactions -->
<vl-interaction-select :features.sync="selectedFeatures" v-if="drawType == null">
<template slot-scope="select">
<!-- select styles -->
<vl-style-box>
<vl-style-stroke color="#423e9e" :width="7"></vl-style-stroke>
<vl-style-fill :color="[254, 178, 76, 0.7]"></vl-style-fill>
<vl-style-circle :radius="5">
<vl-style-stroke color="#423e9e" :width="7"></vl-style-stroke>
<vl-style-fill :color="[254, 178, 76, 0.7]"></vl-style-fill>
</vl-style-circle>
</vl-style-box>
<vl-style-box :z-index="1">
<vl-style-stroke color="#d43f45" :width="2"></vl-style-stroke>
<vl-style-circle :radius="5">
<vl-style-stroke color="#d43f45" :width="2"></vl-style-stroke>
</vl-style-circle>
</vl-style-box>
<!--// select styles -->
<!-- interactions -->
<!-- <vl-interaction-select :features.sync="selectedFeatures" v-if="drawType == null">-->
<!-- <template slot-scope="select">-->
<!-- &lt;!&ndash; select styles &ndash;&gt;-->
<!-- <vl-style-box>-->
<!-- <vl-style-stroke color="#423e9e" :width="7"></vl-style-stroke>-->
<!-- <vl-style-fill :color="[254, 178, 76, 0.7]"></vl-style-fill>-->
<!-- <vl-style-circle :radius="5">-->
<!-- <vl-style-stroke color="#423e9e" :width="7"></vl-style-stroke>-->
<!-- <vl-style-fill :color="[254, 178, 76, 0.7]"></vl-style-fill>-->
<!-- </vl-style-circle>-->
<!-- </vl-style-box>-->
<!-- <vl-style-box :z-index="1">-->
<!-- <vl-style-stroke color="#d43f45" :width="2"></vl-style-stroke>-->
<!-- <vl-style-circle :radius="5">-->
<!-- <vl-style-stroke color="#d43f45" :width="2"></vl-style-stroke>-->
<!-- </vl-style-circle>-->
<!-- </vl-style-box>-->
<!-- &lt;!&ndash;// select styles &ndash;&gt;-->
<!-- selected feature popup -->
<vl-overlay class="feature-popup" v-for="feature in select.features" :key="feature.id" :id="feature.id"
:position="pointOnSurface(feature.geometry)" :auto-pan="true"
: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 -->
<!-- </template>-->
<!-- </vl-interaction-select>-->
<!--// interactions -->
<!-- geolocation -->
<vl-geoloc @update:position="onUpdatePosition">
<template slot-scope="geoloc">
<!-- !!Snippet -->
<vl-feature v-if="geoloc.position" id="position-feature">
<vl-geom-point :coordinates="geoloc.position"></vl-geom-point>
<!-- geolocation -->
<vl-geoloc @update:position="onUpdatePosition">
<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>
<!--// geolocation -->
<vl-feature id="marker" ref="marker">
<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="[64, 64]"></vl-style-icon>
:size="[128, 128]"></vl-style-icon>
</vl-style-box>
</vl-feature>
<!-- !!Snippet -->
</template>
</vl-geoloc>
<!--// 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 -->
</template>
</vl-feature>
<!-- !!Snippet -->
<!--// overlay marker -->
<!-- base layers -->
<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>
</vl-layer-tile>
<!--// base layers -->
<!-- base layers -->
<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>
</vl-layer-tile>
<!--// base layers -->
<!-- draw components -->
<!-- <vl-layer-vector id="draw-pane" v-if="mapPanel.tab === 'state'">-->
<!-- <vl-source-vector ident="draw-target" :features.sync="drawnFeatures">-->
</vl-map>
</div>
<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>
</template>
@ -192,17 +142,6 @@
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
@ -271,12 +210,12 @@
// now ol.Map instance is ready and we can work with it directly
this.$refs.map.$map.getControls().extend([
new ScaleLine(),
new FullScreen(),
new OverviewMap({
collapsed: false,
collapsible: true,
}),
new ZoomSlider(),
// new FullScreen(),
// new OverviewMap({
// collapsed: false,
// collapsible: true,
// }),
// new ZoomSlider(),
])
},
// base layers
@ -306,6 +245,10 @@
this.drawType = undefined
}
},
setCenter(position) {
this.center = position;
this.$emit('updatecoords', this.center);
}
}
@ -330,33 +273,33 @@
},
panelOpen: true,
mapVisible: true,
drawControls: [
{
type: 'point',
label: 'Draw Point',
icon: 'map-marker',
},
{
type: 'line-string',
label: 'Draw LineString',
icon: 'minus',
},
{
type: 'polygon',
label: 'Draw Polygon',
icon: 'square-o',
},
{
type: 'circle',
label: 'Draw Circle',
icon: 'circle-thin',
},
{
type: undefined,
label: 'Stop drawing',
icon: 'times',
},
],
// drawControls: [
// {
// type: 'point',
// label: 'Draw Point',
// icon: 'map-marker',
// },
// {
// type: 'line-string',
// label: 'Draw LineString',
// icon: 'minus',
// },
// {
// type: 'polygon',
// label: 'Draw Polygon',
// icon: 'square-o',
// },
// {
// type: 'circle',
// label: 'Draw Circle',
// icon: 'circle-thin',
// },
// {
// type: undefined,
// label: 'Stop drawing',
// icon: 'times',
// },
// ],
drawType: "point",
drawnFeatures: [],
// base layers
@ -366,28 +309,14 @@
title: 'OpenStreetMap',
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
}
},
mounted() {
created() {
if (!(this.coords === undefined || this.coords[0] === undefined || this.coords[1] === undefined)) {
this.center = this.coords;
}
},
computed: {
computedCoords: {
@ -400,7 +329,7 @@
}
}
}
},
}
</script>

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

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

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

@ -1,53 +1,25 @@
<template>
<div class="q-ma-md">
<p class="text-h5">Neue Station</p>
<q-editor
:toolbar="[
<p class="text-h5">{{ isEndstation ? "Endstation bearbeiten"
: isNewStation ? "Neue Station"
: "Station bearbeiten"}}</p>
<q-editor v-show="!isEndstation && station.description"
:toolbar="[
['bold', 'italic', 'strike', 'underline'],
['undo', 'redo'],
['hr', 'link'],
['fullscreen'],
]"
v-model="station.description" min-height="10rem"/>
v-model="station.description" min-height="10rem"/>
<!--<q-input-->
<!--v-model="description"-->
<!--filled-->
<!--type="textarea"-->
<!--/>-->
<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>
<!-- <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">
<q-btn @click="saveStation" unelevated color="primary" label="Speichern" icon-right="add"/>
<q-btn @click="dismiss" unelevated color="negative" label="verwerfen" icon-right="delete"/>
@ -62,11 +34,11 @@
export default {
name: "Station",
components: { mapclick },
components: {mapclick},
data() {
return {
description: "Rätsel, Aufgabe und Informationen zur Station.",
latlang: "",
// latlang: "",
station: {
description: "Rätsel, Aufgabe und Informationen zur Station.",
lattitude: 49.1474082,
@ -75,35 +47,63 @@
code: ""
},
isNewStation: true,
// stationObject: null,
isEndstation: false,
loading: true,
}
},
// props: [ 'stationObject' ],
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("pos: " + this.$route.params.pos);
console.log(this.$route);
console.log(this.station);
if (!this.isNewStation) {
this.station = JSON.parse(JSON.stringify(this.tempStation));
}
console.log("is newStation & is Endstation");
console.log(this.isNewStation);
console.log(this.isEndstation);
console.log(this.station);
this.loading = false;
},
beforeMount: function () {
},
mounted: function () {
this.concatLatlang();
// this.concatLatlang();
},
computed: {
...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: {
updateCoords(event) {
this.station.longitude = event[0];
this.station.lattitude = event[1];
// console.log("updateCoords")
// console.log(event)
if (!(event === undefined || event[0] === undefined || event[1] === undefined)) {
this.station.longitude = event[0];
this.station.lattitude = event[1];
}
},
separateLatlang() {
//console.log("separateLatlang()");
@ -121,40 +121,45 @@
console.log("saveStation(): ");
console.log(this.station);
console.log(this.isNewStation);
console.log(this.isEndstation);
console.log(this.$route.params.pos);
console.log("Test Latlang: " + this.validateLatLangFormat());
if(!this.validateLatLangFormat()){
let title = "Falsche Formatierung";
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,});
}
if(this.validateEverything()) {
// console.log("Test Latlang: " + this.validateLatLangFormat());
// if(!this.validateLatLangFormat()){
// let title = "Falsche Formatierung";
// 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,});
// }
if (this.isEndstation) {
console.log(this.station)
console.log("cacheCollector/SET_ENDSTATION")
this.$store.commit('cacheCollector/SET_ENDSTATION', this.station);
} else {
if (this.isNewStation) {
this.$store.commit('cacheCollector/ADD_STATION', this.station);
} else {
this.$store.commit('cacheCollector/EDIT_STATION', {index: this.$route.params.pos, station: this.station});
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() {
this.$store.commit('cacheCollector/SET_TEMPSTATION', null);
if (!this.isEndstation) this.$store.commit('cacheCollector/SET_TEMPSTATION', null);
this.$router.push({path: `/cache`});
},
validateLatLangFormat(){
validateLatLangFormat() {
var re = new RegExp('\\d+(\\.\\d+)?\\,(\\s)?\\d+(\\.\\d+)?');
return re.test(this.latlang);
},
validateEverything(){
validateEverything() {
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/",
component: () => import("layouts/MyLayout.vue"),
children: [{ path: "", component: () => import("pages/StationEndEdit.vue") }],
children: [{ path: "", component: () => import("pages/StationEdit.vue") }],
meta: {
public: false, // Allow access to even if not logged in
onlyWhenLoggedOut: false,
@ -83,7 +83,7 @@ const routes = [
{
path: "/tempendstation/",
component: () => import("layouts/MyLayout.vue"),
children: [{path: "", component: () => import("pages/StationEndEdit.vue")}],
children: [{path: "", component: () => import("pages/StationEdit.vue")}],
meta: {
public: false, // Allow access to even if not logged in
onlyWhenLoggedOut: false,