@olenbetong/appframe-core 2.6.0 → 2.7.0

package/es/alert.js

@@ -0,0 +1,81 @@
+import { getLocalizedString } from "./getLocalizedString.js";
+const template = `
+	<dialog class="alert-dialog">
+			<form method="dialog">
+					<article></article>
+					<footer>
+							<menu></menu>
+					</footer>
+			</form>
+	</dialog>
+`;
+if (globalThis.document && !document.querySelector("#AlertDialogTemplate")) {
+    let $template = document.createElement("template");
+    $template.id = "AlertDialogTemplate";
+    $template.innerHTML = template;
+    document.body.append($template);
+}
+export function waitForDialog(dialog) {
+    return new Promise((resolve) => {
+        dialog.addEventListener("close", resolve, { once: true });
+    });
+}
+export async function openAlertDialog({ buttons, content, className }) {
+    let $template = document.querySelector("#AlertDialogTemplate");
+    if (!$template)
+        throw Error("No alert dialog template found");
+    let $dialog = $template.content.firstElementChild?.cloneNode(true);
+    let $content = $dialog?.querySelector("article");
+    let $menu = $dialog?.querySelector("footer menu");
+    console.log({ $dialog, $content, $menu });
+    if (!$dialog || !$content || !$menu)
+        throw Error("Invalid alert dialog template");
+    if (className) {
+        $dialog.classList.add(className);
+    }
+    $content.appendChild(typeof content === "string" ? document.createTextNode(content) : content);
+    for (let { label, value, primary } of buttons) {
+        let listItem = document.createElement("li");
+        let buttonElem = document.createElement("button");
+        buttonElem.value = value;
+        if (primary) {
+            buttonElem.classList.add("primary");
+        }
+        buttonElem.textContent = label;
+        listItem.appendChild(buttonElem);
+        $menu.appendChild(buttonElem);
+    }
+    document.body.appendChild($dialog);
+    $dialog.showModal();
+    await waitForDialog($dialog);
+    let result = $dialog.returnValue || "cancel";
+    document.body.removeChild($dialog);
+    return result;
+}
+export var ConfirmButtons;
+(function (ConfirmButtons) {
+    ConfirmButtons[ConfirmButtons["YesNo"] = 0] = "YesNo";
+    ConfirmButtons[ConfirmButtons["OkCancel"] = 1] = "OkCancel";
+})(ConfirmButtons || (ConfirmButtons = {}));
+export async function confirm(prompt, button = ConfirmButtons.YesNo) {
+    let buttons = [
+        { label: getLocalizedString("No"), value: "no" },
+        { label: getLocalizedString("Yes"), value: "yes", primary: true },
+    ];
+    console.log(button);
+    if (button == ConfirmButtons.OkCancel) {
+        buttons = [
+            { label: getLocalizedString("Cancel"), value: "no" },
+            { label: getLocalizedString("OK"), value: "yes", primary: true },
+        ];
+    }
+    let result = await openAlertDialog({ content: prompt, buttons });
+    return result === "yes";
+}
+export async function alert(prompt) {
+    await openAlertDialog({
+        content: prompt,
+        className: "alert",
+        buttons: [{ label: getLocalizedString("OK"), value: "ok", primary: true }],
+    });
+}

package/es/index.d.ts

@@ -3,7 +3,7 @@ import "./errorHandler.js";
 import { expose } from "./expose.js";
 import { getLocalizedString } from "./getLocalizedString.js";
 import { localize } from "./localize.js";
-import { logActivity } from "./logActivity.js";
+import { logActivity, startActivity } from "./logActivity.js";
 export { default as mitt } from "mitt";
 export { toLocalISODate, toLocalISODateTime } from "./date.js";
 export { downloadBlob } from "./downloadBlob.js";
@@ -17,10 +17,12 @@ export { has } from "./has.js";
 export { invariant } from "./invariant.js";
 export { localize } from "./localize.js";
 export { default as localStorage } from "./localStorage.js";
-export { logActivity } from "./logActivity.js";
+export { logActivity, startActivity } from "./logActivity.js";
 export { default as SessionHandler } from "./SessionHandler.js";
 export { UserSession };
 export { getSettings, saveSettings } from "./settings.js";
