From 80d16b15d85999f53795bff9046ff1d2fba76d60 Mon Sep 17 00:00:00 2001
From: Marcel Schwarz <marcel@icaotix.de>
Date: Sun, 26 Jul 2020 20:02:02 +0200
Subject: [PATCH] Rework home to get data async with axios Some layout
 adjustments

---
 frontend/src/views/Home.vue | 185 +++++++++++++++---------------------
 1 file changed, 79 insertions(+), 106 deletions(-)

diff --git a/frontend/src/views/Home.vue b/frontend/src/views/Home.vue
index 237135a..f663abc 100644
--- a/frontend/src/views/Home.vue
+++ b/frontend/src/views/Home.vue
@@ -1,41 +1,48 @@
 <template>
   <v-container fluid>
-    <v-row v-if="loggedIn == 'true'">
+    <v-row v-if="loggedIn">
       <v-col cols="6">
         <v-card class="pa-3">
-          <p style="font-size:30pt">User Information</p>
-          <p style="font-size:15pt">Username: {{username}}</p>
-          <p style="font-size:15pt">Firstname: {{firstname}}</p>
-          <p style="font-size:15pt">Lastname: {{lastname}}</p>
+          <p class="larger-text">User Information</p>
+          <p>Username: {{username}}</p>
+          <p>Firstname: {{firstname}}</p>
+          <p>Lastname: {{lastname}}</p>
         </v-card>
       </v-col>
       <v-col cols="6">
         <v-card class="pa-3">
-          <div v-if="haveLocation == true">
-            <p style="font-size:30pt">Location</p>
-            <p style="font-size:15pt">Longitude: {{location.longitude}}</p>
-            <p style="font-size:15pt">Latitude: {{location.latitude}}</p>
-            <p style="font-size:15pt">Radius: {{location.radius}}</p>
+          <div v-if="location">
+            <p class="larger-text">Location</p>
+            <p>Longitude: {{location.longitude}}</p>
+            <p>Latitude: {{location.latitude}}</p>
+            <p>Radius: {{location.radius}}</p>
           </div>
-          <div v-if="haveLocation == false">
-            <p style="font-size:30pt">Location</p>
+          <div v-else>
+            <p class="larger-text">Location</p>
             <p>No location set</p>
           </div>
         </v-card>
       </v-col>
       <v-col cols="6">
         <v-card>
-          <p class="pa-2" style="font-size:30pt">Today</p>
+          <p class="pa-2 larger-text">Today</p>
           <div :key="today._links.self.href" v-for="today in todaysRecord">
             <v-row no-gutters align="center">
               <v-col cols="12">
                 <v-card color="background" elevation="0" class="ma-2">
-                  <pre><v-icon color="green" v-bind:class="{'d-none':today.type == 'BREAK'}">mdi-currency-usd</v-icon><v-icon
-                    color="red"
-                    v-bind:class="{'d-none':today.type == 'PAID'}"
-                  >mdi-currency-usd-off</v-icon>{{" " + today.type}}</pre>
-                  <pre><v-icon color="primary">mdi-clock-outline</v-icon>{{" Start " + today.startdate}}</pre>
-                  <pre><v-icon color="primary">mdi-clock-outline</v-icon>{{" End " + today.enddate}}</pre>
+                  <div>
+                    <v-icon color="green" v-if="today.type === 'PAID'">mdi-currency-usd</v-icon>
+                    <v-icon color="red" v-if="today.type === 'BREAK'">mdi-currency-usd-off</v-icon>
+                    {{today.type}}
+                  </div>
+                  <div>
+                    <v-icon color="primary">mdi-clock-outline</v-icon>
+                    Start: {{today.startdate}}
+                  </div>
+                  <div>
+                    <v-icon color="primary">mdi-clock-outline</v-icon>
+                    End: {{today.enddate}}
+                  </div>
                 </v-card>
               </v-col>
             </v-row>
@@ -45,13 +52,19 @@
 
       <v-col cols="6">
         <v-card>
-          <p class="pa-2" style="font-size:30pt">Accounts</p>
+          <p class="pa-2 larger-text">Accounts</p>
           <div :key="timeTrackAccount._links.self.href" v-for="timeTrackAccount in timeTrackAccounts">
             <v-row no-gutters align="center">
               <v-col cols="12">
                 <v-card color="background" elevation="0" class="ma-2">
-                  <pre><v-icon color="primary">mdi-account-tie</v-icon>{{" Account " + timeTrackAccount.name}}</pre>
-                  <pre><v-icon color="primary">mdi-currency-usd</v-icon>{{" Revenue " + timeTrackAccount.revenue}}</pre>
+                  <div>
+                    <v-icon color="primary">mdi-account-tie</v-icon>
+                    Account: {{timeTrackAccount.name}}
+                  </div>
+                  <div>
+                    <v-icon color="primary">mdi-currency-usd</v-icon>
+                    Revenue: {{timeTrackAccount.revenue}}
+                  </div>
                 </v-card>
               </v-col>
             </v-row>
