Merge pull request 'simulation' (#13) from simulation into main

Reviewed-on: http://185.100.212.76:7776/Dwinzo-Beta/Dwinzo_dev/pulls/13

app/src/components/ui/componets/DisplayZone.tsx

@@ -1,6 +1,7 @@
 import React, { useEffect, useRef, useState, useCallback } from "react";
 import { Widget } from "../../../store/useWidgetStore";
 import { MoveArrowLeft, MoveArrowRight } from "../../icons/SimulationIcons";
+import { InfoIcon } from "../../icons/ExportCommonIcons";
 
 // Define the type for `Side`
 type Side = "top" | "bottom" | "left" | "right";
@@ -153,33 +154,40 @@ const DisplayZone: React.FC<DisplayZoneProps> = ({
       )}
 
       {/* Zones Wrapper */}
-      <div ref={containerRef} className="zones-wrapper">
-        {Object.keys(zonesData).map((zoneName, index) => (
-          <div
-            key={index}
-            className={`zone ${
-              selectedZone.zoneName === zoneName ? "active" : ""
-            }`}
-            onClick={() => {
-              console.log("zoneName: ", zoneName);
-              setSelectedZone({
-                zoneName,
-                activeSides: zonesData[zoneName].activeSides || [],
-                panelOrder: zonesData[zoneName].panelOrder || [],
-                lockedPanels: zonesData[zoneName].lockedPanels || [],
-                widgets: zonesData[zoneName].widgets || [],
-                zoneId: zonesData[zoneName]?.zoneId || "",
-                zoneViewPortTarget:
-                  zonesData[zoneName].zoneViewPortTarget || [],
-                zoneViewPortPosition:
-                  zonesData[zoneName].zoneViewPortPosition || [],
-              });
-            }}
-          >
-            {zoneName}
-          </div>
-        ))}
-      </div>
+      {Object.keys(zonesData).length !== 0 ? (
+        <div ref={containerRef} className="zones-wrapper">
+          {Object.keys(zonesData).map((zoneName, index) => (
+            <div
+              key={index}
+              className={`zone ${
+                selectedZone.zoneName === zoneName ? "active" : ""
+              }`}
+              onClick={() => {
+                console.log("zoneName: ", zoneName);
+                setSelectedZone({
+                  zoneName,
+                  activeSides: zonesData[zoneName].activeSides || [],
+                  panelOrder: zonesData[zoneName].panelOrder || [],
+                  lockedPanels: zonesData[zoneName].lockedPanels || [],
+                  widgets: zonesData[zoneName].widgets || [],
+                  zoneId: zonesData[zoneName]?.zoneId || "",
+                  zoneViewPortTarget:
+                    zonesData[zoneName].zoneViewPortTarget || [],
+                  zoneViewPortPosition:
+                    zonesData[zoneName].zoneViewPortPosition || [],
+                });
+              }}
+            >
+              {zoneName}
+            </div>
+          ))}
+        </div>
+      ) : (
+        <div className="no-zone">
+          <InfoIcon />
+          No zones? Create one!
+        </div>
+      )}
 
       {/* Right Arrow */}
       {showRightArrow && (

app/src/components/ui/inputs/InputToggle.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import React from "react";
 
 interface InputToggleProps {
   label: string; // Represents the toggle state (on/off)
@@ -7,23 +7,18 @@ interface InputToggleProps {
   inputKey: string;
 }
 
+// Update InputToggle.tsx to be fully controlled
 const InputToggle: React.FC<InputToggleProps> = ({
   label,
   onClick,
   value = false,
   inputKey,
 }) => {
-  const [activeValue, setActiveValue] = useState<boolean>(value);
-
+  // Remove internal state and use the value prop directly
   function handleOnClick() {
-    setActiveValue(!activeValue);
     if (onClick) onClick();
   }
 
-  useEffect(() => {
-    setActiveValue(value);
-  }, [value]);
-
   return (
     <div className="input-toggle-container">
       <label htmlFor={`toogle-input-${inputKey}`} className="label">
@@ -33,15 +28,16 @@ const InputToggle: React.FC<InputToggleProps> = ({
         <div
           className="check-box-style"
           style={{
-            left: activeValue ? "50%" : "2px",
-            background: activeValue ? "" : "var(--text-disabled)",
+            left: value ? "50%" : "2px",
+            background: value ? "" : "var(--text-disabled)",
           }}
         ></div>
         <input
           type="checkbox"
           name=""
           id={`toogle-input-${inputKey}`}
-          defaultChecked={value}
+          checked={value}
+          readOnly
         />
       </div>
     </div>

app/src/components/ui/inputs/InputWithDropDown.tsx

@@ -4,21 +4,27 @@ import RenameInput from "./RenameInput";
 type InputWithDropDownProps = {
   label: string;
   value: string;
+  min?: number
+  defaultValue?: string;
   options?: string[]; // Array of dropdown options
   activeOption?: string; // The currently active dropdown option
   onClick?: () => void;
   onChange: (newValue: string) => void;
   editableLabel?: boolean;
+  placeholder?: string; // New placeholder prop
 };
 
 const InputWithDropDown: React.FC<InputWithDropDownProps> = ({
   label,
   value,
+  min,
+  defaultValue,
   options,
   activeOption,
   onClick,
   onChange,
   editableLabel = false,
+  placeholder = "Inherit", // Default empty placeholder
 }) => {
   const separatedWords = label
     .split(/(?=[A-Z])/)
@@ -38,11 +44,13 @@ const InputWithDropDown: React.FC<InputWithDropDownProps> = ({
       )}
       <div className="input default" id={separatedWords}>
         <input
-          type="text"
+          min={min}
+          type="number"
           defaultValue={value}
           onChange={(e) => {
             onChange(e.target.value);
           }}
+          placeholder={placeholder} // Added placeholder prop
         />
 
         {activeOption && (
@@ -73,4 +81,4 @@ const InputWithDropDown: React.FC<InputWithDropDownProps> = ({
   );
 };
 
-export default InputWithDropDown;
+export default InputWithDropDown;

app/src/components/ui/inputs/LabledDropdown.tsx

@@ -1,29 +1,49 @@
-import React, { useState } from "react";
+import React, { useState, useEffect } from "react";
 import RegularDropDown from "./RegularDropDown";
 
 type LabledDropdownProps = {
   defaultOption: string; // Initial active option
   options: string[]; // Array of dropdown options
+  label?: string; // Customizable label text
+  onSelect?: (option: string) => void; // Callback when option is selected
+  className?: string; // Additional className for styling
+  disabled?: boolean; // Disable dropdown
+  search?: boolean; // Enable/disable search functionality
 };
 
-const LabledDropdown: React.FC<LabledDropdownProps> = ({ defaultOption, options }) => {
-  const [activeOption, setActiveOption] = useState(defaultOption); // State for active option
+const LabledDropdown: React.FC<LabledDropdownProps> = ({ 
+  defaultOption, 
+  options, 
+  label = "Type",
+  onSelect,
+  className = "",
+  search = false
+}) => {
+  const [activeOption, setActiveOption] = useState(defaultOption);
+
+  // Update active option if defaultOption changes
+  useEffect(() => {
+    setActiveOption(defaultOption);
+  }, [defaultOption]);
 
   const handleSelect = (option: string) => {
-    setActiveOption(option); // Update the active option state
+    setActiveOption(option);
+    if (onSelect) {
+      onSelect(option);
+    }
   };
 
   return (
-    <div className="value-field-container">
-      <div className="label">Type</div>
+    <div className={`value-field-container ${className}`}>
+      <div className="label">{label}</div>
       <RegularDropDown
-        header={activeOption} // Display the current active option
-        options={options} // Use the options from props
-        onSelect={handleSelect} // Handle option selection
-        search = {false}
+        header={activeOption}
+        options={options}
+        onSelect={handleSelect}
+        search={search}
       />
     </div>
   );
 };
 
-export default LabledDropdown;
+export default LabledDropdown;