From 7c61910cb6ce4fae00c8b2e7cdf0f1e2e00025cb Mon Sep 17 00:00:00 2001
From: the_kellner <the_kellner@web.de>
Date: Sat, 25 Apr 2020 18:01:26 +0200
Subject: [PATCH] Add Time Records view with multiple TimeRecordItems

---
 frontend/src/components/layout/Footer.vue |  2 +
 frontend/src/router/index.js              |  6 +++
 frontend/src/views/TimeRecordItem.vue     | 46 ++++++++++++++++++
 frontend/src/views/TimeRecords.vue        | 58 +++++++++++++++++++++++
 4 files changed, 112 insertions(+)
 create mode 100644 frontend/src/views/TimeRecordItem.vue
 create mode 100644 frontend/src/views/TimeRecords.vue

diff --git a/frontend/src/components/layout/Footer.vue b/frontend/src/components/layout/Footer.vue
index 0af1360..810c2df 100644
--- a/frontend/src/components/layout/Footer.vue
+++ b/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>
 
diff --git a/frontend/src/router/index.js b/frontend/src/router/index.js
index 4178a7a..a518691 100644
--- a/frontend/src/router/index.js
+++ b/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",
diff --git a/frontend/src/views/TimeRecordItem.vue b/frontend/src/views/TimeRecordItem.vue
new file mode 100644
index 0000000..3294cb6
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/frontend/src/views/TimeRecords.vue b/frontend/src/views/TimeRecords.vue
new file mode 100644
index 0000000..5fd58c4
--- /dev/null
+++ b/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>
\ No newline at end of file