added recoding and settings tab

2025-01-13 12:37:08 +01:00
parent b2267813c0
commit 6918534b95
7 changed files with 269 additions and 9 deletions
@@ -0,0 +1,127 @@
+import React from "react";
+
+function ConfigEditor({config, setConfig}) {
+    const handleValueChange = (key, value) => {
+        setConfig((prev) => ({...prev, [key]: value}));
+    };
+
+    const handleAddToList = (key) => {
+        setConfig((prev) => ({
+            ...prev,
+            [key]: [...prev[key], {}], // Add an empty object
+        }));
+    };
+
+    const handleRemoveFromList = (key, index) => {
+        setConfig((prev) => ({
+            ...prev,
+            [key]: prev[key].filter((_, i) => i !== index),
+        }));
+    };
+
+    const handleNestedChange = (key, nestedKey, value) => {
+        setConfig((prev) => ({
+            ...prev,
+            [key]: {...prev[key], [nestedKey]: value},
+        }));
+    };
+
+    const handleObjectInListChange = (listKey, index, fieldKey, value) => {
+        setConfig((prev) => ({
+            ...prev,
+            [listKey]: prev[listKey].map((item, i) =>
+                i === index ? {...item, [fieldKey]: value} : item
+            ),
+        }));
+    };
+
+    const renderField = (key, value) => {
+        if (Array.isArray(value)) {
+            // Render a list editor
+            return (
+                <div key={key}>
+                    <label>{key}</label>
+                    {value.map((item, index) => (
+                        <div key={index} style={{marginLeft: "20px", marginBottom: "10px"}}>
+                            {typeof item === "object" && item !== null ? (
+                                // Render object fields
+                                <div>
+                                    {Object.entries(item).map(([fieldKey, fieldValue]: [string, any]) => (
+                                        <div key={fieldKey}>
+                                            <label>{fieldKey}</label>
+                                            <input
+                                                type="text"
+                                                value={fieldValue}
+                                                onChange={(e) =>
+                                                    handleObjectInListChange(
+                                                        key,
+                                                        index,
+                                                        fieldKey,
+                                                        e.target.value
+                                                    )
+                                                }
+                                            />
+                                        </div>
+                                    ))}
+                                    <button
+                                        onClick={() => handleRemoveFromList(key, index)}
+                                        style={{marginTop: "5px"}}
+                                    >
+                                        Remove Object
+                                    </button>
+                                </div>
+                            ) : (
+                                // Render primitive values in the list
+                                <div>
+                                    <input
+                                        type="text"
+                                        value={item}
+                                        onChange={(e) =>
+                                            handleValueChange(key, [
+                                                ...value.slice(0, index),
+                                                e.target.value,
+                                                ...value.slice(index + 1),
+                                            ])
+                                        }
+                                    />
+                                    <button onClick={() => handleRemoveFromList(key, index)}>
+                                        Remove
+                                    </button>
+                                </div>
+                            )}
+                        </div>
+                    ))}
+                    <button onClick={() => handleAddToList(key)}>Add Item</button>
+                </div>
+            );
+        } else if (typeof value === "object" && value !== null) {
+            // Render nested objects
+            return (
+                <div key={key}>
+                    <label>{key}</label>
+                    <div style={{marginLeft: "20px"}}>
+                        {Object.entries(value).map(([nestedKey, nestedValue]) =>
+                            renderField(nestedKey, nestedValue)
+                        )}
+                    </div>
+                </div>
+            );
+        } else {
+            // Render a single value editor
+            return (
+                <div key={key}>
+                    <label>{key}</label>
+                    <input
+                        type="text"
+                        value={value}
+                        onChange={(e) => handleValueChange(key, e.target.value)}
+                    />
+                </div>
+            );
+        }
+    };
+
+    return <div>{Object.entries(config).map(([key, value]) => renderField(key, value))}</div>;
+}
+
+export default ConfigEditor;