mirror of https://github.com/statping/statping
105 lines
3.8 KiB
Vue
105 lines
3.8 KiB
Vue
<template>
|
|
<table class="table">
|
|
<thead>
|
|
<tr>
|
|
<th scope="col">Name</th>
|
|
<th scope="col" class="d-none d-md-table-cell">Visibility</th>
|
|
<th scope="col" class="d-none d-md-table-cell">Group</th>
|
|
<th scope="col"></th>
|
|
</tr>
|
|
</thead>
|
|
<draggable id="services_list" tag="tbody" v-model="servicesList" handle=".drag_icon">
|
|
<tr v-for="(service, index) in $store.getters.servicesInOrder" :key="service.id">
|
|
<td>
|
|
<span v-if="$store.state.admin" class="drag_icon d-none d-md-inline">
|
|
<font-awesome-icon icon="bars" class="mr-3"/>
|
|
</span> {{service.name}}
|
|
</td>
|
|
<td class="d-none d-md-table-cell">
|
|
<span class="badge" :class="{'badge-primary': service.public, 'badge-secondary': !service.public}">
|
|
{{service.public ? "PUBLIC" : "PRIVATE"}}
|
|
</span>
|
|
</td>
|
|
<td class="d-none d-md-table-cell">
|
|
<div v-if="service.group_id !== 0">
|
|
<span class="badge badge-secondary">{{serviceGroup(service)}}</span>
|
|
</div>
|
|
</td>
|
|
<td class="text-right">
|
|
<div class="btn-group">
|
|
<router-link v-if="$store.state.admin" :to="{path: `/dashboard/edit_service/${service.id}`, params: {service: service} }" class="btn btn-outline-secondary">
|
|
<i class="fas fa-chart-area"></i> Edit
|
|
</router-link>
|
|
<router-link :to="{path: serviceLink(service), params: {service: service} }" class="btn btn-outline-secondary">
|
|
<i class="fas fa-chart-area"></i> View
|
|
</router-link>
|
|
<a v-if="$store.state.admin" @click.prevent="deleteService(service)" href="#" class="btn btn-danger">
|
|
<font-awesome-icon icon="times" />
|
|
</a>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
</draggable>
|
|
</table>
|
|
</template>
|
|
|
|
<script>
|
|
import Api from "../../API";
|
|
import draggable from 'vuedraggable'
|
|
import ToggleSwitch from '../../forms/ToggleSwitch';
|
|
|
|
export default {
|
|
name: 'ServicesList',
|
|
components: {
|
|
ToggleSwitch,
|
|
draggable
|
|
},
|
|
computed: {
|
|
servicesList: {
|
|
get () {
|
|
return this.$store.getters.servicesInOrder
|
|
},
|
|
set (value) {
|
|
this.updateOrder(value)
|
|
}
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
|
|
}
|
|
},
|
|
methods: {
|
|
async updateOrder(value) {
|
|
let data = [];
|
|
value.forEach((s, k) => {
|
|
data.push({ service: s.id, order: k + 1 })
|
|
});
|
|
const reorder = await Api.services_reorder(data)
|
|
window.console.log('reorder', reorder)
|
|
const services = await Api.services()
|
|
this.$store.commit('setServices', services)
|
|
},
|
|
async deleteService(s) {
|
|
let c = confirm(`Are you sure you want to delete '${s.name}'?`)
|
|
if (c) {
|
|
await Api.service_delete(s.id)
|
|
const services = await Api.services()
|
|
this.$store.commit('setServices', services)
|
|
}
|
|
},
|
|
serviceGroup(s) {
|
|
let group = this.$store.getters.groupById(s.group_id)
|
|
if (group) {
|
|
return group.name
|
|
}
|
|
return ""
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
|
<style scoped>
|
|
</style>
|