Implemented fill home with contend

frontend/src/App.vue

@@ -209,6 +209,7 @@ export default {
             sessionStorage.setItem("firstname", userInformation.firstname);
             sessionStorage.setItem("lastname", userInformation.lastname);
             sessionStorage.setItem("username", userInformation.username);
+            sessionStorage.setItem("userIDOwn", userInformation.id);
 
             this.fullname =
               sessionStorage.getItem("firstname") +

frontend/src/views/Home.vue

@@ -1,25 +1,179 @@
 <template>
-  <div class="home">
+  <v-container fluid>
-
+    <v-row v-if="loggedIn == 'true'">
-    <h3>Home View</h3>
+      <v-col cols="6">
-
+        <v-card class="pa-3">
+          <h1>Username: {{username}}</h1>
+          <h2>Firstname: {{firstname}}</h2>
+          <h2>Lastname: {{lastname}}</h2>
+        </v-card>
+      </v-col>
+         <v-col cols="6">
+        <v-card class="pa-3">
+          <div v-if="haveLocation == true">
+            <h1>Location</h1>
+            <p>Longitude: {{location.longitude}}</p>
+            <p>Latitude: {{location.latitude}}</p>
+            <p>Radius: {{location.radius}}</p>
           </div>
+          <div v-if="haveLocation == false">
+            <h1>Location</h1>
+            <p>No location set</p>
+          </div>
+        </v-card>
+      </v-col>
+      <v-col cols="6">
+        <v-card>
+          <h1 class="pa-2">Today</h1>
+          <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>
+                </v-card>
+              </v-col>
+            </v-row>
+          </div>
+        </v-card>
+      </v-col>
+
+      <v-col cols="6">
+        <v-card>
+           <h1 class="pa-2">Accounts</h1>
+          <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>
+                </v-card>
+              </v-col>
+            </v-row>
+          </div>
+        </v-card>
+      </v-col>
+   
+    </v-row>
+    <v-card v-if="loggedIn == 'false'" class="pa-3">
+      <h3>Welcome to geotime</h3>
+    </v-card>
+  </v-container>
 </template>
 
 <script>
 // @ is an alias to /src
 
-
+import { baseUri } from "../variables.js";
 export default {
   name: "Home",
-  components: {
+  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);
+
+    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.todaysRecord = today;
+
+    //Get Accounts
+    var timeTrackAccountsTMP;
+    var userxhttp = new XMLHttpRequest();
+    userxhttp.onreadystatechange = function() {
+      if (this.readyState == 4 && this.status == 200) {
+        timeTrackAccountsTMP = JSON.parse(userxhttp.responseText);
+        timeTrackAccountsTMP = timeTrackAccountsTMP._embedded.accounts;
+      }
+    };
+    userxhttp.open(
+      "GET",
+      baseUri +
+        "/accounts/search/findByUsername?username=" +
+        sessionStorage.getItem("username"),
+      false
+    );
+
+    userxhttp.setRequestHeader("Authorization", sessionStorage.getItem("jwt"));
+
+    userxhttp.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>
 
-<style scoped>
-  .home {
 
-  }
-</style>