From 127fe617ec8f666defff819a3b44ded1a99b3034 Mon Sep 17 00:00:00 2001
From: Vyacheslav K <you@example.com>
Date: Wed, 21 May 2025 14:59:02 +0300
Subject: [PATCH] added react frontend

---
 static/frontend/src/App.jsx | 319 ++++++++++++++++++------------------
 1 file changed, 162 insertions(+), 157 deletions(-)

diff --git a/static/frontend/src/App.jsx b/static/frontend/src/App.jsx
index 897e266..5ea8fd5 100644
--- a/static/frontend/src/App.jsx
+++ b/static/frontend/src/App.jsx
@@ -2,17 +2,16 @@ import { useState, useEffect } from 'react'
 import './App.css'
 
 
-
 const TextTile = ({ label }) => (
   <div className="tile-content">
-    <span className="text-purple-400 text-lg font-semibold">{label}</span>
+      <span className="text-purple-400 text-lg font-semibold">{label}</span>
   </div>
 );
 
 const ImageTile = ({ imageUrl, label, enabled, toggleEnabled }) => (
   <div className="tile-content cursor-pointer" onClick={toggleEnabled}>
-    <img src={imageUrl} className="rounded-lg w-[6.3rem] h-[6.3rem] object-cover" alt={label} />
-    <span className="text-purple-400 text-lg font-semibold">{label}</span>
+      <img src={imageUrl} className="rounded-lg w-[6.3rem] h-[6.3rem] object-cover" alt={label} />
+      <span className="text-purple-400 text-lg font-semibold">{label}</span>
   </div>
 );
 
