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

Format Timerecord related things

Browse Source
This commit is contained in:
Marcel Schwarz 2020-07-21 21:26:49 +02:00
parent e13d157dd6
commit 286d1c7fda
5 changed files with 317 additions and 345 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,7 +1,7 @@
<template > <template>
<v-container id="createRecordListen"> <v-container id="createRecordListen">
<v-card align-center> <v-card align-center>
<p class="text-center logowhite--text" style="font-size:30pt">Details</p> <p class="text-center logowhite--text" style="font-size:30pt">Details</p>
<v-row> <v-row>
<v-col cols="6"> <v-col cols="6">
@ -47,9 +47,7 @@
v-on="on" v-on="on"
></v-text-field> ></v-text-field>
</template> </template>
<v-date-picker v-model="newstartdate" @input="menu = false" no-title scrollable> <v-date-picker v-model="newstartdate" @input="menu = false" no-title scrollable></v-date-picker>
</v-date-picker>
</v-menu> </v-menu>
</v-col> </v-col>
<v-col cols="12" sm="6"> <v-col cols="12" sm="6">
@ -57,7 +55,7 @@
ref="menu2" ref="menu2"
v-model="menu2" v-model="menu2"
:close-on-content-click="false" :close-on-content-click="false"
:nudge-right="40" :nudge-right="40"
transition="scale-transition" transition="scale-transition"
offset-y offset-y
min-width="290px" min-width="290px"
@ -71,9 +69,7 @@
v-on="on" v-on="on"
></v-text-field> ></v-text-field>
</template> </template>
<v-date-picker v-model="newenddate" @input="menu2 = false" no-title scrollable> <v-date-picker v-model="newenddate" @input="menu2 = false" no-title scrollable></v-date-picker>
</v-date-picker>
</v-menu> </v-menu>
</v-col> </v-col>
</v-row> </v-row>
@ -146,68 +142,65 @@
</v-container> </v-container>
</template> </template>
<script> <script>
import { baseUri } from "../variables"; import {baseUri} from "../variables";
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: ""
}),
methods: { export default {
addRecord() { name: "CreateTimeTrackAccount",
var account = ""; data: () => ({
var accountxhttp = new XMLHttpRequest(); timestart: null,
menutime: false,
timeend: null,
menutime2: false,
menu: false,
menu2: false,
types: ["PAID", "BREAK"],
accounts: "",
user: sessionStorage.getItem("timeTrackAccountListUserId"),
newstartdate: "",
newenddate: "",
newtype: "",
accountname: ""
}),
accountxhttp.onreadystatechange = function() { methods: {
if ((this.status == 200) & (this.readyState == 4)) { addRecord() {
account = JSON.parse(accountxhttp.responseText); var account = "";
account = account._links.self.href; var accountxhttp = new XMLHttpRequest();
}
}; accountxhttp.onreadystatechange = function () {
accountxhttp.open( if ((this.status == 200) & (this.readyState == 4)) {
"GET", account = JSON.parse(accountxhttp.responseText);
baseUri + account = account._links.self.href;
}
};
accountxhttp.open(
"GET",
baseUri +
"/accounts/search/findByUsernameAndName?username=" + "/accounts/search/findByUsernameAndName?username=" +
sessionStorage.getItem("username") + sessionStorage.getItem("username") +
"&account=" + "&account=" +
this.accountname, this.accountname,
false false
); );
accountxhttp.setRequestHeader("Content-Type", "application/json"); accountxhttp.setRequestHeader("Content-Type", "application/json");
accountxhttp.setRequestHeader("Authorization", sessionStorage.getItem("jwt"));
accountxhttp.send(null);
accountxhttp.setRequestHeader( if (this.newstartdate != "" && this.newenddate != "" && this.newdate != "" && account != "") {
"Authorization", var xhttp = new XMLHttpRequest();
sessionStorage.getItem("jwt") var suc;
); this.newstartdate = this.newstartdate + "T" + this.timestart;
accountxhttp.send(null); this.newenddate = this.newenddate + "T" + this.timeend;
xhttp.onreadystatechange = function () {
if (this.newstartdate != "" && this.newenddate != "" && this.newdate != "" && account != "") { if ((this.status == 201) & (this.readyState == 4)) {
var xhttp = new XMLHttpRequest(); suc = true;
var suc; }
this.newstartdate = this.newstartdate + "T" + this.timestart; };
this.newenddate = this.newenddate + "T" + this.timeend; xhttp.open("POST", baseUri + "/records", false);
xhttp.onreadystatechange = function() { xhttp.setRequestHeader("Content-Type", "application/json");
if ((this.status == 201) & (this.readyState == 4)) { xhttp.setRequestHeader("Authorization", sessionStorage.getItem("jwt"));
suc = true; xhttp.send(
} "{" +
};
xhttp.open("POST", baseUri + "/records", false);
xhttp.setRequestHeader("Content-Type", "application/json");
xhttp.setRequestHeader("Authorization", sessionStorage.getItem("jwt"));
xhttp.send(
"{" +
'"startdate": "' + '"startdate": "' +
this.newstartdate + this.newstartdate +
'", "enddate": "' + '", "enddate": "' +
@ -217,54 +210,47 @@ export default {
'", "account": "' + '", "account": "' +
account + account +
'"}' '"}'
); );
if (suc == true) { if (suc == true) {
this.$router.push("/timerecords"); this.$router.push("/timerecords");
}
} }
} }
} },
}, created() {
created (){ var accountsxhttp = new XMLHttpRequest();
var accountsxhttp = new XMLHttpRequest(); var accounts;
var accounts; accountsxhttp.onreadystatechange = function () {
accountsxhttp.onreadystatechange = function() {
if ((this.status == 200) & (this.readyState == 4)) { if ((this.status == 200) & (this.readyState == 4)) {
accounts = JSON.parse(accountsxhttp.responseText); accounts = JSON.parse(accountsxhttp.responseText);
accounts = accounts._embedded.accounts; accounts = accounts._embedded.accounts;
} }
}; };
accountsxhttp.open( accountsxhttp.open(
"GET", "GET",
baseUri + baseUri +
"/accounts/search/findByUsername?username=" + "/accounts/search/findByUsername?username=" +
sessionStorage.getItem("username") , sessionStorage.getItem("username"),
false false
); );
accountsxhttp.setRequestHeader("Content-Type", "application/json"); accountsxhttp.setRequestHeader("Content-Type", "application/json");
accountsxhttp.setRequestHeader("Authorization", sessionStorage.getItem("jwt"));
accountsxhttp.setRequestHeader(
"Authorization",
sessionStorage.getItem("jwt")
);
accountsxhttp.send(null); accountsxhttp.send(null);
var accountnames =[]; var accountnames = [];
for (let index = 0; index < accounts.length; index++) { for (let index = 0; index < accounts.length; index++) {
accountnames[index] = accounts[index].name; accountnames[index] = accounts[index].name;
} }
this.accounts =accountnames; this.accounts = accountnames;
}, },
mounted() { mounted() {
var listen = document.getElementById("createRecordListen"); var listen = document.getElementById("createRecordListen");
listen.addEventListener("keyup", e => { listen.addEventListener("keyup", e => {
if (e.keyCode === 13) { if (e.keyCode === 13) {
e.preventDefault(); e.preventDefault();
this.addRecord();
this.addRecord(); }
} });
}); }
} };
};
</script> </script>

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

