added react frontend
This commit is contained in:
Vyacheslav K
@@ -2,202 +2,220 @@ 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>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|
||||||
const ImageTile = ({ imageUrl, label }) => (
|
const ImageTile = ({ imageUrl, label, enabled, toggleEnabled }) => (
|
||||||
<div className="tile-content">
|
<div className="tile-content cursor-pointer" onClick={toggleEnabled}>
|
||||||
<img src={imageUrl} className="rounded-lg w-[6.3rem] h-[6.3rem] object-cover" alt={label} />
|
<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>
|
<span className="text-purple-400 text-lg font-semibold">{label}</span>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|
||||||
const ClockTile = ({ id }) => {
|
const ClockTile = ({ id }) => {
|
||||||
const [time, setTime] = useState("");
|
const [time, setTime] = useState("");
|
||||||
const [date, setDate] = useState("");
|
const [date, setDate] = useState("");
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const updateClock = () => {
|
const updateClock = () => {
|
||||||
const now = new Date();
|
const now = new Date();
|
||||||
const time = now.toLocaleTimeString('ru-RU', { hour12: false });
|
const time = now.toLocaleTimeString('ru-RU', { hour12: false });
|
||||||
const options = { weekday: 'short', day: 'numeric', month: 'long', year: 'numeric' };
|
const options = { weekday: 'short', day: 'numeric', month: 'long', year: 'numeric' };
|
||||||
const date = now.toLocaleDateString('ru-RU', options)
|
const date = now.toLocaleDateString('ru-RU', options)
|
||||||
.replace(/,/, '')
|
.replace(/,/, '')
|
||||||
.replace(/(\d+)\s(\S+)/, '$1 $2')
|
.replace(/(\d+)\s(\S+)/, '$1 $2')
|
||||||
.replace(/г\./, '');
|
.replace(/г\./, '');
|
||||||
setTime(time);
|
setTime(time);
|
||||||
setDate(date.charAt(0).toUpperCase() + date.slice(1));
|
setDate(date.charAt(0).toUpperCase() + date.slice(1));
|
||||||
};
|
};
|
||||||
updateClock();
|
updateClock();
|
||||||
const interval = setInterval(updateClock, 1000);
|
const interval = setInterval(updateClock, 1000);
|
||||||
return () => clearInterval(interval);
|
return () => clearInterval(interval);
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="tile-content">
|
<div className="tile-content">
|
||||||
<span className="text-5xl font-bold text-purple-200">{time}</span>
|
<span className="text-5xl font-bold text-purple-200">{time}</span>
|
||||||
<span className="text-purple-400 text-lg font-semibold">{date}</span>
|
<span className="text-purple-400 text-lg font-semibold">{date}</span>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
const GaugeTile = ({ gauges }) => (
|
const GaugeTile = ({ gauges }) => (
|
||||||
<div className="tile-content gauge-tile-content">
|
<div className="tile-content gauge-tile-content">
|
||||||
<div className="flex flex-col gap-4">
|
<div className="flex flex-col gap-4">
|
||||||
{gauges.map((g, index) => (
|
{gauges.map((g, index) => (
|
||||||
<div key={index} className="flex items-center gap-4">
|
<div key={index} className="flex items-center gap-4">
|
||||||
<div className="gauge" style={{ "--value": `${g.value}deg` }}>
|
<div className="gauge" style={{ "--value": `${g.value}deg` }}>
|
||||||
<span>{Math.round((g.value / 360) * 100)}%</span>
|
<span>{Math.round((g.value / 360) * 100)}%</span>
|
||||||
</div>
|
</div>
|
||||||
<span className="text-purple-400 text-lg font-semibold">{g.label}</span>
|
<span className="text-purple-400 text-lg font-semibold">{g.label}</span>
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</div>
|
</div>
|
||||||
|
))}
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
);
|
);
|
||||||
|
|
||||||
const SliderTile = ({ sliders, tileId, updateSliderValue }) => {
|
const SliderTile = ({ sliders, tileId, updateSliderValue }) => {
|
||||||
return (
|
return (
|
||||||
<div className="tile-content">
|
<div className="tile-content">
|
||||||
<span className="text-purple-400 text-lg font-semibold">Slider Controls</span>
|
<span className="text-purple-400 text-lg font-semibold">Slider Controls</span>
|
||||||
<div className="flex flex-col w-full gap-4">
|
<div className="flex flex-col w-full gap-4">
|
||||||
{sliders.map((s, index) => (
|
{sliders.map((s, index) => (
|
||||||
<div key={index} className="flex flex-col items-start">
|
<div key={index} className="flex flex-col items-start">
|
||||||
<div className="flex items-center gap-2">
|
<div className="flex items-center gap-2">
|
||||||
<span className="text-purple-400 text-sm font-semibold">{s.label}</span>
|
<span className="text-purple-400 text-sm font-semibold">{s.label}</span>
|
||||||
<span className="text-purple-300 text-sm font-normal">{s.value}</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>
|
<input
|
||||||
);
|
type="range"
|
||||||
|
min="0"
|
||||||
|
max="100"
|
||||||
|
value={s.value}
|
||||||
|
onChange={(e) => updateSliderValue(tileId, index, e.target.value)}
|
||||||
|
className="w-full"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
const NumberTile = ({ value, label }) => (
|
const NumberTile = ({ value, label }) => (
|
||||||
<div className="tile-content">
|
<div className="tile-content">
|
||||||
<span className="text-5xl font-bold text-purple-200">{value}</span>
|
<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-purple-400 text-lg font-semibold">{label}</span>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|
||||||
const App = () => {
|
const App = () => {
|
||||||
const [tiles, setTiles] = useState([
|
const [tiles, setTiles] = useState([
|
||||||
{ 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" },
|
{ 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: "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: 6, type: "clock" },
|
||||||
{ id: 7, type: "slider", sliders: [{ value: 50, label: "Slider 1" }, { value: 75, label: "Slider 2" }] },
|
{ id: 7, type: "slider", sliders: [{ value: 50, label: "Slider 1" }, { value: 75, label: "Slider 2" }] },
|
||||||
{ id: 8, type: "text", label: "Tile 5 (Double)" },
|
{ id: 8, type: "text", label: "Tile 5 (Double)" },
|
||||||
{ id: 9, type: "text", label: "Tile 6" },
|
{ id: 9, type: "text", label: "Tile 6" },
|
||||||
{ id: 10, type: "number", value: 42, label: "Data Point" }
|
{ id: 10, type: "number", value: 42, label: "Data Point" }
|
||||||
]);
|
]);
|
||||||
|
|
||||||
const updateGaugeValue = (tileId, gaugeIndex) => {
|
const updateGaugeValue = (tileId, gaugeIndex) => {
|
||||||
setTiles(prevTiles =>
|
setTiles(prevTiles =>
|
||||||
prevTiles.map(tile => {
|
prevTiles.map(tile => {
|
||||||
if (tile.id === tileId && tile.type === "gauge") {
|
if (tile.id === tileId && tile.type === "gauge") {
|
||||||
const newGauges = [...tile.gauges];
|
const newGauges = [...tile.gauges];
|
||||||
newGauges[gaugeIndex] = {
|
newGauges[gaugeIndex] = {
|
||||||
...newGauges[gaugeIndex],
|
...newGauges[gaugeIndex],
|
||||||
value: (newGauges[gaugeIndex].value + 10) % 360
|
value: (newGauges[gaugeIndex].value + 10) % 360
|
||||||
};
|
};
|
||||||
return { ...tile, gauges: newGauges };
|
return { ...tile, gauges: newGauges };
|
||||||
}
|
}
|
||||||
return tile;
|
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 (
|
|
||||||
<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 === "text" && <TextTile label={tile.label} />}
|
|
||||||
{tile.type === "image" && <ImageTile imageUrl={tile.imageUrl} label={tile.label} />}
|
|
||||||
{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>
|
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
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 (
|
||||||
|
<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>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
export default App
|
export default App
|
||||||
|
|||||||
Reference in New Issue
Block a user