add reservation mechanic to dev #35
@@ -515,3 +515,10 @@ class JobReservationUnit(Base):
|
||||
assignment_source = Column(String, default="specific") # "specific" | "filled" | "swap"
|
||||
assigned_at = Column(DateTime, default=datetime.utcnow)
|
||||
notes = Column(Text, nullable=True) # "Replacing BE17353" etc.
|
||||
|
||||
# Power requirements for this deployment slot
|
||||
power_type = Column(String, nullable=True) # "ac" | "solar" | None
|
||||
|
||||
# Location identity
|
||||
location_name = Column(String, nullable=True) # e.g. "North Gate", "Main Entrance"
|
||||
slot_index = Column(Integer, nullable=True) # Order within reservation (0-based)
|
||||
|
||||
@@ -19,7 +19,7 @@ import logging
|
||||
from backend.database import get_db
|
||||
from backend.models import (
|
||||
RosterUnit, JobReservation, JobReservationUnit,
|
||||
UserPreferences, Project
|
||||
UserPreferences, Project, MonitoringLocation, UnitAssignment
|
||||
)
|
||||
from backend.templates_config import templates
|
||||
from backend.services.fleet_calendar_service import (
|
||||
@@ -221,8 +221,13 @@ async def get_reservation(
|
||||
reservation_id=reservation_id
|
||||
).all()
|
||||
|
||||
unit_ids = [a.unit_id for a in assignments]
|
||||
# Sort assignments by slot_index so order is preserved
|
||||
assignments_sorted = sorted(assignments, key=lambda a: (a.slot_index if a.slot_index is not None else 999))
|
||||
unit_ids = [a.unit_id for a in assignments_sorted]
|
||||
units = db.query(RosterUnit).filter(RosterUnit.id.in_(unit_ids)).all() if unit_ids else []
|
||||
units_by_id = {u.id: u for u in units}
|
||||
# Build per-unit lookups from assignments
|
||||
assignment_map = {a.unit_id: a for a in assignments_sorted}
|
||||
|
||||
return {
|
||||
"id": reservation.id,
|
||||
@@ -239,11 +244,15 @@ async def get_reservation(
|
||||
"color": reservation.color,
|
||||
"assigned_units": [
|
||||
{
|
||||
"id": u.id,
|
||||
"last_calibrated": u.last_calibrated.isoformat() if u.last_calibrated else None,
|
||||
"deployed": u.deployed
|
||||
"id": uid,
|
||||
"last_calibrated": units_by_id[uid].last_calibrated.isoformat() if uid in units_by_id and units_by_id[uid].last_calibrated else None,
|
||||
"deployed": units_by_id[uid].deployed if uid in units_by_id else False,
|
||||
"power_type": assignment_map[uid].power_type,
|
||||
"notes": assignment_map[uid].notes,
|
||||
"location_name": assignment_map[uid].location_name,
|
||||
"slot_index": assignment_map[uid].slot_index,
|
||||
}
|
||||
for u in units
|
||||
for uid in unit_ids
|
||||
]
|
||||
}
|
||||
|
||||
@@ -337,29 +346,30 @@ async def assign_units_to_reservation(
|
||||
|
||||
data = await request.json()
|
||||
unit_ids = data.get("unit_ids", [])
|
||||
# Optional per-unit dicts keyed by unit_id
|
||||
power_types = data.get("power_types", {})
|
||||
location_notes = data.get("location_notes", {})
|
||||
location_names = data.get("location_names", {})
|
||||
# slot_indices: {"BE17354": 0, "BE9441": 1, ...}
|
||||
slot_indices = data.get("slot_indices", {})
|
||||
|
||||
if not unit_ids:
|
||||
raise HTTPException(status_code=400, detail="No units specified")
|
||||
|
||||
# Verify units exist
|
||||
# Verify units exist (allow empty list to clear all assignments)
|
||||
if unit_ids:
|
||||
units = db.query(RosterUnit).filter(RosterUnit.id.in_(unit_ids)).all()
|
||||
found_ids = {u.id for u in units}
|
||||
missing = set(unit_ids) - found_ids
|
||||
if missing:
|
||||
raise HTTPException(status_code=404, detail=f"Units not found: {', '.join(missing)}")
|
||||
|
||||
# Check for conflicts (already assigned to overlapping reservations)
|
||||
# Full replace: delete all existing assignments for this reservation first
|
||||
db.query(JobReservationUnit).filter_by(reservation_id=reservation_id).delete()
|
||||
db.flush()
|
||||
|
||||
# Check for conflicts with other reservations and insert new assignments
|
||||
conflicts = []
|
||||
for unit_id in unit_ids:
|
||||
# Check if unit is already assigned to this reservation
|
||||
existing = db.query(JobReservationUnit).filter_by(
|
||||
reservation_id=reservation_id,
|
||||
unit_id=unit_id
|
||||
).first()
|
||||
if existing:
|
||||
continue # Already assigned, skip
|
||||
|
||||
# Check overlapping reservations
|
||||
if reservation.end_date:
|
||||
overlapping = db.query(JobReservation).join(
|
||||
JobReservationUnit, JobReservation.id == JobReservationUnit.reservation_id
|
||||
).filter(
|
||||
@@ -382,7 +392,11 @@ async def assign_units_to_reservation(
|
||||
id=str(uuid.uuid4()),
|
||||
reservation_id=reservation_id,
|
||||
unit_id=unit_id,
|
||||
assignment_source="filled" if reservation.assignment_type == "quantity" else "specific"
|
||||
assignment_source="filled" if reservation.assignment_type == "quantity" else "specific",
|
||||
power_type=power_types.get(unit_id),
|
||||
notes=location_notes.get(unit_id),
|
||||
location_name=location_names.get(unit_id),
|
||||
slot_index=slot_indices.get(unit_id),
|
||||
)
|
||||
db.add(assignment)
|
||||
|
||||
@@ -511,9 +525,8 @@ async def get_reservations_list(
|
||||
else:
|
||||
end_date = date(end_year, end_month + 1, 1) - timedelta(days=1)
|
||||
|
||||
# Include TBD reservations that started before window end
|
||||
# Include TBD reservations that started before window end — show ALL device types
|
||||
reservations = db.query(JobReservation).filter(
|
||||
JobReservation.device_type == device_type,
|
||||
JobReservation.start_date <= end_date,
|
||||
or_(
|
||||
JobReservation.end_date >= start_date,
|
||||
@@ -524,9 +537,28 @@ async def get_reservations_list(
|
||||
# Get assignment counts
|
||||
reservation_data = []
|
||||
for res in reservations:
|
||||
assigned_count = db.query(JobReservationUnit).filter_by(
|
||||
assignments = db.query(JobReservationUnit).filter_by(
|
||||
reservation_id=res.id
|
||||
).count()
|
||||
).all()
|
||||
assigned_count = len(assignments)
|
||||
|
||||
# Enrich assignments with unit details, sorted by slot_index
|
||||
assignments_sorted = sorted(assignments, key=lambda a: (a.slot_index if a.slot_index is not None else 999))
|
||||
unit_ids = [a.unit_id for a in assignments_sorted]
|
||||
units = db.query(RosterUnit).filter(RosterUnit.id.in_(unit_ids)).all() if unit_ids else []
|
||||
units_by_id = {u.id: u for u in units}
|
||||
assigned_units = [
|
||||
{
|
||||
"id": a.unit_id,
|
||||
"power_type": a.power_type,
|
||||
"notes": a.notes,
|
||||
"location_name": a.location_name,
|
||||
"slot_index": a.slot_index,
|
||||
"deployed": units_by_id[a.unit_id].deployed if a.unit_id in units_by_id else False,
|
||||
"last_calibrated": units_by_id[a.unit_id].last_calibrated if a.unit_id in units_by_id else None,
|
||||
}
|
||||
for a in assignments_sorted
|
||||
]
|
||||
|
||||
# Check for calibration conflicts
|
||||
conflicts = check_calibration_conflicts(db, res.id)
|
||||
@@ -534,6 +566,7 @@ async def get_reservations_list(
|
||||
reservation_data.append({
|
||||
"reservation": res,
|
||||
"assigned_count": assigned_count,
|
||||
"assigned_units": assigned_units,
|
||||
"has_conflicts": len(conflicts) > 0,
|
||||
"conflict_count": len(conflicts)
|
||||
})
|
||||
@@ -549,6 +582,56 @@ async def get_reservations_list(
|
||||
)
|
||||
|
||||
|
||||
@router.get("/api/fleet-calendar/planner-availability", response_class=JSONResponse)
|
||||
async def get_planner_availability(
|
||||
device_type: str = "seismograph",
|
||||
start_date: Optional[str] = None,
|
||||
end_date: Optional[str] = None,
|
||||
exclude_reservation_id: Optional[str] = None,
|
||||
db: Session = Depends(get_db)
|
||||
):
|
||||
"""Get available units for the reservation planner split-panel UI.
|
||||
Dates are optional — if omitted, returns all non-retired units regardless of reservations.
|
||||
"""
|
||||
if start_date and end_date:
|
||||
try:
|
||||
start = date.fromisoformat(start_date)
|
||||
end = date.fromisoformat(end_date)
|
||||
except ValueError:
|
||||
raise HTTPException(status_code=400, detail="Invalid date format. Use YYYY-MM-DD")
|
||||
units = get_available_units_for_period(db, start, end, device_type, exclude_reservation_id)
|
||||
else:
|
||||
# No dates: return all non-retired units of this type
|
||||
from backend.models import RosterUnit as RU
|
||||
from datetime import timedelta
|
||||
all_units = db.query(RU).filter(
|
||||
RU.device_type == device_type,
|
||||
RU.retired == False
|
||||
).all()
|
||||
units = []
|
||||
for u in all_units:
|
||||
expiry = (u.last_calibrated + timedelta(days=365)) if u.last_calibrated else None
|
||||
units.append({
|
||||
"id": u.id,
|
||||
"last_calibrated": u.last_calibrated.isoformat() if u.last_calibrated else None,
|
||||
"expiry_date": expiry.isoformat() if expiry else None,
|
||||
"calibration_status": "needs_calibration" if not u.last_calibrated else "valid",
|
||||
"deployed": u.deployed,
|
||||
"out_for_calibration": u.out_for_calibration or False,
|
||||
"note": u.note or ""
|
||||
})
|
||||
|
||||
# Sort: benched first (easier to assign), then deployed, then by ID
|
||||
units.sort(key=lambda u: (1 if u["deployed"] else 0, u["id"]))
|
||||
|
||||
return {
|
||||
"units": units,
|
||||
"start_date": start_date,
|
||||
"end_date": end_date,
|
||||
"count": len(units)
|
||||
}
|
||||
|
||||
|
||||
@router.get("/api/fleet-calendar/available-units", response_class=HTMLResponse)
|
||||
async def get_available_units_partial(
|
||||
request: Request,
|
||||
@@ -608,3 +691,102 @@ async def get_month_partial(
|
||||
"today": date.today().isoformat()
|
||||
}
|
||||
)
|
||||
|
||||
|
||||
# ============================================================================
|
||||
# Promote Reservation to Project
|
||||
# ============================================================================
|
||||
|
||||
@router.post("/api/fleet-calendar/reservations/{reservation_id}/promote-to-project", response_class=JSONResponse)
|
||||
async def promote_reservation_to_project(
|
||||
reservation_id: str,
|
||||
request: Request,
|
||||
db: Session = Depends(get_db)
|
||||
):
|
||||
"""
|
||||
Promote a job reservation to a full project in the projects DB.
|
||||
Creates: Project + MonitoringLocations + UnitAssignments.
|
||||
"""
|
||||
reservation = db.query(JobReservation).filter_by(id=reservation_id).first()
|
||||
if not reservation:
|
||||
raise HTTPException(status_code=404, detail="Reservation not found")
|
||||
|
||||
data = await request.json()
|
||||
project_number = data.get("project_number") or None
|
||||
client_name = data.get("client_name") or None
|
||||
|
||||
# Map device_type to project_type_id
|
||||
if reservation.device_type == "slm":
|
||||
project_type_id = "sound_monitoring"
|
||||
location_type = "sound"
|
||||
else:
|
||||
project_type_id = "vibration_monitoring"
|
||||
location_type = "vibration"
|
||||
|
||||
# Check for duplicate project name
|
||||
existing = db.query(Project).filter_by(name=reservation.name).first()
|
||||
if existing:
|
||||
raise HTTPException(status_code=409, detail=f"A project named '{reservation.name}' already exists.")
|
||||
|
||||
# Create the project
|
||||
project_id = str(uuid.uuid4())
|
||||
project = Project(
|
||||
id=project_id,
|
||||
name=reservation.name,
|
||||
project_number=project_number,
|
||||
client_name=client_name,
|
||||
project_type_id=project_type_id,
|
||||
status="active",
|
||||
start_date=reservation.start_date,
|
||||
end_date=reservation.end_date,
|
||||
description=reservation.notes,
|
||||
)
|
||||
db.add(project)
|
||||
db.flush()
|
||||
|
||||
# Load assignments sorted by slot_index
|
||||
assignments = db.query(JobReservationUnit).filter_by(reservation_id=reservation_id).all()
|
||||
assignments_sorted = sorted(assignments, key=lambda a: (a.slot_index if a.slot_index is not None else 999))
|
||||
|
||||
locations_created = 0
|
||||
units_assigned = 0
|
||||
|
||||
for i, assignment in enumerate(assignments_sorted):
|
||||
loc_num = str(i + 1).zfill(3)
|
||||
loc_name = assignment.location_name or f"Location {i + 1}"
|
||||
|
||||
location = MonitoringLocation(
|
||||
id=str(uuid.uuid4()),
|
||||
project_id=project_id,
|
||||
location_type=location_type,
|
||||
name=loc_name,
|
||||
description=assignment.notes,
|
||||
)
|
||||
db.add(location)
|
||||
db.flush()
|
||||
locations_created += 1
|
||||
|
||||
if assignment.unit_id:
|
||||
unit_assignment = UnitAssignment(
|
||||
id=str(uuid.uuid4()),
|
||||
unit_id=assignment.unit_id,
|
||||
location_id=location.id,
|
||||
project_id=project_id,
|
||||
device_type=reservation.device_type or "seismograph",
|
||||
status="active",
|
||||
notes=f"Power: {assignment.power_type}" if assignment.power_type else None,
|
||||
)
|
||||
db.add(unit_assignment)
|
||||
units_assigned += 1
|
||||
|
||||
db.commit()
|
||||
|
||||
logger.info(f"Promoted reservation '{reservation.name}' to project {project_id}")
|
||||
|
||||
return {
|
||||
"success": True,
|
||||
"project_id": project_id,
|
||||
"project_name": reservation.name,
|
||||
"locations_created": locations_created,
|
||||
"units_assigned": units_assigned,
|
||||
}
|
||||
|
||||
@@ -646,22 +646,20 @@ def get_available_units_for_period(
|
||||
if unit.id in reserved_unit_ids:
|
||||
continue
|
||||
|
||||
# Check calibration through end of period
|
||||
if not unit.last_calibrated:
|
||||
continue # Needs calibration
|
||||
|
||||
if unit.last_calibrated:
|
||||
expiry_date = unit.last_calibrated + timedelta(days=365)
|
||||
if expiry_date <= end_date:
|
||||
continue # Calibration expires during period
|
||||
|
||||
cal_status = get_calibration_status(unit, end_date, warning_days)
|
||||
else:
|
||||
expiry_date = None
|
||||
cal_status = "needs_calibration"
|
||||
|
||||
available_units.append({
|
||||
"id": unit.id,
|
||||
"last_calibrated": unit.last_calibrated.isoformat(),
|
||||
"expiry_date": expiry_date.isoformat(),
|
||||
"last_calibrated": unit.last_calibrated.isoformat() if unit.last_calibrated else None,
|
||||
"expiry_date": expiry_date.isoformat() if expiry_date else None,
|
||||
"calibration_status": cal_status,
|
||||
"deployed": unit.deployed,
|
||||
"out_for_calibration": unit.out_for_calibration or False,
|
||||
"note": unit.note or ""
|
||||
})
|
||||
|
||||
|
||||
@@ -85,7 +85,7 @@
|
||||
|
||||
<div class="flex h-screen overflow-hidden">
|
||||
<!-- Sidebar (Responsive) -->
|
||||
<aside id="sidebar" class="sidebar w-64 bg-white dark:bg-slate-800 shadow-lg flex flex-col">
|
||||
<aside id="sidebar" class="sidebar w-64 bg-white dark:bg-slate-800 shadow-lg flex flex-col{% if request.query_params.get('embed') == '1' %} hidden{% endif %}">
|
||||
<!-- Logo -->
|
||||
<div class="p-6 border-b border-gray-200 dark:border-gray-700">
|
||||
<a href="/" class="block">
|
||||
@@ -155,7 +155,7 @@
|
||||
<svg class="w-5 h-5 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
|
||||
</svg>
|
||||
Fleet Calendar
|
||||
Reservation Planner
|
||||
</a>
|
||||
|
||||
<a href="/settings" class="flex items-center px-4 py-3 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 {% if request.url.path == '/settings' %}bg-gray-100 dark:bg-gray-700{% endif %}">
|
||||
@@ -193,14 +193,14 @@
|
||||
|
||||
<!-- Main content -->
|
||||
<main class="main-content flex-1 overflow-y-auto">
|
||||
<div class="p-8">
|
||||
<div class="{% if request.query_params.get('embed') == '1' %}p-4{% else %}p-8{% endif %}">
|
||||
{% block content %}{% endblock %}
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
<!-- Bottom Navigation (Mobile Only) -->
|
||||
<nav class="bottom-nav">
|
||||
<nav class="bottom-nav{% if request.query_params.get('embed') == '1' %} hidden{% endif %}">
|
||||
<div class="grid grid-cols-4 h-16">
|
||||
<button id="hamburgerBtn" class="bottom-nav-btn" onclick="toggleMenu()" aria-label="Menu">
|
||||
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
|
||||
@@ -223,10 +223,23 @@
|
||||
<h1 class="text-3xl font-bold text-gray-900 dark:text-white">Fleet Calendar</h1>
|
||||
<p class="text-gray-600 dark:text-gray-400 mt-1">Plan unit assignments and track calibrations</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- View Tabs -->
|
||||
<div class="flex rounded-lg bg-gray-100 dark:bg-gray-700 p-1 mb-6 w-fit">
|
||||
<button id="tab-btn-planner" onclick="switchTab('planner')"
|
||||
class="px-4 py-2 rounded-md text-sm font-medium transition-colors bg-white dark:bg-slate-600 text-gray-900 dark:text-white shadow">
|
||||
Reservation Planner
|
||||
</button>
|
||||
<button id="tab-btn-calendar" onclick="switchTab('calendar')"
|
||||
class="px-4 py-2 rounded-md text-sm font-medium transition-colors text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white">
|
||||
Calendar
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div id="view-calendar" class="hidden">
|
||||
|
||||
<!-- Summary Stats -->
|
||||
<div class="grid grid-cols-2 md:grid-cols-5 gap-4 mb-6">
|
||||
<div class="bg-white dark:bg-slate-800 rounded-lg p-4 shadow">
|
||||
@@ -375,11 +388,233 @@
|
||||
<div class="bg-white dark:bg-slate-800 rounded-xl shadow-lg p-6 mb-8">
|
||||
<h2 class="text-xl font-semibold text-gray-900 dark:text-white mb-4">Active Reservations</h2>
|
||||
<div id="reservations-list"
|
||||
hx-get="/api/fleet-calendar/reservations-list?year={{ start_year }}&month={{ start_month }}&device_type={{ device_type }}"
|
||||
hx-trigger="calendar-reservations-refresh from:body"
|
||||
hx-swap="innerHTML">
|
||||
<p class="text-gray-500">Loading reservations...</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div><!-- end #view-calendar -->
|
||||
|
||||
<!-- Reservation Planner View -->
|
||||
<div id="view-planner">
|
||||
<div class="flex flex-col lg:flex-row gap-6 min-h-[70vh]">
|
||||
|
||||
<!-- LEFT PANEL: sub-tabs switch content here only -->
|
||||
<div class="lg:w-2/5 flex flex-col gap-4">
|
||||
|
||||
<!-- Sub-tab bar -->
|
||||
<div class="flex rounded-lg bg-gray-100 dark:bg-gray-700 p-1 w-fit">
|
||||
<button id="ptab-btn-list" onclick="switchPlannerTab('list')"
|
||||
class="px-4 py-2 rounded-md text-sm font-medium transition-colors bg-white dark:bg-slate-600 text-gray-900 dark:text-white shadow">
|
||||
Reservations
|
||||
</button>
|
||||
<button id="ptab-btn-assign" onclick="switchPlannerTab('assign')"
|
||||
class="px-4 py-2 rounded-md text-sm font-medium transition-colors text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white">
|
||||
Assign Units
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Sub-tab: Reservations list -->
|
||||
<div id="ptab-list" class="bg-white dark:bg-slate-800 rounded-xl shadow-lg p-6 flex flex-col gap-4">
|
||||
<div class="flex items-center justify-between">
|
||||
<h2 class="text-xl font-semibold text-gray-900 dark:text-white">Project Reservations</h2>
|
||||
<button onclick="plannerReset(); switchPlannerTab('assign')"
|
||||
class="px-3 py-1.5 bg-blue-600 text-white rounded-lg hover:bg-blue-700 text-sm flex items-center gap-1.5">
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/>
|
||||
</svg>
|
||||
New
|
||||
</button>
|
||||
</div>
|
||||
<div id="planner-reservations-list" class="overflow-y-visible"
|
||||
hx-get="/api/fleet-calendar/reservations-list?year={{ start_year }}&month={{ start_month }}&device_type={{ device_type }}"
|
||||
hx-trigger="load"
|
||||
hx-swap="innerHTML">
|
||||
<p class="text-gray-500">Loading reservations...</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Sub-tab: Assign Units form -->
|
||||
<div id="ptab-assign" class="hidden bg-white dark:bg-slate-800 rounded-xl shadow-lg p-6 flex flex-col gap-4 flex-1">
|
||||
<div class="flex items-center gap-3">
|
||||
<button onclick="switchPlannerTab('list')" class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300" title="Back to reservations">
|
||||
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/>
|
||||
</svg>
|
||||
</button>
|
||||
<h2 class="text-xl font-semibold text-gray-900 dark:text-white" id="planner-form-title">New Reservation</h2>
|
||||
</div>
|
||||
|
||||
<!-- Metadata fields: only shown when creating a new reservation -->
|
||||
<div id="planner-meta-fields">
|
||||
|
||||
<!-- Name -->
|
||||
<div class="mb-4">
|
||||
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Job / Reservation Name *</label>
|
||||
<input type="text" id="planner-name" placeholder="e.g., Pine Street – May Deployment"
|
||||
class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-slate-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-blue-500">
|
||||
</div>
|
||||
|
||||
<!-- Device Type -->
|
||||
<div class="mb-4">
|
||||
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Device Type *</label>
|
||||
<div class="flex rounded-lg border border-gray-300 dark:border-gray-600 overflow-hidden">
|
||||
<label class="flex-1 cursor-pointer">
|
||||
<input type="radio" name="planner_device_type" value="seismograph" checked class="sr-only peer" onchange="plannerDatesChanged()">
|
||||
<span class="block text-center px-4 py-2 text-sm font-medium bg-white dark:bg-slate-700 peer-checked:bg-blue-600 peer-checked:text-white text-gray-700 dark:text-gray-300 transition-colors">
|
||||
Seismograph
|
||||
</span>
|
||||
</label>
|
||||
<label class="flex-1 cursor-pointer border-l border-gray-300 dark:border-gray-600">
|
||||
<input type="radio" name="planner_device_type" value="slm" class="sr-only peer" onchange="plannerDatesChanged()">
|
||||
<span class="block text-center px-4 py-2 text-sm font-medium bg-white dark:bg-slate-700 peer-checked:bg-blue-600 peer-checked:text-white text-gray-700 dark:text-gray-300 transition-colors">
|
||||
Sound Level Meter
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Project -->
|
||||
<div class="mb-4">
|
||||
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Link to Project (optional)</label>
|
||||
<select id="planner-project"
|
||||
class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-slate-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-blue-500">
|
||||
<option value="">-- No project --</option>
|
||||
{% for project in projects %}
|
||||
<option value="{{ project.id }}">{{ project.name }}</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<!-- Dates -->
|
||||
<div class="grid grid-cols-2 gap-3 mb-4">
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Start Date *</label>
|
||||
<input type="date" id="planner-start"
|
||||
onchange="plannerDatesChanged()"
|
||||
class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-slate-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-blue-500">
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">End Date *</label>
|
||||
<input type="date" id="planner-end"
|
||||
onchange="plannerDatesChanged()"
|
||||
class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-slate-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-blue-500">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Color -->
|
||||
<div class="mb-4">
|
||||
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Color</label>
|
||||
<div class="flex gap-2" id="planner-colors">
|
||||
{% for color in ['#3B82F6', '#10B981', '#F59E0B', '#EF4444', '#8B5CF6', '#EC4899'] %}
|
||||
<label class="cursor-pointer">
|
||||
<input type="radio" name="planner_color" value="{{ color }}" {% if loop.first %}checked{% endif %} class="sr-only peer">
|
||||
<span class="block w-7 h-7 rounded-full peer-checked:ring-2 peer-checked:ring-offset-2 peer-checked:ring-gray-900 dark:peer-checked:ring-white"
|
||||
style="background-color: {{ color }}"></span>
|
||||
</label>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Estimated Units Needed -->
|
||||
<div class="mb-4">
|
||||
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Estimated Units Needed</label>
|
||||
<input type="number" id="planner-est-units" min="1" placeholder="e.g. 5"
|
||||
class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-slate-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-blue-500">
|
||||
</div>
|
||||
|
||||
</div><!-- end #planner-meta-fields -->
|
||||
|
||||
<!-- Monitoring Locations -->
|
||||
<div class="flex items-center justify-between mt-2">
|
||||
<h3 class="text-sm font-semibold text-gray-700 dark:text-gray-300">Monitoring Locations</h3>
|
||||
<button onclick="plannerAddSlot()"
|
||||
class="text-xs px-2 py-1 bg-gray-100 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-600 rounded text-gray-700 dark:text-gray-300">
|
||||
+ Add Location
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div id="planner-slots" class="flex flex-col gap-2 overflow-y-auto max-h-72">
|
||||
<!-- Locations rendered by JS -->
|
||||
<p class="text-sm text-gray-400 dark:text-gray-500 text-center py-4" id="planner-slots-empty">
|
||||
Set dates and click "+ Add Location" to start adding units
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Notes -->
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Notes (optional)</label>
|
||||
<textarea id="planner-notes" rows="2" placeholder="Optional notes"
|
||||
class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-slate-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-blue-500"></textarea>
|
||||
</div>
|
||||
|
||||
<!-- Save -->
|
||||
<div class="flex gap-3 pt-2 border-t border-gray-200 dark:border-gray-700 mt-auto">
|
||||
<button onclick="plannerReset()"
|
||||
class="px-4 py-2 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg text-sm">
|
||||
Clear
|
||||
</button>
|
||||
<button onclick="plannerSave()"
|
||||
class="flex-1 px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 text-sm font-medium" id="planner-save-btn">
|
||||
Save Reservation
|
||||
</button>
|
||||
</div>
|
||||
</div><!-- end ptab-assign -->
|
||||
|
||||
</div><!-- end left panel -->
|
||||
|
||||
<!-- RIGHT: Available Units (always visible) -->
|
||||
<div class="lg:w-3/5 bg-white dark:bg-slate-800 rounded-xl shadow-lg p-6 flex flex-col gap-4">
|
||||
<div class="flex items-center justify-between flex-wrap gap-2">
|
||||
<h2 class="text-xl font-semibold text-gray-900 dark:text-white">Available Units
|
||||
<span id="planner-avail-count" class="ml-2 text-sm font-normal text-gray-500 dark:text-gray-400"></span>
|
||||
</h2>
|
||||
<div class="flex items-center gap-3 text-sm text-gray-600 dark:text-gray-400">
|
||||
<label class="flex items-center gap-1.5 cursor-pointer">
|
||||
<input type="checkbox" id="planner-deployed-only" onchange="plannerFilterUnits()"
|
||||
class="rounded border-gray-300 dark:border-gray-600 text-blue-600 focus:ring-blue-500">
|
||||
Deployed only
|
||||
</label>
|
||||
<label class="flex items-center gap-1.5 cursor-pointer">
|
||||
<input type="checkbox" id="planner-benched-only" onchange="plannerFilterUnits()"
|
||||
class="rounded border-gray-300 dark:border-gray-600 text-blue-600 focus:ring-blue-500">
|
||||
Benched only
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<input type="text" id="planner-search" placeholder="Search by unit ID..."
|
||||
oninput="plannerFilterUnits()"
|
||||
class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-slate-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-blue-500">
|
||||
|
||||
<div id="planner-units-list" class="flex flex-col gap-1 overflow-y-auto flex-1" style="max-height: 55vh;">
|
||||
<p class="text-sm text-gray-400 dark:text-gray-500 text-center py-8" id="planner-units-placeholder">
|
||||
Set start and end dates to see available units
|
||||
</p>
|
||||
</div>
|
||||
</div><!-- end right panel -->
|
||||
|
||||
</div><!-- end flex row -->
|
||||
</div><!-- end view-planner -->
|
||||
|
||||
<!-- Unit Detail Modal (planner) -->
|
||||
<div id="unit-detail-modal" class="fixed inset-0 z-50 hidden">
|
||||
<div class="fixed inset-0 bg-black/50" onclick="closeUnitDetailModal()"></div>
|
||||
<div class="fixed inset-0 flex items-center justify-center p-4">
|
||||
<div class="bg-white dark:bg-slate-800 rounded-xl shadow-2xl w-full max-w-4xl max-h-[90vh] flex flex-col" onclick="event.stopPropagation()">
|
||||
<div class="flex items-center justify-between p-4 border-b border-gray-200 dark:border-gray-700">
|
||||
<h3 class="font-semibold text-gray-900 dark:text-white" id="unit-detail-modal-title">Unit Detail</h3>
|
||||
<button onclick="closeUnitDetailModal()" class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300">
|
||||
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<iframe id="unit-detail-iframe" src="" class="flex-1 rounded-b-xl" style="min-height: 70vh; border: none;"></iframe>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Day Detail Slide Panel -->
|
||||
@@ -391,6 +626,37 @@
|
||||
</div>
|
||||
|
||||
<!-- Reservation Modal -->
|
||||
<!-- Promote to Project Modal -->
|
||||
<div id="promote-modal" class="fixed inset-0 z-50 hidden">
|
||||
<div class="fixed inset-0 bg-black/50" onclick="closePromoteModal()"></div>
|
||||
<div class="fixed inset-0 flex items-center justify-center p-4">
|
||||
<div class="bg-white dark:bg-slate-800 rounded-xl shadow-2xl max-w-md w-full" onclick="event.stopPropagation()">
|
||||
<div class="p-6">
|
||||
<h2 class="text-lg font-semibold text-gray-900 dark:text-white mb-1">Promote to Project</h2>
|
||||
<p id="promote-modal-subtitle" class="text-sm text-gray-500 dark:text-gray-400 mb-4"></p>
|
||||
<div class="flex flex-col gap-3">
|
||||
<div>
|
||||
<label class="block text-xs font-medium text-gray-600 dark:text-gray-400 mb-1">Project Number <span class="text-gray-400">(optional)</span></label>
|
||||
<input id="promote-project-number" type="text" placeholder="e.g. 2567-26"
|
||||
class="w-full px-3 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-slate-700 text-gray-900 dark:text-white text-sm focus:ring-2 focus:ring-blue-500">
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-xs font-medium text-gray-600 dark:text-gray-400 mb-1">Client Name <span class="text-gray-400">(optional)</span></label>
|
||||
<input id="promote-client-name" type="text" placeholder="e.g. PJ Dick"
|
||||
class="w-full px-3 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-slate-700 text-gray-900 dark:text-white text-sm focus:ring-2 focus:ring-blue-500">
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-xs text-gray-400 dark:text-gray-500 mt-3">This will create a new project with monitoring locations and unit assignments matching this reservation.</p>
|
||||
<div id="promote-error" class="hidden mt-3 p-2 bg-red-50 dark:bg-red-900/20 text-red-600 dark:text-red-400 text-sm rounded"></div>
|
||||
<div class="flex gap-3 mt-5">
|
||||
<button onclick="closePromoteModal()" class="flex-1 px-4 py-2 rounded-lg border border-gray-300 dark:border-gray-600 text-sm text-gray-600 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-slate-700">Cancel</button>
|
||||
<button onclick="confirmPromote()" class="flex-1 px-4 py-2 rounded-lg bg-emerald-600 hover:bg-emerald-700 text-white text-sm font-medium">Create Project</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="reservation-modal" class="fixed inset-0 z-50 hidden">
|
||||
<div class="fixed inset-0 bg-black/50" onclick="closeReservationModal()"></div>
|
||||
<div class="fixed inset-0 flex items-center justify-center p-4">
|
||||
@@ -616,6 +882,38 @@ 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');
|
||||
if (isHidden) {
|
||||
detail.classList.remove('hidden');
|
||||
detail.style.display = 'block';
|
||||
} else {
|
||||
detail.classList.add('hidden');
|
||||
detail.style.display = 'none';
|
||||
}
|
||||
if (chevron) chevron.style.transform = isHidden ? 'rotate(180deg)' : '';
|
||||
}
|
||||
|
||||
|
||||
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}`);
|
||||
@@ -669,6 +967,52 @@ async function editReservation(id) {
|
||||
}
|
||||
}
|
||||
|
||||
// ---- Promote to Project ----
|
||||
let promoteReservationId = null;
|
||||
|
||||
function openPromoteModal(id, name) {
|
||||
promoteReservationId = id;
|
||||
document.getElementById('promote-modal-subtitle').textContent = `"${name}" will become a tracked project.`;
|
||||
document.getElementById('promote-project-number').value = '';
|
||||
document.getElementById('promote-client-name').value = '';
|
||||
document.getElementById('promote-error').classList.add('hidden');
|
||||
document.getElementById('promote-modal').classList.remove('hidden');
|
||||
}
|
||||
|
||||
function closePromoteModal() {
|
||||
document.getElementById('promote-modal').classList.add('hidden');
|
||||
promoteReservationId = null;
|
||||
}
|
||||
|
||||
async function confirmPromote() {
|
||||
if (!promoteReservationId) return;
|
||||
const btn = document.querySelector('#promote-modal button[onclick="confirmPromote()"]');
|
||||
const errEl = document.getElementById('promote-error');
|
||||
btn.textContent = 'Creating…';
|
||||
btn.disabled = true;
|
||||
errEl.classList.add('hidden');
|
||||
try {
|
||||
const resp = await fetch(`/api/fleet-calendar/reservations/${promoteReservationId}/promote-to-project`, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({
|
||||
project_number: document.getElementById('promote-project-number').value.trim() || null,
|
||||
client_name: document.getElementById('promote-client-name').value.trim() || null,
|
||||
})
|
||||
});
|
||||
const result = await resp.json();
|
||||
if (!resp.ok) throw new Error(result.detail || 'Failed to promote');
|
||||
closePromoteModal();
|
||||
// Navigate to the new project page
|
||||
window.location.href = `/projects/${result.project_id}`;
|
||||
} catch (e) {
|
||||
errEl.textContent = e.message;
|
||||
errEl.classList.remove('hidden');
|
||||
btn.textContent = 'Create Project';
|
||||
btn.disabled = false;
|
||||
}
|
||||
}
|
||||
|
||||
function closeReservationModal() {
|
||||
document.getElementById('reservation-modal').classList.add('hidden');
|
||||
document.getElementById('reservation-form').reset();
|
||||
@@ -869,5 +1213,458 @@ 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');
|
||||
if (tab === 'calendar') htmx.trigger(document.body, 'calendar-reservations-refresh');
|
||||
|
||||
['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, location_name: 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 = `<span class="text-xs px-1.5 py-0.5 bg-amber-50 dark:bg-amber-900/20 text-amber-600 dark:text-amber-400 rounded border border-amber-200 dark:border-amber-800" title="Will need swap during job">cal expires ${expiryStr}</span>`;
|
||||
}
|
||||
}
|
||||
|
||||
const deployedBadge = unit.deployed
|
||||
? '<span class="text-xs px-1.5 py-0.5 bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-400 rounded">Deployed</span>'
|
||||
: '<span class="text-xs px-1.5 py-0.5 bg-gray-100 dark:bg-gray-700 text-gray-500 dark:text-gray-400 rounded">Benched</span>';
|
||||
|
||||
row.innerHTML = `
|
||||
<div class="flex flex-col gap-0.5 min-w-0">
|
||||
<div class="flex items-center gap-2 flex-wrap">
|
||||
<button onclick="event.stopPropagation(); openUnitDetailModal('${unit.id}')"
|
||||
class="font-medium text-blue-600 dark:text-blue-400 hover:underline text-sm">${unit.id}</button>
|
||||
${deployedBadge}
|
||||
${expiryWarning}
|
||||
</div>
|
||||
<span class="text-xs text-gray-400 dark:text-gray-500">Cal: ${calDate}</span>
|
||||
</div>
|
||||
<div class="flex-shrink-0 ml-2">
|
||||
${isSlotted
|
||||
? '<span class="text-xs text-blue-600 dark:text-blue-400 font-medium">Assigned</span>'
|
||||
: '<button class="text-xs px-2 py-1 bg-blue-600 text-white rounded hover:bg-blue-700 whitespace-nowrap">Assign →</button>'
|
||||
}
|
||||
</div>
|
||||
`;
|
||||
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, location_name: 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, location_name: 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 plannerSetLocationName(idx, value) {
|
||||
plannerState.slots[idx].location_name = 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 = `
|
||||
<select onchange="plannerSetPowerType(${idx}, this.value)"
|
||||
class="text-xs px-2 py-1 border border-gray-300 dark:border-gray-600 rounded bg-white dark:bg-slate-700 text-gray-700 dark:text-gray-300 focus:ring-1 focus:ring-blue-500">
|
||||
<option value="" ${!slot.power_type ? 'selected' : ''}>— power —</option>
|
||||
<option value="ac" ${slot.power_type === 'ac' ? 'selected' : ''}>A/C Power</option>
|
||||
<option value="solar" ${slot.power_type === 'solar' ? 'selected' : ''}>Solar</option>
|
||||
</select>`;
|
||||
|
||||
const dragHandle = slot.unit_id
|
||||
? `<span class="text-gray-300 dark:text-gray-600 cursor-grab active:cursor-grabbing select-none" title="Drag to reorder">⠿</span>`
|
||||
: `<span class="w-4"></span>`;
|
||||
|
||||
row.innerHTML = `
|
||||
<div class="flex items-center gap-2">
|
||||
${dragHandle}
|
||||
<span class="text-sm text-gray-500 dark:text-gray-400 w-16 flex-shrink-0">Loc. ${idx + 1}</span>
|
||||
${slot.unit_id
|
||||
? `<span class="flex-1 font-medium text-gray-900 dark:text-white">${slot.unit_id}</span>
|
||||
${powerSelect}
|
||||
<button onclick="plannerClearSlot(${idx})" class="text-xs text-gray-400 hover:text-red-500 flex-shrink-0" title="Remove unit">✕</button>`
|
||||
: `<span class="flex-1 text-sm text-gray-400 dark:text-gray-500 italic">Empty — click a unit</span>
|
||||
${powerSelect}
|
||||
<button onclick="plannerRemoveSlot(${idx})" class="text-xs text-gray-400 hover:text-red-500 flex-shrink-0" title="Remove location">✕</button>`
|
||||
}
|
||||
</div>
|
||||
<div class="pl-8 flex flex-col gap-1 mt-1">
|
||||
<input type="text" value="${slot.location_name ? slot.location_name.replace(/"/g, '"') : ''}"
|
||||
oninput="plannerSetLocationName(${idx}, this.value)"
|
||||
placeholder="Location name (e.g. North Gate)"
|
||||
class="w-full text-xs px-2 py-1 border border-gray-200 dark:border-gray-600 rounded bg-white dark:bg-slate-700 text-gray-600 dark:text-gray-400 placeholder-gray-300 dark:placeholder-gray-600 focus:ring-1 focus:ring-blue-500">
|
||||
<input type="text" value="${slot.notes ? slot.notes.replace(/"/g, '"') : ''}"
|
||||
oninput="plannerSetSlotNotes(${idx}, this.value)"
|
||||
placeholder="Location notes (optional)"
|
||||
class="w-full text-xs px-2 py-1 border border-gray-200 dark:border-gray-600 rounded bg-white dark:bg-slate-700 text-gray-600 dark:text-gray-400 placeholder-gray-300 dark:placeholder-gray-600 focus:ring-1 focus:ring-blue-500">
|
||||
</div>
|
||||
`;
|
||||
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';
|
||||
document.getElementById('planner-meta-fields').style.display = '';
|
||||
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 = {};
|
||||
const locationNotes = {};
|
||||
const locationNames = {};
|
||||
const slotIndices = {};
|
||||
filledSlots.forEach((s, i) => {
|
||||
if (s.power_type) powerTypes[s.unit_id] = s.power_type;
|
||||
if (s.notes) locationNotes[s.unit_id] = s.notes;
|
||||
if (s.location_name) locationNames[s.unit_id] = s.location_name;
|
||||
slotIndices[s.unit_id] = i;
|
||||
});
|
||||
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, location_notes: locationNotes, location_names: locationNames, slot_indices: slotIndices })
|
||||
}
|
||||
);
|
||||
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, location_name: u.location_name || null });
|
||||
}
|
||||
|
||||
const titleEl = document.getElementById('planner-form-title');
|
||||
if (titleEl) titleEl.textContent = res.name;
|
||||
document.getElementById('planner-save-btn').textContent = 'Save Changes';
|
||||
document.getElementById('planner-meta-fields').style.display = 'none';
|
||||
plannerRenderSlots();
|
||||
if (res.start_date && res.end_date) plannerLoadUnits();
|
||||
} catch (e) {
|
||||
console.error('Error loading reservation for planner', e);
|
||||
}
|
||||
}
|
||||
switchTab('planner');
|
||||
switchPlannerTab('assign');
|
||||
}
|
||||
</script>
|
||||
{% endblock %}
|
||||
|
||||
@@ -1,22 +1,36 @@
|
||||
<!-- Reservations List -->
|
||||
{% if reservations %}
|
||||
<div class="space-y-3">
|
||||
<div class="space-y-2">
|
||||
{% for item in reservations %}
|
||||
{% set res = item.reservation %}
|
||||
<div class="flex items-center justify-between p-4 rounded-lg border border-gray-200 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-700/50 transition-colors"
|
||||
{% set card_id = "res-card-" ~ res.id %}
|
||||
{% set detail_id = "res-detail-" ~ res.id %}
|
||||
|
||||
<div class="rounded-lg border border-gray-200 dark:border-gray-700"
|
||||
style="border-left: 4px solid {{ res.color }};">
|
||||
<div class="flex-1">
|
||||
<div class="flex items-center gap-2">
|
||||
|
||||
<!-- Header row (always visible, clickable) -->
|
||||
<div class="res-card-header flex items-center justify-between p-4 cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-700/50 transition-colors select-none"
|
||||
data-res-id="{{ res.id }}"
|
||||
onclick="toggleResCard('{{ res.id }}')">
|
||||
|
||||
<div class="flex-1 min-w-0">
|
||||
<div class="flex items-center gap-2 flex-wrap">
|
||||
<h3 class="font-semibold text-gray-900 dark:text-white">{{ res.name }}</h3>
|
||||
{% if res.device_type == 'slm' %}
|
||||
<span class="px-2 py-0.5 text-xs font-medium bg-purple-100 dark:bg-purple-900/30 text-purple-700 dark:text-purple-400 rounded">SLM</span>
|
||||
{% else %}
|
||||
<span class="px-2 py-0.5 text-xs font-medium bg-blue-100 dark:bg-blue-900/30 text-blue-700 dark:text-blue-400 rounded">Seismograph</span>
|
||||
{% endif %}
|
||||
{% if item.has_conflicts %}
|
||||
<span class="px-2 py-0.5 text-xs font-medium bg-red-100 dark:bg-red-900/30 text-red-700 dark:text-red-400 rounded-full"
|
||||
title="{{ item.conflict_count }} unit(s) have calibration expiring during this job">
|
||||
{{ item.conflict_count }} conflict{{ 's' if item.conflict_count != 1 else '' }}
|
||||
<span class="px-2 py-0.5 text-xs font-medium bg-amber-100 dark:bg-amber-900/30 text-amber-700 dark:text-amber-400 rounded"
|
||||
title="{{ item.conflict_count }} unit(s) will need a calibration swap during this job">
|
||||
{{ item.conflict_count }} cal swap{{ 's' if item.conflict_count != 1 else '' }}
|
||||
</span>
|
||||
{% endif %}
|
||||
</div>
|
||||
<p class="text-sm text-gray-500 dark:text-gray-400 mt-1">
|
||||
{{ res.start_date.strftime('%b %d, %Y') }} -
|
||||
<p class="text-sm text-gray-500 dark:text-gray-400 mt-0.5">
|
||||
{{ res.start_date.strftime('%b %d, %Y') }} –
|
||||
{% if res.end_date %}
|
||||
{{ res.end_date.strftime('%b %d, %Y') }}
|
||||
{% elif res.end_date_tbd %}
|
||||
@@ -28,73 +42,135 @@
|
||||
<span class="text-yellow-600 dark:text-yellow-400">Ongoing</span>
|
||||
{% endif %}
|
||||
</p>
|
||||
{% if res.notes %}
|
||||
<p class="text-sm text-gray-400 dark:text-gray-500 mt-1">{{ res.notes }}</p>
|
||||
{% endif %}
|
||||
</div>
|
||||
<div class="text-right ml-4">
|
||||
<p class="text-lg font-bold text-gray-900 dark:text-white">
|
||||
{% if res.assignment_type == 'quantity' %}
|
||||
{{ item.assigned_count }}/{{ res.quantity_needed or '?' }}
|
||||
|
||||
<!-- Unit count -->
|
||||
<div class="text-right mx-4 flex-shrink-0">
|
||||
<p class="text-base font-bold text-gray-900 dark:text-white">
|
||||
{% if res.quantity_needed %}
|
||||
{{ item.assigned_count }}/{{ res.quantity_needed }}
|
||||
{% else %}
|
||||
{{ item.assigned_count }}
|
||||
{% endif %}
|
||||
</p>
|
||||
<p class="text-xs text-gray-500 dark:text-gray-400">
|
||||
{{ 'units needed' if res.assignment_type == 'quantity' else 'units assigned' }}
|
||||
{{ 'assigned' if item.assigned_count != 1 else 'assigned' }}
|
||||
{% if res.quantity_needed %} needed{% endif %}
|
||||
</p>
|
||||
</div>
|
||||
<div class="ml-4 flex items-center gap-2">
|
||||
<button onclick="editReservation('{{ res.id }}')"
|
||||
|
||||
<!-- Action buttons (stop propagation so clicks don't toggle card) -->
|
||||
<div class="flex items-center gap-1 flex-shrink-0">
|
||||
<button onclick="event.stopPropagation(); openPlanner('{{ res.id }}')"
|
||||
class="p-2 text-gray-400 hover:text-green-600 dark:hover:text-green-400 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700"
|
||||
title="Plan units">
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01"/>
|
||||
</svg>
|
||||
</button>
|
||||
<button onclick="event.stopPropagation(); openPromoteModal('{{ res.id }}', '{{ res.name }}')"
|
||||
class="p-2 text-gray-400 hover:text-emerald-600 dark:hover:text-emerald-400 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700"
|
||||
title="Promote to Project">
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 10l7-7m0 0l7 7m-7-7v18"/>
|
||||
</svg>
|
||||
</button>
|
||||
<button onclick="event.stopPropagation(); editReservation('{{ res.id }}')"
|
||||
class="p-2 text-gray-400 hover:text-blue-600 dark:hover:text-blue-400 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700"
|
||||
title="Edit reservation">
|
||||
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
title="Edit">
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/>
|
||||
</svg>
|
||||
</button>
|
||||
<button onclick="deleteReservation('{{ res.id }}', '{{ res.name }}')"
|
||||
<button onclick="event.stopPropagation(); deleteReservation('{{ res.id }}', '{{ res.name }}')"
|
||||
class="p-2 text-gray-400 hover:text-red-600 dark:hover:text-red-400 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700"
|
||||
title="Delete reservation">
|
||||
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
title="Delete">
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/>
|
||||
</svg>
|
||||
</button>
|
||||
<!-- Chevron (not in stopPropagation zone so clicking it still toggles the card) -->
|
||||
<svg id="chevron-{{ res.id }}" class="w-4 h-4 text-gray-400 transition-transform duration-200 ml-1 pointer-events-none" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Expandable detail panel -->
|
||||
<div id="{{ detail_id }}" class="hidden border-t border-gray-100 dark:border-gray-700 bg-gray-50 dark:bg-slate-800/60 px-4 py-3">
|
||||
|
||||
{% if res.notes %}
|
||||
<p class="text-sm text-gray-500 dark:text-gray-400 mb-3 italic">{{ res.notes }}</p>
|
||||
{% endif %}
|
||||
|
||||
<div class="grid grid-cols-2 gap-x-6 gap-y-1 text-sm mb-3">
|
||||
{% if res.quantity_needed %}
|
||||
<div class="text-gray-500 dark:text-gray-400">Est. units needed</div>
|
||||
<div class="font-medium text-gray-800 dark:text-gray-200">{{ res.quantity_needed }}</div>
|
||||
{% endif %}
|
||||
<div class="text-gray-500 dark:text-gray-400">Assigned</div>
|
||||
<div class="font-medium text-gray-800 dark:text-gray-200">{{ item.assigned_count }} unit{{ 's' if item.assigned_count != 1 else '' }}</div>
|
||||
{% if res.quantity_needed and item.assigned_count < res.quantity_needed %}
|
||||
<div class="text-gray-500 dark:text-gray-400">Still needed</div>
|
||||
<div class="font-medium text-amber-600 dark:text-amber-400">{{ res.quantity_needed - item.assigned_count }} more</div>
|
||||
{% endif %}
|
||||
{% if item.has_conflicts %}
|
||||
<div class="text-gray-500 dark:text-gray-400">Cal swaps</div>
|
||||
<div class="font-medium text-amber-600 dark:text-amber-400">{{ item.conflict_count }} unit{{ 's' if item.conflict_count != 1 else '' }} will need swapping during job</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
{% if item.assigned_units %}
|
||||
<p class="text-xs font-semibold uppercase tracking-wide text-gray-400 dark:text-gray-500 mb-2">Monitoring Locations</p>
|
||||
<div class="flex flex-col gap-1">
|
||||
{% for u in item.assigned_units %}
|
||||
<div class="rounded bg-white dark:bg-slate-700 border border-gray-100 dark:border-gray-600 text-sm">
|
||||
<div class="flex items-center gap-3 px-3 py-1.5">
|
||||
<span class="text-gray-400 dark:text-gray-500 text-xs w-12 flex-shrink-0">Loc. {{ loop.index }}</span>
|
||||
<div class="flex flex-col min-w-0">
|
||||
{% if u.location_name %}
|
||||
<span class="text-xs font-semibold text-gray-700 dark:text-gray-300 truncate">{{ u.location_name }}</span>
|
||||
{% endif %}
|
||||
<button onclick="openUnitDetailModal('{{ u.id }}')"
|
||||
class="font-medium text-blue-600 dark:text-blue-400 hover:underline text-left text-sm">{{ u.id }}</button>
|
||||
</div>
|
||||
<span class="flex-1"></span>
|
||||
{% if u.power_type == 'ac' %}
|
||||
<span class="text-xs px-1.5 py-0.5 bg-blue-50 dark:bg-blue-900/20 text-blue-600 dark:text-blue-400 rounded">A/C</span>
|
||||
{% elif u.power_type == 'solar' %}
|
||||
<span class="text-xs px-1.5 py-0.5 bg-yellow-50 dark:bg-yellow-900/20 text-yellow-600 dark:text-yellow-400 rounded">Solar</span>
|
||||
{% endif %}
|
||||
{% if u.deployed %}
|
||||
<span class="text-xs px-1.5 py-0.5 bg-green-50 dark:bg-green-900/20 text-green-600 dark:text-green-400 rounded">Deployed</span>
|
||||
{% else %}
|
||||
<span class="text-xs px-1.5 py-0.5 bg-gray-100 dark:bg-gray-600 text-gray-500 dark:text-gray-400 rounded">Benched</span>
|
||||
{% endif %}
|
||||
{% if u.last_calibrated %}
|
||||
<span class="text-xs text-gray-400 dark:text-gray-500">Cal: {{ u.last_calibrated.strftime('%b %d, %Y') }}</span>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% if u.notes %}
|
||||
<p class="px-3 pb-1.5 text-xs text-gray-400 dark:text-gray-500 italic">{{ u.notes }}</p>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% else %}
|
||||
<p class="text-sm text-gray-400 dark:text-gray-500 italic">No units assigned yet. Click the clipboard icon to plan.</p>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
<script>
|
||||
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) {
|
||||
window.location.reload();
|
||||
} else {
|
||||
const data = await response.json();
|
||||
alert('Error: ' + (data.detail || 'Failed to delete'));
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error:', error);
|
||||
alert('Error deleting reservation');
|
||||
}
|
||||
}
|
||||
|
||||
// editReservation is defined in fleet_calendar.html
|
||||
</script>
|
||||
<!-- toggleResCard, deleteReservation, editReservation, openUnitDetailModal defined in fleet_calendar.html -->
|
||||
{% else %}
|
||||
<div class="text-center py-8">
|
||||
<svg class="w-12 h-12 mx-auto text-gray-400 dark:text-gray-500 mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/>
|
||||
</svg>
|
||||
<p class="text-gray-500 dark:text-gray-400">No reservations for {{ year }}</p>
|
||||
<p class="text-gray-500 dark:text-gray-400">No reservations found</p>
|
||||
<p class="text-sm text-gray-400 dark:text-gray-500 mt-1">Click "New Reservation" to plan unit assignments</p>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
Reference in New Issue
Block a user