Format Home component
This commit is contained in:
parent
3321f4a58a
commit
6f9e9141b7
@ -4,18 +4,18 @@
|
||||
<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">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-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>
|
||||
<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>
|
||||
@ -31,11 +31,10 @@
|
||||
<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>
|
||||
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>
|
||||
@ -46,16 +45,12 @@
|
||||
|
||||
<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"
|
||||
>
|
||||
<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>
|
||||
@ -63,7 +58,6 @@
|
||||
</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>
|
||||
@ -72,109 +66,95 @@
|
||||
</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);
|
||||
|
||||
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);
|
||||
for (let index = 0; index < today.length; index++) {
|
||||
var record = today[index];
|
||||
var start = record.startdate;
|
||||
|
||||
xhttp.setRequestHeader("Authorization", sessionStorage.getItem("jwt"));
|
||||
start = start.split("T");
|
||||
today[index].startdate = start[1];
|
||||
|
||||
xhttp.send(null);
|
||||
try {
|
||||
var end = record.enddate;
|
||||
end = end.split("T");
|
||||
today[index].enddate = end[1];
|
||||
} catch (e) {
|
||||
today[index].enddate = "pending";
|
||||
}
|
||||
}
|
||||
this.todaysRecord = today;
|
||||
|
||||
for (let index = 0; index < today.length; index++) {
|
||||
var record = today[index];
|
||||
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
|
||||
);
|
||||
|
||||
var start = record.startdate;
|
||||
accountxhttp.setRequestHeader("Authorization", sessionStorage.getItem("jwt"));
|
||||
accountxhttp.send(null);
|
||||
this.timeTrackAccounts = timeTrackAccountsTMP;
|
||||
|
||||
start = start.split("T");
|
||||
today[index].startdate = start[1];
|
||||
//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
|
||||
);
|
||||
|
||||
try {
|
||||
var end = record.enddate;
|
||||
end = end.split("T");
|
||||
today[index].enddate = end[1];
|
||||
} catch (e) {
|
||||
today[index].enddate = "pending";
|
||||
locationxhttp.setRequestHeader("Authorization", sessionStorage.getItem("jwt"));
|
||||
locationxhttp.send(null);
|
||||
|
||||
this.haveLocation = locSuc;
|
||||
this.location = location;
|
||||
}
|
||||
}
|
||||
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>
|
||||
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user