mobility-toolbox-js 2.0.0-beta.2 → 2.0.0-beta.8

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;

package/src/doc/examples/assets/tralis-live-map/index.js

@@ -0,0 +1,11 @@
+import S1 from './s1kreis.svg';
+import S20 from './s20kreis.svg';
+import S2 from './s2kreis.svg';
+import S3 from './s3kreis.svg';
+import S4 from './s4kreis.svg';
+import S6 from './s6kreis.svg';
+import S7 from './s7kreis.svg';
+import S8 from './s8kreis.svg';
+import unknown from './unknown.svg';
+
+export default { S1, S20, S2, S3, S4, S6, S7, S8, unknown };

package/src/doc/examples/assets/tralis-live-map/s1kreis.svg

@@ -0,0 +1,105 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="25"
+   height="24.999998"
+   viewBox="0 0 25 24.999998"
+   version="1.1"
+   id="svg10"
+   sodipodi:docname="s1kreis.svg"
+   inkscape:version="1.0.2 (e86c870879, 2021-01-15, custom)">
+  <metadata
+     id="metadata16">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <defs
+     id="defs14" />
+  <sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="2149"
+     inkscape:window-height="1712"
+     id="namedview12"
+     showgrid="false"
+     fit-margin-top="0"
+     fit-margin-left="0"
+     fit-margin-right="0"
+     fit-margin-bottom="0"
+     lock-margins="true"
+     inkscape:zoom="3.9126575"
+     inkscape:cx="54.716242"
+     inkscape:cy="165.95994"
+     inkscape:window-x="2391"
+     inkscape:window-y="0"
+     inkscape:window-maximized="0"
+     inkscape:current-layer="Gruppe_143" />
+  <rect
+     id="Rechteck_33"
+     data-name="Rechteck 33"
+     width="150"
+     height="150"
+     fill="none"
+     x="-36.299999"
+     y="-36.299999" />
+  <g
+     id="Gruppe_143"
+     data-name="Gruppe 143"
+     opacity="0.85"
+     transform="translate(-36.3,-36.3)">
+    <circle
+       id="Ellipse_17"
+       data-name="Ellipse 17"
+       cx="48.799999"
+       cy="48.799999"
+       r="12.499999"
+       fill="#00b6e2"
+       style="stroke-width: 0.322997;" />
+    <rect
+       id="Rechteck_43"
+       data-name="Rechteck 43"
+       width="150"
+       height="150"
+       transform="translate(-1,3)"
+       fill="none"
+       x="0"
+       y="0" />
+  </g>
+  <path
+     id="Pfad_473"
+     data-name="Pfad 473"
+     d="m 3.8435878,14.696072 h 2.196336 c 0.1937943,1.324261 0.8397756,1.808747 2.4547286,1.808747 1.1304671,0 2.0994386,-0.387588 2.0994386,-1.421158 0,-1.03357 -1.0335697,-1.227364 -2.6485227,-1.614953 -1.9056445,-0.484486 -3.7143918,-0.936672 -3.7143918,-3.229906 0,-2.1963362 1.7118502,-3.2299061 4.1665787,-3.2299061 2.4547288,0 4.0050838,1.2273643 4.1665788,3.4237001 H 10.464895 C 10.367998,9.3021292 9.5282222,8.8176433 8.3654562,8.8176433 c -1.1627662,0 -2.0025418,0.4844859 -2.0025418,1.2273637 0,0.839776 0.7751774,1.130467 2.3901305,1.518056 2.2932331,0.484486 4.0696821,1.03357 4.0696821,3.326804 0,2.196336 -1.808748,3.4237 -4.2634765,3.4237 -3.0038126,-0.0323 -4.6187655,-1.35656 -4.7156627,-3.617495 z"
+     fill="#ffffff"
+     style="stroke-width: 0.32299;" />
+  <path
+     id="Pfad_474"
+     data-name="Pfad 474"
+     d="M 17.409193,10.594091 H 15.148259 V 9.4636244 c 1.130467,0 2.260934,-0.3875887 2.648523,-1.9056445 h 1.905645 V 18.152072 h -2.260935 z"
+     fill="#ffffff"
+     style="stroke-width: 0.32299;" />
+  <path
+     id="Pfad_472"
+     data-name="Pfad 472"
+     d="M 12.499736,1.5180558 A 10.557917,10.557917 0 0 1 23.093828,12.039797 v 0.07235 c 0,5.684635 -4.909458,10.981681 -10.594092,10.981681 -5.6846348,0 -10.5940917,-4.909458 -10.5940917,-10.981681 v 0 A 10.578265,10.578265 0 0 1 12.467437,1.5180558 h 0.0323 M 12.499737,0 a 12.499736,12.499736 0 1 0 12.499736,12.499736 v 0 A 12.386043,12.386043 0 0 0 12.728413,0 Z"
+     fill="#00b6e2"
+     style="stroke-width: 0.32299;" />
+</svg>