+export { alert, confirm, ConfirmButtons, openAlertDialog, waitForDialog } from "./alert.js";
+export type { AlertDialogButton, AlertDialogOptions } from "./alert.js";
 export declare const version: string;
 declare global {
     var __VERSION__: string;
@@ -42,6 +44,7 @@ export interface AfCore {
         expose: typeof expose;
         localize: typeof localize;
         logActivity: typeof logActivity;
+        startActivity: typeof startActivity;
     };
     controls?: {
         alert?: (message: string, callback?: () => void) => void;

package/es/index.js

@@ -11,8 +11,9 @@ export { has } from "./has.js";
 export { invariant } from "./invariant.js";
 export { localize } from "./localize.js";
 export { default as localStorage } from "./localStorage.js";
-export { logActivity } from "./logActivity.js";
+export { logActivity, startActivity } from "./logActivity.js";
 export { default as SessionHandler } from "./SessionHandler.js";
 export { UserSession };
 export { getSettings, saveSettings } from "./settings.js";
-export const version = "2.6.0";
+export { alert, confirm, ConfirmButtons, openAlertDialog, waitForDialog } from "./alert.js";
+export const version = "2.7.0";

package/es/logActivity.d.ts

@@ -1 +1,17 @@
-export declare function logActivity(action: string, parameters: Record<string, any>, timeElapsed: number): Promise<void>;
+/**
+ * Logs an activity to the website activity log
+ *
+ * @param activity name of the activity we are logging
+ * @param parameters A dictionary of parameters used when doing the activity
+ * @param timeElapsed Number of milliseconds elapsed while executing
+ */
+export declare function logActivity(activity: string, parameters: Record<string, any>, timeElapsed?: number): Promise<void>;
+/**
+ * Records the current time, and returns a function that logs the activity with the
+ * time elapsed when it is called.
+ *
+ * @param activity  Name of the activity we are logging
+ * @param parameters A dictionary of parameters used when doing the activity
+ * @returns A function that should be called when the activity is completed to log it to the website log
+ */
+export declare function startActivity(activity: string, parameters: Record<string, any>): () => Promise<void>;

package/es/logActivity.js

@@ -1,11 +1,18 @@
-export async function logActivity(action, parameters, timeElapsed) {
+/**
+ * Logs an activity to the website activity log
+ *
+ * @param activity name of the activity we are logging
+ * @param parameters A dictionary of parameters used when doing the activity
+ * @param timeElapsed Number of milliseconds elapsed while executing
+ */
+export async function logActivity(activity, parameters, timeElapsed = 0) {
     try {
         let response = await fetch("/api/logging/log-activity", {
             method: "POST",
             body: JSON.stringify({
                 article: af.article.id,
                 timeElapsed,
-                action,
+                action: activity,
                 parameters,
             }),
             headers: { "Content-Type": "application/json", Accept: "application/json" },
@@ -22,3 +29,15 @@ export async function logActivity(action, parameters, timeElapsed) {
     }
     catch (error) { }
 }
+/**
+ * Records the current time, and returns a function that logs the activity with the
+ * time elapsed when it is called.
+ *
+ * @param activity  Name of the activity we are logging
+ * @param parameters A dictionary of parameters used when doing the activity
+ * @returns A function that should be called when the activity is completed to log it to the website log
+ */
+export function startActivity(activity, parameters) {
+    let start = performance.now();
+    return () => logActivity(activity, parameters, performance.now() - start);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@olenbetong/appframe-core",
-	"version": "2.6.0",
+	"version": "2.7.0",
 	"description": "Javascript libraries to utilize the Appframe framework",
 	"type": "module",
 	"sideEffects": [
@@ -48,5 +48,5 @@
 	"devDependencies": {
 		"chalk": "^5.1.2"
 	},
-	"gitHead": "49054954b937cf12215f72bda93dc2acd3c89846"
+	"gitHead": "33c7f963b43ac6c4993b1da34d5761663e4c1546"
 }

package/src/alert.ts

@@ -0,0 +1,106 @@
+import { getLocalizedString } from "./getLocalizedString.js";
+
+const template = `
+	<dialog class="alert-dialog">
+			<form method="dialog">
+					<article></article>
+					<footer>
+							<menu></menu>
+					</footer>
+			</form>
+	</dialog>
+`;
+
+if (globalThis.document && !document.querySelector("#AlertDialogTemplate")) {
+	let $template = document.createElement("template");
+	$template.id = "AlertDialogTemplate";
+	$template.innerHTML = template;
+	document.body.append($template);
+}
+
+export function waitForDialog(dialog: HTMLDialogElement) {
+	return new Promise((resolve) => {
+		dialog.addEventListener("close", resolve, { once: true });
+	});
+}
+
+export type AlertDialogButton = {
+	label: string;
+	value: string;
+	primary?: boolean;
+};
+
+export type AlertDialogOptions = {
+	buttons: AlertDialogButton[];
+	content: string | HTMLElement;
+	className?: string;
+};
+
+export async function openAlertDialog({ buttons, content, className }: AlertDialogOptions) {
+	let $template = document.querySelector<HTMLTemplateElement>("#AlertDialogTemplate");
+	if (!$template) throw Error("No alert dialog template found");
+
+	let $dialog = $template.content.firstElementChild?.cloneNode(true) as HTMLDialogElement | null;
+	let $content = $dialog?.querySelector("article");
+	let $menu = $dialog?.querySelector("footer menu");
+	console.log({ $dialog, $content, $menu });
+	if (!$dialog || !$content || !$menu) throw Error("Invalid alert dialog template");
+
+	if (className) {
+		$dialog.classList.add(className);
+	}
+
+	$content.appendChild(typeof content === "string" ? document.createTextNode(content) : content);
+	for (let { label, value, primary } of buttons) {
+		let listItem = document.createElement("li");
+		let buttonElem = document.createElement("button");
+		buttonElem.value = value;
+		if (primary) {
+			buttonElem.classList.add("primary");
+		}
+		buttonElem.textContent = label;
+		listItem.appendChild(buttonElem);
+		$menu.appendChild(buttonElem);
+	}
+
+	document.body.appendChild($dialog);
+	$dialog.showModal();
+
+	await waitForDialog($dialog);
+	let result = $dialog.returnValue || "cancel";
+	document.body.removeChild($dialog);
+
+	return result;
+}
+
+export enum ConfirmButtons {
+	YesNo,
+	OkCancel,
+}
+
+export async function confirm(prompt: string, button: ConfirmButtons = ConfirmButtons.YesNo): Promise<boolean> {
+	let buttons: AlertDialogButton[] = [
+		{ label: getLocalizedString("No"), value: "no" },
+		{ label: getLocalizedString("Yes"), value: "yes", primary: true },
+	];
+
+	console.log(button);
+
+	if (button == ConfirmButtons.OkCancel) {
+		buttons = [
+			{ label: getLocalizedString("Cancel"), value: "no" },
+			{ label: getLocalizedString("OK"), value: "yes", primary: true },
+		];
+	}
+
+	let result = await openAlertDialog({ content: prompt, buttons });
+	return result === "yes";
+}
+
+export async function alert(prompt: string): Promise<void> {
+	await openAlertDialog({
+		content: prompt,
+		className: "alert",
+		buttons: [{ label: getLocalizedString("OK"), value: "ok", primary: true }],
+	});
+}

package/src/index.ts

@@ -3,7 +3,7 @@ import "./errorHandler.js";
 import { expose } from "./expose.js";
 import { getLocalizedString } from "./getLocalizedString.js";
 import { localize } from "./localize.js";
-import { logActivity } from "./logActivity.js";
+import { logActivity, startActivity } from "./logActivity.js";
 
 export { default as mitt } from "mitt";
 export { toLocalISODate, toLocalISODateTime } from "./date.js";
@@ -18,10 +18,12 @@ export { has } from "./has.js";
 export { invariant } from "./invariant.js";
 export { localize } from "./localize.js";
 export { default as localStorage } from "./localStorage.js";
-export { logActivity } from "./logActivity.js";
+export { logActivity, startActivity } from "./logActivity.js";
 export { default as SessionHandler } from "./SessionHandler.js";
 export { UserSession };
 export { getSettings, saveSettings } from "./settings.js";
+export { alert, confirm, ConfirmButtons, openAlertDialog, waitForDialog } from "./alert.js";
+export type { AlertDialogButton, AlertDialogOptions } from "./alert.js";
 
 export const version = __VERSION__;
 
@@ -48,6 +50,7 @@ export interface AfCore {
 		expose: typeof expose;
 		localize: typeof localize;
 		logActivity: typeof logActivity;
+		startActivity: typeof startActivity;
 	};
 	controls?: {
 		alert?: (message: string, callback?: () => void) => void;

package/src/logActivity.ts

@@ -1,11 +1,18 @@
-export async function logActivity(action: string, parameters: Record<string, any>, timeElapsed: number) {
+/**
+ * Logs an activity to the website activity log
+ *
+ * @param activity name of the activity we are logging
+ * @param parameters A dictionary of parameters used when doing the activity
+ * @param timeElapsed Number of milliseconds elapsed while executing
+ */
+export async function logActivity(activity: string, parameters: Record<string, any>, timeElapsed: number = 0) {
 	try {
 		let response = await fetch("/api/logging/log-activity", {
 			method: "POST",
 			body: JSON.stringify({
 				article: af.article.id,
 				timeElapsed,
-				action,
+				action: activity,
 				parameters,
 			}),
 			headers: { "Content-Type": "application/json", Accept: "application/json" },
@@ -21,3 +28,16 @@ export async function logActivity(action: string, parameters: Record<string, any
 		}
 	} catch (error) {}
 }
+
+/**
+ * Records the current time, and returns a function that logs the activity with the
+ * time elapsed when it is called.
+ *
+ * @param activity  Name of the activity we are logging
+ * @param parameters A dictionary of parameters used when doing the activity
+ * @returns A function that should be called when the activity is completed to log it to the website log
+ */
+export function startActivity(activity: string, parameters: Record<string, any>) {
+	let start = performance.now();
+	return () => logActivity(activity, parameters, performance.now() - start);
+}