From cb73232522d1f05198cf993341e025cdc6100ca0 Mon Sep 17 00:00:00 2001
From: Katharina Will <kwill@stud.hs-heilbronn.de>
Date: Sat, 1 Jun 2019 09:36:13 +0200
Subject: [PATCH 1/6] Modified CacheStart to show marker on map

---
 .../frontend/src/pages/CacheStart.vue                       | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/labswp_2019_sose_geocaching_frontend/frontend/src/pages/CacheStart.vue b/labswp_2019_sose_geocaching_frontend/frontend/src/pages/CacheStart.vue
index b10e4f1..951b7af 100644
--- a/labswp_2019_sose_geocaching_frontend/frontend/src/pages/CacheStart.vue
+++ b/labswp_2019_sose_geocaching_frontend/frontend/src/pages/CacheStart.vue
@@ -7,7 +7,7 @@
       <vl-feature id="marker" ref="marker">
         <template>
 
-            <vl-geom-point :coordinates="[stationID.lattitude, stationID.longitude]"></vl-geom-point>
+            <vl-geom-point :coordinates="[lon, lat]"></vl-geom-point>
             <vl-style-box>
               <vl-style-icon src="./statics/map-marker.svg" :scale="2.0" :anchor="[0.5, 1]"></vl-style-icon>
             </vl-style-box>
@@ -63,8 +63,8 @@ Vue.use(VueLayers);
         paused: false,
         params: null,
         noStreamApiSupport: false,
-        lon: "",
-        lat: "",
+        lon: 9,
+        lat: 49,
         stationID: [],
         zoom: 15,
         center: [ 9.208858198755664, 49.14785422283188],

From 988ca223c8098637ee8cd4f868cf9e7e7adfc7d0 Mon Sep 17 00:00:00 2001
From: Katharina Will <kwill@stud.hs-heilbronn.de>
Date: Sat, 1 Jun 2019 10:28:35 +0200
Subject: [PATCH 2/6] Markers on cache overview map are displayed

---
 .../frontend/src/pages/Overview.vue           | 49 ++++++-------------
 1 file changed, 14 insertions(+), 35 deletions(-)

diff --git a/labswp_2019_sose_geocaching_frontend/frontend/src/pages/Overview.vue b/labswp_2019_sose_geocaching_frontend/frontend/src/pages/Overview.vue
index d4a1bec..ef17a80 100644
--- a/labswp_2019_sose_geocaching_frontend/frontend/src/pages/Overview.vue
+++ b/labswp_2019_sose_geocaching_frontend/frontend/src/pages/Overview.vue
@@ -111,11 +111,21 @@
         <q-tab-panel name="map" class="q-pa-none">
           <!--<div class="full-width full-height absolute-full" style="background: url('statics/osm_mock.png'); background-size: cover">-->
           <!--</div>-->
-          <div v-if="render" class="">
+          <div v-if="render" class="full-width full-height absolute-full">
             <vl-map :load-tiles-while-animating="true" :load-tiles-while-interacting="true"
-                     data-projection="EPSG:4326" :style="{ height: mapHeight+'px' }">
+                     data-projection="EPSG:4326">
               <vl-view :zoom.sync="zoom" :center.sync="center" :rotation.sync="rotation"></vl-view>
 
+              <vl-feature ref="marker" v-for="poiItem in pois" :key="poiItem.index">
+                <template>
+
+                    <vl-geom-point :coordinates="[poiItem.Longitude, poiItem.Latitude]"></vl-geom-point>
+                    <vl-style-box>
+                      <vl-style-icon src="./statics/map-marker.svg" :scale="2.0" :anchor="[0.5, 1]"></vl-style-icon>
+                    </vl-style-box>
+                </template>
+              </vl-feature>
+
               <vl-geoloc @update:position="geolocPosition = $event">
                 <template slot-scope="geoloc">
                   <vl-feature v-if="geoloc.position" id="position-feature">
@@ -128,12 +138,6 @@
                 <vl-source-osm></vl-source-osm>
               </vl-layer-tile>
 
-              <vl-layer-vector>
-                <vl-source-vector :features.sync="features"></vl-source-vector>
-                <vl-style-box>
-                  <vl-style-icon src="./statics/map-marker.svg" :scale="3.0" :anchor="[0.5, 1]"></vl-style-icon>
-                </vl-style-box>
-              </vl-layer-vector>
             </vl-map>
           </div>
         </q-tab-panel>
