Bump version to 1.6.8-dev.17

Luligu · Dec 28, 2024 · 80aa8e6 · 80aa8e6
1 parent 4255c46
commit 80aa8e6
Show file tree

Hide file tree

Showing 17 changed files with 215 additions and 193 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -20,7 +20,7 @@ Matterbridge edge is now released. The default mode is still the normal mode to
 The frontend has a dark mode that is now the default mode. 
 It is possible to change the mode (Classic or Dark) in Settings, Matterbridge settings.
 
-## [1.6.8-dev.16] - 2024-12-28
+## [1.6.8-dev.17] - 2024-12-29
 
 ### Added
 

diff --git a/frontend/build/asset-manifest.json b/frontend/build/asset-manifest.json
@@ -1,7 +1,7 @@
 {
   "files": {
-    "main.css": "./static/css/main.0f9899a6.css",
-    "main.js": "./static/js/main.4087dcdb.js",
+    "main.css": "./static/css/main.85982c95.css",
+    "main.js": "./static/js/main.de3e1637.js",
     "static/js/453.abd36b29.chunk.js": "./static/js/453.abd36b29.chunk.js",
     "static/media/roboto-latin-700-normal.woff2": "./static/media/roboto-latin-700-normal.4535474e1cf8598695ad.woff2",
     "static/media/roboto-latin-500-normal.woff2": "./static/media/roboto-latin-500-normal.7077203b1982951ecf76.woff2",
@@ -60,12 +60,12 @@
     "static/media/roboto-greek-ext-300-normal.woff": "./static/media/roboto-greek-ext-300-normal.b590dbe5c639944366d1.woff",
     "static/media/roboto-greek-ext-400-normal.woff": "./static/media/roboto-greek-ext-400-normal.16eb83b4a3b1ea994243.woff",
     "index.html": "./index.html",
-    "main.0f9899a6.css.map": "./static/css/main.0f9899a6.css.map",
-    "main.4087dcdb.js.map": "./static/js/main.4087dcdb.js.map",
+    "main.85982c95.css.map": "./static/css/main.85982c95.css.map",
+    "main.de3e1637.js.map": "./static/js/main.de3e1637.js.map",
     "453.abd36b29.chunk.js.map": "./static/js/453.abd36b29.chunk.js.map"
   },
   "entrypoints": [
-    "static/css/main.0f9899a6.css",
-    "static/js/main.4087dcdb.js"
+    "static/css/main.85982c95.css",
+    "static/js/main.de3e1637.js"
   ]
 }
diff --git a/frontend/build/index.html b/frontend/build/index.html
@@ -1 +1 @@
-<!doctype html><html lang="en"><head><meta charset="utf-8"/><base href="./"><link rel="icon" href="./matterbridge 32x32.png"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><title>Matterbridge</title><link rel="manifest" href="./manifest.json"/><script defer="defer" src="./static/js/main.4087dcdb.js"></script><link href="./static/css/main.0f9899a6.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>
+<!doctype html><html lang="en"><head><meta charset="utf-8"/><base href="./"><link rel="icon" href="./matterbridge 32x32.png"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><title>Matterbridge</title><link rel="manifest" href="./manifest.json"/><script defer="defer" src="./static/js/main.de3e1637.js"></script><link href="./static/css/main.85982c95.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>
diff --git a/frontend/build/static/css/main.0f9899a6.css.map b/frontend/build/static/css/main.0f9899a6.css.map
diff --git a/frontend/build/static/css/main.0f9899a6.css → frontend/build/static/css/main.85982c95.css b/frontend/build/static/css/main.0f9899a6.css → frontend/build/static/css/main.85982c95.css
diff --git a/frontend/build/static/css/main.85982c95.css.map b/frontend/build/static/css/main.85982c95.css.map
diff --git a/frontend/build/static/js/main.4087dcdb.js.map b/frontend/build/static/js/main.4087dcdb.js.map
diff --git a/frontend/build/static/js/main.4087dcdb.js → frontend/build/static/js/main.de3e1637.js b/frontend/build/static/js/main.4087dcdb.js → frontend/build/static/js/main.de3e1637.js
diff --git a/...ld/static/js/main.4087dcdb.js.LICENSE.txt → ...ld/static/js/main.de3e1637.js.LICENSE.txt b/...ld/static/js/main.4087dcdb.js.LICENSE.txt → ...ld/static/js/main.de3e1637.js.LICENSE.txt
diff --git a/frontend/build/static/js/main.de3e1637.js.map b/frontend/build/static/js/main.de3e1637.js.map
diff --git a/frontend/src/App.css b/frontend/src/App.css
@@ -8,7 +8,6 @@
   --main-text-color: black;
   --main-grey-color: #616161;
   --main-light-color: #959595;
