feat: add AisleProperties component with texture and type selection

app/src/components/layout/sidebarRight/SideBarRight.tsx

@@ -67,142 +67,142 @@ const SideBarRight: React.FC = () => {
       }`}
     >
       <Header />
-      {toggleUIRight && !isVersionSaved && (
-        <div className="sidebar-actions-container">
-          {activeModule !== "simulation" && (
-            <button
-              id="sidebar-action-list-properties"
-              className={`sidebar-action-list ${
-                subModule === "properties" ? "active" : ""
-              }`}
-              onClick={() => {
-                setSubModule("properties");
-                setVersionHistory(false);
-              }}
-            >
-              <div className="tooltip">properties</div>
-              <PropertiesIcon isActive={subModule === "properties"} />
-            </button>
+      {toggleUIRight && (
+        <>
+          {!isVersionSaved && (
+            <div className="sidebar-actions-container">
+              {activeModule !== "simulation" && (
+                <button
+                  id="sidebar-action-list-properties"
+                  className={`sidebar-action-list ${
+                    subModule === "properties" ? "active" : ""
+                  }`}
+                  onClick={() => {
+                    setSubModule("properties");
+                    setVersionHistory(false);
+                  }}
+                >
+                  <div className="tooltip">properties</div>
+                  <PropertiesIcon isActive={subModule === "properties"} />
+                </button>
+              )}
+              {activeModule === "simulation" && (
+                <>
+                  <button
+                    id="sidebar-action-list-simulation"
+                    className={`sidebar-action-list ${
+                      subModule === "simulations" ? "active" : ""
+                    }`}
+                    onClick={() => {
+                      setSubModule("simulations");
+                      setVersionHistory(false);
+                    }}
+                  >
+                    <div className="tooltip">simulations</div>
+                    <SimulationIcon isActive={subModule === "simulations"} />
+                  </button>
+                  <button
+                    id="sidebar-action-list-mechanics"
+                    className={`sidebar-action-list ${
+                      subModule === "mechanics" ? "active" : ""
+                    }`}
+                    onClick={() => {
+                      setSubModule("mechanics");
+                      setVersionHistory(false);
+                    }}
+                  >
+                    <div className="tooltip">mechanics</div>
+                    <MechanicsIcon isActive={subModule === "mechanics"} />
+                  </button>
+                  <button
+                    id="sidebar-action-list-analysis"
+                    className={`sidebar-action-list ${
+                      subModule === "analysis" ? "active" : ""
+                    }`}
+                    onClick={() => {
+                      setSubModule("analysis");
+                      setVersionHistory(false);
+                    }}
+                  >
+                    <div className="tooltip">analysis</div>
+                    <AnalysisIcon isActive={subModule === "analysis"} />
+                  </button>
+                </>
+              )}
+            </div>
           )}
-          {activeModule === "simulation" && (
-            <>
-              <button
-                id="sidebar-action-list-simulation"
-                className={`sidebar-action-list ${
-                  subModule === "simulations" ? "active" : ""
-                }`}
-                onClick={() => {
-                  setSubModule("simulations");
-                  setVersionHistory(false);
-                }}
-              >
-                <div className="tooltip">simulations</div>
-                <SimulationIcon isActive={subModule === "simulations"} />
-              </button>
-              <button
-                id="sidebar-action-list-mechanics"
-                className={`sidebar-action-list ${
-                  subModule === "mechanics" ? "active" : ""
-                }`}
-                onClick={() => {
-                  setSubModule("mechanics");
-                  setVersionHistory(false);
-                }}
-              >
-                <div className="tooltip">mechanics</div>
-                <MechanicsIcon isActive={subModule === "mechanics"} />
-              </button>
-              <button
-                id="sidebar-action-list-analysis"
-                className={`sidebar-action-list ${
-                  subModule === "analysis" ? "active" : ""
-                }`}
-                onClick={() => {
-                  setSubModule("analysis");
-                  setVersionHistory(false);
-                }}
-              >
-                <div className="tooltip">analysis</div>
-                <AnalysisIcon isActive={subModule === "analysis"} />
-              </button>
-            </>
+
+          {viewVersionHistory && (
+            <div className="sidebar-right-container">
+              <div className="sidebar-right-content-container">
+                <VersionHistory />
+              </div>
+            </div>
           )}
-        </div>
+
+          {/* process builder */}
+          {!viewVersionHistory &&
+            subModule === "properties" &&
+            activeModule !== "visualization" &&
+            !selectedFloorItem && (
+              <div className="sidebar-right-container">
+                <div className="sidebar-right-content-container">
+                  <GlobalProperties />
+                </div>
+              </div>
+            )}
+          {!viewVersionHistory &&
+            subModule === "properties" &&
+            activeModule !== "visualization" &&
+            selectedFloorItem && (
+              <div className="sidebar-right-container">
+                <div className="sidebar-right-content-container">
+                  <AsstePropertiies />
+                </div>
+              </div>
+            )}
+
+          {!viewVersionHistory &&
+            subModule === "zoneProperties" &&
+            (activeModule === "builder" || activeModule === "simulation") && (
+              <div className="sidebar-right-container">
+                <div className="sidebar-right-content-container">
+                  <ZoneProperties />
+                </div>
+              </div>
+            )}
+          {/* simulation */}
+          {!isVersionSaved &&
+            !viewVersionHistory &&
+            activeModule === "simulation" && (
+              <>
+                {subModule === "simulations" && (
+                  <div className="sidebar-right-container">
+                    <div className="sidebar-right-content-container">
+                      <Simulations />
+                    </div>
+                  </div>
+                )}
+                {subModule === "mechanics" && (
+                  <div className="sidebar-right-container">
+                    <div className="sidebar-right-content-container">
+                      <EventProperties />
+                    </div>
+                  </div>
+                )}
+                {subModule === "analysis" && (
+                  <div className="sidebar-right-container">
+                    <div className="sidebar-right-content-container">
+                      <Analysis />
+                    </div>
+                  </div>
+                )}
+              </>
+            )}
+          {/* realtime visualization */}
+          {activeModule === "visualization" && <Visualization />}
+        </>
       )}
-
-      {toggleUIRight && viewVersionHistory && (
-        <div className="sidebar-right-container">
-          <div className="sidebar-right-content-container">
-            <VersionHistory />
-          </div>
-        </div>
-      )}
-
-      {/* process builder */}
-      {toggleUIRight &&
-        !viewVersionHistory &&
-        subModule === "properties" &&
-        activeModule !== "visualization" &&
-        !selectedFloorItem && (
-          <div className="sidebar-right-container">
-            <div className="sidebar-right-content-container">
-              <GlobalProperties />
-            </div>
-          </div>
-        )}
-      {toggleUIRight &&
-        !viewVersionHistory &&
-        subModule === "properties" &&
-        activeModule !== "visualization" &&
-        selectedFloorItem && (
-          <div className="sidebar-right-container">
-            <div className="sidebar-right-content-container">
-              <AsstePropertiies />
-            </div>
-          </div>
-        )}
-
-      {toggleUIRight &&
-        !viewVersionHistory &&
-        subModule === "zoneProperties" &&
-        (activeModule === "builder" || activeModule === "simulation") && (
-          <div className="sidebar-right-container">
-            <div className="sidebar-right-content-container">
-              <ZoneProperties />
-            </div>
-          </div>
-        )}
-      {/* simulation */}
-      {toggleUIRight &&
-        !isVersionSaved &&
-        !viewVersionHistory &&
-        activeModule === "simulation" && (
-          <>
-            {subModule === "simulations" && (
-              <div className="sidebar-right-container">
-                <div className="sidebar-right-content-container">
-                  <Simulations />
-                </div>
-              </div>
-            )}
-            {subModule === "mechanics" && (
-              <div className="sidebar-right-container">
-                <div className="sidebar-right-content-container">
-                  <EventProperties />
-                </div>
-              </div>
-            )}
-            {subModule === "analysis" && (
-              <div className="sidebar-right-container">
-                <div className="sidebar-right-content-container">
-                  <Analysis />
-                </div>
-              </div>
-            )}
-          </>
-        )}
-      {/* realtime visualization */}
-      {toggleUIRight && activeModule === "visualization" && <Visualization />}
     </div>
   );
 };

app/src/components/layout/sidebarRight/properties/AisleProperties.tsx

@@ -0,0 +1,191 @@
+import React, { useState } from "react";
+import InputWithDropDown from "../../../ui/inputs/InputWithDropDown";
+import { ArrowIcon } from "../../../icons/ExportCommonIcons";
+
+// image imports
+import Arc from "../../../../assets/image/aisleTypes/Arc.png";
+import Arrow from "../../../../assets/image/aisleTypes/Arrow.png";
+import Arrows from "../../../../assets/image/aisleTypes/Arrows.png";
+import Circle from "../../../../assets/image/aisleTypes/Circle.png";
+import Dashed from "../../../../assets/image/aisleTypes/Dashed.png";
+import Directional from "../../../../assets/image/aisleTypes/Directional.png";
+import Dotted from "../../../../assets/image/aisleTypes/Dotted.png";
+import Solid from "../../../../assets/image/aisleTypes/Solid.png";
+
+interface TextureItem {
+  color: string;
+  id: string;
+  brief: string;
+  texture: string;
+}
+
+const AisleProperties: React.FC = () => {
+  const [collapsePresets, setCollapsePresets] = useState(false);
+  const [collapseTexture, setCollapseTexture] = useState(true);
+  const [selectedTexture, setSelectedTexture] = useState<string | null>(
+    "yellow1"
+  );
+  const [selectedType, setSelectedType] = useState<string | null>("Solid");
+
+  const aisleTextureList: TextureItem[] = [
+    { color: "gray", id: "gray", brief: "basic", texture: "" },
+    {
+      color: "yellow",
+      id: "yellow1",
+      brief: "pedestrian walkways",
+      texture: "",
+    },
+    { color: "green", id: "green1", 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: "bright-green",
+      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: "Solid",
+      id: "1",
+      thumbnail: Solid,
+    },
+    {
+      name: "Dotted",
+      id: "2",
+      thumbnail: Dotted,
+    },
+    {
+      name: "Dashed",
+      id: "3",
+      thumbnail: Dashed,
+    },
+    {
+      name: "Arrow",
+      id: "4",
+      thumbnail: Arrow,
+    },
+    {
+      name: "Contiuous Arrows",
+      id: "5",
+      thumbnail: Arrows,
+    },
+    {
+      name: "Directional",
+      id: "6",
+      thumbnail: Directional,
+    },
+    {
+      name: "Arc",
+      id: "7",
+      thumbnail: Arc,
+    },
+    {
+      name: "Circle",
+      id: "8",
+      thumbnail: Circle,
+    },
+  ];
+
+  return (
+    <div className="aisle-properties-container">
+      <div className="header">Properties</div>
+      <section>
+        <InputWithDropDown
+          label="Width"
+          value="1"
+          editableLabel
+          onChange={() => {}}
+        />
+      </section>
+
+      {/* Presets */}
+      <section>
+        <button
+          className="header"
+          onClick={() => setCollapsePresets(!collapsePresets)}
+          aria-expanded={!collapsePresets}
+        >
+          <div className="value">Presets</div>
+          <div className="icon">
+            <ArrowIcon />
+          </div>
+        </button>
+        {!collapsePresets && (
+          <div className="presets-list-container">
+            {aisleTypes.map((val) => (
+              <div className="preset-list" key={val.id}>
+                <button
+                  className={`thumbnail ${
+                    selectedType === val.name ? "selected" : ""
+                  }`}
+                  title={val.name}
+                  onClick={() => {
+                    setSelectedType(val.name);
+                  }}
+                >
+                  <img src={val.thumbnail} alt="" />
+                </button>
+              </div>
+            ))}
+          </div>
+        )}
+      </section>
+
+      {/* Texture */}
+      <section>
+        <button
+          className="header"
+          onClick={() => setCollapseTexture(!collapseTexture)}
+          aria-expanded={!collapseTexture}
+        >
+          <div className="value">Aisle Texture</div>
+          <div
+            className="icon"
+            style={{ rotate: collapseTexture ? "" : "-90deg" }}
+          >
+            <ArrowIcon />
+          </div>
+        </button>
+
+        {collapseTexture && (
+          <div className="aisle-texture-container">
+            {aisleTextureList.map((val) => (
+              <button
+                key={val.id}
+                title={val.brief || val.id}
+                className={`aisle-list ${
+                  selectedTexture === val.id ? "selected" : ""
+                }`}
+                onClick={() => setSelectedTexture(val.id)}
+                aria-pressed={selectedTexture === val.id}
+              >
+                <div className="texture-display">{val.texture}</div>
+                <div className="aisle-color">{val.color}</div>
+                <div className="aisle-brief">{`( ${val.brief} )`}</div>
+              </button>
+            ))}
+          </div>
+        )}
+      </section>
+    </div>
+  );
+};
+
+export default AisleProperties;

app/src/styles/layout/sidebar.scss

@@ -486,9 +486,6 @@
 
             .add-icon {
               transform: scale(1.1);
-
-
-
             }
 
             .kebab-icon {
@@ -539,7 +536,7 @@
             gap: 4px;
 
             .saved-history-count {
-              font-size: var(--font-size-tiny)
+              font-size: var(--font-size-tiny);
             }
           }
         }
@@ -556,7 +553,6 @@
             gap: 12px;
 
             .version-name {
-
               background: var(--background-color);
               border: 1px solid var(--border-color);
               color: var(--text-color);
@@ -588,7 +584,6 @@
                 display: flex;
                 flex-direction: column;
                 gap: 6px;
-
               }
 
               .saved-by {
@@ -597,7 +592,6 @@
                 gap: 6px;
 
                 .user-profile {
-
                   background: var(--background-color-accent);
                   color: var(--text-button-color);
                   width: 20px;
@@ -612,7 +606,6 @@
 
                 .user-name {
                   text-transform: capitalize;
-
                 }
               }
 
@@ -625,8 +618,6 @@
             }
           }
         }
-
-
       }
 
       .no-event-selected {
@@ -665,7 +656,7 @@
 
                 path {
                   stroke: var(--text-button-color);
-                  strokeWidth: 1.3;
+                  stroke-width: 1.3;
                 }
               }
             }
@@ -686,7 +677,6 @@
     max-height: 60vh;
 
     .sidebar-right-content-container {
-
       .dataSideBar {
         .inputs-wrapper {
           display: flex;
@@ -936,7 +926,7 @@
 
         path {
           stroke: var(--accent-color);
-          strokeWidth: 1.5px;
+          stroke-width: 1.5px;
         }
 
         &:hover {
@@ -1271,15 +1261,105 @@
     }
   }
 
+  .aisle-properties-container {
+    max-height: 65vh;
+    overflow: auto;
+    .aisle-texture-container {
+      max-height: 40vh;
+      overflow: auto;
+      .aisle-list {
+        width: calc(100% - 8px);
+        text-align: start;
+        padding: 4px 6px;
+        display: flex;
+        align-items: center;
+        gap: 6px;
+        border-radius: #{$border-radius-large};
+        margin: 2px 6px;
+        .texture-display {
+          height: 34px;
+          width: 34px;
+          background: #7e7e7e86;
+          border-radius: #{$border-radius-large};
+          margin-right: 4px;
+          overflow: hidden;
+        }
+        .aisle-color {
+          text-transform: capitalize;
+        }
+        .aisle-brief {
+          font-size: var(--font-size-small);
+          color: var(--input-text-color);
+        }
+        &.selected {
+          background: var(--background-color-accent);
+          color: var(--text-button-color);
+          &:hover {
+            background: var(--background-color-accent);
+          }
+        }
+        &:hover {
+          background: var(--background-color-secondary);
+        }
+      }
+    }
+    .value-field-container {
+      margin: 0;
+    }
+    .presets-list-container {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 6px;
+      padding: 6px;
+      padding-left: 7px;
+      .preset-list {
+        background: #444;
+        height: 90px;
+        width: 90px;
+        border-radius: #{$border-radius-large};
+        overflow: hidden;
+        .thumbnail {
+          height: 100%;
+          width: 100%;
+          border-radius: #{$border-radius-large};
+          outline-offset: -1px;
+          img {
+            height: 100%;
+            width: 100%;
+            object-fit: cover;
+            transition: all 0.2s;
+          }
+          &.selected {
+            outline: 2px solid var(--border-color-accent);
+            outline-offset: -2px;
+            &:hover {
+              outline: 2px solid var(--border-color-accent);
+              img {
+                transform: scale(1);
+              }
+            }
+          }
+          &:hover {
+            outline: 1px solid var(--border-color);
+            img {
+              transform: scale(1.1);
+            }
+          }
+        }
+      }
+    }
+  }
+
   .global-properties-container,
   .analysis-main-container,
   .asset-properties-container,
-  .zone-properties-container {
+  .zone-properties-container,
+  .aisle-properties-container {
     .header {
       @include flex-space-between;
       padding: 10px 12px;
       color: var(--text-color);
-
+      width: 100%;
       .input-value {
         color: inherit;
       }
@@ -1661,9 +1741,11 @@
           width: 100%;
           height: 100%;
           font-size: var(--font-size-regular);
-          background: linear-gradient(0deg,
-              rgba(37, 24, 51, 0) 0%,
-              rgba(52, 41, 61, 0.5) 100%);
+          background: linear-gradient(
+            0deg,
+            rgba(37, 24, 51, 0) 0%,
+            rgba(52, 41, 61, 0.5) 100%
+          );
           pointer-events: none;
           backdrop-filter: blur(8px);
           opacity: 0;
@@ -1740,9 +1822,6 @@
   }
 }
 
-
-
-
 .versionSaved {
   min-width: 449px;
   position: fixed;
@@ -1798,7 +1877,6 @@
       }
 
       button {
-
         font-size: var(--font-size-small);
         display: flex;
         justify-content: center;
@@ -1810,10 +1888,7 @@
         cursor: pointer;
       }
     }
-
-
   }
-
 }
 
 .dismissing {
@@ -1821,8 +1896,6 @@
 }
 
 .edit-version-popup-wrapper {
-
-
   height: 100vh;
   width: 100vw;
   background: var(--background-color-secondary);
@@ -1835,8 +1908,6 @@
     border-radius: #{$border-radius-large};
     backdrop-filter: blur(15px);
     outline: 1px solid var(--border-color);
-    padding: 6px;
-
     display: flex;
     flex-direction: column;
     gap: 30px;
@@ -1854,7 +1925,6 @@
 
       .version-name,
       .version-description {
-
         background: var(--background-color);
         backdrop-filter: blur(20px);
         border-radius: 20px;
@@ -1870,7 +1940,6 @@
           right: 8px;
           font-size: var(--font-size-tiny);
           color: var(--text-disabled);
-
         }
 
         input {
@@ -1883,7 +1952,6 @@
 
       .version-description {
         textarea {
-
           padding: 4px 8px;
           width: 100%;
           min-height: 101px;
@@ -1900,7 +1968,6 @@
       gap: 20px;
 
       .save {
-
         display: flex;
         justify-content: center;
         align-items: center;
@@ -1912,4 +1979,4 @@
       }
     }
   }
-}
+}