mag/WMS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

working ticket now with global vite builer

Browse Source
This commit is contained in:
Mark Gregory
2026-06-16 13:43:24 +01:00
parent 129bc9bda0
commit 9457a2f264
5 changed files with 174 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/js/app.js
+127 -35
View File
@@ -1,15 +1,13 @@
require("flatpickr");
require('flatpickr');
import '@fortawesome/fontawesome-free/css/all.min.css';
import Chart from 'chart.js/auto';
import $ from 'jquery';
window.$ = $;
window.jQuery = $;
import 'select2';
import 'select2/dist/css/select2.min.css';
const chartColours = [
@@ -19,14 +17,29 @@ const chartColours = [
'rgb(14, 116, 144)',
];
/**
* Parse JSON attribute safely.
*
* @param {HTMLElement} element
* @param {string} attribute
* @param {Array} fallback
* @returns {*}
*/
function parseJsonAttribute(element, attribute, fallback = []) {
try {
return JSON.parse(element.getAttribute(attribute) || JSON.stringify(fallback));
return JSON.parse(
element.getAttribute(attribute) || JSON.stringify(fallback)
);
} catch (error) {
return fallback;
}
}
/**
* Render dashboard charts.
*
* @returns {void}
*/
function renderWmsCharts() {
document.querySelectorAll('[data-wms-chart]').forEach((canvas) => {
if (canvas.dataset.rendered === 'true') {
@@ -42,18 +55,22 @@ function renderWmsCharts() {
? series.map((item, index) => ({
label: item.label,
data: item.data,
backgroundColor: chartColours[index % chartColours.length],
borderColor: chartColours[index % chartColours.length],
backgroundColor:
chartColours[index % chartColours.length],
borderColor:
chartColours[index % chartColours.length],
borderWidth: 2,
borderRadius: 8,
}))
: [{
label: 'Total',
data: values,
backgroundColor: chartColours,
borderColor: 'rgb(255, 255, 255)',
borderWidth: 2,
}];
: [
{
label: 'Total',
data: values,
backgroundColor: chartColours,
borderColor: 'rgb(255,255,255)',
borderWidth: 2,
},
];
new Chart(canvas, {
type,
@@ -67,34 +84,51 @@ function renderWmsCharts() {
plugins: {
legend: {
labels: {
color: document.documentElement.classList.contains('dark') ? '#e4e4e7' : '#3f3f46',
color: document.documentElement.classList.contains(
'dark'
)
? '#e4e4e7'
: '#3f3f46',
boxWidth: 12,
boxHeight: 12,
},
},
},
scales: type === 'doughnut'
? {}
: {
x: {
ticks: {
color: document.documentElement.classList.contains('dark') ? '#d4d4d8' : '#52525b',
scales:
type === 'doughnut'
? {}
: {
x: {
ticks: {
color:
document.documentElement.classList.contains(
'dark'
)
? '#d4d4d8'
: '#52525b',
},
grid: {
color:
'rgba(113,113,122,0.18)',
},
},
grid: {
color: 'rgba(113, 113, 122, 0.18)',
y: {
beginAtZero: true,
ticks: {
precision: 0,
color:
document.documentElement.classList.contains(
'dark'
)
? '#d4d4d8'
: '#52525b',
},
grid: {
color:
'rgba(113,113,122,0.18)',
},
},
},
y: {
beginAtZero: true,
ticks: {
precision: 0,
color: document.documentElement.classList.contains('dark') ? '#d4d4d8' : '#52525b',
},
grid: {
color: 'rgba(113, 113, 122, 0.18)',
},
},
},
},
});
@@ -102,5 +136,63 @@ function renderWmsCharts() {
});
}
document.addEventListener('DOMContentLoaded', renderWmsCharts);
document.addEventListener('livewire:navigated', renderWmsCharts);
/**
* Initialise Select2 controls.
*
* @returns {void}
*/
function initialiseSelect2() {
if (!window.jQuery?.fn?.select2) {
return;
}
$('[data-helpdesk-select2]').each(function () {
const $select = $(this);
if ($select.hasClass('select2-hidden-accessible')) {
$select.select2('destroy');
}
const isMultiple = $select.prop('multiple');
$select.select2({
width: '100%',
allowClear: !isMultiple,
closeOnSelect: !isMultiple,
dropdownAutoWidth: true,
placeholder:
$select.find('option[value=""]').first().text() ||
(isMultiple ? 'Select options' : 'Select option'),
});
$select.off('change.select2-livewire');
$select.on('change.select2-livewire', function () {
this.dispatchEvent(
new Event('change', {
bubbles: true,
})
);
});
});
}
/**
* Boot page UI.
*
* @returns {void}
*/
function bootUi() {
renderWmsCharts();
initialiseSelect2();
}
document.addEventListener('DOMContentLoaded', bootUi);
document.addEventListener('livewire:navigated', bootUi);
document.addEventListener('livewire:init', () => {
Livewire.hook('morphed', () => {
initialiseSelect2();
});
});