Merge pull request #206 from bbc/prodigy-mx

Prodigy mx

src/client/src/components/BugItemMenu.jsx

@@ -75,24 +75,26 @@ export default function BugItemMenu({ item, menuItems }) {
                 <MoreVertIcon />
             </IconButton>
             <Menu anchorEl={anchorEl} open={open} onClose={handleClose}>
-                {menuItems.map((menuItem, index) => {
-                    if (menuItem.title === "-") {
-                        return <Divider key={index} />;
-                    } else {
-                        return (
-                            <MenuItem
-                                onClick={(event) => handleMenuItemClicked(event, menuItem)}
-                                key={index}
-                                disabled={parseDisabled(menuItem.disabled)}
-                            >
-                                <ListItemIcon disabled={parseDisabled(menuItem.disabled)}>
-                                    {getIcon(menuItem.icon)}
-                                </ListItemIcon>
-                                <StyledListItemText primary={menuItem.title} />
-                            </MenuItem>
-                        );
-                    }
-                })}
+                {menuItems
+                    .filter((menuItem) => menuItem !== null)
+                    .map((menuItem, index) => {
+                        if (menuItem.title === "-") {
+                            return <Divider key={index} />;
+                        } else {
+                            return (
+                                <MenuItem
+                                    onClick={(event) => handleMenuItemClicked(event, menuItem)}
+                                    key={index}
+                                    disabled={parseDisabled(menuItem.disabled)}
+                                >
+                                    <ListItemIcon disabled={parseDisabled(menuItem.disabled)}>
+                                        {getIcon(menuItem.icon)}
+                                    </ListItemIcon>
+                                    <StyledListItemText primary={menuItem.title} />
+                                </MenuItem>
+                            );
+                        }
+                    })}
             </Menu>
         </div>
     );

src/client/src/core/BugPanelTabbedForm.jsx

@@ -8,9 +8,10 @@ import BugCard from "@core/BugCard";
 import { useHistory, useLocation } from "react-router-dom";
 import Box from "@mui/material/Box";
 
