pickers
This commit is contained in:
Tim Zieger
parent
f509ad0d9a
commit
3c4cbaf126
@ -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;
|
||||
|
||||
@ -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,29 +134,40 @@
|
||||
</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() {
|
||||
if ((this.status == 200) & (this.readyState == 4)) {
|
||||
suc= true;
|
||||
suc = true;
|
||||
}
|
||||
};
|
||||
xhttp.open("PATCH", link, false);
|
||||
@ -70,7 +176,6 @@ export default {
|
||||
xhttp.setRequestHeader("Authorization", sessionStorage.getItem("jwt"));
|
||||
xhttp.send(
|
||||
"{" +
|
||||
|
||||
' "startdate": "' +
|
||||
this.newstartdate +
|
||||
'", "enddate": "' +
|
||||
@ -79,11 +184,11 @@ export default {
|
||||
this.newtype +
|
||||
'"}'
|
||||
);
|
||||
if(suc == true){
|
||||
this.$router.push( "/timerecords");
|
||||
if (suc == true) {
|
||||
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();
|
||||
|
||||
@ -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)">
|
||||
|
||||
@ -50,15 +50,19 @@ 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");
|
||||
this.$router.push("/edittimerecord");
|
||||
}
|
||||
},
|
||||
createTimeRecord(selfLink) {
|
||||
sessionStorage.setItem("timeRecordEditSelfLink", selfLink);
|
||||
|
||||
this.$router.push( "/createtimerecord");
|
||||
this.$router.push("/createtimerecord");
|
||||
}
|
||||
},
|
||||
created() {
|
||||
@ -114,18 +118,15 @@ export default {
|
||||
records[index].startdate = start[1];
|
||||
records[index].date = start[0];
|
||||
|
||||
try{
|
||||
try {
|
||||
var end = record.enddate;
|
||||
end = end.split("T");
|
||||
records[index].enddate = end[1];
|
||||
}catch(e){
|
||||
} catch (e) {
|
||||
records[index].enddate = "pending";
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
this.timeRecords = records;
|
||||
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user