Themes

.babelrc

@@ -0,0 +1,13 @@
+{
+  "presets": [
+    [
+      "@babel/preset-env",
+      {
+        "targets": {
+          "node": "10"
+        }
+      }
+    ],
+    "@babel/preset-react"
+  ]
+}

browser/api/baseApi.js

@@ -0,0 +1,52 @@
+
+export default class BaseApi {
+
+    get(url = "") {
+        try {
+
+            // Default options are marked with *
+            return fetch(url, {
+                method: 'GET', // *GET, POST, PUT, DELETE, etc.
+                // mode: 'cors', // no-cors, *cors, same-origin
+                // cache: 'no-cache', // *default, no-cache, reload, force-cache, only-if-cached
+                // credentials: 'same-origin', // include, *same-origin, omit
+                // headers: {
+                //   'Content-Type': 'application/json; charset=utf-8'
+                // },
+                // redirect: 'follow', // manual, *follow, error
+                // referrerPolicy: 'no-referrer', // no-referrer, *no-referrer-when-downgrade, origin, origin-when-cross-origin, same-origin, strict-origin, strict-origin-when-cross-origin, unsafe-url
+                // body: JSON.stringify(query) // body data type must match "Content-Type" header
+              });
+
+
+        } catch (error) {
+            // console.log("BaseApi error", error);
+            return "";
+        }
+    }
+
+    post(url = "", body = "") {
+
+        try {
+
+            // Default options are marked with *
+            return fetch(url, {
+                method: 'POST', // *GET, POST, PUT, DELETE, etc.
+                // mode: 'cors', // no-cors, *cors, same-origin
+                // cache: 'no-cache', // *default, no-cache, reload, force-cache, only-if-cached
+                // credentials: 'same-origin', // include, *same-origin, omit
+                headers: {
+                  'Content-Type': 'application/json; charset=utf-8'
+                },
+                // redirect: 'follow', // manual, *follow, error
+                // referrerPolicy: 'no-referrer', // no-referrer, *no-referrer-when-downgrade, origin, origin-when-cross-origin, same-origin, strict-origin, strict-origin-when-cross-origin, unsafe-url
+                // body: JSON.stringify(query) // body data type must match "Content-Type" header
+                body: JSON.stringify(body)
+              });
+
+        } catch (error) {
+            // console.log("BaseApi error", error);
+            return "";
+        }
+    }
+}

browser/api/meta/MetaApi.js

@@ -0,0 +1,25 @@
+import BaseApi from '../baseApi';
+
+const metaUrl = '/api/meta/jupiter/';
+
+export default class MetaApi {
+    getMetaData(parameter) {
+        const baseApi = new BaseApi();
+        const url = metaUrl + parameter;
+        return baseApi.get(url).then((response) => {
+            return response.json();
+        }).then((results) => {
+            return results.data.filter((item) => item.f_table_schema == parameter).map((item) => {
+                let value = `${item.f_table_schema}.${item.f_table_name}`;
+                if (item.f_table_title == 'Jupiter boringer') {
+                    value = 'v:system.all';
+                }
+                return {
+                    label: item.f_table_title,
+                    group: item.layergroup,
+                    value: value
+                }
+            });
+        });
+    }
+}

browser/api/projects/ProjectsApi.js

@@ -0,0 +1,11 @@
+import BaseApi from '../baseApi';
+
+const projectsUrl = '/api/state-snapshots/jupiter?ownerOnly=true'
+
+export default class ProjectsApi {
+    getProjects() {
+        const baseApi = new BaseApi();
+        const response = baseApi.get(projectsUrl);
+        return response;
+    }
+}

browser/components/dataselector/DataSelectorDialogue.js

