monitolite/resources/views/app.vue
2021-12-20 23:17:16 +01:00

52 lines
No EOL
1.4 KiB
Vue

<template>
<div class="container">
<h1>MonitoLite Dashboard</h1>
<p class="refreshed-time">Last refresh: <br /><span class="clock">{{ refreshedTime }}</span></p>
<quick-view></quick-view>
<task-list></task-list>
</div>
</template>
<script>
import TaskList from './components/tasklist.vue'
import QuickView from './components/quickview.vue'
export default{
components: {
QuickView,
TaskList
},
data: function() {
return {
refreshed_time: null
}
},
computed: {
refreshedTime: function() {
return this.refreshed_time != null ? this.moment(this.refreshed_time).format('HH:mm:ss') : 'never'
}
},
methods: {
getTasks: function() {
this.$http.get('/api/getTasks')
.then(response => this.$store.commit('setTasks', response.data))
.then(() => {
this.refreshed_time = this.moment();
})
.catch(error => window.alert('Cannot get tasks'))
this.refreshed_time = this.moment();
}
},
mounted: function() {
this.getTasks()
this.refresh = window.setInterval(() => {
this.getTasks();
}, 10000)
}
}
</script>
<style scoped>
</style>