Select vehicle when importing drivvo csv.

Select what vehicle to import for on frontend. Actually import the data to the db

ui/src/router/views/import-drivvo.vue

@@ -9,8 +9,24 @@ export default {
     meta: [{ name: 'description', content: 'The Import Drivvo page.' }],
   },
   components: { Layout },
+  props: {
+    user: {
+      type: Object,
+      required: true,
+    },
+  },
+  data: function() {
+    return {
+      myVehicles: [],
+      file: null,
+      selectedVehicle: null,
+      tryingToCreate: false,
+      errors: [],
+    }
+  },
   computed: {
     ...mapState('utils', ['isMobile']),
+    ...mapState('vehicles', ['vehicles']),
     uploadButtonLabel() {
       if (this.isMobile) {
         if (this.file == null) {
@@ -27,18 +43,8 @@ export default {
       }
     },
   },
-  props: {
-    user: {
-      type: Object,
-      required: true,
-    },
-  },
-  data: function() {
-    return {
-      file: null,
-      tryingToCreate: false,
-      errors: [],
-    }
+  mounted() {
+    this.myVehicles = this.vehicles
   },
   methods: {
     importDrivvo() {
@@ -49,6 +55,7 @@ export default {
       this.tryingToCreate = true
       this.errorMessage = ''
       const formData = new FormData()
+      formData.append('vehicleID', this.selectedVehicle)
       formData.append('file', this.file, this.file.name)
       axios
         .post(`/api/import/drivvo`, formData)
@@ -92,31 +99,35 @@ export default {
         <!-- TODO: Write about that income and trips are not imported. Also Second and Third fuel are ignored -->
         <p class="subtitle"> Steps to import data from Drivvo</p>
         <ol>
+          <li>Export your data from Drivvo in the CSV format.</li>
+          <li>Select the vehicle the exported data is for. You may need to create the vehicle in Hammond first if you haven't already done so</li>
           <li
-            >Export your data from Fuelly in the CSV format. Steps to do that can be found
-            <a href="http://docs.fuelly.com/acar-import-export-center" target="_nofollow">here</a>.</li
-          >
-          <li>Make sure that you have already created the vehicles in Hammond platform.</li>
-          <li>Make sure that the Vehicle nickname in Hammond is exactly the same as the name on Fuelly CSV or the import will not work.</li>
-          <li
-            >Make sure that the <u>Currency</u> and <u>Distance Unit</u> are set correctly in Hammond. Import will not autodetect Currency from the
-            CSV but use the one set for the user.</li
+            >Make sure that the <u>Currency</u> and <u>Distance Unit</u> are set correctly in Hammond. Drivvo does not include this information in
+            their export, instead Hammond will use the values set for the user.</li
           >
           <li>Similiarly, make sure that the <u>Fuel Unit</u> and <u>Fuel Type</u> are correctly set in the Vehicle.</li>
-          <li>Once you have checked all these points,just import the CSV below.</li>
-          <li><b>Make sure that you do not import the file again and that will create repeat entries.</b></li>
+          <li>Once you have checked all these points, select the vehicle and import the CSV below.</li>
+          <li><b>Make sure that you do not import the file again as that will create repeat entries.</b></li>
         </ol>
       </div>
     </div>
     <div class="section box">
-      <div class="columns">
-        <div class="column is-two-thirds"> <p class="subtitle">Choose the Drivvo CSV and press the import button.</p></div>
-        <div class="column is-one-third is-flex is-align-content-center">
+      <div class="columns is-multiline">
+        <div class="column is-full"> <p class="subtitle">Choose the vehicle, then select the Drivvo CSV and press the import button.</p></div>
+        <div class="column is-full is-flex is-align-content-center">
           <form @submit.prevent="importDrivvo">
-            <div class="columns"
-              ><div class="column">
+            <div class="columns">
+              <div class="column">
+                <b-field label="Vehicle" label-position="on-border">
+                  <b-select v-model="selectedVehicle" placeholder="Select Vehicle" required>
+                    <option v-for="vehicle in myVehicles" :key="vehicle.id" :value="vehicle.id">{{ vehicle.nickname }}</option>
+                  </b-select>
+                </b-field>
+              </div>
+
+              <div class="column">
                 <b-field class="file is-primary" :class="{ 'has-name': !!file }">
-                  <b-upload v-model="file" class="file-label" accept=".csv">
+                  <b-upload v-model="file" class="file-label" accept=".csv" required>
                     <span class="file-cta">
                       <b-icon class="file-icon" icon="upload"></b-icon>
                       <span class="file-label">{{ uploadButtonLabel }}</span>

ui/src/router/views/import-fuelly.vue

@@ -114,7 +114,7 @@ export default {
             <div class="columns"
               ><div class="column">
                 <b-field class="file is-primary" :class="{ 'has-name': !!file }">
-                  <b-upload v-model="file" class="file-label" accept=".csv">
+                  <b-upload v-model="file" class="file-label" accept=".csv" required>
                     <span class="file-cta">
                       <b-icon class="file-icon" icon="upload"></b-icon>
                       <span class="file-label">{{ uploadButtonLabel }}</span>