Skip to content

Commit fbd413f

Browse files
geoffhousegeoffhouse
committed
add webpage-embed module
1 parent 2f322e2 commit fbd413f

9 files changed

Lines changed: 203 additions & 10 deletions

File tree

‎src/client/src/utils/iconMappings.jsx‎

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React from 'react';
1+
import React from "react";
22

33
// List of MDI icon names
44
const mdiIconNames = [
@@ -38,10 +38,9 @@ const lazyMdiIcon = (iconName) => {
3838
default: (props) => <MdiSvgIcon path={icons[iconName]} {...props} />,
3939
};
4040
});
41-
}
41+
};
4242

4343
export const iconMap = {
44-
4544
// MUI icons
4645
Home: React.lazy(() => import("@mui/icons-material/Home")),
4746
AccountCircle: React.lazy(() => import("@mui/icons-material/AccountCircle")),
@@ -59,8 +58,8 @@ export const iconMap = {
5958
SettingsEthernet: React.lazy(() => import("@mui/icons-material/SettingsEthernet")),
6059
SmartButton: React.lazy(() => import("@mui/icons-material/SmartButton")),
6160
Schedule: React.lazy(() => import("@mui/icons-material/Schedule")),
61+
Web: React.lazy(() => import("@mui/icons-material/Web")),
6262

6363
// MDI icons
64-
...Object.fromEntries(mdiIconNames.map(name => [name, lazyMdiIcon(name)])),
65-
64+
...Object.fromEntries(mdiIconNames.map((name) => [name, lazyMdiIcon(name)])),
6665
};

‎src/modules/clock/module.json‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,13 +3,13 @@
33
"longname": "Clock",
44
"description": "Digital and Analogue Clocks",
55
"capabilities": [],
6+
"notes": "",
67
"version": "1.0.0",
78
"icon": "Schedule",
89
"author": "Ryan McCartney",
910
"needsContainer": false,
10-
"protectedRoutes": [
11-
"config"
12-
],
11+
"devmounts": [],
12+
"protectedRoutes": ["config"],
1313
"license": "Apache-2.0",
1414
"status": "stable",
1515
"defaultconfig": {
@@ -22,4 +22,4 @@
2222
"description": "Tick Tock",
2323
"enabled": false
2424
}
25-
}
25+
}

