list of Users

frontend/src/App.vue

@@ -12,7 +12,7 @@
               <v-list-item-title>Home</v-list-item-title>
             </v-list-item-content>
           </v-list-item>
-          <v-list-item link to="/timerecords" v-bind:class="{'d-none':!login}">
+          <v-list-item link to="/timerecords" v-bind:class="{'d-none':loggedIn=='false'}">
             <v-list-item-action>
               <v-icon>mdi-clock</v-icon>
             </v-list-item-action>
@@ -20,7 +20,7 @@
               <v-list-item-title>Time Records</v-list-item-title>
             </v-list-item-content>
           </v-list-item>
-          <v-list-item link to="/statistics" v-bind:class="{'d-none':!login}">
+          <v-list-item link to="/statistics" v-bind:class="{'d-none':loggedIn=='false'}">
             <v-list-item-action>
               <v-icon>mdi-chart-bar</v-icon>
             </v-list-item-action>
@@ -36,6 +36,14 @@
               <v-list-item-title>About</v-list-item-title>
             </v-list-item-content>
           </v-list-item>
+          <v-list-item link to="/users" v-bind:class="{'d-none':loggedIn=='false'}">
+            <v-list-item-action>
+              <v-icon>mdi-account-group</v-icon>
+            </v-list-item-action>
+            <v-list-item-content>
+              <v-list-item-title>Users</v-list-item-title>
+            </v-list-item-content>
+          </v-list-item>
         </v-list>
       </v-navigation-drawer>
 
@@ -129,7 +137,6 @@
 
 <script>
 import SignIn from "./views/SignIn.vue";
-//var baseUri = "http://plesk.icaotix.de:5000";
 import { baseUri } from "./variables.js";
 
 if (!sessionStorage.getItem("loggedin")) {
@@ -185,7 +192,6 @@ export default {
         var whoxhttp = new XMLHttpRequest();
        whoxhttp.onreadystatechange = function() {
         if (this.readyState == 4 && this.status == 200) {
-         // console.log(whoxhttp.responseText);
          var userInformation = JSON.parse(whoxhttp.responseText);
          sessionStorage.setItem("firstname", userInformation.firstname);
          sessionStorage.setItem("lastname", userInformation.lastname);
@@ -194,17 +200,16 @@ export default {
          console.log(this.fullname);
          
           this.fullname= sessionStorage.getItem("firstname") + " " + sessionStorage.getItem("lastname");
-          //data.reload;
           location.reload();
         }
       };
       whoxhttp.open("GET", baseUri + "/whoami", false);
-      // whoxhttp.withCredentials = true;
+      
 
       whoxhttp.setRequestHeader("Authorization", sessionStorage.getItem("jwt"));
 
       whoxhttp.send(null);
-        location.reload();
+        
       }
     },
     signUp(signupData) {

frontend/src/plugins/vuetify.js

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

frontend/src/router/index.js

@@ -8,7 +8,8 @@ import TimeRecords from "../views/TimeRecords.vue";
 import About from "../views/About.vue";
 import Login from "../views/Login.vue";
 import Register from "../views/Register.vue";
-import StatisticOverview from "../views/StatisticOverview.vue"
+import StatisticOverview from "../views/StatisticOverview.vue";
+import Users from "../views/Users.vue";
 
 Vue.use(VueRouter);
 
@@ -60,6 +61,11 @@ const routes = [
     name: "Statistics",
     component: StatisticOverview
   },
+  {
+    path: "/users",
+    name: "Users",
+    component: Users
+  },
   {
     path: '*',
     component: missing

frontend/src/views/Users.vue

@@ -0,0 +1,45 @@
+<template>
+  <div>
+    <div v-bind:key="user.username" v-for="user in users">
+      <UsersItems v-bind:user="user" v-on:edit-user="edituser" />
+    </div>
+  </div>
+</template>
+
+<script>
+import { baseUri } from "../variables.js";
+import UsersItems from "./UsersItems.vue";
+export default {
+  components: {
+    UsersItems
+  },
+  data: () => ({
+    users: JSON.parse(sessionStorage.getItem("users"))
+  }),
+  methods: {
+    edituser(username) {
+      alert("Not Implemented. TimeRecordId: " + username);
+    }
+  },
+  created() {
+    var xhttp = new XMLHttpRequest();
+    xhttp.onreadystatechange = function() {
+      if (this.readyState == 4 && this.status == 200) {
+        var usersInformation = JSON.parse(xhttp.responseText);
+        console.log(usersInformation);
+        console.log(usersInformation._embedded.users);
+        sessionStorage.setItem(
+          "users",
+          JSON.stringify(usersInformation._embedded.users)
+        );
+      }
+    };
+    xhttp.open("GET", baseUri + "/users", false);
+
+    xhttp.setRequestHeader("Authorization", sessionStorage.getItem("jwt"));
+
+    xhttp.send(null);
+    this.users = JSON.parse(sessionStorage.getItem("users"));
+  }
+};
+</script>

frontend/src/views/UsersItems.vue

@@ -0,0 +1,92 @@
+<template>
+  <div class="time-record-item">
+    <v-card outlined>
+      <v-list-item class="main_accent">
+        <v-list-item-content>
+          <v-row no-gutters align="center">
+            <v-col cols="2">
+              <pre>    <v-avatar>
+      <img src="https://cdn.vuetifyjs.com/images/john.jpg" alt="John" />
+    </v-avatar>
+
+</pre>
+            </v-col>
+            <v-col></v-col>
+            <v-col cols="3">
+              <v-card color="background" elevation="0">
+                <pre><v-icon color="primary">mdi-account</v-icon>{{" " + user.username}}</pre>
+              </v-card>
+            </v-col>
+            <v-col></v-col>
+            <v-col cols="3">
+              <v-card color="background" elevation="0">
+                <pre><v-icon color="primary">mdi-account-box</v-icon>{{" " + user.firstname + " " +user.lastname}}</pre>
+              </v-card>
+            </v-col>
+            <v-col></v-col>
+            <v-col cols="2">
+            </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-user', user.username)">
+              <v-icon>mdi-file-document-edit</v-icon>
+            </v-btn>
+            <v-btn fab dark small color="red" @click="$emit('del-user', user.username)">
+              <v-icon>mdi-delete</v-icon>
+            </v-btn>
+          </v-speed-dial>
+        </v-list-item-action>
+      </v-list-item>
+    </v-card>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "UsersItems",
+  props: ["user"]
+};
+</script>
+
+<style scoped>
+.time-record-item {
+  background: #131313;
+  padding: 10px;
+  border-bottom: 3px #272727 solid;
+}
+
+.del {
+  background: #ff0000;
+  color: #fff;
+  border: none;
+  padding: 5px 9px;
+  border-radius: 0%;
+  cursor: pointer;
+  float: right;
+}
+
+.edit {
+  background: #272727;
+  color: #fff;
+  border: none;
+  padding: 5px 9px;
+  border-radius: 0%;
+  cursor: pointer;
+  float: right;
+  margin: 0px;
+}
+</style>