webinno/monitolite
1
1
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

Adding loader

Browse source
This commit is contained in:
Axel 2021-12-23 22:42:26 +01:00
parent 8d7bd04424
commit c1817425cd
7 changed files with 132 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

19
package-lock.json generated
View file

@ -10,6 +10,7 @@
"moment": "^2.29.1",
"vue": "^2.6.14",
"vue-apexcharts": "^1.6.2",
"vue-loading-overlay": "^3.4.2",
"vue-router": "^3.5.3",
"vuex": "^3.6.2"
},
@ -9043,6 +9044,18 @@
}
}
},
"node_modules/vue-loading-overlay": {
"version": "3.4.2",
"resolved": "https://registry.npmjs.org/vue-loading-overlay/-/vue-loading-overlay-3.4.2.tgz",
"integrity": "sha512-xcB+NPjl76eA0uggm707x3ZFgrNosZXpynHipyS3K+rrK1NztOV49R1LY+/4ij5W1KYANp7eRI2EIHrxCpmWAw==",
"engines": {
"node": ">=6.9.0",
"npm": ">=3.10.0"
},
"peerDependencies": {
"vue": "^2.0.0"
}
},
"node_modules/vue-router": {
"version": "3.5.3",
"resolved": "https://registry.npmjs.org/vue-router/-/vue-router-3.5.3.tgz",
@ -16436,6 +16449,12 @@
"vue-style-loader": "^4.1.0"
}
},
"vue-loading-overlay": {
"version": "3.4.2",
"resolved": "https://registry.npmjs.org/vue-loading-overlay/-/vue-loading-overlay-3.4.2.tgz",
"integrity": "sha512-xcB+NPjl76eA0uggm707x3ZFgrNosZXpynHipyS3K+rrK1NztOV49R1LY+/4ij5W1KYANp7eRI2EIHrxCpmWAw==",
"requires": {}
},
"vue-router": {
"version": "3.5.3",
"resolved": "https://registry.npmjs.org/vue-router/-/vue-router-3.5.3.tgz",

1
package.json
View file

@ -13,6 +13,7 @@
"moment": "^2.29.1",
"vue": "^2.6.14",
"vue-apexcharts": "^1.6.2",
"vue-loading-overlay": "^3.4.2",
"vue-router": "^3.5.3",
"vuex": "^3.6.2"
}

75
public/js/app.js
View file

File diff suppressed because one or more lines are too long

14
resources/js/app.js
View file

@ -18,6 +18,20 @@ import VueApexCharts from 'vue-apexcharts'
Vue.use(VueApexCharts)
Vue.component('apexchart', VueApexCharts)
import VueLoading from 'vue-loading-overlay';
import 'vue-loading-overlay/dist/vue-loading.css';
Vue.use(VueLoading, {
// Optional parameters
//container: this.fullPage ? null : this.$refs.formContainer,
canCancel: true,
backgroundColor: '#000',
color: '#0a9f9a',
width: 128,
height: 128,
opacity: 0.9,
loader: 'dots'
})
import Home from '../views/app.vue'
import TaskDetails from '../views/taskdetails.vue'
const router = new VueRouter({

10
resources/views/app.vue
View file

@ -11,16 +11,18 @@
import TaskList from './components/tasklist.vue'
import QuickView from './components/quickview.vue'
export default{
components: {
QuickView,
TaskList
TaskList,
},
data: function() {
return {
refreshed_time: null,
refresh: null
refresh: null,
loading: true,
color: '#FF0000',
size: '10rem',
}
},
computed: {
@ -34,6 +36,7 @@
.then(response => this.$store.commit('setTasks', response.data))
.then(() => {
this.refreshed_time = this.moment();
this.loading.hide()
})
.catch(error => window.alert('Cannot get tasks'))
this.refreshed_time = this.moment();
@ -44,6 +47,7 @@
next();
},
mounted: function() {
this.loading = this.$loading.show()
this.getTasks()
this.refresh = window.setInterval(() => {
this.getTasks();

6
resources/views/components/tasklist.vue
View file

@ -99,10 +99,14 @@ export default {
}
},
disableTask: function(task_id, current_status) {
//this.loading = this.$loading.show()
this.$http.patch('/api/toggleTaskStatus/'+task_id, {
active: + !current_status
})
.then(response => this.$store.commit('updateTask', response.data))
.then(response => {
this.$store.commit('updateTask', response.data)
//this.loading = this.$loading.hide()
})
}
}
}

25
resources/views/taskdetails.vue
View file

@ -29,7 +29,7 @@
<!-- History backlog -->
<div class="round">
<h3>Last {{ chart.days }} days history log</h3>
<div class="block-content" v-if="history.length > 0">
<div class="block-content" v-if="history">
<p><i>Showing only records where status has changed</i></p>
<table id="tasks_tbl">
<thead>
@ -68,7 +68,7 @@
<!-- Notifications block -->
<div class="round">
<h3>Last {{ chart.days }} days notifications log</h3>
<div class="block-content" v-if="notifications.length > 0">
<div class="block-content" v-if="notifications">
<table id="tasks_tbl">
<thead>
<tr>
@ -112,6 +112,7 @@
history: null,
notifications: null,
refresh: null,
loader: null,
chart: {
render: false,
@ -157,7 +158,7 @@
return 'unknown';
}
},
refreshTask: function() {
refreshTask: function(callback) {
this.$http.post('/api/getTask/'+this.task.id, {
days: this.chart.days
})
@ -166,13 +167,18 @@
this.history = response.data.history
this.notifications = response.data.notifications
this.refreshGraph(response.data.stats)
this.loader.hide()
})
.then(() => {
if (this.refresh == null) {
this.refresh = window.setInterval(() => {
this.refreshTask()
}, 10000)
}
})
.then(() => {
this.loader.hide()
})
if (this.refresh == null) {
this.refresh = window.setInterval(() => {
this.refreshTask()
}, 10000)
}
},
refreshGraph: function(stats) {
let xaxis = [];
@ -221,6 +227,7 @@
},
},
mounted: function() {
this.loader = this.$loading.show()
this.task.id = this.$route.params.id ?? null
if (this.task.id != null) {