Listen: einheitliche Zeilen-Markierung und kompakte Aktions-Buttons

Alle App-Listen (kundenliste, call_log_liste, kontaktliste, kontaktadresseliste,
TagList) auf das isSelected-Callback der Treetable umgestellt — die Markierung
erfolgt jetzt auf der gesamten <tr>-Zeile via w3-theme-l4 statt per-Zell-Inline-Style.
In der kundenliste sind die 3 Aktions-Buttons (edit, Projekte, Kontakte) kompakt
in einer Zelle zusammengefasst, analog zur projektliste. Auth-Listen unberührt.

Generated by Mistral Vibe.
Co-Authored-By: Mistral Vibe <vibe@mistral.ai>

Client/Components/call_log.ts

@@ -77,18 +77,16 @@ export const call_log_liste: m.ClosureComponent = (vnode) => {
     
     const columnmapper: (node: iTreenode) => any[] = (node: iTreenode) => {
         let log: iCallLog = node.nodevalue
-        const isSelected = selectedNode === node
+
-        const cellStyle = isSelected ? {backgroundColor: '#e6f7ff'} : {}
-        
         return [
-            m("div", {style: cellStyle}, m("strong", log.kundenName + ": " + log.projektName)),
+            m("div", m("strong", log.kundenName + ": " + log.projektName)),
-            m("span", {style: cellStyle}, log.datum),
+            m("span", log.datum),
-            m("span", {style: cellStyle}, log.uhrzeitBeginn),
+            m("span", log.uhrzeitBeginn),
-            m("span", {style: cellStyle}, log.dauer + " min"),
+            m("span", log.dauer + " min"),
-            m("span", {style: cellStyle}, log.betreff),
+            m("span", log.betreff),
-            m("span", {style: cellStyle}, log.wiedervorlageDatum),
+            m("span", log.wiedervorlageDatum),
-            m("span", {style: cellStyle}, log.erledigt ? "Erledigt" : "Offen"),
+            m("span", log.erledigt ? "Erledigt" : "Offen"),
-            m("button.w3-button.w3-small", {style: cellStyle, onclick: (e: Event) => editCallLog(log, e)}, m("i.material-icons", "edit"))
+            m("button.w3-button.w3-small", {style: {padding: '0 2px'}, onclick: (e: Event) => editCallLog(log, e)}, m("i.material-icons", "edit"))
         ]
     }
     
@@ -124,12 +122,13 @@ export const call_log_liste: m.ClosureComponent = (vnode) => {
                     'overflow-y': 'inherit'}},
                 m("h1", "Gesprächsnotizen"),
                 m("div", {style: {flex: '1', 'overflow-y': 'inherit'}},
-                    m(Treetable, 
+                    m(Treetable,
                         {
                             treenodes: treenodes,
                             columnmapper: columnmapper,
                             filter: filterFunction,
-                            onRowMarked: handleRowMarked
+                            onRowMarked: handleRowMarked,
+                            isSelected: (node: iTreenode) => node === selectedNode
                         } as iTreetable,
                         m(TopbarButton, {onclick: addCallLogRoute, tooltip: "Neue Gesprächsnotiz anlegen"} as iTopbarButton,
                             m("i.material-icons", "add_call")

Client/Components/kontakt.ts

@@ -0,0 +1,224 @@
+import m from "mithril"
+import {Form, iForm} from "./widgets/form"
+import { Input, iInput, Textarea, iTextarea} from "./widgets/inputs"
+import {Select, iSelect, iSelectOption} from "./widgets/select"
+import {Treenode, iTreenode, Treetable, iTreetable, TopbarButton, iTopbarButton} from "./widgets/Treetable_V2"
+import {iKontakt, getKontakteByKundenId, getNewKontaktId, addKontakt, updateKontakt} from "../models/kontakt"
+import {iKunde, getKunden} from "../models/kunde"
+
+function createKontaktTreenodes(kundenId: number | null = null): iTreenode[] {
+    let filteredKontakte = getKontakteByKundenId(kundenId)
+
+    return filteredKontakte.map((kontakt: iKontakt) => {
+        return new Treenode(kontakt, true, [])
+    })
+}
+
+export const kontaktliste: m.ClosureComponent = (vnode) => {
+    let treenodes: iTreenode[] = createKontaktTreenodes()
+    let selectedNode: iTreenode | null = null
+    let filterKundenId: number | null = null
+
+    const handleRowMarked = (node: iTreenode) => {
+        selectedNode = node
+    }
+
+    const addKontaktRoute = () => {
+        const params: any = {
+            id: -1,
+            anrede: "",
+            name: "",
+            position: "",
+            telefon: "",
+            email: "",
+            notiz: ""
+        }
+        // Nur bei kundengefilterter Liste den Kunden vorbelegen.
+        if (filterKundenId !== null) {
+            const kunde = getKunden().find((k: iKunde) => k.id === filterKundenId)
+            if (kunde) {
+                params.kundenId = kunde.id
+                params.kundenname = kunde.name
+            }
+        }
+        m.route.set("/kontakt", params)
+    }
+
+    const editKontakt = (kontakt: iKontakt, e: Event) => {
+        e.stopPropagation()
+        m.route.set("/kontakt", {
+            id: kontakt.id,
+            kundenId: kontakt.kundenId,
+            kundenname: kontakt.kundenName,
+            anrede: kontakt.anrede,
+            name: kontakt.name,
+            position: kontakt.position,
+            telefon: kontakt.telefon,
+            email: kontakt.email,
+            notiz: kontakt.notiz
+        })
+    }
+
+    const columnmapper: (node: iTreenode) => any[] = (node: iTreenode) => {
+        let kontakt: iKontakt = node.nodevalue
+
+        return [
+            m("div", m("strong", kontakt.name)),
+            m("span", kontakt.position),
+            m("span", kontakt.telefon),
+            m("span", kontakt.email),
+            m("span", kontakt.kundenName),
+            m("button.w3-button.w3-small", {style: {padding: '0 2px'}, onclick: (e: Event) => editKontakt(kontakt, e)}, m("i.material-icons", "edit"))
+        ]
+    }
+
+    const filterFunction = (node: iTreenode, searchvalue: string): boolean => {
+        let kontakt: iKontakt = node.nodevalue
+        let searchLower = searchvalue.toLowerCase()
+        return kontakt.name.toLowerCase().includes(searchLower) ||
+               kontakt.position.toLowerCase().includes(searchLower) ||
+               kontakt.telefon.toLowerCase().includes(searchLower) ||
+               kontakt.email.toLowerCase().includes(searchLower) ||
+               kontakt.kundenName.toLowerCase().includes(searchLower)
+    }
+
+    return {
+        oninit: (vnode) => {
+            const routeParams = m.route.param()
+            if (routeParams && routeParams.kundenId) {
+                filterKundenId = parseInt(routeParams.kundenId)
+            } else {
+                filterKundenId = null
+            }
+            treenodes = createKontaktTreenodes(filterKundenId)
+        },
+        view: (vnode) => {
+            return m("div.w3-container.w3-auto", {
+                style: {
+                    display: 'flex',
+                    'flex-direction': 'column',
+                    height: 'inherit',
+                    'overflow-y': 'inherit'}},
+                m("h1", "Kontaktliste"),
+                m("div", {style: {flex: '1', 'overflow-y': 'inherit'}},
+                    m(Treetable,
+                        {
+                            treenodes: treenodes,
+                            columnmapper: columnmapper,
+                            filter: filterFunction,
+                            onRowMarked: handleRowMarked,
+                            isSelected: (node: iTreenode) => node === selectedNode
+                        } as iTreetable,
+                        m(TopbarButton, {onclick: addKontaktRoute, tooltip: "Neuen Kontakt anlegen"} as iTopbarButton,
+                            m("i.material-icons", "person_add")
+                        )
+                    )
+                )
+            )
+        }
+    }
+}
+
+export const Kontakt: m.ClosureComponent = (vnode) => {
+    // currentKontakt hält den Formularzustand. kundenId referenziert den
+    // Kunden eindeutig, kundenname dient der Anzeige.
+    let currentKontakt: {
+        id: number
+        kundenId: number
+        kundenname: string
+        anrede: string
+        name: string
+        position: string
+        telefon: string
+        email: string
+        notiz: string
+    } = {
+        id: -1,
+        kundenId: -1,
+        kundenname: "",
+        anrede: "",
+        name: "",
+        position: "",
+        telefon: "",
+        email: "",
+        notiz: ""
+    }
+    // Ist der Kunde voreingestellt (gefilterte Kontaktliste)?
+    let kundeVoreingestellt: boolean = false
+
+    return {
+        oninit: (vnode) => {
+            const routeParams = m.route.param()
+            if (routeParams) {
+                const kundenId = routeParams.kundenId ? parseInt(routeParams.kundenId) : -1
+                kundeVoreingestellt = kundenId !== -1
+                currentKontakt = {
+                    id: routeParams.id ? parseInt(routeParams.id) : -1,
+                    kundenId: kundenId,
+                    kundenname: routeParams.kundenname || "",
+                    anrede: routeParams.anrede || "",
+                    name: routeParams.name || "",
+                    position: routeParams.position || "",
+                    telefon: routeParams.telefon || "",
+                    email: routeParams.email || "",
+                    notiz: routeParams.notiz || ""
+                }
+            }
+        },
+        view: (vnode) => {
+            const submit = (form: HTMLFormElement): boolean => {
+                const formData = new FormData(form)
+                const kundenId = parseInt(formData.get("kundenId") as string)
+                // Kundennamen zur gewählten kundenId auflösen.
+                const kunde = getKunden().find((k: iKunde) => k.id === kundenId)
+                const gespeicherterKontakt: iKontakt = {
+                    id: currentKontakt.id,
+                    kundenId: kundenId,
+                    kundenName: kunde ? kunde.name : "",
+                    anrede: (formData.get("anrede") as string) || "",
+                    name: (formData.get("name") as string) || "",
+                    position: (formData.get("position") as string) || "",
+                    telefon: (formData.get("telefon") as string) || "",
+                    email: (formData.get("email") as string) || "",
+                    notiz: (formData.get("notiz") as string) || ""
+                }
+                if (currentKontakt.id === -1) {
+                    gespeicherterKontakt.id = getNewKontaktId()
+                    addKontakt(gespeicherterKontakt)
+                } else {
+                    updateKontakt(gespeicherterKontakt)
+                }
+                m.route.set("/kontaktliste")
+                return true
+            }
+            const cancel = (e: Event) => {
+                m.route.set("/kontaktliste")
+            }
+            // Select-Optionen aus der Kundenliste aufbauen.
+            const kundenOptionen: iSelectOption[] = getKunden().map((k: iKunde) => {
+                return {value: k.id, label: k.name}
+            })
+            return m("div.w3-container.w3-auto.form-view-container",
+                m("h1", currentKontakt.id === -1 ? "Neuen Kontakt anlegen" : "Kontakt-Stammblatt"),
+                m("div", {style: {flex: '1', 'min-height': '0'}},
+                    m(Form, {showButtons: true, onsubmit: submit, oncancel: cancel} as iForm, [
+                    m("label", "Kunde",
+                        m(Select, {
+                            name: "kundenId",
+                            value: currentKontakt.kundenId,
+                            options: kundenOptionen,
+                            readonly: kundeVoreingestellt,
+                            required: true
+                        } as iSelect)),
+                    m("label", "Anrede", m(Input, {name: "anrede", value: currentKontakt.anrede, type: "text"} as iInput)),
+                    m("label", "Name", m(Input, {name: "name", value: currentKontakt.name, type: "text", required: true} as iInput)),
+                    m("label", "Position", m(Input, {name: "position", value: currentKontakt.position, type: "text"} as iInput)),
+                    m("label", "Telefon", m(Input, {name: "telefon", value: currentKontakt.telefon, type: "tel"} as iInput)),
+                    m("label", "E-Mail", m(Input, {name: "email", value: currentKontakt.email, type: "email"} as iInput)),
+                    m("label", "Notiz", m(Textarea, {name: "notiz", value: currentKontakt.notiz, rows: 4} as iTextarea))
+                    ])
+                )
+            )
+        }
+    }
+}

Client/Components/kontaktadresse.ts

@@ -0,0 +1,259 @@
+import m from "mithril"
+import {Form, iForm} from "./widgets/form"
+import { Input, iInput, Textarea, iTextarea} from "./widgets/inputs"
+import {Select, iSelect, iSelectOption} from "./widgets/select"
+import {Treenode, iTreenode, Treetable, iTreetable, TopbarButton, iTopbarButton} from "./widgets/Treetable_V2"
+import {iKontaktadresse, getKontaktadressenByProjektId, getNewKontaktadresseId, addKontaktadresse, updateKontaktadresse} from "../models/kontaktadresse"
+import {iProjekt, getProjekte} from "../models/projekt"
+
+function createKontaktadresseTreenodes(projektId: number | null = null): iTreenode[] {
+    let filteredKontaktadressen = getKontaktadressenByProjektId(projektId)
+
+    return filteredKontaktadressen.map((kontaktadresse: iKontaktadresse) => {
+        return new Treenode(kontaktadresse, true, [])
+    })
+}
+
+export const kontaktadresseliste: m.ClosureComponent = (vnode) => {
+    let treenodes: iTreenode[] = createKontaktadresseTreenodes()
+    let selectedNode: iTreenode | null = null
+    let filterProjektId: number | null = null
+
+    const handleRowMarked = (node: iTreenode) => {
+        selectedNode = node
+    }
+
+    const addKontaktadresseRoute = () => {
+        const params: any = {
+            id: -1,
+            anrede: "",
+            name: "",
+            firma: "",
+            telefon: "",
+            email: "",
+            strasse: "",
+            plz: "",
+            ort: "",
+            land: "",
+            notiz: ""
+        }
+        // Nur bei projektgefilterter Liste das Projekt vorbelegen.
+        if (filterProjektId !== null) {
+            const projekt = getProjekte().find((p: iProjekt) => p.id === filterProjektId)
+            if (projekt) {
+                params.projektId = projekt.id
+                params.projektname = projekt.projektname
+            }
+        }
+        m.route.set("/kontaktadresse", params)
+    }
+
+    const editKontaktadresse = (kontaktadresse: iKontaktadresse, e: Event) => {
+        e.stopPropagation()
+        m.route.set("/kontaktadresse", {
+            id: kontaktadresse.id,
+            projektId: kontaktadresse.projektId,
+            projektname: kontaktadresse.projektName,
+            anrede: kontaktadresse.anrede,
+            name: kontaktadresse.name,
+            firma: kontaktadresse.firma,
+            telefon: kontaktadresse.telefon,
+            email: kontaktadresse.email,
+            strasse: kontaktadresse.strasse,
+            plz: kontaktadresse.plz,
+            ort: kontaktadresse.ort,
+            land: kontaktadresse.land,
+            notiz: kontaktadresse.notiz
+        })
+    }
+
+    const columnmapper: (node: iTreenode) => any[] = (node: iTreenode) => {
+        let kontaktadresse: iKontaktadresse = node.nodevalue
+
+        return [
+            m("div", m("strong", kontaktadresse.name)),
+            m("span", kontaktadresse.firma),
+            m("span", kontaktadresse.telefon),
+            m("span", kontaktadresse.email),
+            m("span", kontaktadresse.ort),
+            m("span", kontaktadresse.projektName),
+            m("button.w3-button.w3-small", {style: {padding: '0 2px'}, onclick: (e: Event) => editKontaktadresse(kontaktadresse, e)}, m("i.material-icons", "edit"))
+        ]
+    }
+
+    const filterFunction = (node: iTreenode, searchvalue: string): boolean => {
+        let kontaktadresse: iKontaktadresse = node.nodevalue
+        let searchLower = searchvalue.toLowerCase()
+        return kontaktadresse.name.toLowerCase().includes(searchLower) ||
+               kontaktadresse.firma.toLowerCase().includes(searchLower) ||
+               kontaktadresse.telefon.toLowerCase().includes(searchLower) ||
+               kontaktadresse.email.toLowerCase().includes(searchLower) ||
+               kontaktadresse.ort.toLowerCase().includes(searchLower) ||
+               kontaktadresse.projektName.toLowerCase().includes(searchLower)
+    }
+
+    return {
+        oninit: (vnode) => {
+            const routeParams = m.route.param()
+            if (routeParams && routeParams.projektId) {
+                filterProjektId = parseInt(routeParams.projektId)
+            } else {
+                filterProjektId = null
+            }
+            treenodes = createKontaktadresseTreenodes(filterProjektId)
+        },
+        view: (vnode) => {
+            return m("div.w3-container.w3-auto", {
+                style: {
+                    display: 'flex',
+                    'flex-direction': 'column',
+                    height: 'inherit',
+                    'overflow-y': 'inherit'}},
+                m("h1", "Kontaktadressen"),
+                m("div", {style: {flex: '1', 'overflow-y': 'inherit'}},
+                    m(Treetable,
+                        {
+                            treenodes: treenodes,
+                            columnmapper: columnmapper,
+                            filter: filterFunction,
+                            onRowMarked: handleRowMarked,
+                            isSelected: (node: iTreenode) => node === selectedNode
+                        } as iTreetable,
+                        m(TopbarButton, {onclick: addKontaktadresseRoute, tooltip: "Neue Kontaktadresse anlegen"} as iTopbarButton,
+                            m("i.material-icons", "person_add")
+                        )
+                    )
+                )
+            )
+        }
+    }
+}
+
+export const Kontaktadresse: m.ClosureComponent = (vnode) => {
+    // currentKontaktadresse hält den Formularzustand. projektId referenziert das
+    // Projekt eindeutig, projektname dient der Anzeige.
+    let currentKontaktadresse: {
+        id: number
+        projektId: number
+        projektname: string
+        anrede: string
+        name: string
+        firma: string
+        telefon: string
+        email: string
+        strasse: string
+        plz: string
+        ort: string
+        land: string
+        notiz: string
+    } = {
+        id: -1,
+        projektId: -1,
+        projektname: "",
+        anrede: "",
+        name: "",
+        firma: "",
+        telefon: "",
+        email: "",
+        strasse: "",
+        plz: "",
+        ort: "",
+        land: "",
+        notiz: ""
+    }
+    // Ist das Projekt voreingestellt (gefilterte Kontaktadressenliste)?
+    let projektVoreingestellt: boolean = false
+
+    return {
+        oninit: (vnode) => {
+            const routeParams = m.route.param()
+            if (routeParams) {
+                const projektId = routeParams.projektId ? parseInt(routeParams.projektId) : -1
+                projektVoreingestellt = projektId !== -1
+                currentKontaktadresse = {
+                    id: routeParams.id ? parseInt(routeParams.id) : -1,
+                    projektId: projektId,
+                    projektname: routeParams.projektname || "",
+                    anrede: routeParams.anrede || "",
+                    name: routeParams.name || "",
+                    firma: routeParams.firma || "",
+                    telefon: routeParams.telefon || "",
+                    email: routeParams.email || "",
+                    strasse: routeParams.strasse || "",
+                    plz: routeParams.plz || "",
+                    ort: routeParams.ort || "",
+                    land: routeParams.land || "",
+                    notiz: routeParams.notiz || ""
+                }
+            }
+        },
+        view: (vnode) => {
+            const submit = (form: HTMLFormElement): boolean => {
+                const formData = new FormData(form)
+                const projektId = parseInt(formData.get("projektId") as string)
+                // Projektnamen zur gewählten projektId auflösen.
+                const projekt = getProjekte().find((p: iProjekt) => p.id === projektId)
+                const gespeicherteKontaktadresse: iKontaktadresse = {
+                    id: currentKontaktadresse.id,
+                    projektId: projektId,
+                    projektName: projekt ? projekt.projektname : "",
+                    anrede: (formData.get("anrede") as string) || "",
+                    name: (formData.get("name") as string) || "",
+                    firma: (formData.get("firma") as string) || "",
+                    telefon: (formData.get("telefon") as string) || "",
+                    email: (formData.get("email") as string) || "",
+                    strasse: (formData.get("strasse") as string) || "",
+                    plz: (formData.get("plz") as string) || "",
+                    ort: (formData.get("ort") as string) || "",
+                    land: (formData.get("land") as string) || "",
+                    notiz: (formData.get("notiz") as string) || ""
+                }
+                if (currentKontaktadresse.id === -1) {
+                    gespeicherteKontaktadresse.id = getNewKontaktadresseId()
+                    addKontaktadresse(gespeicherteKontaktadresse)
+                } else {
+                    updateKontaktadresse(gespeicherteKontaktadresse)
+                }
+                m.route.set("/kontaktadresseliste")
+                return true
+            }
+            const cancel = (e: Event) => {
+                m.route.set("/kontaktadresseliste")
+            }
+            // Select-Optionen aus der Projektliste aufbauen.
+            const projektOptionen: iSelectOption[] = getProjekte().map((p: iProjekt) => {
+                return {value: p.id, label: p.projektname}
+            })
+            return m("div.w3-container.w3-auto.form-view-container",
+                m("h1", currentKontaktadresse.id === -1 ? "Neue Kontaktadresse anlegen" : "Kontaktadresse-Stammblatt"),
+                m("div", {style: {flex: '1', 'min-height': '0'}},
+                    m(Form, {showButtons: true, onsubmit: submit, oncancel: cancel} as iForm, [
+                    m("label", "Projekt",
+                        m(Select, {
+                            name: "projektId",
+                            value: currentKontaktadresse.projektId,
+                            options: projektOptionen,
+                            readonly: projektVoreingestellt,
+                            required: true
+                        } as iSelect)),
+                    m("label", "Anrede", m(Input, {name: "anrede", value: currentKontaktadresse.anrede, type: "text"} as iInput)),
+                    m("label", "Name", m(Input, {name: "name", value: currentKontaktadresse.name, type: "text", required: true} as iInput)),
+                    m("label", "Firma", m(Input, {name: "firma", value: currentKontaktadresse.firma, type: "text"} as iInput)),
+                    m("label", "Telefon", m(Input, {name: "telefon", value: currentKontaktadresse.telefon, type: "tel"} as iInput)),
+                    m("label", "E-Mail", m(Input, {name: "email", value: currentKontaktadresse.email, type: "email"} as iInput)),
+                    m("label", "Straße", m(Input, {name: "strasse", value: currentKontaktadresse.strasse, type: "text"} as iInput)),
+                    // PLZ und Ort in einer Zeile.
+                    m("div", {style: {display: 'flex', gap: '8px', 'margin-bottom': '5px'}},
+                        m("label", {style: {flex: '0 0 120px'}}, "PLZ",
+                            m(Input, {name: "plz", value: currentKontaktadresse.plz, type: "text"} as iInput)),
+                        m("label", {style: {flex: '1'}}, "Ort",
+                            m(Input, {name: "ort", value: currentKontaktadresse.ort, type: "text"} as iInput))
+                    ),
+                    m("label", "Land", m(Input, {name: "land", value: currentKontaktadresse.land, type: "text"} as iInput)),
+                    m("label", "Notiz", m(Textarea, {name: "notiz", value: currentKontaktadresse.notiz, rows: 4} as iTextarea))
+                    ])
+                )
+            )
+        }
+    }
+}

Client/Components/kunde.ts

@@ -52,7 +52,14 @@ export const kunde: m.ClosureComponent = (vnode) => {
                 m.route.set("/kundenliste")
             }
             return m("div.w3-container.w3-auto.form-view-container",
-                m("h1", currentKunde.id === -1 ? "Neuen Kunden anlegen" : "Kundenstammblatt"),
+                m("div", {style: {display: 'flex', 'align-items': 'center', 'justify-content': 'space-between'}},
+                    m("h1", currentKunde.id === -1 ? "Neuen Kunden anlegen" : "Kundenstammblatt"),
+                    currentKunde.id !== -1
+                        ? m("button.w3-button.w3-theme",
+                            {onclick: () => m.route.set("/kontaktliste", {kundenId: currentKunde.id})},
+                            m("i.material-icons", "contact_page"), " Kontakte")
+                        : null
+                ),
                 m("div", {style: {flex: '1', 'min-height': '0'}},
                     m(Form, {showButtons: true, onsubmit: submit, oncancel: cancel} as iForm, [
                     m("label", "Kundenname", m(Input, {name: "kundenname", value: currentKunde.name, type: "text", required: true} as iInput)),
@@ -96,6 +103,11 @@ export const kundenliste: m.ClosureComponent = (vnode) => {
         e.stopPropagation()
         m.route.set("/projektliste", {kundenId: kunde.id})
     }
+
+    const showKontakte = (kunde: iKunde, e: Event) => {
+        e.stopPropagation()
+        m.route.set("/kontaktliste", {kundenId: kunde.id})
+    }
     
     const addKundeRoute = () => {
         m.route.set("/kunde", {id: -1, name: "", strasse: "", plz: "", ort: "", land: ""})
@@ -103,17 +115,18 @@ export const kundenliste: m.ClosureComponent = (vnode) => {
     
     const columnmapper: (node: iTreenode) => any[] = (node: iTreenode) => {
         let kunde: iKunde = node.nodevalue
-        const isSelected = selectedNode === node
+
-        const cellStyle = isSelected ? {backgroundColor: 'lightgray'} : {}
-        
         return [
-            m("div", {style: cellStyle}, m("strong", kunde.name)),
+            m("div", m("strong", kunde.name)),
-            m("span", {style: cellStyle}, kunde.strasse),
+            m("span", kunde.strasse),
-            m("span", {style: cellStyle}, kunde.plz),
+            m("span", kunde.plz),
-            m("span", {style: cellStyle}, kunde.ort),
+            m("span", kunde.ort),
-            m("span", {style: cellStyle}, kunde.land),
+            m("span", kunde.land),
-            m("button.w3-button.w3-small", {style: cellStyle, onclick: (e: Event) => editKunde(kunde, e)}, m("i.material-icons", "edit")),
+            m("div", {style: {display: 'flex', gap: '0', 'white-space': 'nowrap'}},
-            m("button.w3-button.w3-small", {style: cellStyle, onclick: (e: Event) => showProjekte(kunde, e)}, m("i.material-icons", "library_books"))
+                m("button.w3-button.w3-small", {style: {padding: '0 2px'}, onclick: (e: Event) => editKunde(kunde, e)}, m("i.material-icons", "edit")),
+                m("button.w3-button.w3-small", {style: {padding: '0 2px'}, onclick: (e: Event) => showProjekte(kunde, e)}, m("i.material-icons", "library_books")),
+                m("button.w3-button.w3-small", {title: "Kontakte anzeigen", style: {padding: '0 2px'}, onclick: (e: Event) => showKontakte(kunde, e)}, m("i.material-icons", "contact_page"))
+            )
         ]
     }
     
@@ -137,12 +150,13 @@ export const kundenliste: m.ClosureComponent = (vnode) => {
                     'overflow-y': 'inherit'}},
                 m("h1", "Kundenliste"),
                 m("div", {style: {flex: '1', 'overflow-y': 'inherit'}},
-                    m(Treetable, 
+                    m(Treetable,
                         {
                             treenodes: treenodes,
                             columnmapper: columnmapper,
                             filter: filterFunction,
-                            onRowMarked: handleRowMarked
+                            onRowMarked: handleRowMarked,
+                            isSelected: (node: iTreenode) => node === selectedNode
                         } as iTreetable,
                         m(TopbarButton, {onclick: addKundeRoute, tooltip: "Neuen Kunden anlegen"} as iTopbarButton,
                             m("i.material-icons", "person_add")

Client/Components/projekt.ts

@@ -60,6 +60,11 @@ export const projektliste: m.ClosureComponent = (vnode) => {
         e.stopPropagation()
         m.route.set("/calllogliste", {projektId: projekt.id})
     }
+
+    const showKontaktadressen = (projekt: iProjekt, e: Event) => {
+        e.stopPropagation()
+        m.route.set("/kontaktadresseliste", {projektId: projekt.id})
+    }
     
     const addCallLog = (projekt: iProjekt, e: Event) => {
         e.stopPropagation()
@@ -85,18 +90,19 @@ export const projektliste: m.ClosureComponent = (vnode) => {
     
     const columnmapper: (node: iTreenode) => any[] = (node: iTreenode) => {
         let projekt: iProjekt = node.nodevalue
-        const isSelected = selectedNode === node
+
-        const cellStyle = isSelected ? {backgroundColor: '#e6f7ff'} : {}
-        
         return [
-            m("div", {style: cellStyle}, m("strong", projekt.kundenName)),
+            m("div", m("strong", projekt.kundenName)),
-            m("span", {style: cellStyle}, projekt.projektname),
+            m("span", projekt.projektname),
-            m("span", {style: cellStyle}, projekt.zweck),
+            m("span", projekt.zweck),
-            m("span", {style: cellStyle}, projekt.verantwortlicher),
+            m("span", projekt.verantwortlicher),
-            m("span", {style: cellStyle}, projekt.startdatum),
+            m("span", projekt.startdatum),
-            m("button.w3-button.w3-small", {style: cellStyle, onclick: (e: Event) => editProjekt(projekt, e)}, m("i.material-icons", "edit")),
+            m("div", {style: {display: 'flex', gap: '0', 'white-space': 'nowrap'}},
-            m("button.w3-button.w3-small", {title: "Gesprächsnotizen anzeigen", style: cellStyle, onclick: (e: Event) => showCallLogs(projekt, e)}, m("i.material-icons", "call_log")),
+                m("button.w3-button.w3-small", {style: {padding: '0 2px'}, onclick: (e: Event) => editProjekt(projekt, e)}, m("i.material-icons", "edit")),
-            m("button.w3-button.w3-small", {title: "Gesprächsnotiz hinzufügen", style: cellStyle, onclick: (e: Event) => addCallLog(projekt, e)}, m("i.material-icons", "add_call"))
+                m("button.w3-button.w3-small", {title: "Kontaktadressen anzeigen", style: {padding: '0 2px'}, onclick: (e: Event) => showKontaktadressen(projekt, e)}, m("i.material-icons", "contact_page")),
+                m("button.w3-button.w3-small", {title: "Gesprächsnotizen anzeigen", style: {padding: '0 2px'}, onclick: (e: Event) => showCallLogs(projekt, e)}, m("i.material-icons", "call_log")),
+                m("button.w3-button.w3-small", {title: "Gesprächsnotiz hinzufügen", style: {padding: '0 2px'}, onclick: (e: Event) => addCallLog(projekt, e)}, m("i.material-icons", "add_call"))
+            )
         ]
     }
     
@@ -129,12 +135,13 @@ export const projektliste: m.ClosureComponent = (vnode) => {
                     'overflow-y': 'inherit'}},
                 m("h1", "Projektliste"),
                 m("div", {style: {flex: '1', 'overflow-y': 'inherit'}},
-                    m(Treetable, 
+                    m(Treetable,
                         {
                             treenodes: treenodes,
                             columnmapper: columnmapper,
                             filter: filterFunction,
-                            onRowMarked: handleRowMarked
+                            onRowMarked: handleRowMarked,
+                            isSelected: (node: iTreenode) => node === selectedNode
                         } as iTreetable,
                         m(TopbarButton, {onclick: addProjektRoute, tooltip: "Neues Projekt anlegen"} as iTopbarButton,
                             m("i.material-icons", "post_add")
@@ -218,7 +225,14 @@ export const Projekt: m.ClosureComponent = (vnode) => {
                 return {value: k.id, label: k.name}
             })
             return m("div.w3-container.w3-auto.form-view-container",
-                m("h1", currentProjekt.id === -1 ? "Neues Projekt anlegen" : "Projekt-Stammblatt"),
+                m("div", {style: {display: 'flex', 'align-items': 'center', 'justify-content': 'space-between'}},
+                    m("h1", currentProjekt.id === -1 ? "Neues Projekt anlegen" : "Projekt-Stammblatt"),
+                    currentProjekt.id !== -1
+                        ? m("button.w3-button.w3-theme",
+                            {onclick: () => m.route.set("/kontaktadresseliste", {projektId: currentProjekt.id})},
+                            m("i.material-icons", "contact_page"), " Kontaktadressen")
+                        : null
+                ),
                 m("div", {style: {flex: '1', 'min-height': '0'}},
                     m(Form, {showButtons: true, onsubmit: submit, oncancel: cancel} as iForm, [
                     m("label", "Kunde",

Client/Components/tags.ts

@@ -598,11 +598,9 @@ export const TagList: m.ClosureComponent = (vnode) => {
     
     const columnmapper: (node: iTreenode) => any[] = (node: iTreenode) => {
         let tag: iTag = node.nodevalue;
-        const isSelected = selectedNode === node;
+
-        const cellStyle = isSelected ? {backgroundColor: 'lightgray'} : {};
-        
         return [
-            m("span", {style: cellStyle}, 
+            m("span",
                 m("span", {
                     style: {
                         backgroundColor: tag.color,
@@ -615,9 +613,9 @@ export const TagList: m.ClosureComponent = (vnode) => {
                     }
                 }, tag.name)
             ),
-            m("span", {style: cellStyle}, tag.description),
+            m("span", tag.description),
-            m("div", {style: cellStyle},
+            m("div",
-                m("button.w3-button.w3-small", {onclick: (e: Event) => editTag(tag, e)}, 
+                m("button.w3-button.w3-small", {style: {padding: '0 2px'}, onclick: (e: Event) => editTag(tag, e)},
                     m("i.material-icons", "edit")
                 )
             )
@@ -647,12 +645,13 @@ export const TagList: m.ClosureComponent = (vnode) => {
                 m("h1", "Tags"),
                 m("p.w3-text-grey", "Hierarchie: Tags können beliebig verschachtelt werden (z. B. Backend → Python → Flask)."),
                 m("div", {style: {flex: '1', 'overflow-y': 'inherit'}},
-                    m(Treetable, 
+                    m(Treetable,
                         {
                             treenodes: treenodes,
                             columnmapper: columnmapper,
                             filter: filterFunction,
-                            onRowMarked: handleRowMarked
+                            onRowMarked: handleRowMarked,
+                            isSelected: (node: iTreenode) => node === selectedNode
                         } as iTreetable
                     )
                 )

Client/Components/widgets/Treetable_V2.ts

@@ -33,10 +33,17 @@ export interface iTreetable {
     columnmapper: Columnmapper
     onRowMarked?: (node: iTreenode) => void
     filter?: (row:iTreenode, searchvalue:string) => boolean
+    /** Optional: Callback, der für eine Treenode bestimmt, ob die gesamte
+     *  Tabellenzeile als markiert (selektiert) dargestellt werden soll.
+     *  Wenn gesetzt, übernimmt das Widget die Hintergrund-Einfärbung der
+     *  <tr>-Zeile; die columnmapper-Inhalte brauchen dann kein eigenes
+     *  Selektions-Styling mehr. */
+    isSelected?: (node: iTreenode) => boolean
 }
 
 export const Treetable: m.ClosureComponent<iTreetable> = (vnode) =>  {
     let onRowMarked = vnode.attrs.onRowMarked === undefined ? (node: iTreenode) => {} : vnode.attrs.onRowMarked
+    let isSelected = vnode.attrs.isSelected
     let expandtoggle: boolean = true
     let searchvalue:string = ""
     function setSearchvalue(v:string) {
@@ -68,10 +75,11 @@ export const Treetable: m.ClosureComponent<iTreetable> = (vnode) =>  {
                                 if (vnode.attrs.filter == undefined || (vnode.attrs.filter != undefined && vnode.attrs.filter(tn, searchvalue) == true)) { 
                                 return m(Treerow, {
                                     // ACHTUNG: Änderungen hier müssen unten beim rekursiven Aufruf der Treerow-Funktion ebenfalls eingebaut werden
-                                    treenode: tn, 
+                                    treenode: tn,
-                                    level: 0, 
+                                    level: 0,
-                                    columnmapper1: vnode.attrs.columnmapper, 
+                                    columnmapper1: vnode.attrs.columnmapper,
                                     onRowMarked: onRowMarked,
+                                    isSelected: isSelected,
                                     isEven: ((z % 2) == 0)} as iTreerow)
                                 }
                                 else {
@@ -91,16 +99,22 @@ interface iTreerow {
     level: number
     columnmapper1: Columnmapper
     onRowMarked: (node: iTreenode) => void
+    isSelected?: (node: iTreenode) => boolean
     isEven?: boolean
 }
 let Treerow: m.ClosureComponent<iTreerow> = (vnode) => {
     
     return {
         view: (vnode) => {
+            // Wenn ein isSelected-Callback gesetzt ist, prüfen, ob diese
+            // Zeile selektiert ist; in diesem Fall wird der Hintergrund der
+            // gesamten <tr>-Zeile eingefärbt.
+            const rowSelected = vnode.attrs.isSelected ? vnode.attrs.isSelected(vnode.attrs.treenode) : false
             return [
                 m("tr.w3-border-theme", {onmouseup: () => vnode.attrs.onRowMarked(vnode.attrs.treenode),
                          onkeyup: () => vnode.attrs.onRowMarked(vnode.attrs.treenode),
-                         class: (vnode.attrs.isEven ? "w3-tablerow-even" : "w3-tablerow-odd"),
+                         class: (vnode.attrs.isEven ? "w3-tablerow-even" : "w3-tablerow-odd")
+                               + (rowSelected ? " w3-theme-l4" : ""),
                          style: {'border-top-style': 'solid', 'border-top-width': '1px'}
                     }, 
                     m("td", // Zunächst wird ein td-Element für die erste Spalte der Tabelle erzeugt, damit dort die
@@ -146,10 +160,11 @@ let Treerow: m.ClosureComponent<iTreerow> = (vnode) => {
                 vnode.attrs.treenode.hasChildren && vnode.attrs.treenode.expand
                 ? vnode.attrs.treenode.children.map((tn: iTreenode, z) => {
                     return m(Treerow, {
-                        treenode: tn, 
+                        treenode: tn,
-                        level: vnode.attrs.level + 1, 
+                        level: vnode.attrs.level + 1,
-                        columnmapper1: vnode.attrs.columnmapper1, 
+                        columnmapper1: vnode.attrs.columnmapper1,
                         onRowMarked: vnode.attrs.onRowMarked,
+                        isSelected: vnode.attrs.isSelected,
                         isEven: ((z % 2) == 0)
                     } as iTreerow)
                 })

Client/index.ts

@@ -6,6 +6,8 @@ import { changepasswordscreen, loginscreen } from "./Components/auth/login"
 import {kunde, kundenliste} from "./Components/kunde"
 import { Projekt, projektliste } from "./Components/projekt"
 import { Call_Log, call_log_liste } from "./Components/call_log"
+import { Kontakt, kontaktliste } from "./Components/kontakt"
+import { Kontaktadresse, kontaktadresseliste } from "./Components/kontaktadresse"
 import { Tag, TagList } from "./Components/tags"
 
 
@@ -152,6 +154,10 @@ m.route(gridMountpoints.main, "/blankpage", {
     "/projekt": Projekt,
     "/calllogliste": call_log_liste,
     "/call_log": Call_Log,
+    "/kontaktliste": kontaktliste,
+    "/kontakt": Kontakt,
+    "/kontaktadresseliste": kontaktadresseliste,
+    "/kontaktadresse": Kontaktadresse,
     "/taglist": TagList,
     "/tag": Tag
     

Client/models/kontakt.ts

@@ -0,0 +1,147 @@
+import m from "mithril"
+
+/**
+ * Datenmodell für einen Kontakt (Ansprechpartner beim Kunden).
+ * Jeder Kontakt ist genau einem Kunden zugeordnet (FK kundenId).
+ */
+export interface iKontakt {
+    id: number
+    kundenId: number
+    kundenName: string
+    anrede: string
+    name: string
+    position: string
+    telefon: string
+    email: string
+    notiz: string
+}
+
+/**
+ * In-Memory-Datenspeicher für Kontakte. Wird als Fallback solange verwendet,
+ * bis die serverseitigen REST-Endpunkte verfügbar sind.
+ */
+export const kontaktDaten: iKontakt[] = [
+    {id: 1, kundenId: 1, kundenName: "Musterfirma GmbH", anrede: "Herr", name: "Max Mustermann", position: "Geschäftsführer", telefon: "+49 123 45678", email: "m.mustermann@musterfirma.de", notiz: "Erster Ansprechpartner für das Website-Projekt."},
+    {id: 2, kundenId: 1, kundenName: "Musterfirma GmbH", anrede: "Frau", name: "Anna Schmidt", position: "Marketingleiterin", telefon: "+49 123 45679", email: "a.schmidt@musterfirma.de", notiz: "Zuständig für Design-Fragen."},
+    {id: 3, kundenId: 2, kundenName: "Beispiel AG", anrede: "Herr", name: "Peter Müller", position: "IT-Leiter", telefon: "+49 543 21012", email: "p.mueller@beispiel-ag.de", notiz: "Technischer Ansprechpartner."},
+    {id: 4, kundenId: 3, kundenName: "Test Unternehmen", anrede: "Frau", name: "Lisa Bauer", position: "Projektmanagerin", telefon: "+49 678 90123", email: "l.bauer@test-unternehmen.com", notiz: ""}
+]
+
+/**
+ * Liefert die nächste freie Kontakt-ID auf Basis des In-Memory-Speichers.
+ * Sobald die serverseitige ID-Vergabe verfügbar ist, entfällt diese Funktion.
+ */
+export function getNewKontaktId(): number {
+    if (kontaktDaten.length === 0) {
+        return 1
+    }
+    return Math.max(...kontaktDaten.map((kontakt: iKontakt) => kontakt.id)) + 1
+}
+
+/**
+ * Fügt einen neuen Kontakt dem In-Memory-Speicher hinzu.
+ */
+export function addKontakt(kontakt: iKontakt): void {
+    kontaktDaten.push(kontakt)
+}
+
+/**
+ * Aktualisiert einen bestehenden Kontakt im In-Memory-Speicher.
+ */
+export function updateKontakt(kontakt: iKontakt): void {
+    const index = kontaktDaten.findIndex((k: iKontakt) => k.id === kontakt.id)
+    if (index !== -1) {
+        kontaktDaten[index] = kontakt
+    }
+}
+
+/**
+ * Liefert eine Kopie aller Kontakte aus dem In-Memory-Speicher.
+ */
+export function getKontakte(): iKontakt[] {
+    return [...kontaktDaten]
+}
+
+/**
+ * Liefert die Kontakte eines bestimmten Kunden. Ist kundenId null, werden
+ * alle Kontakte zurückgegeben.
+ */
+export function getKontakteByKundenId(kundenId: number | null): iKontakt[] {
+    return kundenId
+        ? kontaktDaten.filter((k: iKontakt) => k.kundenId === kundenId)
+        : [...kontaktDaten]
+}
+
+/**
+ * Liefert einen einzelnen Kontakt anhand seiner ID oder undefined.
+ */
+export function getKontaktById(id: number): iKontakt | undefined {
+    return kontaktDaten.find((k: iKontakt) => k.id === id)
+}
+
+/* ------------------------------------------------------------------ */
+/* REST-API-Aufrufe (Client-Seite)                                     */
+/* ------------------------------------------------------------------ */
+/* Die folgenden Funktionen kapseln die Kommunikation mit den           */
+/* serverseitigen REST-Endpunkten. Die Endpunkte sind noch nicht       */
+/* implementiert und werden später nachgereicht.                      */
+/* ------------------------------------------------------------------ */
+
+/**
+ * Basis-Pfad der Kontakt-REST-Endpunkte.
+ */
+const KONTAKT_REST_BASE = "/xhr/kontakt"
+
+/**
+ * Lädt die Kontaktliste vom Server.
+ */
+export function fetchKontakte(): Promise<iKontakt[]> {
+    return m.request({
+        method: "GET",
+        url: KONTAKT_REST_BASE + "/list"
+    }).then((result) => result as iKontakt[])
+}
+
+/**
+ * Lädt einen einzelnen Kontakt anhand seiner ID vom Server.
+ */
+export function fetchKontaktById(id: number): Promise<iKontakt> {
+    return m.request({
+        method: "GET",
+        url: KONTAKT_REST_BASE + "/get",
+        params: {id: id}
+    }).then((result) => result as iKontakt)
+}
+
+/**
+ * Legt einen neuen Kontakt serverseitig an.
+ */
+export function createKontaktREST(kontakt: iKontakt): Promise<iKontakt> {
+    return m.request({
+        method: "POST",
+        url: KONTAKT_REST_BASE + "/create",
+        body: kontakt
+    }).then((result) => result as iKontakt)
+}
+
+/**
+ * Aktualisiert einen bestehenden Kontakt serverseitig.
+ */
+export function updateKontaktREST(kontakt: iKontakt): Promise<iKontakt> {
+    return m.request({
+        method: "PUT",
+        url: KONTAKT_REST_BASE + "/update",
+        body: kontakt
+    }).then((result) => result as iKontakt)
+}
+
+/**
+ * Löscht einen Kontakt serverseitig anhand seiner ID.
+ */
+export function deleteKontaktREST(id: number): Promise<void> {
+    return m.request({
+        method: "DELETE",
+        url: KONTAKT_REST_BASE + "/delete",
+        params: {id: id}
+    }).then(() => undefined)
+}

Client/models/kontaktadresse.ts

@@ -0,0 +1,151 @@
+import m from "mithril"
+
+/**
+ * Datenmodell für eine Kontaktadresse (Akquise-Ziel innerhalb eines Projekts).
+ * Jede Kontaktadresse ist genau einem Projekt zugeordnet (FK projektId).
+ */
+export interface iKontaktadresse {
+    id: number
+    projektId: number
+    projektName: string
+    anrede: string
+    name: string
+    firma: string
+    telefon: string
+    email: string
+    strasse: string
+    plz: string
+    ort: string
+    land: string
+    notiz: string
+}
+
+/**
+ * In-Memory-Datenspeicher für Kontaktadressen. Wird als Fallback solange verwendet,
+ * bis die serverseitigen REST-Endpunkte verfügbar sind.
+ */
+export const kontaktadresseDaten: iKontaktadresse[] = [
+    {id: 1, projektId: 1, projektName: "Website-Relaunch", anrede: "Herr", name: "Thomas Becker", firma: "Becker Webdesign GmbH", telefon: "+49 201 123456", email: "t.becker@becker-webdesign.de", strasse: "Industriestr. 12", plz: "45131", ort: "Essen", land: "Deutschland", notiz: "Interessent für Website-Relaunch, Erstkontakt auf Messe."},
+    {id: 2, projektId: 1, projektName: "Website-Relaunch", anrede: "Frau", name: "Sandra Klein", firma: "Klein Marketing", telefon: "+49 211 987654", email: "s.klein@klein-marketing.de", strasse: "Königsallee 5", plz: "40212", ort: "Düsseldorf", land: "Deutschland", notiz: ""},
+    {id: 3, projektId: 2, projektName: "E-Commerce Plattform", anrede: "Herr", name: "Michael Wagner", firma: "Wagner Online Shop", telefon: "+49 221 555123", email: "m.wagner@wagner-shop.de", strasse: "Hauptstr. 88", plz: "50667", ort: "Köln", land: "Deutschland", notiz: "Sucht E-Commerce-Lösung, Budget geklärt."},
+    {id: 4, projektId: 3, projektName: "CRM-System", anrede: "Frau", name: "Julia Hoffmann", firma: "Hoffmann Consulting", telefon: "+49 89 444333", email: "j.hoffmann@hoffmann-consulting.de", strasse: "Marienplatz 3", plz: "80331", ort: "München", land: "Deutschland", notiz: "Wiedervorlage im nächsten Quartal."}
+]
+
+/**
+ * Liefert die nächste freie Kontaktadressen-ID auf Basis des In-Memory-Speichers.
+ * Sobald die serverseitige ID-Vergabe verfügbar ist, entfällt diese Funktion.
+ */
+export function getNewKontaktadresseId(): number {
+    if (kontaktadresseDaten.length === 0) {
+        return 1
+    }
+    return Math.max(...kontaktadresseDaten.map((ka: iKontaktadresse) => ka.id)) + 1
+}
+
+/**
+ * Fügt eine neue Kontaktadresse dem In-Memory-Speicher hinzu.
+ */
+export function addKontaktadresse(kontaktadresse: iKontaktadresse): void {
+    kontaktadresseDaten.push(kontaktadresse)
+}
+
+/**
+ * Aktualisiert eine bestehende Kontaktadresse im In-Memory-Speicher.
+ */
+export function updateKontaktadresse(kontaktadresse: iKontaktadresse): void {
+    const index = kontaktadresseDaten.findIndex((k: iKontaktadresse) => k.id === kontaktadresse.id)
+    if (index !== -1) {
+        kontaktadresseDaten[index] = kontaktadresse
+    }
+}
+
+/**
+ * Liefert eine Kopie aller Kontaktadressen aus dem In-Memory-Speicher.
+ */
+export function getKontaktadressen(): iKontaktadresse[] {
+    return [...kontaktadresseDaten]
+}
+
+/**
+ * Liefert die Kontaktadressen eines bestimmten Projekts. Ist projektId null,
+ * werden alle Kontaktadressen zurückgegeben.
+ */
+export function getKontaktadressenByProjektId(projektId: number | null): iKontaktadresse[] {
+    return projektId
+        ? kontaktadresseDaten.filter((k: iKontaktadresse) => k.projektId === projektId)
+        : [...kontaktadresseDaten]
+}
+
+/**
+ * Liefert eine einzelne Kontaktadresse anhand ihrer ID oder undefined.
+ */
+export function getKontaktadresseById(id: number): iKontaktadresse | undefined {
+    return kontaktadresseDaten.find((k: iKontaktadresse) => k.id === id)
+}
+
+/* ------------------------------------------------------------------ */
+/* REST-API-Aufrufe (Client-Seite)                                     */
+/* ------------------------------------------------------------------ */
+/* Die folgenden Funktionen kapseln die Kommunikation mit den           */
+/* serverseitigen REST-Endpunkten. Die Endpunkte sind noch nicht       */
+/* implementiert und werden später nachgereicht.                      */
+/* ------------------------------------------------------------------ */
+
+/**
+ * Basis-Pfad der Kontaktadressen-REST-Endpunkte.
+ */
+const KONTAKTADRESSE_REST_BASE = "/xhr/kontaktadresse"
+
+/**
+ * Lädt die Kontaktadressenliste vom Server.
+ */
+export function fetchKontaktadressen(): Promise<iKontaktadresse[]> {
+    return m.request({
+        method: "GET",
+        url: KONTAKTADRESSE_REST_BASE + "/list"
+    }).then((result) => result as iKontaktadresse[])
+}
+
+/**
+ * Lädt eine einzelne Kontaktadresse anhand ihrer ID vom Server.
+ */
+export function fetchKontaktadresseById(id: number): Promise<iKontaktadresse> {
+    return m.request({
+        method: "GET",
+        url: KONTAKTADRESSE_REST_BASE + "/get",
+        params: {id: id}
+    }).then((result) => result as iKontaktadresse)
+}
+
+/**
+ * Legt eine neue Kontaktadresse serverseitig an.
+ */
+export function createKontaktadresseREST(kontaktadresse: iKontaktadresse): Promise<iKontaktadresse> {
+    return m.request({
+        method: "POST",
+        url: KONTAKTADRESSE_REST_BASE + "/create",
+        body: kontaktadresse
+    }).then((result) => result as iKontaktadresse)
+}
+
+/**
+ * Aktualisiert eine bestehende Kontaktadresse serverseitig.
+ */
+export function updateKontaktadresseREST(kontaktadresse: iKontaktadresse): Promise<iKontaktadresse> {
+    return m.request({
+        method: "PUT",
+        url: KONTAKTADRESSE_REST_BASE + "/update",
+        body: kontaktadresse
+    }).then((result) => result as iKontaktadresse)
+}
+
+/**
+ * Löscht eine Kontaktadresse serverseitig anhand ihrer ID.
+ */
+export function deleteKontaktadresseREST(id: number): Promise<void> {
+    return m.request({
+        method: "DELETE",
+        url: KONTAKTADRESSE_REST_BASE + "/delete",
+        params: {id: id}
+    }).then(() => undefined)
+}