@ -1,9 +1,9 @@
<template > <template>
<v-container id="editRecordListen"> <v-container id="editRecordListen">
<v-card align-center> <v-card align-center>
<p class="text-center logowhite--text" style="font-size:30pt">Details</p> <p class="text-center logowhite--text" style="font-size:30pt">Details</p>
<v-col cols="6"> <v-col cols="6">
<v-select <v-select
v-model="newtype" v-model="newtype"
:items="types" :items="types"
@ -15,12 +15,12 @@
></v-select> ></v-select>
</v-col> </v-col>
<v-row> <v-row>
<v-col cols="12" sm="6" > <v-col cols="12" sm="6">
<v-menu <v-menu
ref="menu" ref="menu"
v-model="menu" v-model="menu"
:close-on-content-click="false" :close-on-content-click="false"
:nudge-right="40" :nudge-right="40"
transition="scale-transition" transition="scale-transition"
offset-y offset-y
min-width="290px" min-width="290px"
@ -39,7 +39,7 @@
</v-date-picker> </v-date-picker>
</v-menu> </v-menu>
</v-col> </v-col>
<v-col cols="12" sm="6" > <v-col cols="12" sm="6">
<v-menu <v-menu
ref="menu2" ref="menu2"
v-model="menu2" v-model="menu2"
@ -58,9 +58,7 @@
v-on="on" v-on="on"
></v-text-field> ></v-text-field>
</template> </template>
<v-date-picker v-model="newenddate" @input="menu2 = false" no-title scrollable> <v-date-picker v-model="newenddate" @input="menu2 = false" no-title scrollable></v-date-picker>
</v-date-picker>
</v-menu> </v-menu>
</v-col> </v-col>
</v-row> </v-row>
@ -132,45 +130,46 @@
</v-card> </v-card>
</v-container> </v-container>
</template> </template>
<script> <script>
export default { export default {
name: "EditTimeTrackAccount", name: "EditTimeTrackAccount",
data: () => ({ data: () => ({
timestart: null, timestart: null,
menutime: false, menutime: false,
timeend: null, timeend: null,
menutime2: false, menutime2: false,
menu: false, menu: false,
menu2: false, menu2: false,
types: [ "PAID" ,"BREAK"], types: ["PAID", "BREAK"],
type: "", type: "",
stardate: "", stardate: "",
enddate: "", enddate: "",
newtype: "", newtype: "",
newstartdate: new Date().toISOString().substr(0, 10), newstartdate: new Date().toISOString().substr(0, 10),
newenddate: new Date().toISOString().substr(0, 10) newenddate: new Date().toISOString().substr(0, 10)
}), }),
methods: { methods: {
editRecord() { editRecord() {
var link = sessionStorage.getItem("timeRecordEditSelfLink"); 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.newstartdate = this.newstartdate + "T" + this.timestart;
this.newenddate = this.newenddate + "T" + this.timeend; this.newenddate = this.newenddate + "T" + this.timeend;
var xhttp = new XMLHttpRequest(); var xhttp = new XMLHttpRequest();
var suc; var suc;
xhttp.onreadystatechange = function() { xhttp.onreadystatechange = function () {
if ((this.status == 200) & (this.readyState == 4)) { if ((this.status == 200) & (this.readyState == 4)) {
suc = true; suc = true;
} }
}; };
xhttp.open("PATCH", link, false); xhttp.open("PATCH", link, false);
xhttp.setRequestHeader("Content-Type", "application/json"); xhttp.setRequestHeader("Content-Type", "application/json");
xhttp.setRequestHeader("Authorization", sessionStorage.getItem("jwt")); xhttp.setRequestHeader("Authorization", sessionStorage.getItem("jwt"));
xhttp.send( xhttp.send(
"{" + "{" +
' "startdate": "' + ' "startdate": "' +
this.newstartdate + this.newstartdate +
'", "enddate": "' + '", "enddate": "' +
@ -178,57 +177,51 @@ export default {
'", "type": "' + '", "type": "' +
this.newtype + this.newtype +
'"}' '"}'
); );
if (suc == true) { if (suc == true) {
this.$router.push("/timerecords"); this.$router.push("/timerecords");
}
} }
} }
},
created() {
var recordxhttp = new XMLHttpRequest();
var record;
recordxhttp.onreadystatechange = function () {
if (this.readyState == 4 && this.status == 200) {
record = JSON.parse(recordxhttp.responseText);
}
};
recordxhttp.open("GET", sessionStorage.getItem("timeRecordEditSelfLink"), false);
recordxhttp.setRequestHeader("Authorization", sessionStorage.getItem("jwt"));
recordxhttp.send(null);
this.type = record.type;
this.startdate = record.startdate;
this.newtype = record.type;
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");
listen.addEventListener("keyup", e => {
if (e.keyCode === 13) {
e.preventDefault();
this.editRecord();
}
});
} }
}, };
created() {
var recordxhttp = new XMLHttpRequest();
var record;
recordxhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
record = JSON.parse(recordxhttp.responseText);
}
};
recordxhttp.open(
"GET",
sessionStorage.getItem("timeRecordEditSelfLink"),
false
);
recordxhttp.setRequestHeader("Authorization", sessionStorage.getItem("jwt"));
recordxhttp.send(null);
this.type = record.type;
this.startdate = record.startdate;
this.newtype = record.type;
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");
listen.addEventListener("keyup", e => {
if (e.keyCode === 13) {
e.preventDefault();
this.editRecord();
}
});
}
};
</script> </script>

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

