From 3c4cbaf126dc092e750d98a2379a17f8b78afcad Mon Sep 17 00:00:00 2001
From: Tim Zieger <tim.zieger98@web.de>
Date: Fri, 29 May 2020 17:34:23 +0200
Subject: [PATCH] pickers

---
 frontend/src/views/CreateTimerecord.vue | 142 +++++++++++++++---
 frontend/src/views/EditTimerecord.vue   | 187 +++++++++++++++++++-----
 frontend/src/views/TimeRecordItem.vue   |   2 +-
 frontend/src/views/TimeRecords.vue      |  29 ++--
 4 files changed, 290 insertions(+), 70 deletions(-)

diff --git a/frontend/src/views/CreateTimerecord.vue b/frontend/src/views/CreateTimerecord.vue
index 0906892..f6c61af 100644
--- a/frontend/src/views/CreateTimerecord.vue
+++ b/frontend/src/views/CreateTimerecord.vue
@@ -4,22 +4,7 @@
       <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"
@@ -37,7 +22,120 @@
           color="primary"
         />
       </v-form>
-
+ <v-row>
+        <v-col cols="12" sm="6" >
+          <v-menu
+            ref="menu"
+            v-model="menu"
+            :close-on-content-click="false"
+            :return-value.sync="newstartdate"
+            transition="scale-transition"
+            offset-y
+            min-width="290px"
+          >
+            <template v-slot:activator="{ on }">
+              <v-text-field
+                v-model="newstartdate"
+                label="Startdate"
+                prepend-icon="mdi-calendar-range"
+                readonly
+                v-on="on"
+              ></v-text-field>
+            </template>
+            <v-date-picker v-model="newstartdate" no-title scrollable>
+              <v-spacer></v-spacer>
+              <v-btn text color="primary" @click="menu = false">Cancel</v-btn>
+              <v-btn text color="primary" @click="$refs.menu.save(newstartdate)">OK</v-btn>
+            </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"
+            :return-value.sync="newenddate"
+            transition="scale-transition"
+            offset-y
+            min-width="290px"
+          >
+            <template v-slot:activator="{ on }">
+              <v-text-field
+                v-model="newenddate"
+                label="Enddate"
+                prepend-icon="mdi-calendar-range"
+                readonly
+                v-on="on"
+              ></v-text-field>
+            </template>
+            <v-date-picker v-model="newenddate" no-title scrollable>
+              <v-spacer></v-spacer>
+              <v-btn text color="primary" @click="menu2 = false">Cancel</v-btn>
+              <v-btn text color="primary" @click="$refs.menu2.save(newenddate)">OK</v-btn>
+            </v-date-picker>
+          </v-menu>
+        </v-col>
+      </v-row>
+      <v-row>
+        <v-col cols="12" 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"
+          >
+            <template v-slot:activator="{ on }">
+              <v-text-field
+                v-model="timestart"
+                label="Starttime"
+                prepend-icon="mdi-clock-outline"
+                readonly
+                v-on="on"
+              ></v-text-field>
+            </template>
+            <v-time-picker
+              v-if="menutime"
+              v-model="timestart"
+              full-width
+              @click:minute="$refs.menutime.save(timestart)"
+            ></v-time-picker>
+          </v-menu>
+        </v-col>
+        <v-col cols="12" 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"
+          >
+            <template v-slot:activator="{ on }">
+              <v-text-field
+                v-model="timeend"
+                label="Endtime"
+                prepend-icon="mdi-clock-outline"
+                readonly
+                v-on="on"
+              ></v-text-field>
+            </template>
+            <v-time-picker
+              v-if="menutime2"
+              v-model="timeend"
+              full-width
+              @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="addRecord()">Add</v-btn>
       </div>
