ubiquitous-computing-geo-timetracking/frontend/src/views/Home.vue

<template>
  <v-container fluid>
    <v-row v-if="loggedIn == 'true'">
      <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>
        </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>
          <div v-if="haveLocation == false">
            <p style="font-size:30pt">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>
          <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>
           <p class="pa-2" style="font-size:30pt">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>
                </v-card>
              </v-col>
            </v-row>
          </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>
    </v-card>
  </v-container>
</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);

    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;

   
    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>