add timetrack account managing views and implement functionality

frontend/src/router/index.js

@@ -11,6 +11,9 @@ import Register from "../views/Register.vue";
 import StatisticOverview from "../views/StatisticOverview.vue";
 import Users from "../views/Users.vue";
 import EditUser from "../views/EditUser.vue";
+import TimeTrackAccounts from "../views/TimeTrackAccounts.vue";
+import EditTimeTrackAccount from "../views/EditTimeTrackAccount.vue"
+import CreateTimeTrackAccount from "../views/CreateTimeTrackAccount.vue"
 
 Vue.use(VueRouter);
 
@@ -72,6 +75,21 @@ const routes = [
     name: "EditUser",
     component: EditUser
   },
+  {
+    path: "/timetrackaccounts",
+    name: "TimeTrack Accounts",
+    component: TimeTrackAccounts
+  },
+  {
+    path: "/edittimetrackaccount",
+    name: "Edit TimeTrack Account",
+    component: EditTimeTrackAccount
+  },
+  {
+    path: "/createtimetrackaccount",
+    name: "Create TimeTrack Account",
+    component: CreateTimeTrackAccount
+  },
   {
     path: '*',
     component: missing

frontend/src/variables.js

@@ -1 +1,2 @@
 export const baseUri = 'http://plesk.icaotix.de:5000'
+export const selfUri = 'http://localhost:8080'

frontend/src/views/CreateTimeTrackAccount.vue

@@ -0,0 +1,80 @@
+<template >
+  <v-container>
+    <v-card align-center>
+      <h3 class="text-center display-2 logowhite--text">Details</h3>
+
+      <v-form>
+        <v-text-field
+          label="name"
+          v-model="newname"
+          name="name"
+          prepend-icon="mdi-account-tie"
+          type="text"
+          color="primary"
+        />
+        <v-text-field
+          label="revenue"
+          v-model="newrevenue"
+          name="revenue"
+          prepend-icon="mdi-currency-usd"
+          type="text"
+          color="primary"
+        />
+        <v-text-field
+          label="description"
+          v-model="newdescription"
+          name="description"
+          prepend-icon="mdi-information-variant"
+          type="text"
+          color="primary"
+        />
+      </v-form>
+
+      <div class="text-center ma-3">
+        <v-btn rounded color="logowhite" outlined dark v-on:click="addAccount()">Add</v-btn>
+      </div>
+    </v-card>
+  </v-container>
+</template>
+<script>
+import { baseUri, selfUri } from "../variables";
+export default {
+  name: "CreateTimeTrackAccount",
+  data: () => ({
+    user: sessionStorage.getItem("timeTrackAccountListUserId"),
+    newname: "",
+    newrevenue: "",
+    newdescription: "",
+  }),
+
+  methods: {
+    addAccount() {
+      if (this.newname != "" || this.newrevenue != "" || this.newdescription != "") {
+        var xhttp = new XMLHttpRequest();
+
+        xhttp.onreadystatechange = function() {
+          if ((this.status == 201) & (this.readyState == 4)) {
+            window.location.href = selfUri + "/timetrackaccounts";
+          }
+        };
+        xhttp.open("POST", baseUri + "/accounts", true);
+        xhttp.setRequestHeader("Content-Type", "application/json");
+
+        xhttp.setRequestHeader("Authorization", sessionStorage.getItem("jwt"));
+        xhttp.send(
+          "{" +
+            '"user": "' +
+            this.user +
+            '", "revenue": "' +
+            this.newrevenue +
+            '", "name": "' +
+            this.newname +
+            '", "description": "' +
+            this.newdescription +
+            '"}'
+        );
+      }
+    },
+  },
+};
+</script>

frontend/src/views/EditTimeTrackAccount.vue

@@ -0,0 +1,117 @@
+<template >
+  <v-container>
+    <v-card align-center>
+      <div class="text-center ma-3">
+        <h2 class="text-center display-2 logowhite--text">Account to edit:</h2>
+        <h3 class="text-center display-2 logowhite--text">{{name}}</h3>
+      </div>
+    </v-card>
+
+    <v-card align-center>
+      <h3 class="text-center display-2 logowhite--text">Details</h3>
+
+      <v-form>
+        <v-text-field
+          label="name"
+          v-model="newname"
+          name="name"
+          prepend-icon="mdi-account-tie"
+          type="text"
+          color="primary"
+        />
+        <v-text-field
+          label="revenue"
+          v-model="newrevenue"
+          name="revenue"
+          prepend-icon="mdi-currency-usd"
+          type="text"
+          color="primary"
+        />
+        <v-text-field
+          label="description"
+          v-model="newdescription"
+          name="description"
+          prepend-icon="mdi-information-variant"
+          type="text"
+          color="primary"
+        />
+      </v-form>
+
+      <div class="text-center ma-3">
+        <v-btn rounded color="logowhite" outlined dark v-on:click="editAccount()">Edit</v-btn>
+      </div>
+    </v-card>
+  </v-container>
+</template>
+<script>
+import { selfUri } from "../variables";
+export default {
+  name: "EditTimeTrackAccount",
+  data: () => ({
+    name: "",
+    revenue: "",
+    description: "",
+
+    newname: "",
+    newrevenue: "",
+    newdescription: "",
+  }),
+
+  methods: {
+    editAccount() {
+      var link = sessionStorage.getItem("timeTrackAccountEditSelfLink");
+
+      if (this.newname != this.name || this.newrevenue != this.revenue || this.newdescription != this.description) {
+        var xhttp = new XMLHttpRequest();
+
+        xhttp.onreadystatechange = function() {
+          if ((this.status == 200) & (this.readyState == 4)) {
+            window.location.href = selfUri + "/timetrackaccounts";
+          }
+        };
+        xhttp.open("PATCH", link, true);
+        xhttp.setRequestHeader("Content-Type", "application/json");
+
+        xhttp.setRequestHeader("Authorization", sessionStorage.getItem("jwt"));
+        xhttp.send(
+          "{" +
+            '"name": "' +
+            this.newname +
+            '", "revenue": "' +
+            this.newrevenue +
+            '", "description": "' +
+            this.newdescription +
+            '"}'
+        );
+      }
+    },
+  },
+  created() {
+    var userxhttp = new XMLHttpRequest();
+    var account;
+
+    userxhttp.onreadystatechange = function() {
+      if (this.readyState == 4 && this.status == 200) {
+        account = JSON.parse(userxhttp.responseText);
+      }
+    };
+    userxhttp.open(
+      "GET",
+      sessionStorage.getItem("timeTrackAccountEditSelfLink"),
+      false
+    );
+
+    userxhttp.setRequestHeader("Authorization", sessionStorage.getItem("jwt"));
+
+    userxhttp.send(null);
+    this.name = account.name;
+    this.revenue = account.revenue;
+    this.description = account.description;
+
+    this.newname = account.name;
+    this.newrevenue = account.revenue;
+    this.newdescription = account.description;
+
+  }
+};
+</script>

frontend/src/views/EditUser.vue

@@ -73,7 +73,7 @@
   </v-container>
 </template>
 <script>
-import { baseUri } from "../variables";
+import { baseUri,selfUri } from "../variables";
 export default {
   name: "Edituser",
   data: () => ({
@@ -94,7 +94,7 @@ export default {
 
         xhttp.onreadystatechange = function() {
           if ((this.status == 200) & (this.readyState == 4)) {
-            alert("sucsessful");
+            window.location.href = selfUri + "/users";
           }
         };
         xhttp.open("PATCH", link, true);
@@ -114,7 +114,7 @@ export default {
 
         xhttpfirst.onreadystatechange = function() {
           if ((this.status == 200) & (this.readyState == 4)) {
-            alert("sucsessful");
+            window.location.href = selfUri + "/users";
           }
         };
         xhttpfirst.open("PATCH", link, true);
@@ -129,7 +129,7 @@ export default {
 
         xhttplast.onreadystatechange = function() {
           if ((this.status == 200) & (this.readyState == 4)) {
-            alert("sucsessful");
+            window.location.href = selfUri + "/users";
           }
         };
         xhttplast.open("PATCH", link, true);
@@ -182,7 +182,7 @@ export default {
 
           xhttpadd.onreadystatechange = function() {
             if ((this.status == 200) & (this.readyState == 4)) {
-              alert("sucsessful");
+              window.location.href = selfUri + "/users";
             }
           };
           xhttpadd.open("PATCH", link, true);

frontend/src/views/TimeTrackAccountItem.vue

@@ -0,0 +1,67 @@
+<template>
+  <v-card outlined>
+    <v-list-item class="main_accent">
+      <v-list-item-content>
+        <v-row no-gutters align="center">
+          <v-col cols="3">
+            <v-card color="background" elevation="0">
+              <pre><v-icon color="primary">mdi-account-tie</v-icon>{{" " + timeTrackAccount.name}}</pre>
+            </v-card>
+          </v-col>
+          <v-col></v-col>
+          <v-col cols="1">
+            <v-card color="background" elevation="0">
+              <pre><v-icon color="green">mdi-currency-usd</v-icon>{{" " + timeTrackAccount.revenue}}</pre>
+            </v-card>
+          </v-col>
+          <v-col></v-col>
+          <v-col cols="7">
+            <v-card color="background" elevation="0">
+              <pre><v-icon color="primary">mdi-information-variant</v-icon>{{" " + timeTrackAccount.description}}</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-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-icon>mdi-delete</v-icon>
+          </v-btn>
+        </v-speed-dial>
+      </v-list-item-action>
+    </v-list-item>
+  </v-card>
+</template>
+
+<script>
+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>

frontend/src/views/TimeTrackAccounts.vue

@@ -0,0 +1,91 @@
+<template>
+  <v-container fluid>
+    <div v-bind:key="timeTrackAccount.name" v-for="timeTrackAccount in timeTrackAccounts">
+      <TimeTrackAccountItem
+        v-bind:timeTrackAccount="timeTrackAccount"
+        v-on:del-timeTrackAccount="deleteTimeTrackAccount"
+        v-on:edit-timeTrackAccount="editTimeTrackAccount"
+      />
+    </div>
+    <v-row>
+      <v-col cols="6"></v-col>
+      <v-col cols="1">
+        <v-btn fab color="primary" @click="createTimeTrackAccount()">
+          <v-icon>mdi-plus</v-icon>
+        </v-btn>
+      </v-col>
+      <v-col cols="5"></v-col>
+    </v-row>
+  </v-container>
+</template>
+
+<script>
+import { baseUri, selfUri } from "../variables.js";
+import TimeTrackAccountItem from "./TimeTrackAccountItem.vue";
+
+export default {
+  name: "TimeTrackAccounts",
+  components: {
+    TimeTrackAccountItem
+  },
+  data() {
+    return {
+      timeTrackAccounts: ""
+    };
+  },
+  methods: {
+    deleteTimeTrackAccount(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);
+    },
+    editTimeTrackAccount(selfLink) {
+      sessionStorage.setItem("timeTrackAccountEditSelfLink", selfLink);
+
+      window.location.href = selfUri + "/edittimetrackaccount";
+    },
+    createTimeTrackAccount() {
+      window.location.href = selfUri + "/createtimetrackaccount";
+    }
+  },
+
+  created() {
+    var accounts;
+    var timeTrackAccountsTMP;
+    var userxhttp = new XMLHttpRequest();
+    userxhttp.onreadystatechange = function() {
+      if (this.readyState == 4 && this.status == 200) {
+        accounts = JSON.parse(userxhttp.responseText);
+        timeTrackAccountsTMP = accounts._embedded.accounts;
+      }
+    };
+    userxhttp.open(
+      "GET",
+      baseUri +
+        "/accounts/search/findByUsername?username=" +
+        sessionStorage.getItem("timeTrackAccountListUser"),
+      false
+    );
+
+    userxhttp.setRequestHeader("Authorization", sessionStorage.getItem("jwt"));
+
+    userxhttp.send(null);
+
+    this.timeTrackAccounts = timeTrackAccountsTMP;
+  }
+};
+</script>
+
+<style scoped>
+</style>

frontend/src/views/Users.vue

@@ -1,13 +1,13 @@
 <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" />
+      <UsersItems v-bind:user="user" v-on:edit-user="edituser" v-on:show-accounts="showAccounts"/>
     </div>
   </v-container>
 </template>
 
 <script>
-import { baseUri } from "../variables.js";
+import { baseUri,selfUri } from "../variables.js";
 import UsersItems from "./UsersItems.vue";
 export default {
   components: {
@@ -22,7 +22,13 @@ export default {
      
       sessionStorage.setItem("edituser", userlink);
 
-      window.location.href = "http://localhost:8080/edituser";
+      window.location.href = selfUri + "/edituser";
+    },
+    showAccounts(username, uid) {
+      sessionStorage.setItem("timeTrackAccountListUser", username);
+      sessionStorage.setItem("timeTrackAccountListUserId", uid);
+
+      window.location.href = selfUri + "/timetrackaccounts";
     }
   },
   created() {

frontend/src/views/UsersItems.vue

@@ -4,7 +4,9 @@
       <v-list-item-content>
         <v-row no-gutters align="center">
           <v-col cols="1">
-            <v-avatar><img src="https://cdn.vuetifyjs.com/images/john.jpg" alt="John" /></v-avatar>
+            <v-avatar>
+              <img src="https://cdn.vuetifyjs.com/images/john.jpg" alt="John" />
+            </v-avatar>
           </v-col>
 
           <v-col cols="3">
@@ -36,6 +38,9 @@
               <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-icon>mdi-account-details</v-icon>
+          </v-btn>
           <v-btn fab dark small color="green" @click="$emit('edit-user', user._links.self.href)">
             <v-icon>mdi-file-document-edit</v-icon>
           </v-btn>
@@ -51,7 +56,17 @@
 <script>
 export default {
   name: "UsersItems",
-  props: ["user"]
+  props: ["user"],
+  data: () => ({
+    fab: undefined,
+  }),
+  methods: {
+    getUid(hrefTmp) {
+      var parts = hrefTmp.split("/");
+      return parts[4];
+
+    }
+  }
 };
 </script>