1 files changed, 297 insertions, 0 deletions

diff --git a/users/ryan/modules/simple-bar/simple-bar-source/lib/components/settings/user-widgets-creator.jsx b/users/ryan/modules/simple-bar/simple-bar-source/lib/components/settings/user-widgets-creator.jsx
new file mode 100755
index 0000000..a026047
--- /dev/null
+++ b/users/ryan/modules/simple-bar/simple-bar-source/lib/components/settings/user-widgets-creator.jsx
@@ -0,0 +1,297 @@
+import * as Uebersicht from "uebersicht";
+import * as Icons from "../icons/icons.jsx";
+import * as Settings from "../../settings";
+import * as Utils from "../../utils";
+import ColorPicker from "./color-picker.jsx";
+import IconPicker from "./icon-picker.jsx";
+
+const { React } = Uebersicht;
+
+/**
+ * UserWidgetsCreator component allows users to create and manage custom widgets.
+ * @param {Object} props - The component props.
+ * @param {Object} props.defaultValue - The default value for the widgets.
+ * @param {Function} props.onChange - The function to call when the widgets change.
+ * @returns {JSX.Element} The UserWidgetsCreator component.
+ */
+export default function UserWidgetsCreator({ defaultValue, onChange }) {
+  const [widgets, setWidgets] = React.useState(defaultValue || {});
+  const keys = Object.keys(widgets);
+
+  // Determine the highest widget ID and calculate the new ID for a new widget
+  const highestId = keys.reduce((acc, key) => {
+    const keyAsNumber = parseInt(key, 10);
+    return keyAsNumber > acc ? keyAsNumber : acc;
+  }, 1);
+  const newId = highestId + 1;
+
+  // Function to add a new widget
+  const onClick = () =>
+    setWidgets((widgets) => ({
+      ...widgets,
+      [newId]: { ...Settings.userWidgetDefault },
+    }));
+
+  // Function to handle changes to a widget
+  const onWidgetChange = (index, field, value) => {
+    const newWidgets = { ...widgets };
+    const newKeys = Object.keys(newWidgets);
+    const updatedWidgets = newKeys.reduce((acc, key, i) => {
+      const widget = newWidgets[key];
+      return {
+        ...acc,
+        [i + 1]: key === index ? { ...widget, [field]: value } : widget,
+      };
+    }, {});
+    setWidgets(updatedWidgets);
+  };
+
+  // Effect to detect changes in widgets and call onChange prop
+  React.useEffect(() => {
+    const diffs = Utils.compareObjects(defaultValue, widgets);
+    const hasDiffs = Object.keys(diffs).length > 0;
+    if (hasDiffs) onChange({ target: { value: widgets } });
+  }, [defaultValue, onChange, widgets]);
+
+  return (
+    <div className="user-widgets-creator">
+      {keys.map((key, i) => (
+        <UserWidgetCreator
+          key={`${key}-${widgets[key].backgroundColor}`}
+          index={key}
+          onWidgetChange={onWidgetChange}
+          setWidgets={setWidgets}
+          widget={widgets[key]}
+          isFirst={i === 0}
+          isLast={i === keys.length - 1}
+        />
+      ))}
+      <button className="user-widgets-creator__add" onClick={onClick}>
+        <Icons.Add />
+        Add a custom widget
+      </button>
+    </div>
+  );
+}
+
+/**
+ * UserWidgetCreator component allows users to configure individual widgets.
+ * @param {Object} props - The component props.
+ * @param {string} props.index - The index of the widget.
+ * @param {boolean} props.isFirst - Whether the widget is the first in the list.
+ * @param {boolean} props.isLast - Whether the widget is the last in the list.
+ * @param {Function} props.onWidgetChange - The function to call when the widget changes.
+ * @param {Function} props.setWidgets - The function to set the widgets state.
+ * @param {Object} props.widget - The widget data.
+ * @returns {JSX.Element} The UserWidgetCreator component.
+ */
+function UserWidgetCreator({
+  index,
+  isFirst,
+  isLast,
+  onWidgetChange,
+  setWidgets,
+  widget,
+}) {
+  const {
+    title,
+    icon,
+    backgroundColor,
+    output,
+    onClickAction,
+    onRightClickAction,
+    onMiddleClickAction,
+    refreshFrequency,
+    active = true,
+    noIcon = false,
+    hideWhenNoOutput = true,
+    showOnDisplay = "",
+  } = widget;
+
+  const indexAsNumber = parseInt(index, 10);
+
+  // Function to remove a widget
+  const onRemoveClick = () => {
+    setWidgets((widgets) => {
+      const keys = Object.keys(widgets);
+      return keys.reduce(
+        (acc, key) => (key === index ? acc : { ...acc, [key]: widgets[key] }),
+        {},
+      );
+    });
+  };
+
+  // Function to handle changes to widget fields
+  const onChange = (field, chexbox = false) => {
+    return (e) => {
+      const value = (chexbox ? e?.target?.checked : e?.target?.value) ?? "";
+      onWidgetChange(index, field, value);
+    };
+  };
+
+  // Function to move the widget up in the list
+  const onBeforeClick = () => {
+    setWidgets((widgets) => {
+      const swapedWidget = widgets[indexAsNumber - 1];
+      return {
+        ...widgets,
+        [indexAsNumber - 1]: widget,
+        [indexAsNumber]: swapedWidget,
+      };
+    });
+  };
+
+  // Function to move the widget down in the list
+  const onAfterClick = () => {
+    setWidgets((widgets) => {
+      const swapedWidget = widgets[indexAsNumber + 1];
+      return {
+        ...widgets,
+        [indexAsNumber + 1]: widget,
+        [indexAsNumber]: swapedWidget,
+      };
+    });
+  };
+
+  return (
+    <div key={indexAsNumber} className="user-widget-creator">
+      <div className="user-widget-creator__sort-buttons">
+        {!isFirst && (
+          <button
+            className="user-widget-creator__sort-button user-widget-creator__sort-button--before"
+            onClick={onBeforeClick}
+          >
+            <Icons.ChevronTop />
+          </button>
+        )}
+        {!isLast && (
+          <button
+            className="user-widget-creator__sort-button user-widget-creator__sort-button--after"
+            onClick={onAfterClick}
+          >
+            <Icons.ChevronBottom />
+          </button>
+        )}
+      </div>
+      <button className="user-widget-creator__remove" onClick={onRemoveClick}>
+        <Icons.Remove />
+      </button>
+      <div className="user-widget-creator__index">
+        n°<b>{index}</b>
+      </div>
+      <IconPicker callback={onWidgetChange} index={index} selectedIcon={icon} />
+      <div className="user-widget-creator__right">
+        <div className="user-widget-creator__right-top">
+          <ColorPicker
+            callback={onWidgetChange}
+            index={index}
+            selectedColor={backgroundColor}
+          />
+          <input
+            className="user-widget-creator__title"
+            onChange={onChange("title")}
+            type="text"
+            defaultValue={title}
+          />
+          <label htmlFor={`refresh-frequency-${index}`}>
+            Refresh frequency (ms):
+          </label>
+          <input
+            className="user-widget-creator__refresh-frequency"
+            onChange={onChange("refreshFrequency")}
+            id={`refresh-frequency-${index}`}
+            type="text"
+            defaultValue={refreshFrequency}
+          />
+        </div>
+        <div className="user-widget-creator__input-group">
+          <label htmlFor={`show-on-display-${index}`}>Show on display: </label>
+          <input
+            className="user-widget-creator__show-on-display"
+            onChange={onChange("showOnDisplay")}
+            id={`show-on-display-${index}`}
+            type="text"
+            defaultValue={showOnDisplay}
+            placeholder="example: 1,2 (leave blank to show on all displays)"
+            spellCheck={false}
+          />
+        </div>
+        <div className="user-widget-creator__input-group">
+          <label htmlFor={`output-${index}`}>Command/script path: </label>
+          <input
+            className="user-widget-creator__output"
+            onChange={onChange("output")}
+            id={`output-${index}`}
+            type="text"
+            defaultValue={output}
+            spellCheck={false}
+          />
+        </div>
+        <div className="user-widget-creator__input-group">
+          <label htmlFor={`on-click-action-${index}`}>
+            On click command/script path:{" "}
+          </label>
+          <input
+            className="user-widget-creator__on-click-action"
+            onChange={onChange("onClickAction")}
+            id={`on-click-action-${index}`}
+            type="text"
+            defaultValue={onClickAction}
+            spellCheck={false}
+          />
+        </div>
+        <div className="user-widget-creator__input-group">
+          <label htmlFor={`on-right-click-action-${index}`}>
+            On right click command/script path:{" "}
+          </label>
+          <input
+            className="user-widget-creator__on-right-click-action"
+            onChange={onChange("onRightClickAction")}
+            id={`on-right-click-action-${index}`}
+            type="text"
+            defaultValue={onRightClickAction}
+            spellCheck={false}
+          />
+        </div>
+        <div className="user-widget-creator__input-group">
+          <label htmlFor={`on-middle-click-action-${index}`}>
+            On middle click command/script path:{" "}
+          </label>
+          <input
+            className="user-widget-creator__on-middle-click-action"
+            onChange={onChange("onMiddleClickAction")}
+            id={`on-middle-click-action-${index}`}
+            type="text"
+            defaultValue={onMiddleClickAction}
+            spellCheck={false}
+          />
+        </div>
+        <div className="user-widget-creator__input-group">
+          <input
+            id={`active-${index}`}
+            type="checkbox"
+            defaultChecked={active}
+            onChange={onChange("active", true)}
+          />
+          <label htmlFor={`active-${index}`}>Active</label>
+          <input
+            id={`no-icon-${index}`}
+            type="checkbox"
+            defaultChecked={noIcon}
+            onChange={onChange("noIcon", true)}
+          />
+          <label htmlFor={`no-icon-${index}`}>No icon</label>
+          <input
+            id={`hide-when-no-output-${index}`}
+            type="checkbox"
+            defaultChecked={hideWhenNoOutput}
+            onChange={onChange("hideWhenNoOutput", true)}
+          />
+          <label htmlFor={`hide-when-no-output-${index}`}>
+            Hide when no script output
+          </label>
+        </div>
+      </div>
+    </div>
+  );
+}