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

add new TimeRecordItem and TimeRecord list design

Browse Source
This commit is contained in:
the_kellner 2020-05-20 17:47:17 +02:00
parent 3d1f2fd741
commit a6c4cc48d9
3 changed files with 94 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
frontend/src/plugins/vuetify.js
View File

@ -20,6 +20,7 @@ export default new Vuetify({
main_accent: '#202020',
footer: '#404040',
background: '#131313',
background_soft: '#171717',
},
},
dark:true

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

@ -1,46 +1,70 @@
<template>
<div class="time-record-item">
<p>
<b>{{timeRecord.type}}</b>
<button @click="$emit('del-timeRecord', timeRecord.id)" class="del">X</button>
<button @click="$emit('edit-timeRecord', timeRecord.id)" class="edit">Edit Record</button>
</p>
<p>{{timeRecord.start}} - {{timeRecord.end}} ({{timeRecord.time}})</p>
</div>
<v-card outlined>
<v-list-item class="main_accent">
<v-list-item-content>
<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>
</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>
</v-card>
</v-col>
<v-col></v-col>
</v-row>
</v-list-item-content>
<v-list-item-action>
<v-speed-dial
v-model="fab"
transition="slide-x-reverse-transition"
direction="left"
open-on-hover
>
<template v-slot:activator>
<v-btn v-model="fab" color="background" elevation="0" dark fab>
<v-icon v-if="fab">mdi-close</v-icon>
<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-icon>mdi-file-document-edit</v-icon>
</v-btn>
<v-btn fab dark small color="red" @click="$emit('del-timeRecord', timeRecord.id)">
<v-icon>mdi-delete</v-icon>
</v-btn>
</v-speed-dial>
</v-list-item-action>
</v-list-item>
</v-card>
</template>
<script>
export default {
name: "TimeRecordItem",
props: ["timeRecord"]
}
};
</script>
<style scoped>
.time-record-item {
background: #131313;
padding: 10px;
border-bottom: 3px #272727 solid;
}
.del {
background: #ff0000;
color: #fff;
border: none;
padding: 5px 9px;
border-radius: 0%;
cursor: pointer;
float: right;
}
.edit {
background: #272727;
color: #fff;
border: none;
padding: 5px 9px;
border-radius: 0%;
cursor: pointer;
float: right;
margin: 0px;
.v-card {
border-color: #131313 !important;
border-width: 3px !important;
border-radius: 10000px !important;
}
</style>

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

@ -1,13 +1,26 @@
<template>
<div>
<v-container fluid>
<div v-bind:key="timeRecord.id" v-for="timeRecord in timeRecords">
<TimeRecordItem v-bind:timeRecord="timeRecord" v-on:del-timeRecord="deleteTimeRecord" v-on:edit-timeRecord="editTimeRecord"/>
</div>
<TimeRecordItem
v-bind:timeRecord="timeRecord"
v-on:del-timeRecord="deleteTimeRecord"
v-on:edit-timeRecord="editTimeRecord"
/>
</div>
<v-row>
<v-col cols="6"></v-col>
<v-col cols="1">
<v-btn fab color="primary" @click="createTimeRecord()">
<v-icon>mdi-plus</v-icon>
</v-btn>
</v-col>
<v-col cols="5"></v-col>
</v-row>
</v-container>
</template>
<script>
import TimeRecordItem from './TimeRecordItem.vue'
import TimeRecordItem from "./TimeRecordItem.vue";
export default {
name: "TimeRecords",
@ -42,7 +55,7 @@ export default {
id: 4,
start: "25.04.2020 / 8:00",
end: "25.04.2020 / 13:00",
time: "5:00",
time: "10:00",
type: "Paid"
},
{
@ -81,20 +94,23 @@ export default {
type: "Paid"
}
]
}
};
},
methods: {
deleteTimeRecord(id) {
this.timeRecords = this.timeRecords.filter(timeRecord => timeRecord.id !==id);
this.timeRecords = this.timeRecords.filter(
timeRecord => timeRecord.id !== id
);
},
editTimeRecord(id) {
alert("Not Implemented. TimeRecordId: " + id)
alert("Not implemented yet. TimeRecordId: " + id);
},
createTimeRecord() {
alert("Not implemented yet.")
}
}
}
};
</script>
<style scoped>
</style>