Rework editUser to be async
This commit is contained in:
parent
b298ac5815
commit
933e0e7c0c
@ -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">{{username}}</p>
|
||||
<p class="text-center logowhite--text" style="font-size:30pt">Edit the user "{{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
|
||||
color="primary"
|
||||
label="firstname"
|
||||
name="firstname"
|
||||
prepend-icon="mdi-account"
|
||||
type="text"
|
||||
v-model="firstname"
|
||||
/>
|
||||
<v-text-field
|
||||
color="primary"
|
||||
label="lastname"
|
||||
name="lastname"
|
||||
prepend-icon="mdi-account"
|
||||
type="text"
|
||||
v-model="lastname"
|
||||
/>
|
||||
<v-text-field :disabled="!userdataReady" color="primary" label="firstname" name="firstname"
|
||||
prepend-icon="mdi-account" type="text"
|
||||
v-model="userdata.firstname"/>
|
||||
<v-text-field :disabled="!userdataReady" color="primary" label="lastname" name="lastname"
|
||||
prepend-icon="mdi-account" type="text"
|
||||
v-model="userdata.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
|
||||
color="primary"
|
||||
label="latitude"
|
||||
name="latitude"
|
||||
prepend-icon="mdi-map-marker"
|
||||
type="text"
|
||||
v-model="latitude"
|
||||
/>
|
||||
<v-text-field
|
||||
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-text-field :disabled="!locationdataReady" color="primary" label="latitude" name="latitude"
|
||||
prepend-icon="mdi-map-marker" type="text"
|
||||
v-model="locationdata.latitude"/>
|
||||
<v-text-field :disabled="!locationdataReady" color="primary" label="longitude" name="longitude"
|
||||
prepend-icon="mdi-map-marker" type="text"
|
||||
v-model="locationdata.longitude"/>
|
||||
<v-text-field :disabled="!locationdataReady" color="primary" label="radius" name="radius"
|
||||
prepend-icon="mdi-map-marker-radius" type="text"
|
||||
v-model="locationdata.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: () => ({
|
||||
firstname: "",
|
||||
lastname: "",
|
||||
longitude: "",
|
||||
latitude: "",
|
||||
radius: "",
|
||||
username: sessionStorage.getItem("usernameedit")
|
||||
}),
|
||||
|
||||
methods: {
|
||||
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)) {
|
||||
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";
|
||||
data() {
|
||||
return {
|
||||
userdataReady: false,
|
||||
locationdataReady: false,
|
||||
username: "",
|
||||
errorText: {
|
||||
userdata: "",
|
||||
locationdata: ""
|
||||
},
|
||||
userdata: {
|
||||
firstname: "",
|
||||
lastname: "",
|
||||
},
|
||||
locationdata: {
|
||||
longitude: "",
|
||||
latitude: "",
|
||||
radius: ""
|
||||
}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
var userxhttp = new XMLHttpRequest();
|
||||
userxhttp.onreadystatechange = function () {
|
||||
if (this.readyState == 4 && this.status == 200) {
|
||||
var username = JSON.parse(userxhttp.responseText);
|
||||
sessionStorage.setItem(
|
||||
"usernameedit",
|
||||
username.username
|
||||
);
|
||||
methods: {
|
||||
async editUserInformation() {
|
||||
if (Object.values(this.userdata).every(data => data)) {
|
||||
await axios.patch(sessionStorage.getItem("edituser"), this.userdata)
|
||||
await this.$router.push("/users")
|
||||
} else {
|
||||
this.errorText.userdata = "Please fill out all fields."
|
||||
}
|
||||
};
|
||||
userxhttp.open("GET", sessionStorage.getItem("edituser"), false);
|
||||
userxhttp.setRequestHeader("Authorization", sessionStorage.getItem("jwt"));
|
||||
userxhttp.send(null);
|
||||
this.username = sessionStorage.getItem("usernameedit");
|
||||
},
|
||||
async editLocation() {
|
||||
if (Object.values(this.locationdata).every(data => data)) {
|
||||
let newLocation = await axios.post(BASE_URI + "/locations", this.locationdata)
|
||||
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>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user