112 lines
4.3 KiB
JavaScript
112 lines
4.3 KiB
JavaScript
document.addEventListener('DOMContentLoaded', () => {
|
|
const scrollingMessageInput = document.getElementById('scrolling-message');
|
|
const isClosedCheckbox = document.getElementById('is-closed-checkbox');
|
|
const closedMessageField = document.getElementById('closed-message-field');
|
|
const closedMessageTextarea = document.getElementById('closed-message');
|
|
const passwordInput = document.getElementById('password');
|
|
const saveButton = document.getElementById('save-button');
|
|
const spinner = document.getElementById('spinner');
|
|
const feedbackMessage = document.getElementById('feedback-message');
|
|
|
|
let initialData = {};
|
|
|
|
// --- UI Logic ---
|
|
isClosedCheckbox.addEventListener('change', () => {
|
|
closedMessageField.style.display = isClosedCheckbox.checked ? 'block' : 'none';
|
|
});
|
|
|
|
function checkForChanges() {
|
|
const currentData = {
|
|
message: scrollingMessageInput.value,
|
|
isClosed: isClosedCheckbox.checked,
|
|
closedMessage: closedMessageTextarea.value
|
|
};
|
|
const hasChanged = JSON.stringify(initialData) !== JSON.stringify(currentData);
|
|
saveButton.disabled = !hasChanged;
|
|
}
|
|
|
|
[scrollingMessageInput, isClosedCheckbox, closedMessageTextarea].forEach(el => {
|
|
el.addEventListener('input', checkForChanges);
|
|
el.addEventListener('change', checkForChanges);
|
|
});
|
|
|
|
// --- Data Handling ---
|
|
function loadInitialData() {
|
|
fetch('update.json')
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
const update = data[0];
|
|
initialData = { ...update }; // Store initial state
|
|
scrollingMessageInput.value = update.message;
|
|
isClosedCheckbox.checked = update.isClosed;
|
|
closedMessageTextarea.value = update.closedMessage;
|
|
isClosedCheckbox.dispatchEvent(new Event('change'));
|
|
saveButton.disabled = true; // Start with button disabled
|
|
})
|
|
.catch(error => {
|
|
console.error('Error loading initial data:', error);
|
|
showFeedback('Error loading current status. Please check the console.', 'is-danger');
|
|
});
|
|
}
|
|
|
|
function showFeedback(message, type) {
|
|
feedbackMessage.textContent = message;
|
|
feedbackMessage.className = `notification ${type}`;
|
|
feedbackMessage.classList.remove('is-hidden');
|
|
setTimeout(() => {
|
|
feedbackMessage.classList.add('is-hidden');
|
|
}, 5000);
|
|
}
|
|
|
|
saveButton.addEventListener('click', () => {
|
|
const password = passwordInput.value;
|
|
if (!password) {
|
|
showFeedback('Please enter the password to save changes.', 'is-warning');
|
|
return;
|
|
}
|
|
|
|
// Show loading state
|
|
saveButton.disabled = true;
|
|
spinner.style.display = 'inline-block';
|
|
|
|
const newUpdateData = [
|
|
{
|
|
message: scrollingMessageInput.value,
|
|
isClosed: isClosedCheckbox.checked,
|
|
closedMessage: closedMessageTextarea.value
|
|
}
|
|
];
|
|
|
|
fetch('http://localhost:3050/api/update-status', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
},
|
|
body: JSON.stringify({ password: password, data: newUpdateData }),
|
|
})
|
|
.then(response => response.json())
|
|
.then(result => {
|
|
if (result.success) {
|
|
showFeedback('Success! The store status has been updated.', 'is-success');
|
|
initialData = { ...newUpdateData[0] }; // Update initial state to current
|
|
passwordInput.value = ''; // Clear password field
|
|
} else {
|
|
showFeedback(`Error: ${result.message}`, 'is-danger');
|
|
}
|
|
})
|
|
.catch(error => {
|
|
console.error('Error sending update:', error);
|
|
showFeedback('An error occurred. Check the console and make sure the server is running.', 'is-danger');
|
|
})
|
|
.finally(() => {
|
|
// Hide loading state
|
|
spinner.style.display = 'none';
|
|
// Re-enable button only if there are still changes (e.g. if save failed)
|
|
checkForChanges();
|
|
});
|
|
});
|
|
|
|
// Load the data when the page loads
|
|
loadInitialData();
|
|
});
|