Add Time Records view with multiple TimeRecordItems

frontend/src/components/layout/Footer.vue

@@ -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>
 

frontend/src/router/index.js

@@ -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",

frontend/src/views/TimeRecordItem.vue

@@ -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>

frontend/src/views/TimeRecords.vue

@@ -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>