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

Merge branch 'main' into rtViz

Browse Source
This commit is contained in:
Gomathi
2025-04-04 18:50:12 +05:30
parent baed3cd98b df0b4a297a
commit 6089c5538f
43 changed files with 4251 additions and 1037 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
app/src/components/ui/Tools.tsx
View File

@@ -438,7 +438,6 @@ const Tools: React.FC = () => {
}`}
onClick={() => {
setIsPlaying(!isPlaying);
setActiveTool("play");
}}
>
<PlayIcon isActive={activeTool === "play"} />

4
app/src/components/ui/componets/Panel.tsx
View File

@@ -124,8 +124,8 @@ const Panel: React.FC<PanelProps> = ({
selectedZone.widgets.filter((w) => w.panel === panel).length;
const calculatePanelCapacity = (panel: Side) => {
const CHART_WIDTH = 150;
const CHART_HEIGHT = 150;
const CHART_WIDTH = 170;
const CHART_HEIGHT = 170;
const FALLBACK_HORIZONTAL_CAPACITY = 5;
const FALLBACK_VERTICAL_CAPACITY = 3;

28
app/src/components/ui/componets/functions/determinePosition.ts
View File

@@ -1,4 +1,3 @@
export function determinePosition(
canvasRect: DOMRect,
relativeX: number,
@@ -12,6 +11,23 @@ export function determinePosition(
const centerX = canvasRect.width / 2;
const centerY = canvasRect.height / 2;
// Define a threshold for considering a point as "centered"
const centerThreshold = 10; // Adjust this value as needed
// Check if the point is within the center threshold
const isCenterX = Math.abs(relativeX - centerX) <= centerThreshold;
const isCenterY = Math.abs(relativeY - centerY) <= centerThreshold;
// If the point is centered, return a special "centered" position
if (isCenterX && isCenterY) {
return {
top: "auto",
left: "auto",
right: "auto",
bottom: "auto",
};
}
let position: {
top: number | "auto";
left: number | "auto";
@@ -21,7 +37,7 @@ export function determinePosition(
if (relativeY < centerY) {
if (relativeX < centerX) {
// Top-left quadrant
position = {
top: relativeY - 41.5,
left: relativeX - 125,
@@ -29,7 +45,7 @@ export function determinePosition(
bottom: "auto",
};
} else {
// Top-right quadrant
position = {
top: relativeY - 41.5,
right: canvasRect.width - relativeX - 125,
@@ -39,7 +55,7 @@ export function determinePosition(
}
} else {
if (relativeX < centerX) {
// Bottom-left quadrant
position = {
bottom: canvasRect.height - relativeY - 41.5,
left: relativeX - 125,
@@ -47,7 +63,7 @@ export function determinePosition(
top: "auto",
};
} else {
// Bottom-right quadrant
position = {
bottom: canvasRect.height - relativeY - 41.5,
right: canvasRect.width - relativeX - 125,
@@ -58,4 +74,4 @@ export function determinePosition(
}
return position;
}
}

80
app/src/components/ui/list/DropDownList.tsx
View File

@@ -32,14 +32,22 @@ const DropDownList: React.FC<DropDownListProps> = ({
listType = "default",
remove,
}) => {
const [isOpen, setIsOpen] = useState<boolean>(defaultOpen);
const { zones, setZones } = useZones()
const { zones, setZones } = useZones();
const handleToggle = () => {
setIsOpen((prev) => !prev); // Toggle the state
};
const [zoneDataList, setZoneDataList] = useState<{ id: string; name: string }[]>([]);
interface Asset {
id: string;
name: string;
}
const [zoneDataList, setZoneDataList] = useState<
{ id: string; name: string; assets: Asset[] }[]
>([]);
const { selectedZone, setSelectedZone } = useSelectedZoneStore();
useEffect(() => {
@@ -53,12 +61,65 @@ const DropDownList: React.FC<DropDownListProps> = ({
// { id: "70fa55cd-b5c9-4f80-a8c4-6319af3bfb4e", name: "zone6" },
// ])
const value = (zones || []).map((val: { zoneId: string; zoneName: string }) => ({
id: val.zoneId,
name: val.zoneName
}));
setZoneDataList(prev => (JSON.stringify(prev) !== JSON.stringify(value) ? value : prev));
const value = (zones || []).map(
(val: { zoneId: string; zoneName: string }) => ({
id: val.zoneId,
name: val.zoneName,
})
);
setZoneDataList([
{
id: "zone1",
name: "Zone 1",
assets: [
{
id: "asset1",
name: "Asset 1",
},
{
id: "asset2",
name: "Asset 2",
},
{
id: "asset3",
name: "Asset 3",
},
],
},
{
id: "zone2",
name: "Zone 2",
assets: [
{
id: "asset4",
name: "Asset 4",
},
{
id: "asset5",
name: "Asset 5",
},
{
id: "asset6",
name: "Asset 6",
},
],
},
{
id: "zone3",
name: "Zone 3",
assets: [
{
id: "asset7",
name: "Asset 7",
},
{
id: "asset8",
name: "Asset 8",
},
],
},
]);
}, [zones]);
return (
@@ -101,6 +162,7 @@ const DropDownList: React.FC<DropDownListProps> = ({
value="Buildings"
showKebabMenu={false}
showAddIcon={false}
items={zoneDataList}
/>
<DropDownList
value="Zones"

128
app/src/components/ui/list/List.tsx
View File

@@ -1,20 +1,44 @@
import React, { useEffect } from "react";
import React, { useEffect, useState } from "react";
import RenameInput from "../inputs/RenameInput";
import { EyeIcon, LockIcon, RmoveIcon } from "../../icons/ExportCommonIcons";
import { useSelectedZoneStore } from "../../../store/useZoneStore";
import { getZoneData } from "../../../services/realTimeVisulization/zoneData/getZones";
import useModuleStore, { useSubModuleStore } from "../../../store/useModuleStore";
import useModuleStore, {
useSubModuleStore,
} from "../../../store/useModuleStore";
import {
ArrowIcon,
EyeIcon,
LockIcon,
RmoveIcon,
} from "../../icons/ExportCommonIcons";
interface Asset {
id: string;
name: string;
}
interface ZoneItem {
id: string;
name: string;
assets?: Asset[];
}
interface ListProps {
items?: { id: string; name: string }[]; // Optional array of items to render
placeholder?: string; // Optional placeholder text
items?: ZoneItem[];
placeholder?: string;
remove?: boolean;
}
const List: React.FC<ListProps> = ({ items = [], remove }) => {
console.log("items: ", items);
const { activeModule, setActiveModule } = useModuleStore();
const { selectedZone, setSelectedZone } = useSelectedZoneStore();
const { setSubModule } = useSubModuleStore();
const [expandedZones, setExpandedZones] = useState<Record<string, boolean>>(
{}
);
useEffect(() => {
useSelectedZoneStore.getState().setSelectedZone({
zoneName: "",
@@ -27,11 +51,16 @@ const List: React.FC<ListProps> = ({ items = [], remove }) => {
widgets: [],
});
}, [activeModule]);
const toggleZoneExpansion = (zoneId: string) => {
setExpandedZones((prev) => ({
...prev,
[zoneId]: !prev[zoneId],
}));
};
async function handleSelectZone(id: string) {
try {
// Avoid re-fetching if the same zone is already selected
if (selectedZone?.zoneId === id) {
console.log("Zone is already selected:", selectedZone.zoneName);
return;
@@ -65,27 +94,74 @@ const List: React.FC<ListProps> = ({ items = [], remove }) => {
<>
{items.length > 0 ? (
<ul className="list-wrapper">
{items.map((item, index) => (
<li key={index} className="list-container">
<div className="list-item">
<div className="value" onClick={() => handleSelectZone(item.id)}>
<RenameInput value={item.name} />
</div>
<div className="options-container">
<div className="lock option">
<LockIcon isLocked />
</div>
<div className="visibe option">
<EyeIcon isClosed />
</div>
{remove && (
<div className="remove option">
<RmoveIcon />
{items.map((item) => (
<React.Fragment key={`zone-${item.id}`}>
<li className="list-container">
<div className="list-item">
<div className="zone-header">
<div
className="value"
onClick={() => handleSelectZone(item.id)}
>
<RenameInput value={item.name} />
</div>
)}
</div>
<div className="options-container">
<div className="lock option">
<LockIcon isLocked />
</div>
<div className="visibe option">
<EyeIcon isClosed />
</div>
{remove && (
<div className="remove option">
<RmoveIcon />
</div>
)}
{item.assets && item.assets.length > 0 && (
<div
className="expand-icon option"
onClick={() => toggleZoneExpansion(item.id)}
>
<ArrowIcon />
</div>
)}
</div>
</div>
</div>
</li>
</li>
{/* Nested assets list - only shown when expanded */}
{item.assets &&
item.assets.length > 0 &&
expandedZones[item.id] && (
<ul className="asset-list">
{item.assets.map((asset) => (
<li
key={`asset-${asset.id}`}
className="list-container asset-item"
>
<div className="list-item">
<div className="value">
<RenameInput value={asset.name} />
</div>
<div className="options-container">
<div className="lock option">
<LockIcon isLocked />
</div>
<div className="visibe option">
<EyeIcon isClosed />
</div>
{remove && (
<div className="remove option">
<RmoveIcon />
</div>
)}
</div>
</div>
</li>
))}
</ul>
)}
</React.Fragment>
))}
</ul>
) : (

3
app/src/components/ui/simulation/simulationPlayer.tsx
View File

@@ -1,6 +1,7 @@
import React, { useState, useRef, useEffect } from "react";
import { ExitIcon, PlayStopIcon, ResetIcon } from "../../icons/SimulationIcons";
import { usePlayButtonStore } from "../../../store/usePlayButtonStore";
import { useActiveTool } from "../../../store/store";
const SimulationPlayer: React.FC = () => {
const [speed, setSpeed] = useState<number>(1);
@@ -8,6 +9,7 @@ const SimulationPlayer: React.FC = () => {
const { setIsPlaying } = usePlayButtonStore();
const sliderRef = useRef<HTMLDivElement>(null);
const isDragging = useRef(false);
const { setActiveTool } = useActiveTool();
// Button functions
const handleReset = () => {
@@ -19,6 +21,7 @@ const SimulationPlayer: React.FC = () => {
const handleExit = () => {
setPlaySimulation(false);
setIsPlaying(false);
setActiveTool("cursor")
};
// Slider functions starts