@adcops/autocore-react 3.0.14 → 3.0.15

package/dist/components/FileList.d.ts

@@ -0,0 +1,38 @@
+/** @file FileList
+ * FileList allows a user to view the contents of a DataStore in the autocore-server.
+ * Files can be downloaded, deleted and optionally uploaded (if enabled).
+ *
+ * The FileList requires the autocore-server to be the backend, as files are transferred
+ * using specific commands via websockets.
+ */
+import React from 'react';
+/**
+ * Defines properties for the file list.
+ */
+type FileListProps = {
+    domain?: string;
+    enableUpload?: boolean;
+};
+/**
+ * `FileList` is a React functional component that displays a list of files retrieved from a specified domain
+ * in an autocore-server.
+ * It allows users to download and delete files. The component also supports file uploads, if enabled.
+ *
+ * The component uses the `EventEmitterContext` to make API calls to a backend to list, download, and delete files.
+ * It dynamically handles file operations based on the `domain` prop which determines the API endpoints for these actions.
+ *
+ * Props:
+ * - `domain` (string): The domain name assigned to the DATASTORE servelet containing the data.
+ *      Default: "DATASTORE"
+ * - `enableUpload` (boolean): If true, enables an upload button allowing files to be uploaded to the datastore.
+ *      Default: false
+ *
+ * Example Usage:
+ * ```tsx
+ * <FileList domain="MyDomain" enableUpload={true} />
+ * ```
+ *
+ * @param {FileListProps} props The properties passed to the component.
+ */
+export declare const FileList: React.FC<FileListProps>;
+export default FileList;

package/dist/components/FileList.js

@@ -0,0 +1 @@
+import{jsx as _jsx,jsxs as _jsxs,Fragment as _Fragment}from"react/jsx-runtime";import React,{useState,useContext,useEffect}from"react";import{DataTable}from"primereact/datatable";import{Column}from"primereact/column";import{Toolbar}from"primereact/toolbar";import{Button}from"primereact/button";import{ConfirmPopup,confirmPopup}from"primereact/confirmpopup";import{MessageSeverity}from"primereact/api";import{EventEmitterContext}from"../core/EventEmitterContext";export const FileList=({domain:e="DATASTORE",enableUpload:t=!1})=>{const{invoke:a,dispatch:o}=useContext(EventEmitterContext),[r,i]=useState(),s=async()=>{try{let t=await a(e,"list_files",{}),o=[];for(let e=0;e<t.data.length;++e){const a=t.data[e];o.push({id:e+1,name:a})}i(o)}catch(e){o({topic:"autocore-react/alert/error",payload:{message:`Failed to upload file list: ${e}`,timeoutSec:7,severity:MessageSeverity.ERROR}})}},n=`${e} File Listing`,l=_jsx(React.Fragment,{children:_jsx("span",{style:{fontWeight:600},children:n})}),m=_jsxs(React.Fragment,{children:[t&&_jsx(Button,{icon:"pi pi-upload",className:"p-button-rounded p-mr-2","aria-label":"Upload",size:"small",rounded:!0,text:!0}),_jsx(Button,{icon:"pi pi-refresh",onClick:()=>{s()},className:"p-button-rounded p-mr-2","aria-label":"Refresh",size:"small",rounded:!0,text:!0})]}),c=(t,r)=>{confirmPopup({target:r.currentTarget,message:`Are you want to delete file ${t.name}?\nWARNING: This cannot be undone.`,icon:"pi pi-info-circle",defaultFocus:"reject",acceptClassName:"p-button-danger",accept:()=>(async t=>{try{await a(e,"delete_file",{file_name:t})}catch(e){o({topic:"autocore-react/alert/error",payload:{message:`Failed deleting file: ${e}`,timeoutSec:7,severity:MessageSeverity.ERROR}})}s()})(t.name)})};return useEffect((()=>(s(),()=>{})),[e,t]),_jsxs("div",{children:[_jsx(Toolbar,{start:l,end:m,style:{padding:"1mm"}}),_jsx(ConfirmPopup,{}),_jsxs(DataTable,{value:r,children:[_jsx(Column,{field:"name",header:"Name"}),_jsx(Column,{body:t=>_jsxs(_Fragment,{children:[_jsx(Button,{icon:"pi pi-download",onClick:()=>(async t=>{try{await a(e,"download_file",{file_name:t.name})}catch(e){o({topic:"autocore-react/alert/error",payload:{message:`Failed to downloading file: ${e}`,timeoutSec:7,severity:MessageSeverity.ERROR}})}})(t),className:"p-button-rounded p-button-success p-mr-2",style:{marginRight:"2mm"},size:"small"}),_jsx(Button,{icon:"pi pi-trash",onClick:e=>c(t,e),className:"p-button-rounded p-button-danger",size:"small"})]}),header:"Actions"})]})]})};export default FileList;

