From b298ac58158e1ae0bb6bbfa5b290112b3d749f17 Mon Sep 17 00:00:00 2001
From: Marcel Schwarz <marcel@icaotix.de>
Date: Sun, 26 Jul 2020 23:35:58 +0200
Subject: [PATCH] Lint project again, mostly reordering html directives

---
 frontend/src/views/About.vue                  |  4 +-
 frontend/src/views/Home.vue                   | 10 +--
 frontend/src/views/SignIn.vue                 | 46 ++++++-------
 frontend/src/views/admin/EditUser.vue         | 24 +++----
 frontend/src/views/admin/Users.vue            |  6 +-
 frontend/src/views/admin/UsersItems.vue       | 14 ++--
 .../views/statistics/charts/AccountPie.vue    |  2 +-
 .../views/statistics/charts/MonthSummary.vue  |  2 +-
 .../views/statistics/charts/RevenuePie.vue    |  2 +-
 .../views/statistics/charts/WeekSummary.vue   |  2 +-
 .../views/statistics/charts/WorkPausePie.vue  |  2 +-
 .../views/timerecords/CreateTimerecord.vue    | 58 ++++++++---------
 .../src/views/timerecords/EditTimerecord.vue  | 64 +++++++++----------
 .../src/views/timerecords/TimeRecordItem.vue  | 12 ++--
 .../src/views/timerecords/TimeRecords.vue     |  6 +-
 .../CreateTimeTrackAccount.vue                | 14 ++--
 .../EditTimeTrackAccount.vue                  | 14 ++--
 .../TimeTrackAccountItem.vue                  | 14 ++--
 .../timetrackaccounts/TimeTrackAccounts.vue   |  2 +-
 19 files changed, 149 insertions(+), 149 deletions(-)

diff --git a/frontend/src/views/About.vue b/frontend/src/views/About.vue
index ec5a9bb..ef58800 100644
--- a/frontend/src/views/About.vue
+++ b/frontend/src/views/About.vue
@@ -20,9 +20,9 @@
         </v-card>
       </v-col>
     </v-row>
-    <v-row class="ma-5" v-if="todos" >
+    <v-row class="ma-5" v-if="todos">
       <v-col cols="12">
-        <v-card v-for="todo of todos" :key="todo.id">
+        <v-card :key="todo.id" v-for="todo of todos">
           <p>
             <v-icon color="white" v-if="!todo.completed">mdi-checkbox-blank-circle-outline</v-icon>
             <v-icon color="white" v-else>mdi-check-circle</v-icon>
diff --git a/frontend/src/views/Home.vue b/frontend/src/views/Home.vue
index f663abc..b878b51 100644
--- a/frontend/src/views/Home.vue
+++ b/frontend/src/views/Home.vue
@@ -27,9 +27,9 @@
         <v-card>
           <p class="pa-2 larger-text">Today</p>
           <div :key="today._links.self.href" v-for="today in todaysRecord">
-            <v-row no-gutters align="center">
+            <v-row align="center" no-gutters>
               <v-col cols="12">
-                <v-card color="background" elevation="0" class="ma-2">
+                <v-card class="ma-2" color="background" elevation="0">
                   <div>
                     <v-icon color="green" v-if="today.type === 'PAID'">mdi-currency-usd</v-icon>
                     <v-icon color="red" v-if="today.type === 'BREAK'">mdi-currency-usd-off</v-icon>
@@ -54,9 +54,9 @@
         <v-card>
           <p class="pa-2 larger-text">Accounts</p>
           <div :key="timeTrackAccount._links.self.href" v-for="timeTrackAccount in timeTrackAccounts">
-            <v-row no-gutters align="center">
+            <v-row align="center" no-gutters>
               <v-col cols="12">
-                <v-card color="background" elevation="0" class="ma-2">
+                <v-card class="ma-2" color="background" elevation="0">
                   <div>
                     <v-icon color="primary">mdi-account-tie</v-icon>
                     Account: {{timeTrackAccount.name}}
@@ -72,7 +72,7 @@
         </v-card>
       </v-col>
     </v-row>
-    <v-card v-if="!loggedIn" class="pa-3">
+    <v-card class="pa-3" v-if="!loggedIn">
       <p class="larger-text">Welcome to Geo Timetracking</p>
     </v-card>
   </v-container>
diff --git a/frontend/src/views/SignIn.vue b/frontend/src/views/SignIn.vue
index 15666fc..2486b08 100644
--- a/frontend/src/views/SignIn.vue
+++ b/frontend/src/views/SignIn.vue
@@ -1,49 +1,49 @@
 <template>
-  <v-container class="fill-height" @keyup.enter="handleEnter">
+  <v-container @keyup.enter="handleEnter" class="fill-height">
     <v-row align="center" justify="center">
       <v-col cols="12">
         <v-card elevation="0">
           <v-window v-model="visiblePane">
             <v-window-item :value="1">
               <v-row>
