sboulahtit/orion
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

frontend migration to jinja, alpine.js

Browse Source
This commit is contained in:
Samir Boulahtit
2025-10-26 20:04:10 +01:00
parent 2c3223f9f9
commit 091067a729
47 changed files with 673 additions and 8691 deletions
Download Patch File Download Diff File Expand all files Collapse all files

165
static/admin/js/components.js
View File

@@ -32,8 +32,9 @@ function adminComponents() {
{ id: 'cards', name: 'Cards', icon: 'collection' },
{ id: 'badges', name: 'Badges', icon: 'tag' },
{ id: 'tables', name: 'Tables', icon: 'table' },
{ id: 'modals', name: 'Modals', icon: 'window' },
{ id: 'alerts', name: 'Alerts', icon: 'exclamation' }
{ id: 'modals', name: 'Modals', icon: 'view-grid-add' },
{ id: 'alerts', name: 'Alerts', icon: 'exclamation' },
{ id: 'charts', name: 'Charts', icon: 'chart-pie' }
],
// Sample form data for examples
@@ -53,6 +54,10 @@ function adminComponents() {
required: 'This field is required'
},
// Modal state variables for examples
showExampleModal: false,
showFormModal: false,
// ✅ CRITICAL: Proper initialization with guard
async init() {
componentsLog.info('=== COMPONENTS PAGE INITIALIZING ===');
@@ -72,6 +77,11 @@ function adminComponents() {
this.setActiveSectionFromHash();
});
// Initialize charts after DOM is ready
this.$nextTick(() => {
this.initializeCharts();
});
componentsLog.info('=== COMPONENTS PAGE INITIALIZATION COMPLETE ===');
},
@@ -114,11 +124,18 @@ function adminComponents() {
async copyCode(code) {
try {
await navigator.clipboard.writeText(code);
Utils.showToast('Code copied to clipboard!', 'success');
// Use the global Utils.showToast function
if (typeof Utils !== 'undefined' && Utils.showToast) {
Utils.showToast('Code copied to clipboard!', 'success');
} else {
componentsLog.warn('Utils.showToast not available');
}
componentsLog.debug('Code copied to clipboard');
} catch (error) {
componentsLog.error('Failed to copy code:', error);
Utils.showToast('Failed to copy code', 'error');
if (typeof Utils !== 'undefined' && Utils.showToast) {
Utils.showToast('Failed to copy code', 'error');
}
}
},
@@ -132,7 +149,145 @@ function adminComponents() {
warning: 'Please review your input.',
info: 'Here is some information.'
};
Utils.showToast(messages[type] || messages.info, type);
if (typeof Utils !== 'undefined' && Utils.showToast) {
Utils.showToast(messages[type] || messages.info, type);
} else {
componentsLog.error('Utils.showToast not available');
alert(messages[type] || messages.info); // Fallback to alert
}
},
/**
* Initialize Chart.js charts
*/
initializeCharts() {
try {
// Check if Chart.js is loaded
if (typeof Chart === 'undefined') {
componentsLog.warn('Chart.js not loaded, skipping chart initialization');
return;
}
componentsLog.info('Initializing charts...');
// Pie Chart
const pieCanvas = document.getElementById('examplePieChart');
if (pieCanvas) {
const pieConfig = {
type: 'doughnut',
data: {
datasets: [{
data: [33, 33, 33],
backgroundColor: ['#0694a2', '#7e3af2', '#1c64f2'],
label: 'Dataset 1',
}],
labels: ['Shoes', 'Shirts', 'Bags'],
},
options: {
responsive: true,
cutoutPercentage: 80,
legend: {
display: false,
},
},
};
new Chart(pieCanvas, pieConfig);
componentsLog.debug('Pie chart initialized');
}
// Line Chart
const lineCanvas = document.getElementById('exampleLineChart');
if (lineCanvas) {
const lineConfig = {
type: 'line',
data: {
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
datasets: [{
label: 'Organic',
backgroundColor: '#0694a2',
borderColor: '#0694a2',
data: [43, 48, 40, 54, 67, 73, 70],
fill: false,
}, {
label: 'Paid',
fill: false,
backgroundColor: '#7e3af2',
borderColor: '#7e3af2',
data: [24, 50, 64, 74, 52, 51, 65],
}],
},
options: {
responsive: true,
legend: {
display: false,
},
tooltips: {
mode: 'index',
intersect: false,
},
hover: {
mode: 'nearest',
intersect: true,
},
scales: {
x: {
display: true,
scaleLabel: {
display: true,
labelString: 'Month',
},
},
y: {
display: true,
scaleLabel: {
display: true,
labelString: 'Value',
},
},
},
},
};
new Chart(lineCanvas, lineConfig);
componentsLog.debug('Line chart initialized');
}
// Bar Chart
const barCanvas = document.getElementById('exampleBarChart');
if (barCanvas) {
const barConfig = {
type: 'bar',
data: {
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
datasets: [{
label: 'Shoes',
backgroundColor: '#0694a2',
borderColor: '#0694a2',
borderWidth: 1,
data: [43, 48, 40, 54, 67, 73, 70],
}, {
label: 'Bags',
backgroundColor: '#7e3af2',
borderColor: '#7e3af2',
borderWidth: 1,
data: [24, 50, 64, 74, 52, 51, 65],
}],
},
options: {
responsive: true,
legend: {
display: false,
},
},
};
new Chart(barCanvas, barConfig);
componentsLog.debug('Bar chart initialized');
}
componentsLog.info('All charts initialized successfully');
} catch (error) {
componentsLog.error('Error initializing charts:', error);
}
}
};
}