diff --git a/packages/webapp/src/components/help-menu/index.tsx b/packages/webapp/src/components/help-menu/index.tsx new file mode 100644 index 00000000..3779f244 --- /dev/null +++ b/packages/webapp/src/components/help-menu/index.tsx @@ -0,0 +1,79 @@ +import { IconButton, Link, ListItemIcon, Menu, MenuItem } from "@material-ui/core"; +import { Help, PolicyOutlined, EmailOutlined, FeedbackOutlined, EmojiPeopleOutlined } from "@material-ui/icons"; +import React from "react"; +import { FormattedMessage } from "react-intl"; + +const HelpMenu = () => { + const [anchorEl, setAnchorEl] = React.useState(null); + const open = Boolean(anchorEl); + + const handleMenu = (event: React.MouseEvent) => { + setAnchorEl(event.currentTarget); + }; + + const handleClose = () => { + setAnchorEl(null); + }; + + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); +} + +export default HelpMenu; \ No newline at end of file diff --git a/packages/webapp/src/components/maps-page/account-menu/index.tsx b/packages/webapp/src/components/maps-page/account-menu/index.tsx new file mode 100644 index 00000000..5c64d59e --- /dev/null +++ b/packages/webapp/src/components/maps-page/account-menu/index.tsx @@ -0,0 +1,61 @@ +import { Button, Link, ListItemIcon, Menu, MenuItem, Tooltip } from "@material-ui/core"; +import { AccountCircle, ExitToAppOutlined, SettingsApplicationsOutlined } from "@material-ui/icons"; +import React from "react"; +import { FormattedMessage } from "react-intl"; + +const AccountMenu = () => { + const [anchorEl, setAnchorEl] = React.useState(null); + const open = Boolean(anchorEl); + + const handleMenu = (event: React.MouseEvent) => { + setAnchorEl(event.currentTarget); + }; + const handleClose = () => { + setAnchorEl(null); + }; + + return ( + + + + + + + + + + + + + + + + + + + + + + + ); +} +export default AccountMenu; \ No newline at end of file diff --git a/packages/webapp/src/components/maps-page/action-dispatcher/import-dialog/index.tsx b/packages/webapp/src/components/maps-page/action-dispatcher/import-dialog/index.tsx index cb46aa6d..31d5a096 100644 --- a/packages/webapp/src/components/maps-page/action-dispatcher/import-dialog/index.tsx +++ b/packages/webapp/src/components/maps-page/action-dispatcher/import-dialog/index.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { useIntl } from 'react-intl'; +import { FormattedMessage, useIntl } from 'react-intl'; import { useMutation } from 'react-query'; import { useSelector } from 'react-redux'; import { Button, FormControl } from '@material-ui/core'; @@ -79,8 +79,8 @@ const ImportDialog = (props: CreateProps) => { style={{display: 'none'}} /> diff --git a/packages/webapp/src/components/maps-page/client-health-sentinel/index.tsx b/packages/webapp/src/components/maps-page/client-health-sentinel/index.tsx new file mode 100644 index 00000000..5bfe9cc4 --- /dev/null +++ b/packages/webapp/src/components/maps-page/client-health-sentinel/index.tsx @@ -0,0 +1,47 @@ +import { useSelector } from 'react-redux'; +import React from "react"; +import { activeInstanceStatus, ClientStatus } from '../../../redux/clientSlice'; +import { Button, Dialog, DialogActions, DialogContent, DialogTitle } from '@material-ui/core'; +import { FormattedMessage } from 'react-intl'; +import { Alert, AlertTitle } from '@material-ui/lab'; + +const ClientHealthChecker = () => { + const status: ClientStatus = useSelector(activeInstanceStatus); + + const handleOnClose = () => { + window.location.href = '/c/login'; + } + + return ( +
+ + + + + + + + + + + + + + + + + +
+ ) +}; +export default ClientHealthChecker; \ No newline at end of file diff --git a/packages/webapp/src/components/maps-page/index.tsx b/packages/webapp/src/components/maps-page/index.tsx index e6f726e9..d5d41b87 100644 --- a/packages/webapp/src/components/maps-page/index.tsx +++ b/packages/webapp/src/components/maps-page/index.tsx @@ -8,17 +8,19 @@ import IconButton from '@material-ui/core/IconButton'; import ListItem from '@material-ui/core/ListItem'; import ListItemIcon from '@material-ui/core/ListItemIcon'; import { useStyles } from './style'; -import { AccountCircle, AcUnitTwoTone, AddCircleTwoTone, CloudUploadTwoTone, DeleteOutlineTwoTone, EmailOutlined, EmojiPeopleOutlined, ExitToAppOutlined, FeedbackOutlined, Help, LabelTwoTone, PeopleAltTwoTone, PersonAddTwoTone, PersonOutlineTwoTone, PersonTwoTone, PolicyOutlined, PublicTwoTone, SettingsApplicationsOutlined, ShareTwoTone, StarTwoTone } from '@material-ui/icons'; -import { Button, Dialog, DialogActions, DialogContent, DialogTitle, Link, ListItemSecondaryAction, ListItemText, Menu, MenuItem, Tooltip } from '@material-ui/core'; +import { AcUnitTwoTone, AddCircleTwoTone, CloudUploadTwoTone, DeleteOutlineTwoTone, LabelTwoTone, PersonOutlineTwoTone, PublicTwoTone, ShareTwoTone, StarTwoTone } from '@material-ui/icons'; +import { Button, Link, ListItemSecondaryAction, ListItemText, Tooltip } from '@material-ui/core'; import { MapsList } from './maps-list'; import { FormattedMessage, useIntl } from 'react-intl'; import { useQuery, useMutation, useQueryClient } from 'react-query'; -import { activeInstance, activeInstanceStatus, ClientStatus } from '../../redux/clientSlice'; +import { activeInstance } from '../../redux/clientSlice'; import { useSelector } from 'react-redux'; import Client, { Label } from '../../client'; import ActionDispatcher from './action-dispatcher'; import { ActionType } from './action-chooser'; -import { Alert, AlertTitle } from '@material-ui/lab'; +import AccountMenu from './account-menu'; +import ClientHealthSentinel from './client-health-sentinel'; +import HelpMenu from '../help-menu'; const logoIcon = require('../../images/logo-small.svg'); const poweredByIcon = require('../../images/pwrdby-white.svg'); @@ -105,7 +107,7 @@ const MapsPage = () => { return (
- + { elevation={0}> - + - + setActiveDialog(undefined)} mapsId={[]} />
- - + +
@@ -246,173 +248,4 @@ const StyleListItem = (props: ListItemProps) => { ); } -const HandleClientStatus = () => { - const status: ClientStatus = useSelector(activeInstanceStatus); - - const handleOnClose = () => { - window.location.href = '/c/login'; - } - - return ( -
- - - - - - - - - - - - - - - - - -
- ) -} - -const ProfileToobarButton = () => { - const [anchorEl, setAnchorEl] = React.useState(null); - const open = Boolean(anchorEl); - - const handleMenu = (event: React.MouseEvent) => { - setAnchorEl(event.currentTarget); - }; - - const handleClose = () => { - setAnchorEl(null); - }; - - return ( - - - - - - - - - - - - - - - - - - - - - - - ); -} - -const HelpToobarButton = () => { - const [anchorEl, setAnchorEl] = React.useState(null); - const open = Boolean(anchorEl); - - const handleMenu = (event: React.MouseEvent) => { - setAnchorEl(event.currentTarget); - }; - - const handleClose = () => { - setAnchorEl(null); - }; - - return ( - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - ); -} export default MapsPage; \ No newline at end of file