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

Merge branch 'develop' of https://bitbucket-student.it.hs-heilbronn.de/scm/labswp19/labswp_2019_sose_geocaching into develop

Browse Source
This commit is contained in:
Katharina Will 2019-06-04 17:52:56 +02:00
commit bf827c1878
9 changed files with 484 additions and 225 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
labswp_2019_sose_geocaching_frontend/frontend/package.json
View File

@ -19,7 +19,9 @@
"openlayers": "^4.6.5", "openlayers": "^4.6.5",
"quasar": "^1.0.0-rc.2", "quasar": "^1.0.0-rc.2",
"vue-qrcode-reader": "^1.4.2", "vue-qrcode-reader": "^1.4.2",
"vuelayers": "^0.11.4" "vuelayers": "^0.11.4",
"lodash": "^4.17.11",
"ol": "^5.3.1"
}, },
"devDependencies": { "devDependencies": {
"@quasar/app": "^1.0.0-rc.4", "@quasar/app": "^1.0.0-rc.4",

337
labswp_2019_sose_geocaching_frontend/frontend/src/components/mapClickable.vue Normal file
View File

@ -0,0 +1,337 @@
<template>
<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">-->
<!-- &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;-->
<!-- </template>-->
<!-- </vl-interaction-select>-->
<!--// interactions -->
<!-- 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="[128, 128]"></vl-style-icon>
</vl-style-box>
</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 -->
</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>
</div>
</template>
<script>
import Vue from 'vue'
import VueLayers from 'vuelayers'
import 'vuelayers/lib/style.css' // needs css-loader
import {camelCase, kebabCase} from 'lodash'
import {addProj, createMultiPointGeom, createProj, createStyle, findPointOnSurface} from 'vuelayers/lib/ol-ext'
import ScaleLine from 'ol/control/ScaleLine'
import FullScreen from 'ol/control/FullScreen'
import OverviewMap from 'ol/control/OverviewMap'
import ZoomSlider from 'ol/control/ZoomSlider'
Vue.use(VueLayers);
// Custom projection for static Image layer
let x = 1024 * 10000
let y = 968 * 10000
let imageExtent = [-x / 2, -y / 2, x / 2, y / 2]
let customProj = createProj({
code: 'xkcd-image',
units: 'pixels',
extent: imageExtent,
})
// add to the list of known projections
// after that it can be used by code
addProj(customProj)
const easeInOut = t => 1 - Math.pow(1 - t, 3)
const methods = {
camelCase,
pointOnSurface: findPointOnSurface,
geometryTypeToCmpName(type) {
return 'vl-geom-' + kebabCase(type)
},
/**
* Packman layer Style function factory
* @return {ol.StyleFunction}
*/
pacmanStyleFunc() {
const pacman = [
createStyle({
strokeColor: '#de9147',
strokeWidth: 3,
fillColor: [222, 189, 36, 0.8],
}),
]
const path = [
createStyle({
strokeColor: 'blue',
strokeWidth: 1,
}),
createStyle({
imageRadius: 5,
imageFillColor: 'orange',
geom(feature) {
// geometry is an LineString, convert it to MultiPoint to style vertex
return createMultiPointGeom(feature.getGeometry().getCoordinates())
},
}),
]
const eye = [
createStyle({
imageRadius: 6,
imageFillColor: '#444444',
}),
]
},
/**
* Cluster layer style function factory
* @return {ol.StyleFunction}
*/
clusterStyleFunc() {
const cache = {}
return function __clusterStyleFunc(feature) {
const size = feature.get('features').length
let style = cache[size]
if (!style) {
style = createStyle({
imageRadius: 10,
strokeColor: '#fff',
fillColor: '#3399cc',
text: size.toString(),
textFillColor: '#fff',
})
cache[size] = style
}
return [style]
}
},
selectFilter(feature) {
return ['position-feature'].indexOf(feature.getId()) === -1
},
onUpdatePosition(coordinate) {
console.log("onUpdatePosition")
this.deviceCoordinate = coordinate;
this.$emit('updatecoords', this.center);
},
onMapPostCompose({vectorContext, frameState}) {
if (!this.$refs.marker || !this.$refs.marker.$feature) return
const feature = this.$refs.marker.$feature
if (!feature.getGeometry() || !feature.getStyle()) return
const flashGeom = feature.getGeometry().clone()
const duration = feature.get('duration')
const elapsed = frameState.time - feature.get('start')
const elapsedRatio = elapsed / duration
const radius = easeInOut(elapsedRatio) * 35 + 5
const opacity = easeInOut(1 - elapsedRatio)
const fillOpacity = easeInOut(0.5 - elapsedRatio)
vectorContext.setStyle(createStyle({
imageRadius: radius,
fillColor: [119, 170, 203, fillOpacity],
strokeColor: [119, 170, 203, opacity],
strokeWidth: 2 + opacity,
}))
vectorContext.drawGeometry(flashGeom)
vectorContext.setStyle(feature.getStyle()(feature)[0])
vectorContext.drawGeometry(feature.getGeometry())
if (elapsed > duration) {
feature.set('start', Date.now())
}
this.$refs.map.render()
},
onMapMounted() {
// 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(),
])
},
// base layers
showBaseLayer(name) {
let layer = this.baseLayers.find(layer => layer.visible)
if (layer != null) {
layer.visible = false
}
layer = this.baseLayers.find(layer => layer.name === name)
if (layer != null) {
layer.visible = true
}
},
// map panel
mapPanelTabClasses(tab) {
return {
'is-active': this.mapPanel.tab === tab,
}
},
showMapPanelLayer(layer) {
layer.visible = !layer.visible
},
showMapPanelTab(tab) {
this.mapPanel.tab = tab
if (tab !== 'draw') {
this.drawType = undefined
}
},
setCenter(position) {
this.center = position;
this.$emit('updatecoords', this.center);
}
}
export default {
name: 'mapclickable',
methods,
props: {
coords: Array,
cacheObject: Object,
stationObject: Object,
},
data() {
return {
center: [9.208858198755664, 49.14785422283188],
zoom: 15,
rotation: 0,
clickCoordinate: undefined,
selectedFeatures: [],
deviceCoordinate: undefined,
mapPanel: {
tab: 'state',
},
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',
// },
// ],
drawType: "point",
drawnFeatures: [],
// base layers
baseLayers: [
{
name: 'osm',
title: 'OpenStreetMap',
visible: true,
},
],
// layers config
}
},
created() {
if (!(this.coords === undefined || this.coords[0] === undefined || this.coords[1] === undefined)) {
this.center = this.coords;
}
},
computed: {
computedCoords: {
get() {
return this.center;
},
set(val) {
this.center = val;
this.$emit('updatecoords', this.center);
}
}
},
}
</script>
<style>
</style>