-                <v-col cols="12" md="8" class="main">
+                <v-col class="main" cols="12" md="8">
                   <v-card-text class="mt-1">
                     <h1 class="text-center display-2 logowhite--text">Sign in</h1>
                     <v-form>
                       <v-text-field
+                        color="primary"
                         label="Username"
-                        v-model="signInData.username"
                         name="Username"
                         prepend-icon="mdi-account"
                         type="text"
-                        color="primary"
+                        v-model="signInData.username"
                       />
                       <v-text-field
+                        color="primary"
                         id="password"
                         label="Password"
-                        v-model="signInData.password"
                         name="Password"
                         prepend-icon="mdi-key"
                         type="password"
-                        color="primary"
+                        v-model="signInData.password"
                       />
                     </v-form>
                     <p>{{errorMessage}}</p>
                   </v-card-text>
                   <div class="text-center mt-3">
-                    <v-btn rounded color="logowhite" outlined dark @click="signin">Sign In</v-btn>
+                    <v-btn @click="signin" color="logowhite" dark outlined rounded>Sign In</v-btn>
                   </div>
                 </v-col>
-                <v-col cols="12" md="4" class="main">
+                <v-col class="main" cols="12" md="4">
                   <v-card-text class="white--text mt-1">
                     <h1 class="text-center display-1 primary--text">No account yet?</h1>
                     <div class="text-center ma-12">
                       <v-avatar min-width="100" size="230">
-                        <img src="../assets/logo_gt.svg" alt="John"/>
+                        <img alt="John" src="../assets/logo_gt.svg"/>
                       </v-avatar>
                     </div>
                     <div class="text-center mt-10">
-                      <v-btn class="primary--text" rounded outlined dark @click="switchPane(2)">Create Account</v-btn>
+                      <v-btn @click="switchPane(2)" class="primary--text" dark outlined rounded>Create Account</v-btn>
                     </div>
                   </v-card-text>
                 </v-col>
@@ -51,60 +51,60 @@
             </v-window-item>
             <v-window-item :value="2">
               <v-row class="fill-heigth">
-                <v-col cols="12" md="4" class="main">
+                <v-col class="main" cols="12" md="4">
                   <v-card-text class="white--text mt-1">
                     <h1 class="text-center display-1 primary--text">Welcome Back</h1>
                   </v-card-text>
                   <div class="text-center ma-12">
                     <v-avatar min-width="100" size="230">
-                      <img src="../assets/logo_gt.svg" alt="John"/>
+                      <img alt="John" src="../assets/logo_gt.svg"/>
                     </v-avatar>
                   </div>
                   <div class="text-center mt-3">
-                    <v-btn class="primary--text" rounded outlined dark @click="switchPane(1)">Sign In</v-btn>
+                    <v-btn @click="switchPane(1)" class="primary--text" dark outlined rounded>Sign In</v-btn>
                   </div>
                 </v-col>
-                <v-col cols="12" md="8" class="main">
+                <v-col class="main" cols="12" md="8">
                   <v-card-text class="mt-12">
                     <h1 class="text-center display-2 logowhite--text">Create Account</h1>
                     <v-form>
                       <v-text-field
+                        color="primary "
                         label="Firstname"
                         name="FirstnameR"
-                        v-model="signUpData.firstname"
                         prepend-icon="mdi-account-box"
                         type="text"
-                        color="primary "
+                        v-model="signUpData.firstname"
                       />
                       <v-text-field
+                        color="primary"
                         label="Lastname"
                         name="LastnameR"
-                        v-model="signUpData.lastname"
                         prepend-icon="mdi-account-box"
                         type="text"
-                        color="primary"
+                        v-model="signUpData.lastname"
                       />
                       <v-text-field
+                        color="primary"
                         label="Username"
                         name="UsernameR"
-                        v-model="signUpData.username"
                         prepend-icon="mdi-account"
                         type="text"
-                        color="primary"
+                        v-model="signUpData.username"
                       />
                       <v-text-field
+                        color="primary"
                         label="Password"
                         name="PasswordR"
-                        v-model="signUpData.password"
                         prepend-icon="mdi-key"
                         type="password"
-                        color="primary"
+                        v-model="signUpData.password"
                       />
                     </v-form>
                     <p>{{errorMessage}}</p>
                   </v-card-text>
                   <div class="text-center mt-n5">
-                    <v-btn color="logowhite" rounded outlined @click="signup">Sign Up</v-btn>
+                    <v-btn @click="signup" color="logowhite" outlined rounded>Sign Up</v-btn>
                   </div>
                 </v-col>
               </v-row>
diff --git a/frontend/src/views/admin/EditUser.vue b/frontend/src/views/admin/EditUser.vue
index 90e57ee..9dcf944 100644
--- a/frontend/src/views/admin/EditUser.vue
+++ b/frontend/src/views/admin/EditUser.vue
@@ -11,25 +11,25 @@
 
       <v-form>
         <v-text-field