package/dist/hub/HubWebSocket.d.ts

@@ -17,7 +17,17 @@ export declare class HubWebSocket extends HubBase {
     private socket;
     private requestId;
     private pendingRequests;
+    /**
+     * Constructor. Creates and attempts to make the Websocket connection.
+     */
     constructor();
+    /**
+     * Invoke a command in the remote webserver.
+     * @param domain The domain of the Servelet supplying the functionality.
+     * @param fname The name of the command to execute.
+     * @param payload The arguments of the command.
+     * @returns Promise<CommandMessageResult>
+     */
     invoke: (domain: string, fname: string, payload?: object) => Promise<CommandMessageResult>;
     handleUnsolicitedMessage: (msg: CommandMessage) => void;
     disconnect: () => void;

package/dist/hub/HubWebSocket.js

@@ -1 +1 @@
-import{HubBase}from"./HubBase";export class HubWebSocket extends HubBase{constructor(){super(),Object.defineProperty(this,"socket",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),Object.defineProperty(this,"requestId",{enumerable:!0,configurable:!0,writable:!0,value:0}),Object.defineProperty(this,"pendingRequests",{enumerable:!0,configurable:!0,writable:!0,value:new Map}),Object.defineProperty(this,"invoke",{enumerable:!0,configurable:!0,writable:!0,value:(e,t,s)=>new Promise(((i,r)=>{const n=++this.requestId;this.pendingRequests.set(n,{resolve:i,reject:r});let o={request_id:n,domain:e,fname:t,args:s,result:void 0};this.socket.send(JSON.stringify(o))}))}),Object.defineProperty(this,"handleUnsolicitedMessage",{enumerable:!0,configurable:!0,writable:!0,value:e=>{if("BROADCAST"===e.fname&&e.domain.length>=1&&void 0!==e.result&&null!==e.result&&void 0!==e.result.data&&null!==e.result.data){let t=`${e.domain}/${e.result.data.topic}`;this.publish(t,e.result.data)}}}),Object.defineProperty(this,"disconnect",{enumerable:!0,configurable:!0,writable:!0,value:()=>{this.socket.close()}}),Object.defineProperty(this,"emit",{enumerable:!0,configurable:!0,writable:!0,value:(e,t)=>{this.socket.send(JSON.stringify({eventName:e,payload:t}))}});const e=window.location.hostname,t=window.location.port,s=`${"https:"===window.location.protocol?"wss://":"ws://"}${e}${t?":"+t:""}/ws/`;this.socket=new WebSocket(s);let i=this;this.socket.onopen=function(){i.publish("HUB/connected",!0)},this.socket.onmessage=e=>{const t=JSON.parse(e.data);if(t.request_id&&this.pendingRequests.has(t.request_id)){const{resolve:e,reject:s}=this.pendingRequests.get(t.request_id);t.result?.success?e(t.result):s(new Error(t.result?.error_message)),this.pendingRequests.delete(t.request_id)}else this.handleUnsolicitedMessage(t)},this.socket.onerror=e=>{},this.socket.onclose=()=>{}}}
+import{HubBase}from"./HubBase";function b64toBlob(e,t="application/octet-stream",s=512){const n=atob(e),o=[];for(let e=0;e<n.length;e+=s){const t=n.slice(e,e+s),r=new Array(t.length);for(let e=0;e<t.length;e++)r[e]=t.charCodeAt(e);const i=new Uint8Array(r);o.push(i)}return new Blob(o,{type:t})}function downloadBlob(e,t){const s=window.URL.createObjectURL(e),n=document.createElement("a");n.href=s,n.download=t,document.body.appendChild(n),n.click(),document.body.removeChild(n),window.URL.revokeObjectURL(s)}export class HubWebSocket extends HubBase{constructor(){super(),Object.defineProperty(this,"socket",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),Object.defineProperty(this,"requestId",{enumerable:!0,configurable:!0,writable:!0,value:0}),Object.defineProperty(this,"pendingRequests",{enumerable:!0,configurable:!0,writable:!0,value:new Map}),Object.defineProperty(this,"invoke",{enumerable:!0,configurable:!0,writable:!0,value:(e,t,s)=>new Promise(((n,o)=>{const r=++this.requestId;this.pendingRequests.set(r,{resolve:n,reject:o});let i={request_id:r,domain:e,fname:t,args:s,result:void 0};this.socket.send(JSON.stringify(i))}))}),Object.defineProperty(this,"handleUnsolicitedMessage",{enumerable:!0,configurable:!0,writable:!0,value:e=>{if("BROADCAST"===e.fname&&e.domain.length>=1&&void 0!==e.result&&null!==e.result&&void 0!==e.result.data&&null!==e.result.data){let t=`${e.domain}/${e.result.data.topic}`;this.publish(t,e.result.data)}}}),Object.defineProperty(this,"disconnect",{enumerable:!0,configurable:!0,writable:!0,value:()=>{this.socket.close()}}),Object.defineProperty(this,"emit",{enumerable:!0,configurable:!0,writable:!0,value:(e,t)=>{this.socket.send(JSON.stringify({eventName:e,payload:t}))}});const e=window.location.hostname,t=window.location.port,s=`${"https:"===window.location.protocol?"wss://":"ws://"}${e}${t?":"+t:""}/ws/`;this.socket=new WebSocket(s);let n=this;this.socket.onopen=function(){n.publish("HUB/connected",!0)},this.socket.onmessage=e=>{const t=JSON.parse(e.data);if(t.request_id&&this.pendingRequests.has(t.request_id)){const{resolve:e,reject:s}=this.pendingRequests.get(t.request_id);if("FILE_DOWNLOAD"===t.fname&&void 0!==t.args.file_name&&null!==t.args.file_name&&t.args.file_name.length>0){let n=t.args.file_name.split("/");const o=n[n.length-1];if(t.result&&t.result.success){downloadBlob(b64toBlob(t.result.data),o),t.result.data=o,e(t.result)}else s(new Error(t.result?.error_message))}else t.result?.success?e(t.result):s(new Error(t.result?.error_message));this.pendingRequests.delete(t.request_id)}else this.handleUnsolicitedMessage(t)},this.socket.onerror=e=>{},this.socket.onclose=()=>{}}}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@adcops/autocore-react",
-    "version": "3.0.14",
+    "version": "3.0.15",
     "description": "A React component library for industrial user interfaces.",
     "private": false,
     "type": "module",

package/src/components/FileList.tsx

@@ -0,0 +1,245 @@
+/*
+ * Copyright (C) 2024 Automated Design Corp.. All Rights Reserved.
+ * Created Date: 2024-04-24 16:01:53
+ * -----
+ * Last Modified: 2024-04-25 06:40:11
+ * -----
+ * 
+ */
+
+/** @file FileList
+ * FileList allows a user to view the contents of a DataStore in the autocore-server.
+ * Files can be downloaded, deleted and optionally uploaded (if enabled).
+ * 
+ * The FileList requires the autocore-server to be the backend, as files are transferred
+ * using specific commands via websockets.
+ */
+
+import React, { useState, useContext, useEffect } from 'react';
+import { DataTable } from 'primereact/datatable';
+import { Column } from 'primereact/column';
+import { Toolbar } from 'primereact/toolbar';
+import { Button } from 'primereact/button';
+import { ConfirmPopup, confirmPopup } from 'primereact/confirmpopup';
+import { MessageSeverity } from 'primereact/api';
+
+import { EventEmitterContext } from '../core/EventEmitterContext';
+
+/**
+ * Defines properties for the file list.
+ */
+type FileListProps = {
+    /// The domain name assigned to the DATASTORE servelet containing the data.
+    /// Default: DATASTORE
+    domain?: string,
+    /// Enable the upload button so that files can be uploaded to the datastore.
+    /// Default: false
+    enableUpload?: boolean
+}
+
+/**
+ * Defines the information for every row item in the file list.
+ */
+type FileItem = {
+    id: number;
+    name: string;
+};
+
+
+/**
+ * `FileList` is a React functional component that displays a list of files retrieved from a specified domain
+ * in an autocore-server.
+ * It allows users to download and delete files. The component also supports file uploads, if enabled.
+ *
+ * The component uses the `EventEmitterContext` to make API calls to a backend to list, download, and delete files.
+ * It dynamically handles file operations based on the `domain` prop which determines the API endpoints for these actions.
+ *
+ * Props:
+ * - `domain` (string): The domain name assigned to the DATASTORE servelet containing the data.
+ *      Default: "DATASTORE"
+ * - `enableUpload` (boolean): If true, enables an upload button allowing files to be uploaded to the datastore.
+ *      Default: false
+ *
+ * Example Usage:
+ * ```tsx
+ * <FileList domain="MyDomain" enableUpload={true} />
+ * ```
+ *
+ * @param {FileListProps} props The properties passed to the component.
+ */
+export const FileList: React.FC<FileListProps> = ({
+    domain = "DATASTORE",
+    enableUpload = false
+}) => {
+
+    const { invoke, dispatch } = useContext(EventEmitterContext);
+
+    const [files, setFiles] = useState<FileItem[]>();
+
+    /**
+     * Retrieve a list of files from an autocore-server DataStoreServelet.
+     */
+    const listFiles = async () => {
+        try {
+            let res = await invoke(domain, "list_files", {});
+
+            let items = [];
+            for (let i = 0; i < res.data.length; ++i) {
+                const item = res.data[i];
+                items.push({
+                    id: i + 1,
+                    name: item
+                });
+            }
+
+            setFiles(items);
+        }
+        catch (error) {
+            console.error("Failed to upload file list: " + error);
+
+            dispatch({
+                topic: "autocore-react/alert/error",
+                payload: {
+                    message: `Failed to upload file list: ${error}`,
+                    timeoutSec: 7,
+                    severity: MessageSeverity.ERROR
+                }
+            });
+
+        }
+
+
+    }
+
+    /**
+     * Handles when the download button is clicked on a list item.
+     * @param file The file item selected in the DataTable
+     */
+    const handleDownload = async (file: FileItem) => {
+        try {
+            await invoke(domain, "download_file", { file_name: file.name });
+        } catch (error) {
+            console.error("Failed downloading file: " + error);
+            dispatch({
+                topic: "autocore-react/alert/error",
+                payload: {
+                    message: `Failed to downloading file: ${error}`,
+                    timeoutSec: 7,
+                    severity: MessageSeverity.ERROR
+                }
+            });
+        }
+
+    };
+
+    /**
+     * Sends the command to the autocore-server domain to delete the file.
+     * @param file_name Name of the file to delete.
+     */
+    const handleDelete = async (file_name: string) => {
+
+        try {
+            await invoke(domain, "delete_file", { file_name: file_name });
+        } catch (error) {
+            console.error("Failed deleting file: " + error);
+
+            dispatch({
+                topic: "autocore-react/alert/error",
+                payload: {
+                    message: `Failed deleting file: ${error}`,
+                    timeoutSec: 7,
+                    severity: MessageSeverity.ERROR
+                }
+            });
+        }
+
+
+        listFiles();
+    };
+
+    const title = `${domain} File Listing`;
+    const toolbarStartContents = (
+        <React.Fragment>
+            <span style={{ fontWeight: 600 }}>{title}</span>
+        </React.Fragment>
+    );
+
+    const toolbarEndContents = (
+        <React.Fragment>
+            {enableUpload && (
+                <Button
+                    icon="pi pi-upload"
+                    className="p-button-rounded p-mr-2"
+                    aria-label="Upload"
+                    size="small"
+                    rounded text
+                />
+
+            )}
+            <Button
+                icon="pi pi-refresh"
+                onClick={() => { listFiles() }}
+                className="p-button-rounded p-mr-2"
+                aria-label="Refresh"
+                size="small"
+                rounded text
+            />
+        </React.Fragment>
+    );
+
+
+    /**
+     * Confirm that the user really wants to delete.
+     * @param event 
+     */
+    const confirmDelete = (file: FileItem, event: React.MouseEvent<HTMLButtonElement>) => {
+
+        confirmPopup({
+            target: event.currentTarget,
+            message: `Are you want to delete file ${file.name}?\nWARNING: This cannot be undone.`,
+            icon: 'pi pi-info-circle',
+            defaultFocus: 'reject',
+            acceptClassName: 'p-button-danger',
+            accept: () => handleDelete(file.name)
+        });
+    };
+
+    useEffect(() => {
+
+        listFiles();
+
+        return () => {
+        }
+    }, [domain, enableUpload]);
+
+    return (
+
+        <div>
+            <Toolbar start={toolbarStartContents} end={toolbarEndContents} style={{ padding: "1mm" }} />
+            <ConfirmPopup />
+            <DataTable value={files}>
+                <Column field="name" header="Name"></Column>
+
+                <Column body={(rowData: FileItem) => (
+                    <>
+                        <Button
+                            icon="pi pi-download"
+                            onClick={() => handleDownload(rowData)}
+                            className="p-button-rounded p-button-success p-mr-2"
+                            style={{ marginRight: "2mm" }}
+                            size="small"
+                        />
+                        <Button
+                            icon="pi pi-trash"
+                            onClick={(e) => confirmDelete(rowData, e)}
+                            className="p-button-rounded p-button-danger"
+                            size="small"
+                        />
+                    </>
+                )} header="Actions"></Column>
+            </DataTable>
+        </div>
+    );
+};
+
+export default FileList;

package/src/hub/HubWebSocket.ts

@@ -2,7 +2,7 @@
  * Copyright (C) 2024 Automated Design Corp.. All Rights Reserved.
  * Created Date: 2024-04-17 09:13:07
  * -----
- * Last Modified: 2024-04-24 11:56:51
+ * Last Modified: 2024-04-24 15:43:21
  * -----
  * 
  */
@@ -38,11 +38,95 @@ interface RequestRecord {
 }
 
 
+/**
+ * Converts a Base64 encoded string into a Blob object.
+ *
+ * This function is useful for handling binary data encoded in Base64 format,
+ * especially when the data needs to be reconstructed into a binary format
+ * such as when downloading files that were transferred as Base64 strings over
+ * a network. The function slices the Base64 string, decodes it to binary,
+ * and constructs a Blob from the resulting byte arrays.
+ *
+ * @param {string} b64Data The base64 encoded string you want to convert to a Blob.
+ * @param {string} [contentType='application/octet-stream'] The MIME type of the Blob.
+ *      This parameter is optional and defaults to 'application/octet-stream'.
+ * @param {number} [sliceSize=512] The size of each chunk used to slice the Base64 string.
+ *      Smaller slice sizes can improve the function's handling of large Base64 strings.
+ *      This parameter is optional and defaults to 512.
+ *
+ * @returns {Blob} A Blob object representing the decoded binary data.
+ */
+function b64toBlob(
+    b64Data: string, 
+    contentType: string = 'application/octet-stream', 
+    sliceSize: number = 512
+): Blob {
+
+    const byteCharacters = atob(b64Data);
+    const byteArrays: Uint8Array[] = [];
+
+    for (let offset = 0; offset < byteCharacters.length; offset += sliceSize) {
+        const slice = byteCharacters.slice(offset, offset + sliceSize);
+
+        const byteNumbers: number[] = new Array(slice.length);
+        for (let i = 0; i < slice.length; i++) {
+            byteNumbers[i] = slice.charCodeAt(i);
+        }
+
+        const byteArray = new Uint8Array(byteNumbers);
+        byteArrays.push(byteArray);
+    }
+
+    const blob = new Blob(byteArrays, { type: contentType });
+    return blob;
+}
+
+
+/**
+ * Creates a temporary hyperlink in the document and programmatically triggers a download of the Blob provided.
+ *
+ * This function is useful for triggering downloads of binary data such as files, which are represented
+ * by Blob objects in the browser. The function creates a URL from the Blob, sets it as the href of a
+ * dynamically created anchor tag (`<a>`), sets the suggested filename, and then simulates a click on
+ * this link to start the download. After the download is triggered, the link is removed and the URL
+ * is revoked to free up memory.
+ *
+ * @param {Blob} blob The Blob object containing the data to be downloaded.
+ * @param {string} filename The filename to be used for the downloaded file.
+ */
+function downloadBlob(blob: Blob, filename: string): void {
+    // Create a URL for the blob object
+    const url = window.URL.createObjectURL(blob);
+
+    // Create a temporary anchor tag (`<a>`) element
+    const a = document.createElement('a');
+    a.href = url;           // Set the href to the blob URL
+    a.download = filename;  // Suggest a filename for the downloaded file
+
+    // Append the anchor tag to the body of the document
+    document.body.appendChild(a);
+
+    // Programmatically trigger a click on the anchor tag
+    a.click();
+
+    // Remove the anchor tag from the document
+    document.body.removeChild(a);
+
+    // Revoke the blob URL to free up resources
+    window.URL.revokeObjectURL(url);
+}
+
+
+
+
 export class HubWebSocket extends HubBase {
     private socket: WebSocket;
     private requestId = 0;
     private pendingRequests = new Map<number, RequestRecord>();
 
+    /**
+     * Constructor. Creates and attempts to make the Websocket connection.
+     */
     constructor() {
         super();
         
@@ -55,21 +139,60 @@ export class HubWebSocket extends HubBase {
 
 
         let self = this;
+
+        //
+        // Websocket connection established.
+        //
         this.socket.onopen = function() {
             console.log("WebSocket connection established.");
             self.publish("HUB/connected", true);
             //ws.send("Hello, server!"); // Send a message to the server
         };
         
-        
+                
+        // Message recevied via the websocket connection.
+        //
         this.socket.onmessage = (event) => {
             const data: CommandMessage = JSON.parse(event.data);
+
             if (data.request_id && this.pendingRequests.has(data.request_id)) {
+
                 const { resolve, reject } = this.pendingRequests.get(data.request_id)!;
-                if (!data.result?.success) {
-                    reject(new Error(data.result?.error_message));
-                } else {
-                    resolve(data.result);
+
+                if (data.fname === "FILE_DOWNLOAD" 
+                    && data.args["file_name"] !== undefined && data.args["file_name"] !== null
+                    && data.args["file_name"].length > 0
+                ) {
+
+                    // The file name was supplied in the original request
+                    let tokens = data.args["file_name"].split("/");
+                    
+                    const filename = tokens[tokens.length - 1]; 
+                    if (data.result && data.result.success) {
+                        const blob = b64toBlob(data.result.data);
+                        downloadBlob(blob, filename);
+                        
+                        // Don't send the whole file through; that's crazy.
+                        data.result.data = filename;
+                        
+                        // Signal the function that initiated the download that all is well.
+                        resolve(data.result);
+
+                    } else {
+                        // Signal the function that initiated the download that it failed.
+                        reject(new Error(data.result?.error_message));
+                    }
+
+                }
+                else {
+                    
+                    if (!data.result?.success) {
+                        // Return the result to the function that initiated the request.
+                        reject(new Error(data.result?.error_message));
+                    } else {
+                        // Send the error to the function that intiated the request.
+                        resolve(data.result);
+                    }    
                 }
                 this.pendingRequests.delete(data.request_id);
             } else {
@@ -77,15 +200,29 @@ export class HubWebSocket extends HubBase {
             }
         };
 
+        //
+        // Error occurred in the Websocket connection.
+        //
         this.socket.onerror = (error: Event) => {
             console.error('WebSocket error:', error);
         };
 
+        //
+        // The Websocket connection has closed.
+        //
         this.socket.onclose = () => {
             console.log('WebSocket connection closed.');
         };
     }
 
+
+    /**
+     * Invoke a command in the remote webserver. 
+     * @param domain The domain of the Servelet supplying the functionality.
+     * @param fname The name of the command to execute.
+     * @param payload The arguments of the command.
+     * @returns Promise<CommandMessageResult>
+     */
     invoke = (domain : string, fname: string, payload?: object): Promise<CommandMessageResult> => {
 
         return new Promise((resolve, reject) => {