swapnil/my-idlers
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Updated server index blade view

Browse Source 
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
1 changed files with 48 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

97
resources/views/servers/index.blade.php
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>