+          color="primary"
           label="firstname"
-          v-model="firstname"
           name="firstname"
           prepend-icon="mdi-account"
           type="text"
-          color="primary"
+          v-model="firstname"
         />
         <v-text-field
+          color="primary"
           label="lastname"
-          v-model="lastname"
           name="lastname"
           prepend-icon="mdi-account"
           type="text"
-          color="primary"
+          v-model="lastname"
         />
       </v-form>
 
       <div class="text-center ma-3">
-        <v-btn rounded color="logowhite" outlined dark v-on:click="editUserInformation()">Edit</v-btn>
+        <v-btn color="logowhite" dark outlined rounded v-on:click="editUserInformation()">Edit</v-btn>
       </div>
       <p id="noudata"></p>
     </v-card>
@@ -38,33 +38,33 @@
 
       <v-form>
         <v-text-field
+          color="primary"
           label="latitude"
-          v-model="latitude"
           name="latitude"
           prepend-icon="mdi-map-marker"
           type="text"
-          color="primary"
+          v-model="latitude"
         />
         <v-text-field
+          color="primary"
           label="longitude"
-          v-model="longitude"
           name="longitude"
           prepend-icon="mdi-map-marker"
           type="text"
-          color="primary"
+          v-model="longitude"
         />
         <v-text-field
+          color="primary"
           label="radius"
-          v-model="radius"
           name="radius"
           prepend-icon="mdi-map-marker-radius"
           type="text"
-          color="primary"
+          v-model="radius"
         />
       </v-form>
 
       <div class="text-center ma-3">
-        <v-btn rounded color="logowhite" outlined dark v-on:click="editLocation()">Edit</v-btn>
+        <v-btn color="logowhite" dark outlined rounded v-on:click="editLocation()">Edit</v-btn>
       </div>
       <p id="locationnotcomplete"></p>
     </v-card>
diff --git a/frontend/src/views/admin/Users.vue b/frontend/src/views/admin/Users.vue
index 0a918e2..c2d9868 100644
--- a/frontend/src/views/admin/Users.vue
+++ b/frontend/src/views/admin/Users.vue
@@ -1,18 +1,18 @@
 <template>
   <v-container fluid>
     <div v-bind:key="user.username" v-for="user in users">
-      <UsersItems v-bind:user="user" v-on:edit-user="edituser" v-on:del-user="deluser"
+      <UsersItems v-bind:user="user" v-on:del-user="deluser" v-on:edit-user="edituser"
                   v-on:show-accounts="showAccounts"/>
     </div>
     <v-row>
       <v-col cols="5"></v-col>
       <v-col cols="1">
-        <v-btn v-if="havePrevPage == true" @click="prevPage()">
+        <v-btn @click="prevPage()" v-if="havePrevPage == true">
           <v-icon>mdi-arrow-left</v-icon>
         </v-btn>
       </v-col>
       <v-col cols="1">
-        <v-btn v-if="haveNextPage == true" @click="nextPage()">
+        <v-btn @click="nextPage()" v-if="haveNextPage == true">
           <v-icon>mdi-arrow-right</v-icon>
         </v-btn>
       </v-col>
diff --git a/frontend/src/views/admin/UsersItems.vue b/frontend/src/views/admin/UsersItems.vue
index acf181b..779efa0 100644
--- a/frontend/src/views/admin/UsersItems.vue
+++ b/frontend/src/views/admin/UsersItems.vue
@@ -2,10 +2,10 @@
   <v-card outlined>
     <v-list-item class="main_accent">
       <v-list-item-content>
-        <v-row no-gutters align="center">
+        <v-row align="center" no-gutters>
           <v-col cols="1">
             <v-avatar>
-              <img src="https://cdn.vuetifyjs.com/images/john.jpg" alt="John"/>
+              <img alt="John" src="https://cdn.vuetifyjs.com/images/john.jpg"/>
             </v-avatar>
           </v-col>
           <v-col cols="3">
@@ -23,20 +23,20 @@
         </v-row>
       </v-list-item-content>
       <v-list-item-action>
-        <v-speed-dial v-model="editButton" transition="slide-x-reverse-transition" direction="left" open-on-hover>
+        <v-speed-dial direction="left" open-on-hover transition="slide-x-reverse-transition" v-model="editButton">
           <template v-slot:activator>
-            <v-btn v-model="editButton" color="background" elevation="0" dark fab>
+            <v-btn color="background" dark elevation="0" fab v-model="editButton">
               <v-icon v-if="editButton">mdi-close</v-icon>
               <v-icon v-else>mdi-pencil</v-icon>
             </v-btn>
           </template>
