Call_Log: Formularfelder in einer Zeile zusammengefasst (Datum/Zeit/Dauer, Ansprechpartner/Telefon)

Datum, Uhrzeit Beginn und Dauer nebeneinander in einem flex-Container;
Name Ansprechpartner und Telefon ebenfalls in einer Zeile. Macht das
Formular kompakter und übersichtlicher.

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

Client/Components/call_log.ts

@@ -286,24 +286,33 @@ export const Call_Log: m.ClosureComponent = (vnode) => {
                             readonly: kundeVoreingestellt,
                             required: true
                         } as iSelect)),
-                    m("label", "Datum", m(Input, {name: "datum", value: currentLog.datum, type: "date"} as iInput)),
+                    // Datum, Startzeit und Dauer in einer Zeile.
-                    m("label", "Uhrzeit Beginn", m(Input, {name: "uhrzeitBeginn", value: currentLog.uhrzeitBeginn, type: "time"} as iInput)),
+                    m("div", {style: {display: 'flex', gap: '8px', 'margin-bottom': '5px'}},
-                    m("label", "Dauer (mm:ss)",
+                        m("label", {style: {flex: '1'}}, "Datum",
-                        // Raw input statt Input-Widget, damit oncreate die
+                            m(Input, {name: "datum", value: currentLog.datum, type: "date"} as iInput)),
-                        // DOM-Referenz für den Timer greifen kann. Text-Typ,
+                        m("label", {style: {flex: '1'}}, "Uhrzeit Beginn",
-                        // da das Format mm:ss keine Zahl ist.
+                            m(Input, {name: "uhrzeitBeginn", value: currentLog.uhrzeitBeginn, type: "time"} as iInput)),
-                        m("input.w3-input.w3-border", {
+                        m("label", {style: {flex: '1'}}, "Dauer (mm:ss)",
-                            name: "dauer",
+                            // Raw input statt Input-Widget, damit oncreate die
-                            type: "text",
+                            // DOM-Referenz für den Timer greifen kann. Text-Typ,
-                            value: currentLog.dauer,
+                            // da das Format mm:ss keine Zahl ist.
-                            style: {'margin-bottom': '5px', width: '100%'},
+                            m("input.w3-input.w3-border", {
-                            oncreate: (vnode: m.VnodeDOM) => {
+                                name: "dauer",
-                                dauerInput = vnode.dom as HTMLInputElement
+                                type: "text",
-                            }
+                                value: currentLog.dauer,
-                        })),
+                                oncreate: (vnode: m.VnodeDOM) => {
+                                    dauerInput = vnode.dom as HTMLInputElement
+                                }
+                            }))
+                    ),
                     m("label", "Betreff", m(Input, {name: "betreff", value: currentLog.betreff, type: "text"} as iInput)),
-                    m("label", "Name Ansprechpartner", m(Input, {name: "nameAnsprechpartner", value: currentLog.nameAnsprechpartner, type: "text"} as iInput)),
+                    // Ansprechpartner und Telefon in einer Zeile.
-                    m("label", "Telefon", m(Input, {name: "telefon", value: currentLog.telefon, type: "tel"} as iInput)),
+                    m("div", {style: {display: 'flex', gap: '8px', 'margin-bottom': '5px'}},
+                        m("label", {style: {flex: '1'}}, "Name Ansprechpartner",
+                            m(Input, {name: "nameAnsprechpartner", value: currentLog.nameAnsprechpartner, type: "text"} as iInput)),
+                        m("label", {style: {flex: '1'}}, "Telefon",
+                            m(Input, {name: "telefon", value: currentLog.telefon, type: "tel"} as iInput))
+                    ),
                     m("label", "Notiz", m(Textarea, {name: "notiz", value: currentLog.notiz, rows: 4} as iTextarea)),
                     m("label", "Wiedervorlage Datum", m(Input, {name: "wiedervorlageDatum", value: currentLog.wiedervorlageDatum, type: "date"} as iInput)),
                     m("label", m(Input, {name: "erledigt", type: "checkbox", value: currentLog.erledigt} as iInput), "Erledigt")