Compare commits
| Author | SHA1 | Date | |
|---|---|---|---|
 admin
|
fe267b8766 | ||
|
admin
|
c2e4f64d82 | ||
|
admin
|
7a27fb85c4 | ||
|
admin
|
4670666421 | ||
|
admin
|
dcca3fa042 | ||
|
admin
|
8f64760add | ||
|
admin
|
ffa34815cd | ||
 martin
|
ac6840c759 | ||
|
admin
|
04f6f7ba6a | ||
|
admin
|
2459955acf | ||
|
admin
|
b1797bc1bb | ||
|
admin
|
a5a8bd5ea8 | ||
|
admin
|
c3a8a4a59a | ||
|
admin
|
a6791cb038 | ||
|
admin
|
924a18dbc8 | ||
|
admin
|
d6d441fa69 |
@@ -0,0 +1,83 @@
|
||||
# AGENTS.md
|
||||
|
||||
Guidance for coding agents working in this repository.
|
||||
|
||||
## Scope
|
||||
|
||||
This project is a small Flask application with a mostly client-side calculator UI. Treat it as an internal tool with sensitive access and product data assumptions.
|
||||
|
||||
Primary files:
|
||||
|
||||
- `app.py`: Flask app, HTTP Basic Auth, routes, access logging.
|
||||
- `templates/roll_calculator.html`: active calculator UI, inline CSS, inline JavaScript, disclaimer gate, roll calculations, forklift check, load optimizer.
|
||||
- `static/article-data.json`: active product/article data loaded by the UI.
|
||||
- `static/config.json`: richer forklift/heavy-roll configuration, although the active template also contains inline config.
|
||||
- `README.md`: developer-facing project overview.
|
||||
- `PROJECT_KNOWLEDGE.md`: project-specific domain and implementation knowledge.
|
||||
|
||||
## Working Rules
|
||||
|
||||
- Before larger changes, present a concise plan.
|
||||
- Do not change functional logic unless explicitly requested.
|
||||
- Keep edits narrowly scoped to the requested task.
|
||||
- Do not remove existing features or routes without explicit approval.
|
||||
- Do not add Python packages without approval.
|
||||
- Do not change existing APIs, route paths, data formats, or authentication behavior without approval.
|
||||
- Do not manually edit generated product data unless the user explicitly asks for data maintenance.
|
||||
- Do not add new article-data administration features to RollCalc; propose a separate app or integration boundary instead.
|
||||
- Preserve login/access logging unless the user explicitly asks to change or remove it.
|
||||
- Preserve the current Flask/vanilla JavaScript architecture unless the task is specifically a refactor.
|
||||
- Prefer documenting observed behavior over assuming intended behavior.
|
||||
|
||||
## Planned Direction
|
||||
|
||||
- The previous admin UI/API has been removed from RollCalc.
|
||||
- Do not reintroduce admin screens or admin APIs unless explicitly requested as a temporary measure.
|
||||
- Keep login/access logging in RollCalc.
|
||||
- Administration and maintenance of `article-data.json` should move to a separate application.
|
||||
- Treat article-data administration as out of scope for RollCalc.
|
||||
|
||||
## Code Style
|
||||
|
||||
- Python should follow PEP 8.
|
||||
- JavaScript should use modern ES6 style where it fits the existing code.
|
||||
- Keep comments sparse and useful.
|
||||
- Use clear names over explanatory comments where possible.
|
||||
- Avoid broad refactors in `templates/roll_calculator.html`; it is large and risk-prone.
|
||||
|
||||
## Validation Expectations
|
||||
|
||||
For backend or template changes:
|
||||
|
||||
- Start the app locally when practical.
|
||||
- If port `5000` is occupied, use:
|
||||
|
||||
```bash
|
||||
flask --app app run --host 127.0.0.1 --port 5001
|
||||
```
|
||||
|
||||
- Check authenticated endpoints with Basic Auth when practical.
|
||||
- For pure documentation changes, no runtime validation is required.
|
||||
|
||||
Known local credential currently present in `app.py`:
|
||||
|
||||
```text
|
||||
mtazl / rollcalc
|
||||
```
|
||||
|
||||
These credentials are hardcoded and are a known risk; do not introduce more secrets.
|
||||
|
||||
## Important Technical Constraints
|
||||
|
||||
- `app.py` currently hardcodes users and passwords.
|
||||
- Access logging writes to `access_log.json` by reading and rewriting the whole file.
|
||||
- The active UI logic is largely inline in `templates/roll_calculator.html`.
|
||||
- Several `static/*.js` files appear to be older, alternative, or integration modules. Confirm script inclusion before modifying them.
|
||||
- The previous admin template and backend admin route have been removed; do not rebuild them by default.
|
||||
- The disclaimer confirmation is client-side only.
|
||||
|
||||
## Safety Notes
|
||||
|
||||
- Treat `static/article-data.json` as generated ERP-derived data.
|
||||
- The project contains product/material assumptions. Do not adjust formulas, thresholds, or category rules without a specific request.
|
||||
- The calculator output is advisory and requires plausibility checks before use.
|
||||
@@ -0,0 +1,239 @@
|
||||
# PROJECT_KNOWLEDGE.md
|
||||
|
||||
Project-specific technical and domain knowledge for RollCalcPython.
|
||||
|
||||
## Purpose
|
||||
|
||||
RollCalcPython is an internal roll calculator for Naue roll products. The backend is a minimal Flask application that provides authentication, routing, static file delivery, and access logs. Most domain behavior runs in the browser inside `templates/roll_calculator.html`.
|
||||
|
||||
The tool is not intended as an unchecked source of truth. Inputs and outputs must be checked for plausibility before operational use.
|
||||
|
||||
## Current Architecture
|
||||
|
||||
Backend:
|
||||
|
||||
- `app.py` creates the Flask app.
|
||||
- HTTP Basic Auth is implemented with `Flask-HTTPAuth`.
|
||||
- Users are currently configured in `BETA_USERS` with Werkzeug password hashes.
|
||||
- `/` renders the active calculator template.
|
||||
- `/static/<path:filename>` is intended to serve static files behind Basic Auth.
|
||||
- `/api/health` returns health/version information.
|
||||
- `/api/user` returns the authenticated user.
|
||||
- Access events are appended to `access_log.json`.
|
||||
- `build_info.json` is loaded at startup and exposed to all templates as `build_info`.
|
||||
|
||||
Frontend:
|
||||
|
||||
- `templates/roll_calculator.html` is the active application page.
|
||||
- The page contains most CSS and JavaScript inline.
|
||||
- `window.ARTICLE_DATA` is loaded from `/static/article-data.json`.
|
||||
- `window.APP_CONFIG` is currently defined inline for forklift rules.
|
||||
- A disclaimer modal blocks use until the user checks the confirmation checkbox.
|
||||
- The footer displays build metadata: version, branch, commit, and timestamp.
|
||||
|
||||
## Build Info
|
||||
|
||||
Build/deployment metadata is read from:
|
||||
|
||||
```text
|
||||
build_info.json
|
||||
```
|
||||
|
||||
Expected fields:
|
||||
|
||||
- `version`
|
||||
- `branch`
|
||||
- `commit`
|
||||
- `timestamp`
|
||||
|
||||
If `build_info.json` is missing, malformed, or does not contain a usable value, RollCalc falls back to `unknown` for that value and continues serving the site.
|
||||
|
||||
The data is loaded centrally in `app.py` and made available to every template as `build_info`.
|
||||
|
||||
## Authentication
|
||||
|
||||
RollCalc uses HTTP Basic Auth. User entries in `BETA_USERS` have this shape:
|
||||
|
||||
```python
|
||||
"username": {
|
||||
"password_hash": "..."
|
||||
}
|
||||
```
|
||||
|
||||
Password verification uses `werkzeug.security.check_password_hash`. New hashes or config snippets can be generated with:
|
||||
|
||||
```bash
|
||||
python scripts/manage_users.py username
|
||||
```
|
||||
|
||||
Passwords and hashes must not be logged.
|
||||
|
||||
## Roll Geometry
|
||||
|
||||
Calculations assume an ideal cylindrical winding.
|
||||
|
||||
Assumptions:
|
||||
|
||||
- Constant material thickness.
|
||||
- No compression.
|
||||
- No air gaps.
|
||||
- Roll geometry is derived mathematically, not physically measured in the app.
|
||||
|
||||
Nominal diameter formula used by the Direct Calculation tab:
|
||||
|
||||
```text
|
||||
D = sqrt(d^2 + (4 * L * 1000 * t) / pi)
|
||||
```
|
||||
|
||||
Variables:
|
||||
|
||||
- `D`: roll diameter in mm.
|
||||
- `d`: core diameter in mm.
|
||||
- `L`: product length in m.
|
||||
- `t`: material thickness in mm.
|
||||
|
||||
When a tolerance/stddev value is present, the UI also displays a `-2σ` and `+2σ` diameter range.
|
||||
|
||||
## Product Length and Extrapolation
|
||||
|
||||
Product length from a known diameter is calculated by rearranging the diameter formula:
|
||||
|
||||
```text
|
||||
L = (pi / (4 * t)) * (D^2 - d^2) / 1000
|
||||
```
|
||||
|
||||
The extrapolation tab estimates a new diameter from a known roll diameter/length pair:
|
||||
|
||||
```text
|
||||
D1 = sqrt(d^2 + (L1 / L0) * (D0^2 - d^2))
|
||||
```
|
||||
|
||||
Variables:
|
||||
|
||||
- `D0`: known/measured roll diameter.
|
||||
- `L0`: known/measured roll length.
|
||||
- `L1`: target length.
|
||||
- `D1`: extrapolated roll diameter.
|
||||
|
||||
## Roll Weight
|
||||
|
||||
Roll weight is calculated client-side when width, area weight, and length are available:
|
||||
|
||||
```text
|
||||
weight_kg = area_weight_g_m2 * length_m * width_m / 1000
|
||||
```
|
||||
|
||||
Material thickness and area weight values are loaded from article data and are generated automatically. They are not guaranteed to be complete or reviewed.
|
||||
|
||||
## Article Data
|
||||
|
||||
Active data source:
|
||||
|
||||
```text
|
||||
static/article-data.json
|
||||
```
|
||||
|
||||
The UI expects article records with fields such as:
|
||||
|
||||
- `nr`
|
||||
- `name`
|
||||
- `thickness`
|
||||
- `thickness_stddev`
|
||||
- `area_weight`
|
||||
- `area_weight_stddev`
|
||||
- `core_type`
|
||||
|
||||
Observed additional fields include min/max/count values for material thickness and area weight.
|
||||
|
||||
Important data rule:
|
||||
|
||||
- Article data is generated from ERP-derived sources.
|
||||
- These values should not be manually changed unless the task is explicitly data maintenance.
|
||||
|
||||
Known domain caveat from existing project notes:
|
||||
|
||||
- For articles in the groups Secugrid, Combigrid, Carbofol MF/MF, Carbofol F/F, Carbofol s/F, and Carbofol BF/s, the thickness from `article-data.json` must not be used without domain validation.
|
||||
|
||||
## Forklift and Heavy-Roll Rules
|
||||
|
||||
The active template currently evaluates forklift warnings through `checkForklift()` and inline `window.APP_CONFIG`.
|
||||
|
||||
Current inline rule behavior:
|
||||
|
||||
- Applies to category `bentofix`.
|
||||
- Warning threshold: `1700 kg`.
|
||||
- Hard limit: `2750 kg`.
|
||||
- Minimum core outer diameter: `170 mm`.
|
||||
|
||||
There is also a richer JSON configuration in:
|
||||
|
||||
```text
|
||||
static/config.json
|
||||
```
|
||||
|
||||
That file includes localized messages and additional equipment requirements. Before changing forklift behavior, verify whether the active inline config or the static JSON should be authoritative.
|
||||
|
||||
## Load Optimizer
|
||||
|
||||
The Load Optimizer is implemented inline in `templates/roll_calculator.html`.
|
||||
|
||||
Classes:
|
||||
|
||||
- `LoadOptimizer`
|
||||
- `LoadOptimizerUI`
|
||||
|
||||
It uses calculated roll data from the Direct Calculation tab:
|
||||
|
||||
- Roll diameter.
|
||||
- Core diameter.
|
||||
- Roll width.
|
||||
- Roll weight.
|
||||
- Product length.
|
||||
- Square meters per roll.
|
||||
|
||||
It supports transport presets:
|
||||
|
||||
- 20ft Container.
|
||||
- 40ft Container.
|
||||
- 40ft High Cube.
|
||||
- LKW Sattelzug.
|
||||
- LKW Tandem.
|
||||
|
||||
It calculates limiting scenarios by:
|
||||
|
||||
- Weight.
|
||||
- Volume.
|
||||
- Geometry.
|
||||
|
||||
It also draws a side-view SVG visualization.
|
||||
|
||||
## Disclaimer Gate
|
||||
|
||||
The active calculator page includes a disclaimer modal shown after Basic Auth login and before calculator use.
|
||||
|
||||
The modal:
|
||||
|
||||
- Contains German and English disclaimer text.
|
||||
- Requires checkbox confirmation.
|
||||
- Enables the confirmation button only after the checkbox is selected.
|
||||
- Hides the overlay after confirmation.
|
||||
|
||||
This is client-side only. It is not persisted, logged, or enforced server-side.
|
||||
|
||||
## Admin Area State
|
||||
|
||||
RollCalc no longer contains an admin UI or admin API. The previous `/admin/logs` route and `templates/admin.html` have been removed.
|
||||
|
||||
Login/access logging remains part of RollCalc, but log viewing and article-data administration should not be implemented inside this app. Maintenance of `article-data.json` is planned for a separate application.
|
||||
|
||||
## Known Technical Risks
|
||||
|
||||
- Password hashes are currently configured in `app.py`; this should eventually move to a protected external configuration or secrets mechanism.
|
||||
- Basic Auth only; no sessions or role framework beyond the user dictionary.
|
||||
- `access_log.json` is rewritten on every logged request and is not concurrency-safe.
|
||||
- No log rotation or retention policy is implemented.
|
||||
- Flask's default static route may conflict with the intended authenticated `/static/<path:filename>` behavior; verify effective routing before relying on protected static files.
|
||||
- Most active logic is concentrated in one large HTML template.
|
||||
- Multiple similar static JavaScript files exist; not all are necessarily active.
|
||||
- No automated test suite is visible.
|
||||
- Some docs and filenames in `docs/` may reflect earlier package/archive versions.
|
||||
@@ -0,0 +1,316 @@
|
||||
# RollCalcPython
|
||||
|
||||
Flask-based internal roll diameter calculator for Naue roll products. The app is a small authenticated Flask shell around a mostly client-side calculator UI.
|
||||
|
||||
This README is intended for developers maintaining the project, not for end users.
|
||||
|
||||
## Runtime Stack
|
||||
|
||||
- Python 3
|
||||
- Flask 2.3.3
|
||||
- Flask-HTTPAuth 4.8.0
|
||||
- Vanilla HTML, CSS, and JavaScript
|
||||
- JSON files for product data and forklift/load rules
|
||||
|
||||
Pinned Python dependencies are defined in `requirements.txt`.
|
||||
|
||||
## Local Setup
|
||||
|
||||
Create and activate a virtual environment:
|
||||
|
||||
```bash
|
||||
python3 -m venv .venv
|
||||
source .venv/bin/activate
|
||||
pip install -r requirements.txt
|
||||
```
|
||||
|
||||
Start with the hardcoded settings in `app.py`:
|
||||
|
||||
```bash
|
||||
python app.py
|
||||
```
|
||||
|
||||
By default this attempts to bind to:
|
||||
|
||||
```text
|
||||
http://localhost:5000
|
||||
```
|
||||
|
||||
If port `5000` is already occupied, start through Flask's CLI without changing files:
|
||||
|
||||
```bash
|
||||
flask --app app run --host 127.0.0.1 --port 5001
|
||||
```
|
||||
|
||||
The app uses HTTP Basic Auth. Current users are defined in `BETA_USERS` in `app.py` with Werkzeug password hashes.
|
||||
|
||||
## Project Layout
|
||||
|
||||
```text
|
||||
.
|
||||
├── app.py
|
||||
├── requirements.txt
|
||||
├── README.md
|
||||
├── build_info.json
|
||||
├── access_log.json
|
||||
├── config.json
|
||||
├── article-data_.json
|
||||
├── fix_article_data.py
|
||||
├── service-worker.js
|
||||
├── templates/
|
||||
│ └── roll_calculator.html
|
||||
├── static/
|
||||
│ ├── article-data.json
|
||||
│ ├── config.json
|
||||
│ ├── service-worker.js
|
||||
│ ├── stddev_calculator.js
|
||||
│ ├── direct_calc_handler.js
|
||||
│ ├── rollcalc_v14.js
|
||||
│ ├── rollcalc_improvements.js
|
||||
│ ├── rollcalc-improvements.js
|
||||
│ ├── rollcalc_stddev_ranges.js
|
||||
│ └── rollcalc_stddev_integration.js
|
||||
└── docs/
|
||||
├── DEPLOYMENT_GUIDE.md
|
||||
├── QOL_UPDATE_SUMMARY.md
|
||||
├── STDDEV_IMPLEMENTATION_CHECKLIST.md
|
||||
└── STDDEV_RANGES_DOCS.md
|
||||
```
|
||||
|
||||
## Backend
|
||||
|
||||
`app.py` owns the Flask application and authentication.
|
||||
|
||||
Implemented routes:
|
||||
|
||||
| Route | Methods | Auth | Purpose |
|
||||
| --- | --- | --- | --- |
|
||||
| `/` | `GET` | Basic Auth | Renders `templates/roll_calculator.html`. |
|
||||
| `/static/<path:filename>` | `GET` | Basic Auth | Intended protected static-file serving from `static/`. |
|
||||
| `/api/health` | `GET` | Basic Auth | Returns app health and version. |
|
||||
| `/api/user` | `GET` | Basic Auth | Returns current authenticated user info. |
|
||||
|
||||
Authentication is implemented with `Flask-HTTPAuth`. The current code checks `BETA_USERS` with `werkzeug.security.check_password_hash`; plaintext passwords are not stored in the application.
|
||||
|
||||
Generate a password hash or user entry with:
|
||||
|
||||
```bash
|
||||
python scripts/manage_users.py username
|
||||
python scripts/manage_users.py username --json
|
||||
```
|
||||
|
||||
For non-interactive local maintenance only:
|
||||
|
||||
```bash
|
||||
python scripts/manage_users.py username --password 'new-password'
|
||||
```
|
||||
|
||||
Do not commit real passwords or print them in logs.
|
||||
|
||||
Access logging is handled by `log_access()`, which reads `access_log.json`, appends a record, and writes the whole file back.
|
||||
|
||||
## Frontend Entry Point
|
||||
|
||||
The active UI is `templates/roll_calculator.html`.
|
||||
|
||||
The template contains:
|
||||
|
||||
- Page layout and all main CSS.
|
||||
- A disclaimer modal shown after Basic Auth login and before calculator use.
|
||||
- Footer build metadata from `build_info`.
|
||||
- Global state:
|
||||
- `window.ARTICLE_DATA`
|
||||
- `window.APP_CONFIG`
|
||||
- Product/article data loading from `/static/article-data.json`.
|
||||
- Direct roll calculations.
|
||||
- Extrapolation calculations.
|
||||
- Forklift/weight warnings.
|
||||
- Load optimizer UI and calculations.
|
||||
|
||||
Most of the currently active JavaScript is inline in this template. Several files under `static/` appear to be older, alternative, or integration-oriented modules and should be checked before assuming they are active.
|
||||
|
||||
## Main Functional Areas
|
||||
|
||||
### Disclaimer Gate
|
||||
|
||||
The calculator page displays a modal disclaimer before use. The modal:
|
||||
|
||||
- Shows German and English disclaimer text.
|
||||
- Requires a checkbox confirmation.
|
||||
- Keeps the confirmation button disabled until checked.
|
||||
- Hides the overlay after confirmation.
|
||||
|
||||
This is implemented in `templates/roll_calculator.html` and is client-side only.
|
||||
|
||||
### Article Data Loading
|
||||
|
||||
`templates/roll_calculator.html` fetches:
|
||||
|
||||
```text
|
||||
/static/article-data.json
|
||||
```
|
||||
|
||||
The loaded array is assigned to `window.ARTICLE_DATA` and used to populate article datalists for direct calculation and extrapolation.
|
||||
|
||||
Known article fields used by the UI include:
|
||||
|
||||
- `nr`
|
||||
- `name`
|
||||
- `thickness`
|
||||
- `thickness_stddev`
|
||||
- `area_weight`
|
||||
- `area_weight_stddev`
|
||||
- `core_type`
|
||||
|
||||
The active `static/article-data.json` currently contains product records with additional min/max/count statistics.
|
||||
|
||||
### Direct Calculation
|
||||
|
||||
The direct calculation tab supports multiple modes via mode buttons:
|
||||
|
||||
- Roll diameter from core diameter, material thickness, and product length.
|
||||
- Product length from core diameter, material thickness, and roll diameter.
|
||||
- Product length for a target diameter.
|
||||
|
||||
The nominal roll diameter formula used in the template is:
|
||||
|
||||
```text
|
||||
D = sqrt(d^2 + (4 * L * 1000 * t) / pi)
|
||||
```
|
||||
|
||||
Where:
|
||||
|
||||
- `D` is roll diameter in mm.
|
||||
- `d` is core diameter in mm.
|
||||
- `L` is product length in m.
|
||||
- `t` is material thickness in mm.
|
||||
|
||||
If a tolerance/stddev value is present, the UI also displays a `-2σ` and `+2σ` diameter range.
|
||||
|
||||
Roll weight is calculated when roll width, area weight, and length are present:
|
||||
|
||||
```text
|
||||
weight_kg = area_weight_g_m2 * length_m * width_m / 1000
|
||||
```
|
||||
|
||||
### Extrapolation
|
||||
|
||||
The extrapolation tab estimates a new roll diameter from a known roll diameter/length pair and a new target length:
|
||||
|
||||
```text
|
||||
D1 = sqrt(d^2 + (L1 / L0) * (D0^2 - d^2))
|
||||
```
|
||||
|
||||
Where:
|
||||
|
||||
- `d` is core diameter.
|
||||
- `D0` is measured/current diameter.
|
||||
- `L0` is measured/current length.
|
||||
- `L1` is target length.
|
||||
- `D1` is the calculated new diameter.
|
||||
|
||||
### Forklift Check
|
||||
|
||||
`checkForklift()` in `templates/roll_calculator.html` evaluates heavy-roll warnings using `window.APP_CONFIG.forklift_rules`.
|
||||
|
||||
The current inline config targets the `bentofix` category and includes:
|
||||
|
||||
- Warning threshold: `1700 kg`
|
||||
- Hard limit: `2750 kg`
|
||||
- Minimum core outer diameter requirement: `170 mm`
|
||||
|
||||
There is also a richer `static/config.json` with localized messages and more detailed requirements.
|
||||
|
||||
### Load Optimizer
|
||||
|
||||
The Load Optimizer is implemented by inline classes in `templates/roll_calculator.html`:
|
||||
|
||||
- `LoadOptimizer`
|
||||
- `LoadOptimizerUI`
|
||||
|
||||
It uses calculated roll data from the Direct Calculation tab and estimates loading capacity for transport presets or custom dimensions.
|
||||
|
||||
Preset transport units include:
|
||||
|
||||
- 20ft Container
|
||||
- 40ft Container
|
||||
- 40ft High Cube
|
||||
- LKW Sattelzug
|
||||
- LKW Tandem
|
||||
|
||||
The optimizer calculates limiting scenarios by:
|
||||
|
||||
- Weight
|
||||
- Volume
|
||||
- Geometry
|
||||
|
||||
It also renders a side-view SVG visualization of the loading arrangement.
|
||||
|
||||
### Standard Deviation Modules
|
||||
|
||||
There are standalone/static modules for standard deviation logic:
|
||||
|
||||
- `static/stddev_calculator.js`
|
||||
- `static/rollcalc_stddev_ranges.js`
|
||||
- `static/rollcalc_stddev_integration.js`
|
||||
|
||||
These provide or describe range calculations for material thickness, area weight, roll diameter, and roll weight. Check actual script inclusion before treating them as active in production, because the current template already contains inline stddev/tolerance behavior.
|
||||
|
||||
### Admin UI
|
||||
|
||||
RollCalc no longer contains an admin UI or admin API. Login/access logging remains in the backend, but logs are not exposed through a RollCalc admin screen.
|
||||
|
||||
Administration and maintenance of `article-data.json` is planned for a separate application. RollCalc should continue to consume `static/article-data.json` read-only.
|
||||
|
||||
## Static Assets and Data Files
|
||||
|
||||
### `static/article-data.json`
|
||||
|
||||
Primary product/article dataset used by the active calculator UI.
|
||||
|
||||
### `static/config.json`
|
||||
|
||||
JSON configuration for forklift/heavy-roll rules. The active template also contains an inline `window.APP_CONFIG`, so developers should verify which config source is authoritative before changing rule behavior.
|
||||
|
||||
### `access_log.json`
|
||||
|
||||
JSON audit log written by `app.py`.
|
||||
|
||||
Important implementation detail: each logged access reads and rewrites the entire JSON file. This is simple but not concurrency-safe and can become inefficient as the file grows.
|
||||
|
||||
### `build_info.json`
|
||||
|
||||
Deployment/build metadata displayed in the site footer.
|
||||
|
||||
Expected fields:
|
||||
|
||||
- `version`
|
||||
- `branch`
|
||||
- `commit`
|
||||
- `timestamp`
|
||||
|
||||
`app.py` loads this file centrally at startup and exposes it to all templates as `build_info`. If the file is missing, invalid, or a field is empty, the affected values fall back to `unknown` and the website continues to work.
|
||||
|
||||
### `fix_article_data.py`
|
||||
|
||||
Utility script that updates relative frontend fetch/register paths to Flask-style `/static/...` paths and checks that key static files exist.
|
||||
|
||||
## Development Notes
|
||||
|
||||
- The codebase is currently closer to a single-page static calculator wrapped by Flask than to a conventional Flask MVC app.
|
||||
- The active calculator logic is concentrated in `templates/roll_calculator.html`.
|
||||
- There are duplicated or legacy-looking files with similar names. Before editing JavaScript under `static/`, confirm it is actually referenced by the active template.
|
||||
- The documentation under `docs/` contains deployment and feature notes, but some filenames and route assumptions may not match the current app exactly.
|
||||
- The Flask dev server is used for local development only. Production should use a WSGI server.
|
||||
- Use `scripts/manage_users.py` to create password hashes when adding or rotating Basic Auth users.
|
||||
|
||||
## Known Risks and Maintenance Items
|
||||
|
||||
- Password hashes are currently configured in `app.py`; user configuration should eventually move to environment variables, a protected config file, or a secrets manager.
|
||||
- `access_log.json` is not safe for concurrent writes.
|
||||
- `access_log.json` grows without rotation or retention limits.
|
||||
- The custom `/static/<path:filename>` route is intended to protect static files, but Flask also creates a default static route unless disabled. Verify effective route behavior before relying on static-file protection.
|
||||
- RollCalc no longer includes an admin UI/API; article data administration belongs in a separate application.
|
||||
- There is no visible automated test suite.
|
||||
- The main template is large and mixes layout, styling, data loading, calculations, and UI behavior.
|
||||
- The disclaimer confirmation is client-side only and is not persisted or audited server-side.
|
||||
+17
@@ -0,0 +1,17 @@
|
||||
## Version 0.3
|
||||
|
||||
- Mehrsprachigkeit
|
||||
- Filter der Artikelauswahl auf Basis der gewählten Produktgruppe: Secutex, Carbofol, Bentofix, Secumat, Secudrain
|
||||
- PDF-Export
|
||||
|
||||
|
||||
## Version 0.4
|
||||
- Benutzermanagement auf sichere Methode umstellen, keine Klartext-Passworte mehr
|
||||
- Login-/Zugriffslogging beibehalten und robuster machen
|
||||
- Bestehenden Admin-UI-/Admin-API-Teil aus RollCalc entfernen
|
||||
- Pflege der `article-data.json` in eine eigenständige Administrations-App auslagern
|
||||
- Produktionsdaten perspektivisch aus SQL per Query direkt beziehen
|
||||
|
||||
## Version 0.5
|
||||
- Schnittstelle bzw. Import-/Deployment-Prozess zwischen externer Artikelverwaltungs-App und RollCalc definieren
|
||||
- Rollen-/Berechtigungskonzept für Zugriff auf RollCalc und externe Artikelverwaltung klären
|
||||
+126
@@ -537,5 +537,131 @@
|
||||
"endpoint": "/",
|
||||
"method": "GET",
|
||||
"status": 200
|
||||
},
|
||||
{
|
||||
"timestamp": "2026-07-02T16:07:56.334163",
|
||||
"username": "mtazl",
|
||||
"endpoint": "/",
|
||||
"method": "GET",
|
||||
"status": 200
|
||||
},
|
||||
{
|
||||
"timestamp": "2026-07-02T16:08:38.097844",
|
||||
"username": "mtazl",
|
||||
"endpoint": "/",
|
||||
"method": "GET",
|
||||
"status": 200
|
||||
},
|
||||
{
|
||||
"timestamp": "2026-07-03T08:39:44.284544",
|
||||
"username": "mtazl",
|
||||
"endpoint": "/",
|
||||
"method": "GET",
|
||||
"status": 200
|
||||
},
|
||||
{
|
||||
"timestamp": "2026-07-03T08:41:57.673023",
|
||||
"username": "mtazl",
|
||||
"endpoint": "/",
|
||||
"method": "GET",
|
||||
"status": 200
|
||||
},
|
||||
{
|
||||
"timestamp": "2026-07-03T08:42:19.877155",
|
||||
"username": "mtazl",
|
||||
"endpoint": "/",
|
||||
"method": "GET",
|
||||
"status": 200
|
||||
},
|
||||
{
|
||||
"timestamp": "2026-07-06T10:34:02.710459",
|
||||
"username": "mtazl",
|
||||
"endpoint": "/",
|
||||
"method": "GET",
|
||||
"status": 200
|
||||
},
|
||||
{
|
||||
"timestamp": "2026-07-06T13:14:58.113794",
|
||||
"username": "mtazl",
|
||||
"endpoint": "/",
|
||||
"method": "GET",
|
||||
"status": 200
|
||||
},
|
||||
{
|
||||
"timestamp": "2026-07-06T13:15:20.071507",
|
||||
"username": "mtazl",
|
||||
"endpoint": "/",
|
||||
"method": "GET",
|
||||
"status": 200
|
||||
},
|
||||
{
|
||||
"timestamp": "2026-07-06T13:15:32.538576",
|
||||
"username": "mtazl",
|
||||
"endpoint": "/",
|
||||
"method": "GET",
|
||||
"status": 200
|
||||
},
|
||||
{
|
||||
"timestamp": "2026-07-07T11:44:53.524315",
|
||||
"username": "mtazl",
|
||||
"endpoint": "/",
|
||||
"method": "GET",
|
||||
"status": 200
|
||||
},
|
||||
{
|
||||
"timestamp": "2026-07-07T11:47:36.702455",
|
||||
"username": "mtazl",
|
||||
"endpoint": "/",
|
||||
"method": "GET",
|
||||
"status": 200
|
||||
},
|
||||
{
|
||||
"timestamp": "2026-07-07T12:18:47.866971",
|
||||
"username": "mtazl",
|
||||
"endpoint": "/",
|
||||
"method": "GET",
|
||||
"status": 200
|
||||
},
|
||||
{
|
||||
"timestamp": "2026-07-07T14:46:22.335316",
|
||||
"username": "mtazl",
|
||||
"endpoint": "/",
|
||||
"method": "GET",
|
||||
"status": 200
|
||||
},
|
||||
{
|
||||
"timestamp": "2026-07-07T16:13:42.026433",
|
||||
"username": "mtazl",
|
||||
"endpoint": "/",
|
||||
"method": "GET",
|
||||
"status": 200
|
||||
},
|
||||
{
|
||||
"timestamp": "2026-07-07T16:19:41.488752",
|
||||
"username": "mtazl",
|
||||
"endpoint": "/",
|
||||
"method": "GET",
|
||||
"status": 200
|
||||
},
|
||||
{
|
||||
"timestamp": "2026-07-07T16:34:58.280178",
|
||||
"username": "mtazl",
|
||||
"endpoint": "/",
|
||||
"method": "GET",
|
||||
"status": 200
|
||||
},
|
||||
{
|
||||
"timestamp": "2026-07-07T16:36:56.896657",
|
||||
"username": "mtazl",
|
||||
"endpoint": "/",
|
||||
"method": "GET",
|
||||
"status": 200
|
||||
},
|
||||
{
|
||||
"timestamp": "2026-07-07T16:41:46.568545",
|
||||
"username": "mtazl",
|
||||
"endpoint": "/",
|
||||
"method": "GET",
|
||||
"status": 200
|
||||
}
|
||||
]
|
||||
-849
@@ -1,849 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Roll Calculator Admin</title>
|
||||
<style>
|
||||
* { box-sizing: border-box; margin: 0; padding: 0; }
|
||||
body {
|
||||
font-family: 'Segoe UI', Arial, sans-serif;
|
||||
background: #f4f6f9;
|
||||
color: #333;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.header {
|
||||
background: linear-gradient(135deg, #003366 0%, #0066cc 100%);
|
||||
color: white;
|
||||
padding: 20px 30px;
|
||||
box-shadow: 0 2px 8px rgba(0,0,0,0.2);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
.header h1 { font-size: 20px; }
|
||||
|
||||
.container {
|
||||
max-width: 1200px;
|
||||
margin: 30px auto;
|
||||
padding: 0 20px;
|
||||
}
|
||||
|
||||
.info-box {
|
||||
background: #fffbea;
|
||||
border-left: 4px solid #f0b429;
|
||||
padding: 16px;
|
||||
border-radius: 4px;
|
||||
margin-bottom: 20px;
|
||||
font-size: 13px;
|
||||
color: #666;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.tabs {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
margin-bottom: 20px;
|
||||
border-bottom: 2px solid #e0e8f0;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.tab-btn {
|
||||
padding: 12px 20px;
|
||||
border: none;
|
||||
background: none;
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: #666;
|
||||
border-bottom: 3px solid transparent;
|
||||
margin-bottom: -2px;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
.tab-btn.active {
|
||||
color: #0066cc;
|
||||
border-bottom-color: #0066cc;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.tab-content { display: none; }
|
||||
.tab-content.active { display: block; }
|
||||
|
||||
.card {
|
||||
background: white;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 8px rgba(0,0,0,0.07);
|
||||
padding: 24px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.card h2 {
|
||||
font-size: 18px;
|
||||
margin-bottom: 8px;
|
||||
color: #003366;
|
||||
}
|
||||
.card > p {
|
||||
font-size: 12px;
|
||||
color: #666;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.form-row {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
||||
gap: 16px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.form-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.form-group label {
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
color: #555;
|
||||
margin-bottom: 5px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.4px;
|
||||
}
|
||||
.form-group input, .form-group textarea, .form-group select {
|
||||
padding: 9px 11px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 4px;
|
||||
font-size: 13px;
|
||||
font-family: 'Segoe UI', Arial, sans-serif;
|
||||
transition: border 0.2s;
|
||||
}
|
||||
.form-group textarea {
|
||||
font-family: 'Courier New', monospace;
|
||||
resize: vertical;
|
||||
min-height: 300px;
|
||||
}
|
||||
.form-group input:focus, .form-group textarea:focus, .form-group select:focus {
|
||||
outline: none;
|
||||
border-color: #0066cc;
|
||||
box-shadow: 0 0 0 3px rgba(0,102,204,0.1);
|
||||
}
|
||||
|
||||
.button-group {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
margin-top: 20px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.btn {
|
||||
padding: 10px 20px;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
.btn-primary {
|
||||
background: #0066cc;
|
||||
color: white;
|
||||
}
|
||||
.btn-primary:hover { background: #0052a3; box-shadow: 0 2px 6px rgba(0,102,204,0.3); }
|
||||
|
||||
.btn-secondary {
|
||||
background: #e0e0e0;
|
||||
color: #333;
|
||||
}
|
||||
.btn-secondary:hover { background: #d0d0d0; }
|
||||
|
||||
.btn-danger {
|
||||
background: #dc3545;
|
||||
color: white;
|
||||
}
|
||||
.btn-danger:hover { background: #c82333; }
|
||||
|
||||
.btn-success {
|
||||
background: #28a745;
|
||||
color: white;
|
||||
}
|
||||
.btn-success:hover { background: #218838; }
|
||||
|
||||
table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
font-size: 13px;
|
||||
}
|
||||
table th {
|
||||
background: #f5f5f5;
|
||||
padding: 12px;
|
||||
text-align: left;
|
||||
font-weight: 600;
|
||||
border-bottom: 2px solid #0066cc;
|
||||
color: #333;
|
||||
}
|
||||
table td {
|
||||
padding: 12px;
|
||||
border-bottom: 1px solid #e0e0e0;
|
||||
}
|
||||
table tr:hover { background: #f9f9f9; }
|
||||
|
||||
.alert {
|
||||
padding: 12px 16px;
|
||||
border-radius: 4px;
|
||||
margin-bottom: 16px;
|
||||
font-size: 13px;
|
||||
display: none;
|
||||
}
|
||||
.alert.show { display: block; }
|
||||
.alert-success {
|
||||
background: #d4edda;
|
||||
border: 1px solid #c3e6cb;
|
||||
color: #155724;
|
||||
}
|
||||
.alert-error {
|
||||
background: #f8d7da;
|
||||
border: 1px solid #f5c6cb;
|
||||
color: #721c24;
|
||||
}
|
||||
.alert-info {
|
||||
background: #d1ecf1;
|
||||
border: 1px solid #bee5eb;
|
||||
color: #0c5460;
|
||||
}
|
||||
|
||||
.action-buttons {
|
||||
display: flex;
|
||||
gap: 6px;
|
||||
}
|
||||
.action-buttons button {
|
||||
padding: 6px 12px;
|
||||
font-size: 11px;
|
||||
border: none;
|
||||
border-radius: 3px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
.edit-btn {
|
||||
background: #0066cc;
|
||||
color: white;
|
||||
}
|
||||
.edit-btn:hover { background: #0052a3; }
|
||||
.delete-btn {
|
||||
background: #dc3545;
|
||||
color: white;
|
||||
}
|
||||
.delete-btn:hover { background: #c82333; }
|
||||
|
||||
.password-overlay {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: rgba(0,0,0,0.7);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 9999;
|
||||
}
|
||||
.password-box {
|
||||
background: white;
|
||||
border-radius: 8px;
|
||||
padding: 32px;
|
||||
max-width: 400px;
|
||||
box-shadow: 0 8px 40px rgba(0,0,0,0.3);
|
||||
text-align: center;
|
||||
}
|
||||
.password-box h2 { margin-bottom: 20px; color: #003366; }
|
||||
.password-box input {
|
||||
width: 100%;
|
||||
padding: 11px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 4px;
|
||||
font-size: 14px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.password-box .btn { width: 100%; margin-bottom: 10px; }
|
||||
|
||||
.file-input {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.stats {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
|
||||
gap: 16px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.stat {
|
||||
background: linear-gradient(135deg, #e8f4fd 0%, #d0e8fa 100%);
|
||||
border: 1px solid #0066cc;
|
||||
border-radius: 6px;
|
||||
padding: 16px;
|
||||
text-align: center;
|
||||
}
|
||||
.stat-value {
|
||||
font-size: 24px;
|
||||
font-weight: 700;
|
||||
color: #003366;
|
||||
}
|
||||
.stat-label {
|
||||
font-size: 12px;
|
||||
color: #666;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.modal-overlay {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: rgba(0,0,0,0.5);
|
||||
display: none;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 5000;
|
||||
}
|
||||
.modal-overlay.active {
|
||||
display: flex;
|
||||
}
|
||||
.modal {
|
||||
background: white;
|
||||
border-radius: 8px;
|
||||
max-width: 600px;
|
||||
max-height: 90vh;
|
||||
overflow-y: auto;
|
||||
padding: 30px;
|
||||
box-shadow: 0 8px 40px rgba(0,0,0,0.3);
|
||||
width: 100%;
|
||||
}
|
||||
.modal h2 {
|
||||
color: #003366;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.modal-buttons {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
margin-top: 30px;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- PASSWORD OVERLAY -->
|
||||
<div id="passwordOverlay" class="password-overlay">
|
||||
<div class="password-box">
|
||||
<h2>🔐 Roll Calculator Admin</h2>
|
||||
<p style="font-size:13px;color:#666;margin-bottom:20px;">Geben Sie das Admin-Passwort ein</p>
|
||||
<input type="password" id="passwordInput" placeholder="Passwort" autofocus>
|
||||
<button class="btn btn-primary" onclick="checkPassword()">🔓 Anmelden</button>
|
||||
<p style="font-size:11px;color:#999;margin-top:10px;">Standard: admin123</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- EDIT MODAL -->
|
||||
<div id="editModal" class="modal-overlay">
|
||||
<div class="modal">
|
||||
<h2>📝 Artikel bearbeiten</h2>
|
||||
<div class="form-row">
|
||||
<div class="form-group">
|
||||
<label>Artikel-Nr. (nicht änderbar)</label>
|
||||
<input type="text" id="editNr" disabled style="background:#f5f5f5;">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<div class="form-group">
|
||||
<label>Name</label>
|
||||
<input type="text" id="editName">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<div class="form-group">
|
||||
<label>Produktdicke (mm)</label>
|
||||
<input type="number" id="editThickness" step="0.001" min="0">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Area Weight (g/m²)</label>
|
||||
<input type="number" id="editAreaWeight" step="1" min="0">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<div class="form-group">
|
||||
<label>Gewicht pro Rolle (kg)</label>
|
||||
<input type="number" id="editWeightPerRoll" step="0.1" min="0">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Breite (m)</label>
|
||||
<input type="number" id="editWidth" step="0.01" min="0">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<div class="form-group">
|
||||
<label>Preis (€)</label>
|
||||
<input type="number" id="editPrice" step="0.01" min="0">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Typ</label>
|
||||
<input type="text" id="editType" placeholder="z.B. Geotextil, Kunststoff">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<div class="form-group">
|
||||
<label>Farbe</label>
|
||||
<input type="text" id="editColor" placeholder="z.B. Schwarz, Weiß">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<div class="form-group">
|
||||
<label>Beschreibung</label>
|
||||
<textarea id="editDescription" placeholder="Zusätzliche Informationen..."></textarea>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-buttons">
|
||||
<button class="btn btn-secondary" onclick="closeEditModal()">Abbrechen</button>
|
||||
<button class="btn btn-primary" onclick="saveEditedArticle()">💾 Speichern</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- MAIN APP -->
|
||||
<div id="mainApp" style="display:none;">
|
||||
<div class="header">
|
||||
<h1>🛠️ Roll Calculator Admin</h1>
|
||||
<button class="btn btn-secondary" onclick="logout()">Abmelden</button>
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
<div class="info-box">
|
||||
💡 Tipp: Alle Änderungen werden im Browser gespeichert. Mit "Download" kannst du die neuen JSON-Dateien herunterladen und auf deinen Server kopieren.
|
||||
</div>
|
||||
|
||||
<div class="tabs">
|
||||
<button class="tab-btn active" onclick="switchTab('articles')">📄 Artikel-Daten</button>
|
||||
<button class="tab-btn" onclick="switchTab('config')">⚙️ Konfiguration</button>
|
||||
<button class="tab-btn" onclick="switchTab('tools')">🔧 Tools</button>
|
||||
</div>
|
||||
|
||||
<!-- TAB: ARTICLES -->
|
||||
<div id="articles" class="tab-content active">
|
||||
<div class="card">
|
||||
<h2>Artikel verwalten</h2>
|
||||
<p>Artikel hinzufügen, bearbeiten oder löschen</p>
|
||||
|
||||
<div id="articleAlert" class="alert"></div>
|
||||
|
||||
<div class="stats">
|
||||
<div class="stat">
|
||||
<div class="stat-value" id="articleCount">0</div>
|
||||
<div class="stat-label">Artikel</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3 style="font-size:14px;margin-bottom:12px;margin-top:20px;">Neuer Artikel</h3>
|
||||
<div class="form-row">
|
||||
<div class="form-group">
|
||||
<label>Artikel-Nr. *</label>
|
||||
<input type="text" id="artNr" placeholder="z.B. 180305">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Name *</label>
|
||||
<input type="text" id="artName" placeholder="z.B. Bfix NSP 5300">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<div class="form-group">
|
||||
<label>Produktdicke (mm) *</label>
|
||||
<input type="number" id="artThickness" placeholder="z.B. 6.918" step="0.001" min="0">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Area Weight (g/m²)</label>
|
||||
<input type="number" id="artAreaWeight" placeholder="z.B. 5300" step="1" min="0">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<div class="form-group">
|
||||
<label>Gewicht pro Rolle (kg)</label>
|
||||
<input type="number" id="artWeightPerRoll" placeholder="z.B. 25" step="0.1" min="0">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Breite (m)</label>
|
||||
<input type="number" id="artWidth" placeholder="z.B. 5" step="0.01" min="0">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<div class="form-group">
|
||||
<label>Preis (€)</label>
|
||||
<input type="number" id="artPrice" placeholder="z.B. 250.00" step="0.01" min="0">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Typ</label>
|
||||
<input type="text" id="artType" placeholder="z.B. Geotextil">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<div class="form-group">
|
||||
<label>Farbe</label>
|
||||
<input type="text" id="artColor" placeholder="z.B. Schwarz">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<div class="form-group">
|
||||
<label>Beschreibung</label>
|
||||
<textarea id="artDescription" placeholder="Zusätzliche Informationen..."></textarea>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="button-group">
|
||||
<button class="btn btn-primary" onclick="addArticle()">➕ Hinzufügen</button>
|
||||
<button class="btn btn-secondary" onclick="clearArticleForm()">Zurücksetzen</button>
|
||||
</div>
|
||||
|
||||
<h3 style="font-size:14px;margin-bottom:12px;margin-top:30px;">Artikel-Liste</h3>
|
||||
<div style="overflow-x:auto;">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Nr.</th>
|
||||
<th>Name</th>
|
||||
<th>Dicke (mm)</th>
|
||||
<th>Breite (m)</th>
|
||||
<th>Preis (€)</th>
|
||||
<th>Aktionen</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="articleTableBody">
|
||||
<tr><td colspan="6" style="text-align:center;color:#999;">Keine Artikel</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- TAB: CONFIG -->
|
||||
<div id="config" class="tab-content">
|
||||
<div class="card">
|
||||
<h2>Konfiguration (config.json)</h2>
|
||||
<p>Gabelstapler-Regeln und Schwellenwerte - JSON direkt bearbeiten</p>
|
||||
|
||||
<div id="configAlert" class="alert"></div>
|
||||
|
||||
<textarea id="configJson" placeholder="config.json wird hier angezeigt..."></textarea>
|
||||
|
||||
<div class="button-group">
|
||||
<button class="btn btn-primary" onclick="saveConfigJson()">💾 Aktualisieren</button>
|
||||
<button class="btn btn-secondary" onclick="resetConfigJson()">🔄 Zurücksetzen</button>
|
||||
</div>
|
||||
|
||||
<p style="font-size:11px;color:#999;margin-top:16px;">
|
||||
💡 JSON wird automatisch validiert. Im Fehlerfall siehst du eine Fehlermeldung.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- TAB: TOOLS -->
|
||||
<div id="tools" class="tab-content">
|
||||
<div class="card">
|
||||
<h2>📥 Dateien verwalten</h2>
|
||||
<p>Herunterladen, hochladen oder zurücksetzen</p>
|
||||
|
||||
<div id="toolsAlert" class="alert"></div>
|
||||
|
||||
<h3 style="font-size:13px;margin-bottom:12px;">Download</h3>
|
||||
<div class="button-group">
|
||||
<button class="btn btn-success" onclick="downloadArticleData()">📥 article-data.json</button>
|
||||
<button class="btn btn-success" onclick="downloadConfig()">📥 config.json</button>
|
||||
<button class="btn btn-success" onclick="downloadAll()">📦 Alle Dateien (ZIP)</button>
|
||||
</div>
|
||||
|
||||
<h3 style="font-size:13px;margin-bottom:12px;margin-top:20px;">Upload</h3>
|
||||
<p style="font-size:12px;color:#666;margin-bottom:10px;">Dateien hochladen und überschreiben:</p>
|
||||
<div class="button-group">
|
||||
<button class="btn btn-secondary" onclick="document.getElementById('uploadFile').click()">📤 JSON-Datei hochladen</button>
|
||||
</div>
|
||||
<input type="file" id="uploadFile" class="file-input" accept=".json" onchange="handleFileUpload(event)">
|
||||
|
||||
<h3 style="font-size:13px;margin-bottom:12px;margin-top:20px;">Daten</h3>
|
||||
<p style="font-size:12px;color:#666;margin-bottom:10px;">Alle bearbeiteten Daten als ein JSON exportieren:</p>
|
||||
<button class="btn btn-primary" onclick="exportAllAsJson()">💾 Alles exportieren</button>
|
||||
|
||||
<h3 style="font-size:13px;margin-bottom:12px;margin-top:20px;">⚠️ Vorsicht</h3>
|
||||
<p style="font-size:12px;color:#666;margin-bottom:10px;">Bearbeitete Daten zurücksetzen (Achtung: nicht rückgängig!):</p>
|
||||
<button class="btn btn-danger" onclick="if(confirm('Wirklich auf Original zurücksetzen?')) resetAll()">🔄 Auf Standardwerte zurücksetzen</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
const ADMIN_PASSWORD = 'admin123';
|
||||
|
||||
let articlesData = [];
|
||||
let configData = {};
|
||||
let currentEditingArticle = null;
|
||||
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
loadDataFromServer();
|
||||
document.getElementById('passwordInput').addEventListener('keypress', (e) => {
|
||||
if (e.key === 'Enter') checkPassword();
|
||||
});
|
||||
});
|
||||
|
||||
function loadDataFromServer() {
|
||||
Promise.all([
|
||||
fetch('article-data.json').then(r => r.json()).catch(() => []),
|
||||
fetch('config.json').then(r => r.json()).catch(() => ({}))
|
||||
]).then(([articles, config]) => {
|
||||
articlesData = articles || [];
|
||||
configData = config || {};
|
||||
console.log('✅ Daten geladen:', articlesData.length, 'Artikel');
|
||||
});
|
||||
}
|
||||
|
||||
function checkPassword() {
|
||||
const pwd = document.getElementById('passwordInput').value;
|
||||
if (pwd === ADMIN_PASSWORD) {
|
||||
document.getElementById('passwordOverlay').style.display = 'none';
|
||||
document.getElementById('mainApp').style.display = 'block';
|
||||
refreshUI();
|
||||
} else {
|
||||
alert('❌ Falsches Passwort!');
|
||||
document.getElementById('passwordInput').value = '';
|
||||
document.getElementById('passwordInput').focus();
|
||||
}
|
||||
}
|
||||
|
||||
function logout() {
|
||||
document.getElementById('mainApp').style.display = 'none';
|
||||
document.getElementById('passwordOverlay').style.display = 'flex';
|
||||
document.getElementById('passwordInput').value = '';
|
||||
document.getElementById('passwordInput').focus();
|
||||
}
|
||||
|
||||
function switchTab(tabName) {
|
||||
document.querySelectorAll('.tab-content').forEach(t => t.classList.remove('active'));
|
||||
document.querySelectorAll('.tab-btn').forEach(b => b.classList.remove('active'));
|
||||
document.getElementById(tabName).classList.add('active');
|
||||
event.target.classList.add('active');
|
||||
|
||||
if (tabName === 'config') loadConfigJson();
|
||||
if (tabName === 'articles') refreshArticleTable();
|
||||
}
|
||||
|
||||
function showAlert(containerId, message, type, duration = 4000) {
|
||||
const alert = document.getElementById(containerId);
|
||||
alert.className = `alert show alert-${type}`;
|
||||
alert.textContent = message;
|
||||
if (duration) setTimeout(() => { alert.classList.remove('show'); }, duration);
|
||||
}
|
||||
|
||||
function refreshUI() {
|
||||
refreshArticleTable();
|
||||
loadConfigJson();
|
||||
updateStats();
|
||||
}
|
||||
|
||||
function updateStats() {
|
||||
document.getElementById('articleCount').textContent = articlesData.length;
|
||||
}
|
||||
|
||||
function openEditModal(nr) {
|
||||
const article = articlesData.find(a => a.nr === nr);
|
||||
if (!article) return;
|
||||
|
||||
currentEditingArticle = article;
|
||||
|
||||
document.getElementById('editNr').value = article.nr || '';
|
||||
document.getElementById('editName').value = article.name || '';
|
||||
document.getElementById('editThickness').value = article.thickness || '';
|
||||
document.getElementById('editAreaWeight').value = article.area_weight || '';
|
||||
document.getElementById('editWeightPerRoll').value = article.weight_per_roll || '';
|
||||
document.getElementById('editWidth').value = article.width || '';
|
||||
document.getElementById('editPrice').value = article.price || '';
|
||||
document.getElementById('editType').value = article.type || '';
|
||||
document.getElementById('editColor').value = article.color || '';
|
||||
document.getElementById('editDescription').value = article.description || '';
|
||||
|
||||
document.getElementById('editModal').classList.add('active');
|
||||
}
|
||||
|
||||
function closeEditModal() {
|
||||
document.getElementById('editModal').classList.remove('active');
|
||||
currentEditingArticle = null;
|
||||
}
|
||||
|
||||
function saveEditedArticle() {
|
||||
if (!currentEditingArticle) return;
|
||||
|
||||
currentEditingArticle.name = document.getElementById('editName').value.trim();
|
||||
currentEditingArticle.thickness = parseFloat(document.getElementById('editThickness').value) || 0;
|
||||
currentEditingArticle.area_weight = parseFloat(document.getElementById('editAreaWeight').value) || 0;
|
||||
currentEditingArticle.weight_per_roll = parseFloat(document.getElementById('editWeightPerRoll').value) || 0;
|
||||
currentEditingArticle.width = parseFloat(document.getElementById('editWidth').value) || 0;
|
||||
currentEditingArticle.price = parseFloat(document.getElementById('editPrice').value) || 0;
|
||||
currentEditingArticle.type = document.getElementById('editType').value.trim();
|
||||
currentEditingArticle.color = document.getElementById('editColor').value.trim();
|
||||
currentEditingArticle.description = document.getElementById('editDescription').value.trim();
|
||||
|
||||
closeEditModal();
|
||||
showAlert('articleAlert', '✅ Artikel aktualisiert!', 'success');
|
||||
refreshArticleTable();
|
||||
}
|
||||
|
||||
function addArticle() {
|
||||
const nr = document.getElementById('artNr').value.trim();
|
||||
const name = document.getElementById('artName').value.trim();
|
||||
const thickness = parseFloat(document.getElementById('artThickness').value) || 0;
|
||||
|
||||
if (!nr || !name || thickness === 0) {
|
||||
showAlert('articleAlert', '❌ Artikel-Nr., Name und Dicke sind erforderlich!', 'error');
|
||||
return;
|
||||
}
|
||||
|
||||
if (articlesData.some(a => a.nr === nr)) {
|
||||
showAlert('articleAlert', '❌ Artikel-Nr. existiert bereits!', 'error');
|
||||
return;
|
||||
}
|
||||
|
||||
const newArticle = {
|
||||
nr,
|
||||
name,
|
||||
thickness,
|
||||
area_weight: parseFloat(document.getElementById('artAreaWeight').value) || 0,
|
||||
weight_per_roll: parseFloat(document.getElementById('artWeightPerRoll').value) || 0,
|
||||
width: parseFloat(document.getElementById('artWidth').value) || 0,
|
||||
price: parseFloat(document.getElementById('artPrice').value) || 0,
|
||||
type: document.getElementById('artType').value.trim(),
|
||||
color: document.getElementById('artColor').value.trim(),
|
||||
description: document.getElementById('artDescription').value.trim()
|
||||
};
|
||||
|
||||
articlesData.push(newArticle);
|
||||
showAlert('articleAlert', '✅ Artikel hinzugefügt!', 'success');
|
||||
clearArticleForm();
|
||||
refreshArticleTable();
|
||||
updateStats();
|
||||
}
|
||||
|
||||
function deleteArticle(nr) {
|
||||
if (confirm('Artikel ' + nr + ' wirklich löschen?')) {
|
||||
articlesData = articlesData.filter(a => a.nr !== nr);
|
||||
showAlert('articleAlert', '✅ Artikel gelöscht!', 'success');
|
||||
refreshArticleTable();
|
||||
updateStats();
|
||||
}
|
||||
}
|
||||
|
||||
function refreshArticleTable() {
|
||||
const tbody = document.getElementById('articleTableBody');
|
||||
if (articlesData.length === 0) {
|
||||
tbody.innerHTML = '<tr><td colspan="6" style="text-align:center;color:#999;">Keine Artikel</td></tr>';
|
||||
return;
|
||||
}
|
||||
|
||||
tbody.innerHTML = articlesData.map(a => `
|
||||
<tr>
|
||||
<td><strong>${a.nr}</strong></td>
|
||||
<td>${a.name}</td>
|
||||
<td>${a.thickness.toFixed(3)}</td>
|
||||
<td>${a.width ? a.width.toFixed(2) : '—'}</td>
|
||||
<td>${a.price ? a.price.toFixed(2) + ' €' : '—'}</td>
|
||||
<td>
|
||||
<div class="action-buttons">
|
||||
<button class="edit-btn" onclick="openEditModal('${a.nr}')">✎ Bearbeiten</button>
|
||||
<button class="delete-btn" onclick="deleteArticle('${a.nr}')">✕ Löschen</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
`).join('');
|
||||
}
|
||||
|
||||
function clearArticleForm() {
|
||||
document.getElementById('artNr').value = '';
|
||||
document.getElementById('artName').value = '';
|
||||
document.getElementById('artThickness').value = '';
|
||||
document.getElementById('artAreaWeight').value = '';
|
||||
document.getElementById('artWeightPerRoll').value = '';
|
||||
document.getElementById('artWidth').value = '';
|
||||
document.getElementById('artPrice').value = '';
|
||||
document.getElementById('artType').value = '';
|
||||
document.getElementById('artColor').value = '';
|
||||
document.getElementById('artDescription').value = '';
|
||||
}
|
||||
|
||||
function loadConfigJson() {
|
||||
document.getElementById('configJson').value = JSON.stringify(configData, null, 2);
|
||||
}
|
||||
|
||||
function saveConfigJson() {
|
||||
try {
|
||||
configData = JSON.parse(document.getElementById('configJson').value);
|
||||
showAlert('configAlert', '✅ Konfiguration aktualisiert!', 'success');
|
||||
} catch (e) {
|
||||
showAlert('configAlert', '❌ Ungültiges JSON: ' + e.message, 'error', 0);
|
||||
}
|
||||
}
|
||||
|
||||
function resetConfigJson() {
|
||||
loadConfigJson();
|
||||
showAlert('configAlert', '🔄 Zurückgesetzt', 'info');
|
||||
}
|
||||
|
||||
function downloadFile(data, filename) {
|
||||
const blob = new Blob([JSON.stringify(data, null, 2)], { type: 'application/json' });
|
||||
const url = URL.createObjectURL(blob);
|
||||
const a = document.createElement('a');
|
||||
a.href = url;
|
||||
a.download = filename;
|
||||
a.click();
|
||||
URL.revokeObjectURL(url);
|
||||
}
|
||||
|
||||
function downloadArticleData() {
|
||||
downloadFile(articlesData, 'article-data.json');
|
||||
showAlert('toolsAlert', '✅ article-data.json heruntergeladen', 'success');
|
||||
}
|
||||
|
||||
function downloadConfig() {
|
||||
downloadFile(configData, 'config.json');
|
||||
showAlert('toolsAlert', '✅ config.json heruntergeladen', 'success');
|
||||
}
|
||||
|
||||
function downloadAll() {
|
||||
const allData = { articles: articlesData, config: configData, exported_at: new Date().toISOString() };
|
||||
downloadFile(allData, 'roll-calculator-backup-' + new Date().toISOString().slice(0,10) + '.json');
|
||||
showAlert('toolsAlert', '✅ Alle Daten heruntergeladen', 'success');
|
||||
}
|
||||
|
||||
function exportAllAsJson() {
|
||||
downloadAll();
|
||||
}
|
||||
|
||||
function handleFileUpload(event) {
|
||||
const file = event.target.files[0];
|
||||
if (!file) return;
|
||||
|
||||
const reader = new FileReader();
|
||||
reader.onload = (e) => {
|
||||
try {
|
||||
const data = JSON.parse(e.target.result);
|
||||
if (data.articles) articlesData = data.articles;
|
||||
if (data.config) configData = data.config;
|
||||
if (data.articleData) articlesData = data.articleData;
|
||||
|
||||
showAlert('toolsAlert', '✅ Datei hochgeladen und geladen!', 'success');
|
||||
refreshUI();
|
||||
} catch (err) {
|
||||
showAlert('toolsAlert', '❌ Fehler beim Laden der Datei: ' + err.message, 'error', 0);
|
||||
}
|
||||
};
|
||||
reader.readAsText(file);
|
||||
event.target.value = '';
|
||||
}
|
||||
|
||||
function resetAll() {
|
||||
articlesData = [];
|
||||
configData = {};
|
||||
showAlert('toolsAlert', '🔄 Auf Standardwerte zurückgesetzt', 'success');
|
||||
refreshUI();
|
||||
}
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,694 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Roll Calculator Admin - Einfach</title>
|
||||
<style>
|
||||
* { box-sizing: border-box; margin: 0; padding: 0; }
|
||||
body {
|
||||
font-family: 'Segoe UI', Arial, sans-serif;
|
||||
background: #f4f6f9;
|
||||
color: #333;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.header {
|
||||
background: linear-gradient(135deg, #003366 0%, #0066cc 100%);
|
||||
color: white;
|
||||
padding: 20px 30px;
|
||||
box-shadow: 0 2px 8px rgba(0,0,0,0.2);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
.header h1 { font-size: 20px; }
|
||||
|
||||
.container {
|
||||
max-width: 1200px;
|
||||
margin: 30px auto;
|
||||
padding: 0 20px;
|
||||
}
|
||||
|
||||
.info-box {
|
||||
background: #fffbea;
|
||||
border-left: 4px solid #f0b429;
|
||||
padding: 16px;
|
||||
border-radius: 4px;
|
||||
margin-bottom: 20px;
|
||||
font-size: 13px;
|
||||
color: #666;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.tabs {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
margin-bottom: 20px;
|
||||
border-bottom: 2px solid #e0e8f0;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.tab-btn {
|
||||
padding: 12px 20px;
|
||||
border: none;
|
||||
background: none;
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: #666;
|
||||
border-bottom: 3px solid transparent;
|
||||
margin-bottom: -2px;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
.tab-btn.active {
|
||||
color: #0066cc;
|
||||
border-bottom-color: #0066cc;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.tab-content { display: none; }
|
||||
.tab-content.active { display: block; }
|
||||
|
||||
.card {
|
||||
background: white;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 8px rgba(0,0,0,0.07);
|
||||
padding: 24px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.card h2 {
|
||||
font-size: 18px;
|
||||
margin-bottom: 8px;
|
||||
color: #003366;
|
||||
}
|
||||
.card > p {
|
||||
font-size: 12px;
|
||||
color: #666;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.form-row {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
||||
gap: 16px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.form-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.form-group label {
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
color: #555;
|
||||
margin-bottom: 5px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.4px;
|
||||
}
|
||||
.form-group input, .form-group textarea {
|
||||
padding: 9px 11px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 4px;
|
||||
font-size: 13px;
|
||||
font-family: 'Segoe UI', Arial, sans-serif;
|
||||
transition: border 0.2s;
|
||||
}
|
||||
.form-group textarea {
|
||||
font-family: 'Courier New', monospace;
|
||||
resize: vertical;
|
||||
min-height: 300px;
|
||||
}
|
||||
.form-group input:focus, .form-group textarea:focus {
|
||||
outline: none;
|
||||
border-color: #0066cc;
|
||||
box-shadow: 0 0 0 3px rgba(0,102,204,0.1);
|
||||
}
|
||||
|
||||
.button-group {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
margin-top: 20px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.btn {
|
||||
padding: 10px 20px;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
.btn-primary {
|
||||
background: #0066cc;
|
||||
color: white;
|
||||
}
|
||||
.btn-primary:hover { background: #0052a3; box-shadow: 0 2px 6px rgba(0,102,204,0.3); }
|
||||
|
||||
.btn-secondary {
|
||||
background: #e0e0e0;
|
||||
color: #333;
|
||||
}
|
||||
.btn-secondary:hover { background: #d0d0d0; }
|
||||
|
||||
.btn-danger {
|
||||
background: #dc3545;
|
||||
color: white;
|
||||
}
|
||||
.btn-danger:hover { background: #c82333; }
|
||||
|
||||
.btn-success {
|
||||
background: #28a745;
|
||||
color: white;
|
||||
}
|
||||
.btn-success:hover { background: #218838; }
|
||||
|
||||
table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
font-size: 13px;
|
||||
}
|
||||
table th {
|
||||
background: #f5f5f5;
|
||||
padding: 12px;
|
||||
text-align: left;
|
||||
font-weight: 600;
|
||||
border-bottom: 2px solid #0066cc;
|
||||
color: #333;
|
||||
}
|
||||
table td {
|
||||
padding: 12px;
|
||||
border-bottom: 1px solid #e0e0e0;
|
||||
}
|
||||
table tr:hover { background: #f9f9f9; }
|
||||
|
||||
.alert {
|
||||
padding: 12px 16px;
|
||||
border-radius: 4px;
|
||||
margin-bottom: 16px;
|
||||
font-size: 13px;
|
||||
display: none;
|
||||
}
|
||||
.alert.show { display: block; }
|
||||
.alert-success {
|
||||
background: #d4edda;
|
||||
border: 1px solid #c3e6cb;
|
||||
color: #155724;
|
||||
}
|
||||
.alert-error {
|
||||
background: #f8d7da;
|
||||
border: 1px solid #f5c6cb;
|
||||
color: #721c24;
|
||||
}
|
||||
.alert-info {
|
||||
background: #d1ecf1;
|
||||
border: 1px solid #bee5eb;
|
||||
color: #0c5460;
|
||||
}
|
||||
|
||||
.action-buttons {
|
||||
display: flex;
|
||||
gap: 6px;
|
||||
}
|
||||
.action-buttons button {
|
||||
padding: 6px 12px;
|
||||
font-size: 11px;
|
||||
border: none;
|
||||
border-radius: 3px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
.edit-btn {
|
||||
background: #0066cc;
|
||||
color: white;
|
||||
}
|
||||
.edit-btn:hover { background: #0052a3; }
|
||||
.delete-btn {
|
||||
background: #dc3545;
|
||||
color: white;
|
||||
}
|
||||
.delete-btn:hover { background: #c82333; }
|
||||
|
||||
.password-overlay {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: rgba(0,0,0,0.7);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 9999;
|
||||
}
|
||||
.password-box {
|
||||
background: white;
|
||||
border-radius: 8px;
|
||||
padding: 32px;
|
||||
max-width: 400px;
|
||||
box-shadow: 0 8px 40px rgba(0,0,0,0.3);
|
||||
text-align: center;
|
||||
}
|
||||
.password-box h2 { margin-bottom: 20px; color: #003366; }
|
||||
.password-box input {
|
||||
width: 100%;
|
||||
padding: 11px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 4px;
|
||||
font-size: 14px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.password-box .btn { width: 100%; margin-bottom: 10px; }
|
||||
|
||||
.file-input {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.stats {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
|
||||
gap: 16px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.stat {
|
||||
background: linear-gradient(135deg, #e8f4fd 0%, #d0e8fa 100%);
|
||||
border: 1px solid #0066cc;
|
||||
border-radius: 6px;
|
||||
padding: 16px;
|
||||
text-align: center;
|
||||
}
|
||||
.stat-value {
|
||||
font-size: 24px;
|
||||
font-weight: 700;
|
||||
color: #003366;
|
||||
}
|
||||
.stat-label {
|
||||
font-size: 12px;
|
||||
color: #666;
|
||||
margin-top: 4px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- PASSWORD OVERLAY -->
|
||||
<div id="passwordOverlay" class="password-overlay">
|
||||
<div class="password-box">
|
||||
<h2>🔐 Roll Calculator Admin</h2>
|
||||
<p style="font-size:13px;color:#666;margin-bottom:20px;">Geben Sie das Admin-Passwort ein</p>
|
||||
<input type="password" id="passwordInput" placeholder="Passwort" autofocus>
|
||||
<button class="btn btn-primary" onclick="checkPassword()">🔓 Anmelden</button>
|
||||
<p style="font-size:11px;color:#999;margin-top:10px;">Standard: admin123</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- MAIN APP -->
|
||||
<div id="mainApp" style="display:none;">
|
||||
<div class="header">
|
||||
<h1>🛠️ Roll Calculator Admin</h1>
|
||||
<button class="btn btn-secondary" onclick="logout()">Abmelden</button>
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
<div class="info-box">
|
||||
💡 Tipp: Alle Änderungen werden im Browser gespeichert. Mit "Download" kannst du die neuen JSON-Dateien herunterladen und auf deinen Server kopieren.
|
||||
</div>
|
||||
|
||||
<div class="tabs">
|
||||
<button class="tab-btn active" onclick="switchTab('articles')">📄 Artikel-Daten</button>
|
||||
<button class="tab-btn" onclick="switchTab('config')">⚙️ Konfiguration</button>
|
||||
<button class="tab-btn" onclick="switchTab('tools')">🔧 Tools</button>
|
||||
</div>
|
||||
|
||||
<!-- TAB: ARTICLES -->
|
||||
<div id="articles" class="tab-content active">
|
||||
<div class="card">
|
||||
<h2>Artikel verwalten</h2>
|
||||
<p>Artikel hinzufügen, bearbeiten oder löschen</p>
|
||||
|
||||
<div id="articleAlert" class="alert"></div>
|
||||
|
||||
<div class="stats">
|
||||
<div class="stat">
|
||||
<div class="stat-value" id="articleCount">0</div>
|
||||
<div class="stat-label">Artikel</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3 style="font-size:14px;margin-bottom:12px;margin-top:20px;">Neuer Artikel</h3>
|
||||
<div class="form-row">
|
||||
<div class="form-group">
|
||||
<label>Artikel-Nr.</label>
|
||||
<input type="text" id="artNr" placeholder="z.B. 180305">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Name</label>
|
||||
<input type="text" id="artName" placeholder="z.B. Bfix NSP 5300, 5,00 x 40 m">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<div class="form-group">
|
||||
<label>Produktdicke (mm)</label>
|
||||
<input type="number" id="artThickness" placeholder="z.B. 6.918" step="0.001" min="0">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Area Weight (g/m²) - Optional</label>
|
||||
<input type="number" id="artAreaWeight" placeholder="z.B. 5300" step="1" min="0">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="button-group">
|
||||
<button class="btn btn-primary" onclick="addArticle()">➕ Hinzufügen</button>
|
||||
<button class="btn btn-secondary" onclick="clearArticleForm()">Zurücksetzen</button>
|
||||
</div>
|
||||
|
||||
<h3 style="font-size:14px;margin-bottom:12px;margin-top:30px;">Artikel-Liste</h3>
|
||||
<div style="overflow-x:auto;">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Nr.</th>
|
||||
<th>Name</th>
|
||||
<th>Dicke (mm)</th>
|
||||
<th>Area Weight</th>
|
||||
<th>Aktionen</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="articleTableBody">
|
||||
<tr><td colspan="5" style="text-align:center;color:#999;">Keine Artikel</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- TAB: CONFIG -->
|
||||
<div id="config" class="tab-content">
|
||||
<div class="card">
|
||||
<h2>Konfiguration (config.json)</h2>
|
||||
<p>Gabelstapler-Regeln und Schwellenwerte - JSON direkt bearbeiten</p>
|
||||
|
||||
<div id="configAlert" class="alert"></div>
|
||||
|
||||
<textarea id="configJson" placeholder="config.json wird hier angezeigt..."></textarea>
|
||||
|
||||
<div class="button-group">
|
||||
<button class="btn btn-primary" onclick="saveConfigJson()">💾 Aktualisieren</button>
|
||||
<button class="btn btn-secondary" onclick="resetConfigJson()">🔄 Zurücksetzen</button>
|
||||
</div>
|
||||
|
||||
<p style="font-size:11px;color:#999;margin-top:16px;">
|
||||
💡 JSON wird automatisch validiert. Im Fehlerfall siehst du eine Fehlermeldung.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- TAB: TOOLS -->
|
||||
<div id="tools" class="tab-content">
|
||||
<div class="card">
|
||||
<h2>📥 Dateien verwalten</h2>
|
||||
<p>Herunterladen, hochladen oder zurücksetzen</p>
|
||||
|
||||
<div id="toolsAlert" class="alert"></div>
|
||||
|
||||
<h3 style="font-size:13px;margin-bottom:12px;">Download</h3>
|
||||
<div class="button-group">
|
||||
<button class="btn btn-success" onclick="downloadArticleData()">📥 article-data.json</button>
|
||||
<button class="btn btn-success" onclick="downloadConfig()">📥 config.json</button>
|
||||
<button class="btn btn-success" onclick="downloadAll()">📦 Alle Dateien (ZIP)</button>
|
||||
</div>
|
||||
|
||||
<h3 style="font-size:13px;margin-bottom:12px;margin-top:20px;">Upload</h3>
|
||||
<p style="font-size:12px;color:#666;margin-bottom:10px;">Dateien hochladen und überschreiben:</p>
|
||||
<div class="button-group">
|
||||
<button class="btn btn-secondary" onclick="document.getElementById('uploadFile').click()">📤 JSON-Datei hochladen</button>
|
||||
</div>
|
||||
<input type="file" id="uploadFile" class="file-input" accept=".json" onchange="handleFileUpload(event)">
|
||||
|
||||
<h3 style="font-size:13px;margin-bottom:12px;margin-top:20px;">Daten</h3>
|
||||
<p style="font-size:12px;color:#666;margin-bottom:10px;">Alle bearbeiteten Daten als ein JSON exportieren:</p>
|
||||
<button class="btn btn-primary" onclick="exportAllAsJson()">💾 Alles exportieren</button>
|
||||
|
||||
<h3 style="font-size:13px;margin-bottom:12px;margin-top:20px;">⚠️ Vorsicht</h3>
|
||||
<p style="font-size:12px;color:#666;margin-bottom:10px;">Bearbeitete Daten zurücksetzen (Achtung: nicht rückgängig!):</p>
|
||||
<button class="btn btn-danger" onclick="if(confirm('Wirklich auf Original zurücksetzen?')) resetAll()">🔄 Auf Standardwerte zurücksetzen</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// ═════════════════════════════════════════════════════════════════════════════
|
||||
// CONFIG
|
||||
// ═════════════════════════════════════════════════════════════════════════════
|
||||
const ADMIN_PASSWORD = 'admin123'; // ÄNDERN!
|
||||
|
||||
// Beispiel article-data.json (wird von Server geladen)
|
||||
let articlesData = [];
|
||||
|
||||
// Beispiel config.json (wird von Server geladen)
|
||||
let configData = {};
|
||||
|
||||
// ═════════════════════════════════════════════════════════════════════════════
|
||||
// INIT
|
||||
// ═════════════════════════════════════════════════════════════════════════════
|
||||
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
loadDataFromServer();
|
||||
document.getElementById('passwordInput').addEventListener('keypress', (e) => {
|
||||
if (e.key === 'Enter') checkPassword();
|
||||
});
|
||||
});
|
||||
|
||||
function loadDataFromServer() {
|
||||
// Versuche, Daten vom Server zu laden
|
||||
Promise.all([
|
||||
fetch('article-data.json').then(r => r.json()).catch(() => []),
|
||||
fetch('config.json').then(r => r.json()).catch(() => ({}))
|
||||
]).then(([articles, config]) => {
|
||||
articlesData = articles || [];
|
||||
configData = config || {};
|
||||
console.log('✅ Daten geladen:', articlesData.length, 'Artikel, config vorhanden');
|
||||
});
|
||||
}
|
||||
|
||||
// ═════════════════════════════════════════════════════════════════════════════
|
||||
// AUTH
|
||||
// ═════════════════════════════════════════════════════════════════════════════
|
||||
|
||||
function checkPassword() {
|
||||
const pwd = document.getElementById('passwordInput').value;
|
||||
if (pwd === ADMIN_PASSWORD) {
|
||||
document.getElementById('passwordOverlay').style.display = 'none';
|
||||
document.getElementById('mainApp').style.display = 'block';
|
||||
refreshUI();
|
||||
} else {
|
||||
alert('❌ Falsches Passwort!');
|
||||
document.getElementById('passwordInput').value = '';
|
||||
document.getElementById('passwordInput').focus();
|
||||
}
|
||||
}
|
||||
|
||||
function logout() {
|
||||
document.getElementById('mainApp').style.display = 'none';
|
||||
document.getElementById('passwordOverlay').style.display = 'flex';
|
||||
document.getElementById('passwordInput').value = '';
|
||||
document.getElementById('passwordInput').focus();
|
||||
}
|
||||
|
||||
// ═════════════════════════════════════════════════════════════════════════════
|
||||
// UI
|
||||
// ═════════════════════════════════════════════════════════════════════════════
|
||||
|
||||
function switchTab(tabName) {
|
||||
document.querySelectorAll('.tab-content').forEach(t => t.classList.remove('active'));
|
||||
document.querySelectorAll('.tab-btn').forEach(b => b.classList.remove('active'));
|
||||
document.getElementById(tabName).classList.add('active');
|
||||
event.target.classList.add('active');
|
||||
|
||||
if (tabName === 'config') loadConfigJson();
|
||||
if (tabName === 'articles') refreshArticleTable();
|
||||
}
|
||||
|
||||
function showAlert(containerId, message, type, duration = 4000) {
|
||||
const alert = document.getElementById(containerId);
|
||||
alert.className = `alert show alert-${type}`;
|
||||
alert.textContent = message;
|
||||
if (duration) setTimeout(() => { alert.classList.remove('show'); }, duration);
|
||||
}
|
||||
|
||||
function refreshUI() {
|
||||
refreshArticleTable();
|
||||
loadConfigJson();
|
||||
updateStats();
|
||||
}
|
||||
|
||||
function updateStats() {
|
||||
document.getElementById('articleCount').textContent = articlesData.length;
|
||||
}
|
||||
|
||||
// ═════════════════════════════════════════════════════════════════════════════
|
||||
// ARTICLES
|
||||
// ═════════════════════════════════════════════════════════════════════════════
|
||||
|
||||
function addArticle() {
|
||||
const nr = document.getElementById('artNr').value.trim();
|
||||
const name = document.getElementById('artName').value.trim();
|
||||
const thickness = parseFloat(document.getElementById('artThickness').value) || 0;
|
||||
const area_weight = parseFloat(document.getElementById('artAreaWeight').value) || 0;
|
||||
|
||||
if (!nr || !name || thickness === 0) {
|
||||
showAlert('articleAlert', '❌ Artikel-Nr., Name und Dicke sind erforderlich!', 'error');
|
||||
return;
|
||||
}
|
||||
|
||||
if (articlesData.some(a => a.nr === nr)) {
|
||||
showAlert('articleAlert', '❌ Artikel-Nr. existiert bereits!', 'error');
|
||||
return;
|
||||
}
|
||||
|
||||
articlesData.push({ nr, name, thickness, area_weight });
|
||||
showAlert('articleAlert', '✅ Artikel hinzugefügt!', 'success');
|
||||
clearArticleForm();
|
||||
refreshArticleTable();
|
||||
updateStats();
|
||||
}
|
||||
|
||||
function deleteArticle(nr) {
|
||||
if (confirm('Artikel ' + nr + ' wirklich löschen?')) {
|
||||
articlesData = articlesData.filter(a => a.nr !== nr);
|
||||
showAlert('articleAlert', '✅ Artikel gelöscht!', 'success');
|
||||
refreshArticleTable();
|
||||
updateStats();
|
||||
}
|
||||
}
|
||||
|
||||
function refreshArticleTable() {
|
||||
const tbody = document.getElementById('articleTableBody');
|
||||
if (articlesData.length === 0) {
|
||||
tbody.innerHTML = '<tr><td colspan="5" style="text-align:center;color:#999;">Keine Artikel</td></tr>';
|
||||
return;
|
||||
}
|
||||
|
||||
tbody.innerHTML = articlesData.map(a => `
|
||||
<tr>
|
||||
<td><strong>${a.nr}</strong></td>
|
||||
<td>${a.name}</td>
|
||||
<td>${a.thickness.toFixed(3)}</td>
|
||||
<td>${a.area_weight ? a.area_weight : '—'}</td>
|
||||
<td>
|
||||
<div class="action-buttons">
|
||||
<button class="edit-btn" onclick="editArticle('${a.nr}')">✎ Bearbeiten</button>
|
||||
<button class="delete-btn" onclick="deleteArticle('${a.nr}')">✕ Löschen</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
`).join('');
|
||||
}
|
||||
|
||||
function editArticle(nr) {
|
||||
const article = articlesData.find(a => a.nr === nr);
|
||||
if (!article) return;
|
||||
|
||||
const newThickness = prompt('Produktdicke (mm):', article.thickness);
|
||||
if (newThickness !== null) {
|
||||
article.thickness = parseFloat(newThickness) || 0;
|
||||
showAlert('articleAlert', '✅ Aktualisiert!', 'success');
|
||||
refreshArticleTable();
|
||||
}
|
||||
}
|
||||
|
||||
function clearArticleForm() {
|
||||
document.getElementById('artNr').value = '';
|
||||
document.getElementById('artName').value = '';
|
||||
document.getElementById('artThickness').value = '';
|
||||
document.getElementById('artAreaWeight').value = '';
|
||||
}
|
||||
|
||||
// ═════════════════════════════════════════════════════════════════════════════
|
||||
// CONFIG
|
||||
// ═════════════════════════════════════════════════════════════════════════════
|
||||
|
||||
function loadConfigJson() {
|
||||
document.getElementById('configJson').value = JSON.stringify(configData, null, 2);
|
||||
}
|
||||
|
||||
function saveConfigJson() {
|
||||
try {
|
||||
configData = JSON.parse(document.getElementById('configJson').value);
|
||||
showAlert('configAlert', '✅ Konfiguration aktualisiert!', 'success');
|
||||
} catch (e) {
|
||||
showAlert('configAlert', '❌ Ungültiges JSON: ' + e.message, 'error', 0);
|
||||
}
|
||||
}
|
||||
|
||||
function resetConfigJson() {
|
||||
loadConfigJson();
|
||||
showAlert('configAlert', '🔄 Zurückgesetzt', 'info');
|
||||
}
|
||||
|
||||
// ═════════════════════════════════════════════════════════════════════════════
|
||||
// DOWNLOADS / UPLOADS
|
||||
// ═════════════════════════════════════════════════════════════════════════════
|
||||
|
||||
function downloadFile(data, filename) {
|
||||
const blob = new Blob([JSON.stringify(data, null, 2)], { type: 'application/json' });
|
||||
const url = URL.createObjectURL(blob);
|
||||
const a = document.createElement('a');
|
||||
a.href = url;
|
||||
a.download = filename;
|
||||
a.click();
|
||||
URL.revokeObjectURL(url);
|
||||
}
|
||||
|
||||
function downloadArticleData() {
|
||||
downloadFile(articlesData, 'article-data.json');
|
||||
showAlert('toolsAlert', '✅ article-data.json heruntergeladen', 'success');
|
||||
}
|
||||
|
||||
function downloadConfig() {
|
||||
downloadFile(configData, 'config.json');
|
||||
showAlert('toolsAlert', '✅ config.json heruntergeladen', 'success');
|
||||
}
|
||||
|
||||
function downloadAll() {
|
||||
const allData = { articles: articlesData, config: configData, exported_at: new Date().toISOString() };
|
||||
downloadFile(allData, 'roll-calculator-backup-' + new Date().toISOString().slice(0,10) + '.json');
|
||||
showAlert('toolsAlert', '✅ Alle Daten heruntergeladen', 'success');
|
||||
}
|
||||
|
||||
function exportAllAsJson() {
|
||||
downloadAll();
|
||||
}
|
||||
|
||||
function handleFileUpload(event) {
|
||||
const file = event.target.files[0];
|
||||
if (!file) return;
|
||||
|
||||
const reader = new FileReader();
|
||||
reader.onload = (e) => {
|
||||
try {
|
||||
const data = JSON.parse(e.target.result);
|
||||
if (data.articles) articlesData = data.articles;
|
||||
if (data.config) configData = data.config;
|
||||
if (data.articleData) articlesData = data.articleData; // alternate key
|
||||
|
||||
showAlert('toolsAlert', '✅ Datei hochgeladen und geladen!', 'success');
|
||||
refreshUI();
|
||||
} catch (err) {
|
||||
showAlert('toolsAlert', '❌ Fehler beim Laden der Datei: ' + err.message, 'error', 0);
|
||||
}
|
||||
};
|
||||
reader.readAsText(file);
|
||||
event.target.value = ''; // Reset file input
|
||||
}
|
||||
|
||||
function resetAll() {
|
||||
articlesData = [];
|
||||
configData = {};
|
||||
showAlert('toolsAlert', '🔄 Auf Standardwerte zurückgesetzt', 'success');
|
||||
refreshUI();
|
||||
}
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -5,6 +5,7 @@ Flask app with HTTP Basic Authentication
|
||||
|
||||
from flask import Flask, render_template, request, send_file, send_from_directory, jsonify
|
||||
from flask_httpauth import HTTPBasicAuth
|
||||
from werkzeug.security import check_password_hash
|
||||
from functools import wraps
|
||||
import os
|
||||
from datetime import datetime
|
||||
@@ -19,21 +20,65 @@ auth = HTTPBasicAuth()
|
||||
|
||||
# Benutzer für Beta-Phase (in Produktion aus env-Variablen laden!)
|
||||
BETA_USERS = {
|
||||
"beta": "rollcalc_beta_2026", # ⚠️ ÄNDERN!
|
||||
"naue": "naue_access_2026", # ⚠️ ÄNDERN!
|
||||
"cniehues": "beta_test_2026", # ⚠️ ÄNDERN!
|
||||
"lvollmert": "Geheim!", # ⚠️ ÄNDERN!
|
||||
"mtazl": "rollcalc", # ⚠️ ÄNDERN!
|
||||
"controlling": "beta2026" # ⚠️ ÄNDERN!
|
||||
}
|
||||
|
||||
# Optional: Admin-Features (z.B. Logs, Stats)
|
||||
ADMIN_USERS = {
|
||||
"admin": "admin_secure_pwd_2026" # ⚠️ ÄNDERN!
|
||||
"beta": {
|
||||
"password_hash": "pbkdf2:sha256:600000$HNtF3VdZKdmtg8Vw$8f976a99a457c5e924916dc6f735dd631042c8c126af8d4bda9abcd7532d904f"
|
||||
},
|
||||
"naue": {
|
||||
"password_hash": "pbkdf2:sha256:600000$RVPiW2mYXJJIp3d7$0f838b8619d386e2da57e60ae8ccb944bb0f9f63d81ce3d174ec3034b0abcd19"
|
||||
},
|
||||
"cniehues": {
|
||||
"password_hash": "pbkdf2:sha256:600000$iNmhakf34xk26xrz$ae78846461370c52b7f56fad5ac0ae8e33860d6f00075ac78e3a5b8c31d51a3d"
|
||||
},
|
||||
"lvollmert": {
|
||||
"password_hash": "pbkdf2:sha256:600000$8FGop5ymmHpuIqfK$8ba223e20c514cf6bc1297435a2e7e2be81668951297f0e01ad6a931718ad7de"
|
||||
},
|
||||
"mtazl": {
|
||||
"password_hash": "pbkdf2:sha256:600000$H19skoalhWxlLnY5$d30bfeae38470b19900648fd110978b3677607c3a161d663a7e5d5c2167a3710"
|
||||
},
|
||||
"controlling": {
|
||||
"password_hash": "pbkdf2:sha256:600000$ksj86lrKz6nnSpXz$5161e0b5c76bd72d6b2cd04866ef49e69f463f474d7e47075171894bf3366f29"
|
||||
}
|
||||
}
|
||||
|
||||
# Logging für Auditing
|
||||
LOG_FILE = "access_log.json"
|
||||
BUILD_INFO_FILE = "build_info.json"
|
||||
UNKNOWN_BUILD_INFO = {
|
||||
"version": "unknown",
|
||||
"branch": "unknown",
|
||||
"commit": "unknown",
|
||||
"timestamp": "unknown"
|
||||
}
|
||||
|
||||
# ============================================================================
|
||||
# BUILD INFO
|
||||
# ============================================================================
|
||||
|
||||
def load_build_info():
|
||||
"""Load deployment/build metadata for templates."""
|
||||
try:
|
||||
with open(BUILD_INFO_FILE, "r") as f:
|
||||
data = json.load(f)
|
||||
except Exception as e:
|
||||
print(f"[Build Info Error] {e}")
|
||||
return UNKNOWN_BUILD_INFO.copy()
|
||||
|
||||
if not isinstance(data, dict):
|
||||
return UNKNOWN_BUILD_INFO.copy()
|
||||
|
||||
build_info = UNKNOWN_BUILD_INFO.copy()
|
||||
for key in build_info:
|
||||
value = data.get(key)
|
||||
if isinstance(value, str) and value.strip():
|
||||
build_info[key] = value.strip()
|
||||
return build_info
|
||||
|
||||
BUILD_INFO = load_build_info()
|
||||
|
||||
@app.context_processor
|
||||
def inject_build_info():
|
||||
"""Make build metadata available in all templates."""
|
||||
return {"build_info": BUILD_INFO}
|
||||
|
||||
# ============================================================================
|
||||
# AUTHENTICATION
|
||||
@@ -42,8 +87,12 @@ LOG_FILE = "access_log.json"
|
||||
@auth.verify_password
|
||||
def verify_password(username, password):
|
||||
"""Verify HTTP Basic Auth credentials"""
|
||||
all_users = {**BETA_USERS, **ADMIN_USERS}
|
||||
if username in all_users and all_users[username] == password:
|
||||
user_config = BETA_USERS.get(username)
|
||||
if not user_config:
|
||||
return None
|
||||
|
||||
password_hash = user_config.get("password_hash")
|
||||
if password_hash and check_password_hash(password_hash, password):
|
||||
return username
|
||||
return None
|
||||
|
||||
@@ -96,30 +145,12 @@ def health_check():
|
||||
def get_user():
|
||||
"""Get current authenticated user info"""
|
||||
user = auth.current_user()
|
||||
is_admin = user in ADMIN_USERS
|
||||
return jsonify({
|
||||
"username": user,
|
||||
"authenticated": True,
|
||||
"is_admin": is_admin,
|
||||
"timestamp": datetime.now().isoformat()
|
||||
}), 200
|
||||
|
||||
@app.route("/admin/logs", methods=["GET"])
|
||||
@auth.login_required
|
||||
def get_logs():
|
||||
"""View access logs - admin only"""
|
||||
user = auth.current_user()
|
||||
if user not in ADMIN_USERS:
|
||||
log_access(user, "/admin/logs", "GET", 403)
|
||||
return jsonify({"error": "Unauthorized"}), 403
|
||||
|
||||
log_access(user, "/admin/logs", "GET")
|
||||
logs = []
|
||||
if os.path.exists(LOG_FILE):
|
||||
with open(LOG_FILE, "r") as f:
|
||||
logs = json.load(f)
|
||||
return jsonify({"logs": logs}), 200
|
||||
|
||||
# ============================================================================
|
||||
# ERROR HANDLERS
|
||||
# ============================================================================
|
||||
@@ -162,5 +193,5 @@ if __name__ == "__main__":
|
||||
host="0.0.0.0",
|
||||
port=5000,
|
||||
debug=False,
|
||||
use_reloader=True
|
||||
use_reloader=False
|
||||
)
|
||||
|
||||
@@ -0,0 +1,6 @@
|
||||
{
|
||||
"version": "v0.4-dev",
|
||||
"branch": "develop/v0.4",
|
||||
"commit": "7a27fb8",
|
||||
"timestamp": "2026-07-07T16:46:32+02:00"
|
||||
}
|
||||
@@ -1,107 +0,0 @@
|
||||
#!/usr/bin/env python3
|
||||
"""
|
||||
Automatischer Fix für article-data.json Fetch-URLs in Flask
|
||||
Ersetzt relative URLs durch /static/ URLs
|
||||
"""
|
||||
|
||||
import re
|
||||
import os
|
||||
from pathlib import Path
|
||||
|
||||
def fix_html_file(html_path):
|
||||
"""Ersetzt die alten Fetch-URLs durch die neuen Flask-URLs"""
|
||||
|
||||
if not os.path.exists(html_path):
|
||||
print(f"❌ Datei nicht gefunden: {html_path}")
|
||||
return False
|
||||
|
||||
print(f"📖 Öffne: {html_path}")
|
||||
|
||||
with open(html_path, 'r', encoding='utf-8') as f:
|
||||
content = f.read()
|
||||
|
||||
original_content = content
|
||||
changes = []
|
||||
|
||||
# Fix 1: fetch('article-data.json') → fetch('/static/article-data.json')
|
||||
if "fetch('article-data.json')" in content or 'fetch("article-data.json")' in content:
|
||||
content = content.replace("fetch('article-data.json')", "fetch('/static/article-data.json')")
|
||||
content = content.replace('fetch("article-data.json")', 'fetch("/static/article-data.json")')
|
||||
changes.append("✓ article-data.json URL aktualisiert")
|
||||
|
||||
# Fix 2: fetch('config.json') → fetch('/static/config.json')
|
||||
if "fetch('config.json')" in content or 'fetch("config.json")' in content:
|
||||
content = content.replace("fetch('config.json')", "fetch('/static/config.json')")
|
||||
content = content.replace('fetch("config.json")', 'fetch("/static/config.json")')
|
||||
changes.append("✓ config.json URL aktualisiert")
|
||||
|
||||
# Fix 3: register('service-worker.js') → register('/static/service-worker.js')
|
||||
if "register('service-worker.js')" in content or 'register("service-worker.js")' in content:
|
||||
content = content.replace("register('service-worker.js')", "register('/static/service-worker.js')")
|
||||
content = content.replace('register("service-worker.js")', 'register("/static/service-worker.js")')
|
||||
changes.append("✓ service-worker.js URL aktualisiert")
|
||||
|
||||
if content != original_content:
|
||||
# Backup erstellen
|
||||
backup_path = html_path + ".backup"
|
||||
with open(backup_path, 'w', encoding='utf-8') as f:
|
||||
f.write(original_content)
|
||||
print(f"💾 Backup erstellt: {backup_path}")
|
||||
|
||||
# Neue Version speichern
|
||||
with open(html_path, 'w', encoding='utf-8') as f:
|
||||
f.write(content)
|
||||
|
||||
print(f"✅ HTML aktualisiert: {html_path}")
|
||||
for change in changes:
|
||||
print(f" {change}")
|
||||
return True
|
||||
else:
|
||||
print("⚠️ Keine Änderungen notwendig (URLs sind bereits korrekt)")
|
||||
return False
|
||||
|
||||
def check_static_files():
|
||||
"""Prüft ob die benötigten Dateien im static/ Ordner sind"""
|
||||
print("\n🔍 Prüfe static/ Verzeichnis...")
|
||||
|
||||
files_to_check = ['article-data.json', 'config.json']
|
||||
found = []
|
||||
missing = []
|
||||
|
||||
for filename in files_to_check:
|
||||
path = os.path.join('static', filename)
|
||||
if os.path.exists(path):
|
||||
size = os.path.getsize(path)
|
||||
found.append(f" ✓ {filename} ({size} bytes)")
|
||||
else:
|
||||
missing.append(f" ❌ {filename} (NICHT GEFUNDEN)")
|
||||
|
||||
for msg in found:
|
||||
print(msg)
|
||||
for msg in missing:
|
||||
print(msg)
|
||||
|
||||
return len(missing) == 0
|
||||
|
||||
if __name__ == "__main__":
|
||||
print("=" * 60)
|
||||
print("Fix für article-data.json Flask-URLs")
|
||||
print("=" * 60)
|
||||
|
||||
html_file = "templates/roll_calculator.html"
|
||||
|
||||
success = fix_html_file(html_file)
|
||||
files_ok = check_static_files()
|
||||
|
||||
print("\n" + "=" * 60)
|
||||
if success or files_ok:
|
||||
print("✅ Fix abgeschlossen!")
|
||||
print("\n📝 Nächste Schritte:")
|
||||
print(" 1. Browser neuladen (Ctrl+Shift+R)")
|
||||
print(" 2. Öffne Browser Console (F12)")
|
||||
print(" 3. Du solltest sehen:")
|
||||
print(" 'Article data loaded: XXX items'")
|
||||
print(" 'Config updated from file'")
|
||||
else:
|
||||
print("⚠️ Keine Änderungen nötig")
|
||||
print("=" * 60)
|
||||
@@ -0,0 +1,56 @@
|
||||
#!/usr/bin/env python3
|
||||
"""
|
||||
Create password hashes or user config snippets for RollCalc Basic Auth users.
|
||||
"""
|
||||
|
||||
import argparse
|
||||
import getpass
|
||||
import json
|
||||
|
||||
from werkzeug.security import generate_password_hash
|
||||
|
||||
|
||||
def build_parser():
|
||||
parser = argparse.ArgumentParser(
|
||||
description="Generate RollCalc password hashes or user config entries."
|
||||
)
|
||||
parser.add_argument(
|
||||
"username",
|
||||
nargs="?",
|
||||
help="Optional username for a generated user config snippet.",
|
||||
)
|
||||
parser.add_argument(
|
||||
"--password",
|
||||
help="Password to hash. Omit to enter it securely via prompt.",
|
||||
)
|
||||
parser.add_argument(
|
||||
"--json",
|
||||
action="store_true",
|
||||
help="Output a JSON object for the user entry.",
|
||||
)
|
||||
return parser
|
||||
|
||||
|
||||
def main():
|
||||
args = build_parser().parse_args()
|
||||
password = args.password
|
||||
|
||||
if password is None:
|
||||
password = getpass.getpass("Password: ")
|
||||
|
||||
password_hash = generate_password_hash(password)
|
||||
|
||||
if args.username:
|
||||
entry = {args.username: {"password_hash": password_hash}}
|
||||
if args.json:
|
||||
print(json.dumps(entry, indent=2))
|
||||
else:
|
||||
print(f'"{args.username}": {{')
|
||||
print(f' "password_hash": "{password_hash}"')
|
||||
print("}")
|
||||
else:
|
||||
print(password_hash)
|
||||
|
||||
|
||||
if __name__ == "__main__":
|
||||
main()
|
||||
Executable
+16
@@ -0,0 +1,16 @@
|
||||
#!/bin/bash
|
||||
set -e
|
||||
|
||||
SCRIPT_DIR="$(cd "$(dirname "$0")" && pwd)"
|
||||
PROJECT_ROOT="$(cd "$SCRIPT_DIR/.." && pwd)"
|
||||
|
||||
cd "$PROJECT_ROOT"
|
||||
|
||||
cat > build_info.json <<EOF
|
||||
{
|
||||
"version": "v0.4-dev",
|
||||
"branch": "$(git branch --show-current)",
|
||||
"commit": "$(git rev-parse --short HEAD)",
|
||||
"timestamp": "$(date -Iseconds)"
|
||||
}
|
||||
EOF
|
||||
@@ -0,0 +1,19 @@
|
||||
[Unit]
|
||||
Description=RollCalc Flask Application
|
||||
After=network-online.target
|
||||
Wants=network-online.target
|
||||
|
||||
[Service]
|
||||
Type=simple
|
||||
User=www-data
|
||||
Group=www-data
|
||||
WorkingDirectory=/var/www/html
|
||||
ExecStart=/usr/bin/python3 /var/www/html/app.py
|
||||
|
||||
Restart=on-failure
|
||||
RestartSec=5
|
||||
|
||||
Environment=PYTHONUNBUFFERED=1
|
||||
|
||||
[Install]
|
||||
WantedBy=multi-user.target
|
||||
@@ -1,568 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta name="theme-color" content="#0066cc">
|
||||
<title>Admin Panel – Roll Calculator</title>
|
||||
<style>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
|
||||
body {
|
||||
font-family: 'Segoe UI', Arial, sans-serif;
|
||||
background: #f4f6f9;
|
||||
color: #333;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
/* ---- HEADER ---- */
|
||||
.admin-header {
|
||||
background: linear-gradient(135deg, #003366 0%, #0066cc 100%);
|
||||
color: white;
|
||||
padding: 20px 32px;
|
||||
box-shadow: 0 2px 8px rgba(0,0,0,0.2);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.admin-header h1 {
|
||||
font-size: 24px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
.admin-header .subtitle {
|
||||
font-size: 12px;
|
||||
opacity: 0.85;
|
||||
}
|
||||
|
||||
.admin-header .user-info {
|
||||
font-size: 12px;
|
||||
opacity: 0.9;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-end;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.admin-header .user-info strong {
|
||||
opacity: 1;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* ---- CONTAINER ---- */
|
||||
.admin-container {
|
||||
max-width: 1300px;
|
||||
margin: 30px auto;
|
||||
padding: 0 20px 60px;
|
||||
}
|
||||
|
||||
/* ---- STATS GRID ---- */
|
||||
.stats-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
|
||||
gap: 20px;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.stat-card {
|
||||
background: white;
|
||||
border-radius: 10px;
|
||||
padding: 20px;
|
||||
box-shadow: 0 2px 8px rgba(0,0,0,0.07);
|
||||
border-left: 4px solid #0066cc;
|
||||
transition: transform 0.2s, box-shadow 0.2s;
|
||||
}
|
||||
|
||||
.stat-card:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
.stat-card.warning {
|
||||
border-left-color: #f0b429;
|
||||
}
|
||||
|
||||
.stat-card.danger {
|
||||
border-left-color: #dc3545;
|
||||
}
|
||||
|
||||
.stat-card .label {
|
||||
font-size: 12px;
|
||||
color: #666;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.4px;
|
||||
margin-bottom: 8px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.stat-card .value {
|
||||
font-size: 36px;
|
||||
font-weight: 700;
|
||||
color: #0066cc;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.stat-card.warning .value {
|
||||
color: #f0b429;
|
||||
}
|
||||
|
||||
.stat-card.danger .value {
|
||||
color: #dc3545;
|
||||
}
|
||||
|
||||
.stat-card .sublabel {
|
||||
font-size: 11px;
|
||||
color: #999;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
/* ---- LOGS SECTION ---- */
|
||||
.logs-section {
|
||||
background: white;
|
||||
border-radius: 10px;
|
||||
padding: 24px;
|
||||
box-shadow: 0 2px 8px rgba(0,0,0,0.07);
|
||||
}
|
||||
|
||||
.logs-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 20px;
|
||||
flex-wrap: wrap;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.logs-header h2 {
|
||||
font-size: 18px;
|
||||
color: #003366;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.controls {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.btn {
|
||||
background: #0066cc;
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 10px 20px;
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
font-weight: 600;
|
||||
font-size: 13px;
|
||||
transition: background 0.2s;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.btn:hover {
|
||||
background: #0052a3;
|
||||
}
|
||||
|
||||
.btn.secondary {
|
||||
background: #e0e0e0;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.btn.secondary:hover {
|
||||
background: #d0d0d0;
|
||||
}
|
||||
|
||||
.btn-refresh {
|
||||
animation: spin 1s linear infinite;
|
||||
}
|
||||
|
||||
.btn-refresh.spinning {
|
||||
animation: spin 1s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
from { transform: rotate(0deg); }
|
||||
to { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
/* ---- TABLE ---- */
|
||||
.logs-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.logs-table thead {
|
||||
background: #f0f4fa;
|
||||
border-bottom: 2px solid #0066cc;
|
||||
}
|
||||
|
||||
.logs-table th {
|
||||
padding: 12px;
|
||||
text-align: left;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.logs-table td {
|
||||
padding: 10px 12px;
|
||||
border-bottom: 1px solid #e8ecf0;
|
||||
}
|
||||
|
||||
.logs-table tbody tr {
|
||||
transition: background 0.15s;
|
||||
}
|
||||
|
||||
.logs-table tbody tr:hover {
|
||||
background: #f8f9fa;
|
||||
}
|
||||
|
||||
.status-200 {
|
||||
color: #28a745;
|
||||
font-weight: 600;
|
||||
background: #f0f9f6;
|
||||
padding: 2px 6px;
|
||||
border-radius: 3px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.status-401 {
|
||||
color: #dc3545;
|
||||
font-weight: 600;
|
||||
background: #fff0f0;
|
||||
padding: 2px 6px;
|
||||
border-radius: 3px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.status-403 {
|
||||
color: #f0b429;
|
||||
font-weight: 600;
|
||||
background: #fffbea;
|
||||
padding: 2px 6px;
|
||||
border-radius: 3px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
/* ---- LOADING / EMPTY ---- */
|
||||
.loading {
|
||||
text-align: center;
|
||||
padding: 40px;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.empty {
|
||||
text-align: center;
|
||||
padding: 40px;
|
||||
color: #999;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.error {
|
||||
background: #fff0f0;
|
||||
color: #dc3545;
|
||||
padding: 12px;
|
||||
border-radius: 5px;
|
||||
border-left: 4px solid #dc3545;
|
||||
margin: 12px 0;
|
||||
}
|
||||
|
||||
/* ---- FILTERS ---- */
|
||||
.filters {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
margin-bottom: 20px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.filter-input {
|
||||
padding: 8px 12px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 5px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.filter-input:focus {
|
||||
outline: none;
|
||||
border-color: #0066cc;
|
||||
box-shadow: 0 0 0 2px rgba(0,102,204,0.1);
|
||||
}
|
||||
|
||||
/* ---- FOOTER ---- */
|
||||
.admin-footer {
|
||||
text-align: center;
|
||||
font-size: 11px;
|
||||
color: #aaa;
|
||||
margin-top: 40px;
|
||||
padding-top: 20px;
|
||||
border-top: 1px solid #e8ecf0;
|
||||
}
|
||||
|
||||
/* ---- RESPONSIVE ---- */
|
||||
@media (max-width: 768px) {
|
||||
.admin-header {
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.admin-header .user-info {
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.stats-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.logs-header {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.controls {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.btn {
|
||||
flex: 1;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.logs-table {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.logs-table th, .logs-table td {
|
||||
padding: 8px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- HEADER -->
|
||||
<div class="admin-header">
|
||||
<div>
|
||||
<h1>🔐 Admin Panel</h1>
|
||||
<div class="subtitle">Roll Calculator – Naue GmbH & Co. KG</div>
|
||||
</div>
|
||||
<div class="user-info">
|
||||
<span>Angemeldet als:</span>
|
||||
<strong id="authUser">admin</strong>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- MAIN CONTAINER -->
|
||||
<div class="admin-container">
|
||||
|
||||
<!-- STATISTICS -->
|
||||
<div class="stats-grid" id="statsGrid">
|
||||
<div style="grid-column: 1 / -1; text-align: center; padding: 40px; color: #999;">
|
||||
⏳ Statistiken werden geladen...
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- LOGS SECTION -->
|
||||
<div class="logs-section">
|
||||
|
||||
<!-- HEADER -->
|
||||
<div class="logs-header">
|
||||
<h2>📋 Access Logs</h2>
|
||||
<div class="controls">
|
||||
<button class="btn" id="refreshBtn" onclick="refreshData()">
|
||||
<span id="refreshIcon">🔄</span> Aktualisieren
|
||||
</button>
|
||||
<button class="btn secondary" onclick="downloadLogs()">
|
||||
⬇️ Download
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- FILTERS -->
|
||||
<div class="filters">
|
||||
<input
|
||||
type="text"
|
||||
class="filter-input"
|
||||
placeholder="Nach Benutzer filtern..."
|
||||
id="filterUser"
|
||||
onkeyup="filterLogs()"
|
||||
>
|
||||
<input
|
||||
type="text"
|
||||
class="filter-input"
|
||||
placeholder="Nach Endpoint filtern..."
|
||||
id="filterEndpoint"
|
||||
onkeyup="filterLogs()"
|
||||
>
|
||||
</div>
|
||||
|
||||
<!-- TABLE -->
|
||||
<div id="errorContainer"></div>
|
||||
|
||||
<table class="logs-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Zeitstempel</th>
|
||||
<th>Benutzer</th>
|
||||
<th>Endpoint</th>
|
||||
<th>Methode</th>
|
||||
<th style="width: 80px;">Status</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="logsList">
|
||||
<tr>
|
||||
<td colspan="5" class="loading">Logs werden geladen...</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- FOOTER -->
|
||||
<div class="admin-footer">
|
||||
ℹ️ Logs werden automatisch alle 30 Sekunden aktualisiert |
|
||||
Letztes Update: <span id="lastUpdate">-</span>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- SCRIPTS -->
|
||||
<script>
|
||||
let allLogs = [];
|
||||
|
||||
// Get authenticated user from API
|
||||
async function getAuthUser() {
|
||||
try {
|
||||
const res = await fetch('/api/user');
|
||||
const data = await res.json();
|
||||
document.getElementById('authUser').textContent = data.username || 'admin';
|
||||
} catch (e) {
|
||||
console.warn('Konnte Benutzerinformation nicht laden');
|
||||
}
|
||||
}
|
||||
|
||||
// Refresh Data (Statistiken + Logs)
|
||||
async function refreshData() {
|
||||
const btn = document.getElementById('refreshBtn');
|
||||
const icon = document.getElementById('refreshIcon');
|
||||
|
||||
try {
|
||||
icon.style.animation = 'spin 1s linear infinite';
|
||||
|
||||
// Load Statistics
|
||||
const statsRes = await fetch('/api/admin/stats');
|
||||
if (!statsRes.ok) throw new Error('Statistiken konnten nicht geladen werden');
|
||||
const stats = await statsRes.json();
|
||||
|
||||
// Load Logs
|
||||
const logsRes = await fetch('/api/admin/logs');
|
||||
if (!logsRes.ok) throw new Error('Logs konnten nicht geladen werden');
|
||||
const logsData = await logsRes.json();
|
||||
|
||||
allLogs = logsData.logs || [];
|
||||
|
||||
// Render Statistics
|
||||
renderStats(stats);
|
||||
|
||||
// Render Logs
|
||||
renderLogs(allLogs);
|
||||
|
||||
// Update timestamp
|
||||
document.getElementById('lastUpdate').textContent = new Date().toLocaleTimeString('de-DE');
|
||||
|
||||
// Clear error
|
||||
document.getElementById('errorContainer').innerHTML = '';
|
||||
|
||||
} catch (error) {
|
||||
console.error('Fehler beim Laden der Daten:', error);
|
||||
document.getElementById('errorContainer').innerHTML =
|
||||
'<div class="error">❌ ' + error.message + '</div>';
|
||||
} finally {
|
||||
icon.style.animation = 'none';
|
||||
}
|
||||
}
|
||||
|
||||
// Render Statistics
|
||||
function renderStats(stats) {
|
||||
const html = `
|
||||
<div class="stat-card">
|
||||
<div class="label">📊 Gesamte Anfragen</div>
|
||||
<div class="value">${stats.total_requests || 0}</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="label">👥 Eindeutige Benutzer</div>
|
||||
<div class="value">${stats.unique_users || 0}</div>
|
||||
</div>
|
||||
<div class="stat-card danger">
|
||||
<div class="label">⛔ Fehlgeschlagene Logins</div>
|
||||
<div class="value">${stats.failed_logins || 0}</div>
|
||||
</div>
|
||||
`;
|
||||
document.getElementById('statsGrid').innerHTML = html;
|
||||
}
|
||||
|
||||
// Render Logs
|
||||
function renderLogs(logs) {
|
||||
if (!logs || logs.length === 0) {
|
||||
document.getElementById('logsList').innerHTML =
|
||||
'<tr><td colspan="5" class="empty">Keine Logs verfügbar</td></tr>';
|
||||
return;
|
||||
}
|
||||
|
||||
const html = logs.reverse().map(log => {
|
||||
const time = new Date(log.timestamp).toLocaleString('de-DE');
|
||||
const statusClass = `status-${log.status}`;
|
||||
return `
|
||||
<tr>
|
||||
<td>${time}</td>
|
||||
<td><strong>${log.username}</strong></td>
|
||||
<td><code>${log.endpoint}</code></td>
|
||||
<td>${log.method}</td>
|
||||
<td><span class="${statusClass}">${log.status}</span></td>
|
||||
</tr>
|
||||
`;
|
||||
}).join('');
|
||||
|
||||
document.getElementById('logsList').innerHTML = html;
|
||||
}
|
||||
|
||||
// Filter Logs
|
||||
function filterLogs() {
|
||||
const userFilter = document.getElementById('filterUser').value.toLowerCase();
|
||||
const endpointFilter = document.getElementById('filterEndpoint').value.toLowerCase();
|
||||
|
||||
const filtered = allLogs.filter(log =>
|
||||
log.username.toLowerCase().includes(userFilter) &&
|
||||
log.endpoint.toLowerCase().includes(endpointFilter)
|
||||
);
|
||||
|
||||
renderLogs(filtered);
|
||||
}
|
||||
|
||||
// Download Logs as JSON
|
||||
function downloadLogs() {
|
||||
const data = JSON.stringify(allLogs, null, 2);
|
||||
const blob = new Blob([data], { type: 'application/json' });
|
||||
const url = window.URL.createObjectURL(blob);
|
||||
const a = document.createElement('a');
|
||||
a.href = url;
|
||||
a.download = `access-logs-${new Date().toISOString()}.json`;
|
||||
a.click();
|
||||
window.URL.revokeObjectURL(url);
|
||||
}
|
||||
|
||||
// Initialize
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
getAuthUser();
|
||||
refreshData();
|
||||
|
||||
// Auto-refresh every 30 seconds
|
||||
setInterval(refreshData, 30000);
|
||||
});
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
+213
-10
@@ -48,6 +48,9 @@
|
||||
.result-label { font-size: 12px; color: #1F5438; font-weight: 600; text-transform: uppercase; }
|
||||
.result-value { font-size: 28px; font-weight: 700; color: #1F5438; line-height: 1.2; }
|
||||
.result-range { font-size: 12px; color: #1F5438; margin-top: 4px; font-weight: 500; }
|
||||
.result-range div { margin-top: 2px; }
|
||||
.result-range .range-warning { color: #9a6700; font-weight: 700; }
|
||||
.result-range .range-ok { color: #1F5438; font-weight: 700; }
|
||||
.forklift-check { border-radius: 7px; padding: 14px 16px; margin-top: 14px; font-size: 13px; line-height: 1.6; display: none; }
|
||||
.forklift-check.show { display: block; }
|
||||
.forklift-check.fc-ok { background: #eafaf1; border: 1.5px solid #28a745; }
|
||||
@@ -60,6 +63,86 @@
|
||||
.fc-req-nok { color: #dc3545; font-weight: 600; }
|
||||
.formula-box { background: #f8f9fa; border: 1px solid #e0e0e0; border-radius: 6px; padding: 10px 14px; font-size: 12px; color: #666; margin-top: 18px; font-family: 'Courier New', monospace; }
|
||||
.footer { text-align: center; font-size: 11px; color: #aaa; padding: 18px; margin-top: 30px; }
|
||||
.footer-build-info { margin-top: 6px; color: #bbb; }
|
||||
.disclaimer-overlay {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 9999;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 20px;
|
||||
background: rgba(20, 28, 34, 0.72);
|
||||
}
|
||||
.disclaimer-overlay.is-hidden { display: none; }
|
||||
.disclaimer-dialog {
|
||||
width: min(760px, 100%);
|
||||
max-height: min(86vh, 820px);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: #fff;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 18px 45px rgba(0, 0, 0, 0.28);
|
||||
overflow: hidden;
|
||||
}
|
||||
.disclaimer-header {
|
||||
padding: 18px 22px;
|
||||
background: #1F5438;
|
||||
color: #fff;
|
||||
}
|
||||
.disclaimer-header h2 { font-size: 18px; margin: 0; }
|
||||
.disclaimer-content {
|
||||
padding: 20px 22px;
|
||||
overflow-y: auto;
|
||||
line-height: 1.5;
|
||||
font-size: 14px;
|
||||
}
|
||||
.disclaimer-content h3 {
|
||||
margin: 0 0 8px;
|
||||
color: #1F5438;
|
||||
font-size: 15px;
|
||||
}
|
||||
.disclaimer-content p { margin: 0 0 12px; }
|
||||
.disclaimer-language + .disclaimer-language {
|
||||
margin-top: 18px;
|
||||
padding-top: 18px;
|
||||
border-top: 1px solid #e0e8f0;
|
||||
}
|
||||
.disclaimer-actions {
|
||||
padding: 16px 22px;
|
||||
border-top: 1px solid #e0e8f0;
|
||||
background: #f8fafa;
|
||||
}
|
||||
.disclaimer-confirm {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 10px;
|
||||
margin-bottom: 14px;
|
||||
font-size: 13px;
|
||||
color: #333;
|
||||
}
|
||||
.disclaimer-confirm input {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
margin-top: 1px;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
.disclaimer-btn {
|
||||
width: 100%;
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
padding: 11px 18px;
|
||||
background: #2BAC70;
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
cursor: pointer;
|
||||
}
|
||||
.disclaimer-btn:hover { background: #1F5438; }
|
||||
.disclaimer-btn:disabled {
|
||||
background: #b8c7bf;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
LOAD OPTIMIZER STYLES
|
||||
@@ -336,6 +419,37 @@
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="disclaimer-overlay" id="disclaimerOverlay" role="dialog" aria-modal="true" aria-labelledby="disclaimerTitle">
|
||||
<div class="disclaimer-dialog">
|
||||
<div class="disclaimer-header">
|
||||
<h2 id="disclaimerTitle">Disclaimer</h2>
|
||||
</div>
|
||||
<div class="disclaimer-content">
|
||||
<section class="disclaimer-language" aria-label="Deutscher Disclaimer">
|
||||
<h3>Deutsch</h3>
|
||||
<p><strong>⚠️ Disclaimer</strong></p>
|
||||
<p>Dieses Tool ist ausschließlich zur persönlichen, internen Verwendung bestimmt. Die Weitergabe von Logins ist nicht gestattet.</p>
|
||||
<p>Berechtigt sind nur: Produktmanagement, Produktionsleitung, R&D, Controlling und Logistik.</p>
|
||||
<p>Wichtig: Alle Eingaben und Ausgaben müssen vor der Verwendung auf Plausibilität geprüft werden. Die Datenbasis für Materialdicke und Flächengewicht wird automatisch erstellt und ist weder geprüft noch erhebt sie Anspruch auf Vollständigkeit.</p>
|
||||
</section>
|
||||
<section class="disclaimer-language" aria-label="English disclaimer">
|
||||
<h3>English</h3>
|
||||
<p><strong>⚠️ Disclaimer</strong></p>
|
||||
<p>This tool is exclusively for personal, internal use. Sharing login credentials is prohibited.</p>
|
||||
<p>Authorized departments only: Product Management, Production Management, R&D, Controlling, and Logistics.</p>
|
||||
<p>Important: All inputs and outputs must be verified for plausibility before use. The material thickness and area weight data is automatically generated and has not been reviewed. It does not claim to be complete or comprehensive.</p>
|
||||
</section>
|
||||
</div>
|
||||
<div class="disclaimer-actions">
|
||||
<label class="disclaimer-confirm" for="disclaimerAccepted">
|
||||
<input type="checkbox" id="disclaimerAccepted">
|
||||
<span>I have read and understood the disclaimer / Ich habe den Disclaimer gelesen und verstanden.</span>
|
||||
</label>
|
||||
<button class="disclaimer-btn" id="disclaimerConfirmBtn" type="button" disabled>Confirm / Bestätigen</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="header">
|
||||
<h1>Naue Roll Diameter Calculator</h1>
|
||||
<p>Roll Diameter • Product Length • Roll Weight • Load Optimizer</p>
|
||||
@@ -461,6 +575,27 @@
|
||||
<span class="unit-label">kg</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Max. Roll Diameter</label>
|
||||
<div class="input-with-unit">
|
||||
<input type="number" id="d-target-di" placeholder="mm" min="0" step="1">
|
||||
<span class="unit-label">mm</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Max. Roll Weight</label>
|
||||
<div class="input-with-unit">
|
||||
<input type="number" id="d-max-weight" placeholder="kg" min="0" step="1">
|
||||
<span class="unit-label">kg</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Minimum Product Length</label>
|
||||
<div class="input-with-unit">
|
||||
<input type="number" id="d-min-le" placeholder="m" min="0" step="0.1">
|
||||
<span class="unit-label">m</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -734,6 +869,9 @@
|
||||
|
||||
<div class="footer">
|
||||
Naue GmbH & Co. KG · Roll Diameter Calculator · Internal Application
|
||||
<div class="footer-build-info">
|
||||
Version {{ build_info.version }} · Branch {{ build_info.branch }} · Commit {{ build_info.commit }} · Built {{ build_info.timestamp }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
@@ -879,21 +1017,69 @@ document.getElementById('d-calc').addEventListener('click', () => {
|
||||
resRange.textContent = '';
|
||||
document.getElementById('d-le').value = L_calc.toFixed(2);
|
||||
} else if (mode === 'target') {
|
||||
if (!d || !t) { alert('Please enter d and t.'); return; }
|
||||
const D_target = D || 800;
|
||||
const L_calc = (Math.PI / (4 * t)) * (D_target*D_target - d*d) / 1000;
|
||||
resLabel.textContent = 'Length for Target Diameter ' + D_target + ' mm';
|
||||
resVal.textContent = L_calc.toFixed(2) + ' m';
|
||||
resRange.textContent = '';
|
||||
document.getElementById('d-le').value = L_calc.toFixed(2);
|
||||
const wi = parseFloat(document.getElementById('d-wi').value) || 0;
|
||||
const aw = parseFloat(document.getElementById('d-aw').value) || 0;
|
||||
const maxWeight = parseFloat(document.getElementById('d-max-weight').value) || 0;
|
||||
const minLength = parseFloat(document.getElementById('d-min-le').value) || 0;
|
||||
const D_target = parseFloat(document.getElementById('d-target-di').value) || 0;
|
||||
|
||||
if (!d || !t || !D_target || !wi || !aw || !maxWeight) {
|
||||
alert('Please enter d, t, max. roll diameter, roll width, area weight, and max. roll weight.');
|
||||
return;
|
||||
}
|
||||
if (D_target <= d) {
|
||||
alert('Max. roll diameter must be larger than core diameter.');
|
||||
return;
|
||||
}
|
||||
|
||||
const L_diameter = (Math.PI / (4 * t)) * (D_target*D_target - d*d) / 1000;
|
||||
const L_weight = maxWeight * 1000 / (aw * wi);
|
||||
const L_allowed = Math.min(L_diameter, L_weight);
|
||||
const D_result = Math.sqrt(d*d + (4*L_allowed*1000*t)/Math.PI);
|
||||
const W_result = aw * L_allowed * wi / 1000;
|
||||
const diameterUtil = D_result / D_target * 100;
|
||||
const weightUtil = W_result / maxWeight * 100;
|
||||
const lengthDiff = minLength > 0 ? L_allowed - minLength : null;
|
||||
const epsilon = 0.0001;
|
||||
let limitingFactor = 'Diameter + Weight';
|
||||
|
||||
if (L_diameter < L_weight - epsilon) {
|
||||
limitingFactor = 'Diameter';
|
||||
} else if (L_weight < L_diameter - epsilon) {
|
||||
limitingFactor = 'Weight';
|
||||
}
|
||||
|
||||
resLabel.textContent = 'Maximum Allowed Product Length';
|
||||
resVal.textContent = L_allowed.toFixed(2) + ' m';
|
||||
|
||||
const minLengthText = minLength > 0 ? minLength.toFixed(2) + ' m' : 'not set';
|
||||
const diffText = lengthDiff !== null ? lengthDiff.toFixed(2) + ' m' : 'n/a';
|
||||
let minStatus = '<div>Minimum length not set</div>';
|
||||
if (minLength > 0 && L_allowed < minLength) {
|
||||
minStatus = '<div class="range-warning">Warning: maximum allowed length is below the minimum product length.</div>';
|
||||
} else if (minLength > 0) {
|
||||
minStatus = '<div class="range-ok">Minimum length OK</div>';
|
||||
}
|
||||
|
||||
resRange.innerHTML =
|
||||
'<div>Resulting Roll Diameter: ' + D_result.toFixed(1) + ' mm</div>' +
|
||||
'<div>Resulting weight: ' + W_result.toFixed(1) + ' kg</div>' +
|
||||
'<div>Minimum length: ' + minLengthText + '</div>' +
|
||||
'<div>Difference: ' + diffText + '</div>' +
|
||||
'<div>Limiting factor: ' + limitingFactor + '</div>' +
|
||||
'<div>Utilization: Diameter ' + diameterUtil.toFixed(1) + '% | Weight ' + weightUtil.toFixed(1) + '%</div>' +
|
||||
minStatus;
|
||||
|
||||
document.getElementById('d-le').value = L_allowed.toFixed(2);
|
||||
document.getElementById('d-wo').value = W_result.toFixed(1);
|
||||
}
|
||||
|
||||
const wi = parseFloat(document.getElementById('d-wi').value) || 0;
|
||||
const aw = parseFloat(document.getElementById('d-aw').value) || 0;
|
||||
const L_final = parseFloat(document.getElementById('d-le').value) || 0;
|
||||
if (wi > 0 && aw > 0 && L_final > 0) {
|
||||
const weight = (aw * L_final * wi / 1000).toFixed(1);
|
||||
document.getElementById('d-wo').value = weight;
|
||||
const weight = aw * L_final * wi / 1000;
|
||||
document.getElementById('d-wo').value = weight.toFixed(1);
|
||||
checkForklift(weight, d, category);
|
||||
} else {
|
||||
document.getElementById('forkliftCheck').classList.remove('show');
|
||||
@@ -903,7 +1089,7 @@ document.getElementById('d-calc').addEventListener('click', () => {
|
||||
});
|
||||
|
||||
document.getElementById('d-reset').addEventListener('click', () => {
|
||||
['d-co', 'd-th', 'd-tol', 'd-le', 'd-di', 'd-wi', 'd-aw', 'd-wo'].forEach(id => {
|
||||
['d-co', 'd-th', 'd-tol', 'd-le', 'd-di', 'd-wi', 'd-aw', 'd-wo', 'd-target-di', 'd-max-weight', 'd-min-le'].forEach(id => {
|
||||
const el = document.getElementById(id);
|
||||
if (el) el.value = id === 'd-co' ? '150' : '';
|
||||
});
|
||||
@@ -1301,6 +1487,23 @@ class LoadOptimizerUI {
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
window.loadOptimizerUI = new LoadOptimizerUI();
|
||||
});
|
||||
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
const overlay = document.getElementById('disclaimerOverlay');
|
||||
const checkbox = document.getElementById('disclaimerAccepted');
|
||||
const confirmBtn = document.getElementById('disclaimerConfirmBtn');
|
||||
|
||||
if (!overlay || !checkbox || !confirmBtn) return;
|
||||
|
||||
checkbox.addEventListener('change', () => {
|
||||
confirmBtn.disabled = !checkbox.checked;
|
||||
});
|
||||
|
||||
confirmBtn.addEventListener('click', () => {
|
||||
if (!checkbox.checked) return;
|
||||
overlay.classList.add('is-hidden');
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
</body>
|
||||
|
||||
Reference in New Issue
Block a user