http://git-wip-us.apache.org/repos/asf/incubator-cmda/blob/ca952ad9/ApacheCMDA-Frontend/app/views/climate/conditionalSampling2Var.scala.html ---------------------------------------------------------------------- diff --git a/ApacheCMDA-Frontend/app/views/climate/conditionalSampling2Var.scala.html b/ApacheCMDA-Frontend/app/views/climate/conditionalSampling2Var.scala.html index 1a7607b..8c039bd 100644 --- a/ApacheCMDA-Frontend/app/views/climate/conditionalSampling2Var.scala.html +++ b/ApacheCMDA-Frontend/app/views/climate/conditionalSampling2Var.scala.html @@ -1,44 +1,31 @@ -@******************************************************************************* - * Licensed to the Apache Software Foundation (ASF) under one or more * - * contributor license agreements. See the NOTICE file distributed with * - * this work for additional information regarding copyright ownership. * - * The ASF licenses this file to You under the Apache License, Version 2.0 * - * (the "License"); you may not use this file except in compliance with * - * the License. You may obtain a copy of the License at * - * * - * http://www.apache.org/licenses/LICENSE-2.0 * - * * - * Unless required by applicable law or agreed to in writing, software * - * distributed under the License is distributed on an "AS IS" BASIS, * - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * - * See the License for the specific language governing permissions and * - * limitations under the License. * - *******************************************************************************@ - -@(parameters: metadata.ConditionalSampling2Var) @import helper._ +@(parameters: metadata.ConditionalSampling2Var) + +@import helper._ + <link rel="stylesheet" href='@routes.Assets.at("stylesheets/livefitler.css")'> + @scripts = { -<script src='@routes.Assets.at("javascripts/edit_button.js")'></script> -<script src='@routes.Assets.at("javascripts/livefilter.js")'></script> -<script type="text/javascript" - src='@routes.Assets.at("javascripts/jquery-1.9.0.min.js")'></script> -<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/flot/0.8.3/jquery.flot.min.js";></script> - <script type=" - text/javascript" src='@routes.Assets.at("javascripts/json2.js")'></script> -<script type="text/javascript" - src='@routes.Assets.at("javascripts/xmisc.js")'></script> -<script type="text/javascript" - src='@routes.Assets.at("html/js2/dataList2.js")'></script> -<script type="text/javascript" - src='@routes.Assets.at("html/js2/varList.js")'></script> -<script type="text/javascript" - src='@routes.Assets.at("html/js2/common.js")'></script> -<script type="text/javascript"> + <script src='@routes.Assets.at("javascripts/edit_button.js")'></script> + <script src='@routes.Assets.at("javascripts/livefilter.js")'></script> + <script type="text/javascript" src='@routes.Assets.at("javascripts/jquery-1.9.0.min.js")'></script> + <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/flot/0.8.3/jquery.flot.min.js";></script> + <script type="text/javascript" src='@routes.Assets.at("javascripts/json2.js")'></script> + <script type="text/javascript" src='@routes.Assets.at("javascripts/xmisc.js")'></script> + + <script type="text/javascript" src='@routes.Assets.at("html/js2/dataList2.js")'></script> + <script type="text/javascript" src='@routes.Assets.at("html/js2/varList.js")'></script> + <script type="text/javascript" src='@routes.Assets.at("html/js2/common.js")'></script> + + <script type="text/javascript"> + var Response = null; var variable1 = ""; var variable2 = ""; + var naValue = "-999999"; + + // called on load or reload window.onload = function() { put_data(1); changeDataSource1(); @@ -52,14 +39,25 @@ changeVariableName2(); put_var(3); changeVariableName3(); + time_range3(); fillMonth(); + enable_download_button(); + + + +/* $('#pres1').val("N/A"); + $('#pres2').val("N/A"); + $('#pres3').val("N/A"); */ disable_pres(1); disable_pres(2); disable_pres(3); + $('#t0').val($('#startYearMonth').text()); $('#t1').val($('#endYearMonth').text()); + + var enviVariableChoose1 = $('#enChoose1'); if(enviVariableChoose1 == "0"){ $('#radioDef1').prop("checked", true); @@ -68,6 +66,7 @@ $('#radioDef1').prop("checked", false); $('#radioCus1').prop("checked", true); } + var enviVariableChoose2 = $('#enChoose2'); if(enviVariableChoose2 == "0"){ $('#radioDef2').prop("checked", true); @@ -76,8 +75,10 @@ $('#radioDef2').prop("checked", false); $('#radioCus2').prop("checked", true); } + var selectMonths = $('#selectMonths').text(); $('#months option:contains('+selectMonths+')').prop({selected: true}); +/* select_months(); */ select_monthsByPara(); $('#lat0').val($('#startLat').text()); $('#lat1').val($('#endLat').text()); @@ -122,6 +123,7 @@ $('#max1').val(binMax1); $('#bins1').val(binNum1); } + var binMin2 = $('#binMin2').text(); var binMax2 = $('#binMax2').text(); var binNum2 = $('#binNum2').text(); @@ -134,14 +136,18 @@ $('#max2').val(binMax2); $('#bins2').val(binNum2); } + $('#purpose').html($('#executionPurpose').text()); var imageUrl = $('#image').text(); $('#Image').html('<img src="'+imageUrl+'" width=680 />'); $('#data_url').html($('#dataURL').text()); $('#Response').html($('serviceResponseText').text()); + } + function put_data(ID){ var list1=document.getElementById("data"+ID); + for(var key in dataList) { if (key.slice(0,5)==="group") { var og = document.createElement("OPTGROUP"); @@ -152,11 +158,13 @@ } } } + function put_var(ID) { var list1=document.getElementById("var"+ID); for (var i=list1.length-1; i>=0; i--) { list1.remove(i); } + data_string = document.getElementById("data"+ID).value; var varList2 = dataList[data_string][1]; for (var i=0; i<varList2.length; i++) { @@ -164,6 +172,7 @@ list1.add(new Option(varList[k][0],k)); } } + function select_monthsByPara(){ var monthsByPara = $('#monthsPara').text(); console.log("HERE!!!!!!"+monthsByPara); @@ -205,6 +214,8 @@ document.getElementById('Dec').checked = true; } } + + // disable pressure level box for 2D var function disable_pres(ID) { var x; @@ -221,35 +232,43 @@ var split12 = x.value.split(","); var temp1 = split12[0]; var temp2 = split12[1]; + // when variable is the 3D Ocean Salinity or Ocean Temperature if ( var1 == 'ot' || var1 == 'os') { - temp1 = temp1 / 10000; - temp2 = temp2 / 10000; + temp1 = temp1 / 10000; // convert from dbar on GUI + temp2 = temp2 / 10000; // convert from dbar on GUI } + // when variable2 is 3D atmosphere var else { - temp1 = temp1 / 100; - temp2 = temp2 / 100; + temp1 = temp1 / 100; // convert from hPa on GUI + temp2 = temp2 / 100; // convert from hPa on GUI } x.value = temp1 + "," + temp2; } else{ if ( var1 == 'ot' || var1 == 'os') { - x.value = x.value / 10000; + x.value = x.value / 10000; // convert from dbar on GUI } + // when variable2 is 3D atmosphere var else { - x.value = x.value / 100; + x.value = x.value / 100; // convert from hPa on GUI } } } } + + // enable pressure level box for 3D var function enable_pres1(ID) { var x; x=document.getElementById("pres"+ID); x.disabled=false; } + function changeDataSource1() { var dataSource = $('#dataSourceP').text(); + var x = document.getElementById("data1"); + if(dataSource == "gfdl_esm2g" ){ x.options[0].selected=true; } @@ -326,8 +345,10 @@ x.options[24].selected=true; } } + function changeDataSource2() { var dataSource = $('#dataSourceE1').text(); + //dataSource = "NASA_QuikSCAT"; var x = document.getElementById("data2"); if(dataSource == "gfdl_esm2g" ){ x.options[0].selected=true; @@ -365,7 +386,7 @@ else if(dataSource == "ukmo_hadgem2-a" ){ x.options[11].selected=true; } - else if(dataSource == "nasa_grace" ){ + else if(dataSource == "nasa_grace" ){ ////////////////////////////////// x.options[12].selected=true; } else if(dataSource == "nasa_modis" ){ @@ -405,8 +426,10 @@ x.options[24].selected=true; } } + function changeDataSource3() { var dataSource = $('#dataSourceE2').text(); + //dataSource = "NASA_QuikSCAT"; var x = document.getElementById("data3"); if(dataSource == "gfdl_esm2g" ){ x.options[0].selected=true; @@ -444,7 +467,7 @@ else if(dataSource == "ukmo_hadgem2-a" ){ x.options[11].selected=true; } - else if(dataSource == "nasa_grace" ){ + else if(dataSource == "nasa_grace" ){ ////////////////////////////////// x.options[12].selected=true; } else if(dataSource == "nasa_modis" ){ @@ -484,48 +507,65 @@ x.options[24].selected=true; } } + function changeVariableName1(){ var var_string = $('#variableNameP').text(); var data_string = $('#dataSourceP').text(); data_string = data_string.replace("_", "/").toUpperCase(); + + var varList2 = dataList[data_string][1]; var x = document.getElementById("var1"); + for (var i=0; i<varList2.length; i++) { var k = varList2[i]; + if (k == var_string) { x.options[i].selected=true; break; } } } + function changeVariableName2(){ var var_string = $('#variableNameE1').text(); var data_string = $('#dataSourceE1').text(); data_string = data_string.replace("_", "/").toUpperCase(); + + var varList2 = dataList[data_string][1]; var x = document.getElementById("var2"); + for (var i=0; i<varList2.length; i++) { var k = varList2[i]; + if (k == var_string) { x.options[i].selected=true; break; } } } + function changeVariableName3(){ var var_string = $('#variableNameE2').text(); var data_string = $('#dataSourceE2').text(); data_string = data_string.replace("_", "/").toUpperCase(); + + var varList2 = dataList[data_string][1]; var x = document.getElementById("var3"); + for (var i=0; i<varList2.length; i++) { var k = varList2[i]; + if (k == var_string) { x.options[i].selected=true; break; } } } + + // select all months in the checkboxes function select_all_months() { document.getElementById('Jan').checked = true; @@ -541,6 +581,8 @@ document.getElementById('Nov').checked = true; document.getElementById('Dec').checked = true; } + + // see if no month is selected function no_month_check() { if (document.getElementById('Jan').checked == false && @@ -555,11 +597,14 @@ document.getElementById('Oct').checked == false && document.getElementById('Nov').checked == false && document.getElementById('Dec').checked == false) { + // alert("No month check!"); return true; } else return false; } + + // unselect all months in the checkboxes function reset_months() { document.getElementById('Jan').checked = false; @@ -575,8 +620,11 @@ document.getElementById('Nov').checked = false; document.getElementById('Dec').checked = false; } + + // disable customized input text boxes function setDefault(ID) { + // alert("in setDefault() ... "); var x=document.getElementById("min"+ID); var y=document.getElementById("max"+ID); var z=document.getElementById("bins"+ID); @@ -587,8 +635,11 @@ z.value = "N/A"; z.disabled=true; } + + // enable customized input text boxes function setCustomized(ID) { + // alert("in setCustomized() ... "); var x=document.getElementById("min"+ID); var y=document.getElementById("max"+ID); var z=document.getElementById("bins"+ID); @@ -599,7 +650,10 @@ z.value = ""; z.disabled=false; } + + // getMonthStr__ function getMonthStr() { + // get months checked by client var month_str = ""; for (var i=0; i<monthList.length; i++) { var mm = document.getElementById(monthList[i]); @@ -610,54 +664,94 @@ month_str = month_str.substr(1); return month_str; } + $(document).ready(function(){ + $("#download_data").click(function(event) { var durl = $("#data_url").val(); + // alert(durl); window.location.assign(durl); }); + + $("#conditionalSamp").click(function(event) { + // alert('****** inside conditionalSamp()!'); Response = null; + + // no data to download yet disable_download_button(); + + // flag error if no month box is checked if (no_month_check()) { + // $("#Response").html("<span style='color:red'>Error: please check at least one month.</span>"); $("#Response").html("Error: please check at least one month."); $("#Image").html(""); return; } + $("#Response").html("Calculating ..."); $("#data_url").html("Calculating ..."); $("#Image").html(""); + + // sample url: http://cmacws.jpl.nasa.gov:8090/svc/conditionalSampling?model1=ukmo_hadgem2-a&var1=ts&pres1=200&model2=ukmo_hadgem2-a&var2=clt&pres2=200&start_time=199001&end_time=199512&lon1=0&lon2=100&lat1=-29&lat2=29 + // form url string + // var url = "http://cmacws.jpl.nasa.gov:8090/svc/conditionalSamp?";; var url = "http://"; + window.location.hostname + ":9002/svc/conditionalSampling2Var?"; + // alert("url: " + url); + var d1 = $("#data1").val(); var model1 = d1.replace("/", "_"); model1 = model1.toLowerCase(); + var arglist = ""; arglist = arglist.concat("model1="); arglist = arglist.concat(model1); + + // alert("arglist: " + arglist); + var variable1 = $("#var1").val(); arglist = arglist.concat("&var1="); arglist = arglist.concat(variable1); + + // alert("arglist: " + arglist); + + var t0 = $("#t0").val(); var t1 = $("#t1").val(); + t0 = t0.replace("-", ""); t1 = t1.replace("-", ""); + arglist = arglist.concat("&start_time="); arglist = arglist.concat(t0); + arglist = arglist.concat("&end_time="); arglist = arglist.concat(t1); + var lon0 = $("#lon0").val(); var lon1 = $("#lon1").val(); var lat0 = $("#lat0").val(); var lat1 = $("#lat1").val(); + arglist = arglist.concat("&lon1="); arglist = arglist.concat(lon0); + arglist = arglist.concat("&lon2="); arglist = arglist.concat(lon1); + arglist = arglist.concat("&lat1="); arglist = arglist.concat(lat0); + arglist = arglist.concat("&lat2="); arglist = arglist.concat(lat1); + + // alert("arglist: " + arglist); + var press_range = $("#pres1").val(); + // alert("press_range: " + press_range); + var pres12 = parse_pres(press_range); + var pres1; var pres2; if (pres12 === naValue) { @@ -671,123 +765,189 @@ } else { pres1 = split12[0]; pres2 = split12[1]; + + // when variable is the 3D Ocean Salinity or Ocean Temperature if (variable1 == 'ot' || variable1 == 'os') { - pres1 = pres1 * 10000; - pres2 = pres2 * 10000; + pres1 = pres1 * 10000; // convert from dbar on GUI + pres2 = pres2 * 10000; // convert from dbar on GUI } + // when variable2 is 3D atmosphere var else { - pres1 = pres1 * 100; - pres2 = pres2 * 100; + pres1 = pres1 * 100; // convert from hPa on GUI + pres2 = pres2 * 100; // convert from hPa on GUI } } } + //alert("pres1, pres2: " + pres1 + ", " + pres2); + arglist = arglist.concat("&pres1="); arglist = arglist.concat(pres1); arglist = arglist.concat("&pres2="); arglist = arglist.concat(pres2); + + // alert("arglist: " + arglist); + var month_str = getMonthStr(); arglist = arglist.concat("&months="); arglist = arglist.concat(month_str); + + // alert("arglist: " + arglist); + + var d2 = $("#data2").val(); var model2 = d2.replace("/", "_"); model2 = model2.toLowerCase(); + arglist = arglist.concat("&model2="); arglist = arglist.concat(model2); + + // alert("arglist: " + arglist); + var variable2 = $("#var2").val(); arglist = arglist.concat("&var2="); arglist = arglist.concat(variable2); + var d3 = $("#data3").val(); var model3 = d3.replace("/", "_"); model3 = model3.toLowerCase(); + arglist = arglist.concat("&model3="); arglist = arglist.concat(model3); + + // alert("arglist: " + arglist); + var variable3 = $("#var3").val(); arglist = arglist.concat("&var3="); arglist = arglist.concat(variable3); + + // alert("arglist: " + arglist); + var plev1 = $("#pres2").val(); plev1 = parse_pres(plev1); + if (plev1>0) { + // when variable is the 3D Ocean Salinity or Ocean Temperature if (variable2 == 'ot' || variable2 == 'os') { - plev1 = plev1 * 10000; + plev1 = plev1 * 10000; // convert from dbar on GUI } + // when variable2 is 3D atmosphere var else { - plev1 = plev1 * 100; + plev1 = plev1 * 100; // convert from hPa on GUI } } + arglist = arglist.concat("&env_var_plev1="); arglist = arglist.concat(plev1); + var plev2 = $("#pres3").val(); plev2 = parse_pres(plev2); if (plev2>0) { + // when variable is the 3D Ocean Salinity or Ocean Temperature if (variable3 == 'ot' || variable3 == 'os') { - plev2 = plev2 * 10000; + plev2 = plev2 * 10000; // convert from dbar on GUI } + // when variable2 is 3D atmosphere var else { - plev2 = plev2 * 100; + plev2 = plev2 * 100; // convert from hPa on GUI } } + arglist = arglist.concat("&env_var_plev2="); arglist = arglist.concat(plev2); + + // alert("arglist: " + arglist); + var binstate1 = document.getElementById('radioDef1').checked; + var binMin1, binMax1, numBins1; - if (binstate1 == true) { + + if (binstate1 == true) { // default binMin1 = naValue; binMax1 = naValue; numBins1 = naValue; } - else { + else { // customized binMin1 = $("#min1").val(); binMax1 = $("#max1").val(); numBins1 = $("#bins1").val(); } + arglist = arglist.concat("&bin_min1="); arglist = arglist.concat(binMin1); arglist = arglist.concat("&bin_max1="); arglist = arglist.concat(binMax1); arglist = arglist.concat("&bin_n1="); arglist = arglist.concat(numBins1); + var binstate2 = document.getElementById('radioDef2').checked; + var binMin2, binMax2, numBins2; - if (binstate2 == true) { + + if (binstate2 == true) { // default binMin2 = naValue; binMax2 = naValue; numBins2 = naValue; } - else { + else { // customized binMin2 = $("#min2").val(); binMax2 = $("#max2").val(); numBins2 = $("#bins2").val(); } + arglist = arglist.concat("&bin_min2="); arglist = arglist.concat(binMin2); arglist = arglist.concat("&bin_max2="); arglist = arglist.concat(binMax2); arglist = arglist.concat("&bin_n2="); arglist = arglist.concat(numBins2); + + // alert("arglist: " + arglist); + var xstate = document.getElementById('radioXLin').checked; var xvalue; + if (xstate == true) xvalue = 0; else xvalue = 1; + + // alert("xvalue: " + xvalue); + var ystate = document.getElementById('radioYLin').checked; var yvalue; + if (ystate == true) yvalue = 0; else yvalue = 1; + + // alert("yvalue: " + yvalue); + var zstate = document.getElementById('radioZLin').checked; var zvalue; + if (zstate == true) zvalue = 0; else zvalue = 1; + + // alert("zvalue: " + zvalue); + var dispOpt; dispOpt = xvalue*1 + yvalue*2 + zvalue*4; + // alert("dispOpt: " + dispOpt); var dispOptString = dispOpt.toString(); + arglist = arglist.concat("&displayOpt="); arglist = arglist.concat(dispOptString); + + // alert("arglist: " + arglist); + + // url = url + encodeURIComponent(arglist); url = url + encodeURI(arglist); + // url = url + arglist; + // alert("url: " + url); + var urlTimeBounds = "http://"; + window.location.hostname + ":9002/svc/two_time_bounds?"; var arglistTB = ""; arglistTB = arglistTB.concat("serviceType="); @@ -801,6 +961,8 @@ arglistTB = arglistTB.concat("&var2="); arglistTB = arglistTB.concat(variable2); urlTimeBounds = urlTimeBounds + encodeURI(arglistTB); + // alert("urlTimeBounds: " + urlTimeBounds); + $.ajax({ type: "GET", url: urlTimeBounds, @@ -808,7 +970,9 @@ data: null, success: function(data, textStatus, xhr) { Response = data; + // alert("data: " + data); if (data.success == false) { + // alert(data.error); Response = null; var text = JSON.stringify(data, null, 4); text = "Error in backend: <br>" + text; @@ -817,56 +981,82 @@ return; } var text = JSON.stringify(data, null, 4); + // alert("text: " + text); + // $("#Response").html("<pre>"+text+"</pre>"); + // $("#Response").html(text); + var tb1 = data.time_bounds1; var bds1 = String(tb1).split(","); + // alert("tb1: " + tb1); + // alert("bds1: " + bds1); var lowerT1 = parseInt(bds1[0]); + // alert("inside ajax, lowerT1: " + lowerT1); var upperT1 = parseInt(bds1[1]); + // alert("upperT1: " + upperT1); + var tb2 = data.time_bounds2; var bds2 = String(tb2).split(","); + // alert("tb2: " + tb2); + // alert("bds2: " + bds2); var lowerT2 = parseInt(bds2[0]); + // alert("inside ajax, lowerT2: " + lowerT2); var upperT2 = parseInt(bds2[1]); + // alert("upperT2: " + upperT2); + var t0I = parseInt(t0); var t1I = parseInt(t1); + // alert("t0: " + t0I); + // alert("t1: " + t1I); + var lowerT, upperT; - if (lowerT1 == 0 || upperT1 == 0){ + // compute the intersection of the two data bounds + + if (lowerT1 == 0 || upperT1 == 0){ // no data-1 alert("We do not have data for the data-1 source and variable configuration."); return; } - else if (lowerT2 == 0 || upperT2 == 0){ + else if (lowerT2 == 0 || upperT2 == 0){ // no data-2 alert("We do not have data for the data-2 source and variable configuration."); return; } - else if (lowerT2 > upperT1 || lowerT1 > upperT2) { + else if (lowerT2 > upperT1 || lowerT1 > upperT2) { // no intersection alert("The two data sets/vars do not have a common time range."); return; } - else { - if (lowerT1 > lowerT2) { + else { // compute intersection + if (lowerT1 > lowerT2) { // pick bigger lower time bound lowerT = lowerT1; } else { lowerT = lowerT2; } - if (upperT1 > upperT2) { + + if (upperT1 > upperT2) { // pick smaller upper time bound upperT = upperT2; } else { upperT = upperT1; } } + // alert("lowerT: " + lowerT); + // alert("upperT: " + upperT); + if (t0I < lowerT && t1I < lowerT || t0I > upperT && t1I > upperT) { alert("We do not have data that span your time range. Try the range inside ["+lowerT+", "+upperT+"]."); return; } + if (t0I < lowerT && t1I <= upperT) { alert("Your start year-month is out of bound. It has to be in or later than " + lowerT + ". We will use the range ["+lowerT+", "+t1I+"] for you."); } + if (t1I > upperT && t0I >= lowerT) { alert("Your end year-month is out of bound. It has to be in or earlier than " + upperT + ". We will use the range ["+t0I+", "+upperT+"] for you."); } + if (t0I < lowerT && t1I > upperT ) { alert("Both of your start and end year-months are out of bounds. They have to be in or earlier than " + upperT + ", and in or later than " + lowerT + ". We will use the range ["+lowerT+", "+upperT+"] for you."); @@ -875,10 +1065,15 @@ error: function(xhr, textStatus, errorThrown) { $("#Response").html("error!"); $("#data_url").html("error!"); + // alert("xhr.status: "+xhr.status); + // alert("error status: "+textStatus); }, complete: function(xhr, textStatus) { + //alert("complete status: "+textStatus); } }); + + $.ajax({ type: "GET", url: url, @@ -886,32 +1081,51 @@ data: null, success: function(data, textStatus, xhr) { Response = data; + // alert("data: " + data); if (data.success == false) { + // alert(data.error); Response = null; var text = JSON.stringify(data, null, 4); text = "Error in backend: <br>" + text; + // $("#Response").html("<span style='color:red'>" + text + "</span>"); $("#Response").html(text); $("#data_url").html(text); return; } var text = JSON.stringify(data, null, 4); + // alert(text); + // $("#Response").html("<pre>"+text+"</pre>"); $("#Response").html(text); + var html = "<img src='"+data.url+"' width='820'/>"; + // alert(html); $("#Image").html(html); + + // post dataUrl to textarea and enable download button $("#data_url").html(data.dataUrl); enable_download_button(); }, error: function(xhr, textStatus, errorThrown) { $("#Response").html("error!"); $("#data_url").html("error!"); + // alert("xhr.status: "+xhr.status); + // alert("error status: "+textStatus); }, complete: function(xhr, textStatus) { + //alert("complete status: "+textStatus); } }); + }); + }); + </script> -} @main("Parameters of ConfId", scripts){ @flash_message() +} + +@main("Parameters of ConfId", scripts){ + + @flash_message() <p> <div id="dataSourceP" style="display: none;">@parameters.getDataSourceP()</div> <div id="dataSourceE1" style="display: none;">@parameters.getDataSourceE1()</div> @@ -923,11 +1137,14 @@ <div id="pressureRange2" style="display: none;">@parameters.getPressureRange2()</div> <div id="env_var_plev1" style="display: none;">@parameters.getEnableVarPlev1()</div> <div id="env_var_plev2" style="display: none;">@parameters.getEnableVarPlev2()</div> + <div id="startYearMonth" style="display: none;">@parameters.getStartYearMonth()</div> <div id="enChoose1" style="display: none;">@parameters.getCustomized1</div> <div id="enChoose2" style="display: none;">@parameters.getCustomized2</div> + <div id="endYearMonth" style="display: none;">@parameters.getEndYearMonth()</div> <div id="selectMonths" style="display: none;">@parameters.getSelectMonths()</div> + <div id="monthsPara" style="display: none;">@parameters.getMonth()</div> <div id="startLat" style="display: none;">@parameters.getStartLat()</div> <div id="endLat" style="display: none;">@parameters.getEndLat()</div> @@ -939,213 +1156,228 @@ <div id="binMin1" style="display: none;">@parameters.getBin_min1()</div> <div id="binMax1" style="display: none;">@parameters.getBin_max1()</div> <div id="binNum1" style="display: none;">@parameters.getBin_n1()</div> + <div id="binMin2" style="display: none;">@parameters.getBin_min2()</div> <div id="binMax2" style="display: none;">@parameters.getBin_max2()</div> <div id="binNum2" style="display: none;">@parameters.getBin_n2()</div> + <div id="executionPurpose" style="display: none;">@parameters.getExecutionPurpose()</div> <div id="image" style="display: none;">@parameters.getImage()</div> <div id="dataURL" style="display: none;">@parameters.getDataURL()</div> <div id="serviceResponseText" style="display: none;">@parameters.getServiceResponseText()</div> + + <table border="1"> - <tr> - <td colspan="4"> - <center> - <b>Service: Conditional Sampling with Two Variables</b><br> - <br> This service sorts one variable called sampled variable by - the values of two variables called sampling variables and displays - the averaged value of the sampled variable in color as a function of - the bin value of the two sampling variables in X-Y axis. There are - overlaid contours which show the number of samples in each of the - two sampling variable bin.<br> - <br> - </center> - </td> - </tr> - <tr> - <td colspan="2"> - <center>Physical Variable (sampled variable)</center> - </td> - <td colspan="2" rowspan="4"></td> - </tr> - <tr> - <td>source:</td> - <td><select name="data1" , id="data1" - onchange="put_var(1); time_range3()"></select></td> - </tr> - <tr> - <td>variable name:</td> - <td><select name="var1" , id="var1" - onchange="select_var(1); time_range3()"> - </select></td> - </tr> - <td>atmosphere pressure range (hPa) <br> or ocean pressure - range (dbar): - </td> - <td><input id="pres1" - value="@{parameters.getPressureRange1()+','+parameters.getPressureRange2()}" - alt="pressure" /></td> - </tr> - <tr> - <td colspan="2"> - <center>Environmental Variable 1 (sampling variable)</center> - </td> - <td colspan="2" rowspan="6"></td> - </tr> - <tr> - <td>source:</td> - <td><select name="data2" , id="data2" - onchange="put_var(2); time_range3()"></select></td> - </tr> - <tr> - <td>variable name:</td> - <td><select name="var2" , id="var2" - onchange="select_var(2); time_range3()"> - </select></td> - </tr> - <tr> - <td>atmosphere pressure level (hPa) <br> or ocean pressure - level (dbar): - </td> - <td><input id="pres2" value="@parameters.getEnableVarPlev1()" - alt="pressure" /></td> - </tr> - <tr> - <td colspan="2">sampling variable binning specification: - <form> - default: <input onclick="setDefault(1)" type="radio" name="default1" - value="" id="radioDef1" checked> customized: <input - onclick="setCustomized(1)" type="radio" name="default1" value="" - id="radioCus1"> - </form> - </td> - </tr> - <tr> - <td colspan="2"> - <form> - Min: <input id="min1" value="@parameters.getBin_min1()" alt="" - size=3 /> Max: <input id="max1" value="@parameters.getBin_max1()" - alt="" size=3 /> number of bins: <input id="bins1" - value="@parameters.getBin_n1()" alt="" size=3 /> - </form> - </td> - </tr> - <tr> - <td colspan="2"> - <center>Environmental Variable 2 (sampling variable)</center> - </td> - </tr> - <tr> - <td>source:</td> - <td><select name="data3" , id="data3" - onchange="put_var(3); time_range3()"></select></td> - </tr> - <tr> - <td>variable name:</td> - <td><select name="var3" , id="var3" - onchange="select_var(3); time_range3()"> - </select></td> - </tr> - <tr> - <td>atmosphere pressure level (hPa) <br> or ocean pressure - level (dbar): - </td> - <td><input id="pres3" value="@parameters.getEnableVarPlev2()" - alt="pressure" /></td> - </tr> - <tr> - <td colspan="2">sampling variable binning specification: - <form> - default: <input onclick="setDefault(2)" type="radio" name="default2" - value="" id="radioDef2" checked> customized: <input - onclick="setCustomized(2)" type="radio" name="default2" value="" - id="radioCus2"> - </form> - </td> - </tr> - <tr> - <td colspan="2"> - <form> - Min: <input id="min2" value="@parameters.getBin_min2()" alt="" - size=3 /> Max: <input id="max2" value="@parameters.getBin_max2()" - alt="" size=3 /> number of bins: <input id="bins2" - value="@parameters.getBin_n2()" alt="" size=3 /> - </form> - </td> - </tr> - <tr> - <td id=startYear>start year-month:</td> - <td><input id="t0" value="@parameters.getStartYearMonth()" - alt="start" /></td> - <td id=endYear>end year-month:</td> - <td><input id="t1" value="@parameters.getEndYearMonth()" - alt="end" /></td> - </tr> - <tr> - <td id="monthSelect0"></td> - <td id="monthSelect" colspan="3"></td> - </tr> - <tr> - <td>start lat (deg):</td> - <td><input id="lat0" value="@parameters.getStartLat()" /></td> - <td>end lat (deg):</td> - <td><input id="lat1" value="@parameters.getEndLat()" /></td> - </tr> - <tr> - <td>start lon (deg):</td> - <td><input id="lon0" value="@parameters.getStartLon()" /></td> - <td>end lon (deg):</td> - <td><input id="lon1" value="@parameters.getEndLon()" /></td> - </tr> - <tr> - <td colspan="1" rowspan="3">display option:</td> - <td colspan="3"> - <form> - X-axis (sampling variable) scale: <input type="radio" name="scale1" - value="linear" id="radioXLin" checked>linear <input - type="radio" name="scale1" value="logarithmic" id="radioXLog">logarithmic - </form> - </td> - </tr> - <tr> - <td colspan="3"> - <form> - Y-axis (sampled variable or pressure) scale: <input type="radio" - name="scale1" value="linear" id="radioYLin" checked>linear - <input type="radio" name="scale1" value="logarithmic" id="radioYLog">logarithmic - </form> - </tr> - <tr> - <td colspan="3"> - <form> - Z-axis (color) scale: <input type="radio" name="scale1" - value="linear" id="radioZLin" checked>linear <input - type="radio" name="scale1" value="logarithmic" id="radioZLog">logarithmic - </form> - </td> - </tr> - <tr> - <td colspan="2" align="center"><input id="conditionalSamp" - type="submit" value=" Get Plot " - style="height: 28px" /></td> - <form> - <td colspan="2" align="center"><input id="download_data" - type="button" value="Download Data" style="height: 28px" /></td> - </form> - </tr> - <tr> - <td colspan="4"> - <div id="Image"> - <img src="@parameters.getImage()" width=680 /> - </div> - </td> - </tr> - <tr> - <td colspan="4" align="center"><textarea readonly id="data_url" - cols="130" rows="2">@parameters.getDataURL()</textarea></td> - </tr> - <tr> - <td colspan="4" align="center"><textarea id="Response" cols="130" - rows="6">@parameters.getServiceResponseText()</textarea></td> - </tr> + +<tr> +<td colspan="4"> +<center> +<b>Service: Conditional Sampling with Two Variables</b><br><br> +This service sorts one variable called sampled variable by the +values of two variables called sampling variables and displays the +averaged value of the sampled variable in color as a function of the +bin value of the two sampling variables in X-Y axis. There are +overlaid contours which show the number of samples in each of the +two sampling variable bin.<br><br> +</center> +</td> +</tr> + +<tr> +<td colspan="2"> +<center> +Physical Variable (sampled variable) +</center> +</td> +<td colspan="2" rowspan="4"> +</td> +</tr> + +<tr> +<td>source:</td> +<td><select name="data1", id="data1" onchange="put_var(1); time_range3()"></select></td> +</tr> + +<tr> +<td>variable name:</td><td><select name="var1", id="var1" onchange="select_var(1); time_range3()"> </select> </td> +</tr> + +<td> +atmosphere pressure range (hPa) <br> or ocean pressure range (dbar): +</td> +<td> +<input id="pres1" value="@{parameters.getPressureRange1()+','+parameters.getPressureRange2()}" alt="pressure"/> +</td> +</tr> + +<tr> +<td colspan="2"> +<center> +Environmental Variable 1 (sampling variable) +</center> +</td> + +<td colspan="2" rowspan="6"> +</td> + +</tr> + +<tr> +<td>source:</td> +<td><select name="data2", id="data2" onchange="put_var(2); time_range3()"></select></td> +</tr> + +<tr> +<td>variable name:</td><td><select name="var2", id="var2" onchange="select_var(2); time_range3()"> </select> </td> +</tr> + +<tr> +<td> +atmosphere pressure level (hPa) <br> or ocean pressure level (dbar): +</td> +<td> +<input id="pres2" value="@parameters.getEnableVarPlev1()" alt="pressure"/> +</td> +</tr> + +<tr> +<td colspan="2"> +sampling variable binning specification: +<form> +default: <input onclick="setDefault(1)" type="radio" name="default1" value="" id="radioDef1" checked> +customized: <input onclick="setCustomized(1)" type="radio" name="default1" value="" id="radioCus1"> +</form> +</td> +</tr> + +<tr> +<td colspan="2"> +<form> +Min: <input id="min1" value="@parameters.getBin_min1()" alt="" size=3/> +Max: <input id="max1" value="@parameters.getBin_max1()" alt="" size=3/> +number of bins: <input id="bins1" value="@parameters.getBin_n1()" alt="" size=3/> +</form> +</td> +</tr> + +<tr> +<td colspan="2"> +<center> +Environmental Variable 2 (sampling variable) +</center> +</td> +</tr> + +<tr> +<td>source:</td> +<td><select name="data3", id="data3" onchange="put_var(3); time_range3()"></select></td> +</tr> + +<tr> +<td>variable name:</td><td><select name="var3", id="var3" onchange="select_var(3); time_range3()"> </select> </td> +</tr> + +<tr> +<td> +atmosphere pressure level (hPa) <br> or ocean pressure level (dbar): +</td> +<td> +<input id="pres3" value="@parameters.getEnableVarPlev2()" alt="pressure"/> +</td> +</tr> + +<tr> +<td colspan="2"> +sampling variable binning specification: +<form> +default: <input onclick="setDefault(2)" type="radio" name="default2" value="" id="radioDef2" checked> +customized: <input onclick="setCustomized(2)" type="radio" name="default2" value="" id="radioCus2"> +</form> +</td> +</tr> + +<tr> +<td colspan="2"> +<form> +Min: <input id="min2" value="@parameters.getBin_min2()" alt="" size=3/> +Max: <input id="max2" value="@parameters.getBin_max2()" alt="" size=3/> +number of bins: <input id="bins2" value="@parameters.getBin_n2()" alt="" size=3/> +</form> +</td> +</tr> + +<tr> +<td id=startYear>start year-month:</td><td> <input id="t0" value="@parameters.getStartYearMonth()" alt="start"/></td> +<td id=endYear>end year-month: </td><td><input id="t1" value="@parameters.getEndYearMonth()" alt="end"/></td> +</tr> + +<tr> +<td id="monthSelect0"></td> +<td id="monthSelect" colspan="3"></td> +</tr> + +<tr> +<td>start lat (deg):</td><td><input id="lat0" value="@parameters.getStartLat()"/></td> +<td>end lat (deg):</td><td><input id="lat1" value="@parameters.getEndLat()"/></td> +</tr> + +<tr> +<td>start lon (deg):</td><td><input id="lon0" value="@parameters.getStartLon()"/></td> +<td>end lon (deg):</td><td><input id="lon1" value="@parameters.getEndLon()"/></td> +</tr> + +<tr> +<td colspan="1" rowspan="3"> +display option: +</td> +<td colspan="3"> +<form>X-axis (sampling variable) scale: <input type="radio" name="scale1" value="linear" id="radioXLin" checked>linear +<input type="radio" name="scale1" value="logarithmic" id="radioXLog">logarithmic +</form> +</td> +</tr> + +<tr> +<td colspan="3"> +<form>Y-axis (sampled variable or pressure) scale: <input type="radio" name="scale1" value="linear" id="radioYLin" checked>linear +<input type="radio" name="scale1" value="logarithmic" id="radioYLog">logarithmic +</form> +</tr> + +<tr> +<td colspan="3"> +<form>Z-axis (color) scale: <input type="radio" name="scale1" value="linear" id="radioZLin" checked>linear +<input type="radio" name="scale1" value="logarithmic" id="radioZLog">logarithmic +</form> +</td> +</tr> + +<tr> +<td colspan="2" align="center"><input id="conditionalSamp" type="submit" value=" Get Plot " style="height:28px"/></td> +<form> +<td colspan="2" align="center"><input id="download_data" type="button" value="Download Data" style="height:28px"/> +</td> +</form> + +</tr> + +<tr> +<td colspan="4"> +<div id="Image"><img src="@parameters.getImage()" width=680 /></div> +</td> +</tr> + +<tr> +<td colspan="4" align="center"> +<textarea readonly id="data_url" cols="130" rows="2">@parameters.getDataURL()</textarea> +</td> +</tr> + +<tr> +<td colspan="4" align="center"> +<textarea id="Response" cols="130" rows="6">@parameters.getServiceResponseText()</textarea> +</td> +</tr> + </table> -} +} \ No newline at end of file
http://git-wip-us.apache.org/repos/asf/incubator-cmda/blob/ca952ad9/ApacheCMDA-Frontend/app/views/climate/correlationMap.scala.html ---------------------------------------------------------------------- diff --git a/ApacheCMDA-Frontend/app/views/climate/correlationMap.scala.html b/ApacheCMDA-Frontend/app/views/climate/correlationMap.scala.html index 5b862da..a9f2793 100644 --- a/ApacheCMDA-Frontend/app/views/climate/correlationMap.scala.html +++ b/ApacheCMDA-Frontend/app/views/climate/correlationMap.scala.html @@ -1,44 +1,31 @@ -@******************************************************************************* - * Licensed to the Apache Software Foundation (ASF) under one or more * - * contributor license agreements. See the NOTICE file distributed with * - * this work for additional information regarding copyright ownership. * - * The ASF licenses this file to You under the Apache License, Version 2.0 * - * (the "License"); you may not use this file except in compliance with * - * the License. You may obtain a copy of the License at * - * * - * http://www.apache.org/licenses/LICENSE-2.0 * - * * - * Unless required by applicable law or agreed to in writing, software * - * distributed under the License is distributed on an "AS IS" BASIS, * - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * - * See the License for the specific language governing permissions and * - * limitations under the License. * - *******************************************************************************@ - -@(parameters: metadata.CorrelationMap) @import helper._ +@(parameters: metadata.CorrelationMap) + +@import helper._ + <link rel="stylesheet" href='@routes.Assets.at("stylesheets/livefitler.css")'> + @scripts = { -<script src='@routes.Assets.at("javascripts/edit_button.js")'></script> -<script src='@routes.Assets.at("javascripts/livefilter.js")'></script> -<script type="text/javascript" - src='@routes.Assets.at("javascripts/jquery-1.9.0.min.js")'></script> -<script type="text/javascript" - src='https://cdnjs.cloudflare.com/ajax/libs/flot/0.8.3/jquery.flot.min.js'></script> + <script src='@routes.Assets.at("javascripts/edit_button.js")'></script> + <script src='@routes.Assets.at("javascripts/livefilter.js")'></script> + <script type="text/javascript" src='@routes.Assets.at("javascripts/jquery-1.9.0.min.js")'></script> + <script type="text/javascript" src='https://cdnjs.cloudflare.com/ajax/libs/flot/0.8.3/jquery.flot.min.js'></script> <script type="text/javascript" src='@routes.Assets.at("javascripts/json2.js")'></script> -<script type="text/javascript" - src='@routes.Assets.at("javascripts/xmisc.js")'></script> -<script type="text/javascript" - src='@routes.Assets.at("html/js2/dataList2.js")'></script> -<script type="text/javascript" - src='@routes.Assets.at("html/js2/varList.js")'></script> -<script type="text/javascript" - src='@routes.Assets.at("html/js2/common.js")'></script> -<script type="text/javascript"> + <script type="text/javascript" src='@routes.Assets.at("javascripts/xmisc.js")'></script> + <script type="text/javascript" src='@routes.Assets.at("html/js2/dataList2.js")'></script> + <script type="text/javascript" src='@routes.Assets.at("html/js2/varList.js")'></script> + <script type="text/javascript" src='@routes.Assets.at("html/js2/common.js")'></script> + + <script type="text/javascript"> + var Response = null; var variable1 = ""; var variable2 = ""; + + + // called on load or reload window.onload = function() { + put_data(1); changeDataSource1(); put_data(2); @@ -47,28 +34,41 @@ changeVariableName1(); put_var(2); changeVariableName2(); + + enable_download_button(); + + $('#t0').val($('#startYearMonth').text()); $('#t1').val($('#endYearMonth').text()); + if($('#pressureLevel1').text() == "-9999"){ disable_pres1(1); }else{ $('#pres1').val($('#pressureLevel1').text()); } + if($('#pressureLevel2').text() == "-9999"){ disable_pres1(2); }else{ $('#pres2').val($('#pressureLevel2').text()); } + $('#lat0').val($('#startLat').text()); $('#lat1').val($('#endLat').text()); + $('#lon0').val($('#startLon').text()); $('#lon1').val($('#endLon').text()); + $('#laggedTime').html($('#executionLaggedTime').text()); + $('#purpose').html($('#executionPurpose').text()); $('#data_url').html($('#dataURL').text()); $('#Response').html($('#serviceResponseText').text()); + } + + // disable pressure level box for 2D var function disable_pres1(ID) { var x; @@ -76,6 +76,8 @@ x.value = "N/A"; x.disabled=true; } + + // enable pressure level box for 3D var function enable_pres1(ID) { var x; @@ -83,9 +85,12 @@ x.value = "500"; x.disabled=false; } + function changeDataSource1() { var dataSource = $('#dataSource1').text(); + var x = document.getElementById("data1"); + if(dataSource == "gfdl_esm2g" ){ x.options[0].selected=true; } @@ -162,8 +167,10 @@ x.options[24].selected=true; } } + function changeDataSource2() { var dataSource = $('#dataSource2').text(); + //dataSource = "NASA_QuikSCAT"; var x = document.getElementById("data2"); if(dataSource == "gfdl_esm2g" ){ x.options[0].selected=true; @@ -201,7 +208,7 @@ else if(dataSource == "ukmo_hadgem2-a" ){ x.options[11].selected=true; } - else if(dataSource == "nasa_grace" ){ + else if(dataSource == "nasa_grace" ){ ////////////////////////////////// x.options[12].selected=true; } else if(dataSource == "nasa_modis" ){ @@ -241,44 +248,61 @@ x.options[24].selected=true; } } + + + function changeVariableName1(){ var var_string = $('#variableName1').text(); var data_string = $('#dataSource1').text(); data_string = data_string.replace("_", "/").toUpperCase(); + + var varList2 = dataList[data_string][1]; var x = document.getElementById("var1"); + for (var i=0; i<varList2.length; i++) { var k = varList2[i]; + if (k == var_string) { x.options[i].selected=true; break; } } } + function changeVariableName2(){ var var_string = $('#variableName2').text(); var data_string = $('#dataSource2').text(); data_string = data_string.replace("_", "/").toUpperCase(); + + var varList2 = dataList[data_string][1]; var x = document.getElementById("var2"); + for (var i=0; i<varList2.length; i++) { var k = varList2[i]; + if (k == var_string) { x.options[i].selected=true; break; } } } + function disable_download_button() { var x=document.getElementById("download_data"); x.disabled=true; } + + // enable download data button function enable_download_button() { var x=document.getElementById("download_data"); x.disabled=false; } + + // disable pressure level box for 2D var function disable_pres1(ID) { var x; @@ -286,6 +310,8 @@ x.value = "N/A"; x.disabled=true; } + + // enable pressure level box for 3D var function enable_pres1(ID) { var x; @@ -293,8 +319,10 @@ x.value = "500"; x.disabled=false; } + function put_data(ID){ var list1=document.getElementById("data"+ID); + for(var key in dataList) { if (key.slice(0,5)==="group") { var og = document.createElement("OPTGROUP"); @@ -305,101 +333,164 @@ } } } + function put_var(ID) { var list1=document.getElementById("var"+ID); for (var i=list1.length-1; i>=0; i--) { list1.remove(i); } + data_string = document.getElementById("data"+ID).value; var varList2 = dataList[data_string][1]; for (var i=0; i<varList2.length; i++) { var k = varList2[i]; list1.add(new Option(varList[k][0],k)); } + } + + // function select_var1(ID) { var var_string = $("#var"+ID).val(); + + // alert("var_string: " + var_string) + if (varList[var_string][2]===3) { enable_pres1(ID); } else { disable_pres1(ID); } + + //alert("variable1: " + var_string); + var var_string1 = $("#var"+1).val(); var var_string2 = $("#var"+2).val(); var data_string1 = $("#data"+1).val(); var data_string2 = $("#data"+2).val(); + var sTime = Math.max( Number(dataList[data_string1][2][var_string1][0]), Number(dataList[data_string2][2][var_string2][0]) ); var eTime = Math.min( Number(dataList[data_string1][2][var_string1][1]), Number(dataList[data_string2][2][var_string2][1]) ); + $("#startYear").html("start year-month: (earliest:" + sTime + ")"); $("#endYear").html("end year-month: (latest:" + eTime + ")"); } + $(document).ready(function(){ + $("#download_data").click(function(event) { var durl = $("#data_url").val(); + // alert(durl); window.location.assign(durl); }); + + $("#correlationMap").click(function(event) { + // alert('****** inside correlationMap()!'); Response = null; + + // no data to download yet disable_download_button(); + $("#Response").html("Calculating ..."); $("#data_url").html("Calculating ..."); $("#Image").html(""); + + // sample url: http://cmacws.jpl.nasa.gov:8090/svc/scatterPlot2V?model1=ukmo_hadgem2-a&var1=ts&pres1=200&model2=ukmo_hadgem2-a&var2=clt&pres2=200&start_time=199001&end_time=199512&lon1=0&lon2=100&lat1=-29&lat2=29 + // form url string + // var url = "http://cmacws.jpl.nasa.gov:8090/svc/scatterPlot2V?";; var url = "http://"; + window.location.hostname + ":9002/svc/correlationMap?"; + // alert("url: " + url); + var d1 = $("#data1").val(); var model1 = d1.replace("/", "_"); model1 = model1.toLowerCase(); + var arglist = ""; arglist = arglist.concat("model1="); arglist = arglist.concat(model1); + + // alert("arglist: " + arglist); + var variable1 = $("#var1").val(); arglist = arglist.concat("&var1="); arglist = arglist.concat(variable1); + + // alert("arglist: " + arglist); + var pres1 = $("#pres1").val(); if (isNaN(Number(pres1))) { pres1 = "-9999"; } arglist = arglist.concat("&pres1="); arglist = arglist.concat(pres1); + var d2 = $("#data2").val(); var model2 = d2.replace("/", "_"); model2 = model2.toLowerCase(); + arglist = arglist.concat("&model2="); arglist = arglist.concat(model2); + + // alert("arglist: " + arglist); + var variable2 = $("#var2").val(); arglist = arglist.concat("&var2="); arglist = arglist.concat(variable2); + + // alert("arglist: " + arglist); + var pres2 = $("#pres2").val(); if (isNaN(Number(pres2))) { pres2 = "-9999"; } arglist = arglist.concat("&pres2="); arglist = arglist.concat(pres2); + var laggedTime = $("#laggedTime").val(); arglist = arglist.concat("&laggedTime="); arglist = arglist.concat(laggedTime); + var t0 = $("#t0").val(); var t1 = $("#t1").val(); + t0 = t0.replace("-", ""); t1 = t1.replace("-", ""); + arglist = arglist.concat("&start_time="); arglist = arglist.concat(t0); + arglist = arglist.concat("&end_time="); arglist = arglist.concat(t1); + + // alert("arglist: " + arglist); + var lon0 = $("#lon0").val(); var lon1 = $("#lon1").val(); var lat0 = $("#lat0").val(); var lat1 = $("#lat1").val(); + arglist = arglist.concat("&lon1="); arglist = arglist.concat(lon0); + arglist = arglist.concat("&lon2="); arglist = arglist.concat(lon1); + arglist = arglist.concat("&lat1="); arglist = arglist.concat(lat0); + arglist = arglist.concat("&lat2="); arglist = arglist.concat(lat1); + + // alert("arglist: " + arglist); + var purpose = $("#purpose").val(); arglist = arglist.concat("&purpose="); arglist = arglist.concat(purpose); + + // url = url + encodeURIComponent(arglist); url = url + encodeURI(arglist); + // url = url + arglist; + // alert("url: " + url); + var urlTimeBounds = "http://"; + window.location.hostname + ":9002/svc/two_time_bounds?"; var arglistTB = ""; arglistTB = arglistTB.concat("serviceType="); @@ -413,6 +504,7 @@ arglistTB = arglistTB.concat("&var2="); arglistTB = arglistTB.concat(variable2); urlTimeBounds = urlTimeBounds + encodeURI(arglistTB); + $.ajax({ type: "GET", url: urlTimeBounds, @@ -420,7 +512,9 @@ data: null, success: function(data, textStatus, xhr) { Response = data; + // alert("data: " + data); if (data.success == false) { + // alert(data.error); Response = null; var text = JSON.stringify(data, null, 4); text = "Error in backend: <br>" + text; @@ -429,57 +523,82 @@ return; } var text = JSON.stringify(data, null, 4); + // alert("text: " + text); + // $("#Response").html("<pre>"+text+"</pre>"); + // $("#Response").html(text); + var tb1 = data.time_bounds1; var bds1 = String(tb1).split(","); + // alert("tb1: " + tb1); + // alert("bds1: " + bds1); var lowerT1 = parseInt(bds1[0]); + // alert("inside ajax, lowerT1: " + lowerT1); var upperT1 = parseInt(bds1[1]); + // alert("upperT1: " + upperT1); + var tb2 = data.time_bounds2; var bds2 = String(tb2).split(","); + // alert("tb2: " + tb2); + // alert("bds2: " + bds2); var lowerT2 = parseInt(bds2[0]); + // alert("inside ajax, lowerT2: " + lowerT2); var upperT2 = parseInt(bds2[1]); + // alert("upperT2: " + upperT2); + var t0I = parseInt(t0); var t1I = parseInt(t1); + // alert("t0: " + t0I); + // alert("t1: " + t1I); + var lowerT, upperT; - if (lowerT1 == 0 || upperT1 == 0){ + // compute the intersection of the two data bounds + if (lowerT1 == 0 || upperT1 == 0){ // no data-1 alert("We do not have data for the data-1 source and variable configuration."); alert(urlTimeBounds); return; } - else if (lowerT2 == 0 || upperT2 == 0){ + else if (lowerT2 == 0 || upperT2 == 0){ // no data-2 alert("We do not have data for the data-2 source and variable configuration."); return; } - else if (lowerT2 > upperT1 || lowerT1 > upperT2) { + else if (lowerT2 > upperT1 || lowerT1 > upperT2) { // no intersection alert("The two data sets/vars do not have a common time range."); return; } - else { - if (lowerT1 > lowerT2) { + else { // compute intersection + if (lowerT1 > lowerT2) { // pick bigger lower time bound lowerT = lowerT1; } else { lowerT = lowerT2; } - if (upperT1 > upperT2) { + + if (upperT1 > upperT2) { // pick smaller upper time bound upperT = upperT2; } else { upperT = upperT1; } } + // alert("lowerT: " + lowerT); + // alert("upperT: " + upperT); + if (t0I < lowerT && t1I < lowerT || t0I > upperT && t1I > upperT) { alert("We do not have data that span your time range. Try the range inside ["+lowerT+", "+upperT+"]."); return; } + if (t0I < lowerT && t1I <= upperT) { alert("Your start year-month is out of bound. It has to be in or later than " + lowerT + ". We will use the range ["+lowerT+", "+t1I+"] for you."); } + if (t1I > upperT && t0I >= lowerT) { alert("Your end year-month is out of bound. It has to be in or earlier than " + upperT + ". We will use the range ["+t0I+", "+upperT+"] for you."); } + if (t0I < lowerT && t1I > upperT ) { alert("Both of your start and end year-months are out of bounds. They have to be in or earlier than " + upperT + ", and in or later than " + lowerT + ". We will use the range ["+lowerT+", "+upperT+"] for you."); @@ -488,10 +607,15 @@ error: function(xhr, textStatus, errorThrown) { $("#Response").html("error!"); $("#data_url").html("error!"); + // alert("xhr.status: "+xhr.status); + // alert("error status: "+textStatus); }, complete: function(xhr, textStatus) { + //alert("complete status: "+textStatus); } }); + + $.ajax({ type: "GET", url: url, @@ -499,34 +623,51 @@ data: null, success: function(data, textStatus, xhr) { Response = data; + // alert("data: " + data); + // alert(url); if (data.success == false) { + // alert(data.error); Response = null; var text = JSON.stringify(data, null, 4); + if (text.indexOf("No Data") != -1) { $("#Image").html("No Data"); $("#Response").html("No Data"); $("#data_url").html("No Data"); return; } + text = "Error in backend: <br>" + text; + // $("#Response").html("<span style='color:red'>" + text + "</span>"); $("#Response").html(text); $("#data_url").html(text); + return; } var text = JSON.stringify(data, null, 4); + // alert(text); + // $("#Response").html("<pre>"+text+"</pre>"); $("#Response").html(text); + var html = "<img src='" + data.url + "?" + new Date().getTime() + "' width='820'/>"; + // alert(html); $("#Image").html(html); + + // post dataUrl to textarea and enable download button $("#data_url").html(data.dataUrl); enable_download_button(); }, error: function(xhr, textStatus, errorThrown) { $("#Response").html("error!"); $("#data_url").html("error!"); + // alert("xhr.status: "+xhr.status); + // alert("error status: "+textStatus); }, complete: function(xhr, textStatus) { + //alert("complete status: "+textStatus); } }); + }); }); </script> @@ -548,115 +689,138 @@ <div id="executionPurpose" style="display: none;">@parameters.getExecutionPurpose()</div> <div id="dataURL" style="display: none;">@parameters.getDataURL()</div> <div id="serviceResponseText" style="display: none;">@parameters.getServiceResponseText()</div> + + <table border="1"> - <tr> - <td colspan="4"> - <center> - <b>Service: Time-Lagged Correlation Map of Two Variables</b><br> - <br> This service generates a time-lagged correlation map - between two specified variables. <br>The two variables can be - either a two-dimensional variable or a slice of a three-dimensional - variable at a specific pressure level. <br> <br> - </center> - </td> - </tr> - <tr> - <td colspan="2"> - <center>data1[t-lag]</center> - </td> - <td colspan="2"> - <center>data2[t]</center> - </td> - </tr> - <tr> - <td>source:</td> - <td><select name="data1" , id="data1" - onchange="put_var(1); select_var1(1)"> - </select></td> - <td>source:</td> - <td><select name="data2" , id="data2" - onchange="put_var(2); select_var1(2)"> - </select></td> - </tr> - <tr> - <td>variable name:</td> - <td><select name="var1" , id="var1" onchange="select_var1(1)"></select></td> - <td>variable name:</td> - <td><select name="var2" , id="var2" onchange="select_var1(2)"></select></td> - </tr> - <tr> - <td>atmosphere pressure level (hPa) <br> or ocean pressure - level (dbar) - </td> - <td><input id="pres1" value="@parameters.getPressureLevel1()" - alt="pressure" /></td> - <td>atmosphere pressure level (hPa) <br> or ocean pressure - level (dbar) - </td> - <td><input id="pres2" value="@parameters.getPressureLevel2()" - alt="pressure" /></td> - </tr> - <tr> - </tr> - <tr> - <td id=startYear>start year-month:</td> - <td><input id="t0" value="@parameters.getStartYear()" alt="start" /></td> - <td id=endYear>end year-month:</td> - <td><input id="t1" value="@parameters.getEndYear()" alt="end" /></td> - </tr> - <tr> - <td>start lat (deg):</td> - <td><input id="lat0" value="@parameters.getStartLat()" /></td> - <td>end lat (deg):</td> - <td><input id="lat1" value="@parameters.getEndLat()" /></td> - </tr> - <tr> - <td>start lon (deg):</td> - <td><input id="lon0" value="@parameters.getStartLon()" /></td> - <td>end lon (deg):</td> - <td><input id="lon1" value="@parameters.getEndLon()" /></td> - </tr> - <tr> - <td></td> - <td colspan="2"><center> - lag (month):<input id="laggedTime" - value="@parameters.getLaggedTime()" /> - </center></td> - <td></td> - </tr> - </tr> - <tr> - <td colspan="1">Execution purpose</td> - <td colspan="3"> - <form> - <textarea name="purpose" id="purpose" rows="4" cols="50">@parameters.getExecutionPurpose()</textarea> - </form> - </td> - </tr> - <tr> - <tr> - <td colspan="2" align="center"><input id="correlationMap" - type="submit" value=" Run Again " - style="height: 28px" /></td> - <form> - <td colspan="2" align="center"><input id="download_data" - type="button" value="Download Data" style="height: 28px" /></td> - </form> - </tr> - <tr> - <td colspan="4"> - <div id="Image"> - <img src="@parameters.getImage()" width=680 /> - </div> - </td> - </tr> - <tr> - <td colspan="4" align="center"><textarea readonly id="data_url" - cols="130" rows="2">@parameters.getDataURL()</textarea></td> - </tr> - <tr> - <td colspan="4" align="center"><textarea id="Response" cols="130" - rows="6">@parameters.getServiceResponseText()</textarea></td> - </tr> + +<tr> +<td colspan="4"> +<center> +<b>Service: Time-Lagged Correlation Map of Two Variables</b><br><br> +This service generates a time-lagged correlation map between two specified variables. +<br>The two variables can be either a two-dimensional variable or a slice of a three-dimensional variable at a specific pressure level. <br><br> +</center> +</td> +</tr> + +<tr> +<td colspan="2"> +<center> +data1[t-lag] +</center> +</td> + +<td colspan="2"> +<center> +data2[t] +</center> +</td> +</tr> + +<tr> +<td>source:</td> +<td><select name="data1", id="data1" onchange="put_var(1); select_var1(1)"> +</select></td> + +<td>source:</td> +<td><select name="data2", id="data2" onchange="put_var(2); select_var1(2)"> +</select></td> + +</tr> + +<tr> + +<td>variable name:</td><td><select name="var1", id="var1" onchange="select_var1(1)"> +</select> +</td> + +<td>variable name:</td><td><select name="var2", id="var2" onchange="select_var1(2)"> +</select> + +</td> + +</tr> + +<tr> + +<td> +atmosphere pressure level (hPa) <br> or ocean pressure level (dbar) +</td> +<td> +<input id="pres1" value="@parameters.getPressureLevel1()" alt="pressure"/> +</td> + +<td> +atmosphere pressure level (hPa) <br> or ocean pressure level (dbar) +</td> +<td> +<input id="pres2" value="@parameters.getPressureLevel2()" alt="pressure"/> +</td> + +</tr> + +<tr> +</tr> + +<tr> +<td id=startYear>start year-month:</td><td><input id="t0" value="@parameters.getStartYear()" alt="start"/></td> +<td id=endYear>end year-month:</td><td><input id="t1" value="@parameters.getEndYear()" alt="end"/></td> +</tr> + + +<tr> +<td>start lat (deg):</td><td><input id="lat0" value="@parameters.getStartLat()"/></td> +<td>end lat (deg):</td><td><input id="lat1" value="@parameters.getEndLat()"/></td> +</tr> + +<tr> +<td>start lon (deg):</td><td><input id="lon0" value="@parameters.getStartLon()"/></td> +<td>end lon (deg):</td><td><input id="lon1" value="@parameters.getEndLon()"/></td> +</tr> + +<tr> +<td></td> +<td colspan="2"><center>lag (month):<input id="laggedTime" value="@parameters.getLaggedTime()"/></center></td><td></td></tr> +</tr> + +<tr> +<td colspan="1"> +Execution purpose +</td> +<td colspan="3"> +<form> +<textarea name="purpose" id="purpose" rows="4" cols="50">@parameters.getExecutionPurpose()</textarea> +</form> +</td> +</tr> +<tr> + +<tr> +<td colspan="2" align="center"><input id="correlationMap" type="submit" value=" Run Again " style="height:28px"/></td> +<form> +<td colspan="2" align="center"><input id="download_data" type="button" value="Download Data" style="height:28px"/> +</td> +</form> + +</tr> + +<tr> +<td colspan="4"> +<div id="Image"><img src="@parameters.getImage()" width=680 /></div> +</td> +</tr> + +<tr> +<td colspan="4" align="center"> +<textarea readonly id="data_url" cols="130" rows="2">@parameters.getDataURL()</textarea> +</td> +</tr> + +<tr> +<td colspan="4" align="center"> +<textarea id="Response" cols="130" rows="6">@parameters.getServiceResponseText()</textarea> +</td> +</tr> + </table> -} +} \ No newline at end of file http://git-wip-us.apache.org/repos/asf/incubator-cmda/blob/ca952ad9/ApacheCMDA-Frontend/app/views/climate/dataRecommend.scala.html ---------------------------------------------------------------------- diff --git a/ApacheCMDA-Frontend/app/views/climate/dataRecommend.scala.html b/ApacheCMDA-Frontend/app/views/climate/dataRecommend.scala.html index 83ddcd0..4f4db50 100644 --- a/ApacheCMDA-Frontend/app/views/climate/dataRecommend.scala.html +++ b/ApacheCMDA-Frontend/app/views/climate/dataRecommend.scala.html @@ -1,20 +1,3 @@ -@******************************************************************************* - * Licensed to the Apache Software Foundation (ASF) under one or more * - * contributor license agreements. See the NOTICE file distributed with * - * this work for additional information regarding copyright ownership. * - * The ASF licenses this file to You under the Apache License, Version 2.0 * - * (the "License"); you may not use this file except in compliance with * - * the License. You may obtain a copy of the License at * - * * - * http://www.apache.org/licenses/LICENSE-2.0 * - * * - * Unless required by applicable law or agreed to in writing, software * - * distributed under the License is distributed on an "AS IS" BASIS, * - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * - * See the License for the specific language governing permissions and * - * limitations under the License. * - *******************************************************************************@ - @(jsonData: String) @import helper._ http://git-wip-us.apache.org/repos/asf/incubator-cmda/blob/ca952ad9/ApacheCMDA-Frontend/app/views/climate/dataSetList.scala.html ---------------------------------------------------------------------- diff --git a/ApacheCMDA-Frontend/app/views/climate/dataSetList.scala.html b/ApacheCMDA-Frontend/app/views/climate/dataSetList.scala.html index 821183c..a3a1f2e 100644 --- a/ApacheCMDA-Frontend/app/views/climate/dataSetList.scala.html +++ b/ApacheCMDA-Frontend/app/views/climate/dataSetList.scala.html @@ -1,20 +1,3 @@ -@******************************************************************************* - * Licensed to the Apache Software Foundation (ASF) under one or more * - * contributor license agreements. See the NOTICE file distributed with * - * this work for additional information regarding copyright ownership. * - * The ASF licenses this file to You under the Apache License, Version 2.0 * - * (the "License"); you may not use this file except in compliance with * - * the License. You may obtain a copy of the License at * - * * - * http://www.apache.org/licenses/LICENSE-2.0 * - * * - * Unless required by applicable law or agreed to in writing, software * - * distributed under the License is distributed on an "AS IS" BASIS, * - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * - * See the License for the specific language governing permissions and * - * limitations under the License. * - *******************************************************************************@ - @(dataSets: List[DataSet], dataSetForm: play.data.Form[DataSet]) @import helper._ http://git-wip-us.apache.org/repos/asf/incubator-cmda/blob/ca952ad9/ApacheCMDA-Frontend/app/views/climate/datasetTime.scala.html ---------------------------------------------------------------------- diff --git a/ApacheCMDA-Frontend/app/views/climate/datasetTime.scala.html b/ApacheCMDA-Frontend/app/views/climate/datasetTime.scala.html index cfa8375..f714e75 100644 --- a/ApacheCMDA-Frontend/app/views/climate/datasetTime.scala.html +++ b/ApacheCMDA-Frontend/app/views/climate/datasetTime.scala.html @@ -1,20 +1,3 @@ -@******************************************************************************* - * Licensed to the Apache Software Foundation (ASF) under one or more * - * contributor license agreements. See the NOTICE file distributed with * - * this work for additional information regarding copyright ownership. * - * The ASF licenses this file to You under the Apache License, Version 2.0 * - * (the "License"); you may not use this file except in compliance with * - * the License. You may obtain a copy of the License at * - * * - * http://www.apache.org/licenses/LICENSE-2.0 * - * * - * Unless required by applicable law or agreed to in writing, software * - * distributed under the License is distributed on an "AS IS" BASIS, * - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * - * See the License for the specific language governing permissions and * - * limitations under the License. * - *******************************************************************************@ - @(message: String) @scripts = { http://git-wip-us.apache.org/repos/asf/incubator-cmda/blob/ca952ad9/ApacheCMDA-Frontend/app/views/climate/header.scala.html ---------------------------------------------------------------------- diff --git a/ApacheCMDA-Frontend/app/views/climate/header.scala.html b/ApacheCMDA-Frontend/app/views/climate/header.scala.html index 0cae470..0cedc93 100644 --- a/ApacheCMDA-Frontend/app/views/climate/header.scala.html +++ b/ApacheCMDA-Frontend/app/views/climate/header.scala.html @@ -1,19 +1,3 @@ -@******************************************************************************* - * Licensed to the Apache Software Foundation (ASF) under one or more * - * contributor license agreements. See the NOTICE file distributed with * - * this work for additional information regarding copyright ownership. * - * The ASF licenses this file to You under the Apache License, Version 2.0 * - * (the "License"); you may not use this file except in compliance with * - * the License. You may obtain a copy of the License at * - * * - * http://www.apache.org/licenses/LICENSE-2.0 * - * * - * Unless required by applicable law or agreed to in writing, software * - * distributed under the License is distributed on an "AS IS" BASIS, * - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * - * See the License for the specific language governing permissions and * - * limitations under the License. * - *******************************************************************************@ @() <div class="navbar navbar-default navbar-fixed-top" role="navigation"> @@ -47,8 +31,10 @@ class="caret"></b></a> <ul class="dropdown-menu"> - <li><a href="@routes.DatasetController.datasetList()">Dataset List</a></li> - <li><a href="@routes.DatasetController.searchDataset()">Search dataset</a></li> + <li><a href="@routes.dataSetController.datasetList()">Dataset List</a></li> + <!-- <li><a href="@routes.dataSetController.searchDataset()">Search dataset</a></li>--> + <li><a href='@{routes.ClimateServiceController.inframeService("dataSet/searchDataSet")}'>Search dataset</a></li> + </ul> </li> <li class="dropdown"><a href="#" @@ -57,6 +43,7 @@ <ul class="dropdown-menu"> <li><a href="@routes.AccountController.getServiceLog">Service Execution Log List</a></li> <li><a href="@routes.AccountController.searchServiceLog">Service Execution Log Search</a></li> + <li><a href="@routes.AnalyticsController.getKnowledgeGraph">Knowledge Graph</a></li> </ul> </li> @@ -65,11 +52,30 @@ class="caret"></b></a> <ul class="dropdown-menu"> <li><a href="@routes.ClimateServiceController.home()">Home</a></li> - <li><a href="@routes.AboutusController.aboutUs()">About Us</a></li> + <li><a href="@routes.AboutusController.aboutus()">About Us</a></li> <li><a href="@routes.AboutusController.aboutProject()">About project</a></li> </ul> </li> + <!-- + @if(!session.get("username")){ + + <form class="navbar-form navbar-right" action="@routes.ClimateServiceController.authenticate()"> + <button type="submit" class="btn btn-success">Log in</button> + </form> + }else{ + <li><a href="/estimator/tutorial">Estimator</a></li> + <form class="navbar-form navbar-right" action="@routes.ClimateServiceController.logout()"> + <button type="submit" class="btn btn-success">Log out</button> + </form> + } + + @if(false){ + <form class="navbar-form navbar-right" action="@routes.NasaRegistrationController.adminPage()"> + <button type="submit" class="btn btn-success">Admin Console</button> + </form> + } + --> </ul> </div> <!--/.nav-collapse --> http://git-wip-us.apache.org/repos/asf/incubator-cmda/blob/ca952ad9/ApacheCMDA-Frontend/app/views/climate/home.scala.html ---------------------------------------------------------------------- diff --git a/ApacheCMDA-Frontend/app/views/climate/home.scala.html b/ApacheCMDA-Frontend/app/views/climate/home.scala.html index 1803838..b7059af 100644 --- a/ApacheCMDA-Frontend/app/views/climate/home.scala.html +++ b/ApacheCMDA-Frontend/app/views/climate/home.scala.html @@ -1,20 +1,3 @@ -@******************************************************************************* - * Licensed to the Apache Software Foundation (ASF) under one or more * - * contributor license agreements. See the NOTICE file distributed with * - * this work for additional information regarding copyright ownership. * - * The ASF licenses this file to You under the Apache License, Version 2.0 * - * (the "License"); you may not use this file except in compliance with * - * the License. You may obtain a copy of the License at * - * * - * http://www.apache.org/licenses/LICENSE-2.0 * - * * - * Unless required by applicable law or agreed to in writing, software * - * distributed under the License is distributed on an "AS IS" BASIS, * - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * - * See the License for the specific language governing permissions and * - * limitations under the License. * - *******************************************************************************@ - @(email: String, vfile: String, dataset: String) @import helper._
