Add Settings Page

scripts/resetdb

@@ -26,6 +26,7 @@ function enableswitches() {
     ./scripts/manage waffle_switch claim_a_facility on
     ./scripts/manage waffle_switch ppe on
     ./scripts/manage waffle_switch report_a_facility on
+    ./scripts/manage waffle_switch embedded_map on
 }
 
 function assigngroups() {

src/app/src/App.jsx

@@ -30,6 +30,7 @@ import ClaimFacility from './components/ClaimFacility';
 import ClaimedFacilities from './components/ClaimedFacilities';
 import AboutClaimedFacilities from './components/AboutClaimedFacilities';
 import SurveyDialogNotification from './components/SurveyDialogNotification';
+import Settings from './components/Settings';
 
 import './App.css';
 
@@ -57,6 +58,7 @@ import {
     claimedFacilitiesRoute,
     CLAIM_A_FACILITY,
     aboutClaimedFacilitiesRoute,
+    settingsRoute,
 } from './util/constants';
 
 const appStyles = Object.freeze({
@@ -166,7 +168,11 @@ class App extends Component {
                                 <Route
                                     exact
                                     path={profileRoute}
-                                    component={UserProfile}
+                                    component={({
+                                        match: {
+                                            params: { id },
+                                        },
+                                    }) => <UserProfile id={id} />}
                                 />
                                 <Route
                                     exact
@@ -202,6 +208,11 @@ class App extends Component {
                                         </FeatureFlag>
                                     )}
                                 />
+                                <Route
+                                    exact
+                                    path={settingsRoute}
+                                    component={Settings}
+                                />
                                 <Route
                                     exact
                                     path={mainRoute}

src/app/src/components/EmbeddedMapCode.jsx

@@ -0,0 +1,100 @@
+import React from 'react';
+import Typography from '@material-ui/core/Typography';
+import Button from '@material-ui/core/Button';
+import { shape, string, bool } from 'prop-types';
+import { CopyToClipboard } from 'react-copy-to-clipboard';
+import noop from 'lodash/noop';
+import { toast } from 'react-toastify';
+
+import { createIFrameHTML } from '../util/util';
+
+const styles = {
+    sectionHeader: {
+        color: 'rgb(0, 0, 0)',
+        fontSize: '18px',
+        margin: '10px 0',
+    },
+    embedContainer: {
+        background: 'rgb(240, 240, 240)',
+        borderRadius: '0px',
+        minHeight: '278px',
+        width: '360px',
+        display: 'flex',
+        flexDirection: 'column',
+        justifyContent: 'space-between',
+        padding: '20px',
+    },
+    embedTextBox: {
+        background: 'rgb(255, 255, 255)',
+        borderRadius: 0,
+        border: '1px solid rgb(214, 216, 221)',
+        flex: 1,
+        width: '90%',
+        marginTop: '20px',
+        color: 'rgb(0, 0, 0)',
+        fontFamily: 'ff-tisa-sans-web-pro,sans-serif',
+        padding: '10px',
+    },
+    embedButton: {
+        background: 'rgb(0, 0, 0)',
+        borderRadius: 0,
+        marginTop: '10px',
+        color: 'white',
+    },
+};
+
+function EmbeddedMapCode({
+    color,
+    font,
+    width,
+    height,
+    fullWidth,
+    contributor,
+}) {
+    const mapSettings = {
+        color,
+        font,
+        width,
+        height,
+        fullWidth,
+        contributor,
+    };
+
+    return (
+        <div style={styles.embedContainer}>
+            <Typography style={styles.sectionHeader}>Embed code</Typography>
+            <Typography style={styles.embedTextBox}>
+                {createIFrameHTML(mapSettings)}
+            </Typography>
+            <CopyToClipboard
+                text={createIFrameHTML(mapSettings)}
+                onCopy={() => toast('Copied code to clipboard')}
+            >
+                <Button
+                    variant="contained"
+                    style={styles.embedButton}
+                    onClick={noop}
+                >
+                    Copy to clipboard
+                </Button>
+            </CopyToClipboard>
+        </div>
+    );
+}
+
+EmbeddedMapCode.defaultProps = {
+    font: null,
+};
+
+EmbeddedMapCode.propTypes = {
+    width: string.isRequired,
+    height: string.isRequired,
+    fullWidth: bool.isRequired,
+    color: string.isRequired,
+    font: shape({
+        label: string,
+        value: string,
+    }),
+};
+
+export default EmbeddedMapCode;

src/app/src/components/EmbeddedMapConfig.jsx

@@ -0,0 +1,137 @@
+import React, { useState } from 'react';
+import { connect } from 'react-redux';
+import Typography from '@material-ui/core/Typography';
+import Grid from '@material-ui/core/Grid';
+
+import { userPropType } from '../util/propTypes';
+import { getEmbeddedMapSrc } from '../util/util';
+import AppGrid from './AppGrid';
+import EmbeddedMapFieldsConfig from './EmbeddedMapFieldsConfig';
+import EmbeddedMapThemeConfig from './EmbeddedMapThemeConfig';
+import EmbeddedMapSizeConfig from './EmbeddedMapSizeConfig';
+import EmbeddedMapCode from './EmbeddedMapCode';
+
+const styles = {
+    container: {
+        marginBottom: '200px',
+    },
+    section: {
+        marginTop: '30px',
+    },
+    sectionHeader: {
+        color: 'rgb(0, 0, 0)',
+        fontSize: '18px',
+        margin: '10px 0',
+    },
+    previewHeader: {
+        color: 'rgb(0, 0, 0)',
+        fontSize: '24px',
+    },
+};
+
+function EmbeddedMapConfig({ user }) {
+    // TODO: Replace with backend configuration data
+    const [fields, setFields] = useState([
+        { included: true, label: 'Years active', value: 'years_active' },
+        { included: true, label: 'num_widgets', value: 'num_widgets' },
+        {
+            included: false,
+            label: 'some_other_field_name',
+            value: 'some_other_field_name',
+        },
+    ]);
+    const [
+        includeOtherContributorFields,
+        setIncludeOtherContributorFields,
+    ] = useState(true);
+    const [color, setColor] = useState('#C74444');
+    const [font, setFont] = useState(null);
+    const [width, setWidth] = useState('780');
+    const [fullWidth, setFullWidth] = useState(false);
+    const [height, setHeight] = useState('440');
+
+    const mapSettings = {
+        color,
+        font,
+        width,
+        height,
+        fullWidth,
+        contributor: [user?.id],
+    };
+
+    return (
+        <AppGrid style={styles.container} title="">
+            <Typography>
+                Generate a custom OAR map to embed in your website. The map will
+                include all facilities you have contributed.
+            </Typography>
+            <Grid item xs={6}>
+                <EmbeddedMapFieldsConfig
+                    fields={fields}
+                    setFields={setFields}
+                    includeOtherContributorFields={
+                        includeOtherContributorFields
+                    }
+                    setIncludeOtherContributorFields={
+                        setIncludeOtherContributorFields
+                    }
+                />
+                <EmbeddedMapThemeConfig
+                    color={color}
+                    setColor={setColor}
+                    font={font}
+                    setFont={setFont}
+                />
+                <EmbeddedMapSizeConfig
+                    width={width}
+                    setWidth={setWidth}
+                    height={height}
+                    setHeight={setHeight}
+                    fullWidth={fullWidth}
+                    setFullWidth={setFullWidth}
+                />
+            </Grid>
+            <Grid item xs={6} style={{ ...styles.section, padding: '20px' }}>
+                <EmbeddedMapCode {...mapSettings} />
+            </Grid>
+            <Grid
+                item
+                xs={12}
+                style={{ ...styles.section, minHeight: '500px' }}
+            >
+                <Typography style={styles.previewHeader}>Preview</Typography>
+                <iframe
+                    frameBorder="0"
+                    scrolling="no"
+                    marginHeight="0"
+                    marginWidth="0"
+                    width={width}
+                    height={height}
+                    type="text/html"
+                    src={getEmbeddedMapSrc(mapSettings)}
+                    title="embedded-map"
+                />
+            </Grid>
+        </AppGrid>
+    );
+}
+
+EmbeddedMapConfig.defaultProps = {
+    user: null,
+};
+
+EmbeddedMapConfig.propTypes = {
+    user: userPropType,
+};
+
+function mapStateToProps({
+    auth: {
+        user: { user },
+    },
+}) {
+    return {
+        user,
+    };
+}
+
+export default connect(mapStateToProps)(EmbeddedMapConfig);