Added Reservation

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

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. 
 

config/config.development.js

@@ -9,11 +9,14 @@ 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;
 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, END_STATION_SELECT };

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 };

config/config.staging.js

@@ -9,11 +9,14 @@ 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';
 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 };

src/App.vue

@@ -44,15 +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>
-        <RentButton v-if="user" class="rent-button" />
-      </div>
+        <v-row class="button-row">
+          <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>
@@ -64,13 +65,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,
@@ -87,11 +89,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: {
@@ -104,24 +121,13 @@
 
 
 <style>
-  .support-button,
-  .rent-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 {
-    left: 50%;
-    transform: translateX(-50%);
+    width: 100%;
   }
-  .support-button {
-    left: 1rem;
+  .btn {
+    margin-top: 10px;
   }
 </style>