@@ -616,6 +846,39 @@ function openReservationModal() {
updateCalendarAvailability();
}
+function toggleResCard(id) {
+ const detail = document.getElementById('res-detail-' + id);
+ const chevron = document.getElementById('chevron-' + id);
+ if (!detail) return;
+ const isHidden = detail.classList.contains('hidden');
+ detail.classList.toggle('hidden', !isHidden);
+ if (chevron) chevron.style.transform = isHidden ? 'rotate(180deg)' : '';
+}
+
+// Event delegation for reservation cards (handles HTMX-loaded content)
+document.addEventListener('click', function(e) {
+ const header = e.target.closest('.res-card-header');
+ if (!header) return;
+ const id = header.dataset.resId;
+ if (id) toggleResCard(id);
+});
+
+async function deleteReservation(id, name) {
+ if (!confirm(`Delete reservation "${name}"?\n\nThis will remove all unit assignments.`)) return;
+ try {
+ const response = await fetch(`/api/fleet-calendar/reservations/${id}`, { method: 'DELETE' });
+ if (response.ok) {
+ htmx.trigger('#planner-reservations-list', 'load');
+ } else {
+ const data = await response.json();
+ alert('Error: ' + (data.detail || 'Failed to delete'));
+ }
+ } catch (error) {
+ console.error('Error:', error);
+ alert('Error deleting reservation');
+ }
+}
+
async function editReservation(id) {
try {
const response = await fetch(`/api/fleet-calendar/reservations/${id}`);
@@ -869,5 +1132,438 @@ document.addEventListener('keydown', function(e) {
closeReservationModal();
}
});
+
+// ============================================================
+// Tab + sub-tab switching
+// ============================================================
+function switchPlannerTab(tab) {
+ const isAssign = tab === 'assign';
+ document.getElementById('ptab-list').classList.toggle('hidden', isAssign);
+ document.getElementById('ptab-assign').classList.toggle('hidden', !isAssign);
+
+ ['list', 'assign'].forEach(t => {
+ const btn = document.getElementById(`ptab-btn-${t}`);
+ if (t === tab) {
+ btn.classList.add('bg-white', 'dark:bg-slate-600', 'text-gray-900', 'dark:text-white', 'shadow');
+ btn.classList.remove('text-gray-600', 'dark:text-gray-300', 'hover:text-gray-900', 'dark:hover:text-white');
+ } else {
+ btn.classList.remove('bg-white', 'dark:bg-slate-600', 'text-gray-900', 'dark:text-white', 'shadow');
+ btn.classList.add('text-gray-600', 'dark:text-gray-300', 'hover:text-gray-900', 'dark:hover:text-white');
+ }
+ });
+}
+
+function switchTab(tab) {
+ document.getElementById('view-calendar').classList.toggle('hidden', tab !== 'calendar');
+ document.getElementById('view-planner').classList.toggle('hidden', tab !== 'planner');
+
+ ['calendar', 'planner'].forEach(t => {
+ const btn = document.getElementById(`tab-btn-${t}`);
+ if (t === tab) {
+ btn.classList.add('bg-white', 'dark:bg-slate-600', 'text-gray-900', 'dark:text-white', 'shadow');
+ btn.classList.remove('text-gray-600', 'dark:text-gray-300', 'hover:text-gray-900', 'dark:hover:text-white');
+ } else {
+ btn.classList.remove('bg-white', 'dark:bg-slate-600', 'text-gray-900', 'dark:text-white', 'shadow');
+ btn.classList.add('text-gray-600', 'dark:text-gray-300', 'hover:text-gray-900', 'dark:hover:text-white');
+ }
+ });
+}
+
+// ============================================================
+// Reservation Planner
+// ============================================================
+let plannerState = {
+ reservation_id: null, // null = creating new
+ slots: [], // array of {unit_id: string|null, power_type: string|null, notes: string|null}
+ allUnits: [] // full list from server
+};
+let dragSrcIdx = null;
+
+function plannerDatesChanged() {
+ plannerLoadUnits();
+}
+
+async function plannerLoadUnits() {
+ const start = document.getElementById('planner-start').value;
+ const end = document.getElementById('planner-end').value;
+ const excludeId = plannerState.reservation_id || '';
+ const plannerDeviceType = document.querySelector('input[name="planner_device_type"]:checked')?.value || 'seismograph';
+
+ let url = `/api/fleet-calendar/planner-availability?device_type=${plannerDeviceType}`;
+ if (start && end && end >= start) {
+ url += `&start_date=${start}&end_date=${end}`;
+ }
+ if (excludeId) url += `&exclude_reservation_id=${excludeId}`;
+
+ try {
+ const resp = await fetch(url);
+ const data = await resp.json();
+ plannerState.allUnits = data.units || [];
+ const hasDates = start && end;
+ document.getElementById('planner-avail-count').textContent =
+ hasDates ? `(${plannerState.allUnits.length} available for period)` : `(${plannerState.allUnits.length} total)`;
+ plannerRenderUnits();
+ } catch (e) {
+ console.error('Planner load error', e);
+ }
+}
+
+function plannerFilterUnits() {
+ // Mutually exclusive checkboxes
+ const deployedOnly = document.getElementById('planner-deployed-only');
+ const benchedOnly = document.getElementById('planner-benched-only');
+ if (event && event.target === deployedOnly && deployedOnly.checked) benchedOnly.checked = false;
+ if (event && event.target === benchedOnly && benchedOnly.checked) deployedOnly.checked = false;
+ plannerRenderUnits();
+}
+
+function plannerRenderUnits() {
+ const search = document.getElementById('planner-search').value.toLowerCase();
+ const deployedOnly = document.getElementById('planner-deployed-only').checked;
+ const benchedOnly = document.getElementById('planner-benched-only').checked;
+ const slottedIds = new Set(plannerState.slots.map(s => s.unit_id).filter(Boolean));
+ const start = document.getElementById('planner-start').value;
+ const end = document.getElementById('planner-end').value;
+
+ let units = plannerState.allUnits.filter(u => {
+ if (deployedOnly && !u.deployed) return false;
+ if (benchedOnly && u.deployed) return false;
+ if (search && !u.id.toLowerCase().includes(search)) return false;
+ return true;
+ });
+
+ const placeholder = document.getElementById('planner-units-placeholder');
+ const list = document.getElementById('planner-units-list');
+
+ if (plannerState.allUnits.length === 0) {
+ placeholder.classList.remove('hidden');
+ placeholder.textContent = 'Loading units...';
+ list.querySelectorAll('.planner-unit-row').forEach(el => el.remove());
+ return;
+ }
+ placeholder.classList.add('hidden');
+ list.querySelectorAll('.planner-unit-row').forEach(el => el.remove());
+
+ if (units.length === 0) {
+ const empty = document.createElement('p');
+ empty.className = 'planner-unit-row text-sm text-gray-400 dark:text-gray-500 text-center py-8';
+ empty.textContent = 'No units match your filter';
+ list.appendChild(empty);
+ return;
+ }
+
+ for (const unit of units) {
+ const isSlotted = slottedIds.has(unit.id);
+ const row = document.createElement('div');
+ row.className = `planner-unit-row flex items-center justify-between px-3 py-2 rounded-lg border transition-colors ${
+ isSlotted
+ ? 'bg-blue-50 dark:bg-blue-900/20 border-blue-200 dark:border-blue-800 opacity-60 cursor-default'
+ : 'border-gray-200 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-700/50 cursor-pointer'
+ }`;
+ row.dataset.unitId = unit.id;
+ if (!isSlotted) row.onclick = () => plannerAssignUnit(unit.id);
+
+ const calDate = unit.last_calibrated
+ ? new Date(unit.last_calibrated + 'T00:00:00').toLocaleDateString('en-US', {month:'short', day:'numeric', year:'numeric'})
+ : 'No cal date';
+
+ // Calibration expiry warning during deployment
+ let expiryWarning = '';
+ if (start && end && unit.expiry_date) {
+ const expiry = new Date(unit.expiry_date + 'T00:00:00');
+ const jobStart = new Date(start + 'T00:00:00');
+ const jobEnd = new Date(end + 'T00:00:00');
+ if (expiry >= jobStart && expiry <= jobEnd) {
+ const expiryStr = expiry.toLocaleDateString('en-US', {month:'short', day:'numeric', year:'numeric'});
+ expiryWarning = `
cal expires ${expiryStr}`;
+ }
+ }
+
+ const deployedBadge = unit.deployed
+ ? '
Deployed'
+ : '
Benched';
+
+ row.innerHTML = `
+
+
+
+ ${deployedBadge}
+ ${expiryWarning}
+
+
Cal: ${calDate}
+
+
+ ${isSlotted
+ ? 'Assigned'
+ : ''
+ }
+
+ `;
+ list.appendChild(row);
+ }
+}
+
+function openUnitDetailModal(unitId) {
+ document.getElementById('unit-detail-modal-title').textContent = unitId;
+ document.getElementById('unit-detail-iframe').src = `/unit/${unitId}?embed=1`;
+ document.getElementById('unit-detail-modal').classList.remove('hidden');
+}
+
+function closeUnitDetailModal() {
+ document.getElementById('unit-detail-modal').classList.add('hidden');
+ document.getElementById('unit-detail-iframe').src = '';
+}
+
+function plannerAddSlot() {
+ plannerState.slots.push({ unit_id: null, power_type: null, notes: null });
+ plannerRenderSlots();
+}
+
+function plannerAssignUnit(unitId) {
+ const emptyIdx = plannerState.slots.findIndex(s => !s.unit_id);
+ if (emptyIdx >= 0) {
+ plannerState.slots[emptyIdx].unit_id = unitId;
+ } else {
+ plannerState.slots.push({ unit_id: unitId, power_type: null, notes: null });
+ }
+ plannerRenderSlots();
+ plannerRenderUnits();
+}
+
+function plannerRemoveSlot(idx) {
+ plannerState.slots.splice(idx, 1);
+ plannerRenderSlots();
+ plannerRenderUnits();
+}
+
+function plannerSetPowerType(idx, value) {
+ plannerState.slots[idx].power_type = value || null;
+}
+
+function plannerSetSlotNotes(idx, value) {
+ plannerState.slots[idx].notes = value || null;
+}
+
+function plannerRenderSlots() {
+ const container = document.getElementById('planner-slots');
+ const emptyMsg = document.getElementById('planner-slots-empty');
+ container.querySelectorAll('.planner-slot-row').forEach(el => el.remove());
+
+ if (plannerState.slots.length === 0) {
+ emptyMsg.classList.remove('hidden');
+ return;
+ }
+ emptyMsg.classList.add('hidden');
+
+ plannerState.slots.forEach((slot, idx) => {
+ const row = document.createElement('div');
+ row.className = 'planner-slot-row flex flex-col gap-1.5 px-3 py-2 rounded-lg border border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-slate-700/50';
+ row.dataset.idx = idx;
+ row.draggable = !!slot.unit_id;
+
+ // Drag events
+ if (slot.unit_id) {
+ row.addEventListener('dragstart', e => {
+ dragSrcIdx = idx;
+ e.dataTransfer.effectAllowed = 'move';
+ row.classList.add('opacity-50');
+ });
+ row.addEventListener('dragend', () => row.classList.remove('opacity-50'));
+ }
+ row.addEventListener('dragover', e => {
+ e.preventDefault();
+ e.dataTransfer.dropEffect = 'move';
+ container.querySelectorAll('.planner-slot-row').forEach(r => r.classList.remove('ring-2', 'ring-blue-400'));
+ row.classList.add('ring-2', 'ring-blue-400');
+ });
+ row.addEventListener('dragleave', () => row.classList.remove('ring-2', 'ring-blue-400'));
+ row.addEventListener('drop', e => {
+ e.preventDefault();
+ row.classList.remove('ring-2', 'ring-blue-400');
+ if (dragSrcIdx === null || dragSrcIdx === idx) return;
+ // Swap unit_id and power_type only (keep location notes in place)
+ const srcSlot = plannerState.slots[dragSrcIdx];
+ const dstSlot = plannerState.slots[idx];
+ [srcSlot.unit_id, dstSlot.unit_id] = [dstSlot.unit_id, srcSlot.unit_id];
+ [srcSlot.power_type, dstSlot.power_type] = [dstSlot.power_type, srcSlot.power_type];
+ dragSrcIdx = null;
+ plannerRenderSlots();
+ plannerRenderUnits();
+ });
+
+ const powerSelect = `
+
`;
+
+ const dragHandle = slot.unit_id
+ ? `
⠿`
+ : `
`;
+
+ row.innerHTML = `
+
+ ${dragHandle}
+ Loc. ${idx + 1}
+ ${slot.unit_id
+ ? `${slot.unit_id}
+ ${powerSelect}
+ `
+ : `Empty — click a unit
+ ${powerSelect}
+ `
+ }
+
+
+
+
+ `;
+ container.appendChild(row);
+ });
+}
+
+function plannerClearSlot(idx) {
+ plannerState.slots[idx].unit_id = null;
+ plannerState.slots[idx].power_type = null;
+ plannerRenderSlots();
+ plannerRenderUnits();
+}
+
+function plannerReset() {
+ plannerState = { reservation_id: null, slots: [], allUnits: [] };
+ document.getElementById('planner-name').value = '';
+ document.getElementById('planner-project').value = '';
+ document.getElementById('planner-start').value = '';
+ document.getElementById('planner-end').value = '';
+ document.getElementById('planner-notes').value = '';
+ document.getElementById('planner-est-units').value = '';
+ document.getElementById('planner-search').value = '';
+ const defaultDt = document.querySelector('input[name="planner_device_type"][value="seismograph"]');
+ if (defaultDt) defaultDt.checked = true;
+ document.getElementById('planner-deployed-only').checked = false;
+ document.getElementById('planner-avail-count').textContent = '';
+ document.querySelector('input[name="planner_color"][value="#3B82F6"]').checked = true;
+ const titleEl = document.getElementById('planner-form-title');
+ if (titleEl) titleEl.textContent = 'New Reservation';
+ document.getElementById('planner-save-btn').textContent = 'Save Reservation';
+ plannerRenderSlots();
+ plannerRenderUnits();
+}
+
+async function plannerSave() {
+ const name = document.getElementById('planner-name').value.trim();
+ const start = document.getElementById('planner-start').value;
+ const end = document.getElementById('planner-end').value;
+ const projectId = document.getElementById('planner-project').value;
+ const notes = document.getElementById('planner-notes').value.trim();
+ const color = document.querySelector('input[name="planner_color"]:checked')?.value || '#3B82F6';
+ const estUnits = parseInt(document.getElementById('planner-est-units').value) || null;
+ const filledSlots = plannerState.slots.filter(s => s.unit_id);
+
+ if (!name) { alert('Please enter a reservation name.'); return; }
+ if (!start || !end) { alert('Please set start and end dates.'); return; }
+ if (end < start) { alert('End date must be after start date.'); return; }
+
+ const btn = document.getElementById('planner-save-btn');
+ btn.disabled = true;
+ btn.textContent = 'Saving...';
+
+ try {
+ const isEdit = !!plannerState.reservation_id;
+ const url = isEdit
+ ? `/api/fleet-calendar/reservations/${plannerState.reservation_id}`
+ : '/api/fleet-calendar/reservations';
+ const method = isEdit ? 'PUT' : 'POST';
+
+ const plannerDeviceType = document.querySelector('input[name="planner_device_type"]:checked')?.value || 'seismograph';
+ const payload = {
+ name, start_date: start, end_date: end,
+ project_id: projectId || null,
+ assignment_type: 'specific',
+ device_type: plannerDeviceType,
+ color, notes: notes || null,
+ quantity_needed: estUnits
+ };
+
+ const resp = await fetch(url, {
+ method,
+ headers: { 'Content-Type': 'application/json' },
+ body: JSON.stringify(payload)
+ });
+ const result = await resp.json();
+ if (!result.success) throw new Error(result.detail || 'Save failed');
+
+ const reservationId = isEdit ? plannerState.reservation_id : result.reservation_id;
+
+ // Always call assign-units (even with empty list) — endpoint does a full replace
+ const unitIds = filledSlots.map(s => s.unit_id);
+ const powerTypes = {};
+ filledSlots.forEach(s => { if (s.power_type) powerTypes[s.unit_id] = s.power_type; });
+ const assignResp = await fetch(
+ `/api/fleet-calendar/reservations/${reservationId}/assign-units`,
+ {
+ method: 'POST',
+ headers: { 'Content-Type': 'application/json' },
+ body: JSON.stringify({ unit_ids: unitIds, power_types: powerTypes })
+ }
+ );
+ const assignResult = await assignResp.json();
+ if (assignResult.conflicts && assignResult.conflicts.length > 0) {
+ const conflictIds = assignResult.conflicts.map(c => c.unit_id).join(', ');
+ alert(`Saved! Note: ${assignResult.conflicts.length} unit(s) had conflicts and were not assigned: ${conflictIds}`);
+ }
+
+ plannerReset();
+ switchPlannerTab('list');
+ // Reload the reservations list partial
+ htmx.trigger('#planner-reservations-list', 'load');
+ } catch (e) {
+ console.error('Planner save error', e);
+ alert('Error saving reservation: ' + e.message);
+ } finally {
+ btn.disabled = false;
+ btn.textContent = plannerState.reservation_id ? 'Save Changes' : 'Save Reservation';
+ }
+}
+
+async function openPlanner(reservationId) {
+ plannerReset();
+ if (reservationId) {
+ try {
+ const resp = await fetch(`/api/fleet-calendar/reservations/${reservationId}`);
+ const res = await resp.json();
+ plannerState.reservation_id = reservationId;
+ document.getElementById('planner-name').value = res.name;
+ document.getElementById('planner-project').value = res.project_id || '';
+ document.getElementById('planner-start').value = res.start_date;
+ document.getElementById('planner-end').value = res.end_date || '';
+ document.getElementById('planner-notes').value = res.notes || '';
+ document.getElementById('planner-est-units').value = res.quantity_needed || '';
+ const colorRadio = document.querySelector(`input[name="planner_color"][value="${res.color}"]`);
+ if (colorRadio) colorRadio.checked = true;
+ const dtRadio = document.querySelector(`input[name="planner_device_type"][value="${res.device_type || 'seismograph'}"]`);
+ if (dtRadio) dtRadio.checked = true;
+ // Pre-fill slots from existing assigned units
+ for (const u of (res.assigned_units || [])) {
+ plannerState.slots.push({ unit_id: u.id, power_type: u.power_type || null, notes: u.notes || null });
+ }
+ const titleEl = document.getElementById('planner-form-title');
+ if (titleEl) titleEl.textContent = 'Edit: ' + res.name;
+ document.getElementById('planner-save-btn').textContent = 'Save Changes';
+ plannerRenderSlots();
+ if (res.start_date && res.end_date) plannerLoadUnits();
+ } catch (e) {
+ console.error('Error loading reservation for planner', e);
+ }
+ }
+ switchTab('planner');
+ switchPlannerTab('assign');
+}
{% endblock %}
diff --git a/templates/partials/fleet_calendar/reservations_list.html b/templates/partials/fleet_calendar/reservations_list.html
index 060f598..ba30d34 100644
--- a/templates/partials/fleet_calendar/reservations_list.html
+++ b/templates/partials/fleet_calendar/reservations_list.html
@@ -1,100 +1,158 @@
{% if reservations %}
-
+
{% for item in reservations %}
{% set res = item.reservation %}
-
-
-
-
{{ res.name }}
+
+
+
+
+
+
+
+ {% if res.notes %}
+
{{ res.notes }}
+ {% endif %}
+
+
+ {% if res.quantity_needed %}
+
Est. units needed
+
{{ res.quantity_needed }}
+ {% endif %}
+
Assigned
+
{{ item.assigned_count }} unit{{ 's' if item.assigned_count != 1 else '' }}
+ {% if res.quantity_needed and item.assigned_count < res.quantity_needed %}
+
Still needed
+
{{ res.quantity_needed - item.assigned_count }} more
+ {% endif %}
{% if item.has_conflicts %}
-
- {{ item.conflict_count }} conflict{{ 's' if item.conflict_count != 1 else '' }}
-
+
Cal swaps
+
{{ item.conflict_count }} unit{{ 's' if item.conflict_count != 1 else '' }} will need swapping during job
{% endif %}
-
- {{ res.start_date.strftime('%b %d, %Y') }} -
- {% if res.end_date %}
- {{ res.end_date.strftime('%b %d, %Y') }}
- {% elif res.end_date_tbd %}
- TBD
- {% if res.estimated_end_date %}
- (est. {{ res.estimated_end_date.strftime('%b %d, %Y') }})
+
+ {% if item.assigned_units %}
+
Monitoring Locations
+
+ {% for u in item.assigned_units %}
+
+
Loc. {{ loop.index }}
+
+
+ {% if u.power_type == 'ac' %}
+
A/C
+ {% elif u.power_type == 'solar' %}
+
Solar
{% endif %}
- {% else %}
-
Ongoing
- {% endif %}
-
- {% if res.notes %}
-
{{ res.notes }}
+ {% if u.deployed %}
+
Deployed
+ {% else %}
+
Benched
+ {% endif %}
+ {% if u.last_calibrated %}
+
Cal: {{ u.last_calibrated.strftime('%b %d, %Y') }}
+ {% endif %}
+
+ {% endfor %}
+
+ {% else %}
+
No units assigned yet. Click the clipboard icon to plan.
{% endif %}
-
-
- {% if res.assignment_type == 'quantity' %}
- {{ item.assigned_count }}/{{ res.quantity_needed or '?' }}
- {% else %}
- {{ item.assigned_count }}
- {% endif %}
-
-
- {{ 'units needed' if res.assignment_type == 'quantity' else 'units assigned' }}
-
-
-
+
{% endfor %}
-
+
{% else %}
-
No reservations for {{ year }}
+
No reservations found
Click "New Reservation" to plan unit assignments
{% endif %}