-          <v-btn fab dark small color="primary" @click="$emit('show-accounts', user.username, user._links.self.href)">
+          <v-btn @click="$emit('show-accounts', user.username, user._links.self.href)" color="primary" dark fab small>
             <v-icon>mdi-account-details</v-icon>
           </v-btn>
-          <v-btn fab dark small color="green" @click="$emit('edit-user', user._links.self.href)">
+          <v-btn @click="$emit('edit-user', user._links.self.href)" color="green" dark fab small>
             <v-icon>mdi-file-document-edit</v-icon>
           </v-btn>
-          <v-btn fab dark small color="red" @click="$emit('del-user', user._links.self.href)">
+          <v-btn @click="$emit('del-user', user._links.self.href)" color="red" dark fab small>
             <v-icon>mdi-delete</v-icon>
           </v-btn>
         </v-speed-dial>
diff --git a/frontend/src/views/statistics/charts/AccountPie.vue b/frontend/src/views/statistics/charts/AccountPie.vue
index 97bea76..4af52d4 100644
--- a/frontend/src/views/statistics/charts/AccountPie.vue
+++ b/frontend/src/views/statistics/charts/AccountPie.vue
@@ -4,7 +4,7 @@
       <p></p>
       <h3 align="center">Times by type PAID and TimetrackAccount</h3>
       <div id="chart">
-        <apexchart class="ma-5" type="donut" width="100%" :options="chartOptions" :series="series"></apexchart>
+        <apexchart :options="chartOptions" :series="series" class="ma-5" type="donut" width="100%"></apexchart>
       </div>
     </div>
   </v-card>
diff --git a/frontend/src/views/statistics/charts/MonthSummary.vue b/frontend/src/views/statistics/charts/MonthSummary.vue
index fbcccbd..3f5863f 100644
--- a/frontend/src/views/statistics/charts/MonthSummary.vue
+++ b/frontend/src/views/statistics/charts/MonthSummary.vue
@@ -4,7 +4,7 @@
       <p></p>
       <h3 align="center">My last 30 Days</h3>
       <div id="chart">
-        <apexchart class="ma-5" type="bar" height="350" :options="chartOptions" :series="series"></apexchart>
+        <apexchart :options="chartOptions" :series="series" class="ma-5" height="350" type="bar"></apexchart>
       </div>
     </div>
   </v-card>
diff --git a/frontend/src/views/statistics/charts/RevenuePie.vue b/frontend/src/views/statistics/charts/RevenuePie.vue
index d0ab96b..4226db5 100644
--- a/frontend/src/views/statistics/charts/RevenuePie.vue
+++ b/frontend/src/views/statistics/charts/RevenuePie.vue
@@ -4,7 +4,7 @@
       <p></p>
       <h3 align="center">Revenue by TimeTrack Account</h3>
       <div id="chart">
-        <apexchart class="ma-5" type="donut" width="100%" :options="chartOptions" :series="series"></apexchart>
+        <apexchart :options="chartOptions" :series="series" class="ma-5" type="donut" width="100%"></apexchart>
       </div>
     </div>
   </v-card>
diff --git a/frontend/src/views/statistics/charts/WeekSummary.vue b/frontend/src/views/statistics/charts/WeekSummary.vue
index 687bb57..0d5df39 100644
--- a/frontend/src/views/statistics/charts/WeekSummary.vue
+++ b/frontend/src/views/statistics/charts/WeekSummary.vue
@@ -4,7 +4,7 @@
       <p></p>
       <h3 align="center">My last 7 Days</h3>
       <div id="chart">
-        <apexchart class="ma-5" type="bar" height="350" :options="chartOptions" :series="series"></apexchart>
+        <apexchart :options="chartOptions" :series="series" class="ma-5" height="350" type="bar"></apexchart>
       </div>
     </div>
   </v-card>
diff --git a/frontend/src/views/statistics/charts/WorkPausePie.vue b/frontend/src/views/statistics/charts/WorkPausePie.vue
index 082a60c..2e2d121 100644
--- a/frontend/src/views/statistics/charts/WorkPausePie.vue
+++ b/frontend/src/views/statistics/charts/WorkPausePie.vue
@@ -4,7 +4,7 @@
       <p></p>
       <h3 align="center">Times by type PAID and BREAK</h3>
       <div id="chart">
-        <apexchart class="ma-5" type="donut" width="100%" :options="chartOptions" :series="series"></apexchart>
+        <apexchart :options="chartOptions" :series="series" class="ma-5" type="donut" width="100%"></apexchart>
       </div>
     </div>
   </v-card>
diff --git a/frontend/src/views/timerecords/CreateTimerecord.vue b/frontend/src/views/timerecords/CreateTimerecord.vue
index 86b05fa..43f9ea0 100644
--- a/frontend/src/views/timerecords/CreateTimerecord.vue
+++ b/frontend/src/views/timerecords/CreateTimerecord.vue
@@ -4,67 +4,67 @@
       <p class="text-center logowhite--text" style="font-size:30pt">Details</p>
       <v-row>
         <v-col cols="6">
