hft-informatik/ubiquitous-computing-geo-timetracking
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Rework home to get data async with axios

Browse Source 
Some layout adjustments
This commit is contained in:
Marcel Schwarz 2020-07-26 20:02:02 +02:00
parent 0cb3cbe2d3
commit 80d16b15d8
1 changed files with 79 additions and 106 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

167
frontend/src/views/Home.vue
View File

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