@@ -21,201 +20,207 @@ const ClockTile = ({ id }) => {
   const [date, setDate] = useState("");
 
   useEffect(() => {
-    const updateClock = () => {
-      const now = new Date();
-      const time = now.toLocaleTimeString('ru-RU', { hour12: false });
-      const options = { weekday: 'short', day: 'numeric', month: 'long', year: 'numeric' };
-      const date = now.toLocaleDateString('ru-RU', options)
-        .replace(/,/, '')
-        .replace(/(\d+)\s(\S+)/, '$1 $2')
-        .replace(/г\./, '');
-      setTime(time);
-      setDate(date.charAt(0).toUpperCase() + date.slice(1));
-    };
-    updateClock();
-    const interval = setInterval(updateClock, 1000);
-    return () => clearInterval(interval);
+      const updateClock = () => {
+          const now = new Date();
+          const time = now.toLocaleTimeString('ru-RU', { hour12: false });
+          const options = { weekday: 'short', day: 'numeric', month: 'long', year: 'numeric' };
+          const date = now.toLocaleDateString('ru-RU', options)
+              .replace(/,/, '')
+              .replace(/(\d+)\s(\S+)/, '$1 $2')
+              .replace(/г\./, '');
+          setTime(time);
+          setDate(date.charAt(0).toUpperCase() + date.slice(1));
+      };
+      updateClock();
+      const interval = setInterval(updateClock, 1000);
+      return () => clearInterval(interval);
   }, []);
 
   return (
-    <div className="tile-content">
-      <span className="text-5xl font-bold text-purple-200">{time}</span>
-      <span className="text-purple-400 text-lg font-semibold">{date}</span>
-    </div>
+      <div className="tile-content">
+          <span className="text-5xl font-bold text-purple-200">{time}</span>
+          <span className="text-purple-400 text-lg font-semibold">{date}</span>
+      </div>
   );
 };
 
 const GaugeTile = ({ gauges }) => (
   <div className="tile-content gauge-tile-content">
-    <div className="flex flex-col gap-4">
-      {gauges.map((g, index) => (
-        <div key={index} className="flex items-center gap-4">
-          <div className="gauge" style={{ "--value": `${g.value}deg` }}>
-            <span>{Math.round((g.value / 360) * 100)}%</span>
-          </div>
-          <span className="text-purple-400 text-lg font-semibold">{g.label}</span>
-        </div>
-      ))}
-    </div>
+      <div className="flex flex-col gap-4">
+          {gauges.map((g, index) => (
+              <div key={index} className="flex items-center gap-4">
+                  <div className="gauge" style={{ "--value": `${g.value}deg` }}>
+                      <span>{Math.round((g.value / 360) * 100)}%</span>
+                  </div>
+                  <span className="text-purple-400 text-lg font-semibold">{g.label}</span>
+              </div>
+          ))}
+      </div>
   </div>
 );
 
 const SliderTile = ({ sliders, tileId, updateSliderValue }) => {
   return (
-    <div className="tile-content">
-      <span className="text-purple-400 text-lg font-semibold">Slider Controls</span>
-      <div className="flex flex-col w-full gap-4">
-        {sliders.map((s, index) => (
-          <div key={index} className="flex flex-col items-start">
-            <div className="flex items-center gap-2">
-              <span className="text-purple-400 text-sm font-semibold">{s.label}</span>
-              <span className="text-purple-300 text-sm font-normal">{s.value}</span>
-            </div>
-            <input
-              type="range"
-              min="0"
-              max="100"
-              value={s.value}
-              onChange={(e) => updateSliderValue(tileId, index, e.target.value)}
-              className="w-full"
-            />
+      <div className="tile-content">
+          <span className="text-purple-400 text-lg font-semibold">Slider Controls</span>
+          <div className="flex flex-col w-full gap-4">
+              {sliders.map((s, index) => (
+                  <div key={index} className="flex flex-col items-start">
+                      <div className="flex items-center gap-2">
+                          <span className="text-purple-400 text-sm font-semibold">{s.label}</span>
+                          <span className="text-purple-300 text-sm font-normal">{s.value}</span>
+                      </div>
+                      <input
+                          type="range"
+                          min="0"
+                          max="100"
+                          value={s.value}
+                          onChange={(e) => updateSliderValue(tileId, index, e.target.value)}
+                          className="w-full"
+                      />
+                  </div>
+              ))}
           </div>
-        ))}
       </div>
-    </div>
   );
 };
 
 const NumberTile = ({ value, label }) => (
   <div className="tile-content">
-    <span className="text-5xl font-bold text-purple-200">{value}</span>
-    <span className="text-purple-400 text-lg font-semibold">{label}</span>
+      <span className="text-5xl font-bold text-purple-200">{value}</span>
+      <span className="text-purple-400 text-lg font-semibold">{label}</span>
   </div>
 );
 
 const App = () => {
   const [tiles, setTiles] = useState([
-    { id: 1, type: "text", label: "Tile 1" },
-    { id: 2, type: "gauge", gauges: [{ value: 75, label: "Metric 1" }, { value: 120, label: "Metric 2" }] },
-    { id: 3, type: "image", imageUrl: "https://cloud.viadev.su/storage/branding_media/d076be24-e369-41ca-9b24-5f94efc5ecfd.png", label: "Image 1", enabled: true },
-    { id: 4, type: "text", label: "Tile 4" },
-    { id: 5, type: "image", imageUrl: "https://cloud.viadev.su/storage/branding_media/d076be24-e369-41ca-9b24-5f94efc5ecfd.png", label: "Image 2", enabled: true },
-    { id: 6, type: "clock" },
-    { id: 7, type: "slider", sliders: [{ value: 50, label: "Slider 1" }, { value: 75, label: "Slider 2" }] },
-    { id: 8, type: "text", label: "Tile 5 (Double)" },
-    { id: 9, type: "text", label: "Tile 6" },
-    { id: 10, type: "number", value: 42, label: "Data Point" }
+      { id: 1, type: "text", label: "Tile 1" },
+      { id: 2, type: "gauge", gauges: [{ value: 75, label: "Metric 1" }, { value: 120, label: "Metric 2" }] },
+      { id: 3, type: "image", imageUrl: "https://cloud.viadev.su/storage/branding_media/d076be24-e369-41ca-9b24-5f94efc5ecfd.png", label: "Image 1", enabled: true },
+      { id: 4, type: "break" },
+      { id: 5, type: "text", label: "Tile 4" },
+      { id: 6, type: "image", imageUrl: "https://cloud.viadev.su/storage/branding_media/d076be24-e369-41ca-9b24-5f94efc5ecfd.png", label: "Image 2", enabled: true },
+      { id: 7, type: "clock" },
+      { id: 8, type: "slider", sliders: [{ value: 50, label: "Slider 1" }, { value: 75, label: "Slider 2" }] },
+      { id: 9, type: "text", label: "Tile 5 (Double)" },
+      { id: 10, type: "text", label: "Tile 6" },
+      { id: 11, type: "number", value: 42, label: "Data Point" }
   ]);
 
   const updateGaugeValue = (tileId, gaugeIndex) => {
-    setTiles(prevTiles =>
-      prevTiles.map(tile => {
-        if (tile.id === tileId && tile.type === "gauge") {
-          const newGauges = [...tile.gauges];
-          newGauges[gaugeIndex] = {
-            ...newGauges[gaugeIndex],
-            value: (newGauges[gaugeIndex].value + 10) % 360
-          };
-          return { ...tile, gauges: newGauges };
-        }
-        return tile;
-      })
-    );
+      setTiles(prevTiles =>
+          prevTiles.map(tile => {
+              if (tile.id === tileId && tile.type === "gauge") {
+                  const newGauges = [...tile.gauges];
+                  newGauges[gaugeIndex] = {
+                      ...newGauges[gaugeIndex],
+                      value: (newGauges[gaugeIndex].value + 10) % 360
+                  };
+                  return { ...tile, gauges: newGauges };
+              }
+              return tile;
+          })
+      );
   };
 
   const updateSliderValue = (tileId, sliderIndex, newValue) => {
-    setTiles(prevTiles =>
-      prevTiles.map(tile => {
-        if (tile.id === tileId && tile.type === "slider") {
-          const newSliders = [...tile.sliders];
-          newSliders[sliderIndex] = {
-            ...newSliders[sliderIndex],
-            value: parseInt(newValue)
-          };
-          return { ...tile, sliders: newSliders };
-        }
-        return tile;
-      })
-    );
+      setTiles(prevTiles =>
+          prevTiles.map(tile => {
+              if (tile.id === tileId && tile.type === "slider") {
+                  const newSliders = [...tile.sliders];
+                  newSliders[sliderIndex] = {
+                      ...newSliders[sliderIndex],
+                      value: parseInt(newValue)
+                  };
+                  return { ...tile, sliders: newSliders };
+              }
+              return tile;
+          })
+      );
   };
 
   const updateNumberValue = (tileId) => {
-    setTiles(prevTiles =>
-      prevTiles.map(tile => {
-        if (tile.id === tileId && tile.type === "number") {
-          return { ...tile, value: tile.value + 1 };
-        }
-        return tile;
-      })
-    );
+      setTiles(prevTiles =>
+          prevTiles.map(tile => {
+              if (tile.id === tileId && tile.type === "number") {
+                  return { ...tile, value: tile.value + 1 };
+              }
+              return tile;
+          })
+      );
   };
 
   const toggleImageEnabled = (tileId) => {
-    setTiles(prevTiles =>
-      prevTiles.map(tile => {
-        if (tile.id === tileId && tile.type === "image") {
-          return { ...tile, enabled: !tile.enabled };
-        }
-        return tile;
-      })
-    );
+      setTiles(prevTiles =>
+          prevTiles.map(tile => {
+              if (tile.id === tileId && tile.type === "image") {
+                  return { ...tile, enabled: !tile.enabled };
+              }
+              return tile;
+          })
+      );
   };
 
   return (
-    <div className="flex flex-col gap-4">
-      <div className="flex flex-wrap gap-4">
-        {tiles.map(tile => (
-          <div
-            key={tile.id}
-            className={`glass rounded-lg ${tile.type === "gauge" || tile.type === "slider" || tile.type === "clock" ? "w-96 h-48" : "w-48 h-48"} relative ${tile.type === "image" && tile.enabled ? "glass_enabled" : ""}`}
-          >
-            {tile.type === "text" && <TextTile label={tile.label} />}
-            {tile.type === "image" && (
-              <ImageTile
-                imageUrl={tile.imageUrl}
-                label={tile.label}
-                enabled={tile.enabled}
-                toggleEnabled={() => toggleImageEnabled(tile.id)}
-              />
-            )}
-            {tile.type === "clock" && <ClockTile id={tile.id} />}
-            {tile.type === "gauge" && <GaugeTile gauges={tile.gauges} />}
-            {tile.type === "slider" && <SliderTile sliders={tile.sliders} tileId={tile.id} updateSliderValue={updateSliderValue} />}
-            {tile.type === "number" && <NumberTile value={tile.value} label={tile.label} />}
-            {(tile.type === "gauge" || tile.type === "slider" || tile.type === "number") && (
-              <div className="absolute top-2 right-2 flex gap-2">
-                {tile.type === "gauge" && tile.gauges.map((_, index) => (
-                  <button
-                    key={index}
-                    onClick={() => updateGaugeValue(tile.id, index)}
-                    className="bg-purple-600 text-white text-xs px-2 py-1 rounded"
-                  >
-                    Update Gauge {index + 1}
-                  </button>
-                ))}
-                {tile.type === "slider" && tile.sliders.map((_, index) => (
-                  <button
-                    key={index}
-                    onClick={() => updateSliderValue(tile.id, index, (parseInt(tile.sliders[index].value) + 10) % 101)}
-                    className="bg-purple-600 text-white text-xs px-2 py-1 rounded"
-                  >
-                    Increment Slider {index + 1}
-                  </button>
-                ))}
-                {tile.type === "number" && (
-                  <button
-                    onClick={() => updateNumberValue(tile.id)}
-                    className="bg-purple-600 text-white text-xs px-2 py-1 rounded"
-                  >
-                    Increment Number
-                  </button>
-                )}
-              </div>
-            )}
+      <div className="flex flex-col gap-4">
+          <div className="flex flex-wrap gap-4">
+              {tiles.map(tile => (
+                  <div key={tile.id}>
+                      {tile.type === "break" ? (
+                          <div className="w-full"></div>
+                      ) : (
+                          <div
+                              className={`glass rounded-lg ${tile.type === "gauge" || tile.type === "slider" || tile.type === "clock" ? "w-96 h-48" : "w-48 h-48"} relative ${tile.type === "image" && tile.enabled ? "glass_enabled" : ""}`}
+                          >
+                              {tile.type === "text" && <TextTile label={tile.label} />}
+                              {tile.type === "image" && (
+                                  <ImageTile
+                                      imageUrl={tile.imageUrl}
+                                      label={tile.label}
+                                      enabled={tile.enabled}
+                                      toggleEnabled={() => toggleImageEnabled(tile.id)}
+                                  />
+                              )}
+                              {tile.type === "clock" && <ClockTile id={tile.id} />}
+                              {tile.type === "gauge" && <GaugeTile gauges={tile.gauges} />}
+                              {tile.type === "slider" && <SliderTile sliders={tile.sliders} tileId={tile.id} updateSliderValue={updateSliderValue} />}
+                              {tile.type === "number" && <NumberTile value={tile.value} label={tile.label} />}
+                              {(tile.type === "gauge" || tile.type === "slider" || tile.type === "number") && (
+                                  <div className="absolute top-2 right-2 flex gap-2">
+                                      {tile.type === "gauge" && tile.gauges.map((_, index) => (
+                                          <button
+                                              key={index}
+                                              onClick={() => updateGaugeValue(tile.id, index)}
+                                              className="bg-purple-600 text-white text-xs px-2 py-1 rounded"
+                                          >
+                                              Update Gauge {index + 1}
+                                          </button>
+                                      ))}
+                                      {tile.type === "slider" && tile.sliders.map((_, index) => (
+                                          <button
+                                              key={index}
+                                              onClick={() => updateSliderValue(tile.id, index, (parseInt(tile.sliders[index].value) + 10) % 101)}
+                                              className="bg-purple-600 text-white text-xs px-2 py-1 rounded"
+                                          >
+                                              Increment Slider {index + 1}
+                                          </button>
+                                      ))}
+                                      {tile.type === "number" && (
+                                          <button
+                                              onClick={() => updateNumberValue(tile.id)}
+                                              className="bg-purple-600 text-white text-xs px-2 py-1 rounded"
+                                          >
+                                              Increment Number
+                                          </button>
+                                      )}
+                                  </div>
+                              )}
+                          </div>
+                      )}
+                  </div>
+              ))}
           </div>
-        ))}
       </div>
-    </div>
   );
 };
 export default App