From 3dac7ebb2c2fa14d8d8eebb75b627a50c5bcf31b Mon Sep 17 00:00:00 2001
From: Timo Volkmann <volkmann@stud.hs-heilbronn.de>
Date: Sat, 1 Jun 2019 15:44:48 +0200
Subject: [PATCH 1/3] Station: choose coordinates on map

---
 .../frontend/package.json                     |   4 +-
 .../frontend/src/components/mapClickable.vue  | 408 ++++++++++++++++++
 .../frontend/src/pages/Cache.vue              |   4 +-
 .../frontend/src/pages/StationEdit.vue        |  44 +-
 .../frontend/src/statics/map-marker_blue.svg  |  18 -
 .../frontend/src/statics/map-marker_green.svg |  18 -
 .../frontend/src/statics/map-marker_grey.svg  |  19 -
 .../src/statics/map-marker_yellow.svg         |  18 -
 8 files changed, 441 insertions(+), 92 deletions(-)
 create mode 100644 labswp_2019_sose_geocaching_frontend/frontend/src/components/mapClickable.vue
 delete mode 100644 labswp_2019_sose_geocaching_frontend/frontend/src/statics/map-marker_blue.svg
 delete mode 100644 labswp_2019_sose_geocaching_frontend/frontend/src/statics/map-marker_green.svg
 delete mode 100644 labswp_2019_sose_geocaching_frontend/frontend/src/statics/map-marker_grey.svg
 delete mode 100644 labswp_2019_sose_geocaching_frontend/frontend/src/statics/map-marker_yellow.svg

diff --git a/labswp_2019_sose_geocaching_frontend/frontend/package.json b/labswp_2019_sose_geocaching_frontend/frontend/package.json
index 0657383..f262cce 100644
--- a/labswp_2019_sose_geocaching_frontend/frontend/package.json
+++ b/labswp_2019_sose_geocaching_frontend/frontend/package.json
@@ -19,7 +19,9 @@
     "openlayers": "^4.6.5",
     "quasar": "^1.0.0-rc.2",
     "vue-qrcode-reader": "^1.4.2",
