statping/source/tmpl/services.html

67 lines
2.1 KiB
HTML

{{define "title"}}Statup | Services{{end}}
{{define "content"}}
<div class="container col-md-7 col-sm-12 mt-md-5 bg-light">
{{template "nav"}}
<div class="col-12">
<h3>Services</h3>
<table class="table">
<thead>
<tr>
<th scope="col">Name</th>
<th scope="col" class="d-none d-md-table-cell">Status</th>
<th scope="col"></th>
</tr>
</thead>
<tbody class="sortable">
{{range .}}
<tr id="{{.Id}}">
<td><span class="drag_icon d-none d-md-inline"><i class="fas fa-bars"></i></span> {{.Name}}</td>
<td class="d-none d-md-table-cell">{{if .Online}}<span class="badge badge-success">ONLINE</span>{{else}}<span class="badge badge-danger">OFFLINE</span>{{end}} </td>
<td class="text-right">
<div class="btn-group">
<a href="/service/{{.Id}}" class="btn btn-outline-secondary"><i class="fas fa-chart-area"></i> View</a>
<a href="/service/{{.Id}}/delete" class="btn btn-danger confirm-btn"><i class="fas fa-times"></i></a>
</div>
</td>
</tr>
{{end}}
</tbody>
</table>
<h3>Create Service</h3>
{{template "form_service" NewService}}
</div>
</div>
{{end}}
{{define "extra_scripts"}}
{{if USE_CDN}}
<script src="https://assets.statup.io/sortable.min.js"></script>
{{ else }}
<script src="/js/sortable.min.js"></script>
{{end}}
<script>
sortable('.sortable', {
forcePlaceholderSize: true,
hoverClass: 'sortable_drag',
handle: '.drag_icon'
});
sortable('.sortable')[0].addEventListener('sortupdate', function(e) {
var i = 0;
var newOrder = [];
var dest = e.detail.destination.items;
dest.forEach(function(d) {
i++;
var o = {service: parseInt(d.id), order: i}
newOrder.push(o);
});
$.post("/services/reorder", JSON.stringify(newOrder), function(data, status){
});
});
</script>
{{end}}