PadApp/pages/leds_buttons/leds_buttons.jsx

89 lines
4 KiB
React
Raw Normal View History

2022-12-19 23:03:59 +01:00
import { bg, uiElement, text } from "../../js/color";
import prompt from "../../stear/extra/Pages/prompt";
import showStatus from "../../stear/extra/Pages/showStatus";
import { SWindow, s } from "../../stear/main";
import animation from "./animation";
let ledAnimation = [
{
name: "test1123424242424242424242424242424242424242424242424242424242424",
buttons: [
{
clock: 0,
offset: 0,
animation: 0
}
],
animations: [
{
name: "default on",
steps: [{
slow: false,
time: 1000,
color: [100, 100, 100]
}]
}
]
}
];
export default new SWindow({
call: async (stear, { find, resolve, close, render, call, event, include }, args) => {
return <div style={{
display: "flex", height: "100%", width: "100%", flexDirection: "row"
}}>
<div style={{ height: "calc(100% - 2rem)", width: "calc(50% - 2rem)", padding: "1rem" }}>
<h1 style={{ minHeight: "2rem", lineHeight: "2rem" }}>Animationen
<div style={{
float: "right", borderRadius: "50%",
height: "2rem", width: "2rem",
backgroundColor: uiElement, fontSize: "2rem",
userSelect: "none", textAlign: "center",
lineHeight: "normal", cursor: "pointer"
}} event={{
click: () => {
call(prompt, { text: "Name für neue Animation:" }).then(state => {
if (state != false) {
let ledAni = { name: state, buttons: [], animations: [] };
ledAnimation.push(ledAni);
call(animation, ledAni, false);
render();
}
})
}
}}>+</div>
</h1>
<div style={{ width: "100%", display: "flex", flexDirection: "column", gap: "0.5rem" }}>
{() => ledAnimation.map((e, i) => <div style={{
backgroundColor: uiElement,
cursor: "pointer",
padding: "0.5rem 1rem",
borderRadius: "1rem",
alignItems: "center",
userSelect: "none",
display: "flex",
gap: "0.5rem"
}} event={{
pointerdown: () => {
call(showStatus, { text: "using: " + e.name, color: "green" });
}
}}>
<label style={{ whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis", paddingTop: "0.25rem", width: "calc(100% - 5rem)" }}>{e.name}</label>
<div style={{ backgroundColor: "rgba(0,0,0,0.2)", padding: "0.5rem", borderRadius: "50%", height: "1rem", width: "1rem" }}
event={{ pointerdown: (e)=>void e.stopPropagation(), click: (event) => { event.stopPropagation(); call(animation, e, false).then(()=>void render()) } }}>e</div>
<div style={{ backgroundColor: "rgba(0,0,0,0.2)", padding: "0.5rem", borderRadius: "50%", height: "1rem", width: "1rem" }}
event={{ pointerdown: (e)=>void e.stopPropagation(), click: (event) => { event.stopPropagation(); ledAnimation.splice(i, 1); render(); } }}>x</div>
</div>)}
</div>
</div>
<div style={{ height: "100%", width: "0.25rem", backgroundColor: text }}></div>
<div style={{ height: "calc(100% - 2rem)", width: "calc(50% - 2rem)", padding: "1rem" }}>
</div>
</div>;
},
backgroundColor: "transparent"
})