first commit

2025-03-25 11:47:41 +05:30
commit 61b3c4ee2c
211 changed files with 36430 additions and 0 deletions
--- a/app/src/components/layout/sidebarLeft/visualization/Templates.tsx
+++ b/app/src/components/layout/sidebarLeft/visualization/Templates.tsx
@@ -0,0 +1,125 @@
+import useTemplateStore from "../../../../store/useTemplateStore";
+import { useSelectedZoneStore } from "../../../../store/useZoneStore";
+
+const Templates = () => {
+  const { templates, removeTemplate } = useTemplateStore();
+  const { setSelectedZone } = useSelectedZoneStore();
+
+  console.log("templates: ", templates);
+  const handleDeleteTemplate = (id: string) => {
+    removeTemplate(id);
+  };
+
+  const handleLoadTemplate = (template: any) => {
+    setSelectedZone((prev) => ({
+      ...prev,
+      panelOrder: template.panelOrder,
+      activeSides: Array.from(
+        new Set([...prev.activeSides, ...template.panelOrder])
+      ),
+      widgets: template.widgets,
+    }));
+  };
+
+  return (
+    <div
+      className="template-list"
+      style={{
+        display: "grid",
+        gridTemplateColumns: "repeat(auto-fill, minmax(180px, 1fr))",
+        gap: "1rem",
+        padding: "1rem",
+      }}
+    >
+      {templates.map((template) => (
+        <div
+          key={template.id}
+          className="template-item"
+          style={{
+            border: "1px solid #e0e0e0",
+            borderRadius: "8px",
+            padding: "1rem",
+            transition: "box-shadow 0.3s ease",
+          }}
+        >
+          {template.snapshot && (
+            <div style={{ position: "relative", paddingBottom: "56.25%" }}>
+              {" "}
+              {/* 16:9 aspect ratio */}
+              <img
+                src={template.snapshot} // Corrected from template.image to template.snapshot
+                alt={`${template.name} preview`}
+                style={{
+                  position: "absolute",
+                  width: "100%",
+                  height: "100%",
+                  objectFit: "contain",
+                  borderRadius: "4px",
+                  cursor: "pointer",
+                  transition: "transform 0.3s ease",
+                  // ':hover': {
+                  //   transform: 'scale(1.05)'
+                  // }
+                }}
+                onClick={() => handleLoadTemplate(template)}
+              />
+            </div>
+          )}
+          <div
+            style={{
+              display: "flex",
+              justifyContent: "space-between",
+              alignItems: "center",
+              marginTop: "0.5rem",
+            }}
+          >
+            <div
+              onClick={() => handleLoadTemplate(template)}
+              style={{
+                cursor: "pointer",
+                fontWeight: "500",
+                // ':hover': {
+                //   textDecoration: 'underline'
+                // }
+              }}
+            >
+              {template.name}
+            </div>
+            <button
+              onClick={() => handleDeleteTemplate(template.id)}
+              style={{
+                padding: "0.25rem 0.5rem",
+                background: "#ff4444",
+                color: "white",
+                border: "none",
+                borderRadius: "4px",
+                cursor: "pointer",
+                transition: "opacity 0.3s ease",
+                // ':hover': {
+                //   opacity: 0.8
+                // }
+              }}
+              aria-label="Delete template"
+            >
+              Delete
+            </button>
+          </div>
+        </div>
+      ))}
+      {templates.length === 0 && (
+        <div
+          style={{
+            textAlign: "center",
+            color: "#666",
+            padding: "2rem",
+            gridColumn: "1 / -1",
+          }}
+        >
+          No saved templates yet. Create one in the visualization view!
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default Templates;