Merge pull request #276 from getmaxun/handle-inputs

feat: handle datetime-local `<input>` tag

server/src/browser-management/inputHandlers.ts

@@ -260,6 +260,16 @@ const onTimeSelection = async (data: { selector: string, value: string }) => {
     await handleWrapper(handleTimeSelection, data);
 }
 
+const handleDateTimeLocalSelection = async (generator: WorkflowGenerator, page: Page, data: { selector: string, value: string }) => {
+    await generator.onDateTimeLocalSelection(page, data);
+    logger.log('debug', `DateTime Local value ${data.value} selected`);
+}
+
+const onDateTimeLocalSelection = async (data: { selector: string, value: string }) => {
+    logger.log('debug', 'Handling datetime-local selection event emitted from client');
+    await handleWrapper(handleDateTimeLocalSelection, data);
+}
+
 /**
  * A wrapper function for handling the keyup event.
  * @param keyboardInput - the keyboard input of the keyup event
@@ -418,6 +428,7 @@ const registerInputHandlers = (socket: Socket) => {
     socket.on("input:date", onDateSelection);
     socket.on("input:dropdown", onDropdownSelection);
     socket.on("input:time", onTimeSelection);
+    socket.on("input:datetime-local", onDateTimeLocalSelection);
     socket.on("action", onGenerateAction);
 };
 

server/src/workflow-management/classes/Generator.ts

@@ -315,6 +315,26 @@ export class WorkflowGenerator {
     await this.addPairToWorkflowAndNotifyClient(pair, page);
   };
 
+  public onDateTimeLocalSelection = async (page: Page, data: { selector: string, value: string }) => {
+    const { selector, value } = data;
+    
+    try {
+        await page.fill(selector, value);
+    } catch (error) {
+        console.error("Failed to fill datetime-local value:", error);
+    }
+    
+    const pair: WhereWhatPair = {
+        where: { url: this.getBestUrl(page.url()) },
+        what: [{
+            action: 'fill',
+            args: [selector, value],
+        }],
+    };
+
+    await this.addPairToWorkflowAndNotifyClient(pair, page);
+  };
+
   /**
    * Generates a pair for the click event.
    * @param coordinates The coordinates of the click event.
@@ -390,6 +410,16 @@ export class WorkflowGenerator {
       return;
     }
 
+    const isDateTimeLocal = elementInfo?.tagName === 'INPUT' && elementInfo?.attributes?.type === 'datetime-local';
+
+    if (isDateTimeLocal) {
+      this.socket.emit('showDateTimePicker', {
+          coordinates,
+          selector
+      });
+      return;
+    }
+
     //const element = await getElementMouseIsOver(page, coordinates);
     //logger.log('debug', `Element: ${JSON.stringify(element, null, 2)}`);
     if (selector) {

src/components/atoms/DateTimeLocalPicker.tsx

@@ -0,0 +1,74 @@
+import React, { useState } from 'react';
+import { useSocketStore } from '../../context/socket';
+import { Coordinates } from './canvas';
+
+interface DateTimeLocalPickerProps {
+  coordinates: Coordinates;
+  selector: string;
+  onClose: () => void;
+}
+
+const DateTimeLocalPicker: React.FC<DateTimeLocalPickerProps> = ({ coordinates, selector, onClose }) => {
+  const { socket } = useSocketStore();
+  const [selectedDateTime, setSelectedDateTime] = useState<string>('');
+
+  const handleDateTimeChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setSelectedDateTime(e.target.value);
+  };
+
+  const handleConfirm = () => {
+    if (socket && selectedDateTime) {
+      socket.emit('input:datetime-local', {
+        selector,
+        value: selectedDateTime
+      });
+      onClose();
+    }
+  };
+
+  return (
+    <div 
+      style={{
+        position: 'absolute',
+        left: `${coordinates.x}px`,
+        top: `${coordinates.y}px`,
+        zIndex: 1000,
+        backgroundColor: 'white',
+        boxShadow: '0 2px 10px rgba(0,0,0,0.1)',
+        padding: '10px',
+        borderRadius: '4px'
+      }}
+    >
+      <div className="flex flex-col space-y-2">
+        <input
+          type="datetime-local"
+          onChange={handleDateTimeChange}
+          value={selectedDateTime}
+          className="p-2 border rounded"
+          autoFocus
+        />
+        <div className="flex justify-end space-x-2">
+          <button 
+            onClick={onClose}
+            className="px-3 py-1 text-sm text-gray-600 hover:text-gray-800 border rounded"
+          >
+            Cancel
+          </button>
+          <button 
+            onClick={handleConfirm}
+            disabled={!selectedDateTime}
+            className={`px-3 py-1 text-sm rounded ${
+              selectedDateTime 
+                ? 'bg-blue-500 text-white hover:bg-blue-600' 
+                : 'bg-gray-300 text-gray-500 cursor-not-allowed'
+            }`}
+          >
+            Confirm
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default DateTimeLocalPicker;

src/components/atoms/canvas.tsx

@@ -6,6 +6,7 @@ import { useActionContext } from '../../context/browserActions';
 import DatePicker from './DatePicker';
 import Dropdown from './Dropdown';
 import TimePicker from './TimePicker';
+import DateTimeLocalPicker from './DateTimeLocalPicker';
 
 interface CreateRefCallback {
     (ref: React.RefObject<HTMLCanvasElement>): void;
@@ -55,6 +56,11 @@ const Canvas = ({ width, height, onCreateRef }: CanvasProps) => {
         selector: string;
     } | null>(null);
 
+    const [dateTimeLocalInfo, setDateTimeLocalInfo] = React.useState<{
+        coordinates: Coordinates;
+        selector: string;
+    } | null>(null);
+
     const notifyLastAction = (action: string) => {
         if (lastAction !== action) {
             setLastAction(action);
@@ -91,9 +97,15 @@ const Canvas = ({ width, height, onCreateRef }: CanvasProps) => {
                 setTimePickerInfo(info);
             });
 
+            socket.on('showDateTimePicker', (info: {coordinates: Coordinates, selector: string}) => {
+                setDateTimeLocalInfo(info);
+            });
+
             return () => {
                 socket.off('showDatePicker');
                 socket.off('showDropdown');
+                socket.off('showTimePicker');
+                socket.off('showDateTimePicker');
             };
         }
     }, [socket]);
@@ -222,6 +234,13 @@ const Canvas = ({ width, height, onCreateRef }: CanvasProps) => {
                     onClose={() => setTimePickerInfo(null)}
                 />
             )}
+            {dateTimeLocalInfo && (
+                <DateTimeLocalPicker
+                    coordinates={dateTimeLocalInfo.coordinates}
+                    selector={dateTimeLocalInfo.selector}
+                    onClose={() => setDateTimeLocalInfo(null)}
+                />
+            )}
         </div>
     );