Devlog #2: Frontend Dashboard Interface & Asset Orchestration

---

🛠️ Summary & Overview

Elevated the RoomOps Zero ecosystem by transitioning from a headless microservice layer to an interactive web dashboard. Resolved Starlette/FastAPI ASGI rendering exceptions, eliminated recursive 404 image load loops, and consolidated CSS styling alongside asynchronous JavaScript directly into the template architecture. The dashboard now renders real-time telemetry, handles local clock synchronization, and triggers remote hardware states directly through non-blocking API requests.

---

⚙️ Key Technical Updates

1. Template Engine & Middleware Refactoring (main.py)

• Resolved a breaking TypeError: unhashable type: 'dict' caused by Starlette context signature updates in newer FastAPI releases.
• Standardized Jinja2Templates rendering by explicitly passing keyword parameters (request=request).
• Updated UI endpoints to serve templates/index.html seamlessly alongside existing JSON routes.

2. Dashboard UI & Self-Contained Assets (templates/index.html)

• Built a dark-themed CSS interface featuring custom Flexbox dashboard layouts, action controls, and responsive widget containers.
• Embedded styling and frontend execution logic directly inside <style> and <script> blocks to bypass static pathing overhead and network latency.
• Implemented live client-side date/time formatting with automated per-second ticker loops.

3. Asynchronous Fetch Integration & Network Handling

• Abstracted API routing using window.location.origin to allow dynamic REST execution across varying local IPs and ports.
• Linked hardware action triggers (turn_on / turn_off) to POST /api/tapo/control payloads.
• Built automatic polling loops for environmental telemetry (GET /api/weather/{city}) with fallback status handlers.
• Fixed an infinite recursive onerror fallback loop by decoupling broken image streams and nullifying error handlers.

---

📡 Active Routes & UI Bindings

1. Served Web Interface

• Endpoint: GET /
• Response: Rendered Jinja2 HTML Dashboard (index.html)

2. Hardware & Telemetry Action Bindings

• Telemetry Trigger: fetch('${API_BASE_URL}/api/weather/kavala')
• Control Payload: POST /api/tapo/control with {"device_name": "l900", "action": "turn_on"}