From 3321f4a58a251caceece9ada797cdcbb05187334 Mon Sep 17 00:00:00 2001
From: Marcel Schwarz <marcel@icaotix.de>
Date: Tue, 21 Jul 2020 22:57:58 +0200
Subject: [PATCH] Format User related stuff

---
 frontend/src/views/EditUser.vue   | 267 ++++++++++++++----------------
 frontend/src/views/Users.vue      | 151 ++++++++---------
 frontend/src/views/UsersItems.vue |  47 +++---
 3 files changed, 213 insertions(+), 252 deletions(-)

diff --git a/frontend/src/views/EditUser.vue b/frontend/src/views/EditUser.vue
index fb06583..5801fe2 100644
--- a/frontend/src/views/EditUser.vue
+++ b/frontend/src/views/EditUser.vue
@@ -1,11 +1,9 @@
-<template >
+<template>
   <v-container>
     <v-card align-center>
       <div class="text-center ma-3">
-      <p class="text-center logowhite--text" style="font-size:30pt">User to edit:</p>
-      <p class="text-center logowhite--text" style="font-size:30pt">{{username}}</p>
-      
-        
+        <p class="text-center logowhite--text" style="font-size:30pt">User to edit:</p>
+        <p class="text-center logowhite--text" style="font-size:30pt">{{username}}</p>
       </div>
     </v-card>
     <v-card align-center>
@@ -73,109 +71,97 @@
   </v-container>
 </template>
 <script>
