-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
149 lines (135 loc) · 7.35 KB
/
index.html
File metadata and controls
149 lines (135 loc) · 7.35 KB
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
<!DOCTYPE html>
<html>
<head>
<title>Sparql Repository</title>
<meta charset="UTF-8">
<!-- Dependencies -->
<link rel="stylesheet" type="text/css" href="dependencies/bootstrap-4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="dependencies/bootstrap-tags-tnput/tagInput.css">
<link href="dependencies/tabulator-master/dist/css/tabulator.min.css" rel="stylesheet">
<link href="dependencies/tabulator-master/dist/css/tabulator_simple.min.css" rel="stylesheet">
<script src="dependencies/jquery-3.3.1/jquery.min.js"></script>
<script src="dependencies/bootstrap-4.3.1/js/bootstrap.min.js"></script>
<script src="dependencies/bootstrap-tags-tnput/tagInput.js"></script>
<script type="text/javascript" src="dependencies/tabulator-master/dist/js/tabulator.min.js"></script>
<script type="text/javascript" src="dependencies/export/http_oss.sheetjs.com_sheetjs_xlsx.full.min.js"></script>
<script src="dependencies/export/http_cdnjs.cloudflare.com_ajax_libs_jspdf_1.3.5_jspdf.min.js"></script>
<script src="dependencies/export/http_cdnjs.cloudflare.com_ajax_libs_jspdf-autotable_3.0.5_jspdf.plugin.autotable.js"></script>
<!-- Own styles include -->
<link rel="stylesheet" type="text/css" href="./css/sidebar.css">
<link rel="stylesheet" type="text/css" href="./css/content.css">
<link rel="stylesheet" type="text/css" href="./css/toast.css">
<!-- Own javaScripts include -->
<script src="js/functions.js"></script>
<script src="js/getters.js"></script>
<script src="js/controller.js"></script>
<script src="js/ajax.js"></script>
<script src="js/variables.js"></script>
<script src="js/colors.js"></script>
<script src="js/presenter.js"></script>
<script src="js/Query.js"></script>
<script src="js/queryFunctions.js"></script>
<script src="js/messages.js"></script>
<!-- Sparql logo favicon -->
<link rel='icon' href='favicon/favicon.png' type='image/png'/>
</head>
<body>
<!-- Search box -->
<div class="search-box">
<div class="input-group mb-3">
<input type="text" id="searchBox" onkeyup="searchQuery()" class="form-control" placeholder="Search sparql query" aria-label="Search sparql query" aria-describedby="basic-addon2">
</div>
<div class="navigation-buttons">
<a href="#" class="btn btn-primary new-query-button" onclick="setFormClearForNewQuery()" title="Create new sparql query">New query</a>
<a href="#" id="export-button" class="btn btn-outline-primary export-import-button" onclick="exportData()">Export</a>
<a href="#" id="import button" class="btn btn-outline-primary export-import-button" onclick="importData()">Import</a>
</div>
</div>
<!-- ./Search box -->
<!-- Side menu -->
<div class="side-list">
<ul id="query-list">
<!-- Here will be render list of queries -->
</ul>
</div>
<!-- ./Sidebar menu -->
<!-- Content -->
<div class="content">
<!-- Query Card -->
<div class="card">
<div class="card-header" id="card-header">
Query Explorer
</div>
<div class="card-body">
<div>
<label><strong>Name</strong></label>
<!-- In this input will be render query name -->
<input class="form-control" id="query-name" onkeyup="onQueryChange()" readonly>
</div>
<div>
<label><strong>Description</strong></label>
<!-- In this text area will be render query description -->
<textarea class="form-control" id="query-description" rows="3" onkeyup="onQueryChange()" readonly>
</textarea>
</div>
<div>
<label><strong>Tags</strong></label>
<div id="tag-list">
<!-- Here will be render tags or tags input field-->
</div>
</div>
<form>
<div>
<label><strong>Endpoint URL</strong></label>
</div>
<div class="input-group mb-3">
<!-- In this input will be render query end point -->
<input type="text" id="endpoint-input" class="form-control" onkeyup="setUrlEndpointButtonToOrigin(); onQueryChange()" aria-describedby="basic-addon2" readonly>
<div class="input-group-append">
<button class="btn btn-outline-secondary" onclick="checkEndpointUrl()" type="button" id="endpointButton" >Test URL endpoint</button>
</div>
</div>
<div class="form-group">
<label><strong>Sparql query</strong></label>
<!-- In this text area tag will be render sparql query -->
<textarea class="form-control" id="sparql-query" name="sparqlQuery" rows="10" onkeyup="onQueryChange()" readonly>
</textarea>
</div>
</form>
<a href="#" id="save-as-new-btn" class="btn btn-primary" onclick="saveNewQuery()" title="Save current query as new item">Save as new</a>
<a href="#" id="edit-btn" class="btn btn-primary" onclick="setEditMode()" title="Edit current query">Edit</a>
<a href="#" id="save-btn" class="btn btn-primary" onclick="saveNewVersionOfQuery()" title="Save changes in current query">Save</a>
<a href="#" id="prev-btn" class="btn btn-primary" onclick="showPreviousQueryVersion()" ><< Previous</a>
<a href="#" id="next-btn" class="btn btn-primary" onclick="showNextQueryVersion()">Next >></a>
<a href="#" class="btn btn-success margin-right" onclick="send()" title="Send current query to the endpoint">Send query</a>
<div id="error-response" class="error">
<!-- Here will be render ERROR response from the server -->
</div>
</div>
</div>
<!-- ./Query Card -->
<!-- Query Result Card -->
<div class="card">
<div class="card-header">
Query Result
</div>
<div class="card-body card-result">
<div id="example-table">
<!-- Here will be render data from response -->
</div>
<!-- Buttons for export data from table -->
<a href="#" id="download-csv" class="btn btn-primary" onclick="downloadCSV()">Download CSV</a>
<a href="#" id="download-json" class="btn btn-primary" onclick="downloadJSON()">Download JSON</a>
<a href="#" id="download-xlsx" class="btn btn-primary" onclick="downloadXLSX()">Download XLSX</a>
<a href="#" id="download-pdf" class="btn btn-primary" onclick="downloadPDF()">Download PDF</a>
<!-- ./Buttons for export data from table -->
</div>
</div>
<!-- ./Query Result Card -->
</div>
<!-- ./Content -->
<!-- Toast message -->
<div id="toast-message"></div>
<!-- ./Toast message -->
</body>
</html>