-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #3 from posm/feature/filter-apps-by-access
Feature/filter apps by access
- Loading branch information
Showing
13 changed files
with
387 additions
and
188 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,12 +1,36 @@ | ||
| # POSM Admin UI | ||
|
|
||
| This is the [POSM](http://posm.io) admin user interface. It's intended for use with [posm-admin](https://github.com/posm/posm-admin). | ||
| This is the [POSM](http://posm.io) admin user interface. | ||
| It's intended for use with [posm-admin](https://github.com/posm/posm-admin) and [posm-auth](https://github.com/posm/posm-auth). | ||
|
|
||
| This project was bootstrapped with [Create React App](https://github.com/facebookincubator/create-react-app). | ||
|
|
||
| ## Development | ||
| ## Getting Started | ||
|
|
||
| ### Setting up configuration | ||
|
|
||
| ```bash | ||
| # Create an environment file | ||
| touch .env | ||
| ``` | ||
|
|
||
| The environment file should define these variables: | ||
|
|
||
| ```sh | ||
| REACT_APP_POSM_AUTH_END_POINT=http://localhost:8050 | ||
| ``` | ||
|
|
||
| ### Running locally | ||
|
|
||
| ```bash | ||
| yarn | ||
| yarn install | ||
| yarn start | ||
| ``` | ||
| ``` | ||
|
|
||
| You will also need to run [posm-auth](https://github.com/posm/posm-auth). | ||
|
|
||
| # Building | ||
|
|
||
| ```bash | ||
| yarn build | ||
| ``` |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -3,77 +3,106 @@ import React from "react"; | |
| import { Col, Grid, Image, PageHeader, Row } from "react-bootstrap"; | ||
| import { connect } from "react-redux"; | ||
|
|
||
| import Card from "./Card"; | ||
| import FilesPanel from "./FilesPanel"; | ||
| import { getPOSMEndpoint, getApps } from "../selectors"; | ||
| import { getPOSMEndpoint, getApps, getAllowedApps } from "../selectors"; | ||
|
|
||
| import omkLogo from "../images/omk.png"; | ||
| import odkLogo from "../images/odk.png"; | ||
| import fpLogo from "../images/fp.png"; | ||
| import osmLogo from "../images/osm.png"; | ||
| import posmLogo from "../images/[email protected]"; | ||
|
|
||
| const styles = { | ||
| card: {}, | ||
| row: { | ||
| display: "flex", | ||
| justifyContent: "space-between" | ||
| }, | ||
| imageContainer: { | ||
| display: "flex", | ||
| flexGrow: 1, | ||
| alignItems: "center" | ||
| }, | ||
| heading: { | ||
| flexShrink: 0 | ||
| }, | ||
| link: { | ||
| display: "flex", | ||
| flexDirection: "column", | ||
| alignItems: "center", | ||
| padding: "8px", | ||
| flexGrow: 1 | ||
| }, | ||
| image: { | ||
| margin: "auto" | ||
| margin: "auto", | ||
| maxWidth: "160px" | ||
| }, | ||
| cardContainer: { | ||
| display: "flex", | ||
| flexDirection: "column", | ||
| width: "auto", | ||
| margin: "8px", | ||
| padding: "0 32px" | ||
| } | ||
| }; | ||
|
|
||
| const HomePanel = ({ apps, osm, posm }) => ( | ||
| <div> | ||
| <div className="posm-panel apps"> | ||
| <PageHeader>Apps</PageHeader> | ||
| <Grid fluid> | ||
| <Row> | ||
| {apps.map(x => x.name).includes("OpenMapKit") && ( | ||
| <Col md={4}> | ||
| <a | ||
| href={`${posm}/omk/`} | ||
| target="_blank" | ||
| rel="noopener noreferrer" | ||
| > | ||
| <Card style={styles.card}> | ||
| <H3>OpenMapKitServer</H3> | ||
| <Image src={omkLogo} style={styles.image} responsive /> | ||
| </Card> | ||
| </a> | ||
| </Col> | ||
| )} | ||
| {apps.map(x => x.name).includes("Field Papers") && ( | ||
| <Col md={4}> | ||
| <a href={`${posm}/fp/`} target="_blank" rel="noopener noreferrer"> | ||
| <Card style={styles.card}> | ||
| <H3>Field Papers</H3> | ||
| <Image src={fpLogo} style={styles.image} responsive /> | ||
| </Card> | ||
| </a> | ||
| </Col> | ||
| )} | ||
| {apps.map(x => x.name).includes("OpenStreetMap") && ( | ||
| <Col md={4}> | ||
| <a | ||
| href={`http://${osm.fqdn}/`} | ||
| target="_blank" | ||
| rel="noopener noreferrer" | ||
| const logos = { | ||
| omk: omkLogo, | ||
| fp: fpLogo, | ||
| odkc: odkLogo, | ||
| osm: osmLogo, | ||
|
|
||
| replay: posmLogo, | ||
| odmgcp: posmLogo | ||
| }; | ||
|
|
||
| const HomePanel = ({ apps, osm, posm, allowedApps }) => { | ||
| const filteredApps = apps.filter( | ||
| app => allowedApps.includes(app.key) && app.visibleInHomePanel | ||
| ); | ||
|
|
||
| return ( | ||
| <div> | ||
| <div className="posm-panel apps"> | ||
| <PageHeader>Apps</PageHeader> | ||
| <Grid fluid> | ||
| <Row style={styles.row}> | ||
| {filteredApps.map(app => ( | ||
| <Col | ||
| className="bp3-cart bp3-elevation-2" | ||
| md={4} | ||
| style={styles.cardContainer} | ||
| > | ||
| <Card style={styles.card}> | ||
| <H3>OpenStreetMap</H3> | ||
| <Image src={osmLogo} style={styles.image} responsive /> | ||
| </Card> | ||
| </a> | ||
| </Col> | ||
| )} | ||
| </Row> | ||
| </Grid> | ||
| <a | ||
| style={styles.link} | ||
| href={app.url} | ||
| target="_blank" | ||
| rel="noopener noreferrer" | ||
| > | ||
| <H3 style={styles.heading}>{app.name}</H3> | ||
| <div style={styles.imageContainer}> | ||
| <Image | ||
| src={logos[app.key]} | ||
| style={styles.image} | ||
| responsive | ||
| /> | ||
| </div> | ||
| </a> | ||
| </Col> | ||
| ))} | ||
| </Row> | ||
| </Grid> | ||
| </div> | ||
| <FilesPanel /> | ||
| </div> | ||
| <FilesPanel /> | ||
| </div> | ||
| ); | ||
| ); | ||
| }; | ||
|
|
||
| HomePanel.propTypes = {}; | ||
|
|
||
| const mapStateToProps = state => ({ | ||
| apps: getApps(state), | ||
| osm: state.osm, | ||
| allowedApps: getAllowedApps(state), | ||
| posm: getPOSMEndpoint(state) | ||
| }); | ||
|
|
||
|
|
||
Oops, something went wrong.