Viacheslav/oaip-project-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

added react frontend

Browse Source
This commit is contained in:
Vyacheslav K
2025-05-21 14:52:37 +03:00
parent cca57995d1
commit 1ab49e7d88
1 changed files with 190 additions and 172 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
static/frontend/src/App.jsx
View File

@@ -2,14 +2,15 @@ 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>
</div>
);
const ImageTile = ({ imageUrl, label }) => (
<div className="tile-content">
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>
</div>
@@ -96,9 +97,9 @@ 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: 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" },
{ 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)" },
@@ -149,16 +150,34 @@ const App = () => {
);
};
const toggleImageEnabled = (tileId) => {
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`}
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} />}
{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} />}
@@ -199,5 +218,4 @@ const App = () => {
</div>
);
};
export default App