From 06db9e572371c99895f6e4e80dd53c4f3b33a0b4 Mon Sep 17 00:00:00 2001
From: Amar Bolkan <amar.bolkan@gmail.com>
Date: Tue, 1 Dec 2020 14:14:34 +0100
Subject: [PATCH 01/61] Set default position of map to Wedel coordinates

---
 config/config.development.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/config/config.development.js b/config/config.development.js
index 79c6eb6..d4a0fac 100644
--- a/config/config.development.js
+++ b/config/config.development.js
@@ -6,7 +6,7 @@ var SYSTEM_URL = "http://localhost:8000";
 var API_ROOT = SYSTEM_URL + "/api";
 var GBFS_URL = SYSTEM_URL + "/gbfs/gbfs.json";
 
-var DEFAULT_LOCATION = [48.3984, 9.9908];
+var DEFAULT_LOCATION = [53.5823813, 9.7137465];
 var DEFAULT_ZOOM = 15;
 
 var I18N_MESSAGE_OVERRIDE = {};

From 538223ba3ceb25d96cb0fc1f7a95e5b3626f0839 Mon Sep 17 00:00:00 2001
From: Amar Bolkan <amar.bolkan@gmail.com>
Date: Tue, 1 Dec 2020 14:18:17 +0100
Subject: [PATCH 02/61] Add Costum login button, which accesses the cykel admin
 login page and redirects back to voorwiel

---
 src/components/Login.vue | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/src/components/Login.vue b/src/components/Login.vue
index b3c964d..4099569 100644
--- a/src/components/Login.vue
+++ b/src/components/Login.vue
@@ -50,6 +50,15 @@
         fetch(url)
           .then(r => r.json())
           .then(data => {
+            // Adding Costum Login Button
+            let costum_login = {
+              "name": "Costum Login",
+              "provider": "AZV",
+              "auth_url" : "http://localhost:8000/admin/login/?next=localhost:8080"
+            };
+            // Add this entry to the list of displayed buttons
+            data.push(costum_login);
+
             this.providers = data;
             this.loading = false;
           })

From 2439be682b0a97778edce9a3791f4abd9d1c2c27 Mon Sep 17 00:00:00 2001
From: Amar Bolkan <amar.bolkan@gmail.com>
Date: Tue, 1 Dec 2020 15:02:47 +0100
Subject: [PATCH 03/61] Check TODO

---
 src/App.vue        |  1 +
 src/store/index.js | 19 ++++++++++++++-----
 2 files changed, 15 insertions(+), 5 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index f226fcc..8a12cfa 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -91,6 +91,7 @@
     },
     methods: {
       logout() {
+        
         this.$store.dispatch("LOGOUT");
       }
     },
