aisle props update

This commit is contained in:
2025-08-28 18:11:54 +05:30
parent e304614df5
commit 982a8ef4aa
2 changed files with 20 additions and 35 deletions

View File

@@ -21,24 +21,25 @@ interface TextureItem {
texture: string;
}
export const aisleTextureList: TextureItem[] = [
{ color: "yellow", id: "#FBE50E", brief: "pedestrian walkways", texture: "" },
{ color: "gray", id: "#6F6F7A", brief: "basic", texture: "" },
{ color: "green", id: "#43C06D", brief: "pedestrian walkways", texture: "" },
{ color: "orange", id: "#FF711B", brief: "material flow", texture: "" },
{ color: "blue", id: "#488EF6", brief: "vehicle paths", texture: "" },
{ color: "purple", id: "#AF52DE", brief: "material flow", texture: "" },
{ color: "red", id: "#FF3B30", brief: "safety zone", texture: "" },
{ color: "bright green", id: "#66FF00", brief: "safety zone", texture: "" },
{ color: "yellow-black", id: "yellow-black", brief: "utility aisles", texture: "" },
{ color: "white-black", id: "white-black", brief: "utility aisles", texture: "" },
];
const AisleProperties: React.FC = () => {
const [collapsePresets, setCollapsePresets] = useState(false);
const [collapseTexture, setCollapseTexture] = useState(true);
const { aisleType, aisleWidth, aisleColor, dashLength, gapLength, dotRadius, aisleLength, isFlipped, setAisleType, setAisleColor, setAisleWidth, setDashLength, setGapLength, setDotRadius, setAisleLength, setIsFlipped } = useBuilderStore();
const aisleTextureList: TextureItem[] = [
{ color: "yellow", id: "#FBE50E", brief: "pedestrian walkways", texture: "" },
{ color: "gray", id: "#6F6F7A", brief: "basic", texture: "" },
{ color: "green", id: "#43C06D", brief: "pedestrian walkways", texture: "" },
{ color: "orange", id: "#FF711B", brief: "material flow", texture: "" },
{ color: "blue", id: "#488EF6", brief: "vehicle paths", texture: "" },
{ color: "purple", id: "#AF52DE", brief: "material flow", texture: "" },
{ color: "red", id: "#FF3B30", brief: "safety zone", texture: "" },
{ color: "bright green", id: "#66FF00", brief: "safety zone", texture: "" },
{ color: "yellow-black", id: "yellow-black", brief: "utility aisles", texture: "" },
{ color: "white-black", id: "white-black", brief: "utility aisles", texture: "" },
];
const aisleTypes: {
name: string;

View File

@@ -18,15 +18,7 @@ import { useSceneContext } from "../../../../modules/scene/sceneContext";
import { useVersionContext } from "../../../../modules/builder/version/versionContext";
import { useSocketStore } from "../../../../store/builder/store";
import { getUserData } from "../../../../functions/getUserData";
// import { upsertAisleApi } from "../../../../services/factoryBuilder/aisle/upsertAisleApi";
interface TextureItem {
color: string;
id: AisleColors;
brief: string;
texture: string;
}
import { aisleTextureList } from "./AisleProperties";
const SelectedAisleProperties: React.FC = () => {
const [collapsePresets, setCollapsePresets] = useState(false);
@@ -72,19 +64,6 @@ const SelectedAisleProperties: React.FC = () => {
}
}
const aisleTextureList: TextureItem[] = [
{ color: "yellow", id: "yellow", brief: "pedestrian walkways", texture: "" },
{ color: "gray", id: "gray", brief: "basic", texture: "" },
{ color: "green", id: "green", brief: "pedestrian walkways", texture: "" },
{ color: "orange", id: "orange", brief: "material flow", texture: "" },
{ color: "blue", id: "blue", brief: "vehicle paths", texture: "" },
{ color: "purple", id: "purple", brief: "material flow", texture: "" },
{ color: "red", id: "red", brief: "safety zone", texture: "" },
{ color: "bright green", id: "#66FF00", brief: "safety zone", texture: "" },
{ color: "yellow-black", id: "yellow-black", brief: "utility aisles", texture: "" },
{ color: "white-black", id: "white-black", brief: "utility aisles", texture: "" },
];
const aisleTypes: {
name: string;
type: AisleTypes;
@@ -530,7 +509,12 @@ const SelectedAisleProperties: React.FC = () => {
onClick={() => handleColorChange(val.id)}
aria-pressed={selectedAisleData.type.aisleColor === val.id}
>
<div className="texture-display">{val.texture}</div>
<div
className={`texture-display ${val.id}`}
style={{ background: val.id }}
>
{val.texture}
</div>
<div className="aisle-color">{val.color}</div>
<div className="aisle-brief">{`( ${val.brief} )`}</div>
</button>