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

some updates

Browse Source
This commit is contained in:
MoonDev
2025-05-23 01:55:25 +03:00
parent a775fe1c80
commit f1d8283224
18 changed files with 251 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
static/frontend/src/Api.jsx
View File

@@ -26,7 +26,8 @@ export const createSha256Hash = async (input) => {
export const sendRequest = async (action,args) => {
try {
const TS = Math.round(Date.now()/1000);
const hash = await createSha256Hash(window.localStorage.auth+JSON.stringify(args)+TS);
const AUTH = window.localStorage.auth || window.auth;
const hash = await createSha256Hash(AUTH+JSON.stringify(args)+TS);
const response = await axios.post("http://"+window.location.hostname+":"+import.meta.env.VITE_API_PORT+"/action/"+action, {args:args,hash:hash+"."+TS}, {
timeout: 4000,
headers: {

15
static/frontend/src/App.css
View File

@@ -97,4 +97,19 @@ input[type="range"] {
.gauge-tile-content {
justify-content: flex-start;
align-items: flex-start;
}
@keyframes press {
0% {
transform: scale(1);
}
50% {
transform: scale(0.8);
}
100% {
transform: scale(1);
}
}
.click-button:active {
animation: press 0.5s ease-out;
}

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

@@ -13,7 +13,7 @@ const TextTile = ({ label }) => (
const ImageTile = ({ imageUrl, label, enabled, toggleEnabled }) => (
<div className="tile-content cursor-pointer">
<img src={imageUrl} className="rounded-lg w-[6.3rem] h-[6.3rem] object-cover" alt={label} />
<img src={imageUrl} className="rounded-lg w-[5rem] h-[5rem] object-cover" alt={label} />
<span className="text-purple-400 text-lg font-semibold mt-2">{label}</span>
</div>
);
@@ -62,7 +62,7 @@ const GaugeTile = ({ gauges }) => (
</div>
);
const SliderTile = ({ sliders, tileId, updateSliderValue, label }) => {
const SliderTile = ({ sliders, tile, updateSliderValue, label }) => {
return (
<div className="tile-content">
<span className="text-purple-400 text-lg font-semibold">{label}</span>
@@ -78,8 +78,10 @@ const SliderTile = ({ sliders, tileId, updateSliderValue, label }) => {
min="0"
max="100"
value={s.value}
onChange={(e) => updateSliderValue(tileId, index, e.target.value)}
onChange={(e) => updateSliderValue(tile, index, e.target.value)}
className="w-full"
onMouseUp={(e) => { sendSlider(tile, index, e.target.value) }}
onTouchEnd={(e) => { sendSlider(tile, index, e.target.value) }}
/>
</div>
))}
@@ -88,12 +90,38 @@ const SliderTile = ({ sliders, tileId, updateSliderValue, label }) => {
);
};
const MultiButtonTile = ({ tile, onTileClick }) => {
return (
<div className="tile-content">
<span className="text-purple-400 text-lg font-semibold">{tile.label}</span>
<div className="flex justify-center w-full gap-6 mt-12">
{tile.buttons.map((s, index) => (
<button key={index} className="cursor-pointer click-button" onClick={() => { onTileClick(s) }}>
<img src={s.imageUrl} className='h-12 w-12' />
</button>
))}
</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 mt-2">{label}</span>
</div>
);
const sendSlider = async (tile, sliderIndex, newValue) => {
try {
await sendRequest(tile.sliders[sliderIndex].action, { level: Number(newValue) });
} catch (e) {
console.error(e);
}
}
const App = () => {
@@ -109,14 +137,17 @@ const App = () => {
const updateSliderValue = (tileId, sliderIndex, newValue) => {
const updateSliderValue = (Tile, sliderIndex, newValue) => {
setTiles(prevTiles =>
prevTiles.map(tile => {
if (tile.id === tileId && tile.type === "slider") {
if (tile.id === Tile.id && tile.type === "slider") {
const newSliders = [...tile.sliders];
newSliders[sliderIndex] = {
...newSliders[sliderIndex],
value: parseInt(newValue)
};
return { ...tile, sliders: newSliders };
}
@@ -177,8 +208,37 @@ const App = () => {
'Content-Type': 'application/json'
}
});
window.localStorage.auth = passw;
for (var tile of response.data) {
if (tile.type == "slider") {
for (var slider_id in tile.sliders) {
if (tile.sliders[slider_id].get_state) {
try {
const data = await sendRequest(tile.sliders[slider_id].get_state, {});
tile.sliders[slider_id].value = data.result.value;
} catch (e) {
console.error(e);
}
}
}
}
if (tile.is_swtch) {
try {
const data = await sendRequest(tile.get_state, {});
tile.enabled = data.result.value;
if (tile.action.includes("enable") && tile.enabled) {
tile.enabled = true;
tile.action = tile.action.replace("enable", "disable");
}
} catch (e) {
console.error(e);
}
}
}
setTimeout(() => {
window.localStorage.auth = passw;
setTiles(response.data);
setPhase("dash");
updateSystemStats();
@@ -236,21 +296,26 @@ const App = () => {
if (tile.action) {
try {
setTileProps(tile.id, { loading: true })
if (tile.id) {
setTileProps(tile.id, { loading: true })
}
await sendRequest(tile.action, tile.action_args);
if (tile.action.includes("enable")) {
tile.enabled = true;
tile.action = tile.action.replace("enable", "disable");
} else if (tile.action.includes("disable")) {
tile.enabled = false;
tile.action = tile.action.replace("disable", "enable");
}
tile.loading = false;
if (tile.id) {
if (tile.action.includes("enable")) {
tile.enabled = true;
tile.action = tile.action.replace("enable", "disable");
} else if (tile.action.includes("disable")) {
tile.enabled = false;
tile.action = tile.action.replace("disable", "enable");
}
tile.loading = false;
setTileProps(tile.id, tile)
setTileProps(tile.id, tile)
}
} catch (e) {
setTileProps(tile.id, { loading: false })
if (tile.id)
setTileProps(tile.id, { loading: false })
}
}
}
@@ -313,7 +378,7 @@ const App = () => {
<div className="flex w-full flex-col gap-4 anim-pop">
<div className="grid grid-cols-2 lg:grid-cols-6 flex-wrap gap-4">
{tiles.map(tile => (
<div key={tile.id} className={tile.type === "break" ? "col-span-full" : (tile.type === "gauge" || tile.type === "slider" || tile.type === "clock" || tile.type === "number" ? "w-full sm:w-auto col-span-2" : "col-span-1")}>
<div key={tile.id} className={tile.type === "break" ? "col-span-full" : (tile.type === "gauge" || tile.type === "slider" || tile.type === "clock" || tile.type === "multi" || tile.type === "number" ? "w-full sm:w-auto col-span-2" : "col-span-1")}>
{tile.type === "break" ? (
<div className="w-full mt-2 text-purple-400 text-2xl font-bold">{tile.label}</div>
) : (
@@ -337,8 +402,9 @@ const App = () => {
/>
)}
{tile.type === "clock" && <ClockTile id={tile.id} />}
{tile.type === "multi" && <MultiButtonTile id={tile.id} tile={tile} onTileClick={onTileClick} />}
{tile.type === "gauge" && <GaugeTile gauges={tile.gauges} />}
{tile.type === "slider" && <SliderTile label={tile.label} sliders={tile.sliders} tileId={tile.id} updateSliderValue={updateSliderValue} />}
{tile.type === "slider" && <SliderTile label={tile.label} sliders={tile.sliders} tile={tile} updateSliderValue={updateSliderValue} />}
{tile.type === "number" && <NumberTile value={tile.value} label={tile.label} />}
{tile.mini_icon && (
<div className="absolute top-3 right-3 flex gap-2">