@ -2,16 +2,14 @@
<v-card outlined> <v-card outlined>
<v-list-item class="main_accent"> <v-list-item class="main_accent">
<v-list-item-content> <v-list-item-content>
<!-- <v-col cols="2" > <h3 justify-center>{{timeRecord.date}}</h3>
<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-row no-gutters align="center">
<v-col cols="2"> <v-col cols="2">
<v-card color="background" elevation="0"> <v-card color="background" elevation="0">
<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> <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-card>
</v-col> </v-col>
<v-col></v-col> <v-col></v-col>
@ -33,7 +31,7 @@
</v-card> </v-card>
</v-col> </v-col>
<v-col></v-col> <v-col></v-col>
<v-col cols="2"> <v-col cols="2">
<v-card color="background" elevation="0"> <v-card color="background" elevation="0">
<pre><v-icon color="primary">mdi-account-tie</v-icon>{{" " + timeRecord.account}}</pre> <pre><v-icon color="primary">mdi-account-tie</v-icon>{{" " + timeRecord.account}}</pre>
</v-card> </v-card>
@ -54,7 +52,8 @@
<v-icon v-else>mdi-pencil</v-icon> <v-icon v-else>mdi-pencil</v-icon>
</v-btn> </v-btn>
</template> </template>
<v-btn fab dark small color="green" @click="$emit('edit-timeRecord', timeRecord._links.self.href, timeRecord.enddate)"> <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-icon>mdi-file-document-edit</v-icon>
</v-btn> </v-btn>
<v-btn fab dark small color="red" @click="$emit('del-timeRecord', timeRecord._links.self.href)"> <v-btn fab dark small color="red" @click="$emit('del-timeRecord', timeRecord._links.self.href)">
@ -67,16 +66,16 @@
</template> </template>
<script> <script>
export default { export default {
name: "TimeRecordItem", name: "TimeRecordItem",
props: ["timeRecord"] props: ["timeRecord"]
}; };
</script> </script>
<style scoped> <style scoped>
.v-card { .v-card {
border-color: #131313 !important; border-color: #131313 !important;
border-width: 3px !important; border-width: 3px !important;
border-radius: 10000px !important; border-radius: 10000px !important;
} }
</style> </style>

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

