frontend update

react/shared/elements/data-table.js

@@ -8,6 +8,7 @@ import "./data-table.css";
 import {LocaleContext} from "../locale";
 import clsx from "clsx";
 import {Box} from "@mui/material";
+import {formatDate} from "../util";
 
 
 export function DataTable(props) {
@@ -86,7 +87,7 @@ export function DataTable(props) {
         for (const [key, entry] of Object.entries(data)) {
             let row = [];
             for (const [index, column] of columns.entries()) {
-                row.push(<TableCell key={"col-" + index}>{column.renderData(entry)}</TableCell>);
+                row.push(<TableCell key={"col-" + index}>{column.renderData(L, entry)}</TableCell>);
             }
 
             rows.push(<TableRow key={"row-" + key}>{ row }</TableRow>);
@@ -269,7 +270,7 @@ export class DataColumn {
         throw new Error("Not implemented: compare");
     }
 
-    renderData(entry) {
+    renderData(L, entry) {
         return entry[this.field]
     }
 
@@ -320,4 +321,8 @@ export class DateTimeColumn extends DataColumn {
 
         return a - b;
     }
+
+    renderData(L, entry) {
+        return formatDate(L, super.renderData(L, entry));
+    }
 }

react/shared/elements/dialog.jsx

@@ -0,0 +1,47 @@
+import React from "react";
+import clsx from "clsx";
+
+export default function Dialog(props) {
+
+    const show = props.show;
+    const classes = ["modal", "fade"];
+    const style = { paddingRight: "12px", display: (show ? "block" : "none") };
+    const onClose = props.onClose || function() { };
+    const onOption = props.onOption || function() { };
+    const options = props.options || ["Close"];
+
+    let buttons = [];
+    for (let name of options) {
+        let type = "default";
+        if (name === "Yes") type = "warning";
+        else if(name === "No") type = "danger";
+
+        buttons.push(
+            <button type="button" key={"button-" + name} className={"btn btn-" + type}
+                    data-dismiss={"modal"} onClick={() => { onClose(); onOption(name); }}>
+                {name}
+            </button>
+        )
+    }
+
+    return (
+        <div className={clsx(classes, show && "show")} style={style} aria-modal={"true"} onClick={() => onClose()}>
+            <div className="modal-dialog" onClick={(e) => e.stopPropagation()}>
+                <div className="modal-content">
+                    <div className="modal-header">
+                        <h4 className="modal-title">{props.title}</h4>
+                        <button type="button" className="close" data-dismiss="modal" aria-label="Close" onClick={() => onClose()}>
+                            <span aria-hidden="true">×</span>
+                        </button>
+                    </div>
+                    <div className="modal-body">
+                        <p>{props.message}</p>
+                    </div>
+                    <div className="modal-footer">
+                        { buttons }
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+}

react/shared/elements/language-selection.js

@@ -0,0 +1,52 @@
+import React, {useCallback, useContext, useState} from 'react';
+import {Box} from "@material-ui/core";
+import {makeStyles} from "@material-ui/core/styles";
+import {LocaleContext} from "shared/locale";
+
+const useStyles = makeStyles((theme) => ({
+    languageFlag: {
+        margin: theme.spacing(0.2),
+        cursor: "pointer",
+        border: 0,
+    }
+}));
+
+export default function LanguageSelection(props) {
+
+    const api = props.api;
+    const classes = useStyles();
+    const [languages, setLanguages] = useState(null);
+    const {translate: L, setLanguageByCode} = useContext(LocaleContext);
+
+    const onSetLanguage = useCallback((code) => {
+        setLanguageByCode(api, code).then((res) => {
+            if (!res.success) {
+                alert(res.msg);
+            }
+        });
+    }, []);
+
+    let flags = [];
+    if (languages === null) {
+        api.getLanguages().then((res) => {
+            if (res.success) {
+                setLanguages(res.languages);
+            } else {
+                setLanguages({});
+                alert(res.msg);
+            }
+        });
+    } else {
+        for (const language of Object.values(languages)) {
+            let key = `lang-${language.code}`;
+            flags.push(<button type={"button"} title={language.name} onClick={() => onSetLanguage(language.code)}
+                               key={key} className={classes.languageFlag} >
+                <img alt={key} src={`/img/icons/lang/${language.code}.gif`} />
+            </button>);
+        }
+    }
+
+    return <Box mt={1}>
+        {L("general.language") + ": "} { flags }
+    </Box>
+}