Projektvorgaben und Strukturdokumentation aktualisiert

AGENTS.md neu angelegt: Vorgaben für TypeScript/Mithril-Entwicklung
(responsives Design via w3-auto, Formatierung längerer Attributlisten,
ClosureComponent-Muster, Datenmodelle in Client/models, REST-API-Gerüst).
ai-context/AI-operative_Vorgaben.md und mistral-context.md an die
aktuelle Projektstruktur (App_Server, Client, NGINX_Server) angepasst.

Generated by Mistral Vibe.
Co-Authored-By: Mistral Vibe <vibe@mistral.ai>
This commit is contained in:
gg committed 2026-08-31 18:26:47 +02:00
1 parent 1c99dcf326
commit 16eaab8b64
3 files changed
+137 -33

No files matched your search

+44
View File
@@ -0,0 +1,44 @@
# Architektur der Anwendung
Beachte die strukturellen Vorgaben, die in ai-context/AI-operative-Vorgaben.md definiert sind.
In den Programmen sollen aussagekräftige Kommentare in deutsch erstellt werden.
## Vorgaben für die Typescript und mithriljs Entwicklung
Verwende bei der GUI primar die widgets, die es in client/Components/widgets gibt. Fehler widgets, gib eines Hinweis und erstelle einen Vorschlag für ein entsprechendes neues Widget.
Es soll immer ein responsive Design implmentiert werden, da die App sowohl auf PCs als auch auf mobilen Geräten laufen soll.
Verwende für Attribute der GUI-Oberfläche nach Möglichkeit Klassen aus NGINX_Server/html/static/w3.css, insbesondere wenn es darum geht, eine Respnosive Design zu implentieren.
View-Container werden mit `w3-container.w3-auto` gewrappt, damit sie auf kleinen Bildschirmen 100% und auf großen bis max. 1140px (bzw. 95%) zentriert nutzen.
Bei Mithril `m(...)`-Aufrufen mit längeren Attributlisten (z.B. mehrere `style`-Eigenschaften oder mehrere Attribute) schreibe die Attribute untereinander, sobald sie in einer Zeile nicht mehr gut lesbar sind (Faustregel: mehr als 2–3 Attribute oder ein mehrzeiliges `style`-Objekt). Kurze Attributlisten (1–2 Attribute, einzeiliges `style`) dürfen in einer Zeile bleiben. Formatbeispiel:
```typescript
m("div.w3-bar-block.w3-border", {
style: {
width: '95%',
'max-height': '220px',
'overflow-y': 'auto',
position: 'absolute',
'z-index': '1000'
}
})
```
Für Symbole auf Buttons und ähnlichen Steuerelementen verwende Symbole aus den Google Material Icons.
Erstelle die Datenmodelle für die Typescript-Entwicklung im Verzeichnis Client/Models. Erstelle für die verschiedenen Datenmodelle (Kunde, Projekt usw.) eigene .ts-Dateien. Erstelle in der jeweiligen Datei auch den Aufruf der REST-Api für die Server-Seite.
Bei `m.ClosureComponent` den Closure-Parameter weglassen (`() =>`) und Attribute ausschließlich über das `vnode` des jeweiligen Lifecycle-Hooks (`view`, `oninit`, `onupdate` etc.) lesen. Das `vnode` der Closure-Funktion ist ein Snapshot zum Erzeugungszeitpunkt und wird bei Redraws nicht aktualisiert — daraus gelesene `attrs` sind veraltet. Initialisierung, die `attrs` braucht, gehört nach `oninit`. Beispiel:
```typescript
export const Select: m.ClosureComponent<iSelect> = () => {
// closure-State ohne Referenz auf attrs
let search = ""
return {
oninit: (vnode) => {
// vnode.attrs hier initial lesen
search = vnode.attrs.value
},
view: (vnode) => {
// vnode.attrs enthält die aktuellen Werte je Render-Durchlauf
const options = vnode.attrs.options
...
}
}
}
```
+39 -17
View File
@@ -23,20 +23,42 @@
```text
.
├── .gitignore
├── .env
├── .env.example
├── requirements.txt
├── docker-compose.yml
├── Dockerfile
├── wsgi.py
├── data/ ← Datenbankverzeichnis (persistente SQLite-Datei, nicht im Image)
└── app/
├── __init__.py
├── config.py
├── database.py
├── models.py
├── auth.py
├── routes.py
├── templates/
└── static/
├── ai-context/ # Anweisungen und Information für Mistral AI
├── App_Server/ # Enthält Alles, was auf den Server (Backend) gehört
│   ├── data/ # enthält die SQLite-Datenbanken
│   ├── Dockerfile
│   ├── root/ # Enthält alle Python-Programme
│   │   ├── approot.py
│   │   ├── auth # Enthält Programme zu Benutzerverwaltung
│   │   │   ├── model/ # Enthält die Datenmodelle der Benutzerverwaltung
│   │   │   └── routes.py
│   │   ├── config.ini
│   │   ├── db.py
│   │   ├── requirements.txt
│   │   ├── routes/ # Enthält die Route-Definitionen für Flask
│   │   ├── runserver.py
│   │   ├── settings.py
│   │   └── templates/ # enthält die Vorlagen für Jinja2
│   └── scripts/ # enthält Scripts, die im Dockjer-Container ausgeführt werden
├── Client/ # Enthält alles, was für die Browser-basierte GUI erforderlich ist
│   ├── Components/ # enthält die mit mithril.js entwickelten GUI-Komponenten
│   │   ├── auth/ # enthält die GUI-Komponenten für die Benutzer-Verwaltung
│   │   │   └── models/ # enthält die Datenmodelle für die Benutzerverwaltung
│   │   └── widgets # enthält einzelne GUI-Elemente wie Eingabefelder u.ä., die dann in den Komponenten verwendet werden
│   ├── index.ts
│   ├── inireader.mjs
│   ├── node_modules/
├── docker-compose.base.yaml
├── docker-compose.dev.yaml
├── docker-compose.prod.yaml
├── docker-compose.save.yaml
├── Dokumentationen/ # enthält Dokumente, die für die Entwicklung wichtig sind
├── mistral-context.md
├── NGINX_Server/ # enthält die Konfiguration für den im Docker-Container laufenden NGINX-Server
│   ├── certs/ # enthält die Zertifikatsdateien für die SSL-Verschlüsselung
│   ├── configtemplates
│   ├── Dockerfile
│   └── html/
│   └── static/ # enthält die statischen Elemente der GUI, wie css-Dateien und Javascript-Dateien
└── README.md
```
+54 -16
View File
@@ -22,18 +22,53 @@ cd docs/ && make html # Ergebnis: docs/_build/html/index.html
## Architektur
Das Projekt besteht aus 2 Teilen:
- Die GUI, die im Browser läuft und mit Typescript und mithril.js erstellt wird
- Das Backend, welches im wesentlichen mit Python, flask und sqlalchemy entwickelt wird
Daraus ergibt sich die folgende Struktur:
```
app/
├── __init__.py # App-Factory, Flask-Initialisierung, CLI-Kommandos (db-init, seed-db)
├── config.py # Konfiguration aus .env (12-Factor)
├── database.py # SQLAlchemy-Instanz und Session-Setup
├── models.py # Alle ORM-Modelle (siehe Datenmodell unten)
├── auth.py # Zitadel-OIDC-Flow via Authlib; Rollen aus Token-Claims
├── routes.py # Flask-Blueprints und View-Funktionen
├── templates/ # Jinja2-Templates
└── static/ # CSS, JS, Assets
data/ # SQLite-Datenbankdatei (nicht im Docker-Image, persistiert als Volume)
wsgi.py # Waitress-Einstiegspunkt
.
├── ai-context/ # Anweisungen und Information für Mistral AI
├── App_Server/ # Enthält Alles, was auf den Server (Backend) gehört
│   ├── data/ # enthält die SQLite-Datenbanken
│   ├── Dockerfile
│   ├── root/ # Enthält alle Python-Programme
│   │   ├── approot.py
│   │   ├── auth # Enthält Programme zu Benutzerverwaltung
│   │   │   ├── model/ # Enthält die Datenmodelle der Benutzerverwaltung
│   │   │   └── routes.py
│   │   ├── config.ini
│   │   ├── db.py
│   │   ├── requirements.txt
│   │   ├── routes/ # Enthält die Route-Definitionen für Flask
│   │   ├── runserver.py
│   │   ├── settings.py
│   │   └── templates/ # enthält die Vorlagen für Jinja2
│   └── scripts/ # enthält Scripts, die im Dockjer-Container ausgeführt werden
├── Client/ # Enthält alles, was für die Browser-basierte GUI erforderlich ist
│   ├── Components/ # enthält die mit mithril.js entwickelten GUI-Komponenten
│   │   ├── auth/ # enthält die GUI-Komponenten für die Benutzer-Verwaltung
│   │   │   └── models/ # enthält die Datenmodelle für die Benutzerverwaltung
│   │   └── widgets # enthält einzelne GUI-Elemente wie Eingabefelder u.ä.,
│ │ # die dann in den Komponenten verwendet werden
│   ├── index.ts
│   ├── inireader.mjs
│   ├── node_modules/
├── docker-compose.base.yaml
├── docker-compose.dev.yaml
├── docker-compose.prod.yaml
├── docker-compose.save.yaml
├── Dokumentationen/ # enthält Dokumente, die für die Entwicklung wichtig sind
├── mistral-context.md
├── NGINX_Server/ # enthält die Konfiguration für den im Docker-Container laufenden NGINX-Server
│   ├── certs/ # enthält die Zertifikatsdateien für die SSL-Verschlüsselung
│   ├── configtemplates
│   ├── Dockerfile
│   └── html/
│   └── static/ # enthält die statischen Elemente der GUI, wie css-Dateien und Javascript-Dateien
└── README.md
```
## Datenmodell
@@ -42,12 +77,12 @@ wsgi.py # Waitress-Einstiegspunkt
|---|---|
| `Benutzer` | Anwendungsnutzer; Primärschlüssel ist der Zitadel-`sub` |
| `Kunden` | Kundenstamm (Firmen oder Privatpersonen) |
| `Kontakte` | Ansprechpartner bei einem Kunden (FK → Kunden) |
| `Projekte` | Akquise-Projekte, einem Kunden zugeordnet |
| `Kontakte` | Ansprechpartner bei einem Kunden (ForeignKey → Kunden) |
| `Projekte` | Akquise-Projekte, einem Kunden zugeordnet (ForeignKey → Kunden) |
| `Benutzer_Projekt` | n:m-Zuordnung Benutzer ↔ Projekte (Zugriffskontrolle) |
| `Kontaktadressen` | Anrufziele innerhalb eines Projekts; importierbar via CSV/Excel (FK → Projekte) |
| `Gesprächsnotizen` | Anrufdokumentation mit Metadaten, Freitext und Tags (FK → Kontaktadressen) |
| `Tags` | Benutzerdefinierte Kategorien für Gesprächsnotizen |
| `Kontaktadressen` | Anrufziele innerhalb eines Projekts; importierbar via CSV/Excel (ForeignKey → Projekte) |
| `Gesprächsnotizen` | Anrufdokumentation mit Metadaten, Freitext und Tags (ForeignKey → Projekte, Kontaktadressen) |
| `Tags` | Benutzerdefinierte hierarchische Kategorien für Gesprächsnotizen |
| `Gesprächsnotizen_Tags` | n:m-Verknüpfung Gesprächsnotizen ↔ Tags |
## Authentifizierung & Autorisierung
@@ -100,6 +135,9 @@ SECRET_KEY=...
## Weitere Vorgabedokumente
Alle Dateien, die sich im Verzeichnis ai-context befinden, enthalten für das Projekt wichtige Information.
Die wichtigsten sind dabei die folgenden:
| Datei | Inhalt |
|---|---|
| `ai-context/AI-operative_Vorgaben.md` | Tech-Stack, Verzeichnisstruktur, Docker-Setup |