added react frontend
This commit is contained in:
Vyacheslav K
@@ -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
|
||||
|
||||
Reference in New Issue
Block a user