Files

zwitschi 4b3a15ed15 Add comprehensive architecture documentation and related scripts

- Introduced multiple architecture documentation files covering building block view, runtime view, deployment view, concepts, architecture decisions, quality requirements, technical risks, glossary, UI and styling, testing, CI, and development setup.
- Migrated existing content from `architecture_overview.md` and `implementation_plan.md` into structured documentation.
- Created scripts for checking broken links in documentation and formatting Markdown files for consistency.
- Updated quickstart guide to provide clearer setup instructions and usage overview.
- Removed outdated MVP features and testing strategy documents to streamline documentation.

2025-10-21 15:39:17 +02:00

4.2 KiB

Raw Blame History

13 — UI, templates and styling

Status: migrated

This chapter collects UI integration notes, reusable template components, styling audit points and per-page UI data/actions.

Reusable Template Components

To reduce duplication across form-centric pages, shared Jinja macros live in templates/partials/components.html.

select_field(...): renders labeled <select> controls with consistent placeholder handling and optional preselection. Existing JavaScript modules continue to target the generated IDs, so template calls must pass the same identifiers (consumption-form-scenario, etc.).
feedback(...) and empty_state(...): wrap status messages in standard classes (feedback, empty-state) with optional hidden toggles so scripts can control visibility without reimplementing markup.
table_container(...): provides a semantic wrapper and optional heading around tabular content; the {% call %} body supplies the <thead>, <tbody>, and <tfoot> elements while the macro applies the table-container class and manages hidden state.

Pages like templates/consumption.html and templates/costs.html already consume these helpers to keep markup aligned while preserving existing JavaScript selectors.

Import macros via:

{% from "partials/components.html" import select_field, feedback, table_container with context %}

Styling Audit Notes (2025-10-21)

Spacing: Panels (section.panel) sometimes lack consistent vertical rhythm between headings, form grids, and tables. Extra top/bottom margin utilities would help align content.
Typography: Headings rely on browser defaults; font-size scale is uneven between <h2> and <h3>. Define explicit scale tokens (e.g., --font-size-lg) for predictable sizing.
Forms: .form-grid uses fixed column gaps that collapse on small screens; introduce responsive grid rules to stack gracefully below ~768px.
Tables: .table-container wrappers need overflow handling for narrow viewports; consider overflow-x: auto with padding adjustments.
Feedback/Empty states: Messages use default font weight and spacing; a utility class for margin/padding would ensure consistent separation from forms or tables.

Per-page data & actions

Short reference of per-page APIs and primary actions used by templates and scripts.

Scenarios (templates/ScenarioForm.html):
- Data: GET /api/scenarios/
- Actions: POST /api/scenarios/
Parameters (templates/ParameterInput.html):
- Data: GET /api/scenarios/, GET /api/parameters/
- Actions: POST /api/parameters/
Costs (templates/costs.html):
- Data: GET /api/costs/capex, GET /api/costs/opex
- Actions: POST /api/costs/capex, POST /api/costs/opex
Consumption (templates/consumption.html):
- Data: GET /api/consumption/
- Actions: POST /api/consumption/
Production (templates/production.html):
- Data: GET /api/production/
- Actions: POST /api/production/
Equipment (templates/equipment.html):
- Data: GET /api/equipment/
- Actions: POST /api/equipment/
Maintenance (templates/maintenance.html):
- Data: GET /api/maintenance/ (pagination support)
- Actions: POST /api/maintenance/, PUT /api/maintenance/{id}, DELETE /api/maintenance/{id}
Simulations (templates/simulations.html):
- Data: GET /api/scenarios/, GET /api/parameters/
- Actions: POST /api/simulations/run
Reporting (templates/reporting.html and templates/Dashboard.html):
- Data: POST /api/reporting/summary (accepts arrays of { "result": float } objects)
- Actions: Trigger summary refreshes and export/download actions.

UI Template Audit (2025-10-20)

Existing HTML templates: ScenarioForm.html, ParameterInput.html, and Dashboard.html (reporting summary view).
Coverage gaps remain for costs, consumption, production, equipment, maintenance, and simulation workflows—no dedicated templates yet.
Shared layout primitives (navigation/header/footer) are absent; current pages duplicate boilerplate markup.
Dashboard currently covers reporting metrics but should be wired to a central / route once the shared layout lands.
Next steps: introduce a base.html, refactor existing templates to extend it, and scaffold placeholder pages for the remaining features.

4.2 KiB Raw Blame History