Updated server index blade view

Updated server index blade view for NPM webpack usage
This commit is contained in:
cp6 2022-11-13 15:54:27 +11:00
parent f0903e08f4
commit 26356b3cd7

View File

@ -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>