mobility-toolbox-js 2.0.0-beta.3 → 2.0.0-beta.6

package/src/doc/components/Example.js

@@ -0,0 +1,153 @@
+import React, { useState, useEffect } from 'react';
+import { Grid, Paper, Typography } from '@material-ui/core';
+import { makeStyles } from '@material-ui/core/styles';
+import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
+import { useParams } from 'react-router-dom';
+import Markdown from 'react-markdown';
+import CodeSandboxButton from './CodeSandboxButton';
+import EXAMPLES from '../examples';
+
+const useStyles = makeStyles((theme) => ({
+  root: {
+    padding: 12,
+  },
+  htmlContainer: {
+    height: 500,
+  },
+  noPointer: {
+    // Remove pointer events for mobile devices on load
+    [theme.breakpoints.down('xs')]: {
+      pointerEvents: 'none',
+    },
+  },
+  paper: {
+    position: 'relative',
+    margin: '20px 0',
+  },
+  fileName: {
+    padding: '10px 0 5px 15px',
+  },
+  editButton: {
+    position: 'absolute',
+    right: 0,
+    top: 0,
+    paddingTop: 5,
+    paddingRight: 10,
+  },
+  readme: {
+    '& p': {
+      fontSize: 18,
+    },
+  },
+}));
+
+function Example() {
+  const classes = useStyles();
+  const { exampleKey } = useParams((params) => params);
+  const example = EXAMPLES.find((e) => e.key === exampleKey);
+  const [html, setHtml] = useState();
+  const [js, setJs] = useState();
+  const [readme, setReadme] = useState();
+  const [isNavigable, setIsNavigable] = useState(false);
+  const htmlFileName =
+    (example.files && example.files.html) || `${exampleKey}.html`;
+  const readmeFileName =
+    (example.files && example.files.readme) || `${exampleKey}.md`;
+  const jsFileName = (example.files && example.files.js) || `${exampleKey}.js`;
+
+  useEffect(() => {
+    import(`../examples/${htmlFileName}`).then((h) => {
+      // Clean the html loaded by the previous example
+      setHtml(null);
+      // Load the new html
+      setHtml(h.default);
+
+      // const filePath = `../examples/${example.files.js}?dfdf=ocr`;
+      // We use this to avoid cache and re-execute the code of the module.
+      import(`../examples/${jsFileName}?`).then((module) => {
+        module.default();
+
+        fetch(`../examples/${jsFileName}`)
+          .then((res) => res.text())
+          .then((jsCode) => {
+            // Replace relative import by library import
+            setJs(
+              jsCode
+                .replace(/'\.\.\/\.\.\//gm, "'mobility-toolbox-js/")
+                .replace('export default () => {\n', '')
+                .replace(/^};\n$/gm, '')
+                .replace(/^ {2}/gm, ''),
+            );
+          });
+      });
+
+      fetch(`../examples/${readmeFileName}`)
+        .then((res) => res.status === 200 && res.text())
+        .then((md) => setReadme(md))
+        .catch(() => setReadme(''));
+    });
+  }, [example, htmlFileName, jsFileName, readmeFileName]);
+
+  return (
+    <div style={{ margin: 'auto', marginTop: 30 }}>
+      <Grid container direction="column" spacing={3}>
+        <Grid item xs={12}>
+          <Typography variant="h1" className="headline">
+            {example.name}
+          </Typography>
+          <Markdown className={classes.readme}>
+            {example.description || ''}
+          </Markdown>
+          <Markdown className={classes.readme}>{readme || ''}</Markdown>
+        </Grid>
+        <Grid item xs={12}>
+          <Paper className={classes.paper} onClick={() => setIsNavigable(true)}>
+            <div
+              className={`${classes.htmlContainer} ${
+                isNavigable ? '' : classes.noPointer
+              }`}
+              // eslint-disable-next-line react/no-danger
+              dangerouslySetInnerHTML={{ __html: html }}
+            />
+          </Paper>
+        </Grid>
+        {js && html ? (
+          <>
+            <Grid item xs={12}>
+              <Paper className={classes.paper}>
+                <Typography className={classes.fileName}>
+                  {jsFileName}
+                </Typography>
+                <SyntaxHighlighter language="javascript">
+                  {js}
+                </SyntaxHighlighter>
+                <CodeSandboxButton
+                  className={classes.editButton}
+                  extraFiles={example.extraFiles || {}}
+                  html={html}
+                  js={js}
+                />
+              </Paper>
+            </Grid>
+            <Grid item xs={12}>
+              <Paper className={classes.paper}>
+                <Typography className={classes.fileName}>
+                  {htmlFileName}
+                </Typography>
+                <SyntaxHighlighter language="html">{html}</SyntaxHighlighter>
+                <CodeSandboxButton
+                  className={classes.editButton}
+                  html={html}
+                  js={js}
+                  extraFiles={{}}
+                />
+              </Paper>
+            </Grid>
+          </>
+        ) : null}
+      </Grid>
+    </div>
+  );
+}
+
+export default React.memo(Example);

