Rework javascript of createTimerecord page
This commit is contained in:
parent
420ab2d278
commit
651698d833
@ -1,256 +1,127 @@
|
||||
<template>
|
||||
<v-container id="createRecordListen">
|
||||
<v-container @keyup.enter.prevent="addRecord">
|
||||
<v-card align-center>
|
||||
<p class="text-center logowhite--text" style="font-size:30pt">Details</p>
|
||||
|
||||
<v-row>
|
||||
<v-col cols="6">
|
||||
<v-select
|
||||
v-model="newtype"
|
||||
:items="types"
|
||||
menu-props="auto"
|
||||
label="Type"
|
||||
hide-details
|
||||
prepend-icon="mdi-currency-usd"
|
||||
single-line
|
||||
></v-select>
|
||||
<v-select v-model="entryData.type" :items="types" menu-props="auto" label="Type" hide-details
|
||||
prepend-icon="mdi-currency-usd" single-line></v-select>
|
||||
</v-col>
|
||||
<v-col cols="6">
|
||||
<v-select
|
||||
v-model="accountname"
|
||||
:items="accounts"
|
||||
menu-props="auto"
|
||||
label="Account"
|
||||
hide-details
|
||||
prepend-icon="mdi-account-tie"
|
||||
single-line
|
||||
></v-select>
|
||||
<v-select v-model="entryData.account" :items="accounts" menu-props="auto" label="Account" hide-details
|
||||
prepend-icon="mdi-account-tie" single-line></v-select>
|
||||
</v-col>
|
||||
</v-row>
|
||||
<v-row>
|
||||
<v-col cols="12" sm="6">
|
||||
<v-menu
|
||||
ref="menu"
|
||||
v-model="menu"
|
||||
:close-on-content-click="false"
|
||||
:nudge-right="40"
|
||||
transition="scale-transition"
|
||||
offset-y
|
||||
min-width="290px"
|
||||
>
|
||||
<v-menu ref="showDatepickerStartdate" v-model="showDatepickerStartdate" :close-on-content-click="false"
|
||||
:nudge-right="40" 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>
|
||||
<v-text-field v-model="entryData.startdate" label="Startdate" prepend-icon="mdi-calendar-range" readonly
|
||||
v-on="on"></v-text-field>
|
||||
</template>
|
||||
<v-date-picker v-model="newstartdate" @input="menu = false" no-title scrollable></v-date-picker>
|
||||
<v-date-picker v-model="entryData.startdate" @input="showDatepickerStartdate = false" no-title
|
||||
scrollable></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"
|
||||
:nudge-right="40"
|
||||
transition="scale-transition"
|
||||
offset-y
|
||||
min-width="290px"
|
||||
>
|
||||
<v-menu ref="showDatepickerEnddate" v-model="showDatepickerEnddate"
|
||||
:close-on-content-click="false" :nudge-right="40" 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>
|
||||
<v-text-field v-model="entryData.enddate" label="Enddate"
|
||||
prepend-icon="mdi-calendar-range" readonly v-on="on"></v-text-field>
|
||||
</template>
|
||||
<v-date-picker v-model="newenddate" @input="menu2 = false" no-title scrollable></v-date-picker>
|
||||
<v-date-picker v-model="entryData.enddate" @input="showDatepickerEnddate = false" no-title
|
||||
scrollable></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"
|
||||
>
|
||||
<v-menu ref="showTimepickerStarttime" v-model="showTimepickerStarttime" :close-on-content-click="false"
|
||||
:nudge-right="40" :return-value.sync="entryData.starttime" 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>
|
||||
<v-text-field v-model="entryData.starttime" 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
|
||||
format="24hr"
|
||||
@click:minute="$refs.menutime.save(timestart)"
|
||||
></v-time-picker>
|
||||
<v-time-picker v-if="showTimepickerStarttime" v-model="entryData.starttime" full-width format="24hr"
|
||||
@click:minute="$refs.showTimepickerStarttime.save(entryData.starttime)"></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"
|
||||
>
|
||||
<v-menu ref="showTimepickerEndtime" v-model="showTimepickerEndtime" :close-on-content-click="false"
|
||||
:nudge-right="40" :return-value.sync="entryData.endtime" 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>
|
||||
<v-text-field v-model="entryData.endtime" 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
|
||||
format="24hr"
|
||||
@click:minute="$refs.menutime2.save(timeend)"
|
||||
></v-time-picker>
|
||||
<v-time-picker v-if="showTimepickerEndtime" v-model="entryData.endtime" full-width format="24hr"
|
||||
@click:minute="$refs.showTimepickerEndtime.save(entryData.endtime)"></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>
|
||||
<v-btn rounded color="logowhite" outlined dark @click="addRecord">Add</v-btn>
|
||||
</div>
|
||||
</v-card>
|
||||
</v-container>
|
||||
</template>
|
||||
<script>
|
||||
import {BASE_URI} from "../globals";
|
||||
import axios from "axios"
|
||||
|
||||
export default {
|
||||
name: "CreateTimeTrackAccount",
|
||||
data: () => ({
|
||||
timestart: null,
|
||||
menutime: false,
|
||||
timeend: null,
|
||||
menutime2: false,
|
||||
menu: false,
|
||||
menu2: false,
|
||||
types: ["PAID", "BREAK"],
|
||||
accounts: "",
|
||||
user: sessionStorage.getItem("timeTrackAccountListUserId"),
|
||||
newstartdate: "",
|
||||
newenddate: "",
|
||||
newtype: "",
|
||||
accountname: ""
|
||||
}),
|
||||
data() {
|
||||
return {
|
||||
entryData: {
|
||||
type: "",
|
||||
account: "",
|
||||
startdate: "",
|
||||
starttime: "",
|
||||
enddate: "",
|
||||
endtime: ""
|
||||
},
|
||||
types: ["PAID", "BREAK"],
|
||||
accounts: [],
|
||||
showTimepickerStarttime: false,
|
||||
showTimepickerEndtime: false,
|
||||
showDatepickerStartdate: false,
|
||||
showDatepickerEnddate: false,
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
addRecord() {
|
||||
var account = "";
|
||||
var accountxhttp = new XMLHttpRequest();
|
||||
|
||||
accountxhttp.onreadystatechange = function () {
|
||||
if ((this.status == 200) & (this.readyState == 4)) {
|
||||
account = JSON.parse(accountxhttp.responseText);
|
||||
account = account._links.self.href;
|
||||
async addRecord() {
|
||||
// Map accountname to corresponding backend url
|
||||
let accountsResponse = await axios.get(BASE_URI + "/accounts/search/findByUsernameAndName", {
|
||||
params: {
|
||||
username: sessionStorage.getItem("username"),
|
||||
account: this.entryData.account
|
||||
}
|
||||
};
|
||||
accountxhttp.open(
|
||||
"GET",
|
||||
BASE_URI +
|
||||
"/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;
|
||||
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;
|
||||
}
|
||||
};
|
||||
xhttp.open("POST", BASE_URI + "/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");
|
||||
}
|
||||
if (Object.values(this.entryData).every(entry => entry)) {
|
||||
await axios.post(BASE_URI + "/records", {
|
||||
startdate: `${this.entryData.startdate}T${this.entryData.starttime}`,
|
||||
enddate: `${this.entryData.enddate}T${this.entryData.endtime}`,
|
||||
type: this.entryData.type,
|
||||
account: accountsResponse.data._links.self.href
|
||||
})
|
||||
await this.$router.push("/timerecords")
|
||||
}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
var accountsxhttp = new XMLHttpRequest();
|
||||
var accounts;
|
||||
accountsxhttp.onreadystatechange = function () {
|
||||
if ((this.status == 200) & (this.readyState == 4)) {
|
||||
accounts = JSON.parse(accountsxhttp.responseText);
|
||||
accounts = accounts._embedded.accounts;
|
||||
async created() {
|
||||
let accountsResponse = await axios.get(BASE_URI + "/accounts/search/findByUsername", {
|
||||
params: {
|
||||
username: sessionStorage.getItem("username")
|
||||
}
|
||||
};
|
||||
accountsxhttp.open(
|
||||
"GET",
|
||||
BASE_URI +
|
||||
"/accounts/search/findByUsername?username=" +
|
||||
sessionStorage.getItem("username"),
|
||||
false
|
||||
);
|
||||
accountsxhttp.setRequestHeader("Content-Type", "application/json");
|
||||
accountsxhttp.setRequestHeader("Authorization", sessionStorage.getItem("jwt"));
|
||||
accountsxhttp.send(null);
|
||||
var accountnames = [];
|
||||
for (let index = 0; index < accounts.length; index++) {
|
||||
accountnames[index] = accounts[index].name;
|
||||
}
|
||||
this.accounts = accountnames;
|
||||
},
|
||||
mounted() {
|
||||
var listen = document.getElementById("createRecordListen");
|
||||
|
||||
listen.addEventListener("keyup", e => {
|
||||
if (e.keyCode === 13) {
|
||||
e.preventDefault();
|
||||
this.addRecord();
|
||||
}
|
||||
});
|
||||
})
|
||||
this.accounts = accountsResponse.data._embedded.accounts.map(value => value.name)
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user