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

Merge branch '96-date-and-time-picker-for-timetracks' into 'master'

Browse Source 
Resolve "date and time picker for timetracks"

Closes #96

See merge request marcel.schwarz/2020ss-qbc-geofence-timetracking!81
This commit is contained in:
Tim Zieger 2020-05-30 07:54:30 +00:00
commit f3b9a0879b
4 changed files with 290 additions and 70 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

140
frontend/src/views/CreateTimerecord.vue
View File

@ -4,22 +4,7 @@
<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"
@ -37,7 +22,120 @@
color="primary"
/>
</v-form>
<v-row>
<v-col cols="12" sm="6" >
<v-menu
ref="menu"
v-model="menu"
:close-on-content-click="false"
:return-value.sync="newstartdate"
transition="scale-transition"
offset-y
min-width="290px"
>
<template v-slot:activator="{ on }">
<v-text-field
v-model="newstartdate"
label="Startdate"
prepend-icon="mdi-calendar-range"
readonly
v-on="on"
></v-text-field>
</template>
<v-date-picker v-model="newstartdate" no-title scrollable>
<v-spacer></v-spacer>
<v-btn text color="primary" @click="menu = false">Cancel</v-btn>
<v-btn text color="primary" @click="$refs.menu.save(newstartdate)">OK</v-btn>
</v-date-picker>
</v-menu>
</v-col>
<v-col cols="12" sm="6" >
<v-menu
ref="menu2"
v-model="menu2"
:close-on-content-click="false"
:return-value.sync="newenddate"
transition="scale-transition"
offset-y
min-width="290px"
>
<template v-slot:activator="{ on }">
<v-text-field
v-model="newenddate"
label="Enddate"
prepend-icon="mdi-calendar-range"
readonly
v-on="on"
></v-text-field>
</template>
<v-date-picker v-model="newenddate" no-title scrollable>
<v-spacer></v-spacer>
<v-btn text color="primary" @click="menu2 = false">Cancel</v-btn>
<v-btn text color="primary" @click="$refs.menu2.save(newenddate)">OK</v-btn>
</v-date-picker>
</v-menu>
</v-col>
</v-row>
<v-row>
<v-col cols="12" sm="6">
<v-menu
ref="menutime"
v-model="menutime"
:close-on-content-click="false"
:nudge-right="40"
:return-value.sync="timestart"
transition="scale-transition"
offset-y
max-width="290px"
min-width="290px"
>
<template v-slot:activator="{ on }">
<v-text-field
v-model="timestart"
label="Starttime"
prepend-icon="mdi-clock-outline"
readonly
v-on="on"
></v-text-field>
</template>
<v-time-picker
v-if="menutime"
v-model="timestart"
full-width
@click:minute="$refs.menutime.save(timestart)"
></v-time-picker>
</v-menu>
</v-col>
<v-col cols="12" sm="6">
<v-menu
ref="menutime2"
v-model="menutime2"
:close-on-content-click="false"
:nudge-right="40"
:return-value.sync="timeend"
transition="scale-transition"
offset-y
max-width="290px"
min-width="290px"
>
<template v-slot:activator="{ on }">
<v-text-field
v-model="timeend"
label="Endtime"
prepend-icon="mdi-clock-outline"
readonly
v-on="on"
></v-text-field>
</template>
<v-time-picker
v-if="menutime2"
v-model="timeend"
full-width
@click:minute="$refs.menutime2.save(timeend)"
></v-time-picker>
</v-menu>
</v-col>
</v-row>
<div class="text-center ma-3">
<v-btn rounded color="logowhite" outlined dark v-on:click="addRecord()">Add</v-btn>
</div>
@ -49,6 +147,12 @@ import { baseUri } from "../variables";
export default {
name: "CreateTimeTrackAccount",
data: () => ({
timestart: null,
menutime: false,
timeend: null,
menutime2: false,
menu: false,
menu2: false,
user: sessionStorage.getItem("timeTrackAccountListUserId"),
newstartdate: "",
newenddate: "",
@ -95,6 +199,8 @@ export default {
) {
var xhttp = new XMLHttpRequest();
var suc;
this.newstartdate = this.newstartdate + "T" + this.timestart;
this.newenddate = this.newenddate + "T" + this.timeend;
xhttp.onreadystatechange = function() {
if ((this.status == 201) & (this.readyState == 4)) {
suc = true;

175
frontend/src/views/EditTimerecord.vue
View File

@ -1,7 +1,5 @@
<template >
<v-container id="editRecordListen">
<v-card align-center>
<h3 class="text-center display-2 logowhite--text">Details</h3>
@ -14,24 +12,121 @@
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>
<v-row>
<v-col cols="12" sm="6" >
<v-menu
ref="menu"
v-model="menu"
:close-on-content-click="false"
:return-value.sync="newstartdate"
transition="scale-transition"
offset-y
min-width="290px"
>
<template v-slot:activator="{ on }">
<v-text-field
v-model="newstartdate"
label="Startdate"
prepend-icon="mdi-calendar-range"
readonly
v-on="on"
></v-text-field>
</template>
<v-date-picker v-model="newstartdate" no-title scrollable>
<v-spacer></v-spacer>
<v-btn text color="primary" @click="menu = false">Cancel</v-btn>
<v-btn text color="primary" @click="$refs.menu.save(newstartdate)">OK</v-btn>
</v-date-picker>
</v-menu>
</v-col>
<v-col cols="12" sm="6" >
<v-menu
ref="menu2"
v-model="menu2"
:close-on-content-click="false"
:return-value.sync="newenddate"
transition="scale-transition"
offset-y
min-width="290px"
>
<template v-slot:activator="{ on }">
<v-text-field
v-model="newenddate"
label="Enddate"
prepend-icon="mdi-calendar-range"
readonly
v-on="on"
></v-text-field>
</template>
<v-date-picker v-model="newenddate" no-title scrollable>
<v-spacer></v-spacer>
<v-btn text color="primary" @click="menu2 = false">Cancel</v-btn>
<v-btn text color="primary" @click="$refs.menu2.save(newenddate)">OK</v-btn>
</v-date-picker>
</v-menu>
</v-col>
</v-row>
<v-row>
<v-col cols="11" sm="6">
<v-menu
ref="menutime"
v-model="menutime"
:close-on-content-click="false"
:nudge-right="40"
:return-value.sync="timestart"
transition="scale-transition"
offset-y
max-width="290px"
min-width="290px"
>
<template v-slot:activator="{ on }">
<v-text-field
v-model="timestart"
label="Starttime"
prepend-icon="mdi-clock-outline"
readonly
v-on="on"
></v-text-field>
</template>
<v-time-picker
v-if="menutime"
v-model="timestart"
full-width
@click:minute="$refs.menutime.save(timestart)"
></v-time-picker>
</v-menu>
</v-col>
<v-col cols="11" sm="6">
<v-menu
ref="menutime2"
v-model="menutime2"
:close-on-content-click="false"
:nudge-right="40"
:return-value.sync="timeend"
transition="scale-transition"
offset-y
max-width="290px"
min-width="290px"
>
<template v-slot:activator="{ on }">
<v-text-field
v-model="timeend"
label="Endtime"
prepend-icon="mdi-clock-outline"
readonly
v-on="on"
></v-text-field>
</template>
<v-time-picker
v-if="menutime2"
v-model="timeend"
full-width
@click:minute="$refs.menutime2.save(timeend)"
></v-time-picker>
</v-menu>
</v-col>
</v-row>
<div class="text-center ma-3">
<v-btn rounded color="logowhite" outlined dark v-on:click="editRecord()">Edit</v-btn>
</div>
@ -39,24 +134,35 @@
</v-container>
</template>
<script>
export default {
name: "EditTimeTrackAccount",
data: () => ({
timestart: null,
menutime: false,
timeend: null,
menutime2: false,
menu: false,
menu2: false,
type: "",
stardate: "",
enddate: "",
newtype: "",
newstartdate: "",
newenddate: "",
newstartdate: new Date().toISOString().substr(0, 10),
newenddate: new Date().toISOString().substr(0, 10)
}),
methods: {
editRecord() {
var link = sessionStorage.getItem("timeRecordEditSelfLink");
if (this.newname != this.name || this.newstartdate != this.startdate || this.newenddate != this.enddate) {
if (
this.newname != this.name ||
this.newstartdate != this.startdate ||
this.newenddate != this.enddate
) {
this.newstartdate = this.newstartdate + "T" + this.timestart;
this.newenddate = this.newenddate + "T" + this.timeend;
var xhttp = new XMLHttpRequest();
var suc;
xhttp.onreadystatechange = function() {
@ -70,7 +176,6 @@ export default {
xhttp.setRequestHeader("Authorization", sessionStorage.getItem("jwt"));
xhttp.send(
"{" +
' "startdate": "' +
this.newstartdate +
'", "enddate": "' +
@ -83,7 +188,7 @@ export default {
this.$router.push("/timerecords");
}
}
},
}
},
created() {
var userxhttp = new XMLHttpRequest();
@ -104,16 +209,24 @@ export default {
userxhttp.send(null);
this.type = record.type;
this.startdate = record.startdatte;
this.enddate = record.enddate;
this.startdate = record.startdate;
this.newtype = record.type;
this.newstartdate = record.startdate;
this.newenddate = record.enddate;
var start = record.startdate;
start = start.split("T");
var starttime = start[1];
var startdate = start[0];
this.newstartdate = startdate;
this.timestart = starttime;
var end = record.enddate;
end = end.split("T");
var endtime = end[1];
var enddate = end[0];
this.newenddate = enddate;
this.timeend = endtime;
},
mounted() {
var listen = document.getElementById('editRecordListen');
var listen = document.getElementById("editRecordListen");
listen.addEventListener("keyup", e => {
if (e.keyCode === 13) {
e.preventDefault();

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

@ -54,7 +54,7 @@
<v-icon v-else>mdi-pencil</v-icon>
</v-btn>
</template>
<v-btn fab dark small color="green" @click="$emit('edit-timeRecord', timeRecord._links.self.href)">
<v-btn fab dark small color="green" @click="$emit('edit-timeRecord', timeRecord._links.self.href, timeRecord.enddate)">
<v-icon>mdi-file-document-edit</v-icon>
</v-btn>
<v-btn fab dark small color="red" @click="$emit('del-timeRecord', timeRecord._links.self.href)">

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

@ -50,10 +50,14 @@ export default {
userxhttp.send(null);
},
editTimeRecord(selfLink) {
editTimeRecord(selfLink, end) {
if (end == "pending") {
alert("It's not possible to edit a running track");
} else {
sessionStorage.setItem("timeRecordEditSelfLink", selfLink);
this.$router.push("/edittimerecord");
}
},
createTimeRecord(selfLink) {
sessionStorage.setItem("timeRecordEditSelfLink", selfLink);
@ -121,11 +125,8 @@ export default {
} catch (e) {
records[index].enddate = "pending";
}
}
this.timeRecords = records;
}
};
</script>