From 286d1c7fda572ae975fedbe3ba9033198a4791c5 Mon Sep 17 00:00:00 2001
From: Marcel Schwarz <marcel@icaotix.de>
Date: Tue, 21 Jul 2020 21:26:49 +0200
Subject: [PATCH] Format Timerecord related things

---
 frontend/src/views/CreateTimerecord.vue     | 184 ++++++++--------
 frontend/src/views/EditTimerecord.vue       | 183 ++++++++--------
 frontend/src/views/TimeRecordItem.vue       |  37 ++--
 frontend/src/views/TimeRecords.vue          | 219 ++++++++++----------
 frontend/src/views/TimeTrackAccountItem.vue |  39 ++--
 5 files changed, 317 insertions(+), 345 deletions(-)

diff --git a/frontend/src/views/CreateTimerecord.vue b/frontend/src/views/CreateTimerecord.vue
index beff96a..2f473a0 100644
--- a/frontend/src/views/CreateTimerecord.vue
+++ b/frontend/src/views/CreateTimerecord.vue
@@ -1,7 +1,7 @@
-<template >
+<template>
   <v-container id="createRecordListen">
     <v-card align-center>
-      <p class="text-center  logowhite--text" style="font-size:30pt">Details</p>
+      <p class="text-center logowhite--text" style="font-size:30pt">Details</p>
 
       <v-row>
         <v-col cols="6">
@@ -33,7 +33,7 @@
             ref="menu"
             v-model="menu"
             :close-on-content-click="false"
-            :nudge-right="40"           
+            :nudge-right="40"
             transition="scale-transition"
             offset-y
             min-width="290px"
@@ -47,9 +47,7 @@
                 v-on="on"
               ></v-text-field>
             </template>
-            <v-date-picker v-model="newstartdate" @input="menu = false" no-title scrollable>
-            
-            </v-date-picker>
+            <v-date-picker v-model="newstartdate" @input="menu = false" no-title scrollable></v-date-picker>
           </v-menu>
         </v-col>
         <v-col cols="12" sm="6">
@@ -57,7 +55,7 @@
             ref="menu2"
             v-model="menu2"
             :close-on-content-click="false"
-           :nudge-right="40"
+            :nudge-right="40"
             transition="scale-transition"
             offset-y
             min-width="290px"
@@ -71,9 +69,7 @@
                 v-on="on"
               ></v-text-field>
             </template>
-            <v-date-picker v-model="newenddate" @input="menu2 = false" no-title scrollable>
-             
-            </v-date-picker>
+            <v-date-picker v-model="newenddate" @input="menu2 = false" no-title scrollable></v-date-picker>
           </v-menu>
         </v-col>
       </v-row>
@@ -146,68 +142,65 @@
   </v-container>
 </template>
 <script>
