mobility-web-component/search.html at main · geops/mobility-web-component · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Mobility Web Component</title>
    <link rel="icon" type="image/x-icon" href="favicon.ico" />
    <meta
      name="viewport"
      content="initial-scale=1,maximum-scale=1,user-scalable=no"
    />
    <script type="text/javascript">
      if (/localhost/.test(window.location.hostname)) {
        new EventSource("/esbuild").addEventListener("change", () => {
          location.reload();
        });
      }
    </script>
    <script type="module" src="./index.js"></script>
    <script type="module" src="./indexDoc.js"></script>
    <script src="./docutils.js"></script>
    <link rel="stylesheet" type="text/css" href="./output.css" />
    <style>
      ::-webkit-scrollbar {
        width: 3px;
        height: 3px;
      }

      a {
        text-decoration: underline;
      }
    </style>
  </head>

  <body class="p-8">
    <!-- tailwind hack to add class used in docutils -->
    <div
      class="flex w-full table-auto gap-4 border bg-black pt-2 mt-2 px-4 py-2 text-white hover:bg-gray-700"
      style="display: none"
    ></div>
    <div
      id="doc"
      style="display: none"
      class="mx-auto h-96 max-w-3xl space-y-4"
    >
      <h1 class="text-3xl font-bold">Mobility Search Web Component</h1>
      <p>This is a demo of the geOps Mobility Search Web Component.</p>
      <p>This web component launches a search on the <b>geOps Stops API</b></p>
      <p>Every parameters of the <b>geOps Stops API</b>:</p>
      <ul class="pl-8">
        <li class="list-disc">
          can be passed as a string attribute of the web component.
        </li>
        <li class="list-disc">
          can be passed as an URL parameter of this page, they will be
          automatically apply to the web component.
        </li>
      </ul>
      <p>
        The list of parameters of the <b>geOps Stops API</b> can be found
        <a
          href="https://developer.geops.io/apis/stops#parameters"
          target="_blank"
          >here</a
        >.
      </p>

      <h2 class="text-xl font-bold">Usage example</h2>
      <pre id="code" class="rounded bg-slate-800 p-4 text-slate-200"></pre>

      <geops-mobility-search
        id="search"
        class="block max-w-3xl border"
        limit="5"
        mots="rail,bus"
      ></geops-mobility-search>

      <div id="attributesDoc" class="space-y-4">
        <h2 class="text-xl font-bold">Attributes</h2>
        <div id="attributes"></div>
      </div>
      <div id="eventsDoc" class="space-y-4">
        <h2 class="text-xl font-bold">Events</h2>
        <pre class="rounded bg-slate-800 p-4 text-slate-200">
document.getElementById('search').addEventListener('mwc:attribute', (event) => {
  console.log('Display last data received:', event.data);
});
</pre
        >
        <div id="events"></div>
      </div>
      <br />
      <br />
      <h1 class="text-xl font-bold">More mobility web components</h1>
      <p>
        <a href="index.html" target="_blank"
          >&gt;&gt; Usage example Map Component
        </a>
      </p>
      <br />
      <br />
    </div>
    <br />
    <br />
    <script type="text/javascript">
      const pkgSrc = "https://www.unpkg.com/@geops/mobility-web-component";
      const wc = document.querySelector("geops-mobility-search");

      window.addEventListener("load", () => {
        const attributes = window.MobilitySearchAttributes;
        const events = window.MobilitySearchEvents;
        const descriptionByEvent = {
          "mwc:stopssearchselect":
            "Only when search attribute is 'true'. Event fired when a stop is selected in the stops search results. The event data contains the selected stop.",
          "mwc:attribute":
            "Event fired when an web component's attribute is changed. The event data contains the list of all attributes and their values.",
        };

        onLoad(wc, attributes, events, pkgSrc);
      });
    </script>
  </body>
</html>