diff --git a/static/frontend/src/App.jsx b/static/frontend/src/App.jsx index 99a21c1..897e266 100644 --- a/static/frontend/src/App.jsx +++ b/static/frontend/src/App.jsx @@ -2,202 +2,220 @@ import { useState, useEffect } from 'react' import './App.css' + const TextTile = ({ label }) => ( -
- {label} -
+
+ {label} +
); -const ImageTile = ({ imageUrl, label }) => ( -
- {label} - {label} -
+const ImageTile = ({ imageUrl, label, enabled, toggleEnabled }) => ( +
+ {label} + {label} +
); const ClockTile = ({ id }) => { - const [time, setTime] = useState(""); - const [date, setDate] = useState(""); + const [time, setTime] = useState(""); + 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); - }, []); + 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); + }, []); - return ( -
- {time} - {date} -
- ); + return ( +
+ {time} + {date} +
+ ); }; const GaugeTile = ({ gauges }) => ( -
-
- {gauges.map((g, index) => ( -
-
- {Math.round((g.value / 360) * 100)}% -
- {g.label} -
- ))} +
+
+ {gauges.map((g, index) => ( +
+
+ {Math.round((g.value / 360) * 100)}% +
+ {g.label}
+ ))}
+
); const SliderTile = ({ sliders, tileId, updateSliderValue }) => { - return ( -
- Slider Controls -
- {sliders.map((s, index) => ( -
-
- {s.label} - {s.value} -
- updateSliderValue(tileId, index, e.target.value)} - className="w-full" - /> -
- ))} + return ( +
+ Slider Controls +
+ {sliders.map((s, index) => ( +
+
+ {s.label} + {s.value}
-
- ); + updateSliderValue(tileId, index, e.target.value)} + className="w-full" + /> +
+ ))} +
+
+ ); }; const NumberTile = ({ value, label }) => ( -
- {value} - {label} -
+
+ {value} + {label} +
); 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" }, - { 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" }, - { 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" } - ]); + 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" } + ]); - 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; - }) - ); - }; - - 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; - }) - ); - }; - - const updateNumberValue = (tileId) => { - setTiles(prevTiles => - prevTiles.map(tile => { - if (tile.id === tileId && tile.type === "number") { - return { ...tile, value: tile.value + 1 }; - } - return tile; - }) - ); - }; - - return ( -
-
- {tiles.map(tile => ( -
- {tile.type === "text" && } - {tile.type === "image" && } - {tile.type === "clock" && } - {tile.type === "gauge" && } - {tile.type === "slider" && } - {tile.type === "number" && } - {(tile.type === "gauge" || tile.type === "slider" || tile.type === "number") && ( -
- {tile.type === "gauge" && tile.gauges.map((_, index) => ( - - ))} - {tile.type === "slider" && tile.sliders.map((_, index) => ( - - ))} - {tile.type === "number" && ( - - )} -
- )} -
- ))} -
-
+ 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; + }) ); -}; + }; + 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; + }) + ); + }; + + const updateNumberValue = (tileId) => { + 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; + }) + ); + }; + + return ( +
+
+ {tiles.map(tile => ( +
+ {tile.type === "text" && } + {tile.type === "image" && ( + toggleImageEnabled(tile.id)} + /> + )} + {tile.type === "clock" && } + {tile.type === "gauge" && } + {tile.type === "slider" && } + {tile.type === "number" && } + {(tile.type === "gauge" || tile.type === "slider" || tile.type === "number") && ( +
+ {tile.type === "gauge" && tile.gauges.map((_, index) => ( + + ))} + {tile.type === "slider" && tile.sliders.map((_, index) => ( + + ))} + {tile.type === "number" && ( + + )} +
+ )} +
+ ))} +
+
+ ); +}; export default App