<template>
  <b-card
  no-body>
  <b-card-header header-text-variant="black" header-bg-variant="light">
    <i class="fas fa-tasks"></i> Your tasks
  </b-card-header>
  <b-card-body class="d-flex align-items-center justify-content-center">
    <b-card-text style="width:100%;" class="d-flex justify-content-center align-items-center">
      <b-spinner class="loader" style="width: 3rem; height: 3rem;" variant="primary" type="grow" label="Loading Data"></b-spinner>
      <table class="table table-sm mt-0 mb-0" v-if="clientTasks[0]">
        <tbody>
          <tr v-for="task in clientTasks" v-bind:key="task.id">
            <td>Backup</td>
            <td>{{task.hostname}}</td>
            <td>{{task.node}}</td>
            <td class="text-right"> <button type="submit" class="btn btn-outline-success btn-sm" @click="setstatus(task.id)">Resolved</button></td>
          </tr>
        </tbody>
      </table>
          <p class="mb-0 nodata" v-if="!clientTasks[0]">
        You have not started any tasks
      </p>
    </b-card-text>
  </b-card-body>
</b-card>
</template>
<script>
export default {
  mounted() {
   this.fetchData();
},
data () {
  return {
    clientTasks: [],
    toastsCount: 0,
  }
},
methods: {
  fetchData () {
    axios.get('/clienttasks')
    .then((response)=>{
      this.clientTasks = response.data;

      document.querySelector('.loader').style.display = 'none';
    });
  },
  setstatus(backupid){
    axios.post('/todo/backups/setstatus',{backupid: backupid})
    .then((response)=>{
      this.fetchData();
      this.makeToast(true,response.data.message,'secondary');
    })
  },
},
};
</script>