@ -9,7 +9,7 @@
</div> </div>
<v-row> <v-row>
<v-col cols="5"></v-col> <v-col cols="5"></v-col>
<v-col cols="1"> <v-col cols="1">
<v-btn v-if="havePrevPage == true" @click="prevPage()"> <v-btn v-if="havePrevPage == true" @click="prevPage()">
<v-icon>mdi-arrow-left</v-icon> <v-icon>mdi-arrow-left</v-icon>
</v-btn> </v-btn>
@ -24,140 +24,137 @@
<v-row> <v-row>
<v-col cols="6"></v-col> <v-col cols="6"></v-col>
<v-col cols="1"> <v-col cols="1">
<v-btn v-if="loggedIn == 'true'" fab color="primary" @click="createTimeRecord()"> <v-btn v-if="loggedIn == 'true'" fab color="primary" @click="createTimeRecord()">
<v-icon>mdi-plus</v-icon> <v-icon>mdi-plus</v-icon>
</v-btn> </v-btn>
</v-col> </v-col>
<v-col cols="5"></v-col> <v-col cols="5"></v-col>
</v-row> </v-row>
</v-container> </v-container>
</template> </template>
<script> <script>
import TimeRecordItem from "./TimeRecordItem.vue"; import TimeRecordItem from "./TimeRecordItem.vue";
import { baseUri } from "../variables.js"; import {baseUri} from "../variables.js";
export default { export default {
name: "TimeRecords", name: "TimeRecords",
components: { components: {
TimeRecordItem TimeRecordItem
},
data() {
return {
timeRecords: "",
page: sessionStorage.getItem("page"),
haveNextPage: "",
havePrevPage: "",
loggedIn: sessionStorage.getItem("loggedin")
};
},
methods: {
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, end) { data() {
if (end == "pending") { return {
alert("It's not possible to edit a running track"); timeRecords: "",
} else { page: sessionStorage.getItem("page"),
haveNextPage: "",
havePrevPage: "",
loggedIn: sessionStorage.getItem("loggedin")
};
},
methods: {
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, 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); sessionStorage.setItem("timeRecordEditSelfLink", selfLink);
this.$router.push("/edittimerecord"); this.$router.push("/createtimerecord");
},
nextPage() {
var pageTMP = parseInt(this.page) + 1;
sessionStorage.setItem("page", pageTMP);
location.reload();
},
prevPage() {
var pageTMP = parseInt(this.page) - 1;
sessionStorage.setItem("page", pageTMP);
location.reload();
} }
}, },
createTimeRecord(selfLink) { created() {
sessionStorage.setItem("timeRecordEditSelfLink", selfLink); var xhttp = new XMLHttpRequest();
var records;
var recordLinks;
this.$router.push("/createtimerecord"); if (this.page == null) {
}, this.page = 0;
nextPage() {
var pageTMP = parseInt(this.page) + 1;
sessionStorage.setItem("page", pageTMP);
location.reload();
},
prevPage() {
var pageTMP = parseInt(this.page) - 1;
sessionStorage.setItem("page", pageTMP);
location.reload();
}
},
created() {
var xhttp = new XMLHttpRequest();
var records;
var recordLinks;
if (this.page == null) {
this.page = 0;
}
sessionStorage.removeItem("page");
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
var recordsDB = JSON.parse(xhttp.responseText);
records = recordsDB._embedded.records;
recordLinks = recordsDB._links;
} }
}; sessionStorage.removeItem("page");
xhttp.open( xhttp.onreadystatechange = function () {
"GET", if (this.readyState == 4 && this.status == 200) {
baseUri + var recordsDB = JSON.parse(xhttp.responseText);
records = recordsDB._embedded.records;
recordLinks = recordsDB._links;
}
};
xhttp.open(
"GET",
baseUri +
"/records/search/allForUser?username=" + "/records/search/allForUser?username=" +
sessionStorage.getItem("username") + sessionStorage.getItem("username") +
"&sort=startdate,desc&page=" + "&sort=startdate,desc&page=" +
this.page + this.page +
"&projection=overview", "&projection=overview",
false false
); );
xhttp.setRequestHeader("Authorization", sessionStorage.getItem("jwt")); xhttp.setRequestHeader("Authorization", sessionStorage.getItem("jwt"));
xhttp.send(null); xhttp.send(null);
if (recordLinks.next != undefined) { if (recordLinks.next != undefined) {
this.haveNextPage = true; this.haveNextPage = true;
} }
if (recordLinks.prev != undefined) { if (recordLinks.prev != undefined) {
this.havePrevPage = true; this.havePrevPage = true;
}
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 start = record.startdate;
records[index].completeStartDate = start;
start = start.split("T");
records[index].startdate = start[1];
records[index].date = start[0];
try {
var end = record.enddate;
end = end.split("T");
records[index].enddate = end[1];
} catch (e) {
records[index].enddate = "pending";
} }
}
this.timeRecords = records; 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 start = record.startdate;
records[index].completeStartDate = start;
start = start.split("T");
records[index].startdate = start[1];
records[index].date = start[0];
try {
var end = record.enddate;
end = end.split("T");
records[index].enddate = end[1];
} catch (e) {
records[index].enddate = "pending";
}
}
this.timeRecords = records;
}
};
</script> </script>
<style scoped> <style scoped>

