Add functions for parsing drivvo CSVs.

ui/src/router/routes.js

@@ -410,6 +410,15 @@ export default [
     },
     props: (route) => ({ user: store.state.auth.currentUser || {} }),
   },
+  {
+    path: '/import/drivvo',
+    name: 'import-drivvo',
+    component: () => lazyLoadView(import('@views/import-drivvo.vue')),
+    meta: {
+      authRequired: true,
+    },
+    props: (route) => ({ user: store.state.auth.currentUser || {} }),
+  },
   {
     path: '/logout',
     name: 'logout',

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

@@ -0,0 +1,146 @@
+<script>
+import Layout from '@layouts/main.vue'
+import { mapState } from 'vuex'
+import axios from 'axios'
+
+export default {
+  page: {
+    title: 'Import Drivvo',
+    meta: [{ name: 'description', content: 'The Import Drivvo page.' }],
+  },
+  components: { Layout },
+  computed: {
+    ...mapState('utils', ['isMobile']),
+    uploadButtonLabel() {
+      if (this.isMobile) {
+        if (this.file == null) {
+          return 'Choose Photo'
+        } else {
+          return ''
+        }
+      } else {
+        if (this.file == null) {
+          return 'Choose CSV'
+        } else {
+          return ''
+        }
+      }
+    },
+  },
+  props: {
+    user: {
+      type: Object,
+      required: true,
+    },
+  },
+  data: function() {
+    return {
+      file: null,
+      tryingToCreate: false,
+      errors: [],
+    }
+  },
+  methods: {
+    importDrivvo() {
+      console.log('Import from drivvo')
+      if (this.file == null) {
+        return
+      }
+      this.tryingToCreate = true
+      this.errorMessage = ''
+      const formData = new FormData()
+      formData.append('file', this.file, this.file.name)
+      axios
+        .post(`/api/import/drivvo`, formData)
+        .then((data) => {
+          this.$buefy.toast.open({
+            message: 'Data Imported Successfully',
+            type: 'is-success',
+            duration: 3000,
+          })
+          this.file = null
+        })
+        .catch((ex) => {
+          this.$buefy.toast.open({
+            duration: 5000,
+            message: 'There was some issue with importing the file. Please check the error message',
+            position: 'is-bottom',
+            type: 'is-danger',
+          })
+          if (ex.response && ex.response.data.errors) {
+            this.errors = ex.response.data.errors
+          }
+        })
+        .finally(() => {
+          this.tryingToCreate = false
+        })
+    },
+  },
+}
+</script>
+
+<template>
+  <Layout>
+    <div class="columns box">
+      <div class="column">
+        <h1 class="title">Import from Drivvo</h1>
+      </div>
+    </div>
+    <br />
+    <div class="columns">
+      <div class="column">
+        <!-- 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 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
+          >
+          <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>
+        </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">
+          <form @submit.prevent="importDrivvo">
+            <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">
+                    <span class="file-cta">
+                      <b-icon class="file-icon" icon="upload"></b-icon>
+                      <span class="file-label">{{ uploadButtonLabel }}</span>
+                    </span>
+                    <span v-if="file" class="file-name" :class="isMobile ? 'file-name-mobile' : 'file-name-desktop'">
+                      {{ file.name }}
+                    </span>
+                  </b-upload>
+                </b-field>
+              </div>
+              <div class="column">
+                <b-button tag="input" native-type="submit" :disabled="tryingToCreate" type="is-primary" value="Upload File" class="control">
+                  Import
+                </b-button>
+              </div></div
+            >
+          </form>
+        </div>
+      </div>
+    </div>
+    <b-message v-if="errors.length" type="is-danger">
+      <ul>
+        <li v-for="error in errors" :key="error">{{ error }}</li>
+      </ul>
+    </b-message>
+  </Layout>
+</template>

ui/src/router/views/import.vue

@@ -26,11 +26,22 @@ export default {
     >
     <br />
     <div class="columns">
-      <div class="box column is-one-third" to="/import-fuelly">
-        <h1 class="title">Fuelly</h1>
-        <p>If you have been using Fuelly to store your vehicle data, export the CSV file from Fuelly and click here to import.</p>
-        <br />
-        <b-button type="is-primary" tag="router-link" to="/import/fuelly">Import</b-button>
+      <div class="column is-one-third">
+        <div class="box">
+          <h1 class="title">Fuelly</h1>
+          <p>If you have been using Fuelly to store your vehicle data, export the CSV file from Fuelly and click here to import.</p>
+          <br />
+          <b-button type="is-primary" tag="router-link" to="/import/fuelly">Import</b-button>
+        </div>
+      </div>
+
+      <div class="column is-one-third" to="/import-fuelly">
+        <div class="box">
+          <h1 class="title">Drivvo</h1>
+          <p>Import data stored in Drivvo to Hammond by exporting the CSV file from Drivvo and uploading it here.</p>
+          <br />
+          <b-button type="is-primary" tag="router-link" to="/import/drivvo">Import</b-button>
+        </div>
       </div>
     </div>
   </Layout>