67 lines
3.0 KiB
Markdown
67 lines
3.0 KiB
Markdown
# Implementation Plan: Room Editor Refactor (Unified Visualization)
|
|
|
|
**Objective:** Replace hardcoded seat maps with a unified, dynamic, and high-fidelity room visualization system that works across Admin and Student views.
|
|
|
|
**Background:**
|
|
Currently, the application uses a hardcoded `SeatMap.svelte` for Live Views and Student Check-ins, while using a dynamic `RoomCanvas.svelte` for editing. This leads to data mismatches and prevents users from using custom room layouts. This plan unifies the visualization layer.
|
|
|
|
---
|
|
|
|
## 1. Unified Visualization Component
|
|
|
|
### Task 1: Create `DynamicRoomView.svelte`
|
|
**Files to Create/Modify:**
|
|
- `frontend/src/lib/components/DynamicRoomView.svelte`
|
|
- (Optionally) Merge into `frontend/src/lib/RoomCanvas.svelte`
|
|
|
|
**Changes:**
|
|
- Create a read-only/interactive component that renders SVG layouts based on the `LayoutElement[]` data.
|
|
- **High Fidelity:** Implement the aesthetic details from the design handoff (rounded tables, specific seat styling, label positioning).
|
|
- **Responsive Scaling:** Implement an `autoScale` or `viewBox` based system so the room fills the available width on mobile and desktop without breaking coordinates.
|
|
- **Interaction Modes:**
|
|
- `mode="checkin"`: Seats are clickable for students.
|
|
- `mode="notes"`: Seats are clickable for tutors to open note editors.
|
|
- `mode="display"`: Read-only view for dashboard/monitoring.
|
|
|
|
---
|
|
|
|
## 2. Integration & Cleanup
|
|
|
|
### Task 2: Replace `SeatMap` in Admin Live View
|
|
**Files to Modify:**
|
|
- `frontend/src/routes/admin/live/[slotId]/+page.svelte`
|
|
|
|
**Changes:**
|
|
- Replace `SeatMap` with `DynamicRoomView`.
|
|
- Connect the `onSeatClick` event to the note-taking and manual attendance logic.
|
|
- Ensure attendance data (who sits where) is correctly overlaid on the dynamic layout.
|
|
|
|
### Task 3: Replace `SeatMap` in Student Check-in
|
|
**Files to Modify:**
|
|
- `frontend/src/routes/s/[code]/+page.svelte`
|
|
|
|
**Changes:**
|
|
- Replace `SeatMap` with `DynamicRoomView`.
|
|
- Connect seat selection to the `POST /api/checkin` API.
|
|
- Ensure the "current seat" (mySeatId) is visually highlighted in the dynamic view.
|
|
|
|
### Task 4: Deprecate `SeatMap.svelte`
|
|
**Files to Modify:**
|
|
- Delete `frontend/src/lib/components/SeatMap.svelte` once integration is verified.
|
|
|
|
---
|
|
|
|
## 3. Verification
|
|
|
|
### Automated Tests:
|
|
- `frontend/tests/checkin-dynamic.spec.ts`: E2E test to verify student check-in on a **custom-created** room layout.
|
|
- `frontend/tests/admin-live-dynamic.spec.ts`: E2E test to verify that tutors can see students on a **custom-created** room layout and click them to leave notes.
|
|
|
|
### Manual Verification:
|
|
1. Create a non-standard room layout in the Admin Editor (e.g., a "U" shape).
|
|
2. Create a session and slot using this room.
|
|
3. Open the Student Check-in link on a mobile device (browser simulation).
|
|
4. Verify the "U" shape is rendered correctly and scaled to fit the screen.
|
|
5. Check in as a student and verify the seat turns green.
|
|
6. Open the Tutor Live View on a desktop and verify the same student is visible on the same seat in the "U" shape.
|