src -> adminPanel

adminPanel/src/elements/alert.js

@@ -0,0 +1,25 @@
+import Icon from "./icon";
+import React from "react";
+
+export default function Alert(props) {
+
+    const onClose = props.onClose || null;
+    const title = props.title || "Untitled Alert";
+    const message = props.message || "Alert message";
+    const type = props.type || "danger";
+
+    let icon = "ban";
+    if (type === "warning") {
+        icon = "exclamation-triangle";
+    } else if(type === "success") {
+        icon = "check";
+    }
+
+    return (
+        <div className={"alert alert-" + type + " alert-dismissible"}>
+            {onClose ? <button type="button" className={"close"} data-dismiss={"alert"} aria-hidden={"true"} onClick={onClose}>×</button> : null}
+            <h5><Icon icon={icon} className={"icon"} /> {title}</h5>
+            {message}
+        </div>
+    )
+}

adminPanel/src/elements/dialog.js

@@ -0,0 +1,45 @@
+import React from "react";
+
+export default function Dialog(props) {
+
+    const show = props.show;
+    const classes = "modal fade" + (show ? " show" : "");
+    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={classes} id="modal-default" 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>
+    );
+}

adminPanel/src/elements/icon.js

@@ -0,0 +1,24 @@
+import * as React from "react";
+
+export default function Icon(props) {
+
+    let classes = props.className || [];
+    classes = Array.isArray(classes) ? classes : classes.toString().split(" ");
+    let type = props.type || "fas";
+    let icon = props.icon;
+
+    classes.push(type);
+    classes.push("fa-" + icon);
+
+    if (icon === "spinner" || icon === "circle-notch") {
+        classes.push("fa-spin");
+    }
+
+    let newProps = {...props, className: classes.join(" ") };
+    delete newProps["type"];
+    delete newProps["icon"];
+
+    return (
+        <i {...newProps} />
+    );
+}