Skip to content

Commit

Permalink
Bump frontend version to 2.4.1
Browse files Browse the repository at this point in the history
  • Loading branch information
@Luligu
Luligu committed Feb 9, 2025
1 parent 1badf70 commit c4884fe
Show file tree
Hide file tree
Showing 17 changed files with 257 additions and 194 deletions.
6 changes: 3 additions & 3 deletions frontend/build/asset-manifest.json
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
{
"files": {
"main.css": "./static/css/main.cf25d33e.css",
"main.js": "./static/js/main.26dbf9b9.js",
"main.js": "./static/js/main.fd3d0108.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",
Expand Down Expand Up @@ -61,11 +61,11 @@
"static/media/roboto-greek-ext-400-normal.woff": "./static/media/roboto-greek-ext-400-normal.16eb83b4a3b1ea994243.woff",
"index.html": "./index.html",
"main.cf25d33e.css.map": "./static/css/main.cf25d33e.css.map",
"main.26dbf9b9.js.map": "./static/js/main.26dbf9b9.js.map",
"main.fd3d0108.js.map": "./static/js/main.fd3d0108.js.map",
"453.abd36b29.chunk.js.map": "./static/js/453.abd36b29.chunk.js.map"
},
"entrypoints": [
"static/css/main.cf25d33e.css",
"static/js/main.26dbf9b9.js"
"static/js/main.fd3d0108.js"
]
}
2 changes: 1 addition & 1 deletion frontend/build/index.html
View file
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.26dbf9b9.js"></script><link href="./static/css/main.cf25d33e.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.fd3d0108.js"></script><link href="./static/css/main.cf25d33e.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>
8 changes: 4 additions & 4 deletions frontend/build/static/js/main.26dbf9b9.js → frontend/build/static/js/main.fd3d0108.js
View file

Large diffs are not rendered by default.

