Merge pull request #78 from cp6/Development

Changes for the move to NPM Webpack asset loading
This commit is contained in:
corbpie 2022-11-13 21:44:13 +11:00 committed by GitHub
commit 14f1e808eb
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
25 changed files with 10601 additions and 1308 deletions

4
.gitignore vendored
View File

@ -57,3 +57,7 @@ fabric.properties
# .idea/misc.xml
# *.ipr
storage/clockwork/
public/css/
public/js/
public/fonts/
public/webfonts/

11204
package-lock.json generated

File diff suppressed because it is too large Load Diff

View File

@ -7,26 +7,26 @@
"watch-poll": "mix watch -- --watch-options-poll=1000",
"hot": "mix watch --hot",
"prod": "npm run production",
"production": "mix --production"
"production": "mix --production",
"build": "webpack --config webpack.config.js"
},
"devDependencies": {
"@popperjs/core": "^2.10.2",
"@tailwindcss/forms": "^0.4.0",
"alpinejs": "^3.4.2",
"autoprefixer": "^10.1.0",
"axios": "^0.21.4",
"bootstrap": "^5.1.3",
"bootstrap": "^5.2.2",
"bootstrap-dark-5": "^1.1.3",
"bootstrap-data-table": "^1.0.0",
"datatables": "^1.10.18",
"datatables.net-bs": "^1.13.1",
"font-awesome": "^4.7.0",
"jquery": "^3.6.1",
"laravel-mix": "^6.0.41",
"lodash": "^4.17.21",
"postcss": "^8.2.1",
"postcss-import": "^14.0.1",
"resolve-url-loader": "^3.1.2",
"sass": "^1.32.11",
"sass-loader": "^11.0.1",
"tailwindcss": "^3.0.0",
"vue": "^2.6.12",
"vue-loader": "^15.9.5",
"vue": "^2.7.14",
"vue-loader": "^17.0.1",
"vue-resource": "^1.5.3",
"vue-template-compiler": "^2.6.12"
"vue-template-compiler": "^2.7.14"
},
"dependencies": {
"@fortawesome/fontawesome-free": "^6.2.0",
"datatables.net-bs5": "^1.13.1"
}
}

View File

@ -1,3 +1,3 @@
@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';
@import '~@fortawesome/fontawesome-free/css/all.min.css';
@import "datatables.net-bs5";
@import "style.css";

1
resources/css/dark.css vendored Normal file
View File

@ -0,0 +1 @@
@import 'bootstrap-dark-5';

1
resources/css/light.css vendored Normal file
View File

@ -0,0 +1 @@
@import 'bootstrap';

28
resources/css/style.css vendored Normal file
View File

@ -0,0 +1,28 @@
/*
Custom styles go in here
*/
.modal-mask {
position: fixed;
z-index: 9998;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, .5);
transition: opacity .3s ease;
}
.modal-body {
margin: 10px 0;
}
.modal {
display: contents !important;
}
@media (min-width: 1400px) {
.container-xxl, .container-xl, .container-lg, .container-md, .container-sm, .container {
max-width: 1520px;
}
}

14
resources/js/app.js vendored
View File

@ -1,6 +1,8 @@
require('./bootstrap');
import Alpine from 'alpinejs';
window.Alpine = Alpine;
Alpine.start();
require('bootstrap')
require('datatables')
window.Vue = require('vue/dist/vue');
window.axios = require('axios');
import $ from 'jquery';
window.jQuery = $;
window.$ = $;
require('datatables.net-bs5');

View File

@ -1,7 +1,7 @@
<div v-if="showModal">
<transition name="modal">
<div class="modal-mask">
<div class="modal-wrapper">
<div id="confirmDeleteModal" class="modal-mask d-none">
<div class="modal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header py-1">

View File

@ -1,4 +1,6 @@
<script>
window.addEventListener('load', function() {
document.getElementById("confirmDeleteModal").classList.remove("d-none");
let app = new Vue({
el: "#app",
data: {
@ -16,4 +18,5 @@
}
}
});
})
</script>

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')
<x-app-layout>
<x-slot name="header">
{{ __('Domains') }}
@endsection
@section('content')
</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,19 +1,10 @@
@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-response-alerts></x-response-alerts>
<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>
@ -56,10 +47,14 @@
</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 () {
<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],
@ -72,9 +67,8 @@
$('.dataTables_info').addClass('mt-2 text-muted ');
}
});
});
})
</script>
<x-modal-delete-script>
<x-slot name="uri">IPs</x-slot>
</x-modal-delete-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>
@ -50,10 +40,14 @@
</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 () {
<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],
@ -66,9 +60,7 @@
$('.dataTables_info').addClass('mt-2 text-muted ');
}
});
});
})
</script>
<x-modal-delete-script>
<x-slot name="uri">labels</x-slot>
</x-modal-delete-script>
@endsection
</x-app-layout>

View File