diff --git a/src/store/index.js b/src/store/index.js
index d4c5163..0eb4f6c 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -71,6 +71,7 @@ export default new Vuex.Store({
         .get('/user')
         .then(
           response => {
+            console.log(response.data);
             commit("SET_USER", { user: response.data });
           },
           err => {
@@ -163,11 +164,19 @@ export default new Vuex.Store({
   },
   mutations: {
     CLEAR_USER: (state) => {
-      state.authToken = null;
-      state.user = undefined;
-      state.rents = [];
-      state.lock = [];
-      localStorage.removeItem(LS_AUTH_TOKEN_KEY);
+      
+      if (state.user.username === "costum_login")
+      {
+        console.log("Im logged in as costum_user") 
+      }
+      else
+      {  
+        state.authToken = null;
+        state.user = undefined;
+        state.rents = [];
+        state.lock = [];
+        localStorage.removeItem(LS_AUTH_TOKEN_KEY);
+      }
     },
     SET_USER: (state, { user }) => {
       state.user = user;

From ac6e35b3008a8fb7d940c47dfa60d102b4dc4032 Mon Sep 17 00:00:00 2001
From: Amar Bolkan <amar.bolkan@gmail.com>
Date: Thu, 3 Dec 2020 17:39:01 +0100
Subject: [PATCH 04/61] Custom Login funktion hinzugefuegt.

---
 src/components/CustomLogin.vue | 107 +++++++++++++++++++++++++++++++++
 src/components/Login.vue       |  13 ++--
 src/i18n/messages.json         |   8 ++-
 src/router/index.js            |   3 +
 src/store/index.js             |  39 +++++++++++-
 5 files changed, 156 insertions(+), 14 deletions(-)
 create mode 100644 src/components/CustomLogin.vue

diff --git a/src/components/CustomLogin.vue b/src/components/CustomLogin.vue
new file mode 100644
index 0000000..d72dfe4
--- /dev/null
+++ b/src/components/CustomLogin.vue
@@ -0,0 +1,107 @@
+
+<template>
+  <v-dialog v-model="show" max-width="400">
+    <v-card>
+      <v-card-title class="text-h5 grey lighten-2" primary-title>
+        {{ $t('message.login.login-with') }}
+      </v-card-title>
+      <v-card-actions>
+
+<v-form v-model="valid" ref="rentBikeForm" @submit.prevent="startRent">
+        <v-container class="pb-0">
+          <v-row class="pt-5">
+            <v-col cols="12" md="6" class="py-0 pr-0">
+              <v-text-field
+                  type="text"
+                  :label="$t('message.login.username')"
+                  v-model="username"
+                  outlined
+                  required
+                  autofocus
+                  inputmode="text"
+                  pattern="[0-9a-zA-Z]*"
+                ></v-text-field>
+            </v-col>
+            <v-col cols="1" md="1" class="py-0 text-right">
+            </v-col>
+          </v-row> 
+          <v-row class="pt-5">
+            <v-col cols="12" md="12" class="py-0 pr-0">
+              <v-text-field
+                  type="password"
+                  :label="$t('message.login.password')"
+                  v-model="password"
+                  outlined
+                  required
+                  autofocus
+                  inputmode="text"
+                  pattern="[0-9a-zA-Z]*"
+                ></v-text-field>
+            </v-col>
+          </v-row>
+            <v-row class="pt-5">
+            <v-col cols="6" md="6" class="py-0 text-right">
+              <v-btn class="mt-2" color="success" v-bind:disabled="
+              !valid" :loading="loading" @click="authenticate()">
+                {{ "Login" }}
+              </v-btn>
+            </v-col>
+          </v-row>
+        </v-container>
+      </v-form>
+
+          
+      </v-card-actions>
+    </v-card>
+  </v-dialog>
+</template>
+
+<script>
+import axios from 'axios';
+
+  export default {
+    data() {
+      return {
+        show: true,
+        loading: false,
+        valid: false,
+        username: '',
+        password: ''
+      }
+    },
+    methods: {
+      authenticate() {        
+        let params = new URLSearchParams(location.search);
+        console.log(params)
+        if (params.get('redirect')) {
+          sessionStorage.setItem('redirect', params.get('redirect'));
+        }
+      try {
+        // TODO relative path
+        let auth_url = "http://localhost:8000/api-token-auth/";
+        
+        axios.post( auth_url, {
+          username : this.username,
+          password : this.password
+        })
+        .then( (response) => {
+          location.href = "/login/return/?token=" + response.data.token 
+        })          
+        .catch( 
+          console.log("Error")
+          // TODO Fehlerbehandlung einfügen
+        )
+      } catch (err) {
+        console.err("Error: \n" + err)
+      }
+      },
+    },
+    watch: {
+      show(current) {
+        if (current === false) {
+          this.$router.push('/');
+        }
+      }
+    }
+  };
+</script>
diff --git a/src/components/Login.vue b/src/components/Login.vue
index 4099569..9b7b369 100644
--- a/src/components/Login.vue
+++ b/src/components/Login.vue
@@ -18,6 +18,10 @@
               </v-btn>
             </v-list-item-content>
           </v-list-item>
+          <v-btn block :to="{name: 'customLogin'}">
+                {{ "Custom Login" }}
+                <!-- <v-icon v-if="provider.icon" right dark>{{ provider.icon }}</v-icon> -->
+              </v-btn>
         </v-list>
       </v-card-actions>
     </v-card>
@@ -50,15 +54,6 @@
         fetch(url)
           .then(r => r.json())
           .then(data => {
-            // Adding Costum Login Button
-            let costum_login = {
-              "name": "Costum Login",
-              "provider": "AZV",
-              "auth_url" : "http://localhost:8000/admin/login/?next=localhost:8080"
-            };
-            // Add this entry to the list of displayed buttons
-            data.push(costum_login);
-
             this.providers = data;
             this.loading = false;
           })
diff --git a/src/i18n/messages.json b/src/i18n/messages.json
index bc460cb..3f5666a 100644
--- a/src/i18n/messages.json
+++ b/src/i18n/messages.json
@@ -23,7 +23,9 @@
       },
       "login": {
         "login-with": "Login with",
-        "configerror": "Cannot load login configuration"
+        "configerror": "Cannot load login configuration",
+        "username" : "Username",
+        "password" : "Password"
       },
       "about": {
         "title": "About",
@@ -68,7 +70,9 @@
       },
       "login": {
         "login-with": "Einloggen mit",
-        "configerror": "Laden der Login-Konfiguration fehlgeschlagen"
+        "configerror": "Laden der Login-Konfiguration fehlgeschlagen",
+        "username" : "Benutzername",
+        "password" : "Passwort"
       },
       "about": {
         "title": "Über",
diff --git a/src/router/index.js b/src/router/index.js
index 8c38fcb..1ab6e0b 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -12,6 +12,8 @@ import Support from '../components/Support';
 import VehicleDetail from '../components/VehicleDetail';
 import StationDetail from '../components/StationDetail';
 
+import CustomLogin from '../components/CustomLogin';
+
 const NoOpComponent = Vue.component('no-op', {
   functional: true,
   render () { return null; }
@@ -22,6 +24,7 @@ const router = new VueRouter({
   routes: [
     { path: '/', component: NoOpComponent },
     { path: '/login', name: 'login', component: Login },
+    { path: '/login/custom', name: 'customLogin', component: CustomLogin },
     { path: '/login/return', component: LoginReturn },
     { path: '/rent', name: 'rent', component: Rent, meta: { requiresAuth: true }, props: (route) => {
       if (route.query && route.query.id) {
diff --git a/src/store/index.js b/src/store/index.js
index 0eb4f6c..72a1e13 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -164,12 +164,45 @@ export default new Vuex.Store({
   },
   mutations: {
     CLEAR_USER: (state) => {
-      
+
       if (state.user.username === "costum_login")
       {
-        console.log("Im logged in as costum_user") 
+        // TODO clean up
+        // Invalidate the logged-in user in cykel
+        // TODO implement the cykel logout
+        console.log(state);
+        console.log(state.authToken)
+        console.log(localStorage)
+/*        const headers = {
+          Cookie: ""  
+        }
+        fetch('https://jsonplaceholder.typicode.com/todos', {
+        method: 'POST',
+        body: JSON.stringify(todo),
+        headers: 
+        })
+        .then(response => response.json())
+        .then(json => {
+            console.log(json);
+        });
+
+        fetch("http://localhost:8000/admin/logout/")
+        .then(async response => {
+          const data = await response.text();
+          console.log(data)
+          // check for error response
+          /*if (!response.ok) {
+            // get error message from body or default to response statusText
+            const error = (data && data.message) || response.statusText;
+            return Promise.reject(error);
+          }
+        })
+        .catch(error => {
+          console.log(error);
+          console.log("There was an error, during logout!");
+                });*/
       }
-      else
+      
       {  
         state.authToken = null;
         state.user = undefined;

From a80d7475cba8e97876705177258627faaca549df Mon Sep 17 00:00:00 2001
From: Amar Bolkan <amar.bolkan@gmail.com>
Date: Fri, 4 Dec 2020 13:29:47 +0100
Subject: [PATCH 05/61] cleaned up

---
 src/components/CustomLogin.vue |  1 -
 src/store/index.js             | 46 +++-------------------------------
 2 files changed, 3 insertions(+), 44 deletions(-)

diff --git a/src/components/CustomLogin.vue b/src/components/CustomLogin.vue
index d72dfe4..aed23f6 100644
--- a/src/components/CustomLogin.vue
+++ b/src/components/CustomLogin.vue
@@ -72,7 +72,6 @@ import axios from 'axios';
     methods: {
       authenticate() {        
         let params = new URLSearchParams(location.search);
-        console.log(params)
         if (params.get('redirect')) {
           sessionStorage.setItem('redirect', params.get('redirect'));
         }
diff --git a/src/store/index.js b/src/store/index.js
index 72a1e13..e378d2c 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -13,7 +13,7 @@ const axiosWithAuth = function (state) {
 }
 
 const getCurrentPosition = (options) => {
-  if (navigator.geolocation) {
+  if (navigator.geolocation) {    
     return new Promise(
       (resolve, reject) => {
         let timeout = options.timeout || 5000;
@@ -25,7 +25,8 @@ const getCurrentPosition = (options) => {
           options);
       }
     )
-  }
+  } 
+
   return Promise.reject();
 }
 
@@ -164,52 +165,11 @@ export default new Vuex.Store({
   },
   mutations: {
     CLEAR_USER: (state) => {
-
-      if (state.user.username === "costum_login")
-      {
-        // TODO clean up
-        // Invalidate the logged-in user in cykel
-        // TODO implement the cykel logout
-        console.log(state);
-        console.log(state.authToken)
-        console.log(localStorage)
-/*        const headers = {
-          Cookie: ""  
-        }
-        fetch('https://jsonplaceholder.typicode.com/todos', {
-        method: 'POST',
-        body: JSON.stringify(todo),
-        headers: 
-        })
-        .then(response => response.json())
-        .then(json => {
-            console.log(json);
-        });
-
-        fetch("http://localhost:8000/admin/logout/")
-        .then(async response => {
-          const data = await response.text();
-          console.log(data)
-          // check for error response
-          /*if (!response.ok) {
-            // get error message from body or default to response statusText
-            const error = (data && data.message) || response.statusText;
-            return Promise.reject(error);
-          }
-        })
-        .catch(error => {
-          console.log(error);
-          console.log("There was an error, during logout!");
-                });*/
-      }
-      
-      {  
         state.authToken = null;
         state.user = undefined;
         state.rents = [];
         state.lock = [];
         localStorage.removeItem(LS_AUTH_TOKEN_KEY);
-      }
     },
     SET_USER: (state, { user }) => {
       state.user = user;

From 5e5d4555b3b7e6438d739c9ece22329470bdf9cc Mon Sep 17 00:00:00 2001
From: Amar Bolkan <amar.bolkan@gmail.com>
Date: Fri, 4 Dec 2020 15:00:01 +0100
Subject: [PATCH 06/61] Added choosable return locations. Currently hardcoded

---
 src/components/Rent.vue | 32 ++++++++++++++++++++++++++++++--
 src/store/index.js      | 31 +++++++++++++++++++++++++++++++
 2 files changed, 61 insertions(+), 2 deletions(-)

diff --git a/src/components/Rent.vue b/src/components/Rent.vue
index bf20f65..38bf6c5 100644
--- a/src/components/Rent.vue
+++ b/src/components/Rent.vue
@@ -50,6 +50,18 @@
             <RentLock :rent="rent" />
           </v-list-item-subtitle>
           <v-list-item-subtitle>{{ $t('message.rent.renting-for') }} <ticking-time :datetime="rent.rent_start" /></v-list-item-subtitle>
+          <v-row class="pt-5">
+            <v-col cols="6" md="6" class="py-0 pr-0">
+              <div id="app">
+                <select class="form-control" @change="changeReturnLocation($event)">
+                  <option value="" selected disabled>Choose</option>
+                  <option v-for="location in choosableLocations" :value="location.id" :key="location.id">{{ location.name }}</option>
+                </select>
+                <br><br>
+                <p><span>Selected return location: {{ selectedReturnLocation  }}</span></p>
+              </div>
+            </v-col>
+          </v-row>
           <v-btn color="success" @click="endRent(rent.id)" v-bind:loading="loadingRents.includes(rent.id)">
             {{ $t('message.rent.finish-rent') }}
           </v-btn>
@@ -65,6 +77,9 @@
   import TickingTime from "./TickingTime.vue";
   import RentLock from "./RentLock.vue";
 
+  //TODO delete later
+  import Vue from 'vue'
+
   export default {
     components: { TickingTime, RentLock },
     props: ['bikeId'],
@@ -88,7 +103,14 @@
         mdi: {
           lock: mdiLock,
           lockOpenVariant: mdiLockOpenVariant
-        }
+        },
+        // TODO delete later
+        choosableLocations :[
+          {name : "Altstadt", id: 1},
+          {name : "Fock-Straße", id: 2},
+          {name : "Bahnhof", id: 3}
+        ],
+        selectedReturnLocation : null
       }
     },
     computed: {
@@ -106,6 +128,7 @@
       endRent(rentId) {
         this.rentError = '';
         this.loadingRents.push(rentId);
+        Vue.prototype.$selectedReturnLocation = this.selectedReturnLocation
         this.$store.dispatch("END_RENT", rentId)
           .catch(err => {
             this.rentError = err;
@@ -114,7 +137,12 @@
               this.loadingRents.splice(index, 1);
             }
           });
-      }
+      },
+      // TODO delete later
+      changeReturnLocation (event) {
+        this.selectedReturnLocation = event.target.options[event.target.options.selectedIndex].text
+        console.log(this.selectedReturnLocation)
+        }
     },
     mounted() {
       this.bikenumber = this.bikeId;
diff --git a/src/store/index.js b/src/store/index.js
index e378d2c..ca709bb 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -126,9 +126,40 @@ export default new Vuex.Store({
 
       let data = {};
       if (location && location.coords && location.coords.accuracy < 50) {
+
         data['lat'] = location.coords.latitude;
         data['lng'] = location.coords.longitude;
       }
+ 
+      console.log(Vue.prototype.$selectedReturnLocation)
+      
+      // TODO delete
+      let lat = 0.0;
+      let lng = 0.0;
+      switch(Vue.prototype.$selectedReturnLocation)
+      {
+        case "Altstadt" :  
+          lat = 53.583435
+          lng = 9.698574
+        break;
+        case "Fock-Straße":
+          lat = 53.580897
+          lng = 9.703375999999999 
+        break;
+        case "Bahnhof": 
+        lat = 53.581697
+        lng = 9.703375999999999 
+        break;
+        default : 
+          console.log("No location selected")
+          lat = 53.581697
+          lng = 9.703675999999999 
+        break;
+      }
+
+      data['lat'] = lat ;
+      data['lng'] = lng;
+    
 
       try {
         let finish_url = state.rents.find((el) => el.id == rentId).finish_url;

From 5250ecdaa21a958adad2c60ef8bfcb333ecfb2f3 Mon Sep 17 00:00:00 2001
From: Amar Bolkan <amar.bolkan@gmail.com>
Date: Tue, 8 Dec 2020 11:54:10 +0100
Subject: [PATCH 07/61] Added selectable return location, when renting bikes

---
 src/components/CustomLogin.vue |  2 +-
 src/components/Rent.vue        | 51 +++++++++++++++++++++++++---------
 src/store/index.js             | 30 ++------------------
 3 files changed, 41 insertions(+), 42 deletions(-)

diff --git a/src/components/CustomLogin.vue b/src/components/CustomLogin.vue
index aed23f6..174fcea 100644
--- a/src/components/CustomLogin.vue
+++ b/src/components/CustomLogin.vue
@@ -77,7 +77,7 @@ import axios from 'axios';
         }
       try {
         // TODO relative path
-        let auth_url = "http://localhost:8000/api-token-auth/";
+          let auth_url = this.$appConfig.API_ROOT + '/auth/token';
         
         axios.post( auth_url, {
           username : this.username,
diff --git a/src/components/Rent.vue b/src/components/Rent.vue
index 38bf6c5..9169d52 100644
--- a/src/components/Rent.vue
+++ b/src/components/Rent.vue
@@ -55,10 +55,10 @@
               <div id="app">
                 <select class="form-control" @change="changeReturnLocation($event)">
                   <option value="" selected disabled>Choose</option>
-                  <option v-for="location in choosableLocations" :value="location.id" :key="location.id">{{ location.name }}</option>
+                  <option v-for="station in availableStations" :value="station.id" :key="station.id">{{ station.name }}</option>
                 </select>
                 <br><br>
-                <p><span>Selected return location: {{ selectedReturnLocation  }}</span></p>
+                <p><span>Selected return location: {{ selectedStation  }}</span></p>
               </div>
             </v-col>
           </v-row>
@@ -77,8 +77,10 @@
   import TickingTime from "./TickingTime.vue";
   import RentLock from "./RentLock.vue";
 
+
   //TODO delete later
   import Vue from 'vue'
+  import axios from 'axios';
 
   export default {
     components: { TickingTime, RentLock },
@@ -104,18 +106,18 @@
           lock: mdiLock,
           lockOpenVariant: mdiLockOpenVariant
         },
-        // TODO delete later
-        choosableLocations :[
-          {name : "Altstadt", id: 1},
-          {name : "Fock-Straße", id: 2},
-          {name : "Bahnhof", id: 3}
-        ],
-        selectedReturnLocation : null
+        availableStations :[],
+        selectedStation : null,
+        lng: null,
+        lat: null
       }
     },
     computed: {
       ...mapState(['rents'])
     },
+    created() {
+      this.fetchStations();
+    },
     methods: {
       startRent() {
         this.loading = true;
@@ -128,7 +130,8 @@
       endRent(rentId) {
         this.rentError = '';
         this.loadingRents.push(rentId);
-        Vue.prototype.$selectedReturnLocation = this.selectedReturnLocation
+        Vue.prototype.$returnLng = this.lng
+        Vue.prototype.$returnLat = this.lat
         this.$store.dispatch("END_RENT", rentId)
           .catch(err => {
             this.rentError = err;
@@ -138,11 +141,33 @@
             }
           });
       },
-      // TODO delete later
       changeReturnLocation (event) {
-        this.selectedReturnLocation = event.target.options[event.target.options.selectedIndex].text
-        console.log(this.selectedReturnLocation)
+        this.selectedStation = event.target.options[event.target.options.selectedIndex].text
+    
+        for (var  index in this.availableStations) 
+        {
+          if (this.availableStations[index].name === this.selectedStation)
+          {
+            this.lng = this.availableStations[index].location.lng;
+            this.lat = this.availableStations[index].location.lat;
+            break;
+          }
         }
+      }, 
+      fetchStations() {
+        
+        let url = this.$appConfig.API_ROOT + '/stations/locations';
+        axios.post(url)
+        .then( response => response.data)
+        .then( data => {
+          console.log(data)
+          this.availableStations = data
+        })          
+        .catch( 
+          console.log("Error")
+          // TODO Fehlerbehandlung einfügen
+        )
+      }
     },
     mounted() {
       this.bikenumber = this.bikeId;
diff --git a/src/store/index.js b/src/store/index.js
index ca709bb..87a88fe 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -131,34 +131,8 @@ export default new Vuex.Store({
         data['lng'] = location.coords.longitude;
       }
  
-      console.log(Vue.prototype.$selectedReturnLocation)
-      
-      // TODO delete
-      let lat = 0.0;
-      let lng = 0.0;
-      switch(Vue.prototype.$selectedReturnLocation)
-      {
-        case "Altstadt" :  
-          lat = 53.583435
-          lng = 9.698574
-        break;
-        case "Fock-Straße":
-          lat = 53.580897
-          lng = 9.703375999999999 
-        break;
-        case "Bahnhof": 
-        lat = 53.581697
-        lng = 9.703375999999999 
-        break;
-        default : 
-          console.log("No location selected")
-          lat = 53.581697
-          lng = 9.703675999999999 
-        break;
-      }
-
-      data['lat'] = lat ;
-      data['lng'] = lng;
+      data['lat'] = Vue.prototype.$returnLat;
+      data['lng'] = Vue.prototype.$returnLng;
     
 
       try {

From 655f7952dbbd42bebebdbab28c06303203b7dd28 Mon Sep 17 00:00:00 2001
From: mlange304 <michael.lange@iteratec.com>
Date: Tue, 8 Dec 2020 12:05:43 +0100
Subject: [PATCH 08/61] Textbox for Error Message

---
 src/components/CustomLogin.vue | 136 +++++++++++++++++----------------
 1 file changed, 72 insertions(+), 64 deletions(-)

diff --git a/src/components/CustomLogin.vue b/src/components/CustomLogin.vue
index aed23f6..a5466fe 100644
--- a/src/components/CustomLogin.vue
+++ b/src/components/CustomLogin.vue
@@ -1,17 +1,16 @@
 
 <template>
-  <v-dialog v-model="show" max-width="400">
+  <v-dialog v-model="show" max-width="500">
     <v-card>
       <v-card-title class="text-h5 grey lighten-2" primary-title>
-        {{ $t('message.login.login-with') }}
+        {{ $t("message.login.login-with") }}
       </v-card-title>
       <v-card-actions>
-
-<v-form v-model="valid" ref="rentBikeForm" @submit.prevent="startRent">
-        <v-container class="pb-0">
-          <v-row class="pt-5">
-            <v-col cols="12" md="6" class="py-0 pr-0">
-              <v-text-field
+        <v-form v-model="valid" ref="rentBikeForm" @submit.prevent="startRent">
+          <v-container class="pb-0">
+            <v-row class="pt-5">
+              <v-col cols="12" md="12" class="py-0 pr-0">
+                <v-text-field
                   type="text"
                   :label="$t('message.login.username')"
                   v-model="username"
@@ -21,13 +20,12 @@
                   inputmode="text"
                   pattern="[0-9a-zA-Z]*"
                 ></v-text-field>
-            </v-col>
-            <v-col cols="1" md="1" class="py-0 text-right">
-            </v-col>
-          </v-row> 
-          <v-row class="pt-5">
-            <v-col cols="12" md="12" class="py-0 pr-0">
-              <v-text-field
+              </v-col>
+              <v-col cols="1" md="1" class="py-0 text-right"> </v-col>
+            </v-row>
+            <v-row class="pt-5">
+              <v-col cols="12" md="12" class="py-0 pr-0">
+                <v-text-field
                   type="password"
                   :label="$t('message.login.password')"
                   v-model="password"
@@ -37,70 +35,80 @@
                   inputmode="text"
                   pattern="[0-9a-zA-Z]*"
                 ></v-text-field>
-            </v-col>
-          </v-row>
+              </v-col>
+            </v-row>
             <v-row class="pt-5">
-            <v-col cols="6" md="6" class="py-0 text-right">
-              <v-btn class="mt-2" color="success" v-bind:disabled="
-              !valid" :loading="loading" @click="authenticate()">
-                {{ "Login" }}
-              </v-btn>
-            </v-col>
-          </v-row>
-        </v-container>
-      </v-form>
-
+              <v-col cols="6" md="6" class="py-0 text-right">
+                <v-btn
+                  class="mt-2"
+                  color="success"
+                  v-bind:disabled="!valid"
+                  :loading="loading"
+                  @click="authenticate()"
+                >
+                  {{ "Login" }}
+                </v-btn>
+              </v-col>
+            </v-row>
+          </v-container>
           
+        </v-form>
+         
       </v-card-actions>
     </v-card>
+    <v-container test color: red>
+  <h2 v-if ="wrongPW">Falsches Passwort </h2>
+             </v-container>
   </v-dialog>
 </template>
 
 <script>
-import axios from 'axios';
+import axios from "axios";
 
-  export default {
-    data() {
-      return {
-        show: true,
-        loading: false,
-        valid: false,
-        username: '',
-        password: ''
+export default {
+  data() {
+    return {
+      wrongPW: false,
+      show: true,
+      loading: false,
+      valid: false,
+      username: "",
+      password: "",
+    };
+  },
+  methods: {
+    authenticate() {
+      let params = new URLSearchParams(location.search);
+      if (params.get("redirect")) {
+        sessionStorage.setItem("redirect", params.get("redirect"));
       }
-    },
-    methods: {
-      authenticate() {        
-        let params = new URLSearchParams(location.search);
-        if (params.get('redirect')) {
-          sessionStorage.setItem('redirect', params.get('redirect'));
-        }
       try {
         // TODO relative path
         let auth_url = "http://localhost:8000/api-token-auth/";
-        
-        axios.post( auth_url, {
-          username : this.username,
-          password : this.password
-        })
-        .then( (response) => {
-          location.href = "/login/return/?token=" + response.data.token 
-        })          
-        .catch( 
-          console.log("Error")
-          // TODO Fehlerbehandlung einfügen
-        )
+
+        axios
+          .post(auth_url, {
+            username: this.username,
+            password: this.password,
+          })
+          .then((response) => {
+            location.href = "/login/return/?token=" + response.data.token;
+          })
+          .catch(
+            console.log("Error im ersten Catch"),
+           this.wrongPW = true
+          );
       } catch (err) {
-        console.err("Error: \n" + err)
+        console.err("Error im zweiten Catch: \n" + err);
       }
-      },
     },
-    watch: {
-      show(current) {
-        if (current === false) {
-          this.$router.push('/');
-        }
+  },
+  watch: {
+    show(current) {
+      if (current === false) {
+        this.$router.push("/");
       }
-    }
-  };
+    },
+  },
+};
 </script>

From 03f70b261fb29a1aa11278bee3eb0d70ffa99e58 Mon Sep 17 00:00:00 2001
From: Amar Bolkan <amar.bolkan@gmail.com>
Date: Tue, 8 Dec 2020 13:23:47 +0100
Subject: [PATCH 09/61] Changed CustomLogin URL to relativ path

---
 src/components/CustomLogin.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/CustomLogin.vue b/src/components/CustomLogin.vue
index a5466fe..a0f3584 100644
--- a/src/components/CustomLogin.vue
+++ b/src/components/CustomLogin.vue
@@ -84,7 +84,7 @@ export default {
       }
       try {
         // TODO relative path
-        let auth_url = "http://localhost:8000/api-token-auth/";
+        let auth_url = this.$appConfig.API_ROOT + '/auth/token';
 
         axios
           .post(auth_url, {

From 85c2a72c538abbe4a62fcd6d0c8cbf8726996967 Mon Sep 17 00:00:00 2001
From: Amar Bolkan <amar.bolkan@gmail.com>
Date: Tue, 8 Dec 2020 13:28:38 +0100
Subject: [PATCH 10/61] Todo entfernt

---
 src/components/CustomLogin.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/CustomLogin.vue b/src/components/CustomLogin.vue
index a0f3584..24baada 100644
--- a/src/components/CustomLogin.vue
+++ b/src/components/CustomLogin.vue
@@ -83,7 +83,6 @@ export default {
         sessionStorage.setItem("redirect", params.get("redirect"));
       }
       try {
-        // TODO relative path
         let auth_url = this.$appConfig.API_ROOT + '/auth/token';
 
         axios

From c928a55de70ba8728c0ec6a65726226dfd1f963f Mon Sep 17 00:00:00 2001
From: mlange304 <michael.lange@iteratec.com>
Date: Wed, 9 Dec 2020 12:50:10 +0100
Subject: [PATCH 11/61] =?UTF-8?q?messages.json=20f=C3=BCr=20custom=20login?=
 =?UTF-8?q?=20aktualisiert?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue                    |  6 +++---
 src/components/CustomLogin.vue | 13 +++++++------
 src/i18n/messages.json         |  6 ++++--
 3 files changed, 14 insertions(+), 11 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 8a12cfa..ed30a3c 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -9,8 +9,8 @@
 
       <v-toolbar-items>
         <About />
-
-        <v-btn text dark v-if="!user" :to="{name: 'login'}" color="success">
+      <!--TODO Dynamische Komponenten bei unterschiedlicher Provider Anzahl --> 
+        <v-btn text dark v-if="!user" :to="{name: 'customLogin'}" color="success">
           <span class="hidden-xs-only">{{ $t('message.app.login') }}</span>
           <v-icon right>{{ mdi.login }}</v-icon>
         </v-btn>
@@ -48,7 +48,7 @@
         <v-btn fab dark x-small v-if="hasSupport" :to="{name: 'support'}" color="red" class="support-button">
           <v-icon>{{ mdi.helpCircleOutline }}</v-icon>
         </v-btn>
-        <v-btn rounded x-large color="success" class="login-button" v-if="!user" :to="{name: 'login'}">
+        <v-btn rounded x-large color="success" class="login-button" v-if="!user" :to="{name: 'customLogin'}">
           <v-icon>{{ mdi.login }}</v-icon>&nbsp;<span>{{ $t('message.app.login') }}</span>
         </v-btn>
         <RentButton v-if="user" class="rent-button" />
diff --git a/src/components/CustomLogin.vue b/src/components/CustomLogin.vue
index 24baada..577546c 100644
--- a/src/components/CustomLogin.vue
+++ b/src/components/CustomLogin.vue
@@ -57,7 +57,7 @@
       </v-card-actions>
     </v-card>
     <v-container test color: red>
-  <h2 v-if ="wrongPW">Falsches Passwort </h2>
+  <h2 v-if ="wrongPW"> "$t('message.login.failed-login')" </h2>
              </v-container>
   </v-dialog>
 </template>
@@ -83,7 +83,7 @@ export default {
         sessionStorage.setItem("redirect", params.get("redirect"));
       }
       try {
-        let auth_url = this.$appConfig.API_ROOT + '/auth/token';
+        let auth_url = this.$appConfig.API_ROOT + "/auth/token";
 
         axios
           .post(auth_url, {
@@ -93,10 +93,11 @@ export default {
           .then((response) => {
             location.href = "/login/return/?token=" + response.data.token;
           })
-          .catch(
-            console.log("Error im ersten Catch"),
-           this.wrongPW = true
-          );
+          .catch((error) => {
+            if (error.response) {
+              this.wrongPW = true;
+            }
+          });
       } catch (err) {
         console.err("Error im zweiten Catch: \n" + err);
       }
diff --git a/src/i18n/messages.json b/src/i18n/messages.json
index 3f5666a..1ed40ab 100644
--- a/src/i18n/messages.json
+++ b/src/i18n/messages.json
@@ -25,7 +25,8 @@
         "login-with": "Login with",
         "configerror": "Cannot load login configuration",
         "username" : "Username",
-        "password" : "Password"
+        "password" : "Password",
+        "failed-login" : "Wrong Credentials"
       },
       "about": {
         "title": "About",
@@ -72,7 +73,8 @@
         "login-with": "Einloggen mit",
         "configerror": "Laden der Login-Konfiguration fehlgeschlagen",
         "username" : "Benutzername",
-        "password" : "Passwort"
+        "password" : "Passwort",
+        "failed-login" : "Falsche Anmeldedaten"
       },
       "about": {
         "title": "Über",

From 2800e522e0306e9eacf2fb0a36238537ff404535 Mon Sep 17 00:00:00 2001
From: Amar Bolkan <amar.bolkan@gmail.com>
Date: Wed, 9 Dec 2020 13:16:40 +0100
Subject: [PATCH 12/61] Changed request for station locations from POST to GET

---
 src/components/Rent.vue | 4 ++--
 src/store/index.js      | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/Rent.vue b/src/components/Rent.vue
index 9169d52..66c790a 100644
--- a/src/components/Rent.vue
+++ b/src/components/Rent.vue
@@ -157,7 +157,7 @@
       fetchStations() {
         
         let url = this.$appConfig.API_ROOT + '/stations/locations';
-        axios.post(url)
+        axios.get(url)
         .then( response => response.data)
         .then( data => {
           console.log(data)
@@ -165,7 +165,7 @@
         })          
         .catch( 
           console.log("Error")
-          // TODO Fehlerbehandlung einfügen
+          // TODO check response from server ...  if error disable bike renting
         )
       }
     },
diff --git a/src/store/index.js b/src/store/index.js
index 87a88fe..7b331c4 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -130,7 +130,7 @@ export default new Vuex.Store({
         data['lat'] = location.coords.latitude;
         data['lng'] = location.coords.longitude;
       }
- 
+      // TODO make configurable 
       data['lat'] = Vue.prototype.$returnLat;
       data['lng'] = Vue.prototype.$returnLng;
     

From 332020c533b0d4425139403a3dcf07e41ccc93dd Mon Sep 17 00:00:00 2001
From: Amar Bolkan <amar.bolkan@gmail.com>
Date: Wed, 9 Dec 2020 14:05:54 +0100
Subject: [PATCH 13/61] Added conditional rendering so the user has to select a
 location befor returning the bike

---
 src/components/Rent.vue | 20 ++++++++++++++++----
 1 file changed, 16 insertions(+), 4 deletions(-)

diff --git a/src/components/Rent.vue b/src/components/Rent.vue
index 66c790a..de05a32 100644
--- a/src/components/Rent.vue
+++ b/src/components/Rent.vue
@@ -58,11 +58,12 @@
                   <option v-for="station in availableStations" :value="station.id" :key="station.id">{{ station.name }}</option>
                 </select>
                 <br><br>
-                <p><span>Selected return location: {{ selectedStation  }}</span></p>
+                <p v-if="selectedStation != null" ><span>Selected return location: {{ selectedStation  }}</span></p>
+                <p v-else><span>Please select a return location</span></p>
               </div>
             </v-col>
           </v-row>
-          <v-btn color="success" @click="endRent(rent.id)" v-bind:loading="loadingRents.includes(rent.id)">
+          <v-btn v-if="selectedStation != null" color="success" @click="endRent(rent.id)" v-bind:loading="loadingRents.includes(rent.id)">
             {{ $t('message.rent.finish-rent') }}
           </v-btn>
         </v-list-item-content>
@@ -132,6 +133,7 @@
         this.loadingRents.push(rentId);
         Vue.prototype.$returnLng = this.lng
         Vue.prototype.$returnLat = this.lat
+        
         this.$store.dispatch("END_RENT", rentId)
           .catch(err => {
             this.rentError = err;
@@ -140,6 +142,15 @@
               this.loadingRents.splice(index, 1);
             }
           });
+
+        // check if end rent returned without an error if so, reset the choosen location and station to null
+        if (this.rentError === '')
+        {
+          
+          this.selectedStation = null
+          this.lng = null
+          this.lat = null
+        }
       },
       changeReturnLocation (event) {
         this.selectedStation = event.target.options[event.target.options.selectedIndex].text
@@ -163,9 +174,10 @@
           console.log(data)
           this.availableStations = data
         })          
-        .catch( 
-          console.log("Error")
+        .catch( (error) => {
+          console.log("Error ", error)
           // TODO check response from server ...  if error disable bike renting
+          }
         )
       }
     },

From 94e1228831d23fab9592add82942ed5e0928d0dc Mon Sep 17 00:00:00 2001
From: Amar Bolkan <amar.bolkan@gmail.com>
Date: Wed, 9 Dec 2020 14:06:27 +0100
Subject: [PATCH 14/61] Formatting

---
 src/components/Rent.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/Rent.vue b/src/components/Rent.vue
index de05a32..bb1d7bf 100644
--- a/src/components/Rent.vue
+++ b/src/components/Rent.vue
@@ -146,7 +146,6 @@
         // check if end rent returned without an error if so, reset the choosen location and station to null
         if (this.rentError === '')
         {
-          
           this.selectedStation = null
           this.lng = null
           this.lat = null

From 12b3e3da817980586de85bb23a9ce8a4b0c4f3c4 Mon Sep 17 00:00:00 2001
From: Amar Bolkan <amar.bolkan@gmail.com>
Date: Wed, 9 Dec 2020 14:30:34 +0100
Subject: [PATCH 15/61] added configurable messages for the return locations
 etc., also made the drop down list refetch the stations to ensure there are
 always selectable locations

---
 src/components/Rent.vue | 10 +++++-----
 src/i18n/messages.json  | 12 ++++++++++--
 2 files changed, 15 insertions(+), 7 deletions(-)

diff --git a/src/components/Rent.vue b/src/components/Rent.vue
index bb1d7bf..5da82e5 100644
--- a/src/components/Rent.vue
+++ b/src/components/Rent.vue
@@ -53,13 +53,13 @@
           <v-row class="pt-5">
             <v-col cols="6" md="6" class="py-0 pr-0">
               <div id="app">
-                <select class="form-control" @change="changeReturnLocation($event)">
-                  <option value="" selected disabled>Choose</option>
+                <select class="form-control" @change="changeReturnLocation($event)" @click=fetchStations()>
+                  <option value="" selected disabled> {{ $t('message.rent.choosable-locations')}} </option>
                   <option v-for="station in availableStations" :value="station.id" :key="station.id">{{ station.name }}</option>
                 </select>
                 <br><br>
-                <p v-if="selectedStation != null" ><span>Selected return location: {{ selectedStation  }}</span></p>
-                <p v-else><span>Please select a return location</span></p>
+                <p v-if="selectedStation != null" ><span>{{ $t('message.rent.selected-location')}}: {{ selectedStation  }}</span></p>
+                <p v-else><span> {{$t('message.rent.no-location') }} </span></p>
               </div>
             </v-col>
           </v-row>
@@ -152,6 +152,7 @@
         }
       },
       changeReturnLocation (event) {
+
         this.selectedStation = event.target.options[event.target.options.selectedIndex].text
     
         for (var  index in this.availableStations) 
@@ -170,7 +171,6 @@
         axios.get(url)
         .then( response => response.data)
         .then( data => {
-          console.log(data)
           this.availableStations = data
         })          
         .catch( (error) => {
diff --git a/src/i18n/messages.json b/src/i18n/messages.json
index 3f5666a..4a3af2b 100644
--- a/src/i18n/messages.json
+++ b/src/i18n/messages.json
@@ -12,7 +12,11 @@
         "bikenumber": "Bike number",
         "finish-rent": "Finish rent",
         "rent": "Rent",
-        "renting-for": "Renting for"
+        "renting-for": "Renting for",
+        "no-location" : "Please select a return location",
+        "choosable-locations": "Locations",
+        "selected-location" : "Return Location"
+
       },
       "lock": {
         "not-supported": "Lock cannot be unlocked this time"
@@ -59,7 +63,11 @@
         "bikenumber": "Radnummer",
         "finish-rent": "Leihe beenden",
         "rent": "Ausleihen",
-        "renting-for": "Ausleihe läuft"
+        "renting-for": "Ausleihe läuft",
+        "no-location" : "Bitte wählen Sie einen Abgabeort aus.",
+        "choosable-locations": "Abgabeorte",
+        "selected-location" : "Abgabeort"
+
       },
       "rentbutton": {
         "rent-bike": "Rad ausleihen",

From 47a1dc781562e645dda9b2fb893b730bc67f4d2e Mon Sep 17 00:00:00 2001
From: Amar Bolkan <amar.bolkan@gmail.com>
Date: Wed, 9 Dec 2020 14:39:23 +0100
Subject: [PATCH 16/61] Formatting

---
 src/components/Rent.vue | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/src/components/Rent.vue b/src/components/Rent.vue
index 5da82e5..541a710 100644
--- a/src/components/Rent.vue
+++ b/src/components/Rent.vue
@@ -143,7 +143,7 @@
             }
           });
 
-        // check if end rent returned without an error if so, reset the choosen location and station to null
+        // check if end rent returned without an error, if so set the choosen location and station to null
         if (this.rentError === '')
         {
           this.selectedStation = null
@@ -166,7 +166,6 @@
         }
       }, 
       fetchStations() {
-        
         let url = this.$appConfig.API_ROOT + '/stations/locations';
         axios.get(url)
         .then( response => response.data)
@@ -174,8 +173,12 @@
           this.availableStations = data
         })          
         .catch( (error) => {
-          console.log("Error ", error)
-          // TODO check response from server ...  if error disable bike renting
+            console.log(error)
+            if (error.response)
+            {
+              // TODO check response from server ... maybe give user a visual queue when the request failed
+
+            }
           }
         )
       }

From cbde3c0b8361396319772d9f18e267004599a7a8 Mon Sep 17 00:00:00 2001
From: mlange304 <michael.lange@iteratec.com>
Date: Wed, 9 Dec 2020 14:43:50 +0100
Subject: [PATCH 17/61] Message Dialog with wrong password from messages.json

---
 src/components/CustomLogin.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/CustomLogin.vue b/src/components/CustomLogin.vue
index 577546c..6f3fdcf 100644
--- a/src/components/CustomLogin.vue
+++ b/src/components/CustomLogin.vue
@@ -56,8 +56,8 @@
          
       </v-card-actions>
     </v-card>
-    <v-container test color: red>
-  <h2 v-if ="wrongPW"> "$t('message.login.failed-login')" </h2>
+    <v-container v-if ="wrongPW" color: red>
+  <h2 v-if ="wrongPW"> {{$t('message.login.failed-login')}} </h2>
              </v-container>
   </v-dialog>
 </template>

From 16ca31a0bb0df50d59e218dec3c9a597dac0af8c Mon Sep 17 00:00:00 2001
From: Amar Bolkan <amar.bolkan@gmail.com>
Date: Wed, 9 Dec 2020 15:07:39 +0100
Subject: [PATCH 18/61] Made messages configurable for english and german
 display, red box during login only rendered when sending wrong user
 credentials

---
 src/components/CustomLogin.vue | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/CustomLogin.vue b/src/components/CustomLogin.vue
index 577546c..3c6b15a 100644
--- a/src/components/CustomLogin.vue
+++ b/src/components/CustomLogin.vue
@@ -46,7 +46,7 @@
                   :loading="loading"
                   @click="authenticate()"
                 >
-                  {{ "Login" }}
+                  {{ $t("message.app.login") }}
                 </v-btn>
               </v-col>
             </v-row>
@@ -56,9 +56,9 @@
          
       </v-card-actions>
     </v-card>
-    <v-container test color: red>
-  <h2 v-if ="wrongPW"> "$t('message.login.failed-login')" </h2>
-             </v-container>
+    <v-container v-if ="wrongPW" test color: red>
+      <h2 > {{$t('message.login.failed-login') }} </h2>
+    </v-container>
   </v-dialog>
 </template>
 

From acfbfef7977c6a40edb06bb3a335f01729aec851 Mon Sep 17 00:00:00 2001
From: mlange304 <michael.lange@iteratec.com>
Date: Wed, 9 Dec 2020 15:24:42 +0100
Subject: [PATCH 19/61] Max with custom login 400

---
 src/components/CustomLogin.vue | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)

diff --git a/src/components/CustomLogin.vue b/src/components/CustomLogin.vue
index 6f3fdcf..6ec6a97 100644
--- a/src/components/CustomLogin.vue
+++ b/src/components/CustomLogin.vue
@@ -1,6 +1,6 @@
 
 <template>
-  <v-dialog v-model="show" max-width="500">
+  <v-dialog v-model="show" max-width="400">
     <v-card>
       <v-card-title class="text-h5 grey lighten-2" primary-title>
         {{ $t("message.login.login-with") }}
@@ -38,15 +38,14 @@
               </v-col>
             </v-row>
             <v-row class="pt-5">
-              <v-col cols="6" md="6" class="py-0 text-right">
+              <v-col cols="1" md="1" class="py-0 text-right">
                 <v-btn
                   class="mt-2"
                   color="success"
                   v-bind:disabled="!valid"
                   :loading="loading"
                   @click="authenticate()"
-                >
-                  {{ "Login" }}
+                >{{ "Login" }}
                 </v-btn>
               </v-col>
             </v-row>
@@ -57,7 +56,7 @@
       </v-card-actions>
     </v-card>
     <v-container v-if ="wrongPW" color: red>
-  <h2 v-if ="wrongPW"> {{$t('message.login.failed-login')}} </h2>
+  <h4 v-if ="wrongPW"> {{$t('message.login.failed-login')}} </h4>
              </v-container>
   </v-dialog>
 </template>

From 3011e4597a4df645eec1f4342145563e612aac5d Mon Sep 17 00:00:00 2001
From: Amar Bolkan <amar.bolkan@gmail.com>
Date: Wed, 9 Dec 2020 15:48:03 +0100
Subject: [PATCH 20/61] Formatting

---
 src/components/CustomLogin.vue | 1 -
 src/components/Rent.vue        | 2 --
 2 files changed, 3 deletions(-)

diff --git a/src/components/CustomLogin.vue b/src/components/CustomLogin.vue
index 174fcea..e6fbc09 100644
--- a/src/components/CustomLogin.vue
+++ b/src/components/CustomLogin.vue
@@ -76,7 +76,6 @@ import axios from 'axios';
           sessionStorage.setItem('redirect', params.get('redirect'));
         }
       try {
-        // TODO relative path
           let auth_url = this.$appConfig.API_ROOT + '/auth/token';
         
         axios.post( auth_url, {
diff --git a/src/components/Rent.vue b/src/components/Rent.vue
index 541a710..72e6582 100644
--- a/src/components/Rent.vue
+++ b/src/components/Rent.vue
@@ -78,8 +78,6 @@
   import TickingTime from "./TickingTime.vue";
   import RentLock from "./RentLock.vue";
 
-
-  //TODO delete later
   import Vue from 'vue'
   import axios from 'axios';
 

From 9a1aa0b8437cd2f9043665f063fc28aa83b5f769 Mon Sep 17 00:00:00 2001
From: Amar Bolkan <amar.bolkan@gmail.com>
Date: Wed, 9 Dec 2020 16:15:01 +0100
Subject: [PATCH 21/61] made the selectable return option more intuitive for
 the user

---
 src/components/Rent.vue | 23 ++++++++++++-----------
 1 file changed, 12 insertions(+), 11 deletions(-)

diff --git a/src/components/Rent.vue b/src/components/Rent.vue
index 72e6582..23c6188 100644
--- a/src/components/Rent.vue
+++ b/src/components/Rent.vue
@@ -51,15 +51,15 @@
           </v-list-item-subtitle>
           <v-list-item-subtitle>{{ $t('message.rent.renting-for') }} <ticking-time :datetime="rent.rent_start" /></v-list-item-subtitle>
           <v-row class="pt-5">
-            <v-col cols="6" md="6" class="py-0 pr-0">
+            <v-col cols="12" md="12" class="py-0 pr-0">
               <div id="app">
+                <label for="select-location"> {{ $t('message.rent.selected-location')}}: </label>
                 <select class="form-control" @change="changeReturnLocation($event)" @click=fetchStations()>
                   <option value="" selected disabled> {{ $t('message.rent.choosable-locations')}} </option>
                   <option v-for="station in availableStations" :value="station.id" :key="station.id">{{ station.name }}</option>
                 </select>
                 <br><br>
-                <p v-if="selectedStation != null" ><span>{{ $t('message.rent.selected-location')}}: {{ selectedStation  }}</span></p>
-                <p v-else><span> {{$t('message.rent.no-location') }} </span></p>
+                <p v-if="selectedStation == null"><span style="color:red"> {{$t('message.rent.no-location')}} </span></p>
               </div>
             </v-col>
           </v-row>
@@ -133,6 +133,15 @@
         Vue.prototype.$returnLat = this.lat
         
         this.$store.dispatch("END_RENT", rentId)
+          .then( () => {
+            // set selected location to null if end_rent returned without error
+            if (this.rentError === '')
+            {
+              this.selectedStation = null
+              this.lng = null
+              this.lat = null
+            }
+          })
           .catch(err => {
             this.rentError = err;
             let index = this.loadingRents.indexOf(rentId);
@@ -140,14 +149,6 @@
               this.loadingRents.splice(index, 1);
             }
           });
-
-        // check if end rent returned without an error, if so set the choosen location and station to null
-        if (this.rentError === '')
-        {
-          this.selectedStation = null
-          this.lng = null
-          this.lat = null
-        }
       },
       changeReturnLocation (event) {
 

From b04ae0c354ec68ad3a2c7405f6d27fa18c937359 Mon Sep 17 00:00:00 2001
From: Amar Bolkan <amar.bolkan@gmail.com>
Date: Wed, 9 Dec 2020 16:17:33 +0100
Subject: [PATCH 22/61] changes the message for choosable locations

---
 src/components/Rent.vue | 2 +-
 src/i18n/messages.json  | 7 +++++--
 2 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/src/components/Rent.vue b/src/components/Rent.vue
index 23c6188..861e9e8 100644
--- a/src/components/Rent.vue
+++ b/src/components/Rent.vue
@@ -55,7 +55,7 @@
               <div id="app">
                 <label for="select-location"> {{ $t('message.rent.selected-location')}}: </label>
                 <select class="form-control" @change="changeReturnLocation($event)" @click=fetchStations()>
-                  <option value="" selected disabled> {{ $t('message.rent.choosable-locations')}} </option>
+                  <option value="" selected disabled> {{ $t('message.rent.choose-locations')}} </option>
                   <option v-for="station in availableStations" :value="station.id" :key="station.id">{{ station.name }}</option>
                 </select>
                 <br><br>
diff --git a/src/i18n/messages.json b/src/i18n/messages.json
index 4a3af2b..9b69a4c 100644
--- a/src/i18n/messages.json
+++ b/src/i18n/messages.json
@@ -15,7 +15,8 @@
         "renting-for": "Renting for",
         "no-location" : "Please select a return location",
         "choosable-locations": "Locations",
-        "selected-location" : "Return Location"
+        "selected-location" : "Return Location",
+        "choose-locations" : "Choose a location"
 
       },
       "lock": {
@@ -66,7 +67,9 @@
         "renting-for": "Ausleihe läuft",
         "no-location" : "Bitte wählen Sie einen Abgabeort aus.",
         "choosable-locations": "Abgabeorte",
-        "selected-location" : "Abgabeort"
+        "selected-location" : "Abgabeort",
+        "choose-locations" : "Wähle einen Rückgabeort"
+
 
       },
       "rentbutton": {

From ee3eeea14c41a5d9d3dd8ff952da97e5e0b4d6b7 Mon Sep 17 00:00:00 2001
From: Amar Bolkan <amar.bolkan@gmail.com>
Date: Thu, 10 Dec 2020 11:43:15 +0100
Subject: [PATCH 23/61] Bug Fix when returning a bike, now each rentId gets
 associated with its own selectable rreturn location

---
 src/components/Rent.vue | 81 +++++++++++++++++++++++------------------
 src/store/index.js      | 11 ++++--
 2 files changed, 52 insertions(+), 40 deletions(-)

diff --git a/src/components/Rent.vue b/src/components/Rent.vue
index 861e9e8..97449cd 100644
--- a/src/components/Rent.vue
+++ b/src/components/Rent.vue
@@ -54,18 +54,19 @@
             <v-col cols="12" md="12" class="py-0 pr-0">
               <div id="app">
                 <label for="select-location"> {{ $t('message.rent.selected-location')}}: </label>
-                <select class="form-control" @change="changeReturnLocation($event)" @click=fetchStations()>
+                <select class="form-control" @change="changeReturnLocation($event, rent.id)" @click=fetchStations()>
                   <option value="" selected disabled> {{ $t('message.rent.choose-locations')}} </option>
                   <option v-for="station in availableStations" :value="station.id" :key="station.id">{{ station.name }}</option>
                 </select>
                 <br><br>
-                <p v-if="selectedStation == null"><span style="color:red"> {{$t('message.rent.no-location')}} </span></p>
+                <p v-if="chosenReturnLocations[rent.id] == null"><span style="color:red"> {{$t('message.rent.no-location')}} </span></p>
               </div>
             </v-col>
           </v-row>
-          <v-btn v-if="selectedStation != null" color="success" @click="endRent(rent.id)" v-bind:loading="loadingRents.includes(rent.id)">
+          <v-btn v-if="chosenReturnLocations[rent.id] != null" color="success" @click="endRent(rent.id)" v-bind:loading="loadingRents.includes(rent.id)">
             {{ $t('message.rent.finish-rent') }}
           </v-btn>
+
         </v-list-item-content>
       </v-list-item>
     </v-card>
@@ -78,7 +79,6 @@
   import TickingTime from "./TickingTime.vue";
   import RentLock from "./RentLock.vue";
 
-  import Vue from 'vue'
   import axios from 'axios';
 
   export default {
@@ -106,9 +106,8 @@
           lockOpenVariant: mdiLockOpenVariant
         },
         availableStations :[],
-        selectedStation : null,
-        lng: null,
-        lat: null
+        // dictionary which associates rentids with their selected return location
+        chosenReturnLocations : {}
       }
     },
     computed: {
@@ -126,40 +125,50 @@
                 (err) => this.rentError = err)
           .finally(() => this.loading = false);
       },
-      endRent(rentId) {
-        this.rentError = '';
-        this.loadingRents.push(rentId);
-        Vue.prototype.$returnLng = this.lng
-        Vue.prototype.$returnLat = this.lat
-        
-        this.$store.dispatch("END_RENT", rentId)
-          .then( () => {
-            // set selected location to null if end_rent returned without error
-            if (this.rentError === '')
-            {
-              this.selectedStation = null
-              this.lng = null
-              this.lat = null
-            }
-          })
-          .catch(err => {
-            this.rentError = err;
-            let index = this.loadingRents.indexOf(rentId);
-            if (index >= 0) {
-              this.loadingRents.splice(index, 1);
-            }
-          });
-      },
-      changeReturnLocation (event) {
+      endRent(rentId) {       
+       let coords = this.chosenReturnLocations[rentId];
+       if (coords == null) 
+       {
+          console.log("Found no return location assocaited with id: ", rentId)
+       }
+       else 
+       {
+          console.log(rentId)
+          console.log(coords.lat)
+          console.log(coords.lng)
+          this.rentError = '';
+          this.loadingRents.push(rentId);
 
-        this.selectedStation = event.target.options[event.target.options.selectedIndex].text
+          this.$store.dispatch("END_RENT", {rentId : rentId, lat : coords.lat, lng : coords.lng})
+            .then( () => {
+              // set selected location to null if end_rent returned without error
+              if (this.rentError === '')
+              {
+                delete this.chosenReturnLocations[rentId]
+              }
+            })
+            .catch(err => {
+              this.rentError = err;
+              let index = this.loadingRents.indexOf(rentId);
+              if (index >= 0) {
+                this.loadingRents.splice(index, 1);
+              }
+            });
+       }
+      },
+      changeReturnLocation (event, rentId) {
+        let selectedStation = event.target.options[event.target.options.selectedIndex].text
     
         for (var  index in this.availableStations) 
         {
-          if (this.availableStations[index].name === this.selectedStation)
+          if (this.availableStations[index].name === selectedStation)
           {
-            this.lng = this.availableStations[index].location.lng;
-            this.lat = this.availableStations[index].location.lat;
+            // END REMOVE
+            this.chosenReturnLocations[rentId] = {
+              lng : this.availableStations[index].location.lng,
+              lat : this.availableStations[index].location.lat,
+              location: event.target.options[event.target.options.selectedIndex].text
+            }
             break;
           }
         }
diff --git a/src/store/index.js b/src/store/index.js
index 7b331c4..d2d1f9b 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -118,7 +118,8 @@ export default new Vuex.Store({
         throw unpackErrorMessage(err);
       }
     },
-    END_RENT: async function({ dispatch, commit, state }, rentId) {
+    // TODO change payload back to rentId once on bike location tracking is available 
+    END_RENT: async function({ dispatch, commit, state }, payload) {
       let location;
       try {
         location = await getCurrentPosition({ timeout: 3000, enableHighAccuracy: true, maximumAge: 20000 });
@@ -130,10 +131,12 @@ export default new Vuex.Store({
         data['lat'] = location.coords.latitude;
         data['lng'] = location.coords.longitude;
       }
-      // TODO make configurable 
-      data['lat'] = Vue.prototype.$returnLat;
-      data['lng'] = Vue.prototype.$returnLng;
+
+      // TODO build selectable return locations as a configurable feature  
+      data['lat'] = payload.lat;
+      data['lng'] = payload.lng;
     
+      let rentId = payload.rentId;
 
       try {
         let finish_url = state.rents.find((el) => el.id == rentId).finish_url;

From 5b26be56ff4b7088f1136a4f45ff9db635cc027d Mon Sep 17 00:00:00 2001
From: Amar Bolkan <amar.bolkan@gmail.com>
Date: Thu, 10 Dec 2020 11:47:31 +0100
Subject: [PATCH 24/61] removed unnecessary if statement inside endRent

---
 src/components/Rent.vue | 49 ++++++++++++++++++-----------------------
 1 file changed, 21 insertions(+), 28 deletions(-)

diff --git a/src/components/Rent.vue b/src/components/Rent.vue
index 97449cd..8c15626 100644
--- a/src/components/Rent.vue
+++ b/src/components/Rent.vue
@@ -126,35 +126,28 @@
           .finally(() => this.loading = false);
       },
       endRent(rentId) {       
-       let coords = this.chosenReturnLocations[rentId];
-       if (coords == null) 
-       {
-          console.log("Found no return location assocaited with id: ", rentId)
-       }
-       else 
-       {
-          console.log(rentId)
-          console.log(coords.lat)
-          console.log(coords.lng)
-          this.rentError = '';
-          this.loadingRents.push(rentId);
+        let coords = this.chosenReturnLocations[rentId];
+        console.log(rentId)
+        console.log(coords.lat)
+        console.log(coords.lng)
+        this.rentError = '';
+        this.loadingRents.push(rentId);
 
-          this.$store.dispatch("END_RENT", {rentId : rentId, lat : coords.lat, lng : coords.lng})
-            .then( () => {
-              // set selected location to null if end_rent returned without error
-              if (this.rentError === '')
-              {
-                delete this.chosenReturnLocations[rentId]
-              }
-            })
-            .catch(err => {
-              this.rentError = err;
-              let index = this.loadingRents.indexOf(rentId);
-              if (index >= 0) {
-                this.loadingRents.splice(index, 1);
-              }
-            });
-       }
+        this.$store.dispatch("END_RENT", {rentId : rentId, lat : coords.lat, lng : coords.lng})
+          .then( () => {
+            // set selected location to null if end_rent returned without error
+            if (this.rentError === '')
+            {
+              delete this.chosenReturnLocations[rentId]
+            }
+          })
+          .catch(err => {
+            this.rentError = err;
+            let index = this.loadingRents.indexOf(rentId);
+            if (index >= 0) {
+              this.loadingRents.splice(index, 1);
+            }
+          });
       },
       changeReturnLocation (event, rentId) {
         let selectedStation = event.target.options[event.target.options.selectedIndex].text

From 02660e93a1093878214392a58b66658f7d4c22a0 Mon Sep 17 00:00:00 2001
From: Amar Bolkan <amar.bolkan@gmail.com>
Date: Thu, 10 Dec 2020 13:30:55 +0100
Subject: [PATCH 25/61] Formatting

---
 src/components/Rent.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/Rent.vue b/src/components/Rent.vue
index 8c15626..37dd316 100644
--- a/src/components/Rent.vue
+++ b/src/components/Rent.vue
@@ -66,7 +66,6 @@
           <v-btn v-if="chosenReturnLocations[rent.id] != null" color="success" @click="endRent(rent.id)" v-bind:loading="loadingRents.includes(rent.id)">
             {{ $t('message.rent.finish-rent') }}
           </v-btn>
-
         </v-list-item-content>
       </v-list-item>
     </v-card>

From eed8ebdd7ea2438cb83a51a16548043da05ac464 Mon Sep 17 00:00:00 2001
From: mlange304 <michael.lange@iteratec.com>
Date: Mon, 14 Dec 2020 15:09:29 +0100
Subject: [PATCH 26/61] =?UTF-8?q?Design=20=C3=84nderungen=20der=20Error-Bo?=
 =?UTF-8?q?x?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Rent.vue | 415 +++++++++++++++++++++++++---------------
 src/i18n/messages.json  |   2 +-
 2 files changed, 265 insertions(+), 152 deletions(-)

diff --git a/src/components/Rent.vue b/src/components/Rent.vue
index 37dd316..54ead02 100644
--- a/src/components/Rent.vue
+++ b/src/components/Rent.vue
@@ -1,37 +1,38 @@
 <template>
-  <v-dialog v-model="show" max-width="400">
+  <v-dialog v-model="show" max-width="450">
     <v-card>
       <v-form v-model="valid" ref="rentBikeForm" @submit.prevent="startRent">
         <v-container class="pb-0">
           <v-row v-if="rentError">
             <v-col col="12" md="12" class="py-0">
-             <v-alert
-                dense
-                outlined
-                type="error"
-                class="my-0"
-              >
-                {{rentError}}
+              <v-alert dense outlined type="error" class="my-0">
+                {{ rentError }}
               </v-alert>
             </v-col>
           </v-row>
           <v-row class="pt-5">
             <v-col cols="6" md="6" class="py-0 pr-0">
               <v-text-field
-                  type="text"
-                  :label="$t('message.rent.bikenumber')"
-                  v-model="bikenumber"
-                  outlined
-                  required
-                  autofocus
-                  :rules="bikenumberrules"
-                  inputmode="numeric"
-                  pattern="[0-9]*"
-                ></v-text-field>
+                type="text"
+                :label="$t('message.rent.bikenumber')"
+                v-model="bikenumber"
+                outlined
+                required
+                autofocus
+                :rules="bikenumberrules"
+                inputmode="numeric"
+                pattern="[0-9]*"
+              ></v-text-field>
             </v-col>
             <v-col cols="6" md="6" class="py-0 text-right">
-              <v-btn class="mt-2" color="success" v-bind:disabled="!valid" :loading="loading" @click="startRent">
-                {{ $t('message.rent.rent') }}
+              <v-btn
+                class="mt-2"
+                color="success"
+                v-bind:disabled="!valid"
+                :loading="loading"
+                @click="startRent"
+              >
+                {{ $t("message.rent.rent") }}
               </v-btn>
             </v-col>
           </v-row>
@@ -40,32 +41,74 @@
 
       <v-divider class="mx-4" v-if="rents"></v-divider>
 
-      <v-list-item
-        v-for="rent in rents"
-        :key="rent.id"
-      >
+      <v-list-item v-for="rent in rents" :key="rent.id">
         <v-list-item-content>
-          <v-list-item-title>{{ $t('message.rent.bikenumber') }}: {{rent.bike.bike_number}}</v-list-item-title>
+          <v-list-item-title
+            >{{ $t("message.rent.bikenumber") }}:
+            {{ rent.bike.bike_number }}</v-list-item-title
+          >
           <v-list-item-subtitle v-if="rent.bike.lock_type">
             <RentLock :rent="rent" />
           </v-list-item-subtitle>
-          <v-list-item-subtitle>{{ $t('message.rent.renting-for') }} <ticking-time :datetime="rent.rent_start" /></v-list-item-subtitle>
+          <v-list-item-subtitle
+            >{{ $t("message.rent.renting-for") }}
+            <ticking-time :datetime="rent.rent_start"
+          /></v-list-item-subtitle>
           <v-row class="pt-5">
             <v-col cols="12" md="12" class="py-0 pr-0">
-              <div id="app">
-                <label for="select-location"> {{ $t('message.rent.selected-location')}}: </label>
-                <select class="form-control" @change="changeReturnLocation($event, rent.id)" @click=fetchStations()>
-                  <option value="" selected disabled> {{ $t('message.rent.choose-locations')}} </option>
-                  <option v-for="station in availableStations" :value="station.id" :key="station.id">{{ station.name }}</option>
+              <div id="app" class="dropdown">
+                <label class="dropdownLabel" for="select-location">
+                  {{ $t("message.rent.selected-location") }}:
+                </label>
+                <select 
+                
+                  class="form-control"
+                  @change="changeReturnLocation($event, rent.id)"
+                  @click="fetchStations()"
+                >
+                  <option value="" selected disabled>
+                    {{ $t("message.rent.choose-locations") }} &#11167;
+                  </option>
+                  <option
+                    v-for="station in availableStations"
+                    :value="station.id"
+                    :key="station.id"
+                  >
+                    {{ station.name }}
+                  </option>
                 </select>
-                <br><br>
-                <p v-if="chosenReturnLocations[rent.id] == null"><span style="color:red"> {{$t('message.rent.no-location')}} </span></p>
+                <br /><br />
               </div>
             </v-col>
           </v-row>
-          <v-btn v-if="chosenReturnLocations[rent.id] != null" color="success" @click="endRent(rent.id)" v-bind:loading="loadingRents.includes(rent.id)">
-            {{ $t('message.rent.finish-rent') }}
+          <v-row v-if="chosenReturnLocations[rent.id] == null">
+            <v-col col="12" md="12" class="py-0">
+              <v-alert dense outlined type="error" class="my-0">
+                {{ $t("message.rent.no-location") }}
+              </v-alert>
+            </v-col>
+          </v-row>
+          <v-btn
+            v-if="chosenReturnLocations[rent.id] != null"
+            color="success"
+            @click="endRent(rent.id)"
+            v-bind:loading="loadingRents.includes(rent.id)"
+          >
+            {{ $t("message.rent.finish-rent") }}
           </v-btn>
+          <!--
+          <div>
+            <ejs-dropdownbutton :items="items" iconCss="ddb-icons e-message"
+              >Message</ejs-dropdownbutton
+            >
+            <ejs-dropdownbutton
+              :items="items"
+              iconCss="ddb-icons e-message"
+              iconPosition="Top"
+              >Message</ejs-dropdownbutton
+            >
+          </div>
+          -->
         </v-list-item-content>
       </v-list-item>
     </v-card>
@@ -73,137 +116,207 @@
 </template>
 
 <script>
-  import { mapState } from 'vuex';
-  import { mdiLock, mdiLockOpenVariant } from '@mdi/js'
-  import TickingTime from "./TickingTime.vue";
-  import RentLock from "./RentLock.vue";
+import { mapState } from "vuex";
+import { mdiLock, mdiLockOpenVariant } from "@mdi/js";
+import TickingTime from "./TickingTime.vue";
+import RentLock from "./RentLock.vue";
 
-  import axios from 'axios';
+import axios from "axios";
 
-  export default {
-    components: { TickingTime, RentLock },
-    props: ['bikeId'],
-    data() {
-      return {
-        show: true,
-        valid: false,
-        loading: false,
-        bikenumber: '',
-        rentError: '',
-        loadingRents: [],
+//import Vue from "vue";
+//import { DropDownButtonPlugin } from "@syncfusion/ej2-vue-splitbuttons";
+//import { enableRipple } from "@syncfusion/ej2-base";
 
-        bikenumberrules: [
-          value => {
-            const pattern = /\d+$/;
-            if (value === '' || typeof value === 'undefined') return true;
-            return pattern.test(value) || 'Please only numbers';
-          },
-        ],
+//enableRipple(true);
+//Vue.use(DropDownButtonPlugin);
 
-        mdi: {
-          lock: mdiLock,
-          lockOpenVariant: mdiLockOpenVariant
+export default {
+  components: { TickingTime, RentLock },
+  props: ["bikeId"],
+  data() {
+    return {
+      /*
+      items: [
+        {
+          text: "Edit",
         },
-        availableStations :[],
-        // dictionary which associates rentids with their selected return location
-        chosenReturnLocations : {}
-      }
-    },
-    computed: {
-      ...mapState(['rents'])
-    },
-    created() {
-      this.fetchStations();
-    },
-    methods: {
-      startRent() {
-        this.loading = true;
-        this.rentError = '';
-        this.$store.dispatch("START_RENT", this.bikenumber)
-          .then(() => this.$refs.rentBikeForm.reset(),
-                (err) => this.rentError = err)
-          .finally(() => this.loading = false);
-      },
-      endRent(rentId) {       
-        let coords = this.chosenReturnLocations[rentId];
-        console.log(rentId)
-        console.log(coords.lat)
-        console.log(coords.lng)
-        this.rentError = '';
-        this.loadingRents.push(rentId);
+        {
+          text: "Delete",
+        },
+        {
+          text: "Mark as Read",
+        },
+        {
+          text: "Like Message",
+        },
+      ],
+      */
+      show: true,
+      valid: false,
+      loading: false,
+      bikenumber: "",
+      rentError: "",
+      emptyStationError: "",
+      loadingRents: [],
 
-        this.$store.dispatch("END_RENT", {rentId : rentId, lat : coords.lat, lng : coords.lng})
-          .then( () => {
-            // set selected location to null if end_rent returned without error
-            if (this.rentError === '')
-            {
-              delete this.chosenReturnLocations[rentId]
-            }
-          })
-          .catch(err => {
-            this.rentError = err;
-            let index = this.loadingRents.indexOf(rentId);
-            if (index >= 0) {
-              this.loadingRents.splice(index, 1);
-            }
-          });
+      bikenumberrules: [
+        (value) => {
+          const pattern = /\d+$/;
+          if (value === "" || typeof value === "undefined") return true;
+          return pattern.test(value) || "Please only numbers";
+        },
+      ],
+
+      mdi: {
+        lock: mdiLock,
+        lockOpenVariant: mdiLockOpenVariant,
       },
-      changeReturnLocation (event, rentId) {
-        let selectedStation = event.target.options[event.target.options.selectedIndex].text
-    
-        for (var  index in this.availableStations) 
-        {
-          if (this.availableStations[index].name === selectedStation)
-          {
-            // END REMOVE
-            this.chosenReturnLocations[rentId] = {
-              lng : this.availableStations[index].location.lng,
-              lat : this.availableStations[index].location.lat,
-              location: event.target.options[event.target.options.selectedIndex].text
-            }
-            break;
-          }
-        }
-      }, 
-      fetchStations() {
-        let url = this.$appConfig.API_ROOT + '/stations/locations';
-        axios.get(url)
-        .then( response => response.data)
-        .then( data => {
-          this.availableStations = data
-        })          
-        .catch( (error) => {
-            console.log(error)
-            if (error.response)
-            {
-              // TODO check response from server ... maybe give user a visual queue when the request failed
+      availableStations: [],
+      // dictionary which associates rentids with their selected return location
+      chosenReturnLocations: {},
+    };
+  },
+  computed: {
+    ...mapState(["rents"]),
+  },
+  created() {
+    this.fetchStations();
+  },
+  methods: {
+    startRent() {
+      this.loading = true;
+      this.rentError = "";
+      this.$store
+        .dispatch("START_RENT", this.bikenumber)
+        .then(
+          () => this.$refs.rentBikeForm.reset(),
+          (err) => (this.rentError = err)
+        )
+        .finally(() => (this.loading = false));
+    },
+    endRent(rentId) {
+      let coords = this.chosenReturnLocations[rentId];
+      console.log(rentId);
+      console.log(coords.lat);
+      console.log(coords.lng);
+      this.rentError = "";
+      this.loadingRents.push(rentId);
 
-            }
+      this.$store
+        .dispatch("END_RENT", {
+          rentId: rentId,
+          lat: coords.lat,
+          lng: coords.lng,
+        })
+        .then(() => {
+          // set selected location to null if end_rent returned without error
+          if (this.rentError === "") {
+            delete this.chosenReturnLocations[rentId];
           }
-        )
-      }
+        })
+        .catch((err) => {
+          this.rentError = err;
+          let index = this.loadingRents.indexOf(rentId);
+          if (index >= 0) {
+            this.loadingRents.splice(index, 1);
+          }
+        });
     },
-    mounted() {
-      this.bikenumber = this.bikeId;
+    changeReturnLocation(event, rentId) {
+      let selectedStation =
+        event.target.options[event.target.options.selectedIndex].text;
+
+      for (var index in this.availableStations) {
+        if (this.availableStations[index].name === selectedStation) {
+          // END REMOVE
+          this.chosenReturnLocations[rentId] = {
+            lng: this.availableStations[index].location.lng,
+            lat: this.availableStations[index].location.lat,
+            location:
+              event.target.options[event.target.options.selectedIndex].text,
+          };
+          break;
+        }
+      }
     },
-    watch: {
-      show(current) {
-        if (current === false) {
-          this.$router.push('/');
-          if (this.$refs.rentBikeForm) {
-            this.$refs.rentBikeForm.reset();
+    fetchStations() {
+      let url = this.$appConfig.API_ROOT + "/stations/locations";
+      axios
+        .get(url)
+        .then((response) => response.data)
+        .then((data) => {
+          this.availableStations = data;
+        })
+        .catch((error) => {
+          console.log(error);
+          if (error.response) {
+            // TODO check response from server ... maybe give user a visual queue when the request failed
           }
-          this.rentError = '';
+        });
+    },
+  },
+  mounted() {
+    this.bikenumber = this.bikeId;
+  },
+  watch: {
+    show(current) {
+      if (current === false) {
+        this.$router.push("/");
+        if (this.$refs.rentBikeForm) {
+          this.$refs.rentBikeForm.reset();
         }
+        this.rentError = "";
       }
-    }
-  };
+    },
+  },
+};
 </script>
 
 <style>
-  .rent-unlock-key {
-    font-family: monospace;
-    font-size: 20px;
-    font-weight: bold;
-  }
+/*
+@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
+@import "../node_modules/@syncfusion/ej2-buttons/styles/material.css";
+@import "../node_modules/@syncfusion/ej2-popups/styles/material.css";
+@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css";
+@font-face {
+  font-family: "e-db-icons";
+  src: url(data:application/x-font-ttf;charset=utf-8;base64,AAEAAAAKAIAAAwAgT1MvMj0jSRoAAAEoAAAAVmNtYXDnFudgAAABkAAAADpnbHlmSrKTCAAAAdgAAAC4aGVhZBKtK8cAAADQAAAANmhoZWEHmQNtAAAArAAAACRobXR4D7gAAAAAAYAAAAAQbG9jYQB4ADoAAAHMAAAACm1heHABEAAYAAABCAAAACBuYW1lH00mDAAAApAAAAJJcG9zdIwkSr0AAATcAAAATQABAAADUv9qAFoEAAAA//4D6gABAAAAAAAAAAAAAAAAAAAABAABAAAAAQAAGc/PS18PPPUACwPoAAAAANfSc3wAAAAA19JzfAAAAAAD6gPqAAAACAACAAAAAAAAAAEAAAAEAAwAAgAAAAAAAgAAAAoACgAAAP8AAAAAAAAAAQPuAZAABQAAAnoCvAAAAIwCegK8AAAB4AAxAQIAAAIABQMAAAAAAAAAAAAAAAAAAAAAAAAAAAAAUGZFZABA5wPnBQNS/2oAWgPqAJYAAAABAAAAAAAABAAAAAPoAAAD6AAAA+gAAAAAAAIAAAADAAAAFAADAAEAAAAUAAQAJgAAAAQABAABAADnBf//AADnA///AAAAAQAEAAAAAQACAAMAAAAAAAAAHAA6AFwAAAACAAAAAAPqA2UABgAKAAA3IREjCQEjBRcBIQID6AL+Dv4NAQEY3QG4/I+IAsL+GAHonroBcwAAAAIAAAAAA8YD6gAFAAoAADchESMJASUHCQImA6AD/jL+MQEEywGWAZb+agICX/4+AcLXsv6cAWQBZAAAAAEAAAAAA+oD6gALAAATCQEXCQE3CQEnCQECATP+zcIBMgEzwf7OATLB/s3+zgMp/s3+zsIBM/7NwgEyATPB/s4BMgAAAAASAN4AAQAAAAAAAAABAAAAAQAAAAAAAQAKAAEAAQAAAAAAAgAHAAsAAQAAAAAAAwAKABIAAQAAAAAABAAKABwAAQAAAAAABQALACYAAQAAAAAABgAKADEAAQAAAAAACgAsADsAAQAAAAAACwASAGcAAwABBAkAAAACAHkAAwABBAkAAQAUAHsAAwABBAkAAgAOAI8AAwABBAkAAwAUAJ0AAwABBAkABAAUALEAAwABBAkABQAWAMUAAwABBAkABgAUANsAAwABBAkACgBYAO8AAwABBAkACwAkAUcgZS1kYi1pY29uc1JlZ3VsYXJlLWRiLWljb25zZS1kYi1pY29uc1ZlcnNpb24gMS4wZS1kYi1pY29uc0ZvbnQgZ2VuZXJhdGVkIHVzaW5nIFN5bmNmdXNpb24gTWV0cm8gU3R1ZGlvd3d3LnN5bmNmdXNpb24uY29tACAAZQAtAGQAYgAtAGkAYwBvAG4AcwBSAGUAZwB1AGwAYQByAGUALQBkAGIALQBpAGMAbwBuAHMAZQAtAGQAYgAtAGkAYwBvAG4AcwBWAGUAcgBzAGkAbwBuACAAMQAuADAAZQAtAGQAYgAtAGkAYwBvAG4AcwBGAG8AbgB0ACAAZwBlAG4AZQByAGEAdABlAGQAIAB1AHMAaQBuAGcAIABTAHkAbgBjAGYAdQBzAGkAbwBuACAATQBlAHQAcgBvACAAUwB0AHUAZABpAG8AdwB3AHcALgBzAHkAbgBjAGYAdQBzAGkAbwBuAC4AYwBvAG0AAAAAAgAAAAAAAAAKAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAEAQIBAwEEAQUADG1lc3NhZ2UtbWFpbAtyZWFkLXVucmVhZAZkZWxldGUAAAAAAA==)
+    format("truetype");
+  font-weight: normal;
+  font-style: normal;
+}
+.ddb-icons {
+  font-family: "e-db-icons" !important;
+  speak: none;
+  font-size: 55px;
+  font-style: normal;
+  font-weight: normal;
+  font-variant: normal;
+  text-transform: none;
+  line-height: 1;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.e-message::before {
+  content: "\e703";
+}
+*/
+.rent-unlock-key {
+  font-family: monospace;
+  font-size: 20px;
+  font-weight: bold;
+}
+.dropdown {
+  font-family: monospace;
+  font-size: 20px;
+  font-weight: normal;
+}
+.form-control {
+  /*width: 100%;*/
+  font-family: monospace;
+  font-size: 18px;
+  font-weight: normal;
+  padding: 1.5%;
+}
 </style>
diff --git a/src/i18n/messages.json b/src/i18n/messages.json
index 9b69a4c..e05af82 100644
--- a/src/i18n/messages.json
+++ b/src/i18n/messages.json
@@ -65,7 +65,7 @@
         "finish-rent": "Leihe beenden",
         "rent": "Ausleihen",
         "renting-for": "Ausleihe läuft",
-        "no-location" : "Bitte wählen Sie einen Abgabeort aus.",
+        "no-location" : "Bitte wählen Sie einen Abgabeort",
         "choosable-locations": "Abgabeorte",
         "selected-location" : "Abgabeort",
         "choose-locations" : "Wähle einen Rückgabeort"

From 9448b5aa667c49be44c91d7f494450a168555d87 Mon Sep 17 00:00:00 2001
From: mlange304 <michael.lange@iteratec.com>
Date: Mon, 14 Dec 2020 15:33:44 +0100
Subject: [PATCH 27/61] =?UTF-8?q?Dropdown-Pfeil=20nicht=20mehr=20hardcoded?=
 =?UTF-8?q?=20sondern=20=C3=BCber=20CSS-Styles?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Rent.vue | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/components/Rent.vue b/src/components/Rent.vue
index 54ead02..81a94cf 100644
--- a/src/components/Rent.vue
+++ b/src/components/Rent.vue
@@ -60,14 +60,13 @@
                 <label class="dropdownLabel" for="select-location">
                   {{ $t("message.rent.selected-location") }}:
                 </label>
-                <select 
-                
-                  class="form-control"
+                <select
+                  class="dropdown-item"
                   @change="changeReturnLocation($event, rent.id)"
                   @click="fetchStations()"
                 >
                   <option value="" selected disabled>
-                    {{ $t("message.rent.choose-locations") }} &#11167;
+                    {{ $t("message.rent.choose-locations") }}
                   </option>
                   <option
                     v-for="station in availableStations"
@@ -312,8 +311,9 @@ export default {
   font-size: 20px;
   font-weight: normal;
 }
-.form-control {
+.dropdown-item{
   /*width: 100%;*/
+  -webkit-appearance: auto;
   font-family: monospace;
   font-size: 18px;
   font-weight: normal;

From 8bce2273e10ef3b34966dd871faa2284e3def3d4 Mon Sep 17 00:00:00 2001
From: mlange304 <michael.lange@iteratec.com>
Date: Mon, 14 Dec 2020 15:40:10 +0100
Subject: [PATCH 28/61] Clean up

---
 src/components/Rent.vue | 68 +----------------------------------------
 1 file changed, 1 insertion(+), 67 deletions(-)

diff --git a/src/components/Rent.vue b/src/components/Rent.vue
index 81a94cf..c5c39e1 100644
--- a/src/components/Rent.vue
+++ b/src/components/Rent.vue
@@ -95,19 +95,6 @@
           >
             {{ $t("message.rent.finish-rent") }}
           </v-btn>
-          <!--
-          <div>
-            <ejs-dropdownbutton :items="items" iconCss="ddb-icons e-message"
-              >Message</ejs-dropdownbutton
-            >
-            <ejs-dropdownbutton
-              :items="items"
-              iconCss="ddb-icons e-message"
-              iconPosition="Top"
-              >Message</ejs-dropdownbutton
-            >
-          </div>
-          -->
         </v-list-item-content>
       </v-list-item>
     </v-card>
@@ -122,40 +109,17 @@ import RentLock from "./RentLock.vue";
 
 import axios from "axios";
 
-//import Vue from "vue";
-//import { DropDownButtonPlugin } from "@syncfusion/ej2-vue-splitbuttons";
-//import { enableRipple } from "@syncfusion/ej2-base";
-
-//enableRipple(true);
-//Vue.use(DropDownButtonPlugin);
-
 export default {
   components: { TickingTime, RentLock },
   props: ["bikeId"],
   data() {
     return {
-      /*
-      items: [
-        {
-          text: "Edit",
-        },
-        {
-          text: "Delete",
-        },
-        {
-          text: "Mark as Read",
-        },
-        {
-          text: "Like Message",
-        },
-      ],
-      */
+    
       show: true,
       valid: false,
       loading: false,
       bikenumber: "",
       rentError: "",
-      emptyStationError: "",
       loadingRents: [],
 
       bikenumberrules: [
@@ -272,35 +236,6 @@ export default {
 </script>
 
 <style>
-/*
-@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
-@import "../node_modules/@syncfusion/ej2-buttons/styles/material.css";
-@import "../node_modules/@syncfusion/ej2-popups/styles/material.css";
-@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css";
-@font-face {
-  font-family: "e-db-icons";
-  src: url(data:application/x-font-ttf;charset=utf-8;base64,AAEAAAAKAIAAAwAgT1MvMj0jSRoAAAEoAAAAVmNtYXDnFudgAAABkAAAADpnbHlmSrKTCAAAAdgAAAC4aGVhZBKtK8cAAADQAAAANmhoZWEHmQNtAAAArAAAACRobXR4D7gAAAAAAYAAAAAQbG9jYQB4ADoAAAHMAAAACm1heHABEAAYAAABCAAAACBuYW1lH00mDAAAApAAAAJJcG9zdIwkSr0AAATcAAAATQABAAADUv9qAFoEAAAA//4D6gABAAAAAAAAAAAAAAAAAAAABAABAAAAAQAAGc/PS18PPPUACwPoAAAAANfSc3wAAAAA19JzfAAAAAAD6gPqAAAACAACAAAAAAAAAAEAAAAEAAwAAgAAAAAAAgAAAAoACgAAAP8AAAAAAAAAAQPuAZAABQAAAnoCvAAAAIwCegK8AAAB4AAxAQIAAAIABQMAAAAAAAAAAAAAAAAAAAAAAAAAAAAAUGZFZABA5wPnBQNS/2oAWgPqAJYAAAABAAAAAAAABAAAAAPoAAAD6AAAA+gAAAAAAAIAAAADAAAAFAADAAEAAAAUAAQAJgAAAAQABAABAADnBf//AADnA///AAAAAQAEAAAAAQACAAMAAAAAAAAAHAA6AFwAAAACAAAAAAPqA2UABgAKAAA3IREjCQEjBRcBIQID6AL+Dv4NAQEY3QG4/I+IAsL+GAHonroBcwAAAAIAAAAAA8YD6gAFAAoAADchESMJASUHCQImA6AD/jL+MQEEywGWAZb+agICX/4+AcLXsv6cAWQBZAAAAAEAAAAAA+oD6gALAAATCQEXCQE3CQEnCQECATP+zcIBMgEzwf7OATLB/s3+zgMp/s3+zsIBM/7NwgEyATPB/s4BMgAAAAASAN4AAQAAAAAAAAABAAAAAQAAAAAAAQAKAAEAAQAAAAAAAgAHAAsAAQAAAAAAAwAKABIAAQAAAAAABAAKABwAAQAAAAAABQALACYAAQAAAAAABgAKADEAAQAAAAAACgAsADsAAQAAAAAACwASAGcAAwABBAkAAAACAHkAAwABBAkAAQAUAHsAAwABBAkAAgAOAI8AAwABBAkAAwAUAJ0AAwABBAkABAAUALEAAwABBAkABQAWAMUAAwABBAkABgAUANsAAwABBAkACgBYAO8AAwABBAkACwAkAUcgZS1kYi1pY29uc1JlZ3VsYXJlLWRiLWljb25zZS1kYi1pY29uc1ZlcnNpb24gMS4wZS1kYi1pY29uc0ZvbnQgZ2VuZXJhdGVkIHVzaW5nIFN5bmNmdXNpb24gTWV0cm8gU3R1ZGlvd3d3LnN5bmNmdXNpb24uY29tACAAZQAtAGQAYgAtAGkAYwBvAG4AcwBSAGUAZwB1AGwAYQByAGUALQBkAGIALQBpAGMAbwBuAHMAZQAtAGQAYgAtAGkAYwBvAG4AcwBWAGUAcgBzAGkAbwBuACAAMQAuADAAZQAtAGQAYgAtAGkAYwBvAG4AcwBGAG8AbgB0ACAAZwBlAG4AZQByAGEAdABlAGQAIAB1AHMAaQBuAGcAIABTAHkAbgBjAGYAdQBzAGkAbwBuACAATQBlAHQAcgBvACAAUwB0AHUAZABpAG8AdwB3AHcALgBzAHkAbgBjAGYAdQBzAGkAbwBuAC4AYwBvAG0AAAAAAgAAAAAAAAAKAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAEAQIBAwEEAQUADG1lc3NhZ2UtbWFpbAtyZWFkLXVucmVhZAZkZWxldGUAAAAAAA==)
-    format("truetype");
-  font-weight: normal;
-  font-style: normal;
-}
-.ddb-icons {
-  font-family: "e-db-icons" !important;
-  speak: none;
-  font-size: 55px;
-  font-style: normal;
-  font-weight: normal;
-  font-variant: normal;
-  text-transform: none;
-  line-height: 1;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-.e-message::before {
-  content: "\e703";
-}
-*/
 .rent-unlock-key {
   font-family: monospace;
   font-size: 20px;
@@ -312,7 +247,6 @@ export default {
   font-weight: normal;
 }
 .dropdown-item{
-  /*width: 100%;*/
   -webkit-appearance: auto;
   font-family: monospace;
   font-size: 18px;

From e56d5a8ae2be11d0a550593181a89b40251c085b Mon Sep 17 00:00:00 2001
From: Amar Bolkan <amar.bolkan@gmail.com>
Date: Mon, 14 Dec 2020 17:37:49 +0100
Subject: [PATCH 29/61] Created separate component to handle the returning
 bikes without tracker available. Added component to rent.vue and made it
 selectable by a boolean.

---
 src/components/Rent.vue                       |  84 +++---------
 .../RentSelectableReturnLocation.vue          | 129 ++++++++++++++++++
 src/store/index.js                            |  27 ++--
 3 files changed, 169 insertions(+), 71 deletions(-)
 create mode 100644 src/components/RentSelectableReturnLocation.vue

diff --git a/src/components/Rent.vue b/src/components/Rent.vue
index c5c39e1..9b92c27 100644
--- a/src/components/Rent.vue
+++ b/src/components/Rent.vue
@@ -54,47 +54,20 @@
             >{{ $t("message.rent.renting-for") }}
             <ticking-time :datetime="rent.rent_start"
           /></v-list-item-subtitle>
-          <v-row class="pt-5">
-            <v-col cols="12" md="12" class="py-0 pr-0">
-              <div id="app" class="dropdown">
-                <label class="dropdownLabel" for="select-location">
-                  {{ $t("message.rent.selected-location") }}:
-                </label>
-                <select
-                  class="dropdown-item"
-                  @change="changeReturnLocation($event, rent.id)"
-                  @click="fetchStations()"
-                >
-                  <option value="" selected disabled>
-                    {{ $t("message.rent.choose-locations") }}
-                  </option>
-                  <option
-                    v-for="station in availableStations"
-                    :value="station.id"
-                    :key="station.id"
-                  >
-                    {{ station.name }}
-                  </option>
-                </select>
-                <br /><br />
-              </div>
-            </v-col>
-          </v-row>
-          <v-row v-if="chosenReturnLocations[rent.id] == null">
-            <v-col col="12" md="12" class="py-0">
-              <v-alert dense outlined type="error" class="my-0">
-                {{ $t("message.rent.no-location") }}
-              </v-alert>
-            </v-col>
-          </v-row>
-          <v-btn
-            v-if="chosenReturnLocations[rent.id] != null"
-            color="success"
-            @click="endRent(rent.id)"
-            v-bind:loading="loadingRents.includes(rent.id)"
-          >
-            {{ $t("message.rent.finish-rent") }}
-          </v-btn>
+          <!-- return bikes if tracker not available  -->
+          <v-container v-if="!trackerAvailable">
+            <rent-selectable-return-location :rentId="rent.id"> </rent-selectable-return-location>
+          </v-container>
+          <!-- returning bikes when tracker available -->
+          <v-container v-else>
+            <v-btn
+              color="success"
+              @click="endRent(rent.id)"
+              v-bind:loading="loadingRents.includes(rent.id)"
+            >
+              {{ $t("message.rent.finish-rent") }}
+            </v-btn>
+          </v-container>
         </v-list-item-content>
       </v-list-item>
     </v-card>
@@ -108,13 +81,14 @@ import TickingTime from "./TickingTime.vue";
 import RentLock from "./RentLock.vue";
 
 import axios from "axios";
+import RentSelectableReturnLocation from "./RentSelectableReturnLocation.vue";
 
 export default {
-  components: { TickingTime, RentLock },
+  components: { TickingTime, RentLock, RentSelectableReturnLocation },
   props: ["bikeId"],
   data() {
     return {
-    
+      trackerAvailable: false ,
       show: true,
       valid: false,
       loading: false,
@@ -158,25 +132,11 @@ export default {
         .finally(() => (this.loading = false));
     },
     endRent(rentId) {
-      let coords = this.chosenReturnLocations[rentId];
-      console.log(rentId);
-      console.log(coords.lat);
-      console.log(coords.lng);
       this.rentError = "";
       this.loadingRents.push(rentId);
 
       this.$store
-        .dispatch("END_RENT", {
-          rentId: rentId,
-          lat: coords.lat,
-          lng: coords.lng,
-        })
-        .then(() => {
-          // set selected location to null if end_rent returned without error
-          if (this.rentError === "") {
-            delete this.chosenReturnLocations[rentId];
-          }
-        })
+        .dispatch("END_RENT", rentId)
         .catch((err) => {
           this.rentError = err;
           let index = this.loadingRents.indexOf(rentId);
@@ -186,8 +146,7 @@ export default {
         });
     },
     changeReturnLocation(event, rentId) {
-      let selectedStation =
-        event.target.options[event.target.options.selectedIndex].text;
+      let selectedStation = event.target.options[event.target.options.selectedIndex].text;
 
       for (var index in this.availableStations) {
         if (this.availableStations[index].name === selectedStation) {
@@ -195,8 +154,7 @@ export default {
           this.chosenReturnLocations[rentId] = {
             lng: this.availableStations[index].location.lng,
             lat: this.availableStations[index].location.lat,
-            location:
-              event.target.options[event.target.options.selectedIndex].text,
+            location: event.target.options[event.target.options.selectedIndex].text,
           };
           break;
         }
@@ -246,7 +204,7 @@ export default {
   font-size: 20px;
   font-weight: normal;
 }
-.dropdown-item{
+.dropdown-item {
   -webkit-appearance: auto;
   font-family: monospace;
   font-size: 18px;
diff --git a/src/components/RentSelectableReturnLocation.vue b/src/components/RentSelectableReturnLocation.vue
new file mode 100644
index 0000000..4c4743f
--- /dev/null
+++ b/src/components/RentSelectableReturnLocation.vue
@@ -0,0 +1,129 @@
+<template>
+  <v-container class="root-container">
+    <v-row class="pt-5">
+      <v-col cols="12" md="12" class="py-0 pr-0">
+        <div id="app" class="dropdown">
+          <label class="dropdownLabel" for="select-location">
+            {{ $t("message.rent.selected-location") }}:
+          </label>
+          <select
+            class="dropdown-item"
+            @change="changeReturnLocation($event, rentId)"
+            @click="fetchStations()"
+          >
+            <option value="" selected disabled>
+              {{ $t("message.rent.choose-locations") }}
+            </option>
+            <option
+              v-for="station in availableStations"
+              :value="station.id"
+              :key="station.id"
+            >
+              {{ station.name }}
+            </option>
+          </select>
+          <br /><br />
+        </div>
+      </v-col>
+    </v-row>
+    <v-row v-if="chosenReturnLocation == null">
+      <v-col col="12" md="12" class="py-0">
+        <v-alert dense outlined type="error" class="my-0">
+          {{ $t("message.rent.no-location") }}
+        </v-alert>
+      </v-col>
+    </v-row>
+    <v-btn
+      v-if="chosenReturnLocation != null"
+      color="success"
+      @click="endRent(rentId)"
+    >
+      {{ $t("message.rent.finish-rent") }}
+    </v-btn>
+  </v-container>
+</template>
+
+<script>
+import axios from "axios";
+
+export default {
+  name: "rent-selectable-return-location",
+  // type check values passed to rentId
+  props: { rentId: Number },
+  // TODO data probably needs to be a function
+  data() {
+    return {
+      availableStations: [],
+      chosenReturnLocation: null,
+    };
+  },
+  methods: {
+    fetchStations() {
+      let url = this.$appConfig.API_ROOT + "/stations/locations";
+      axios
+        .get(url)
+        .then((response) => response.data)
+        .then((data) => {
+          this.availableStations = data;
+        })
+        .catch((error) => {
+          console.log(error);
+          if (error.response) {
+            // TODO check response from server ... maybe give user a visual queue when the request failed
+          }
+        });
+    },
+    changeReturnLocation(event) {
+      let selectedStation = event.target.options[event.target.options.selectedIndex].text;
+
+      for (var index in this.availableStations) {
+        if (this.availableStations[index].name === selectedStation) {
+          this.chosenReturnLocation = {
+            lng: this.availableStations[index].location.lng,
+            lat: this.availableStations[index].location.lat,
+            location: event.target.options[event.target.options.selectedIndex].text,
+          };
+          break;
+        }
+      }
+    },
+    endRent(rentId) {
+      let coords = {
+        lat: this.chosenReturnLocation["lat"],
+        lng: this.chosenReturnLocation["lng"],
+      };
+      console.log(rentId);
+      console.log(coords.lat);
+      console.log(coords.lng);
+      
+
+      this.$store
+        .dispatch("END_RENT_NO_TRACKER", { rentId: rentId, lat: coords.lat, lng: coords.lng })
+        .then(() => {
+          // set selected location to null if end_rent returned without error
+          if (this.rentError === "") {
+            this.chosenReturnLocation = null;
+          }
+        })
+        .catch((err) => {
+          // TODO delete or do something useful
+          console.log("Wupppss", err);
+        });
+    },
+  },
+  created() {
+    this.fetchStations();
+  },
+  beforeDestroy() {
+    if (this.interval) {
+      clearInterval(this.interval);
+    }
+  },
+};
+</script>
+
+<style scoped>
+.root-container {
+  padding: 0px;
+}
+</style>
diff --git a/src/store/index.js b/src/store/index.js
index d2d1f9b..84e4dd0 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -117,9 +117,26 @@ export default new Vuex.Store({
       } catch (err) {
         throw unpackErrorMessage(err);
       }
+    }, 
+    END_RENT_NO_TRACKER: async function({dispatch, commit, state}, payload) {
+      let data = {};
+      // TODO build selectable return locations as a configurable feature  
+      data['lat'] = payload.lat;
+      data['lng'] = payload.lng;
+    
+      let rentId = payload.rentId;
+
+      try {
+        let finish_url = state.rents.find((el) => el.id == rentId).finish_url;
+        let response = await axiosWithAuth.call(this, state).post(finish_url, data);
+        dispatch("UPDATE_RENTS");
+        commit("REMOVE_LOCK", rentId);
+        return response.data;
+      } catch (err) {
+        throw unpackErrorMessage(err);
+      }
     },
-    // TODO change payload back to rentId once on bike location tracking is available 
-    END_RENT: async function({ dispatch, commit, state }, payload) {
+    END_RENT: async function({ dispatch, commit, state }, rentId) {
       let location;
       try {
         location = await getCurrentPosition({ timeout: 3000, enableHighAccuracy: true, maximumAge: 20000 });
@@ -132,12 +149,6 @@ export default new Vuex.Store({
         data['lng'] = location.coords.longitude;
       }
 
-      // TODO build selectable return locations as a configurable feature  
-      data['lat'] = payload.lat;
-      data['lng'] = payload.lng;
-    
-      let rentId = payload.rentId;
-
       try {
         let finish_url = state.rents.find((el) => el.id == rentId).finish_url;
         let response = await axiosWithAuth.call(this, state).post(finish_url, data);

From 808d38d3191ce7172fae99c284ce889f77aa120f Mon Sep 17 00:00:00 2001
From: Amar Bolkan <amar.bolkan@gmail.com>
Date: Mon, 14 Dec 2020 17:48:07 +0100
Subject: [PATCH 30/61] removed a comment

---
 .../RentSelectableReturnLocation.vue          | 128 ++++++++++++++++++
 1 file changed, 128 insertions(+)
 create mode 100644 src/components/RentSelectableReturnLocation.vue

diff --git a/src/components/RentSelectableReturnLocation.vue b/src/components/RentSelectableReturnLocation.vue
new file mode 100644
index 0000000..e2fb7fc
--- /dev/null
+++ b/src/components/RentSelectableReturnLocation.vue
@@ -0,0 +1,128 @@
+<template>
+  <v-container class="root-container">
+    <v-row class="pt-5">
+      <v-col cols="12" md="12" class="py-0 pr-0">
+        <div id="app" class="dropdown">
+          <label class="dropdownLabel" for="select-location">
+            {{ $t("message.rent.selected-location") }}:
+          </label>
+          <select
+            class="dropdown-item"
+            @change="changeReturnLocation($event, rentId)"
+            @click="fetchStations()"
+          >
+            <option value="" selected disabled>
+              {{ $t("message.rent.choose-locations") }}
+            </option>
+            <option
+              v-for="station in availableStations"
+              :value="station.id"
+              :key="station.id"
+            >
+              {{ station.name }}
+            </option>
+          </select>
+          <br /><br />
+        </div>
+      </v-col>
+    </v-row>
+    <v-row v-if="chosenReturnLocation == null">
+      <v-col col="12" md="12" class="py-0">
+        <v-alert dense outlined type="error" class="my-0">
+          {{ $t("message.rent.no-location") }}
+        </v-alert>
+      </v-col>
+    </v-row>
+    <v-btn
+      v-if="chosenReturnLocation != null"
+      color="success"
+      @click="endRent(rentId)"
+    >
+      {{ $t("message.rent.finish-rent") }}
+    </v-btn>
+  </v-container>
+</template>
+
+<script>
+import axios from "axios";
+
+export default {
+  name: "rent-selectable-return-location",
+  // type check values passed to rentId
+  props: { rentId: Number },
+  data() {
+    return {
+      availableStations: [],
+      chosenReturnLocation: null,
+    };
+  },
+  methods: {
+    fetchStations() {
+      let url = this.$appConfig.API_ROOT + "/stations/locations";
+      axios
+        .get(url)
+        .then((response) => response.data)
+        .then((data) => {
+          this.availableStations = data;
+        })
+        .catch((error) => {
+          console.log(error);
+          if (error.response) {
+            // TODO check response from server ... maybe give user a visual queue when the request failed
+          }
+        });
+    },
+    changeReturnLocation(event) {
+      let selectedStation = event.target.options[event.target.options.selectedIndex].text;
+
+      for (var index in this.availableStations) {
+        if (this.availableStations[index].name === selectedStation) {
+          this.chosenReturnLocation = {
+            lng: this.availableStations[index].location.lng,
+            lat: this.availableStations[index].location.lat,
+            location: event.target.options[event.target.options.selectedIndex].text,
+          };
+          break;
+        }
+      }
+    },
+    endRent(rentId) {
+      let coords = {
+        lat: this.chosenReturnLocation["lat"],
+        lng: this.chosenReturnLocation["lng"],
+      };
+      console.log(rentId);
+      console.log(coords.lat);
+      console.log(coords.lng);
+      
+
+      this.$store
+        .dispatch("END_RENT_NO_TRACKER", { rentId: rentId, lat: coords.lat, lng: coords.lng })
+        .then(() => {
+          // set selected location to null if end_rent returned without error
+          if (this.rentError === "") {
+            this.chosenReturnLocation = null;
+          }
+        })
+        .catch((err) => {
+          // TODO delete or do something useful
+          console.log("Wupppss", err);
+        });
+    },
+  },
+  created() {
+    this.fetchStations();
+  },
+  beforeDestroy() {
+    if (this.interval) {
+      clearInterval(this.interval);
+    }
+  },
+};
+</script>
+
+<style scoped>
+.root-container {
+  padding: 0px;
+}
+</style>

From 55e6cf4f318205e8adb4c2478bfcdcd8e690d817 Mon Sep 17 00:00:00 2001
From: Amar Bolkan <amar.bolkan@gmail.com>
Date: Tue, 15 Dec 2020 15:53:15 +0100
Subject: [PATCH 31/61] Moved TRACKERAVAILABLE into the config.development.js

---
 config/config.development.js | 4 +++-
 src/components/Rent.vue      | 3 +--
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/config/config.development.js b/config/config.development.js
index d4a0fac..8a89fb3 100644
--- a/config/config.development.js
+++ b/config/config.development.js
@@ -9,6 +9,8 @@ var GBFS_URL = SYSTEM_URL + "/gbfs/gbfs.json";
 var DEFAULT_LOCATION = [53.5823813, 9.7137465];
 var DEFAULT_ZOOM = 15;
 
+var TRACKER_AVAILABLE = false;
+
 var I18N_MESSAGE_OVERRIDE = {};
 
 var SUPPORT_TYPE;
@@ -16,4 +18,4 @@ var SUPPORT_URL;
 
 var SENTRY_DSN = '';
 
-module.exports = { ENV, TITLE, NAME, API_ROOT, GBFS_URL, DEFAULT_LOCATION, DEFAULT_ZOOM, I18N_MESSAGE_OVERRIDE, SUPPORT_TYPE, SUPPORT_URL, SENTRY_DSN };
+module.exports = { ENV, TITLE, NAME, API_ROOT, GBFS_URL, DEFAULT_LOCATION, DEFAULT_ZOOM, I18N_MESSAGE_OVERRIDE, SUPPORT_TYPE, SUPPORT_URL, SENTRY_DSN, TRACKER_AVAILABLE };
diff --git a/src/components/Rent.vue b/src/components/Rent.vue
index dbe29e6..948ca85 100644
--- a/src/components/Rent.vue
+++ b/src/components/Rent.vue
@@ -87,8 +87,7 @@ export default {
   props: ["bikeId"],
   data() {
     return {
-      // TODO move to system variables
-      trackerAvailable: false ,
+      trackerAvailable: this.$appConfig.TRACKER_AVAILABLE ,
       show: true,
       valid: false,
       loading: false,

From e81d3fb886903999812ff5b26c57b355dfa5be34 Mon Sep 17 00:00:00 2001
From: Jonas Laacke <jonas.laacke@iteratec.com>
Date: Fri, 8 Jan 2021 16:36:40 +0100
Subject: [PATCH 32/61] made environment configurable

---
 Dockerfile | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/Dockerfile b/Dockerfile
index 2afbaa2..16951dd 100644
--- a/Dockerfile
+++ b/Dockerfile
@@ -3,6 +3,8 @@ WORKDIR /app
 COPY package*.json /app/
 RUN npm ci
 COPY . /app/
+ARG environment=production
+ENV NODE_ENV=$environment
 RUN npm run build
 
 FROM nginx

From ec475c4645a48a893412510e133df2037b695a42 Mon Sep 17 00:00:00 2001
From: Jonas Laacke <jonas.laacke@iteratec.com>
Date: Wed, 11 Aug 2021 15:04:48 +0200
Subject: [PATCH 33/61] set default for end station select; redirect to
 customLogin

---
 README.md                    |  7 +++++++
 config/config.development.js |  7 ++++---
 config/config.production.js  |  5 ++++-
 config/config.staging.js     |  5 ++++-
 src/App.vue                  |  7 +++----
 src/components/Login.vue     | 10 ++++++----
 src/components/Rent.vue      |  6 +++---
 7 files changed, 31 insertions(+), 16 deletions(-)

diff --git a/README.md b/README.md
index c073618..0b5b6f5 100644
--- a/README.md
+++ b/README.md
@@ -32,6 +32,13 @@ npm run lint
 See [Configuration Reference for Vue](https://cli.vuejs.org/config/) and the configuration files at `config/`. The used configuration is set at build time by using `NODE_ENV=production` (or `development`, `staging`).  
 For staging and production you may also set `NPM_CONFIG_PRODUCTION=true`.
 
+### Using Docker
+```
+docker build --build-arg environment=production -t voorwiel .
+docker run -p 8080:80 voorwiel
+```
+You may create a config file as described above with an environment of your choice (e.g. config/config.myenv.js) and provide the environment to the docker build as described.
+
 ### Serving
 voorwiel is a single page application with client site routing. Because of this, your webserver also needs to serve `index.html` on URLs that normally 404. 
 
diff --git a/config/config.development.js b/config/config.development.js
index 8a89fb3..6a38ebc 100644
--- a/config/config.development.js
+++ b/config/config.development.js
@@ -6,10 +6,11 @@ var SYSTEM_URL = "http://localhost:8000";
 var API_ROOT = SYSTEM_URL + "/api";
 var GBFS_URL = SYSTEM_URL + "/gbfs/gbfs.json";
 
-var DEFAULT_LOCATION = [53.5823813, 9.7137465];
+var DEFAULT_LOCATION = [48.3984, 9.9908];
 var DEFAULT_ZOOM = 15;
 
-var TRACKER_AVAILABLE = false;
+// set this to true if no tracking is available to return bikes via station selection
+var END_STATION_SELECT = false;
 
 var I18N_MESSAGE_OVERRIDE = {};
 
@@ -18,4 +19,4 @@ var SUPPORT_URL;
 
 var SENTRY_DSN = '';
 
-module.exports = { ENV, TITLE, NAME, API_ROOT, GBFS_URL, DEFAULT_LOCATION, DEFAULT_ZOOM, I18N_MESSAGE_OVERRIDE, SUPPORT_TYPE, SUPPORT_URL, SENTRY_DSN, TRACKER_AVAILABLE };
+module.exports = { ENV, TITLE, NAME, API_ROOT, GBFS_URL, DEFAULT_LOCATION, DEFAULT_ZOOM, I18N_MESSAGE_OVERRIDE, SUPPORT_TYPE, SUPPORT_URL, SENTRY_DSN, END_STATION_SELECT };
diff --git a/config/config.production.js b/config/config.production.js
index abdd948..517ebe5 100644
--- a/config/config.production.js
+++ b/config/config.production.js
@@ -9,6 +9,9 @@ var GBFS_URL = SYSTEM_URL + "/gbfs/gbfs.json";
 var DEFAULT_LOCATION = [48.3984, 9.9908];
 var DEFAULT_ZOOM = 15;
 
+// set this to true if no tracking is available to return bikes via station selection
+var END_STATION_SELECT = false;
+
 var I18N_MESSAGE_OVERRIDE = {
   "en": {
     "message": {
@@ -34,4 +37,4 @@ var SUPPORT_URL = 'https://support.ulm.dev';
 
 var SENTRY_DSN = '';
 
-module.exports = { ENV, TITLE, NAME, API_ROOT, GBFS_URL, DEFAULT_LOCATION, DEFAULT_ZOOM, I18N_MESSAGE_OVERRIDE, SUPPORT_TYPE, SUPPORT_URL, SENTRY_DSN };
+module.exports = { ENV, TITLE, NAME, API_ROOT, GBFS_URL, DEFAULT_LOCATION, DEFAULT_ZOOM, I18N_MESSAGE_OVERRIDE, SUPPORT_TYPE, SUPPORT_URL, SENTRY_DSN, END_STATION_SELECT };
diff --git a/config/config.staging.js b/config/config.staging.js
index 3f09028..8e78ff1 100644
--- a/config/config.staging.js
+++ b/config/config.staging.js
@@ -9,6 +9,9 @@ var GBFS_URL = SYSTEM_URL + "/gbfs/gbfs.json";
 var DEFAULT_LOCATION = [48.3984, 9.9908];
 var DEFAULT_ZOOM = 15;
 
+// set this to true if no tracking is available to return bikes via station selection
+var END_STATION_SELECT = false;
+
 var I18N_MESSAGE_OVERRIDE = {};
 
 var SUPPORT_TYPE = 'zammad';
@@ -16,4 +19,4 @@ var SUPPORT_URL = 'https://support.ulm.dev';
 
 var SENTRY_DSN = '';
 
-module.exports = { ENV, TITLE, NAME, API_ROOT, GBFS_URL, DEFAULT_LOCATION, DEFAULT_ZOOM, I18N_MESSAGE_OVERRIDE, SUPPORT_TYPE, SUPPORT_URL, SENTRY_DSN };
+module.exports = { ENV, TITLE, NAME, API_ROOT, GBFS_URL, DEFAULT_LOCATION, DEFAULT_ZOOM, I18N_MESSAGE_OVERRIDE, SUPPORT_TYPE, SUPPORT_URL, SENTRY_DSN, END_STATION_SELECT };
diff --git a/src/App.vue b/src/App.vue
index ed30a3c..e4b7593 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -9,8 +9,7 @@
 
       <v-toolbar-items>
         <About />
-      <!--TODO Dynamische Komponenten bei unterschiedlicher Provider Anzahl --> 
-        <v-btn text dark v-if="!user" :to="{name: 'customLogin'}" color="success">
+        <v-btn text dark v-if="!user" :to="{name: 'login'}" color="success">
           <span class="hidden-xs-only">{{ $t('message.app.login') }}</span>
           <v-icon right>{{ mdi.login }}</v-icon>
         </v-btn>
@@ -48,7 +47,7 @@
         <v-btn fab dark x-small v-if="hasSupport" :to="{name: 'support'}" color="red" class="support-button">
           <v-icon>{{ mdi.helpCircleOutline }}</v-icon>
         </v-btn>
-        <v-btn rounded x-large color="success" class="login-button" v-if="!user" :to="{name: 'customLogin'}">
+        <v-btn rounded x-large color="success" class="login-button" v-if="!user" :to="{name: 'login'}">
           <v-icon>{{ mdi.login }}</v-icon>&nbsp;<span>{{ $t('message.app.login') }}</span>
         </v-btn>
         <RentButton v-if="user" class="rent-button" />
@@ -91,7 +90,7 @@
     },
     methods: {
       logout() {
-        
+
         this.$store.dispatch("LOGOUT");
       }
     },
diff --git a/src/components/Login.vue b/src/components/Login.vue
index 9b7b369..a6fcc1c 100644
--- a/src/components/Login.vue
+++ b/src/components/Login.vue
@@ -18,10 +18,6 @@
               </v-btn>
             </v-list-item-content>
           </v-list-item>
-          <v-btn block :to="{name: 'customLogin'}">
-                {{ "Custom Login" }}
-                <!-- <v-icon v-if="provider.icon" right dark>{{ provider.icon }}</v-icon> -->
-              </v-btn>
         </v-list>
       </v-card-actions>
     </v-card>
@@ -29,6 +25,7 @@
 </template>
 
 <script>
+
   export default {
     data() {
       return {
@@ -39,6 +36,7 @@
     },
     created() {
       this.fetchProviders();
+
     },
     methods: {
       authenticate(provider) {
@@ -56,6 +54,10 @@
           .then(data => {
             this.providers = data;
             this.loading = false;
+            // redirect to custom login if no providers are specified
+            if (this.providers.length === 0) {
+              this.$router.push({ name: 'customLogin'});
+            }
           })
           .catch(() => {
             this.$store.commit('SET_APPERROR', this.$t('message.login.configerror'));
diff --git a/src/components/Rent.vue b/src/components/Rent.vue
index 948ca85..3c25170 100644
--- a/src/components/Rent.vue
+++ b/src/components/Rent.vue
@@ -54,8 +54,8 @@
             >{{ $t("message.rent.renting-for") }}
             <ticking-time :datetime="rent.rent_start"
           /></v-list-item-subtitle>
-          <!-- return bikes if tracker not available  -->
-          <v-container v-if="!trackerAvailable">
+          <!-- return bikes on end station (i.e. if tracker is not available)  -->
+          <v-container v-if="endStationSelect">
             <rent-selectable-return-location :rentId="rent.id"> </rent-selectable-return-location>
           </v-container>
           <!-- returning bikes when tracker available -->
@@ -87,7 +87,7 @@ export default {
   props: ["bikeId"],
   data() {
     return {
-      trackerAvailable: this.$appConfig.TRACKER_AVAILABLE ,
+      endStationSelect: this.$appConfig.END_STATION_SELECT ,
       show: true,
       valid: false,
       loading: false,

From 06782363d4da99bf61a2247e0609e48138bcc95c Mon Sep 17 00:00:00 2001
From: Jonas Laacke <jonas.laacke@iteratec.com>
Date: Thu, 12 Aug 2021 10:54:14 +0200
Subject: [PATCH 34/61] use gbfs station information for end station selection

---
 src/App.vue                                   |   2 +-
 .../RentSelectableReturnLocation.vue          | 233 ++++++++----------
 src/store/index.js                            |  13 +-
 3 files changed, 118 insertions(+), 130 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index e4b7593..f226fcc 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -9,6 +9,7 @@
 
       <v-toolbar-items>
         <About />
+
         <v-btn text dark v-if="!user" :to="{name: 'login'}" color="success">
           <span class="hidden-xs-only">{{ $t('message.app.login') }}</span>
           <v-icon right>{{ mdi.login }}</v-icon>
@@ -90,7 +91,6 @@
     },
     methods: {
       logout() {
-
         this.$store.dispatch("LOGOUT");
       }
     },
diff --git a/src/components/RentSelectableReturnLocation.vue b/src/components/RentSelectableReturnLocation.vue
index c051471..289f9f4 100644
--- a/src/components/RentSelectableReturnLocation.vue
+++ b/src/components/RentSelectableReturnLocation.vue
@@ -1,124 +1,109 @@
-<template>
-  <v-container class="root-container">
-    <v-row class="pt-5">
-      <v-col cols="12" md="12" class="py-0 pr-0">
-        <div id="app" class="dropdown">
-          <label class="dropdownLabel" for="select-location">
-            {{ $t("message.rent.selected-location") }}:
-          </label>
-          <select
-            class="dropdown-item"
-            @change="changeReturnLocation($event, rentId)"
-            @click="fetchStations()"
-          >
-            <option value="" selected disabled>
-              {{ $t("message.rent.choose-locations") }}
-            </option>
-            <option
-              v-for="station in availableStations"
-              :value="station.id"
-              :key="station.id"
-            >
-              {{ station.name }}
-            </option>
-          </select>
-          <br /><br />
-        </div>
-      </v-col>
-    </v-row>
-    <v-row v-if="chosenReturnLocation == null">
-      <v-col col="12" md="12" class="py-0">
-        <v-alert dense outlined type="error" class="my-0">
-          {{ $t("message.rent.no-location") }}
-        </v-alert>
-      </v-col>
-    </v-row>
-    <v-btn
-      v-if="chosenReturnLocation != null"
-      color="success"
-      @click="endRent(rentId)"
-    >
-      {{ $t("message.rent.finish-rent") }}
-    </v-btn>
-  </v-container>
-</template>
-
-<script>
-import axios from "axios";
-
-export default {
-  name: "rent-selectable-return-location",
-  // type check values passed to rentId
-  props: { rentId: Number },
-  data() {
-    return {
-      availableStations: [],
-      chosenReturnLocation: null,
-    };
-  },
-  methods: {
-    fetchStations() {
-      let url = this.$appConfig.API_ROOT + "/stations/locations";
-      axios
-        .get(url)
-        .then((response) => response.data)
-        .then((data) => {
-          this.availableStations = data;
-        })
-        .catch((error) => {
-          console.log(error);
-          if (error.response) {
-            // TODO check response from server ... maybe give user a visual queue when the request failed
-          }
-        });
-    },
-    changeReturnLocation(event) {
-      let selectedStation = event.target.options[event.target.options.selectedIndex].text;
-
-      for (var index in this.availableStations) {
-        if (this.availableStations[index].name === selectedStation) {
-          this.chosenReturnLocation = {
-            lng: this.availableStations[index].location.lng,
-            lat: this.availableStations[index].location.lat,
-            location: event.target.options[event.target.options.selectedIndex].text,
-          };
-          break;
-        }
-      }
-    },
-    endRent(rentId) {
-      let coords = {
-        lat: this.chosenReturnLocation["lat"],
-        lng: this.chosenReturnLocation["lng"],
-      };
-
-this.$store
-        .dispatch("END_RENT_NO_TRACKER", { rentId: rentId, lat: coords.lat, lng: coords.lng })
-        .then(() => {
-          // set selected location to null if end_rent returned without error
-          if (this.rentError === "") {
-            this.chosenReturnLocation = null;
-          }
-        })
-        .catch((err) => {
-          // TODO do sth useful with the error
-          console.log(err);
-        });
-    },
-  },
-  created() {
-    this.fetchStations();
-  },
-  beforeDestroy() {
-    if (this.interval) {
-      clearInterval(this.interval);
-    }
-  },
-};
-</script>
-
-<style scoped>
-.root-container {
-  padding: 0px;
-}
-</style>
+<template>
+  <v-container class="root-container">
+    <v-row class="pt-5">
+      <v-col cols="12" md="12" class="py-0 pr-0">
+        <div id="app" class="dropdown">
+          <label class="dropdownLabel" for="select-location">
+            {{ $t("message.rent.selected-location") }}:
+          </label>
+          <select
+            class="dropdown-item"
+            @change="changeReturnLocation($event, rentId)"
+            @click="fetchStations()"
+          >
+            <option value="" selected disabled>
+              {{ $t("message.rent.choose-locations") }}
+            </option>
+            <option
+              v-for="station in availableStations"
+              :value="station.station_id"
+              :key="station.station_id"
+            >
+              {{ station.name }}
+            </option>
+          </select>
+          <br /><br />
+        </div>
+      </v-col>
+    </v-row>
+    <v-row v-if="chosenReturnLocation == null">
+      <v-col col="12" md="12" class="py-0">
+        <v-alert dense outlined type="error" class="my-0">
+          {{ $t("message.rent.no-location") }}
+        </v-alert>
+      </v-col>
+    </v-row>
+    <v-btn
+      v-if="chosenReturnLocation != null"
+      color="success"
+      @click="endRent(rentId)"
+    >
+      {{ $t("message.rent.finish-rent") }}
+    </v-btn>
+  </v-container>
+</template>
+
+<script>
+  import { mapState } from 'vuex';
+
+  export default {
+    name: "rent-selectable-return-location",
+    // type check values passed to rentId
+    props: {rentId: Number},
+    data() {
+      return {
+        availableStations: [],
+        chosenReturnLocation: null,
+      };
+    },
+    computed: {
+    ...mapState(['gbfs'])
+    },
+    methods: {
+      fetchStations() {
+          this.availableStations = this.$store.getters.getGBFSStationsWithDetails();
+      },
+      changeReturnLocation(event) {
+        let selectedStation = this.availableStations.find((s) => s.station_id == event.target.value);
+        this.chosenReturnLocation = {
+          lon: selectedStation.lon,
+          lat: selectedStation.lat,
+        };
+      },
+      endRent(rentId) {
+        let coords = {
+          lat: this.chosenReturnLocation["lat"],
+          lon: this.chosenReturnLocation["lon"],
+        };
+
+        this.$store
+          .dispatch("END_RENT_NO_TRACKER", { rentId: rentId, lat: coords.lat, lon: coords.lon })
+          .then(() => {
+            // set selected location to null if end_rent returned without error
+            if (this.rentError === "") {
+              this.chosenReturnLocation = null;
+            }
+          })
+          .catch((err) => {
+            console.log(err);
+          });
+      },
+    },
+    mounted() {
+      if (this.gbfs !== null) {
+        this.fetchStations();
+      }
+    },
+    beforeDestroy() {
+      if (this.interval) {
+        clearInterval(this.interval);
+      }
+    },
+  };
+</script>
+
+<style scoped>
+.root-container {
+  padding: 0px;
+}
+</style>
diff --git a/src/store/index.js b/src/store/index.js
index 99faaa9..1526c74 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -13,7 +13,7 @@ const axiosWithAuth = function (state) {
 }
 
 const getCurrentPosition = (options) => {
-  if (navigator.geolocation) {    
+  if (navigator.geolocation) {
     return new Promise(
       (resolve, reject) => {
         let timeout = options.timeout || 5000;
@@ -25,7 +25,7 @@ const getCurrentPosition = (options) => {
           options);
       }
     )
-  } 
+  }
 
   return Promise.reject();
 }
@@ -117,12 +117,12 @@ export default new Vuex.Store({
       } catch (err) {
         throw unpackErrorMessage(err);
       }
-    }, 
+    },
     END_RENT_NO_TRACKER: async function({dispatch, commit, state}, payload) {
       let data = {};
       data['lat'] = payload.lat;
-      data['lng'] = payload.lng;
-    
+      data['lng'] = payload.lon;
+
       let rentId = payload.rentId;
 
       try {
@@ -240,6 +240,9 @@ export default new Vuex.Store({
         return {station, station_status};
       }
       return {station};
+    },
+    getGBFSStationsWithDetails: (state) => () => {
+      return state.gbfs.stations.data.stations;
     }
   },
   modules: {},

From 695bb8337ecbf97002953ea1305c99efe12405b3 Mon Sep 17 00:00:00 2001
From: Jonas Laacke <jonas.laacke@iteratec.com>
Date: Thu, 12 Aug 2021 12:00:12 +0200
Subject: [PATCH 35/61] cleaned up end rent functions

---
 src/components/Login.vue                      |   2 -
 src/components/Rent.vue                       | 202 ++++++++----------
 .../RentSelectableReturnLocation.vue          |  24 ++-
 src/store/index.js                            |  32 ++-
 4 files changed, 118 insertions(+), 142 deletions(-)

diff --git a/src/components/Login.vue b/src/components/Login.vue
index a6fcc1c..f0beb96 100644
--- a/src/components/Login.vue
+++ b/src/components/Login.vue
@@ -25,7 +25,6 @@
 </template>
 
 <script>
-
   export default {
     data() {
       return {
@@ -36,7 +35,6 @@
     },
     created() {
       this.fetchProviders();
-
     },
     methods: {
       authenticate(provider) {
diff --git a/src/components/Rent.vue b/src/components/Rent.vue
index 3c25170..9293572 100644
--- a/src/components/Rent.vue
+++ b/src/components/Rent.vue
@@ -1,12 +1,17 @@
 <template>
-  <v-dialog v-model="show" max-width="450">
+  <v-dialog v-model="show" max-width="400">
     <v-card>
       <v-form v-model="valid" ref="rentBikeForm" @submit.prevent="startRent">
         <v-container class="pb-0">
           <v-row v-if="rentError">
             <v-col col="12" md="12" class="py-0">
-              <v-alert dense outlined type="error" class="my-0">
-                {{ rentError }}
+              <v-alert
+                dense
+                outlined
+                type="error"
+                class="my-0"
+              >
+                {{rentError}}
               </v-alert>
             </v-col>
           </v-row>
@@ -25,14 +30,8 @@
               ></v-text-field>
             </v-col>
             <v-col cols="6" md="6" class="py-0 text-right">
-              <v-btn
-                class="mt-2"
-                color="success"
-                v-bind:disabled="!valid"
-                :loading="loading"
-                @click="startRent"
-              >
-                {{ $t("message.rent.rent") }}
+              <v-btn class="mt-2" color="success" v-bind:disabled="!valid" :loading="loading" @click="startRent">
+                {{ $t('message.rent.rent') }}
               </v-btn>
             </v-col>
           </v-row>
@@ -41,31 +40,24 @@
 
       <v-divider class="mx-4" v-if="rents"></v-divider>
 
-      <v-list-item v-for="rent in rents" :key="rent.id">
+      <v-list-item
+        v-for="rent in rents"
+        :key="rent.id"
+      >
         <v-list-item-content>
-          <v-list-item-title
-            >{{ $t("message.rent.bikenumber") }}:
-            {{ rent.bike.bike_number }}</v-list-item-title
-          >
+          <v-list-item-title>{{ $t('message.rent.bikenumber') }}: {{rent.bike.bike_number}}</v-list-item-title>
           <v-list-item-subtitle v-if="rent.bike.lock_type">
             <RentLock :rent="rent" />
           </v-list-item-subtitle>
-          <v-list-item-subtitle
-            >{{ $t("message.rent.renting-for") }}
-            <ticking-time :datetime="rent.rent_start"
-          /></v-list-item-subtitle>
+          <v-list-item-subtitle>{{ $t('message.rent.renting-for') }} <ticking-time :datetime="rent.rent_start" /></v-list-item-subtitle>
           <!-- return bikes on end station (i.e. if tracker is not available)  -->
           <v-container v-if="endStationSelect">
             <rent-selectable-return-location :rentId="rent.id"> </rent-selectable-return-location>
           </v-container>
           <!-- returning bikes when tracker available -->
           <v-container v-else>
-            <v-btn
-              color="success"
-              @click="endRent(rent.id)"
-              v-bind:loading="loadingRents.includes(rent.id)"
-            >
-              {{ $t("message.rent.finish-rent") }}
+            <v-btn color="success" @click="endRent(rent.id)" v-bind:loading="loadingRents.includes(rent.id)">
+              {{ $t('message.rent.finish-rent') }}
             </v-btn>
           </v-container>
         </v-list-item-content>
@@ -75,103 +67,85 @@
 </template>
 
 <script>
-import { mapState } from "vuex";
-import { mdiLock, mdiLockOpenVariant } from "@mdi/js";
-import TickingTime from "./TickingTime.vue";
-import RentLock from "./RentLock.vue";
+  import { mapState } from 'vuex';
+  import { mdiLock, mdiLockOpenVariant } from '@mdi/js'
+  import TickingTime from "./TickingTime.vue";
+  import RentLock from "./RentLock.vue";
+  import RentSelectableReturnLocation from "./RentSelectableReturnLocation.vue";
 
-import RentSelectableReturnLocation from "./RentSelectableReturnLocation.vue";
+  export default {
+    components: { TickingTime, RentLock, RentSelectableReturnLocation },
+    props: ['bikeId'],
+    data() {
+      return {
+        show: true,
+        valid: false,
+        loading: false,
+        endStationSelect: this.$appConfig.END_STATION_SELECT,
+        bikenumber: '',
+        rentError: '',
+        loadingRents: [],
 
-export default {
-  components: { TickingTime, RentLock, RentSelectableReturnLocation },
-  props: ["bikeId"],
-  data() {
-    return {
-      endStationSelect: this.$appConfig.END_STATION_SELECT ,
-      show: true,
-      valid: false,
-      loading: false,
-      bikenumber: "",
-      rentError: "",
-      loadingRents: [],
+        bikenumberrules: [
+          value => {
+            const pattern = /\d+$/;
+            if (value === '' || typeof value === 'undefined') return true;
+            return pattern.test(value) || 'Please only numbers';
+          },
+        ],
 
-      bikenumberrules: [
-        (value) => {
-          const pattern = /\d+$/;
-          if (value === "" || typeof value === "undefined") return true;
-          return pattern.test(value) || "Please only numbers";
-        },
-      ],
-
-      mdi: {
-        lock: mdiLock,
-        lockOpenVariant: mdiLockOpenVariant,
+        mdi: {
+          lock: mdiLock,
+          lockOpenVariant: mdiLockOpenVariant
+        }
       }
-    };
-  },
-  computed: {
-    ...mapState(["rents"]),
-  },
-  methods: {
-    startRent() {
-      this.loading = true;
-      this.rentError = "";
-      this.$store
-        .dispatch("START_RENT", this.bikenumber)
-        .then(
-          () => this.$refs.rentBikeForm.reset(),
-          (err) => (this.rentError = err)
-        )
-        .finally(() => (this.loading = false));
     },
-    endRent(rentId) {
-      this.rentError = "";
-      this.loadingRents.push(rentId);
-
-      this.$store
-        .dispatch("END_RENT", rentId)
-        .catch((err) => {
-          this.rentError = err;
-          let index = this.loadingRents.indexOf(rentId);
-          if (index >= 0) {
-            this.loadingRents.splice(index, 1);
-          }
-        });
+    computed: {
+      ...mapState(['rents'])
     },
-  },
-  mounted() {
-    this.bikenumber = this.bikeId;
-  },
-  watch: {
-    show(current) {
-      if (current === false) {
-        this.$router.push("/");
-        if (this.$refs.rentBikeForm) {
-          this.$refs.rentBikeForm.reset();
-        }
-        this.rentError = "";
+    methods: {
+      startRent() {
+        this.loading = true;
+        this.rentError = '';
+        this.$store.dispatch("START_RENT", this.bikenumber)
+          .then(() => this.$refs.rentBikeForm.reset(),
+            (err) => this.rentError = err)
+          .finally(() => this.loading = false);
+      },
+      endRent(rentId) {
+        this.rentError = '';
+        this.loadingRents.push(rentId);
+        this.$store.dispatch("END_RENT_WITH_TRACKING", rentId)
+          .catch(err => {
+            this.rentError = err;
+            let index = this.loadingRents.indexOf(rentId);
+            if (index >= 0) {
+              this.loadingRents.splice(index, 1);
+            }
+          });
       }
     },
-  },
-};
+    mounted() {
+      this.bikenumber = this.bikeId;
+    },
+    watch: {
+      show(current) {
+        if (current === false) {
+          this.$router.push('/');
+          if (this.$refs.rentBikeForm) {
+            this.$refs.rentBikeForm.reset();
+          }
+          this.rentError = '';
+        }
+      }
+    }
+  };
 </script>
 
 <style>
-.rent-unlock-key {
-  font-family: monospace;
-  font-size: 20px;
-  font-weight: bold;
-}
-.dropdown {
-  font-family: monospace;
-  font-size: 20px;
-  font-weight: normal;
-}
-.dropdown-item {
-  -webkit-appearance: auto;
-  font-family: monospace;
-  font-size: 18px;
-  font-weight: normal;
-  padding: 1.5%;
-}
+  .rent-unlock-key {
+    font-family: monospace;
+    font-size: 20px;
+    font-weight: bold;
+  }
 </style>
diff --git a/src/components/RentSelectableReturnLocation.vue b/src/components/RentSelectableReturnLocation.vue
index 289f9f4..da5951b 100644
--- a/src/components/RentSelectableReturnLocation.vue
+++ b/src/components/RentSelectableReturnLocation.vue
@@ -2,12 +2,12 @@
   <v-container class="root-container">
     <v-row class="pt-5">
       <v-col cols="12" md="12" class="py-0 pr-0">
-        <div id="app" class="dropdown">
+        <div id="app" class="select-location">
           <label class="dropdownLabel" for="select-location">
             {{ $t("message.rent.selected-location") }}:
           </label>
           <select
-            class="dropdown-item"
+            class="select-location-item"
             @change="changeReturnLocation($event, rentId)"
             @click="fetchStations()"
           >
@@ -77,7 +77,7 @@
         };
 
         this.$store
-          .dispatch("END_RENT_NO_TRACKER", { rentId: rentId, lat: coords.lat, lon: coords.lon })
+          .dispatch("END_RENT", { rentId: rentId, lat: coords.lat, lon: coords.lon })
           .then(() => {
             // set selected location to null if end_rent returned without error
             if (this.rentError === "") {
@@ -103,7 +103,19 @@
 </script>
 
 <style scoped>
-.root-container {
-  padding: 0px;
-}
+  .root-container {
+     padding: 0px;
+   }
+  .select-location {
+    font-family: monospace;
+    font-size: 20px;
+    font-weight: normal;
+  }
+  .select-location-item {
+    -webkit-appearance: auto;
+    font-family: monospace;
+    font-size: 18px;
+    font-weight: normal;
+    padding: 1.5%;
+  }
 </style>
diff --git a/src/store/index.js b/src/store/index.js
index 1526c74..cb13e44 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -26,7 +26,6 @@ const getCurrentPosition = (options) => {
       }
     )
   }
-
   return Promise.reject();
 }
 
@@ -72,7 +71,6 @@ export default new Vuex.Store({
         .get('/user')
         .then(
           response => {
-            console.log(response.data);
             commit("SET_USER", { user: response.data });
           },
           err => {
@@ -118,11 +116,14 @@ export default new Vuex.Store({
         throw unpackErrorMessage(err);
       }
     },
-    END_RENT_NO_TRACKER: async function({dispatch, commit, state}, payload) {
+    END_RENT: async function({dispatch, commit, state}, payload) {
       let data = {};
-      data['lat'] = payload.lat;
-      data['lng'] = payload.lon;
-
+      if(payload.lat) {
+        data['lat'] = payload.lat;
+      }
+      if(payload.lon) {
+        data['lng'] = payload.lon;
+      }
       let rentId = payload.rentId;
 
       try {
@@ -135,28 +136,19 @@ export default new Vuex.Store({
         throw unpackErrorMessage(err);
       }
     },
-    END_RENT: async function({ dispatch, commit, state }, rentId) {
+    END_RENT_WITH_TRACKING: async function({ dispatch }, rentId) {
       let location;
       try {
         location = await getCurrentPosition({ timeout: 3000, enableHighAccuracy: true, maximumAge: 20000 });
       } catch(_ignore) { /* */ }
 
-      let data = {};
+      let lat, lon;
       if (location && location.coords && location.coords.accuracy < 50) {
-
-        data['lat'] = location.coords.latitude;
-        data['lng'] = location.coords.longitude;
+        lat = location.coords.latitude;
+        lon = location.coords.longitude;
       }
 
-      try {
-        let finish_url = state.rents.find((el) => el.id == rentId).finish_url;
-        let response = await axiosWithAuth.call(this, state).post(finish_url, data);
-        dispatch("UPDATE_RENTS");
-        commit("REMOVE_LOCK", rentId);
-        return response.data;
-      } catch (err) {
-        throw unpackErrorMessage(err);
-      }
+      dispatch("END_RENT", { rentId: rentId, lat: lat, lon: lon })
     },
     UPDATE_RENTS: function({ commit, state, getters }) {
       if (!getters.isAuthenticated) { return; }

From 4ef059a464839ea901573a28b7cebd0fdaa7da85 Mon Sep 17 00:00:00 2001
From: Fabian Seidlmeier <fabian.seidlmeier@iteratec.com>
Date: Wed, 25 Aug 2021 14:22:58 +0200
Subject: [PATCH 36/61] Added reservation button and functionality

---
 package-lock.json                    | 174 +++++++++++++--------------
 src/App.vue                          |  12 +-
 src/components/Reservation.vue       | 113 +++++++++++++++++
 src/components/ReservationButton.vue |  32 +++++
 src/router/index.js                  |   2 +
 src/store/index.js                   |   8 ++
 6 files changed, 249 insertions(+), 92 deletions(-)
 create mode 100644 src/components/Reservation.vue
 create mode 100644 src/components/ReservationButton.vue

diff --git a/package-lock.json b/package-lock.json
index 02f8982..f1c077c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -2302,6 +2302,16 @@
           "integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==",
           "dev": true
         },
+        "ansi-styles": {
+          "version": "4.3.0",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "color-convert": "^2.0.1"
+          }
+        },
         "cacache": {
           "version": "13.0.1",
           "resolved": "https://registry.npmjs.org/cacache/-/cacache-13.0.1.tgz",
@@ -2328,6 +2338,41 @@
             "unique-filename": "^1.1.1"
           }
         },
+        "chalk": {
+          "version": "4.1.2",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+          "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "ansi-styles": "^4.1.0",
+            "supports-color": "^7.1.0"
+          }
+        },
+        "color-convert": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "color-name": "~1.1.4"
+          }
+        },
+        "color-name": {
+          "version": "1.1.4",
+          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+          "dev": true,
+          "optional": true
+        },
+        "emojis-list": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/emojis-list/-/emojis-list-3.0.0.tgz",
+          "integrity": "sha512-/kyM18EfinwXZbno9FyUGeFh87KC8HRQBQGildHZbEuRyWFOmv1U10o9BBp8XVZDVNNuQKyIGIu5ZYAAXJ0V2Q==",
+          "dev": true,
+          "optional": true
+        },
         "fast-deep-equal": {
           "version": "3.1.3",
           "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
@@ -2366,6 +2411,25 @@
             "universalify": "^0.1.0"
           }
         },
+        "has-flag": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+          "dev": true,
+          "optional": true
+        },
+        "loader-utils": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.0.tgz",
+          "integrity": "sha512-rP4F0h2RaWSvPEkD7BLDFQnvSf+nK+wr3ESUjNTyAGobqrijmW92zc+SO6d4p4B1wh7+B/Jg1mkQe5NYUEHtHQ==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "big.js": "^5.2.2",
+            "emojis-list": "^3.0.0",
+            "json5": "^2.1.2"
+          }
+        },
         "make-dir": {
           "version": "3.1.0",
           "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-3.1.0.tgz",
@@ -2423,6 +2487,16 @@
             "minipass": "^3.1.1"
           }
         },
+        "supports-color": {
+          "version": "7.2.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "has-flag": "^4.0.0"
+          }
+        },
         "terser-webpack-plugin": {
           "version": "2.3.8",
           "resolved": "https://registry.npmjs.org/terser-webpack-plugin/-/terser-webpack-plugin-2.3.8.tgz",
@@ -2439,6 +2513,18 @@
             "terser": "^4.6.12",
             "webpack-sources": "^1.4.3"
           }
+        },
+        "vue-loader-v16": {
+          "version": "npm:vue-loader@16.5.0",
+          "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-16.5.0.tgz",
+          "integrity": "sha512-WXh+7AgFxGTgb5QAkQtFeUcHNIEq3PGVQ8WskY5ZiFbWBkOwcCPRs4w/2tVyTbh2q6TVRlO3xfvIukUtjsu62A==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "chalk": "^4.1.0",
+            "hash-sum": "^2.0.0",
+            "loader-utils": "^2.0.0"
+          }
         }
       }
     },
@@ -13871,94 +13957,6 @@
         }
       }
     },
-    "vue-loader-v16": {
-      "version": "npm:vue-loader@16.0.0-beta.8",
-      "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-16.0.0-beta.8.tgz",
-      "integrity": "sha512-oouKUQWWHbSihqSD7mhymGPX1OQ4hedzAHyvm8RdyHh6m3oIvoRF+NM45i/bhNOlo8jCnuJhaSUf/6oDjv978g==",
-      "dev": true,
-      "optional": true,
-      "requires": {
-        "chalk": "^4.1.0",
-        "hash-sum": "^2.0.0",
-        "loader-utils": "^2.0.0"
-      },
-      "dependencies": {
-        "ansi-styles": {
-          "version": "4.3.0",
-          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
-          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "color-convert": "^2.0.1"
-          }
-        },
-        "chalk": {
-          "version": "4.1.0",
-          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.0.tgz",
-          "integrity": "sha512-qwx12AxXe2Q5xQ43Ac//I6v5aXTipYrSESdOgzrN+9XjgEpyjpKuvSGaN4qE93f7TQTlerQQ8S+EQ0EyDoVL1A==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "ansi-styles": "^4.1.0",
-            "supports-color": "^7.1.0"
-          }
-        },
-        "color-convert": {
-          "version": "2.0.1",
-          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
-          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "color-name": "~1.1.4"
-          }
-        },
-        "color-name": {
-          "version": "1.1.4",
-          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
-          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
-          "dev": true,
-          "optional": true
-        },
-        "emojis-list": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/emojis-list/-/emojis-list-3.0.0.tgz",
-          "integrity": "sha512-/kyM18EfinwXZbno9FyUGeFh87KC8HRQBQGildHZbEuRyWFOmv1U10o9BBp8XVZDVNNuQKyIGIu5ZYAAXJ0V2Q==",
-          "dev": true,
-          "optional": true
-        },
-        "has-flag": {
-          "version": "4.0.0",
-          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
-          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
-          "dev": true,
-          "optional": true
-        },
-        "loader-utils": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.0.tgz",
-          "integrity": "sha512-rP4F0h2RaWSvPEkD7BLDFQnvSf+nK+wr3ESUjNTyAGobqrijmW92zc+SO6d4p4B1wh7+B/Jg1mkQe5NYUEHtHQ==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "big.js": "^5.2.2",
-            "emojis-list": "^3.0.0",
-            "json5": "^2.1.2"
-          }
-        },
-        "supports-color": {
-          "version": "7.2.0",
-          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
-          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "has-flag": "^4.0.0"
-          }
-        }
-      }
-    },
     "vue-router": {
       "version": "3.4.6",
       "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-3.4.6.tgz",
diff --git a/src/App.vue b/src/App.vue
index f226fcc..66dcc96 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -51,7 +51,10 @@
         <v-btn rounded x-large color="success" class="login-button" v-if="!user" :to="{name: 'login'}">
           <v-icon>{{ mdi.login }}</v-icon>&nbsp;<span>{{ $t('message.app.login') }}</span>
         </v-btn>
-        <RentButton v-if="user" class="rent-button" />
+        <v-row class="button-row" justify="center">
+          <RentButton v-if="user" class="rent-button" />
+          <ReservationButton v-if="user" class="rent-button" />
+        </v-row>
       </div>
       <AppError />
     </v-main>
@@ -64,13 +67,14 @@
   import About from './components/About';
   import GbfsView from './components/GbfsView';
   import RentButton from './components/RentButton';
+  import ReservationButton from './components/ReservationButton';
   import AppError from './components/AppError';
 
   const blank = (v) => !(typeof v !== 'undefined' && v !== '');
 
   export default {
     name: 'App',
-    components: {About, GbfsView, RentButton, AppError},
+    components: {About, GbfsView, RentButton, ReservationButton, AppError},
     data: function() {
       return {
         name: this.$appConfig.NAME,
@@ -105,8 +109,8 @@
 
 <style>
   .support-button,
-  .rent-button,
-  .login-button {
+  .login-button,
+  .button-row {
     position: fixed;
     bottom: 2rem;
     text-align: center;
diff --git a/src/components/Reservation.vue b/src/components/Reservation.vue
new file mode 100644
index 0000000..9772dc5
--- /dev/null
+++ b/src/components/Reservation.vue
@@ -0,0 +1,113 @@
+<template>
+  <v-dialog v-model="show" max-width="400">
+    <v-card>
+      <v-card-title class="text-h5 grey lighten-2" primary-title>
+        {{ $t("message.login.login-with") }}
+      </v-card-title>
+      <v-card-actions>
+        <v-form v-model="valid" ref="reservationForm" @submit.prevent="startRent">
+          <v-container class="pb-0">
+            <v-row class="pt-5">
+              <v-col cols="12" md="12" class="py-0 pr-0">
+                <v-text-field
+                  type="text"
+                  :label="$t('message.login.username')"
+                  v-model="startTime"
+                  outlined
+                  required
+                  autofocus
+                  inputmode="text"
+                  pattern="[0-9a-zA-Z]*"
+                ></v-text-field>
+              </v-col>
+              <v-col cols="1" md="1" class="py-0 text-right"> </v-col>
+            </v-row>
+            <v-row class="pt-5">
+              <v-col cols="12" md="12" class="py-0 pr-0">
+                <v-text-field
+                  type="password"
+                  :label="$t('message.login.password')"
+                  v-model="endTime"
+                  outlined
+                  required
+                  autofocus
+                  inputmode="text"
+                  pattern="[0-9a-zA-Z]*"
+                ></v-text-field>
+              </v-col>
+            </v-row>
+            <v-row class="pt-5">
+              <v-col cols="12" md="12" class="py-0 pr-0">
+                <v-text-field
+                  type="text"
+                  :label="$t('Station')"
+                  v-model="station"
+                  outlined
+                  required
+                  autofocus
+                  inputmode="text"
+                  pattern="[0-9a-zA-Z]*"
+                ></v-text-field>
+              </v-col>
+              <v-col cols="1" md="1" class="py-0 text-right"> </v-col>
+            </v-row>
+            <v-row class="pt-5">
+              <v-col cols="1" md="1" class="py-0 text-right">
+                <v-btn
+                  class="mt-2"
+                  color="success"
+                  v-bind:disabled="!valid"
+                  :loading="loading"
+                  @click="startReservation()"
+                >
+                  {{ $t("message.app.login") }}
+                </v-btn>
+              </v-col>
+            </v-row>
+          </v-container>
+          
+        </v-form>
+         
+      </v-card-actions>
+    </v-card>
+    <v-container v-if ="wrongPW" color: red>
+  <h4 v-if ="wrongPW"> {{$t('message.login.failed-login')}} </h4>
+             </v-container>
+  </v-dialog>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      wrongPW: false,
+      show: true,
+      loading: false,
+      valid: false,
+      startTime: "",
+      endTime: "",
+      station: "",
+    };
+  },
+  methods: {
+    startReservation() {
+        let payload = {
+            startDate: this.startTime,
+            endDate: this.endTime,
+            startStationId: this.station
+        }
+        this.$store.dispatch("START_RESERVATION", payload).then(
+            () => {
+                this.$router.push("/");
+            }
+        )},
+  },
+  watch: {
+    show(current) {
+      if (current === false) {
+        this.$router.push("/");
+      }
+    },
+  },
+};
+</script>
diff --git a/src/components/ReservationButton.vue b/src/components/ReservationButton.vue
new file mode 100644
index 0000000..70cc8e0
--- /dev/null
+++ b/src/components/ReservationButton.vue
@@ -0,0 +1,32 @@
+<template>
+  <v-btn
+    rounded
+    x-large
+    color="success"
+    :to="{name:'reservation'}"
+  >
+    <v-icon>{{ mdi.bike }}</v-icon><span class="pl-2">{{ buttonText }}</span>
+  </v-btn>
+</template>
+
+<script>
+  import { mapState } from 'vuex';
+  import { mdiBike } from '@mdi/js'
+
+  export default {
+    data() {
+      return {
+        mdi: {
+          bike: mdiBike
+        }
+      }
+    },
+    computed: {
+      buttonText() {
+        return 'Reservierungen';
+      },
+
+      ...mapState(['rents'])
+    },
+  };
+</script>
diff --git a/src/router/index.js b/src/router/index.js
index 1ab6e0b..f63f3e7 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -11,6 +11,7 @@ import Rent from '../components/Rent';
 import Support from '../components/Support';
 import VehicleDetail from '../components/VehicleDetail';
 import StationDetail from '../components/StationDetail';
+import Reservation from '../components/Reservation';
 
 import CustomLogin from '../components/CustomLogin';
 
@@ -39,6 +40,7 @@ const router = new VueRouter({
     { path: '/v/:id', name: 'vehicle', component: VehicleDetail, props: true },
     { path: '/s/:id', name: 'station', component: StationDetail, props: true },
     { path: '/support', name: 'support', component: Support },
+    { path: '/reservation', name: 'reservation', component: Reservation },
     { path: '*', redirect: '/' }
   ],
 });
diff --git a/src/store/index.js b/src/store/index.js
index cb13e44..1c65b6a 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -171,6 +171,14 @@ export default new Vuex.Store({
       } catch (err) {
         throw unpackErrorMessage(err);
       }
+    },
+    START_RESERVATION: async function({ state }, payload) {
+      try {
+        let response = await axiosWithAuth.call(this, state).post('/reservation', payload);
+        return response.data;
+      } catch (err) {
+        throw unpackErrorMessage(err);
+      }
     }
   },
   mutations: {

From 95caf26d9043e9f42a9109262318f06de511deab Mon Sep 17 00:00:00 2001
From: Fabian Seidlmeier <fabian.seidlmeier@iteratec.com>
Date: Mon, 30 Aug 2021 12:23:06 +0200
Subject: [PATCH 37/61] Changed Reservation Dialog

---
 src/App.vue                             |   7 +-
 src/components/DateTimePickerDialog.vue |  77 ++++++++++++++++
 src/components/Reservation.vue          | 111 +++++++++++++++++-------
 src/components/ReservationButton.vue    |   2 +-
 src/i18n/messages.json                  |  20 +++++
 5 files changed, 185 insertions(+), 32 deletions(-)
 create mode 100644 src/components/DateTimePickerDialog.vue

diff --git a/src/App.vue b/src/App.vue
index 66dcc96..d6b7592 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -51,7 +51,7 @@
         <v-btn rounded x-large color="success" class="login-button" v-if="!user" :to="{name: 'login'}">
           <v-icon>{{ mdi.login }}</v-icon>&nbsp;<span>{{ $t('message.app.login') }}</span>
         </v-btn>
-        <v-row class="button-row" justify="center">
+        <v-row class="button-row">
           <RentButton v-if="user" class="rent-button" />
           <ReservationButton v-if="user" class="rent-button" />
         </v-row>
@@ -122,10 +122,13 @@
   }
   .rent-button,
   .login-button {
-    left: 50%;
     transform: translateX(-50%);
+    margin: 0 auto 0 auto;
   }
   .support-button {
     left: 1rem;
   }
+  .button-row {
+    width: 100%;
+  }
 </style>
diff --git a/src/components/DateTimePickerDialog.vue b/src/components/DateTimePickerDialog.vue
new file mode 100644
index 0000000..92a5f1f
--- /dev/null
+++ b/src/components/DateTimePickerDialog.vue
@@ -0,0 +1,77 @@
+<template>
+    <v-dialog
+        ref="dialog"
+        v-model="modal"
+        :return-value.sync="date"
+        persistent
+        width="290px"
+      >
+        <template v-slot:activator="{ on, attrs }">
+          <v-text-field
+            v-model="date"
+            label="Picker in dialog"
+            prepend-icon="mdi-calendar"
+            readonly
+            v-bind="attrs"
+            v-on="on"
+          ></v-text-field>
+        </template>
+        <v-stepper
+            v-model="dialogStep"
+            vertical
+        >
+            <v-stepper-step
+                :complete="dialogStep > 1"
+                step="1">
+                Datum auswählen
+            </v-stepper-step>
+            <v-stepper-content step="1">
+                DatePicker stuff
+
+                <v-btn
+                    color="primary"
+                    @click="dialogStep = 2"
+                >
+                    Continue
+                </v-btn>
+                <v-btn text>
+                    Cancel
+                </v-btn>
+            </v-stepper-content>
+
+            <v-stepper-step
+                :complete="dialogStep > 2"
+                step="2">
+                Zeit auswählen
+            </v-stepper-step>
+            <v-stepper-content step="2">
+                TimePicker stuff
+
+                <v-btn
+                    color="primary"
+                    @click="dialogStep = 3"
+                >
+                    Continue
+                </v-btn>
+                <v-btn text>
+                    Cancel
+                </v-btn>
+            </v-stepper-content>
+        </v-stepper>
+        <!--  -->
+    </v-dialog>
+</template>
+<script>
+export default {
+    data() {
+        return {
+            dialogStep: 1,
+            date: null,
+            time: null,
+            menu: false,
+            modal: false,
+            menu2: false,
+        }
+    }
+}
+</script>
\ No newline at end of file
diff --git a/src/components/Reservation.vue b/src/components/Reservation.vue
index 9772dc5..fe7afd4 100644
--- a/src/components/Reservation.vue
+++ b/src/components/Reservation.vue
@@ -2,45 +2,75 @@
   <v-dialog v-model="show" max-width="400">
     <v-card>
       <v-card-title class="text-h5 grey lighten-2" primary-title>
-        {{ $t("message.login.login-with") }}
+        {{ $t("message.reservation.title") }}
       </v-card-title>
       <v-card-actions>
         <v-form v-model="valid" ref="reservationForm" @submit.prevent="startRent">
           <v-container class="pb-0">
             <v-row class="pt-5">
               <v-col cols="12" md="12" class="py-0 pr-0">
-                <v-text-field
-                  type="text"
-                  :label="$t('message.login.username')"
-                  v-model="startTime"
-                  outlined
-                  required
-                  autofocus
-                  inputmode="text"
-                  pattern="[0-9a-zA-Z]*"
-                ></v-text-field>
+                <v-menu
+                    v-model="menu1"
+                    :close-on-content-click="false"
+                    transition="scale-transition"
+                    offset-y
+                    max-width="400px"
+                    min-width="auto"
+                    >
+                    <template v-slot:activator="{ on, attrs }">
+                        <v-text-field
+                        v-model="computedStartDateFormatted"
+                        :label="$t('message.reservation.startDate')"
+                        persistent-hint
+                        prepend-icon="mdi-calendar"
+                        readonly
+                        v-bind="attrs"
+                        v-on="on"
+                        ></v-text-field>
+                    </template>
+                    <v-date-picker
+                        v-model="startDate"
+                        no-title
+                        @input="menu1 = false"
+                    ></v-date-picker>
+                </v-menu>
               </v-col>
               <v-col cols="1" md="1" class="py-0 text-right"> </v-col>
             </v-row>
             <v-row class="pt-5">
               <v-col cols="12" md="12" class="py-0 pr-0">
-                <v-text-field
-                  type="password"
-                  :label="$t('message.login.password')"
-                  v-model="endTime"
-                  outlined
-                  required
-                  autofocus
-                  inputmode="text"
-                  pattern="[0-9a-zA-Z]*"
-                ></v-text-field>
+                <v-menu
+                    v-model="menu2"
+                    :close-on-content-click="false"
+                    transition="scale-transition"
+                    offset-y
+                    max-width="400px"
+                    min-width="auto"
+                    >
+                    <template v-slot:activator="{ on, attrs }">
+                        <v-text-field
+                        v-model="computedEndDateFormatted"
+                        :label="$t('message.reservation.endDate')"
+                        persistent-hint
+                        prepend-icon="mdi-calendar"
+                        readonly
+                        v-bind="attrs"
+                        v-on="on"
+                        ></v-text-field>
+                    </template>
+                    <v-date-picker
+                        v-model="endDate"
+                        no-title
+                        @input="menu2 = false"
+                    ></v-date-picker>
+                </v-menu>
               </v-col>
             </v-row>
             <v-row class="pt-5">
               <v-col cols="12" md="12" class="py-0 pr-0">
                 <v-text-field
                   type="text"
-                  :label="$t('Station')"
+                  :label="$t('message.reservation.station')"
                   v-model="station"
                   outlined
                   required
@@ -49,7 +79,8 @@
                   pattern="[0-9a-zA-Z]*"
                 ></v-text-field>
               </v-col>
-              <v-col cols="1" md="1" class="py-0 text-right"> </v-col>
+              <v-col cols="1" md="1" class="py-0 text-right">
+              </v-col>
             </v-row>
             <v-row class="pt-5">
               <v-col cols="1" md="1" class="py-0 text-right">
@@ -60,7 +91,7 @@
                   :loading="loading"
                   @click="startReservation()"
                 >
-                  {{ $t("message.app.login") }}
+                  {{ $t("message.reservation.create") }}
                 </v-btn>
               </v-col>
             </v-row>
@@ -70,29 +101,40 @@
          
       </v-card-actions>
     </v-card>
-    <v-container v-if ="wrongPW" color: red>
-  <h4 v-if ="wrongPW"> {{$t('message.login.failed-login')}} </h4>
-             </v-container>
   </v-dialog>
 </template>
 
 <script>
+import { DateTimePickerDialog } from "./DateTimePickerDialog.vue";
 export default {
   data() {
     return {
-      wrongPW: false,
       show: true,
       loading: false,
       valid: false,
       startTime: "",
       endTime: "",
       station: "",
+      startDate: null,
+      endDate: null,
+      startDateFormatted: null,
+      endDateFormatted: null,
+      menu1: false,
+      menu2: false,
     };
   },
+  computed: {
+      computedStartDateFormatted() {
+          return this.formatDate(this.startDate)
+      },
+      computedEndDateFormatted() {
+          return this.formatDate(this.endDate)
+      }
+  },
   methods: {
     startReservation() {
         let payload = {
-            startDate: this.startTime,
+            startDate: this.startDate,
             endDate: this.endTime,
             startStationId: this.station
         }
@@ -101,6 +143,13 @@ export default {
                 this.$router.push("/");
             }
         )},
+
+    formatDate (date) {
+        if (!date) return null
+
+        const [year, month, day] = date.split('-')
+        return `${day}.${month}.${year}`
+    },
   },
   watch: {
     show(current) {
@@ -108,6 +157,10 @@ export default {
         this.$router.push("/");
       }
     },
+    date () {
+        this.startDateFormatted = this.formatDate(this.startDate)
+        this.endDateFormatted = this.formatDate(this.endDate)
+    },
   },
 };
 </script>
diff --git a/src/components/ReservationButton.vue b/src/components/ReservationButton.vue
index 70cc8e0..f14792a 100644
--- a/src/components/ReservationButton.vue
+++ b/src/components/ReservationButton.vue
@@ -23,7 +23,7 @@
     },
     computed: {
       buttonText() {
-        return 'Reservierungen';
+        return this.$t('message.reservationbutton.reservation');
       },
 
       ...mapState(['rents'])
diff --git a/src/i18n/messages.json b/src/i18n/messages.json
index d8da8bf..9df6603 100644
--- a/src/i18n/messages.json
+++ b/src/i18n/messages.json
@@ -49,6 +49,16 @@
       "detail": {
         "no-range": "no Range",
         "range": "Range: {value} {unit}"
+      },
+      "reservationbutton": {
+        "reservation": "Reservations"
+      },
+      "reservation": {
+        "title": "New reservation",
+        "startDate": "Start",
+        "endDate": "End",
+        "station": "Station",
+        "create": "Create Reservation"
       }
     }
   },
@@ -103,6 +113,16 @@
       "detail": {
         "no-range": "keine Reichweite",
         "range": "{value} {unit} Reichweite"
+      },
+      "reservationbutton": {
+        "reservation": "Reservierung"
+      },
+      "reservation": {
+        "title": "Neue Reservierung",
+        "startDate": "Start",
+        "endDate": "Ende",
+        "station": "Station",
+        "create": "Reservierung erstellen"
       }
     }
   }

From b17fa0012cff623d5a809acb14088e82e8b4d128 Mon Sep 17 00:00:00 2001
From: Fabian Seidlmeier <fabian.seidlmeier@iteratec.com>
Date: Wed, 1 Sep 2021 11:13:27 +0200
Subject: [PATCH 38/61] Added DateTimePickerDialog to Reservation creation

---
 src/components/DateTimePickerDialog.vue |  71 +++++++++++----
 src/components/Reservation.vue          | 114 ++++++------------------
 2 files changed, 82 insertions(+), 103 deletions(-)

diff --git a/src/components/DateTimePickerDialog.vue b/src/components/DateTimePickerDialog.vue
index 92a5f1f..a865c88 100644
--- a/src/components/DateTimePickerDialog.vue
+++ b/src/components/DateTimePickerDialog.vue
@@ -3,13 +3,12 @@
         ref="dialog"
         v-model="modal"
         :return-value.sync="date"
-        persistent
-        width="290px"
+        width="400px"
       >
         <template v-slot:activator="{ on, attrs }">
           <v-text-field
-            v-model="date"
-            label="Picker in dialog"
+            v-model="computedDateTimeFormatted"
+            :placeholder="placeholder"
             prepend-icon="mdi-calendar"
             readonly
             v-bind="attrs"
@@ -26,7 +25,14 @@
                 Datum auswählen
             </v-stepper-step>
             <v-stepper-content step="1">
-                DatePicker stuff
+                
+                <template>
+                    <v-row justify="center">
+                        <v-date-picker
+                            v-model="date"
+                        ></v-date-picker>
+                    </v-row>
+                </template>
 
                 <v-btn
                     color="primary"
@@ -34,9 +40,7 @@
                 >
                     Continue
                 </v-btn>
-                <v-btn text>
-                    Cancel
-                </v-btn>
+                
             </v-stepper-content>
 
             <v-stepper-step
@@ -45,33 +49,66 @@
                 Zeit auswählen
             </v-stepper-step>
             <v-stepper-content step="2">
-                TimePicker stuff
+                
+                <template>
+                    <v-row justify="center">
+                        <v-time-picker
+                            v-model="time"
+                            format="24hr"
+                        ></v-time-picker>
+                    </v-row>
+                </template>
 
                 <v-btn
                     color="primary"
-                    @click="dialogStep = 3"
+                    @click="closeDialog"
                 >
                     Continue
                 </v-btn>
-                <v-btn text>
-                    Cancel
+                <v-btn 
+                    text
+                    @click="dialogStep = 1">
+                    Back
                 </v-btn>
             </v-stepper-content>
         </v-stepper>
-        <!--  -->
     </v-dialog>
 </template>
 <script>
 export default {
+    props: [ 'placeholder' ],
     data() {
         return {
             dialogStep: 1,
             date: null,
             time: null,
-            menu: false,
             modal: false,
-            menu2: false,
+            selectedDate: null,
+            selectedTime: null,
+            dateTimeFormatted: "test",
+        }
+    },
+    computed: {
+        computedDateTimeFormatted() {
+            return this.formatDateTime(this.selectedDate, this.selectedTime)
         }
-    }
-}
+    },
+    methods: {
+        closeDialog() {
+            this.selectedDate = this.date
+            this.selectedTime = this.time
+            this.modal = false
+            this.$emit('newDateTime', [this.selectedDate, this.selectedTime])
+            this.dialogStep = 1
+        },
+
+        formatDateTime (date, time) {
+            if (!date || !time) return null
+
+            const [hour, minute] = time.split(':')
+            const [year, month, day] = date.split('-')
+            return `${day}.${month}.${year}, ${hour}:${minute} Uhr`
+        },
+    },
+};
 </script>
\ No newline at end of file
diff --git a/src/components/Reservation.vue b/src/components/Reservation.vue
index fe7afd4..18caf18 100644
--- a/src/components/Reservation.vue
+++ b/src/components/Reservation.vue
@@ -9,61 +9,21 @@
           <v-container class="pb-0">
             <v-row class="pt-5">
               <v-col cols="12" md="12" class="py-0 pr-0">
-                <v-menu
-                    v-model="menu1"
-                    :close-on-content-click="false"
-                    transition="scale-transition"
-                    offset-y
-                    max-width="400px"
-                    min-width="auto"
-                    >
-                    <template v-slot:activator="{ on, attrs }">
-                        <v-text-field
-                        v-model="computedStartDateFormatted"
-                        :label="$t('message.reservation.startDate')"
-                        persistent-hint
-                        prepend-icon="mdi-calendar"
-                        readonly
-                        v-bind="attrs"
-                        v-on="on"
-                        ></v-text-field>
-                    </template>
-                    <v-date-picker
-                        v-model="startDate"
-                        no-title
-                        @input="menu1 = false"
-                    ></v-date-picker>
-                </v-menu>
+                Start Zeit
+                <date-time-picker-dialog
+                  :placeholder="startPlaceholder"
+                  @newDateTime="startDateTime=$event"
+                ></date-time-picker-dialog>
               </v-col>
               <v-col cols="1" md="1" class="py-0 text-right"> </v-col>
             </v-row>
             <v-row class="pt-5">
               <v-col cols="12" md="12" class="py-0 pr-0">
-                <v-menu
-                    v-model="menu2"
-                    :close-on-content-click="false"
-                    transition="scale-transition"
-                    offset-y
-                    max-width="400px"
-                    min-width="auto"
-                    >
-                    <template v-slot:activator="{ on, attrs }">
-                        <v-text-field
-                        v-model="computedEndDateFormatted"
-                        :label="$t('message.reservation.endDate')"
-                        persistent-hint
-                        prepend-icon="mdi-calendar"
-                        readonly
-                        v-bind="attrs"
-                        v-on="on"
-                        ></v-text-field>
-                    </template>
-                    <v-date-picker
-                        v-model="endDate"
-                        no-title
-                        @input="menu2 = false"
-                    ></v-date-picker>
-                </v-menu>
+                End Zeit
+                <date-time-picker-dialog
+                  :placeholder="endPlaceholder"
+                  @newDateTime="endDateTime=$event"
+                ></date-time-picker-dialog>
               </v-col>
             </v-row>
             <v-row class="pt-5">
@@ -105,50 +65,36 @@
 </template>
 
 <script>
-import { DateTimePickerDialog } from "./DateTimePickerDialog.vue";
+import DateTimePickerDialog from "./DateTimePickerDialog.vue";
 export default {
+  components: { DateTimePickerDialog },
   data() {
     return {
       show: true,
       loading: false,
       valid: false,
-      startTime: "",
       endTime: "",
       station: "",
-      startDate: null,
-      endDate: null,
-      startDateFormatted: null,
-      endDateFormatted: null,
-      menu1: false,
-      menu2: false,
+      startPlaceholder: "Startzeit",
+      endPlaceholder: "Endzeit",
+      startDateTime: "",
+      endDateTime: "",
     };
   },
-  computed: {
-      computedStartDateFormatted() {
-          return this.formatDate(this.startDate)
-      },
-      computedEndDateFormatted() {
-          return this.formatDate(this.endDate)
-      }
-  },
   methods: {
     startReservation() {
-        let payload = {
-            startDate: this.startDate,
-            endDate: this.endTime,
-            startStationId: this.station
-        }
-        this.$store.dispatch("START_RESERVATION", payload).then(
-            () => {
-                this.$router.push("/");
-            }
-        )},
-
-    formatDate (date) {
-        if (!date) return null
-
-        const [year, month, day] = date.split('-')
-        return `${day}.${month}.${year}`
+      let payload = {
+          startDate: this.startDateTime[0],
+          startTime: this.startDateTime[1],
+          endDate: this.endDateTime[0],
+          endTime: this.endDateTime[1],
+          startStationId: this.station
+      }
+      this.$store.dispatch("START_RESERVATION", payload).then(
+          () => {
+              this.$router.push("/");
+          }
+      )
     },
   },
   watch: {
@@ -157,10 +103,6 @@ export default {
         this.$router.push("/");
       }
     },
-    date () {
-        this.startDateFormatted = this.formatDate(this.startDate)
-        this.endDateFormatted = this.formatDate(this.endDate)
-    },
   },
 };
 </script>

From 2da1b1dda634db9cb84d9df40993f4196ede3837 Mon Sep 17 00:00:00 2001
From: Fabian Seidlmeier <fabian.seidlmeier@iteratec.com>
Date: Mon, 6 Sep 2021 09:21:30 +0200
Subject: [PATCH 39/61] add stationselect + datetime format to reservation

---
 src/components/DateTimePickerDialog.vue |  4 +--
 src/components/Reservation.vue          | 42 ++++++++++++++-----------
 2 files changed, 26 insertions(+), 20 deletions(-)

diff --git a/src/components/DateTimePickerDialog.vue b/src/components/DateTimePickerDialog.vue
index a865c88..5224e23 100644
--- a/src/components/DateTimePickerDialog.vue
+++ b/src/components/DateTimePickerDialog.vue
@@ -76,7 +76,7 @@
 </template>
 <script>
 export default {
-    props: [ 'placeholder' ],
+    props: [ 'placeholder', 'minDate' ],
     data() {
         return {
             dialogStep: 1,
@@ -98,7 +98,7 @@ export default {
             this.selectedDate = this.date
             this.selectedTime = this.time
             this.modal = false
-            this.$emit('newDateTime', [this.selectedDate, this.selectedTime])
+            this.$emit('newDateTime', `${this.selectedDate}T${this.selectedTime}`)
             this.dialogStep = 1
         },
 
diff --git a/src/components/Reservation.vue b/src/components/Reservation.vue
index 18caf18..1836d2f 100644
--- a/src/components/Reservation.vue
+++ b/src/components/Reservation.vue
@@ -5,7 +5,7 @@
         {{ $t("message.reservation.title") }}
       </v-card-title>
       <v-card-actions>
-        <v-form v-model="valid" ref="reservationForm" @submit.prevent="startRent">
+        <v-form v-model="valid" ref="reservationForm">
           <v-container class="pb-0">
             <v-row class="pt-5">
               <v-col cols="12" md="12" class="py-0 pr-0">
@@ -28,16 +28,14 @@
             </v-row>
             <v-row class="pt-5">
               <v-col cols="12" md="12" class="py-0 pr-0">
-                <v-text-field
-                  type="text"
+                <v-select
+                  :items="availableStations"
                   :label="$t('message.reservation.station')"
+                  item-text="name"
+                  item-value="station_id"
                   v-model="station"
-                  outlined
                   required
-                  autofocus
-                  inputmode="text"
-                  pattern="[0-9a-zA-Z]*"
-                ></v-text-field>
+                ></v-select>
               </v-col>
               <v-col cols="1" md="1" class="py-0 text-right">
               </v-col>
@@ -47,7 +45,7 @@
                 <v-btn
                   class="mt-2"
                   color="success"
-                  v-bind:disabled="!valid"
+                  :disabled="!valid"
                   :loading="loading"
                   @click="startReservation()"
                 >
@@ -56,15 +54,14 @@
               </v-col>
             </v-row>
           </v-container>
-          
         </v-form>
-         
       </v-card-actions>
     </v-card>
   </v-dialog>
 </template>
 
 <script>
+import { mapState } from 'vuex';
 import DateTimePickerDialog from "./DateTimePickerDialog.vue";
 export default {
   components: { DateTimePickerDialog },
@@ -73,22 +70,23 @@ export default {
       show: true,
       loading: false,
       valid: false,
-      endTime: "",
-      station: "",
+      availableStations: [],
+      station: null,
       startPlaceholder: "Startzeit",
       endPlaceholder: "Endzeit",
       startDateTime: "",
       endDateTime: "",
     };
   },
+  computed: {
+    ...mapState(['gbfs'])
+  },
   methods: {
     startReservation() {
       let payload = {
-          startDate: this.startDateTime[0],
-          startTime: this.startDateTime[1],
-          endDate: this.endDateTime[0],
-          endTime: this.endDateTime[1],
-          startStationId: this.station
+          startDate: this.startDateTime,
+          endDate: this.endDateTime,
+          startStationId: this.station,
       }
       this.$store.dispatch("START_RESERVATION", payload).then(
           () => {
@@ -96,6 +94,14 @@ export default {
           }
       )
     },
+    fetchStations() {
+      this.availableStations = this.$store.getters.getGBFSStationsWithDetails();
+    }
+  },
+  mounted() {
+    if (this.gbfs !== null) {
+      this.fetchStations();
+    }
   },
   watch: {
     show(current) {

From c82883b34c169089839fb2282c03738c75895e08 Mon Sep 17 00:00:00 2001
From: Jonas Laacke <jonas.laacke@iteratec.com>
Date: Tue, 7 Sep 2021 11:10:54 +0200
Subject: [PATCH 40/61] only show spontaneous rent or reservation if allowed;
 choose vehicle type for reservation

---
 src/App.vue                    | 21 ++++++++++++++++++---
 src/components/Reservation.vue | 26 +++++++++++++++++++++++++-
 src/i18n/messages.json         |  2 ++
 src/store/index.js             |  6 ++++++
 4 files changed, 51 insertions(+), 4 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index d6b7592..351c6d4 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -52,8 +52,8 @@
           <v-icon>{{ mdi.login }}</v-icon>&nbsp;<span>{{ $t('message.app.login') }}</span>
         </v-btn>
         <v-row class="button-row">
-          <RentButton v-if="user" class="rent-button" />
-          <ReservationButton v-if="user" class="rent-button" />
+          <RentButton v-if="user && this.fetchVehicleTypesForSpontaneousRent().length > 0" class="rent-button" />
+          <ReservationButton v-if="user && this.fetchVehicleTypesForReservation().length > 0" class="rent-button" />
         </v-row>
       </div>
       <AppError />
@@ -91,11 +91,26 @@
         let env = this.$appConfig.ENV;
         return require('@/assets/logo' + (env != 'production' ? '.' + env : '') + '.png');
       },
-      ...mapState(['user'])
+      ...mapState(['user']),
+      ...mapState(['gbfs'])
     },
     methods: {
       logout() {
         this.$store.dispatch("LOGOUT");
+      },
+      fetchVehicleTypesForReservation() {
+        if (this.gbfs !== null) {
+          return this.$store.getters.getGBFSVehicleTypesForReservation();
+        } else {
+          return [];
+        }
+      },
+      fetchVehicleTypesForSpontaneousRent() {
+        if (this.gbfs !== null) {
+          return this.$store.getters.getGBFSVehicleTypesForSpontaneousRent();
+        } else {
+          return [];
+        }
       }
     },
     watch: {
diff --git a/src/components/Reservation.vue b/src/components/Reservation.vue
index 1836d2f..d40b357 100644
--- a/src/components/Reservation.vue
+++ b/src/components/Reservation.vue
@@ -26,6 +26,20 @@
                 ></date-time-picker-dialog>
               </v-col>
             </v-row>
+            <v-row v-if="vehicleTypes.length > 1" class="pt-5">
+              <v-col cols="12" md="12" class="py-0 pr-0">
+                <v-select
+                  :items="vehicleTypes"
+                  :label="$t('message.reservation.vehicleType')"
+                  item-text="name"
+                  item-value="vehicle_type_id"
+                  v-model="vehicleType"
+                  required
+                ></v-select>
+              </v-col>
+              <v-col cols="1" md="1" class="py-0 text-right">
+              </v-col>
+            </v-row>
             <v-row class="pt-5">
               <v-col cols="12" md="12" class="py-0 pr-0">
                 <v-select
@@ -71,7 +85,9 @@ export default {
       loading: false,
       valid: false,
       availableStations: [],
+      vehicleTypes: [],
       station: null,
+      vehicleType: null,
       startPlaceholder: "Startzeit",
       endPlaceholder: "Endzeit",
       startDateTime: "",
@@ -87,6 +103,7 @@ export default {
           startDate: this.startDateTime,
           endDate: this.endDateTime,
           startStationId: this.station,
+          vehicleTypeId: this.vehicleType,
       }
       this.$store.dispatch("START_RESERVATION", payload).then(
           () => {
@@ -96,11 +113,18 @@ export default {
     },
     fetchStations() {
       this.availableStations = this.$store.getters.getGBFSStationsWithDetails();
-    }
+    },
+    fetchVehicleTypes() {
+      this.vehicleTypes = this.$store.getters.getGBFSVehicleTypesForReservation();
+      if(this.vehicleTypes.length > 0) {
+        this.vehicleType = this.vehicleTypes[0].vehicle_type_id;
+      }
+    },
   },
   mounted() {
     if (this.gbfs !== null) {
       this.fetchStations();
+      this.fetchVehicleTypes();
     }
   },
   watch: {
diff --git a/src/i18n/messages.json b/src/i18n/messages.json
index 9df6603..64ff14a 100644
--- a/src/i18n/messages.json
+++ b/src/i18n/messages.json
@@ -57,6 +57,7 @@
         "title": "New reservation",
         "startDate": "Start",
         "endDate": "End",
+        "vehicleType": "Vehicle Type",
         "station": "Station",
         "create": "Create Reservation"
       }
@@ -121,6 +122,7 @@
         "title": "Neue Reservierung",
         "startDate": "Start",
         "endDate": "Ende",
+        "vehicleType": "Fahrzeugtyp",
         "station": "Station",
         "create": "Reservierung erstellen"
       }
diff --git a/src/store/index.js b/src/store/index.js
index 1c65b6a..ea76bdf 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -243,6 +243,12 @@ export default new Vuex.Store({
     },
     getGBFSStationsWithDetails: (state) => () => {
       return state.gbfs.stations.data.stations;
+    },
+    getGBFSVehicleTypesForReservation: (state) => () => {
+      return state.gbfs.vehicleTypes.data.vehicle_types.filter(vehicleType => vehicleType.allow_reservation === true);
+    },
+    getGBFSVehicleTypesForSpontaneousRent: (state) => () => {
+      return state.gbfs.vehicleTypes.data.vehicle_types.filter(vehicleType => vehicleType.allow_spontaneous_rent === true);
     }
   },
   modules: {},

From 47b4d486f1c641cebfceaaf0f8018b8d04665c74 Mon Sep 17 00:00:00 2001
From: Fabian Seidlmeier <fabian.seidlmeier@iteratec.com>
Date: Wed, 8 Sep 2021 16:07:31 +0200
Subject: [PATCH 41/61] extended functionality for reservations

---
 src/App.vue                                |   6 ++
 src/components/DateTimePickerDialog.vue    |   7 +-
 src/components/Reservation.vue             |  25 +++--
 src/components/ReservationButton.vue       |   4 +-
 src/components/ReservationDeleteDialog.vue |  78 +++++++++++++++
 src/components/ReservationList.vue         | 110 +++++++++++++++++++++
 src/router/index.js                        |   2 +
 src/store/index.js                         |  16 +++
 8 files changed, 232 insertions(+), 16 deletions(-)
 create mode 100644 src/components/ReservationDeleteDialog.vue
 create mode 100644 src/components/ReservationList.vue

diff --git a/src/App.vue b/src/App.vue
index d6b7592..a4db69f 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -53,6 +53,12 @@
         </v-btn>
         <v-row class="button-row">
           <RentButton v-if="user" class="rent-button" />
+          <v-btn
+            rounded
+            x-large
+            color="success"
+            :to="{name:'reservationview'}"
+          >Meine Reservierungen</v-btn>
           <ReservationButton v-if="user" class="rent-button" />
         </v-row>
       </div>
diff --git a/src/components/DateTimePickerDialog.vue b/src/components/DateTimePickerDialog.vue
index 5224e23..10c4751 100644
--- a/src/components/DateTimePickerDialog.vue
+++ b/src/components/DateTimePickerDialog.vue
@@ -38,7 +38,7 @@
                     color="primary"
                     @click="dialogStep = 2"
                 >
-                    Continue
+                    Weiter
                 </v-btn>
                 
             </v-stepper-content>
@@ -63,12 +63,12 @@
                     color="primary"
                     @click="closeDialog"
                 >
-                    Continue
+                    Weiter
                 </v-btn>
                 <v-btn 
                     text
                     @click="dialogStep = 1">
-                    Back
+                    Zurück
                 </v-btn>
             </v-stepper-content>
         </v-stepper>
@@ -85,7 +85,6 @@ export default {
             modal: false,
             selectedDate: null,
             selectedTime: null,
-            dateTimeFormatted: "test",
         }
     },
     computed: {
diff --git a/src/components/Reservation.vue b/src/components/Reservation.vue
index 1836d2f..d0a25d8 100644
--- a/src/components/Reservation.vue
+++ b/src/components/Reservation.vue
@@ -1,5 +1,16 @@
 <template>
   <v-dialog v-model="show" max-width="400">
+    <template  v-slot:activator="{ on, attrs }">
+      <v-btn
+        rounded
+        x-medium
+        color="success"
+        v-bind="attrs"
+        v-on="on"
+      >
+        Neue Reservierung
+     </v-btn>
+    </template>
     <v-card>
       <v-card-title class="text-h5 grey lighten-2" primary-title>
         {{ $t("message.reservation.title") }}
@@ -67,7 +78,7 @@ export default {
   components: { DateTimePickerDialog },
   data() {
     return {
-      show: true,
+      show: false,
       loading: false,
       valid: false,
       availableStations: [],
@@ -89,8 +100,9 @@ export default {
           startStationId: this.station,
       }
       this.$store.dispatch("START_RESERVATION", payload).then(
-          () => {
-              this.$router.push("/");
+          (data) => {
+            this.$emit('newReservation', data)
+            this.show = false;
           }
       )
     },
@@ -103,12 +115,5 @@ export default {
       this.fetchStations();
     }
   },
-  watch: {
-    show(current) {
-      if (current === false) {
-        this.$router.push("/");
-      }
-    },
-  },
 };
 </script>
diff --git a/src/components/ReservationButton.vue b/src/components/ReservationButton.vue
index f14792a..130df7f 100644
--- a/src/components/ReservationButton.vue
+++ b/src/components/ReservationButton.vue
@@ -1,7 +1,7 @@
 <template>
   <v-btn
     rounded
-    x-large
+    x-medium
     color="success"
     :to="{name:'reservation'}"
   >
@@ -26,7 +26,7 @@
         return this.$t('message.reservationbutton.reservation');
       },
 
-      ...mapState(['rents'])
+      ...mapState(['reservation'])
     },
   };
 </script>
diff --git a/src/components/ReservationDeleteDialog.vue b/src/components/ReservationDeleteDialog.vue
new file mode 100644
index 0000000..c787404
--- /dev/null
+++ b/src/components/ReservationDeleteDialog.vue
@@ -0,0 +1,78 @@
+<template>
+    <v-dialog
+        v-model="modal"
+        width="500"
+    >
+        <template v-slot:activator="{ on, attrs }">
+        <v-btn
+            color="red"
+            dark
+            v-bind="attrs"
+            v-on="on"
+        >
+            <v-icon color="white">{{mdi.cancel}}</v-icon>
+        </v-btn>
+        </template>
+
+        <v-card>
+            <v-card-title class="text-h5 grey lighten-2">
+                Reservierung Löschen?
+            </v-card-title>
+
+            <v-card-text>
+                Die Reservierung von {{formatDate(reservation.event.start)}} bis {{formatDate(reservation.event.end)}} 
+                wirklich löschen?
+            </v-card-text>
+
+            <v-divider></v-divider>
+
+            <v-card-actions>
+                <v-spacer></v-spacer>
+                <v-btn
+                color="primary"
+                text
+                @click="deleteReservation(reservation.id)"
+                >
+                Löschen
+                </v-btn>
+                <v-btn
+                color="primary"
+                text
+                @click="modal = false"
+                >
+                Abbrechen
+                </v-btn>
+            </v-card-actions>
+        </v-card>
+    </v-dialog>
+</template>
+
+<script>
+import { mdiCancel } from '@mdi/js'
+export default {
+    props: [ 'reservation' ],
+    data() {
+        return {
+            modal: false,
+        mdi: {
+          cancel: mdiCancel
+        }
+        }
+    },
+    methods: {     
+        deleteReservation(reservation_id) {
+        this.$store.dispatch("DELETE_RESERVATION", reservation_id).then(
+            () => {
+            this.$emit('deleted', reservation_id)
+            this.modal = false
+            }
+        )
+        },
+        formatDate(dateString) {
+        if (!dateString) return null
+        const date = new Date(dateString);
+        return date.toLocaleString().slice(0, -3) + ' Uhr';
+        },
+    },
+};
+</script>
\ No newline at end of file
diff --git a/src/components/ReservationList.vue b/src/components/ReservationList.vue
new file mode 100644
index 0000000..475bba9
--- /dev/null
+++ b/src/components/ReservationList.vue
@@ -0,0 +1,110 @@
+<template>
+  <v-dialog v-model="show" max-width="600">
+    <v-card>
+      <v-card-title class="text-h5 grey lighten-2" primary-title>
+        Deine Reservierungen
+      </v-card-title>
+      <v-card-actions>
+        <v-container>
+          <v-row justify="end">
+            <reservation/>
+          </v-row>
+
+          <v-list-item v-for="reservation in reservations" :key="reservation.id">
+            <v-list-item-content>
+              <v-divider class="mx-4"/>
+
+              <v-container>
+                <v-row>
+                  <v-col cols="10">
+                    <v-container>
+                      <v-row>
+                        <v-col>Start: {{formatDate(reservation.event.start)}}</v-col>
+                        <v-col>Ort: {{reservation.start_location.station_name}}</v-col>
+                      </v-row>
+                      <v-row>
+                        <v-col>Ende: {{formatDate(reservation.event.end)}}</v-col>
+                        <v-col>Fahrrad: {{reservation.bike}}</v-col>
+                      </v-row>
+                    </v-container>
+                  </v-col>
+                  <v-col cols="1" align-self=center>
+                    <reservation-delete-dialog
+                      :reservation="reservation"
+                      @deleted="deleteFromList($event)"/>
+                  </v-col>
+                </v-row>
+              </v-container>
+            </v-list-item-content>
+          </v-list-item>
+        </v-container>
+      </v-card-actions>
+    </v-card>
+  </v-dialog>
+</template>
+
+<script>
+import Reservation from "./Reservation.vue";
+import ReservationDeleteDialog from "./ReservationDeleteDialog.vue";
+export default {
+  components: { Reservation, ReservationDeleteDialog },
+  data() {
+    return {
+      show: true,
+      deldialog: false,
+      reservations: [],
+    };
+  },
+  methods: {
+    getReservations() {
+      this.$store.dispatch("GET_RESERVATIONS").then(
+          (data) => {
+              this.reservations = this.filterReservations(data)
+          }
+      )
+    },
+    formatDate(dateString) {
+      if (!dateString) return null
+      const date = new Date(dateString)
+      return date.toLocaleString().slice(0, -3) + ' Uhr'
+    },
+    deleteFromList(reservation_id) {
+      let index = null
+      for (let i = 0; i < this.reservations; i++) {
+        if(this.reservations[i].id == reservation_id) {
+          index = i
+          break
+        }
+      }
+      if (index) this.reservations.splice(index,1)
+    },
+    filterReservations(reservationList) {
+      const today = Date.now()
+      let relevantReservation = []
+      for (let i = 0; i < reservationList.length; i++) {
+        let elementTime = (new Date (reservationList[i].event.end)).getTime()
+        if (elementTime > today) {
+          relevantReservation.push(reservationList[i])
+        }
+      }
+      return relevantReservation.sort((a,b) => this.compare(a,b))
+    },
+    compare(a, b) {
+      const aTime = (new Date (a.event.start)).getTime()
+      const bTime = (new Date (b.event.start)).getTime()
+      return aTime - bTime
+    },
+
+  },
+  mounted() {
+    this.getReservations();
+  },
+  watch: {
+    show(current) {
+        if (current === false) {
+          this.$router.push('/')
+        }
+      },
+  }
+};
+</script>
diff --git a/src/router/index.js b/src/router/index.js
index f63f3e7..56965b9 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -12,6 +12,7 @@ import Support from '../components/Support';
 import VehicleDetail from '../components/VehicleDetail';
 import StationDetail from '../components/StationDetail';
 import Reservation from '../components/Reservation';
+import ReservationList from '../components/ReservationList';
 
 import CustomLogin from '../components/CustomLogin';
 
@@ -41,6 +42,7 @@ const router = new VueRouter({
     { path: '/s/:id', name: 'station', component: StationDetail, props: true },
     { path: '/support', name: 'support', component: Support },
     { path: '/reservation', name: 'reservation', component: Reservation },
+    { path: '/reservationview', name: 'reservationview', component: ReservationList },
     { path: '*', redirect: '/' }
   ],
 });
diff --git a/src/store/index.js b/src/store/index.js
index 1c65b6a..4f69afd 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -179,6 +179,22 @@ export default new Vuex.Store({
       } catch (err) {
         throw unpackErrorMessage(err);
       }
+    },
+    GET_RESERVATIONS: async function({ state }) {
+      try {
+        let response = await axiosWithAuth.call(this, state).get('/reservation');
+        return response.data;
+      } catch (err) {
+        throw unpackErrorMessage(err);
+      }
+    },
+    DELETE_RESERVATION: async function({ state }, reservationId) {
+      try {
+        let response = await axiosWithAuth.call(this, state).delete(`/reservation/${reservationId}`);
+        return response.data;
+      } catch (err) {
+        throw unpackErrorMessage(err);
+      }
     }
   },
   mutations: {

From 0905be95f10985ff2c394f90746f3316df651ce2 Mon Sep 17 00:00:00 2001
From: Fabian Seidlmeier <fabian.seidlmeier@iteratec.com>
Date: Wed, 15 Sep 2021 13:18:59 +0200
Subject: [PATCH 42/61] Added methods for getting allowed dates

---
 src/App.vue                                | 11 ++---
 src/components/DateTimePickerDialog.vue    |  2 +
 src/components/Reservation.vue             | 55 ++++++++++++++++------
 src/components/ReservationButton.vue       | 16 +++----
 src/components/ReservationDeleteDialog.vue |  5 +-
 src/components/ReservationList.vue         | 41 +++++++++-------
 src/store/index.js                         | 10 +++-
 7 files changed, 86 insertions(+), 54 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 785ed80..a33ef2a 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -53,13 +53,7 @@
         </v-btn>
         <v-row class="button-row">
           <RentButton v-if="user && this.fetchVehicleTypesForSpontaneousRent().length > 0" class="rent-button" />
-          <v-btn
-            rounded
-            x-large
-            color="success"
-            :to="{name:'reservationview'}"
-            v-if="user && this.fetchVehicleTypesForReservation().length > 0"
-          >Meine Reservierungen</v-btn>
+          <ReservationButton v-if="user && this.fetchVehicleTypesForReservation().length > 0" class="rent-button"/>
           </v-row>
       </div>
       <AppError />
@@ -73,13 +67,14 @@
   import About from './components/About';
   import GbfsView from './components/GbfsView';
   import RentButton from './components/RentButton';
+  import ReservationButton from './components/ReservationButton';
   import AppError from './components/AppError';
 
   const blank = (v) => !(typeof v !== 'undefined' && v !== '');
 
   export default {
     name: 'App',
-    components: {About, GbfsView, RentButton, AppError},
+    components: {About, GbfsView, RentButton, AppError, ReservationButton},
     data: function() {
       return {
         name: this.$appConfig.NAME,
diff --git a/src/components/DateTimePickerDialog.vue b/src/components/DateTimePickerDialog.vue
index 10c4751..9285ec1 100644
--- a/src/components/DateTimePickerDialog.vue
+++ b/src/components/DateTimePickerDialog.vue
@@ -30,6 +30,8 @@
                     <v-row justify="center">
                         <v-date-picker
                             v-model="date"
+                            :min="minDate"
+                            :allowed-dates="[Date.now()]"
                         ></v-date-picker>
                     </v-row>
                 </template>
diff --git a/src/components/Reservation.vue b/src/components/Reservation.vue
index 2d0cd43..ea0e8b2 100644
--- a/src/components/Reservation.vue
+++ b/src/components/Reservation.vue
@@ -18,10 +18,26 @@
       <v-card-actions>
         <v-form v-model="valid" ref="reservationForm">
           <v-container class="pb-0">
+            <v-row class="pt-5">
+              <v-col cols="12" md="12" class="py-0 pr-0">
+                <v-select
+                  :items="availableStations"
+                  :label="$t('message.reservation.station')"
+                  item-text="name"
+                  item-value="station_id"
+                  v-model="station"
+                  required
+                ></v-select>
+              </v-col>
+              <v-col cols="1" md="1" class="py-0 text-right">
+              </v-col>
+            </v-row>
+
             <v-row class="pt-5">
               <v-col cols="12" md="12" class="py-0 pr-0">
                 Start Zeit
                 <date-time-picker-dialog
+                  :minDate="currentDate"
                   :placeholder="startPlaceholder"
                   @newDateTime="startDateTime=$event"
                 ></date-time-picker-dialog>
@@ -32,6 +48,7 @@
               <v-col cols="12" md="12" class="py-0 pr-0">
                 End Zeit
                 <date-time-picker-dialog
+                  :minDate="startDateTime"
                   :placeholder="endPlaceholder"
                   @newDateTime="endDateTime=$event"
                 ></date-time-picker-dialog>
@@ -51,20 +68,6 @@
               <v-col cols="1" md="1" class="py-0 text-right">
               </v-col>
             </v-row>
-            <v-row class="pt-5">
-              <v-col cols="12" md="12" class="py-0 pr-0">
-                <v-select
-                  :items="availableStations"
-                  :label="$t('message.reservation.station')"
-                  item-text="name"
-                  item-value="station_id"
-                  v-model="station"
-                  required
-                ></v-select>
-              </v-col>
-              <v-col cols="1" md="1" class="py-0 text-right">
-              </v-col>
-            </v-row>
             <v-row class="pt-5">
               <v-col cols="1" md="1" class="py-0 text-right">
                 <v-btn
@@ -95,6 +98,7 @@ export default {
       show: false,
       loading: false,
       valid: false,
+      currentDate: new Date().toISOString().slice(0,10),
       availableStations: [],
       vehicleTypes: [],
       station: null,
@@ -103,6 +107,7 @@ export default {
       endPlaceholder: "Endzeit",
       startDateTime: "",
       endDateTime: "",
+      allowedDates: [],
     };
   },
   computed: {
@@ -118,7 +123,7 @@ export default {
       }
       this.$store.dispatch("START_RESERVATION", payload).then(
           (data) => {
-            this.$emit('newReservation', data)
+            this.$emit('newReservation', data);
             this.show = false;
           }
       )
@@ -132,6 +137,16 @@ export default {
         this.vehicleType = this.vehicleTypes[0].vehicle_type_id;
       }
     },
+    fetchAllowedDates(data) {
+      const first = Date.now()
+      this.$store.dispatch("GET_ALLOWED_RESERVATION_DATES", data).then(
+        (data) => {
+          console.log(data)
+          const second = Date.now()
+          console.log(second-first)
+        }
+      )
+    }
   },
   mounted() {
     if (this.gbfs !== null) {
@@ -139,5 +154,15 @@ export default {
       this.fetchVehicleTypes();
     }
   },
+  watch: {
+    station(current) {
+      if (current !== null) {
+        let payload = {
+          station: current
+        }
+        this.fetchAllowedDates(payload);
+      }
+    },
+  },
 };
 </script>
diff --git a/src/components/ReservationButton.vue b/src/components/ReservationButton.vue
index 130df7f..3414ccf 100644
--- a/src/components/ReservationButton.vue
+++ b/src/components/ReservationButton.vue
@@ -1,32 +1,30 @@
 <template>
   <v-btn
     rounded
-    x-medium
+    x-large
     color="success"
-    :to="{name:'reservation'}"
+    :to="{name:'reservationview'}"
   >
-    <v-icon>{{ mdi.bike }}</v-icon><span class="pl-2">{{ buttonText }}</span>
+    <v-icon>{{ mdi.calendar }}</v-icon><span class="pl-2">{{ buttonText }}</span>
   </v-btn>
 </template>
 
 <script>
-  import { mapState } from 'vuex';
-  import { mdiBike } from '@mdi/js'
+  import { mdiCalendar } from '@mdi/js'
 
   export default {
     data() {
       return {
         mdi: {
-          bike: mdiBike
+          calendar: mdiCalendar
         }
       }
     },
     computed: {
       buttonText() {
-        return this.$t('message.reservationbutton.reservation');
+        // return 'this.$t('message.reservationbutton.reservation');'
+        return 'Meine Reservierungen!'
       },
-
-      ...mapState(['reservation'])
     },
   };
 </script>
diff --git a/src/components/ReservationDeleteDialog.vue b/src/components/ReservationDeleteDialog.vue
index c787404..6234a4b 100644
--- a/src/components/ReservationDeleteDialog.vue
+++ b/src/components/ReservationDeleteDialog.vue
@@ -29,14 +29,13 @@
             <v-card-actions>
                 <v-spacer></v-spacer>
                 <v-btn
-                color="primary"
-                text
+                color="red"
+                dark
                 @click="deleteReservation(reservation.id)"
                 >
                 Löschen
                 </v-btn>
                 <v-btn
-                color="primary"
                 text
                 @click="modal = false"
                 >
diff --git a/src/components/ReservationList.vue b/src/components/ReservationList.vue
index 475bba9..b757f52 100644
--- a/src/components/ReservationList.vue
+++ b/src/components/ReservationList.vue
@@ -7,13 +7,12 @@
       <v-card-actions>
         <v-container>
           <v-row justify="end">
-            <reservation/>
+            <reservation
+            @newReservation="addReservation($event)"/>
           </v-row>
-
           <v-list-item v-for="reservation in reservations" :key="reservation.id">
             <v-list-item-content>
               <v-divider class="mx-4"/>
-
               <v-container>
                 <v-row>
                   <v-col cols="10">
@@ -24,14 +23,17 @@
                       </v-row>
                       <v-row>
                         <v-col>Ende: {{formatDate(reservation.event.end)}}</v-col>
-                        <v-col>Fahrrad: {{reservation.bike}}</v-col>
+                        <v-col v-if="reservation.bike">
+                          Fahrradnummer: {{reservation.bike.bike_number}}
+                          <RentLock :rent="createMockUpRent(reservation)" />
+                          </v-col>
                       </v-row>
                     </v-container>
                   </v-col>
                   <v-col cols="1" align-self=center>
                     <reservation-delete-dialog
                       :reservation="reservation"
-                      @deleted="deleteFromList($event)"/>
+                      @deleted="getReservations()"/>
                   </v-col>
                 </v-row>
               </v-container>
@@ -46,8 +48,10 @@
 <script>
 import Reservation from "./Reservation.vue";
 import ReservationDeleteDialog from "./ReservationDeleteDialog.vue";
+import RentLock from "./RentLock.vue";
+
 export default {
-  components: { Reservation, ReservationDeleteDialog },
+  components: { Reservation, ReservationDeleteDialog, RentLock },
   data() {
     return {
       show: true,
@@ -63,21 +67,15 @@ export default {
           }
       )
     },
+    addReservation(reservation) {
+      this.reservations.push(reservation)
+      this.reservations.sort((a,b) => this.compareReservations(a,b))
+    },
     formatDate(dateString) {
       if (!dateString) return null
       const date = new Date(dateString)
       return date.toLocaleString().slice(0, -3) + ' Uhr'
     },
-    deleteFromList(reservation_id) {
-      let index = null
-      for (let i = 0; i < this.reservations; i++) {
-        if(this.reservations[i].id == reservation_id) {
-          index = i
-          break
-        }
-      }
-      if (index) this.reservations.splice(index,1)
-    },
     filterReservations(reservationList) {
       const today = Date.now()
       let relevantReservation = []
@@ -87,14 +85,21 @@ export default {
           relevantReservation.push(reservationList[i])
         }
       }
-      return relevantReservation.sort((a,b) => this.compare(a,b))
+      return relevantReservation.sort((a,b) => this.compareReservations(a,b))
     },
-    compare(a, b) {
+    compareReservations(a, b) {
       const aTime = (new Date (a.event.start)).getTime()
       const bTime = (new Date (b.event.start)).getTime()
       return aTime - bTime
     },
 
+    createMockUpRent(reservation) {
+      return {
+        id: reservation.rent,
+        bike: reservation.bike
+      }
+    }
+
   },
   mounted() {
     this.getReservations();
diff --git a/src/store/index.js b/src/store/index.js
index 7f51c6e..fc29b35 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -195,7 +195,15 @@ export default new Vuex.Store({
       } catch (err) {
         throw unpackErrorMessage(err);
       }
-    }
+    },
+    GET_ALLOWED_RESERVATION_DATES: async function({ state }, payload) {
+      try {
+        let response = await axiosWithAuth.call(this, state).post(`/reservationdates/alloweddates`, payload);
+        return response.data;
+      } catch (err) {
+        throw unpackErrorMessage(err);
+      }
+    },
   },
   mutations: {
     CLEAR_USER: (state) => {

From 6251d86a31ebf803ac72773e3a7b7f6b51922603 Mon Sep 17 00:00:00 2001
From: Fabian Seidlmeier <fabian.seidlmeier@iteratec.com>
Date: Wed, 15 Sep 2021 17:01:53 +0200
Subject: [PATCH 43/61] Change getAllowedDates

---
 src/components/DateTimePickerDialog.vue | 43 +++++++++++++++++++++++--
 src/components/Reservation.vue          | 21 +-----------
 src/store/index.js                      | 12 +++++--
 3 files changed, 52 insertions(+), 24 deletions(-)

diff --git a/src/components/DateTimePickerDialog.vue b/src/components/DateTimePickerDialog.vue
index 9285ec1..26b760c 100644
--- a/src/components/DateTimePickerDialog.vue
+++ b/src/components/DateTimePickerDialog.vue
@@ -31,14 +31,15 @@
                         <v-date-picker
                             v-model="date"
                             :min="minDate"
-                            :allowed-dates="[Date.now()]"
+                            :picker-date.sync="currentMonthYear"
+                            :allowed-dates="allowedDates"
                         ></v-date-picker>
                     </v-row>
                 </template>
 
                 <v-btn
                     color="primary"
-                    @click="dialogStep = 2"
+                    @click="dialogStep = 2; getAllowedTimesForDay()"
                 >
                     Weiter
                 </v-btn>
@@ -57,6 +58,9 @@
                         <v-time-picker
                             v-model="time"
                             format="24hr"
+                            :allowed-minutes="allowedMinutes"
+                            :min="minTime"
+                            :max="maxTime"
                         ></v-time-picker>
                     </v-row>
                 </template>
@@ -87,6 +91,10 @@ export default {
             modal: false,
             selectedDate: null,
             selectedTime: null,
+            currentMonthYear: null,
+            allowedDays: [],
+            minTime: "00:00",
+            maxTime: "20:40",
         }
     },
     computed: {
@@ -110,6 +118,37 @@ export default {
             const [year, month, day] = date.split('-')
             return `${day}.${month}.${year}, ${hour}:${minute} Uhr`
         },
+
+        getAllowedDatesForMonth(year, month) {
+            const params = { year: year, month: month}
+            this.$store.dispatch("GET_ALLOWED_RESERVATION_DATES", params).then(
+                (data) => {
+                    this.allowedDays = data.allowedDays;
+                }
+            )
+        },
+
+        getAllowedTimesForDay() {
+            this.$store.dispatch("GET_ALLOWED_RESERVATION_TIMES", this.date).then(
+                (data) => {
+                    this.minTime = data.minTime;
+                    this.maxTime = data.maxTime;
+                }
+            )
+        },
+
+        allowedDates(val) {
+            return this.allowedDays.includes(val)
+        },
+
+        allowedMinutes: v => v % 5 === 0,
+
     },
+    watch: {
+        currentMonthYear(val) {
+            const yearMonth = val.split('-')
+            this.getAllowedDatesForMonth(yearMonth[0], yearMonth[1])
+        }
+    }
 };
 </script>
\ No newline at end of file
diff --git a/src/components/Reservation.vue b/src/components/Reservation.vue
index ea0e8b2..a50ccbf 100644
--- a/src/components/Reservation.vue
+++ b/src/components/Reservation.vue
@@ -137,16 +137,7 @@ export default {
         this.vehicleType = this.vehicleTypes[0].vehicle_type_id;
       }
     },
-    fetchAllowedDates(data) {
-      const first = Date.now()
-      this.$store.dispatch("GET_ALLOWED_RESERVATION_DATES", data).then(
-        (data) => {
-          console.log(data)
-          const second = Date.now()
-          console.log(second-first)
-        }
-      )
-    }
+    
   },
   mounted() {
     if (this.gbfs !== null) {
@@ -154,15 +145,5 @@ export default {
       this.fetchVehicleTypes();
     }
   },
-  watch: {
-    station(current) {
-      if (current !== null) {
-        let payload = {
-          station: current
-        }
-        this.fetchAllowedDates(payload);
-      }
-    },
-  },
 };
 </script>
diff --git a/src/store/index.js b/src/store/index.js
index fc29b35..75506ad 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -196,9 +196,17 @@ export default new Vuex.Store({
         throw unpackErrorMessage(err);
       }
     },
-    GET_ALLOWED_RESERVATION_DATES: async function({ state }, payload) {
+    GET_ALLOWED_RESERVATION_DATES: async function({ state }, requestParams) {
       try {
-        let response = await axiosWithAuth.call(this, state).post(`/reservationdates/alloweddates`, payload);
+        let response = await axiosWithAuth.call(this, state).get(`/reservationdates/alloweddates`,{ params: requestParams});
+        return response.data;
+      } catch (err) {
+        throw unpackErrorMessage(err);
+      }
+    },
+    GET_ALLOWED_RESERVATION_TIMES: async function({ state }, selectedDate) {
+      try {
+        let response = await axiosWithAuth.call(this, state).get(`/reservationdates/allowedtimes`,{ params: { date: selectedDate }});
         return response.data;
       } catch (err) {
         throw unpackErrorMessage(err);

From 3f56ad6e6ad4dacc38d1276d4b1b78c00f73fd71 Mon Sep 17 00:00:00 2001
From: Fabian Seidlmeier <fabian.seidlmeier@iteratec.com>
Date: Wed, 22 Sep 2021 10:30:44 +0200
Subject: [PATCH 44/61] Added time limitation for new reservations

---
 src/components/DateTimePickerDialog.vue | 65 ++++++++++++++++++++++---
 src/components/Reservation.vue          | 10 ++++
 src/components/ReservationButton.vue    |  2 +-
 src/components/ReservationList.vue      |  4 +-
 4 files changed, 72 insertions(+), 9 deletions(-)

diff --git a/src/components/DateTimePickerDialog.vue b/src/components/DateTimePickerDialog.vue
index 26b760c..95fca4a 100644
--- a/src/components/DateTimePickerDialog.vue
+++ b/src/components/DateTimePickerDialog.vue
@@ -58,9 +58,11 @@
                         <v-time-picker
                             v-model="time"
                             format="24hr"
+                            :allowed-hours="allowedHours"
                             :allowed-minutes="allowedMinutes"
                             :min="minTime"
                             :max="maxTime"
+                            @click:hour="updateHour"
                         ></v-time-picker>
                     </v-row>
                 </template>
@@ -73,7 +75,7 @@
                 </v-btn>
                 <v-btn 
                     text
-                    @click="dialogStep = 1">
+                    @click="dialogStep = 1; time=null">
                     Zurück
                 </v-btn>
             </v-stepper-content>
@@ -91,10 +93,13 @@ export default {
             modal: false,
             selectedDate: null,
             selectedTime: null,
+            selectedHour: null,
             currentMonthYear: null,
             allowedDays: [],
             minTime: "00:00",
-            maxTime: "20:40",
+            maxTime: "23:59",
+            rangeStart: "00:01",
+            rangeEnd: "00:01",
         }
     },
     computed: {
@@ -106,11 +111,16 @@ export default {
         closeDialog() {
             this.selectedDate = this.date
             this.selectedTime = this.time
-            this.modal = false
             this.$emit('newDateTime', `${this.selectedDate}T${this.selectedTime}`)
+            this.modal = false
             this.dialogStep = 1
         },
 
+        resetForm() {
+            this.selectedDate = null
+            this.selectedTime = null
+        },
+
         formatDateTime (date, time) {
             if (!date || !time) return null
 
@@ -133,22 +143,65 @@ export default {
                 (data) => {
                     this.minTime = data.minTime;
                     this.maxTime = data.maxTime;
+                    if ('forbiddenRange' in data) {
+                        this.rangeStart = data.forbiddenRange.start
+                        this.rangeEnd = data.forbiddenRange.end
+                    }
                 }
             )
         },
 
+        updateHour(value) {
+            if (value < 10) {
+                this.selectedHour = `0${value}`
+            } else {
+                this.selectedHour = value
+            }
+        },
+
         allowedDates(val) {
             return this.allowedDays.includes(val)
         },
 
-        allowedMinutes: v => v % 5 === 0,
+        allowedHours(value) {
+            if (value < 10) {
+                value = `0${value}`
+            }
+            let timeForStart = `${value}:00:00`
+            let timeForEnd = `${value}:59:00`
+            if (timeForStart >= this.rangeStart && timeForEnd <= this.rangeEnd) {
+                return false
+            }
+            return true
+        },
+
+        allowedMinutes(val) {
+            if (val % 5 != 0) {
+                return false
+            }
+            let timeToCheck = `${this.selectedHour}:`
+            if (val < 10) {
+                timeToCheck = timeToCheck.concat(`0${val}:00`)
+            } else {
+                timeToCheck = timeToCheck.concat(`${val}:00`)
+            }
+
+            if (timeToCheck >= this.rangeStart && timeToCheck <= this.rangeEnd ) {
+                return false
+            } else {
+                return true
+            }
+        }
 
     },
     watch: {
         currentMonthYear(val) {
             const yearMonth = val.split('-')
             this.getAllowedDatesForMonth(yearMonth[0], yearMonth[1])
-        }
-    }
+        },
+    },
+    // mounted() {
+    //     this.bus.$on('resetForm', this.resetForm)
+    // }
 };
 </script>
\ No newline at end of file
diff --git a/src/components/Reservation.vue b/src/components/Reservation.vue
index a50ccbf..167b8de 100644
--- a/src/components/Reservation.vue
+++ b/src/components/Reservation.vue
@@ -98,6 +98,7 @@ export default {
       show: false,
       loading: false,
       valid: false,
+      //bus: new Vue(),
       currentDate: new Date().toISOString().slice(0,10),
       availableStations: [],
       vehicleTypes: [],
@@ -145,5 +146,14 @@ export default {
       this.fetchVehicleTypes();
     }
   },
+  watch: {
+    show (val) {
+      if(val == false) {
+        this.station = null
+        this.vehicleType = null
+        //this.bus.$emit('resetForm')
+      }
+    }
+  }
 };
 </script>
diff --git a/src/components/ReservationButton.vue b/src/components/ReservationButton.vue
index 3414ccf..0c3199a 100644
--- a/src/components/ReservationButton.vue
+++ b/src/components/ReservationButton.vue
@@ -23,7 +23,7 @@
     computed: {
       buttonText() {
         // return 'this.$t('message.reservationbutton.reservation');'
-        return 'Meine Reservierungen!'
+        return 'Meine Reservierungen'
       },
     },
   };
diff --git a/src/components/ReservationList.vue b/src/components/ReservationList.vue
index b757f52..434d412 100644
--- a/src/components/ReservationList.vue
+++ b/src/components/ReservationList.vue
@@ -18,11 +18,11 @@
                   <v-col cols="10">
                     <v-container>
                       <v-row>
-                        <v-col>Start: {{formatDate(reservation.event.start)}}</v-col>
+                        <v-col cols="7">Start: {{formatDate(reservation.event.start)}}</v-col>
                         <v-col>Ort: {{reservation.start_location.station_name}}</v-col>
                       </v-row>
                       <v-row>
-                        <v-col>Ende: {{formatDate(reservation.event.end)}}</v-col>
+                        <v-col cols="7">Ende: {{formatDate(reservation.event.end)}}</v-col>
                         <v-col v-if="reservation.bike">
                           Fahrradnummer: {{reservation.bike.bike_number}}
                           <RentLock :rent="createMockUpRent(reservation)" />

From 3059c18effc4e6f390d8353637a11b8fad2a66ea Mon Sep 17 00:00:00 2001
From: Jonas Laacke <jonas.laacke@iteratec.com>
Date: Fri, 24 Sep 2021 17:42:14 +0200
Subject: [PATCH 45/61] added vehicleType and station to allowedReservationDate
 request

---
 src/components/DateTimePickerDialog.vue | 14 +++++++-------
 src/components/Reservation.vue          |  6 +++++-
 2 files changed, 12 insertions(+), 8 deletions(-)

diff --git a/src/components/DateTimePickerDialog.vue b/src/components/DateTimePickerDialog.vue
index 95fca4a..42d7f2d 100644
--- a/src/components/DateTimePickerDialog.vue
+++ b/src/components/DateTimePickerDialog.vue
@@ -25,7 +25,7 @@
                 Datum auswählen
             </v-stepper-step>
             <v-stepper-content step="1">
-                
+
                 <template>
                     <v-row justify="center">
                         <v-date-picker
@@ -43,7 +43,7 @@
                 >
                     Weiter
                 </v-btn>
-                
+
             </v-stepper-content>
 
             <v-stepper-step
@@ -52,7 +52,7 @@
                 Zeit auswählen
             </v-stepper-step>
             <v-stepper-content step="2">
-                
+
                 <template>
                     <v-row justify="center">
                         <v-time-picker
@@ -73,7 +73,7 @@
                 >
                     Weiter
                 </v-btn>
-                <v-btn 
+                <v-btn
                     text
                     @click="dialogStep = 1; time=null">
                     Zurück
@@ -84,7 +84,7 @@
 </template>
 <script>
 export default {
-    props: [ 'placeholder', 'minDate' ],
+    props: [ 'placeholder', 'minDate', 'vehicleTypeId', 'stationId' ],
     data() {
         return {
             dialogStep: 1,
@@ -130,7 +130,7 @@ export default {
         },
 
         getAllowedDatesForMonth(year, month) {
-            const params = { year: year, month: month}
+            const params = { year: year, month: month, vehicleTypeId: this.vehicleTypeId, stationId: this.stationId}
             this.$store.dispatch("GET_ALLOWED_RESERVATION_DATES", params).then(
                 (data) => {
                     this.allowedDays = data.allowedDays;
@@ -204,4 +204,4 @@ export default {
     //     this.bus.$on('resetForm', this.resetForm)
     // }
 };
-</script>
\ No newline at end of file
+</script>
diff --git a/src/components/Reservation.vue b/src/components/Reservation.vue
index 167b8de..f8afd3e 100644
--- a/src/components/Reservation.vue
+++ b/src/components/Reservation.vue
@@ -39,6 +39,8 @@
                 <date-time-picker-dialog
                   :minDate="currentDate"
                   :placeholder="startPlaceholder"
+                  :vehicleTypeId="this.vehicleType"
+                  :stationId="this.station"
                   @newDateTime="startDateTime=$event"
                 ></date-time-picker-dialog>
               </v-col>
@@ -50,6 +52,8 @@
                 <date-time-picker-dialog
                   :minDate="startDateTime"
                   :placeholder="endPlaceholder"
+                  :vehicleTypeId="this.vehicleType"
+                  :stationId="this.station"
                   @newDateTime="endDateTime=$event"
                 ></date-time-picker-dialog>
               </v-col>
@@ -138,7 +142,7 @@ export default {
         this.vehicleType = this.vehicleTypes[0].vehicle_type_id;
       }
     },
-    
+
   },
   mounted() {
     if (this.gbfs !== null) {

From 91a4619219b6ecf6f3bfdd94e8d75f06e2e4769e Mon Sep 17 00:00:00 2001
From: Jonas Laacke <jonas.laacke@iteratec.com>
Date: Fri, 24 Sep 2021 17:49:01 +0200
Subject: [PATCH 46/61] added vehicleType and station to allowedReservationTime
 request

---
 src/components/DateTimePickerDialog.vue | 3 ++-
 src/store/index.js                      | 4 ++--
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/components/DateTimePickerDialog.vue b/src/components/DateTimePickerDialog.vue
index 42d7f2d..a78b9ca 100644
--- a/src/components/DateTimePickerDialog.vue
+++ b/src/components/DateTimePickerDialog.vue
@@ -139,7 +139,8 @@ export default {
         },
 
         getAllowedTimesForDay() {
-            this.$store.dispatch("GET_ALLOWED_RESERVATION_TIMES", this.date).then(
+            const params = { date: this.date, vehicleTypeId: this.vehicleTypeId, stationId: this.stationId}
+            this.$store.dispatch("GET_ALLOWED_RESERVATION_TIMES", params).then(
                 (data) => {
                     this.minTime = data.minTime;
                     this.maxTime = data.maxTime;
diff --git a/src/store/index.js b/src/store/index.js
index 75506ad..d9d7600 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -204,9 +204,9 @@ export default new Vuex.Store({
         throw unpackErrorMessage(err);
       }
     },
-    GET_ALLOWED_RESERVATION_TIMES: async function({ state }, selectedDate) {
+    GET_ALLOWED_RESERVATION_TIMES: async function({ state }, requestParams) {
       try {
-        let response = await axiosWithAuth.call(this, state).get(`/reservationdates/allowedtimes`,{ params: { date: selectedDate }});
+        let response = await axiosWithAuth.call(this, state).get(`/reservationdates/allowedtimes`,{ params: requestParams});
         return response.data;
       } catch (err) {
         throw unpackErrorMessage(err);

From fe56053ce7d76a65859959c56d041f7a79ff6e2d Mon Sep 17 00:00:00 2001
From: Fabian Seidlmeier <fabian.seidlmeier@iteratec.com>
Date: Mon, 27 Sep 2021 09:25:40 +0200
Subject: [PATCH 47/61] ReservationDialog resets upon closing it

---
 src/components/DateTimePickerDialog.vue |  3 ---
 src/components/Reservation.vue          | 10 +++++++---
 2 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/src/components/DateTimePickerDialog.vue b/src/components/DateTimePickerDialog.vue
index 95fca4a..1a57db7 100644
--- a/src/components/DateTimePickerDialog.vue
+++ b/src/components/DateTimePickerDialog.vue
@@ -200,8 +200,5 @@ export default {
             this.getAllowedDatesForMonth(yearMonth[0], yearMonth[1])
         },
     },
-    // mounted() {
-    //     this.bus.$on('resetForm', this.resetForm)
-    // }
 };
 </script>
\ No newline at end of file
diff --git a/src/components/Reservation.vue b/src/components/Reservation.vue
index 167b8de..425a1ea 100644
--- a/src/components/Reservation.vue
+++ b/src/components/Reservation.vue
@@ -40,6 +40,7 @@
                   :minDate="currentDate"
                   :placeholder="startPlaceholder"
                   @newDateTime="startDateTime=$event"
+                  ref="startDateTimePicker"
                 ></date-time-picker-dialog>
               </v-col>
               <v-col cols="1" md="1" class="py-0 text-right"> </v-col>
@@ -51,6 +52,7 @@
                   :minDate="startDateTime"
                   :placeholder="endPlaceholder"
                   @newDateTime="endDateTime=$event"
+                  ref="endDateTimePicker"
                 ></date-time-picker-dialog>
               </v-col>
             </v-row>
@@ -92,13 +94,14 @@
 import { mapState } from 'vuex';
 import DateTimePickerDialog from "./DateTimePickerDialog.vue";
 export default {
-  components: { DateTimePickerDialog },
+  components: { 
+    DateTimePickerDialog,
+  },
   data() {
     return {
       show: false,
       loading: false,
       valid: false,
-      //bus: new Vue(),
       currentDate: new Date().toISOString().slice(0,10),
       availableStations: [],
       vehicleTypes: [],
@@ -151,7 +154,8 @@ export default {
       if(val == false) {
         this.station = null
         this.vehicleType = null
-        //this.bus.$emit('resetForm')
+        this.$refs.startDateTimePicker.resetForm()
+        this.$refs.endDateTimePicker.resetForm()
       }
     }
   }

From b047202592ab8efd73a6b036e7d8788853aa0f60 Mon Sep 17 00:00:00 2001
From: Fabian Seidlmeier <fabian.seidlmeier@iteratec.com>
Date: Tue, 28 Sep 2021 13:24:33 +0200
Subject: [PATCH 48/61] Reservationform validation

---
 src/components/DateTimePickerDialog.vue | 164 +++++++++++++-----------
 src/components/Reservation.vue          |  18 ++-
 2 files changed, 106 insertions(+), 76 deletions(-)

diff --git a/src/components/DateTimePickerDialog.vue b/src/components/DateTimePickerDialog.vue
index 1a57db7..a5cc401 100644
--- a/src/components/DateTimePickerDialog.vue
+++ b/src/components/DateTimePickerDialog.vue
@@ -1,92 +1,102 @@
 <template>
+<v-form v-model="valid">
     <v-dialog
         ref="dialog"
         v-model="modal"
         :return-value.sync="date"
         width="400px"
-      >
-        <template v-slot:activator="{ on, attrs }">
-          <v-text-field
-            v-model="computedDateTimeFormatted"
-            :placeholder="placeholder"
-            prepend-icon="mdi-calendar"
-            readonly
-            v-bind="attrs"
-            v-on="on"
-          ></v-text-field>
-        </template>
-        <v-stepper
-            v-model="dialogStep"
-            vertical
-        >
-            <v-stepper-step
-                :complete="dialogStep > 1"
-                step="1">
-                Datum auswählen
-            </v-stepper-step>
-            <v-stepper-content step="1">
-                
-                <template>
-                    <v-row justify="center">
-                        <v-date-picker
-                            v-model="date"
-                            :min="minDate"
-                            :picker-date.sync="currentMonthYear"
-                            :allowed-dates="allowedDates"
-                        ></v-date-picker>
-                    </v-row>
-                </template>
+    >
+        
+            <template v-slot:activator="{ on, attrs }">
+            <v-text-field
+                v-model="computedDateTimeFormatted"
+                :placeholder="placeholder"
+                prepend-icon="mdi-calendar"
+                readonly
+                v-bind="attrs"
+                v-on="on"
+                :rules="[v => !!v || 'Datum und Zeit notwendig!']"
+                required
+            ></v-text-field>
+            </template>
+            
+            <v-stepper
+                v-model="dialogStep"
+                vertical
+            >
+                <v-stepper-step
+                    :complete="dialogStep > 1"
+                    step="1">
+                    Datum auswählen
+                </v-stepper-step>
+                <v-stepper-content step="1">
+                    
+                    <template>
+                        <v-row justify="center">
+                            <v-date-picker
+                                v-model="date"
+                                :min="minDate"
+                                :picker-date.sync="currentMonthYear"
+                                :allowed-dates="allowedDates"
+                            ></v-date-picker>
+                        </v-row>
+                    </template>
 
-                <v-btn
-                    color="primary"
-                    @click="dialogStep = 2; getAllowedTimesForDay()"
-                >
-                    Weiter
-                </v-btn>
-                
-            </v-stepper-content>
+                    <v-btn
+                        color="primary"
+                        @click="dialogStep = 2; getAllowedTimesForDay()"
+                    >
+                        Weiter
+                    </v-btn>
+                    
+                </v-stepper-content>
 
-            <v-stepper-step
-                :complete="dialogStep > 2"
-                step="2">
-                Zeit auswählen
-            </v-stepper-step>
-            <v-stepper-content step="2">
-                
-                <template>
-                    <v-row justify="center">
-                        <v-time-picker
-                            v-model="time"
-                            format="24hr"
-                            :allowed-hours="allowedHours"
-                            :allowed-minutes="allowedMinutes"
-                            :min="minTime"
-                            :max="maxTime"
-                            @click:hour="updateHour"
-                        ></v-time-picker>
-                    </v-row>
-                </template>
+                <v-stepper-step
+                    :complete="dialogStep > 2"
+                    step="2">
+                    Zeit auswählen
+                </v-stepper-step>
+                <v-stepper-content step="2">
+                    
+                    <template>
+                        <v-row justify="center">
+                            <v-time-picker
+                                v-model="time"
+                                format="24hr"
+                                :allowed-hours="allowedHours"
+                                :allowed-minutes="allowedMinutes"
+                                :min="minTime"
+                                :max="maxTime"
+                                @click:hour="updateHour"
+                            ></v-time-picker>
+                        </v-row>
+                    </template>
 
-                <v-btn
-                    color="primary"
-                    @click="closeDialog"
-                >
-                    Weiter
-                </v-btn>
-                <v-btn 
-                    text
-                    @click="dialogStep = 1; time=null">
-                    Zurück
-                </v-btn>
-            </v-stepper-content>
-        </v-stepper>
+                    <v-btn
+                        color="primary"
+                        @click="closeDialog"
+                    >
+                        Weiter
+                    </v-btn>
+                    <v-btn 
+                        text
+                        @click="dialogStep = 1;">
+                        Zurück
+                    </v-btn>
+                </v-stepper-content>
+            </v-stepper>
+        
     </v-dialog>
+    </v-form>
 </template>
 <script>
 export default {
     props: [ 'placeholder', 'minDate' ],
     data() {
         return {
+            valid: false,
+            dateValid: false,
+            timeValid: false,
             dialogStep: 1,
             date: null,
             time: null,
@@ -113,6 +123,8 @@ export default {
             this.selectedTime = this.time
             this.$emit('newDateTime', `${this.selectedDate}T${this.selectedTime}`)
             this.modal = false
+            this.date = null
+            this.time = null
             this.dialogStep = 1
         },
 
@@ -139,6 +151,9 @@ export default {
         },
 
         getAllowedTimesForDay() {
+            if(this.date == null) {
+                return
+            }
             this.$store.dispatch("GET_ALLOWED_RESERVATION_TIMES", this.date).then(
                 (data) => {
                     this.minTime = data.minTime;
@@ -199,6 +214,9 @@ export default {
             const yearMonth = val.split('-')
             this.getAllowedDatesForMonth(yearMonth[0], yearMonth[1])
         },
+        valid (val) {
+            this.$emit('formValid', val)
+        }
     },
 };
 </script>
\ No newline at end of file
diff --git a/src/components/Reservation.vue b/src/components/Reservation.vue
index 425a1ea..8b80707 100644
--- a/src/components/Reservation.vue
+++ b/src/components/Reservation.vue
@@ -16,13 +16,14 @@
         {{ $t("message.reservation.title") }}
       </v-card-title>
       <v-card-actions>
-        <v-form v-model="valid" ref="reservationForm">
+        <v-form v-model="valid">
           <v-container class="pb-0">
             <v-row class="pt-5">
               <v-col cols="12" md="12" class="py-0 pr-0">
                 <v-select
                   :items="availableStations"
                   :label="$t('message.reservation.station')"
+                  :rules="[v => !!v || 'Station ist notwendig']"
                   item-text="name"
                   item-value="station_id"
                   v-model="station"
@@ -40,6 +41,7 @@
                   :minDate="currentDate"
                   :placeholder="startPlaceholder"
                   @newDateTime="startDateTime=$event"
+                  @formValid="startFormValid=$event"
                   ref="startDateTimePicker"
                 ></date-time-picker-dialog>
               </v-col>
@@ -52,6 +54,7 @@
                   :minDate="startDateTime"
                   :placeholder="endPlaceholder"
                   @newDateTime="endDateTime=$event"
+                  @formValid="endFormValid=$event"
                   ref="endDateTimePicker"
                 ></date-time-picker-dialog>
               </v-col>
@@ -75,7 +78,7 @@
                 <v-btn
                   class="mt-2"
                   color="success"
-                  :disabled="!valid"
+                  :disabled="sendButtonDisabled"
                   :loading="loading"
                   @click="startReservation()"
                 >
@@ -111,11 +114,20 @@ export default {
       endPlaceholder: "Endzeit",
       startDateTime: "",
       endDateTime: "",
+      startFormValid: false,
+      endFormValid: false,
       allowedDates: [],
     };
   },
   computed: {
-    ...mapState(['gbfs'])
+    ...mapState(['gbfs']),
+    sendButtonDisabled() {
+      if (this.valid && this.startFormValid && this.endFormValid) {
+        return false
+      } else {
+        return true
+      }
+    }
   },
   methods: {
     startReservation() {

From 29185e4016e9e8c24f8ff291c1c22f77026e3680 Mon Sep 17 00:00:00 2001
From: Fabian Seidlmeier <fabian.seidlmeier@iteratec.com>
Date: Fri, 1 Oct 2021 10:09:34 +0200
Subject: [PATCH 49/61] Fix button-row layout

---
 src/App.vue | 42 +++++++++++++-----------------------------
 1 file changed, 13 insertions(+), 29 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index a33ef2a..8d08419 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -44,18 +44,16 @@
       />
       <gbfs-view />
       <router-view></router-view>
-      <div class="rent-buttonarea">
-        <v-btn fab dark x-small v-if="hasSupport" :to="{name: 'support'}" color="red" class="support-button">
-          <v-icon>{{ mdi.helpCircleOutline }}</v-icon>
-        </v-btn>
-        <v-btn rounded x-large color="success" class="login-button" v-if="!user" :to="{name: 'login'}">
-          <v-icon>{{ mdi.login }}</v-icon>&nbsp;<span>{{ $t('message.app.login') }}</span>
-        </v-btn>
         <v-row class="button-row">
-          <RentButton v-if="user && this.fetchVehicleTypesForSpontaneousRent().length > 0" class="rent-button" />
-          <ReservationButton v-if="user && this.fetchVehicleTypesForReservation().length > 0" class="rent-button"/>
-          </v-row>
-      </div>
+          <v-btn fab dark x-small v-if="hasSupport" :to="{name: 'support'}" color="red" class="btn">
+            <v-icon>{{ mdi.helpCircleOutline }}</v-icon>
+          </v-btn>
+          <v-btn rounded x-large color="success" class="btn" v-if="!user" :to="{name: 'login'}">
+            <v-icon>{{ mdi.login }}</v-icon>&nbsp;<span>{{ $t('message.app.login') }}</span>
+          </v-btn>
+          <RentButton v-if="user && this.fetchVehicleTypesForSpontaneousRent().length > 0" class="btn" />
+          <ReservationButton v-if="user && this.fetchVehicleTypesForReservation().length > 0" class="btn"/>
+        </v-row>
       <AppError />
     </v-main>
   </v-app>
@@ -123,27 +121,13 @@
 
 
 <style>
-  .support-button,
-  .login-button,
   .button-row {
+    justify-content: space-around;
     position: fixed;
     bottom: 2rem;
-    text-align: center;
-  }
-  /* bad hack, goes away when we restructure the navigation */
-  #attach-sheet + .rent-buttonarea .rent-button,
-  #attach-sheet + .rent-buttonarea .login-button {
-    z-index: 300;
-  }
-  .rent-button,
-  .login-button {
-    transform: translateX(-50%);
-    margin: 0 auto 0 auto;
-  }
-  .support-button {
-    left: 1rem;
-  }
-  .button-row {
     width: 100%;
   }
+  .btn {
+    margin-top: 10px;
+  }
 </style>

From 7c59b4182ad5076929d3526bf366e7fcfac48c58 Mon Sep 17 00:00:00 2001
From: Fabian Seidlmeier <fabian.seidlmeier@iteratec.com>
Date: Fri, 1 Oct 2021 10:31:52 +0200
Subject: [PATCH 50/61] Timepicker resets after closing reservationdialog

---
 src/components/DateTimePickerDialog.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/DateTimePickerDialog.vue b/src/components/DateTimePickerDialog.vue
index 6b984a7..57b9604 100644
--- a/src/components/DateTimePickerDialog.vue
+++ b/src/components/DateTimePickerDialog.vue
@@ -17,6 +17,7 @@
                 v-on="on"
                 :rules="[v => !!v || 'Datum und Zeit notwendig!']"
                 required
+                clearable
             ></v-text-field>
             </template>
             
@@ -61,6 +62,7 @@
                     <template>
                         <v-row justify="center">
                             <v-time-picker
+                                v-if="modal"
                                 v-model="time"
                                 format="24hr"
                                 :allowed-hours="allowedHours"
@@ -95,8 +97,6 @@ export default {
     data() {
         return {
             valid: false,
-            dateValid: false,
-            timeValid: false,
             dialogStep: 1,
             date: null,
             time: null,

From c85fb3a780532b1707adb2eee763b5fb85e9c135 Mon Sep 17 00:00:00 2001
From: Jonas Laacke <jonas.laacke@iteratec.com>
Date: Fri, 1 Oct 2021 10:59:21 +0200
Subject: [PATCH 51/61] use forbidden ranges for reservation times

---
 src/components/DateTimePickerDialog.vue | 35 +++++++++++--------------
 src/store/index.js                      |  4 +--
 2 files changed, 18 insertions(+), 21 deletions(-)

diff --git a/src/components/DateTimePickerDialog.vue b/src/components/DateTimePickerDialog.vue
index a78b9ca..dfd9b6d 100644
--- a/src/components/DateTimePickerDialog.vue
+++ b/src/components/DateTimePickerDialog.vue
@@ -39,7 +39,7 @@
 
                 <v-btn
                     color="primary"
-                    @click="dialogStep = 2; getAllowedTimesForDay()"
+                    @click="dialogStep = 2; getForbiddenTimesForDay()"
                 >
                     Weiter
                 </v-btn>
@@ -60,8 +60,6 @@
                             format="24hr"
                             :allowed-hours="allowedHours"
                             :allowed-minutes="allowedMinutes"
-                            :min="minTime"
-                            :max="maxTime"
                             @click:hour="updateHour"
                         ></v-time-picker>
                     </v-row>
@@ -96,10 +94,7 @@ export default {
             selectedHour: null,
             currentMonthYear: null,
             allowedDays: [],
-            minTime: "00:00",
-            maxTime: "23:59",
-            rangeStart: "00:01",
-            rangeEnd: "00:01",
+            forbiddenRanges: [],
         }
     },
     computed: {
@@ -138,16 +133,12 @@ export default {
             )
         },
 
-        getAllowedTimesForDay() {
+        getForbiddenTimesForDay() {
+            console.log('Get forbidden times');
             const params = { date: this.date, vehicleTypeId: this.vehicleTypeId, stationId: this.stationId}
-            this.$store.dispatch("GET_ALLOWED_RESERVATION_TIMES", params).then(
+            this.$store.dispatch("GET_FORBIDDEN_RESERVATION_TIMES", params).then(
                 (data) => {
-                    this.minTime = data.minTime;
-                    this.maxTime = data.maxTime;
-                    if ('forbiddenRange' in data) {
-                        this.rangeStart = data.forbiddenRange.start
-                        this.rangeEnd = data.forbiddenRange.end
-                    }
+                    this.forbiddenRanges = data.forbiddenRanges;
                 }
             )
         },
@@ -170,8 +161,13 @@ export default {
             }
             let timeForStart = `${value}:00:00`
             let timeForEnd = `${value}:59:00`
-            if (timeForStart >= this.rangeStart && timeForEnd <= this.rangeEnd) {
+            console.log('allowed hours')
+            for (let forbiddenRange in this.forbiddenRanges) {
+              console.log('Forbidden Range Start: ' + forbiddenRange.start)
+              console.log('Forbidden Range End: ' + forbiddenRange.end)
+              if (timeForStart >= forbiddenRange.start && timeForEnd <= forbiddenRange.end) {
                 return false
+              }
             }
             return true
         },
@@ -187,11 +183,12 @@ export default {
                 timeToCheck = timeToCheck.concat(`${val}:00`)
             }
 
-            if (timeToCheck >= this.rangeStart && timeToCheck <= this.rangeEnd ) {
+            for (let forbiddenRange in this.forbiddenRanges) {
+              if (timeToCheck >= forbiddenRange.start && timeToCheck <= forbiddenRange.end) {
                 return false
-            } else {
-                return true
+              }
             }
+            return true
         }
 
     },
diff --git a/src/store/index.js b/src/store/index.js
index d9d7600..25b2c11 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -204,9 +204,9 @@ export default new Vuex.Store({
         throw unpackErrorMessage(err);
       }
     },
-    GET_ALLOWED_RESERVATION_TIMES: async function({ state }, requestParams) {
+    GET_FORBIDDEN_RESERVATION_TIMES: async function({ state }, requestParams) {
       try {
-        let response = await axiosWithAuth.call(this, state).get(`/reservationdates/allowedtimes`,{ params: requestParams});
+        let response = await axiosWithAuth.call(this, state).get(`/reservationdates/forbiddentimes`,{ params: requestParams});
         return response.data;
       } catch (err) {
         throw unpackErrorMessage(err);

From a321f54e5716609ceebdc73251fcd8e614a15d61 Mon Sep 17 00:00:00 2001
From: Fabian Seidlmeier <fabian.seidlmeier@iteratec.com>
Date: Fri, 1 Oct 2021 11:44:09 +0200
Subject: [PATCH 52/61] merge fixes

---
 src/components/DateTimePickerDialog.vue | 149 +++++++++++++-----------
 src/components/Reservation.vue          |  28 +++--
 2 files changed, 96 insertions(+), 81 deletions(-)

diff --git a/src/components/DateTimePickerDialog.vue b/src/components/DateTimePickerDialog.vue
index db2db18..e0446d1 100644
--- a/src/components/DateTimePickerDialog.vue
+++ b/src/components/DateTimePickerDialog.vue
@@ -6,71 +6,84 @@
             :return-value.sync="date"
             width="400px"
         >
-        <v-stepper
-            :complete="dialogStep > 1"
-            vertical
-        >
-            <v-stepper-step
-                :complete="dialogStep > 1"
-                step="1">
-                Datum auswählen
-            </v-stepper-step>
-            <v-stepper-content step="1">
-
-                <template>
-                    <v-row justify="center">
-                        <v-date-picker
-                            v-model="date"
-                            :min="minDate"
-                            :picker-date.sync="currentMonthYear"
-                            :allowed-dates="allowedDates"
-                        ></v-date-picker>
-                    </v-row>
-                </template>
-
-                <v-btn
-                    color="primary"
-                    @click="dialogStep = 2; getForbiddenTimesForDay()"
-                >
-                    Weiter
-                </v-btn>
-
-            </v-stepper-content>
-
-            <v-stepper-step
-                :complete="dialogStep > 2"
-                step="2">
-                Zeit auswählen
-            </v-stepper-step>
-            <v-stepper-content step="2">
-
-                <template>
-                    <v-row justify="center">
-                        <v-time-picker
-                            v-if="modal"
-                            v-model="time"
-                            format="24hr"
-                            :allowed-hours="allowedHours"
-                            :allowed-minutes="allowedMinutes"
-                            @click:hour="updateHour"
-                        ></v-time-picker>
-                    </v-row>
-                </template>
-
-                <v-btn
-                    color="primary"
-                    @click="closeDialog"
-                >
-                    Weiter
-                </v-btn>
-                <v-btn
-                    text
-                    @click="dialogStep = 1; time=null">
-                    Zurück
-                </v-btn>
-            </v-stepper-content>
-        </v-stepper>
-    </v-dialog>
+            <template v-slot:activator="{ on, attrs }">
+            <v-text-field
+                v-model="computedDateTimeFormatted"
+                :placeholder="placeholder"
+                readonly
+                v-bind="attrs"
+                v-on="on"
+                required
+            ></v-text-field>
+            </template>
+            <v-stepper
+                v-model="dialogStep"
+                vertical
+            >
+                <v-stepper-step
+                    :complete="dialogStep > 1"
+                    step="1">
+                    Datum auswählen
+                </v-stepper-step>
+                <v-stepper-content step="1">
+
+                    <template>
+                        <v-row justify="center">
+                            <v-date-picker
+                                v-model="date"
+                                :min="minDate"
+                                :picker-date.sync="currentMonthYear"
+                                :allowed-dates="allowedDates"
+                            ></v-date-picker>
+                        </v-row>
+                    </template>
+
+                    <v-btn
+                        :disabled="!date"
+                        color="primary"
+                        @click="dialogStep = 2; getForbiddenTimesForDay()"
+                    >
+                        Weiter
+                    </v-btn>
+
+                </v-stepper-content>
+
+                <v-stepper-step
+                    :complete="dialogStep > 2"
+                    step="2">
+                    Zeit auswählen
+                </v-stepper-step>
+                <v-stepper-content step="2">
+
+                    <template>
+                        <v-row justify="center">
+                            <v-time-picker
+                                v-if="modal"
+                                v-model="time"
+                                format="24hr"
+                                :allowed-hours="allowedHours"
+                                :allowed-minutes="allowedMinutes"
+                                @click:hour="updateHour"
+                            ></v-time-picker>
+                        </v-row>
+                    </template>
+
+                    <v-btn
+                        :disabled="!time"
+                        color="primary"
+                        @click="closeDialog"
+                    >
+                        Weiter
+                    </v-btn>
+                    <v-btn
+                        text
+                        @click="dialogStep = 1; time=null">
+                        Zurück
+                    </v-btn>
+                </v-stepper-content>
+            </v-stepper>
+        </v-dialog>
+    </v-form>
 </template>
 <script>
 export default {
@@ -156,7 +169,6 @@ export default {
             }
             let timeForStart = `${value}:00:00`
             let timeForEnd = `${value}:59:00`
-            console.log('allowed hours')
             for (let forbiddenRange in this.forbiddenRanges) {
               console.log('Forbidden Range Start: ' + forbiddenRange.start)
               console.log('Forbidden Range End: ' + forbiddenRange.end)
@@ -194,6 +206,11 @@ export default {
         },
         valid (val) {
             this.$emit('formValid', val)
+        },
+        modal (val) {
+            if(!val) {
+                this.dialogStep = 1
+            }
         }
     },
 };
diff --git a/src/components/Reservation.vue b/src/components/Reservation.vue
index 88428ef..5ceb213 100644
--- a/src/components/Reservation.vue
+++ b/src/components/Reservation.vue
@@ -15,7 +15,7 @@
       <v-card-title class="text-h5 grey lighten-2" primary-title>
         {{ $t("message.reservation.title") }}
       </v-card-title>
-      <v-card-actions>
+      <v-card-text>
         <v-form v-model="valid">
           <v-container class="pb-0">
             <v-row class="pt-5">
@@ -58,7 +58,7 @@
                   :vehicleTypeId="this.vehicleType"
                   :stationId="this.station"
                   @newDateTime="endDateTime=$event"
-                  @formValid="endFormValid=$event"
+                  @formValid="endFormValid=$event;"
                   ref="endDateTimePicker"
                 ></date-time-picker-dialog>
               </v-col>
@@ -77,21 +77,19 @@
               <v-col cols="1" md="1" class="py-0 text-right">
               </v-col>
             </v-row>
-            <v-row class="pt-5">
-              <v-col cols="1" md="1" class="py-0 text-right">
-                <v-btn
-                  class="mt-2"
-                  color="success"
-                  :disabled="sendButtonDisabled"
-                  :loading="loading"
-                  @click="startReservation()"
-                >
-                  {{ $t("message.reservation.create") }}
-                </v-btn>
-              </v-col>
-            </v-row>
           </v-container>
         </v-form>
+      </v-card-text>
+      <v-card-actions>
+        <v-btn
+          class="mt-2"
+          color="success"
+          :disabled="sendButtonDisabled"
+          :loading="loading"
+          @click="startReservation()"
+        >
+          {{ $t("message.reservation.create") }}
+        </v-btn>
       </v-card-actions>
     </v-card>
   </v-dialog>

From 796965f0d60a8bb883ef2925ebdd14e4cc9c3571 Mon Sep 17 00:00:00 2001
From: Fabian Seidlmeier <fabian.seidlmeier@iteratec.com>
Date: Fri, 1 Oct 2021 14:43:31 +0200
Subject: [PATCH 53/61] Fix forbidden time ranges

---
 src/components/DateTimePickerDialog.vue | 25 +++++++++++++------------
 src/components/Reservation.vue          |  4 ----
 2 files changed, 13 insertions(+), 16 deletions(-)

diff --git a/src/components/DateTimePickerDialog.vue b/src/components/DateTimePickerDialog.vue
index e0446d1..33b35a5 100644
--- a/src/components/DateTimePickerDialog.vue
+++ b/src/components/DateTimePickerDialog.vue
@@ -9,11 +9,14 @@
             <template v-slot:activator="{ on, attrs }">
             <v-text-field
                 v-model="computedDateTimeFormatted"
-                :placeholder="placeholder"
-                readonly
                 v-bind="attrs"
                 v-on="on"
+                :disabled="stationId == null"
+                :label="placeholder"
+                :rules="[v => !!v || 'Datum und Zeit notwendig!']"
                 required
+                readonly
+                clearable
             ></v-text-field>
             </template>
             <v-stepper
@@ -142,11 +145,10 @@ export default {
         },
 
         getForbiddenTimesForDay() {
-            console.log('Get forbidden times');
             const params = { date: this.date, vehicleTypeId: this.vehicleTypeId, stationId: this.stationId}
             this.$store.dispatch("GET_FORBIDDEN_RESERVATION_TIMES", params).then(
                 (data) => {
-                    this.forbiddenRanges = data.forbiddenRanges;
+                    this.forbiddenRanges = data;
                 }
             )
         },
@@ -169,13 +171,12 @@ export default {
             }
             let timeForStart = `${value}:00:00`
             let timeForEnd = `${value}:59:00`
-            for (let forbiddenRange in this.forbiddenRanges) {
-              console.log('Forbidden Range Start: ' + forbiddenRange.start)
-              console.log('Forbidden Range End: ' + forbiddenRange.end)
-              if (timeForStart >= forbiddenRange.start && timeForEnd <= forbiddenRange.end) {
-                return false
-              }
+            for (let index in this.forbiddenRanges) {
+                if (timeForStart >= this.forbiddenRanges[index].start && timeForEnd <= this.forbiddenRanges[index].end) {
+                    return false
+                }
             }
+            
             return true
         },
 
@@ -190,8 +191,8 @@ export default {
                 timeToCheck = timeToCheck.concat(`${val}:00`)
             }
 
-            for (let forbiddenRange in this.forbiddenRanges) {
-              if (timeToCheck >= forbiddenRange.start && timeToCheck <= forbiddenRange.end) {
+            for (let index in this.forbiddenRanges) {
+              if (timeToCheck >= this.forbiddenRanges[index].start && timeToCheck <= this.forbiddenRanges[index].end) {
                 return false
               }
             }
diff --git a/src/components/Reservation.vue b/src/components/Reservation.vue
index 5ceb213..fc4c778 100644
--- a/src/components/Reservation.vue
+++ b/src/components/Reservation.vue
@@ -36,7 +36,6 @@
 
             <v-row class="pt-5">
               <v-col cols="12" md="12" class="py-0 pr-0">
-                Start Zeit
                 <date-time-picker-dialog
                   :minDate="currentDate"
                   :placeholder="startPlaceholder"
@@ -51,7 +50,6 @@
             </v-row>
             <v-row class="pt-5">
               <v-col cols="12" md="12" class="py-0 pr-0">
-                End Zeit
                 <date-time-picker-dialog
                   :minDate="startDateTime"
                   :placeholder="endPlaceholder"
@@ -85,7 +83,6 @@
           class="mt-2"
           color="success"
           :disabled="sendButtonDisabled"
-          :loading="loading"
           @click="startReservation()"
         >
           {{ $t("message.reservation.create") }}
@@ -105,7 +102,6 @@ export default {
   data() {
     return {
       show: false,
-      loading: false,
       valid: false,
       currentDate: new Date().toISOString().slice(0,10),
       availableStations: [],

From 26cfc0ac20c6b4e6343e302a58eed730a204ed1a Mon Sep 17 00:00:00 2001
From: Fabian Seidlmeier <fabian.seidlmeier@iteratec.com>
Date: Fri, 1 Oct 2021 15:50:57 +0200
Subject: [PATCH 54/61] Station + vehicletype required for datetimepicker

---
 src/components/DateTimePickerDialog.vue |  2 +-
 src/components/Reservation.vue          | 31 ++++++++++++++-----------
 2 files changed, 18 insertions(+), 15 deletions(-)

diff --git a/src/components/DateTimePickerDialog.vue b/src/components/DateTimePickerDialog.vue
index 33b35a5..cf8a071 100644
--- a/src/components/DateTimePickerDialog.vue
+++ b/src/components/DateTimePickerDialog.vue
@@ -11,7 +11,7 @@
                 v-model="computedDateTimeFormatted"
                 v-bind="attrs"
                 v-on="on"
-                :disabled="stationId == null"
+                :disabled="stationId == null || vehicleTypeId == null"
                 :label="placeholder"
                 :rules="[v => !!v || 'Datum und Zeit notwendig!']"
                 required
diff --git a/src/components/Reservation.vue b/src/components/Reservation.vue
index fc4c778..d3cc02d 100644
--- a/src/components/Reservation.vue
+++ b/src/components/Reservation.vue
@@ -34,6 +34,22 @@
               </v-col>
             </v-row>
 
+            <v-row v-if="vehicleTypes.length > 1" class="pt-5">
+              <v-col cols="12" md="12" class="py-0 pr-0">
+                <v-select
+                  :items="vehicleTypes"
+                  :label="$t('message.reservation.vehicleType')"
+                  item-text="name"
+                  item-value="vehicle_type_id"
+                  v-model="vehicleType"
+                  required
+                  clearable
+                ></v-select>
+              </v-col>
+              <v-col cols="1" md="1" class="py-0 text-right">
+              </v-col>
+            </v-row>
+
             <v-row class="pt-5">
               <v-col cols="12" md="12" class="py-0 pr-0">
                 <date-time-picker-dialog
@@ -48,6 +64,7 @@
               </v-col>
               <v-col cols="1" md="1" class="py-0 text-right"> </v-col>
             </v-row>
+
             <v-row class="pt-5">
               <v-col cols="12" md="12" class="py-0 pr-0">
                 <date-time-picker-dialog
@@ -61,20 +78,6 @@
                 ></date-time-picker-dialog>
               </v-col>
             </v-row>
-            <v-row v-if="vehicleTypes.length > 1" class="pt-5">
-              <v-col cols="12" md="12" class="py-0 pr-0">
-                <v-select
-                  :items="vehicleTypes"
-                  :label="$t('message.reservation.vehicleType')"
-                  item-text="name"
-                  item-value="vehicle_type_id"
-                  v-model="vehicleType"
-                  required
-                ></v-select>
-              </v-col>
-              <v-col cols="1" md="1" class="py-0 text-right">
-              </v-col>
-            </v-row>
           </v-container>
         </v-form>
       </v-card-text>

From 093853fb9aed1bd84d8e9ff962c192d3f352f4c6 Mon Sep 17 00:00:00 2001
From: Jonas Laacke <jonas.laacke@iteratec.com>
Date: Sat, 2 Oct 2021 15:23:13 +0200
Subject: [PATCH 55/61] determine end time for reservation

---
 src/components/DateTimePickerDialog.vue |  5 +++--
 src/components/Reservation.vue          | 17 ++++++++++++++---
 src/store/index.js                      |  8 ++++++++
 3 files changed, 25 insertions(+), 5 deletions(-)

diff --git a/src/components/DateTimePickerDialog.vue b/src/components/DateTimePickerDialog.vue
index cf8a071..d0da867 100644
--- a/src/components/DateTimePickerDialog.vue
+++ b/src/components/DateTimePickerDialog.vue
@@ -35,6 +35,7 @@
                             <v-date-picker
                                 v-model="date"
                                 :min="minDate"
+                                :max="maxDate"
                                 :picker-date.sync="currentMonthYear"
                                 :allowed-dates="allowedDates"
                             ></v-date-picker>
@@ -90,7 +91,7 @@
 </template>
 <script>
 export default {
-    props: [ 'placeholder', 'minDate', 'vehicleTypeId', 'stationId' ],
+    props: [ 'placeholder', 'minDate', 'maxDate', 'vehicleTypeId', 'stationId' ],
     data() {
         return {
             valid: false,
@@ -176,7 +177,7 @@ export default {
                     return false
                 }
             }
-            
+
             return true
         },
 
diff --git a/src/components/Reservation.vue b/src/components/Reservation.vue
index d3cc02d..2c1be07 100644
--- a/src/components/Reservation.vue
+++ b/src/components/Reservation.vue
@@ -57,7 +57,7 @@
                   :placeholder="startPlaceholder"
                   :vehicleTypeId="this.vehicleType"
                   :stationId="this.station"
-                  @newDateTime="startDateTime=$event"
+                  @newDateTime="getMaxReservationDate($event)"
                   @formValid="startFormValid=$event"
                   ref="startDateTimePicker"
                 ></date-time-picker-dialog>
@@ -69,11 +69,12 @@
               <v-col cols="12" md="12" class="py-0 pr-0">
                 <date-time-picker-dialog
                   :minDate="startDateTime"
+                  :maxDate="maxReservationDate"
                   :placeholder="endPlaceholder"
                   :vehicleTypeId="this.vehicleType"
                   :stationId="this.station"
                   @newDateTime="endDateTime=$event"
-                  @formValid="endFormValid=$event;"
+                  @formValid="endFormValid=$event"
                   ref="endDateTimePicker"
                 ></date-time-picker-dialog>
               </v-col>
@@ -99,7 +100,7 @@
 import { mapState } from 'vuex';
 import DateTimePickerDialog from "./DateTimePickerDialog.vue";
 export default {
-  components: { 
+  components: {
     DateTimePickerDialog,
   },
   data() {
@@ -114,6 +115,7 @@ export default {
       startPlaceholder: "Startzeit",
       endPlaceholder: "Endzeit",
       startDateTime: "",
+      maxReservationDate: "",
       endDateTime: "",
       startFormValid: false,
       endFormValid: false,
@@ -154,6 +156,15 @@ export default {
         this.vehicleType = this.vehicleTypes[0].vehicle_type_id;
       }
     },
+    getMaxReservationDate(startDateTime) {
+      this.startDateTime=startDateTime;
+      const params = { startDateTime: this.startDateTime, vehicleTypeId: this.vehicleType, stationId: this.station}
+      return this.$store.dispatch("GET_MAX_RESERVATION_DATE", params).then(
+        (data) => {
+          this.maxReservationDate=data;
+        }
+      )
+    }
 
   },
   mounted() {
diff --git a/src/store/index.js b/src/store/index.js
index 25b2c11..b459fd4 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -212,6 +212,14 @@ export default new Vuex.Store({
         throw unpackErrorMessage(err);
       }
     },
+    GET_MAX_RESERVATION_DATE: async function({ state }, requestParams) {
+      try {
+        let response = await axiosWithAuth.call(this, state).get(`/reservationdates/maxreservationdate`,{ params: requestParams});
+        return response.data;
+      } catch (err) {
+        throw unpackErrorMessage(err);
+      }
+    },
   },
   mutations: {
     CLEAR_USER: (state) => {

From 7376e8fb22bbd8d32724a1e22d8cc97e0bfd0692 Mon Sep 17 00:00:00 2001
From: Fabian Seidlmeier <fabian.seidlmeier@iteratec.com>
Date: Mon, 4 Oct 2021 12:38:51 +0200
Subject: [PATCH 56/61] Timepicker blocks everything after maxTime

---
 src/components/DateTimePickerDialog.vue | 13 ++++++++++++-
 1 file changed, 12 insertions(+), 1 deletion(-)

diff --git a/src/components/DateTimePickerDialog.vue b/src/components/DateTimePickerDialog.vue
index d0da867..730dece 100644
--- a/src/components/DateTimePickerDialog.vue
+++ b/src/components/DateTimePickerDialog.vue
@@ -35,7 +35,7 @@
                             <v-date-picker
                                 v-model="date"
                                 :min="minDate"
-                                :max="maxDate"
+                                :max="computedMaxDate"
                                 :picker-date.sync="currentMonthYear"
                                 :allowed-dates="allowedDates"
                             ></v-date-picker>
@@ -65,6 +65,7 @@
                                 v-if="modal"
                                 v-model="time"
                                 format="24hr"
+                                :max="computedMaxTime"
                                 :allowed-hours="allowedHours"
                                 :allowed-minutes="allowedMinutes"
                                 @click:hour="updateHour"
@@ -110,6 +111,16 @@ export default {
     computed: {
         computedDateTimeFormatted() {
             return this.formatDateTime(this.selectedDate, this.selectedTime)
+        },
+        computedMaxDate() {
+            return (this.maxDate) ? this.maxDate.split('T')[0] : null
+        },
+        computedMaxTime() {
+            if (this.maxDate) {
+                const dateTime = this.maxDate.split('T')
+                return (this.date === dateTime[0]) ? dateTime[1] : null
+            }
+            return null
         }
     },
     methods: {

From 693bf86881b7584d5b49370ba27064d61776bd26 Mon Sep 17 00:00:00 2001
From: Fabian Seidlmeier <fabian.seidlmeier@iteratec.com>
Date: Wed, 6 Oct 2021 11:16:01 +0200
Subject: [PATCH 57/61] Code cleanup

---
 src/components/DateTimePickerDialog.vue | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/components/DateTimePickerDialog.vue b/src/components/DateTimePickerDialog.vue
index 730dece..35b5eb7 100644
--- a/src/components/DateTimePickerDialog.vue
+++ b/src/components/DateTimePickerDialog.vue
@@ -117,8 +117,8 @@ export default {
         },
         computedMaxTime() {
             if (this.maxDate) {
-                const dateTime = this.maxDate.split('T')
-                return (this.date === dateTime[0]) ? dateTime[1] : null
+                const [date, time] = this.maxDate.split('T')
+                return (this.date === date) ? time : null
             }
             return null
         }
@@ -214,13 +214,13 @@ export default {
     },
     watch: {
         currentMonthYear(val) {
-            const yearMonth = val.split('-')
-            this.getAllowedDatesForMonth(yearMonth[0], yearMonth[1])
+            const [year, month] = val.split('-')
+            this.getAllowedDatesForMonth(year, month)
         },
-        valid (val) {
+        valid(val) {
             this.$emit('formValid', val)
         },
-        modal (val) {
+        modal(val) {
             if(!val) {
                 this.dialogStep = 1
             }

From 190f41cfd7c8e3b31f48bb6e76c9572f139b8298 Mon Sep 17 00:00:00 2001
From: Fabian Seidlmeier <fabian.seidlmeier@iteratec.com>
Date: Wed, 6 Oct 2021 12:23:53 +0200
Subject: [PATCH 58/61] Added min time to datepicker for reservation end

---
 src/components/DateTimePickerDialog.vue | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/components/DateTimePickerDialog.vue b/src/components/DateTimePickerDialog.vue
index 35b5eb7..69e2ce9 100644
--- a/src/components/DateTimePickerDialog.vue
+++ b/src/components/DateTimePickerDialog.vue
@@ -65,6 +65,7 @@
                                 v-if="modal"
                                 v-model="time"
                                 format="24hr"
+                                :min="computedMinTime"
                                 :max="computedMaxTime"
                                 :allowed-hours="allowedHours"
                                 :allowed-minutes="allowedMinutes"
@@ -121,6 +122,9 @@ export default {
                 return (this.date === date) ? time : null
             }
             return null
+        },
+        computedMinTime() {
+            return this.minDate.split('T')[1]
         }
     },
     methods: {

From 476a1d3bca14d6a7a745defde78dcbcc19e2497d Mon Sep 17 00:00:00 2001
From: Fabian Seidlmeier <fabian.seidlmeier@iteratec.com>
Date: Wed, 13 Oct 2021 15:55:06 +0200
Subject: [PATCH 59/61] Code cleanup and small bug fix

---
 src/components/DateTimePickerDialog.vue | 10 +++++++++-
 src/components/Reservation.vue          |  2 +-
 2 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/src/components/DateTimePickerDialog.vue b/src/components/DateTimePickerDialog.vue
index 69e2ce9..3f9f752 100644
--- a/src/components/DateTimePickerDialog.vue
+++ b/src/components/DateTimePickerDialog.vue
@@ -124,7 +124,8 @@ export default {
             return null
         },
         computedMinTime() {
-            return this.minDate.split('T')[1]
+            const [date, time] = this.minDate.split('T')
+            return (this.date === date) ? time : null
         }
     },
     methods: {
@@ -155,6 +156,7 @@ export default {
             const params = { year: year, month: month, vehicleTypeId: this.vehicleTypeId, stationId: this.stationId}
             this.$store.dispatch("GET_ALLOWED_RESERVATION_DATES", params).then(
                 (data) => {
+                    console.log(`Allowed dates for ${year}-${month}:\n\t${data.allowedDays}`)
                     this.allowedDays = data.allowedDays;
                 }
             )
@@ -164,6 +166,7 @@ export default {
             const params = { date: this.date, vehicleTypeId: this.vehicleTypeId, stationId: this.stationId}
             this.$store.dispatch("GET_FORBIDDEN_RESERVATION_TIMES", params).then(
                 (data) => {
+                    console.log(`Forbidden ranges for ${this.date}:\n\t${data}`)
                     this.forbiddenRanges = data;
                 }
             )
@@ -227,6 +230,11 @@ export default {
         modal(val) {
             if(!val) {
                 this.dialogStep = 1
+            } else {
+                if (this.currentMonthYear) {
+                    const [year, month] = this.currentMonthYear.split('-')
+                    this.getAllowedDatesForMonth(year, month)
+                }
             }
         }
     },
diff --git a/src/components/Reservation.vue b/src/components/Reservation.vue
index 2c1be07..1f69dbf 100644
--- a/src/components/Reservation.vue
+++ b/src/components/Reservation.vue
@@ -43,7 +43,6 @@
                   item-value="vehicle_type_id"
                   v-model="vehicleType"
                   required
-                  clearable
                 ></v-select>
               </v-col>
               <v-col cols="1" md="1" class="py-0 text-right">
@@ -161,6 +160,7 @@ export default {
       const params = { startDateTime: this.startDateTime, vehicleTypeId: this.vehicleType, stationId: this.station}
       return this.$store.dispatch("GET_MAX_RESERVATION_DATE", params).then(
         (data) => {
+          console.log(`Max Reservationdate for ${startDateTime}:\n\t${data}`)
           this.maxReservationDate=data;
         }
       )

From a67a6b00470b172b9019acc48f169764d37e5b97 Mon Sep 17 00:00:00 2001
From: Fabian Seidlmeier <fabian.seidlmeier@iteratec.com>
Date: Wed, 13 Oct 2021 15:57:47 +0200
Subject: [PATCH 60/61] Code cleanup

---
 src/components/Reservation.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/Reservation.vue b/src/components/Reservation.vue
index 1f69dbf..76a33fd 100644
--- a/src/components/Reservation.vue
+++ b/src/components/Reservation.vue
@@ -160,7 +160,6 @@ export default {
       const params = { startDateTime: this.startDateTime, vehicleTypeId: this.vehicleType, stationId: this.station}
       return this.$store.dispatch("GET_MAX_RESERVATION_DATE", params).then(
         (data) => {
-          console.log(`Max Reservationdate for ${startDateTime}:\n\t${data}`)
           this.maxReservationDate=data;
         }
       )

From 711e3f8a9526205f4f7e18c1e6d759bbb8fd3ea7 Mon Sep 17 00:00:00 2001
From: Jonas Laacke <jonas.laacke@iteratec.com>
Date: Fri, 15 Oct 2021 16:23:00 +0200
Subject: [PATCH 61/61] cleaned up reservation code and fixed some bugs

---
 src/components/Reservation.vue                | 20 ++++++++-----------
 ...ue => ReservationDateTimePickerDialog.vue} | 10 ++++------
 src/components/ReservationList.vue            |  2 +-
 3 files changed, 13 insertions(+), 19 deletions(-)
 rename src/components/{DateTimePickerDialog.vue => ReservationDateTimePickerDialog.vue} (95%)

diff --git a/src/components/Reservation.vue b/src/components/Reservation.vue
index 76a33fd..6be6c6c 100644
--- a/src/components/Reservation.vue
+++ b/src/components/Reservation.vue
@@ -51,31 +51,29 @@
 
             <v-row class="pt-5">
               <v-col cols="12" md="12" class="py-0 pr-0">
-                <date-time-picker-dialog
+                <reservation-date-time-picker-dialog
                   :minDate="currentDate"
                   :placeholder="startPlaceholder"
                   :vehicleTypeId="this.vehicleType"
-                  :stationId="this.station"
                   @newDateTime="getMaxReservationDate($event)"
                   @formValid="startFormValid=$event"
                   ref="startDateTimePicker"
-                ></date-time-picker-dialog>
+                ></reservation-date-time-picker-dialog>
               </v-col>
               <v-col cols="1" md="1" class="py-0 text-right"> </v-col>
             </v-row>
 
             <v-row class="pt-5">
               <v-col cols="12" md="12" class="py-0 pr-0">
-                <date-time-picker-dialog
+                <reservation-date-time-picker-dialog
                   :minDate="startDateTime"
                   :maxDate="maxReservationDate"
                   :placeholder="endPlaceholder"
                   :vehicleTypeId="this.vehicleType"
-                  :stationId="this.station"
                   @newDateTime="endDateTime=$event"
                   @formValid="endFormValid=$event"
                   ref="endDateTimePicker"
-                ></date-time-picker-dialog>
+                ></reservation-date-time-picker-dialog>
               </v-col>
             </v-row>
           </v-container>
@@ -97,16 +95,16 @@
 
 <script>
 import { mapState } from 'vuex';
-import DateTimePickerDialog from "./DateTimePickerDialog.vue";
+import ReservationDateTimePickerDialog from "./ReservationDateTimePickerDialog.vue";
 export default {
   components: {
-    DateTimePickerDialog,
+    ReservationDateTimePickerDialog,
   },
   data() {
     return {
       show: false,
       valid: false,
-      currentDate: new Date().toISOString().slice(0,10),
+      currentDate: new Date(new Date().getTime() - new Date().getTimezoneOffset()*60000).toISOString(),
       availableStations: [],
       vehicleTypes: [],
       station: null,
@@ -157,7 +155,7 @@ export default {
     },
     getMaxReservationDate(startDateTime) {
       this.startDateTime=startDateTime;
-      const params = { startDateTime: this.startDateTime, vehicleTypeId: this.vehicleType, stationId: this.station}
+      const params = { startDateTime: startDateTime, vehicleTypeId: this.vehicleType }
       return this.$store.dispatch("GET_MAX_RESERVATION_DATE", params).then(
         (data) => {
           this.maxReservationDate=data;
@@ -175,8 +173,6 @@ export default {
   watch: {
     show (val) {
       if(val == false) {
-        this.station = null
-        this.vehicleType = null
         this.$refs.startDateTimePicker.resetForm()
         this.$refs.endDateTimePicker.resetForm()
       }
diff --git a/src/components/DateTimePickerDialog.vue b/src/components/ReservationDateTimePickerDialog.vue
similarity index 95%
rename from src/components/DateTimePickerDialog.vue
rename to src/components/ReservationDateTimePickerDialog.vue
index 3f9f752..2a077e8 100644
--- a/src/components/DateTimePickerDialog.vue
+++ b/src/components/ReservationDateTimePickerDialog.vue
@@ -11,7 +11,7 @@
                 v-model="computedDateTimeFormatted"
                 v-bind="attrs"
                 v-on="on"
-                :disabled="stationId == null || vehicleTypeId == null"
+                :disabled="vehicleTypeId == null"
                 :label="placeholder"
                 :rules="[v => !!v || 'Datum und Zeit notwendig!']"
                 required
@@ -93,7 +93,7 @@
 </template>
 <script>
 export default {
-    props: [ 'placeholder', 'minDate', 'maxDate', 'vehicleTypeId', 'stationId' ],
+    props: [ 'placeholder', 'minDate', 'maxDate', 'vehicleTypeId' ],
     data() {
         return {
             valid: false,
@@ -153,20 +153,18 @@ export default {
         },
 
         getAllowedDatesForMonth(year, month) {
-            const params = { year: year, month: month, vehicleTypeId: this.vehicleTypeId, stationId: this.stationId}
+            const params = { year: year, month: month, vehicleTypeId: this.vehicleTypeId }
             this.$store.dispatch("GET_ALLOWED_RESERVATION_DATES", params).then(
                 (data) => {
-                    console.log(`Allowed dates for ${year}-${month}:\n\t${data.allowedDays}`)
                     this.allowedDays = data.allowedDays;
                 }
             )
         },
 
         getForbiddenTimesForDay() {
-            const params = { date: this.date, vehicleTypeId: this.vehicleTypeId, stationId: this.stationId}
+            const params = { date: this.date, vehicleTypeId: this.vehicleTypeId }
             this.$store.dispatch("GET_FORBIDDEN_RESERVATION_TIMES", params).then(
                 (data) => {
-                    console.log(`Forbidden ranges for ${this.date}:\n\t${data}`)
                     this.forbiddenRanges = data;
                 }
             )
diff --git a/src/components/ReservationList.vue b/src/components/ReservationList.vue
index 434d412..f138f83 100644
--- a/src/components/ReservationList.vue
+++ b/src/components/ReservationList.vue
@@ -2,7 +2,7 @@
   <v-dialog v-model="show" max-width="600">
     <v-card>
       <v-card-title class="text-h5 grey lighten-2" primary-title>
-        Deine Reservierungen
+        Meine Reservierungen
       </v-card-title>
       <v-card-actions>
         <v-container>