0 ...ld/static/js/main.26dbf9b9.js.LICENSE.txt → ...ld/static/js/main.fd3d0108.js.LICENSE.txt
View file
File renamed without changes.
2 changes: 1 addition & 1 deletion ...tend/build/static/js/main.26dbf9b9.js.map → ...tend/build/static/js/main.fd3d0108.js.map
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion frontend/package.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "frontend",
"version": "2.4.0",
"version": "2.4.1",
"private": true,
"homepage": "./",
"scripts": {
Expand Down
3 changes: 2 additions & 1 deletion frontend/src/components/Header.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -187,7 +187,7 @@ function Header() {

useEffect(() => {
const handleWebSocketMessage = (msg) => {
{/*Header listener*/ }
/*Header listener*/
if (debug) console.log('Header received WebSocket Message:', msg);
if (msg.src === 'Matterbridge' && msg.dst === 'Frontend') {
if (msg.method === 'refresh_required') {
Expand Down Expand Up @@ -217,6 +217,7 @@ function Header() {
}
}, [online, sendMessage]);

if(debug) console.log('Header rendering...');
if (!online || settings.matterbridgeInformation === undefined) {
return null;
}
Expand Down
163 changes: 7 additions & 156 deletions frontend/src/components/Home.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,36 +7,26 @@ import React, { useEffect, useState, useRef, useContext, useMemo } from 'react';
import Dialog from '@mui/material/Dialog';
import DialogTitle from '@mui/material/DialogTitle';
import DialogContent from '@mui/material/DialogContent';
import TextField from '@mui/material/TextField';
import Alert from '@mui/material/Alert';
import Snackbar from '@mui/material/Snackbar';
import Tooltip from '@mui/material/Tooltip';
import IconButton from '@mui/material/IconButton';
import Button from '@mui/material/Button';
import MenuItem from '@mui/material/MenuItem';
import Menu from '@mui/material/Menu';
import { ThemeProvider } from '@mui/material';

// @mui/icons-material
import DeleteForever from '@mui/icons-material/DeleteForever';
import Download from '@mui/icons-material/Download';
import Add from '@mui/icons-material/Add';
import PublishedWithChanges from '@mui/icons-material/PublishedWithChanges';
import Settings from '@mui/icons-material/Settings';
import Favorite from '@mui/icons-material/Favorite';
import Help from '@mui/icons-material/Help';
import Announcement from '@mui/icons-material/Announcement';
import QrCode2 from '@mui/icons-material/QrCode2';
import MoreVert from '@mui/icons-material/MoreVert';
import Unpublished from '@mui/icons-material/Unpublished';

// @rjsf
import Form from '@rjsf/mui';
import validator from '@rjsf/validator-ajv8';

// QRCode
import { QRCodeSVG } from 'qrcode.react';

// Frontend
import { StatusIndicator } from './StatusIndicator';
import { sendCommandToMatterbridge } from './sendApiCommand';
Expand All @@ -45,10 +35,13 @@ import { WebSocketContext } from './WebSocketProvider';
import { Connecting } from './Connecting';
import { SystemInfoTable } from './SystemInfoTable';
import { MatterbridgeInfoTable } from './MatterbridgeInfoTable';
import { QRDiv } from './QRDiv';
import { InstallAddPlugins } from './InstallAddPlugins';
import { ConfirmCancelForm } from './ConfirmCancelForm';
import { configUiSchema, ArrayFieldTemplate, ObjectFieldTemplate, ErrorListTemplate, FieldErrorTemplate, RemoveButton, CheckboxWidget, createConfigTheme, DescriptionFieldTemplate } from './configEditor';
import { getCssVariable } from './muiTheme';
import { debug } from '../App';
// const debug = true;

export let pluginName = '';
export let selectDevices = [];
Expand All @@ -69,13 +62,13 @@ function Home() {
const [logFilterLevel] = useState(localStorage.getItem('logFilterLevel') ?? 'info');
const [logFilterSearch] = useState(localStorage.getItem('logFilterSearch') ?? '*');

const { setMessages, logMessage, addListener, removeListener, online, sendMessage } = useContext(WebSocketContext);
const { logMessage, addListener, removeListener, online, sendMessage } = useContext(WebSocketContext);

const refAddRemove = useRef(null);
const refRegisteredPlugins = useRef(null);

const primaryColor = useMemo(() => getCssVariable('--primary-color', '#009a00'), []);
const theme = useMemo(() => createConfigTheme(primaryColor), []);
const theme = useMemo(() => createConfigTheme(primaryColor), [primaryColor]);

const handleSnackOpen = () => {
setOpenSnack(true);
Expand Down Expand Up @@ -290,6 +283,7 @@ function Home() {
}
}, [online]);

if(debug) console.log('Home rendering...');
if (!online) {
return (<Connecting />);
}
Expand Down Expand Up @@ -330,7 +324,7 @@ function Home() {
<div className="MbfWindowHeader">
<p className="MbfWindowHeaderText">Install add plugin</p>
</div>
<AddRemovePlugins ref={refAddRemove} plugins={plugins} reloadSettings={reloadSettings} />
<InstallAddPlugins ref={refAddRemove} plugins={plugins} reloadSettings={reloadSettings} />
</div>
}

Expand Down Expand Up @@ -472,149 +466,6 @@ function Home() {
</div>
*/

function AddRemovePlugins({ reloadSettings }) {
const [pluginName, setPluginName] = useState('matterbridge-');
const [open, setSnack] = useState(false);
const [anchorEl, setAnchorEl] = React.useState(null);
const { logMessage } = useContext(WebSocketContext);


const handleSnackClose = (event, reason) => {
if (reason === 'clickaway') return;
setSnack(false);
};

const handleInstallPluginClick = () => {
const plugin = pluginName.split('@')[0];
if (plugin === 'matterbridge')
logMessage('Matterbridge', `Installing matterbridge package: ${pluginName}`);
else
logMessage('Plugins', `Installing plugin: ${pluginName}`);
sendCommandToMatterbridge('installplugin', pluginName);
setTimeout(() => {
reloadSettings();
}, 5000);
};

const handleAddPluginClick = () => {
logMessage('Plugins', `Adding plugin: ${pluginName}`);
sendCommandToMatterbridge('addplugin', pluginName);
setTimeout(() => {
reloadSettings();
}, 1000);
};

const handleClickVertical = (event) => {
setAnchorEl(event.currentTarget);
};

const handleCloseMenu = (value) => {
// console.log('handleCloseMenu:', value);
if (value !== '') setPluginName(value);
setAnchorEl(null);
};

return (
<div style={{ display: 'flex', flexDirection: 'row', flex: '1 1 auto', alignItems: 'center', justifyContent: 'space-between', margin: '0px', padding: '10px', gap: '20px' }}>
<Snackbar anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }} open={open} onClose={handleSnackClose} autoHideDuration={5000}>
<Alert onClose={handleSnackClose} severity="info" variant="filled" sx={{ width: '100%', bgcolor: 'var(--primary-color)' }}>Restart required</Alert>
</Snackbar>
<TextField value={pluginName} onChange={(event) => { setPluginName(event.target.value); }} size="small" id="plugin-name" label="Plugin name or plugin path" variant="outlined" fullWidth />
<IconButton onClick={handleClickVertical}>
<MoreVert />
</IconButton>
<Menu id="simple-menu" anchorEl={anchorEl} keepMounted open={Boolean(anchorEl)} onClose={() => handleCloseMenu('')}>
<MenuItem onClick={() => handleCloseMenu('matterbridge-zigbee2mqtt')}>matterbridge-zigbee2mqtt</MenuItem>
<MenuItem onClick={() => handleCloseMenu('matterbridge-somfy-tahoma')}>matterbridge-somfy-tahoma</MenuItem>
<MenuItem onClick={() => handleCloseMenu('matterbridge-shelly')}>matterbridge-shelly</MenuItem>
<MenuItem onClick={() => handleCloseMenu('matterbridge-hass')}>matterbridge-hass</MenuItem>
<MenuItem onClick={() => handleCloseMenu('matterbridge-example-accessory-platform')}>matterbridge-example-accessory-platform</MenuItem>
<MenuItem onClick={() => handleCloseMenu('matterbridge-example-dynamic-platform')}>matterbridge-example-dynamic-platform</MenuItem>
<MenuItem onClick={() => handleCloseMenu('matterbridge-eve-door')}>matterbridge-eve-door</MenuItem>
<MenuItem onClick={() => handleCloseMenu('matterbridge-eve-motion')}>matterbridge-eve-motion</MenuItem>
<MenuItem onClick={() => handleCloseMenu('matterbridge-eve-energy')}>matterbridge-eve-energy</MenuItem>
<MenuItem onClick={() => handleCloseMenu('matterbridge-eve-weather')}>matterbridge-eve-weather</MenuItem>
<MenuItem onClick={() => handleCloseMenu('matterbridge-eve-room')}>matterbridge-eve-room</MenuItem>
</Menu>
<Tooltip title="Install or update a plugin from npm">
<Button onClick={handleInstallPluginClick} endIcon={<Download />} style={{ color: 'var(--main-button-color)', backgroundColor: 'var(--main-button-bg-color)', height: '30px', minWidth: '90px' }}> Install</Button>
</Tooltip>
<Tooltip title="Add an installed plugin">
<Button onClick={handleAddPluginClick} endIcon={<Add />} style={{ color: 'var(--main-button-color)', backgroundColor: 'var(--main-button-bg-color)', height: '30px', minWidth: '90px' }}> Add</Button>
</Tooltip>
</div>
);
}

function QRDiv({ matterbridgeInfo, plugin }) {
console.log('QRDiv:', matterbridgeInfo, plugin);
if (matterbridgeInfo.bridgeMode === 'bridge' && matterbridgeInfo.matterbridgePaired === true && matterbridgeInfo.matterbridgeFabricInformations) {
console.log(`QRDiv: paired ${matterbridgeInfo.matterbridgePaired}, got ${matterbridgeInfo.matterbridgeFabricInformations?.length} fabrics, got ${matterbridgeInfo.matterbridgeSessionInformations?.length} sessions`);
return (
<div className="MbfWindowDiv" style={{ alignItems: 'center', minWidth: '302px', overflow: 'hidden' }} >
<div className="MbfWindowHeader">
<p className="MbfWindowHeaderText" style={{ textAlign: 'left', overflow: 'hidden' }}>Paired fabrics</p>
</div>
<div className="MbfWindowBodyColumn">
{matterbridgeInfo.matterbridgeFabricInformations.map((fabric, index) => (
<div key={index} style={{ margin: '0px', padding: '10px', gap: '0px', color: 'var(--div-text-color)', backgroundColor: 'var(--div-bg-color)', textAlign: 'left', fontSize: '14px' }}>
<p className="status-blue" style={{ margin: '0px 10px 10px 10px', fontSize: '14px', padding: 0, color: 'var(--main-button-color)', backgroundColor: 'var(--main-button-bg-color)' }}>Fabric: {fabric.fabricIndex}</p>
<p style={{ margin: '0px 20px 0px 20px', color: 'var(--div-text-color)' }}>Vendor: {fabric.rootVendorId} {fabric.rootVendorName}</p>
{fabric.label !== '' && <p style={{ margin: '0px 20px 0px 20px', color: 'var(--div-text-color)' }}>Label: {fabric.label}</p>}
<p style={{ margin: '0px 20px 0px 20px', color: 'var(--div-text-color)' }}>Active sessions: {matterbridgeInfo.matterbridgeSessionInformations ? matterbridgeInfo.matterbridgeSessionInformations.filter(session => session.fabric.fabricIndex === fabric.fabricIndex).length : '0'}</p>
</div>
))}
</div>
</div>
);
} else if (matterbridgeInfo.bridgeMode === 'childbridge' && plugin && plugin.paired === true && plugin.fabricInformations) {
console.log(`QRDiv: paired ${plugin.paired}, got ${plugin.fabricInformations?.length} fabrics, got ${plugin.sessionInformations?.length} sessions`);
return (
<div className="MbfWindowDiv" style={{ alignItems: 'center', minWidth: '302px', overflow: 'hidden' }} >
<div className="MbfWindowHeader">
<p className="MbfWindowHeaderText" style={{ textAlign: 'left' }}>Paired fabrics</p>
</div>
<div className="MbfWindowBodyColumn">
{plugin.fabricInformations.map((fabric, index) => (
<div key={index} style={{ margin: '0px', padding: '10px', gap: '0px', color: 'var(--div-text-color)', backgroundColor: 'var(--div-bg-color)', textAlign: 'left', fontSize: '14px' }}>
<p className="status-blue" style={{ margin: '0px 10px 10px 10px', fontSize: '14px', padding: 0, color: 'var(--main-button-color)', backgroundColor: 'var(--main-button-bg-color)' }}>Fabric: {fabric.fabricIndex}</p>
<p style={{ margin: '0px 20px 0px 20px', color: 'var(--div-text-color)' }}>Vendor: {fabric.rootVendorId} {fabric.rootVendorName}</p>
{fabric.label !== '' && <p style={{ margin: '0px 20px 0px 20px', color: 'var(--div-text-color)' }}>Label: {fabric.label}</p>}
<p style={{ margin: '0px 20px 0px 20px', color: 'var(--div-text-color)' }}>Active sessions: {plugin.sessionInformations ? plugin.sessionInformations.filter(session => session.fabric.fabricIndex === fabric.fabricIndex).length : '0'}</p>
</div>
))}
</div>
</div>
);
} else if (matterbridgeInfo.bridgeMode === 'bridge' && matterbridgeInfo.matterbridgePaired === false && matterbridgeInfo.matterbridgeQrPairingCode && matterbridgeInfo.matterbridgeManualPairingCode) {
// console.log(`QRDiv: qrText ${qrText} pairingText ${pairingText}`);
return (
<div className="MbfWindowDiv" style={{ alignItems: 'center', minWidth: '302px' }}>
<div className="MbfWindowHeader">
<p className="MbfWindowHeaderText" style={{ textAlign: 'left' }}>QR pairing code</p>
</div>
<QRCodeSVG value={matterbridgeInfo.matterbridgeQrPairingCode} size={256} level='M' fgColor={'var(--div-text-color)'} bgColor={'var(--div-bg-color)'} style={{ margin: '20px' }} />
<div className="MbfWindowFooter" style={{ padding: 0, marginTop: '-5px', height: '30px' }}>
<p className="MbfWindowFooterText" style={{ fontSize: '14px', fontWeight: 'normal', color: 'var(--div-text-color)' }}>Manual pairing code: {matterbridgeInfo.matterbridgeManualPairingCode}</p>
</div>
</div>
);
} else if (matterbridgeInfo.bridgeMode === 'childbridge' && plugin && plugin.paired === false && plugin.qrPairingCode && plugin.manualPairingCode) {
// console.log(`QRDiv: qrText ${qrText} pairingText ${pairingText}`);
return (
<div className="MbfWindowDiv" style={{ alignItems: 'center', minWidth: '302px' }}>
<div className="MbfWindowHeader">
<p className="MbfWindowHeaderText" style={{ textAlign: 'left' }}>QR pairing code</p>
</div>
<QRCodeSVG value={plugin.qrPairingCode} size={256} level='M' fgColor={'var(--div-text-color)'} bgColor={'var(--div-bg-color)'} style={{ margin: '20px' }} />
<div className="MbfWindowFooter" style={{ padding: 0, marginTop: '-5px', height: '30px' }}>
<p className="MbfWindowFooterText" style={{ fontSize: '14px', fontWeight: 'normal', color: 'var(--div-text-color)' }}>Manual pairing code: {plugin.manualPairingCode}</p>
</div>
</div>
);
}
}

function DialogConfigPlugin({ config, schema, handleCloseConfig }) {
// console.log('DialogConfigPlugin:', config, schema);

Expand Down
Loading

0 comments on commit c4884fe

Please sign in to comment.