@@ -175,9 +179,6 @@ Vue.use(VueLayers);
       }
     },
     mounted: function () {
-      this.initMap().then(features => {
-        this.features = features.map(Object.freeze)
-      });
     },
     destroyed() {
       window.removeEventListener('resize', this.matchHeight)
@@ -259,13 +260,13 @@ Vue.use(VueLayers);
                 this.stations[cache] = (this.caches[cache].stationen[0]);
                 const poiItem = {
                   Name: this.caches[cache].name,
-                  CategoryID: 3,
                   Latitude: this.stations[cache].lattitude,
                   Longitude: this.stations[cache].longitude
                 };
                 this.pois.push(poiItem);
+                console.log(poiItem.Name + " " + poiItem.Latitude + " " + poiItem.Longitude);
               }
-              this.initMap();
+
               resolve(true);
             }).catch((error) => {
             let msg;
@@ -338,28 +339,6 @@ Vue.use(VueLayers);
       editCache(cacheID) {
         this.$router.push({path: `/cache/${cacheID}`})
       },
-      initMap() {
-        return new Promise(resolve => {
-          setTimeout(() => {
-            // generate GeoJSON random features
-            resolve([
-
-              {
-                type: "Feature",
-                id: 'fakerator.misc.uuid()',
-                geometry: {
-                  type: "Point",
-                  coordinates: [
-                      9.2111024, 49.1219732
-                  ],
-                },
-                properties: {
-                },
-              },
-            ])
-          }, 5000)
-        })
-      },
       deleteCache(id) {
         console.log('delete cache: ' + id);
         this.$axios.delete('/api/deleteCache', {params: {cacheID: id}})

From 3669921773e3d386730b81deb41672e135ccc273 Mon Sep 17 00:00:00 2001
From: Katharina Will <kwill@stud.hs-heilbronn.de>
Date: Sat, 1 Jun 2019 14:09:01 +0200
Subject: [PATCH 3/6] Markers are now shown in different colors according to
 cacheaccesdefinition

---
 .../frontend/src/pages/Cache.vue              |  2 +-
 .../frontend/src/pages/Overview.vue           | 31 +++++++------------
 .../frontend/src/statics/map-marker_amber.svg |  1 +
 .../frontend/src/statics/map-marker_blue.svg  | 18 -----------
 .../frontend/src/statics/map-marker_green.svg | 19 +-----------
 .../frontend/src/statics/map-marker_grey.svg  | 20 +-----------
 .../src/statics/map-marker_primary.svg        |  1 +
 .../src/statics/map-marker_yellow.svg         | 18 -----------
 8 files changed, 17 insertions(+), 93 deletions(-)
 create mode 100644 labswp_2019_sose_geocaching_frontend/frontend/src/statics/map-marker_amber.svg
 delete mode 100644 labswp_2019_sose_geocaching_frontend/frontend/src/statics/map-marker_blue.svg
 create mode 100644 labswp_2019_sose_geocaching_frontend/frontend/src/statics/map-marker_primary.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/src/pages/Cache.vue b/labswp_2019_sose_geocaching_frontend/frontend/src/pages/Cache.vue
index e3784e1..7c77c89 100644
--- a/labswp_2019_sose_geocaching_frontend/frontend/src/pages/Cache.vue
+++ b/labswp_2019_sose_geocaching_frontend/frontend/src/pages/Cache.vue
@@ -252,7 +252,7 @@
       },
       validateRankingPoints: function () {
         var re = new RegExp('^[0-9]+$');
-        var rps = String.valueOf(this.computedCache.rankingPoints);
+        var rps = String(this.computedCache.rankingPoints);
         return re.test(rps);
       },
       validateEverything(){
diff --git a/labswp_2019_sose_geocaching_frontend/frontend/src/pages/Overview.vue b/labswp_2019_sose_geocaching_frontend/frontend/src/pages/Overview.vue
index ef17a80..a5e36d1 100644
--- a/labswp_2019_sose_geocaching_frontend/frontend/src/pages/Overview.vue
+++ b/labswp_2019_sose_geocaching_frontend/frontend/src/pages/Overview.vue
@@ -111,17 +111,17 @@
         <q-tab-panel name="map" class="q-pa-none">
           <!--<div class="full-width full-height absolute-full" style="background: url('statics/osm_mock.png'); background-size: cover">-->
           <!--</div>-->
-          <div v-if="render" class="full-width full-height absolute-full">
+          <div v-if="render" class="">
             <vl-map :load-tiles-while-animating="true" :load-tiles-while-interacting="true"
-                     data-projection="EPSG:4326">
+                     data-projection="EPSG:4326" :style="{ height: mapHeight+'px' }">
               <vl-view :zoom.sync="zoom" :center.sync="center" :rotation.sync="rotation"></vl-view>
 
-              <vl-feature ref="marker" v-for="poiItem in pois" :key="poiItem.index">
+              <vl-feature ref="marker" v-for="cache in caches" :key="cache.id">
                 <template>
 
-                    <vl-geom-point :coordinates="[poiItem.Longitude, poiItem.Latitude]"></vl-geom-point>
+                    <vl-geom-point :coordinates="[cache.stationen[0].longitude, cache.stationen[0].lattitude]"></vl-geom-point>
                     <vl-style-box>
-                      <vl-style-icon src="./statics/map-marker.svg" :scale="2.0" :anchor="[0.5, 1]"></vl-style-icon>
+                      <vl-style-icon :src="getMarkerURL(cache)" :scale="2.0" :anchor="[0.5, 1]"></vl-style-icon>
                     </vl-style-box>
                 </template>
               </vl-feature>
@@ -168,14 +168,15 @@ Vue.use(VueLayers);
         tab: 'list',
         caches: [],
         stations: [],
-        pois: [],
         features: [],
         render: false,
+        renderMarker: false,
         zoom: 15,
         center: [ 9.208858198755664, 49.14785422283188],
         rotation: 0,
         geolocPosition: undefined,
         mapHeight: 0,
+        mapmarker: "",
       }
     },
     mounted: function () {
@@ -242,6 +243,9 @@ Vue.use(VueLayers);
             return this.goToReward(cache.id);
         }
       },