-import { baseUri } from "../variables";
-export default {
-  name: "CreateTimeTrackAccount",
-  data: () => ({
-    timestart: null,
-    menutime: false,
-    timeend: null,
-    menutime2: false,
-    menu: false,
-    menu2: false,
-    types: [ "PAID" ,"BREAK"],
-    accounts: "",
-    user: sessionStorage.getItem("timeTrackAccountListUserId"),
-    newstartdate: "",
-    newenddate: "",
-    newtype: "",
-    accountname: ""
-  }),
+  import {baseUri} from "../variables";
 
-  methods: {
-    addRecord() {
-      var account = "";
-      var accountxhttp = new XMLHttpRequest();
+  export default {
+    name: "CreateTimeTrackAccount",
+    data: () => ({
+      timestart: null,
+      menutime: false,
+      timeend: null,
+      menutime2: false,
+      menu: false,
+      menu2: false,
+      types: ["PAID", "BREAK"],
+      accounts: "",
+      user: sessionStorage.getItem("timeTrackAccountListUserId"),
+      newstartdate: "",
+      newenddate: "",
+      newtype: "",
+      accountname: ""
+    }),
 
-      accountxhttp.onreadystatechange = function() {
-        if ((this.status == 200) & (this.readyState == 4)) {
-          account = JSON.parse(accountxhttp.responseText);
-          account = account._links.self.href;
-        }
-      };
-      accountxhttp.open(
-        "GET",
-        baseUri +
+    methods: {
+      addRecord() {
+        var account = "";
+        var accountxhttp = new XMLHttpRequest();
+
+        accountxhttp.onreadystatechange = function () {
+          if ((this.status == 200) & (this.readyState == 4)) {
+            account = JSON.parse(accountxhttp.responseText);
+            account = account._links.self.href;
+          }
+        };
+        accountxhttp.open(
+          "GET",
+          baseUri +
           "/accounts/search/findByUsernameAndName?username=" +
           sessionStorage.getItem("username") +
           "&account=" +
           this.accountname,
-        false
-      );
-      accountxhttp.setRequestHeader("Content-Type", "application/json");
+          false
+        );
+        accountxhttp.setRequestHeader("Content-Type", "application/json");
+        accountxhttp.setRequestHeader("Authorization", sessionStorage.getItem("jwt"));
+        accountxhttp.send(null);
 
-      accountxhttp.setRequestHeader(
-        "Authorization",
-        sessionStorage.getItem("jwt")
-      );
-      accountxhttp.send(null);
-
-      if (this.newstartdate != "" && this.newenddate != "" && this.newdate != "" && account != "") {
-        var xhttp = new XMLHttpRequest();
-        var suc;
-        this.newstartdate = this.newstartdate + "T" + this.timestart;
-        this.newenddate = this.newenddate + "T" + this.timeend;
-        xhttp.onreadystatechange = function() {
-          if ((this.status == 201) & (this.readyState == 4)) {
-            suc = true;
-          }
-        };
-        xhttp.open("POST", baseUri + "/records", false);
-        xhttp.setRequestHeader("Content-Type", "application/json");
-        xhttp.setRequestHeader("Authorization", sessionStorage.getItem("jwt"));
-        xhttp.send(
-          "{" +
+        if (this.newstartdate != "" && this.newenddate != "" && this.newdate != "" && account != "") {
+          var xhttp = new XMLHttpRequest();
+          var suc;
+          this.newstartdate = this.newstartdate + "T" + this.timestart;
+          this.newenddate = this.newenddate + "T" + this.timeend;
+          xhttp.onreadystatechange = function () {
+            if ((this.status == 201) & (this.readyState == 4)) {
+              suc = true;
+            }
+          };
+          xhttp.open("POST", baseUri + "/records", false);
+          xhttp.setRequestHeader("Content-Type", "application/json");
+          xhttp.setRequestHeader("Authorization", sessionStorage.getItem("jwt"));
+          xhttp.send(
+            "{" +
             '"startdate": "' +
             this.newstartdate +
             '", "enddate": "' +
@@ -217,54 +210,47 @@ export default {
             '", "account": "' +
             account +
             '"}'
-        );
-        if (suc == true) {
-          this.$router.push("/timerecords");
+          );
+          if (suc == true) {
+            this.$router.push("/timerecords");
+          }
         }
       }
-    }
-  },
-  created (){
-    var accountsxhttp = new XMLHttpRequest();
-    var accounts;
-      accountsxhttp.onreadystatechange = function() {
+    },
+    created() {
+      var accountsxhttp = new XMLHttpRequest();
+      var accounts;
+      accountsxhttp.onreadystatechange = function () {
         if ((this.status == 200) & (this.readyState == 4)) {
           accounts = JSON.parse(accountsxhttp.responseText);
           accounts = accounts._embedded.accounts;
-        
         }
       };
       accountsxhttp.open(
         "GET",
         baseUri +
-          "/accounts/search/findByUsername?username=" +
-          sessionStorage.getItem("username") ,
+        "/accounts/search/findByUsername?username=" +
+        sessionStorage.getItem("username"),
         false
       );
       accountsxhttp.setRequestHeader("Content-Type", "application/json");
-
-      accountsxhttp.setRequestHeader(
-        "Authorization",
-        sessionStorage.getItem("jwt")
-      );
+      accountsxhttp.setRequestHeader("Authorization", sessionStorage.getItem("jwt"));
       accountsxhttp.send(null);
-      var accountnames =[];
-      for (let index = 0; index < accounts.length; index++) {              
+      var accountnames = [];
+      for (let index = 0; index < accounts.length; index++) {
         accountnames[index] = accounts[index].name;
-        
       }
-      this.accounts =accountnames;
-  },
-  mounted() {
-    var listen = document.getElementById("createRecordListen");
+      this.accounts = accountnames;
+    },
+    mounted() {
+      var listen = document.getElementById("createRecordListen");
 
-    listen.addEventListener("keyup", e => {
-      if (e.keyCode === 13) {
-        e.preventDefault();
-
-        this.addRecord();
-      }
-    });
-  }
-};
-</script>
\ No newline at end of file
+      listen.addEventListener("keyup", e => {
+        if (e.keyCode === 13) {
+          e.preventDefault();
+          this.addRecord();
+        }
+      });
+    }
+  };
+</script>
diff --git a/frontend/src/views/EditTimerecord.vue b/frontend/src/views/EditTimerecord.vue
index 2e3d8c5..9ab41c0 100644
--- a/frontend/src/views/EditTimerecord.vue
+++ b/frontend/src/views/EditTimerecord.vue
@@ -1,9 +1,9 @@
-<template >
+<template>
   <v-container id="editRecordListen">
     <v-card align-center>
       <p class="text-center  logowhite--text" style="font-size:30pt">Details</p>
 
-     <v-col cols="6">
+      <v-col cols="6">
         <v-select
           v-model="newtype"
           :items="types"
@@ -15,12 +15,12 @@
         ></v-select>
       </v-col>
       <v-row>
-        <v-col cols="12" sm="6" >
+        <v-col cols="12" sm="6">
           <v-menu
             ref="menu"
             v-model="menu"
             :close-on-content-click="false"
-           :nudge-right="40"
+            :nudge-right="40"
             transition="scale-transition"
             offset-y
             min-width="290px"
@@ -35,11 +35,11 @@
               ></v-text-field>
             </template>
             <v-date-picker v-model="newstartdate" @input="menu = false" no-title scrollable>
-           
+
             </v-date-picker>
           </v-menu>
         </v-col>
-        <v-col cols="12" sm="6" >
+        <v-col cols="12" sm="6">
           <v-menu
             ref="menu2"
             v-model="menu2"
@@ -58,9 +58,7 @@
                 v-on="on"
               ></v-text-field>
             </template>
-            <v-date-picker v-model="newenddate" @input="menu2 = false" no-title scrollable>
-             
-            </v-date-picker>
+            <v-date-picker v-model="newenddate" @input="menu2 = false" no-title scrollable></v-date-picker>
           </v-menu>
         </v-col>
       </v-row>
@@ -132,45 +130,46 @@
     </v-card>
   </v-container>
 </template>
+
 <script>
-export default {
-  name: "EditTimeTrackAccount",
-  data: () => ({
-    timestart: null,
-    menutime: false,
-    timeend: null,
-    menutime2: false,
-    menu: false,
-    menu2: false,
-    types: [ "PAID" ,"BREAK"],
-    type: "",
-    stardate: "",
-    enddate: "",    
-    newtype: "",
-    newstartdate: new Date().toISOString().substr(0, 10),
-    newenddate: new Date().toISOString().substr(0, 10)
-  }),
+  export default {
+    name: "EditTimeTrackAccount",
+    data: () => ({
+      timestart: null,
+      menutime: false,
+      timeend: null,
+      menutime2: false,
+      menu: false,
+      menu2: false,
+      types: ["PAID", "BREAK"],
+      type: "",
+      stardate: "",
+      enddate: "",
+      newtype: "",
+      newstartdate: new Date().toISOString().substr(0, 10),
+      newenddate: new Date().toISOString().substr(0, 10)
+    }),
 
-  methods: {
-    editRecord() {
-      var link = sessionStorage.getItem("timeRecordEditSelfLink");
+    methods: {
+      editRecord() {
+        var link = sessionStorage.getItem("timeRecordEditSelfLink");
 
-      if (this.newname != this.name || this.newstartdate != this.startdate || this.newenddate != this.enddate) {
-        this.newstartdate = this.newstartdate + "T" + this.timestart;
-        this.newenddate = this.newenddate + "T" + this.timeend;
-        var xhttp = new XMLHttpRequest();
-        var suc;
-        xhttp.onreadystatechange = function() {
-          if ((this.status == 200) & (this.readyState == 4)) {
-            suc = true;
-          }
-        };
-        xhttp.open("PATCH", link, false);
-        xhttp.setRequestHeader("Content-Type", "application/json");
+        if (this.newname != this.name || this.newstartdate != this.startdate || this.newenddate != this.enddate) {
+          this.newstartdate = this.newstartdate + "T" + this.timestart;
+          this.newenddate = this.newenddate + "T" + this.timeend;
+          var xhttp = new XMLHttpRequest();
+          var suc;
+          xhttp.onreadystatechange = function () {
+            if ((this.status == 200) & (this.readyState == 4)) {
+              suc = true;
+            }
+          };
+          xhttp.open("PATCH", link, false);
+          xhttp.setRequestHeader("Content-Type", "application/json");
 
-        xhttp.setRequestHeader("Authorization", sessionStorage.getItem("jwt"));
-        xhttp.send(
-          "{" +
+          xhttp.setRequestHeader("Authorization", sessionStorage.getItem("jwt"));
+          xhttp.send(
+            "{" +
             ' "startdate": "' +
             this.newstartdate +
             '", "enddate": "' +
@@ -178,57 +177,51 @@ export default {
             '", "type": "' +
             this.newtype +
             '"}'
-        );
-        if (suc == true) {
-          this.$router.push("/timerecords");
+          );
+          if (suc == true) {
+            this.$router.push("/timerecords");
+          }
         }
       }
+    },
+    created() {
+      var recordxhttp = new XMLHttpRequest();
+      var record;
+
+      recordxhttp.onreadystatechange = function () {
+        if (this.readyState == 4 && this.status == 200) {
+          record = JSON.parse(recordxhttp.responseText);
+        }
+      };
+      recordxhttp.open("GET", sessionStorage.getItem("timeRecordEditSelfLink"), false);
+      recordxhttp.setRequestHeader("Authorization", sessionStorage.getItem("jwt"));
+
+      recordxhttp.send(null);
+      this.type = record.type;
+      this.startdate = record.startdate;
+
+      this.newtype = record.type;
+      var start = record.startdate;
+      start = start.split("T");
+      var starttime = start[1];
+      var startdate = start[0];
+      this.newstartdate = startdate;
+      this.timestart = starttime;
+      var end = record.enddate;
+      end = end.split("T");
+      var endtime = end[1];
+      var enddate = end[0];
+      this.newenddate = enddate;
+      this.timeend = endtime;
+    },
+    mounted() {
+      var listen = document.getElementById("editRecordListen");
+      listen.addEventListener("keyup", e => {
+        if (e.keyCode === 13) {
+          e.preventDefault();
+          this.editRecord();
+        }
+      });
     }
-  },
-  created() {
-    var recordxhttp = new XMLHttpRequest();
-    var record;
-
-    recordxhttp.onreadystatechange = function() {
-      if (this.readyState == 4 && this.status == 200) {
-        record = JSON.parse(recordxhttp.responseText);
-      }
-    };
-    recordxhttp.open(
-      "GET",
-      sessionStorage.getItem("timeRecordEditSelfLink"),
-      false
-    );
-
-    recordxhttp.setRequestHeader("Authorization", sessionStorage.getItem("jwt"));
-
-    recordxhttp.send(null);
-    this.type = record.type;
-    this.startdate = record.startdate;
-
-    this.newtype = record.type;
-    var start = record.startdate;
-    start = start.split("T");
-    var starttime = start[1];
-    var startdate = start[0];
-    this.newstartdate = startdate;
-    this.timestart = starttime;
-    var end = record.enddate;
-    end = end.split("T");
-    var endtime = end[1];
-    var enddate = end[0];
-    this.newenddate = enddate;
-    this.timeend = endtime;
-  },
-  mounted() {
-    var listen = document.getElementById("editRecordListen");
-    listen.addEventListener("keyup", e => {
-      if (e.keyCode === 13) {
-        e.preventDefault();
-
-        this.editRecord();
-      }
-    });
-  }
-};
-</script>
\ No newline at end of file
+  };
+</script>
diff --git a/frontend/src/views/TimeRecordItem.vue b/frontend/src/views/TimeRecordItem.vue
index c70eb46..970f0bd 100644
--- a/frontend/src/views/TimeRecordItem.vue
+++ b/frontend/src/views/TimeRecordItem.vue
@@ -2,16 +2,14 @@
   <v-card outlined>
     <v-list-item class="main_accent">
       <v-list-item-content>
-     <!--    <v-col cols="2" >
-            <v-card color="background" elevation="0">
-              <pre><v-icon color="primary">mdi-calendar-range</v-icon>{{" " + timeRecord.date}}</pre>
-            </v-card>
-          </v-col> -->
-          <h3 justify-center>{{timeRecord.date}}</h3>
+        <h3 justify-center>{{timeRecord.date}}</h3>
         <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 == 'BREAK'}">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>
+              <pre>
+                <v-icon color="green" v-bind:class="{'d-none':timeRecord.type == 'BREAK'}">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>
@@ -33,7 +31,7 @@
             </v-card>
           </v-col>
           <v-col></v-col>
-           <v-col cols="2">
+          <v-col cols="2">
             <v-card color="background" elevation="0">
               <pre><v-icon color="primary">mdi-account-tie</v-icon>{{" " + timeRecord.account}}</pre>
             </v-card>
@@ -54,7 +52,8 @@
               <v-icon v-else>mdi-pencil</v-icon>
             </v-btn>
           </template>
-          <v-btn fab dark small color="green" @click="$emit('edit-timeRecord', timeRecord._links.self.href, timeRecord.enddate)">
+          <v-btn fab dark small color="green"
+                 @click="$emit('edit-timeRecord', timeRecord._links.self.href, timeRecord.enddate)">
             <v-icon>mdi-file-document-edit</v-icon>
           </v-btn>
           <v-btn fab dark small color="red" @click="$emit('del-timeRecord', timeRecord._links.self.href)">
@@ -67,16 +66,16 @@
 </template>
 
 <script>
-export default {
-  name: "TimeRecordItem",
-  props: ["timeRecord"]
-};
+  export default {
+    name: "TimeRecordItem",
+    props: ["timeRecord"]
+  };
 </script>
 
 <style scoped>
-.v-card {
-  border-color: #131313 !important;
-  border-width: 3px !important;
-  border-radius: 10000px !important;
-}
-</style>
\ No newline at end of file
+  .v-card {
+    border-color: #131313 !important;
+    border-width: 3px !important;
+    border-radius: 10000px !important;
+  }
+</style>
diff --git a/frontend/src/views/TimeRecords.vue b/frontend/src/views/TimeRecords.vue
index bf3c9e2..7830929 100644
--- a/frontend/src/views/TimeRecords.vue
+++ b/frontend/src/views/TimeRecords.vue
@@ -9,7 +9,7 @@
     </div>
     <v-row>
       <v-col cols="5"></v-col>
-       <v-col cols="1">
+      <v-col cols="1">
         <v-btn v-if="havePrevPage == true" @click="prevPage()">
           <v-icon>mdi-arrow-left</v-icon>
         </v-btn>
@@ -18,147 +18,144 @@
         <v-btn v-if="haveNextPage == true" @click="nextPage()">
           <v-icon>mdi-arrow-right</v-icon>
         </v-btn>
-      </v-col>     
+      </v-col>
       <v-col cols="5"></v-col>
     </v-row>
     <v-row>
       <v-col cols="6"></v-col>
       <v-col cols="1">
-        <v-btn  v-if="loggedIn == 'true'" fab color="primary" @click="createTimeRecord()">
+        <v-btn v-if="loggedIn == 'true'" 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 { baseUri } from "../variables.js";
+  import TimeRecordItem from "./TimeRecordItem.vue";
+  import {baseUri} from "../variables.js";
 
-export default {
-  name: "TimeRecords",
-  components: {
-    TimeRecordItem
-  },
-  data() {
-    return {
-      timeRecords: "",
-      page: sessionStorage.getItem("page"),
-      haveNextPage: "",
-      havePrevPage: "",
-      loggedIn: sessionStorage.getItem("loggedin")
-    };
-  },
-  methods: {
-    deleteTimeRecord(selfLink) {
-      var userxhttp = new XMLHttpRequest();
-      userxhttp.onreadystatechange = function() {
-        if (this.readyState == 4 && this.status == 204) {
-          location.reload();
-        }
-      };
-      userxhttp.open("DELETE", selfLink, false);
-
-      userxhttp.setRequestHeader(
-        "Authorization",
-        sessionStorage.getItem("jwt")
-      );
-
-      userxhttp.send(null);
+  export default {
+    name: "TimeRecords",
+    components: {
+      TimeRecordItem
     },
-    editTimeRecord(selfLink, end) {
-      if (end == "pending") {
-        alert("It's not possible to edit a running track");
-      } else {
+    data() {
+      return {
+        timeRecords: "",
+        page: sessionStorage.getItem("page"),
+        haveNextPage: "",
+        havePrevPage: "",
+        loggedIn: sessionStorage.getItem("loggedin")
+      };
+    },
+    methods: {
+      deleteTimeRecord(selfLink) {
+        var userxhttp = new XMLHttpRequest();
+        userxhttp.onreadystatechange = function () {
+          if (this.readyState == 4 && this.status == 204) {
+            location.reload();
+          }
+        };
+        userxhttp.open("DELETE", selfLink, false);
+
+        userxhttp.setRequestHeader(
+          "Authorization",
+          sessionStorage.getItem("jwt")
+        );
+
+        userxhttp.send(null);
+      },
+      editTimeRecord(selfLink, end) {
+        if (end == "pending") {
+          alert("It's not possible to edit a running track");
+        } else {
+          sessionStorage.setItem("timeRecordEditSelfLink", selfLink);
+
+          this.$router.push("/edittimerecord");
+        }
+      },
+      createTimeRecord(selfLink) {
         sessionStorage.setItem("timeRecordEditSelfLink", selfLink);
 
-        this.$router.push("/edittimerecord");
+        this.$router.push("/createtimerecord");
+      },
+      nextPage() {
+        var pageTMP = parseInt(this.page) + 1;
+        sessionStorage.setItem("page", pageTMP);
+        location.reload();
+      },
+      prevPage() {
+        var pageTMP = parseInt(this.page) - 1;
+        sessionStorage.setItem("page", pageTMP);
+        location.reload();
       }
     },
-    createTimeRecord(selfLink) {
-      sessionStorage.setItem("timeRecordEditSelfLink", selfLink);
+    created() {
+      var xhttp = new XMLHttpRequest();
+      var records;
+      var recordLinks;
 
-      this.$router.push("/createtimerecord");
-    },
-    nextPage() {
-      var pageTMP = parseInt(this.page) + 1;
-      sessionStorage.setItem("page", pageTMP);
-      location.reload();
-    },
-    prevPage() {
-      var pageTMP = parseInt(this.page) - 1;
-      sessionStorage.setItem("page", pageTMP);
-      location.reload();
-    }
-  },
-  created() {
-    var xhttp = new XMLHttpRequest();
-    var records;
-    var recordLinks;
-
-    if (this.page == null) {
-      this.page = 0;
-    }
-    sessionStorage.removeItem("page");
-    xhttp.onreadystatechange = function() {
-      if (this.readyState == 4 && this.status == 200) {
-        var recordsDB = JSON.parse(xhttp.responseText);
-
-        records = recordsDB._embedded.records;
-        recordLinks = recordsDB._links;
+      if (this.page == null) {
+        this.page = 0;
       }
-    };
-    xhttp.open(
-      "GET",
-      baseUri +
+      sessionStorage.removeItem("page");
+      xhttp.onreadystatechange = function () {
+        if (this.readyState == 4 && this.status == 200) {
+          var recordsDB = JSON.parse(xhttp.responseText);
+          records = recordsDB._embedded.records;
+          recordLinks = recordsDB._links;
+        }
+      };
+      xhttp.open(
+        "GET",
+        baseUri +
         "/records/search/allForUser?username=" +
         sessionStorage.getItem("username") +
         "&sort=startdate,desc&page=" +
         this.page +
         "&projection=overview",
-      false
-    );
+        false
+      );
 
-    xhttp.setRequestHeader("Authorization", sessionStorage.getItem("jwt"));
+      xhttp.setRequestHeader("Authorization", sessionStorage.getItem("jwt"));
 
-    xhttp.send(null);
-    if (recordLinks.next != undefined) {
-      this.haveNextPage = true;
-    }
-    if (recordLinks.prev != undefined) {
-      this.havePrevPage = true;
-    }
-
-    for (let index = 0; index < records.length; index++) {
-      var record = records[index];
-      var time = record.duration;
-      var hours = time / 60;
-      hours = Math.floor(hours);
-
-      var min = time % 60;
-      record.duration = hours + "h " + min + "min";
-      var start = record.startdate;
-      records[index].completeStartDate = start;
-      start = start.split("T");
-      records[index].startdate = start[1];
-      records[index].date = start[0];
-
-      try {
-        var end = record.enddate;
-        end = end.split("T");
-        records[index].enddate = end[1];
-      } catch (e) {
-        records[index].enddate = "pending";
+      xhttp.send(null);
+      if (recordLinks.next != undefined) {
+        this.haveNextPage = true;
+      }
+      if (recordLinks.prev != undefined) {
+        this.havePrevPage = true;
       }
-    }
 
-    this.timeRecords = records;
-  }
-};
+      for (let index = 0; index < records.length; index++) {
+        var record = records[index];
+        var time = record.duration;
+        var hours = time / 60;
+        hours = Math.floor(hours);
+
+        var min = time % 60;
+        record.duration = hours + "h " + min + "min";
+        var start = record.startdate;
+        records[index].completeStartDate = start;
+        start = start.split("T");
+        records[index].startdate = start[1];
+        records[index].date = start[0];
+
+        try {
+          var end = record.enddate;
+          end = end.split("T");
+          records[index].enddate = end[1];
+        } catch (e) {
+          records[index].enddate = "pending";
+        }
+      }
+      this.timeRecords = records;
+    }
+  };
 </script>
 
 <style scoped>
-</style>
\ No newline at end of file
+</style>
diff --git a/frontend/src/views/TimeTrackAccountItem.vue b/frontend/src/views/TimeTrackAccountItem.vue
index 37cdd2c..bc671e1 100644
--- a/frontend/src/views/TimeTrackAccountItem.vue
+++ b/frontend/src/views/TimeTrackAccountItem.vue
@@ -24,22 +24,19 @@
         </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
-        >
+        <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-timeTrackAccount', timeTrackAccount._links.self.href)">
+          <v-btn fab dark small color="green"
+                 @click="$emit('edit-timeTrackAccount', timeTrackAccount._links.self.href)">
             <v-icon>mdi-file-document-edit</v-icon>
           </v-btn>
-          <v-btn fab dark small color="red" @click="$emit('del-timeTrackAccount', timeTrackAccount._links.self.href)">
+          <v-btn fab dark small color="red"
+                 @click="$emit('del-timeTrackAccount', timeTrackAccount._links.self.href)">
             <v-icon>mdi-delete</v-icon>
           </v-btn>
         </v-speed-dial>
@@ -49,19 +46,19 @@
 </template>
 
 <script>
-export default {
-  name: "TimeTrackAccountItem",
-  props: ["timeTrackAccount"],
-  data: () => ({
-    fab: undefined
-  }), 
-};
+  export default {
+    name: "TimeTrackAccountItem",
+    props: ["timeTrackAccount"],
+    data: () => ({
+      fab: undefined
+    }),
+  };
 </script>
 
 <style scoped>
-.v-card {
-  border-color: #131313 !important;
-  border-width: 3px !important;
-  border-radius: 10000px !important;
-}
-</style>
\ No newline at end of file
+  .v-card {
+    border-color: #131313 !important;
+    border-width: 3px !important;
+    border-radius: 10000px !important;
+  }
+</style>