@adcops/autocore-react 3.0.8 → 3.0.12

package/src/components/ValueInput.tsx

@@ -2,18 +2,18 @@
  * Copyright (C) 2024 Automated Design Corp.. All Rights Reserved.
  * Created Date: 2024-03-20 13:05:42
  * -----
- * Last Modified: 2024-03-21 09:37:17
+ * Last Modified: 2024-04-16 19:06:17
  * -----
  * 
  */
 
 
-import React from "react";
+import React, { createRef } from "react";
 
-import { InputNumber} from 'primereact/inputnumber';
+import { InputNumber } from 'primereact/inputnumber';
 import { Button } from "primereact/button";
 
-import { EventEmitterContext } from "../core/EventEmitterContext.js";
+import { EventEmitterContext } from "../core/EventEmitterContext";
 
 /**
  * Properties of the ValueInput component.
@@ -23,23 +23,23 @@ interface ValueInputProps {
     /**
      * The label for the ValueInput field.
      */
-    label : React.ReactNode | undefined;
+    label: React.ReactNode | undefined;
 
 
     /**
      * The value for the field.
      */
-    value : number | null;
+    value: number | null;
 
     /**
      * Minimum value for the field.
      */
-    min : number | undefined;
+    min: number | undefined;
 
     /**
      * Minimum value for the field.
      */
-    max : number | undefined;
+    max: number | undefined;
 
     /**
      * Minimum number of decimal points. The user will not
@@ -49,7 +49,7 @@ interface ValueInputProps {
      * the component will throw an error.
      * @default 0
      */
-    minPrecision : number | undefined;
+    minPrecision: number | undefined;
 
 
     /**
@@ -58,7 +58,7 @@ interface ValueInputProps {
      * the component will throw an error.
      * @default 3
      */
-    maxPrecision : number | undefined;
+    maxPrecision: number | undefined;
 
 
     /**
@@ -67,7 +67,7 @@ interface ValueInputProps {
      * currency type using the currency property.
      * @default "decimal"
      */
-    mode : "currency" | "decimal" | undefined;
+    mode: "currency" | "decimal" | undefined;
 
 
     /**
@@ -78,19 +78,19 @@ interface ValueInputProps {
      * 
      * @default "USD"
      */
-    currency : string;
-    
+    currency: string;
+
     /**
      * An optional prefix before the value of the field.
      * Unlike the TextInput control, this prefix is internal to the field.
      */
-    prefix : string | undefined;
+    prefix: string | undefined;
 
     /**
      * An optional suffix after the value of the field.
      * Unlike the TextInput control, this prefix is internal to the field.
      */
-    suffix : string | undefined;
+    suffix: string | undefined;
 
     /**
      * Set true to display buttons to increment/decrement the value.
@@ -98,12 +98,12 @@ interface ValueInputProps {
      * 
      * @default false
      */
-    showButtons : boolean;
+    showButtons: boolean;
 
     /**
      * The amount clicking an increment/decrement buttion will change the value.
      */
-    step : number | undefined;
+    step: number | undefined;
 
 
     /**
@@ -112,40 +112,41 @@ interface ValueInputProps {
      * 
      * @default "en-US"
      */
-    locale : string | undefined;
+    locale: string | undefined;
 
     /**
      * A small, advisory text below the field.
      */
-    description : React.ReactNode | undefined;
+    description: React.ReactNode | undefined;
 
     /**
      * If true, all functions of the field will be disabled.
      */
-    disabled : boolean | undefined;
-    
+    disabled: boolean | undefined;
+
     /** Topic on which the value will be dispatched through the user interfave on successful data entry. */
-    dispatchTopic : string | undefined;
+    dispatchTopic: string | undefined;
 
     /**
      * Placeholder string to display if the value is empty.
      */
-    placeholder : string | undefined;
+    placeholder: string | undefined;
 
     /**
      * The user has accepted a new value.
      * @param newValue New value accepted by the user.
-     */ 
-    onValueChanged?(newValue: number) : void;
+     */
+    onValueChanged?(newValue: number): void;
 }
 
 /**
  * State variables of the ValueInput component.
  */
 interface ValueInputState {
-    
-    entryValue : number | null;
-    editing : boolean;
+
+    entryValue: number | null;
+    currentValue: number | null;
+    editing: boolean;
 }
 
 
