Systems.vue

<template>
  <div class="container">
    <div class="row">
        <h1>Systems</h1>
        <hr>
        <div class="form-group col-md-5">
          <label for="region">By Region</label>
          <select v-model="region" key="item.id" @change='getSystems()'  class="form-control">
            <option v-for="region in regions" :value="region.id" :key="region.id">
            {{ region.name }}
            </option>
          </select>
        </div>
        <div class="form-group col-md-5">
          <label for="systemname">By Name</label>
          <input type="text"
            v-model="systemname"
            id="systemname"
            class="form-control"
            placeholder="2IBE-N"
            @input="debounceSearch">
        </div>
        <div class="form-group col-md-10">
          <input
            class="form-check-input"
            type="checkbox"
            v-model="toggle"
            true-value="True"
            false-value="False"
            @input="debounceSearch"
            @change="debounceSearch"
          >
          <label class="form-check-label" for="toggle">
            Only monitored
          </label>
        </div>
        <table class="table table-hover">
          <thead>
            <tr>
              <!-- <th scope="col">ID</th> -->
              <th scope="col">Name</th>
              <th scope="col">Monitored</th>
              <th></th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(system, index) in systems" :key="index">
              <!-- <td>{{ system.id }}</td> -->
              <td>{{ system.name }}</td>
              <td>
                <button v-if="system.monitored"
                  type="button"
                  class="btn btn-success btn-sm"
                  @click="onMarkMonitored(system)">
                  Monitored
                </button>
                <button v-else
                  type="button"
                  class="btn btn-primary btn-sm"
                  @click="onMarkMonitored(system)">
                  Monitor
                </button>
              </td>
              <td>
                <div class="btn-group" role="group">
                </div>
              </td>
            </tr>
          </tbody>
        </table>
    </div>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      systems: [],
      regions: [],
      debounce: null,
      systemname: '*',
      region: null,
      toggle: null,
    };
  },
  methods: {
    debounceSearch() {
      clearTimeout(this.debounce);
      this.debounce = setTimeout(() => {
        this.getSystems();
      }, 600);
    },
    getSystems() {
      const path = 'http://localhost:5000/systems';
      console.log(this.$http.header);
      this.$http.get(path, {
        params: {
          region: this.region,
          filter: this.systemname.length > 0 ? this.systemname : '*',
          monitored: this.toggle,
        },
      })
        .then((res) => {
          this.systems = res.data.systems;
        })
        .catch((err) => {
          console.log('meh');
          console.log(err);
        });
    },
    getRegions() {
      const path = 'http://localhost:5000/regions';
      // no idea why I can't use this.$http here ...
      const token = localStorage.getItem('token');
      axios.get(path, {
        headers: {
          Authorization: token,
        },
      })
        .then((res) => {
          this.regions = res.data.regions;
          this.regions.push({
            id: 0,
            name: 'All',
            x: 0,
            y: 0,
            z: 0,
          });
        })
        .catch((error) => {
          // eslint-disable-next-line
          // console.log(res);
          if (error.response.data.expired === true || error.response.data.authenticated === false) {
            this.$store.dispatch('logout').then(() => {
              this.$router.push('/login');
            });
          } else {
            console.error(error);
          }
        });
    },
    onMarkMonitored(system) {
      const path = `http://localhost:5000/systems/${system.id}`;
      const payload = { monitored: !system.monitored };
      this.$http.put(path, payload)
        .then((res) => {
          this.getSystems();
          return res;
        });
    },
  },
  created() {
    this.getRegions();
  },
};
</script>