add new TimeRecordItem and TimeRecord list design

frontend/src/plugins/vuetify.js

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

frontend/src/views/TimeRecordItem.vue

@@ -1,46 +1,70 @@
 <template>
-<div class="time-record-item">
+  <v-card outlined>
-    <p>
+    <v-list-item class="main_accent">
-        <b>{{timeRecord.type}}</b> 
+      <v-list-item-content>
-        <button @click="$emit('del-timeRecord', timeRecord.id)" class="del">X</button>
+        <v-row no-gutters align="center">
-        <button @click="$emit('edit-timeRecord', timeRecord.id)" class="edit">Edit Record</button>
+          <v-col cols="2">
-    </p>
+            <v-card color="background" elevation="0">
-    <p>{{timeRecord.start}} - {{timeRecord.end}} ({{timeRecord.time}})</p>
+              <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>
-</div>
+            </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 {
+.v-card {
-    background: #131313;
+  border-color: #131313 !important;
-    padding: 10px;
+  border-width: 3px !important;
-    border-bottom: 3px #272727 solid;
+  border-radius: 10000px !important;
-}
-
-.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

@@ -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"/>
+        <TimeRecordItem
-        </div>      
+          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>