delete quick entry and some stats

ui/src/components/mileageChart.vue

@@ -0,0 +1,54 @@
+<script>
+import { Line } from 'vue-chartjs'
+
+import axios from 'axios'
+import { mapState } from 'vuex'
+export default {
+  extends: Line,
+  props: { vehicle: { type: Object, required: true }, since: { type: Date, default: '' }, user: { type: Object, required: true } },
+  computed: {
+    ...mapState('utils', ['isMobile']),
+  },
+  watch: {
+    since(newOne, old) {
+      if (newOne === old) {
+        return
+      }
+      this.fetchMileage()
+    },
+  },
+  data: function() {
+    return {
+      chartData: [],
+    }
+  },
+  mounted() {
+    this.fetchMileage()
+  },
+  methods: {
+    showChart() {
+      var labels = this.chartData.map((x) => x.date.substr(0, 10))
+      var dataset = {
+        steppedLine: true,
+        label: `Mileage (${this.user.distanceUnitDetail.short}/${this.vehicle.fuelUnitDetail.short})`,
+        fill: true,
+        data: this.chartData.map((x) => x.mileage),
+      }
+      this.renderChart({ labels, datasets: [dataset] }, { maintainAspectRatio: false })
+    },
+    fetchMileage() {
+      axios
+        .get(`/api/vehicles/${this.vehicle.id}/mileage`, {
+          params: {
+            since: this.since,
+          },
+        })
+        .then((response) => {
+          this.chartData = response.data
+          this.showChart()
+        })
+        .catch((err) => console.log(err))
+    },
+  },
+}
+</script>

ui/src/router/views/quickEntries.vue

@@ -40,6 +40,12 @@ export default {
     markProcessed(entry) {
       store.dispatch('vehicles/setQuickEntryAsProcessed', { id: entry.id }).then((data) => {})
     },
+    deleteQuickEntry(entry) {
+      var sure = confirm('This will delete this Quick Entry. This step cannot be reversed. Are you sure?')
+      if (sure) {
+        store.dispatch('vehicles/deleteQuickEntry', { id: entry.id }).then((data) => {})
+      }
+    },
     imageModal(url) {
       const h = this.$createElement
       const vnode = h('p', { class: 'image' }, [h('img', { attrs: { src: url } })])
@@ -86,8 +92,10 @@ export default {
               <router-link v-if="entry.processDate === null && vehicles.length" :to="`/vehicles/${vehicles[0].id}/expense`" class="card-footer-item"
                 >Create Expense</router-link
               >
+
               <a v-if="entry.processDate === null" class="card-footer-item" @click="markProcessed(entry)">Mark Processed</a>
-              <p v-else>Processed on {{ parseAndFormatDateTime(entry.processDate) }}</p>
+              <p v-else class="card-footer-item">Processed on {{ parseAndFormatDateTime(entry.processDate) }}</p>
+              <a class="card-footer-item" type="is-danger" @click="deleteQuickEntry(entry)"> Delete</a>
             </footer>
           </div>
         </div>

ui/src/router/views/settings.vue

@@ -181,7 +181,7 @@ export default {
         <table class="table is-hoverable">
           <tr>
             <td>Current Version</td>
-            <td>2021.07.23</td>
+            <td>2021.08.13</td>
           </tr>
           <tr>
             <td>Website</td>

ui/src/router/views/vehicle.vue

@@ -2,10 +2,13 @@
 import Layout from '@layouts/main.vue'
 import { parseAndFormatDate } from '@utils/format-date'
 import { mapState } from 'vuex'
+import { addDays, addMonths } from 'date-fns'
 import axios from 'axios'
 import currencyFormtter from 'currency-formatter'
 import store from '@state/store'
 import ShareVehicle from '@components/shareVehicle.vue'
+import MileageChart from '@components/mileageChart.vue'
+
 export default {
   page() {
     return {
@@ -18,7 +21,7 @@ export default {
       ],
     }
   },
-  components: { Layout },
+  components: { Layout, MileageChart },
   props: {
     vehicle: {
       type: Object,
@@ -36,6 +39,15 @@ export default {
       title: '',
       stats: null,
       users: [],
+      dateRangeOptions: [
+        { label: 'This week', value: 'this_week' },
+        { label: 'This month', value: 'this_month' },
+        { label: 'Past 30 days', value: 'past_30_days' },
+        { label: 'Past 3 months', value: 'past_3_months' },
+        { label: 'This year', value: 'this_year' },
+        { label: 'All Time', value: 'all_time' },
+      ],
+      dateRangeOption: 'past_30_days',
     }
   },
   computed: {
@@ -80,6 +92,7 @@ export default {
       })
     },
   },
+
   mounted() {
     this.fetchFillups()
     this.fetchExpenses()
@@ -105,6 +118,7 @@ export default {
         })
         .catch((err) => console.log(err))
     },
+
     fetchExpenses() {
       axios
         .get(`/api/vehicles/${this.vehicle.id}/expenses`)
@@ -245,6 +259,33 @@ export default {
         },
       })
     },
+    getStartDate() {
+      const toDate = new Date()
+      switch (this.dateRangeOption) {
+        case 'this_week':
+          var currentDayOfWeek = toDate.getDay()
+          var toSubtract = 0
+          if (currentDayOfWeek === 0) {
+            toSubtract = -6
+          }
+          if (currentDayOfWeek > 1) {
+            toSubtract = -1 * (currentDayOfWeek - 1)
+          }
+          return addDays(toDate, toSubtract)
+        case 'this_month':
+          return new Date(toDate.getFullYear(), toDate.getMonth(), 1)
+        case 'past_30_days':
+          return addDays(toDate, -30)
+        case 'past_3_months':
+          return addMonths(toDate, -3)
+        case 'this_year':
+          return new Date(toDate.getFullYear(), 0, 1)
+        case 'all_time':
+          return new Date(1969, 4, 20)
+        default:
+          return new Date(1969, 4, 20)
+      }
+    },
   },
 }
 </script>
@@ -477,5 +518,18 @@ export default {
         <template v-slot:empty> No Attachments so far</template>
       </b-table>
     </div>
+    <div class="box">
+      <div class="columns">
+        <div class="column" :class="isMobile ? 'has-text-centered' : ''"> <h1 class="title">Stats</h1></div>
+        <div class="column">
+          <b-select v-model="dateRangeOption" class="is-pulled-right is-medium">
+            <option v-for="option in dateRangeOptions" :key="option.value" :value="option.value">
+              {{ option.label }}
+            </option>
+          </b-select></div
+        >
+      </div>
+      <MileageChart :vehicle="vehicle" :since="getStartDate()" :user="me" :height="300" />
+    </div>
   </Layout>
 </template>

ui/src/state/modules/vehicles.js

@@ -165,4 +165,11 @@ export const actions = {
       return data
     })
   },
+  deleteQuickEntry({ commit, state, rootState, dispatch }, { id }) {
+    return axios.delete(`/api/quickEntries/${id}`).then((response) => {
+      const data = response.data
+      dispatch('fetchQuickEntries', { force: true })
+      return data
+    })
+  },
 }