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:59:02 +03:00
parent 1ab49e7d88
commit 127fe617ec
1 changed files with 162 additions and 157 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -2,7 +2,6 @@ import { useState, useEffect } from 'react'
import './App.css' import './App.css'
const TextTile = ({ label }) => ( const TextTile = ({ label }) => (
<div className="tile-content"> <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>
@@ -98,13 +97,14 @@ const App = () => {
{ id: 1, type: "text", label: "Tile 1" }, { id: 1, type: "text", label: "Tile 1" },
{ id: 2, type: "gauge", gauges: [{ value: 75, label: "Metric 1" }, { value: 120, label: "Metric 2" }] }, { 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: 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: 4, type: "break" },
{ id: 5, type: "image", imageUrl: "https://cloud.viadev.su/storage/branding_media/d076be24-e369-41ca-9b24-5f94efc5ecfd.png", label: "Image 2", enabled: true }, { id: 5, type: "text", label: "Tile 4" },
{ id: 6, type: "clock" }, { 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: "slider", sliders: [{ value: 50, label: "Slider 1" }, { value: 75, label: "Slider 2" }] }, { id: 7, type: "clock" },
{ id: 8, type: "text", label: "Tile 5 (Double)" }, { id: 8, type: "slider", sliders: [{ value: 50, label: "Slider 1" }, { value: 75, label: "Slider 2" }] },
{ id: 9, type: "text", label: "Tile 6" }, { id: 9, type: "text", label: "Tile 5 (Double)" },
{ id: 10, type: "number", value: 42, label: "Data Point" } { id: 10, type: "text", label: "Tile 6" },
{ id: 11, type: "number", value: 42, label: "Data Point" }
]); ]);
const updateGaugeValue = (tileId, gaugeIndex) => { const updateGaugeValue = (tileId, gaugeIndex) => {
@@ -165,8 +165,11 @@ const App = () => {
<div className="flex flex-col gap-4"> <div className="flex flex-col gap-4">
<div className="flex flex-wrap gap-4"> <div className="flex flex-wrap gap-4">
{tiles.map(tile => ( {tiles.map(tile => (
<div key={tile.id}>
{tile.type === "break" ? (
<div className="w-full"></div>
) : (
<div <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" : ""}`} 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 === "text" && <TextTile label={tile.label} />}
@@ -213,6 +216,8 @@ const App = () => {
</div> </div>
)} )}
</div> </div>
)}
</div>
))} ))}
</div> </div>
</div> </div>