Updated server index blade view
Updated server index blade view for NPM webpack usage
This commit is contained in:
parent
f0903e08f4
commit
26356b3cd7
|
@ -1,17 +1,9 @@
|
||||||
@section("title", "Servers")
|
@section('title', 'Servers')
|
||||||
@section('style')
|
|
||||||
<x-modal-style></x-modal-style>
|
|
||||||
@endsection
|
|
||||||
@section('scripts')
|
|
||||||
<script src="{{ asset('js/vue.min.js') }}"></script>
|
|
||||||
<script src="{{ asset('js/axios.min.js') }}"></script>
|
|
||||||
@endsection
|
|
||||||
<x-app-layout>
|
<x-app-layout>
|
||||||
<x-slot name="header">
|
<x-slot name="header">
|
||||||
{{ __('Servers') }}
|
{{ __('Servers') }}
|
||||||
</x-slot>
|
</x-slot>
|
||||||
<div class="container" id="app">
|
<div class="container" id="app">
|
||||||
<x-delete-confirm-modal></x-delete-confirm-modal>
|
|
||||||
<x-response-alerts></x-response-alerts>
|
<x-response-alerts></x-response-alerts>
|
||||||
<ul class="nav nav-tabs mt-3" id="myTab" role="tablist">
|
<ul class="nav nav-tabs mt-3" id="myTab" role="tablist">
|
||||||
<li class="nav-item" role="presentation">
|
<li class="nav-item" role="presentation">
|
||||||
|
@ -94,7 +86,7 @@
|
||||||
|
|
||||||
<i class="fas fa-plug mx-1" id="{{$server->hostname}}"
|
<i class="fas fa-plug mx-1" id="{{$server->hostname}}"
|
||||||
title="check if up"
|
title="check if up"
|
||||||
@click="checkUp">
|
@click="checkIfUp">
|
||||||
</i>
|
</i>
|
||||||
<i class="fas fa-trash text-danger ms-3" @click="confirmDeleteModal"
|
<i class="fas fa-trash text-danger ms-3" @click="confirmDeleteModal"
|
||||||
id="{{$server->id}}" title="{{$server->hostname}}"></i>
|
id="{{$server->id}}" title="{{$server->hostname}}"></i>
|
||||||
|
@ -175,7 +167,7 @@
|
||||||
|
|
||||||
<i class="fas fa-plug mx-1" id="{{$server->hostname}}"
|
<i class="fas fa-plug mx-1" id="{{$server->hostname}}"
|
||||||
title="check if up"
|
title="check if up"
|
||||||
@click="checkUp">
|
@click="checkIfUp">
|
||||||
</i>
|
</i>
|
||||||
<i class="fas fa-trash text-danger ms-3" @click="confirmDeleteModal"
|
<i class="fas fa-trash text-danger ms-3" @click="confirmDeleteModal"
|
||||||
id="{{$server->id}}" title="{{$server->hostname}}"></i>
|
id="{{$server->id}}" title="{{$server->hostname}}"></i>
|
||||||
|
@ -196,47 +188,54 @@
|
||||||
</div>
|
</div>
|
||||||
<x-details-footer></x-details-footer>
|
<x-details-footer></x-details-footer>
|
||||||
</div>
|
</div>
|
||||||
|
<x-delete-confirm-modal></x-delete-confirm-modal>
|
||||||
|
</div>
|
||||||
|
@section('scripts')
|
||||||
<script>
|
<script>
|
||||||
axios.defaults.headers.common = {
|
window.addEventListener('load', function () {
|
||||||
'Content-Type': 'application/json',
|
document.getElementById("confirmDeleteModal").classList.remove("d-none");
|
||||||
'X-Requested-With': 'XMLHttpRequest',
|
axios.defaults.headers.common = {
|
||||||
'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
|
'Content-Type': 'application/json',
|
||||||
'Accept': 'application/json',
|
'X-Requested-With': 'XMLHttpRequest',
|
||||||
};
|
'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
|
||||||
|
'Accept': 'application/json',
|
||||||
|
};
|
||||||
|
|
||||||
let app = new Vue({
|
let app = new Vue({
|
||||||
el: "#app",
|
el: "#app",
|
||||||
data: {
|
data: {
|
||||||
"status": false,
|
"status": false,
|
||||||
"modal_hostname": '',
|
"modal_hostname": '',
|
||||||
"modal_id": '',
|
"modal_id": '',
|
||||||
"delete_form_action": '',
|
"delete_form_action": '',
|
||||||
showModal: false
|
showModal: false
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
checkUp(event) {
|
|
||||||
var hostname = event.target.id;
|
|
||||||
|
|
||||||
if (hostname) {
|
|
||||||
axios
|
|
||||||
.get('/api/online/' + event.target.id, {headers: {'Authorization': 'Bearer ' + document.querySelector('meta[name="api_token"]').getAttribute('content')}})
|
|
||||||
.then(response => (this.status = response.data.is_online))
|
|
||||||
.finally(() => {
|
|
||||||
if (this.status) {
|
|
||||||
event.target.className = "fas fa-plug text-success mx-1";
|
|
||||||
} else if (!this.status) {
|
|
||||||
event.target.className = "fas fa-plug text-danger mx-1";
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
},
|
},
|
||||||
confirmDeleteModal(event) {
|
methods: {
|
||||||
this.showModal = true;
|
checkIfUp(event) {
|
||||||
this.modal_hostname = event.target.title;
|
var hostname = event.target.id;
|
||||||
this.modal_id = event.target.id;
|
|
||||||
this.delete_form_action = 'servers/' + this.modal_id;
|
if (hostname) {
|
||||||
|
axios
|
||||||
|
.get('/api/online/' + event.target.id, {headers: {'Authorization': 'Bearer ' + document.querySelector('meta[name="api_token"]').getAttribute('content')}})
|
||||||
|
.then(response => (this.status = response.data.is_online))
|
||||||
|
.finally(() => {
|
||||||
|
if (this.status) {
|
||||||
|
event.target.className = "fas fa-plug text-success mx-1";
|
||||||
|
} else if (!this.status) {
|
||||||
|
event.target.className = "fas fa-plug text-danger mx-1";
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
},
|
||||||
|
confirmDeleteModal(event) {
|
||||||
|
this.showModal = true;
|
||||||
|
this.modal_hostname = event.target.title;
|
||||||
|
this.modal_id = event.target.id;
|
||||||
|
this.delete_form_action = 'servers/' + this.modal_id;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
});
|
||||||
});
|
})
|
||||||
</script>
|
</script>
|
||||||
|
@endsection
|
||||||
</x-app-layout>
|
</x-app-layout>
|
||||||
|
|
Loading…
Reference in New Issue
Block a user