Driver workflow working hand-to-hand with API

- Redirecting to break/inactive/active depending on steps number and workStatus
- Handling mutual rides mutations in steps
- Handling cancel ride from dashboard
- Added ride history for current day
- New UI for Account page, closer to new overall UI

assets/css/_variables.scss

@@ -12,6 +12,8 @@ $black: #1c1c1c;
 $gray: #8192a9;
 $light-gray: #eaeff4;
 $dark-gray: #adb9c9;
+$red: #FF5B5E;
+$orange: #FF961D;
 
 /*************
  *   Bulma   *

components/nav.vue

@@ -0,0 +1,91 @@
+<template>
+  <nav>
+    <nuxt-link
+      :class="isActive('campus')"
+      :to="campus && campus.id ? campusLink(campus.id, driverStatus) : '/'"
+    >
+      <fa-icon :icon="['fas', 'car']" />
+      Courses
+    </nuxt-link>
+
+    <nuxt-link
+      :class="isActive('history')"
+      :to="{ name: 'history' }"
+    >
+      <fa-icon :icon="['fas', 'history']" />
+      Historique
+    </nuxt-link>
+
+    <nuxt-link
+      :class="isActive('account')"
+      :to="{ name: 'account' }"
+    >
+      <fa-icon :icon="['fas', 'user-circle']" />
+      Compte
+    </nuxt-link>
+  </nav>
+</template>
+
+<script>
+import { mapGetters } from 'vuex';
+import campusLink from '~/helpers/generate-campus-link';
+import { statuses } from '../store/status';
+
+export default {
+  data() {
+    return {
+      campusLink,
+    };
+  },
+  computed: {
+    ...mapGetters({
+      campus: 'context/campus',
+      driverStatus: 'status/workStatus',
+    }),
+  },
+  methods: {
+    isActive(name) {
+      if (this.$route.name.split('-').find((string) => string === name)) {
+        return statuses.ACTIVE;
+      }
+      return '';
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+  @import "~assets/css/head";
+  @import "~bulma/sass/components/menu.sass";
+
+  nav {
+    position: fixed;
+    bottom: 0;
+    width: 100%;
+    display: flex;
+    padding-top: 1em;
+    a {
+      background-color: $light-gray;
+      width: 100%;
+      height: 100%;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      padding: .5em;
+      cursor: pointer;
+      font-size: 1em;
+      color: $gray;
+      &.active {
+        color: $primary;
+        font-weight: 700;
+        pointer-events: none;
+      }
+      svg {
+        margin-top: .3em;
+        color: inherit;
+      }
+    }
+
+  }
+</style>

components/step/current.vue

@@ -48,5 +48,6 @@ export default {
     li {
       font-weight: unset;
     }
+
   }
 </style>

components/step/header.vue

@@ -1,9 +1,9 @@
 <template>
-  <header :class="driving ? 'active' : ''">
+  <header :class="rideStatus ? 'active' : ''">
     <aside>Destination</aside>
     <h1>{{ destination }}</h1>
     <ec-button @click.native="emitClick">
-      {{ buttonContent }}
+      {{ rideStatus ? 'Etape terminée' : "Commencer l'étape" }}
     </ec-button>
   </header>
 </template>
@@ -20,14 +20,9 @@ export default {
       type: String,
       required: true,
     },
-    driving: {
+    rideStatus: {
       type: Boolean,
-      default: false,
-    },
-  },
-  computed: {
-    buttonContent() {
-      return this.driving ? 'Etape terminée' : "Commencer l'étape";
+      required: true,
     },
   },
   methods: {

components/step/list.vue

@@ -1,57 +1,49 @@
 <template>
   <div>
     <div
-      v-for="(step, index) in steps"
-      :key="index"
+      v-for="(step, j) in steps"
+      :key="j"
     >
-      <svg
-        width="12"
-        height="38"
-        viewBox="0 0 12 38"
-        fill="none"
-        xmlns="http://www.w3.org/2000/svg"
+      <img
+        src="/step-list-icon.svg"
+        alt="list-icon"
       >
-        <line
-          x1="6"
-          y1="2.53066e-08"
-          x2="6"
-          y2="38"
-          stroke="#8192A9"
-          stroke-width="2"
-          stroke-dasharray="2 3"
-        />
-        <circle
-          cx="6"
-          cy="19"
-          r="5"
-          fill="#F9F9F9"
-          stroke="#8192A9"
-          stroke-width="2"
-        />
-      </svg>
       <ul>
         <li>
-          {{ step.destination }} : <strong> {{ step.date }} </strong>
+          {{ step.destination }} : <strong> {{ getDate(step.date) }} </strong>
         </li>
-        <li
-          v-for="(detail, index) in step.details"
-          :key="index"
-        >
-          {{ detail.key }} : <strong>{{ detail.value }}</strong>
+        <li>
+          {{ step.passengersCount.key }} : <strong>{{ step.passengersCount.value }}</strong>
         </li>
+        <ul v-if="step.phone.length > 0">
+          Téléphone :
+          <li
+            v-for="(phone, i) in step.phone"
+            :key="i"
+          >
+            {{ phone }}
+          </li>
+        </ul>
       </ul>
     </div>
   </div>
 </template>
 
 <script>
+import { DateTime } from 'luxon';
+
 export default {
   props: {
     steps: {
       type: Array,
       default: () => [],
     },
   },
+  methods: {
+    getDate(date) {
+      return DateTime.fromISO(date).toFormat("HH 'h' mm");
+    },
+  },
 };
 </script>
 

components/step/locations.vue

@@ -1,36 +1,9 @@
 <template>
   <div class="locations">
-    <svg
-      width="12"
-      height="73"
-      viewBox="0 0 12 73"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
+    <img
+      src="/locations-icon.svg"
+      alt="locations-icon"
     >
-      <line
-        x1="6"
-        y1="12"
-        x2="6"
-        y2="61"
-        stroke="black"
-        stroke-width="2"
-        stroke-dasharray="2 3"
-      />
-      <circle
-        cx="6"
-        cy="67"
-        r="5"
-        stroke="#1C1C1C"
-        stroke-width="2"
-      />
-      <circle
-        cx="6"
-        cy="6"
-        r="5"
-        stroke="#1C1C1C"
-        stroke-width="2"
-      />
-    </svg>
     <div class="container">
       <div class="departure">
         <p>Départ</p>
@@ -65,7 +38,7 @@ export default {
   .locations {
     position: relative;
     margin-bottom: 1em;
-    svg {
+    img {
       position: absolute;
       left: 0;
       bottom: .5em;