Merge branch '92-time-reccord-data-from-backend' into 'master'

Resolve "Time Reccord data from Backend"

Closes #92

See merge request marcel.schwarz/2020ss-qbc-geofence-timetracking!73

frontend/src/router/index.js

@@ -14,7 +14,8 @@ import EditUser from "../views/EditUser.vue";
 import TimeTrackAccounts from "../views/TimeTrackAccounts.vue";
 import EditTimeTrackAccount from "../views/EditTimeTrackAccount.vue"
 import CreateTimeTrackAccount from "../views/CreateTimeTrackAccount.vue"
-
+import EditTimerecord from "../views/EditTimerecord.vue"
+import CreateTimerecord from "../views/CreateTimerecord.vue"
 Vue.use(VueRouter);
 
 const routes = [
@@ -90,6 +91,16 @@ const routes = [
     name: "Create TimeTrack Account",
     component: CreateTimeTrackAccount
   },
+  {
+    path: "/edittimerecord",
+    name: "EditTimerecord",
+    component: EditTimerecord
+  },
+  {
+    path: "/createtimerecord",
+    name: "CreateTimerecord",
+    component: CreateTimerecord
+  },
   {
     path: '*',
     component: missing

frontend/src/variables.js

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

frontend/src/views/CreateTimeTrackAccount.vue

@@ -37,7 +37,7 @@
   </v-container>
 </template>
 <script>
-import { baseUri, selfUri } from "../variables";
+import { baseUri } from "../variables";
 export default {
   name: "CreateTimeTrackAccount",
   data: () => ({
@@ -51,13 +51,13 @@ export default {
     addAccount() {
       if (this.newname != "" || this.newrevenue != "" || this.newdescription != "") {
         var xhttp = new XMLHttpRequest();
-
+        var suc;
         xhttp.onreadystatechange = function() {
           if ((this.status == 201) & (this.readyState == 4)) {
-            window.location.href = selfUri + "/timetrackaccounts";
+           suc = true;
           }
         };
-        xhttp.open("POST", baseUri + "/accounts", true);
+        xhttp.open("POST", baseUri + "/accounts", false);
         xhttp.setRequestHeader("Content-Type", "application/json");
 
         xhttp.setRequestHeader("Authorization", sessionStorage.getItem("jwt"));
@@ -73,6 +73,9 @@ export default {
             this.newdescription +
             '"}'
         );
+        if (suc == true ) {
+          this.$router.push("/timetrackaccounts");
+        }
       }
     },
   },

frontend/src/views/CreateTimerecord.vue

@@ -0,0 +1,118 @@
+<template >
+  <v-container>
+    <v-card align-center>
+      <h3 class="text-center display-2 logowhite--text">Details</h3>
+
+      <v-form>
+        <v-text-field
+          label="startdate"
+          v-model="newstartdate"
+          name="startdate"
+          prepend-icon="mdi-clock-outline"
+          type="text"
+          color="primary"
+        />
+        <v-text-field
+          label="enddate"
+          v-model="newenddate"
+          name="enddate"
+          prepend-icon="mdi-clock-outline"
+          type="text"
+          color="primary"
+        />
+        <v-text-field
+          label="type"
+          v-model="newtype"
+          name="type"
+          prepend-icon="mdi-currency-usd"
+          type="text"
+          color="primary"
+        />
+        <v-text-field
+          label="Accountname"
+          v-model="accountname"
+          name="accountname"
+          prepend-icon="mdi-account-tie"
+          type="text"
+          color="primary"
+        />
+      </v-form>
+
+      <div class="text-center ma-3">
+        <v-btn rounded color="logowhite" outlined dark v-on:click="addRecord()">Add</v-btn>
+      </div>
+    </v-card>
+  </v-container>
+</template>
+<script>
+import { baseUri} from "../variables";
+export default {
+  name: "CreateTimeTrackAccount",
+  data: () => ({
+    user: sessionStorage.getItem("timeTrackAccountListUserId"),
+    newstartdate: "",
+    newenddate: "",
+    newtype: "",
+    accountname: ""
+  }),
+
+  methods: {
+    addRecord() {
+        var account ="";
+         var accountxhttp = new XMLHttpRequest();
+        
+
+        accountxhttp.onreadystatechange = function() {
+          if ((this.status == 200) & (this.readyState == 4)) {
+            
+            //account =
+            
+            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");
+
+        accountxhttp.setRequestHeader("Authorization", sessionStorage.getItem("jwt"));
+        accountxhttp.send( null );
+     
+        
+      if (this.newstartdate != "" && this.newenddate != "" && this.newdate != "" && account != "" ) {
+        var xhttp = new XMLHttpRequest();
+        var suc;
+        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": "' +
+            this.newenddate +
+            '", "type": "' +
+            this.newtype +
+            '", "account": "' +
+            account +
+            '"}'
+        );
+        if(suc == true){
+          this.$router.push( "/timerecords");
+        }
+      }
+    },
+  },
+};
+</script>

frontend/src/views/EditTimeTrackAccount.vue

@@ -44,7 +44,7 @@
   </v-container>
 </template>
 <script>
-import { selfUri } from "../variables";
+
 export default {
   name: "EditTimeTrackAccount",
   data: () => ({
@@ -63,13 +63,13 @@ export default {
 
       if (this.newname != this.name || this.newrevenue != this.revenue || this.newdescription != this.description) {
         var xhttp = new XMLHttpRequest();
-
+        var suc;
         xhttp.onreadystatechange = function() {
           if ((this.status == 200) & (this.readyState == 4)) {
-            window.location.href = selfUri + "/timetrackaccounts";
+           suc =true;
           }
         };
-        xhttp.open("PATCH", link, true);
+        xhttp.open("PATCH", link, false);
         xhttp.setRequestHeader("Content-Type", "application/json");
 
         xhttp.setRequestHeader("Authorization", sessionStorage.getItem("jwt"));
@@ -83,6 +83,9 @@ export default {
             this.newdescription +
             '"}'
         );
+        if(suc ==true){
+           this.$router.push( "/timetrackaccounts");
+        }
       }
     },
   },

frontend/src/views/EditTimerecord.vue

@@ -0,0 +1,116 @@
+<template >
+  <v-container>
+   
+
+    <v-card align-center>
+      <h3 class="text-center display-2 logowhite--text">Details</h3>
+     
+      <v-form>
+        <v-text-field
+          label="type"
+          v-model="newtype"
+          name="type"
+          prepend-icon="mdi-currency-usd"
+          type="text"
+          color="primary"
+        />
+        <v-text-field
+          label="startdate"
+          v-model="newstartdate"
+          name="startdate"
+          prepend-icon="mdi-clock-outline"
+          type="text"
+          color="primary"
+        />
+        <v-text-field
+          label="enddate"
+          v-model="newenddate"
+          name="enddate"
+          prepend-icon="mdi-clock-outline"
+          type="text"
+          color="primary"
+        />
+      </v-form>
+
+      <div class="text-center ma-3">
+        <v-btn rounded color="logowhite" outlined dark v-on:click="editRecord()">Edit</v-btn>
+      </div>
+    </v-card>
+  </v-container>
+</template>
+<script>
+
+export default {
+  name: "EditTimeTrackAccount",
+  data: () => ({
+    type: "",
+    stardate: "",
+    enddate: "",
+
+    newtype: "",
+    newstartdate: "",
+    newenddate: "",
+  }),
+
+  methods: {
+    editRecord() {
+      var link = sessionStorage.getItem("timeRecordEditSelfLink");
+
+      if (this.newname != this.name || this.newstartdate != this.startdate || this.newenddate != this.enddate) {
+        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(
+          "{" +
+           
+            ' "startdate": "' +
+            this.newstartdate +
+            '", "enddate": "' +
+            this.newenddate +
+              '", "type": "' +
+            this.newtype +
+            '"}'
+        );
+        if(suc == true){
+          this.$router.push( "/timerecords");
+        }
+      }
+    },
+  },
+  created() {
+    var userxhttp = new XMLHttpRequest();
+    var record;
+
+    userxhttp.onreadystatechange = function() {
+      if (this.readyState == 4 && this.status == 200) {
+        record = JSON.parse(userxhttp.responseText);
+      }
+    };
+    userxhttp.open(
+      "GET",
+      sessionStorage.getItem("timeRecordEditSelfLink"),
+      false
+    );
+
+    userxhttp.setRequestHeader("Authorization", sessionStorage.getItem("jwt"));
+
+    userxhttp.send(null);
+    this.type = record.type;
+    this.startdate = record.startdatte;
+    this.enddate = record.enddate;
+
+    this.newtype = record.type;
+    this.newstartdate = record.startdate;
+    this.newenddate = record.enddate;
+
+  }
+};
+</script>

frontend/src/views/EditUser.vue

@@ -73,7 +73,7 @@
   </v-container>
 </template>
 <script>
-import { baseUri,selfUri } from "../variables";
+import { baseUri} from "../variables";
 export default {
   name: "Edituser",
   data: () => ({
@@ -89,15 +89,16 @@ export default {
     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)) {
-            window.location.href = selfUri + "/users";
+          suc= true;
           }
         };
-        xhttp.open("PATCH", link, true);
+        xhttp.open("PATCH", link, false);
         xhttp.setRequestHeader("Content-Type", "application/json");
 
         xhttp.setRequestHeader("Authorization", sessionStorage.getItem("jwt"));
@@ -109,36 +110,45 @@ export default {
             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)) {
-            window.location.href = selfUri + "/users";
+           suc = true;
           }
         };
-        xhttpfirst.open("PATCH", link, 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");
+        }
       } else if (this.lastname != "") {
         var xhttplast = new XMLHttpRequest();
 
         xhttplast.onreadystatechange = function() {
           if ((this.status == 200) & (this.readyState == 4)) {
-            window.location.href = selfUri + "/users";
+            suc = true;
           }
         };
-        xhttplast.open("PATCH", link, 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");
+        }
       } else {
         document.getElementById("noudata").innerHTML = "please fill out at lest one field";
       }
@@ -179,13 +189,13 @@ export default {
         if (numericerror == false) {
         
           var xhttpadd = new XMLHttpRequest();
-
+          var suc;
           xhttpadd.onreadystatechange = function() {
             if ((this.status == 200) & (this.readyState == 4)) {
-              window.location.href = selfUri + "/users";
+              suc = true;
             }
           };
-          xhttpadd.open("PATCH", link, true);
+          xhttpadd.open("PATCH", link, false);
           xhttpadd.setRequestHeader("Content-Type", "application/json");
           xhttpadd.setRequestHeader(
             "Authorization",
@@ -197,6 +207,9 @@ export default {
               sessionStorage.getItem("locationlink") +
               '"}'
           );
+          if (suc == true) {
+              this.$router.push("/users");
+          }
           document.getElementById("locationnotcomplete").innerHTML = "";
           sessionStorage.removeItem("locationlink");
         }

frontend/src/views/TimeRecordItem.vue

@@ -2,28 +2,40 @@
   <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>
         <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 == 'Lunch'}">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>
-          <v-col cols="3">
-            <v-card color="background" elevation="0">
-              <pre><v-icon color="primary">mdi-clock-outline</v-icon>{{" " + timeRecord.start}}</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-clock-outline</v-icon>{{" " + timeRecord.end}}</pre>
             </v-card>
           </v-col>
           <v-col></v-col>
           <v-col cols="2">
             <v-card color="background" elevation="0">
-              <pre><v-icon color="primary">mdi-timer</v-icon>{{" " + timeRecord.time}}</pre>
+              <pre><v-icon color="primary">mdi-clock-outline</v-icon>{{" Start " + timeRecord.startdate}}</pre>
+            </v-card>
+          </v-col>
+          <v-col></v-col>
+          <v-col cols="2">
+            <v-card color="background" elevation="0">
+              <pre><v-icon color="primary">mdi-clock-outline</v-icon>{{" End " + timeRecord.enddate}}</pre>
+            </v-card>
+          </v-col>
+          <v-col></v-col>
+          <v-col cols="2">
+            <v-card color="background" elevation="0">
+              <pre><v-icon color="primary">mdi-timer</v-icon>{{" " + timeRecord.duration}}</pre>
+            </v-card>
+          </v-col>
+          <v-col></v-col>
+           <v-col cols="2">
+            <v-card color="background" elevation="0">
+              <pre><v-icon color="primary">mdi-account-tie</v-icon>{{" " + timeRecord.accountname}}</pre>
             </v-card>
           </v-col>
           <v-col></v-col>
@@ -42,10 +54,10 @@
               <v-icon v-else>mdi-pencil</v-icon>
             </v-btn>
           </template>
-          <v-btn fab dark small color="green" @click="$emit('edit-timeRecord', timeRecord.id)">
+          <v-btn fab dark small color="green" @click="$emit('edit-timeRecord', timeRecord._links.self.href)">
             <v-icon>mdi-file-document-edit</v-icon>
           </v-btn>
-          <v-btn fab dark small color="red" @click="$emit('del-timeRecord', timeRecord.id)">
+          <v-btn fab dark small color="red" @click="$emit('del-timeRecord', timeRecord._links.self.href)">
             <v-icon>mdi-delete</v-icon>
           </v-btn>
         </v-speed-dial>

frontend/src/views/TimeRecords.vue

@@ -1,6 +1,6 @@
 <template>
   <v-container fluid>
-      <div v-bind:key="timeRecord.id" v-for="timeRecord in timeRecords">
+    <div v-bind:key="timeRecord._links.self.href" v-for="timeRecord in timeRecords">
       <TimeRecordItem
         v-bind:timeRecord="timeRecord"
         v-on:del-timeRecord="deleteTimeRecord"
@@ -21,6 +21,7 @@
 
 <script>
 import TimeRecordItem from "./TimeRecordItem.vue";
+import { baseUri } from "../variables.js";
 
 export default {
   name: "TimeRecords",
@@ -29,85 +30,97 @@ export default {
   },
   data() {
     return {
-      timeRecords: [
+      timeRecords: ""
-        {
-          id: 1,
-          start: "25.04.2020 / 8:00",
-          end: "25.04.2020 / 13:00",
-          time: "5:00",
-          type: "Paid"
-        },
-        {
-          id: 2,
-          start: "25.04.2020 / 13:00",
-          end: "25.04.2020 / 14:00",
-          time: "1:00",
-          type: "Lunch"
-        },
-        {
-          id: 3,
-          start: "25.04.2020 / 14:00 ",
-          end: "25.04.2020 / 16:30",
-          time: "2:30",
-          type: "Paid"
-        },
-        {
-          id: 4,
-          start: "25.04.2020 / 8:00",
-          end: "25.04.2020 / 13:00",
-          time: "10:00",
-          type: "Paid"
-        },
-        {
-          id: 5,
-          start: "25.04.2020 / 13:00",
-          end: "25.04.2020 / 14:00",
-          time: "1:00",
-          type: "Lunch"
-        },
-        {
-          id: 6,
-          start: "25.04.2020 / 14:00 ",
-          end: "25.04.2020 / 16:30",
-          time: "2:30",
-          type: "Paid"
-        },
-        {
-          id: 7,
-          start: "25.04.2020 / 8:00",
-          end: "25.04.2020 / 13:00",
-          time: "5:00",
-          type: "Paid"
-        },
-        {
-          id: 8,
-          start: "25.04.2020 / 13:00",
-          end: "25.04.2020 / 14:00",
-          time: "1:00",
-          type: "Lunch"
-        },
-        {
-          id: 9,
-          start: "25.04.2020 / 14:00 ",
-          end: "25.04.2020 / 16:30",
-          time: "2:30",
-          type: "Paid"
-        }
-      ]
     };
   },
   methods: {
-    deleteTimeRecord(id) {
+    deleteTimeRecord(selfLink) {
-      this.timeRecords = this.timeRecords.filter(
+      var userxhttp = new XMLHttpRequest();
-        timeRecord => timeRecord.id !== id
+      userxhttp.onreadystatechange = function() {
-      );
+        if (this.readyState == 4 && this.status == 204) {
-    },
+          location.reload();
-    editTimeRecord(id) {
-      alert("Not implemented yet. TimeRecordId: " + id);
-    },
-    createTimeRecord() {
-      alert("Not implemented yet.")
         }
+      };
+      userxhttp.open("DELETE", selfLink, false);
+
+      userxhttp.setRequestHeader(
+        "Authorization",
+        sessionStorage.getItem("jwt")
+      );
+
+      userxhttp.send(null);
+    },
+    editTimeRecord(selfLink) {
+      sessionStorage.setItem("timeRecordEditSelfLink", selfLink);
+
+      this.$router.push( "/edittimerecord");
+    },
+    createTimeRecord(selfLink) {
+      sessionStorage.setItem("timeRecordEditSelfLink", selfLink);
+
+     this.$router.push( "/createtimerecord");
+    }
+  },
+  created() {
+    var xhttp = new XMLHttpRequest();
+    var records;
+    xhttp.onreadystatechange = function() {
+      if (this.readyState == 4 && this.status == 200) {
+        var recordsDB = JSON.parse(xhttp.responseText);
+
+        records = recordsDB._embedded.records;
+      }
+    };
+    xhttp.open(
+      "GET",
+      baseUri +
+        "/records/search/allForUser?username=" +
+        sessionStorage.getItem("username"),
+      false
+    );
+
+    xhttp.setRequestHeader("Authorization", sessionStorage.getItem("jwt"));
+
+    xhttp.send(null);
+    //duration
+    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 accxhttp = new XMLHttpRequest();
+      var acc = "";
+      accxhttp.onreadystatechange = function() {
+        if (this.readyState == 4 && this.status == 200) {
+          acc = JSON.parse(accxhttp.responseText);
+
+          acc = acc.name;
+        }
+      };
+      accxhttp.open("GET", records[index]._links.self.href + "/account", false);
+
+      accxhttp.setRequestHeader("Authorization", sessionStorage.getItem("jwt"));
+
+      accxhttp.send(null);
+      records[index].accountname = acc;
+
+      var start = record.startdate;
+
+      start = start.split("T");
+      records[index].startdate = start[1];
+      records[index].date = start[0];
+
+      var end = record.enddate;
+
+      end = end.split("T");
+      records[index].enddate = end[1];
+    }
+    this.timeRecords = records;
+   
   }
 };
 </script>

frontend/src/views/TimeTrackAccounts.vue

@@ -20,7 +20,7 @@
 </template>
 
 <script>
-import { baseUri, selfUri } from "../variables.js";
+import { baseUri} from "../variables.js";
 import TimeTrackAccountItem from "./TimeTrackAccountItem.vue";
 
 export default {
@@ -53,10 +53,10 @@ export default {
     editTimeTrackAccount(selfLink) {
       sessionStorage.setItem("timeTrackAccountEditSelfLink", selfLink);
 
-      window.location.href = selfUri + "/edittimetrackaccount";
+      this.$router.push( "/edittimetrackaccount");
     },
     createTimeTrackAccount() {
-      window.location.href = selfUri + "/createtimetrackaccount";
+       this.$router.push( "/createtimetrackaccount");
     }
   },
 

frontend/src/views/Users.vue

@@ -7,7 +7,7 @@
 </template>
 
 <script>
-import { baseUri,selfUri } from "../variables.js";
+import { baseUri} from "../variables.js";
 import UsersItems from "./UsersItems.vue";
 export default {
   components: {
@@ -22,7 +22,7 @@ export default {
      
       sessionStorage.setItem("edituser", userlink);
 
-      window.location.href = selfUri + "/edituser";
+      this.$router.push( "/edituser");
     },
     deluser(selfLink){
        var userxhttp = new XMLHttpRequest();
@@ -44,7 +44,7 @@ export default {
       sessionStorage.setItem("timeTrackAccountListUser", username);
       sessionStorage.setItem("timeTrackAccountListUserId", uid);
 
-      window.location.href = selfUri + "/timetrackaccounts";
+      this.$router.push("/timetrackaccounts");
     }
   },
   created() {