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/projects/Projects.js

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

browser/components/DataSelectorDialogue.js

@@ -1,3 +1,4 @@
+import { useState } from 'react';
 import styled from "styled-components";
 import Title from './shared/title/Title';
 import CloseButton from './shared/button/CloseButton';
@@ -7,6 +8,11 @@ import Card from './shared/card/Card';
 import IconButton from './shared/button/IconButton';
 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 { Variants } from './shared/constants/variants';
+import { Size } from './shared/constants/size';
 import { hexToRgbA } from '../helpers/colors';
 
 const DataSources = [{ label: "Klima", value: "klima", group: "Klima"},
@@ -32,6 +38,7 @@ const Parameters = [
 
 
 function DataSelectorDialogue(props) {
+    const [showProjectsList, setShowProjectsList] = useState(false);
     console.log(props);
     return (
         <Root>
@@ -50,7 +57,7 @@ function DataSelectorDialogue(props) {
                 <IconButton icon="no3-solid" label={__('Nitrat')} />
                 <IconButton icon="water-drop-wifi-solid" label={__('Mine stationer')} />
                 <IconButton icon="lab-flask-experiment" label={__('Mine favoritter')} />
-                <Grid container spacing={32}>
+                {showProjectsList ? <ProjectList /> : <Grid container spacing={32}>
                     <Grid container item md={6}>
                         <Card>
                             <Title text={__('Datakilder')} level={3} />
@@ -63,7 +70,11 @@ function DataSelectorDialogue(props) {
                             <RadioButtonList listItems={Parameters} onChange={(selectedItem) => console.log(selectedItem)} />
                         </Card>
                     </Grid>
-                </Grid>
+                </Grid> }
+                <ButtonGroup align="center">
+                    <Button text={__("Abn eksisterende")} variant={Variants.None} onClick={() => setShowProjectsList(!showProjectsList)} size={Size.Large} />
+                    <Button text={__("Start")} variant={Variants.Primary} onClick={() => console.log("Button click star")} size={Size.Large} />
+                </ButtonGroup>
             </ModalBody>
         </Root>
     );

browser/components/ProjectList.js

@@ -0,0 +1,24 @@
+import { useState, useEffect } from 'react';
+import ProjectsApi from '../api/projects/Projects';
+
+
+function ProjectList(props) {
+    const [projects, setProjects] = useState([]);
+
+    const loadProjects = () => {
+        const projectsApi = new ProjectsApi();
+        projectsApi.getProjectsList().then((results) => {
+            console.log(results);
+            setProjects(results);
+        })
+    }
+
+    useEffect(() => {
+        loadProjects();
+    }, []);
+
+    return (<div>Loading data...</div>)
+
+}
+
+export default ProjectList

browser/components/shared/button/Button.js

@@ -1,19 +1,22 @@
 import styled, { css } from "styled-components";
-import { Variants } from "../../../constants";
+import { Variants } from "../constants/variants";
+import { Size } from '../constants/size';
 import PropTypes from 'prop-types';
 
 function Button(props) {
     return (
         <Root
             onClick={props.onClick ?? props.onClick}
-            variant={props.variant}>
+            variant={props.variant}
+            size={props.size}>
             {props.text}
         </Root>
     );
 }
 Button.propTypes = {
     text: PropTypes.string,
     variant: PropTypes.oneOf(Object.keys(Variants)),
+    size: PropTypes.oneOf(Object.keys(Size)),
     onClick: PropTypes.func.isRequired
 }
 
@@ -43,5 +46,19 @@ const Root = styled.button`
         };
         return styles[variant];
   }}
+  ${({ size, theme }) => {
+        const styles = {
+            [Size.Small]: css `
+                width: ${theme.layout.gutter * 10}px;
+            `,
+            [Size.Medium]: css `
+                width: ${theme.layout.gutter * 20}px;
+            `,
+            [Size.Large]: css `
+                width: ${theme.layout.gutter * 40}px;
+            `
+        };
+        return styles[size];
+  }}
 `
 export default Button;

browser/components/shared/button/ButtonGroup.js

@@ -0,0 +1,48 @@
+import styled, { css } from "styled-components";
+import { Align } from '../constants/align';
+import PropTypes from 'prop-types';
+
+function ButtonGroup(props) {
+    return (
+        <Root align={props.align}>
+            {props.children}
+        </Root>
+    );
+}
+ButtonGroup.propTypes = {
+    text: PropTypes.string,
+    align: PropTypes.string,
+}
+
+const Root = styled.div`
+    display: flex;
+    margin-top: ${props => props.theme.layout.gutter}px;
+    ${({ align, theme }) => {
+        const styles = {
+            [Align.LEFT]: css `
+                justify-content: start;
+                align-items: flex-start;
+                button {
+                    margin-right: ${theme.layout.gutter / 2}px;
+                }
+            `,
+            [Align.CENTER]: css`
+                justify-content: center;
+                align-items: center;
+                button {
+                  margin-left: ${theme.layout.gutter / 2};
+                  margin-right: ${theme.layout.gutter / 2};
+                }
+            `,
+            [Align.RIGHT]: css`
+                justify-content: flex-end,
+                align-items: flex-end,
+                button {
+                    marginLeft: ${theme.layout.gutter / 2}px;
+                }
+            `
+        }
+        return styles[align];
+    }}
+`
+export default ButtonGroup;

browser/components/shared/constants/align.js

@@ -0,0 +1,7 @@
+const Align = {
+    LEFT: 'left',
+    CENTER: 'center',
+    RIGHT: 'right'
+}
+
+export {Align};

browser/components/shared/constants/size.js

@@ -0,0 +1,9 @@
+const Size = {
+    Small: 'Small',
+    Medium: 'Medium',
+    Large: 'Large',
+};
+
+export {
+    Size,
+}

browser/index.js

@@ -830,7 +830,7 @@ module.exports = module.exports = {
         const introlModalPlaceholderId = `watsonc-intro-modal-placeholder`;
         if ($(`#${introlModalPlaceholderId}`).is(`:empty`)) {
             try {
-                /* ReactDOM.render(<Provider store={reduxStore}>
+                ReactDOM.render(<Provider store={reduxStore}>
                     <IntroModal
                         ref={inst => {
                             infoModalInstance = inst;
@@ -843,11 +843,7 @@ module.exports = module.exports = {
                         categories={categoriesOverall ? categoriesOverall : []}
                         onApply={_self.onApplyLayersAndChemical}
                         onClose={onCloseHandler}
-                    /></Provider>, document.getElementById(introlModalPlaceholderId)); */
-                ReactDOM.render(<ThemeProvider>
-                    <DataSelectorDialogue titleText={__('Welcome to Calypso')}
-                        onCloseButtonClick={onCloseHandler} />
-                    </ThemeProvider>, document.getElementById(introlModalPlaceholderId));
+                    /></Provider>, document.getElementById(introlModalPlaceholderId));
             } catch (e) {
                 console.error(e);
             }