123
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,75 +190,73 @@
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 () {
var re = new RegExp('^[0-9]+$'); let re = new RegExp('^[0-9]+$');
var 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();
} }
}, },

13
labswp_2019_sose_geocaching_frontend/frontend/src/pages/Register.vue
View File

@ -7,7 +7,7 @@
<div class="col"> <div class="col">
<div class=""> <div class="">
<div class="" style="max-width: 440px"> <div class="" style="max-width: 440px">
<q-input lazy-rules outlined filled stack-label v-model="user.name" type="text" label="Vor- und Nachname" <q-input lazy-rules outlined filled stack-label v-model="user.name" type="text" label="Vor- und Nachname" autocomplete="new-password"
:rules="[val=>validateUsername(val)||'Name muss mindestens 2 Zeichen lang sein und darf nur aus Buchstaben, Zahlen und Unterstrichen bestehen!']"/> :rules="[val=>validateUsername(val)||'Name muss mindestens 2 Zeichen lang sein und darf nur aus Buchstaben, Zahlen und Unterstrichen bestehen!']"/>
</div> </div>
</div> </div>
@ -15,7 +15,7 @@
<div class="col"> <div class="col">
<div class=""> <div class="">
<div class="" style="max-width: 440px"> <div class="" style="max-width: 440px">
<q-input lazy-rules outlined filled stack-label v-model="user.email" type="text" label="E-Mail" <q-input lazy-rules outlined filled stack-label v-model="user.email" type="text" label="E-Mail" autocomplete="new-password"
:rules="[val=>validateEmail(val)||'Bitte gültige E-Mail angeben!']"/> :rules="[val=>validateEmail(val)||'Bitte gültige E-Mail angeben!']"/>
</div> </div>
</div> </div>
@ -23,7 +23,7 @@
<div class="col"> <div class="col">
<div class=""> <div class="">
<div class="" style="max-width: 440px"> <div class="" style="max-width: 440px">
<q-input lazy-rules outlined filled stack-label v-model="user.checkemail" type="text" <q-input lazy-rules outlined filled stack-label v-model="user.checkemail" type="text" autocomplete="new-password"
label="E-Mail erneut eingeben" placeholer="Email" label="E-Mail erneut eingeben" placeholer="Email"
:rules="[val=>val===user.email||'E-Mail stimmt nicht überein!']"/> :rules="[val=>val===user.email||'E-Mail stimmt nicht überein!']"/>
</div> </div>
@ -32,7 +32,7 @@
<div class="col"> <div class="col">
<div class=""> <div class="">
<div class="" style="max-width: 440px"> <div class="" style="max-width: 440px">
<q-input lazy-rules outlined filled stack-label v-model="user.password" type="password" <q-input lazy-rules outlined filled stack-label v-model="user.password" type="password" autocomplete="new-password"
label="Passwort" label="Passwort"
:rules="[val=>val.length>=8||'Passwort muss mindestens 8 Zeichen lang sein!']"/> :rules="[val=>val.length>=8||'Passwort muss mindestens 8 Zeichen lang sein!']"/>
</div> </div>
@ -41,7 +41,7 @@
<div class="col"> <div class="col">
<div class=""> <div class="">
<div class="" style="max-width: 440px"> <div class="" style="max-width: 440px">
<q-input lazy-rules outlined filled stack-label v-model="user.checkpassword" type="password" <q-input lazy-rules outlined filled stack-label v-model="user.checkpassword" type="password" autocomplete="new-password"
label="Passwort erneut eingeben" label="Passwort erneut eingeben"
:rules="[val=>val===user.password||'Passwort stimmt nicht überein']"/> :rules="[val=>val===user.password||'Passwort stimmt nicht überein']"/>
</div> </div>
@ -97,7 +97,8 @@
}, },
methods: { methods: {
validateEmail(email) { validateEmail(email) {
var re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/; //var re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
let re = new RegExp('^[a-zA-Z0-9.!#$%&\'*+/=?^_`{|}~-]+@[A-Z0-9.-]+\\.[A-Z]{2,}$');
return re.test(String(email).toLowerCase()); return re.test(String(email).toLowerCase());
}, },
register: function () { register: function () {

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

@ -1,46 +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>
<vl-map :load-tiles-while-animating="true" :load-tiles-while-interacting="true" <mapclick v-if="!loading" :coords="[this.station.longitude, this.station.lattitude]" @updatecoords="updateCoords($event)">
data-projection="EPSG:4326">
<vl-view :zoom.sync="zoom" :center.sync="center" :rotation.sync="rotation"></vl-view>
<vl-geoloc @update:position="geolocPosition = $event"> </mapclick>
<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"/>
<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"/>
@ -51,14 +30,15 @@
<script> <script>
import {mapGetters} from 'vuex'; import {mapGetters} from 'vuex';
import mapclick from "../components/mapClickable";
export default { export default {
name: "Station", name: "Station",
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,
@ -67,32 +47,64 @@
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) {
// 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() { separateLatlang() {
//console.log("separateLatlang()"); //console.log("separateLatlang()");
if (this.latlang.includes(',')) { if (this.latlang.includes(',')) {
@ -109,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,

1
labswp_2019_sose_geocaching_frontend/frontend/src/statics/map-marker_green.svg
View File

@ -1 +0,0 @@
<?xml version="1.0" ?><svg height="24" version="1.1" width="24" xmlns="http://www.w3.org/2000/svg" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"><g transform="translate(0 -1028.4)"><path d="m12 1028.4c-4.4 0-8 3.6-8 8 0 1.4.4 2.8 1 3.9l.3.6 6.6 11.5 6.6-11.5c.1-.2.2-.3.3-.5l.1-.1c.6-1.2 1-2.5 1-3.9.1-4.4-3.5-8-7.9-8zm0 4c2.2 0 4 1.8 4 4s-1.8 4-4 4-4-1.8-4-4 1.8-4 4-4z" fill="#509b1a"/><path d="m12 1031.4c-2.8 0-5 2.2-5 5s2.2 5 5 5 5-2.2 5-5-2.2-5-5-5zm0 2c1.7 0 3 1.3 3 3s-1.3 3-3 3-3-1.3-3-3 1.3-3 3-3z" fill="#368220"/></g></svg>
Side by Side

Before

Width:  |  Height:  |  Size: 632 B

1
labswp_2019_sose_geocaching_frontend/frontend/src/statics/map-marker_grey.svg
View File

@ -1 +0,0 @@
<?xml version="1.0" ?><svg height="24" version="1.1" width="24" xmlns="http://www.w3.org/2000/svg" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"><g opacity=".75" transform="translate(0 -1028.4)"><path d="m12 1028.4c-4.4 0-8 3.6-8 8 0 1.4.4 2.8 1 3.9l.3.6 6.6 11.5 6.6-11.5c.1-.2.2-.3.3-.5l.1-.1c.6-1.2 1-2.5 1-3.9.1-4.4-3.5-8-7.9-8zm0 4c2.2 0 4 1.8 4 4s-1.8 4-4 4-4-1.8-4-4 1.8-4 4-4z" fill="#636363"/><path d="m12 1031.4c-2.8 0-5 2.2-5 5s2.2 5 5 5 5-2.2 5-5-2.2-5-5-5zm0 2c1.7 0 3 1.3 3 3s-1.3 3-3 3-3-1.3-3-3 1.3-3 3-3z" fill="#404040"/></g></svg>
Side by Side

Before

Width:  |  Height:  |  Size: 646 B