remove mix; add vite

Signed-off-by: envoyr <hello@envoyr.com>

templates/Froxlor/assets/js/app.js

@@ -0,0 +1,33 @@
+import '@fortawesome/fontawesome-free';
+
+import jQuery from 'jquery';
+window.$ = jQuery;
+
+import 'jquery-validation';
+import 'bootstrap';
+import 'chart.js/auto';
+
+// Axios
+import axios from 'axios';
+window.axios = axios;
+window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
+
+// Vue
+import { createApp } from 'vue';
+const app = createApp({});
+
+// import ExampleComponent from './components/ExampleComponent.vue';
+// app.component('example-component', ExampleComponent);
+//
+// or
+//
+// Object.entries(import.meta.glob('./**/*.vue', { eager: true })).forEach(([path, definition]) => {
+//     app.component(path.split('/').pop().replace(/\.\w+$/, ''), definition.default);
+// });
+
+app.mount('#app');
+
+// Load jquery components
+Object.entries(import.meta.glob('./jquery/*.js', { eager: true })).forEach(([path, definition]) => {
+	definition.default();
+});

templates/Froxlor/assets/js/jquery/apikeys.js

@@ -1,4 +1,4 @@
-$(function () {
+export default function() {
 
 	var timer, delay = 500;
 	$('div[data-action="apikeys"] #allowed_from').on('keyup change', function () {
@@ -57,4 +57,4 @@ $(function () {
 		}, delay);
 	});
 
-});
+}

templates/Froxlor/assets/js/jquery/configfiles.js

@@ -1,4 +1,4 @@
-$(function () {
+export default function() {
 	/*
 	 * config files - select all recommended
 	 */
@@ -49,4 +49,4 @@ $(function () {
 		});
 
 	});
-});
+}

templates/Froxlor/assets/js/jquery/customer.js

@@ -1,4 +1,4 @@
-$(function() {
+export default function() {
 
 	// Make inputs with enabled unlimited checked disabled
 	$("input[name$='_ul']").each(function () {
@@ -73,4 +73,4 @@ $(function() {
 			});
 		}
 	});
-});
+}

templates/Froxlor/assets/js/jquery/dnseditor.js

@@ -1,4 +1,4 @@
-$(function () {
+export default function() {
 
 	// Display helptext to content box according to dns-record type selected
 	$("select[name='dns_type']").on('change', function () {
@@ -16,4 +16,4 @@ $(function () {
 			}
 		});
 	});
-});
+}

templates/Froxlor/assets/js/jquery/domains.js

