Updated index view blade for NPM webpack usage

Updated index view blade for NPM webpack usage
This commit is contained in:
cp6 2022-11-13 15:53:05 +11:00
parent 84902191e5
commit 68f1d331f9
11 changed files with 167 additions and 231 deletions

View File

@ -1,12 +1,8 @@
@extends('layouts.index')
@section('title', 'Domain names')
@section('css_style')
<x-modal-style></x-modal-style>
@endsection
@section('header')
{{ __('Domains') }}
@endsection
@section('content')
<x-app-layout>
<x-slot name="header">
{{ __('Domains') }}
</x-slot>
<div class="container" id="app">
<x-delete-confirm-modal></x-delete-confirm-modal>
<x-card class="shadow mt-3">
@ -67,4 +63,4 @@
<x-modal-delete-script>
<x-slot name="uri">domains</x-slot>
</x-modal-delete-script>
@endsection
</x-app-layout>

View File

@ -1,80 +1,74 @@
@section("title", "IP addresses")
@section('css_links')
<link rel="stylesheet" href="{{ asset('css/datatables.bootstrap.min.css') }}">
@endsection
@section('style')
<x-modal-style></x-modal-style>
@endsection
@section('scripts')
<script src="{{ asset('js/vue.min.js') }}"></script>
@endsection
@section('title', 'IP addresses')
<x-app-layout>
<x-slot name="header">
{{ __('IP Addresses') }}
{{ __('IP addresses') }}
</x-slot>
<div class="container" id="app">
<x-delete-confirm-modal></x-delete-confirm-modal>
<x-card class="shadow mt-3">
<a href="{{ route('IPs.create') }}" class="btn btn-primary mb-3">Add IP</a>
<x-response-alerts></x-response-alerts>
<div class="table-responsive">
<table class="table table-bordered" id="ips-table">
<thead class="table-light">
<tr>
<th class="text-nowrap">Type</th>
<th class="text-nowrap">Address</th>
<th class="text-nowrap">Actions</th>
</tr>
</thead>
<tbody>
@if(!empty($ips))
@foreach($ips as $ip)
<tr>
<td class="text-nowrap">@if ($ip->is_ipv4 === 1)
IPv4
@else
IPv6
@endif</td>
<td class="text-nowrap">{{ $ip->address}}</td>
<td class="text-nowrap">
<form action="{{ route('IPs.destroy', $ip->id) }}" method="POST">
@csrf
@method('DELETE')
<i class="fas fa-trash text-danger ms-3" @click="confirmDeleteModal"
id="{{$ip->id}}" title="{{$ip->address}}"></i>
</form>
</td>
</tr>
@endforeach
@else
<x-card class="shadow mt-3">
<a href="{{ route('IPs.create') }}" class="btn btn-primary mb-3">Add IP</a>
<x-response-alerts></x-response-alerts>
<div class="table-responsive">
<table class="table table-bordered" id="ips-table">
<thead class="table-light">
<tr>
<td class="px-4 py-2 border text-red-500" colspan="3">No IPs found.</td>
<th class="text-nowrap">Type</th>
<th class="text-nowrap">Address</th>
<th class="text-nowrap">Actions</th>
</tr>
@endif
</tbody>
</table>
</div>
</x-card>
</thead>
<tbody>
@if(!empty($ips))
@foreach($ips as $ip)
<tr>
<td class="text-nowrap">@if ($ip->is_ipv4 === 1)
IPv4
@else
IPv6
@endif</td>
<td class="text-nowrap">{{ $ip->address}}</td>
<td class="text-nowrap">
<form action="{{ route('IPs.destroy', $ip->id) }}" method="POST">
@csrf
@method('DELETE')
<i class="fas fa-trash text-danger ms-3" @click="confirmDeleteModal"
id="{{$ip->id}}" title="{{$ip->address}}"></i>
</form>
</td>
</tr>
@endforeach
@else
<tr>
<td class="px-4 py-2 border text-red-500" colspan="3">No IPs found.</td>
</tr>
@endif
</tbody>
</table>
</div>
</x-card>
<x-details-footer></x-details-footer>
<x-delete-confirm-modal></x-delete-confirm-modal>
</div>
<x-datatables-assets></x-datatables-assets>
<script type="text/javascript">
$(document).ready(function () {
$('#ips-table').DataTable({
"pageLength": 15,
"lengthMenu": [5, 10, 15, 25, 30, 50, 75, 100],
"columnDefs": [
{"orderable": false, "targets": 1}
],
"initComplete": function () {
$('.dataTables_length,.dataTables_filter').addClass('mb-2');
$('.dataTables_paginate').addClass('mt-2');
$('.dataTables_info').addClass('mt-2 text-muted ');
}
});
});
</script>
<x-modal-delete-script>
<x-slot name="uri">IPs</x-slot>
</x-modal-delete-script>
@section('scripts')
<script>
window.addEventListener('load', function () {
$('#ips-table').DataTable({
"pageLength": 15,
"lengthMenu": [5, 10, 15, 25, 30, 50, 75, 100],
"columnDefs": [
{"orderable": false, "targets": 1}
],
"initComplete": function () {
$('.dataTables_length,.dataTables_filter').addClass('mb-2');
$('.dataTables_paginate').addClass('mt-2');
$('.dataTables_info').addClass('mt-2 text-muted ');
}
});
})
</script>
@endsection
</x-app-layout>