@@ -49,6 +147,12 @@ import { baseUri } from "../variables";
 export default {
   name: "CreateTimeTrackAccount",
   data: () => ({
+      timestart: null,
+    menutime: false,
+    timeend: null,
+    menutime2: false,
+    menu: false,
+    menu2: false,
     user: sessionStorage.getItem("timeTrackAccountListUserId"),
     newstartdate: "",
     newenddate: "",
@@ -60,7 +164,7 @@ export default {
     addRecord() {
       var account = "";
       var accountxhttp = new XMLHttpRequest();
-
+       
       accountxhttp.onreadystatechange = function() {
         if ((this.status == 200) & (this.readyState == 4)) {
           //account =
@@ -95,6 +199,8 @@ export default {
       ) {
         var xhttp = new XMLHttpRequest();
         var suc;
+         this.newstartdate = this.newstartdate + "T" + this.timestart;
+      this.newenddate = this.newenddate + "T" + this.timeend;
         xhttp.onreadystatechange = function() {
           if ((this.status == 201) & (this.readyState == 4)) {
             suc = true;
diff --git a/frontend/src/views/EditTimerecord.vue b/frontend/src/views/EditTimerecord.vue
index a0b2b3d..a9b8bf8 100644
--- a/frontend/src/views/EditTimerecord.vue
+++ b/frontend/src/views/EditTimerecord.vue
@@ -1,10 +1,8 @@
 <template >
   <v-container id="editRecordListen">
-   
-
     <v-card align-center>
       <h3 class="text-center display-2 logowhite--text">Details</h3>
-     
+
       <v-form>
         <v-text-field
           label="type"
@@ -14,24 +12,121 @@
           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>
-
+      <v-row>
+        <v-col cols="12" sm="6" >
+          <v-menu
+            ref="menu"
+            v-model="menu"
+            :close-on-content-click="false"
+            :return-value.sync="newstartdate"
+            transition="scale-transition"
+            offset-y
+            min-width="290px"
+          >
+            <template v-slot:activator="{ on }">
+              <v-text-field
+                v-model="newstartdate"
+                label="Startdate"
+                prepend-icon="mdi-calendar-range"
+                readonly
+                v-on="on"
+              ></v-text-field>
+            </template>
+            <v-date-picker v-model="newstartdate" no-title scrollable>
+              <v-spacer></v-spacer>
+              <v-btn text color="primary" @click="menu = false">Cancel</v-btn>
+              <v-btn text color="primary" @click="$refs.menu.save(newstartdate)">OK</v-btn>
+            </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"
+            :return-value.sync="newenddate"
+            transition="scale-transition"
+            offset-y
+            min-width="290px"
+          >
+            <template v-slot:activator="{ on }">
+              <v-text-field
+                v-model="newenddate"
+                label="Enddate"
+                prepend-icon="mdi-calendar-range"
+                readonly
+                v-on="on"
+              ></v-text-field>
+            </template>
+            <v-date-picker v-model="newenddate" no-title scrollable>
+              <v-spacer></v-spacer>
+              <v-btn text color="primary" @click="menu2 = false">Cancel</v-btn>
+              <v-btn text color="primary" @click="$refs.menu2.save(newenddate)">OK</v-btn>
+            </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"
+          >
+            <template v-slot:activator="{ on }">
+              <v-text-field
+                v-model="timestart"
+                label="Starttime"
+                prepend-icon="mdi-clock-outline"
+                readonly
+                v-on="on"
+              ></v-text-field>
+            </template>
+            <v-time-picker
+              v-if="menutime"
+              v-model="timestart"
+              full-width
+              @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"
+          >
+            <template v-slot:activator="{ on }">
+              <v-text-field
+                v-model="timeend"
+                label="Endtime"
+                prepend-icon="mdi-clock-outline"
+                readonly
+                v-on="on"
+              ></v-text-field>
+            </template>
+            <v-time-picker
+              v-if="menutime2"
+              v-model="timeend"
+              full-width
+              @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>
       </div>
@@ -39,29 +134,40 @@
   </v-container>
 </template>
 <script>
-
 export default {
   name: "EditTimeTrackAccount",
   data: () => ({
+    timestart: null,
+    menutime: false,
+    timeend: null,
+    menutime2: false,
+    menu: false,
+    menu2: false,
     type: "",
     stardate: "",
     enddate: "",
 
     newtype: "",
-    newstartdate: "",
-    newenddate: "",
+    newstartdate: new Date().toISOString().substr(0, 10),
+    newenddate: new Date().toISOString().substr(0, 10)
   }),
 
   methods: {
     editRecord() {
       var link = sessionStorage.getItem("timeRecordEditSelfLink");
 
-      if (this.newname != this.name || this.newstartdate != this.startdate || this.newenddate != this.enddate) {
+      if (
+        this.newname != this.name ||
+        this.newstartdate != this.startdate ||
+        this.newenddate != this.enddate
+      ) {
+        this.newstartdate = this.newstartdate + "T" + this.timestart;
+        this.newenddate = this.newenddate + "T" + this.timeend;
         var xhttp = new XMLHttpRequest();
         var suc;
         xhttp.onreadystatechange = function() {
           if ((this.status == 200) & (this.readyState == 4)) {
-            suc= true; 
+            suc = true;
           }
         };
         xhttp.open("PATCH", link, false);
@@ -70,20 +176,19 @@ export default {
         xhttp.setRequestHeader("Authorization", sessionStorage.getItem("jwt"));
         xhttp.send(
           "{" +
-           
             ' "startdate": "' +
             this.newstartdate +
             '", "enddate": "' +
             this.newenddate +
-              '", "type": "' +
+            '", "type": "' +
             this.newtype +
             '"}'
         );
-        if(suc == true){
-          this.$router.push( "/timerecords");
+        if (suc == true) {
+          this.$router.push("/timerecords");
         }
       }
-    },
+    }
   },
   created() {
     var userxhttp = new XMLHttpRequest();
@@ -104,16 +209,24 @@ export default {
 
     userxhttp.send(null);
     this.type = record.type;
-    this.startdate = record.startdatte;
-    this.enddate = record.enddate;
+    this.startdate = record.startdate;
 
     this.newtype = record.type;
-    this.newstartdate = record.startdate;
-    this.newenddate = record.enddate;
-
+    var start = record.startdate;
+    start = start.split("T");
+    var starttime = start[1];
+    var startdate = start[0];
+    this.newstartdate = startdate;
+    this.timestart = starttime;
+    var end = record.enddate;
+    end = end.split("T");
+    var endtime = end[1];
+    var enddate = end[0];
+    this.newenddate = enddate;
+    this.timeend = endtime;
   },
-   mounted() {
-    var listen =  document.getElementById('editRecordListen');
+  mounted() {
+    var listen = document.getElementById("editRecordListen");
     listen.addEventListener("keyup", e => {
       if (e.keyCode === 13) {
         e.preventDefault();
diff --git a/frontend/src/views/TimeRecordItem.vue b/frontend/src/views/TimeRecordItem.vue
index e26279d..dd5d43d 100644
--- a/frontend/src/views/TimeRecordItem.vue
+++ b/frontend/src/views/TimeRecordItem.vue
@@ -54,7 +54,7 @@
               <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)">
+          <v-btn fab dark small color="green" @click="$emit('edit-timeRecord', timeRecord._links.self.href, timeRecord.enddate)">
             <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)">
diff --git a/frontend/src/views/TimeRecords.vue b/frontend/src/views/TimeRecords.vue
index 33485ef..d40799c 100644
--- a/frontend/src/views/TimeRecords.vue
+++ b/frontend/src/views/TimeRecords.vue
@@ -50,15 +50,19 @@ export default {
 
       userxhttp.send(null);
     },
-    editTimeRecord(selfLink) {
-      sessionStorage.setItem("timeRecordEditSelfLink", selfLink);
+    editTimeRecord(selfLink, end) {
+      if (end == "pending") {
+        alert("It's not possible to edit a running track");
+      } else {
+        sessionStorage.setItem("timeRecordEditSelfLink", selfLink);
 
-      this.$router.push( "/edittimerecord");
+        this.$router.push("/edittimerecord");
+      }
     },
     createTimeRecord(selfLink) {
       sessionStorage.setItem("timeRecordEditSelfLink", selfLink);
 
-     this.$router.push( "/createtimerecord");
+      this.$router.push("/createtimerecord");
     }
   },
   created() {
@@ -113,19 +117,16 @@ export default {
       start = start.split("T");
       records[index].startdate = start[1];
       records[index].date = start[0];
-      
-      try{
-      var end = record.enddate;
-      end = end.split("T");
-      records[index].enddate =  end[1];
-      }catch(e){
-         records[index].enddate = "pending";
+
+      try {
+        var end = record.enddate;
+        end = end.split("T");
+        records[index].enddate = end[1];
+      } catch (e) {
+        records[index].enddate = "pending";
       }
-      
-      
     }
     this.timeRecords = records;
-   
   }
 };
 </script>