@@ -1,5 +1,7 @@
-$(function () {
-
+export default function() {
+	/*
+	 * domains
+	 */
 	// disable unusable php-configuration by customer settings
 	$('#customerid').on('change', function () {
 		var cid = $(this).val();
@@ -104,4 +106,4 @@ $(function () {
 			$('#section_bssl>.formfields>.row').not(":first").addClass("d-none");
 		}
 	})
-});
+}

templates/Froxlor/assets/js/jquery/global.js

@@ -1,5 +1,7 @@
-$(function () {
-
+export default function() {
+	/*
+	 * global
+	 */
 	$('#historyback').on('click', function (e) {
 		e.preventDefault();
 		history.back(1);
@@ -9,4 +11,4 @@ $(function () {
 		e.preventDefault();
 		navigator.clipboard.writeText($('#ccSysInfo').text().trim());
 	})
-});
+}

templates/Froxlor/assets/js/jquery/install.js

@@ -1,4 +1,4 @@
-$(function () {
+export default function() {
 	/*
 	 * switch between basic and advanced install mode
 	 */
@@ -59,4 +59,4 @@ $(function () {
 		cTimer = setInterval(checkConfigState, 1000);
 	}
 
-});
+}

templates/Froxlor/assets/js/jquery/ipsandports.js

@@ -1,6 +1,7 @@
-$(function() {
-
-	// check for internal ip and output a notice if private-range ip is given
+export default function() {
+	/*
+	 * ipsandports - check for internal ip and output a notice if private-range ip is given
+	 */
 	$('#ip').on('change', function () {
 		var ipval = $(this).val();
 		if (ipval.length > 0) {
@@ -26,4 +27,4 @@ $(function() {
 		}
 	});
 
-});
+}

templates/Froxlor/assets/js/jquery/newsfeed.js

@@ -1,4 +1,4 @@
-$(function() {
+export default function() {
 	/*
 	 * newsfeed
 	 */
@@ -21,4 +21,4 @@ $(function() {
 			}
 		});
 	}
-});
+}

templates/Froxlor/assets/js/jquery/search.js

@@ -1,4 +1,7 @@
-$(function() {
+export default function() {
+	/*
+	 * search
+	 */
 	let search = $('#search')
 
 	search.on('submit', function (e) {
@@ -53,4 +56,4 @@ $(function() {
 			}
 		});
 	});
-});
+}

templates/Froxlor/assets/js/jquery/tablecolumns.js

@@ -1,4 +1,4 @@
-$(function () {
+export default function() {
 	/*
 	 * table columns - manage columns modal
 	 */
@@ -41,4 +41,4 @@ $(function () {
 	$('.manageColumnsModal form button[data-action="unselect-all"]').on('click', function () {
 		$(this).parents('form:first').find('input:checkbox').prop('checked', false);
 	});
-});
+}

templates/Froxlor/assets/js/jquery/traffic.js

@@ -1,9 +1,10 @@
-$(function () {
-
-	// Display helptext to content box according to dns-record type selected
+export default function() {
+	/*
+	 * traffic - display helptext to content box according to dns-record type selected
+	 */
 	$("select[name='range']").on('change', function () {
 		var selVal = $(this).val();
 		var baseRef = $(this).data('baseref');
 		window.location.href = baseRef + '?range=' + selVal;
 	});
-});
+}

templates/Froxlor/assets/js/jquery/updatecheck.js

@@ -1,4 +1,4 @@
-$(function() {
+export default function() {
 	/*
 	 * updatecheck
 	 */
@@ -18,4 +18,4 @@ $(function() {
 			}
 		});
 	}
-});
+}

templates/Froxlor/assets/js/jquery/validation.js

@@ -1,4 +1,7 @@
-$(document).ready(function () {
+export default function() {
+	/*
+	 * validation
+	 */
 	$('#customer_add,#customer_edit').each(function () {
 		$(this).validate({
 			rules: {
@@ -34,4 +37,4 @@ $(document).ready(function () {
 			}
 		});
 	});
-});
+}

templates/Froxlor/assets/scss/_variables-dark.scss

@@ -0,0 +1,65 @@
+// Color
+//$primary: $froxlor-700;
+//$secondary: $gray-500;
+//$info: $froxlor-800;
+
+// Body
+//$body-bg: $gray-900;
+//$body-color: $gray-100;
+
+// Borders
+//$border-color: $gray-900;
+//$border-color-translucent: $gray-900;
+
+// Link
+//$link-color: $froxlor-500;
+//$nav-link-color: $body-color;
+
+// List groups
+//$list-group-bg: $gray-800;
+//$list-group-color: $body-color;
+//$list-group-hover-bg: $gray-700;
+//$list-group-action-color: $body-color;
+
+// Navbar
+//$navbar-bg: $gray-800;
+//$navbar-bg-mobile: $navbar-bg;
+//$navbar-light-color: $gray-200;
+//$navbar-light-hover-color: $gray-500;
+//$navbar-light-active-color: $gray-500;
+
+// Sidebar
+//$sidebar-width: 256px;
+
+// Card
+//$card-bg: $gray-800;
+//$card-border-color: $gray-600;
+
+// Heading
+//$heading-bg: $gray-800;
+//$heading-color: $body-color;
+//$heading-border-color: rgba(0,0,0,0.15);
+
+// Dropdown
+//$dropdown-bg: $gray-800;
+//$dropdown-color: $gray-100;
+//$dropdown-link-color: $gray-100;
+//$dropdown-link-hover-bg: $gray-900;
+
+// Modal
+//$modal-content-bg: $gray-800;
+
+// Form control
+//$input-bg: $gray-900;
+//$input-border-color: $black;
+//$input-group-addon-bg: $gray-800;
+
+// Progress bar
+//$progress-bg: $gray-900;
+
+// Search
+//$search-bg: $gray-800;
+
+// Popover
+//$popover-bg: $gray-800;
+//$popover-body-color: $gray-100;

templates/Froxlor/assets/scss/_variables.scss

@@ -73,6 +73,7 @@ $navbar-bg-mobile: $gray-900;
 $sidebar-width: 256px;
 
 // Card
+$card-bg: $white;
 $card-cap-bg: none;
 $card-cap-padding-y: $spacer;
 $card-border-width: 0;

templates/Froxlor/assets/scss/app.scss

@@ -1,8 +1,9 @@
 @charset "UTF-8";
 
 // Bootstrap
-@import "variables/main";
-@import "~bootstrap/scss/bootstrap";
+@import "variables";
+@import "variables-dark";
+@import "bootstrap/scss/bootstrap";
 
 // Theme
 @import "components/generic";

templates/Froxlor/assets/scss/components/_card.scss

@@ -22,3 +22,9 @@
 		}
 	}
 }
+
+@include color-mode(dark) {
+	.card, .list-group-item {
+		background: $dark-bg;
+	}
+}

templates/Froxlor/assets/scss/components/_generic.scss

@@ -1,6 +1,6 @@
 // Fontawesome
-@import "~@fortawesome/fontawesome-free/scss/fontawesome";
-@import "~@fortawesome/fontawesome-free/css/all";
+@import "@fortawesome/fontawesome-free/scss/fontawesome";
+@import "@fortawesome/fontawesome-free/css/all";
 
 // Generic
 .header-logo {

templates/Froxlor/assets/scss/components/_heading.scss

@@ -8,6 +8,8 @@
 	color: $heading-color;
 }
 
-.heading span {
-
+@include color-mode(dark) {
+	.heading {
+		background: $dark-bg;
+	}
 }

templates/Froxlor/base.html.twig

@@ -9,24 +9,15 @@
 	<link rel="icon" type="image/x-icon" href="{{ basehref|default('') }}templates/Froxlor/assets/img/icon.png">
 	{% if csrf_token %}<meta name="csrf-token" content="{{ csrf_token }}" />{% endif %}
 
-	<!-- CSS -->
-	{% if theme_css is empty %}
-		<link href="{{ basehref|default('') }}{{ mix('templates/Froxlor/assets/css/main.css') }}" rel="stylesheet" type="text/css" />
-	{% else %}
-		{{ theme_css|raw }}
-	{% endif %}
-	{% block custom_css %}{% endblock %}
+	<!-- Assets  -->
+	{{ vite(basehref, theme_assets, [
+		'templates/Froxlor/assets/scss/app.scss',
+		'templates/Froxlor/assets/js/app.js',
+	])|raw }}
 
-	<!-- Scripts -->
-	{% if theme_js is empty %}
-		<script type="text/javascript" src="{{ basehref|default('') }}{{ mix('templates/Froxlor/assets/js/main.js') }}"></script>
-	{% else %}
-		{{ theme_js|raw }}
-	{% endif %}
-	{% block custom_js %}{% endblock %}
 	<title>Froxlor{% if page_title %} | {{ page_title }}{% endif %}</title>
 </head>
-<body class="min-vh-100 d-flex flex-column">
+<body id="app" class="min-vh-100 d-flex flex-column">
 	{% block navigation %}{% endblock %}
 
 	{% block body %}

templates/Froxlor/config.json

@@ -1,11 +1,12 @@
 {
 	"global": {
 		"css": [
-			"custom.css"
+			"assets/css/custom.css",
+			"assets/scss/app.scss"
 		],
 		"js": [
-			"main.js",
-			"apikey.js"
+			"assets/js/app.js",
+			"assets/js/apikey.js"
 		],
 		"img": {
 			"ui": "logo_white.png",

templates/Froxlor/misc/phprequirementfailed.html.twig

@@ -11,7 +11,7 @@
     <link href="{{ basehref }}templates/Froxlor/assets/css/main.css" rel="stylesheet">
 
     <!-- Scripts -->
-    <script src="{{ basehref }}templates/Froxlor/assets/js/main.js"></script>
+    <script src="{{ basehref }}templates/Froxlor/assets/js/app.js"></script>
 
     <title>Froxlor - Error</title>
 </head>

templates/Froxlor/misc/vendormissinghint.html.twig

@@ -11,7 +11,7 @@
     <link href="{{ basehref }}templates/Froxlor/assets/css/main.css" rel="stylesheet">
 
     <!-- Scripts -->
-    <script src="{{ basehref }}templates/Froxlor/assets/js/main.js"></script>
+    <script src="{{ basehref }}templates/Froxlor/assets/js/app.js"></script>
 
     <title>Froxlor - Error</title>
 </head>

templates/Froxlor/src/js/main.js

@@ -1,44 +0,0 @@
-// import libs
-import 'bootstrap';
-import '@fortawesome/fontawesome-free';
-import Chart from 'chart.js/auto';
-
-// set jquery & bootstrap & chart
-global.$ = require('jquery');
-global.validation = require('jquery-validation');
-global.bootstrap = require('bootstrap');
-window.Chart = Chart;
-
-$(function () {
-	window.$theme = 'Froxlor';
-
-	$.ajaxSetup({
-		headers: {
-			'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
-		}
-	});
-
-	const tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
-	const tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
-		return new bootstrap.Tooltip(tooltipTriggerEl)
-	})
-
-	const popoverTriggerList = document.querySelectorAll('[data-bs-toggle="popover"]')
-	const popoverList = [...popoverTriggerList].map(popoverTriggerEl => new bootstrap.Popover(popoverTriggerEl))
-});
-
-// Load components
-require('./components/apikeys')
-require('./components/configfiles')
-require('./components/customer')
-require('./components/dnseditor')
-require('./components/domains')
-require('./components/global')
-require('./components/install')
-require('./components/ipsandports')
-require('./components/newsfeed')
-require('./components/search')
-require('./components/tablecolumns')
-require('./components/traffic')
-require('./components/updatecheck')
-require('./components/validation')

templates/Froxlor/src/scss/dark.scss

@@ -1,35 +0,0 @@
-@charset "UTF-8";
-
-// Bootstrap
-@import "variables/dark";
-@import "~bootstrap/scss/bootstrap";
-
-// Theme
-@import "components/generic";
-@import "components/alert";
-@import "components/card";
-@import "components/dropdown";
-@import "components/footer";
-@import "components/form";
-@import "components/heading";
-@import "components/navbar";
-@import "components/sidebar";
-@import "components/search";
-
-.navbar-light {
-	.navbar-toggler {
-		border-color: transparent;
-	}
-	.navbar-toggler-icon {
-		background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
-	}
-}
-
-tr.bg-info td,
-tr.bg-warning td {
-	color: $dark-bg !important;
-}
-
-.badge.bg-secondary {
-	color: $gray-700;
-}

templates/Froxlor/src/scss/variables/_dark.scss

@@ -1,66 +0,0 @@
-@import "main";
-
-// Color
-$primary: $froxlor-700;
-$secondary: $gray-500;
-$info: $froxlor-800;
-
-// Body
-$body-bg: $gray-900;
-$body-color: $gray-100;
-
-// Borders
-$border-color: $gray-900;
-$border-color-translucent: $gray-900;
-
-// Link
-$link-color: $froxlor-500;
-$nav-link-color: $body-color;
-
-// List groups
-$list-group-bg: $gray-800;
-$list-group-color: $body-color;
-$list-group-hover-bg: $gray-700;
-$list-group-action-color: $body-color;
-
-// Navbar
-$navbar-bg: $gray-800;
-$navbar-bg-mobile: $navbar-bg;
-$navbar-light-color: $gray-200;
-$navbar-light-hover-color: $gray-500;
-$navbar-light-active-color: $gray-500;
-
-// Sidebar
-
-// Card
-$card-bg: $gray-800;
-$card-border-color: $gray-600;
-
-// Heading
-$heading-bg: $gray-800;
-$heading-color: $body-color;
-$heading-border-color: rgba(0,0,0,0.15);
-
-// Dropdown
-$dropdown-bg: $gray-800;
-$dropdown-color: $gray-100;
-$dropdown-link-color: $gray-100;
-$dropdown-link-hover-bg: $gray-900;
-
-// Modal
-$modal-content-bg: $gray-800;
-
-// Form control
-$input-bg: $gray-900;
-$input-border-color: $black;
-$input-group-addon-bg: $gray-800;
-
-// Progress bar
-$progress-bg: $gray-900;
-
-// Search
-$search-bg: $gray-800;
-
-// Popover
-$popover-bg: $gray-800;
-$popover-body-color: $gray-100;