View File

@ -1,19 +1,9 @@
@section("title", "Labels")
@section('css_links')
<link rel="stylesheet" href="{{ asset('css/datatables.bootstrap.min.css') }}">
@endsection
@section('style')
<x-modal-style></x-modal-style>
@endsection
@section('scripts')
<script src="{{ asset('js/vue.min.js') }}"></script>
@endsection
@section('title', 'Labels')
<x-app-layout>
<x-slot name="header">
{{ __('Labels') }}
</x-slot>
<div class="container" id="app">
<x-delete-confirm-modal></x-delete-confirm-modal>
<x-card class="shadow mt-3">
<a href="{{ route('labels.create') }}" class="btn btn-primary mb-3">Add a label</a>
<x-response-alerts></x-response-alerts>
@ -49,26 +39,28 @@
</tbody>
</table>
</x-card>
<x-details-footer></x-details-footer>
<x-details-footer></x-details-footer>
<x-delete-confirm-modal></x-delete-confirm-modal>
</div>
<x-datatables-assets></x-datatables-assets>
<script type="text/javascript">
$(document).ready(function () {
$('#labels-table').DataTable({
"pageLength": 15,
"lengthMenu": [5, 10, 15, 25, 30, 50, 75, 100],
"columnDefs": [
{"orderable": false, "targets": 1}
],
"initComplete": function () {
$('.dataTables_length,.dataTables_filter').addClass('mb-2');
$('.dataTables_paginate').addClass('mt-2');
$('.dataTables_info').addClass('mt-2 text-muted ');
}
});
});
</script>
<x-modal-delete-script>
<x-slot name="uri">labels</x-slot>
</x-modal-delete-script>
@section('scripts')
<script>
window.addEventListener('load', function () {
$('#labels-table').DataTable({
"pageLength": 15,
"lengthMenu": [5, 10, 15, 25, 30, 50, 75, 100],
"columnDefs": [
{"orderable": false, "targets": 1}
],
"initComplete": function () {
$('.dataTables_length,.dataTables_filter').addClass('mb-2');
$('.dataTables_paginate').addClass('mt-2');
$('.dataTables_info').addClass('mt-2 text-muted ');
}
});
})
</script>
@endsection
</x-app-layout>

View File

@ -1,19 +1,9 @@
@section("title", "Locations")
@section('css_links')
<link rel="stylesheet" href="{{ asset('css/datatables.bootstrap.min.css') }}">
@endsection
@section('style')
<x-modal-style></x-modal-style>
@endsection
@section('scripts')
<script src="{{ asset('js/vue.min.js') }}"></script>
@endsection
@section('title', 'Locations')
<x-app-layout>
<x-slot name="header">
{{ __('Locations') }}
</x-slot>
<div class="container" id="app">
<x-delete-confirm-modal></x-delete-confirm-modal>
<x-card class="shadow mt-3">
<a href="{{ route('locations.create') }}" class="btn btn-primary mb-3">Add a location</a>
<x-response-alerts></x-response-alerts>
@ -49,25 +39,27 @@
</table>
</x-card>
<x-details-footer></x-details-footer>
<x-delete-confirm-modal></x-delete-confirm-modal>
</div>
<x-datatables-assets></x-datatables-assets>
<script type="text/javascript">
$(document).ready(function () {
$('#locations-table').DataTable({
"pageLength": 15,
"lengthMenu": [5, 10, 15, 25, 30, 50, 75, 100],
"columnDefs": [
{"orderable": false, "targets": 1}
],
"initComplete": function () {
$('.dataTables_length,.dataTables_filter').addClass('mb-2');
$('.dataTables_paginate').addClass('mt-2');
$('.dataTables_info').addClass('mt-2 text-muted ');
}
});
});
</script>
<x-modal-delete-script>
<x-slot name="uri">locations</x-slot>
</x-modal-delete-script>
@section('scripts')
<script>
window.addEventListener('load', function () {
$('#locations-table').DataTable({
"pageLength": 15,
"lengthMenu": [5, 10, 15, 25, 30, 50, 75, 100],
"columnDefs": [
{"orderable": false, "targets": 1}
],
"initComplete": function () {
$('.dataTables_length,.dataTables_filter').addClass('mb-2');
$('.dataTables_paginate').addClass('mt-2');
$('.dataTables_info').addClass('mt-2 text-muted ');
}
});
})
</script>
@endsection
</x-app-layout>

