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

Implemented fill home with contend

Browse Source
This commit is contained in:
Tim Zieger 2020-05-31 20:55:25 +02:00
parent ea4493f955
commit b07e5cd357
2 changed files with 165 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
frontend/src/App.vue
View File

@ -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") +

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

@ -1,25 +1,179 @@
<template>
<div class="home">
<h3>Home View</h3>
<v-container fluid>
<v-row v-if="loggedIn == 'true'">
<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>