-    "vuelayers": "^0.11.4"
+    "vuelayers": "^0.11.4",
+    "lodash": "^4.17.11",
+    "ol": "^5.3.1"
   },
   "devDependencies": {
     "@quasar/app": "^1.0.0-rc.4",
diff --git a/labswp_2019_sose_geocaching_frontend/frontend/src/components/mapClickable.vue b/labswp_2019_sose_geocaching_frontend/frontend/src/components/mapClickable.vue
new file mode 100644
index 0000000..9687ea3
--- /dev/null
+++ b/labswp_2019_sose_geocaching_frontend/frontend/src/components/mapClickable.vue
@@ -0,0 +1,408 @@
+<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>
+
+      <!-- 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 -->
+
+          <!-- 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 -->
+
+      <!-- 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>
+            <vl-style-box>
+              <vl-style-icon src="./statics/map-marker.svg" :scale="2" :anchor="[0.095,0.17]"
+                             :size="[64, 64]"></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 -->
+
+
+      <!-- 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-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>
+
+<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',
+        }),
+      ]
+
+      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
+     * @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
+      }
+    },
+  }
+
+
+  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,
+          },
+          {
+            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() {
+    },
+    computed: {
+      computedCoords: {
+        get() {
+          return this.center;
+        },
+        set(val) {
+          this.center = val;
+          this.$emit('updatecoords', this.center);
+        }
+
+      }
+    }
+  }
+</script>
+
+<style>
+</style>
diff --git a/labswp_2019_sose_geocaching_frontend/frontend/src/pages/Cache.vue b/labswp_2019_sose_geocaching_frontend/frontend/src/pages/Cache.vue
index e3784e1..edb0978 100644
--- a/labswp_2019_sose_geocaching_frontend/frontend/src/pages/Cache.vue
+++ b/labswp_2019_sose_geocaching_frontend/frontend/src/pages/Cache.vue
@@ -251,8 +251,8 @@
         }
       },
       validateRankingPoints: function () {
-        var re = new RegExp('^[0-9]+$');
-        var rps = String.valueOf(this.computedCache.rankingPoints);
+        let re = new RegExp('^[0-9]+$');
+        let rps = String(this.computedCache.rankingPoints);
         return re.test(rps);
       },
       validateEverything(){
diff --git a/labswp_2019_sose_geocaching_frontend/frontend/src/pages/StationEdit.vue b/labswp_2019_sose_geocaching_frontend/frontend/src/pages/StationEdit.vue
index 1de5ced..d9a004d 100644
--- a/labswp_2019_sose_geocaching_frontend/frontend/src/pages/StationEdit.vue
+++ b/labswp_2019_sose_geocaching_frontend/frontend/src/pages/StationEdit.vue
@@ -15,25 +15,32 @@
     <!--type="textarea"-->
     <!--/>-->
     <p class="text-h6 q-mt-md">Location</p>
-    <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>
+    <mapclick :coords="[this.station.longitude, this.station.lattitude]" @updatecoords="updateCoords($event)">
 
-      <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>
+    </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-layer-tile id="osm">
-        <vl-source-osm></vl-source-osm>
-      </vl-layer-tile>
-    </vl-map>
+<!--      <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>
@@ -51,10 +58,11 @@
 
 <script>
   import {mapGetters} from 'vuex';
+  import mapclick from "../components/mapClickable";
 
   export default {
     name: "Station",
-
+    components: { mapclick },
     data() {
       return {
         description: "Rätsel, Aufgabe und Informationen zur Station.",
@@ -91,8 +99,12 @@
       ...mapGetters({
         tempStation: 'cacheCollector/GET_TEMPSTATION'
       }),
-    },
+  },
     methods: {
+      updateCoords(event) {
+        this.station.longitude = event[0];
+        this.station.lattitude = event[1];
+      },
       separateLatlang() {
         //console.log("separateLatlang()");
         if (this.latlang.includes(',')) {
diff --git a/labswp_2019_sose_geocaching_frontend/frontend/src/statics/map-marker_blue.svg b/labswp_2019_sose_geocaching_frontend/frontend/src/statics/map-marker_blue.svg
deleted file mode 100644
index 1332e2a..0000000
--- a/labswp_2019_sose_geocaching_frontend/frontend/src/statics/map-marker_blue.svg
+++ /dev/null
@@ -1,18 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 22.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<svg version="1.1"
-	 id="Ebene_1" 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#"
-	 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 24 24"
-	 style="enable-background:new 0 0 24 24;" xml:space="preserve">
-<style type="text/css">
-	.st0{fill:#1E64F8;}
-	.st1{fill:#1C5FC5;}
-</style>
-<g transform="translate(0 -1028.4)">
-	<path class="st0" d="M12,1028.4c-4.4,0-8,3.6-8,8c0,1.4,0.4,2.8,1,3.9c0.1,0.2,0.2,0.4,0.3,0.6l6.6,11.5l6.6-11.5
-		c0.1-0.2,0.2-0.3,0.3-0.5l0.1-0.1c0.6-1.2,1-2.5,1-3.9C20,1032,16.4,1028.4,12,1028.4z M12,1032.4c2.2,0,4,1.8,4,4c0,2.2-1.8,4-4,4
-		c-2.2,0-4-1.8-4-4C8,1034.2,9.8,1032.4,12,1032.4z"/>
-	<path class="st1" d="M12,1031.4c-2.8,0-5,2.2-5,5c0,2.8,2.2,5,5,5c2.8,0,5-2.2,5-5C17,1033.6,14.8,1031.4,12,1031.4z M12,1033.4
-		c1.7,0,3,1.3,3,3s-1.3,3-3,3s-3-1.3-3-3S10.3,1033.4,12,1033.4z"/>
-</g>
-</svg>
diff --git a/labswp_2019_sose_geocaching_frontend/frontend/src/statics/map-marker_green.svg b/labswp_2019_sose_geocaching_frontend/frontend/src/statics/map-marker_green.svg
deleted file mode 100644
index 303fba5..0000000
--- a/labswp_2019_sose_geocaching_frontend/frontend/src/statics/map-marker_green.svg
+++ /dev/null
@@ -1,18 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 22.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<svg version="1.1"
-	 id="Ebene_1" 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#"
-	 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 24 24"
-	 style="enable-background:new 0 0 24 24;" xml:space="preserve">
-<style type="text/css">
-	.st0{fill:#509B1A;}
-	.st1{fill:#368220;}
-</style>
-<g transform="translate(0 -1028.4)">
-	<path class="st0" d="M12,1028.4c-4.4,0-8,3.6-8,8c0,1.4,0.4,2.8,1,3.9c0.1,0.2,0.2,0.4,0.3,0.6l6.6,11.5l6.6-11.5
-		c0.1-0.2,0.2-0.3,0.3-0.5l0.1-0.1c0.6-1.2,1-2.5,1-3.9C20,1032,16.4,1028.4,12,1028.4z M12,1032.4c2.2,0,4,1.8,4,4c0,2.2-1.8,4-4,4
-		c-2.2,0-4-1.8-4-4C8,1034.2,9.8,1032.4,12,1032.4z"/>
-	<path class="st1" d="M12,1031.4c-2.8,0-5,2.2-5,5c0,2.8,2.2,5,5,5c2.8,0,5-2.2,5-5C17,1033.6,14.8,1031.4,12,1031.4z M12,1033.4
-		c1.7,0,3,1.3,3,3s-1.3,3-3,3s-3-1.3-3-3S10.3,1033.4,12,1033.4z"/>
-</g>
-</svg>
diff --git a/labswp_2019_sose_geocaching_frontend/frontend/src/statics/map-marker_grey.svg b/labswp_2019_sose_geocaching_frontend/frontend/src/statics/map-marker_grey.svg
deleted file mode 100644
index c8c75bf..0000000
--- a/labswp_2019_sose_geocaching_frontend/frontend/src/statics/map-marker_grey.svg
+++ /dev/null
@@ -1,19 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 22.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<svg version="1.1"
-	 id="Ebene_1" 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#"
-	 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 24 24"
-	 style="enable-background:new 0 0 24 24;" xml:space="preserve">
-<style type="text/css">
-	.st0{opacity:0.75;}
-	.st1{fill:#636363;}
-	.st2{fill:#404040;}
-</style>
-<g transform="translate(0 -1028.4)" class="st0">
-	<path class="st1" d="M12,1028.4c-4.4,0-8,3.6-8,8c0,1.4,0.4,2.8,1,3.9c0.1,0.2,0.2,0.4,0.3,0.6l6.6,11.5l6.6-11.5
-		c0.1-0.2,0.2-0.3,0.3-0.5l0.1-0.1c0.6-1.2,1-2.5,1-3.9C20,1032,16.4,1028.4,12,1028.4z M12,1032.4c2.2,0,4,1.8,4,4c0,2.2-1.8,4-4,4
-		c-2.2,0-4-1.8-4-4C8,1034.2,9.8,1032.4,12,1032.4z"/>
-	<path class="st2" d="M12,1031.4c-2.8,0-5,2.2-5,5c0,2.8,2.2,5,5,5c2.8,0,5-2.2,5-5C17,1033.6,14.8,1031.4,12,1031.4z M12,1033.4
-		c1.7,0,3,1.3,3,3s-1.3,3-3,3s-3-1.3-3-3S10.3,1033.4,12,1033.4z"/>
-</g>
-</svg>
diff --git a/labswp_2019_sose_geocaching_frontend/frontend/src/statics/map-marker_yellow.svg b/labswp_2019_sose_geocaching_frontend/frontend/src/statics/map-marker_yellow.svg
deleted file mode 100644
index ed06075..0000000
--- a/labswp_2019_sose_geocaching_frontend/frontend/src/statics/map-marker_yellow.svg
+++ /dev/null
@@ -1,18 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 22.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<svg version="1.1"
-	 id="Ebene_1" 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#"
-	 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 24 24"
-	 style="enable-background:new 0 0 24 24;" xml:space="preserve">
-<style type="text/css">
-	.st0{fill:#FFD137;}
-	.st1{fill:#ECBD4B;}
-</style>
-<g transform="translate(0 -1028.4)">
-	<path class="st0" d="M12,1028.4c-4.4,0-8,3.6-8,8c0,1.4,0.4,2.8,1,3.9c0.1,0.2,0.2,0.4,0.3,0.6l6.6,11.5l6.6-11.5
-		c0.1-0.2,0.2-0.3,0.3-0.5l0.1-0.1c0.6-1.2,1-2.5,1-3.9C20,1032,16.4,1028.4,12,1028.4z M12,1032.4c2.2,0,4,1.8,4,4c0,2.2-1.8,4-4,4
-		c-2.2,0-4-1.8-4-4C8,1034.2,9.8,1032.4,12,1032.4z"/>
-	<path class="st1" d="M12,1031.4c-2.8,0-5,2.2-5,5c0,2.8,2.2,5,5,5c2.8,0,5-2.2,5-5C17,1033.6,14.8,1031.4,12,1031.4z M12,1033.4
-		c1.7,0,3,1.3,3,3s-1.3,3-3,3s-3-1.3-3-3S10.3,1033.4,12,1033.4z"/>
-</g>
-</svg>

From 88fb718c17d374305e08337848caf990eeb2d64b Mon Sep 17 00:00:00 2001
From: Maximilian Leopold <max.leopold2111@gmail.com>
Date: Mon, 3 Jun 2019 17:01:06 +0200
Subject: [PATCH 2/3] Email can only contain certain chars

---
 .../frontend/src/pages/Register.vue                 | 13 +++++++------
 1 file changed, 7 insertions(+), 6 deletions(-)

diff --git a/labswp_2019_sose_geocaching_frontend/frontend/src/pages/Register.vue b/labswp_2019_sose_geocaching_frontend/frontend/src/pages/Register.vue
index c4d9013..6489cfe 100644
--- a/labswp_2019_sose_geocaching_frontend/frontend/src/pages/Register.vue
+++ b/labswp_2019_sose_geocaching_frontend/frontend/src/pages/Register.vue
@@ -7,7 +7,7 @@
           <div class="col">
             <div class="">
               <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!']"/>
               </div>
             </div>
@@ -15,7 +15,7 @@
           <div class="col">
             <div class="">
               <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!']"/>
               </div>
             </div>
@@ -23,7 +23,7 @@
           <div class="col">
             <div class="">
               <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"
                          :rules="[val=>val===user.email||'E-Mail stimmt nicht überein!']"/>
               </div>
@@ -32,7 +32,7 @@
           <div class="col">
             <div class="">
               <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"
                          :rules="[val=>val.length>=8||'Passwort muss mindestens 8 Zeichen lang sein!']"/>
               </div>
@@ -41,7 +41,7 @@
           <div class="col">
             <div class="">
               <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"
                          :rules="[val=>val===user.password||'Passwort stimmt nicht überein']"/>
               </div>
@@ -97,7 +97,8 @@
     },
     methods: {
       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());
       },
       register: function () {

From 06ad5b6a760bf192a1994f3cefc0a72134a907d9 Mon Sep 17 00:00:00 2001
From: Timo Volkmann <volkmann@stud.hs-heilbronn.de>
Date: Mon, 3 Jun 2019 19:50:13 +0200
Subject: [PATCH 3/3] debugging and implementing of station edit with maps

---
 .../frontend/src/components/mapClickable.vue  | 283 +++++++-----------
 .../frontend/src/pages/Cache.vue              | 119 ++++----
 .../frontend/src/pages/StationEdit.vue        | 135 +++++----
 .../frontend/src/pages/StationEndEdit.vue     |  97 ------
 .../frontend/src/router/routes.js             |   4 +-
 5 files changed, 238 insertions(+), 400 deletions(-)
 delete mode 100644 labswp_2019_sose_geocaching_frontend/frontend/src/pages/StationEndEdit.vue

diff --git a/labswp_2019_sose_geocaching_frontend/frontend/src/components/mapClickable.vue b/labswp_2019_sose_geocaching_frontend/frontend/src/components/mapClickable.vue
index 9687ea3..2e1f0a9 100644
--- a/labswp_2019_sose_geocaching_frontend/frontend/src/components/mapClickable.vue
+++ b/labswp_2019_sose_geocaching_frontend/frontend/src/components/mapClickable.vue
@@ -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>
 
diff --git a/labswp_2019_sose_geocaching_frontend/frontend/src/pages/Cache.vue b/labswp_2019_sose_geocaching_frontend/frontend/src/pages/Cache.vue
index edb0978..0242f20 100644
--- a/labswp_2019_sose_geocaching_frontend/frontend/src/pages/Cache.vue
+++ b/labswp_2019_sose_geocaching_frontend/frontend/src/pages/Cache.vue
@@ -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();
       }
     },
diff --git a/labswp_2019_sose_geocaching_frontend/frontend/src/pages/StationEdit.vue b/labswp_2019_sose_geocaching_frontend/frontend/src/pages/StationEdit.vue
index d9a004d..51e0e0e 100644
--- a/labswp_2019_sose_geocaching_frontend/frontend/src/pages/StationEdit.vue
+++ b/labswp_2019_sose_geocaching_frontend/frontend/src/pages/StationEdit.vue
@@ -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();
       }
     }
diff --git a/labswp_2019_sose_geocaching_frontend/frontend/src/pages/StationEndEdit.vue b/labswp_2019_sose_geocaching_frontend/frontend/src/pages/StationEndEdit.vue
deleted file mode 100644
index a0bc1aa..0000000
--- a/labswp_2019_sose_geocaching_frontend/frontend/src/pages/StationEndEdit.vue
+++ /dev/null
@@ -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>
diff --git a/labswp_2019_sose_geocaching_frontend/frontend/src/router/routes.js b/labswp_2019_sose_geocaching_frontend/frontend/src/router/routes.js
index 8586b23..35e002d 100644
--- a/labswp_2019_sose_geocaching_frontend/frontend/src/router/routes.js
+++ b/labswp_2019_sose_geocaching_frontend/frontend/src/router/routes.js
@@ -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,