Dwinzo-Beta
/
Dwinzo_beta
6
0
Fork 3
Code Issues Pull Requests Packages Projects Releases Wiki Activity

resolved build errors

This commit is contained in:
Nalvazhuthi 2025-03-21 10:34:01 +05:30
parent f6bde4f118
commit 86409644e1
18 changed files with 296 additions and 321 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
app/src/components/layout/sidebarLeft/visualization/Templates.tsx
View File

@ -1,4 +1,3 @@
import React from "react";
import useTemplateStore from "../../../../store/useTemplateStore";
import { useSelectedZoneStore } from "../../../../store/useZoneStore";

20
app/src/components/layout/sidebarLeft/visualization/widgets/ChartComponent.tsx
View File

@ -1,6 +1,6 @@
import React, { useEffect, useRef, useMemo } from "react";
import { Chart } from "chart.js/auto";
import { useThemeStore } from "../../../../../store/useThemeStore";
// import { useThemeStore } from "../../../../../store/useThemeStore";
// Define Props Interface
interface ChartComponentProps {
@ -29,17 +29,17 @@ const ChartComponent = ({
data: propsData,
}: ChartComponentProps) => {
const canvasRef = useRef<HTMLCanvasElement>(null);
const { themeColor } = useThemeStore();
// const { themeColor } = useThemeStore();
// Memoize Theme Colors to Prevent Unnecessary Recalculations
const buttonActionColor = useMemo(
() => themeColor[0] || "#5c87df",
[themeColor]
);
const buttonAbortColor = useMemo(
() => themeColor[1] || "#ffffff",
[themeColor]
);
// const buttonActionColor = useMemo(
// () => themeColor[0] || "#5c87df",
// [themeColor]
// );
// const buttonAbortColor = useMemo(
// () => themeColor[1] || "#ffffff",
// [themeColor]
// );
// Memoize Font Weight Mapping
const chartFontWeightMap = useMemo(

1
app/src/components/layout/sidebarLeft/visualization/widgets/Widgets3D.tsx
View File

@ -1,4 +1,3 @@
import React from 'react'
const Widgets3D = () => {
return (

196
app/src/components/layout/sidebarLeft/visualization/widgets/WidgetsFloating.tsx
View File

@ -1,189 +1,39 @@
import React, {
useState,
DragEvent,
MouseEvent,
useRef,
useEffect,
} from "react";
import React, { useState } from "react";
const WidgetsFloating: React.FC = () => {
const stateWorking = [
{ "Oil Tank": "24/341" },
{ "Oil Refin": "36.023" },
{ Transmission: "36.023" },
{ Fuel: "36732" },
{ Power: "1300" },
{ Time: "13-9-2023" },
];
// State for storing the dragged widget and its position
const [draggedFloating, setDraggedFloating] = useState<string | null>(null);
const [position, setPosition] = useState<{ x: number; y: number }>({
x: 0,
y: 0,
});
// State to store all placed widgets with their positions
const [placedWidgets, setPlacedWidgets] = useState<
{ name: string; x: number; y: number }[]
>([]);
const canvasRef = useRef<HTMLDivElement>(null);
// Handle the drag start event
const handleDragStart = (
event: DragEvent<HTMLDivElement>,
widget: string
) => {
setDraggedFloating(widget);
// Initialize position to the current position when drag starts
setPosition({ x: event.clientX, y: event.clientY });
};
// Handle the drag move event
const handleDragMove = (event: MouseEvent) => {
if (!draggedFloating) return;
// Calculate new position and update it
const canvas = canvasRef.current;
if (canvas) {
const canvasRect = canvas.getBoundingClientRect();
const newX = event.clientX - canvasRect.left;
const newY = event.clientY - canvasRect.top;
setPosition({ x: newX, y: newY });
interface Widget {
id: string;
name: string;
}
};
// Handle the drag end event
const handleDragEnd = () => {
if (draggedFloating) {
// Store the final position of the dragged widget
setPlacedWidgets((prevWidgets) => [
...prevWidgets,
{ name: draggedFloating, x: position.x, y: position.y },
const WidgetsFloating = () => {
const [widgets, setWidgets] = useState<Widget[]>([
{ id: "1", name: "Working State Widget" },
{ id: "2", name: "Floating Widget 2" },
{ id: "3", name: "Floating Widget 3" },
{ id: "4", name: "Floating Widget 4" },
]);
// Reset the dragged floating widget after dragging is completed
setDraggedFloating(null);
}
};
useEffect(() => {
console.log("position: ", position);
console.log("draggedFloating: ", draggedFloating);
}, [draggedFloating, position]);
console.log('setWidgets: ', setWidgets);
// Function to handle drag start
const handleDragStart = (
e: React.DragEvent<HTMLDivElement>,
widget: Widget
) => {
e.dataTransfer.setData("application/json", JSON.stringify(widget));
};
return (
<div className="floatingWidgets-wrapper">
{widgets.map((widget) => (
<div
id="real-time-vis-canvas"
ref={canvasRef}
className="canvas"
style={{
position: "relative",
width: "100%",
height: "400px",
backgroundColor: "#f0f0f0",
border: "1px solid #ccc",
}}
onMouseMove={handleDragMove}
onMouseUp={handleDragEnd}
>
{/* The floating widget that's being dragged */}
{draggedFloating && (
<div
key={widget.id}
className="floating"
style={{
position: "absolute",
left: `${position.x}px`,
top: `${position.y}px`,
cursor: "move",
backgroundColor: "lightblue",
padding: "10px",
borderRadius: "5px",
}}
>
{draggedFloating}
</div>
)}
{/* Render all placed widgets */}
{placedWidgets.map((widget, index) => (
<div
key={index}
className="floating"
style={{
position: "absolute",
left: `${widget.x}px`,
top: `${widget.y}px`,
backgroundColor: "lightgreen",
padding: "10px",
borderRadius: "5px",
}}
draggable
onDragStart={(e) => handleDragStart(e, widget)}
>
{widget.name}
</div>
))}
{/* The rest of your floating widgets */}
<div
className="floating working-state"
draggable
onDragStart={(e) => handleDragStart(e, "working-state")}
style={{ position: "absolute", top: "50px", left: "50px" }}
>
<div className="state-working-top">
<div className="state-working-main">
<div className="state">State</div>
<div className="working-status">
<span className="working">Working</span>
<span className="dot"></span>
</div>
</div>
<div className="img">
<img
src="https://source.unsplash.com/random/150x100/?factory"
alt="Factory"
/>
</div>
</div>
<div className="state-working-data">
{stateWorking.map((state, index) => {
const key = Object.keys(state)[0];
const value = state[key];
return (
<div className="data-row" key={index}>
<span className="data-key">{key}:</span>
<span className="data-value">{value}</span>
</div>
);
})}
</div>
</div>
{/* Other floating widgets */}
<div
className="floating"
draggable
onDragStart={(e) => handleDragStart(e, "floating-2")}
style={{ position: "absolute", top: "120px", left: "150px" }}
>
floating-2
</div>
<div
className="floating"
draggable
onDragStart={(e) => handleDragStart(e, "floating-3")}
style={{ position: "absolute", top: "200px", left: "250px" }}
>
floating-3
</div>
<div
className="floating"
draggable
onDragStart={(e) => handleDragStart(e, "floating-4")}
style={{ position: "absolute", top: "300px", left: "350px" }}
>
floating-4
</div>
</div>
);
};

106
app/src/components/layout/sidebarRight/mechanics/MachineMechanics.tsx
View File

@ -1,10 +1,15 @@
import React, { useState } from "react";
import React, { useRef, useState } from "react";
import {
AddIcon,
InfoIcon,
RemoveIcon,
ResizeHeightIcon,
} from "../../../icons/ExportCommonIcons";
import RenameInput from "../../../ui/inputs/RenameInput";
import InputWithDropDown from "../../../ui/inputs/InputWithDropDown";
import LabledDropdown from "../../../ui/inputs/LabledDropdown";
import RegularDropDown from "../../../ui/inputs/RegularDropDown";
import { handleResize } from "../../../../functions/handleResizePannel";
const MachineMechanics: React.FC = () => {
const [actionList, setActionList] = useState<string[]>([]);
@ -13,7 +18,9 @@ const MachineMechanics: React.FC = () => {
type: "action" | "trigger";
name: string;
} | null>(null);
const [editedName, setEditedName] = useState<string>("");
const actionsContainerRef = useRef<HTMLDivElement>(null);
const triggersContainerRef = useRef<HTMLDivElement>(null);
const handleAddAction = () => {
setActionList([...actionList, `Action ${actionList.length + 1}`]);
@ -30,7 +37,6 @@ const MachineMechanics: React.FC = () => {
selectedItem.name === actionList[index]
) {
setSelectedItem(null);
setEditedName("");
}
};
@ -41,37 +47,25 @@ const MachineMechanics: React.FC = () => {
selectedItem.name === triggerList[index]
) {
setSelectedItem(null);
setEditedName("");
}
};
const handleSelectItem = (type: "action" | "trigger", name: string) => {
setSelectedItem({ type, name });
setEditedName(name);
};
const handleSave = () => {
if (!selectedItem) return;
if (selectedItem.type === "action") {
setActionList(
actionList.map((action) =>
action === selectedItem.name ? editedName : action
)
);
} else if (selectedItem.type === "trigger") {
setTriggerList(
triggerList.map((trigger) =>
trigger === selectedItem.name ? editedName : trigger
)
);
}
setSelectedItem({ ...selectedItem, name: editedName });
};
return (
<div className="machine-mechanics-container">
<div className="machine-mechanics-header">Selected Object</div>
<div className="process-list-container">
<div className="label">Process:</div>
<RegularDropDown
header={"activeOption"}
options={["options"]}
onSelect={() => {}}
/>
</div>
<div className="machine-mechanics-content-container">
<div className="actions">
<div className="header">
<div className="header-value">Actions</div>
@ -79,19 +73,27 @@ const MachineMechanics: React.FC = () => {
<AddIcon /> Add
</div>
</div>
<div className="lists-main-container">
<div
className="lists-main-container"
ref={actionsContainerRef}
style={{ height: "120px" }}
>
<div className="list-container">
{actionList.map((action, index) => (
<div
key={index}
className={`list-item ${
selectedItem?.type === "action" && selectedItem.name === action
selectedItem?.type === "action" &&
selectedItem.name === action
? "active"
: ""
}`}
>
<div className="value" onClick={() => handleSelectItem("action", action)}>
{action}
<div
className="value"
onClick={() => handleSelectItem("action", action)}
>
<RenameInput value={action} />
</div>
<div
className="remove-button"
@ -102,7 +104,11 @@ const MachineMechanics: React.FC = () => {
</div>
))}
</div>
<div className="resize-icon">
<div
className="resize-icon"
id="action-resize"
onMouseDown={(e) => handleResize(e, actionsContainerRef)}
>
<ResizeHeightIcon />
</div>
</div>
@ -114,7 +120,11 @@ const MachineMechanics: React.FC = () => {
<AddIcon /> Add
</div>
</div>
<div className="lists-main-container">
<div
className="lists-main-container"
ref={triggersContainerRef}
style={{ height: "120px" }}
>
<div className="list-container">
{triggerList.map((trigger, index) => (
<div
@ -126,8 +136,11 @@ const MachineMechanics: React.FC = () => {
: ""
}`}
>
<div className="value" onClick={() => handleSelectItem("trigger", trigger)}>
{trigger}
<div
className="value"
onClick={() => handleSelectItem("trigger", trigger)}
>
<RenameInput value={trigger} />
</div>
<div
className="remove-button"
@ -138,7 +151,11 @@ const MachineMechanics: React.FC = () => {
</div>
))}
</div>
<div className="resize-icon">
<div
className="resize-icon"
id="trigger-resize"
onMouseDown={(e) => handleResize(e, triggersContainerRef)}
>
<ResizeHeightIcon />
</div>
</div>
@ -146,22 +163,12 @@ const MachineMechanics: React.FC = () => {
<div className="selected-properties-container">
{selectedItem && (
<>
<div>
<label>Edit Name:</label>
<input
type="text"
value={editedName}
onChange={(e) => setEditedName(e.target.value)}
<div className="properties-header">{selectedItem.name}</div>
<LabledDropdown
defaultOption="On-hit"
options={["On-hit", "Buffer"]}
/>
</div>
{/* Add other Properties Like:
* Object Selection Dropdown
* Buffer Time
* Get Value From Object
* Action
* etc.
*/}
<div onClick={handleSave}>Update</div> {/* remove this */}
<InputWithDropDown label="Speed" value="" activeOption=".mm" />
</>
)}
</div>
@ -170,6 +177,7 @@ const MachineMechanics: React.FC = () => {
By Selecting Path, you can create Object Triggers.
</div>
</div>
</div>
);
};

1
app/src/components/layout/sidebarRight/visualization/Visualization.tsx
View File

@ -1,5 +1,4 @@
import { useState } from "react";
import Search from "../../../ui/inputs/Search";
import ToggleHeader from "../../../ui/inputs/ToggleHeader";
import Data from "./data/Data";
import Design from "./design/Design";

2
app/src/components/layout/sidebarRight/visualization/data/Data.tsx
View File

@ -1,4 +1,4 @@
import React, { useEffect, useState } from "react";
import { useEffect, useState } from "react";
import { useWidgetStore } from "../../../../../store/useWidgetStore";
import { AddIcon, RemoveIcon } from "../../../../icons/ExportCommonIcons";
import MultiLevelDropDown from "../../../../ui/inputs/MultiLevelDropDown";

12
app/src/components/layout/sidebarRight/visualization/design/Design.tsx
View File

@ -1,4 +1,4 @@
import React, { useState } from "react";
import { useState } from "react";
import { useWidgetStore } from "../../../../../store/useWidgetStore";
import ChartComponent from "../../../sidebarLeft/visualization/widgets/ChartComponent";
import RegularDropDown from "../../../../ui/inputs/RegularDropDown";
@ -25,10 +25,20 @@ interface Widget {
const Design = () => {
const [selectedName, setSelectedName] = useState("drop down");
console.log("selectedName: ", selectedName);
const [selectedElement, setSelectedElement] = useState("drop down");
console.log("selectedElement: ", selectedElement);
const [selectedFont, setSelectedFont] = useState("drop down");
console.log("selectedFont: ", selectedFont);
const [selectedSize, setSelectedSize] = useState("drop down");
console.log("selectedSize: ", selectedSize);
const [selectedWeight, setSelectedWeight] = useState("drop down");
console.log("selectedWeight: ", selectedWeight);
const [elementColor, setElementColor] = useState("#6f42c1"); // Default color for elements
const [showColorPicker, setShowColorPicker] = useState(false); // Manage visibility of the color picker

4
app/src/components/ui/charts/BarGraphComponent.tsx
View File

@ -1,6 +1,6 @@
import { useRef, useMemo } from "react";
import { useMemo } from "react";
import { Bar, Line } from "react-chartjs-2";
import { Bar } from "react-chartjs-2";
interface ChartComponentProps {
type: any;

2
app/src/components/ui/charts/LineGraphComponent.tsx
View File

@ -1,4 +1,4 @@
import { useRef, useMemo } from "react";
import { useMemo } from "react";
import { Line } from "react-chartjs-2";
interface ChartComponentProps {

3
app/src/components/ui/charts/PieGraphComponent.tsx
View File

@ -1,4 +1,4 @@
import { useRef, useMemo } from "react";
import { useMemo } from "react";
import { Pie } from "react-chartjs-2";
interface ChartComponentProps {
@ -53,6 +53,7 @@ const PieChartComponent = ({
.getPropertyValue("--accent-color")
.trim();
console.log("accentColor: ", accentColor);
const options = useMemo(
() => ({
responsive: true,

3
app/src/components/ui/componets/DisplayZone.tsx
View File

@ -1,5 +1,4 @@
import React, { useEffect, useRef } from "react";
import { useSelectedZoneStore } from "../../../store/useZoneStore";
import { Widget } from "../../../store/useWidgetStore";
// Define the type for `Side`
@ -56,7 +55,9 @@ const DisplayZone: React.FC<DisplayZoneProps> = ({
const [selectedOption, setSelectedOption] = React.useState<string | null>(
null
);
console.log('setSelectedOption: ', setSelectedOption);
const [options, setOptions] = React.useState<string[]>([]);
console.log('setOptions: ', setOptions);
// Scroll to the selected option when it changes
useEffect(() => {

2
app/src/components/ui/componets/DraggableWidget.tsx
View File

@ -1,5 +1,3 @@
import { useMemo, useState } from "react";
import ChartComponent from "../../layout/sidebarLeft/visualization/widgets/ChartComponent";
import { useWidgetStore } from "../../../store/useWidgetStore";
import PieGraphComponent from "../charts/PieGraphComponent";
import BarGraphComponent from "../charts/BarGraphComponent";

1
app/src/components/ui/componets/RealTimeVisulization.tsx
View File

@ -100,3 +100,4 @@ const RealTimeVisulization: React.FC = () => {
};
export default RealTimeVisulization;

53
app/src/components/ui/inputs/InputWithDropDown.tsx Normal file
View File

@ -0,0 +1,53 @@
import React, { useState } from "react";
type InputWithDropDownProps = {
label: string;
value: string;
options?: string[]; // Array of dropdown options
activeOption?: string; // The currently active dropdown option
};
const InputWithDropDown: React.FC<InputWithDropDownProps> = ({
label,
value,
options,
activeOption,
}) => {
const separatedWords = label
.split(/(?=[A-Z])/)
.map((word) => word.trim())
.toString();
const [openDropdown, setOpenDropdown] = useState(false);
return (
<div className="value-field-container">
<label htmlFor={separatedWords} className="label">
{label}
</label>
<div className="input default" id={separatedWords}>
<input type="text" defaultValue={value} />
<div
className="dropdown"
onClick={() => {
setOpenDropdown(true);
}}
>
<div className="active-option">{activeOption}</div>
{options && openDropdown && (
<div className="dropdown-options-list">
{options.map((option, index) => (
<div key={index} className={"dropdown-option"}>
{option}
</div>
))}
</div>
)}
</div>
</div>
</div>
);
};
export default InputWithDropDown;

28
app/src/components/ui/inputs/LabledDropdown.tsx Normal file
View File

@ -0,0 +1,28 @@
import React, { useState } from "react";
import RegularDropDown from "./RegularDropDown";
type LabledDropdownProps = {
defaultOption: string; // Initial active option
options: string[]; // Array of dropdown options
};
const LabledDropdown: React.FC<LabledDropdownProps> = ({ defaultOption, options }) => {
const [activeOption, setActiveOption] = useState(defaultOption); // State for active option
const handleSelect = (option: string) => {
setActiveOption(option); // Update the active option state
};
return (
<div className="value-field-container">
<div className="label">Type</div>
<RegularDropDown
header={activeOption} // Display the current active option
options={options} // Use the options from props
onSelect={handleSelect} // Handle option selection
/>
</div>
);
};
export default LabledDropdown;

10
app/src/components/ui/inputs/MultiLevelDropDown.tsx
View File

@ -47,9 +47,13 @@ const NestedDropdown = ({
{/* Submenu */}
{open && (
<div className="submenu">
{React.Children.map(children, (child) =>
React.cloneElement(child as React.ReactElement, { onSelect })
)}
{React.Children.map(children, (child) => {
if (React.isValidElement(child)) {
// Clone the element and pass the `onSelect` prop only if it's expected
return React.cloneElement(child as React.ReactElement<any>, { onSelect });
}
return child; // Return non-element children as-is
})}
</div>
)}
</div>

24
app/src/functions/handleResizePannel.ts Normal file
View File

@ -0,0 +1,24 @@
export const handleResize = (
e: React.MouseEvent<HTMLDivElement>,
containerRef: React.RefObject<HTMLDivElement | null>
) => {
if (!containerRef.current) return; // Ensure containerRef is not null
const startY = e.clientY;
const startHeight = containerRef.current.offsetHeight;
const onMouseMove = (moveEvent: MouseEvent) => {
const newHeight = Math.max(
120,
Math.min(400, startHeight + moveEvent.clientY - startY)
);
containerRef.current!.style.height = `${newHeight}px`;
};
const onMouseUp = () => {
document.removeEventListener("mousemove", onMouseMove);
document.removeEventListener("mouseup", onMouseUp);
};
document.addEventListener("mousemove", onMouseMove);
document.addEventListener("mouseup", onMouseUp);
};