-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathindex.html
147 lines (145 loc) · 5.67 KB
/
index.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="generator" content=
"HTML Tidy for HTML5 for Linux version 5.2.0">
<title>ERDDAP Lint Tool</title>
<meta name="viewport" content=
"width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/tachyons.min.css">
<link rel="stylesheet" href="css/autoComplete.min.css" />
<link rel="stylesheet" href="css/style.css" />
<script src="js/autoComplete.min.js"></script>
<script src="js/erddap-lint.js"></script>
</head>
<body class="w-100 sans-serif">
<header class="w-100 pa3 ph5-ns bg-white">
<div class=
"flex flex-wrap flex-nowrap-ns items-center mw9 center w-100">
<div class="flex items-center w-100 w-50-ns mb2 mb0-ns">
<a href="/" class=
"nowrap dib f5 f4-ns fw6 mt0 mb1 link black-90" title=
"Home">
<h1>Welcome to the ERDDAP Lint Tool</h1>
<div class="dib">
<small class=
"nowrap f7 mt2 mt3-ns pr2 black-70">v0.0.1</small>
</div></a>
</div>
</div>
</header>
<main class="w-100 bt b--black-10 bg-white">
<section class="bg-black-0125 w-100">
<article class="pb4">
<header class=
"ph3 ph5-ns w-100 bg-transparent pv3 bb b--black-10 overflow-auto">
<div class="nowrap mw9 center">
<a title="Getting Started" href="#getting-started"
class=
"pv1-ns f6 fw6 dim link black-70 mr2 mr3-m mr4-l dib">Home</a>
<a title="Home" href="#home"
class=
"pv1-ns f6 fw6 dim link black-70 mr1 mr3-m mr4-l dib">About</a>
</div>
</header>
</article>
<article class="pb4" id="about">
<div class="nowrap mw7 center">
<input style="display: block; visibility: hidden" id="autoComplete" value="">
<div class="measure">
<label for="erddap-url" class="f6 b db mb2">ERDDAP URL</label>
<input id="erddap-url" class="input-reset ba b--black-20 pa2 mb2 db w-100" type="text"
aria-describedby="erddap-url-desc" value="https://erddap.marine.ie/erddap">
<small id="erddap-url-desc" class="f6 black-60 db mb2">URL to ERDDAP.</small>
</div>
<div class="measure">
<label for="searchFor" class="f6 b db mb2">Search For</label>
<input id="searchFor" class="input-reset ba b--black-20 pa2 mb2 db w-100" type="text"
aria-describedby="searchFor-desc" value="">
<small id="searchFor-desc" class="f6 black-60 db mb2">Find datasets matching</small>
</div>
<button id="validate-erddap-button" class="f6 link dim br3 ph3 pv2 mb2 dib black bg-mid-green">Validate Datasets</button>
</div> </article>
</section>
</main>
<footer class="pv4 ph3 ph5-m ph6-l mid-gray" id="about">
<small class="f6 db tc">© 2020 <b class="ttu">Irish Marine Institute</b></small>
<div class="tc mt3">
<a href="https://coastwatch.pfeg.noaa.gov/erddap/index.html" title="Language" class="f6 dib ph2 link mid-gray dim">ERDDAP</a>
<a href="https://www.marine.ie/" title="Terms" class="f6 dib ph2 link mid-gray dim">Irish Marine Institute</a>
<a href="https://github.com/IrishMarineInstitute/erddap-lint" title="Fork Me" class="f6 dib ph2 link mid-gray dim">ERDDAP-Lint</a>
</div>
</footer>
<script>
/*
* extract url parameters from the hash
*/
function getHashParams(){
return window.location.hash.substring(1).split('&').reduce((h,hk) => {
let t = hk.split('=');
h[t[0]] = t[1];
return h;
},{});
}
if(getHashParams().erddap){
document.getElementById("erddap-url").value = getHashParams().erddap;
}
if(getHashParams().searchFor){
document.getElementById("searchFor").value = getHashParams().searchFor;
}
document.getElementById("validate-erddap-button").addEventListener("click",()=>{
let erddapURL = document.getElementById("erddap-url").value;
let searchFor = document.getElementById("searchFor").value;
window.location.href = `runtests.html#erddap=${erddapURL}&searchFor=${searchFor}`;
});
</script>
<script src="https://irishmarineinstitute.github.io/awesome-erddap/erddaps.js"></script>
<script>
if(typeof(awesomeErddaps) !== "undefined"){
// awesome erddap list
document.getElementById("autoComplete").style.visibility = "visible";
let placeholder = "Type to find an ERDDAP server";
// The autoComplete.js Engine instance creator
const autoCompletejs = new autoComplete({
data: {
src: awesomeErddaps,
key: ["name","shortName", "url"],
},
trigger: {
event: ["input", "focusin", "focusout"]
},
placeHolder: placeholder,
searchEngine: "loose",
highlight: false,
maxResults: 5,
resultsList: {
render: true
},
noResults: function() {
const result = document.createElement("li");
result.setAttribute("class", "no_result");
result.setAttribute("tabindex", "1");
result.innerHTML = "No Results";
document.querySelector("#autoComplete_list").appendChild(result);
},
onSelection: function(feedback) {
document.querySelector("#autoComplete").blur();
const selection = feedback.selection.value.url;
// Render selected choice to selection div
let el = document.getElementById("erddap-url")
el.value = selection;
el.classList.add("shadow");
setTimeout(()=>el.classList.remove("shadow"),1000)
// Clear Input
document.querySelector("#autoComplete").value = "";
// Change placeholder with the selected value
document.querySelector("#autoComplete").setAttribute("placeholder", placeholder);
// Concole log autoComplete data feedback
//console.log(feedback);
},
});
}
</script>
</body>
</html>