kbcrm/Client/index.ts

import m from "mithril"
import {gridMountpoints, maingrid} from "./Components/mainlayout"
import {header, menubar, init_menustack, get_menustack, headerdata} from "./Components/header"
import { appmanagementpage } from "./Components/auth/appmanagementpage"
import { changepasswordscreen, loginscreen } from "./Components/auth/login"
import {kunde, kundenliste} from "./Components/kunde"
import { Projekt, projektliste } from "./Components/projekt"
import { projektuserliste } from "./Components/projekt_userliste"
import { userprojektliste } from "./Components/user_projektliste"
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"
import { TagesWorkflowListe, TagesWorkflowMaske } from "./Components/tages_workflow"
import { guardedNavigate } from "./Components/widgets/dirtyguard"


function healthcheck () {
    m.request({
        method: "GET",
        url: "/xhr/health-check"})
        .then((result) => {
            data.success = result['result']
            data.time = result['time']
            data.server = result['server']
            data.projectname = result["projectname"]
            data.clientappversion = result["clientappversion"]
        })
    return
}

function getClientappversion(): void {
    //let version:string = document.querySelector('meta[name="clientappversion"]')['content']
    const meta = document.querySelector<HTMLMetaElement>('meta[name="clientappversion"]');
    const version = meta?.content ?? ''; // leerer String als Fallback
    console.log(version)
    headerdata.version = version
}

function check_currentuser (): boolean {
    let result = true
    const cu = sessionStorage.getItem("CurrentUser")
    if (cu != null) {
        headerdata.username = cu 
    }
    else {
        result = false
    }
    return result
}

let data = {
    success: "n/a",
    time: "n/a",
    server: "n/a",
    projectname: "n/a",
    clientappversion: "n/a"
}

function logout() {
    m.request({
        method: "GET",
        url: "/auth/logout"
    })
    .then((result) => {
        console.log(result)
        sessionStorage.removeItem("CurrentUser");
        sessionStorage.removeItem("CurrentUserIsSysAdmin");
        sessionStorage.removeItem("CurrentUserIsAppAdmin");
        headerdata.username = "Nicht angemeldet"
        if (result['logout'] == true) {m.route.set("/blankpage")} 
    })
    .finally(() => {
        setTimeout(() => { location.href = "/index.html" }, 1000)
    })
}

const hello: m.Component = {
    oninit: (vnode) => {
        healthcheck()
    },
    view: (vnode) => {
        return m("div", 
            m("h1", "Health-Check Python App-Server"), 
            m(hello2),
            m(knopf)
        )
    } 
}

const loggedout: m.Component = {
    view: () => {
        return m("h1", {
            style: {
                display: "flex",
                justifyContent: "center",
                alignItems: "center",
                height: "100%"
            }
        }, "Sie sind nicht mehr angemeldet!")
    }
}

const hello2: m.Component = {
    view: (vnode) => {
        return m("ul", 
            m("li", "Result: " + data.success),
            m("li", data.time),
            m("li", data.server),
            m("li", data.projectname),
            m("li", data.clientappversion),
        )
    }
}

const knopf: m.Component = {
    view: (vnode) => {
        return m("button", {onclick: healthcheck}, "Aktualisieren")
    }
}
const menu: m.ClosureComponent = () => {
    let showProjektBerechtigungen = false
    // Menü-Eintrag, der die Navigation über den Dirty-Guard leitet, so dass
    // aus einer Bearbeitungsmaske heraus ungespeicherte Änderungen abgefragt
    // werden, bevor die Ansicht wechselt.
    const menuItem = (route: string, label: string) => {
        return m("a.w3-button.w3-bar-item",
            {href: "#", onclick: (e: Event) => {e.preventDefault(); guardedNavigate(route, undefined, e)}},
            label)
    }
    return {
        oninit: (vnode) => {
            showProjektBerechtigungen = false
        },
        view: (vnode) => {
            return m(menubar, [
                menuItem("/tagesworkflow", "Tages-Workflow"),
                menuItem("/kundenliste", "Kunden"),
                menuItem("/projektliste", "Projekte"),
                menuItem("/calllogliste", "Gesprächsnotizen"),
                m("div.w3-dropdown-hover",
                    m("button.w3-button", "Optionen"),
                    m("div.w3-dropdown-content.w3-bar-block.w3-card-4",
                        menuItem("/taglist", "Tags"),
                        menuItem("/default", "Datenexport"),
                        menuItem("/default", "Datenimport"),
                        // Projekt-Berechtigungen nur für SysAdmin/AppAdmin sichtbar.
                        // Als Toggle-Button realisiert, da verschachtelte w3-dropdown-hover
                        // innerhalb eines offenen Dropdowns nicht zuverlässig funktionieren.
                        (sessionStorage.getItem("CurrentUserIsSysAdmin") || sessionStorage.getItem("CurrentUserIsAppAdmin"))
                            ? [
                                m("button.w3-button.w3-bar-item",
                                    {
                                        onclick: () => {showProjektBerechtigungen = !showProjektBerechtigungen}
                                    },
                                    m("span", showProjektBerechtigungen ? "Projekt-Berechtigungen \u25B2" : "Projekt-Berechtigungen \u25BC")
                                ),
                                showProjektBerechtigungen
                                    ? m("div.w3-bar-block",
                                        m("a.w3-button.w3-bar-item",
                                            {href: "#", style: {'padding-left': '32px'}, onclick: (e: Event) => {e.preventDefault(); guardedNavigate("/projektuserliste", undefined, e)}},
                                            "Projekt-Zugriffe"),
                                        m("a.w3-button.w3-bar-item",
                                            {href: "#", style: {'padding-left': '32px'}, onclick: (e: Event) => {e.preventDefault(); guardedNavigate("/userprojektliste", undefined, e)}},
                                            "Nutzer-Zugriffe")
                                    )
                                    : null
                            ]
                            : null,
                    )
                ),
                m("div.w3-button.w3-right", {onclick: logout}, "Logout"),
                m("div.w3-dropdown-hover.w3-right",
                    m("button.w3-button", "System"),
                    m("div.w3-dropdown-content.w3-bar-block.w3-card-4",
                        menuItem("/login", "Login"),
                        menuItem("/changepassword", "Kennwort ändern"),
                        menuItem("/usermanagement", "Verwalten"),
                    )
                )
            ])
        }
    }
}

let mountpoint = document.getElementById("body")

m.mount(mountpoint, maingrid)
m.mount(gridMountpoints.header, header)
m.mount(gridMountpoints.main, hello)

init_menustack(gridMountpoints.menubar)
get_menustack().push(menu)

getClientappversion()

if (check_currentuser() == false) {
    m.route.set("/login")
}

m.route(gridMountpoints.main, "/kundenliste", {
    "/blankpage": loggedout,
    "/usermanagement": appmanagementpage,
    "/changepassword": changepasswordscreen,
    "/login": loginscreen,
    "/kundenliste": kundenliste,
    "/kunde": kunde,
    "/projektliste": projektliste,
    "/projekt": Projekt,
    "/projektuserliste": projektuserliste,
    "/userprojektliste": userprojektliste,
    "/calllogliste": call_log_liste,
    "/call_log": Call_Log,
    "/kontaktliste": kontaktliste,
    "/kontakt": Kontakt,
    "/kontaktadresseliste": kontaktadresseliste,
    "/kontaktadresse": Kontaktadresse,
    "/taglist": TagList,
    "/tag": Tag,
    "/tagesworkflow": TagesWorkflowListe,
    "/tagesworkflowkontakt": TagesWorkflowMaske

})