Rework javascript of createTimerecord page

frontend/src/views/CreateTimerecord.vue

@@ -1,256 +1,127 @@
 <template>
-  <v-container id="createRecordListen">
+  <v-container @keyup.enter.prevent="addRecord">
     <v-card align-center>
       <p class="text-center logowhite--text" style="font-size:30pt">Details</p>
-
       <v-row>
         <v-col cols="6">
-          <v-select
+          <v-select v-model="entryData.type" :items="types" menu-props="auto" label="Type" hide-details
-            v-model="newtype"
+                    prepend-icon="mdi-currency-usd" single-line></v-select>
-            :items="types"
-            menu-props="auto"
-            label="Type"
-            hide-details
-            prepend-icon="mdi-currency-usd"
-            single-line
-          ></v-select>
         </v-col>
         <v-col cols="6">
-          <v-select
+          <v-select v-model="entryData.account" :items="accounts" menu-props="auto" label="Account" hide-details
-            v-model="accountname"
+                    prepend-icon="mdi-account-tie" single-line></v-select>
-            :items="accounts"
-            menu-props="auto"
-            label="Account"
-            hide-details
-            prepend-icon="mdi-account-tie"
-            single-line
-          ></v-select>
         </v-col>
       </v-row>
       <v-row>
         <v-col cols="12" sm="6">
-          <v-menu
+          <v-menu ref="showDatepickerStartdate" v-model="showDatepickerStartdate" :close-on-content-click="false"
-            ref="menu"
+                  :nudge-right="40" transition="scale-transition" offset-y min-width="290px">
-            v-model="menu"
-            :close-on-content-click="false"
-            :nudge-right="40"
-            transition="scale-transition"
-            offset-y
-            min-width="290px"
-          >
             <template v-slot:activator="{ on }">
-              <v-text-field
+              <v-text-field v-model="entryData.startdate" label="Startdate" prepend-icon="mdi-calendar-range" readonly
-                v-model="newstartdate"
+                            v-on="on"></v-text-field>
-                label="Startdate"
-                prepend-icon="mdi-calendar-range"
-                readonly
-                v-on="on"
-              ></v-text-field>
             </template>
-            <v-date-picker v-model="newstartdate" @input="menu = false" no-title scrollable></v-date-picker>
+            <v-date-picker v-model="entryData.startdate" @input="showDatepickerStartdate = false" no-title
+                           scrollable></v-date-picker>
           </v-menu>
         </v-col>
         <v-col cols="12" sm="6">
-          <v-menu
+          <v-menu ref="showDatepickerEnddate" v-model="showDatepickerEnddate"
-            ref="menu2"
+                  :close-on-content-click="false" :nudge-right="40" transition="scale-transition"
-            v-model="menu2"
+                  offset-y min-width="290px">
-            :close-on-content-click="false"
-            :nudge-right="40"
-            transition="scale-transition"
-            offset-y
-            min-width="290px"
-          >
             <template v-slot:activator="{ on }">
-              <v-text-field
+              <v-text-field v-model="entryData.enddate" label="Enddate"
-                v-model="newenddate"
+                            prepend-icon="mdi-calendar-range" readonly v-on="on"></v-text-field>
-                label="Enddate"
-                prepend-icon="mdi-calendar-range"
-                readonly
-                v-on="on"
-              ></v-text-field>
             </template>
-            <v-date-picker v-model="newenddate" @input="menu2 = false" no-title scrollable></v-date-picker>
+            <v-date-picker v-model="entryData.enddate" @input="showDatepickerEnddate = false" no-title
+                           scrollable></v-date-picker>
           </v-menu>
         </v-col>
       </v-row>
       <v-row>
         <v-col cols="12" sm="6">
-          <v-menu
+          <v-menu ref="showTimepickerStarttime" v-model="showTimepickerStarttime" :close-on-content-click="false"
-            ref="menutime"
+                  :nudge-right="40" :return-value.sync="entryData.starttime" transition="scale-transition" offset-y
-            v-model="menutime"
+                  max-width="290px" min-width="290px">
-            :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-text-field v-model="entryData.starttime" label="Starttime" prepend-icon="mdi-clock-outline" readonly
-                v-model="timestart"
+                            v-on="on"></v-text-field>
-                label="Starttime"
-                prepend-icon="mdi-clock-outline"
-                readonly
-                v-on="on"
-              ></v-text-field>
             </template>
-            <v-time-picker
+            <v-time-picker v-if="showTimepickerStarttime" v-model="entryData.starttime" full-width format="24hr"
-              v-if="menutime"
+                           @click:minute="$refs.showTimepickerStarttime.save(entryData.starttime)"></v-time-picker>
-              v-model="timestart"
-              full-width
-              format="24hr"
-              @click:minute="$refs.menutime.save(timestart)"
-            ></v-time-picker>
           </v-menu>
         </v-col>
         <v-col cols="12" sm="6">
