|
1 | 1 | <!DOCTYPE html>
|
2 | 2 | <html>
|
3 | 3 | <head>
|
| 4 | + <title>OTP GraphQL Explorer</title> |
4 | 5 | <style>
|
5 | 6 | body {
|
6 |
| - height: 100%; |
7 | 7 | margin: 0;
|
8 |
| - width: 100%; |
9 |
| - overflow: hidden; |
| 8 | + overflow: hidden; /* in Firefox */ |
10 | 9 | }
|
11 | 10 |
|
12 | 11 | #graphiql {
|
13 |
| - height: 100vh; |
| 12 | + height: 100dvh; |
| 13 | + } |
| 14 | + |
| 15 | + .loading { |
| 16 | + height: 100%; |
| 17 | + display: flex; |
| 18 | + align-items: center; |
| 19 | + justify-content: center; |
| 20 | + font-size: 4rem; |
14 | 21 | }
|
15 | 22 | </style>
|
| 23 | + <link rel=" stylesheet" href=" https://esm.sh/[email protected]/dist/style.css" /> |
16 | 24 |
|
17 |
| - <!-- |
18 |
| - This GraphiQL example depends on Promise and fetch, which are available in |
19 |
| - modern browsers, but can be "polyfilled" for older browsers. |
20 |
| - GraphiQL itself depends on React DOM. |
21 |
| - If you do not want to rely on a CDN, you can host these files locally or |
22 |
| - include them directly in your favored resource bundler. |
23 |
| - --> |
24 |
| - |
25 |
| - <script src=" https://cdn.jsdelivr.net/npm/[email protected]/umd/react.development.js" integrity=" sha256-hXNk4rmCMYQXAl+5tLg1XAn3X6RroL6T9SD3afZ1eng=" crossorigin=" anonymous" ></script> |
26 |
| - <script src=" https://cdn.jsdelivr.net/npm/[email protected]/umd/react-dom.development.js" integrity=" sha256-bRHakm3eFVwNh3OuDgW7ZGg/H0DU4etihxfdhJkXIoI=" crossorigin=" anonymous" ></script> |
27 |
| - |
28 |
| - <!-- |
29 |
| - These two files can be found in the npm module, however you may wish to |
30 |
| - copy them directly into your environment, or perhaps include them in your |
31 |
| - favored resource bundler. |
32 |
| - --> |
33 |
| - <link rel=" stylesheet" href=" https://cdn.jsdelivr.net/npm/[email protected]/graphiql.min.css" integrity=" sha256-sYaCR/jgUCzYaeWB9fPLVbM0hi5/UbHWy6zhEFm5rcI=" crossorigin=" anonymous" > |
34 |
| - <title>OTP GraphQL Explorer</title> |
35 |
| -</head> |
| 25 | + <!-- Note: the ?standalone flag bundles the module along with all of its `dependencies`, excluding `peerDependencies`, into a single JavaScript file. --> |
| 26 | + <script type="importmap"> |
| 27 | + { |
| 28 | + "imports": { |
| 29 | + "react": "https://esm.sh/[email protected]", |
| 30 | + "react/jsx-runtime": "https://esm.sh/[email protected]/jsx-runtime", |
36 | 31 |
|
37 |
| -<body> |
38 |
| -<div id="graphiql">Loading...</div> |
| 32 | + "react-dom": "https://esm.sh/[email protected]", |
| 33 | + "react-dom/client": "https://esm.sh/[email protected]/client", |
39 | 34 |
|
40 |
| -<script src=" https://cdn.jsdelivr.net/npm/[email protected]/graphiql.min.js" integrity=" sha256-IvqrlAZ7aV5feVlhn75obrzIlVACoMl9mGvLukrUvCw=" crossorigin=" anonymous" ></script> |
| 35 | + "graphiql": "https://esm.sh/[email protected]?standalone&external=react,react/jsx-runtime,react-dom,@graphiql/react", |
| 36 | + "@graphiql/react": "https://esm.sh/@graphiql/[email protected]?standalone&external=react,react/jsx-runtime,react-dom,graphql", |
41 | 37 |
|
42 |
| -<script> |
43 |
| - const gtfsExampleQuery = ` |
| 38 | + "graphql": "https://esm.sh/[email protected]" |
| 39 | + } |
| 40 | + } |
| 41 | + </script> |
| 42 | + |
| 43 | + <script type="module"> |
| 44 | + // Import React and ReactDOM |
| 45 | + import React from 'react'; |
| 46 | + import ReactDOM from 'react-dom/client'; |
| 47 | + // Import GraphiQL and the Explorer plugin |
| 48 | + import { GraphiQL } from 'graphiql'; |
| 49 | + |
| 50 | + const gtfsExampleQuery = ` |
44 | 51 | # This is an example query for fetching all routes of your OTP deployment.
|
45 | 52 | # Click on the documentation icon on the left to read about the available types
|
46 | 53 | # or use autocomplete to explore the schema.
|
|
51 | 58 | }
|
52 | 59 | }
|
53 | 60 | `;
|
54 |
| - const transmodelExampleQuery = ` |
| 61 | + const transmodelExampleQuery = ` |
55 | 62 | # This is an example query for fetching the OTP version and a trip. Change the
|
56 | 63 | # coordinates to fit your OTP deployment.
|
57 | 64 | query TransmodelExampleQuery {
|
|
86 | 93 | }
|
87 | 94 | `
|
88 | 95 |
|
89 |
| - // Parse the search string to get url parameters. |
90 |
| - var search = window.location.search; |
91 |
| - var parameters = {}; |
92 |
| - search |
93 |
| - .substr(1) |
94 |
| - .split('&') |
95 |
| - .forEach(function(entry) { |
96 |
| - var eq = entry.indexOf('='); |
97 |
| - if (eq >= 0) { |
98 |
| - parameters[decodeURIComponent(entry.slice(0, eq))] = decodeURIComponent( |
99 |
| - entry.slice(eq + 1), |
100 |
| - ); |
101 |
| - } |
102 |
| - }); |
103 |
| - |
104 |
| - // If variables was provided, try to format it. |
105 |
| - if (parameters.variables) { |
106 |
| - try { |
107 |
| - parameters.variables = JSON.stringify( |
108 |
| - JSON.parse(parameters.variables), |
109 |
| - null, |
110 |
| - 2, |
111 |
| - ); |
112 |
| - } catch (e) { |
113 |
| - // Do nothing, we want to display the invalid JSON as a string, rather |
114 |
| - // than present an error. |
| 96 | + // Parse the search string to get url parameters. |
| 97 | + var search = window.location.search; |
| 98 | + var parameters = {}; |
| 99 | + search |
| 100 | + .substr(1) |
| 101 | + .split('&') |
| 102 | + .forEach(function(entry) { |
| 103 | + var eq = entry.indexOf('='); |
| 104 | + if (eq >= 0) { |
| 105 | + parameters[decodeURIComponent(entry.slice(0, eq))] = decodeURIComponent( |
| 106 | + entry.slice(eq + 1), |
| 107 | + ); |
| 108 | + } |
| 109 | + }); |
| 110 | + |
| 111 | + // If variables was provided, try to format it. |
| 112 | + if (parameters.variables) { |
| 113 | + try { |
| 114 | + parameters.variables = JSON.stringify( |
| 115 | + JSON.parse(parameters.variables), |
| 116 | + null, |
| 117 | + 2, |
| 118 | + ); |
| 119 | + } catch (e) { |
| 120 | + // Do nothing, we want to display the invalid JSON as a string, rather |
| 121 | + // than present an error. |
| 122 | + } |
115 | 123 | }
|
116 |
| - } |
117 | 124 |
|
118 |
| - // When the query and variables string is edited, update the URL bar so |
119 |
| - // that it can be easily shared. |
120 |
| - function onEditQuery(newQuery) { |
121 |
| - parameters.query = newQuery; |
122 |
| - updateURL(); |
123 |
| - } |
| 125 | + // When the query and variables string is edited, update the URL bar so |
| 126 | + // that it can be easily shared. |
| 127 | + function onEditQuery(newQuery) { |
| 128 | + parameters.query = newQuery; |
| 129 | + updateURL(); |
| 130 | + } |
124 | 131 |
|
125 |
| - function onEditVariables(newVariables) { |
126 |
| - parameters.variables = newVariables; |
127 |
| - updateURL(); |
128 |
| - } |
| 132 | + function onEditVariables(newVariables) { |
| 133 | + parameters.variables = newVariables; |
| 134 | + updateURL(); |
| 135 | + } |
129 | 136 |
|
130 |
| - function onEditOperationName(newOperationName) { |
131 |
| - parameters.operationName = newOperationName; |
132 |
| - updateURL(); |
133 |
| - } |
| 137 | + function onEditHeaders(headers) { |
| 138 | + parameters.headers = headers; |
| 139 | + updateURL(); |
| 140 | + } |
134 | 141 |
|
135 |
| - function onEditHeaders(headers) { |
136 |
| - parameters.headers = headers; |
137 |
| - updateURL(); |
138 |
| - } |
| 142 | + function updateURL() { |
| 143 | + if(parameters["query"] !== gtfsExampleQuery && parameters["query"] !== transmodelExampleQuery) { |
| 144 | + |
| 145 | + var newSearch = |
| 146 | + '?' + |
| 147 | + Object.keys(parameters) |
| 148 | + .filter(function(key) { |
| 149 | + return Boolean(parameters[key]); |
| 150 | + }) |
| 151 | + .map(function(key) { |
| 152 | + return ( |
| 153 | + encodeURIComponent(key) + '=' + encodeURIComponent(parameters[key]) |
| 154 | + ); |
| 155 | + }) |
| 156 | + .join('&'); |
| 157 | + history.replaceState(null, null, newSearch); |
| 158 | + } |
| 159 | + } |
139 | 160 |
|
140 |
| - function updateURL() { |
141 |
| - if(parameters["query"] !== gtfsExampleQuery && parameters["query"] !== transmodelExampleQuery) { |
142 |
| - |
143 |
| - var newSearch = |
144 |
| - '?' + |
145 |
| - Object.keys(parameters) |
146 |
| - .filter(function(key) { |
147 |
| - return Boolean(parameters[key]); |
148 |
| - }) |
149 |
| - .map(function(key) { |
150 |
| - return ( |
151 |
| - encodeURIComponent(key) + '=' + encodeURIComponent(parameters[key]) |
152 |
| - ); |
153 |
| - }) |
154 |
| - .join('&'); |
155 |
| - history.replaceState(null, null, newSearch); |
| 161 | + let apiFlavor = parameters.flavor || "gtfs"; |
| 162 | + let urls = { |
| 163 | + gtfs: '/otp/gtfs/v1', |
| 164 | + transmodel: '/otp/transmodel/v3' |
156 | 165 | }
|
157 |
| - } |
158 | 166 |
|
159 |
| - let apiFlavor = parameters.flavor || "gtfs"; |
160 |
| - let urls = { |
161 |
| - gtfs: '/otp/gtfs/v1', |
162 |
| - transmodel: '/otp/transmodel/v3' |
163 |
| - } |
| 167 | + let defaultQueries = { |
| 168 | + gtfs: gtfsExampleQuery, |
| 169 | + transmodel: transmodelExampleQuery |
| 170 | + } |
164 | 171 |
|
165 |
| - let defaultQueries = { |
166 |
| - gtfs: gtfsExampleQuery, |
167 |
| - transmodel: transmodelExampleQuery |
168 |
| - } |
| 172 | + let updateFlavor = (e) => { |
| 173 | + apiFlavor = e.target.value; |
| 174 | + console.log(`Setting API flavor to '${apiFlavor}'`); |
| 175 | + history.pushState(null, null, `?flavor=${apiFlavor}`); |
| 176 | + window.location.reload(); |
| 177 | + }; |
| 178 | + |
| 179 | + function graphQLFetcher(query, { headers }) { |
| 180 | + const defaultHeaders = { |
| 181 | + Accept: 'application/json', |
| 182 | + 'Content-Type': 'application/json', |
| 183 | + } |
| 184 | + const mergedHeaders = Object.assign({}, defaultHeaders, headers); |
| 185 | + return fetch( |
| 186 | + urls[apiFlavor], |
| 187 | + { |
| 188 | + method: 'post', |
| 189 | + headers: mergedHeaders, |
| 190 | + body: JSON.stringify(query), |
| 191 | + credentials: 'omit', |
| 192 | + }, |
| 193 | + ).then(function (response) { |
| 194 | + return response.json().catch(function () { |
| 195 | + return response.text(); |
| 196 | + }); |
| 197 | + }); |
| 198 | + } |
169 | 199 |
|
170 |
| - let updateFlavor = (e) => { |
171 |
| - apiFlavor = e.target.value; |
172 |
| - console.log(`Setting API flavor to '${apiFlavor}'`); |
173 |
| - history.pushState(null, null, `?flavor=${apiFlavor}`); |
174 |
| - window.location.reload(); |
175 |
| - }; |
176 |
| - |
177 |
| - function graphQLFetcher(query, { headers }) { |
178 |
| - const defaultHeaders = { |
179 |
| - Accept: 'application/json', |
180 |
| - 'Content-Type': 'application/json', |
181 |
| - } |
182 |
| - const mergedHeaders = Object.assign({}, defaultHeaders, headers); |
183 |
| - return fetch( |
184 |
| - urls[apiFlavor], |
185 |
| - { |
186 |
| - method: 'post', |
187 |
| - headers: mergedHeaders, |
188 |
| - body: JSON.stringify(query), |
189 |
| - credentials: 'omit', |
| 200 | + const header = React.createElement("a", { className: "graphiql-logo-link" }, "OTP GraphQL Explorer "); |
| 201 | + const select = React.createElement("select", { onChange: updateFlavor, value: apiFlavor }, [ |
| 202 | + React.createElement("option", { key: "gtfs", value: "gtfs" }, "GTFS"), |
| 203 | + React.createElement("option", { key: "transmodel", value: "transmodel" }, "Transmodel") |
| 204 | + ]); |
| 205 | + |
| 206 | + var graphiql = React.createElement(GraphiQL, { |
| 207 | + fetcher: graphQLFetcher, |
| 208 | + defaultVariableEditorOpen: true, |
| 209 | + query: parameters.query || defaultQueries[apiFlavor], |
| 210 | + variables: parameters.variables, |
| 211 | + headers: parameters.headers, |
| 212 | + onEditQuery: onEditQuery, |
| 213 | + onEditVariables: onEditVariables, |
| 214 | + onEditHeaders: onEditHeaders, |
| 215 | + defaultEditorToolsVisibility: true |
190 | 216 | },
|
191 |
| - ).then(function (response) { |
192 |
| - return response.json().catch(function () { |
193 |
| - return response.text(); |
194 |
| - }); |
195 |
| - }); |
196 |
| - } |
| 217 | + React.createElement(GraphiQL.Logo, {}, [header, select])); |
| 218 | + |
| 219 | + function App() { |
| 220 | + return graphiql; |
| 221 | + } |
| 222 | + |
| 223 | + const container = document.getElementById('graphiql'); |
| 224 | + const root = ReactDOM.createRoot(container); |
| 225 | + root.render(React.createElement(App)); |
| 226 | + </script> |
| 227 | +</head> |
| 228 | + |
| 229 | +<body> |
| 230 | +<div id="graphiql">Loading...</div> |
| 231 | + |
| 232 | + |
| 233 | +<script> |
197 | 234 |
|
198 |
| - const header = React.createElement("a", { className: "graphiql-logo-link" }, "OTP GraphQL Explorer "); |
199 |
| - const select = React.createElement("select", { onChange: updateFlavor, value: apiFlavor }, [ |
200 |
| - React.createElement("option", { key: "gtfs", value: "gtfs" }, "GTFS"), |
201 |
| - React.createElement("option", { key: "transmodel", value: "transmodel" }, "Transmodel") |
202 |
| - ]); |
203 |
| - |
204 |
| - var graphiql = React.createElement(GraphiQL, { |
205 |
| - fetcher: graphQLFetcher, |
206 |
| - defaultVariableEditorOpen: true, |
207 |
| - query: parameters.query || defaultQueries[apiFlavor], |
208 |
| - variables: parameters.variables, |
209 |
| - headers: parameters.headers, |
210 |
| - operationName: parameters.operationName, |
211 |
| - onEditQuery: onEditQuery, |
212 |
| - onEditVariables: onEditVariables, |
213 |
| - onEditOperationName: onEditOperationName, |
214 |
| - onEditHeaders: onEditHeaders, |
215 |
| - defaultEditorToolsVisibility: true |
216 |
| - }, |
217 |
| - React.createElement(GraphiQL.Logo, {}, [header, select])); |
218 |
| - ReactDOM.render(graphiql, document.getElementById('graphiql')); |
219 | 235 | </script>
|
220 | 236 | </body>
|
221 | 237 | </html>
|
0 commit comments