Merge pull request #4 from radiantlab/FrontEnd

Created base React frontend and connected it to FastAPI backend

Author: CarlosVasquez04

.gitignore

@@ -216,4 +216,8 @@ svc/.env
 
 # API Docs
 docs/TintSpecifics.txt
-docs/TintSpecificAPIPages.pdf
+docs/TintSpecificAPIPages.pdf
+
+# web node and build
+web/node_modules/
+web/dist/

DEV-SETUP.md

@@ -0,0 +1,87 @@
+
+## What you need to install
+**Git** – Get it from [https://git-scm.com](https://git-scm.com)  
+Check installation:
+	git --version
+
+
+**Python 3.11 or newer** – Get it from [https://python.org](https://python.org)  
+On Windows, check “Add Python to PATH”.  
+Check installation:
+	python --version
+
+
+**Node.js (LTS) and NPM** – Get it from [https://nodejs.org](https://nodejs.org)  
+Check installation:
+	node --version
+	npm --version
+
+---
+
+## Repository setup
+Clone the repository and go inside
+	cd GlazingControlApp
+
+---
+
+## Run the service
+Open a terminal in the `svc` folder:
+	cd svc
+
+
+Create and activate a virtual environment:
+- **Windows PowerShell**
+	python -m venv .venv						
+	..venv\Scripts\Activate.ps1
+
+- **Windows CMD**
+	.venv\Scripts\activate
+	
+- **Mac/Linux**					
+	python3 -m venv .venv
+	source .venv/bin/activate
+
+
+Install packages:
+	pip install --upgrade pip
+	pip install -r requirements.txt
+
+
+Create your `.env` file from the example:
+- **Windows**		
+	copy .env.example .env
+
+- **Mac/Linux**
+	cp .env.example .env
+
+
+Start the server:
+	python main.py
+
+You should see Uvicorn running on port 8000.
+
+Open the API docs in a browser: http://127.0.0.1:8000/docs
+
+---
+
+## Run the web app
+Open a new terminal in the `web` folder:
+	cd web
+
+
+Install packages:
+	npm install
+
+
+Start the dev server:
+	npm run dev
+
+
+Open the link shown by Vite (usually http://127.0.0.1:5173).  
+You should see the control interface.
+
+Use the app:  
+- The header shows service status  
+- Pick a group, set a level, press **Set group**  
+- Move a slider on any panel and press **Apply**  
+- Press **Refresh** in the header to reload state  

OVERVIEW.md

@@ -0,0 +1,51 @@
+# SETUP AND MAP
+
+## Project overview
+Simple goal  
+Control tint levels for 18 facade panels and 2 skylights in the OSU trailer  
+FastAPI service in Python  
+React web app in TypeScript  
+Runs on your laptop today  
+Swap to the real trailer later
+
+---
+
+## File map and what each file does
+
+### Root
+* **README.md** – Top level summary and team list  
+* **OVERVIEW.md** – General Overview of each file
+* **DEV-SETUP.md** – Instructions for development setup 
+* **LICENSE** – License  
+* **CONTRIBUTING.md** – Rules for branches, reviews, commits, and CI  
+* **.gitignore** – Keeps build output, local env, and cache out of git  
+* **.github/PULL_REQUEST_TEMPLATE.md** – Pull request checklist and sections  
+* **.github/workflows/ci.yml** -  CI that echoes a message on push and pull request  
+* **docs/meeting_template.md** – Skeleton for meeting notes and action items  
+* **docs/quick_start_draft.md** – Early draft for a researcher quick start  
+
+### Service folder (svc)
+* **svc/main.py** – Starts FastAPI, mounts routes, enables CORS for the web app on port 5173  
+* **svc/requirements.txt** – Python packages used by the service  
+* **svc/.env.example** – Sample settings to copy to .env  
+* **svc/app/__init__.py** – Empty marker so Python treats app as a package  
+* **svc/app/config.py** – Reads env settings, mode (sim or real), file paths for saved data and audit log  
+* **svc/app/models.py** – Pydantic models for panels, groups, requests, and responses; snapshot and audit entry shapes  
+* **svc/app/routes.py** – API endpoints for the web app (GET health, GET panels, GET groups, POST commands/set-level)  
+* **svc/app/service.py** – Core logic layer; picks simulator in sim mode; enforces dwell time and writes audit  
+* **svc/app/simulator.py** – In-memory simulator with disk persistence; updates panel levels and saves snapshot  
+* **svc/app/state.py** – Load and save snapshot JSON; bootstrap default panels and groups; append one audit line per change  
+* **svc/tests/test_basic.py** – Tests health listing, dwell, and group updates  
+
+### Web folder (web)
+* **web/index.html** – Root HTML for the React app  
+* **web/package.json** – NPM scripts and dependencies  
+* **web/tsconfig.json** – TypeScript config with React JSX and Vite types  
+* **web/vite.config.ts** – Vite dev server config (port 5173)  
+* **web/.env.development** – Points the web app to the service at http://127.0.0.1:8000  
+* **web/src/env.d.ts** – Types for Vite env values  
+* **web/src/main.tsx** – React entry and mount  
+* **web/src/App.tsx** – Main page with status, group control, and panel grid  
+* **web/src/api.ts** – Small client for health, panels, groups, and tint commands  
+* **web/src/styles.css** – Theme layout for cards, sliders, chips, and header styling  
+* **web/src/components/PanelGrid.tsx** – Cards for each panel with a slider, quick chips, and apply  

svc/.env.example

@@ -0,0 +1,9 @@
+# service settings
+SVC_MODE=sim
+SVC_MIN_DWELL_SECONDS=20
+SVC_DATA_DIR=data
+
+# real vendor adapter placeholders  only used when SVC_MODE=real
+HALIO_API_URL=https://api.halio.com
+HALIO_SITE_ID=
+HALIO_API_KEY=

svc/main.py

@@ -1,17 +1,27 @@
 from __future__ import annotations
 import uvicorn
 from fastapi import FastAPI
+from fastapi.middleware.cors import CORSMiddleware
 from app.routes import router
 from app.state import bootstrap_default_if_empty
 
 def create_app() -> FastAPI:
-    # ensure seed data exists for the simulator on first run
     bootstrap_default_if_empty()
     app = FastAPI(title="ECG Control Service", version="0.1.0")
+
+    # CORS for local web dev
+    app.add_middleware(
+        CORSMiddleware,
+        allow_origins=["http://localhost:5173", "http://127.0.0.1:5173"],
+        allow_credentials=True,
+        allow_methods=["*"],
+        allow_headers=["*"],
+    )
+
     app.include_router(router)
     return app
 
 app = create_app()
 
 if __name__ == "__main__":
-    uvicorn.run("main:app", host="0.0.0.0", port=8000, reload=True)
+    uvicorn.run("main:app", host="0.0.0.0", port=8000, reload=True)

svc/requirements.txt

@@ -3,4 +3,5 @@ uvicorn==0.32.1
 pydantic==2.9.2
 httpx==0.27.2
 pytest==8.3.3
-requests==2.31.0
+python-dotenv==1.0.1
+requests==2.32.3

svc/svc/data/audit.json

@@ -1 +1,10 @@
 {"ts": 1760726759.5898983, "actor": "api", "target_type": "panel", "target_id": "P01", "level": 50, "applied_to": ["P01"], "result": "panel updated"}
+{"ts": 1761606135.4254916, "actor": "api", "target_type": "panel", "target_id": "P01", "level": 50, "applied_to": ["P01"], "result": "panel updated"}
+{"ts": 1761606147.8508916, "actor": "api", "target_type": "panel", "target_id": "P01", "level": 55, "applied_to": [], "result": "dwell time not met"}
+{"ts": 1761606162.6037679, "actor": "api", "target_type": "panel", "target_id": "P02", "level": 55, "applied_to": ["P02"], "result": "panel updated"}
+{"ts": 1761606480.7200904, "actor": "api", "target_type": "panel", "target_id": "P08", "level": 56, "applied_to": ["P08"], "result": "panel updated"}
+{"ts": 1761606522.6949575, "actor": "api", "target_type": "panel", "target_id": "P08", "level": 31, "applied_to": ["P08"], "result": "panel updated"}
+{"ts": 1761606574.0336995, "actor": "api", "target_type": "panel", "target_id": "P08", "level": 25, "applied_to": ["P08"], "result": "panel updated"}
+{"ts": 1761606581.7225833, "actor": "api", "target_type": "panel", "target_id": "P08", "level": 50, "applied_to": [], "result": "dwell time not met"}
+{"ts": 1761606623.4984012, "actor": "api", "target_type": "panel", "target_id": "P08", "level": 50, "applied_to": ["P08"], "result": "panel updated"}
+{"ts": 1761606623.993461, "actor": "api", "target_type": "panel", "target_id": "P08", "level": 50, "applied_to": [], "result": "dwell time not met"}

svc/svc/data/panels.json

@@ -5,14 +5,14 @@
       "name": "Facade 1",
       "group_id": "G-facade",
       "level": 50,
-      "last_change_ts": 1760726759.5898983
+      "last_change_ts": 1761606135.4239554
     },
     "P02": {
       "id": "P02",
       "name": "Facade 2",
       "group_id": "G-facade",
-      "level": 0,
-      "last_change_ts": 0.0
+      "level": 55,
+      "last_change_ts": 1761606162.6023843
     },
     "P03": {
       "id": "P03",
@@ -53,8 +53,8 @@
       "id": "P08",
       "name": "Facade 8",
       "group_id": "G-facade",
-      "level": 0,
-      "last_change_ts": 0.0
+      "level": 50,
+      "last_change_ts": 1761606623.4969633
     },
     "P09": {
       "id": "P09",

web/.env.development

@@ -0,0 +1 @@
+VITE_API_BASE=http://127.0.0.1:8000