forked from TerriaJS/TerriaMap
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathtesting.html
171 lines (171 loc) · 7.82 KB
/
testing.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
168
169
170
171
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>RENCI/TerriaMap data injection test</title>
<!-- JQuery components -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Bootstrap components -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<!-- D3 components -->
<script src="https://d3js.org/d3.v3.min.js"></script>
<script src="https://d3js.org/d3-time-format.v2.min.js"></script>
</head>
<body id="theBody" style="background:#3f4854;margin:0px;padding:0px;overflow:hidden">
<table>
<tr>
<td style="padding-left: 10px;padding-right: 10px"><button type="button" class="btn btn-info" style="background-color: #2670a4; padding-left: 10px;padding-right: 10px" value="Submit" onclick="getCatalogData(true);">Load APSViz DB data</button></td>
<td style="padding-left: 10px;padding-right: 10px"><button type="button" class="btn btn-info" style="background-color: #2670a4; padding-left: 10px;padding-right: 10px" value="Submit" onclick="getCatalogData(false);">Load Demo data</button></td>
<td style="padding-left: 10px;padding-right: 10px"><div id="statusMsg" style="color:white;text-align: left;padding-left: 10px;padding-right: 10px">Loading...</div></td>
<td style="padding-left: 10px;padding-right: 10px"><div style="color:white;text-align: left;padding-left: 10px;padding-right: 10px">Filtering:</div></td> <option></option>
<td style="padding-left: 10px;padding-right: 10px"><select id="forcastType" style="background-color: #2670a4; color:white;text-align: left;padding-left: 10px;padding-right: 10px"><option> --- Forcast Type --- </option><option>namforecast</option><option>nhcConsensus</option></select></td>
<td style="padding-left: 10px;padding-right: 10px"><select id="adcircGrid" style="background-color: #2670a4; color:white;text-align: left;padding-left: 10px;padding-right: 10px"><option> --- ADCIRC Grid --- </option><option>ec95d</option><option>EGOMv20b</option><option>hsofs</option><option>nc_inundation_v9.99_w_rivers</option><option>NCSC_SAB_v1.23</option></select></td>
<td style="padding-left: 10px;padding-right: 10px"><select id="instanceName" style="background-color: #2670a4; color:white;text-align: left;padding-left: 10px;padding-right: 10px"><option> --- Instance Name --- </option><option>ec95d-nam-bob3</option><option>ec95d-nam-bob-psc</option><option>EGOMv20b_nam_jgf</option><option>hsofs-nam-bob-2022-psc</option><option>ncsc123-nam-sb55.01</option><option>ncsc123-nam-sbDNTK</option><option>ncsc123-nam-sbDNTKa</option></select></td>
<td style="padding-left: 10px;padding-right: 10px"><select id="calendarDate" style="background-color: #2670a4; color:white;text-align: left;padding-left: 10px;padding-right: 10px"><option> --- Calendar Date --- </option><option>2022-08-22</option><option>2022-08-23</option><option>2022-08-24</option></select></td>
</tr>
<tr>
<td><iframe id="embeddedAPSVIZMap" src="http://localhost:3001/" style="position: absolute; height: 100%; width: 100%; border: none"></iframe></td>
</tr>
</table>
<script type="text/javascript">
// assign the demo data
let demoData = {
initSources: [
{
initialCamera: {
"north": -33.827,
"east": 151.249,
"south": -33.907,
"west": 151.165
},
workbench: ["foo"],
catalog: [
{
type: "group",
name: "Foo",
members: [
{
type: "csv",
name: "My Data",
id: "my-data",
csvString: "POA,Some Value\n2000,1\n2205,2"
}
]
}
]
}
]
};
// define the location of the terria-map site
const UI_URL = "https://apsviz-terria-map-dev.apps.renci.org";
// set the DB data web service url
const WS_URL = "http://apsviz-settings-dev.apps.renci.org/get_terria_map_data"
/**
* gets the data from the DB.
*
* @param get_db_data
*/
function getCatalogData(get_db_data)
{
$('#statusMsg').text("Loading...");
// get a reference to the frame
let iframeWindow = document.getElementById('embeddedAPSVIZMap').contentWindow;
// do nothing on the startup case
if(get_db_data == undefined) {
$('#statusMsg').text("Ready.");
return;
}
// if DB data is requested
else if(get_db_data) {
let url = get_data_url();
// get the DB apsviz catalog
d3.json(url, function(error, msgData)
{
if (error == null && msgData.length != 0 && msgData != 'None') {
// add the home camera so the map pans
msgData.initialCamera = {east: -61, north: 46, south: 20, west: -96};
// save the final data
let data_catalog = {initSources: [msgData]};
// post the data catalog to the map
iframeWindow.postMessage(data_catalog, UI_URL);
$('#statusMsg').text("Done, ready.");
}
else
{
$('#statusMsg').text("Error getting data.");
}
})
}
// just the dummy data
else
{
let data_catalog = demoData;
// post the catalog data to the map
iframeWindow.postMessage(data_catalog, UI_URL);
$('#statusMsg').text("Done, ready.");
}
}
/**
* builds the URL for the WS data url call
*/
function get_data_url()
{
// init local variables
let url_params = '';
let final_url = WS_URL;
// get the forcast type if selected
if ($('#forcastType').val().substring(0,3) != '---')
url_params += '&event_type=' + $('#forcastType').val();
// get the grid type if selected
if ($('#adcircGrid').val().substring(0,3) != '---')
url_params += '&grid_type=' + $('#adcircGrid').val();
// get the instance name if selected
if ($('#instanceName').val().substring(0,3) != '---')
url_params += '&instance_name=' + $('#instanceName').val();
// get the calendar date if selected
if ($('#calendarDate').val().substring(0,3) != '---')
url_params += '&run_date=' + $('#calendarDate').val();
// if there were any selections build up the final url
if (url_params != null)
final_url += '/?limit=2' + url_params;
// return the url to the caller
return final_url;
}
/**
* app ready event handler
*/
window.addEventListener('message', function(e) {
let iframeWindow = document.getElementById('embeddedAPSVIZMap').contentWindow;
// if the frame and data are ready
if (e.source === iframeWindow && e.data === 'ready') {
// get the catalog data
getCatalogData();
}
});
</script>
</body>
</html>