Format Home component

frontend/src/views/Home.vue

@@ -4,18 +4,18 @@
       <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">Username: {{username}}</p>
           <p style="font-size:15pt">Firstname: {{firstname}}</p>
           <p style="font-size:15pt">Lastname: {{lastname}}</p>
         </v-card>
       </v-col>
-         <v-col cols="6">
+      <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">Longitude: {{location.longitude}}</p>
-            <p  style="font-size:15pt">Latitude: {{location.latitude}}</p>
+            <p style="font-size:15pt">Latitude: {{location.latitude}}</p>
-            <p  style="font-size:15pt">Radius: {{location.radius}}</p>
+            <p style="font-size:15pt">Radius: {{location.radius}}</p>
           </div>
           <div v-if="haveLocation == false">
             <p style="font-size:30pt">Location</p>
@@ -31,11 +31,10 @@
               <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"
+                    color="red"
-  v-bind:class="{'d-none':today.type == 'PAID'}"
+                    v-bind:class="{'d-none':today.type == 'PAID'}"
->mdi-currency-usd-off</v-icon>{{" " + today.type}}</pre>
+                  >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>
                 </v-card>
               </v-col>
@@ -46,16 +45,12 @@
 
       <v-col cols="6">
         <v-card>
-           <p class="pa-2" style="font-size:30pt">Accounts</p>
+          <p class="pa-2" style="font-size:30pt">Accounts</p>
-          <div
+          <div :key="timeTrackAccount._links.self.href" v-for="timeTrackAccount in timeTrackAccounts">
-            :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>
                 </v-card>
               </v-col>
@@ -63,7 +58,6 @@
           </div>
         </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>
@@ -72,109 +66,95 @@
 </template>
 
 <script>
+  import {baseUri} from "../variables.js";
 
+  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;
+          }
+        };
+        xhttp.open("GET", baseUri + "/records/search/today", false);
+        xhttp.setRequestHeader("Authorization", sessionStorage.getItem("jwt"));
+        xhttp.send(null);
 
-import { baseUri } from "../variables.js";
+        for (let index = 0; index < today.length; index++) {
-export default {
+          var record = today[index];
-  name: "Home",
+          var start = record.startdate;
-  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;
-      }
-    };
-    xhttp.open("GET", baseUri + "/records/search/today", false);
 
-    xhttp.setRequestHeader("Authorization", sessionStorage.getItem("jwt"));
+          start = start.split("T");
+          today[index].startdate = start[1];
 
-    xhttp.send(null);
+          try {
+            var end = record.enddate;
+            end = end.split("T");
+            today[index].enddate = end[1];
+          } catch (e) {
+            today[index].enddate = "pending";
+          }
+        }
+        this.todaysRecord = today;
 
-    for (let index = 0; index < today.length; index++) {
+        var timeTrackAccountsTMP;
-      var record = today[index];
+        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",
+          baseUri +
+          "/accounts/search/findByUsername?username=" +
+          sessionStorage.getItem("username"),
+          false
+        );
 
-      var start = record.startdate;
+        accountxhttp.setRequestHeader("Authorization", sessionStorage.getItem("jwt"));
+        accountxhttp.send(null);
+        this.timeTrackAccounts = timeTrackAccountsTMP;
 
-      start = start.split("T");
+        //Get Location
-      today[index].startdate = start[1];
+        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",
+          baseUri + "/users/" + sessionStorage.getItem("userIDOwn") + "/location",
+          false
+        );
 
-      try {
+        locationxhttp.setRequestHeader("Authorization", sessionStorage.getItem("jwt"));
-        var end = record.enddate;
+        locationxhttp.send(null);
-        end = end.split("T");
+
-        today[index].enddate = end[1];
+        this.haveLocation = locSuc;
-      } catch (e) {
+        this.location = location;
-        today[index].enddate = "pending";
       }
     }
-    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",
-      baseUri +
-        "/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",
-      baseUri + "/users/" + sessionStorage.getItem("userIDOwn") + "/location",
-      false
-    );
-
-    locationxhttp.setRequestHeader(
-      "Authorization",
-      sessionStorage.getItem("jwt")
-    );
-
-    locationxhttp.send(null);
-  
-
-    this.haveLocation = locSuc;
-    this.location = location;
-  }
-  }
-};
 </script>
-
-