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

Merge branch '92-time-reccord-data-from-backend' into 'master'

Browse Source 
Resolve "Time Reccord data from Backend"

Closes #92

See merge request marcel.schwarz/2020ss-qbc-geofence-timetracking!73
This commit is contained in:
Tim Zieger 2020-05-27 12:19:30 +00:00
commit 8e2a8208f3
11 changed files with 421 additions and 133 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
frontend/src/router/index.js
View File

@ -14,7 +14,8 @@ import EditUser from "../views/EditUser.vue";
import TimeTrackAccounts from "../views/TimeTrackAccounts.vue";
import EditTimeTrackAccount from "../views/EditTimeTrackAccount.vue"
import CreateTimeTrackAccount from "../views/CreateTimeTrackAccount.vue"
import EditTimerecord from "../views/EditTimerecord.vue"
import CreateTimerecord from "../views/CreateTimerecord.vue"
Vue.use(VueRouter);
const routes = [
@ -90,6 +91,16 @@ const routes = [
name: "Create TimeTrack Account",
component: CreateTimeTrackAccount
},
{
path: "/edittimerecord",
name: "EditTimerecord",
component: EditTimerecord
},
{
path: "/createtimerecord",
name: "CreateTimerecord",
component: CreateTimerecord
},
{
path: '*',
component: missing

1
frontend/src/variables.js
View File

@ -1,2 +1 @@
export const baseUri = 'http://plesk.icaotix.de:5000'
export const selfUri = 'http://plesk.icaotix.de:8080'

11
frontend/src/views/CreateTimeTrackAccount.vue
View File

@ -37,7 +37,7 @@
</v-container>
</template>
<script>
import { baseUri, selfUri } from "../variables";
import { baseUri } from "../variables";
export default {
name: "CreateTimeTrackAccount",
data: () => ({
@ -51,13 +51,13 @@ export default {
addAccount() {
if (this.newname != "" || this.newrevenue != "" || this.newdescription != "") {
var xhttp = new XMLHttpRequest();
var suc;
xhttp.onreadystatechange = function() {
if ((this.status == 201) & (this.readyState == 4)) {
window.location.href = selfUri + "/timetrackaccounts";
suc = true;
}
};
xhttp.open("POST", baseUri + "/accounts", true);
xhttp.open("POST", baseUri + "/accounts", false);
xhttp.setRequestHeader("Content-Type", "application/json");
xhttp.setRequestHeader("Authorization", sessionStorage.getItem("jwt"));
@ -73,6 +73,9 @@ export default {
this.newdescription +
'"}'
);
if (suc == true ) {
this.$router.push("/timetrackaccounts");
}
}
},
},

118
frontend/src/views/CreateTimerecord.vue Normal file
View File

@ -0,0 +1,118 @@
<template >
<v-container>
<v-card align-center>
<h3 class="text-center display-2 logowhite--text">Details</h3>
<v-form>
<v-text-field
label="startdate"
v-model="newstartdate"
name="startdate"
prepend-icon="mdi-clock-outline"
type="text"
color="primary"
/>
<v-text-field
label="enddate"
v-model="newenddate"
name="enddate"
prepend-icon="mdi-clock-outline"
type="text"
color="primary"
/>
<v-text-field
label="type"
v-model="newtype"
name="type"
prepend-icon="mdi-currency-usd"
type="text"
color="primary"
/>
<v-text-field
label="Accountname"
v-model="accountname"
name="accountname"
prepend-icon="mdi-account-tie"
type="text"
color="primary"
/>
</v-form>
<div class="text-center ma-3">
<v-btn rounded color="logowhite" outlined dark v-on:click="addRecord()">Add</v-btn>
</div>
</v-card>
</v-container>
</template>
<script>
import { baseUri} from "../variables";
export default {
name: "CreateTimeTrackAccount",
data: () => ({
user: sessionStorage.getItem("timeTrackAccountListUserId"),
newstartdate: "",
newenddate: "",
newtype: "",
accountname: ""
}),
methods: {
addRecord() {
var account ="";
var accountxhttp = new XMLHttpRequest();
accountxhttp.onreadystatechange = function() {
if ((this.status == 200) & (this.readyState == 4)) {
//account =
account =JSON.parse(accountxhttp.responseText)
account = account._links.self.href;
}
};
accountxhttp.open("GET", baseUri + "/accounts/search/findByUsernameAndName?username=" + sessionStorage.getItem("username")+ "&account=" +this.accountname, false);
accountxhttp.setRequestHeader("Content-Type", "application/json");
accountxhttp.setRequestHeader("Authorization", sessionStorage.getItem("jwt"));
accountxhttp.send( null );
if (this.newstartdate != "" && this.newenddate != "" && this.newdate != "" && account != "" ) {
var xhttp = new XMLHttpRequest();
var suc;
xhttp.onreadystatechange = function() {
if ((this.status == 201) & (this.readyState == 4)) {
suc = true;
}
};
xhttp.open("POST", baseUri + "/records", false);
xhttp.setRequestHeader("Content-Type", "application/json");
xhttp.setRequestHeader("Authorization", sessionStorage.getItem("jwt"));
xhttp.send(
"{" +
'"startdate": "' +
this.newstartdate +
'", "enddate": "' +
this.newenddate +
'", "type": "' +
this.newtype +
'", "account": "' +
account +
'"}'
);
if(suc == true){
this.$router.push( "/timerecords");
}
}
},
},
};
</script>

11
frontend/src/views/EditTimeTrackAccount.vue
View File

@ -44,7 +44,7 @@
</v-container>
</template>
<script>
import { selfUri } from "../variables";
export default {
name: "EditTimeTrackAccount",
data: () => ({
@ -63,13 +63,13 @@ export default {
if (this.newname != this.name || this.newrevenue != this.revenue || this.newdescription != this.description) {
var xhttp = new XMLHttpRequest();
var suc;
xhttp.onreadystatechange = function() {
if ((this.status == 200) & (this.readyState == 4)) {
window.location.href = selfUri + "/timetrackaccounts";
suc =true;
}
};
xhttp.open("PATCH", link, true);
xhttp.open("PATCH", link, false);
xhttp.setRequestHeader("Content-Type", "application/json");
xhttp.setRequestHeader("Authorization", sessionStorage.getItem("jwt"));
@ -83,6 +83,9 @@ export default {
this.newdescription +
'"}'
);
if(suc ==true){
this.$router.push( "/timetrackaccounts");
}
}
},
},

116
frontend/src/views/EditTimerecord.vue Normal file
View File

@ -0,0 +1,116 @@
<template >
<v-container>
<v-card align-center>
<h3 class="text-center display-2 logowhite--text">Details</h3>
<v-form>
<v-text-field
label="type"
v-model="newtype"
name="type"
prepend-icon="mdi-currency-usd"
type="text"
color="primary"
/>
<v-text-field
label="startdate"
v-model="newstartdate"
name="startdate"
prepend-icon="mdi-clock-outline"
type="text"
color="primary"
/>
<v-text-field
label="enddate"
v-model="newenddate"
name="enddate"
prepend-icon="mdi-clock-outline"
type="text"
color="primary"
/>
</v-form>
<div class="text-center ma-3">
<v-btn rounded color="logowhite" outlined dark v-on:click="editRecord()">Edit</v-btn>
</div>
</v-card>
</v-container>
</template>
<script>
export default {
name: "EditTimeTrackAccount",
data: () => ({
type: "",
stardate: "",
enddate: "",
newtype: "",
newstartdate: "",
newenddate: "",
}),
methods: {
editRecord() {
var link = sessionStorage.getItem("timeRecordEditSelfLink");
if (this.newname != this.name || this.newstartdate != this.startdate || this.newenddate != this.enddate) {
var xhttp = new XMLHttpRequest();
var suc;
xhttp.onreadystatechange = function() {
if ((this.status == 200) & (this.readyState == 4)) {
suc= true;
}
};
xhttp.open("PATCH", link, false);
xhttp.setRequestHeader("Content-Type", "application/json");
xhttp.setRequestHeader("Authorization", sessionStorage.getItem("jwt"));
xhttp.send(
"{" +
' "startdate": "' +
this.newstartdate +
'", "enddate": "' +
this.newenddate +
'", "type": "' +
this.newtype +
'"}'
);
if(suc == true){
this.$router.push( "/timerecords");
}
}
},
},
created() {
var userxhttp = new XMLHttpRequest();
var record;
userxhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
record = JSON.parse(userxhttp.responseText);
}
};
userxhttp.open(
"GET",
sessionStorage.getItem("timeRecordEditSelfLink"),
false
);
userxhttp.setRequestHeader("Authorization", sessionStorage.getItem("jwt"));
userxhttp.send(null);
this.type = record.type;
this.startdate = record.startdatte;
this.enddate = record.enddate;
this.newtype = record.type;
this.newstartdate = record.startdate;
this.newenddate = record.enddate;
}
};
</script>

33
frontend/src/views/EditUser.vue
View File

@ -73,7 +73,7 @@
</v-container>
</template>
<script>
import { baseUri,selfUri } from "../variables";
import { baseUri} from "../variables";
export default {
name: "Edituser",
data: () => ({
@ -89,15 +89,16 @@ export default {
editUserInformation() {
var link = sessionStorage.getItem("edituser");
document.getElementById("noudata").innerHTML = "";
var suc;
if (this.firstname != "" && this.lastname != "") {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if ((this.status == 200) & (this.readyState == 4)) {
window.location.href = selfUri + "/users";
suc= true;
}
};
xhttp.open("PATCH", link, true);
xhttp.open("PATCH", link, false);
xhttp.setRequestHeader("Content-Type", "application/json");
xhttp.setRequestHeader("Authorization", sessionStorage.getItem("jwt"));
@ -109,36 +110,45 @@ export default {
this.lastname +
'"}'
);
if(suc == true ){
this.$router.push("/users");
}
} else if (this.firstname != "") {
var xhttpfirst = new XMLHttpRequest();
xhttpfirst.onreadystatechange = function() {
if ((this.status == 200) & (this.readyState == 4)) {
window.location.href = selfUri + "/users";
suc = true;
}
};
xhttpfirst.open("PATCH", link, true);
xhttpfirst.open("PATCH", link, false);
xhttpfirst.setRequestHeader("Content-Type", "application/json");
xhttpfirst.setRequestHeader(
"Authorization",
sessionStorage.getItem("jwt")
);
xhttpfirst.send("{" + '"firstname": "' + this.firstname + '"}');
if(suc == true ){
this.$router.push("/users");
}
} else if (this.lastname != "") {
var xhttplast = new XMLHttpRequest();
xhttplast.onreadystatechange = function() {
if ((this.status == 200) & (this.readyState == 4)) {
window.location.href = selfUri + "/users";
suc = true;
}
};
xhttplast.open("PATCH", link, true);
xhttplast.open("PATCH", link, false);
xhttplast.setRequestHeader("Content-Type", "application/json");
xhttplast.setRequestHeader(
"Authorization",
sessionStorage.getItem("jwt")
);
xhttplast.send("{" + '"lastname": "' + this.lastname + '"}');
if(suc == true ){
this.$router.push("/users");
}
} else {
document.getElementById("noudata").innerHTML = "please fill out at lest one field";
}
@ -179,13 +189,13 @@ export default {
if (numericerror == false) {
var xhttpadd = new XMLHttpRequest();
var suc;
xhttpadd.onreadystatechange = function() {
if ((this.status == 200) & (this.readyState == 4)) {
window.location.href = selfUri + "/users";
suc = true;
}
};
xhttpadd.open("PATCH", link, true);
xhttpadd.open("PATCH", link, false);
xhttpadd.setRequestHeader("Content-Type", "application/json");
xhttpadd.setRequestHeader(
"Authorization",
@ -197,6 +207,9 @@ export default {
sessionStorage.getItem("locationlink") +
'"}'
);
if (suc == true) {
this.$router.push("/users");
}
document.getElementById("locationnotcomplete").innerHTML = "";
sessionStorage.removeItem("locationlink");
}

44
frontend/src/views/TimeRecordItem.vue
View File

@ -2,28 +2,40 @@
<v-card outlined>
<v-list-item class="main_accent">
<v-list-item-content>
<!-- <v-col cols="2" >
<v-card color="background" elevation="0">
<pre><v-icon color="primary">mdi-calendar-range</v-icon>{{" " + timeRecord.date}}</pre>
</v-card>
</v-col> -->
<h3 justify-center>{{timeRecord.date}}</h3>
<v-row no-gutters align="center">
<v-col cols="2">
<v-card color="background" elevation="0">
<pre><v-icon color="green" v-bind:class="{'d-none':timeRecord.type == 'Lunch'}">mdi-currency-usd</v-icon><v-icon color="red" v-bind:class="{'d-none':timeRecord.type == 'Paid'}">mdi-currency-usd-off</v-icon>{{" " + timeRecord.type}}</pre>
</v-card>
</v-col>
<v-col></v-col>
<v-col cols="3">
<v-card color="background" elevation="0">
<pre><v-icon color="primary">mdi-clock-outline</v-icon>{{" " + timeRecord.start}}</pre>
</v-card>
</v-col>
<v-col></v-col>
<v-col cols="3">
<v-card color="background" elevation="0">
<pre><v-icon color="primary">mdi-clock-outline</v-icon>{{" " + timeRecord.end}}</pre>
<pre><v-icon color="green" v-bind:class="{'d-none':timeRecord.type == 'BREAK'}">mdi-currency-usd</v-icon><v-icon color="red" v-bind:class="{'d-none':timeRecord.type == 'PAID'}">mdi-currency-usd-off</v-icon>{{" " + timeRecord.type}}</pre>
</v-card>
</v-col>
<v-col></v-col>
<v-col cols="2">
<v-card color="background" elevation="0">
<pre><v-icon color="primary">mdi-timer</v-icon>{{" " + timeRecord.time}}</pre>
<pre><v-icon color="primary">mdi-clock-outline</v-icon>{{" Start " + timeRecord.startdate}}</pre>
</v-card>
</v-col>
<v-col></v-col>
<v-col cols="2">
<v-card color="background" elevation="0">
<pre><v-icon color="primary">mdi-clock-outline</v-icon>{{" End " + timeRecord.enddate}}</pre>
</v-card>
</v-col>
<v-col></v-col>
<v-col cols="2">
<v-card color="background" elevation="0">
<pre><v-icon color="primary">mdi-timer</v-icon>{{" " + timeRecord.duration}}</pre>
</v-card>
</v-col>
<v-col></v-col>
<v-col cols="2">
<v-card color="background" elevation="0">
<pre><v-icon color="primary">mdi-account-tie</v-icon>{{" " + timeRecord.accountname}}</pre>
</v-card>
</v-col>
<v-col></v-col>
@ -42,10 +54,10 @@
<v-icon v-else>mdi-pencil</v-icon>
</v-btn>
</template>
<v-btn fab dark small color="green" @click="$emit('edit-timeRecord', timeRecord.id)">
<v-btn fab dark small color="green" @click="$emit('edit-timeRecord', timeRecord._links.self.href)">
<v-icon>mdi-file-document-edit</v-icon>
</v-btn>
<v-btn fab dark small color="red" @click="$emit('del-timeRecord', timeRecord.id)">
<v-btn fab dark small color="red" @click="$emit('del-timeRecord', timeRecord._links.self.href)">
<v-icon>mdi-delete</v-icon>
</v-btn>
</v-speed-dial>

165
frontend/src/views/TimeRecords.vue
View File

@ -1,6 +1,6 @@
<template>
<v-container fluid>
<div v-bind:key="timeRecord.id" v-for="timeRecord in timeRecords">
<div v-bind:key="timeRecord._links.self.href" v-for="timeRecord in timeRecords">
<TimeRecordItem
v-bind:timeRecord="timeRecord"
v-on:del-timeRecord="deleteTimeRecord"
@ -21,6 +21,7 @@
<script>
import TimeRecordItem from "./TimeRecordItem.vue";
import { baseUri } from "../variables.js";
export default {
name: "TimeRecords",
@ -29,85 +30,97 @@ export default {
},
data() {
return {
timeRecords: [
{
id: 1,
start: "25.04.2020 / 8:00",
end: "25.04.2020 / 13:00",
time: "5:00",
type: "Paid"
},
{
id: 2,
start: "25.04.2020 / 13:00",
end: "25.04.2020 / 14:00",
time: "1:00",
type: "Lunch"
},
{
id: 3,
start: "25.04.2020 / 14:00 ",
end: "25.04.2020 / 16:30",
time: "2:30",
type: "Paid"
},
{
id: 4,
start: "25.04.2020 / 8:00",
end: "25.04.2020 / 13:00",
time: "10:00",
type: "Paid"
},
{
id: 5,
start: "25.04.2020 / 13:00",
end: "25.04.2020 / 14:00",
time: "1:00",
type: "Lunch"
},
{
id: 6,
start: "25.04.2020 / 14:00 ",
end: "25.04.2020 / 16:30",
time: "2:30",
type: "Paid"
},
{
id: 7,
start: "25.04.2020 / 8:00",
end: "25.04.2020 / 13:00",
time: "5:00",
type: "Paid"
},
{
id: 8,
start: "25.04.2020 / 13:00",
end: "25.04.2020 / 14:00",
time: "1:00",
type: "Lunch"
},
{
id: 9,
start: "25.04.2020 / 14:00 ",
end: "25.04.2020 / 16:30",
time: "2:30",
type: "Paid"
}
]
timeRecords: ""
};
},
methods: {
deleteTimeRecord(id) {
this.timeRecords = this.timeRecords.filter(
timeRecord => timeRecord.id !== id
);
},
editTimeRecord(id) {
alert("Not implemented yet. TimeRecordId: " + id);
},
createTimeRecord() {
alert("Not implemented yet.")
deleteTimeRecord(selfLink) {
var userxhttp = new XMLHttpRequest();
userxhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 204) {
location.reload();
}
};
userxhttp.open("DELETE", selfLink, false);
userxhttp.setRequestHeader(
"Authorization",
sessionStorage.getItem("jwt")
);
userxhttp.send(null);
},
editTimeRecord(selfLink) {
sessionStorage.setItem("timeRecordEditSelfLink", selfLink);
this.$router.push( "/edittimerecord");
},
createTimeRecord(selfLink) {
sessionStorage.setItem("timeRecordEditSelfLink", selfLink);
this.$router.push( "/createtimerecord");
}
},
created() {
var xhttp = new XMLHttpRequest();
var records;
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
var recordsDB = JSON.parse(xhttp.responseText);
records = recordsDB._embedded.records;
}
};
xhttp.open(
"GET",
baseUri +
"/records/search/allForUser?username=" +
sessionStorage.getItem("username"),
false
);
xhttp.setRequestHeader("Authorization", sessionStorage.getItem("jwt"));
xhttp.send(null);
//duration
for (let index = 0; index < records.length; index++) {
var record = records[index];
var time = record.duration;
var hours = time / 60;
hours = Math.floor(hours);
var min = time % 60;
record.duration = hours + "h " + min + "min";
var accxhttp = new XMLHttpRequest();
var acc = "";
accxhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
acc = JSON.parse(accxhttp.responseText);
acc = acc.name;
}
};
accxhttp.open("GET", records[index]._links.self.href + "/account", false);
accxhttp.setRequestHeader("Authorization", sessionStorage.getItem("jwt"));
accxhttp.send(null);
records[index].accountname = acc;
var start = record.startdate;
start = start.split("T");
records[index].startdate = start[1];
records[index].date = start[0];
var end = record.enddate;
end = end.split("T");
records[index].enddate = end[1];
}
this.timeRecords = records;
}
};
</script>

6
frontend/src/views/TimeTrackAccounts.vue
View File

@ -20,7 +20,7 @@
</template>
<script>
import { baseUri, selfUri } from "../variables.js";
import { baseUri} from "../variables.js";
import TimeTrackAccountItem from "./TimeTrackAccountItem.vue";
export default {
@ -53,10 +53,10 @@ export default {
editTimeTrackAccount(selfLink) {
sessionStorage.setItem("timeTrackAccountEditSelfLink", selfLink);
window.location.href = selfUri + "/edittimetrackaccount";
this.$router.push( "/edittimetrackaccount");
},
createTimeTrackAccount() {
window.location.href = selfUri + "/createtimetrackaccount";
this.$router.push( "/createtimetrackaccount");
}
},

6
frontend/src/views/Users.vue
View File

@ -7,7 +7,7 @@
</template>
<script>
import { baseUri,selfUri } from "../variables.js";
import { baseUri} from "../variables.js";
import UsersItems from "./UsersItems.vue";
export default {
components: {
@ -22,7 +22,7 @@ export default {
sessionStorage.setItem("edituser", userlink);
window.location.href = selfUri + "/edituser";
this.$router.push( "/edituser");
},
deluser(selfLink){
var userxhttp = new XMLHttpRequest();
@ -44,7 +44,7 @@ export default {
sessionStorage.setItem("timeTrackAccountListUser", username);
sessionStorage.setItem("timeTrackAccountListUserId", uid);
window.location.href = selfUri + "/timetrackaccounts";
this.$router.push("/timetrackaccounts");
}
},
created() {