initial, step 2 already

2025-10-31 14:25:12 +01:00
commit ea17d048ad
24 changed files with 1431 additions and 0 deletions
--- a/apps/ui/README.md
+++ b/apps/ui/README.md
@@ -0,0 +1,73 @@
+# Home Automation UI
+
+FastAPI-based web interface with Jinja2 templates for the home automation system.
+
+## Features
+
+- **Jinja2 Templates**: Dynamic HTML rendering
+- **Responsive Design**: Modern, clean UI
+- **FastAPI Backend**: Fast and reliable serving
+
+## Port Configuration
+
+- **Development Port**: 8002
+- **Access URL**: http://localhost:8002
+
+## Running the UI
+
+### Using uvicorn directly
+
+```bash
+poetry run uvicorn apps.ui.main:app --reload --port 8002
+```
+
+### Using Python module
+
+```bash
+poetry run python -m apps.ui.main
+```
+
+## Project Structure
+
+```
+apps/ui/
+├── __init__.py
+├── main.py           # FastAPI application
+├── templates/        # Jinja2 templates
+│   └── index.html   # Main page
+└── README.md        # This file
+```
+
+## Templates
+
+Templates are located in `apps/ui/templates/` and use Jinja2 syntax.
+
+### Available Routes
+
+- `GET /` - Main UI page (renders `index.html`)
+
+## Development
+
+The server runs with auto-reload enabled during development. Any changes to:
+- Python files (`.py`)
+- Template files (`.html`)
+
+will trigger an automatic restart.
+
+## Dependencies
+
+- **FastAPI**: Web framework
+- **Jinja2**: Template engine
+- **Uvicorn**: ASGI server
+
+## Template Variables
+
+Templates receive the following context variables:
+- `request`: FastAPI Request object (required by Jinja2Templates)
+
+## Future Enhancements
+
+- [ ] Add static file serving (CSS, JS, images)
+- [ ] Implement WebSocket support for real-time updates
+- [ ] Add device control interface
+- [ ] Integrate with API for capability discovery
--- a/apps/ui/init.py
+++ b/apps/ui/init.py
@@ -0,0 +1 @@
+"""UI application."""
--- a/apps/ui/main.py
+++ b/apps/ui/main.py
@@ -0,0 +1,47 @@
+"""UI main entry point."""
+
+from pathlib import Path
+
+from fastapi import FastAPI, Request
+from fastapi.responses import HTMLResponse
+from fastapi.templating import Jinja2Templates
+
+# Initialize FastAPI app
+app = FastAPI(
+    title="Home Automation UI",
+    description="User interface for home automation system",
+    version="0.1.0"
+)
+
+# Setup Jinja2 templates
+templates_dir = Path(__file__).parent / "templates"
+templates = Jinja2Templates(directory=str(templates_dir))
+
+
+@app.get("/", response_class=HTMLResponse)
+async def index(request: Request) -> HTMLResponse:
+    """Render the main UI page.
+    
+    Args:
+        request: The FastAPI request object
+        
+    Returns:
+        HTMLResponse: Rendered HTML template
+    """
+    return templates.TemplateResponse("index.html", {"request": request})
+
+
+def main() -> None:
+    """Run the UI application with uvicorn."""
+    import uvicorn
+    
+    uvicorn.run(
+        "apps.ui.main:app",
+        host="0.0.0.0",
+        port=8002,
+        reload=True
+    )
+
+
+if __name__ == "__main__":
+    main()
--- a/apps/ui/templates/index.html
+++ b/apps/ui/templates/index.html
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Home Automation</title>
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        
+        body {
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            min-height: 100vh;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+        }
+        
+        .container {
+            background: white;
+            border-radius: 16px;
+            padding: 2rem;
+            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
+            max-width: 600px;
+            width: 90%;
+        }
+        
+        h1 {
+            color: #333;
+            margin-bottom: 0.5rem;
+        }
+        
+        p {
+            color: #666;
+            line-height: 1.6;
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <h1>🏠 Home Automation</h1>
+        <p>UI wird geladen...</p>
+        <p>API erreichbar? <a href="http://localhost:8001/health" target="_blank">API Health Check</a></p>
+    </div>
+</body>
+</html>