Merge branch '29-view-for-a-single-time-track-entry' into 'master'

Resolve "View for a single time track entry"

Closes #29

See merge request marcel.schwarz/2020ss-qbc-geofence-timetracking!21
This commit is contained in:
Simon Kellner 2020-04-25 16:58:13 +00:00
commit 37afc78824
4 changed files with 112 additions and 0 deletions

View File

@ -5,6 +5,8 @@ footer
<u><router-link to="/">Home</router-link></u>
<br>
<u><router-link to="/about">About</router-link></u>
<br>
<u><router-link to="/timerecords">Time Records</router-link></u>
</div>
</template>

View File

@ -4,6 +4,7 @@ import Home from "../views/Home.vue";
import Profile from "../views/profile.vue";
import missing from "../views/missing.vue";
import Info from "../views/Info.vue";
import TimeRecords from "../views/TimeRecords.vue";
Vue.use(VueRouter);
const routes = [
@ -12,6 +13,11 @@ const routes = [
name: "Home",
component: Home
},
{
path: "/timerecords",
name: "TimeRecords",
component: TimeRecords
},
{
path: "/profile/:id",
name: "Profile",

View File

@ -0,0 +1,46 @@
<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>
</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;
}
</style>

View File

@ -0,0 +1,58 @@
<template>
<div>
<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>
</div>
</template>
<script>
import TimeRecordItem from './TimeRecordItem.vue'
export default {
name: "TimeRecords",
components: {
TimeRecordItem
},
data() {
return {
timeRecords: [
{
id: 1,
start: "25.04.2020 / 8:00",
end: "25.04.2020 / 13:00",
time: "5:00",
type: "Paid"
},
{
id: 2,
start: "25.04.2020 / 13:00",
end: "25.04.2020 / 14:00",
time: "1:00",
type: "Lunch"
},
{
id: 3,
start: "25.04.2020 / 14:00 ",
end: "25.04.2020 / 16:30",
time: "2:30",
type: "Paid"
}
]
}
},
methods: {
deleteTimeRecord(id) {
this.timeRecords = this.timeRecords.filter(timeRecord => timeRecord.id !==id);
},
editTimeRecord(id) {
alert("Not Implemented. TimeRecordId: " + id)
}
}
}
</script>
<style scoped>
</style>