37
frontend/src/views/TimeTrackAccountItem.vue
View File

@ -24,22 +24,19 @@
</v-row> </v-row>
</v-list-item-content> </v-list-item-content>
<v-list-item-action> <v-list-item-action>
<v-speed-dial <v-speed-dial v-model="fab" transition="slide-x-reverse-transition" direction="left" open-on-hover>
v-model="fab"
transition="slide-x-reverse-transition"
direction="left"
open-on-hover
>
<template v-slot:activator> <template v-slot:activator>
<v-btn v-model="fab" color="background" elevation="0" dark fab> <v-btn v-model="fab" color="background" elevation="0" dark fab>
<v-icon v-if="fab">mdi-close</v-icon> <v-icon v-if="fab">mdi-close</v-icon>
<v-icon v-else>mdi-pencil</v-icon> <v-icon v-else>mdi-pencil</v-icon>
</v-btn> </v-btn>
</template> </template>
<v-btn fab dark small color="green" @click="$emit('edit-timeTrackAccount', timeTrackAccount._links.self.href)"> <v-btn fab dark small color="green"
@click="$emit('edit-timeTrackAccount', timeTrackAccount._links.self.href)">
<v-icon>mdi-file-document-edit</v-icon> <v-icon>mdi-file-document-edit</v-icon>
</v-btn> </v-btn>
<v-btn fab dark small color="red" @click="$emit('del-timeTrackAccount', timeTrackAccount._links.self.href)"> <v-btn fab dark small color="red"
@click="$emit('del-timeTrackAccount', timeTrackAccount._links.self.href)">
<v-icon>mdi-delete</v-icon> <v-icon>mdi-delete</v-icon>
</v-btn> </v-btn>
</v-speed-dial> </v-speed-dial>
@ -49,19 +46,19 @@
</template> </template>
<script> <script>
export default { export default {
name: "TimeTrackAccountItem", name: "TimeTrackAccountItem",
props: ["timeTrackAccount"], props: ["timeTrackAccount"],
data: () => ({ data: () => ({
fab: undefined fab: undefined
}), }),
}; };
</script> </script>
<style scoped> <style scoped>
.v-card { .v-card {
border-color: #131313 !important; border-color: #131313 !important;
border-width: 3px !important; border-width: 3px !important;
border-radius: 10000px !important; border-radius: 10000px !important;
} }
</style> </style>