+      getMarkerURL(cache) {
+        return `./statics/map-marker_${this.getColorClass(cache)}.svg`
+      },
       getCacheAccesDefinition(cache) {
         // console.log("getCacheAccessDefinition")
         // console.log(cache.hasOwnProperty('cacheAccesDefinition') ? cache.cacheAccesDefinition : -1)
@@ -255,18 +259,6 @@ Vue.use(VueLayers);
             .then((response) => {
               this.caches = response.data;
               //this.fetchMyCaches();
-              for (let cache in this.caches) {
-
-                this.stations[cache] = (this.caches[cache].stationen[0]);
-                const poiItem = {
-                  Name: this.caches[cache].name,
-                  Latitude: this.stations[cache].lattitude,
-                  Longitude: this.stations[cache].longitude
-                };
-                this.pois.push(poiItem);
-                console.log(poiItem.Name + " " + poiItem.Latitude + " " + poiItem.Longitude);
-              }
-
               resolve(true);
             }).catch((error) => {
             let msg;
@@ -309,7 +301,8 @@ Vue.use(VueLayers);
                   })
                 }
                 console.log(this.caches);
-                console.log("data processed.")
+                console.log("data processed.");
+
               }).finally(() => resolve(true))
           } else {
             resolve(true);
diff --git a/labswp_2019_sose_geocaching_frontend/frontend/src/statics/map-marker_amber.svg b/labswp_2019_sose_geocaching_frontend/frontend/src/statics/map-marker_amber.svg
new file mode 100644
index 0000000..edd9e39
--- /dev/null
+++ b/labswp_2019_sose_geocaching_frontend/frontend/src/statics/map-marker_amber.svg
@@ -0,0 +1 @@
+<?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="#ffd137"/><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="#ecbd4b"/></g></svg>
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
index 303fba5..ff9e53b 100644
--- 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
@@ -1,18 +1 @@
-<?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>
+<?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>
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
index c8c75bf..f090f9a 100644
--- 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
@@ -1,19 +1 @@
-<?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>
+<?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>
diff --git a/labswp_2019_sose_geocaching_frontend/frontend/src/statics/map-marker_primary.svg b/labswp_2019_sose_geocaching_frontend/frontend/src/statics/map-marker_primary.svg
new file mode 100644
index 0000000..1762d7a
--- /dev/null
+++ b/labswp_2019_sose_geocaching_frontend/frontend/src/statics/map-marker_primary.svg
@@ -0,0 +1 @@
+<?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="#1e64f8"/><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="#1c5fc5"/></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 4/6] 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 5/6] 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,

From b3b5aae96ed52305510cac3b5e11152130451042 Mon Sep 17 00:00:00 2001
From: Katharina Will <kwill@stud.hs-heilbronn.de>
Date: Tue, 4 Jun 2019 18:33:59 +0200
Subject: [PATCH 6/6] Added new markers

