| @@ -19,7 +19,7 @@ |
| import Theme from '@owsi/catena/er2_styles' |
| import { customMuiTheme } from '@owsi/catena/er2_styles/mui' |
| import { |
| - Breadcrumbs, ContextBar, Header, TokenNavLink, |
| + Breadcrumbs, ContextBar, Header, TokenNavLink, |
| } from '@owsi/catena/er2_ui' |
| import type { GeoBarType, MapToolbarType } from '@owsi/catena/er2_ui' |
| import { parseLocation } from 'er2_web_utils' |
| @@ -52,7 +52,7 @@ |
| import * as colors from '../styles/colors' |
| import { library } from '@fortawesome/fontawesome-svg-core' |
| import { |
| - faFilePdf, faFilter, faBars, faTrash, faEdit, faCog, faCogs, faDownload, faUsers, |
| + faFilePdf, faFilter, faBars, faTrash, faEdit, faCog, faCogs, faDownload, faUsers, |
| } from '@fortawesome/free-solid-svg-icons' |
| import { setFetchingUserData } from '../actions' |
| import ManageUsersCB from '../components/ManageUsersCB' |
| @@ -159,648 +159,648 @@ |
| } |
| |
| const overrides = { |
| - MuiDialogTitle: { |
| - root: { |
| - backgroundColor: colors.primaryOneLighten5, |
| - }, |
| + MuiDialogTitle: { |
| + root: { |
| + backgroundColor: colors.primaryOneLighten5, |
| }, |
| - MuiAppBar: { |
| - colorPrimary: { |
| - backgroundColor: 'white', |
| - }, |
| - colorSecondary: { |
| - backgroundColor: 'white', |
| - }, |
| + }, |
| + MuiAppBar: { |
| + colorPrimary: { |
| + backgroundColor: 'white', |
| }, |
| - MuiExpansionPanel: { |
| - root: { |
| - '&.expand$expanded:last-child': { |
| - marginBottom: 6, |
| - marginTop: 6, |
| - }, |
| - }, |
| + colorSecondary: { |
| + backgroundColor: 'white', |
| }, |
| - MuiExpansionPanelDetails: { |
| - root: { |
| - border: '1px solid lightgray', |
| - display: 'block', |
| - padding: 15, |
| - }, |
| + }, |
| + MuiExpansionPanel: { |
| + root: { |
| + '&.expand$expanded:last-child': { |
| + marginBottom: 6, |
| + marginTop: 6, |
| + }, |
| }, |
| - MuiExpansionPanelSummary: { |
| - content: { |
| - margin: '0 0 0 0', |
| - '&$expanded': { |
| - backgroundColor: '#d2eff1', |
| - fontWeight: 600, |
| - margin: '0 0 0 0', |
| - }, |
| - }, |
| - root: { |
| - // Fixes increase in height when opened |
| - minHeight: '48px', |
| - padding: '0 24px 0 10px', |
| - '&$expanded': { |
| - backgroundColor: '#d2eff1', |
| - margin: '0 0 0 0', |
| - minHeight: '48px', |
| - }, |
| - }, |
| + }, |
| + MuiExpansionPanelDetails: { |
| + root: { |
| + border: '1px solid lightgray', |
| + display: 'block', |
| + padding: 15, |
| }, |
| - MuiTabs: { |
| - indicator: { |
| - backgroundColor: '#CAFE48', |
| - }, |
| - root: { |
| - paddingLeft: 60, |
| - }, |
| + }, |
| + MuiExpansionPanelSummary: { |
| + content: { |
| + margin: '0 0 0 0', |
| + '&$expanded': { |
| + backgroundColor: '#d2eff1', |
| + fontWeight: 600, |
| + margin: '0 0 0 0', |
| + }, |
| }, |
| - MuiTab: { |
| - root: { |
| - backgroundColor: '#88B5D7', |
| - color: 'blue', |
| - '&:hover': { |
| - color: '#fff', |
| - }, |
| - '&$selected': { |
| - backgroundColor: '#458CC1', |
| - color: '#F5FAFC', |
| - }, |
| - }, |
| + root: { |
| + // Fixes increase in height when opened |
| + minHeight: '48px', |
| + padding: '0 24px 0 10px', |
| + '&$expanded': { |
| + backgroundColor: '#d2eff1', |
| + margin: '0 0 0 0', |
| + minHeight: '48px', |
| + }, |
| }, |
| - MuiTableCell: { |
| - root: { |
| - fontSize: 12, |
| - }, |
| + }, |
| + MuiTabs: { |
| + indicator: { |
| + backgroundColor: '#CAFE48', |
| }, |
| + root: { |
| + paddingLeft: 60, |
| + }, |
| + }, |
| + MuiTab: { |
| + root: { |
| + backgroundColor: '#88B5D7', |
| + color: 'blue', |
| + '&:hover': { |
| + color: '#fff', |
| + }, |
| + '&$selected': { |
| + backgroundColor: '#458CC1', |
| + color: '#F5FAFC', |
| + }, |
| + }, |
| + }, |
| + MuiTableCell: { |
| + root: { |
| + fontSize: 12, |
| + }, |
| + }, |
| } |
| |
| const useStyles = makeStyles(styles) |
| |
| function App(propsUnstyled: Props) { |
| - // Apply theme to default styles |
| - const classes = useStyles({ ...propsUnstyled, ...colors }) |
| - const theprops = { ...propsUnstyled, classes } |
| + // Apply theme to default styles |
| + const classes = useStyles({ ...propsUnstyled, ...colors }) |
| + const theprops = { ...propsUnstyled, classes } |
| |
| - const catenaKeycloak = useCatenaKeycloak(theprops.meta.name) |
| - const { keycloak, setCurrentToken, userState } = catenaKeycloak |
| - const users = useSelector(state => state.users) |
| + const catenaKeycloak = useCatenaKeycloak(theprops.meta.name) |
| + const { keycloak, setCurrentToken, userState } = catenaKeycloak |
| + const users = useSelector(state => state.users) |
| |
| - const catenaMap = React.useRef(null) |
| - const { location } = window |
| - const parsedLoc = parseLocation(window.location) |
| - const activeMapToolbarPanel = theprops.mapToolbar.items.filter( |
| - item => item.active, |
| - ) |
| + const catenaMap = React.useRef(null) |
| + const { location } = window |
| + const parsedLoc = parseLocation(window.location) |
| + const activeMapToolbarPanel = theprops.mapToolbar.items.filter( |
| + item => item.active, |
| + ) |
| |
| - const mapVisible = [ |
| - routes.MANAGE_PROJECTS, |
| - routes.SETTINGS, |
| - ].some(route => parsedLoc.path.startsWith(route)) |
| - const usersVisible = location.pathname === routes.USERS |
| - let isMapToolbarVisible = activeMapToolbarPanel.length > 0 |
| - if(usersVisible){ |
| - isMapToolbarVisible = undefined |
| - } |
| + const mapVisible = [ |
| + routes.MANAGE_PROJECTS, |
| + routes.SETTINGS, |
| + ].some(route => parsedLoc.path.startsWith(route)) |
| + const usersVisible = location.pathname === routes.USERS |
| + let isMapToolbarVisible = activeMapToolbarPanel.length > 0 |
| + if(usersVisible){ |
| + isMapToolbarVisible = undefined |
| + } |
| |
| - const tocVisible = location.pathname === routes.MANAGE_PROJECTS || |
| + const tocVisible = location.pathname === routes.MANAGE_PROJECTS || |
| location.pathname === routes.USERS || |
| location.pathname === routes.SETTINGS |
| |
| |
| - const dispatch = useDispatch() |
| - const { token, actions } = theprops |
| - const { fetchState } = actions |
| - const [userRoleConservationist, setUserRoleConservationist] = React.useState(false) |
| + const dispatch = useDispatch() |
| + const { token, actions } = theprops |
| + const { fetchState } = actions |
| + const [userRoleConservationist, setUserRoleConservationist] = React.useState(false) |
| |
| - useEffect(() => { |
| - if (keycloak.authenticated && userState) { |
| - const currentToken = userState.currentToken |
| + useEffect(() => { |
| + if (keycloak.authenticated && userState) { |
| + const currentToken = userState.currentToken |
| |
| - // First check for initial load of project (token will be null) |
| - if (!token.value) { |
| - if (currentToken) { |
| - // Load previous project or create new |
| - fetchState(currentToken, keycloak.tokenParsed.sub) |
| - } else { |
| - fetchState(undefined, keycloak.tokenParsed.sub) |
| - } |
| - } else if ( |
| - // Check for change in current project, in which case we load in the new project. |
| - currentToken && |
| + // First check for initial load of project (token will be null) |
| + if (!token.value) { |
| + if (currentToken) { |
| + // Load previous project or create new |
| + fetchState(currentToken, keycloak.tokenParsed.sub) |
| + } else { |
| + fetchState(undefined, keycloak.tokenParsed.sub) |
| + } |
| + } else if ( |
| + // Check for change in current project, in which case we load in the new project. |
| + currentToken && |
| currentToken !== token.value |
| - ) { |
| - fetchState(currentToken, keycloak.tokenParsed.sub) |
| - } else if (!currentToken) { |
| - // If the current project is not set, then do it now. |
| - setCurrentToken(token.value) |
| - } |
| - } |
| - }, [dispatch, fetchState, keycloak.authenticated, setCurrentToken, token.value, userState]) |
| + ) { |
| + fetchState(currentToken, keycloak.tokenParsed.sub) |
| + } else if (!currentToken) { |
| + // If the current project is not set, then do it now. |
| + setCurrentToken(token.value) |
| + } |
| + } |
| + }, [dispatch, fetchState, keycloak.authenticated, setCurrentToken, token.value, userState]) |
| |
| - useEffect(() => { |
| - if (keycloak.authenticated && userState) { |
| - if (!users.fetchingUserData && !users.user.firstName) { |
| - // We're not currently fetching, and we haven't fetched before...time to fetch. |
| - theprops.actions.getUserDataFromDB(keycloak.idTokenParsed) |
| - } |
| - if (users.fetchingUserData && users.user.firstName) { |
| - theprops.actions.setFetchingUserData(false) |
| - } |
| - } |
| - }, [keycloak, userState, users]) |
| + useEffect(() => { |
| + if (keycloak.authenticated && userState) { |
| + if (!users.fetchingUserData && !users.user.firstName) { |
| + // We're not currently fetching, and we haven't fetched before...time to fetch. |
| + theprops.actions.getUserDataFromDB(keycloak.idTokenParsed) |
| + } |
| + if (users.fetchingUserData && users.user.firstName) { |
| + theprops.actions.setFetchingUserData(false) |
| + } |
| + } |
| + }, [keycloak, userState, users]) |
| |
| |
| - useEffect(() => { |
| - if (users.user.id) { |
| - setUserRoleConservationist('Conservationist' === users.user['role']) |
| - } |
| - }, [users]) |
| + useEffect(() => { |
| + if (users.user.id) { |
| + setUserRoleConservationist('Conservationist' === users.user['role']) |
| + } |
| + }, [users]) |
| |
| - useEffect(() => { |
| + useEffect(() => { |
| // Append the token to the URL to sync state, when available |
| - if (theprops.token.value) { |
| - const params = parse(theprops.location.search) |
| - if (!params.token || params.token !== theprops.token.value) { |
| - params.token = theprops.token.value |
| - theprops.history.push({ |
| - search: stringify(params), |
| - }) |
| - } |
| + if (theprops.token.value) { |
| + const params = parse(theprops.location.search) |
| + if (!params.token || params.token !== theprops.token.value) { |
| + params.token = theprops.token.value |
| + theprops.history.push({ |
| + search: stringify(params), |
| + }) |
| + } |
| |
| - // Check if the route doesn't match anything |
| - const pathnames = Object.entries(routes).map(entry => entry[1]) |
| - if (!pathnames.includes(theprops.location.pathname)) { |
| - theprops.history.push({ |
| - pathname: routes.HOME, |
| - search: stringify(params), |
| - }) |
| - } |
| - } |
| - }, [theprops.serverState]) |
| + // Check if the route doesn't match anything |
| + const pathnames = Object.entries(routes).map(entry => entry[1]) |
| + if (!pathnames.includes(theprops.location.pathname)) { |
| + theprops.history.push({ |
| + pathname: routes.HOME, |
| + search: stringify(params), |
| + }) |
| + } |
| + } |
| + }, [theprops.serverState]) |
| |
| - useEffect(() => { |
| - if(location.pathname === routes.USERS){ |
| - if(theprops.tabbedPanel.windowState !== windowStates.maximized){ |
| - theprops.actions.setTabbedPanelWindowState(windowStates.maximized) |
| - } |
| - } |
| - if(location.pathname === routes.MANAGE_PROJECTS){ |
| - if(theprops.tabbedPanel.windowState !== windowStates.opened){ |
| - theprops.actions.setTabbedPanelWindowState(windowStates.opened) |
| - } |
| - } |
| - }, [location.pathname]) |
| + useEffect(() => { |
| + if(location.pathname === routes.USERS){ |
| + if(theprops.tabbedPanel.windowState !== windowStates.maximized){ |
| + theprops.actions.setTabbedPanelWindowState(windowStates.maximized) |
| + } |
| + } |
| + if(location.pathname === routes.MANAGE_PROJECTS){ |
| + if(theprops.tabbedPanel.windowState !== windowStates.opened){ |
| + theprops.actions.setTabbedPanelWindowState(windowStates.opened) |
| + } |
| + } |
| + }, [location.pathname]) |
| |
| - useEffect(() => { |
| - theprops.actions.getUsersFromDB() |
| - theprops.actions.setDefaultBaseLayer('USGS Imagery Topo') |
| - }, []) |
| + useEffect(() => { |
| + theprops.actions.getUsersFromDB() |
| + theprops.actions.setDefaultBaseLayer('USGS Imagery Topo') |
| + }, []) |
| |
| - function renderHeader() { |
| - let loginSection |
| + function renderHeader() { |
| + let loginSection |
| |
| - if (catenaKeycloak.initialized) { |
| - loginSection = ( |
| - <div style={{ |
| - cursor: 'pointer', |
| - position: 'absolute', |
| - right: 20, |
| - top: 7, |
| - }} |
| - > |
| - <UserAccount |
| - catenaKeycloak={catenaKeycloak} |
| - linkColor='#fff' |
| - showProfile={true} |
| - routes={routes} |
| - history={propsUnstyled.history}> |
| - </UserAccount> |
| - </div> |
| - ) |
| - } |
| - |
| - return ( |
| - <Header token={theprops.token} meta={theprops.meta} theme={classes}> |
| - <div className={classes.headerLeft}> |
| - <div className={classes.logoCtr}> |
| - {theprops.token.value ? ( |
| - <TokenNavLink |
| - className={classes.headerLink} |
| - token={theprops.token} |
| - role="button" |
| - to={routes.HOME} |
| - > |
| - <span className={classes.logo}>Edge of Field DB</span> |
| - <span className={classes.logoVersion}> |
| - v. |
| - {' '} |
| - {theprops.meta.version} |
| - </span> |
| - </TokenNavLink> |
| - ) : ( |
| - <NavLink |
| - className={classes.headerLink} |
| - token={theprops.token} |
| - role="button" |
| - to={routes.HOME} |
| - > |
| - <span className={classes.logo}>Edge of Field DB</span> |
| - <span className={classes.logoVersion}> |
| - v. |
| - {' '} |
| - {theprops.meta.version} |
| - </span> |
| - </NavLink> |
| - )} |
| - </div> |
| - {loginSection} |
| - </div> |
| - </Header> |
| - ) |
| + if (catenaKeycloak.initialized) { |
| + loginSection = ( |
| + <div style={{ |
| + cursor: 'pointer', |
| + position: 'absolute', |
| + right: 20, |
| + top: 7, |
| + }} |
| + > |
| + <UserAccount |
| + catenaKeycloak={catenaKeycloak} |
| + linkColor='#fff' |
| + showProfile={true} |
| + routes={routes} |
| + history={propsUnstyled.history}> |
| + </UserAccount> |
| + </div> |
| + ) |
| } |
| |
| - function renderBreadcrumbs(theme) { |
| - return ( |
| - <React.Fragment> |
| - <Route |
| - path={routes.HOME} |
| - exact |
| - render={() => ( |
| - <Breadcrumbs |
| - header={{ |
| - id: ids.SUBHEADER_DOCS, |
| - name: 'Getting Started', |
| - }} |
| - items={[]} |
| - theme={theme} |
| - /> |
| - )} |
| - /> |
| - <Route |
| - path={routes.INSTRUCTIONS} |
| - render={() => ( |
| - <Breadcrumbs |
| - header={{ |
| - id: ids.SUBHEADER_DOCS, |
| - name: 'Getting Started', |
| - }} |
| - items={[]} |
| - theme={theme} |
| - /> |
| - )} |
| - /> |
| - <Route |
| - path={routes.MANAGE_PROJECTS} |
| - render={() => ( |
| - <Breadcrumbs |
| - header={{ |
| - id: ids.MANAGE_PROJECTS, |
| - name: 'Projects', |
| - }} |
| - items={[]} |
| - theme={theme} |
| - /> |
| - )} |
| - /> |
| - <Route |
| - path={routes.USERS} |
| - render={() => ( |
| - <Breadcrumbs |
| - header={{ |
| - id: ids.USERS, |
| - name: 'Users', |
| - }} |
| - items={[]} |
| - theme={theme} |
| - /> |
| - )} |
| - /> |
| - <Route |
| - path={routes.SETTINGS} |
| - render={() => ( |
| - <Breadcrumbs |
| - header={{ |
| - id: ids.SUBHEADER_SETTINGS, |
| - name: 'Settings', |
| - }} |
| - items={[]} |
| - theme={theme} |
| - /> |
| - )} |
| - /> |
| + return ( |
| + <Header token={theprops.token} meta={theprops.meta} theme={classes}> |
| + <div className={classes.headerLeft}> |
| + <div className={classes.logoCtr}> |
| + {theprops.token.value ? ( |
| + <TokenNavLink |
| + className={classes.headerLink} |
| + token={theprops.token} |
| + role="button" |
| + to={routes.HOME} |
| + > |
| + <span className={classes.logo}>Edge of Field DB</span> |
| + <span className={classes.logoVersion}> |
| + v. |
| + {' '} |
| + {theprops.meta.version} |
| + </span> |
| + </TokenNavLink> |
| + ) : ( |
| + <NavLink |
| + className={classes.headerLink} |
| + token={theprops.token} |
| + role="button" |
| + to={routes.HOME} |
| + > |
| + <span className={classes.logo}>Edge of Field DB</span> |
| + <span className={classes.logoVersion}> |
| + v. |
| + {' '} |
| + {theprops.meta.version} |
| + </span> |
| + </NavLink> |
| + )} |
| + </div> |
| + {loginSection} |
| + </div> |
| + </Header> |
| + ) |
| + } |
| |
| - </React.Fragment> |
| - ) |
| + function renderBreadcrumbs(theme) { |
| + return ( |
| + <React.Fragment> |
| + <Route |
| + path={routes.HOME} |
| + exact |
| + render={() => ( |
| + <Breadcrumbs |
| + header={{ |
| + id: ids.SUBHEADER_DOCS, |
| + name: 'Getting Started', |
| + }} |
| + items={[]} |
| + theme={theme} |
| + /> |
| + )} |
| + /> |
| + <Route |
| + path={routes.INSTRUCTIONS} |
| + render={() => ( |
| + <Breadcrumbs |
| + header={{ |
| + id: ids.SUBHEADER_DOCS, |
| + name: 'Getting Started', |
| + }} |
| + items={[]} |
| + theme={theme} |
| + /> |
| + )} |
| + /> |
| + <Route |
| + path={routes.MANAGE_PROJECTS} |
| + render={() => ( |
| + <Breadcrumbs |
| + header={{ |
| + id: ids.MANAGE_PROJECTS, |
| + name: 'Projects', |
| + }} |
| + items={[]} |
| + theme={theme} |
| + /> |
| + )} |
| + /> |
| + <Route |
| + path={routes.USERS} |
| + render={() => ( |
| + <Breadcrumbs |
| + header={{ |
| + id: ids.USERS, |
| + name: 'Users', |
| + }} |
| + items={[]} |
| + theme={theme} |
| + /> |
| + )} |
| + /> |
| + <Route |
| + path={routes.SETTINGS} |
| + render={() => ( |
| + <Breadcrumbs |
| + header={{ |
| + id: ids.SUBHEADER_SETTINGS, |
| + name: 'Settings', |
| + }} |
| + items={[]} |
| + theme={theme} |
| + /> |
| + )} |
| + /> |
| + |
| + </React.Fragment> |
| + ) |
| + } |
| + |
| + const renderContextBar = () => { |
| + let cbItems = theprops.contextBar.items |
| + if (!keycloak || !keycloak.authenticated) { |
| + // so far as we know, user isn't authenticated. Only show the instructions. |
| + cbItems = cbItems.filter(i => i.id === ids.DOCUMENTATION_LINK) |
| } |
| |
| - const renderContextBar = () => { |
| - let cbItems = theprops.contextBar.items |
| - if (!keycloak || !keycloak.authenticated) { |
| - // so far as we know, user isn't authenticated. Only show the instructions. |
| - cbItems = cbItems.filter(i => i.id === ids.DOCUMENTATION_LINK) |
| - } |
| - |
| - // if logged in user is a conservationist or is new user & role currently assigned as 'Conservationist' - don't display 'Users' tab: |
| - if (userRoleConservationist) { |
| - cbItems = cbItems.filter(cbItem => cbItem.id !== ids.USERS) |
| - } |
| - |
| - return ( |
| - <ContextBar |
| - items={cbItems} |
| - state={theprops} |
| - token={theprops.token} |
| - onClickContextBarItem={theprops.actions.onClickContextBarItem} |
| - theme={theprops.classes} |
| - /> |
| - ) |
| + // if logged in user is a conservationist or is new user & role currently assigned as 'Conservationist' - don't display 'Users' tab: |
| + if (userRoleConservationist) { |
| + cbItems = cbItems.filter(cbItem => cbItem.id !== ids.USERS) |
| } |
| |
| - const renderInstructions = () => ( |
| - <React.Fragment> |
| - <Route |
| - path={routes.HOME} |
| - exact |
| - render={() => ( |
| - <Instructions |
| - location={theprops.location} |
| - theme={theprops.classes} |
| - token={theprops.token} |
| - /> |
| - )} |
| - /> |
| - <Route |
| - path={routes.HOME} |
| - exact |
| - render={() => ( |
| - <TableOfContents |
| - items={theprops.tableOfContents.items} |
| - location={theprops.location} |
| - theme={theprops.classes} |
| - token={theprops.token} |
| - /> |
| - )} |
| - /> |
| - <Route |
| - path={routes.INSTRUCTIONS} |
| - render={() => ( |
| - <Instructions |
| - location={theprops.location} |
| - theme={theprops.classes} |
| - token={theprops.token} |
| - /> |
| - )} |
| - /> |
| - <Route |
| - path={routes.INSTRUCTIONS} |
| - render={() => ( |
| - <TableOfContents |
| - items={theprops.tableOfContents.items} |
| - theme={theprops.classes} |
| - token={theprops.token} |
| - /> |
| - )} |
| - /> |
| - </React.Fragment> |
| + return ( |
| + <ContextBar |
| + items={cbItems} |
| + state={theprops} |
| + token={theprops.token} |
| + onClickContextBarItem={theprops.actions.onClickContextBarItem} |
| + theme={theprops.classes} |
| + /> |
| ) |
| + } |
| |
| - if (theprops.serverState.exception) { |
| - return ( |
| - <div className={classes.root}> |
| - {renderHeader()} |
| - <div className={classes.mapCtr}> |
| - <h2>Sorry, got an error:</h2> |
| - <h4>{theprops.serverState.exception.message}</h4> |
| - <pre>{theprops.serverState.exception.traceback}</pre> |
| - </div> |
| - </div> |
| - ) |
| - } |
| + const renderInstructions = () => ( |
| + <React.Fragment> |
| + <Route |
| + path={routes.HOME} |
| + exact |
| + render={() => ( |
| + <Instructions |
| + location={theprops.location} |
| + theme={theprops.classes} |
| + token={theprops.token} |
| + /> |
| + )} |
| + /> |
| + <Route |
| + path={routes.HOME} |
| + exact |
| + render={() => ( |
| + <TableOfContents |
| + items={theprops.tableOfContents.items} |
| + location={theprops.location} |
| + theme={theprops.classes} |
| + token={theprops.token} |
| + /> |
| + )} |
| + /> |
| + <Route |
| + path={routes.INSTRUCTIONS} |
| + render={() => ( |
| + <Instructions |
| + location={theprops.location} |
| + theme={theprops.classes} |
| + token={theprops.token} |
| + /> |
| + )} |
| + /> |
| + <Route |
| + path={routes.INSTRUCTIONS} |
| + render={() => ( |
| + <TableOfContents |
| + items={theprops.tableOfContents.items} |
| + theme={theprops.classes} |
| + token={theprops.token} |
| + /> |
| + )} |
| + /> |
| + </React.Fragment> |
| + ) |
| + |
| + if (theprops.serverState.exception) { |
| + return ( |
| + <div className={classes.root}> |
| + {renderHeader()} |
| + <div className={classes.mapCtr}> |
| + <h2>Sorry, got an error:</h2> |
| + <h4>{theprops.serverState.exception.message}</h4> |
| + <pre>{theprops.serverState.exception.traceback}</pre> |
| + </div> |
| + </div> |
| + ) |
| + } |
| |
| - const renderCatenaMap = () => ( |
| - <CatenaMap |
| - analysisPanelClosed={theprops.tabbedPanel.windowState === windowStates.minimized} |
| - baseLayer={theprops.mapBaseLayer.baseLayer} |
| - contextBarClosed={!tocVisible} |
| - history={theprops.history} |
| - location={theprops.location} |
| - map={theprops.map} |
| - mapScale={theprops.map.mapView.mapScale} |
| - mapSources={theprops.mapsources.mapsources} |
| - mapToolbar={theprops.mapToolbar} |
| - mapExtentUpdateHandled={theprops.actions.mapExtentUpdateHandled} |
| - mapViewUpdateHandled={theprops.actions.mapViewUpdateHandled} |
| - onClickFeature={theprops.actions.onClickContextBarItem} |
| - onFeatureCreate={theprops.actions.onFeatureCreate} |
| - onFieldSelect={theprops.actions.onFieldSelect} |
| - onRenameFeature={theprops.actions.onRenameFeature} |
| - onDeleteFeature={theprops.actions.onDeleteFeature} |
| - onUpdateMapView={theprops.actions.onUpdateMapView} |
| - setZoomToSelectedProject={theprops.actions.setZoomToSelectedProject} |
| - setZoomToSelectedMonitoringStation={theprops.actions.setZoomToSelectedMonitoringStation} |
| - setProjectsClean={theprops.actions.setProjectsClean} |
| - setSelectedMonitoringStation={theprops.actions.setSelectedMonitoringStation} |
| - setTabbedPanelKey={theprops.actions.setTabbedPanelKey} |
| - setMonitoringStationsClean={theprops.actions.setMonitoringStationsClean} |
| - manageProjects={theprops.manageProjects} |
| - serverState={theprops.serverState} |
| - settings={theprops.settings} |
| - contextBar={theprops.contextBar} |
| - mapToolbarClosed={!isMapToolbarVisible} |
| - meta={theprops.meta} |
| + const renderCatenaMap = () => ( |
| + <CatenaMap |
| + analysisPanelClosed={theprops.tabbedPanel.windowState === windowStates.minimized} |
| + baseLayer={theprops.mapBaseLayer.baseLayer} |
| + contextBarClosed={!tocVisible} |
| + history={theprops.history} |
| + location={theprops.location} |
| + map={theprops.map} |
| + mapScale={theprops.map.mapView.mapScale} |
| + mapSources={theprops.mapsources.mapsources} |
| + mapToolbar={theprops.mapToolbar} |
| + mapExtentUpdateHandled={theprops.actions.mapExtentUpdateHandled} |
| + mapViewUpdateHandled={theprops.actions.mapViewUpdateHandled} |
| + onClickFeature={theprops.actions.onClickContextBarItem} |
| + onFeatureCreate={theprops.actions.onFeatureCreate} |
| + onFieldSelect={theprops.actions.onFieldSelect} |
| + onRenameFeature={theprops.actions.onRenameFeature} |
| + onDeleteFeature={theprops.actions.onDeleteFeature} |
| + onUpdateMapView={theprops.actions.onUpdateMapView} |
| + setZoomToSelectedProject={theprops.actions.setZoomToSelectedProject} |
| + setZoomToSelectedMonitoringStation={theprops.actions.setZoomToSelectedMonitoringStation} |
| + setProjectsClean={theprops.actions.setProjectsClean} |
| + setSelectedMonitoringStation={theprops.actions.setSelectedMonitoringStation} |
| + setTabbedPanelKey={theprops.actions.setTabbedPanelKey} |
| + setMonitoringStationsClean={theprops.actions.setMonitoringStationsClean} |
| + manageProjects={theprops.manageProjects} |
| + serverState={theprops.serverState} |
| + settings={theprops.settings} |
| + contextBar={theprops.contextBar} |
| + mapToolbarClosed={!isMapToolbarVisible} |
| + meta={theprops.meta} |
| + theme={theprops.classes} |
| + ref={catenaMap} |
| + /> |
| + ) |
| + |
| + const renderUserContainerLayer = () => ( |
| + <UserLayersContainer |
| + actions={theprops.actions} |
| + baseImageURL="/static/er2_eofDB/dist" |
| + er2Map={catenaMap.current.mapApp.map} |
| + geoBar={theprops.geoBar} |
| + identify={theprops.identify} |
| + map={theprops.map} |
| + mapBaseLayer={theprops.mapBaseLayer} |
| + mapsources={theprops.mapsources} |
| + mapToolbar={theprops.mapToolbar} |
| + services={theprops.services} |
| + publicSites={theprops.publicSites} |
| + theme={theprops.classes} |
| + tocVisible={tocVisible} |
| + token={theprops.token} |
| + /> |
| + ) |
| + |
| + const renderTabbedPanel = () => { |
| + console.log({isMapToolbarVisible}) |
| + const selectedProjects = theprops.manageProjects.projects.filter(p => p.selected === true) |
| + return ( |
| + <React.Fragment> |
| + <WindowState |
| + onChangeWindowState={theprops.actions.setTabbedPanelWindowState} |
| + opacity={theprops.mapToolbar.opacity} |
| + theme={theprops.classes} |
| + tocVisible={tocVisible} |
| + type="south" |
| + windowState={theprops.tabbedPanel.windowState} |
| + /> |
| + {theprops.tabbedPanel.windowState !== windowStates.minimized && parsedLoc.path === routes.MANAGE_PROJECTS && ( |
| + <TabbedPanel |
| + heightOffset={theprops.theme.analysisPanelOffset} |
| + maptoolbarVisible={isMapToolbarVisible} |
| + onResize={theprops.actions.onResizeAnalysisPanel} |
| + tocVisible={tocVisible} |
| + tabbedPanel={theprops.tabbedPanel} |
| theme={theprops.classes} |
| - ref={catenaMap} |
| + onSetTabbedPanelKey={theprops.actions.onSetTabbedPanelKey} |
| + > |
| + <ProjectSP project={selectedProjects[0]} key="Project Details" /> |
| + <MonitoringStationSP |
| + key="Monitoring Stations" |
| + classes={theprops.classes} |
| + project={selectedProjects[0]} /> |
| + <DocumentsSP key="Documents" project={selectedProjects[0]} /> |
| + </TabbedPanel> |
| + )} |
| + {theprops.tabbedPanel.windowState !== windowStates.minimized && parsedLoc.path === routes.USERS && !userRoleConservationist && ( |
| + <TabbedPanel |
| + heightOffset={theprops.theme.analysisPanelOffset} |
| + maptoolbarVisible={isMapToolbarVisible} |
| + onResize={theprops.actions.onResizeAnalysisPanel} |
| + tocVisible={tocVisible} |
| + tabbedPanel={theprops.tabbedPanel} |
| + theme={theprops.classes} |
| + onSetTabbedPanelKey={theprops.actions.onSetTabbedPanelKey} |
| + > |
| + <ManageUsers key="Users"/> |
| + |
| + </TabbedPanel> |
| + )} |
| + </React.Fragment> |
| + ) |
| + } |
| + |
| + const renderManageProjectsCB = () => ( |
| + <Route |
| + path={routes.MANAGE_PROJECTS} |
| + render={() => ( |
| + <ManageProjects |
| + catenaMap={catenaMap.current} |
| + serverState={theprops.serverState} |
| + theme={theprops.classes} |
| /> |
| - ) |
| + )} |
| + /> |
| + ) |
| |
| - const renderUserContainerLayer = () => ( |
| - <UserLayersContainer |
| - actions={theprops.actions} |
| - baseImageURL="/static/er2_eofDB/dist" |
| - er2Map={catenaMap.current.mapApp.map} |
| - geoBar={theprops.geoBar} |
| - identify={theprops.identify} |
| - map={theprops.map} |
| - mapBaseLayer={theprops.mapBaseLayer} |
| - mapsources={theprops.mapsources} |
| - mapToolbar={theprops.mapToolbar} |
| - services={theprops.services} |
| - publicSites={theprops.publicSites} |
| - theme={theprops.classes} |
| - tocVisible={tocVisible} |
| - token={theprops.token} |
| + const renderManageUsersCB = () => ( |
| + <Route |
| + path={routes.USERS} |
| + render={() => ( |
| + <ManageUsersCB theme={theprops.classes} /> |
| + )} |
| + /> |
| + ) |
| + |
| + const renderSettings = () => ( |
| + <Route |
| + path={routes.SETTINGS} |
| + render={() => ( |
| + <Settings |
| + catenaMap={catenaMap.current} |
| + manageProjects={theprops.manageProjects} |
| + setAdvanced={theprops.actions.setAdvancedSetting} |
| + settings={theprops.settings} |
| + setFeatureColor={theprops.actions.setFeatureColor} |
| + setFeatureOpacity={theprops.actions.setFeatureOpacity} |
| + onChangeBrushUnit={theprops.actions.onChangeBrushUnit} |
| + onSetBrushRadiusMin={theprops.actions.onSetBrushRadiusMin} |
| + onSetBrushRadiusMax={theprops.actions.onSetBrushRadiusMax} |
| + setFeatureBorderWidth={theprops.actions.setFeatureBorderWidth} |
| + theme={theprops.classes} |
| /> |
| - ) |
| + )} |
| + /> |
| + ) |
| |
| - const renderTabbedPanel = () => { |
| - console.log({isMapToolbarVisible}) |
| - const selectedProjects = theprops.manageProjects.projects.filter(p => p.selected === true) |
| - return ( |
| - <React.Fragment> |
| - <WindowState |
| - onChangeWindowState={theprops.actions.setTabbedPanelWindowState} |
| - opacity={theprops.mapToolbar.opacity} |
| - theme={theprops.classes} |
| - tocVisible={tocVisible} |
| - type="south" |
| - windowState={theprops.tabbedPanel.windowState} |
| - /> |
| - {theprops.tabbedPanel.windowState !== windowStates.minimized && parsedLoc.path === routes.MANAGE_PROJECTS && ( |
| - <TabbedPanel |
| - heightOffset={theprops.theme.analysisPanelOffset} |
| - maptoolbarVisible={isMapToolbarVisible} |
| - onResize={theprops.actions.onResizeAnalysisPanel} |
| - tocVisible={tocVisible} |
| - tabbedPanel={theprops.tabbedPanel} |
| - theme={theprops.classes} |
| - onSetTabbedPanelKey={theprops.actions.onSetTabbedPanelKey} |
| - > |
| - <ProjectSP project={selectedProjects[0]} key="Project Details" /> |
| - <MonitoringStationSP |
| - key="Monitoring Stations" |
| - classes={theprops.classes} |
| - project={selectedProjects[0]} /> |
| - <DocumentsSP key="Documents" project={selectedProjects[0]} /> |
| - </TabbedPanel> |
| - )} |
| - {theprops.tabbedPanel.windowState !== windowStates.minimized && parsedLoc.path === routes.USERS && ( |
| - <TabbedPanel |
| - heightOffset={theprops.theme.analysisPanelOffset} |
| - maptoolbarVisible={isMapToolbarVisible} |
| - onResize={theprops.actions.onResizeAnalysisPanel} |
| - tocVisible={tocVisible} |
| - tabbedPanel={theprops.tabbedPanel} |
| - theme={theprops.classes} |
| - onSetTabbedPanelKey={theprops.actions.onSetTabbedPanelKey} |
| - > |
| - <ManageUsers key="Users"/> |
| - |
| - </TabbedPanel> |
| - )} |
| - </React.Fragment> |
| - ) |
| + const renderContextBarItems = () => { |
| + const isManageProjectsVisible = location.pathname === routes.MANAGE_PROJECTS && catenaMap.current |
| + const isManageUsersVisible = location.pathname === routes.USERS |
| + |
| + if (isManageProjectsVisible) { |
| + return renderManageProjectsCB() |
| + } |
| + if(isManageUsersVisible) { |
| + return renderManageUsersCB() |
| } |
| |
| - const renderManageProjectsCB = () => ( |
| - <Route |
| - path={routes.MANAGE_PROJECTS} |
| - render={() => ( |
| - <ManageProjects |
| - catenaMap={catenaMap.current} |
| - serverState={theprops.serverState} |
| - theme={theprops.classes} |
| - /> |
| - )} |
| - /> |
| - ) |
| + return undefined |
| + } |
| |
| - const renderManageUsersCB = () => ( |
| - <Route |
| - path={routes.USERS} |
| - render={() => ( |
| - <ManageUsersCB theme={theprops.classes} /> |
| - )} |
| - /> |
| - ) |
| + if (keycloak && catenaKeycloak.initialized && !keycloak.authenticated && location.pathname !== routes.INSTRUCTIONS) { |
| + return ( |
| + <Redirect to={routes.INSTRUCTIONS} />) |
| + } |
| |
| - const renderSettings = () => ( |
| - <Route |
| - path={routes.SETTINGS} |
| - render={() => ( |
| - <Settings |
| - catenaMap={catenaMap.current} |
| - manageProjects={theprops.manageProjects} |
| - setAdvanced={theprops.actions.setAdvancedSetting} |
| - settings={theprops.settings} |
| - setFeatureColor={theprops.actions.setFeatureColor} |
| - setFeatureOpacity={theprops.actions.setFeatureOpacity} |
| - onChangeBrushUnit={theprops.actions.onChangeBrushUnit} |
| - onSetBrushRadiusMin={theprops.actions.onSetBrushRadiusMin} |
| - onSetBrushRadiusMax={theprops.actions.onSetBrushRadiusMax} |
| - setFeatureBorderWidth={theprops.actions.setFeatureBorderWidth} |
| - theme={theprops.classes} |
| - /> |
| - )} |
| - /> |
| - ) |
| + const theMuiTheme = customMuiTheme({ colors, overrides }) |
| |
| - const renderContextBarItems = () => { |
| - const isManageProjectsVisible = location.pathname === routes.MANAGE_PROJECTS && catenaMap.current |
| - const isManageUsersVisible = location.pathname === routes.USERS |
| + return ( |
| + <MuiThemeProvider theme={theMuiTheme}> |
| + <div className={classes.root}> |
| + {renderHeader()} |
| + {renderContextBar()} |
| + {/* Rendering the Settings */} |
| + {renderSettings()} |
| + {renderBreadcrumbs(theprops.classes)} |
| + {renderInstructions()} |
| + {/* Rendering the Maps and the tabbed panels */} |
| + {mapVisible && renderCatenaMap()} |
| + {mapVisible && catenaMap.current && renderUserContainerLayer()} |
| + {/* Rendering the Context Bar Items */} |
| + {renderContextBarItems()} |
| + {(mapVisible || usersVisible) && renderTabbedPanel()} |
| |
| - if (isManageProjectsVisible) { |
| - return renderManageProjectsCB() |
| - } |
| - if(isManageUsersVisible) { |
| - return renderManageUsersCB() |
| - } |
| - |
| - return undefined |
| - } |
| - |
| - if (keycloak && catenaKeycloak.initialized && !keycloak.authenticated && location.pathname !== routes.INSTRUCTIONS) { |
| - return ( |
| - <Redirect to={routes.INSTRUCTIONS} />) |
| - } |
| - |
| - const theMuiTheme = customMuiTheme({ colors, overrides }) |
| - |
| - return ( |
| - <MuiThemeProvider theme={theMuiTheme}> |
| - <div className={classes.root}> |
| - {renderHeader()} |
| - {renderContextBar()} |
| - {/* Rendering the Settings */} |
| - {renderSettings()} |
| - {renderBreadcrumbs(theprops.classes)} |
| - {renderInstructions()} |
| - {/* Rendering the Maps and the tabbed panels */} |
| - {mapVisible && renderCatenaMap()} |
| - {mapVisible && catenaMap.current && renderUserContainerLayer()} |
| - {/* Rendering the Context Bar Items */} |
| - {renderContextBarItems()} |
| - {(mapVisible || usersVisible) && renderTabbedPanel()} |
| - |
| - </div> |
| - </MuiThemeProvider> |
| - ) |
| + </div> |
| + </MuiThemeProvider> |
| + ) |
| } |
| |
| App.defaultProps = { |
| - match: { params: {} }, |
| - mapToolbar: { items: [] }, |
| - tableOfContents: { items: [] }, |
| + match: { params: {} }, |
| + mapToolbar: { items: [] }, |
| + tableOfContents: { items: [] }, |
| } |
| |
| const mapStateToProps = state => ({ |
| - attributeTables: state.attributeTables, |
| - climate: state.climate, |
| - contextBar: state.contextBar, |
| - geoBar: state.geoBar, |
| - identify: state.identify, |
| - logger: state.logger, |
| - map: state.map, |
| - mapBaseLayer: state.mapBaseLayer, |
| - mapsources: state.mapsources, |
| - mapToolbar: state.mapToolbar, |
| - meta: state.meta, |
| - publicSites: state.publicSites, |
| - run: state.run, |
| - manageProjects: state.manageProjects, |
| - selectCrop: state.selectCrop, |
| - serverState: state.serverState, |
| - services: state.services, |
| - settings: state.settings, |
| - soil: state.soil, |
| - tabbedPanel: state.tabbedPanel, |
| - tableOfContents: state.tableOfContents, |
| - theme: state.theme, |
| - token: state.token, |
| + attributeTables: state.attributeTables, |
| + climate: state.climate, |
| + contextBar: state.contextBar, |
| + geoBar: state.geoBar, |
| + identify: state.identify, |
| + logger: state.logger, |
| + map: state.map, |
| + mapBaseLayer: state.mapBaseLayer, |
| + mapsources: state.mapsources, |
| + mapToolbar: state.mapToolbar, |
| + meta: state.meta, |
| + publicSites: state.publicSites, |
| + run: state.run, |
| + manageProjects: state.manageProjects, |
| + selectCrop: state.selectCrop, |
| + serverState: state.serverState, |
| + services: state.services, |
| + settings: state.settings, |
| + soil: state.soil, |
| + tabbedPanel: state.tabbedPanel, |
| + tableOfContents: state.tableOfContents, |
| + theme: state.theme, |
| + token: state.token, |
| }) |
| |
| const mapDispatchToProps = dispatch => ({ |
| - actions: bindActionCreators(Actions, dispatch), |
| + actions: bindActionCreators(Actions, dispatch), |
| }) |
| |
| export default withRouter(connect(mapStateToProps, mapDispatchToProps)(App)) |