@ -11,19 +11,16 @@
<title>@yield('title') - @if (config()->has('app.name')) {{ config('app.name') }} @else My idlers @endif</title>
@if(Session::get('dark_mode'))
<link rel="stylesheet" href="{{ asset('css/bootstrap-dark.min.css') }}">
<link rel="stylesheet" href="{{ asset('css/dark.css') }}">
@else
<link rel="stylesheet" href="{{ asset('css/bootstrap.min.css') }}">
<link rel="stylesheet" href="{{ asset('css/light.css') }}">
@endif
<link rel="stylesheet" href="{{ asset('css/fa.min.css') }}">
<link rel="stylesheet" href="{{ asset('css/app.css') }}">
@yield('css_links')
@yield('style')
<script src="{{ asset('js/bootstrap.min.js') }}" defer></script>
@yield('scripts')
</head>
<body class="font-sans antialiased">
<div class="container-fluid">
@ -40,5 +37,7 @@
<div class="container">
{{ $slot }}
</div>
<script src="{{ asset('js/app.js') }}" defer></script>
@yield('scripts')
</body>
</html>

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,10 +39,14 @@
</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 () {
<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],
@ -65,9 +59,7 @@
$('.dataTables_info').addClass('mt-2 text-muted ');
}
});
});
})
</script>
<x-modal-delete-script>
<x-slot name="uri">locations</x-slot>
</x-modal-delete-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')
<x-app-layout>
<x-slot name="header">
{{ __('Misc') }}
@endsection
@section('content')
</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,10 +36,14 @@
</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 () {
<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],
@ -62,9 +56,7 @@
$('.dataTables_info').addClass('mt-2 text-muted ');
}
});
});
})
</script>
<x-modal-delete-script>
<x-slot name="uri">os</x-slot>
</x-modal-delete-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,9 +39,10 @@
</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">
window.addEventListener('load', function () {
$(document).ready(function () {
$('#providers-table').DataTable({
"pageLength": 15,
@ -66,6 +57,7 @@
}
});
});
})
</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')
<x-app-layout>
<x-slot name="header">
{{ __('Reseller') }}
@endsection
@section('content')
</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')
<x-app-layout>
<x-slot name="header">
{{ __('Seed boxes') }}
@endsection
@section('content')
</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,8 +1,4 @@
@section("title", "Add a server")
@section('scripts')
<script src="{{ asset('js/vue.min.js') }}"></script>
<script src="{{ asset('js/axios.min.js') }}"></script>
@endsection
<x-app-layout>
<x-slot name="header">
{{ __('Insert a new server') }}
@ -224,7 +220,8 @@
</x-labels-select>
</div>
</div>
<x-form-check text="Allow this data to be public, restrict values in settings" name="show_public"></x-form-check>
<x-form-check text="Allow this data to be public, restrict values in settings"
name="show_public"></x-form-check>
<div class="row">
<div class="col-12 col-lg-4">
<x-submit-button>Insert server</x-submit-button>
@ -233,8 +230,10 @@
</form>
</x-card>
</div>
@section('scripts')
<script>
window.addEventListener('load', function () {
axios.defaults.headers.common = {
'Content-Type': 'application/json',
'X-Requested-With': 'XMLHttpRequest',
@ -263,5 +262,7 @@
}
}
});
})
</script>
@endsection
</x-app-layout>

View File

@ -1,17 +1,9 @@
@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
@section('title', 'Servers')
<x-app-layout>
<x-slot name="header">
{{ __('Servers') }}
</x-slot>
<div class="container" id="app">
<x-delete-confirm-modal></x-delete-confirm-modal>
<x-response-alerts></x-response-alerts>
<ul class="nav nav-tabs mt-3" id="myTab" role="tablist">
<li class="nav-item" role="presentation">
@ -94,7 +86,7 @@
<i class="fas fa-plug mx-1" id="{{$server->hostname}}"
title="check if up"
@click="checkUp">
@click="checkIfUp">
</i>
<i class="fas fa-trash text-danger ms-3" @click="confirmDeleteModal"
id="{{$server->id}}" title="{{$server->hostname}}"></i>
@ -175,7 +167,7 @@
<i class="fas fa-plug mx-1" id="{{$server->hostname}}"
title="check if up"
@click="checkUp">
@click="checkIfUp">
</i>
<i class="fas fa-trash text-danger ms-3" @click="confirmDeleteModal"
id="{{$server->id}}" title="{{$server->hostname}}"></i>
@ -196,7 +188,12 @@
</div>
<x-details-footer></x-details-footer>
</div>
<x-delete-confirm-modal></x-delete-confirm-modal>
</div>
@section('scripts')
<script>
window.addEventListener('load', function () {
document.getElementById("confirmDeleteModal").classList.remove("d-none");
axios.defaults.headers.common = {
'Content-Type': 'application/json',
'X-Requested-With': 'XMLHttpRequest',
@ -214,7 +211,7 @@
showModal: false
},
methods: {
checkUp(event) {
checkIfUp(event) {
var hostname = event.target.id;
if (hostname) {
@ -238,5 +235,7 @@
}
}
});
})
</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')
<x-app-layout>
<x-slot name="header">
{{ __('Shared') }}
@endsection
@section('content')
</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') }}

7
webpack.mix.js vendored
View File

@ -12,7 +12,8 @@ const mix = require('laravel-mix');
*/
mix.js('resources/js/app.js', 'public/js').postCss('resources/css/app.css', 'public/css', [
require('postcss-import'),
require('tailwindcss'),
require('autoprefixer'),
]);
mix.postCss('resources/css/light.css', 'public/css');
mix.postCss('resources/css/dark.css', 'public/css');