package/src/doc/components/Examples.js

@@ -0,0 +1,183 @@
+import React, { useState } from 'react';
+import Grid from '@material-ui/core/Grid';
+import MuiCard from '@material-ui/core/Card';
+import MuiCardMedia from '@material-ui/core/CardMedia';
+import CardContent from '@material-ui/core/CardContent';
+import CardActions from '@material-ui/core/CardActions';
+import Icon from '@material-ui/core/Icon';
+import Box from '@material-ui/core/Box';
+import Typography from '@material-ui/core/Typography';
+import { makeStyles, withStyles } from '@material-ui/core/styles';
+import { CgArrowRight } from 'react-icons/cg';
+import TextField from '@material-ui/core/TextField';
+import Markdown from 'react-markdown';
+import EXAMPLES from '../examples';
+
+const Card = withStyles({
+  root: {
+    display: 'flex',
+    flexDirection: 'column',
+    height: '100%',
+    width: '100%',
+    boxShadow: 'none',
+  },
+})(MuiCard);
+
+const CardMedia = withStyles({
+  root: {
+    paddingTop: '56.25%',
+  },
+})(MuiCardMedia);
+
+const useStyles = makeStyles((theme) => ({
+  root: {
+    width: '100%',
+    padding: theme.spacing(2),
+  },
+  filterField: {
+    width: '100%',
+  },
+  example: {
+    '&.MuiGrid-item': {
+      padding: '0 !important',
+    },
+  },
+  exampleLink: {
+    height: '100%',
+    width: '100%',
+  },
+  container: {
+    display: 'flex',
+    flexDirection: 'column',
+    justifyContent: 'space-between',
+    height: '100%',
+  },
+  header: {
+    marginBottom: 40,
+  },
+  cardWrapper: {
+    position: 'relative',
+    height: '100%',
+    width: '100%',
+    '& .MuiIcon-root': {
+      width: 30,
+      height: 30,
+      '& svg': {
+        height: '100%',
+        width: '100%',
+      },
+      margin: 35,
+      transition: 'margin-left 500ms ease, color 800ms ease',
+    },
+    '&:hover': {
+      '& .MuiIcon-root': {
+        marginLeft: 60,
+        color: theme.colors.primaryGreen,
+      },
+    },
+  },
+  cardOverlay: {
+    position: 'absolute',
+    display: 'flex',
+    alignItems: 'center',
+    height: '100%',
+    width: '100%',
+    boxSizing: 'border-box',
+    boxShadow:
+      'inset 0px 1px 3px 0px rgba(0, 0, 0, 0.12), inset 0px -1px 1px 0px rgba(0, 0, 0, 0.14)',
+    border: '15px solid white',
+    transition: 'border 500ms ease',
+    '&:hover': {
+      border: '5px solid white',
+    },
+  },
+}));
+
+const filterExamples = (str, examples) => {
+  const qry = str.toLowerCase();
+  return examples.filter(
+    (ex) =>
+      `${ex.name}`.toLowerCase().includes(qry) ||
+      (ex.tags || []).find((tag) => tag.toLowerCase().includes(qry)),
+  );
+};
+
+// Get the public api key
+fetch('https://backend.developer.geops.io/publickey')
+  .then((response) => response.json())
+  .then((data) => {
+    if (data && data.success) {
+      window.apiKey = data.key;
+    }
+  });
+
+function Examples() {
+  const classes = useStyles();
+  const [filter, setFilter] = useState('');
+  const [raisedExampe, setRaisedExample] = useState(null);
+  const filteredExamples = filterExamples(filter, EXAMPLES);
+
+  return (
+    <Grid container spacing={3}>
+      <Grid item xs={12} className={classes.filterField}>
+        <Typography variant="h1" className={classes.header}>
+          Examples
+        </Typography>
+        <TextField
+          placeholder="Filter..."
+          value={filter}
+          onChange={(e) => setFilter(e.target.value)}
+        />
+      </Grid>
+      {!filteredExamples.length && (
+        <Grid item xs={12}>
+          Nothing found.
+        </Grid>
+      )}
+      {filteredExamples.map((ex) => (
+        <Grid
+          item
+          xs={12}
+          sm={6}
+          lg={4}
+          container
+          className={classes.example}
+          key={ex.key}
+        >
+          <a href={`/example/${ex.key}`} className={classes.exampleLink}>
+            <div className={classes.cardWrapper}>
+              <div className={classes.cardOverlay} />
+              <Card
+                raised={ex === raisedExampe}
+                className={classes.card}
+                onMouseOver={() => setRaisedExample(ex)}
+                onMouseOut={() => setRaisedExample(null)}
+                onFocus={() => setRaisedExample(ex)}
+                onBlur={() => setRaisedExample(null)}
+              >
+                <CardMedia image={ex.img} />
+                <Box className={classes.container}>
+                  <CardContent className={classes.cardContent}>
+                    <Typography variant="h3">{ex.name}</Typography>
+                    <Typography>
+                      <Markdown className={classes.readme}>
+                        {ex.description || ''}
+                      </Markdown>
+                    </Typography>
+                  </CardContent>
+                  <CardActions>
+                    <Icon>
+                      <CgArrowRight />
+                    </Icon>
+                  </CardActions>
+                </Box>
+              </Card>
+            </div>
+          </a>
+        </Grid>
+      ))}
+    </Grid>
+  );
+}
+
+export default Examples;

