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/Modal.ts

@@ -0,0 +1,71 @@
+import m from "mithril"
+import {BaseView} from "./base"
+
+export enum ModalType {
+    'MESSAGE',
+    'ERROR'
+}
+
+export interface iModalView {
+    title: string
+    subtitle: string
+    topposition: string
+    width: string
+    type: ModalType
+}
+export class ModalView extends BaseView implements iModalView{
+    title:string
+    subtitle:string
+    topposition:string
+    width:string
+    type:ModalType
+    
+    constructor (vnode) {
+        super()
+        this.title = super.getattr(vnode, "title", "Modal")
+        this.subtitle = super.getattr(vnode, "subtitle", "")
+        this.topposition = super.getattr(vnode, "topposition", "10%")
+        this.width = super.getattr(vnode, "width", 'max-content')
+        this.type = super.getattr(vnode, 'type', ModalType.MESSAGE)
+    }
+    view (vnode) {
+        return m("div.w3-modal", {style: {display:'block'}}, 
+            m("div.w3-modal-content.w3-card-4", {style: {width: this.width, top: this.topposition}},
+                [
+                    m(modalHeader, {type: this.type},
+                        [
+                            m(title, this.title), 
+                            (this.subtitle ? m(subtitle, this.subtitle) : null)
+                        ]
+                    ), 
+                    m(modalContent, vnode.children)
+                ]
+            )
+        )
+    }
+}
+
+const title = {
+    view: (vnode) => {
+        return m("h1", vnode.children)
+    }
+}
+const subtitle = {
+    view: (vnode) => {
+        return m("h3", vnode.children)
+    }
+}
+const modalHeader = {
+    view: (vnode) => {
+        let color = ".w3-theme"
+        if (vnode.attrs["type"] == ModalType.ERROR) {
+            color = ".w3-red"
+        }
+        return m("header.w3-container" + color, vnode.children)
+    }
+}
+const modalContent = {
+    view: (vnode) => {
+        return m("div.w3-container.w3-theme-l1", vnode.children)
+    }
+}