Skip to content

Commit

Permalink
feat(ui): Rework map management
Browse files Browse the repository at this point in the history
  • Loading branch information
@Hypfer
Hypfer committed Dec 29, 2021
1 parent 4d0a069 commit 4f51935
Show file tree
Hide file tree
Showing 10 changed files with 433 additions and 151 deletions.
170 changes: 121 additions & 49 deletions frontend/src/components/ValetudoAppBar.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,11 +20,12 @@ import {
AccessTime as TimeIcon,
Build as BuildIcon,
DarkMode as DarkModeIcon,
Edit as EditMapIcon,
Map as MapManagementIcon,
Home as HomeIcon,
Info as InfoIcon,
List as ListIcon,
Menu as MenuIcon,
ArrowBack as BackIcon,
PendingActions as PendingActionsIcon,
Power as PowerIcon,
SystemUpdateAlt as UpdaterIcon,
Expand All @@ -51,6 +52,13 @@ interface MenuEntry {
};
}

interface MenuSubEntry {
kind: "MenuSubEntry",
routeMatch: string,
title: string,
parentRoute: string
}

interface MenuSubheader {
kind: "Subheader";
title: string;
Expand All @@ -63,7 +71,8 @@ const SwaggerUIIcon = createSvgIcon(
"swagger"
);

const menuTree: Array<MenuEntry | MenuSubheader> = [
//Note that order is important here
const menuTree: Array<MenuEntry | MenuSubEntry | MenuSubheader> = [
{
kind: "MenuEntry",
routeMatch: "/",
Expand All @@ -86,22 +95,6 @@ const menuTree: Array<MenuEntry | MenuSubheader> = [
type: "allof"
}
},
{
kind: "MenuEntry",
routeMatch: "/robot/edit_map",
title: "Edit Map",
menuIcon: EditMapIcon,
menuText: "Edit Map",
requiredCapabilities: {
capabilities: [
Capability.CombinedVirtualRestrictions,

Capability.MapSegmentEdit,
Capability.MapSegmentRename
],
type: "anyof"
}
},
{
kind: "MenuEntry",
routeMatch: "/robot/manual_control",
Expand Down Expand Up @@ -131,6 +124,34 @@ const menuTree: Array<MenuEntry | MenuSubheader> = [
menuIcon: InfoIcon,
menuText: "About"
},
{
kind: "MenuEntry",
routeMatch: "/settings/map_management",
title: "Map Management",
menuIcon: MapManagementIcon,
menuText: "Map Management",
requiredCapabilities: {
capabilities: [
Capability.CombinedVirtualRestrictions,

Capability.MapSegmentEdit,
Capability.MapSegmentRename
],
type: "anyof"
}
},
{
kind: "MenuSubEntry",
routeMatch: "/settings/map_management/segments",
title: "Segment Management",
parentRoute: "/settings/map_management"
},
{
kind: "MenuSubEntry",
routeMatch: "/settings/map_management/virtual_restrictions",
title: "Virtual Restriction Management",
parentRoute: "/settings/map_management"
},
{
kind: "MenuEntry",
routeMatch: "/settings/log",
Expand Down Expand Up @@ -169,24 +190,37 @@ const ValetudoAppBar: React.FunctionComponent<{ paletteMode: PaletteMode, setPal
const robotCapabilities = useCapabilitiesSupported(...Object.values(Capability));

const routeMatch = useRouteMatch(menuTree.filter(e => {
return e.kind === "MenuEntry";
return "routeMatch" in e;
}).map(e => {
// Make TS happy
return e.kind === "MenuEntry" ? e.routeMatch : "";
return "routeMatch" in e ? e.routeMatch : "";
}).reverse()); // Reverse because order is important (deep => shallow)
const currentTab = routeMatch?.path;

const currentMenuEntry = menuTree.find(e => {
return "routeMatch" in e && e.routeMatch === routeMatch?.path;
}) ?? menuTree[0];

const pageTitle = React.useMemo(() => {
let ret = "";

menuTree.forEach((value) => {
if (value.kind === "MenuEntry" && value.routeMatch === currentTab && value.title) {
if ("routeMatch" in value && value.routeMatch === currentTab && value.title) {
if (ret !== "") {
ret += " — ";
}

ret += value.title;
}
});


if (ret !== "") {
document.title = `Valetudo - ${ret}`;
} else {
document.title = "Valetudo";
}

return ret;
}, [currentTab]);

Expand All @@ -203,7 +237,9 @@ const ValetudoAppBar: React.FunctionComponent<{ paletteMode: PaletteMode, setPal
}}
>
<List>
{menuTree.map((value, idx) => {
{menuTree.filter(item => {
return item.kind !== "MenuSubEntry";
}).map((value, idx) => {
switch (value.kind) {
case "Subheader":
return (
Expand Down Expand Up @@ -327,6 +363,54 @@ const ValetudoAppBar: React.FunctionComponent<{ paletteMode: PaletteMode, setPal
);
}, [currentTab, paletteMode, setPaletteMode, robotCapabilities]);

const toolbarContent = React.useMemo(() => {
switch (currentMenuEntry.kind) {
case "MenuEntry":
return (
<>
<IconButton
size="large"
edge="start"
color="inherit"
aria-label="menu"
sx={{mr: 2}}
onClick={() => {
setDrawerOpen(true);
}}
>
<MenuIcon/>
</IconButton>
<Typography variant="h6" component="div" sx={{flexGrow: 1}}>
{pageTitle}
</Typography>
</>
);
case "MenuSubEntry":
return (
<>
<IconButton
size="large"
edge="start"
color="inherit"
aria-label="back"
sx={{mr: 2}}

component={Link}
to={currentMenuEntry.parentRoute}
>
<BackIcon/>
</IconButton>
<Typography variant="h6" component="div" sx={{flexGrow: 1}}>
{pageTitle}
</Typography>
</>
);
case "Subheader":
//This can never happen
return (<></>);
}
}, [currentMenuEntry, setDrawerOpen, pageTitle]);

return (
<Box
sx={{
Expand All @@ -335,39 +419,27 @@ const ValetudoAppBar: React.FunctionComponent<{ paletteMode: PaletteMode, setPal
>
<AppBar position="fixed">
<Toolbar>
<IconButton
size="large"
edge="start"
color="inherit"
aria-label="menu"
sx={{mr: 2}}
onClick={() => {
setDrawerOpen(true);
}}
>
<MenuIcon/>
</IconButton>
<Typography variant="h6" component="div" sx={{flexGrow: 1}}>
{pageTitle}
</Typography>
{toolbarContent}
<div>
<ValetudoEvents/>
</div>
</Toolbar>
</AppBar>
<Toolbar/>

<SwipeableDrawer
anchor={"left"}
open={drawerOpen}
onOpen={() => {
setDrawerOpen(true);
}}
onClose={() => {
setDrawerOpen(false);
}}>
{drawerContent}
</SwipeableDrawer>
{
currentMenuEntry.kind !== "MenuSubEntry" &&
<SwipeableDrawer
anchor={"left"}
open={drawerOpen}
onOpen={() => {
setDrawerOpen(true);
}}
onClose={() => {
setDrawerOpen(false);
}}>
{drawerContent}
</SwipeableDrawer>
}
</Box>
);
};
Expand Down
Loading

0 comments on commit 4f51935

Please sign in to comment.