-          <v-select v-model="entryData.type" :items="types" menu-props="auto" label="Type" hide-details
-                    prepend-icon="mdi-currency-usd" single-line></v-select>
+          <v-select :items="types" hide-details label="Type" menu-props="auto" prepend-icon="mdi-currency-usd"
+                    single-line v-model="entryData.type"></v-select>
         </v-col>
         <v-col cols="6">
-          <v-select v-model="entryData.account" :items="accounts" menu-props="auto" label="Account" hide-details
-                    prepend-icon="mdi-account-tie" single-line></v-select>
+          <v-select :items="accounts" hide-details label="Account" menu-props="auto" prepend-icon="mdi-account-tie"
+                    single-line v-model="entryData.account"></v-select>
         </v-col>
       </v-row>
       <v-row>
         <v-col cols="12" sm="6">
-          <v-menu ref="showDatepickerStartdate" v-model="showDatepickerStartdate" :close-on-content-click="false"
-                  :nudge-right="40" transition="scale-transition" offset-y min-width="290px">
+          <v-menu :close-on-content-click="false" :nudge-right="40" min-width="290px"
+                  offset-y ref="showDatepickerStartdate" transition="scale-transition" v-model="showDatepickerStartdate">
             <template v-slot:activator="{ on }">
-              <v-text-field v-model="entryData.startdate" label="Startdate" prepend-icon="mdi-calendar-range" readonly
+              <v-text-field label="Startdate" prepend-icon="mdi-calendar-range" readonly v-model="entryData.startdate"
                             v-on="on"></v-text-field>
             </template>
-            <v-date-picker v-model="entryData.startdate" @input="showDatepickerStartdate = false" no-title
-                           scrollable></v-date-picker>
+            <v-date-picker @input="showDatepickerStartdate = false" no-title scrollable
+                           v-model="entryData.startdate"></v-date-picker>
           </v-menu>
         </v-col>
         <v-col cols="12" sm="6">
-          <v-menu ref="showDatepickerEnddate" v-model="showDatepickerEnddate"
-                  :close-on-content-click="false" :nudge-right="40" transition="scale-transition"
-                  offset-y min-width="290px">
+          <v-menu :close-on-content-click="false" :nudge-right="40"
+                  min-width="290px" offset-y ref="showDatepickerEnddate"
+                  transition="scale-transition" v-model="showDatepickerEnddate">
             <template v-slot:activator="{ on }">
-              <v-text-field v-model="entryData.enddate" label="Enddate"
-                            prepend-icon="mdi-calendar-range" readonly v-on="on"></v-text-field>
+              <v-text-field label="Enddate" prepend-icon="mdi-calendar-range"
+                            readonly v-model="entryData.enddate" v-on="on"></v-text-field>
             </template>
-            <v-date-picker v-model="entryData.enddate" @input="showDatepickerEnddate = false" no-title
-                           scrollable></v-date-picker>
+            <v-date-picker @input="showDatepickerEnddate = false" no-title scrollable
+                           v-model="entryData.enddate"></v-date-picker>
           </v-menu>
         </v-col>
       </v-row>
       <v-row>
         <v-col cols="12" sm="6">
-          <v-menu ref="showTimepickerStarttime" v-model="showTimepickerStarttime" :close-on-content-click="false"
-                  :nudge-right="40" :return-value.sync="entryData.starttime" transition="scale-transition" offset-y
-                  max-width="290px" min-width="290px">
+          <v-menu :close-on-content-click="false" :nudge-right="40" :return-value.sync="entryData.starttime"
+                  max-width="290px" min-width="290px" offset-y ref="showTimepickerStarttime"
+                  transition="scale-transition" v-model="showTimepickerStarttime">
             <template v-slot:activator="{ on }">
-              <v-text-field v-model="entryData.starttime" label="Starttime" prepend-icon="mdi-clock-outline" readonly
+              <v-text-field label="Starttime" prepend-icon="mdi-clock-outline" readonly v-model="entryData.starttime"
                             v-on="on"></v-text-field>
             </template>
-            <v-time-picker v-if="showTimepickerStarttime" v-model="entryData.starttime" full-width format="24hr"
-                           @click:minute="$refs.showTimepickerStarttime.save(entryData.starttime)"></v-time-picker>
+            <v-time-picker @click:minute="$refs.showTimepickerStarttime.save(entryData.starttime)" format="24hr" full-width v-if="showTimepickerStarttime"
+                           v-model="entryData.starttime"></v-time-picker>
           </v-menu>
         </v-col>
         <v-col cols="12" sm="6">