-const TabPanel = ({ children, value, index }) => {
+const TabPanel = ({ children, value, index, fullHeight }) => {
+    const hidden = value !== index;
     return (
-        <BugCard role="tabpanel" hidden={value !== index}>
+        <BugCard sx={{ height: !hidden && fullHeight ? "100%" : "auto" }} role="tabpanel" hidden={hidden}>
             {value === index && <>{children}</>}
         </BugCard>
     );
@@ -24,6 +25,7 @@ export default function BugPanelTabbedForm({
     defaultTab = 0,
     contentProps = {},
     sx = {},
+    fullHeight = false,
 }) {
     const [tabIndex, setTabIndex] = React.useState(false);
     const history = useHistory();
@@ -110,10 +112,10 @@ export default function BugPanelTabbedForm({
                     className={`tabSpacer`}
                 />
             </div>
-            <BugCard {...contentProps}>
+            <BugCard sx={{ height: fullHeight ? "100%" : "auto" }} {...contentProps}>
                 {content
                     ? content.map((content, index) => (
-                          <TabPanel key={index} value={tabIndex} index={index}>
+                          <TabPanel fullHeight={fullHeight} key={index} value={tabIndex} index={index}>
                               {content}
                           </TabPanel>
                       ))

src/client/src/core/BugRouterButton.jsx

@@ -208,7 +208,7 @@ const BugRouterButton = ({
                             <Box
                                 sx={{
                                     color: "#303030",
-                                    fontSize: "28px",
+                                    fontSize: number.toString().length > 3 ? "22px" : "28px",
                                     fontWeight: 300,
                                     "@media (max-width:800px)": {
                                         fontSize: "20px",

src/client/src/core/BugStatusLabel.jsx

@@ -7,7 +7,7 @@ export default function BugStatusLabel({ sx = {}, children }) {
             sx={{
                 color: "primary.main",
                 textTransform: "uppercase",
-                opacity: "0.8",
+                opacity: "0.9",
                 fontSize: "0.8rem",
                 fontWeight: "500",
                 ...sx,

src/modules/bmd-videohub/client/panels/MainPanel.jsx

@@ -8,8 +8,8 @@ export default function MainPanel(props) {
         <>
             <Router
                 panelId={panelId}
-                sourceGroup={sourceGroup ? sourceGroup : 0}
-                destinationGroup={destinationGroup ? destinationGroup : 0}
+                sourceGroup={sourceGroup ? parseInt(sourceGroup) : 0}
+                destinationGroup={destinationGroup ? parseInt(destinationGroup) : 0}
             />
         </>
     );

src/modules/prodigy-mx/TODO.md

@@ -0,0 +1,3 @@
+-   auto detection of modules is done - but needs testing!
+-   validate config params
+-   spinner while edit buttons dialog loads

src/modules/prodigy-mx/client/Module.jsx

@@ -0,0 +1,34 @@
+import React from "react";
+import BugModuleWrapper from "@core/BugModuleWrapper";
+import { Route } from "react-router-dom";
+
+const MainPanel = React.lazy(() => import("./panels/MainPanel"));
+const ConfigPanel = React.lazy(() => import("./panels/ConfigPanel"));
+
+export default function Module(props) {
+    return (
+        <BugModuleWrapper {...props}>
+            <Route exact path="/panel/:panelId/display/:tab">
+                <MainPanel {...props} />
+            </Route>
+            <Route exact path="/panel/:panelId/display/:tab/:sourceGroup/:destinationGroup">
+                <MainPanel editMode={false} {...props} />
+            </Route>
+            <Route exact path="/panel/:panelId/edit/">
+                <MainPanel editMode={true} {...props} />
+            </Route>
+            <Route exact path="/panel/:panelId/edit/display/:tab">
+                <MainPanel editMode={true} {...props} />
+            </Route>
+            <Route exact path="/panel/:panelId/edit/display/:tab/:sourceGroup/:destinationGroup">
+                <MainPanel editMode={true} {...props} />
+            </Route>
+            <Route exact path="/panel/:panelId/config">
+                <ConfigPanel {...props} />
+            </Route>
+            <Route exact path="/panel/:panelId">
+                <MainPanel {...props} />
+            </Route>
+        </BugModuleWrapper>
+    );
+}

src/modules/prodigy-mx/client/Toolbar.jsx

@@ -0,0 +1,95 @@
+import React from "react";
+import BugToolbarWrapper from "@core/BugToolbarWrapper";
+import Button from "@mui/material/Button";
+import EditIcon from "@mui/icons-material/Edit";
+import { Link } from "react-router-dom";
+import { useLocation } from "react-router-dom";
+import DoneIcon from "@mui/icons-material/Done";
+import { usePanelStatus } from "@hooks/PanelStatus";
+import MenuItem from "@mui/material/MenuItem";
+import ListItemIcon from "@mui/material/ListItemIcon";
+import ListItemText from "@mui/material/ListItemText";
+import CheckIcon from "@mui/icons-material/Check";
+import Divider from "@mui/material/Divider";
+import { useSelector } from "react-redux";
+import AxiosPut from "@utils/AxiosPut";
+import { useHistory } from "react-router-dom";
+
+export default function Toolbar({ panelId, ...props }) {
+    const toolbarProps = { ...props };
+    const location = useLocation();
+    const panelStatus = usePanelStatus();
+    const panelConfig = useSelector((state) => state.panelConfig);
+    const history = useHistory();
+
+    if (!panelStatus) {
+        return null;
+    }
+
+    const editMode = location.pathname.indexOf("/edit") > -1;
+
+    const handleUseTakeClicked = async (event, item) => {
+        await AxiosPut(`/api/panelconfig/${panelId}`, {
+            useTake: !panelConfig?.data?.useTake,
+        });
+    };
+
+    const handleEditClicked = (event, item) => {
+        const urlParts = location.pathname.split("/");
+        if (urlParts.length === 3) {
+            history.push(`/panel/${panelId}/edit`);
+        } else if (urlParts.length === 5) {
+            history.push(`/panel/${panelId}/edit/${urlParts.slice(-2).join("/")}`);
+        } else if (urlParts.length === 7) {
+            history.push(`/panel/${panelId}/edit/${urlParts.slice(-4).join("/")}`);
+        }
+    };
+
+    const handleDoneClicked = (event, item) => {
+        const urlParts = location.pathname.split("/");
+        if (urlParts.length === 4) {
+            history.push(`/panel/${panelId}/`);
+        } else if (urlParts.length === 6) {
+            history.push(`/panel/${panelId}/${urlParts.slice(-2).join("/")}`);
+        } else if (urlParts.length === 8) {
+            history.push(`/panel/${panelId}/${urlParts.slice(-4).join("/")}`);
+        }
+    };
+
+    const getParams = (matchCount) => {
+        const urlParts = location.pathname.split("/");
+        if (urlParts.length === matchCount) {
+            return urlParts.slice(-2).join("/");
+        }
+        return "";
+    };
+
+    const buttons = () => (
+        <>
+            {editMode ? (
+                <Button variant="outlined" color="primary" startIcon={<DoneIcon />} onClick={handleDoneClicked}>
+                    Done
+                </Button>
+            ) : (
+                <Button variant="outlined" color="primary" startIcon={<EditIcon />} onClick={handleEditClicked}>
+                    Edit
+                </Button>
+            )}
+        </>
+    );
+
+    const menuItems = () => {
+        return [
+            <Divider key="divider1" />,
+            <MenuItem key="usetake" onClick={handleUseTakeClicked}>
+                <ListItemIcon>{panelConfig?.data?.useTake ? <CheckIcon fontSize="small" /> : null}</ListItemIcon>
+                <ListItemText primary="Confirm Take" />
+            </MenuItem>,
+        ];
+    };
+
+    toolbarProps["buttons"] = panelStatus.hasCritical ? null : buttons();
+    toolbarProps["menuItems"] = menuItems();
+    toolbarProps["onClick"] = null;
+    return <BugToolbarWrapper {...toolbarProps} />;
+}

src/modules/prodigy-mx/client/components/AddGroupButton.jsx

@@ -0,0 +1,24 @@
+import Button from "@mui/material/Button";
+import AddIcon from "@mui/icons-material/Add";
+
+export default function AddGroupButton({ onClick }) {
+    return (
+        <Button
+            sx={{
+                borderRadius: "3px",
+                margin: "4px",
+                width: "128px",
+                height: "48px",
+                "@media (max-width:800px)": {
+                    height: "36px",
+                    width: "92px",
+                },
+            }}
+            variant="outlined"
+            color="secondary"
+            onClick={onClick}
+        >
+            <AddIcon />
+        </Button>
+    );
+}

src/modules/prodigy-mx/client/components/AddGroupDialog.jsx

@@ -0,0 +1,70 @@
+import React from "react";
+import Dialog from "@mui/material/Dialog";
+import DialogActions from "@mui/material/DialogActions";
+import DialogContent from "@mui/material/DialogContent";
+import DialogTitle from "@mui/material/DialogTitle";
+import Button from "@mui/material/Button";
+import FormControl from "@mui/material/FormControl";
+import TextField from "@mui/material/TextField";
+import Autocomplete from "@mui/material/Autocomplete";
+
+export default function AddGroupDialog({ onDismiss, onConfirm, groups }) {
+    const [selectedGroups, setSelectedGroups] = React.useState([]);
+
+    const modifiedGroups = groups.map((group) => {
+        return {
+            id: group.index,
+            label: group.label,
+        };
+    });
+
+    return (
+        <Dialog open onClose={onDismiss}>
+            <form
+                onSubmit={(event) => {
+                    event.preventDefault();
+                }}
+            >
+                <DialogTitle id="alert-dialog-title">Add to Groups</DialogTitle>
+                <DialogContent>
+                    <FormControl>
+                        <Autocomplete
+                            sx={{ width: "20rem" }}
+                            multiple
+                            filterSelectedOptions
+                            options={modifiedGroups}
+                            fullWidth
+                            freeSolo={false}
+                            onChange={(event, values) => {
+                                setSelectedGroups(values);
+                            }}
+                            value={selectedGroups}
+                            renderInput={(params) => (
+                                <TextField {...params} fullWidth variant="standard" label="Select groups ..." />
+                            )}
+                        />
+                    </FormControl>
+                </DialogContent>
+                <DialogActions>
+                    <Button onClick={onDismiss} color="primary">
+                        Cancel
+                    </Button>
+                    <Button
+                        type="submit"
+                        onClick={(event) =>
+                            onConfirm(
+                                event,
+                                selectedGroups.map((group) => group.id)
+                            )
+                        }
+                        color="primary"
+                        autoFocus
+                        disabled={selectedGroups.length === 0}
+                    >
+                        Add
+                    </Button>
+                </DialogActions>
+            </form>
+        </Dialog>
+    );
+}