106 lines
4.0 KiB
JavaScript
106 lines
4.0 KiB
JavaScript
document.addEventListener('DOMContentLoaded', () => {
|
|
const toastElements = document.querySelectorAll('.toast');
|
|
toastElements.forEach((toastElement) => {
|
|
if (window.bootstrap && bootstrap.Toast) {
|
|
const toast = new bootstrap.Toast(toastElement);
|
|
toast.show();
|
|
}
|
|
});
|
|
|
|
const navToggleButton = document.querySelector('.navbar-toggler');
|
|
const navCollapse = document.getElementById('mainNav');
|
|
|
|
const syncNavToggleState = () => {
|
|
if (!navToggleButton || !navCollapse) return;
|
|
const expanded = navCollapse.classList.contains('show');
|
|
navToggleButton.setAttribute('aria-expanded', expanded ? 'true' : 'false');
|
|
navToggleButton.classList.toggle('is-open', expanded);
|
|
};
|
|
|
|
if (navToggleButton && navCollapse) {
|
|
navToggleButton.addEventListener('click', (event) => {
|
|
if (window.matchMedia('(min-width: 992px)').matches) return;
|
|
|
|
event.preventDefault();
|
|
|
|
if (window.bootstrap && bootstrap.Collapse) {
|
|
const collapse = bootstrap.Collapse.getOrCreateInstance(navCollapse, { toggle: false });
|
|
if (navCollapse.classList.contains('show')) {
|
|
collapse.hide();
|
|
} else {
|
|
collapse.show();
|
|
}
|
|
return;
|
|
}
|
|
|
|
navCollapse.classList.toggle('show');
|
|
syncNavToggleState();
|
|
});
|
|
|
|
navCollapse.addEventListener('shown.bs.collapse', syncNavToggleState);
|
|
navCollapse.addEventListener('hidden.bs.collapse', syncNavToggleState);
|
|
|
|
navCollapse.querySelectorAll('a, button').forEach((element) => {
|
|
element.addEventListener('click', () => {
|
|
if (!navCollapse.classList.contains('show') || window.matchMedia('(min-width: 992px)').matches) return;
|
|
|
|
if (window.bootstrap && bootstrap.Collapse) {
|
|
const collapse = bootstrap.Collapse.getOrCreateInstance(navCollapse, { toggle: false });
|
|
collapse.hide();
|
|
} else {
|
|
navCollapse.classList.remove('show');
|
|
syncNavToggleState();
|
|
}
|
|
});
|
|
});
|
|
|
|
syncNavToggleState();
|
|
}
|
|
|
|
const serviceSelect = document.querySelector('[data-service-select]');
|
|
const intervalInput = document.querySelector('[data-interval-input]');
|
|
const applyDefaultButton = document.querySelector('[data-apply-default]');
|
|
|
|
const applyDefaultInterval = () => {
|
|
if (!serviceSelect || !intervalInput) return;
|
|
const selectedOption = serviceSelect.options[serviceSelect.selectedIndex];
|
|
const defaultDays = selectedOption ? selectedOption.getAttribute('data-default-days') : '';
|
|
if (defaultDays) {
|
|
intervalInput.value = defaultDays;
|
|
}
|
|
};
|
|
|
|
if (applyDefaultButton) {
|
|
applyDefaultButton.addEventListener('click', applyDefaultInterval);
|
|
}
|
|
|
|
const filterButtons = document.querySelectorAll('.filter-button');
|
|
const listCards = document.querySelectorAll('[data-reminder-list] .list-card');
|
|
|
|
filterButtons.forEach((button) => {
|
|
button.addEventListener('click', () => {
|
|
filterButtons.forEach((item) => {
|
|
item.classList.remove('is-active');
|
|
if (item.classList.contains('btn-dark')) return;
|
|
});
|
|
|
|
filterButtons.forEach((item) => {
|
|
if (item !== button) {
|
|
item.classList.remove('btn-dark');
|
|
item.classList.add('btn-outline-secondary');
|
|
}
|
|
});
|
|
|
|
button.classList.add('is-active', 'btn-dark');
|
|
button.classList.remove('btn-outline-secondary');
|
|
|
|
const filter = button.getAttribute('data-filter');
|
|
listCards.forEach((card) => {
|
|
const status = card.getAttribute('data-status');
|
|
const show = filter === 'all' || status === filter;
|
|
card.classList.toggle('is-hidden', !show);
|
|
});
|
|
});
|
|
});
|
|
});
|