---
 .../frontend/src/pages/Overview.vue           |  1 -
 .../frontend/src/pages/StationView.vue        | 38 +++++++++++++------
 .../frontend/src/statics/map-marker_green.svg |  1 +
 .../frontend/src/statics/map-marker_grey.svg  |  1 +
 .../{map-marker.svg => map-marker_red.svg}    |  0
 5 files changed, 29 insertions(+), 12 deletions(-)
 create mode 100644 labswp_2019_sose_geocaching_frontend/frontend/src/statics/map-marker_green.svg
 create mode 100644 labswp_2019_sose_geocaching_frontend/frontend/src/statics/map-marker_grey.svg
 rename labswp_2019_sose_geocaching_frontend/frontend/src/statics/{map-marker.svg => map-marker_red.svg} (100%)

diff --git a/labswp_2019_sose_geocaching_frontend/frontend/src/pages/Overview.vue b/labswp_2019_sose_geocaching_frontend/frontend/src/pages/Overview.vue
index a5e36d1..9568362 100644
--- a/labswp_2019_sose_geocaching_frontend/frontend/src/pages/Overview.vue
+++ b/labswp_2019_sose_geocaching_frontend/frontend/src/pages/Overview.vue
@@ -168,7 +168,6 @@ Vue.use(VueLayers);
         tab: 'list',
         caches: [],
         stations: [],
-        features: [],
         render: false,
         renderMarker: false,
         zoom: 15,
diff --git a/labswp_2019_sose_geocaching_frontend/frontend/src/pages/StationView.vue b/labswp_2019_sose_geocaching_frontend/frontend/src/pages/StationView.vue
index 8a7e6e6..487d6bd 100644
--- a/labswp_2019_sose_geocaching_frontend/frontend/src/pages/StationView.vue
+++ b/labswp_2019_sose_geocaching_frontend/frontend/src/pages/StationView.vue
@@ -2,19 +2,29 @@
   <div>
     <vl-map :load-tiles-while-animating="true" :load-tiles-while-interacting="true"
              data-projection="EPSG:4326" style="height: 200px" v-if="!cameraActive">
-      <vl-view :zoom.sync="zoom" :center.sync="center" :rotation.sync="rotation"></vl-view>
+             <vl-view :zoom.sync="zoom" :center.sync="center" :rotation.sync="rotation"></vl-view>
 
-      <vl-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-feature ref="marker" v-for="station in cache.stationen" :key="station.id">
+               <template>
 
-      <vl-layer-tile id="osm">
-        <vl-source-osm></vl-source-osm>
-      </vl-layer-tile>
+                   <vl-geom-point :coordinates="[station.longitude, station.lattitude]"></vl-geom-point>
+                   <vl-style-box>
+                     <vl-style-icon :src="getMarkerURL(station)" :scale="2.0" :anchor="[0.5, 1]"></vl-style-icon>
+                   </vl-style-box>
+               </template>
+             </vl-feature>
+
+             <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="q-ma-md" v-if="!cameraActive">
       <p class="text-h4">{{ cache.name }}</p>
@@ -47,6 +57,7 @@ Vue.use(VueLayers);
           stationen: [],
         },
         station: {},
+        markercolor: "red",
         cameraActive: false,
         result: null,
         zoom: 15,
@@ -109,6 +120,11 @@ Vue.use(VueLayers);
           })
       },
 
+      getMarkerURL(station) {
+        console.log(station);
+        return `./statics/map-marker_${this.markercolor}.svg`
+      },
+
       updateResult(event) {
         console.log("updateResult()");
         console.log(event);
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
new file mode 100644
index 0000000..ff9e53b
--- /dev/null
+++ b/labswp_2019_sose_geocaching_frontend/frontend/src/statics/map-marker_green.svg
@@ -0,0 +1 @@
+<?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>
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
new file mode 100644
index 0000000..f090f9a
--- /dev/null
+++ b/labswp_2019_sose_geocaching_frontend/frontend/src/statics/map-marker_grey.svg
@@ -0,0 +1 @@
+<?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>
diff --git a/labswp_2019_sose_geocaching_frontend/frontend/src/statics/map-marker.svg b/labswp_2019_sose_geocaching_frontend/frontend/src/statics/map-marker_red.svg
similarity index 100%
rename from labswp_2019_sose_geocaching_frontend/frontend/src/statics/map-marker.svg
rename to labswp_2019_sose_geocaching_frontend/frontend/src/statics/map-marker_red.svg