forked from n4o-rse/ta4-conservation-dev
-
Notifications
You must be signed in to change notification settings - Fork 0
/
vocabulary.html
156 lines (156 loc) · 7.57 KB
/
vocabulary.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
<!DOCTYPE html>
<html>
<head>
<title>Knowledge management FAIRification tool for conservation and restoration processes</title>
<link rel="icon" type="image/x-icon" href="pictures/CoffeeAndConservationLogo.png">
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<header>
<h1>Knowledge management FAIRification tool for conservation and restoration processes</h1>
<hr>
</header>
<nav>
<a href="index.html">Introduction</a>
<a href="vocabulary.html">Vocabulary</a>
<!-- <a href="ontology.html">Ontology</a> -->
<a href="contact.html">Contact</a>
<!-- create a form aligning to the right of the screen-->
<div style="float: right;">
<form id="userNameForm">
<label id="userName" style="color: grey;">Anonymus</label>
<br>
<input id="userNameText" type="text">
<button id="userNameButton" onclick=saveUserName()>Benutzer anmelden</button>
</form>
</div>
<br>
<center>
<img src="pictures/CSV-Image.svg" alt="RRZEicons CC BY-SA 3.0 Deed" height="150" title="RRZEicons CC BY-SA 3.0 Deed" img>
<!--
<img src="pictures/ThesaurusRex.webp" alt="Thesaurus Rex" height="150" title="Thesaurus Rex" img>
-->
</center>
</nav>
<main>
<article>
<section>
<h2>Validierung und Visualisierung hierarchischer Vokabulare</h2>
<p>Eigene Dateien müssen folgendem<a href="schema.html"> Tabellenschema </a>entsprechen.</p>
<h1>Lokale Tabelle laden</h1>
<div id="input">
<form id="fileForm">
<input type="file" id="fileInput" accept=".tsv, .csv">
<button type="submit">Vokabular laden</button>
</form>
<br>
<h1>Online-Tabelle laden</h1>
<form id="conceptSchemeTitleForm">
<!-- <label for="conceptSchemeTitleInput">Kommentardatei laden</label> -->
<select id="conceptSchemeTitleInput" name="conceptSchemeTitleInput">
</select>
<button type="submit">Vokabular laden</button>
</form>
<br>
<button type="submit" id="createconceptSchemeTitleInput" onclick=openConceptSchemeTitelModal()>Neue Tabelle anlegen</button>
<div id="conceptSchemeModal" style="display: none;" class="mediumModal">
<span id="closeConceptSchemeModal" class="close" onclick=closeConceptSchemeModal()>×</span>
<center>
<h3>Thesaurus Daten</h3>
</center>
<p>(Kommata als Separatoren multipler Werte verwenden)</p>
<form id="conceptSchemeForm">
<input type="text" id="nameSpaceInput" placeholder="Namespace" class="conceptSchemeFormInput" alt='muss ein ":" beinhalten'> <br>
<input type="text" id="titleInput" placeholder="Titel" class="conceptSchemeFormInput"> <br>
<input type="text" id="creatorInput" placeholder="Ersteller" class="conceptSchemeFormInput" alt="Kommata als Separator multipler Werte verwenden"> <br>
<input type="text" id="publisherInput" placeholder="Veröffentlicher" class="conceptSchemeFormInput"> <br>
<input type="text" id="contributorInput" placeholder="Mitwirkende" class="conceptSchemeFormInput" alt="Kommata als Separator multipler Werte verwenden"> <br>
<input type="text" id="subjectInput" placeholder="Themen" class="conceptSchemeFormInput" alt="Kommata als Separator multipler Werte verwenden"> <br>
<input type="text" id="createdInput" placeholder="Erstellungsdatum" class="conceptSchemeFormInput" readonly> <br>
<input type="text" id="descriptionInput" placeholder="Beschreibung" class="conceptSchemeFormInput"> <br>
<p>Format wählen</p>
<input type="radio" id="turtleFormatRadio" name="formatRadios" checked>
<label for="turtleFormatRadio">Turtle</label><br>
<input type="radio" id="jsonldFormatRadio" name="formatRadios">
<label for="jsonldFormatRadio">JSON-LD</label>
<br><br>
<button type="submit" id="conceptSchemeFormButton">Vokabular herunterladen</button>
</form>
</div>
<div id="conceptSchemeTitelModal" style="display: none;" class="mediumModal">
<span id="closeConceptSchemeTitelModal" class="close" onclick=closeConceptSchemeTitelModal()>×</span>
<center>
<h3>Online-Tabelle anlegen</h3>
<form id="conceptSchemeTitelForm">
<input type="text" id="conceptSchemeTitelInput" placeholder="Names des Thesaurus" class="conceptSchemeFormInput"> <br>
<input type="text" id="conceptSchemeSourceImput" placeholder="URL der Online-Tabelle" class="conceptSchemeFormInput"> <br>
<br><br>
<button type="submit" id="conceptSchemeTitelFormButton" onclick=createConceptScheme()>Vokabular anlegen</button>
</form>
</div>
<br>
</div>
<div id="output">
<div id="loadingDiv" style="display: none;">
<div id="loadingContent">
<p style="color: blue;">Bitte warten, Daten werden geladen...</p>
</div>
</div>
<div id="validationMessages">
<p id="ignored"> </p>
<p id="topped"> </p>
<p id="orphans"> </p>
<p id="outputText"> </p>
<p id="doublettes"> </p>
<p id="missingParents"> </p>
<p id="errorText"> </p>
<p id="testingText"> </p>
</div>
<!-- The Modal -->
<div id="myModal" class="modal" style="display: none;">
<!-- Modal content -->
<div class="modal-content">
<div class="modal-header">
<span id="closeConceptModal" class="close" onclick=closeConceptModal()>×</span>
<h2 id="header-head">Begriffsdetails</h2>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
<form id="commentForm">
<textarea id="commentText" rows="10" cols="150" style="resize: none;"></textarea>
<button type="submit" id="commentButton">Kommentieren als Anonymus</button>
</form>
</div>
<div class="comment-header">
<h2 id="header-head">Diskussion zum Begriff</h2>
</div>
<div class="modal-comments">
</div>
</div>
<div class="modal-sideliner">
<div class="history-header">
<h2 id="header-head">Letzte Kommentare</h2>
</div>
<div class="sideliner-content">
<div class="modal-history">
</div>
</div>
</div>
</div>
<div id="chartDiv" style="width: 100%"> </div>
</div>
</section>
<aside> </aside>
</article>
</main>
<footer> </footer>
</body>
<script src = "js/d3.v7.js"></script>
<script src = "js/hierarchyVisualizer.js"></script>
<script src = "js/visualizationMethods.js"></script>
<script src = "js/podReadAndWrite.js"></script>
<script src = "js/rdfFunctions.js"></script>
<script src = "js/rdflib/rdflib.min.js"></script>
<script src = "js/main.js"></script>
</html>