Bump version to 1.7.2-dev.7

Luligu · Jan 10, 2025 · d53aba0 · d53aba0
1 parent 7ad47b1
commit d53aba0
Show file tree

Hide file tree

Showing 17 changed files with 623 additions and 69 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 new dark and light mode. The dark mode is now the default mode.
 It is possible to change the mode (Classic, Dark or Light) in Settings, Matterbridge settings.
 
-## [1.7.2-dev.6] - 2025-01-10
+## [1.7.2-dev.7] - 2025-01-10
 
 ### Added
 
@@ -29,6 +29,8 @@ It is possible to change the mode (Classic, Dark or Light) in Settings, Matterbr
 - [frontend]: Added the possibility to reorder the items in the config editor lists.
 - [frontend]: Added custom error messages for ErrorListTemplate and FieldErrorTemplate in react-jsonschema-form for validation in the config editor.
 - [frontend]: Added filter by device name and serial number to Devices page.
+- [frontend]: Added Icon view to the Devices page (beta).
+- [frontend]: Added the possibility to select the entities/components from a list in the config editor.
 
 ### Changed
 

diff --git a/frontend/build/asset-manifest.json b/frontend/build/asset-manifest.json
@@ -1,7 +1,7 @@
 {
   "files": {
-    "main.css": "./static/css/main.18f673b9.css",
-    "main.js": "./static/js/main.0f1735dd.js",
+    "main.css": "./static/css/main.8727aee4.css",
+    "main.js": "./static/js/main.c320863b.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.18f673b9.css.map": "./static/css/main.18f673b9.css.map",
-    "main.0f1735dd.js.map": "./static/js/main.0f1735dd.js.map",
+    "main.8727aee4.css.map": "./static/css/main.8727aee4.css.map",
+    "main.c320863b.js.map": "./static/js/main.c320863b.js.map",
     "453.abd36b29.chunk.js.map": "./static/js/453.abd36b29.chunk.js.map"
   },
   "entrypoints": [
-    "static/css/main.18f673b9.css",
-    "static/js/main.0f1735dd.js"
+    "static/css/main.8727aee4.css",
+    "static/js/main.c320863b.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.0f1735dd.js"></script><link href="./static/css/main.18f673b9.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.c320863b.js"></script><link href="./static/css/main.8727aee4.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.18f673b9.css → frontend/build/static/css/main.8727aee4.css b/frontend/build/static/css/main.18f673b9.css → frontend/build/static/css/main.8727aee4.css
diff --git a/...nd/build/static/css/main.18f673b9.css.map → ...nd/build/static/css/main.8727aee4.css.map b/...nd/build/static/css/main.18f673b9.css.map → ...nd/build/static/css/main.8727aee4.css.map
diff --git a/frontend/build/static/js/main.0f1735dd.js → frontend/build/static/js/main.c320863b.js b/frontend/build/static/js/main.0f1735dd.js → frontend/build/static/js/main.c320863b.js
diff --git a/...ld/static/js/main.0f1735dd.js.LICENSE.txt → ...ld/static/js/main.c320863b.js.LICENSE.txt b/...ld/static/js/main.0f1735dd.js.LICENSE.txt → ...ld/static/js/main.c320863b.js.LICENSE.txt
diff --git a/...tend/build/static/js/main.0f1735dd.js.map → ...tend/build/static/js/main.c320863b.js.map b/...tend/build/static/js/main.0f1735dd.js.map → ...tend/build/static/js/main.c320863b.js.map
diff --git a/frontend/package.json b/frontend/package.json
@@ -1,6 +1,6 @@
 {
   "name": "frontend",
-  "version": "2.3.8",
+  "version": "2.3.9",
   "private": true,
   "homepage": "./",
   "scripts": {

diff --git a/frontend/src/App.css b/frontend/src/App.css
@@ -18,7 +18,7 @@
   --main-label-color: var(--main-grey-color);
 
   --primary-color: #009a00;
-  --secondary-color: #a58827;
+  --secondary-color: #316dc7;
 
   --header-bg-color: var(--primary-color);
   --header-text-color: white;

diff --git a/frontend/src/components/Devices.js b/frontend/src/components/Devices.js
@@ -26,6 +26,7 @@ import ViewModuleIcon from '@mui/icons-material/ViewModule';
 import { WebSocketContext } from './WebSocketProvider';
 import { Connecting } from './Connecting';
 import { debug } from '../App';
+import { DevicesIcons } from './DevicesIcons';
 
 const devicesColumns = [
   {
@@ -408,28 +409,33 @@ function Devices() {
   return (
     <div className="MbfPageDiv">
 
-
+      {/* Devices Filter and View Mode Dialog */}
       <div className="MbfWindowBodyRow" style={{ justifyContent: 'space-between', padding: 0, gap: '20px', width: '100%', height: '45px', minHeight: '45px', maxHeight: '45px' }}>
         <Box sx={{ display: 'flex', flexDirection: 'row', alignItems: 'center', gap: '10px' }}>
-          <Typography sx={{ fontSize: '16px', fontWeight: 'medium', color: 'var(--div-text-color)', marginLeft: '5px', whiteSpace: 'nowrap' }}>Filter by:</Typography>
+          <Typography sx={{ fontSize: '16px', fontWeight: 'normal', color: 'var(--div-text-color)', marginLeft: '5px', whiteSpace: 'nowrap' }}>Filter by:</Typography>
           <TextField
             variant="outlined"
             value={filter}
             onChange={handleFilterChange}
             placeholder="Enter the device name or serial number"
             sx={{ width: '300px' }}
+            InputProps={{
+              style: {
+                backgroundColor: 'var(--main-bg-color)',
+              },
+            }}
           />
         </Box>
         <Box sx={{ display: 'flex', flexDirection: 'row', alignItems: 'center', gap: '10px' }}>
-          <Typography sx={{ fontSize: '16px', fontWeight: 'medium', color: 'var(--div-text-color)', marginLeft: '5px', whiteSpace: 'nowrap' }}>View mode:</Typography>
+          <Typography sx={{ fontSize: '16px', fontWeight: 'normal', color: 'var(--div-text-color)', marginLeft: '5px', whiteSpace: 'nowrap' }}>View mode:</Typography>
           <IconButton onClick={() => setViewMode('table')} aria-label="Table View" disabled={viewMode === 'table'}>
               <Tooltip title="Table View">
-                <TableViewIcon style={{ color: viewMode === 'table' ? 'var(--div-text-color)' : 'var(--primary-color)' }} />
+                <TableViewIcon style={{ color: viewMode === 'table' ? 'var(--main-icon-color)' : 'var(--primary-color)' }} />
               </Tooltip>
             </IconButton>
             <IconButton onClick={() => setViewMode('icon')} aria-label="Icon View" disabled={viewMode === 'icon'}>
-              <Tooltip title="Icon View">
-                <ViewModuleIcon style={{ color: viewMode === 'icon' ? 'var(--div-text-color)' : 'var(--primary-color)' }} />
+              <Tooltip title="Icon View (beta)">
+                <ViewModuleIcon style={{ color: viewMode === 'icon' ? 'var(--main-icon-color)' : 'var(--primary-color)' }} />
               </Tooltip>
             </IconButton>         
         </Box>
@@ -461,24 +467,26 @@ function Devices() {
       </Dialog>
 
       {/* Devices Table */}
-      <div className="MbfWindowDiv" style={{ margin: '0', padding: '0', gap: '0', maxHeight: `${plugin && endpoint ? '50%' : '100%'}`, width: '100%', flex: '1 1 auto', overflow: 'hidden' }}>
-        <div className="MbfWindowHeader">
-          <div className="MbfWindowHeaderText" style={{display: 'flex', flexDirection: 'row', justifyContent: 'space-between'}}>
-            <p style={{margin: '0px', padding: '0px'}}>Registered devices</p>
-            <IconButton onClick={handleDialogDevicesToggle} aria-label="Configure Columns" style={{margin: '0px', padding: '0px', width: '19px', height: '19px'}}>
-              <Tooltip title="Configure columns">
-                <SettingsIcon style={{ color: 'var(--header-text-color)', fontSize: '19px' }}/>
-              </Tooltip>
-            </IconButton>
+      {viewMode === 'table' && 
+        <div className="MbfWindowDiv" style={{ margin: '0', padding: '0', gap: '0', maxHeight: `${plugin && endpoint ? '50%' : '100%'}`, width: '100%', flex: '1 1 auto', overflow: 'hidden' }}>
+          <div className="MbfWindowHeader">
+            <div className="MbfWindowHeaderText" style={{display: 'flex', flexDirection: 'row', justifyContent: 'space-between'}}>
+              <p style={{margin: '0px', padding: '0px'}}>Registered devices</p>
+              <IconButton onClick={handleDialogDevicesToggle} aria-label="Configure Columns" style={{margin: '0px', padding: '0px', width: '19px', height: '19px'}}>
+                <Tooltip title="Configure columns">
+                  <SettingsIcon style={{ color: 'var(--header-text-color)', fontSize: '19px' }}/>
+                </Tooltip>
+              </IconButton>
+            </div>
+          </div>
+          <div className="MbfWindowBodyColumn" style={{ margin: '0', padding: '0', gap: '0' }}>
+            <DevicesTable data={filteredDevices} columnVisibility={devicesColumnVisibility} setPlugin={setPlugin} setEndpoint={setEndpoint} setDeviceName={setDeviceName}/>
+          </div>
+          <div className="MbfWindowFooter" style={{height: '', padding: '0', borderTop: '1px solid var(--table-border-color)'}}>
+            <p className="MbfWindowFooterText" style={{paddingLeft: '10px', fontWeight: 'normal', textAlign: 'left'}}>Total devices: {filteredDevices.length.toString()}</p>
           </div>
         </div>
-        <div className="MbfWindowBodyColumn" style={{ margin: '0', padding: '0', gap: '0' }}>
-          <DevicesTable data={filteredDevices} columnVisibility={devicesColumnVisibility} setPlugin={setPlugin} setEndpoint={setEndpoint} setDeviceName={setDeviceName}/>
-        </div>
-        <div className="MbfWindowFooter" style={{height: '', padding: '0', borderTop: '1px solid var(--table-border-color)'}}>
-          <p className="MbfWindowFooterText" style={{paddingLeft: '10px', fontWeight: 'normal', textAlign: 'left'}}>Total devices: {filteredDevices.length.toString()}</p>
-        </div>
-      </div>
+      }
 
       {/* Clusters Configure Columns Dialog */}
       <Dialog open={dialogClustersOpen} onClose={handleDialogClustersToggle}>
@@ -506,7 +514,7 @@ function Devices() {
       </Dialog>
 
       {/* Clusters Table */}
-      {plugin && endpoint && (
+      {viewMode === 'table' && plugin && endpoint && (
         <div className="MbfWindowDiv" style={{ margin: '0', padding: '0', gap: '0', height: '50%', maxHeight: '50%', width: '100%', flex: '1 1 auto', overflow: 'hidden' }}>
           <div className="MbfWindowHeader">
             <div className="MbfWindowHeaderText" style={{display: 'flex', flexDirection: 'row', justifyContent: 'space-between'}}>
@@ -527,6 +535,11 @@ function Devices() {
         </div>
       )}
 
+      {/* Clusters Table */}
+      {viewMode === 'icon' && (
+        <DevicesIcons filter={filter} devices={filteredDevices} />
+      )}
+
     </div>
   );
 }
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.0f1735dd.js"></script><link href="./static/css/main.18f673b9.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.c320863b.js"></script><link href="./static/css/main.8727aee4.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>