ubiquitous-computing-geo-timetracking/frontend/src/views/EditTimeTrackAccount.vue

<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>