Merge branch 'dev' into weather-module

src/components/modules/moduleWrapper.tsx

@@ -1,19 +1,82 @@
-import { Card, useMantineTheme } from '@mantine/core';
+import { Card, Menu, Switch, useMantineTheme } from '@mantine/core';
 import { useConfig } from '../../tools/state';
 import { IModule } from './modules';
 
 export function ModuleWrapper(props: any) {
   const { module }: { module: IModule } = props;
-  const { config } = useConfig();
+  const { config, setConfig } = useConfig();
   const enabledModules = config.settings.enabledModules ?? [];
   // Remove 'Module' from enabled modules titles
   const isShown = enabledModules.includes(module.title);
   const theme = useMantineTheme();
+  const items: JSX.Element[] = [];
+  if (module.options) {
+    const keys = Object.keys(module.options);
+    const values = Object.values(module.options);
+    // Get the value and the name of the option
+    const types = values.map((v) => typeof v.value);
+    // Loop over all the types with a for each loop
+    types.forEach((type, index) => {
+      const optionName = `${module.title}.${keys[index]}`;
+      // TODO: Add support for other types
+      if (type === 'boolean') {
+        items.push(
+          <Switch
+            defaultChecked={
+              // Set default checked to the value of the option if it exists
+              config.settings[optionName] ??
+              (module.options && module.options[keys[index]].value) ??
+              false
+            }
+            defaultValue={config.settings[optionName] ?? false}
+            key={keys[index]}
+            onClick={(e) => {
+              setConfig({
+                ...config,
+                settings: {
+                  ...config.settings,
+                  enabledModules: [...config.settings.enabledModules],
+                  [optionName]: e.currentTarget.checked,
+                },
+              });
+            }}
+            label={values[index].name}
+          />
+        );
+      }
+    });
+  }
+  // Sussy baka
   if (!isShown) {
     return null;
   }
   return (
     <Card hidden={!isShown} mx="sm" withBorder radius="lg" shadow="sm">
+      {module.options && (
+        <Menu
+          size="md"
+          shadow="xl"
+          closeOnItemClick={false}
+          radius="md"
+          position="left"
+          styles={{
+            root: {
+              position: 'absolute',
+              top: 15,
+              right: 15,
+            },
+            body: {
+              backgroundColor:
+                theme.colorScheme === 'dark' ? theme.colors.dark[5] : theme.colors.gray[1],
+            },
+          }}
+        >
+          <Menu.Label>Settings</Menu.Label>
+          {items.map((item) => (
+            <Menu.Item key={item.key}>{item}</Menu.Item>
+          ))}
+        </Menu>
+      )}
       <module.component />
     </Card>
   );