-          <v-menu ref="showTimepickerEndtime" v-model="showTimepickerEndtime" :close-on-content-click="false"
-                  :nudge-right="40" :return-value.sync="entryData.endtime" transition="scale-transition" offset-y
-                  max-width="290px" min-width="290px">
+          <v-menu :close-on-content-click="false" :nudge-right="40" :return-value.sync="entryData.endtime"
+                  max-width="290px" min-width="290px" offset-y ref="showTimepickerEndtime"
+                  transition="scale-transition" v-model="showTimepickerEndtime">
             <template v-slot:activator="{ on }">
-              <v-text-field v-model="entryData.endtime" label="Endtime" prepend-icon="mdi-clock-outline" readonly
+              <v-text-field label="Endtime" prepend-icon="mdi-clock-outline" readonly v-model="entryData.endtime"
                             v-on="on"></v-text-field>
             </template>
-            <v-time-picker v-if="showTimepickerEndtime" v-model="entryData.endtime" full-width format="24hr"
-                           @click:minute="$refs.showTimepickerEndtime.save(entryData.endtime)"></v-time-picker>
+            <v-time-picker @click:minute="$refs.showTimepickerEndtime.save(entryData.endtime)" format="24hr" full-width v-if="showTimepickerEndtime"
+                           v-model="entryData.endtime"></v-time-picker>
           </v-menu>
         </v-col>
       </v-row>
       <div class="text-center ma-3">
-        <v-btn rounded color="logowhite" outlined dark @click="addRecord">Add</v-btn>
+        <v-btn @click="addRecord" color="logowhite" dark outlined rounded>Add</v-btn>
       </div>
     </v-card>
   </v-container>
diff --git a/frontend/src/views/timerecords/EditTimerecord.vue b/frontend/src/views/timerecords/EditTimerecord.vue
index 9ab41c0..f8de256 100644
--- a/frontend/src/views/timerecords/EditTimerecord.vue
+++ b/frontend/src/views/timerecords/EditTimerecord.vue
@@ -5,127 +5,127 @@
 
       <v-col cols="6">
         <v-select
-          v-model="newtype"
           :items="types"
-          menu-props="auto"
-          label="Type"
           hide-details
+          label="Type"
+          menu-props="auto"
           prepend-icon="mdi-currency-usd"
           single-line
+          v-model="newtype"
         ></v-select>
       </v-col>
       <v-row>
         <v-col cols="12" sm="6">
           <v-menu
-            ref="menu"
-            v-model="menu"
             :close-on-content-click="false"
             :nudge-right="40"
-            transition="scale-transition"
-            offset-y
             min-width="290px"
+            offset-y
+            ref="menu"
+            transition="scale-transition"
+            v-model="menu"
           >
             <template v-slot:activator="{ on }">
               <v-text-field
-                v-model="newstartdate"
                 label="Startdate"
                 prepend-icon="mdi-calendar-range"
                 readonly
+                v-model="newstartdate"
                 v-on="on"
               ></v-text-field>
             </template>
-            <v-date-picker v-model="newstartdate" @input="menu = false" no-title scrollable>
+            <v-date-picker @input="menu = false" no-title scrollable v-model="newstartdate">
 
             </v-date-picker>
           </v-menu>
         </v-col>
         <v-col cols="12" sm="6">
           <v-menu
-            ref="menu2"
-            v-model="menu2"
             :close-on-content-click="false"
             :nudge-right="40"
-            transition="scale-transition"
-            offset-y
             min-width="290px"
+            offset-y
+            ref="menu2"
+            transition="scale-transition"
+            v-model="menu2"
           >
             <template v-slot:activator="{ on }">
               <v-text-field
-                v-model="newenddate"
                 label="Enddate"
                 prepend-icon="mdi-calendar-range"
                 readonly
+                v-model="newenddate"
                 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 @input="menu2 = false" no-title scrollable v-model="newenddate"></v-date-picker>
           </v-menu>
         </v-col>
       </v-row>
       <v-row>
         <v-col cols="11" sm="6">
           <v-menu
-            ref="menutime"
-            v-model="menutime"
             :close-on-content-click="false"
             :nudge-right="40"
             :return-value.sync="timestart"
-            transition="scale-transition"
-            offset-y
             max-width="290px"
             min-width="290px"
+            offset-y
+            ref="menutime"
+            transition="scale-transition"
+            v-model="menutime"
           >
             <template v-slot:activator="{ on }">
               <v-text-field
-                v-model="timestart"
                 label="Starttime"
                 prepend-icon="mdi-clock-outline"
                 readonly
+                v-model="timestart"
                 v-on="on"
               ></v-text-field>
             </template>
             <v-time-picker
+              @click:minute="$refs.menutime.save(timestart)"
+              format="24hr"
+              full-width
               v-if="menutime"
               v-model="timestart"
-              full-width
-              format="24hr"
-              @click:minute="$refs.menutime.save(timestart)"
             ></v-time-picker>
           </v-menu>
         </v-col>
         <v-col cols="11" sm="6">
           <v-menu