‎src/modules/obe-c100/client/Toolbar.jsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ import AxiosCommand from "@utils/AxiosCommand";
1111
import AxiosPut from "@utils/AxiosPut";
1212
import { useAlert } from "@utils/Snackbar";
1313
import { useSelector } from "react-redux";
14+
1415
export default function Toolbar({ panelId, ...props }) {
1516
const sendAlert = useAlert();
1617
const panelConfig = useSelector((state) => state.panelConfig);

‎src/modules/obe-c100/client/panels/MainPanel.jsx‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
import React from "react";
21
import Codec from "../components/Codec";
32
import CodecStatus from "../components/CodecStatus";
43

‎src/modules/webpage-embed/client/Module.jsx‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import BugModuleWrapper from "@core/BugModuleWrapper";
2+
import BugRestrictTo from "@core/BugRestrictTo";
3+
import { lazy } from "react";
4+
import { Route, Routes } from "react-router-dom";
5+
6+
const MainPanel = lazy(() => import("./panels/MainPanel"));
7+
const ConfigPanel = lazy(() => import("./panels/ConfigPanel"));
8+
9+
export default function Module(props) {
10+
return (
11+
<BugModuleWrapper {...props}>
12+
<Routes>
13+
<Route index element={<MainPanel {...props} />} />
14+
<Route
15+
path="config"
16+
element={
17+
<BugRestrictTo role="admin">
18+
<ConfigPanel {...props} />
19+
</BugRestrictTo>
20+
}
21+
/>
22+
</Routes>
23+
</BugModuleWrapper>
24+
);
25+
}

‎src/modules/webpage-embed/client/Toolbar.jsx‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
import BugToolbarWrapper from "@core/BugToolbarWrapper";
2+
import { usePanelStatus } from "@hooks/PanelStatus";
3+
import { usePanelToolbarEventTrigger } from "@hooks/PanelToolbarEvent";
4+
import RotateLeftIcon from "@mui/icons-material/RotateLeft";
5+
import { Button, Divider, ListItemIcon, ListItemText, MenuItem } from "@mui/material";
6+
7+
export default function Toolbar({ panelId, ...props }) {
8+
const toolbarProps = { ...props };
9+
const panelStatus = usePanelStatus();
10+
const triggerPanelEvent = usePanelToolbarEventTrigger();
11+
12+
if (!panelStatus) {
13+
return null;
14+
}
15+
16+
const handleReloadClicked = async (event, item) => {
17+
triggerPanelEvent("reload");
18+
};
19+
20+
const buttons = () => (
21+
<>
22+
<Button variant="outlined" color={"primary"} onClick={handleReloadClicked} startIcon={<RotateLeftIcon />}>
23+
Reload
24+
</Button>
25+
</>
26+
);
27+
28+
const menuItems = () => {
29+
return [
30+
<Divider key="divider1" />,
31+
<MenuItem key="reload" onClick={handleReloadClicked}>
32+
<ListItemIcon>
33+
<RotateLeftIcon fontSize="small" />
34+
</ListItemIcon>
35+
<ListItemText primary="Reload" />
36+
</MenuItem>,
37+
];
38+
};
39+
40+
toolbarProps["buttons"] = panelStatus.hasCritical ? null : buttons();
41+
toolbarProps["menuItems"] = panelStatus.hasCritical ? null : menuItems();
42+
toolbarProps["onClick"] = null;
43+
return <BugToolbarWrapper {...toolbarProps} />;
44+
}

‎src/modules/webpage-embed/client/panels/ConfigPanel.jsx‎

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
import BugConfigFormPanelGroup from "@core/BugConfigFormPanelGroup";
2+
import BugConfigFormTextField from "@core/BugConfigFormTextField";
3+
import BugConfigWrapper from "@core/BugConfigWrapper";
4+
import BugLoading from "@core/BugLoading";
5+
import { useConfigFormHandler } from "@hooks/ConfigFormHandler";
6+
import { Grid } from "@mui/material";
7+
import { useSelector } from "react-redux";
8+
9+
export default function ConfigPanel() {
10+
const panelConfig = useSelector((state) => state.panelConfig);
11+
12+
if (panelConfig.status === "loading") {
13+
return <BugLoading />;
14+
}
15+
16+
if (panelConfig.status !== "success") {
17+
return null;
18+
}
19+
20+
const { register, handleSubmit, control, errors, validateServer, messages } = useConfigFormHandler({
21+
panelId: panelConfig.data.id,
22+
});
23+
24+
return (
25+
<>
26+
<BugConfigWrapper config={panelConfig.data} handleSubmit={handleSubmit}>
27+
<Grid size={{ xs: 12 }}>
28+
<BugConfigFormTextField
29+
name="title"
30+
control={control}
31+
rules={{ required: true }}
32+
fullWidth
33+
error={errors.title}
34+
defaultValue={panelConfig.data.title}
35+
label="Panel Title"
36+
/>
37+
</Grid>
38+
<Grid size={{ xs: 12 }}>
39+
<BugConfigFormTextField
40+
name="description"
41+
control={control}
42+
fullWidth
43+
error={errors.description}
44+
defaultValue={panelConfig.data.description}
45+
label="Description"
46+
/>
47+
</Grid>
48+
<Grid size={{ xs: 12 }}>
49+
<BugConfigFormPanelGroup name="group" control={control} defaultValue={panelConfig.data.group} />
50+
</Grid>
51+
<Grid size={{ xs: 12 }}>
52+
<BugConfigFormTextField
53+
name="url"
54+
control={control}
55+
fullWidth
56+
error={errors.url}
57+
defaultValue={panelConfig.data.url}
58+
label="URL"
59+
/>
60+
</Grid>
61+
</BugConfigWrapper>
62+
</>
63+
);
64+
}

‎src/modules/webpage-embed/client/panels/MainPanel.jsx‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
import { usePanelToolbarEvent } from "@hooks/PanelToolbarEvent";
2+
import { Box } from "@mui/material";
3+
import { useState } from "react";
4+
import { useSelector } from "react-redux";
5+
6+
export default function MainPanel({ panelId }) {
7+
const panelConfig = useSelector((state) => state.panelConfig);
8+
const [key, setKey] = useState(0);
9+
10+
if (panelConfig.status === "loading") {
11+
return <BugLoading />;
12+
}
13+
14+
if (panelConfig.status !== "success") {
15+
return null;
16+
}
17+
18+
usePanelToolbarEvent("reload", () => {
19+
setKey((prevKey) => prevKey + 1);
20+
});
21+
22+
return (
23+
<Box sx={{ height: "100%", width: "100%" }}>
24+
<iframe
25+
key={key}
26+
src={panelConfig.data.url}
27+
width="100%"
28+
height="100%"
29+
title="Embedded Content"
30+
style={{ border: "none", position: "absolute", top: 0, left: 0, right: 0, bottom: 0 }}
31+
loading="lazy"
32+
/>
33+
</Box>
34+
);
35+
}

‎src/modules/webpage-embed/module.json‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
{
2+
"name": "webpage-embed",
3+
"longname": "Embedded Web Page",
4+
"description": "Embed a web page within the BUG UI",
5+
"capabilities": [],
6+
"notes": "",
7+
"version": "1.0.0",
8+
"icon": "Web",
9+
"author": "Geoff House",
10+
"license": "Apache-2.0",
11+
"status": "stable",
12+
"needsContainer": false,
13+
"devmounts": [],
14+
"protectedRoutes": ["config"],
15+
"defaultconfig": {
16+
"id": "",
17+
"order": 0,
18+
"needsConfigured": true,
19+
"title": "",
20+
"module": "webpage-embed",
21+
"description": "",
22+
"notes": "",
23+
"enabled": false,
24+
"url": ""
25+
}
26+
}

0 commit comments

Comments
 (0)