-
Notifications
You must be signed in to change notification settings - Fork 3
/
Copy pathmapping-service-ui.html
148 lines (134 loc) · 6.59 KB
/
mapping-service-ui.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
<!DOCTYPE html>
<html lang="en">
<head>
<style>
#moreContent {
max-height: 0;
overflow: hidden;
transition: max-height 0.5s ease-out;
}
#toggleLink {
color: #007BFF;
cursor: pointer;
}
</style>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mapping Service UI</title>
<link rel="stylesheet" href="./css/semantic.min.css">
<link rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/@kit-data-manager/[email protected]/deps/opt/fontawesome/css/all.min.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="./js/apply-config.js"></script>
<script
src="https://cdn.jsdelivr.net/npm/@kit-data-manager/mapping-service-input@latest/dist/com_mapping-service-input.es.js"></script>
</head>
<body class="ui">
<h1 class="ui block header">
<img id="app-logo" src="./images/mapping_service.jpg" class="ui circular image">
<div id="app-title" class="content">
{app-title}
<div id="app-subtitle" class="sub header">{app-subtitle}</div>
</div>
<!-- <div id="login_button" class="ui animated right floated button" tabindex="0">
<div id="login_button_text" class="visible content">Login</div>
<div class="hidden content">
<i id="login_icon" class="sign-in icon"></i>
</div>
</div> -->
</h1>
<div class="ui container">
<div id="service-url-input" class="sixteen wide column">
<div class="two wide column">
<div class="ui label">
Mapping Service URL
</div>
</div>
<div class="fourteen wide column">
<div class="ui fluid icon input">
<input id="endpoint" type="text" placeholder="http://localhost:8095/"
value="http://localhost:8095/">
<button class="ui vertical animated button" tabindex="0" onclick="setUrl()">
<div class="hidden content">Reload</div>
<div class="visible content">
<i class="fa-solid fa-arrows-rotate"></i>
</div>
</button>
<script>
function setUrl() {
let url = document.getElementById("endpoint").value;
document.getElementById("input-component").setAttribute("base-url", url);
}
</script>
</div>
</div>
</div>
<p class="text-grey" style="margin-left: 1em; font-size: 0.7em;">
Use this field to connect to an instance of the Mapping Service.
</p>
<div class="ui padded container">
<div class="ui large segment">
<p>
The Mapping Service is a tool designed to extract metadata from different kinds of data
produced by instruments, and map this metadata to published metadata schemas.
<a href="#" id="toggleLink" onclick="showMoreContent()">Show More</a>
</p>
<div id="moreContent" style="margin-bottom: 20px;">
<p> Our mappings
adhere to community-accepted standard schemes, tailored for various techniques. Link of the
schemes can be found <a
href="https://github.com/kit-data-manager/Metadata-Schemas-for-Materials-Science"
target="_blank">here</a>
<br>For more detailed documentation please visit the link <a
href="https://matwerk.datamanager.kit.edu/docs/mapping-service/" target="_blank">here</a>
<br><br>Below, you'll find a comprehensive list of available mappings. Each entry provides:
<br><b>Title:</b> A brief heading for the mapping.
<br><b>Description:</b> Detailed insights into the mapping's functionality.
<br><b>Select Option:</b> Choose the mapping that aligns with your needs.
<br>
After reviewing and selecting the appropriate mapping, you can effortlessly upload your file or
zip
for metadata extraction.
<br>
<br>
Please follow below steps to use it:
<br>
<b>Step 1:</b> Select suitable mapping from available options.
<br>
<b>Step 2:</b> According to the selected mapping, provide appropriate input.
<br>
<b>Step 3:</b> Click Map document button
</p>
</div>
<div id="chooseMappingBlock">
<p> <b>Choose a suitable mapping from available options</b></p>
</div>
</div>
<script>
function showMoreContent() {
var content = document.getElementById("moreContent");
var linkText = document.getElementById("toggleLink");
if (content.style.maxHeight === "0px" || content.style.maxHeight === "") {
content.style.maxHeight = content.scrollHeight + "px";
linkText.textContent = "Show Less";
} else {
content.style.maxHeight = "0px";
linkText.textContent = "Show More";
}
}
</script>
<mapping-input base-url="https://matwerk.datamanager.kit.edu/" id="input-component"></mapping-input>
<div class="ui center aligned grid">
<button type="submit" class="ui primary button" id="submit" onclick="
var component =document.getElementById('input-component');
component.executeMapping(true)">Map document
</button>
</div>
<script type="module">
import { ajaxBaseUrl, keycloak, tags, showServiceUrl, appDescription } from './js/mapping-service.settings.js';
applyConfig(ajaxBaseUrl, keycloak, tags, showServiceUrl, appDescription)
</script>
</div>
</body>
</html>