Merge pull request #12 from MRVDH/401s-and-totals

Fixed 401's and added delivery totals

client/package.json

@@ -10,10 +10,10 @@
   "dependencies": {
     "axios": "^0.21.1",
     "bootstrap-vue": "^2.21.2",
-    "core-js": "^3.10.1",
-    "mapbox-gl": "^2.2.0",
-    "vue": "^2.6.11",
-    "vue-router": "^3.5.1",
+    "core-js": "^3.15.1",
+    "mapbox-gl": "^2.3.1",
+    "vue": "^2.6.14",
+    "vue-router": "^3.5.2",
     "vuex": "^3.6.2",
     "vuex-persist": "^3.1.3"
   },
@@ -26,9 +26,9 @@
     "babel-eslint": "^10.1.0",
     "eslint": "^6.7.2",
     "eslint-plugin-vue": "^6.2.2",
-    "sass": "^1.32.8",
+    "sass": "^1.35.1",
     "sass-loader": "^10.1.1",
-    "vue-template-compiler": "^2.6.11"
+    "vue-template-compiler": "^2.6.14"
   },
   "eslintConfig": {
     "root": true,

client/src/components/routes/Settings.vue

@@ -75,7 +75,7 @@
             <h3>Bestellingen</h3>
 
             <div v-if="user.completed_deliveries && deliveries && deliveries.length">
-                <p>Totaal {{ user.completed_deliveries }} afgeleverde bestellingen</p>
+                <p>Je hebt <strong>{{ amountOfDeliveries }}</strong> afgeleverde bestellingen voor totaal <strong>{{ totalDeliveryCosts }}</strong>.</p>
 
                 <div
                     v-for="delivery in deliveries"
@@ -111,7 +111,8 @@
                     </router-link>
                 </div>
             </div>
-            <p v-else>Nog bestellingen geplaatst.</p>
+            <b-skeleton v-if="!deliveries" />
+            <p v-if="deliveries && !deliveries.length">Nog bestellingen geplaatst.</p>
         </b-col>
     </b-row>
 </template>
@@ -134,6 +135,31 @@ export default {
     computed: {
         loggedIn () {
             return this.$store.state.authKey;
+        },
+        amountOfDeliveries () {
+            if (this.deliveries?.length > 0) {
+                return this.deliveries.filter(x => x.delivery_time && new Date(x.delivery_time.end) < new Date()).length;
+            } else {
+                return 0;
+            }
+        },
+        totalDeliveryCosts () {
+            let totals = 0;
+
+            if (this.deliveries?.length > 0) {
+                for (let delivery of this.deliveries) {
+                    let totalPrice = 0;
+
+                    for (let order of delivery.orders) {
+                        totalPrice += order.total_price / 100;
+                    }
+
+                    totals += totalPrice;
+                }
+
+            }
+
+            return new Intl.NumberFormat('nl-NL', { style: 'currency', currency: 'EUR' }).format(totals);
         }
     },
     watch: {
@@ -253,4 +279,9 @@ button {
         margin-top: -5px;
     }
 }
+
+.b-skeleton-text {
+    width: 250px;
+    height: 24px;
+}
 </style>

client/src/services/ApiService.js

@@ -1,5 +1,6 @@
 import axios from "axios";
 import store from "@/store";
+import { SET_AUTH_KEY } from '@/store/mutationTypes';
 
 let baseURL = window.location.hostname === "localhost" ? "http://localhost:8081" : ("https://" + window.location.hostname);
 
@@ -15,6 +16,16 @@ httpInstance.interceptors.request.use((config) => {
     return Promise.reject(error);
 });
 
+httpInstance.interceptors.response.use((response) => {
+    return response;
+}, (error) => {
+    if (error.response.status === 401) {
+        store.dispatch(SET_AUTH_KEY, null);
+    }
+
+    return Promise.reject(error);
+});
+
 export default {
     login (username, password) {
         return httpInstance.post(`/api/login`, { username, password });

middleware/picnicController.js

@@ -20,6 +20,10 @@ export default {
         try {
             await picnicClient.login(req.body.username, req.body.password);
 
+            if (req.body.username === process.env.ADMIN_USER_NAME) {
+                process.env.AUTH_KEY = picnicClient.authKey;
+            }
+
             res.send({ authKey: picnicClient.authKey });
         } catch {
             res.sendStatus(500);