-          <v-menu
+          <v-menu ref="showTimepickerEndtime" v-model="showTimepickerEndtime" :close-on-content-click="false"
-            ref="menutime2"
+                  :nudge-right="40" :return-value.sync="entryData.endtime" transition="scale-transition" offset-y
-            v-model="menutime2"
+                  max-width="290px" min-width="290px">
-            :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-text-field v-model="entryData.endtime" label="Endtime" prepend-icon="mdi-clock-outline" readonly
-                v-model="timeend"
+                            v-on="on"></v-text-field>
-                label="Endtime"
-                prepend-icon="mdi-clock-outline"
-                readonly
-                v-on="on"
-              ></v-text-field>
             </template>
-            <v-time-picker
+            <v-time-picker v-if="showTimepickerEndtime" v-model="entryData.endtime" full-width format="24hr"
-              v-if="menutime2"
+                           @click:minute="$refs.showTimepickerEndtime.save(entryData.endtime)"></v-time-picker>
-              v-model="timeend"
-              full-width
-              format="24hr"
-              @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>
+        <v-btn rounded color="logowhite" outlined dark @click="addRecord">Add</v-btn>
       </div>
     </v-card>
   </v-container>
 </template>
 <script>
   import {BASE_URI} from "../globals";
+  import axios from "axios"
 
   export default {
     name: "CreateTimeTrackAccount",
-    data: () => ({
+    data() {
-      timestart: null,
+      return {
-      menutime: false,
+        entryData: {
-      timeend: null,
+          type: "",
-      menutime2: false,
+          account: "",
-      menu: false,
+          startdate: "",
-      menu2: false,
+          starttime: "",
+          enddate: "",
+          endtime: ""
+        },
         types: ["PAID", "BREAK"],
-      accounts: "",
+        accounts: [],
-      user: sessionStorage.getItem("timeTrackAccountListUserId"),
+        showTimepickerStarttime: false,
-      newstartdate: "",
+        showTimepickerEndtime: false,
-      newenddate: "",
+        showDatepickerStartdate: false,
-      newtype: "",
+        showDatepickerEnddate: false,
-      accountname: ""
+      }
-    }),
+    },
 
     methods: {
-      addRecord() {
+      async addRecord() {
-        var account = "";
+        // Map accountname to corresponding backend url
-        var accountxhttp = new XMLHttpRequest();
+        let accountsResponse = await axios.get(BASE_URI + "/accounts/search/findByUsernameAndName", {
+          params: {
+            username: sessionStorage.getItem("username"),
+            account: this.entryData.account
+          }
+        })
 
-        accountxhttp.onreadystatechange = function () {
+        if (Object.values(this.entryData).every(entry => entry)) {
-          if ((this.status == 200) & (this.readyState == 4)) {
+          await axios.post(BASE_URI + "/records", {
-            account = JSON.parse(accountxhttp.responseText);
+            startdate: `${this.entryData.startdate}T${this.entryData.starttime}`,
-            account = account._links.self.href;
+            enddate: `${this.entryData.enddate}T${this.entryData.endtime}`,
-          }
+            type: this.entryData.type,
-        };
+            account: accountsResponse.data._links.self.href
-        accountxhttp.open(
+          })
-          "GET",
+          await this.$router.push("/timerecords")
-          BASE_URI +
-          "/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;
-          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;
-            }
-          };
-          xhttp.open("POST", BASE_URI + "/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");
-          }
         }
       }
     },
-    created() {
+    async created() {
-      var accountsxhttp = new XMLHttpRequest();
+      let accountsResponse = await axios.get(BASE_URI + "/accounts/search/findByUsername", {
-      var accounts;
+        params: {
-      accountsxhttp.onreadystatechange = function () {
+          username: sessionStorage.getItem("username")
-        if ((this.status == 200) & (this.readyState == 4)) {
-          accounts = JSON.parse(accountsxhttp.responseText);
-          accounts = accounts._embedded.accounts;
         }
-      };
+      })
-      accountsxhttp.open(
+      this.accounts = accountsResponse.data._embedded.accounts.map(value => value.name)
-        "GET",
-        BASE_URI +
-        "/accounts/search/findByUsername?username=" +
-        sessionStorage.getItem("username"),
-        false
-      );
-      accountsxhttp.setRequestHeader("Content-Type", "application/json");
-      accountsxhttp.setRequestHeader("Authorization", sessionStorage.getItem("jwt"));
-      accountsxhttp.send(null);
-      var accountnames = [];
-      for (let index = 0; index < accounts.length; index++) {
-        accountnames[index] = accounts[index].name;
-      }
-      this.accounts = accountnames;
-    },
-    mounted() {
-      var listen = document.getElementById("createRecordListen");
-
-      listen.addEventListener("keyup", e => {
-        if (e.keyCode === 13) {
-          e.preventDefault();
-          this.addRecord();
-        }
-      });
     }
   };
 </script>