Rework home to get data async with axios
Some layout adjustments
This commit is contained in:
parent
0cb3cbe2d3
commit
80d16b15d8
@ -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>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user