View File

@ -1,12 +1,8 @@
@extends('layouts.index')
@section('title', 'Misc services')
@section('css_style')
<x-modal-style></x-modal-style>
@endsection
@section('header')
{{ __('Misc') }}
@endsection
@section('content')
<x-app-layout>
<x-slot name="header">
{{ __('Misc') }}
</x-slot>
<div class="container" id="app">
<x-delete-confirm-modal></x-delete-confirm-modal>
<x-card class="shadow mt-3">
@ -68,4 +64,4 @@
<x-modal-delete-script>
<x-slot name="uri">misc</x-slot>
</x-modal-delete-script>
@endsection
</x-app-layout>

View File

@ -1,19 +1,9 @@
@section("title", "Operating systems")
@section('css_links')
<link rel="stylesheet" href="{{ asset('css/datatables.bootstrap.min.css') }}">
@endsection
@section('style')
<x-modal-style></x-modal-style>
@endsection
@section('scripts')
<script src="{{ asset('js/vue.min.js') }}"></script>
@endsection
@section('title', 'Operating systems')
<x-app-layout>
<x-slot name="header">
{{ __('Operating systems') }}
</x-slot>
<div class="container" id="app">
<x-delete-confirm-modal></x-delete-confirm-modal>
<x-card class="shadow mt-3">
<a href="{{ route('os.create') }}" class="btn btn-primary mb-3">Add an OS</a>
<x-response-alerts></x-response-alerts>
@ -46,25 +36,27 @@
</table>
</x-card>
<x-details-footer></x-details-footer>
<x-delete-confirm-modal></x-delete-confirm-modal>
</div>
<x-datatables-assets></x-datatables-assets>
<script type="text/javascript">
$(document).ready(function () {
$('#os-table').DataTable({
"pageLength": 15,
"lengthMenu": [5, 10, 15, 25, 30, 50, 75, 100],
"columnDefs": [
{"orderable": false, "targets": 1}
],
"initComplete": function () {
$('.dataTables_length,.dataTables_filter').addClass('mb-2');
$('.dataTables_paginate').addClass('mt-2');
$('.dataTables_info').addClass('mt-2 text-muted ');
}
});
});
</script>
<x-modal-delete-script>
<x-slot name="uri">os</x-slot>
</x-modal-delete-script>
@section('scripts')
<script>
window.addEventListener('load', function () {
$('#os-table').DataTable({
"pageLength": 15,
"lengthMenu": [5, 10, 15, 25, 30, 50, 75, 100],
"columnDefs": [
{"orderable": false, "targets": 1}
],
"initComplete": function () {
$('.dataTables_length,.dataTables_filter').addClass('mb-2');
$('.dataTables_paginate').addClass('mt-2');
$('.dataTables_info').addClass('mt-2 text-muted ');
}
});
})
</script>
@endsection
</x-app-layout>

View File

