Initial Commit für das Grundgerüst der Anwendung, bestehend aus der Dev-Container Konfiguration, der Docker und docker-Compose Definitionen sowie der Verzeichnisse App_Server für die Backend-Programme sowie Client für die browserseitigen GUI-Komponenten

Client/Components/widgets/inputs.ts

@@ -0,0 +1,127 @@
+import m from "mithril"
+
+/**
+ * Der Vnode der Komponente 'Input' akzeptiert die folgenden Parameter:
+ *  @property {string} name - Der Name des Feldes 
+ *  @property {any} value - der darzustellende Wert
+ *  @property {string} type (optional) - der Type des Input Felds. Möglich sind alle Type des HTML-Elements 'Input'
+ *  @property {string|number} width (optional) - die Breite des Input Felds. Möglich sind alle Längeneinheiten, die bom Width-Attribut möglich sind
+ *  @property {number} min (optional) - 
+ *  @property {number} max (optional) - 
+ *  @property {number} step (optional) - 
+ *  @property {boolean} autofocus (optional) - 
+ */
+export interface iInput {
+    name: string
+    value: any
+    type?: string
+    width?: string
+    min?: number
+    max?: number
+    step?: number
+    autofocus?: boolean
+    readonly?: boolean
+    required?:boolean
+    onchanged?: Function
+}
+/**
+ * Diese Komponente stellt ein Html-Input Element dar. Der darzustellende Wert wird einfach mit dem Attribut
+ * 'value' übergeben. Der eingegebene Wert muss dann später explizit aus Value abgefragt werden. Es findet also kein
+ * sutomatisches Binding statt.
+ */
+export const Input:m.Component<iInput> = {
+    onupdate: (vnode) => {
+        if (vnode.attrs.autofocus != undefined && vnode.attrs.autofocus == true) {
+            let e: HTMLElement = vnode.dom as HTMLElement
+            e.focus()
+        }
+    },
+    view: (vnode) => {
+        let attributes = {}
+        let width:number|string = '100%'
+        attributes['name'] = vnode.attrs.name
+        attributes['type'] = vnode.attrs.type == undefined ? 'text' : vnode.attrs.type
+        if (attributes['type'] == 'number') {
+            if (vnode.attrs.min != undefined) {
+                attributes['min'] = vnode.attrs.min
+            }
+            if (vnode.attrs.max != undefined) {
+                attributes['max'] = vnode.attrs.max
+            }
+            if (vnode.attrs.step != undefined) {
+                attributes['step'] = vnode.attrs.step
+            }
+        }
+        if (attributes['type'] == 'date') {
+            attributes['value'] = toDateInputValue(vnode.attrs.value)
+        }
+        else {
+            attributes['value'] = vnode.attrs.value
+        }
+        if (vnode.attrs.required != undefined && vnode.attrs.required == true) {
+            attributes['required'] = vnode.attrs.required
+        }
+        if (vnode.attrs.readonly != undefined && vnode.attrs.readonly == true) {
+            attributes['readonly'] = "true"
+        }
+        if (vnode.attrs.width != undefined) {
+            width = vnode.attrs.width
+        }
+        attributes['style'] = {'margin-bottom': '5px', 'width': width}
+        if (vnode.attrs.onchanged != undefined) {
+            attributes['onchange'] = vnode.attrs.onchanged
+        }
+        
+        
+        return m("input.w3-input.w3-border", attributes)
+    }
+}
+
+export interface iTextarea {
+    name: string
+    value: any
+    cols?: number
+    rows?: number
+    autofocus?: boolean
+    readonly?: boolean
+}
+
+/**
+ * Diese Komponente stellt ein Html-Textarea Element dar. Der darzustellende Wert wird einfach mit dem Attribut
+ * 'value' übergeben. Der eingegebene Wert muss dann später explizit aus Value abgefragt werden. Es findet also kein
+ * automatisches Binding statt.
+ */
+export const Textarea:m.Component<iTextarea> = {
+    onupdate: (vnode) => {
+        if (vnode.attrs.autofocus != undefined && vnode.attrs.autofocus == true) {
+            let e: HTMLElement = vnode.dom as HTMLElement
+            e.focus()
+        }
+    },
+    view: (vnode) => {
+        let attributes = {}
+        attributes['name'] = vnode.attrs.name
+        attributes['value'] = vnode.attrs.value
+        if (vnode.attrs.cols != undefined) {
+            attributes['cols'] = vnode.attrs.cols
+        }
+        if (vnode.attrs.rows != undefined) {
+            attributes['rows'] = vnode.attrs.rows
+        }
+        if (vnode.attrs.readonly != undefined && vnode.attrs.readonly == true) {
+            attributes['readonly'] = vnode.attrs.readonly
+        }
+        attributes['style'] = {'margin-bottom': '5px', "width": '100%'}
+        
+        return m("textarea.w3-input.w3-border.w3-mobile", attributes)
+    }
+}
+
+export function toDateInputValue(date: Date): string {
+    console.log(date, typeof(date), (date instanceof Date))
+    let result: string = null
+    if (date instanceof Date && date != null) {
+        result = [date.getFullYear(), (date.getMonth() + 1).toString().padStart(2, "0"), date.getDate().toString().padStart(2, "0")].join("-")
+    }
+    return result
+}