@@ -0,0 +1,127 @@
+import { useState, useEffect } from 'react';
+import styled from "styled-components";
+import Title from '../shared/title/Title';
+import CloseButton from '../shared/button/CloseButton';
+import PropTypes from 'prop-types';
+import Grid from '@material-ui/core/Grid';
+import Card from '../shared/card/Card';
+import CheckBoxList from '../shared/list/CheckBoxList';
+import RadioButtonList from '../shared/list/RadioButtonList';
+import Button from '../shared/button/Button';
+import ButtonGroup from '../shared/button/ButtonGroup';
+import ProjectList from './ProjectList';
+import PredefinedDatasourceViews from './PredefinedDatasourceViews';
+import { Variants } from '../shared/constants/variants';
+import { Size } from '../shared/constants/size';
+import { Align } from '../shared/constants/align';
+import { hexToRgbA } from '../../helpers/colors';
+import {WATER_LEVEL_KEY} from '../../constants';
+import MetaApi from '../../api/meta/MetaApi';
+
+DataSelectorDialogue.propTypes = {
+    text: PropTypes.string,
+    state: PropTypes.object,
+    categories: PropTypes.object,
+    onApply: PropTypes.func,
+}
+
+function DataSelectorDialogue(props) {
+    const [showProjectsList, setShowProjectsList] = useState(false);
+    const [parameters, setParameters] = useState([]);
+    const [selectedDataSources, setSelectedDataSources] = useState([]);
+    const [selectedParameter, setSelectedParameter] = useState();
+    const [dataSources, setDataSources] = useState([]);
+
+    useEffect(() => {
+        let chemicals = [{label: __('Water Level'), value: WATER_LEVEL_KEY, group: __('Water Level')}];
+        for (let key in props.categories[LAYER_NAMES[0]]) {
+            if (key == 'Vandstand') {
+                continue;
+            }
+            for (let key2 in props.categories[LAYER_NAMES[0]][key]) {
+                var label = props.categories[LAYER_NAMES[0]][key][key2];
+                chemicals.push({'label': label, 'value': key2, 'group': key});
+            }
+        }
+        setParameters(chemicals);
+    }, [props.categories]);
+
+    const loadDataSources = () => {
+        const api = new MetaApi();
+        api.getMetaData('calypso_stationer').then((response) => {
+            setDataSources(response);
+        });
+    }
+
+    useEffect(() => {
+        loadDataSources();
+    }, []);
+
+    const applyParameter = () => {
+        const layers = selectedDataSources.map((source) => {
+            return source.value;
+        })
+        props.onApply({
+            layers: layers,
+            chemical: (selectedParameter ? selectedParameter.value : false)
+        });
+        props.onCloseButtonClick ? props.onCloseButtonClick() : null;
+    }
+    return (
+        <Root>
+            <ModalHeader>
+                <Grid container>
+                    <Grid container item xs={10}>
+                        <Title text={props.titleText} />
+                    </Grid>
+                    <Grid container justify="flex-end" item xs={2}>
+                        <CloseButton onClick={props.onCloseButtonClick} />
+                    </Grid>
+                </Grid>
+            </ModalHeader>
+            <ModalBody>
+                {showProjectsList ? <ProjectList onStateSnapshotApply={props.onCloseButtonClick} {...props} /> :
+                    <div>
+                        <PredefinedDatasourceViews />
+                        <Grid container spacing={32}>
+                            <Grid container item md={6}>
+                                <Card>
+                                    <Title text={__('Datakilder')} level={3} />
+                                    <CheckBoxList listItems={dataSources} onChange={setSelectedDataSources} />
+                                </Card>
+                            </Grid>
+                            <Grid container item md={6}>
+                                {selectedDataSources.findIndex((item) => item.value == 'v:system.all') > -1 ? <Card>
+                                    <Title text={__('Måleparameter')} level={3} />
+                                    <RadioButtonList listItems={parameters} onChange={setSelectedParameter} />
+                                </Card> : null}
+                            </Grid>
+                        </Grid>
+                    </div>}
+                {showProjectsList ? <ButtonGroup align={Align.Center}>
+                    <Button text={__("Choose datasource and layers")} variant={Variants.None} onClick={() => setShowProjectsList(false)} size={Size.Large} />
+
+                </ButtonGroup> :
+                <ButtonGroup align={Align.Center} spacing={2}>
+                    <Button text={__("Abn eksisterende")} variant={Variants.None} onClick={() => setShowProjectsList(!showProjectsList)} size={Size.Large} />
+                    <Button text={__("Start")} variant={Variants.Primary} onClick={() => applyParameter()} size={Size.Large} disabled={!selectedParameter || selectedDataSources.length == 0} />
+                </ButtonGroup> }
+            </ModalBody>
+        </Root>
+    );
+}
+
+const Root = styled.div`
+    background: ${({ theme }) => hexToRgbA(theme.colors.primary[1], 0.92)};
+    border-radius: ${({ theme }) => `${theme.layout.borderRadius.large}px`};
+`;
+
+const ModalHeader = styled.div`
+    padding: ${( { theme }) => `${theme.layout.gutter}px ${theme.layout.gutter}px 0 ${theme.layout.gutter}px`};
+`;
+
+const ModalBody = styled.div`
+    padding: ${( { theme }) => `${theme.layout.gutter}px`};
+`;
+
+export default DataSelectorDialogue;

