-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
387 lines (354 loc) · 22.4 KB
/
index.html
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
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
<!--
Copyright 2022 European Union
Licensed under the EUPL, Version 1.2 or – as soon they will be approved by the European
Commission – subsequent versions of the EUPL (the "Licence"); You may not use this work except in
compliance with the Licence. You may obtain a copy of the Licence at:
https://joinup.ec.europa.eu/software/page/eupl
Unless required by applicable law or agreed to in writing, software distributed under the Licence
is distributed on an "AS IS" basis, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express
or implied. See the Licence for the specific language governing permissions and limitations under
the Licence
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>TED Open Data Service</title>
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom TED Branding -->
<link rel="stylesheet" href="src/assets/style.css">
<!-- Custom Styles -->
<link rel="stylesheet" href="src/assets/style.css">
<!-- Favicon (if applicable) -->
<link rel="icon" type="image/png" href="/path-to-ted-favicon.png">
<!-- CodeMirror CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.2/codemirror.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.2/theme/eclipse.min.css">
</head>
<body class="bg-light">
<!-- Header -->
<header class="navbar navbar-expand-lg navbar-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">
<img src="./src/assets/ted-logo.png" alt="TED - Publications Office of the EU" width="60"
class="d-inline-block align-middle mr-2"><span>TED Open Data Service</span>
</a>
<div class="d-flex align-items-center arrow">
<!-- not used for now -->
</div>
</div>
</header>
<nav>
<ul class="nav nav-tabs w-100 d-flex align-items-center" role="tablist">
<div style="width: 20px;"><!-- leaves some space before the first tab --></div>
<li class="nav-item" role="presentation">
<button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home-tab-content"
type="button" role="tab" aria-controls="home-tab-content" aria-selected="true">Home</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="query-library-tab" data-bs-toggle="tab" data-bs-target="#query-library"
type="button" role="tab" aria-controls="query-library" aria-selected="false">Query Library</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="query-editor-tab" data-bs-toggle="tab" data-bs-target="#query-editor"
type="button" role="tab" aria-controls="query-editor" aria-selected="false">Query Editor</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="query-results-tab" data-bs-toggle="tab" data-bs-target="#query-results"
type="button" role="tab" aria-controls="query-results" aria-selected="false">Query Results</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="help-tab" data-bs-toggle="tab" data-bs-target="#help" type="button" role="tab"
aria-controls="help" aria-selected="false">Help</button>
</li>
<li class="flex-grow-1"></li> <!-- Spacer -->
<div style="width: 20px;"></div> <!-- Right margin -->
</ul>
</nav>
<main class="tab-content h-100">
<!-- Home -->
<div class="tab-pane w-100 fade show active position-absolute" id="home-tab-content" role="tabpanel" aria-labelledby="home-tab">
<div class="alert alert-warning" role="alert"><b>Please note</b>: This is a pre-release version of the TED SPARQL Editor. Some features may not be fully functional.</div>
<div class="jumbotron">
<h1 class="display-4">TED Open Data</h1>
<p class="lead">Explore and download TED Open Data using SPARQL queries.</p>
<hr class="my-4">
<p>
The public procurement data collected by the Publications Office is available as Linked Open Data in the TED Open Data Service.
</p>
<p>
This tool allows you to explore and download TED Open Data using SPARQL queries.
You can use it to compose your queries, test them, and customise the dataset that you want to retrieve.
You can then use these queries to retrieve live data directly into your applications.
See the Help tab for more information or writing queries and examples on how to connect Excel and other applications with TED Open Data, for further analysis and reporting.
</p>
<p>
This application is developed by the Publications Office of the EU and is available as open
source on <a href="https://github.com/OP-TED/ted-sparql-editor">GitHub</a>.
We welcome your feedback, suggestions for improvement as well as your contributions to the project.
Visit our <a href="https://github.com/OP-TED/ted-open-data/discussions" target="_blank">GitHub Discussions</a> forum to share your ideas and feedback.
</p>
<button id="try-query-library" class="btn btn-primary">Try our query library</button>
<button id="start-tour" class="btn btn-primary">Write your own query</button>
</div>
</div> <!-- Close home-tab-content div -->
<!-- Query Library -->
<div class="tab-pane w-100 h-100 fade position-absolute" id="query-library" role="tabpanel" aria-labelledby="query-library-tab">
<div class="container-fluid h-100">
<div class="row h-100">
<div class="col-md-4 d-flex flex-column h-100">
<div class="accordion-container">
<div class="accordion accordion-flush flex-grow-1" id="queryAccordion">
<!-- Categories and queries will be populated here -->
</div>
</div>
</div>
<div class="col-md-8 d-flex flex-column">
<div id="selectQueryMessage" class="d-flex align-items-center justify-content-center flex-grow-1">
<p class="text-muted">Select a query from the available categories on the left.</p>
</div>
<div class="card flex-grow-1 border-0 m-0 p-0 d-none" id="queryCard">
<div class="card-body d-flex flex-column p-0">
<textarea id="querySparql" class="d-none"></textarea>
<div id="queryDetails" class="p-3">
<h5 id="queryTitle" class="mt-3">Query Title</h5>
<p id="queryDescription">Select a query to see its description.</p>
<div class="d-flex justify-content-end">
<button id="tryQueryButton" class="btn btn-primary mt-3" disabled>Try this query</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div> <!-- Close query-library div -->
<!-- Main Container -->
<div class="tab-pane w-100 fade position-absolute" id="query-editor" role="tabpanel" aria-labelledby="query-editor-tab">
<!-- Error Alert -->
<div id="syntax-error-alert" class="alert alert-danger" role="alert" style="display: none;"></div>
<!-- Query Form -->
<form id="queryForm" class="d-flex flex-column h-100">
<div class="mb-3 flex-grow-1 d-flex flex-column">
<div class="form-group flex-grow-1 d-flex flex-column">
<label for="query" class="form-label">SPARQL Query</label>
<textarea id="query" name="query" class="form-control flex-grow-1" placeholder="Add your SPARQL query here"></textarea>
<div id="syntax-error" class="text-danger mt-2" style="display: none;"></div> <!-- Syntax error display -->
</div>
</div>
<div class="form-floating mb-3">
<select id="format" name="format" class="form-select">
<option value="auto" selected>Auto</option>
<option value="text/html">HTML</option>
<option value="text/x-html+tr">HTML (Basic Browsing Links)</option>
<option value="application/vnd.ms-excel">Spreadsheet</option>
<option value="application/sparql-results+xml">XML</option>
<option value="application/sparql-results+json">JSON</option>
<option value="application/javascript">Javascript</option>
<option value="text/turtle">Turtle</option>
<option value="application/rdf+xml">RDF/XML</option>
<option value="text/plain">N-Triples</option>
<option value="text/csv">CSV</option>
<option value="text/tab-separated-values">TSV</option>
</select>
<label for="format">Results Format</label>
</div>
<div class="mb-3 d-flex justify-content-between">
<button class="btn btn-secondary" type="button" data-bs-toggle="collapse" data-bs-target="#optionsCollapse" aria-expanded="false" aria-controls="optionsCollapse">
Options
</button>
<button type="submit" class="btn btn-primary" id="runQueryButton" disabled>Run Query</button>
</div>
<div class="collapse" id="optionsCollapse">
<div class="card card-body">
<div class="row">
<!-- First Column: Checkboxes -->
<div class="col-md-6">
<div class="d-flex flex-column">
<div class="form-check mb-3">
<input class="form-check-input" type="checkbox" id="strict" name="strict" checked>
<label class="form-check-label" for="strict">Strict checking of void variables</label>
</div>
<div class="form-check mb-3">
<input class="form-check-input" type="checkbox" id="debug" name="debug">
<label class="form-check-label" for="debug">Log debug info at the end of output</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" id="report" name="report">
<label class="form-check-label" for="report">Generate SPARQL compilation report</label>
</div>
</div>
</div>
<!-- Second Column: Inputs -->
<div class="col-md-6">
<div class="form-floating mb-3">
<input type="number" id="timeout" name="timeout" class="form-control"
placeholder="Enter timeout in milliseconds (optional)">
<label for="timeout">Timeout (ms)</label>
</div>
</div>
</div>
<!-- Keep the hidden default-graph-uri input -->
<div class="d-none">
<input type="text" id="default-graph-uri" name="default-graph-uri" class="form-control"
placeholder="Enter Graph IRI (optional)">
</div>
</div>
</div>
</form>
</div> <!-- Close query-editor div -->
<!-- Query Results -->
<div class="tab-pane w-100 fade position-absolute" id="query-results" role="tabpanel" aria-labelledby="query-results-tab">
<!-- Copy URL Alert Box -->
<div class="alert alert-info d-flex justify-content-between align-items-center mb-2" id="copy-url-alert" style="display: none!important;">
<span>You can run this query directly from Excel or any other application by using its URL.</span>
<div>
<button id="copy-url-button" class="btn btn-secondary me-2">Copy URL</button>
<button id="open-url-button" class="btn btn-secondary">Download</button>
</div>
</div>
<!-- Results Section -->
<div id="results">
<p class="text-muted">Query results will appear here...</p>
</div>
</div> <!-- Close query-results div -->
<!-- Help -->
<div class="tab-pane w-100 fade position-absolute" id="help" role="tabpanel" aria-labelledby="help-tab">
<div class="container-fluid mt-4">
<div class="row">
<!-- Left Column - Help Content -->
<div class="col-lg-8">
<h2>Help</h2>
<p>
The TED Open Data Service allows you to extract custom datasets from the entire collection of public procurement data published by the Publications Office.
This is made possible with Semantic Web technologies, specifically the SPARQL query language which allows you to specify the data you want to retrieve to meet the specific needs of your application.
</p>
<p>
To use this tool you will need to develop some familiarity with the logic and syntax of SPARQL as well as the concepts defined in the eProcurement Ontology.
For detailed information and guidance on these topics, please visit our <a href="https://docs.ted.europa.eu/" target="_blank">documentation website</a>.</p>
</p>
<h3>How to use this tool</h3>
<p>
<ul>
<li>Use the <b>Query Library</b> tab to explore suggested SPARQL queries. These will help you get started.</li>
<li>Use the <b>Query Editor</b> tab to compose your SPARQL query.</li>
<li>To test your query use the <b>Run Query</b> button.</li>
<li>The results will be displayed in the <b>Query Results</b> tab.</li>
<li>You can get a URL that directly runs your query by clicking on the <b>Copy URL</b> button in the <b>Query Results</b> tab.<br/>
You can use this URL to run your query and retrieve live results directly into <b>Excel</b>, <b>Power BI</b>, or any application that can get data from the web.</li>
<li>To download a copy of the data retrieved by your query you can use the <b>Download</b> button in the <b>Query Results</b> tab.</li>
</ul>
</p>
<h3>Questions & feedback</h3>
<p>
For questions and feedback, please visit our <a href="https://github.com/OP-TED/ted-open-data/discussions" target="_blank">GitHub Discussions</a> forum.
</p>
</div>
<!-- Right Column - Components -->
<div class="col-lg-4">
<!-- Third-Party Components -->
<div class="card">
<div class="card-header">
<h5 class="card-title mb-0">Third-Party Components</h5>
</div>
<div class="card-body">
<h6>Frontend Components</h6>
<ul class="list-unstyled">
<li class="mb-3">
<strong>Bootstrap</strong> (v5.3.0-alpha3)
<br><small class="text-muted">CSS framework for styling and components</small>
<br><small class="text-secondary">License: MIT</small>
</li>
<li class="mb-3">
<strong>CodeMirror</strong> (v5.65.2)
<br><small class="text-muted">Code editor with SPARQL syntax highlighting</small>
<br><small class="text-secondary">License: MIT</small>
</li>
<li class="mb-3">
<strong>js-yaml</strong> (v4.1.0)
<br><small class="text-muted">YAML parser and dumper</small>
<br><small class="text-secondary">License: MIT</small>
</li>
</ul>
<h6 class="mt-4">Backend Components</h6>
<ul class="list-unstyled">
<li class="mb-3">
<strong>Express</strong> (v4.17.1)
<br><small class="text-muted">Web server framework</small>
<br><small class="text-secondary">License: MIT</small>
</li>
<li class="mb-3">
<strong>cors</strong> (v2.8.5)
<br><small class="text-muted">CORS middleware for Express</small>
<br><small class="text-secondary">License: MIT</small>
</li>
<li class="mb-3">
<strong>node-fetch</strong> (v2.6.1)
<br><small class="text-muted">Fetch API implementation for Node.js</small>
<br><small class="text-secondary">License: MIT</small>
</li>
<li class="mb-3">
<strong>https-proxy-agent</strong> (v7.0.5)
<br><small class="text-muted">HTTP(s) proxy agent for Node.js</small>
<br><small class="text-secondary">License: MIT</small>
</li>
<li>
<strong>sparqljs</strong> (v3.7.3)
<br><small class="text-muted">SPARQL query parser and generator</small>
<br><small class="text-secondary">License: MIT</small>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</main>
<!-- Footer -->
<footer class="d-flex w-100">
<!-- Legend -->
<div class="legend-container flex-grow-1 ml-3">
Developed by the Publications Office of the EU.
</div>
<div class="progress mr-3" style="width: 10%; min-width: 100px">
<div class="progress-bar progress-bar-striped progress-bar-animated bg-info" role="progressbar" style="width: 0%"></div>
</div>
<div id="apiStatus" class="toast" role="alert" aria-live="assertive" aria-atomic="true" data-autohide="false">
<div class="toast-header">
<svg width="16" height="16" class="rounded mr-2">
<rect width="16" height="16" fill="red"></rect>
</svg>
<strong class="mr-auto">Error</strong>
<button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<ul class="toast-body">
<!-- Error message will be inserted here -->
</ul>
</div>
</footer>
<!-- Toast Container -->
<div class="toast-container position-fixed bottom-0 end-0 p-3">
<div id="copyUrlToast" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<strong class="me-auto">TED SPARQL Editor</strong>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body">
URL copied to clipboard
</div>
</div>
</div>
<!-- Bootstrap JS Bundle -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<!-- JavaScript File -->
<script src="src/js/script.js" type="module" defer></script>
<!-- Add these before the closing body tag -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.2/codemirror.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.2/mode/sparql/sparql.min.js"></script>
</body>
</html>