diff --git a/AGENTS.md b/AGENTS.md new file mode 100644 index 0000000..ca27e5f --- /dev/null +++ b/AGENTS.md @@ -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 = () => { + // 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 + ... + } + } +} +``` \ No newline at end of file diff --git a/ai-context/AI-operative_Vorgaben.md b/ai-context/AI-operative_Vorgaben.md index 6742b50..c20891d 100644 --- a/ai-context/AI-operative_Vorgaben.md +++ b/ai-context/AI-operative_Vorgaben.md @@ -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 +``` \ No newline at end of file diff --git a/mistral-context.md b/mistral-context.md index 7021359..37dbbf2 100644 --- a/mistral-context.md +++ b/mistral-context.md @@ -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 |