browser/components/dataselector/PredefinedDatasourceViews.js

@@ -0,0 +1,14 @@
+import IconButton from '../shared/button/IconButton';
+
+function PredefinedDatasourceViews(props) {
+
+    return (<>
+            <IconButton icon="cleaning-spray" label={__('Pesticider')} />
+            <IconButton icon="no3-solid" label={__('Nitrat')} />
+            <IconButton icon="water-wifi-solid" label={__('Mine stationer')} />
+            <IconButton icon="lab-flask-experiment" label={__('Mine favoritter')} />
+        </>);
+
+}
+
+export default PredefinedDatasourceViews;

browser/components/dataselector/ProjectList.js

@@ -0,0 +1,108 @@
+import { useState, useEffect } from 'react';
+import {connect} from 'react-redux'
+import ProjectsApi from '../../api/projects/ProjectsApi';
+import Title from '../shared/title/Title';
+import styled from "styled-components";
+import Grid from '@material-ui/core/Grid';
+import {DarkTheme} from '../../themes/DarkTheme';
+import {Align} from '../shared/constants/align';
+import Button from '../shared/button/Button';
+import ProjectListItem from './ProjectListItem';
+
+
+function ProjectList(props) {
+    const [projects, setProjects] = useState([]);
+    const [isLoading, setIsLoading] = useState(false);
+    const [hoveredItem, setHoveredItem] = useState();
+
+    const getProjectParameters = (project) => {
+        let parameters = [];
+        let queryParameters = props.urlparser.urlVars;
+        parameters.push(`state=${project.id}`);
+        let config = null;
+
+        if (project.snapshot && project.snapshot.meta) {
+            if (project.snapshot.meta.config) {
+                config = project.snapshot.meta.config;
+            }
+
+            if (project.snapshot.meta.tmpl) {
+                parameters.push(`tmpl=${project.snapshot.meta.tmpl}`);
+            }
+        }
+
+        if (!config && 'config' in queryParameters && queryParameters.config) {
+            // If config is present in project meta, use that.
+            // Else take it from queryparams.
+            config = queryParameters.config;
+        }
+
+        if (config) {
+            configParameter = `config=${highPriorityConfigString}`;
+            parameters.push(configParameter);
+        }
+        return parameters;
+
+    }
+
+    const getPermalinkForProject = (project) => {
+        let parameters = getProjectParameters(project);
+        let permalink = `${window.location.origin}${props.anchor.getUri()}?${parameters.join('&')}`;
+        return permalink;
+    }
+
+    const loadProjects = () => {
+        setIsLoading(true);
+        const projectsApi = new ProjectsApi();
+        projectsApi.getProjects().then((response) => {
+            response.json().then((results) => {
+                console.log(results);
+                results.map((project) => {
+                    project.permalink = getPermalinkForProject(project);
+                });
+                setProjects(results);
+                setIsLoading(false);
+            });
+        })
+    }
+
+    useEffect(() => {
+        loadProjects();
+    }, []);
+
+    return (<Root>
+        {props.authenticated ? null : <Title text={__('Sign in in order to access user projects')} level={5} color={DarkTheme.colors.headings} align={Align.Center} />}
+        {isLoading ? <Title text={__('Loading data...')} level={6} align='center' /> :
+            <div>
+                {projects.length > 0 ?
+                    <div>
+                        <Title text={__('My projects')} level={4} />
+                        <Grid container>
+                            <Grid container item xs={12}>
+                                {projects.map((project, index) => {
+                                        return <ProjectListItem project={project} {...props} key={index} />
+                                    }
+                                )}
+                            </Grid>
+                        </Grid>
+                    </div> :
+                    <Title text={__('No Local projects')} level={6} align={Align.Center} color={DarkTheme.colors.headings} />}
+            </div>
+        }
+    </Root>)
+
+}
+
+const Root = styled.div`
+    margin-top: ${props => props.theme.layout.gutter/2}px;
+    margin-bottom: ${props => props.theme.layout.gutter*2}px;
+`;
+
+const mapStateToProps = state => ({
+    authenticated: state.global.authenticated
+});
+
+const mapDispatchToProps = dispatch => ({
+});
+
+export default connect(mapStateToProps, mapDispatchToProps)(ProjectList);