-import { baseUri} from "../variables";
-export default {
-  name: "Edituser",
-  data: () => ({
-    firstname: "",
-    lastname: "",
-    longitude: "",
-    latitude: "",
-    radius: "",
-    username:  sessionStorage.getItem("usernameedit")
-  }),
+  import {baseUri} from "../variables";
 
-  methods: {
-    editUserInformation() {
-      var link = sessionStorage.getItem("edituser");
-      document.getElementById("noudata").innerHTML = "";
-      var suc;
-      if (this.firstname != "" && this.lastname != "") {
-        var xhttp = new XMLHttpRequest();
-      
-        xhttp.onreadystatechange = function() {
-          if ((this.status == 200) & (this.readyState == 4)) {
-          suc= true;
-          }
-        };
-        xhttp.open("PATCH", link, false);
-        xhttp.setRequestHeader("Content-Type", "application/json");
+  export default {
+    name: "Edituser",
+    data: () => ({
+      firstname: "",
+      lastname: "",
+      longitude: "",
+      latitude: "",
+      radius: "",
+      username: sessionStorage.getItem("usernameedit")
+    }),
 
-        xhttp.setRequestHeader("Authorization", sessionStorage.getItem("jwt"));
-        xhttp.send(
-          "{" +
+    methods: {
+      editUserInformation() {
+        var link = sessionStorage.getItem("edituser");
+        document.getElementById("noudata").innerHTML = "";
+        var suc;
+        if (this.firstname != "" && this.lastname != "") {
+          var xhttp = new XMLHttpRequest();
+          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(
+            "{" +
             '"firstname": "' +
             this.firstname +
             '", "lastname": "' +
             this.lastname +
             '"}'
-        );
-        if(suc == true ){
-          this.$router.push("/users");
-        }
-      } else if (this.firstname != "") {
-        var xhttpfirst = new XMLHttpRequest();
-
-        xhttpfirst.onreadystatechange = function() {
-          if ((this.status == 200) & (this.readyState == 4)) {
-           suc = true;
+          );
+          if (suc == true) {
+            this.$router.push("/users");
           }
-        };
-        xhttpfirst.open("PATCH", link, false);
-        xhttpfirst.setRequestHeader("Content-Type", "application/json");
-        xhttpfirst.setRequestHeader(
-          "Authorization",
-          sessionStorage.getItem("jwt")
-        );
-        xhttpfirst.send("{" + '"firstname": "' + this.firstname + '"}');
-        if(suc == true ){
-          this.$router.push("/users");
-        }
-      } else if (this.lastname != "") {
-        var xhttplast = new XMLHttpRequest();
-
-        xhttplast.onreadystatechange = function() {
-          if ((this.status == 200) & (this.readyState == 4)) {
-            suc = true;
+        } else if (this.firstname != "") {
+          var xhttpfirst = new XMLHttpRequest();
+          xhttpfirst.onreadystatechange = function () {
+            if ((this.status == 200) & (this.readyState == 4)) {
+              suc = true;
+            }
+          };
+          xhttpfirst.open("PATCH", link, false);
+          xhttpfirst.setRequestHeader("Content-Type", "application/json");
+          xhttpfirst.setRequestHeader("Authorization", sessionStorage.getItem("jwt"));
+          xhttpfirst.send("{" + '"firstname": "' + this.firstname + '"}');
+          if (suc == true) {
+            this.$router.push("/users");
           }
-        };
-        xhttplast.open("PATCH", link, false);
-        xhttplast.setRequestHeader("Content-Type", "application/json");
-        xhttplast.setRequestHeader(
-          "Authorization",
-          sessionStorage.getItem("jwt")
-        );
-        xhttplast.send("{" + '"lastname": "' + this.lastname + '"}');
-        if(suc == true ){
-          this.$router.push("/users");
-        }
-      } else {
-        document.getElementById("noudata").innerHTML = "please fill out at lest one field";
-      }
-    },
-    editLocation() {
-      var numericerror = false;
-      var link = sessionStorage.getItem("edituser");
-      if (this.longitude != "" && this.latitude != "" && this.radius) {
-        var xhttp = new XMLHttpRequest();
-
-        xhttp.onreadystatechange = function() {
-          if ((this.status == 201) & (this.readyState == 4)) {
-            var location = JSON.parse(xhttp.responseText);
-            sessionStorage.setItem("locationlink", location._links.self.href);
-          } else if(this.readyState == 4 ){
-            
-            
-            numericerror = true;
-            document.getElementById("locationnotcomplete").innerHTML = "Only numeric values are allowed";
+        } else if (this.lastname != "") {
+          var xhttplast = new XMLHttpRequest();
+          xhttplast.onreadystatechange = function () {
+            if ((this.status == 200) & (this.readyState == 4)) {
+              suc = true;
+            }
+          };
+          xhttplast.open("PATCH", link, false);
+          xhttplast.setRequestHeader("Content-Type", "application/json");
+          xhttplast.setRequestHeader("Authorization", sessionStorage.getItem("jwt"));
+          xhttplast.send("{" + '"lastname": "' + this.lastname + '"}');
+          if (suc == true) {
+            this.$router.push("/users");
           }
-        };
-        xhttp.open("POST", baseUri + "/locations", false);
-        xhttp.setRequestHeader("Content-Type", "application/json");
+        } else {
+          document.getElementById("noudata").innerHTML = "please fill out at lest one field";
+        }
+      },
+      editLocation() {
+        var numericerror = false;
+        var link = sessionStorage.getItem("edituser");
+        if (this.longitude != "" && this.latitude != "" && this.radius) {
+          var xhttp = new XMLHttpRequest();
+          xhttp.onreadystatechange = function () {
+            if ((this.status == 201) & (this.readyState == 4)) {
+              var location = JSON.parse(xhttp.responseText);
+              sessionStorage.setItem("locationlink", location._links.self.href);
+            } else if (this.readyState == 4) {
+              numericerror = true;
+              document.getElementById("locationnotcomplete").innerHTML = "Only numeric values are allowed";
+            }
+          };
+          xhttp.open("POST", baseUri + "/locations", false);
+          xhttp.setRequestHeader("Content-Type", "application/json");
 
-        xhttp.setRequestHeader("Authorization", sessionStorage.getItem("jwt"));
-        xhttp.send(
-          "{" +
+          xhttp.setRequestHeader("Authorization", sessionStorage.getItem("jwt"));
+          xhttp.send(
+            "{" +
             '"latitude": "' +
             this.latitude +
             '", "longitude": "' +
@@ -183,60 +169,51 @@ export default {
             '", "radius": "' +
             this.radius +
             '"}'
-        );
-        
-        
-        if (numericerror == false) {
-        
-          var xhttpadd = new XMLHttpRequest();
-          var suc;
-          xhttpadd.onreadystatechange = function() {
-            if ((this.status == 200) & (this.readyState == 4)) {
-              suc = true;
-            }
-          };
-          xhttpadd.open("PATCH", link, false);
-          xhttpadd.setRequestHeader("Content-Type", "application/json");
-          xhttpadd.setRequestHeader(
-            "Authorization",
-            sessionStorage.getItem("jwt")
           );
-          xhttpadd.send(
-            "{" +
+
+          if (numericerror == false) {
+            var xhttpadd = new XMLHttpRequest();
+            var suc;
+            xhttpadd.onreadystatechange = function () {
+              if ((this.status == 200) & (this.readyState == 4)) {
+                suc = true;
+              }
+            };
+            xhttpadd.open("PATCH", link, false);
+            xhttpadd.setRequestHeader("Content-Type", "application/json");
+            xhttpadd.setRequestHeader("Authorization", sessionStorage.getItem("jwt"));
+            xhttpadd.send(
+              "{" +
               '"location": "' +
               sessionStorage.getItem("locationlink") +
               '"}'
-          );
-          if (suc == true) {
+            );
+            if (suc == true) {
               this.$router.push("/users");
+            }
+            document.getElementById("locationnotcomplete").innerHTML = "";
+            sessionStorage.removeItem("locationlink");
           }
-          document.getElementById("locationnotcomplete").innerHTML = "";
-          sessionStorage.removeItem("locationlink");
+        } else {
+          document.getElementById("locationnotcomplete").innerHTML = "please fill out all fields";
         }
-      } else {
-        document.getElementById("locationnotcomplete").innerHTML = "please fill out all fields";
       }
+    },
+    created() {
+      var userxhttp = new XMLHttpRequest();
+      userxhttp.onreadystatechange = function () {
+        if (this.readyState == 4 && this.status == 200) {
+          var username = JSON.parse(userxhttp.responseText);
+          sessionStorage.setItem(
+            "usernameedit",
+            username.username
+          );
+        }
+      };
+      userxhttp.open("GET", sessionStorage.getItem("edituser"), false);
+      userxhttp.setRequestHeader("Authorization", sessionStorage.getItem("jwt"));
+      userxhttp.send(null);
+      this.username = sessionStorage.getItem("usernameedit");
     }
-  },
-  created() {
-    var userxhttp = new XMLHttpRequest();
-    userxhttp.onreadystatechange = function() {
-      if (this.readyState == 4 && this.status == 200) {
-        var username = JSON.parse(userxhttp.responseText);     
-        sessionStorage.setItem(
-          "usernameedit",
-          username.username
-        );
-      }
-    };
-    userxhttp.open("GET",sessionStorage.getItem("edituser"), false);
-
-    userxhttp.setRequestHeader("Authorization", sessionStorage.getItem("jwt"));
-
-    userxhttp.send(null);
-    this.username = sessionStorage.getItem("usernameedit");
-  }
-  
-  
-};
-</script>
\ No newline at end of file
+  };
+</script>
diff --git a/frontend/src/views/Users.vue b/frontend/src/views/Users.vue
index 1bc5eab..4ab0457 100644
--- a/frontend/src/views/Users.vue
+++ b/frontend/src/views/Users.vue
@@ -1,11 +1,12 @@
 <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" v-on:show-accounts="showAccounts"/>
+      <UsersItems v-bind:user="user" v-on:edit-user="edituser" v-on:del-user="deluser"
+                  v-on:show-accounts="showAccounts"/>
     </div>
-     <v-row>
+    <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>
@@ -14,95 +15,85 @@
         <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-container>
 </template>
 
 <script>
-import { baseUri} from "../variables.js";
-import UsersItems from "./UsersItems.vue";
-export default {
-  components: {
-    UsersItems
-  },
-  data: () => ({
-    users: JSON.parse(sessionStorage.getItem("users")),
-    dialog: false,
-    page: sessionStorage.getItem("page"),
+  import {baseUri} from "../variables.js";
+  import UsersItems from "./UsersItems.vue";
+
+  export default {
+    components: {
+      UsersItems
+    },
+    data: () => ({
+      users: JSON.parse(sessionStorage.getItem("users")),
+      dialog: false,
+      page: sessionStorage.getItem("page"),
       haveNextPage: "",
       havePrevPage: ""
-  }),
-  methods: {
-    edituser(userlink) {
-     
-      sessionStorage.setItem("edituser", userlink);
-
-      this.$router.push( "/edituser");
+    }),
+    methods: {
+      edituser(userlink) {
+        sessionStorage.setItem("edituser", userlink);
+        this.$router.push("/edituser");
+      },
+      deluser(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);
+      },
+      showAccounts(username, uid) {
+        sessionStorage.setItem("timeTrackAccountListUser", username);
+        sessionStorage.setItem("timeTrackAccountListUserId", uid);
+        this.$router.push("/timetrackaccounts");
+      },
+      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();
+      }
     },
-    deluser(selfLink){
-       var userxhttp = new XMLHttpRequest();
-      userxhttp.onreadystatechange = function() {
-        if (this.readyState == 4 && this.status == 204) {
-          location.reload();
+    created() {
+      var userLinks;
+      if (this.page == null) {
+        this.page = 0;
+      }
+      sessionStorage.removeItem("page");
+      var xhttp = new XMLHttpRequest();
+      xhttp.onreadystatechange = function () {
+        if (this.readyState == 4 && this.status == 200) {
+          var usersInformation = JSON.parse(xhttp.responseText);
+          sessionStorage.setItem("users", JSON.stringify(usersInformation._embedded.users));
+          userLinks = usersInformation._links;
         }
       };
-      userxhttp.open("DELETE", selfLink , false);
+      xhttp.open("GET", baseUri + "/users?page=" + this.page, false);
 
-      userxhttp.setRequestHeader(
-        "Authorization",
-        sessionStorage.getItem("jwt")
-      );
+      xhttp.setRequestHeader("Authorization", sessionStorage.getItem("jwt"));
 
-      userxhttp.send(null);
-    },
-    showAccounts(username, uid) {
-      sessionStorage.setItem("timeTrackAccountListUser", username);
-      sessionStorage.setItem("timeTrackAccountListUserId", uid);
-
-      this.$router.push("/timetrackaccounts");
-    },
-    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 userLinks;
-      if (this.page == null) {
-      this.page = 0;
-    }
-    sessionStorage.removeItem("page");
-    var xhttp = new XMLHttpRequest();
-    xhttp.onreadystatechange = function() {
-      if (this.readyState == 4 && this.status == 200) {
-        var usersInformation = JSON.parse(xhttp.responseText);     
-        sessionStorage.setItem(
-          "users",
-          JSON.stringify(usersInformation._embedded.users)
-        );
-         userLinks = usersInformation._links;
+      xhttp.send(null);
+      if (userLinks.next != undefined) {
+        this.haveNextPage = true;
       }
-    };
-    xhttp.open("GET", baseUri + "/users?page=" +this.page, false);
-
-    xhttp.setRequestHeader("Authorization", sessionStorage.getItem("jwt"));
-
-    xhttp.send(null);
-       if (userLinks.next != undefined) {
-      this.haveNextPage = true;
+      if (userLinks.prev != undefined) {
+        this.havePrevPage = true;
+      }
+      this.users = JSON.parse(sessionStorage.getItem("users"));
     }
-    if (userLinks.prev != undefined) {
-      this.havePrevPage = true;
-    }
-    this.users = JSON.parse(sessionStorage.getItem("users"));
-  }
-};
-</script>
\ No newline at end of file
+  };
+</script>
diff --git a/frontend/src/views/UsersItems.vue b/frontend/src/views/UsersItems.vue
index 6f90ab5..6d06191 100644
--- a/frontend/src/views/UsersItems.vue
+++ b/frontend/src/views/UsersItems.vue
@@ -5,10 +5,9 @@
         <v-row no-gutters align="center">
           <v-col cols="1">
             <v-avatar>
-              <img src="https://cdn.vuetifyjs.com/images/john.jpg" alt="John" />
+              <img src="https://cdn.vuetifyjs.com/images/john.jpg" alt="John"/>
             </v-avatar>
           </v-col>
-
           <v-col cols="3">
             <v-card color="background" elevation="0">
               <pre><v-icon color="primary">mdi-account</v-icon>{{" " + user.username}}</pre>
@@ -26,12 +25,7 @@
         </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>
@@ -54,26 +48,25 @@
 </template>
 
 <script>
-export default {
-  name: "UsersItems",
-  props: ["user"],
-  data: () => ({
-    fab: undefined,
-  }),
-  methods: {
-    getUid(hrefTmp) {
-      var parts = hrefTmp.split("/");
-      return parts[4];
-
+  export default {
+    name: "UsersItems",
+    props: ["user"],
+    data: () => ({
+      fab: undefined,
+    }),
+    methods: {
+      getUid(hrefTmp) {
+        var parts = hrefTmp.split("/");
+        return parts[4];
+      }
     }
-  }
-};
+  };
 </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>