@@ -165,67 +166,97 @@ export class ValueInput extends React.Component<ValueInputProps, ValueInputState
     declare context: React.ContextType<typeof EventEmitterContext>;
 
 
-    
+
 
     /**
      * Default properties for the component.
      */
     static defaultProps = {
-        label : '',        
-        value : undefined,
-        keyFilter : undefined,
-        writeTopic : undefined,
-        onValueChanged : undefined,
+        label: '',
+        value: undefined,
+        keyFilter: undefined,
+        writeTopic: undefined,
+        onValueChanged: undefined,
         description: undefined,
         prefix: undefined,
-        suffix : undefined,
-        disabled : false,
-        dispatchTopic : undefined,
-        placeholder : undefined,
-        validator : undefined,
-        min : undefined,
-        max : undefined,
-        minPrecision : 0,
-        maxPrecision : 3,
-        mode : "decimal",
-        showButtons : false,
-        step : 1,
-        locale : "en-US",
-        currency : "USD"
+        suffix: undefined,
+        disabled: false,
+        dispatchTopic: undefined,
+        placeholder: undefined,
+        validator: undefined,
+        min: undefined,
+        max: undefined,
+        minPrecision: 0,
+        maxPrecision: 3,
+        mode: "decimal",
+        showButtons: false,
+        step: 1,
+        locale: "en-US",
+        currency: "USD"
     };
+    inputRef: React.RefObject<HTMLInputElement>;
 
     /**
      * 
      * @param {FooterViewProps} props 
      */
