init

2026-02-18 11:38:25 +03:00
commit 83a5bb87c1
40 changed files with 5803 additions and 0 deletions
--- a/src/componets/env/EnvironmentParam.tsx
+++ b/src/componets/env/EnvironmentParam.tsx
@@ -0,0 +1,68 @@
+import { useState } from "react";
+import { EnvParam } from "../../models/EnvParam";
+import { AppEvent } from "../../models/Env";
+
+
+export function EnvironmentParam(props: { param: EnvParam; onChanged: (e: AppEvent<EnvParam>) => void, isNew: boolean }) {
+    const [param, setParam] = useState(props.param);
+    const [isFocused, setIsFocused] = useState(false);
+
+    function doSet(x: string, act: (x: string) => void) {
+        act(x);
+        setParam(param.Changed(true));
+    }
+
+    function handleChange() {
+        if (!param.isChanged)
+            return;
+
+        let newParam = param.Changed(false);
+        if (!props.isNew) {
+            props.onChanged(AppEvent.update(newParam));
+        }
+
+        setParam(newParam);
+    }
+
+    function handleAdd() {
+        props.onChanged(AppEvent.add(param));
+        setParam(new EnvParam(0, "", ""));
+    }
+
+    function handleKeyUp(x: React.KeyboardEvent<HTMLInputElement>) {
+        if (x.key === "Enter") { handleChange(); }
+    }
+
+    return (
+        <div className={"row px-0" + (param.isChanged ? "border border-warning" : "")}
+            style={isFocused ? { backgroundColor: "lightskyblue", padding: "1px 0" } : { padding: "1px 0" }}>
+            <div className="col-4 mx-0 px-0">
+                <input type="text"
+                    className="form-control"
+                    style={{ backgroundColor: "rgba(170, 170, 247, 0.16)" }}
+                    value={param.name}
+                    onChange={x => doSet(x.target.value, (v) => param.name = v)}
+                    onBlur={() => { handleChange(); setIsFocused(false); }}
+                    onFocus={() => setIsFocused(true)}
+                    onKeyUp={handleKeyUp}
+                    placeholder="name"
+                    aria-label="name" />
+            </div>
+            <div className="col mx-0 px-0">
+                <input type="text"
+                    className="form-control"
+                    value={param.value}
+                    onChange={x => doSet(x.target.value, v => param.value = v)}
+                    onBlur={() => { handleChange(); setIsFocused(false); }}
+                    onFocus={() => setIsFocused(true)}
+                    onKeyUp={handleKeyUp}
+                    placeholder="value"
+                    aria-label="value" />
+            </div>
+            <div className="col-1 mx-0 px-0" >
+                <button className="btn btn-success" hidden={!props.isNew} onClick={handleAdd}>✓</button>
+                <button className="btn btn-warning" hidden={props.isNew} onClick={() => props.onChanged(AppEvent.del(param))} tabIndex={-1}>−</button>
+            </div>
+        </div>
+    );
+}