@ -1,19 +1,9 @@
@section("title", "Providers")
@section('css_links')
<link rel="stylesheet" href="{{ asset('css/datatables.bootstrap.min.css') }}">
@endsection
@section('style')
<x-modal-style></x-modal-style>
@endsection
@section('scripts')
<script src="{{ asset('js/vue.min.js') }}"></script>
@endsection
<x-app-layout>
<x-slot name="header">
{{ __('Providers') }}
</x-slot>
<div class="container" id="app">
<x-delete-confirm-modal></x-delete-confirm-modal>
<x-card class="shadow mt-3">
<a href="{{ route('providers.create') }}" class="btn btn-primary mb-3">Add a provider</a>
<x-response-alerts></x-response-alerts>
@ -49,23 +39,25 @@
</table>
</x-card>
<x-details-footer></x-details-footer>
<x-delete-confirm-modal></x-delete-confirm-modal>
</div>
<x-datatables-assets></x-datatables-assets>
<script type="text/javascript">
$(document).ready(function () {
$('#providers-table').DataTable({
"pageLength": 15,
"lengthMenu": [5, 10, 15, 25, 30, 50, 75, 100],
"columnDefs": [
{"orderable": false, "targets": 1}
],
"initComplete": function () {
$('.dataTables_length,.dataTables_filter').addClass('mb-2');
$('.dataTables_paginate').addClass('mt-2');
$('.dataTables_info').addClass('mt-2 text-muted ');
}
window.addEventListener('load', function () {
$(document).ready(function () {
$('#providers-table').DataTable({
"pageLength": 15,
"lengthMenu": [5, 10, 15, 25, 30, 50, 75, 100],
"columnDefs": [
{"orderable": false, "targets": 1}
],
"initComplete": function () {
$('.dataTables_length,.dataTables_filter').addClass('mb-2');
$('.dataTables_paginate').addClass('mt-2');
$('.dataTables_info').addClass('mt-2 text-muted ');
}
});
});
});
})
</script>
<x-modal-delete-script>
<x-slot name="uri">providers</x-slot>

View File

@ -1,14 +1,9 @@
@extends('layouts.index')
@section('title', 'Resellers')
@section('css_style')
<x-modal-style></x-modal-style>
@endsection
@section('header')
{{ __('Reseller') }}
@endsection
@section('content')
<x-app-layout>
<x-slot name="header">
{{ __('Reseller') }}
</x-slot>
<div class="container" id="app">
<x-delete-confirm-modal></x-delete-confirm-modal>
<div class="card shadow mt-3">
<div class="card-body">
<a href="{{ route('reseller.create') }}" class="btn btn-primary mb-3">Add a reseller</a>
@ -68,8 +63,9 @@
</div>
</div>
<x-details-footer></x-details-footer>
<x-delete-confirm-modal></x-delete-confirm-modal>
</div>
<x-modal-delete-script>
<x-slot name="uri">reseller</x-slot>
</x-modal-delete-script>
@endsection
</x-app-layout>

View File

@ -1,14 +1,9 @@
@extends('layouts.index')
@section('title', 'Seed boxes')
@section('css_style')
<x-modal-style></x-modal-style>
@endsection
@section('header')
{{ __('Seed boxes') }}
@endsection
@section('content')
<x-app-layout>
<x-slot name="header">
{{ __('Seed boxes') }}
</x-slot>
<div class="container" id="app">
<x-delete-confirm-modal></x-delete-confirm-modal>
<div class="card shadow mt-3">
<div class="card-body">
<a href="{{ route('seedboxes.create') }}" class="btn btn-primary mb-3">Add a seed box</a>
@ -90,8 +85,9 @@
</div>
</div>
<x-details-footer></x-details-footer>
<x-delete-confirm-modal></x-delete-confirm-modal>
</div>
<x-modal-delete-script>
<x-slot name="uri">seedboxes</x-slot>
</x-modal-delete-script>
@endsection
</x-app-layout>

View File

@ -1,14 +1,9 @@
@extends('layouts.index')
@section('title', 'Shared hosting')
@section('css_style')
<x-modal-style></x-modal-style>
@endsection
@section('header')
{{ __('Shared') }}
@endsection
@section('content')
<x-app-layout>
<x-slot name="header">
{{ __('Shared') }}
</x-slot>
<div class="container" id="app">
<x-delete-confirm-modal></x-delete-confirm-modal>
<div class="card shadow mt-3">
<div class="card-body">
<a href="{{ route('shared.create') }}" class="btn btn-primary mb-3">Add shared hosting</a>
@ -70,8 +65,9 @@
</div>
</div>
<x-details-footer></x-details-footer>
<x-delete-confirm-modal></x-delete-confirm-modal>
</div>
<x-modal-delete-script>
<x-slot name="uri">shared</x-slot>
</x-modal-delete-script>
@endsection
</x-app-layout>

View File

@ -1,10 +1,4 @@
@section("title", "YABS results")
@section('style')
<x-modal-style></x-modal-style>
@endsection
@section('scripts')
<script src="{{ asset('js/vue.min.js') }}"></script>
@endsection
@section('title', 'YABS results')
<x-app-layout>
<x-slot name="header">
{{ __('YABS') }}