feat: Refactor icon components and update button elements for improved accessibility and consistency
This commit is contained in:
parent
e43bfb6e98
commit
d7f1c5224d
|
@ -42,6 +42,7 @@ export function FlipXAxisIcon() {
|
||||||
}
|
}
|
||||||
|
|
||||||
export function FlipYAxisIcon() {
|
export function FlipYAxisIcon() {
|
||||||
|
return (
|
||||||
<svg
|
<svg
|
||||||
width="12"
|
width="12"
|
||||||
height="12"
|
height="12"
|
||||||
|
@ -79,7 +80,8 @@ export function FlipYAxisIcon() {
|
||||||
strokeWidth="0.75"
|
strokeWidth="0.75"
|
||||||
strokeLinecap="round"
|
strokeLinecap="round"
|
||||||
/>
|
/>
|
||||||
</svg>;
|
</svg>
|
||||||
|
);
|
||||||
}
|
}
|
||||||
export function FlipZAxisIcon() {
|
export function FlipZAxisIcon() {
|
||||||
return (
|
return (
|
||||||
|
|
|
@ -168,20 +168,6 @@ export function AddIcon() {
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
export function RmoveIcon() {
|
|
||||||
return (
|
|
||||||
<svg
|
|
||||||
width="12"
|
|
||||||
height="12"
|
|
||||||
viewBox="0 0 12 12"
|
|
||||||
fill="none"
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
>
|
|
||||||
<path d="M3 6.5H9" stroke="var(--text-color)" strokeLinecap="round" />
|
|
||||||
</svg>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
export function CloseIcon() {
|
export function CloseIcon() {
|
||||||
return (
|
return (
|
||||||
<svg
|
<svg
|
||||||
|
|
|
@ -23,16 +23,16 @@ const MarketPlaceBanner = () => {
|
||||||
<path
|
<path
|
||||||
d="M167.189 2C154.638 36.335 104.466 106.204 4.18872 111"
|
d="M167.189 2C154.638 36.335 104.466 106.204 4.18872 111"
|
||||||
stroke="white"
|
stroke="white"
|
||||||
stroke-width="3"
|
strokeWidth="3"
|
||||||
stroke-linecap="round"
|
strokeLinecap="round"
|
||||||
stroke-linejoin="round"
|
strokeLinejoin="round"
|
||||||
/>
|
/>
|
||||||
<path
|
<path
|
||||||
d="M10.662 118.326L1.59439 111.524L9.47334 103.374"
|
d="M10.662 118.326L1.59439 111.524L9.47334 103.374"
|
||||||
stroke="white"
|
stroke="white"
|
||||||
stroke-width="3"
|
strokeWidth="3"
|
||||||
stroke-linecap="round"
|
strokeLinecap="round"
|
||||||
stroke-linejoin="round"
|
strokeLinejoin="round"
|
||||||
/>
|
/>
|
||||||
</svg>
|
</svg>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -11,7 +11,7 @@ import {
|
||||||
import { SettingsIcon, TrashIcon } from "../../icons/ExportCommonIcons";
|
import { SettingsIcon, TrashIcon } from "../../icons/ExportCommonIcons";
|
||||||
|
|
||||||
const SidePannel: React.FC = () => {
|
const SidePannel: React.FC = () => {
|
||||||
const userName = localStorage.getItem("userName") || "Anonymous";
|
const userName = localStorage.getItem("userName") ?? "Anonymous";
|
||||||
return (
|
return (
|
||||||
<div className="side-pannel-container">
|
<div className="side-pannel-container">
|
||||||
<div className="side-pannel-header">
|
<div className="side-pannel-header">
|
||||||
|
|
|
@ -17,12 +17,12 @@ const ConfirmationPopup: React.FC<ConfirmationPopupProps> = ({
|
||||||
<div className="confirmation-modal">
|
<div className="confirmation-modal">
|
||||||
<p className="message">{message}</p>
|
<p className="message">{message}</p>
|
||||||
<div className="buttton-wrapper">
|
<div className="buttton-wrapper">
|
||||||
<div className="confirmation-button" onClick={onConfirm}>
|
<button className="confirmation-button" onClick={onConfirm}>
|
||||||
OK
|
OK
|
||||||
</div>
|
</button>
|
||||||
<div className="confirmation-button" onClick={onCancel}>
|
<button className="confirmation-button" onClick={onCancel}>
|
||||||
Cancel
|
Cancel
|
||||||
</div>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -1,6 +1,5 @@
|
||||||
import React, { useEffect, useRef, useMemo } from "react";
|
import React, { useEffect, useRef, useMemo } from "react";
|
||||||
import { Chart } from "chart.js/auto";
|
import { Chart } from "chart.js/auto";
|
||||||
// import { useThemeStore } from "../../../../../store/useThemeStore";
|
|
||||||
|
|
||||||
// Define Props Interface
|
// Define Props Interface
|
||||||
interface ChartComponentProps {
|
interface ChartComponentProps {
|
||||||
|
@ -29,7 +28,6 @@ const ChartComponent = ({
|
||||||
data: propsData,
|
data: propsData,
|
||||||
}: ChartComponentProps) => {
|
}: ChartComponentProps) => {
|
||||||
const canvasRef = useRef<HTMLCanvasElement>(null);
|
const canvasRef = useRef<HTMLCanvasElement>(null);
|
||||||
// const { themeColor } = useThemeStore();
|
|
||||||
|
|
||||||
// Memoize Theme Colors to Prevent Unnecessary Recalculations
|
// Memoize Theme Colors to Prevent Unnecessary Recalculations
|
||||||
// const buttonActionColor = useMemo(
|
// const buttonActionColor = useMemo(
|
||||||
|
@ -66,7 +64,7 @@ const ChartComponent = ({
|
||||||
// Memoize Chart Font Style
|
// Memoize Chart Font Style
|
||||||
const chartFontStyle = useMemo(
|
const chartFontStyle = useMemo(
|
||||||
() => ({
|
() => ({
|
||||||
family: fontFamily || "Arial",
|
family: fontFamily ?? "Arial",
|
||||||
size: fontSizeValue,
|
size: fontSizeValue,
|
||||||
weight: fontWeightValue,
|
weight: fontWeightValue,
|
||||||
color: "#2B3344",
|
color: "#2B3344",
|
||||||
|
|
|
@ -1,4 +1,3 @@
|
||||||
import { useState } from "react";
|
|
||||||
import ToggleHeader from "../../../../ui/inputs/ToggleHeader";
|
import ToggleHeader from "../../../../ui/inputs/ToggleHeader";
|
||||||
import Widgets2D from "./Widgets2D";
|
import Widgets2D from "./Widgets2D";
|
||||||
import Widgets3D from "./Widgets3D";
|
import Widgets3D from "./Widgets3D";
|
||||||
|
@ -6,7 +5,6 @@ import WidgetsFloating from "./WidgetsFloating";
|
||||||
import { useWidgetSubOption } from "../../../../../store/store";
|
import { useWidgetSubOption } from "../../../../../store/store";
|
||||||
|
|
||||||
const Widgets = () => {
|
const Widgets = () => {
|
||||||
const [activeOption, setActiveOption] = useState("2D");
|
|
||||||
const { widgetSubOption, setWidgetSubOption } = useWidgetSubOption();
|
const { widgetSubOption, setWidgetSubOption } = useWidgetSubOption();
|
||||||
|
|
||||||
const handleToggleClick = (option: string) => {
|
const handleToggleClick = (option: string) => {
|
||||||
|
|
|
@ -8,42 +8,11 @@ import {
|
||||||
import SimpleCard from "../../../../../modules//visualization/widgets/floating/cards/SimpleCard";
|
import SimpleCard from "../../../../../modules//visualization/widgets/floating/cards/SimpleCard";
|
||||||
|
|
||||||
import WarehouseThroughput from "../../../../../modules//visualization/widgets/floating/cards/WarehouseThroughput";
|
import WarehouseThroughput from "../../../../../modules//visualization/widgets/floating/cards/WarehouseThroughput";
|
||||||
import ProductivityDashboard from "../../../../../modules//visualization/widgets/floating/cards/ProductivityDashboard";
|
|
||||||
import FleetEfficiency from "../../../../../modules//visualization/widgets/floating/cards/FleetEfficiency";
|
import FleetEfficiency from "../../../../../modules//visualization/widgets/floating/cards/FleetEfficiency";
|
||||||
|
|
||||||
interface Widget {
|
|
||||||
id: string;
|
|
||||||
name: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
const WidgetsFloating = () => {
|
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" },
|
|
||||||
// ]);
|
|
||||||
|
|
||||||
// Function to handle drag start
|
|
||||||
const handleDragStart = (
|
|
||||||
e: React.DragEvent<HTMLDivElement>,
|
|
||||||
widget: Widget
|
|
||||||
) => {
|
|
||||||
e.dataTransfer.setData("application/json", JSON.stringify(widget));
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="floatingWidgets-wrapper widgets-wrapper">
|
<div className="floatingWidgets-wrapper widgets-wrapper">
|
||||||
{/* {widgets.map((widget) => (
|
|
||||||
<div
|
|
||||||
key={widget.id}
|
|
||||||
className="floating"
|
|
||||||
draggable
|
|
||||||
onDragStart={(e) => handleDragStart(e, widget)}
|
|
||||||
>
|
|
||||||
{widget.name}
|
|
||||||
</div>
|
|
||||||
))} */}
|
|
||||||
{/* Floating 1 */}
|
{/* Floating 1 */}
|
||||||
<SimpleCard
|
<SimpleCard
|
||||||
header={"Today’s Earnings"}
|
header={"Today’s Earnings"}
|
||||||
|
|
|
@ -50,7 +50,6 @@ const EventProperties: React.FC<EventPropertiesProps> = ({
|
||||||
const actionsContainerRef = useRef<HTMLDivElement>(null);
|
const actionsContainerRef = useRef<HTMLDivElement>(null);
|
||||||
|
|
||||||
const [activeOption, setActiveOption] = useState("default");
|
const [activeOption, setActiveOption] = useState("default");
|
||||||
const [dummyactiveOption, setTypeOption] = useState("default");
|
|
||||||
|
|
||||||
const getAvailableActions = () => {
|
const getAvailableActions = () => {
|
||||||
if (assetType === "conveyor") {
|
if (assetType === "conveyor") {
|
||||||
|
@ -136,9 +135,9 @@ const EventProperties: React.FC<EventPropertiesProps> = ({
|
||||||
<div className="actions">
|
<div className="actions">
|
||||||
<div className="header">
|
<div className="header">
|
||||||
<div className="header-value">Actions</div>
|
<div className="header-value">Actions</div>
|
||||||
<div className="add-button" onClick={() => {}}>
|
<button className="add-button" onClick={() => {}}>
|
||||||
<AddIcon /> Add
|
<AddIcon /> Add
|
||||||
</div>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
className="lists-main-container"
|
className="lists-main-container"
|
||||||
|
@ -195,7 +194,8 @@ const EventProperties: React.FC<EventPropertiesProps> = ({
|
||||||
{activeOption === "swap" && <SwapAction />} {/* done */}
|
{activeOption === "swap" && <SwapAction />} {/* done */}
|
||||||
{activeOption === "despawn" && <DespawnAction />} {/* done */}
|
{activeOption === "despawn" && <DespawnAction />} {/* done */}
|
||||||
{activeOption === "travel" && <TravelAction />} {/* done */}
|
{activeOption === "travel" && <TravelAction />} {/* done */}
|
||||||
{activeOption === "pickAndPlace" && <PickAndPlaceAction />} {/* done */}
|
{activeOption === "pickAndPlace" && <PickAndPlaceAction />}{" "}
|
||||||
|
{/* done */}
|
||||||
{activeOption === "process" && <ProcessAction />} {/* done */}
|
{activeOption === "process" && <ProcessAction />} {/* done */}
|
||||||
{activeOption === "store" && <StorageAction />} {/* done */}
|
{activeOption === "store" && <StorageAction />} {/* done */}
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -3,7 +3,6 @@ import InputWithDropDown from "../../../../../ui/inputs/InputWithDropDown";
|
||||||
|
|
||||||
const DespawnAction: React.FC = () => {
|
const DespawnAction: React.FC = () => {
|
||||||
return (
|
return (
|
||||||
<>
|
|
||||||
<InputWithDropDown
|
<InputWithDropDown
|
||||||
label="Delay"
|
label="Delay"
|
||||||
value=""
|
value=""
|
||||||
|
@ -15,7 +14,6 @@ const DespawnAction: React.FC = () => {
|
||||||
onClick={() => {}}
|
onClick={() => {}}
|
||||||
onChange={(value) => console.log(value)}
|
onChange={(value) => console.log(value)}
|
||||||
/>
|
/>
|
||||||
</>
|
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
|
@ -2,11 +2,7 @@ import React from "react";
|
||||||
import PreviewSelectionWithUpload from "../../../../../ui/inputs/PreviewSelectionWithUpload";
|
import PreviewSelectionWithUpload from "../../../../../ui/inputs/PreviewSelectionWithUpload";
|
||||||
|
|
||||||
const SwapAction: React.FC = () => {
|
const SwapAction: React.FC = () => {
|
||||||
return (
|
return <PreviewSelectionWithUpload />;
|
||||||
<>
|
|
||||||
<PreviewSelectionWithUpload />
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
};
|
};
|
||||||
|
|
||||||
export default SwapAction;
|
export default SwapAction;
|
||||||
|
|
|
@ -35,27 +35,27 @@ const Trigger: React.FC = () => {
|
||||||
<div className="trigger-wrapper">
|
<div className="trigger-wrapper">
|
||||||
<div className="header">
|
<div className="header">
|
||||||
<div className="title">Trigger</div>
|
<div className="title">Trigger</div>
|
||||||
<div
|
<button
|
||||||
className="add-button"
|
className="add-button"
|
||||||
onClick={addTrigger}
|
onClick={addTrigger}
|
||||||
style={{ cursor: "pointer" }}
|
style={{ cursor: "pointer" }}
|
||||||
>
|
>
|
||||||
<AddIcon /> Add
|
<AddIcon /> Add
|
||||||
</div>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
<div className="trigger-list">
|
<div className="trigger-list">
|
||||||
{/* Map over triggers and render them */}
|
{/* Map over triggers and render them */}
|
||||||
{triggers.map((trigger, index) => (
|
{triggers.map((trigger, index) => (
|
||||||
<div key={index} className="trigger-item">
|
<div key={index.toFixed()} className="trigger-item">
|
||||||
<div className="trigger-name">
|
<div className="trigger-name">
|
||||||
{trigger}
|
{trigger}
|
||||||
<div
|
<button
|
||||||
className="remove-button"
|
className="remove-button"
|
||||||
onClick={() => removeTrigger(index)}
|
onClick={() => removeTrigger(index)}
|
||||||
style={{ cursor: "pointer" }}
|
style={{ cursor: "pointer" }}
|
||||||
>
|
>
|
||||||
<RemoveIcon />
|
<RemoveIcon />
|
||||||
</div>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
<LabledDropdown
|
<LabledDropdown
|
||||||
defaultOption={activeOption}
|
defaultOption={activeOption}
|
||||||
|
|
|
@ -10,7 +10,7 @@ import {
|
||||||
ArrowIcon,
|
ArrowIcon,
|
||||||
EyeIcon,
|
EyeIcon,
|
||||||
LockIcon,
|
LockIcon,
|
||||||
RmoveIcon,
|
RemoveIcon,
|
||||||
} from "../../icons/ExportCommonIcons";
|
} from "../../icons/ExportCommonIcons";
|
||||||
import { useThree } from "@react-three/fiber";
|
import { useThree } from "@react-three/fiber";
|
||||||
import { useFloorItems, useZoneAssetId, useZones } from "../../../store/store";
|
import { useFloorItems, useZoneAssetId, useZones } from "../../../store/store";
|
||||||
|
@ -184,7 +184,7 @@ const List: React.FC<ListProps> = ({ items = [], remove }) => {
|
||||||
</div>
|
</div>
|
||||||
{remove && (
|
{remove && (
|
||||||
<div className="remove option">
|
<div className="remove option">
|
||||||
<RmoveIcon />
|
<RemoveIcon />
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
{item.assets && item.assets.length > 0 && (
|
{item.assets && item.assets.length > 0 && (
|
||||||
|
@ -221,7 +221,7 @@ const List: React.FC<ListProps> = ({ items = [], remove }) => {
|
||||||
</div>
|
</div>
|
||||||
{remove && (
|
{remove && (
|
||||||
<div className="remove option">
|
<div className="remove option">
|
||||||
<RmoveIcon />
|
<RemoveIcon />
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -9,17 +9,25 @@ import Simulation from "../simulation/simulation";
|
||||||
import Collaboration from "../collaboration/collaboration";
|
import Collaboration from "../collaboration/collaboration";
|
||||||
|
|
||||||
export default function Scene() {
|
export default function Scene() {
|
||||||
const map = useMemo(() => [
|
const map = useMemo(
|
||||||
|
() => [
|
||||||
{ name: "forward", keys: ["ArrowUp", "w", "W"] },
|
{ name: "forward", keys: ["ArrowUp", "w", "W"] },
|
||||||
{ name: "backward", keys: ["ArrowDown", "s", "S"] },
|
{ name: "backward", keys: ["ArrowDown", "s", "S"] },
|
||||||
{ name: "left", keys: ["ArrowLeft", "a", "A"] },
|
{ name: "left", keys: ["ArrowLeft", "a", "A"] },
|
||||||
{ name: "right", keys: ["ArrowRight", "d", "D"] },],
|
{ name: "right", keys: ["ArrowRight", "d", "D"] },
|
||||||
[]);
|
],
|
||||||
|
[]
|
||||||
|
);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<KeyboardControls map={map}>
|
<KeyboardControls map={map}>
|
||||||
<Canvas eventPrefix="client" gl={{ powerPreference: "high-performance", antialias: true }} onContextMenu={(e) => { e.preventDefault(); }}>
|
<Canvas
|
||||||
|
eventPrefix="client"
|
||||||
|
gl={{ powerPreference: "high-performance", antialias: true }}
|
||||||
|
onContextMenu={(e) => {
|
||||||
|
e.preventDefault();
|
||||||
|
}}
|
||||||
|
>
|
||||||
<Setup />
|
<Setup />
|
||||||
|
|
||||||
<Collaboration />
|
<Collaboration />
|
||||||
|
@ -29,7 +37,6 @@ export default function Scene() {
|
||||||
<Simulation />
|
<Simulation />
|
||||||
|
|
||||||
<Visualization />
|
<Visualization />
|
||||||
|
|
||||||
</Canvas>
|
</Canvas>
|
||||||
</KeyboardControls>
|
</KeyboardControls>
|
||||||
);
|
);
|
||||||
|
|
|
@ -12,15 +12,12 @@ import {
|
||||||
useFloatingWidget,
|
useFloatingWidget,
|
||||||
} from "../../store/visualization/useDroppedObjectsStore";
|
} from "../../store/visualization/useDroppedObjectsStore";
|
||||||
import {
|
import {
|
||||||
useAsset3dWidget,
|
|
||||||
useSocketStore,
|
useSocketStore,
|
||||||
useWidgetSubOption,
|
useWidgetSubOption,
|
||||||
useZones,
|
|
||||||
} from "../../store/store";
|
} from "../../store/store";
|
||||||
import { getZone2dData } from "../../services/visulization/zone/getZoneData";
|
import { getZone2dData } from "../../services/visulization/zone/getZoneData";
|
||||||
import { generateUniqueId } from "../../functions/generateUniqueId";
|
import { generateUniqueId } from "../../functions/generateUniqueId";
|
||||||
import { determinePosition } from "./functions/determinePosition";
|
import { determinePosition } from "./functions/determinePosition";
|
||||||
import { addingFloatingWidgets } from "../../services/visulization/zone/addFloatingWidgets";
|
|
||||||
import SocketRealTimeViz from "./socket/realTimeVizSocket.dev";
|
import SocketRealTimeViz from "./socket/realTimeVizSocket.dev";
|
||||||
import RenderOverlay from "../../components/templates/Overlay";
|
import RenderOverlay from "../../components/templates/Overlay";
|
||||||
import ConfirmationPopup from "../../components/layout/confirmationPopup/ConfirmationPopup";
|
import ConfirmationPopup from "../../components/layout/confirmationPopup/ConfirmationPopup";
|
||||||
|
@ -68,20 +65,15 @@ const RealTimeVisulization: React.FC = () => {
|
||||||
const containerRef = useRef<HTMLDivElement>(null);
|
const containerRef = useRef<HTMLDivElement>(null);
|
||||||
const { isPlaying } = usePlayButtonStore();
|
const { isPlaying } = usePlayButtonStore();
|
||||||
const { activeModule } = useModuleStore();
|
const { activeModule } = useModuleStore();
|
||||||
const [droppedObjects, setDroppedObjects] = useState<any[]>([]);
|
|
||||||
const [zonesData, setZonesData] = useState<FormattedZoneData>({});
|
const [zonesData, setZonesData] = useState<FormattedZoneData>({});
|
||||||
const { selectedZone, setSelectedZone } = useSelectedZoneStore();
|
const { selectedZone, setSelectedZone } = useSelectedZoneStore();
|
||||||
|
|
||||||
const { rightSelect, setRightSelect } = useRightSelected();
|
const { setRightSelect } = useRightSelected();
|
||||||
const { editWidgetOptions, setEditWidgetOptions } =
|
const { editWidgetOptions } = useEditWidgetOptionsStore();
|
||||||
useEditWidgetOptionsStore();
|
|
||||||
const { rightClickSelected, setRightClickSelected } = useRightClickSelected();
|
const { rightClickSelected, setRightClickSelected } = useRightClickSelected();
|
||||||
const [openConfirmationPopup, setOpenConfirmationPopup] = useState(false);
|
const [openConfirmationPopup, setOpenConfirmationPopup] = useState(false);
|
||||||
|
const { setFloatingWidget } = useFloatingWidget();
|
||||||
// const [floatingWidgets, setFloatingWidgets] = useState<Record<string, { zoneName: string; zoneId: string; objects: any[] }>>({});
|
const { widgetSubOption } = useWidgetSubOption();
|
||||||
const { floatingWidget, setFloatingWidget } = useFloatingWidget();
|
|
||||||
const { widgetSelect, setWidgetSelect } = useAsset3dWidget();
|
|
||||||
const { widgetSubOption, setWidgetSubOption } = useWidgetSubOption();
|
|
||||||
const { visualizationSocket } = useSocketStore();
|
const { visualizationSocket } = useSocketStore();
|
||||||
const { setSelectedChartId } = useWidgetStore();
|
const { setSelectedChartId } = useWidgetStore();
|
||||||
|
|
||||||
|
@ -99,11 +91,10 @@ const RealTimeVisulization: React.FC = () => {
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
async function GetZoneData() {
|
async function GetZoneData() {
|
||||||
const email = localStorage.getItem("email") || "";
|
const email = localStorage.getItem("email") ?? "";
|
||||||
const organization = email?.split("@")[1]?.split(".")[0];
|
const organization = email?.split("@")[1]?.split(".")[0];
|
||||||
try {
|
try {
|
||||||
const response = await getZone2dData(organization);
|
const response = await getZone2dData(organization);
|
||||||
// console.log('response: ', response);
|
|
||||||
|
|
||||||
if (!Array.isArray(response)) {
|
if (!Array.isArray(response)) {
|
||||||
return;
|
return;
|
||||||
|
@ -125,7 +116,9 @@ const RealTimeVisulization: React.FC = () => {
|
||||||
{}
|
{}
|
||||||
);
|
);
|
||||||
setZonesData(formattedData);
|
setZonesData(formattedData);
|
||||||
} catch (error) {}
|
} catch (error) {
|
||||||
|
console.log(error);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
GetZoneData();
|
GetZoneData();
|
||||||
|
@ -151,12 +144,10 @@ const RealTimeVisulization: React.FC = () => {
|
||||||
});
|
});
|
||||||
}, [selectedZone]);
|
}, [selectedZone]);
|
||||||
|
|
||||||
// useEffect(() => {}, [floatingWidgets]);
|
|
||||||
|
|
||||||
const handleDrop = async (event: React.DragEvent<HTMLDivElement>) => {
|
const handleDrop = async (event: React.DragEvent<HTMLDivElement>) => {
|
||||||
event.preventDefault();
|
event.preventDefault();
|
||||||
try {
|
try {
|
||||||
const email = localStorage.getItem("email") || "";
|
const email = localStorage.getItem("email") ?? "";
|
||||||
const organization = email?.split("@")[1]?.split(".")[0];
|
const organization = email?.split("@")[1]?.split(".")[0];
|
||||||
|
|
||||||
const data = event.dataTransfer.getData("text/plain");
|
const data = event.dataTransfer.getData("text/plain");
|
||||||
|
@ -172,8 +163,8 @@ const RealTimeVisulization: React.FC = () => {
|
||||||
const relativeY = event.clientY - rect.top;
|
const relativeY = event.clientY - rect.top;
|
||||||
|
|
||||||
// Widget dimensions
|
// Widget dimensions
|
||||||
const widgetWidth = droppedData.width || 125;
|
const widgetWidth = droppedData.width ?? 125;
|
||||||
const widgetHeight = droppedData.height || 100;
|
const widgetHeight = droppedData.height ?? 100;
|
||||||
|
|
||||||
// Center the widget at cursor
|
// Center the widget at cursor
|
||||||
const centerOffsetX = widgetWidth / 2;
|
const centerOffsetX = widgetWidth / 2;
|
||||||
|
@ -275,7 +266,7 @@ const RealTimeVisulization: React.FC = () => {
|
||||||
return () => {
|
return () => {
|
||||||
document.removeEventListener("mousedown", handleClickOutside);
|
document.removeEventListener("mousedown", handleClickOutside);
|
||||||
};
|
};
|
||||||
}, [setRightClickSelected]);
|
}, [setRightClickSelected, setRightSelect]);
|
||||||
|
|
||||||
const [canvasDimensions, setCanvasDimensions] = useState({
|
const [canvasDimensions, setCanvasDimensions] = useState({
|
||||||
width: 0,
|
width: 0,
|
||||||
|
@ -340,6 +331,7 @@ const RealTimeVisulization: React.FC = () => {
|
||||||
borderRadius:
|
borderRadius:
|
||||||
isPlaying || activeModule !== "visualization" ? "" : "6px",
|
isPlaying || activeModule !== "visualization" ? "" : "6px",
|
||||||
}}
|
}}
|
||||||
|
role="application"
|
||||||
onDrop={(event) => handleDrop(event)}
|
onDrop={(event) => handleDrop(event)}
|
||||||
onDragOver={(event) => event.preventDefault()}
|
onDragOver={(event) => event.preventDefault()}
|
||||||
>
|
>
|
||||||
|
|
|
@ -3,9 +3,8 @@ import Dropped3dWidgets from './widgets/3d/Dropped3dWidget'
|
||||||
import ZoneCentreTarget from './zone/zoneCameraTarget'
|
import ZoneCentreTarget from './zone/zoneCameraTarget'
|
||||||
import ZoneAssets from './zone/zoneAssets'
|
import ZoneAssets from './zone/zoneAssets'
|
||||||
import MqttEvents from '../../services/factoryBuilder/mqtt/mqttEvents'
|
import MqttEvents from '../../services/factoryBuilder/mqtt/mqttEvents'
|
||||||
import DrieHtmlTemp from './mqttTemp/drieHtmlTemp'
|
|
||||||
|
|
||||||
const Visualization = () => {
|
const Visualization:React.FC = () => {
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
|
|
||||||
|
|
|
@ -12,3 +12,10 @@ input[type="password"]::-webkit-clear-button, /* For Chrome/Safari clear button
|
||||||
input[type="password"]::-webkit-inner-spin-button { /* Just in case */
|
input[type="password"]::-webkit-inner-spin-button { /* Just in case */
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
button{
|
||||||
|
border: none;
|
||||||
|
outline: none;
|
||||||
|
background: none;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
|
@ -675,7 +675,8 @@
|
||||||
color: var(--primary-color);
|
color: var(--primary-color);
|
||||||
border-radius: #{$border-radius-small};
|
border-radius: #{$border-radius-small};
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
outline: none;
|
||||||
|
border: none;
|
||||||
path {
|
path {
|
||||||
stroke: var(--primary-color);
|
stroke: var(--primary-color);
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue