mirror of
				https://github.com/cp6/my-idlers.git
				synced 2025-11-03 23:59:09 +00:00 
			
		
		
		
	Updated server index blade view
Updated server index blade view for NPM webpack usage
This commit is contained in:
		
							parent
							
								
									f0903e08f4
								
							
						
					
					
						commit
						26356b3cd7
					
				
					 1 changed files with 48 additions and 49 deletions
				
			
		| 
						 | 
					@ -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…
	
	Add table
		
		Reference in a new issue