<template > <v-container id = "editAccountListen"> <v-card align-center> <div class="text-center ma-3"> <p class="text-center logowhite--text" style="font-size:30pt">Account to edit:</p> <p class="text-center logowhite--text" style="font-size:30pt">{{name}}</p> </div> </v-card> <v-card align-center> <p class="text-center logowhite--text" style="font-size:30pt">Details</p> <v-form> <v-text-field label="name" v-model="newname" name="name" prepend-icon="mdi-account-tie" type="text" color="primary" /> <v-text-field label="revenue" v-model="newrevenue" name="revenue" prepend-icon="mdi-currency-usd" type="text" color="primary" /> <v-text-field label="description" v-model="newdescription" name="description" prepend-icon="mdi-information-variant" type="text" color="primary" /> </v-form> <div class="text-center ma-3"> <v-btn rounded color="logowhite" outlined dark v-on:click="editAccount()">Edit</v-btn> </div> </v-card> </v-container> </template> <script> export default { name: "EditTimeTrackAccount", data: () => ({ name: "", revenue: "", description: "", newname: "", newrevenue: "", newdescription: "", }), methods: { editAccount() { var link = sessionStorage.getItem("timeTrackAccountEditSelfLink"); 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)) { suc =true; } }; xhttp.open("PATCH", link, false); xhttp.setRequestHeader("Content-Type", "application/json"); xhttp.setRequestHeader("Authorization", sessionStorage.getItem("jwt")); xhttp.send( "{" + '"name": "' + this.newname + '", "revenue": "' + this.newrevenue + '", "description": "' + this.newdescription + '"}' ); if(suc ==true){ this.$router.push( "/timetrackaccounts"); } } }, }, created() { var userxhttp = new XMLHttpRequest(); var account; userxhttp.onreadystatechange = function() { if (this.readyState == 4 && this.status == 200) { account = JSON.parse(userxhttp.responseText); } }; userxhttp.open( "GET", sessionStorage.getItem("timeTrackAccountEditSelfLink"), false ); userxhttp.setRequestHeader("Authorization", sessionStorage.getItem("jwt")); userxhttp.send(null); this.name = account.name; this.revenue = account.revenue; this.description = account.description; this.newname = account.name; this.newrevenue = account.revenue; this.newdescription = account.description; }, mounted() { var listen = document.getElementById('editAccountListen'); listen.addEventListener("keyup", e => { if (e.keyCode === 13) { e.preventDefault(); this.editAccount(); } }); } }; </script>