gg
a8838a1a38
Im Call-Log-Formular wird "Name Ansprechpartner" durch ein Select ersetzt, das die Kontaktadressen des gewählten Projekts anbietet, sofern der Name nicht bereits voreingestellt ist (z. B. aus der Kontaktadressenliste). Bei Auswahl einer Kontaktadresse werden Name und Telefon automatisch übernommen. Bei Projektwechsel werden Ansprechpartner und Telefon zurückgesetzt. Kontaktadressenliste: add_call-Button pro Zeile, der eine Gesprächsnotiz mit den ForeignKeys aus der Kontaktadresse (projektId, kundenName, name, telefon) anlegt. AGENTS.md: Vorgabe ergänzt — Farben priorisiert aus app-theme.css. Generated by Mistral Vibe. Co-Authored-By: Mistral Vibe <vibe@mistral.ai>
45 lines
2.8 KiB
Markdown
45 lines
2.8 KiB
Markdown
# 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.
|
||
Für Farben (foreground und background) verwende priorisiert die Klassen aus NGINX_Server/html/static/app-theme.css
|
||
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
|
||
...
|
||
}
|
||
}
|
||
}
|
||
``` |