-  --main-dark-color: #333;
   --main-icon-color: #4d4d4d;
   --main-log-color: var(--main-text-color);
   --main-button-color: #ffffff;
@@ -18,7 +17,8 @@
   --main-menu-hover-color: #959595;
   --main-label-color: #616161;
 
-  --primary-color: #4CAF50;
+  --primary-color: #009a00;
+  /* Green #4CAF50 */
   --secondary-color: #a58827;
 
   --header-bg-color: var(--primary-color);
@@ -55,7 +55,6 @@
   --main-text-color: #ffffff;
   --main-grey-color: #616161;
   --main-light-color: #959595;
-  --main-dark-color: #333;
   --main-icon-color: var(--main-light-color);
   --main-log-color: var(--main-light-color);
   --main-button-color: #ffffff;

diff --git a/frontend/src/App.js b/frontend/src/App.js
@@ -15,7 +15,19 @@ import { OnlineProvider } from './components/OnlineContext';
 // @mui
 import { createTheme } from '@mui/material';
 
+// Function to get CSS variable value
+function getCssVariable(variableName, defaultValue) {
+  const value = getComputedStyle(document.body).getPropertyValue(variableName).trim();
+  if(!value) console.error('getCssVariable:', value);
+  return value || defaultValue;
+}
+
 export const theme = createTheme({
+  palette: {
+    primary: {
+      main: getCssVariable('--primary-color', '#1976d2'), // Default blue
+    },
+  },
   components: {
     MuiTypography: {
       fontFamily: 'Roboto, Helvetica, Arial, sans-serif',
@@ -59,6 +71,15 @@ export const theme = createTheme({
         },
       },
     },
+    MuiCheckbox: {
+      styleOverrides: {
+        root: {
+          '&.Mui-checked': {
+            color: 'var(--primary-color)',
+          },
+        },
+      },
+    },
     MuiTextField: {
       defaultProps: {
         size: 'small', // Default size for all TextFields

diff --git a/frontend/src/components/Connecting.js b/frontend/src/components/Connecting.js
@@ -12,8 +12,8 @@ export default function Connecting() {
       flexDirection: 'column'
     }}>
      <Box sx={{ display: 'flex', alignItems: 'center', flexDirection: 'column' }}>
-        <CircularProgress />
-        <div style={{ marginTop: '20px' }}>Connecting to Matterbridge...</div>
+        <CircularProgress style={{ color: 'var(--primary-color)' }}/>
+        <div style={{ marginTop: '20px', color: 'var(--primary-color)' }}>Connecting to Matterbridge...</div>
       </Box>
     </div>
   );

diff --git a/frontend/src/components/Home.js b/frontend/src/components/Home.js
@@ -11,6 +11,7 @@ import { OnlineContext } from './OnlineContext';
 import { SystemInfoTable } from './SystemInfoTable';
 import { MatterbridgeInfoTable } from './MatterbridgeInfoTable';
 import { ConfirmCancelForm } from './ConfirmCancelForm';
+import { configTheme, configUiSchema, ArrayFieldTemplate, ObjectFieldTemplate, RemoveButton } from './configEditor';
 
 // @mui
 import { Dialog, DialogTitle, DialogContent, TextField, Alert, Snackbar, Tooltip, IconButton, Button, createTheme, ThemeProvider, Typography, Select, MenuItem, Menu, Box } from '@mui/material';
@@ -20,6 +21,7 @@ import { DeleteForever, Download, Add, PublishedWithChanges, Settings, Favorite,
 import Form from '@rjsf/mui';
 import validator from '@rjsf/validator-ajv8';
 
+// QRCode
 import { QRCodeSVG} from 'qrcode.react';
 
 
@@ -204,10 +206,6 @@ function Home() {
     window.open(`https://github.com/Luligu/${plugins[row].name}/blob/main/CHANGELOG.md`, '_blank');
   };
 
-  /*
-                        {plugin.enabled ? <Tooltip title="Disable the plugin"><IconButton style={{padding: 0}} className="PluginsIconButton" onClick={() => { handleActionWithConfirmCancel('Disable the plugin', 'Are you sure? This will remove also all the devices and configuration in the controller.', 'disable', index); } } size="small"><Unpublished /></IconButton></Tooltip> : <></>}
-                        <Tooltip title="Remove the plugin"><IconButton style={{padding: 0}} className="PluginsIconButton" onClick={() => { handleRemovePlugin(index); }} size="small"><DeleteForever /></IconButton></Tooltip>
-  */
   const [showConfirmCancelForm, setShowConfirmCancelForm] = useState(false);
   const [confirmCancelFormTitle, setConfirmCancelFormTitle] = useState('');
   const [confirmCancelFormMessage, setConfirmCancelFormMessage] = useState('');
@@ -221,6 +219,7 @@ function Home() {
     setConfirmCancelFormRow(index);
     setShowConfirmCancelForm(true);
   };
+
   const handleConfirm = () => {
     // console.log(`Action confirmed ${confirmCancelFormCommand} ${confirmCancelFormRow}`);
     setShowConfirmCancelForm(false);
@@ -230,6 +229,7 @@ function Home() {
       handleEnableDisablePlugin(confirmCancelFormRow);
     }
   };
+
   const handleCancel = () => {
     // console.log("Action canceled");
     setShowConfirmCancelForm(false);
@@ -243,7 +243,7 @@ function Home() {
 
     <ThemeProvider theme={theme}>
 
-      <Dialog  open={openConfig} onClose={handleCloseConfig} maxWidth='600px' PaperProps={{style: { border: "2px solid #ddd", backgroundColor: '#c4c2c2', boxShadow: '5px 5px 10px #888'}}}>
+      <Dialog  open={openConfig} onClose={handleCloseConfig} maxWidth='800px' PaperProps={{style: { border: "2px solid #ddd", backgroundColor: '#c4c2c2', boxShadow: '5px 5px 10px #888'}}}>
         <DialogTitle gap={'20px'}>
           <div style={{ display: 'flex', flexDirection: 'row', alignItems: 'center', gap: '20px' }}>
             <img src="matterbridge 64x64.png" alt="Matterbridge Logo" style={{ height: '64px', width: '64px' }} />
@@ -379,9 +379,6 @@ function Home() {
   );
 }
 
-/*
-*/
-
 function AddRemovePlugins({ reloadSettings }) {
   const [pluginName, setPluginName] = useState('matterbridge-');
   const [open, setSnack] = useState(false);
@@ -525,176 +522,21 @@ function QRDiv({ qrText, pairingText, qrWidth, topText, matterbridgeInfo, plugin
   }
 }
 
-function DialogConfigPlugin( { config, schema, handleCloseConfig }) {
-  // console.log('DialogConfigPlugin:', config, schema);
-
-  // Function to get CSS variable value
-  function getCssVariable(variableName, defaultValue) {
-    const value = getComputedStyle(document.body).getPropertyValue(variableName).trim();
-    if(!value) console.error('getCssVariable:', value);
-    return value || defaultValue;
-  }
-
-  const theme = createTheme({
-    palette: {
-      primary: {
-        main: getCssVariable('--main-button-bg-color', '#1976d2'), // Default blue
-      },
-    },
-    components: {
-      MuiPaper: {
-        styleOverrides: {
-          root: {
-            border: "1px solid #ddd", 
-            backgroundColor: '#c4c2c2', 
-            boxShadow: '5px 5px 10px #888'
-          },
-        },
-      },
-      MuiTextField: {
-        defaultProps: {
-          size: 'small',
-        },
-      },
-      MuiButton: {
-        styleOverrides: {
-          root: {
-            color: 'var(--main-button-color)',
-            backgroundColor: 'var(--main-button-bg-color)', 
-            },
-        },
-        defaultProps: {
-          variant: 'contained',
-          size: 'small',
-        },
-      },
-      MuiTypography: {
-        fontFamily: 'Roboto, Helvetica, Arial, sans-serif',
-      },
-      MuiBox: {
-        styleOverrides: {
-          root: {
-            padding: '5px',
-            margin: '0px',
-          },
-        },
-      },
-    },
-  });
-
-  function ArrayFieldTemplate(props) {
-    const { canAdd, onAddClick, schema, title } = props;
-    // console.log('ArrayFieldTemplate: title', title, 'description', schema.description);
-    return (
-      <Box sx={{ padding: '10px', margin: '0px', border: '1px solid grey' }}>
-        {title && (
-          <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '10px' }}>
-            {title && (
-              <Typography sx={{ fontSize: '14px', fontWeight: 'bold' }}>{title}</Typography>
-            )}
-            {canAdd && (
-              <IconButton onClick={onAddClick} size="small" color="primary">
-                <Add />
-              </IconButton>
-            )}
-          </Box>
-        )}
-        {schema.description && (
-          <Box sx={{ marginBottom: '10px' }}>
-            <Typography sx={{ fontSize: '14px', fontWeight: 'normal' }}>{schema.description}</Typography>
-          </Box>
-        )}
-        {props.items.map((element) => (
-          <Box key={element.index} sx={{ display: 'flex', alignItems: 'center', marginBottom: '10px' }}>
-            <Box sx={{ flexGrow: 1 }}>
-              {element.children}
-            </Box>
-            <IconButton onClick={element.onDropIndexClick(element.index)} size="small" color="primary">
-              <DeleteForever />
-            </IconButton>
-          </Box>
-        ))}
-      </Box>
-    );
-  }
-
-  function ObjectFieldTemplate(props) {
-    const { onAddClick, schema, properties, title, description } = props;
-    // Check if this is the entire schema or an individual object
-    const isRoot = !schema.additionalProperties;
-    console.log('ObjectFieldTemplate: title', title, 'description', description, 'schema', schema, 'isRoot', isRoot);
-
-    return (
-      <Box sx={{ padding: '10px', margin: '0px', border: isRoot ? 'none' : '1px solid grey' }}>
-        {/* Title for root */}
-        {schema.title && (
-          <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '10px' }}>
-            <Typography sx={{ fontSize: '14px', fontWeight: 'bold' }}>{schema.title}</Typography>
-          </Box>
-        )}
-        {/* Title and Add for object */}
-        {title && !isRoot && (
-          <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '10px' }}>
-            <Typography sx={{ fontSize: '14px', fontWeight: 'bold' }}>{title}</Typography>
-              <IconButton onClick={onAddClick(schema)} size="small" color="primary">
-                <Add />
-              </IconButton>
-          </Box>
-        )}
-        {/* Description for root */}
-        {schema.description && (
-          <Box sx={{ marginBottom: '20px' }}>
-            <Typography sx={{ fontSize: '14px', fontWeight: 'normal' }}>{schema.description}</Typography>
-          </Box>
-        )}
-        {/* Iterate over each property in the object */}
-        {properties.map(({ name, content, disabled, readonly, hidden }) => (
-          <Box key={name} sx={{ display: 'flex', alignItems: 'center', marginBottom: '10px' }}>
-            <Box sx={{ flexGrow: 1, marginBottom: '10px', padding: '0px' }}>
-              {content}
-            </Box>
-          </Box>
-        ))}
-      </Box>
-    );
-  }
-
-  function RemoveButton(props) {
-    const { ...otherProps } = props;
-    return (
-      <IconButton size='small' color='primary' {...otherProps}>
-        <DeleteForever />
-      </IconButton>
-    );
-  }
-
-  const uiSchema = {
-    "password": {
-      "ui:widget": "password",
-    },
-    "ui:submitButtonOptions": {
-      "props": {
-        "variant": "contained",
-        "disabled": false,
-      },
-      "norender": false,
-      "submitText": "Save the changes to the config file",
-    },
-    'ui:globalOptions': { orderable: false },
-  };
+function DialogConfigPlugin( { config, schema, handleCloseConfig } ) {
+  console.log('DialogConfigPlugin:', config, schema);
 
   const handleSaveChanges = ({ formData }) => {
-    // console.log('handleSaveChanges:', formData);
+    console.log('handleSaveChanges:', formData);
     const config = JSON.stringify(formData, null, 2)
     sendCommandToMatterbridge('saveconfig', formData.name, config);
     // Close the dialog
     handleCloseConfig();
   };    
 
   return (
-    <ThemeProvider theme={theme}>
-      <div style={{ maxWidth: '800px' }}>
-        <Form schema={schema} formData={config} uiSchema={uiSchema} validator={validator} templates={{ ArrayFieldTemplate, ObjectFieldTemplate, ButtonTemplates: { RemoveButton } }} onSubmit={handleSaveChanges} />
+    <ThemeProvider theme={configTheme}>
+      <div style={{ width: '800px', height: '600px', overflow: 'auto' }}>
+        <Form schema={schema} formData={config} uiSchema={configUiSchema} validator={validator} templates={{ ArrayFieldTemplate, ObjectFieldTemplate, ButtonTemplates: { RemoveButton } }} onSubmit={handleSaveChanges} />
       </div>
     </ThemeProvider>  
   );
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		<!doctype html><html lang="en"><head><meta charset="utf-8"/><base href="./"><link rel="icon" href="./matterbridge 32x32.png"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><title>Matterbridge</title><link rel="manifest" href="./manifest.json"/><script defer="defer" src="./static/js/main.4087dcdb.js"></script><link href="./static/css/main.0f9899a6.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>
		<!doctype html><html lang="en"><head><meta charset="utf-8"/><base href="./"><link rel="icon" href="./matterbridge 32x32.png"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><title>Matterbridge</title><link rel="manifest" href="./manifest.json"/><script defer="defer" src="./static/js/main.de3e1637.js"></script><link href="./static/css/main.85982c95.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>