-            ref="menutime2"
-            v-model="menutime2"
             :close-on-content-click="false"
             :nudge-right="40"
             :return-value.sync="timeend"
-            transition="scale-transition"
-            offset-y
             max-width="290px"
             min-width="290px"
+            offset-y
+            ref="menutime2"
+            transition="scale-transition"
+            v-model="menutime2"
           >
             <template v-slot:activator="{ on }">
               <v-text-field
-                v-model="timeend"
                 label="Endtime"
                 prepend-icon="mdi-clock-outline"
                 readonly
+                v-model="timeend"
                 v-on="on"
               ></v-text-field>
             </template>
             <v-time-picker
+              @click:minute="$refs.menutime2.save(timeend)"
+              format="24hr"
+              full-width
               v-if="menutime2"
               v-model="timeend"
-              full-width
-              format="24hr"
-              @click:minute="$refs.menutime2.save(timeend)"
             ></v-time-picker>
           </v-menu>
         </v-col>
       </v-row>
       <div class="text-center ma-3">
-        <v-btn rounded color="logowhite" outlined dark v-on:click="editRecord()">Edit</v-btn>
+        <v-btn color="logowhite" dark outlined rounded v-on:click="editRecord()">Edit</v-btn>
       </div>
     </v-card>
   </v-container>
diff --git a/frontend/src/views/timerecords/TimeRecordItem.vue b/frontend/src/views/timerecords/TimeRecordItem.vue
index 2b19f01..be5ed18 100644
--- a/frontend/src/views/timerecords/TimeRecordItem.vue
+++ b/frontend/src/views/timerecords/TimeRecordItem.vue
@@ -3,7 +3,7 @@
     <v-list-item class="main_accent">
       <v-list-item-content>
         <h3 justify-center>{{timeRecord.date}}</h3>
-        <v-row no-gutters align="center">
+        <v-row align="center" no-gutters>
           <v-col cols="2">
             <v-card color="background" elevation="0">
               <v-icon color="green" v-if="timeRecord.type === 'PAID'">mdi-currency-usd</v-icon>
@@ -39,18 +39,18 @@
         </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 direction="left" open-on-hover transition="slide-x-reverse-transition" v-model="fab">
           <template v-slot:activator>
-            <v-btn v-model="fab" color="background" elevation="0" dark fab>
+            <v-btn color="background" dark elevation="0" fab v-model="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._links.self.href, timeRecord.enddate)">
+          <v-btn @click="$emit('edit-timeRecord', timeRecord._links.self.href, timeRecord.enddate)" color="green" dark fab
+                 small>
             <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)">
+          <v-btn @click="$emit('del-timeRecord', timeRecord._links.self.href)" color="red" dark fab small>
             <v-icon>mdi-delete</v-icon>
           </v-btn>
         </v-speed-dial>
diff --git a/frontend/src/views/timerecords/TimeRecords.vue b/frontend/src/views/timerecords/TimeRecords.vue
index 8e3b652..3bad0ee 100644
--- a/frontend/src/views/timerecords/TimeRecords.vue
+++ b/frontend/src/views/timerecords/TimeRecords.vue
@@ -10,12 +10,12 @@
     <v-row>
       <v-col cols="5"></v-col>
       <v-col cols="1">
-        <v-btn v-if="havePrevPage == true" @click="prevPage()">
+        <v-btn @click="prevPage()" v-if="havePrevPage == true">
           <v-icon>mdi-arrow-left</v-icon>
         </v-btn>
       </v-col>
       <v-col cols="1">
-        <v-btn v-if="haveNextPage == true" @click="nextPage()">
+        <v-btn @click="nextPage()" v-if="haveNextPage == true">
           <v-icon>mdi-arrow-right</v-icon>
         </v-btn>
       </v-col>
@@ -24,7 +24,7 @@
     <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 @click="createTimeRecord()" color="primary" fab v-if="loggedIn == 'true'">
           <v-icon>mdi-plus</v-icon>
         </v-btn>
       </v-col>
diff --git a/frontend/src/views/timetrackaccounts/CreateTimeTrackAccount.vue b/frontend/src/views/timetrackaccounts/CreateTimeTrackAccount.vue
index fc3bcc0..6c66e40 100644
--- a/frontend/src/views/timetrackaccounts/CreateTimeTrackAccount.vue
+++ b/frontend/src/views/timetrackaccounts/CreateTimeTrackAccount.vue
@@ -4,32 +4,32 @@
       <p class="text-center logowhite--text" style="font-size:30pt">Details</p>
       <v-form>
         <v-text-field
+          color="primary"
           label="name"
-          v-model="accountData.name"
           name="name"
           prepend-icon="mdi-account-tie"
           type="text"
-          color="primary"
+          v-model="accountData.name"
         />
         <v-text-field
+          color="primary"
           label="revenue"
-          v-model="accountData.revenue"
           name="revenue"
           prepend-icon="mdi-currency-usd"
           type="text"
