forked from IrishMarineInstitute/search-erddaps
-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
167 lines (154 loc) · 9.07 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
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, shrink-to-fit=no, initial-scale=1">
<meta name="description" content="Search datasets across multiple ERDDAPs">
<meta name="author" content="Irish Marine Institute">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css"
integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA=="
crossorigin=""/>
<title>Search Erddaps</title>
<link rel="apple-touch-icon" sizes="180x180" href="../apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="../favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="../favicon-16x16.png">
<link rel="mask-icon" href="../safari-pinned-tab.svg" color="#5bbad5">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="theme-color" content="#ffffff">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<!-- start poloyfils for explorer -->
<script>
window.Promise || document.write('<script src="https://cdn.jsdelivr.net/npm/promise-polyfill@8/dist/polyfill.min.js"><\/script>');
window.fetch || document.write('<script src="https://unpkg.com/unfetch/polyfill"><\/script>');
window.URLSearchParams || document.write('<script src="https://cdnjs.cloudflare.com/ajax/libs/url-search-params/1.1.0/url-search-params.js" integrity="sha256-vA5o1HRlFYggrn0yG+6bKGlnln9fWxi4S9cvzo6FlKw=" crossorigin="anonymous"><\/script>');
if (!String.prototype.startsWith) {
String.prototype.startsWith = function(searchString, position){
position = position || 0;
return this.substr(position, searchString.length) === searchString;
};
}
</script>
<!-- end polyfills -->
<script src="https://irishmarineinstitute.github.io/awesome-erddap/erddaps.js"></script>
<script src="fetch-jsonp.js"></script>
</head>
<body>
<div class="container">
<div class="row" id="searchArea">
<div class="col-md-12 well">
<legend id="datasets"><a target="_blank" href="https://coastwatch.pfeg.noaa.gov/erddap/information.html" title="find out more...">ERDDAP</a> Dataset Discovery <a href="#settings" onclick="showSettings()" title="Click to configure settings" class="float-right"><i class="fa fa-cog"></i></span></a></legend>
<div id="testConnections" style="display: block"></div>
<div id="searchForm" class="form-group" style="display: none">
<label for="search">Search Datasets</label>
<input type="text" class="form-control" id="search" aria-describedby="searchHelp" placeholder="Enter some text...">
<small id="searchHelp" class="form-text text-muted">Type some words about the dataset you seek, then press the green button</small>
<button id="searchDatasetsButton" class="btn btn-success">Search</button>
<button id="clearButton" onclick="clearSearchDatasets()" class="btn btn-info">Clear</button>
</div>
<div class="row" id="searchInfo"></div>
<div class="row" id="searchResults"></div>
</div>
</div>
<div class="row" id="configurationArea" style="display: none">
<legend><a target="_blank" href="https://coastwatch.pfeg.noaa.gov/erddap/information.html" title="find out more...">ERDDAP</a> Server Settings <a href="#" onclick="showSearch()" title="Click to hide settings" class="float-right"><i class="fa fa-window-close"></i></span></a></legend>
<div id="configureErddapServer" class="form-group">
<label for="filter">Configure Erddap Servers</label>
<input type="text" class="form-control" id="filter" aria-describedby="filterHelp" placeholder="Enter some text...">
<small id="filterHelp" class="form-text text-muted">Type some words to filter in the servers you seek, then press the green button</small>
<button id="filterServersButton" onclick="filterServers()" class="btn btn-success">Filter</button>
<button id="clearButton" onclick="clearFilterServers()" class="btn btn-info">Clear</button>
<button id="addServerButton" onclick="showAddServerForm()" class="btn btn-primary">Add a new server...</button>
</div>
<div class="col-md-12 well" id="erddapServers"></div>
</div>
<div class="row" id="addServerForm" style="display: none">
<form >
<div class="form-group">
<label for="newServerName">Name</label>
<input type="text" class="form-control" id="newServerName" placeholder="My ERRDAP Server">
<small id="share" class="form-text text-muted">To share your server with others, submit to <a target="_blank" title="opens a new window" href="https://github.com/irishmarineinstitute/awesome-erddap/">awesome erddap</a></small>
</div>
<div class="form-group">
<label for="newServerUrl">Url</label>
<input type="text" class="form-control" id="newServerUrl" placeholder="http://my.erddap.server/erddap/">
<small id="newServerUrlHelpBlock" class="form-text text-muted"></small>
</div>
<div class="form-group">
<button type="button" id="addNewServerButtion" class="btn btn-success">Save</button>
<button type="button" id="cancelAddNewServerButtion" onclick="hideAddServerForm()" class="btn btn-info">Cancel</button>
</div>
</form>
</div>
</div>
<div>
<span><img src="https://raw.githubusercontent.com/IrishMarineInstitute/zapidox/master/img/dafm.png" alt="DAFM Logo" style="height: 50px;"/> <img src="https://raw.githubusercontent.com/IrishMarineInstitute/zapidox/master/img/forasnamara.jpg" alt="Marine Institute Logo" style="height: 50px;"/> <img src="https://raw.githubusercontent.com/IrishMarineInstitute/zapidox/master/img/eu-emff.png" alt="EU EMFF Logo" style="height: 50px;"/> <img src="https://raw.githubusercontent.com/IrishMarineInstitute/zapidox/master/img/eu_sifp.jpg" alt="EU Structural Infrastructure Fund and Programme Logo" style="height: 50px;"/></span>
<p>This work is supported by the Irish Government and the European Maritime & Fisheries Fund as part of the EMFF Operational Programme for 2014–2020.</p>
</div>
<script src="app.js"></script>
<script>
var getUrlSearchParams = function(){
if(location.hash.indexOf('?')>0){
return new URLSearchParams(location.hash.substring(location.hash.indexOf('?')));
}
return new URLSearchParams(location.hash?location.hash.substring(1):"");
}
var getSearchValue = function(){
return document.getElementById('search').value;
}
var runApp = function(erddap_list){
var erddaps = new ERDDAPs(erddap_list,true);//true = use custom erddaps saved to local storage.
var onHashChanged = function(){
var urlParams = getUrlSearchParams();
var search = urlParams.get('search');
if(search && search != getSearchValue()){
document.getElementById('search').value = search;
erddaps.search(search);
}
}
document.getElementById('search').onkeydown = function(e){
var evt = e || window.event;
if ( evt.keyCode === 13 ) {
erddaps.search(getSearchValue());
}
};
document.getElementById('filter').onkeydown = function(e){
var evt = e || window.event;
if ( evt.keyCode === 13 ) {
filterServers();
}
};
document.getElementById('searchDatasetsButton').onclick = function(){
erddaps.search(getSearchValue());
}
document.getElementById('addNewServerButtion').onclick = function(){
erddaps.addNewServerFromForm();
}
document.getElementById('search').focus();
erddaps.testConnect().then(function(){
document.getElementById("testConnections").style.display='none';
document.getElementById("searchForm").style.display='block';
document.getElementById("erddapServers").innerHTML= "";
document.getElementById("erddapServers").appendChild(erddaps.settingstable());
window.addEventListener("hashchange", onHashChanged, false);
onHashChanged();
});
};
if(typeof(awesomeErddaps) !== 'undefined'){
runApp(awesomeErddaps);
}else{
console.log("The awesomeErddaps list was not loaded.... will try fetch possibly out-of-date backup copy");
fetch("./erddaps.json").then(function(response){
return response.json();
}).then(runApp).catch(function(x){
console.log("problem loading erddaps.json",x);
});
}
</script>
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"
integrity="sha512-QVftwZFqvtRNi0ZyCtsznlKSWOStnDORoefr1enyq5mVL4tmKB3S/EnC3rRJcxCPavG10IcrVGSmPh6Qw5lwrg=="
crossorigin=""></script>
</body>
</html>