package/src/doc/components/Home.js

@@ -0,0 +1,106 @@
+import React, { useState, useEffect } from 'react';
+import Markdown from 'react-markdown';
+import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
+import Typography from '@material-ui/core/Typography';
+import TrackerExample from './TrackerExample';
+
+const codeHtmlPage = `
+<html>
+  <head>
+    <title>Realtime map</title>
+  </head>
+  <body>
+    <div id="map" style="height: 300px; width: 100%" />
+  </body>
+</html>
+`;
+
+const codeMapObject = `
+import { Map } from 'maplibre-gl;
+import { TralisLayer } from 'mobility-toolbox-js/mapbox';
+import 'maplibre-gl/dist/maplibre-gl.css';
+
+const map = new Map({
+  container: 'map',
+  style: 'https://maps.geops.io/styles/travic_v2/style.json?key=' + window.apiKey,
+  center: [7.4707, 46.95],
+  zoom: 12,
+});
+`;
+
+const codeTracker = `
+const tracker = new TralisLayer({
+  url: 'wss://api.geops.io/tracker-ws/v1/',
+  apiKey: window.apiKey,
+});
+
+tracker.init(map);
+`;
+
+function MarkdownHeading({ ...props }) {
+  // eslint-disable-next-line react/prop-types
+  const { level, children } = props;
+  return <Typography variant={`h${level}`}>{children}</Typography>;
+}
+
+function Home() {
+  const [source, setSource] = useState(null);
+  useEffect(() => {
+    fetch('../../../README.md')
+      .then((response) => response.text())
+      .then((text) => {
+        // only show the 'Documentation and examples' section on GitHub
+        const noDocText = text.split('## Documentation')[0];
+        setSource(noDocText);
+      });
+  }, []);
+
+  if (!source) {
+    return null;
+  }
+
+  const renderers = {
+    heading: MarkdownHeading,
+  };
+
+  return (
+    <>
+      <Markdown renderers={renderers}>{source}</Markdown>
+      <br />
+      <h2>Quick Start</h2>
+      <TrackerExample />
+      <p>
+        This example shows how to draw real time vehicle positions on a{' '}
+        <a
+          href="https://maplibre.org/maplibre-gl-js-docs/"
+          rel="noreferrer"
+          target="_blank"
+        >
+          Maplibre GL JS
+        </a>{' '}
+        map. Check out the{' '}
+        <a href="/example/ol-tracker">Live Tracker with OpenLayers</a> example
+        to see how to use{' '}
+        <a href="https://openlayers.org/" target="_blank" rel="noreferrer">
+          OpenLayers
+        </a>{' '}
+        instead.
+      </p>
+      <p>First, create a HTML page with an empty map container.</p>
+      <SyntaxHighlighter language="html" code={codeHtmlPage.trim()} />
+      <p>Create a Maplibre map.</p>
+      <SyntaxHighlighter language="js" code={codeMapObject.trim()} />
+      <p>
+        Finally, add the <i>TralisLayer</i> for rendering real time vehicle
+        positions from our Realtime API. For more information about the backend
+        and for obtaining the required API-Key, visit our Developer Portal at{' '}
+        <a target="_blank" rel="noreferrer" href="https://geops.io">
+          https://geops.io
+        </a>
+        .
+      </p>
+      <SyntaxHighlighter language="js" code={codeTracker.trim()} />
+    </>
+  );
+}
+export default Home;

package/src/doc/components/TrackerExample.js

@@ -0,0 +1,38 @@
+import React, { useEffect } from 'react';
+import { makeStyles } from '@material-ui/core/styles';
+import 'maplibre-gl/dist/maplibre-gl.css';
+import { Map } from 'maplibre-gl';
+import { TralisLayer } from '../../mapbox';
+
+const useStyles = makeStyles({
+  root: {
+    width: '100%',
+    height: 300,
+    pointerEvents: 'none',
+  },
+});
+
+function TrackerExample() {
+  const classes = useStyles();
+
+  useEffect(() => {
+    const map = new Map({
+      container: 'map',
+      style: `https://maps.geops.io/styles/travic_v2/style.json?key=${window.apiKey}`,
+      center: [7.4707, 46.95],
+      zoom: 12,
+    });
+
+    const tracker = new TralisLayer({
+      url: 'wss://api.geops.io/tracker-ws/v1/',
+      apiKey: window.apiKey,
+      isQueryable: false,
+    });
+
+    tracker.init(map);
+  }, []);
+
+  return <div id="map" className={classes.root} />;
+}
+
+export default TrackerExample;