-    constructor(props : ValueInputProps) {
+    constructor(props: ValueInputProps) {
         super(props);
         this.state = {
-            entryValue : props.value,
-            editing : false
+            entryValue: props.value,
+            currentValue: props.value,
+            editing: false
         };
+
+        this.inputRef = createRef();
     }
 
     /**
      * The component has been loaded into the DOM.
      */
-    componentDidMount() {        
-    }    
+    componentDidMount() {
+    }
+
+
+    private onBufferValue(val: number | null) {
+        if (val === null)
+            return;
 
-    
+        if (!this.state.editing) {
+            this.setState({
+                entryValue: this.state.currentValue,
+                editing: true
+            }, () => {
+
+                setTimeout(() => {
+                    if (this.inputRef.current) {
+                      this.inputRef.current.focus();
+                    }
+
+                  }, 0);
+
+            }
+            );
+        }
+        else {
+            this.setState({
+                entryValue: val
+            });
+        }
+    }
 
     /**
      * The user has elected to accept the input value. Validate and store, if valid.
      */
     private onAcceptValue() {
-        if (this.state.entryValue !== null ) {
-            this.setState({editing : false});
-            
+        if (this.state.entryValue !== null) {
+            this.setState({ editing: false, currentValue: this.state.entryValue });
+
             if (this.props.onValueChanged)
                 this.props.onValueChanged(this.state.entryValue);
 
             if (this.props.dispatchTopic !== undefined) {
-                this.context.dispatch({topic: this.props.dispatchTopic, payload:this.state.entryValue});
+                this.context.dispatch({ topic: this.props.dispatchTopic, payload: this.state.entryValue });
             }
 
         }
@@ -235,22 +266,29 @@ export class ValueInput extends React.Component<ValueInputProps, ValueInputState
      * The user wishes to reset/cancel the previous value.
      */
     private onResetValue() {
-        this.setState({
-            entryValue: this.props.value, 
-            editing : false
-        });
+
+        if (this.state.editing) {
+
+            this.setState({
+                currentValue: this.state.currentValue,
+                entryValue: this.state.currentValue,
+                editing: false
+            });
+        }
     }
 
 
     render() {
 
-        return(
+        return (
             <div>
                 <div className="p-inputgroup flex-1" >
                     <span className="p-inputgroup-addon">
                         {this.props.label}
-                    </span>                  
-                    <InputNumber                         
+                    </span>
+                    <InputNumber
+                        inputRef={this.inputRef}
+                        key={this.state.editing ? "editing" : "not-editing"}
                         min={this.props.min}
                         max={this.props.max}
                         minFractionDigits={this.props.minPrecision}
@@ -260,14 +298,14 @@ export class ValueInput extends React.Component<ValueInputProps, ValueInputState
                         suffix={this.props.suffix}
                         showButtons={this.props.showButtons}
                         step={this.props.step}
-                        placeholder={this.props.placeholder} 
-                        value={this.state.entryValue}
-                        onChange={(e) => {this.setState({entryValue: e.value, editing : true})} }
+                        placeholder={this.props.placeholder}
+                        value={this.state.currentValue}
+                        onChange={(e) => { this.onBufferValue(e.value) }}
 
                         buttonLayout="horizontal"
-                        decrementButtonClassName="p-button-danger" 
-                        incrementButtonClassName="p-button-success" 
-                        incrementButtonIcon="pi pi-plus" 
+                        decrementButtonClassName="p-button-danger"
+                        incrementButtonClassName="p-button-success"
+                        incrementButtonIcon="pi pi-plus"
                         decrementButtonIcon="pi pi-minus"
 
                         locale="en-US"
@@ -280,32 +318,35 @@ export class ValueInput extends React.Component<ValueInputProps, ValueInputState
                             else if (e.key === 'Escape') {
                                 this.onResetValue();
                             }
-                        }}     
-                        disabled={this.props.disabled}                                           
-                    />                  
-                    <Button 
-                        icon="pi pi-check" 
+                        }}
+                        disabled={this.props.disabled}
+                        autoFocus={false}
+                    />
+                    <Button
+                        icon="pi pi-check"
                         disabled={this.props.disabled || !this.state.editing}
-                        className="p-button-success" 
-                        onClick={() => this.onAcceptValue()} 
+                        className="p-button-success"
+                        onClick={() => this.onAcceptValue()}
                         visible={this.state.editing}
                         size="small"
+                        autoFocus={false}
                     />
 
-                    <Button 
-                        icon="pi pi-times" 
+                    <Button
+                        icon="pi pi-times"
                         disabled={this.props.disabled || !this.state.editing}
-                        className="p-button-danger" 
-                        onClickCapture={()=>this.onResetValue()} 
+                        className="p-button-danger"
+                        onClickCapture={() => this.onResetValue()}
                         visible={this.state.editing}
                         size="small"
+                        autoFocus={false}
                     />
                 </div>
-                
+
                 {this.props.description !== undefined &&
                     <small>{this.props.description}</small>
                 }
-                
+
 
             </div>
 

package/src/core/EventEmitterContext.tsx

@@ -2,7 +2,7 @@
  * Copyright (C) 2024 Automated Design Corp. All Rights Reserved.
  * Created Date: 2024-01-17 11:45:10
  * -----
- * Last Modified: 2024-03-22 14:25:08
+ * Last Modified: 2024-04-23 11:53:43
  * Modified By: ADC
  * -----
  * 
@@ -103,7 +103,7 @@ export interface EventEmitterContextType {
      * Invoke/send a message to the back end. 
      * This does NOT get published to the front end.
      */
-    invoke(fname: string, payload? : object) : Promise<object>;
+    invoke( domain: string, fname: string, payload? : object) : Promise<object>;
 
     /**
      * Subscribe to events identified by the topic.
@@ -264,7 +264,8 @@ export const EventEmitterContext = createContext<EventEmitterContextType>({
     state: { subscriptions: {}, nextSubscriptionId : 1 },
     dispatch: () => { },
     subscribe: () => { return 0; }, // Placeholder for subscription logic
-    invoke: async (fname: string, payload?: object) => { 
+    invoke: async (domain: string, fname: string, payload?: object) => { 
+        domain;
         fname;
         payload;
         // Placeholder for invoke logic

package/src/hub/HubBase.ts

@@ -3,7 +3,7 @@
  * Created Date: 2023-12-15 14:21:33
  * Author: Thomas C. Bitsky Jr.
  * -----
- * Last Modified: 2024-03-08 07:09:11
+ * Last Modified: 2024-04-23 11:19:03
  * Modified By: ADC
  * -----
  * 
@@ -122,23 +122,24 @@ export abstract class HubBase {
      * Invoke/send a message to the back end. 
      * This does NOT get published to the front end.
      */
-    abstract invoke(fname: string, payload? : object) : Promise<object>;
+    abstract invoke(domain: string, fname: string, payload? : object) : Promise<object>;
 
 
     /**
      * Convenience function to invoke a command with an optional topic and optional value.
      * This will invoke the specified command in the backend. It does not broadcast the
      * value within the local frontend.
+     * @param domain string The domain of the command that will be invoked.
      * @param fname string Function name
      * @param topic string Topic 
      * @param value any data payload
      */
-    invokeTopic( fname : string, topic : string | null, value? : any ) : Promise<object> {
+    invokeTopic( domain: string, fname : string, topic : string | null, value? : any ) : Promise<object> {
         const msg = {
             topic : topic,
             data : value
         };
-        return this.invoke(fname, msg);
+        return this.invoke(domain, fname, msg);
     }
 
     /** 

package/src/hub/HubSimulate.ts

@@ -2,7 +2,7 @@
  * Copyright (C) 2023 Automated Design Corp. All Rights Reserved.
  * Created Date: 2023-12-17 10:38:21
  * -----
- * Last Modified: 2024-03-08 09:35:51
+ * Last Modified: 2024-04-23 11:23:27
  * Modified By: ADC
  * -----
  * 
@@ -31,7 +31,8 @@ export class HubSimulate extends HubBase {
      * @param timeout Timeout in milliseconds after which the promise is rejected if no response is received.
      * @returns A Promise that resolves to the response from the backend or rejects if a timeout occurs.
      */
-    invoke(fname: string, payload?: object, timeout: number = 20): Promise<object> {
+    invoke(domain : string, fname: string, payload?: object, timeout: number = 20): Promise<object> {
+        domain; // Not using for simulator
         fname; // Not using for simulator
         return new Promise((resolve, reject) => {
             reject; // not using for simulator

package/src/hub/HubTauri.ts

@@ -3,7 +3,7 @@
  * Created Date: 2023-12-17 09:50:23
  * Author: Thomas C. Bitsky Jr.
  * -----
- * Last Modified: 2024-03-07 13:20:46
+ * Last Modified: 2024-04-23 11:21:45
  * Modified By: ADC
  * -----
  * 
@@ -128,13 +128,17 @@ export class HubTauri extends HubBase {
      * @param payload Optional data payload
      * @returns The return value of the backend method.
      */
-    invoke(fname: string, payload?: object | undefined): Promise<object> {
+    invoke(domain : string, fname: string, payload?: object | undefined): Promise<object> {
 
         console.log(JSON.stringify(event));
 
         if (payload !== undefined && payload !== null) {
             console.log(`Payload: ${JSON.stringify(payload)}`);
-            return invoke(fname, payload as InvokeArgs);
+
+            // todo! This should probably always been the same function, and then that function
+            // in the backend routes the command.
+            let topic = `${domain}_${fname}`;
+            return invoke(topic, payload as InvokeArgs);
         }            
         else {
             return invoke(fname);

package/src/hub/HubWebSocket.ts

@@ -0,0 +1,153 @@
+/*
+ * Copyright (C) 2024 Automated Design Corp.. All Rights Reserved.
+ * Created Date: 2024-04-17 09:13:07
+ * -----
+ * Last Modified: 2024-04-23 18:48:23
+ * -----
+ * 
+ */
+
+/** @file
+ * 
+ * ## broadcast messages
+ * The result field of CommandMessages used for broadcast must have
+ * success set to true, and must contain the field "topic." The topic field, along
+ * with the domain field of the CommandMessage will be combined for the topic used
+ * by the websocket client.
+ * 
+ * broadcast topic = `${CommandMessage.domain}/${CommandMessage.result["topic"]}
+ * 
+ * So, to subscribe to a broadcast topic for GM.fReal that is served by the ADS client, the
+ * topic will be: "ADS/GM.fReal"
+ */
+
+import { HubBase } from './HubBase';
+
+/// The result portion of a CommandMessage. The server will
+/// place the result of a command in this portion of the message.
+interface CommandMessageResult {
+    /// The JSON object of the result.
+    data: any; 
+    /// If true, the command was processed successfully.
+    success : boolean,
+    /// If success is false, this should contain a corresponding error message.
+    error_message: string;
+}
+
+/// CommandMessage is the object passed between the client and server for making requests and
+/// responses. 
+interface CommandMessage {
+    /// An id to identify the request. The request ID is managed by the client and will be reflected back.
+    /// The server will never change the request ID.
+    request_id: number; 
+    /// The command domain/servelet in which this command/function to invoke belongs.
+    domain: string;
+    /// The name of the function to invoke.
+    fname: string;
+    /// A JSON object of the arguments to the function.
+    args?: any; 
+    /// The result of the command, reflected back from the server
+    result?: CommandMessageResult;
+}
+
+// Function to parse the JSON string received from the server into a CommandMessage object
+// function parseCommandMessage(jsonString: string): CommandMessage {
+//     const parsed: CommandMessage = JSON.parse(jsonString);
+//     // Assuming the JSON structure directly matches the TypeScript interfaces
+//     return parsed;
+// }
+
+
+interface RequestRecord {
+    resolve: (value?: any) => void;
+    reject: (reason?: any) => void;
+}
+
+
+export class HubWebSocket extends HubBase {
+    private socket: WebSocket;
+    private requestId = 0;
+    private pendingRequests = new Map<number, RequestRecord>();
+
+    constructor() {
+        super();
+        
+        const host = window.location.hostname; // Get the hostname from the address bar
+        const port = window.location.port; // Get the port from the address bar, if any
+        const proto = window.location.protocol === 'https:' ? 'wss://' : 'ws://'; // Determine the protocol
+        const wsUrl = `${proto}${host}${port ? ':' + port : ''}/ws/`; // Construct WebSocket URL
+
+        this.socket = new WebSocket(wsUrl);
+
+
+        let self = this;
+        this.socket.onopen = function() {
+            console.log("WebSocket connection established.");
+            self.publish("HUB/connected", true);
+            //ws.send("Hello, server!"); // Send a message to the server
+        };
+        
+        
+        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);
+                }
+                this.pendingRequests.delete(data.request_id);
+            } else {
+                this.handleUnsolicitedMessage(data);
+            }
+        };
+
+        this.socket.onerror = (error: Event) => {
+            console.error('WebSocket error:', error);
+        };
+
+        this.socket.onclose = () => {
+            console.log('WebSocket connection closed.');
+        };
+    }
+
+    invoke = (domain : string, fname: string, payload?: object): Promise<object> => {
+
+        return new Promise((resolve, reject) => {
+            const id = ++this.requestId; // Increment and use the request ID
+            this.pendingRequests.set(id, { resolve, reject });
+
+            let cm : CommandMessage = {
+                request_id: id,
+                domain: domain,
+                fname: fname,
+                args: payload,
+                result: undefined
+            };
+
+            this.socket.send(JSON.stringify(cm));
+        });
+    }
+
+    handleUnsolicitedMessage = (msg: CommandMessage) => {
+        // Handle messages that do not correspond to a pending request
+
+        if (msg.fname === "BROADCAST" 
+            && msg.domain.length >= 1
+            && msg.result !== undefined && msg.result !== null
+            && msg.result.data !== undefined && msg.result.data !== null            
+        ) {
+            let topic = `${msg.domain}/${msg.result.data["topic"]}`;
+            this.publish(topic, msg.result.data);
+        }
+    }
+
+    disconnect= (): void => {
+        this.socket.close();
+    }
+
+    protected emit = (eventName: string, payload?: object): void => {
+        this.socket.send(JSON.stringify({ eventName, payload }));
+    }
+}