-          color="primary"
+          v-model="accountData.revenue"
         />
         <v-text-field
+          color="primary"
           label="description"
-          v-model="accountData.description"
           name="description"
           prepend-icon="mdi-information-variant"
           type="text"
-          color="primary"
+          v-model="accountData.description"
         />
       </v-form>
       <div class="text-center ma-3">
-        <v-btn rounded color="logowhite" outlined dark @click="addAccount">Add</v-btn>
+        <v-btn @click="addAccount" color="logowhite" dark outlined rounded>Add</v-btn>
       </div>
     </v-card>
   </v-container>
diff --git a/frontend/src/views/timetrackaccounts/EditTimeTrackAccount.vue b/frontend/src/views/timetrackaccounts/EditTimeTrackAccount.vue
index cd20782..b9cf8d6 100644
--- a/frontend/src/views/timetrackaccounts/EditTimeTrackAccount.vue
+++ b/frontend/src/views/timetrackaccounts/EditTimeTrackAccount.vue
@@ -6,15 +6,15 @@
     <v-card align-center v-else>
       <p class="text-center logowhite--text">Edit details for {{accountData.name}}</p>
       <v-form>
-        <v-text-field :disabled="isInactive" label="name" v-model="accountData.name" name="name"
-                      prepend-icon="mdi-account-tie" type="text" color="primary"/>
-        <v-text-field :disabled="isInactive" label="revenue" v-model="accountData.revenue" name="revenue"
-                      prepend-icon="mdi-currency-usd" type="text" color="primary"/>
-        <v-text-field :disabled="isInactive" label="description" v-model="accountData.description" name="description"
-                      prepend-icon="mdi-information-variant" type="text" color="primary"/>
+        <v-text-field :disabled="isInactive" color="primary" label="name" name="name"
+                      prepend-icon="mdi-account-tie" type="text" v-model="accountData.name"/>
+        <v-text-field :disabled="isInactive" color="primary" label="revenue" name="revenue"
+                      prepend-icon="mdi-currency-usd" type="text" v-model="accountData.revenue"/>
+        <v-text-field :disabled="isInactive" color="primary" label="description" name="description"
+                      prepend-icon="mdi-information-variant" type="text" v-model="accountData.description"/>
       </v-form>
       <div class="text-center ma-3">
-        <v-btn rounded color="logowhite" outlined dark @click="editAccount">Edit</v-btn>
+        <v-btn @click="editAccount" color="logowhite" dark outlined rounded>Edit</v-btn>
       </div>
     </v-card>
   </v-container>
diff --git a/frontend/src/views/timetrackaccounts/TimeTrackAccountItem.vue b/frontend/src/views/timetrackaccounts/TimeTrackAccountItem.vue
index bc671e1..918008f 100644
--- a/frontend/src/views/timetrackaccounts/TimeTrackAccountItem.vue
+++ b/frontend/src/views/timetrackaccounts/TimeTrackAccountItem.vue
@@ -2,7 +2,7 @@
   <v-card outlined>
     <v-list-item class="main_accent">
       <v-list-item-content>
-        <v-row no-gutters align="center">
+        <v-row align="center" no-gutters>
           <v-col cols="3">
             <v-card color="background" elevation="0">
               <pre><v-icon color="primary">mdi-account-tie</v-icon>{{" " + timeTrackAccount.name}}</pre>
@@ -24,19 +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 direction="left" open-on-hover transition="slide-x-reverse-transition" v-model="fab">
           <template v-slot:activator>
-            <v-btn v-model="fab" color="background" elevation="0" dark fab>
+            <v-btn color="background" dark elevation="0" fab v-model="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 @click="$emit('edit-timeTrackAccount', timeTrackAccount._links.self.href)" color="green" dark fab
+                 small>
             <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 @click="$emit('del-timeTrackAccount', timeTrackAccount._links.self.href)" color="red" dark fab
+                 small>
             <v-icon>mdi-delete</v-icon>
           </v-btn>
         </v-speed-dial>
diff --git a/frontend/src/views/timetrackaccounts/TimeTrackAccounts.vue b/frontend/src/views/timetrackaccounts/TimeTrackAccounts.vue
index f0ddf36..8b74df5 100644
--- a/frontend/src/views/timetrackaccounts/TimeTrackAccounts.vue
+++ b/frontend/src/views/timetrackaccounts/TimeTrackAccounts.vue
@@ -10,7 +10,7 @@
     <v-row>
       <v-col cols="6"></v-col>
       <v-col cols="1">
-        <v-btn v-if="loggedIn == 'true'" fab color="primary" @click="createTimeTrackAccount()">
+        <v-btn @click="createTimeTrackAccount()" color="primary" fab v-if="loggedIn == 'true'">
           <v-icon>mdi-plus</v-icon>
         </v-btn>
       </v-col>