mobility-toolbox-js 2.0.0-beta.8 → 2.0.1-beta.13

package/src/doc/components/Example.js

@@ -1,153 +0,0 @@
-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

@@ -1,183 +0,0 @@
-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

@@ -1,106 +0,0 @@
-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

@@ -1,38 +0,0 @@
-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

@@ -1,11 +0,0 @@
-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

@@ -1,105 +0,0 @@
-<?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>