- Add SECRET_KEY environment variable and .env file for session management - Configure SessionMiddleware with FastAPI for user session handling - Set up Jinja2 template engine with template directory configuration - Mount static files directory for CSS, JS, and image assets - Create comprehensive base.html template with Bootstrap 5 CDN - Add Bootstrap Icons and custom styling support - Include responsive navigation with user authentication state - Create placeholder CSS and JavaScript files for customization - Add aiofiles dependency for static file serving This establishes the web framework foundation with session management and templating system ready for frontend development.
83 lines
2.6 KiB
JavaScript
83 lines
2.6 KiB
JavaScript
// Custom JavaScript for Delphi Database
|
|
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
// Initialize tooltips if any
|
|
var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
|
|
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
|
|
return new bootstrap.Tooltip(tooltipTriggerEl);
|
|
});
|
|
|
|
// Auto-hide alerts after 5 seconds
|
|
var alerts = document.querySelectorAll('.alert:not(.alert-permanent)');
|
|
alerts.forEach(function(alert) {
|
|
setTimeout(function() {
|
|
var bsAlert = new bootstrap.Alert(alert);
|
|
bsAlert.close();
|
|
}, 5000);
|
|
});
|
|
|
|
// Confirm delete actions
|
|
var deleteButtons = document.querySelectorAll('[data-confirm-delete]');
|
|
deleteButtons.forEach(function(button) {
|
|
button.addEventListener('click', function(e) {
|
|
var message = this.getAttribute('data-confirm-delete') || 'Are you sure you want to delete this item?';
|
|
if (!confirm(message)) {
|
|
e.preventDefault();
|
|
}
|
|
});
|
|
});
|
|
|
|
// Form validation enhancement
|
|
var forms = document.querySelectorAll('.needs-validation');
|
|
Array.prototype.slice.call(forms).forEach(function(form) {
|
|
form.addEventListener('submit', function(event) {
|
|
if (!form.checkValidity()) {
|
|
event.preventDefault();
|
|
event.stopPropagation();
|
|
}
|
|
form.classList.add('was-validated');
|
|
}, false);
|
|
});
|
|
|
|
// Dynamic form field enabling/disabling
|
|
var toggleFields = document.querySelectorAll('[data-toggle-field]');
|
|
toggleFields.forEach(function(element) {
|
|
element.addEventListener('change', function() {
|
|
var targetSelector = this.getAttribute('data-toggle-field');
|
|
var targetField = document.querySelector(targetSelector);
|
|
if (targetField) {
|
|
targetField.disabled = !this.checked;
|
|
}
|
|
});
|
|
});
|
|
});
|
|
|
|
// Utility functions
|
|
function formatDate(dateString) {
|
|
if (!dateString) return '';
|
|
var date = new Date(dateString);
|
|
return date.toLocaleDateString();
|
|
}
|
|
|
|
function formatCurrency(amount) {
|
|
if (!amount) return '$0.00';
|
|
return new Intl.NumberFormat('en-US', {
|
|
style: 'currency',
|
|
currency: 'USD'
|
|
}).format(amount);
|
|
}
|
|
|
|
function showLoading(button) {
|
|
if (button) {
|
|
button.disabled = true;
|
|
button.innerHTML = '<span class="spinner-border spinner-border-sm me-2"></span>Loading...';
|
|
}
|
|
}
|
|
|
|
function hideLoading(button, originalText) {
|
|
if (button) {
|
|
button.disabled = false;
|
|
button.innerHTML = originalText;
|
|
}
|
|
}
|