Rework editUser to be async

frontend/src/views/admin/EditUser.vue

@@ -2,218 +2,116 @@
   <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">Edit the user &quot;{{username}}&quot;</p>
-        <p class="text-center logowhite--text" style="font-size:30pt">{{username}}</p>
       </div>
     </v-card>
     <v-card align-center>
       <p class="text-center logowhite--text" style="font-size:30pt">User Information</p>
-
       <v-form>
-        <v-text-field
+        <v-text-field :disabled="!userdataReady" color="primary" label="firstname" name="firstname"
-          color="primary"
+                      prepend-icon="mdi-account" type="text"
-          label="firstname"
+                      v-model="userdata.firstname"/>
-          name="firstname"
+        <v-text-field :disabled="!userdataReady" color="primary" label="lastname" name="lastname"
-          prepend-icon="mdi-account"
+                      prepend-icon="mdi-account" type="text"
-          type="text"
+                      v-model="userdata.lastname"/>
-          v-model="firstname"
-        />
-        <v-text-field
-          color="primary"
-          label="lastname"
-          name="lastname"
-          prepend-icon="mdi-account"
-          type="text"
-          v-model="lastname"
-        />
       </v-form>
 
+      <p>{{errorText.userdata}}</p>
       <div class="text-center ma-3">
-        <v-btn color="logowhite" dark outlined rounded v-on:click="editUserInformation()">Edit</v-btn>
+        <v-btn @click="editUserInformation" color="logowhite" dark outlined rounded>Edit</v-btn>
       </div>
-      <p id="noudata"></p>
     </v-card>
     <v-card align-center>
       <p class="text-center logowhite--text" style="font-size:30pt">Location</p>
 
       <v-form>
-        <v-text-field
+        <v-text-field :disabled="!locationdataReady" color="primary" label="latitude" name="latitude"
-          color="primary"
+                      prepend-icon="mdi-map-marker" type="text"
-          label="latitude"
+                      v-model="locationdata.latitude"/>
-          name="latitude"
+        <v-text-field :disabled="!locationdataReady" color="primary" label="longitude" name="longitude"
-          prepend-icon="mdi-map-marker"
+                      prepend-icon="mdi-map-marker" type="text"
-          type="text"
+                      v-model="locationdata.longitude"/>
-          v-model="latitude"
+        <v-text-field :disabled="!locationdataReady" color="primary" label="radius" name="radius"
-        />
+                      prepend-icon="mdi-map-marker-radius" type="text"
-        <v-text-field
+                      v-model="locationdata.radius"/>
-          color="primary"
-          label="longitude"
-          name="longitude"
-          prepend-icon="mdi-map-marker"
-          type="text"
-          v-model="longitude"
-        />
-        <v-text-field
-          color="primary"
-          label="radius"
-          name="radius"
-          prepend-icon="mdi-map-marker-radius"
-          type="text"
-          v-model="radius"
-        />
       </v-form>
 
+      <p>{{errorText.locationdata}}</p>
       <div class="text-center ma-3">
-        <v-btn color="logowhite" dark outlined rounded v-on:click="editLocation()">Edit</v-btn>
+        <v-btn @click="editLocation" color="logowhite" dark outlined rounded>Edit</v-btn>
       </div>
-      <p id="locationnotcomplete"></p>
     </v-card>
   </v-container>
 </template>
 <script>
-  import {BASE_URI} from "../../globals";
+  import {BASE_URI} from "../../globals"
+  import axios from "axios"
 
   export default {
     name: "Edituser",
-    data: () => ({
+    data() {
-      firstname: "",
+      return {
-      lastname: "",
+        userdataReady: false,
-      longitude: "",
+        locationdataReady: false,
-      latitude: "",
+        username: "",
-      radius: "",
+        errorText: {
-      username: sessionStorage.getItem("usernameedit")
+          userdata: "",
-    }),
+          locationdata: ""
-
+        },
-    methods: {
+        userdata: {
-      editUserInformation() {
+          firstname: "",
-        var link = sessionStorage.getItem("edituser");
+          lastname: "",
-        document.getElementById("noudata").innerHTML = "";
+        },
-        var suc;
+        locationdata: {
-        if (this.firstname != "" && this.lastname != "") {
+          longitude: "",
-          var xhttp = new XMLHttpRequest();
+          latitude: "",
-          xhttp.onreadystatechange = function () {
+          radius: ""
-            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;
-            }
-          };
-          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;
-            }
-          };
-          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";
-            }
-          };
-          xhttp.open("POST", BASE_URI + "/locations", false);
-          xhttp.setRequestHeader("Content-Type", "application/json");
-
-          xhttp.setRequestHeader("Authorization", sessionStorage.getItem("jwt"));
-          xhttp.send(
-            "{" +
-            '"latitude": "' +
-            this.latitude +
-            '", "longitude": "' +
-            this.longitude +
-            '", "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(
-              "{" +
-              '"location": "' +
-              sessionStorage.getItem("locationlink") +
-              '"}'
-            );
-            if (suc == true) {
-              this.$router.push("/users");
-            }
-            document.getElementById("locationnotcomplete").innerHTML = "";
-            sessionStorage.removeItem("locationlink");
-          }
-        } else {
-          document.getElementById("locationnotcomplete").innerHTML = "please fill out all fields";
         }
       }
     },
-    created() {
+    methods: {
-      var userxhttp = new XMLHttpRequest();
+      async editUserInformation() {
-      userxhttp.onreadystatechange = function () {
+        if (Object.values(this.userdata).every(data => data)) {
-        if (this.readyState == 4 && this.status == 200) {
+          await axios.patch(sessionStorage.getItem("edituser"), this.userdata)
-          var username = JSON.parse(userxhttp.responseText);
+          await this.$router.push("/users")
-          sessionStorage.setItem(
+        } else {
-            "usernameedit",
+          this.errorText.userdata = "Please fill out all fields."
-            username.username
-          );
         }
-      };
+      },
-      userxhttp.open("GET", sessionStorage.getItem("edituser"), false);
+      async editLocation() {
-      userxhttp.setRequestHeader("Authorization", sessionStorage.getItem("jwt"));
+        if (Object.values(this.locationdata).every(data => data)) {
-      userxhttp.send(null);
+          let newLocation = await axios.post(BASE_URI + "/locations", this.locationdata)
-      this.username = sessionStorage.getItem("usernameedit");
+          await axios.patch(sessionStorage.getItem("edituser"), {
+            location: newLocation.data._links.self.href
+          })
+          await this.$router.push("/users")
+        } else {
+          this.errorText.locationdata = "Please fill out all fields with numeric values."
+        }
+      }
+    },
+    async created() {
+      try {
+        // Fill userdata
+        let user = await axios.get(sessionStorage.getItem("edituser"))
+        sessionStorage.setItem("usernameedit", user.data.username)
+        this.username = user.data.username
+        this.userdata.firstname = user.data.firstname
+        this.userdata.lastname = user.data.lastname
+        this.userdataReady = true
+
+        // fill locationdata
+        let locationResponse = await axios.get(user.data._links.location.href)
+        let {latitude, longitude, radius} = locationResponse.data
+        this.locationdata = {latitude, longitude, radius}
+        this.locationdataReady = true
+      } catch (e) {
+        if (e.response.status === 404) {
+          console.log("User doesn't have a location.")
+          this.locationdata = {latitude: 0, longitude: 0, radius: 0}
+          this.locationdataReady = true
+        }
+      }
     }
-  };
+  }
 </script>