232 lines
10 KiB
HTML
232 lines
10 KiB
HTML
<!-- Weekly Calendar Schedule Editor -->
|
|
<!-- Used in modals/forms for creating/editing weekly_calendar type schedules -->
|
|
|
|
<div id="schedule-calendar-editor" class="space-y-4">
|
|
<div class="mb-4">
|
|
<h4 class="text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Weekly Schedule</h4>
|
|
<p class="text-xs text-gray-500 dark:text-gray-400">
|
|
Select which days to monitor and set start/end times for each day.
|
|
For overnight monitoring (e.g., 7pm to 7am), the end time will be on the following day.
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Day rows -->
|
|
<div class="space-y-3">
|
|
{% set days = [
|
|
('monday', 'Monday'),
|
|
('tuesday', 'Tuesday'),
|
|
('wednesday', 'Wednesday'),
|
|
('thursday', 'Thursday'),
|
|
('friday', 'Friday'),
|
|
('saturday', 'Saturday'),
|
|
('sunday', 'Sunday')
|
|
] %}
|
|
|
|
{% for day_key, day_name in days %}
|
|
<div class="flex items-center gap-4 p-3 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
|
|
<!-- Day toggle -->
|
|
<label class="flex items-center gap-2 w-28 cursor-pointer">
|
|
<input type="checkbox"
|
|
id="day-{{ day_key }}"
|
|
name="weekly_pattern[{{ day_key }}][enabled]"
|
|
class="rounded text-seismo-orange focus:ring-seismo-orange"
|
|
onchange="toggleDayTimes('{{ day_key }}', this.checked)"
|
|
{% if pattern and pattern.get(day_key, {}).get('enabled') %}checked{% endif %}>
|
|
<span class="text-sm font-medium text-gray-700 dark:text-gray-300">{{ day_name }}</span>
|
|
</label>
|
|
|
|
<!-- Time inputs -->
|
|
<div class="flex items-center gap-2 day-times flex-1" id="times-{{ day_key }}"
|
|
{% if not pattern or not pattern.get(day_key, {}).get('enabled') %}style="opacity: 0.4; pointer-events: none;"{% endif %}>
|
|
<label class="text-xs text-gray-500 dark:text-gray-400">Start:</label>
|
|
<input type="time"
|
|
name="weekly_pattern[{{ day_key }}][start]"
|
|
value="{{ pattern.get(day_key, {}).get('start', '19:00') if pattern else '19:00' }}"
|
|
class="px-2 py-1 text-sm border border-gray-300 dark:border-gray-600 rounded bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-seismo-orange focus:border-seismo-orange">
|
|
|
|
<span class="text-gray-400 mx-1">to</span>
|
|
|
|
<label class="text-xs text-gray-500 dark:text-gray-400">End:</label>
|
|
<input type="time"
|
|
name="weekly_pattern[{{ day_key }}][end]"
|
|
value="{{ pattern.get(day_key, {}).get('end', '07:00') if pattern else '07:00' }}"
|
|
class="px-2 py-1 text-sm border border-gray-300 dark:border-gray-600 rounded bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-seismo-orange focus:border-seismo-orange">
|
|
|
|
<span class="text-xs text-gray-400 dark:text-gray-500 ml-2" id="overnight-hint-{{ day_key }}"
|
|
style="display: none;">
|
|
(next day)
|
|
</span>
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
|
|
<!-- Quick select buttons -->
|
|
<div class="flex flex-wrap gap-2 pt-2 border-t border-gray-200 dark:border-gray-700">
|
|
<span class="text-xs text-gray-500 dark:text-gray-400 mr-2">Quick select:</span>
|
|
<button type="button" onclick="selectWeekdays()"
|
|
class="px-2 py-1 text-xs bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 rounded hover:bg-gray-200 dark:hover:bg-gray-600">
|
|
Weekdays
|
|
</button>
|
|
<button type="button" onclick="selectWeekends()"
|
|
class="px-2 py-1 text-xs bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 rounded hover:bg-gray-200 dark:hover:bg-gray-600">
|
|
Weekends
|
|
</button>
|
|
<button type="button" onclick="selectAllDays()"
|
|
class="px-2 py-1 text-xs bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 rounded hover:bg-gray-200 dark:hover:bg-gray-600">
|
|
All Days
|
|
</button>
|
|
<button type="button" onclick="clearAllDays()"
|
|
class="px-2 py-1 text-xs bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 rounded hover:bg-gray-200 dark:hover:bg-gray-600">
|
|
Clear All
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Automation Options -->
|
|
<div class="pt-4 border-t border-gray-200 dark:border-gray-700">
|
|
<h5 class="text-sm font-medium text-gray-700 dark:text-gray-300 mb-3">Automation Options</h5>
|
|
|
|
<div class="space-y-3">
|
|
<!-- Download data option -->
|
|
<div class="bg-gray-50 dark:bg-gray-700/50 rounded-lg p-4">
|
|
<label class="flex items-start gap-3 cursor-pointer">
|
|
<input type="checkbox"
|
|
name="include_download"
|
|
id="include_download_calendar"
|
|
class="rounded text-seismo-orange focus:ring-seismo-orange mt-0.5"
|
|
{% if include_download is not defined or include_download %}checked{% endif %}>
|
|
<div>
|
|
<span class="text-sm font-medium text-gray-700 dark:text-gray-300">
|
|
Download data after each monitoring period
|
|
</span>
|
|
<p class="text-xs text-gray-500 dark:text-gray-400 mt-1">
|
|
When enabled, measurement data will be downloaded via FTP after each stop.
|
|
Disable if you prefer to download manually or if FTP is not configured.
|
|
</p>
|
|
</div>
|
|
</label>
|
|
</div>
|
|
|
|
<!-- Auto-increment index option -->
|
|
<div class="bg-gray-50 dark:bg-gray-700/50 rounded-lg p-4">
|
|
<label class="flex items-start gap-3 cursor-pointer">
|
|
<input type="checkbox"
|
|
name="auto_increment_index"
|
|
id="auto_increment_index_calendar"
|
|
class="rounded text-seismo-orange focus:ring-seismo-orange mt-0.5"
|
|
{% if auto_increment_index is not defined or auto_increment_index %}checked{% endif %}>
|
|
<div>
|
|
<span class="text-sm font-medium text-gray-700 dark:text-gray-300">
|
|
Auto-increment store index before each start
|
|
</span>
|
|
<p class="text-xs text-gray-500 dark:text-gray-400 mt-1">
|
|
When enabled, the system will find an unused store/index number before starting.
|
|
This prevents "overwrite existing data?" prompts on the device.
|
|
</p>
|
|
</div>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
const days = ['monday', 'tuesday', 'wednesday', 'thursday', 'friday', 'saturday', 'sunday'];
|
|
const weekdays = ['monday', 'tuesday', 'wednesday', 'thursday', 'friday'];
|
|
const weekends = ['saturday', 'sunday'];
|
|
|
|
function toggleDayTimes(day, enabled) {
|
|
const timesDiv = document.getElementById('times-' + day);
|
|
if (enabled) {
|
|
timesDiv.style.opacity = '1';
|
|
timesDiv.style.pointerEvents = 'auto';
|
|
} else {
|
|
timesDiv.style.opacity = '0.4';
|
|
timesDiv.style.pointerEvents = 'none';
|
|
}
|
|
updateOvernightHints();
|
|
}
|
|
|
|
function setDayEnabled(day, enabled) {
|
|
const checkbox = document.getElementById('day-' + day);
|
|
checkbox.checked = enabled;
|
|
toggleDayTimes(day, enabled);
|
|
}
|
|
|
|
function selectWeekdays() {
|
|
days.forEach(day => setDayEnabled(day, weekdays.includes(day)));
|
|
}
|
|
|
|
function selectWeekends() {
|
|
days.forEach(day => setDayEnabled(day, weekends.includes(day)));
|
|
}
|
|
|
|
function selectAllDays() {
|
|
days.forEach(day => setDayEnabled(day, true));
|
|
}
|
|
|
|
function clearAllDays() {
|
|
days.forEach(day => setDayEnabled(day, false));
|
|
}
|
|
|
|
function updateOvernightHints() {
|
|
days.forEach(day => {
|
|
const startInput = document.querySelector(`input[name="weekly_pattern[${day}][start]"]`);
|
|
const endInput = document.querySelector(`input[name="weekly_pattern[${day}][end]"]`);
|
|
const hint = document.getElementById('overnight-hint-' + day);
|
|
|
|
if (startInput && endInput && hint) {
|
|
const start = startInput.value;
|
|
const end = endInput.value;
|
|
hint.style.display = (end && start && end <= start) ? 'inline' : 'none';
|
|
}
|
|
});
|
|
}
|
|
|
|
// Update hints on time change
|
|
document.querySelectorAll('input[type="time"]').forEach(input => {
|
|
input.addEventListener('change', updateOvernightHints);
|
|
});
|
|
|
|
// Initial update
|
|
updateOvernightHints();
|
|
|
|
// Function to collect form data as JSON
|
|
function getWeeklyPatternData() {
|
|
const pattern = {};
|
|
days.forEach(day => {
|
|
const checkbox = document.getElementById('day-' + day);
|
|
const startInput = document.querySelector(`input[name="weekly_pattern[${day}][start]"]`);
|
|
const endInput = document.querySelector(`input[name="weekly_pattern[${day}][end]"]`);
|
|
|
|
pattern[day] = {
|
|
enabled: checkbox.checked,
|
|
start: startInput.value,
|
|
end: endInput.value
|
|
};
|
|
});
|
|
return pattern;
|
|
}
|
|
|
|
// Function to get auto-increment setting for calendar mode
|
|
function getCalendarAutoIncrement() {
|
|
const checkbox = document.getElementById('auto_increment_index_calendar');
|
|
return checkbox ? checkbox.checked : true;
|
|
}
|
|
|
|
// Function to get include_download setting for calendar mode
|
|
function getCalendarIncludeDownload() {
|
|
const checkbox = document.getElementById('include_download_calendar');
|
|
return checkbox ? checkbox.checked : true;
|
|
}
|
|
|
|
// Function to get all calendar options as object
|
|
function getCalendarOptions() {
|
|
return {
|
|
weekly_pattern: getWeeklyPatternData(),
|
|
auto_increment_index: getCalendarAutoIncrement(),
|
|
include_download: getCalendarIncludeDownload()
|
|
};
|
|
}
|
|
</script>
|