Repository navigation
Expand file tree
/
Copy pathstructure-data.html
More file actions
197 lines (191 loc) · 10.2 KB
/
Copy pathstructure-data.html
File metadata and controls
197 lines (191 loc) · 10.2 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
<!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>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.min.js"></script>
<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/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">
<link rel="stylesheet" href="style/editor.css">
</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" aria-current="page" href="initialise-project.html">Initialise Project</a>
</li>
<li class="nav-item">
<a class="nav-link active" 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 class="d-flex">
<button class="btn btn-primary control-project-element btn-save me-5" type="button"><i class="fa-solid fa-file-arrow-down"></i> Download Data</button>
<button class="btn btn-warning control-project-element btn-change" type="button"><i class="fa-solid fa-retweet"></i> Change Project</button>
</div>
</div>
</div>
</nav>
<div id="projectLoader" class="container-fluid" style="height: calc(100vh - 70px)">
<div class="row mt-5">
<div class="col-md-6 offset-md-3">
<div class="card">
<div class="card-header bg-dark text-white">
<h5 class="card-title">Project Loader</h5>
</div>
<div class="card-body">
<form id="jsonForm">
<div class="mb-3">
<label for="jsonFile" class="form-label">Upload Project File (.json)</label>
<input class="form-control" type="file" id="jsonFile" accept=".json">
<small class="form-text text-muted">No Project File? <a href="project.html">Initialize a New Project</a></small>
</div>
<button type="submit" class="btn btn-primary">Load Project</button>
</form>
</div>
</div>
</div>
</div>
</div>
<div id="editorContainer" class="container-fluid d-none" style="height: calc(100vh - 70px)"></div>
<div class="modal" id="loader" tabindex="-1" style="z-index:9999" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"
data-bs-backdrop="static" data-bs-keyboard="false">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content" style="background: transparent !important; border: 0 !important">
<div class="loader"></div>
</div>
</div>
</div>
<div class="modal" id="noResultsModal">
<div class="modal-dialog" role="document">
<div class="modal-content bg-transparent">
<div class="modal-header bg-warning ">
<h4>No Results</h4>
</div>
<div class="modal-body bg-light">
<p>No results matching the selected filter were found.</p>
</div>
<div class="modal-footer bg-light justify-content-center">
<button type="button" class="btn btn-secondary btn-warning" data-bs-dismiss="modal">OK</button>
</div>
</div>
</div>
</div>
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<script type="text/javascript" src="./src/editor.js"></script>
<script type="text/javascript" src="./src/edtf.js"></script>
<script>
$(".control-project-element").hide();
Promise.all([
fetch('src/snippets/editor_snippet.html').then(response => response.text()),
fetch('src/snippets/party_snippet.html').then(response => response.text()),
fetch('src/snippets/location_snippet.html').then(response => response.text()),
fetch('src/snippets/relation_snippet.html').then(response => response.text())
]).then(([editor_form, party_form, location_form, relation_form]) => {
const editor_snippet = editor_form;
const party_snippet = party_form;
const location_snippet = location_form;
const relation_snippet = relation_form;
$(document).on('click', '.btn-change', function() {
const confirmed = confirm('⚠️ Make sure you downloaded the project before exiting. Are you sure you want to change project?');
if (confirmed) {
localStorage.clear()
indexedDB.databases().then(databases => {
for (var i = 0; i < databases.length; i++) { window.indexedDB.deleteDatabase(databases[i].name) }
})
location.reload();
document.getElementById('editorContainer').classList.remove("d-none");
document.getElementById('projectLoader').classList.add("d-none");
}
});
$(document).on('click', '.btn-save', function() {
partyClear()
const storedJsonData = localStorage.getItem('provaData');
if (!storedJsonData) {
console.error('No data found in localStorage.');
return;
}
const jsonData = JSON.parse(storedJsonData);
const jsonContent = JSON.stringify(jsonData, null, 2);
const blob = new Blob([jsonContent], { type: 'application/json' });
const url = URL.createObjectURL(blob);
const link = document.createElement('a');
link.setAttribute('href', url);
link.setAttribute('download', 'saved_provenance_data.json');
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
URL.revokeObjectURL(url);
});
currentObjectID = 0
projectData = null
filteredDataIndexList = null
objectData = null
uniqueAuthors = null
uniqueInstitution = null
filters = null
const storedJsonData = localStorage.getItem('provaData');
if (storedJsonData) {
$(".control-project-element").show();
projectData = JSON.parse(storedJsonData);
objectData = projectData.data[0]
uniqueAuthors = Array.from(new Set(projectData.data.map(item => item.author))).map(author => ({ id: author, text: author }));
uniqueInstitution = Array.from(new Set(projectData.data.map(item => item.institution))).map(institution => ({ id: institution, text: institution }));
document.getElementById('editorContainer').classList.remove("d-none");
document.getElementById('projectLoader').classList.add("d-none");
partyClear()
$("#editorContainer").append(editor_snippet).promise().done(function() {
setTimeout(function () { fillPage(editor_snippet, party_snippet, location_snippet, relation_snippet) }, 100)
})
}
else{
document.getElementById('jsonForm').addEventListener('submit', function(event) {
event.preventDefault();
const fileInput = document.getElementById('jsonFile');
const file = fileInput.files[0];
if (file) {
const reader = new FileReader();
reader.onload = function(event) {
const jsonData = event.target.result;
try {
localStorage.setItem('provaData', jsonData);
projectData = JSON.parse(jsonData);
objectData = projectData.data[0]
uniqueAuthors = Array.from(new Set(projectData.data.map(item => item.author))).map(author => ({ id: author, text: author }));
uniqueInstitution = Array.from(new Set(projectData.data.map(item => item.institution))).map(institution => ({ id: institution, text: institution }));
document.getElementById('editorContainer').classList.remove("d-none");
document.getElementById('projectLoader').classList.add("d-none");
$(".control-project-element").show();
$("#editorContainer").append(editor_snippet).promise().done(function() {
setTimeout(function () { fillPage(editor_snippet, party_snippet, location_snippet, relation_snippet) }, 500)
})
} catch (error) {
$(".control-project-element").hide();
alert('Error: Invalid Project file');
}
}
reader.readAsText(file);
} else {
alert('Please select a Project file');
}
});
}
})
</script>
</body>
</html>