-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathinitialise-project.html
More file actions
462 lines (431 loc) · 20.4 KB
/
initialise-project.html
File metadata and controls
462 lines (431 loc) · 20.4 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
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
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>PROV-A, the Provenance App</title>
<!--Jquery-->
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<!--JqueryUI-->
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.min.js"></script>
<!--Bootstrap-->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v6.5.0/css/all.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/PapaParse/5.3.0/papaparse.min.js"></script>
<style>
/* Custom CSS for smaller, horizontally scrollable table */
#dataTable {
font-size: smaller;
width: 100%; /* Extend table to page width */
border: 1px solid #dee2e6; /* Add border */
}
#dataTable th {
font-size: smaller;
}
td[contenteditable="true"] {
font-size: smaller;
border: 1px solid #ccc;
padding: 5px;
min-width: 50px; /* Set minimum width for cells */
white-space: pre-wrap; /* or pre-line */
}
tr.readonly-cell th {
vertical-align: top;
background-color: #f0f0f0; /* Gray background color */
color: #6c757d; /* Gray text color */
}
</style>
</head>
<body>
<nav class="navbar navbar-dark navbar-expand-lg bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="index.html">PROV-A, the Provenance App</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link" aria-current="page" href="index.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="inititialise-project.html">Initialise Project</a>
</li>
<li class="nav-item">
<a class="nav-link" aria-current="page" href="structure-data.html">Structure Data</a>
</li>
<li class="nav-item">
<a class="nav-link" aria-current="page" href="generate-lod.html">Generate LOD</a>
</li>
</ul>
</div>
</div>
</nav>
<div class="container my-5">
<form id="projectForm">
<section class="card mb-4">
<div class="card-header bg-dark text-white">
<h2 class="h5 mb-0">Author Information</h2>
</div>
<div class="card-body">
<div class="mb-3">
<label for="orcid" class="form-label">Author ORCID</label>
<input type="text" class="form-control" id="orcid" name="orcid" placeholder="e.g., 0000-0001-2345-6789">
<small class="form-text text-muted">
Enter your ORCID (Open Researcher and Contributor ID).
<a href="https://orcid.org/" target="_blank" rel="noopener">Learn more</a>.
</small>
<p id="orcid-validation-message" class="text-danger mt-1"></p>
</div>
</div>
</section>
<section class="card mb-4">
<div class="card-header bg-dark text-white">
<h2 class="h5 mb-0">URI</h2>
</div>
<div class="card-body">
<div class="mb-3">
<label for="uri" class="form-label">URI</label>
<input type="text" class="form-control" id="uri" name="uri" placeholder="e.g., https://example.org/resource">
<small class="form-text text-muted">
Enter URI (Uniform Resource Identifier) for Linked Open Data.
<a href="https://www.ietf.org/rfc/rfc2396.txt" target="_blank" rel="noopener">Learn more</a>.
</small>
<p id="uri-validation-message" class="text-danger mt-1"></p>
</div>
</div>
</section>
<section class="card mb-4">
<div class="card-header bg-dark text-white">
<h2 class="h5 mb-0">License Information</h2>
</div>
<div class="card-body">
<div class="mb-3">
<label for="license" class="form-label">Creative Commons License</label>
<select class="form-select" id="license" name="license">
<option value="https://creativecommons.org/publicdomain/zero/1.0/">CC 0 - Public Domain</option>
<option value="https://creativecommons.org/licenses/by/4.0/">CC BY - Attribution</option>
<option value="https://creativecommons.org/licenses/by-sa/4.0/">CC BY-SA - ShareAlike</option>
</select>
<small class="form-text text-muted">
Choose a license type.
<a href="https://creativecommons.org/licenses/" target="_blank" rel="noopener">Learn more</a>.
</small>
</div>
</div>
</section>
<section class="card mb-4">
<div class="card-header bg-dark text-white">
<h2 class="h5 mb-0">Artifacts Data</h2>
</div>
<div class="card-body">
<!-- Action Panel -->
<div class="d-flex flex-wrap justify-content-between align-items-end mb-3">
<div>
<div>
<small class="text-muted">Upload an existing CSV file to populate the table.</small><br>
<label for="csvFile" class="btn btn-sm btn-outline-primary me-2">
<i class="bi bi-upload"></i> Upload CSV
</label>
<input type="file" class="d-none" id="csvFile" accept=".csv">
</div>
</div>
<div class="text-end">
<small class="text-muted">Download your table data as a CSV file for future use.</small><br>
<button type="button" class="btn btn-sm btn-outline-primary" id="downloadCSV">
<i class="bi bi-download"></i> Download CSV
</button>
</div>
</div>
<div class="table-responsive">
<table class="table table-bordered" id="dataTable">
<thead>
<tr>
<th>title</th>
<th>author</th>
<th>institution</th>
<th>url</th>
<th>date</th>
<th>medium</th>
<th>accessionID</th>
<th>provenance</th>
<th>creditLine</th>
</tr>
<tr class="readonly-cell">
<th>Title of the artifact</th>
<th>Name of the author or creator</th>
<th>Current owning institution</th>
<th>URL of the artifact (if any)</th>
<th>Date of creation</th>
<th>Medium of the artifact</th>
<th>Unique identifier for accession</th>
<th>Provenance text</th>
<th>Credit line</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
<!-- Action Buttons -->
<div class="mt-3 text-center">
<button type="button" class="btn btn-sm btn-success" id="addRow">+ Add Row</button>
</div>
</div>
</section>
<div class="text-center mt-5">
<button type="submit" class="btn-lg btn btn-primary">Initialize Project</button>
<p class="d-block text-muted mt-2">
Once initialized, upload the project file in the <a href="editor.html">Structure Data</a> section.
</p>
</div>
</form>
</div>
</body>
<script>
$(document).ready(function() {
const MAX_CSV_SIZE_MB = 2; // Maximum allowed CSV size in MB
const MAX_ROWS = 300; // Maximum allowed rows
// Function to handle CSV file upload
$('#csvFile').change(function() {
const file = this.files[0];
const fileSizeMB = file.size / (1024 * 1024); // Convert file size to MB
if (fileSizeMB > MAX_CSV_SIZE_MB) {
alert('CSV file size exceeds the limit of ' + MAX_CSV_SIZE_MB + ' MB.');
return;
}
else {
Papa.parse(file, {
complete: function(results) {
const data = results.data;
const tableBody = $('#dataTable tbody');
tableBody.empty();
data.forEach(function(row) {
const newRow = $('<tr></tr>');
row.forEach(function(cell, index) {
if (index < 9) {
newRow.append($('<td contenteditable="true"></td>').text(cell));
}
});
newRow.append($('<td><button type="button" class="btn btn-danger btn-sm btn-remove">Remove</button></td>')); // Add remove button
tableBody.append(newRow);
});
updateAddRowButtonVisibility(); // Update Add Row button visibility
}
})
}
});
// Function to add a new row to the table
function addRow() {
const rowCount = $('#dataTable tbody tr').length;
if (rowCount >= MAX_ROWS) {
return
}
const newRow = $('<tr></tr>');
for (let i = 0; i < 9; i++) {
newRow.append($('<td contenteditable="true"></td>').text(''));
}
newRow.append($('<td><button type="button" class="btn btn-danger btn-sm btn-remove">Remove</button></td>')); // Add remove button
$('#dataTable tbody').append(newRow);
updateAddRowButtonVisibility(); // Update Add Row button visibility
}
// Add event listener to the Add Row button
$('#addRow').click(function() {
addRow();
});
function updateAddRowButtonVisibility() {
const rowCount = $('#dataTable tbody tr').length;
if (rowCount >= MAX_ROWS) {
$('#addRow').hide(); // Hide Add Row button if maximum rows reached
} else {
$('#addRow').show(); // Show Add Row button otherwise
}
}
// Add event listener to remove buttons
$(document).on('click', '.btn-remove', function() {
const confirmed = confirm('⚠️ Are you sure you want to delete the row?');
if (confirmed) {
$(this).closest('tr').remove();
updateAddRowButtonVisibility(); // Update Add Row button visibility
}
});
// Function to download table data as CSV
$('#downloadCSV').click(function() {
const csvContent = [];
$('#dataTable tbody tr').each(function() {
const rowData = [];
$(this).find('td[contenteditable="true"]').each(function() {
const cellContent = $(this).text().replace(/"/g, '""').trim();
rowData.push('"' + cellContent.replace(/\n/g, '\\n') + '"');
});
csvContent.push(rowData.join(','));
});
const csvString = csvContent.join('\n');
const encodedUri = 'data:text/csv;charset=utf-8,' + encodeURIComponent(csvString);
const link = document.createElement('a');
link.setAttribute('href', encodedUri);
link.setAttribute('download', 'table_data.csv');
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
});
// Form submission
$('#projectForm').submit(function(e) {
e.preventDefault();
const formData = {
orcid: $('#orcid').val(),
license: $('#license').val(),
uri: $('#uri').val(),
data: [],
parties: {}
};
$('#dataTable tbody tr').each(function(rowIndex) {
const rowData = {};
let hasData = false;
rowData["index"] = rowIndex
rowData["provenanceData"] = []
$(this).find('td[contenteditable="true"]').each(function(cellIndex) {
const columnName = $('#dataTable thead th').eq(cellIndex).text().trim();
const cellText = $(this).text().trim();
rowData[columnName] = cellText;
if (cellText !== '') {
hasData = true;
}
});
if (hasData) { // Check if rowData contains any data
formData.data.push(rowData);
}
});
if (!isValidORCID(document.getElementById('orcid').value.trim())) {
alert("Please provide a valid ORCID before initializing the project")
}
else if (!isValidURI(document.getElementById('uri').value.trim())) {
alert("Please provide a valid URI before initializing the project")
}
else if (formData.data.length>0){
// Convert formData to JSON and download
const jsonData = JSON.stringify(formData);
const blob = new Blob([jsonData], { type: 'application/json' });
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = 'project.json';
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
URL.revokeObjectURL(url);
}
else{
alert("Please enter data before initializing the project")
}
});
// Confirmation before leaving the page
window.addEventListener('beforeunload', function(e) {
const confirmationMessage = '⚠️ Data will be lost. Are you sure you want to leave this page?';
e.returnValue = confirmationMessage;
return confirmationMessage;
});
function isValidORCID(orcid) {
// Remove hyphens for checksum validation
const strippedORCID = orcid.replace(/-/g, '');
// ORCID should have 16 digits
if (!/^\d{16}$/.test(strippedORCID)) {
return false;
}
// MOD 11-2 checksum validation
let total = 0;
for (let i = 0; i < 15; i++) {
total = (total + parseInt(strippedORCID.charAt(i), 10)) * 2;
}
const remainder = total % 11;
const result = (12 - remainder) % 11;
const checkDigit = result === 10 ? 'X' : result.toString();
return checkDigit === strippedORCID.charAt(15);
}
// Add event listener for real-time validation
const orcidInput = document.getElementById('orcid');
const validationMessage = document.getElementById('orcid-validation-message');
orcidInput.addEventListener('input', () => {
const orcidValue = orcidInput.value.trim();
if (!orcidValue) {
validationMessage.textContent = ''; // Clear message if empty
} else if (isValidORCID(orcidValue)) {
validationMessage.textContent = 'Valid ORCID!';
validationMessage.classList.remove('text-danger');
validationMessage.classList.add('text-success');
} else {
validationMessage.textContent = 'Invalid ORCID! Please check the format or digits.';
validationMessage.classList.remove('text-success');
validationMessage.classList.add('text-danger');
}
});
function isValidURI(uri) {
try {
const url = new URL(uri);
// 1. Check if the protocol is 'http' or 'https'
if (url.protocol !== 'http:' && url.protocol !== 'https:') {
return false;
}
// 2. Ensure there is no fragment (#) or query (? parameters)
if (url.hash || url.search) {
return false;
}
// 3. Check for invalid characters in the path (e.g., ":", "#", "?", etc.)
if (/[:?#]/.test(url.pathname)) {
return false;
}
// 4. Check the hostname (domain or IP)
const hostname = url.hostname;
// Ensure it's not empty
if (!hostname || hostname === '') {
return false;
}
// Validate domain name structure (should contain at least one period and no special characters like `:`)
const domainRegex = /^[a-zA-Z0-9-]+\.[a-zA-Z]{2,}$/;
if (!domainRegex.test(hostname)) {
return false;
}
// 5. Ensure that domain doesn't start or end with a hyphen
if (hostname.startsWith('-') || hostname.endsWith('-')) {
return false;
}
// 6. Check for valid domain characters (only alphanumeric, dots, and hyphens)
if (!/^[a-zA-Z0-9.-]+$/.test(hostname)) {
return false;
}
// 7. Check for invalid ports
if (url.port && url.port !== '' && !/^[0-9]+$/.test(url.port)) {
return false;
}
// 8. Check for invalid path components (e.g., trailing slashes)
if (url.pathname.includes('//')) {
return false;
}
// 9. Ensure the URL path is not empty
if (url.pathname === '') {
return false;
}
} catch (error) {
// If there's any error parsing the URI, return false
return false;
}
return true;
}
// Real-time validation for Base URI input
const uriInput = $('#uri');
const uriValidationMessage = $('#uri-validation-message');
uriInput.on('input', function () {
const uriValue = uriInput.val().trim();
if (!uriValue) {
uriValidationMessage.text(''); // Clear message if empty
} else if (isValidURI(uriValue)) {
uriValidationMessage.text('Valid URI!').removeClass('text-danger').addClass('text-success');
} else {
uriValidationMessage.text('Invalid URI! Please check the format.').removeClass('text-success').addClass('text-danger');
}
});
});
</script>
</html>