@@ -59,102 +72,62 @@
         </v-card>
       </v-col>
     </v-row>
-    <v-card v-if="loggedIn == 'false'" class="pa-3">
-      <p style="font-size:20pt">Welcome to Geo Timetracking</p>
+    <v-card v-if="!loggedIn" class="pa-3">
+      <p class="larger-text">Welcome to Geo Timetracking</p>
     </v-card>
   </v-container>
 </template>
 
 <script>
   import {BASE_URI} from "../globals.js";
+  import axios from "axios"
 
   export default {
     name: "Home",
-    components: {},
-    data: () => ({
-      username: sessionStorage.getItem("username"),
-      firstname: sessionStorage.getItem("firstname"),
-      lastname: sessionStorage.getItem("lastname"),
-      todaysRecord: "",
-      loggedIn: sessionStorage.getItem("loggedin"),
-      timeTrackAccounts: "",
-      location: "",
-      haveLocation: ""
-    }),
-    created() {
-      if (sessionStorage.getItem("loggedin") == "true") {
-        //Get todays records
-        var xhttp = new XMLHttpRequest();
-        var today;
-        xhttp.onreadystatechange = function () {
-          if (this.readyState == 4 && this.status == 200) {
-            today = JSON.parse(xhttp.responseText);
-            today = today._embedded.records;
+    data() {
+      return {
+        loggedIn: JSON.parse(sessionStorage.getItem("loggedin")),
+        username: sessionStorage.getItem("username"),
+        firstname: sessionStorage.getItem("firstname"),
+        lastname: sessionStorage.getItem("lastname"),
+        todaysRecord: "",
+        timeTrackAccounts: "",
+        location: "",
+        haveLocation: ""
+      }
+    },
+    async created() {
+      if (this.loggedIn) {
+        try {
+          let responses = await Promise.all([
+            axios.get(BASE_URI + "/records/search/today"),
+            axios.get(BASE_URI + "/accounts/search/findByUsername", {params: {username: this.username}}),
+            axios.get(BASE_URI + `/users/${sessionStorage.getItem("userIDOwn")}/location`)
+          ])
+
+          let today = responses[0].data._embedded.records
+          for (let record of today) {
+            record.startdate = record.startdate.split("T")[1]
+            record.enddate = record.enddate ? record.enddate.split("T")[1] : "pending"
           }
-        };
-        xhttp.open("GET", BASE_URI + "/records/search/today", false);
-        xhttp.setRequestHeader("Authorization", sessionStorage.getItem("jwt"));
-        xhttp.send(null);
+          this.todaysRecord = today;
 
-        for (let index = 0; index < today.length; index++) {
-          var record = today[index];
-          var start = record.startdate;
-
-          start = start.split("T");
-          today[index].startdate = start[1];
-
-          try {
-            var end = record.enddate;
-            end = end.split("T");
-            today[index].enddate = end[1];
-          } catch (e) {
-            today[index].enddate = "pending";
-          }
+          this.timeTrackAccounts = responses[1].data._embedded.accounts
+          this.location = responses[2].data
+        } catch (e) {
+          console.log(e)
         }
-        this.todaysRecord = today;
-
-        var timeTrackAccountsTMP;
-        var accountxhttp = new XMLHttpRequest();
-        accountxhttp.onreadystatechange = function () {
-          if (this.readyState == 4 && this.status == 200) {
-            timeTrackAccountsTMP = JSON.parse(accountxhttp.responseText);
-            timeTrackAccountsTMP = timeTrackAccountsTMP._embedded.accounts;
-          }
-        };
-        accountxhttp.open(
-          "GET",
-          BASE_URI +
-          "/accounts/search/findByUsername?username=" +
-          sessionStorage.getItem("username"),
-          false
-        );
-
-        accountxhttp.setRequestHeader("Authorization", sessionStorage.getItem("jwt"));
-        accountxhttp.send(null);
-        this.timeTrackAccounts = timeTrackAccountsTMP;
-
-        //Get Location
-        var location;
-        var locSuc = false;
-        var locationxhttp = new XMLHttpRequest();
-        locationxhttp.onreadystatechange = function () {
-          if (this.readyState == 4 && this.status == 200) {
-            locSuc = true;
-            location = JSON.parse(locationxhttp.responseText);
-          }
-        };
-        locationxhttp.open(
-          "GET",
-          BASE_URI + "/users/" + sessionStorage.getItem("userIDOwn") + "/location",
-          false
-        );
-
-        locationxhttp.setRequestHeader("Authorization", sessionStorage.getItem("jwt"));
-        locationxhttp.send(null);
-
-        this.haveLocation = locSuc;
-        this.location = location;
       }
     }
-  };
+  }
 </script>
+
+<style scoped>
+  p {
+    font-size: 15pt;
+  }
+
+  .larger-text {
+    font-size: 30pt;
+  }
+</style>