igor/org.ccalm.main
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
e3f93fed10c95ca13ebfca3b92004ba2748b705e
org.ccalm.main/src/main/resources/templates/engine/index.html
igor 39db27fca1 repair warn_air
2025-07-04 07:27:49 +05:00

2063 lines
96 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="shortcut icon" href="../resources/favicon.ico" />
<title th:text="${Automated_system_of_data_collection_ASDC}">Automated_system_of_data_collection_ASDC</title>
<link rel="stylesheet" href="../resources/engine/css/buttons.css?v=8">
<link rel="stylesheet" href="../resources/engine/normalize.css?v=8">
<link rel="stylesheet" href="../resources/engine/index.css?v=8">
<script type="text/javascript" src="../resources/metadata/include/jscalendar/src/js/jscal2.js"></script>
<script type="text/javascript" src="../resources/metadata/include/jscalendar/src/js/lang/ru.js"></script>
<link rel="stylesheet" type="text/css" href="../resources/metadata/include/jscalendar/src/css/jscal2.css"/>
<link rel="stylesheet" type="text/css" href="../resources/metadata/include/jscalendar/src/css/border-radius.css"/>
<link rel="stylesheet" type="text/css" href="../resources/metadata/include/jscalendar/src/css/steel/steel.css"/>
<link rel="stylesheet" href="../resources/engine/openlayers/ol.css" type="text/css">
<!--script src="https://cdn.tailwindcss.com"></script-->
<script type="text/javascript" src="../resources/metadata/jquery.js"></script>
<script type="text/javascript" src="../resources/metadata/sprintf.js"></script>
<script type="text/javascript" src="../resources/metadata/qrcode.js"></script>
<script type="text/javascript" src="../resources/metadata/vue.js"></script>
<script type="text/javascript" src="../resources/metadata/vue-router.js"></script>
<!--link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script-->
<script type="text/javascript" src="/api/translation/v01/array"></script>
<link rel="stylesheet" type="text/css" href="../resources/metadata/dbms/dbms.css?v=15"/>
<script type="text/javascript" src="../resources/metadata/dbms/BrowserDetect.js?v=15"></script>
<script type="text/javascript" src="../resources/metadata/dbms/tools.js?v=15"></script>
<script type="text/javascript" src="../resources/metadata/dbms/window.js?v=15"></script>
<script type="text/javascript" src="../resources/metadata/dbms/editrecord.js?v=15"></script>
<script type="text/javascript" src="../resources/metadata/dbms/showrecord.js?v=15"></script>
<script type="text/javascript" src="../resources/metadata/dbms/tabs.js?v=15"></script>
<script type="text/javascript" src="../resources/metadata/dbms/login.js?v=15"></script>
<script type="text/javascript" src="../resources/metadata/dbms/log.js?v=15"></script>
<script type="text/javascript" src="../resources/metadata/tree/tree.js?v=15"></script>
<script type="text/javascript" src="../resources/engine/popup.js?v=15"></script>
<script type="text/javascript" src="../resources/engine/index.js?v=22"></script>
<script type="text/javascript" src="../resources/engine/user.js?v=17"></script>
<style>
html,
body {
height: 100%;
margin:0;
padding:0;
background:#ffffff;
}
select{
box-sizing : border-box;
}
.api {
height: 768px;
border: 1px solid #ddd;
border-radius: 4px;
}
.split p {
padding: 20px;
}
.split {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
overflow-y: auto;
overflow-x: hidden;
}
.gutter {
background-color: #eee;
background-repeat: no-repeat;
background-position: 50%;
}
.gutter.gutter-horizontal {
background-image: url('vertical.png');
cursor: ew-resize;
}
.gutter.gutter-vertical {
background-image: url('horizontal.png');
cursor: ns-resize;
}
.split.split-horizontal, .gutter.gutter-horizontal {
height: 100%;
float: left;
}
.highlight { font-weight: bold; background-color: #a7b2f6; }
.ol-popup {
position: absolute;
background-color: white;
box-shadow: 0 1px 4px rgba(0,0,0,0.2);
padding: 15px;
border-radius: 10px;
border: 1px solid #cccccc;
bottom: 12px;
left: -50px;
min-width: 280px;
}
.ol-popup:after, .ol-popup:before {
top: 100%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.ol-popup:after {
border-top-color: white;
border-width: 10px;
left: 48px;
margin-left: -10px;
}
.ol-popup:before {
border-top-color: #cccccc;
border-width: 11px;
left: 48px;
margin-left: -11px;
}
.ol-popup-closer {
text-decoration: none;
position: absolute;
top: 2px;
right: 8px;
}
.ol-popup-closer:after {
content: "✖";
}
</style>
<script type="application/javascript">
if(window.location.host.indexOf('locust.kz')>=0){
window.location.href = "https://ccalm.org";
}
(function() {
var lastTime = 0;
var vendors = ['ms', 'moz', 'webkit', 'o'];
for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame'];
window.cancelAnimationFrame = window[vendors[x]+'CancelAnimationFrame']
|| window[vendors[x]+'CancelRequestAnimationFrame'];
}
if (!window.requestAnimationFrame)
window.requestAnimationFrame = function(callback, element) {
var currTime = new Date().getTime();
var timeToCall = Math.max(0, 16 - (currTime - lastTime));
var id = window.setTimeout(function() { callback(currTime + timeToCall); },
timeToCall);
lastTime = currTime + timeToCall;
return id;
};
if (!window.cancelAnimationFrame)
window.cancelAnimationFrame = function(id) {
clearTimeout(id);
};
}());
var map=null;
var vectorSource=null;
var vectorSourceV=null;
var vectorSourceDel=null;
var vectorSourceCheckpoint=null;
var m_winPP=null;
var g_Login=null; //Form and authorization mechanism.
var g_user=null;
//var g_WinLegend1 = null;
//var m_FrmLocust=null;
//var m_FrmLocustDel=null;
var g_FrmCheckpoints=null;
var g_WeaLegend=null; //Legends
var g_AirLegend=null;
var g_PreLegend=null;
var g_HTCLegend=null;
//Decode URL parameters.
var GET = {};
var query = window.location.search.substring(1).split("&");
for (var i = 0, max = query.length; i < max; i++)
{
if (query[i] === "") // check for trailing & with no param
continue;
var param = query[i].split("=");
GET[decodeURIComponent(param[0])] = decodeURIComponent(param[1] || "");
}
function showDataWindow(TypeName)
{
rec=new SRec();
rec.create(null);
//rec.f_TypeName=TypeName;
//rec.f_Settings='';
//rec.win.setSize("400px","100px");
rec.win.setHeight(500);
//rec.win.setLeftTop(300,40);
rec.win.setCenter();
//rec.request.callServer(ScriptName,'<metadata fn="0"><type n="'+rec.f_TypeName+'"></type></metadata>');
let settings='';
if(TypeName=='_Users' && !g_user.getAccess("show_all")){
settings='';
settings+="<metadata><type n=\"_Users\">";
settings+=" <objects-list>";
settings+=" <filter>";
settings+=" <column n=\"country_id\" visible=\"0\"></column>";
settings+=" </filter>";
settings+=" </objects-list>";
settings+="</type></metadata>";
}else if(TypeName=='Terminals'){
rec.onInsert=function(erec){
let obj = document.getElementById('add_plase_'+erec.uid);
obj.innerHTML = '';
let button = document.createElement('input');
button.classList.add('button-secondary');
button.setAttribute("type","button");
button.setAttribute("value",trt('Apply_and_generate_QR_code'));
//button.style.cssText="width:30px;font-size:9pt;margin:0px;padding:0px;";
button.onclick=function(erec){ return function(){
erec.sendData();
erec.onInserted=()=>{
let win=new TWin();
win.BuildGUI(pageX-10,pageY-10);
win.setCaption('QR code')
win.setSize("275px","300px");
win.setContent('<div id="qrcode_'+win.uid+'" style="width: 100%; height: 100%;"></div>');
new QRCode(document.getElementById('qrcode_'+win.uid), Math.floor(Date.now() / 1000)+"_"+erec.record_id+"_ccalm");
win.setCenter();
};
};}(erec);
obj.appendChild(button);
};
rec.onUpdate=function(erec){
let obj = document.getElementById('add_plase_'+erec.uid);
obj.innerHTML = '';
let button = document.createElement('input');
button.classList.add('button-secondary');
button.setAttribute("type","button");
button.setAttribute("value",trt('Apply_and_generate_QR_code'));
//button.style.cssText="width:30px;font-size:9pt;margin:0px;padding:0px;";
button.onclick=function(erec){ return function(){
erec.sendData();
erec.onUpdated=()=>{
let win=new TWin();
win.BuildGUI(pageX-10,pageY-10);
win.setCaption('QR code')
win.setSize("275px","300px");
win.setContent('<div id="qrcode_'+win.uid+'" style="width: 100%; height: 100%;"></div>');
new QRCode(document.getElementById('qrcode_'+win.uid), Math.floor(Date.now() / 1000)+"_"+erec.record_id+"_ccalm");
win.setCenter();
};
};}(erec);
obj.appendChild(button);
};
}
rec.callData(TypeName,settings);
}
/*function showFrmLocust()
{
rec=new SRec();
rec.create(document.getElementById("FrmLocust"));
rec.f_TypeName="FrmLocust";
rec.f_Settings='';
rec.request.callServer(ScriptName,'<metadata fn="0"><type n="FrmLocust"></type></metadata>');
m_FrmLocust=rec;
}*/
/*function showFrmLocustDel()
{
//this.create=function(htmlElement)
rec=new SRec();
rec.create(document.getElementById("FrmLocustDel"));
rec.f_TypeName="FrmLocustDel";
rec.f_Settings='';
rec.f_Settings+="<metadata><type n=\"FrmLocustDel\">";
rec.f_Settings+=" <objects-list>";
rec.f_Settings+=" <filter height=\"1\">";
rec.f_Settings+=" <column n=\"user_id\" visible=\"0\"></column>";
//rec.f_Settings+=" <column n=\"date_start\"><![CDATA["+ (new Date(Date.now() - 7776000000)).toString() + "]]\></column>";
//rec.f_Settings+=" <column n=\"date_end\"><![CDATA[" + (new Date(Date.now() + 86400000)).toString() + "]]\></column>";
rec.f_Settings+=" </filter>";
rec.f_Settings+=" <column n=\"lon\" visible=\"0\"/>";
rec.f_Settings+=" <column n=\"lat\" visible=\"0\"/>";
rec.f_Settings+=" <column n=\"changed\" visible=\"0\"/>";
rec.f_Settings+=" <column n=\"photo\" visible=\"0\"/>";
//rec.f_Settings+=" <column n=\"region\" visible=\"0\"/>";
//rec.f_Settings+=" <column n=\"area\" visible=\"0\"/>";
rec.f_Settings+=" </objects-list>";
rec.f_Settings+="</type></metadata>";
rec.request.callServer(ScriptName,'<metadata fn="0"><type n="FrmLocustDel"></type></metadata>');
m_FrmLocustDel=rec;
}*/
function onLoadPage()
{
//document.body.appendChild( this.divsh );
//document.body.appendChild( divsh );
g_user = new TUser();
g_user.setAppId('user_name');
g_user.isLogined();
//g_Login=new TLogin();
//g_Login.win.shadow=false;
//g_Login.create('../metadata/dbms/form/');
//g_Login.addListener(this);
//g_Login.Logined();
//Check whether the user is logged in.
//g_Login=new TLogin();
//g_Login.addListener(this);
//showFrmLocust();
//showFrmLocustDel();
}
</script>
</head>
<body>
<div id="shadow" style="position: fixed; z-index: 1; top:0; left:0; height: 100%; width: 100%; background: rgba(0,0,0,0.3);"></div>
<div id="popup" class="ol-popup">
<a href="#" id="popup-closer" class="ol-popup-closer"></a>
<div id="popup-content"></div>
</div>
<table border="0" style="width:100%;height:100%;">
<tr>
<td style="width:100%; height:27px">
<table style="width:100%;height:100%;">
<tr>
<td style="width:80%;padding-left:5px;color: rgb(100, 100, 100);" id="user_name">{{name}} {{patronymic}} {{surname}} (<span>{{ roles.join(', ') }}</span>)</td>
<td style="padding-left:5px;" th:text="${Language}">Language</td>
<td style="padding-left:5px; width:200px;position: relative;">
<!--select id="lang" onchange="setCookie('lng',this.value,365,'/'); location.reload();" style="width: 95%; position: absolute; transform: translate(0%, -52%); z-index: 10000;"-->
<select id="lang" onchange="setCookie('lng',this.value,365,'/'); location.reload();" style="width: 95%; position: absolute; transform: translate(0%, -52%); z-index: 10000;">
<option value="3">English</option>
<option value="1">Russian Русский</option>
<option value="4">Azerbaijani Azərbaycan</option>
<option value="11">Armenian Հայերեն</option>
<option value="5">Georgian ქართული </option>
<option value="6">Kyrgyz Кыргыз</option>
<option value="2">Kazakh Қазақ</option>
<option value="10">Dari دری</option>
<option value="7">Tajik Тоҷикӣ</option>
<option value="8">Turkman Türkmen</option>
<option value="9">Uzbek Oʼzbekcha</option>
</select>
</td>
<td style="padding-left:5px;"><img src="../resources/engine/log.png" onclick="log.show()" alt="Log" style="cursor: pointer;"></td>
<td style="padding-left:5px;"><img src="../resources/engine/config.png" onclick="showConfigWidget()" alt="config" style="cursor: pointer;"></td>
<td style="padding-left:5px;"><img src="../resources/engine/help.png" onclick="showIFrameWindow(trt('Help'),'../resources/engine/help/index.html')" alt="help" style="cursor: pointer;"></td>
<td style="padding-left:5px;"><img src="../resources/engine/exit.png" alt="exit" title="Logout" onclick="g_user.Logout();" style="cursor: pointer;"></td>
</tr>
</table>
</td>
</tr>
<tr>
<td id="tSplit" style="position: relative; vertical-align:top; width:100%; height:100%;">
<!-- ********** -->
<table border="1" style="width:100%; height:100%;"><tr><td valign="top" style="width: 480px; height:100%;">
<div id="Tabs1" style="width:100%; height: 100%;"></div>
<div id="tab_layouts" style="position: absolute; width:100px; height:100px; padding:3px; overflow:scroll;">
<div style="position: relative; padding-bottom:10px;">
<b style="text-align:left; font-weight:bold;" th:text="${Substrate}"></b>
<table border="0" style="width: 100%;"><tr><td style="padding: 2px;">
<select id="SubstrateID" style="width:100%;" onchange="changeMap();">
<option value="OpenStreetMap">OpenStreetMap</option>
<option value="BingAerial">Bing aerial</option>
<!--option value="yandex">Yandex maps</option-->
<option value="StamenTerrain">Thunderforest Landscape</option>
</select>
</td><td style="padding: 2px; width: 30px;">
<button class="main" style="width:30px;" onclick="openLayoutsWin();">...</button><br>
</td></tr></table>
</div>
<div style="position: relative; padding-left:1px; padding-right:1px; padding-bottom:5px;">
<table id="FrmLocustData" style="border: 1px solid rgb(99, 99, 99); table-layout: auto; width:100%; padding: 10px;background-color:whitesmoke;" cellspacing="2" cellpadding="0">
<caption style="text-align:left; font-weight:bold;" th:text="${Locust_survey}">Locust_survey</caption>
<tbody>
<tr>
<td style="padding: 1px; white-space: nowrap;" th:text="${Country}">Country</td>
<td style="padding: 1px; width: 100%;"><select style="width: 100%;" id="filter_X1_country_id"><option value="1">Afghanistan (افغانستان)</option><option value="2">Armenia (Հայաստան)</option><option value="3">Azərbaycan (Azerbaijan)</option><option value="4">Georgia (საქართველო)</option><option value="5">Kazakhstan (Қазақстан)</option><option value="6">Kyrgyzstan (Кыргызстан)</option><option value="7">Russia (Российская Федерация)</option><option value="8">Tajikistan (Тоҷикистон)</option><option value="9">Turkmenistan (Türkmenistan)</option><option value="10">Uzbekistan (O'zbekiston)</option><option value="" th:text="${All_countries_of_CCA}">All_countries_of_CCA</option><option value="-1" th:text="${The_Caucasus_countries_and_Russia}">The_Caucasus_countries_and_Russia</option><option value="-2" th:text="${Countries_of_Central_Asia_and_Russia}">Countries_of_Central_Asia_and_Russia</option></select></td>
</tr>
<tr>
<td style="padding: 1px; white-space: nowrap;" th:text="${Region}">Region</td>
<td style="padding: 1px; width: 100%;"><select style="width: 100%;" id="filter_X1_region_id"><option value=""></option></select></td>
</tr>
<tr>
<td style="padding: 1px; white-space: nowrap;" th:text="${Type_of_locust}">Type_of_locust</td>
<td style="padding: 1px; width: 100%;"><select style="width: 100%;" id="filter_X1_locust_type_id"><option value="" th:text="${All_types}">All_types</option><option value="1" th:text="${CIT_Italian_locust}">CIT_Italian_locust</option><option value="2" th:text="${DMA_Moroccan_locust}">DMA_Moroccan_locust</option><option value="3" th:text="${LMI_Asian_migratory_locust}">LMI_Asian_migratory_locust</option></select></td>
</tr>
<tr>
<td colspan="2"><table width="100%" border="0"><tbody><tr><td style="padding: 1px; white-space: nowrap;" width="1%" th:text="${From_date}">From_date</td><td style="padding: 1px;"><table style="width: 100%; table-layout: fixed; border-spacing: 0px; border-collapse: collapse;" border="0"><tbody><tr><td style="width: 100%;"><input style="width: 100%;" name="date_start" value="" id="filter_X1_date_start" type="text"/></td><td style="width: 25px;"><img id="filter_X1_date_start_trigger" src="../resources/engine/images/datepicker.jpg" style="margin-left: 1px; cursor: pointer;"></td></tr></tbody></table></td><td style="padding: 1px; white-space: nowrap;" width="1%" th:text="${To_date}">To_date</td><td style="padding: 1px;"><table style="width: 100%; table-layout: fixed; border-spacing: 0px; border-collapse: collapse;" border="0"><tbody><tr><td style="width: 100%;"><input style="width: 100%;" name="date_end" value="" id="filter_X1_date_end" type="text"/></td><td style="width: 25px;"><img id="filter_X1_date_end_trigger" src="../resources/engine/images/datepicker.jpg" style="cursor: pointer; margin-left: 1px;"></td></tr></tbody></table></td></tr></tbody></table></td>
</tr>
<tr>
<td style="padding: 1px; white-space: nowrap;" th:text="${Method_filling_form}">Method_filling_form</td>
<td style="padding: 1px; width: 100%;"><select style="width: 100%;" id="filter_X1_device_id"><option value="" th:text="${From_PDA} + ' & ' + ${From_WEB_interface}">From_PDA & From_WEB_interface</option><option value="1" th:text="${From_PDA}">From_PDA</option><option value="0" th:text="${From_WEB_interface}">From_WEB_interface</option><option value="2" th:text="${Test_questionnaires}">Test_questionnaires</option></select></td>
</tr>
<tr>
<td style="padding: 1px; white-space: nowrap;" th:text="${PDA_registered}">PDA_registered</td>
<td style="padding: 1px; width: 100%;"><select style="width: 100%;" id="filter_X1_registered"><option value="" selected="selected"></option><option value="1" th:text="${Yes}">Yes</option><option value="0" th:text="${No}">Not</option></select></td>
</tr>
<tr>
<td style="padding: 1px; white-space: nowrap;" th:text="${Displayed_data}">Displayed_data</td>
<td style="padding: 1px; width: 100%;"><select style="width: 100%;" id="filter_X1_indicator"><option selected="selected" value="1" th:text="${Egg_pods_density_m2}">Egg_pods_density_m2</option><option value="2" th:text="${Hopper_density_m2}">Hopper_density_m2</option><option value="3" th:text="${Bands}">Bands</option><option value="4" th:text="${Adult_density_m2}">Adult_density_m2</option><option value="5" th:text="${Swarms}">Swarms</option></select></td>
<!--«Плотность кубышек», «Плотность личинок», «Кулиги», «Плотность имаго», «Стая».-->
</tr>
<tr>
<td style="padding: 1px;"><input th:value="${Open_in_a_table_format}" type="button" class="main" onclick="openFrmLocustData();"/></td>
<td style="padding: 1px;" align="right"><input th:value="${Show_data}" type="button" class="main" onclick="callFrmLocustData();"/><input th:value="${Hide}" type="button" class="main" onclick="hideFrmLocustData();"/></td>
</tr>
<tr>
<td style="padding: 1px;" colspan="2"><a href="#" onclick="downloadQGISFile('frmlocust');" th:text="${Download_QGIS_project}">Download_QGIS_project</a></td>
</tr>
</tbody>
</table>
</div>
<script th:inline="javascript">
var lng = /*[[${m_locale}]]*/ '';
var field=document.getElementById("lang");
if(field!=null)
{ field.value=lng;
}
var country_id = /*[[${country_id}]]*/ '';
var field=document.getElementById("filter_X1_country_id");
if(field!=null) field.value=country_id;
var d = new Date();
d.setDate(d.getDate()-90);
var field=document.getElementById("filter_X1_date_start");
if(field!=null) field.value=d.toString();
var field=document.getElementById("filter_X1_date_end");
if(field!=null) field.value=(new Date).toString();
let cal=new Calendar({
inputField: document.getElementById('filter_X1_date_start'),
dateFormat: "%Y-%m-%d %H:%M:%S",
trigger: document.getElementById('filter_X1_date_start_trigger'),
align: "Bl",
bottomBar: false,
showTime: true,
//singleClick: true,
onSelect: function(){ this.hide(); }
});
new Calendar({
inputField: document.getElementById('filter_X1_date_end'),
dateFormat: "%Y-%m-%d %H:%M:%S",
trigger: document.getElementById('filter_X1_date_end_trigger'),
align: "Bl",
bottomBar: false,
showTime: true,
//singleClick: true,
onSelect: function(){ this.hide(); }
});
var field=document.getElementById("filter_X1_country_id");
if(field!=null)
{
field.value=country_id;
field.onchange=function(f){ return function(){
if(f.value!="")
{
xs='<?xml version="1.0" encoding="utf-8"?><metadata fn="6"><type n="CountriesRegions" c="name" pn=""><objects-list><filter><column n="country_id"><![CDATA['+f.value+']]></column></filter></objects-list></type></metadata>';
obj={
applyReq: function(req,fn,node,xmldoc)
{
if (fn==6) //заполняем выпадающие списки
{
var select=document.getElementById("filter_X1_region_id");
while (select.options.length) { select.remove(0); }
var opt = document.createElement('option');
opt.value = '';
opt.innerHTML = '';
select.appendChild(opt);
//this.setDataSelect(node);
nodeType=findFirstNode(node, 'type');
nodeProp=nodeType.firstChild;
while (nodeProp!=null)
{
if (nodeProp.nodeName=="record")
{
id=nodeProp.getAttribute("id");
value=getCdataValue(nodeProp,0);
//alert(value);
var opt = document.createElement('option');
opt.value = id;
opt.innerHTML = value;
select.appendChild(opt);
}
nodeProp=nodeProp.nextSibling;
}
}
},
name:''
}
var request=new TRequest(obj);
if(request.callServer(ScriptName,xs))
{
}
}
};}(field);
field.onchange();
}
</script>
<div style="position: relative; padding-left:1px; padding-right:1px; padding-bottom:5px;">
<table id="FrmLocustDelData" style="border: 1px solid rgb(99, 99, 99); table-layout: auto;background-color:whitesmoke;" width="100%" cellspacing="2" cellpadding="0">
<caption style="text-align:left; font-weight:bold;" th:text="${Spray_monitoring}">Spray_monitoring</caption>
<tbody>
<tr>
<td style="padding: 1px; white-space: nowrap;" th:text="${Country}">Country</td>
<td style="padding: 1px; width: 100%;"><select style="width: 100%;" id="filter_X2_country_id"><option value="1">Afghanistan (افغانستان)</option><option value="2">Armenia (Հայաստան)</option><option value="3">Azərbaycan (Azerbaijan)</option><option value="4">Georgia (საქართველო)</option><option value="5">Kazakhstan (Қазақстан)</option><option value="6">Kyrgyzstan (Кыргызстан)</option><option value="7">Russia (Российская Федерация)</option><option value="8">Tajikistan (Тоҷикистон)</option><option value="9">Turkmenistan (Türkmenistan)</option><option value="10">Uzbekistan (O'zbekiston)</option><option value="" th:text="${All_countries_of_CCA}">All_countries_of_CCA</option><option value="-1" th:text="${The_Caucasus_countries_and_Russia}">The_Caucasus_countries_and_Russia</option><option value="-2" th:text="${Countries_of_Central_Asia_and_Russia}">Countries_of_Central_Asia_and_Russia</option></select></td>
</tr>
<tr>
<td style="padding: 1px; white-space: nowrap;" th:text="${Region}">Region</td>
<td style="padding: 1px; width: 100%;"><select style="width: 100%;" id="filter_X2_region_id"><option value=""></option></select></td>
</tr>
<tr>
<td colspan="2"><table width="100%" border="0"><tbody><tr><td style="padding: 1px; white-space: nowrap;" width="1%" th:text="${From_date}">From_date</td><td style="padding: 1px;"><table style="width: 100%; table-layout: fixed; border-spacing: 0px; border-collapse: collapse;" border="0"><tbody><tr><td style="padding: 0px; width: 100%;"><input style="width: 100%;" name="date_start" value="" id="filter_X2_date_start" type="text"/></td><td style="padding: 0px; width: 25px;"><img id="filter_X2_date_start_trigger" src="../resources/engine/images/datepicker.jpg" style="margin-left:1px; cursor: pointer;"></td></tr></tbody></table></td><td style="padding: 1px; white-space: nowrap;" width="1%" th:text="${To_date}">To_date</td><td style="padding: 1px;"><table style="width: 100%; table-layout: fixed; border-spacing: 0px; border-collapse: collapse;" border="0"><tbody><tr><td style="padding: 0px; width: 100%;"><input style="width: 100%;" name="date_end" value="" id="filter_X2_date_end" type="text"/></td><td style="padding: 0px; width: 25px;"><img id="filter_X2_date_end_trigger" src="../resources/engine/images/datepicker.jpg" style="margin-left:1px; cursor: pointer;"></td></tr></tbody></table></td></tr></tbody></table></td>
</tr>
<tr>
<td style="padding: 1px; white-space: nowrap;" th:text="${Method_filling_form}">Method_filling_form</td>
<td style="padding: 1px; width: 100%;"><select style="width: 100%;" id="filter_X2_device_id"><option value="" th:text="${From_PDA} + ' & ' + ${From_WEB_interface}">From_PDA & From_WEB_interface</option><option value="1" th:text="${From_PDA}">From_PDA</option><option value="0" th:text="${From_WEB_interface}">From_WEB_interface</option><option value="2" th:text="${Test_questionnaires}">Test_questionnaires</option></select></td>
</tr>
<tr>
<td style="padding: 1px; white-space: nowrap;" th:text="${PDA_registered}">PDA_registered</td>
<td style="padding: 1px; width: 100%;"><select style="width: 100%;" id="filter_X2_registered"><option selected="selected" value=""></option><option value="1" th:text="${Yes}">Yes</option><option value="0" th:text="${No}">Not</option></select></td>
</tr>
<tr>
<td style="padding: 1px;"><input th:value="${Open_in_a_table_format}" type="button" class="main" onclick="openFrmLocustDelData();"/></td>
<td style="padding: 1px;" align="right"><input th:value="${Show_data}" type="button" class="main" onclick="callFrmLocustDelData();"/><input th:value="${Hide}" type="button" class="main" onclick="hideFrmLocustDelData();"/></td>
</tr>
<tr>
<td style="padding: 1px;" colspan="2"><a href="#" onclick="downloadQGISFile('frmlocustdel');" th:text="${Download_QGIS_project}">Download_QGIS_project</a></td>
</tr>
</tbody>
</table>
</div>
<script>
var field=document.getElementById("filter_X2_country_id");
if(field!=null) field.value=country_id;
var d = new Date();
d.setDate(d.getDate()-90);
var field=document.getElementById("filter_X2_date_start");
if(field!=null) field.value=d.toString();
var field=document.getElementById("filter_X2_date_end");
if(field!=null) field.value=(new Date).toString();
new Calendar({
inputField: document.getElementById('filter_X2_date_start'),
dateFormat: "%Y-%m-%d %H:%M:%S",
trigger: document.getElementById('filter_X2_date_start_trigger'),
align: "Bl",
bottomBar: false,
showTime: true,
//singleClick: true,
onSelect: function(){ this.hide(); }
});
new Calendar({
inputField: document.getElementById('filter_X2_date_end'),
dateFormat: "%Y-%m-%d %H:%M:%S",
trigger: document.getElementById('filter_X2_date_end_trigger'),
align: "Bl",
bottomBar: false,
showTime: true,
//singleClick: true,
onSelect: function(){ this.hide(); }
});
var field=document.getElementById("filter_X2_country_id");
if(field!=null)
{
field.value=country_id;
field.onchange=function(f){ return function(){
if(f.value!="")
{
xs='<?xml version="1.0" encoding="utf-8"?><metadata fn="6"><type n="CountriesRegions" c="name" pn=""><objects-list><filter><column n="country_id"><![CDATA['+f.value+']]></column></filter></objects-list></type></metadata>';
obj={
applyReq: function(req,fn,node,xmldoc)
{
if (fn==6) //заполняем выпадающие списки
{
var select=document.getElementById("filter_X2_region_id");
while (select.options.length) { select.remove(0); }
var opt = document.createElement('option');
opt.value = '';
opt.innerHTML = '';
select.appendChild(opt);
//this.setDataSelect(node);
nodeType=findFirstNode(node, 'type');
nodeProp=nodeType.firstChild;
while (nodeProp!=null)
{
if (nodeProp.nodeName=="record")
{
id=nodeProp.getAttribute("id");
value=getCdataValue(nodeProp,0);
//alert(value);
var opt = document.createElement('option');
opt.value = id;
opt.innerHTML = value;
select.appendChild(opt);
}
nodeProp=nodeProp.nextSibling;
}
}
},
name:''
}
var request=new TRequest(obj);
if(request.callServer(ScriptName,xs))
{
}
}
};}(field);
field.onchange();
}
</script>
<div style="position: relative; padding-left:1px; padding-right:1px; padding-bottom:5px;">
<table id="FrmLocustHealthData" style="border: 1px solid rgb(99, 99, 99);table-layout:auto;background-color:whitesmoke;" width="100%" cellspacing="2" cellpadding="0">
<caption style="text-align:left; font-weight:bold;">HH&Env</caption>
<tbody>
<tr>
<td style="padding: 1px; white-space: nowrap;" th:text="${Country}">Country</td>
<td style="padding: 1px; width: 100%;"><select style="width: 100%;" id="filter_health_country_id"><option value="1">Afghanistan (افغانستان)</option><option value="2">Armenia (Հայաստան)</option><option value="3">Azərbaycan (Azerbaijan)</option><option value="4">Georgia (საქართველო)</option><option value="5">Kazakhstan (Қазақстан)</option><option value="6">Kyrgyzstan (Кыргызстан)</option><option value="7">Russia (Российская Федерация)</option><option value="8">Tajikistan (Тоҷикистон)</option><option value="9">Turkmenistan (Türkmenistan)</option><option value="10">Uzbekistan (O'zbekiston)</option><option value="" th:text="${All_countries_of_CCA}">All_countries_of_CCA</option><option value="-1" th:text="${The_Caucasus_countries_and_Russia}">The_Caucasus_countries_and_Russia</option><option value="-2" th:text="${Countries_of_Central_Asia_and_Russia}">Countries_of_Central_Asia_and_Russia</option></select></td>
</tr>
<tr>
<td style="padding: 1px;"><input th:value="${Open_in_a_table_format}" type="button" class="main" onclick="openFrmHealth();"/></td>
<td style="padding: 1px;" align="right"><input th:value="${Show_data}" type="button" class="main" onclick="callFrmHealth();"/><input th:value="${Hide}" type="button" class="main" onclick="hideFrmHealth();"/></td>
</tr>
</tbody>
</table>
</div>
<div style="position: relative; padding-left:1px; padding-right:1px; padding-bottom:5px;">
<table id="FrmLocustInfoData" style="border: 1px solid rgb(99, 99, 99);table-layout:auto;background-color:whitesmoke;" width="100%" cellspacing="2" cellpadding="0">
<caption style="text-align:left; font-weight:bold;" th:text="${Distribution_of_locust}">Distribution_of_locust</caption>
<tbody>
<tr>
<td style="padding: 1px; white-space: nowrap;" th:text="${Country}">Country</td>
<td style="padding: 1px; width: 100%;"><select style="width: 100%;" id="filter_X3_country_id"><option value="1">Afghanistan (افغانستان)</option><option value="2">Armenia (Հայաստան)</option><option value="3">Azərbaycan (Azerbaijan)</option><option value="4">Georgia (საქართველო)</option><option value="5">Kazakhstan (Қазақстан)</option><option value="6">Kyrgyzstan (Кыргызстан)</option><option value="7">Russia (Российская Федерация)</option><option value="8">Tajikistan (Тоҷикистон)</option><option value="9">Turkmenistan (Türkmenistan)</option><option value="10">Uzbekistan (O'zbekiston)</option><option value="" th:text="${All_countries_of_CCA}">All_countries_of_CCA</option><option value="-1" th:text="${The_Caucasus_countries_and_Russia}">The_Caucasus_countries_and_Russia</option><option value="-2" th:text="${Countries_of_Central_Asia_and_Russia}">Countries_of_Central_Asia_and_Russia</option></select></td>
</tr>
<tr>
<td style="padding: 1px; white-space: nowrap;" th:text="${Region}">Region</td>
<td style="padding: 1px; width: 100%;"><select style="width: 100%;" id="filter_X3_region_id"><option value=""></option></select></td>
</tr>
<tr>
<td style="padding: 1px; white-space: nowrap;" th:text="${For_what_year}">For_what_year</td>
<td style="padding: 1px; width: 100%;"><input style="width: 100%;" value="2023" id="filter_X3_year" type="number"/></td>
<script>
let currentYear = new Date().getFullYear();
document.getElementById("filter_X3_year").value = currentYear;
</script>
</tr>
<tr>
<td style="padding: 1px; white-space: nowrap;" th:text="${Kind_of_locust}">Kind_of_locust</td>
<td style="padding: 1px; width: 100%;"><select style="width: 100%;" id="filter_X3_locust_type_id"><option value="1" th:text="${CIT_Italian_locust}">CIT_Italian_locust</option><option value="2" th:text="${DMA_Moroccan_locust}">DMA_Moroccan_locust</option><option value="3" th:text="${LMI_Asian_migratory_locust}">LMI_Asian_migratory_locust</option><option value="5">CIT &amp; DMA</option><option value="6">CIT &amp; LMI</option><option value="4" th:text="${Others}">Others</option><option value="7" th:text="${Absent}">Absent</option></select></td>
</tr>
<tr>
<td style="padding: 1px; white-space: nowrap;" th:text="${Displayed_data}">Displayed_data</td>
<td style="padding: 1px; width: 100%;">
<select style="width: 100%;" id="filter_X3_indicator">
<option selected="selected" value="2" th:text="${Maps_of_areas_infested_above_Economic_Threshold_ET}">Maps_of_areas_infested_above_Economic_Threshold_ET</option>
<option value="3" th:text="${Maps_of_treated_areas_above_ET}">Maps_of_treated_areas_above_ET</option>
<option value="4" th:text="${Map_of_the_level_of_threat}">Map_of_the_level_of_threat</option>
</select>
</td>
</tr>
<tr>
<td style="padding: 1px;"><input th:value="${Open_in_a_table_format}" type="button" class="main" onclick="openFrmLocustInfo();"/></td>
<td style="padding: 1px;" align="right"><input th:value="${Show_data}" type="button" class="main" onclick="callFrmLocustInfoData();"/><input th:value="${Hide}" type="button" class="main" onclick="hideFrmLocustInfoData();"/></td>
</tr>
<tr>
<td style="padding: 1px;" colspan="2"><a href="#" onclick="downloadQGISFile('frmlocustinfo');" th:text="${Download_QGIS_project}">Download_QGIS_project</a></td>
</tr>
</tbody>
</table>
</div>
<script>
var field=document.getElementById("filter_X3_country_id");
if(field!=null)
{
field.value=country_id;
field.onchange=function(f){ return function(){
if(f.value!="")
{
xs='<?xml version="1.0" encoding="utf-8"?><metadata fn="6"><type n="CountriesRegions" c="name" pn=""><objects-list><filter><column n="country_id"><![CDATA['+f.value+']]></column></filter></objects-list></type></metadata>';
obj={
applyReq: function(req,fn,node,xmldoc)
{
if (fn==6) //заполняем выпадающие списки
{
var select=document.getElementById("filter_X3_region_id");
while (select.options.length) { select.remove(0); }
var opt = document.createElement('option');
opt.value = '';
opt.innerHTML = '';
select.appendChild(opt);
//this.setDataSelect(node);
nodeType=findFirstNode(node, 'type');
nodeProp=nodeType.firstChild;
while (nodeProp!=null)
{
if (nodeProp.nodeName=="record")
{
id=nodeProp.getAttribute("id");
value=getCdataValue(nodeProp,0);
//alert(value);
var opt = document.createElement('option');
opt.value = id;
opt.innerHTML = value;
select.appendChild(opt);
}
nodeProp=nodeProp.nextSibling;
}
}
},
name:''
}
var request=new TRequest(obj);
if(request.callServer(ScriptName,xs))
{
}
}
};}(field);
field.onchange();
}
</script>
<div style="position: relative; padding-left:1px; padding-right:1px; padding-bottom:5px;">
<table id="FrmCheckpointData" style="border: 1px solid rgb(99, 99, 99);table-layout:auto;background-color:whitesmoke;" width="100%" cellspacing="2" cellpadding="0">
<caption style="text-align:left; font-weight:bold;" th:text="${Checkpoints}">Checkpoints</caption>
<tbody>
<tr>
<td style="padding: 1px; white-space: nowrap;" th:text="${Country}">Country</td>
<td style="padding: 1px; width: 100%;"><select style="width: 100%;" id="filter_checkpoint_country_id"><option value="1">Afghanistan (افغانستان)</option><option value="2">Armenia (Հայաստան)</option><option value="3">Azərbaycan (Azerbaijan)</option><option value="4">Georgia (საქართველო)</option><option value="5">Kazakhstan (Қазақстан)</option><option value="6">Kyrgyzstan (Кыргызстан)</option><option value="7">Russia (Российская Федерация)</option><option value="8">Tajikistan (Тоҷикистон)</option><option value="9">Turkmenistan (Türkmenistan)</option><option value="10">Uzbekistan (O'zbekiston)</option><option value="" th:text="${All_countries_of_CCA}">All_countries_of_CCA</option><option value="-1" th:text="${The_Caucasus_countries_and_Russia}">The_Caucasus_countries_and_Russia</option><option value="-2" th:text="${Countries_of_Central_Asia_and_Russia}">Countries_of_Central_Asia_and_Russia</option></select></td>
</tr>
<tr>
<td style="padding: 1px;"><input th:value="${Open_in_a_table_format}" type="button" class="main" onclick="openFrmCheckpoints();"/></td>
<td style="padding: 1px;" align="right"><input th:value="${Show_data}" type="button" class="main" onclick="callFrmCheckpoints();"/><input th:value="${Hide}" type="button" class="main" onclick="hideFrmCheckpoints();"/></td>
</tr>
</tbody>
</table>
</div>
<script>
var field=document.getElementById("filter_checkpoint_country_id");
if(field!=null)
{
field.value=country_id;
}
</script>
</div>
<!--div id="tab_Survey_Form">
<div id="FrmLocustContainer" style="width:100%; height: 100%; padding: 3px; background-color: #3366CC;">
<div id="FrmLocust" style="width:100%; height: 100%;">
</div>
</div>
</div>
<div id="tab_Spray_Form"><div style="padding: 3px;">
<div id="FrmLocustContainerDel" style="width:100%; height: 100%; padding: 3px; background-color: #3366CC;">
<div id="FrmLocustDel" style="width:100%; height: 500px;">
</div>
</div>
</div></div-->
<div id="tab_reports" style="position: absolute; width:100px; height:100px; padding:3px; overflow:scroll;"><div style="padding: 3px;">
<div style="position: relative; padding-left:1px; padding-right:1px; padding-bottom:5px;">
<table id="FrmLocustHatchingData" style="border: 1px solid rgb(99, 99, 99); table-layout: auto;background-color:whitesmoke;" width="100%" cellspacing="2" cellpadding="0">
<caption style="text-align:left; font-weight:bold;"><span th:text="${Weather_forecast}">Weather_forecast</span> (<span th:text="${Soil_temperature}">Soil_temperature</span>)</caption>
<tbody>
<tr>
<td style="padding: 1px; white-space: nowrap;" th:text="${Country}">Country</td>
<td style="padding: 1px; width: 100%;"><select style="width: 100%;" id="filter_soil_country_id"><option value="1">Afghanistan (افغانستان)</option><option value="2">Armenia (Հայաստան)</option><option value="3">Azərbaycan (Azerbaijan)</option><option value="4">Georgia (საქართველო)</option><option value="5">Kazakhstan (Қазақстан)</option><option value="6">Kyrgyzstan (Кыргызстан)</option><option value="7">Russia (Российская Федерация)</option><option value="8">Tajikistan (Тоҷикистон)</option><option value="9">Turkmenistan (Türkmenistan)</option><option value="10">Uzbekistan (O'zbekiston)</option><!--option value="" th:text="${All_countries_of_CCA}">All_countries_of_CCA</option><option value="-1" th:text="${The_Caucasus_countries_and_Russia}">The_Caucasus_countries_and_Russia</option><option value="-2" th:text="${Countries_of_Central_Asia_and_Russia}">Countries_of_Central_Asia_and_Russia</option--></select></td>
</tr>
<tr>
<td style="padding: 1px; white-space: nowrap;" th:text="${Date}">Date</td>
<td style="padding: 1px; width: 100%;">
<table width="100%" border="0"><tr><td style="width: 100%;"><input style="width: 100%;" name="filter_soil_day" value="" id="filter_soil_day" type="text"/></td><td style="width: 25px;"><img id="filter_soil_day_trigger" src="../resources/engine/images/datepicker.jpg" style="margin-left: 1px; cursor: pointer;"></td></tr></tbody></table>
</td>
</tr>
<tr>
<td style="padding: 1px; width: 158px;"></td>
<td style="padding: 1px;" align="right"><input th:value="${Show_data}" type="button" class="main" onclick="callWeatherData();"/><input th:value="${Hide}" type="button" class="main" onclick="hideWeatherData();"/></td>
</tr>
<tr>
<td style="padding: 1px;" colspan="2"><a href="#" onclick="downloadQGISFile('soil_temperature');" th:text="${Download_QGIS_project}">Download_QGIS_project</a></td>
</tr>
</tbody>
</table>
</div>
<script>
var field=document.getElementById("filter_soil_country_id");
if(field!=null) field.value=country_id;
var soil_day_list = [];
new Calendar({
inputField: document.getElementById('filter_soil_day'),
dateFormat: "%Y-%m-%d",
trigger: document.getElementById('filter_soil_day_trigger'),
align: "Bl",
bottomBar: false,
showTime: false,
//singleClick: true,
onSelect: function(){ this.hide(); },
disabled : function(date) {
let num = Calendar.dateToInt(date);
let find=false;
for(let i=0;i<soil_day_list.length;i++){
if(soil_day_list[i].date.replace(/-/g, '')==num){
find=true;
break;
}
}
return !find;
},
dateInfo : function(date) {
let num = Calendar.dateToInt(date);
let find=false;
for(let i=0;i<soil_day_list.length;i++){
if(soil_day_list[i].date.replace(/-/g, '')==num){
return {klass:"highlight"};
}
}
return {};
}
});
</script>
<div style="position: relative; padding-left:1px; padding-right:1px; padding-bottom:5px;">
<table style="border: 1px solid rgb(99, 99, 99); table-layout: auto;background-color:whitesmoke;" width="100%" cellspacing="2" cellpadding="0">
<caption style="text-align:left; font-weight:bold;" th:text="${Air_temperature_2m_above_the_ground}">Air_temperature_2m_above_the_ground</caption>
<tbody>
<tr>
<td style="padding: 1px; white-space: nowrap;" th:text="${Country}">Country</td>
<td style="padding: 1px; width: 100%;"><select style="width: 100%;" id="filter_air_country_id"><option value="1">Afghanistan (افغانستان)</option><option value="2">Armenia (Հայաստան)</option><option value="3">Azərbaycan (Azerbaijan)</option><option value="4">Georgia (საქართველო)</option><option value="5">Kazakhstan (Қазақстан)</option><option value="6">Kyrgyzstan (Кыргызстан)</option><option value="7">Russia (Российская Федерация)</option><option value="8">Tajikistan (Тоҷикистон)</option><option value="9">Turkmenistan (Türkmenistan)</option><option value="10">Uzbekistan (O'zbekiston)</option><!--option value="" th:text="${All_countries_of_CCA}">All_countries_of_CCA</option><option value="-1" th:text="${The_Caucasus_countries_and_Russia}">The_Caucasus_countries_and_Russia</option><option value="-2" th:text="${Countries_of_Central_Asia_and_Russia}">Countries_of_Central_Asia_and_Russia</option--></select></td>
</tr>
<tr>
<td style="padding: 1px; white-space: nowrap;" th:text="${Date}">Date</td>
<td style="padding: 1px; width: 100%;">
<table width="100%" border="0"><tr><td style="width: 100%;"><input style="width: 100%;" name="filter_air_day" value="" id="filter_air_day" type="text"/></td><td style="width: 25px;"><img id="filter_air_day_trigger" src="../resources/engine/images/datepicker.jpg" style="margin-left: 1px; cursor: pointer;"></td></tr></tbody></table>
</td>
</tr>
<tr>
<td style="padding: 1px; width: 158px;"></td>
<td style="padding: 1px;" align="right"><input th:value="${Show_data}" type="button" class="main" onclick="callAirData();"/><input th:value="${Hide}" type="button" class="main" onclick="hideAirData();"/></td>
</tr>
<tr>
<td style="padding: 1px;" colspan="2"><a href="#" onclick="downloadQGISFile('air_temperature');" th:text="${Download_QGIS_project}">Download_QGIS_project</a></td>
</tr>
</tbody>
</table>
</div>
<script>
var field=document.getElementById("filter_air_country_id");
if(field!=null) field.value=country_id;
var air_day_list=[];
new Calendar({
inputField: document.getElementById('filter_air_day'),
dateFormat: "%Y-%m-%d",
trigger: document.getElementById('filter_air_day_trigger'),
align: "Bl",
bottomBar: false,
showTime: false,
//singleClick: true,
onSelect: function(){ this.hide(); },
disabled : function(date) {
let num = Calendar.dateToInt(date);
let find=false;
for(let i=0;i<air_day_list.length;i++){
if(air_day_list[i].date.replace(/-/g, '')==num){
find=true;
break;
}
}
return !find;
},
dateInfo : function(date) {
let num = Calendar.dateToInt(date);
let find=false;
for(let i=0;i<air_day_list.length;i++){
if(air_day_list[i].date.replace(/-/g, '')==num){
return {klass:"highlight"};
}
}
return {};
}
});
</script>
<div style="position: relative; padding-left:1px; padding-right:1px; padding-bottom:5px;">
<table style="border: 1px solid rgb(99, 99, 99); table-layout: auto;background-color:whitesmoke;" width="100%" cellspacing="2" cellpadding="0">
<caption style="text-align:left; font-weight:bold;" th:text="${Accumulated_precipitation_in_24_hours}">Accumulated_precipitation_in_24_hours</caption>
<tbody>
<tr>
<td style="padding: 1px; white-space: nowrap;" th:text="${Country}">Country</td>
<td style="padding: 1px; width: 100%;"><select style="width: 100%;" id="filter_precipitation_country_id"><option value="1">Afghanistan (افغانستان)</option><option value="2">Armenia (Հայաստան)</option><option value="3">Azərbaycan (Azerbaijan)</option><option value="4">Georgia (საქართველო)</option><option value="5">Kazakhstan (Қазақстан)</option><option value="6">Kyrgyzstan (Кыргызстан)</option><option value="7">Russia (Российская Федерация)</option><option value="8">Tajikistan (Тоҷикистон)</option><option value="9">Turkmenistan (Türkmenistan)</option><option value="10">Uzbekistan (O'zbekiston)</option><!--option value="" th:text="${All_countries_of_CCA}">All_countries_of_CCA</option><option value="-1" th:text="${The_Caucasus_countries_and_Russia}">The_Caucasus_countries_and_Russia</option><option value="-2" th:text="${Countries_of_Central_Asia_and_Russia}">Countries_of_Central_Asia_and_Russia</option--></select></td>
</tr>
<tr>
<td style="padding: 1px; white-space: nowrap;" th:text="${Date}">Date</td>
<td style="padding: 1px; width: 100%;">
<table width="100%" border="0"><tr><td style="width: 100%;"><input style="width: 100%;" name="filter_precipitation_day" value="" id="filter_precipitation_day" type="text"/></td><td style="width: 25px;"><img id="filter_precipitation_day_trigger" src="../resources/engine/images/datepicker.jpg" style="margin-left: 1px; cursor: pointer;"></td></tr></tbody></table>
</td>
</tr>
<tr>
<td style="padding: 1px; width: 158px;"></td>
<td style="padding: 1px;" align="right"><input th:value="${Show_data}" type="button" class="main" onclick="callPrecipitationData();"/><input th:value="${Hide}" type="button" class="main" onclick="hidePrecipitationData();"/></td>
</tr>
<tr>
<td style="padding: 1px;" colspan="2"><a href="#" onclick="downloadQGISFile('precipitation');" th:text="${Download_QGIS_project}">Download_QGIS_project</a></td>
</tr>
</tbody>
</table>
</div>
<script>
var field=document.getElementById("filter_precipitation_country_id");
if(field!=null) field.value=country_id;
var precipitation_day_list=[];
new Calendar({
inputField: document.getElementById('filter_precipitation_day'),
dateFormat: "%Y-%m-%d",
trigger: document.getElementById('filter_precipitation_day_trigger'),
align: "Bl",
bottomBar: false,
showTime: false,
//singleClick: true,
onSelect: function(){ this.hide(); },
disabled : function(date) {
let num = Calendar.dateToInt(date);
let find=false;
for(let i=0;i<precipitation_day_list.length;i++){
if(precipitation_day_list[i].date.replace(/-/g, '')==num){
find=true;
break;
}
}
return !find;
},
dateInfo : function(date) {
let num = Calendar.dateToInt(date);
let find=false;
for(let i=0;i<precipitation_day_list.length;i++){
if(precipitation_day_list[i].date.replace(/-/g, '')==num){
return {klass:"highlight"};
}
}
return {};
}
});
</script>
<div style="position: relative; padding-left:1px; padding-right:1px; padding-bottom:5px;">
<table style="border: 1px solid rgb(99, 99, 99); table-layout: auto;background-color:whitesmoke;" width="100%" cellspacing="2" cellpadding="0">
<caption style="text-align:left; font-weight:bold;" th:text="${Hydrothermal_coefficient_of_Selyaninov}">Hydrothermal_coefficient_of_Selyaninov</caption>
<tbody>
<tr>
<td style="padding: 1px; white-space: nowrap;" th:text="${Country}">Country</td>
<td style="padding: 1px; width: 100%;"><select style="width: 100%;" id="filter_htc_selyaninov_country_id"><option value="1">Afghanistan (افغانستان)</option><option value="2">Armenia (Հայաստան)</option><option value="3">Azərbaycan (Azerbaijan)</option><option value="4">Georgia (საქართველო)</option><option value="5">Kazakhstan (Қазақстан)</option><option value="6">Kyrgyzstan (Кыргызстан)</option><option value="7">Russia (Российская Федерация)</option><option value="8">Tajikistan (Тоҷикистон)</option><option value="9">Turkmenistan (Türkmenistan)</option><option value="10">Uzbekistan (O'zbekiston)</option></select></td>
</tr>
<tr>
<td style="padding: 1px; white-space: nowrap;" th:text="${Start_date}">Start_date</td>
<td style="padding: 1px; width: 100%;">
<table width="100%" border="0"><tr><td style="width: 100%;"><input style="width: 100%;" name="filter_htc_selyaninov_time_start" value="" id="filter_htc_selyaninov_time_start" type="text"/></td><td style="width: 25px;"><img id="filter_htc_selyaninov_time_start_trigger" src="../resources/engine/images/datepicker.jpg" style="margin-left: 1px; cursor: pointer;"></td></tr></tbody></table>
</td>
</tr>
<tr>
<td style="padding: 1px; white-space: nowrap;" th:text="${End_date}">End_date</td>
<td style="padding: 1px; width: 100%;">
<table width="100%" border="0"><tr><td style="width: 100%;"><input style="width: 100%;" name="filter_htc_selyaninov_time_end" value="" id="filter_htc_selyaninov_time_end" type="text"/></td><td style="width: 25px;"><img id="filter_htc_selyaninov_time_end_trigger" src="../resources/engine/images/datepicker.jpg" style="margin-left: 1px; cursor: pointer;"></td></tr></tbody></table>
</td>
</tr>
<tr>
<td style="padding: 1px; width: 158px;"></td>
<td style="padding: 1px;" align="right"><input th:value="${Show_data}" type="button" class="main" onclick="callHTCSelyaninovData();"/><input th:value="${Hide}" type="button" class="main" onclick="hideHTCSelyaninovData();"/></td>
</tr>
<tr>
<td style="padding: 1px;" colspan="2"><a href="#" onclick="downloadQGISFile('htc_selyaninov');" th:text="${Download_QGIS_project}">Download_QGIS_project</a></td>
</tr>
</tbody>
</table>
</div>
<script>
var field=document.getElementById("filter_htc_selyaninov_country_id");
if(field!=null) field.value=country_id;
new Calendar({
inputField: document.getElementById('filter_htc_selyaninov_time_start'),
dateFormat: "%Y-%m-%d",
trigger: document.getElementById('filter_htc_selyaninov_time_start_trigger'),
align: "Bl",
bottomBar: false,
showTime: false,
//singleClick: true,
onSelect: function(){ this.hide(); },
disabled : function(date) {
let num = Calendar.dateToInt(date);
let find=false;
for(let i=0;i<precipitation_day_list.length;i++){
if(precipitation_day_list[i].date.replace(/-/g, '')==num){
find=true;
break;
}
}
return !find;
},
dateInfo : function(date) {
let num = Calendar.dateToInt(date);
let find=false;
for(let i=0;i<precipitation_day_list.length;i++){
if(precipitation_day_list[i].date.replace(/-/g, '')==num){
return {klass:"highlight"};
}
}
return {};
}
});
new Calendar({
inputField: document.getElementById('filter_htc_selyaninov_time_end'),
dateFormat: "%Y-%m-%d",
trigger: document.getElementById('filter_htc_selyaninov_time_end_trigger'),
align: "Bl",
bottomBar: false,
showTime: false,
//singleClick: true,
onSelect: function(){ this.hide(); },
disabled : function(date) {
let num = Calendar.dateToInt(date);
let find=false;
for(let i=0;i<precipitation_day_list.length;i++){
if(precipitation_day_list[i].date.replace(/-/g, '')==num){
find=true;
break;
}
}
return !find;
},
dateInfo : function(date) {
let num = Calendar.dateToInt(date);
let find=false;
for(let i=0;i<precipitation_day_list.length;i++){
if(precipitation_day_list[i].date.replace(/-/g, '')==num){
return {klass:"highlight"};
}
}
return {};
}
});
</script>
<div style="position: relative; padding-left:1px; padding-right:1px; padding-bottom:5px;">
<table id="FrmLocustNDVI" style="border: 1px solid rgb(99, 99, 99); table-layout: auto;background-color:whitesmoke;" width="100%" cellspacing="2" cellpadding="0">
<caption style="text-align:left;"><span style="font-weight:bold;">NDVI</span> <span style="font-style: italic;font-size:0.8em;">(<span th:text="${Normalized_difference_vegetation_index}">Normalized_difference_vegetation_index</span>)</span></caption>
<tbody>
<tr>
<td style="padding: 1px; width: 158px; white-space: nowrap;" th:text="${Date}">Date</td>
<td style="padding: 1px;">
<select style="width: 100%;" id="filter_ndvi_day">
<!--option value="001">001 ${day}</option-->
</select>
</td>
</tr>
<tr>
<td style="padding: 1px; width: 158px;"></td>
<td style="padding: 1px;" align="right"><input th:value="${Show_data}" type="button" class="main" onclick="callNDVIData();"/><input th:value="${Hide}" type="button" class="main" onclick="hideGeoTIFFData();"/></td>
</tr>
<tr>
<td style="padding: 1px;" colspan="2"><a href="#" onclick="downloadQGISFile('NDVI');" th:text="${Download_QGIS_project}">Download_QGIS_project</a></td>
</tr>
</tbody>
</table>
</div>
<div style="position: relative; padding-left:1px; padding-right:1px; padding-bottom:5px;">
<table id="FrmLocustIVI" style="border: 1px solid rgb(99, 99, 99); table-layout: auto;background-color:whitesmoke;" width="100%" cellspacing="2" cellpadding="0">
<caption style="text-align:left;"><span style="font-weight:bold;">IVI</span> <span style="font-style: italic;font-size:0.8em;" th:text="${Integral_vegetation_index}">(Integral_vegetation_index)</span> <!--span style="font-weight:bold;">65%</span--></caption>
<tbody>
<tr>
<td style="padding: 1px; width: 158px; white-space: nowrap;" th:text="${Year}">Year</td>
<td style="padding: 1px;">
<select style="width: 100%;" id="filter_ivi_year">
<option value="2025_02_04">2025 (02..04)</option>
<option value="2025_03_05">2025 (03..05)</option>
<option value="2025_04_06">2025 (04..06)</option>
<option value="2025_05_07">2025 (05..07)</option>
<option value="2024_02_04">2024 (02..04)</option>
<option value="2024_03_05">2024 (03..05)</option>
<option value="2024_04_06">2024 (04..06)</option>
<option value="2024_05_07">2024 (05..07)</option>
<option value="2023_02_04">2023 (02..04)</option>
<option value="2023_03_05">2023 (03..05)</option>
<option value="2023_04_06">2023 (04..06)</option>
<option value="2023_05_07">2023 (05..07)</option>
<option value="2022_02_04">2022 (02..04)</option>
<option value="2022_03_05">2022 (03..05)</option>
<option value="2022_04_06">2022 (04..06)</option>
<option value="2022_05_07">2022 (05..07)</option>
</select>
</td>
</tr>
<tr>
<td style="padding: 1px; width: 158px;"></td>
<td style="padding: 1px;" align="right"><input th:value="${Show_data}" type="button" class="main" onclick="callIVIData();"/><input th:value="${Hide}" type="button" class="main" onclick="hideGeoTIFFData();"/></td>
</tr>
<tr>
<td style="padding: 1px;" colspan="2"><a href="#" onclick="downloadQGISFile('IVI');" th:text="${Download_QGIS_project}">Download_QGIS_project</a></td>
</tr>
</tbody>
</table>
</div>
<div style="position: relative; padding-left:1px; padding-right:1px; padding-bottom:5px;">
<table id="FrmLocustNDWI" style="border: 1px solid rgb(99, 99, 99); table-layout: auto;background-color:whitesmoke;" width="100%" cellspacing="2" cellpadding="0">
<caption style="text-align:left;"><span style="font-weight:bold;">NDWI</span> <span style="font-style: italic;font-size:0.8em;">(<span th:text="${Normalized_difference_water_index}">Normalized_difference_water_index</span>)</span></caption>
<tbody>
<tr>
<td style="padding: 1px; width: 158px; white-space: nowrap;" th:text="${Date}">Date</td>
<td style="padding: 1px;">
<select style="width: 100%;" id="filter_ndwi_day">
<!--option value="001">001 ${day}</option-->
</select>
</td>
</tr>
<tr>
<td style="padding: 1px; width: 158px; white-space: nowrap;" th:text="${Compare_with}">Compare_with</td>
<td style="padding: 1px;">
<select style="width: 100%;" id="filter_ndwi_day_compare">
<option value="" selected></option>
</select>
</td>
</tr>
<tr>
<td style="padding: 1px; width: 158px;"></td>
<td style="padding: 1px;" align="right"><input th:value="${Show_data}" type="button" class="main" onclick="callNDWIData();"/><input th:value="${Hide}" type="button" class="main" onclick="hideGeoTIFFData();"/></td>
</tr>
<tr>
<td style="padding: 1px;" colspan="2"><a href="#" onclick="if(document.getElementById('filter_ndwi_day_compare').value!='') {downloadQGISFile('NDWI_CMP');}else{downloadQGISFile('NDWI');}" th:text="${Download_QGIS_project}">Download_QGIS_project</a></td>
</tr>
</tbody>
</table>
</div>
<div style="position: relative; padding-left:1px; padding-right:1px; padding-bottom:5px;">
<table id="FrmLocustNDSI" style="border: 1px solid rgb(99, 99, 99); table-layout: auto;background-color:whitesmoke;" width="100%" cellspacing="2" cellpadding="0">
<caption style="text-align:left;"><span style="font-weight:bold;">NDSI</span> <span style="font-style: italic;font-size:0.8em;">(<span th:text="${Normalised_difference_snow_index}">Normalised_difference_snow_index</span>)</span></caption>
<tbody>
<tr>
<td style="padding: 1px; width: 158px; white-space: nowrap;" th:text="${Date}">Date</td>
<td style="padding: 1px;">
<select style="width: 100%;" id="filter_ndsi_day">
<!--option value="001">001 ${day}</option-->
</select>
</td>
</tr>
<tr>
<td style="padding: 1px; width: 158px;"></td>
<td style="padding: 1px;" align="right"><input th:value="${Show_data}" type="button" class="main" onclick="callNDSIData();"/><input th:value="${Hide}" type="button" class="main" onclick="hideGeoTIFFData();"/></td>
</tr>
<tr>
<td style="padding: 1px;" colspan="2"><a href="#" onclick="downloadQGISFile('NDSI');" th:text="${Download_QGIS_project}">Download_QGIS_project</a></td>
</tr>
</tbody>
</table>
</div>
<div style="position: relative; padding-left:1px; padding-right:1px; padding-bottom:5px;">
<table id="FrmLocustSMAP" style="border: 1px solid rgb(99, 99, 99); table-layout: auto;background-color:whitesmoke;" width="100%" cellspacing="2" cellpadding="0">
<caption style="text-align:left;"><span style="font-weight:bold;">SMAP L4 9km</span> <span style="font-style: italic;font-size:0.8em;">(<span th:text="${Soil_Moisture_Active_Passive}">Soil_Moisture_Active_Passive</span>)</span></caption>
<tbody>
<tr>
<td style="padding: 1px; width: 158px; white-space: nowrap;" th:text="${Date}">Date</td>
<td style="padding: 1px;">
<select style="width: 100%;" id="filter_smap_day">
<!--option value="001">001 ${day}</option-->
</select>
</td>
</tr>
<tr>
<td style="padding: 1px; width: 158px;"></td>
<td style="padding: 1px;" align="right"><input th:value="${Show_data}" type="button" class="main" onclick="callSMAPData();"/><input th:value="${Hide}" type="button" class="main" onclick="hideGeoTIFFData();"/></td>
</tr>
<tr>
<td style="padding: 1px;" colspan="2"><a href="#" onclick="downloadQGISFile('SMAP');" th:text="${Download_QGIS_project}">Download_QGIS_project</a></td>
</tr>
</tbody>
</table>
</div>
<script>
let url="https://geoserver2.ccalm.org/";
//let url="http://127.0.0.1:8081/"; //Testing
$.getJSON(url+"geodatalist/SoilDates", function(result){
soil_day_list=[];
$.each(result, function(i, field){
if(field.hour=="0"){
soil_day_list.push(field);
//log.info(field.date);
}else{
let date = new Date(field.date);
date.addHours(field.hour);
field.date=date.toDateString();
soil_day_list.push(field);
//log.info(field.date);
}
});
if(soil_day_list.length>0)
document.getElementById('filter_soil_day').value=soil_day_list[soil_day_list.length-1].date;
});
$.getJSON(url+"geodatalist/AirTemperatureDates", function(result){
air_day_list=[];
$.each(result, function(i, field){
if(field.hour=="0"){
air_day_list.push(field);
}
});
if(air_day_list.length>0)
document.getElementById('filter_air_day').value=air_day_list[air_day_list.length-1].date;
});
$.getJSON(url+"geodatalist/PrecipitationDates", function(result){
precipitation_day_list=[];
$.each(result, function(i, field){
//if(field.hour=="0"){
precipitation_day_list.push(field);
//}
});
if(precipitation_day_list.length>0){
document.getElementById('filter_precipitation_day').value=precipitation_day_list[precipitation_day_list.length-1].date;
//document.getElementById('filter_htc_selyaninov_time_start').value=precipitation_day_list[precipitation_day_list.length-1].date;
//document.getElementById('filter_htc_selyaninov_time_end').value=precipitation_day_list[precipitation_day_list.length-1].date;
}
});
//loadContent("http://geoserver2.ccalm.org/geodatalist/?fn=ndvi","NDVI_DATE");
//loadContent("http://geoserver2.ccalm.org/geodatalist/?fn=ndwi","NDWI_DATE");
$.getJSON(url+"geodatalist/GeoTIFF?fn=ndvi_list", function(result){
let list = document.getElementById("filter_ndvi_day");
let opt=null;
$.each(result, function(i, field){
opt = document.createElement("option");
opt.value = field.num;
opt.text = field.date;
list.add(opt);
});
if(opt!=null) opt.selected = true;
});
$.getJSON(url+"geodatalist/GeoTIFF?fn=ndwi_list", function(result){
let list = document.getElementById("filter_ndwi_day");
let opt=null;
$.each(result, function(i, field){
opt = document.createElement("option");
opt.value = field.num;
opt.text = field.date;
list.add(opt);
});
if(opt!=null) opt.selected = true;
list.dispatchEvent(new Event('change'));
});
document.getElementById('filter_ndwi_day').addEventListener('change', function() {
let selMain = document.getElementById("filter_ndwi_day");
let selSec = document.getElementById("filter_ndwi_day_compare");
selSec.innerHTML = "";
let option = document.createElement('option');
option.setAttribute("value","");
option.appendChild(document.createTextNode(""));
option.selected = true;
selSec.appendChild( option );
let find=false;
for(let i = selMain.options.length - 1; i >=0 ; i--) {
if(find){
if(selMain.value%10==0){
option = document.createElement('option');
option.setAttribute("value",selMain.value);
//option.setAttribute("value",selMain.options[i].value);
option.appendChild(document.createTextNode(selMain.options[i].text));
selSec.appendChild( option );
break;
}else{
option = document.createElement('option');
option.setAttribute("value","_");
option.appendChild(document.createTextNode(selMain.options[i].text));
selSec.appendChild( option );
break;
}
}
if(selMain.options[i].value == selMain.value){
find=true;
}
}
});
$.getJSON(url+"geodatalist/GeoTIFF?fn=ndsi_list", function(result){
let list = document.getElementById("filter_ndsi_day");
let opt=null;
$.each(result, function(i, field){
opt = document.createElement("option");
opt.value = field.num;
opt.text = field.date;
list.add(opt);
});
if(opt!=null) opt.selected = true;
});
$.getJSON(url+"geodatalist/GeoTIFF?fn=smap_list", function(result){
let list = document.getElementById("filter_smap_day");
let opt=null;
$.each(result, function(i, field){
opt = document.createElement("option");
opt.value = field.num;
opt.text = field.date;
list.add(opt);
});
if(opt!=null) opt.selected = true;
});
</script>
</div></div>
<div id="tab_admin" style="position: absolute; width:100px; height:100px; padding:3px; overflow:scroll;">
<div id="lblReports" th:text="${Reports}">Reports</div>
<button class="main" style="width:100%;margin-top:1px;" onclick="showReportCountries();" th:text="${Filling_forms_by_countries}">Filling_forms_by_countries</button>
<button class="main" style="width:100%;margin-top:1px;" onclick="showReportInspectors();" th:text="${Completed_forms_by_tablets}">Completed_forms_by_tablets</button>
<button class="main" style="width:100%;margin-top:1px;" onclick="showReportTabletsStatistics();" th:text="${Tablet_statistics}">Tablet_statistics</button>
<div id="lblDevices" th:text="${Devices}">Devices</div>
<button id="btnTerminalsShow" class="main" style="width:100%;margin-top:1px;" onclick="showDataWindow('Terminals')" th:text="${The_tablets}">The_tablets</button>
<!--button id="btnTerminalsModelsShow" style="width:100%;margin-top:1px;" onclick="showDataWindow('TerminalsModels')" th:text="${Terminal_model}">Terminal_model</button-->
<div id="lblSurvey" th:text="${Standard_survey_forms}">Standard_survey_forms</div>
<button class="main" style="width:100%;margin-top:1px;" onclick="openFrmLocustData();" th:text="${Locust_Survey_Forms}">Locust_Survey_Forms</button>
<button class="main" style="width:100%;margin-top:1px;" onclick="openFrmLocustDelData();" th:text="${Spray_Monitoring_Forms}">Spray_Monitoring_Forms</button>
<button class="main" style="width:100%;margin-top:1px;" onclick="openFrmLocustInfo();" th:text="${Information_on_the_distribution_of_locust}">Information_on_the_distribution_of_locust</button>
<div id="lblCompanies" th:text="${Companies}">Companies</div>
<button id="btnCompaniesShow" class="main" style="width:100%;margin-top:1px;" onclick="showDataWindow('Companies')" th:text="${Organizations}">Organizations</button>
<div id="lblAdministration" th:text="${Administration}">Administration</div>
<button id="btnActionsShow" class="main" style="width:100%;margin-top:1px;" onclick="showDataWindow('_Actions')" th:text="${Actions}"></button>
<button id="btnAccessShow" class="main" style="width:100%;margin-top:1px;" onclick="showDataWindow('_Access')" th:text="${Access}">Access</button>
<button id="btnGroupsShow" class="main" style="width:100%;margin-top:1px;" onclick="showDataWindow('_Groups')" th:text="${Access_role}">Access_role</button>
<button id="btnUsersShow" class="main" style="width:100%;margin-top:1px;" onclick="showDataWindow('_Users')" th:text="${Users}">Users</button>
<button id="btnHistoryShow" class="main" style="width:100%;margin-top:1px;" onclick="showDataWindow('_History')" th:text="${History}">History</button>
<button id="btnMetadataShow" class="main" style="width:100%;margin-top:1px;" onclick="showDataWindow('_Metadata')" th:text="${Metadata}">Metadata</button>
<div id="lblLanguage" th:text="${Language}">Language</div>
<button id="btnLanguage" class="main" style="width:100%;margin-top:1px;" onclick="showDataWindow('_Languages')" th:text="${Language}">Language</button>
<button id="btnTranslation" class="main" style="width:100%;margin-top:1px;" onclick="showDataWindow('_Translations')" th:text="${Translation}">Translation</button>
<div id="lblWeather" th:text="${Weather}">Weather</div>
<button id="btnWeather" class="main" style="width:100%;margin-top:1px;" onclick="showDataWindow('Weather')" th:text="${Weather}">Weather</button>
<button id="btnWeatherType" class="main" style="width:100%;margin-top:1px;" onclick="showDataWindow('WeatherTypes')"><span th:text="${Weather}">Weather</span> <span th:text="${Type}">Type</span></button>
<div id="lblLists" th:text="${Lists}">Lists</div>
<button id="btnCountries" class="main" style="width:100%;margin-top:1px;" onclick="showDataWindow('Countries')" th:text="${Countries}">Countries</button>
<button id="btnSprayers" class="main" style="width:100%;margin-top:1px;" onclick="showDataWindow('Sprayers')" th:text="${Sprayers}">Sprayers</button>
<button id="btnListAge" class="main" style="width:100%;margin-top:1px;" onclick="showDataWindow('List_Age')" th:text="${Age}">Age</button>
<button id="btnListBiotope" class="main" style="width:100%;margin-top:1px;" onclick="showDataWindow('List_Biotope')" th:text="${Biotop}">Biotop</button>
<button id="btnListCover" class="main" style="width:100%;margin-top:1px;" onclick="showDataWindow('List_Cover')" th:text="${Density_of_vegetation}">Density_of_vegetation</button>
<button id="btnListDamage" class="main" style="width:100%;margin-top:1px;" onclick="showDataWindow('List_Damage')" th:text="${Damage}">Damage</button>
<button id="btnListDensity" class="main" style="width:100%;margin-top:1px;" onclick="showDataWindow('List_Density')" th:text="${Density}">Density</button>
<button id="btnListDirections" class="main" style="width:100%;margin-top:1px;" onclick="showDataWindow('List_Directions')" th:text="${Directions}">Directions</button>
<button id="btnListMortality" class="main" style="width:100%;margin-top:1px;" onclick="showDataWindow('List_Mortality')" th:text="${Methods_of_calculating_mortality}">Methods_of_calculating_mortality</button>
<button id="btnListPhase" class="main" style="width:100%;margin-top:1px;" onclick="showDataWindow('List_Phase')" th:text="${Phase}">Phase</button>
<button id="btnListImpact" class="main" style="width:100%;margin-top:1px;" onclick="showDataWindow('List_Impact')" th:text="${Impact}">Impact</button>
<button id="btnListPurpose" class="main" style="width:100%;margin-top:1px;" onclick="showDataWindow('List_Purpose')" th:text="${Purpose}">Purpose</button>
<button id="btnListGreenery" class="main" style="width:100%;margin-top:1px;" onclick="showDataWindow('List_Greenery')" th:text="${Condition_of_vegetation}">Condition_of_vegetation</button>
<button id="btnListLocustType" class="main" style="width:100%;margin-top:1px;" onclick="showDataWindow('LocustsTypes')" th:text="${Types_of_locust}">Types_of_locust</button>
<button id="btnListOperatorsTypes" class="main" style="width:100%;margin-top:1px;" onclick="showDataWindow('List_OperatorsTypes')" th:text="${Types_of_operators}">Types_of_operators</button>
<button id="btnListActions" class="main" style="width:100%;margin-top:1px;" onclick="showDataWindow('List_Actions')" th:text="${Actions_of_bands}">Actions_of_bands</button>
<button id="btnListBehaviors" class="main" style="width:100%;margin-top:1px;" onclick="showDataWindow('List_Behaviors')" th:text="${Behaviors}">Behaviors</button>
<button id="btnListPaintings" class="main" style="width:100%;margin-top:1px;" onclick="showDataWindow('List_Paintings')"><span th:text="${Paintings}">Paintings</span> (<span th:text="${Phase}">Phase</span>)</button>
<button id="btnFledgling" class="main" style="width:100%;margin-top:1px;" onclick="showDataWindow('Fledgling')" th:text="${Fledgling}">Fledgling</button>
<button id="btnListCapacities" class="main" style="width:100%;margin-top:1px;" onclick="showDataWindow('List_Capacities')" th:text="${Capacities}">Capacities</button>
<button id="btnListСontainers" class="main" style="width:100%;margin-top:1px;" onclick="showDataWindow('List_Containers')" th:text="${Containers}">Containers</button>
<button id="btnListMarkings" class="main" style="width:100%;margin-top:1px;" onclick="showDataWindow('List_Markings')" th:text="${Markings}">Markings</button>
<button id="btnBorns" class="main" style="width:100%;margin-top:1px;" onclick="showDataWindow('Borns')" th:text="${Borns}">Borns</button>
<button id="btnListBreeding" class="main" style="width:100%;margin-top:1px;" onclick="showDataWindow('List_Breeding')" th:text="${Spatial_distribution}">Spatial_distribution</button>
<button id="btnListVegetation" class="main" style="width:100%;margin-top:1px;" onclick="showDataWindow('List_Vegetation')" th:text="${Vegetation}">Vegetation</button>
<button id="btnListFormulation" class="main" style="width:100%;margin-top:1px;" onclick="showDataWindow('List_Formulation')" th:text="${Formulation}">Formulation</button>
<button id="btnListHeight" class="main" style="width:100%;margin-top:1px;" onclick="showDataWindow('List_Height')" th:text="${Height}">Height</button>
<button id="btnListEnemies" class="main" style="width:100%;margin-top:1px;" onclick="showDataWindow('List_Enemies')" th:text="${Enemies}">Enemies</button>
<!--div id="lblLists" th:text="${All}">Всё остальное</div>
<button class="main" style="width:100%;margin-top:1px;" onclick="showDataWindow('Layouts')" th:text="${Layout}">Layout</button>
<button class="main" style="width:100%;margin-top:1px;" onclick="showDataWindow('ReportInspectors')" th:text="${Report_by_tablets}">Report_by_tablets</button>
<button class="main" style="width:100%;margin-top:1px;" onclick="showDataWindow('ReportCountries')" th:text="${Report_by_countries}">Report_by_countries</button>
<button class="main" style="width:100%;margin-top:1px;" onclick="showDataWindow('SysChangePassword')" th:text="${Change_password}">Change_password</button>
<button class="main" style="width:100%;margin-top:1px;" onclick="showDataWindow('SysUsersSettings')" th:text="${User_settings}">User_settings</button>
<button class="main" style="width:100%;margin-top:1px;" onclick="showDataWindow('SysCompanies')" th:text="${Company}">Company</button>
<button class="main" style="width:100%;margin-top:1px;" onclick="showDataWindow('SysObjectsGroups')" th:text="${Groups_of_objects}">Groups_of_objects</button>
<button class="main" style="width:100%;margin-top:1px;" onclick="showDataWindow('SysAccessList')" th:text="${Access}">Access</button>
<button class="main" style="width:100%;margin-top:1px;" onclick="showDataWindow('SysObjectsSensors')" th:text="${Sensor}">Sensor</button>
<button class="main" style="width:100%;margin-top:1px;" onclick="showDataWindow('SysObjectsReadings')" th:text="${Value}">Sys Value</button>
<button class="main" style="width:100%;margin-top:1px;" onclick="showDataWindow('SysMessagesUsers')" th:text="${Messages}">Messages</button>
<button class="main" style="width:100%;margin-top:1px;" onclick="showDataWindow('CarGPSDays')" th:text="${Days}">Days</button>
<button class="main" style="width:100%;margin-top:1px;" onclick="showDataWindow('CarGPSHours')" th:text="${Hours}">Hours</button>
<button class="main" style="width:100%;margin-top:1px;" onclick="showDataWindow('CompaniesUsers')" th:text="${Company->User}"></button>
<button class="main" style="width:100%;margin-top:1px;" onclick="showDataWindow('TerminalsSensors')" th:text="${Sensor}">Sensor</button>
<button class="main" style="width:100%;margin-top:1px;" onclick="showDataWindow('TerminalsSensorsTypes')" th:text="${Sensor_model}">Sensor_model</button>
<button class="main" style="width:100%;margin-top:1px;" onclick="showDataWindow('ObjectsGroups')" th:text="${Groups_of_objects}">Groups_of_objects</button>
<button class="main" style="width:100%;margin-top:1px;" onclick="showDataWindow('Icons')" th:text="${Icons}">Icons</button>
<button class="main" style="width:100%;margin-top:1px;" onclick="showDataWindow('GeoFences')" th:text="${Geofence}">Geofence</button>
<button class="main" style="width:100%;margin-top:1px;" onclick="showDataWindow('ObjectsGeoFences')" th:text="${Object->Geofence}">Object->Geofence</button>
<button class="main" style="width:100%;margin-top:1px;" onclick="showDataWindow('ObjectsReadings')" th:text="${Readings}">Readings</button>
<button class="main" style="width:100%;margin-top:1px;" onclick="showDataWindow('Messages')" th:text="${Message}">Message</button>
<button class="main" style="width:100%;margin-top:1px;" onclick="showDataWindow('MessagesUsers')" th:text="${User_messages}">User_messages</button>
<button class="main" style="width:100%;margin-top:1px;" onclick="showDataWindow('ObjectsSensorsLimits')" th:text="${The_boundary_values_of_the_sensors}">The_boundary_values_of_the_sensors</button>
<button class="main" style="width:100%;margin-top:1px;" onclick="showDataWindow('SprayersTypes')" th:text="${SprayersTypes}">SprayersTypes</button>
<button class="main" style="width:100%;margin-top:1px;" onclick="showDataWindow('CountriesRegions')" th:text="${CountriesRegions}">CountriesRegions</button-->
<!--div id="lblLists" th:text="${Other}">Other</div>
<button class="main" id="btnCountries" style="width:100%;margin-top:1px;" onclick="showDataWindow('Countries')" th:text="${Countries}">Countries</button>
<button class="main" id="btnCountriesRegions" style="width:100%;margin-top:1px;" onclick="showDataWindow('CountriesRegions')" th:text="${Regions}">Regions</button>
<button class="main" id="btnCountryDistricts" style="width:100%;margin-top:1px;" onclick="showDataWindow('CountryDistricts')" th:text="${Districts}">Districts</button-->
</div>
<script>
var tab=new tcTabs(document.getElementById('Tabs1'));
tb=tab.addTab({caption:trt('Displaying_data')});
tb.setConObj(document.getElementById("tab_layouts"));
tb.setSel();
//tb=tab.addTab({caption:trt('Locust_survey')});
//tb.setConObj(document.getElementById("tab_Survey_Form"));
//tb=tab.addTab({caption:trt('Spray_monitoring')});
//tb.setConObj(document.getElementById("tab_Spray_Form"));
tb=tab.addTab({caption:trt('Satellite_products')});
tb.setConObj(document.getElementById("tab_reports"));
tb=tab.addTab({caption:trt('Administration')});
tb.setConObj(document.getElementById("tab_admin"));
</script>
</td><td valign="top" style="height:100%;">
<div id="cnt_mapdiv" style="width:100%; height:100%; background-color: Gray; overflow: hidden; position: relative;"><div id="mapdiv" style="position: absolute;width:800px; height:800px;"></div></div>
<script src="../resources/engine/openlayers/ol.js"></script>
<script src="../resources/engine/openlayers/proj4.js"></script>
<script>
//proj4=Proj4js;
//TODO создать стиль для Building !!! И сделать их допусти чёрными
var buildingStyle = new ol.style.Style({
fill: new ol.style.Fill({
color: '#666',
opacity: 0.4,
}),
stroke: new ol.style.Stroke({
color: '#444',
width: 1,
})
});
var boundaryStyle = new ol.style.Style({
stroke: new ol.style.Stroke({
color: '#444',
width: 1,
})
});
/*var adminStyleText = new ol.style.Style({
stroke: new ol.style.Stroke({
color: '#444',
width: 1,
}),
text: new ol.style.Text({ font: '13px sans-serif' })
});*/
var fill = new ol.style.Fill({
color: 'rgba(255,255,255,0.4)'
});
var stroke = new ol.style.Stroke({
color: '#3399CC',
width: 1.25
});
var adminStyleText = new ol.style.Style({
text: new ol.style.Text({
font: '18px Calibri,sans-serif',
fill: new ol.style.Fill({ color: '#ffffff' }),
stroke: new ol.style.Stroke({
color: '#000000', width: 2
}),
textBaseline: 'center'
})
});
//Since the Yandex map is in a different projection
//proj4.defs('EPSG:3395', '+proj=merc +lon_0=0 +k=1 +x_0=0 +y_0=0 +datum=WGS84 +units=m +no_defs');
//ol.proj.get('EPSG:3395').setExtent([-20037508.342789244, -20037508.342789244, 20037508.342789244, 20037508.342789244]);
//Create an array with user layers
var g_Layouts = new Object();
g_Layouts["OpenStreetMap"] = new ol.source.XYZ({
url: 'https://tile.openstreetmap.org/{z}/{x}/{y}.png'
});
g_Layouts["BingAerial"] = new ol.source.BingMaps({
key: 'ApvrpuutmzpkBkgftB9ygL0lfc_9VSfprUJp1JMbJpAu4CeIWPJJnC2Bop9HSgNX',
imagerySet: "AerialWithLabels"
});
/*g_Layouts["yandex"] = new ol.source.XYZ({
url: 'https://vec0{1-4}.maps.yandex.net/tiles?l=map&x={x}&y={y}&z={z}',
projection: 'EPSG:3395',
tileGrid: ol.tilegrid.createXYZ({
extent: [-20037508.342789244, -20037508.342789244, 20037508.342789244, 20037508.342789244]
})
});*/
g_Layouts["StamenTerrain"] = new ol.source.XYZ({
url: 'https://tile.thunderforest.com/landscape/{z}/{x}/{y}.png?apikey=c1828b4ca8504fc694936d8729a1cd03'
});
//Map for names of roads and cities for NDVI and NDWI.
var g_boundaryTile = new ol.layer.VectorTile({
source: new ol.source.VectorTile({
format: new ol.format.MVT(),
url: 'https://basemaps.arcgis.com/arcgis/rest/services/World_Basemap_v2/VectorTileServer/tile/{z}/{y}/{x}.pbf',
}),
style: function (feature, resolution) {
switch (feature.get('layer')) {
case 'Building':
return buildingStyle;
case 'Boundary line':
return boundaryStyle;
case 'Admin0 point':
adminStyleText.getText().setText(feature.get('_name'));
return adminStyleText;
default:
return null;
}
}
});
g_boundaryTile.setVisible(false);
/*g_Layouts["Blue"] = new ol.source.XYZ({
url: 'https://cartocdn_a.global.ssl.fastly.net/base-flatblue/{z}/{x}/{y}.png'
});*/
var g_Tile = new ol.layer.Tile({source:g_Layouts["OpenStreetMap"]});
var vectorSource = new ol.source.Vector({});
var vectorSourceV = new ol.source.Vector({});
var vectorSourceDel = new ol.source.Vector({});
var vectorSourceDelV = new ol.source.Vector({});
var vectorSourceHealth = new ol.source.Vector({});
var vectorSourceHealthV = new ol.source.Vector({});
var vectorSourceArea = new ol.source.Vector({});
var vectorSourceCheckpoint = new ol.source.Vector({});
var wms_layer = new ol.layer.Tile({
//source: wms_source
});
//For NDVI
var wms_h20v03 = new ol.layer.Tile({});
var wms_h20v04 = new ol.layer.Tile({});
var wms_h21v03 = new ol.layer.Tile({});
var wms_h21v04 = new ol.layer.Tile({});
var wms_h21v05 = new ol.layer.Tile({});
var wms_h22v03 = new ol.layer.Tile({});
var wms_h22v04 = new ol.layer.Tile({});
var wms_h22v05 = new ol.layer.Tile({});
var wms_h23v03 = new ol.layer.Tile({});
var wms_h23v04 = new ol.layer.Tile({});
var wms_h23v05 = new ol.layer.Tile({});
//Change substrate layer
function changeMap()
{
var layer="";
var input;
input = document.getElementById('SubstrateID');
if(input!=null) layer=input.value;
g_Tile.setSource(g_Layouts[layer]);
}
var projection = ol.proj.get('EPSG:3857');
var projectionExtent = projection.getExtent();
var size = ol.extent.getWidth(projectionExtent) / 256;
var resolutions = new Array(14);
var matrixIds = new Array(14);
for (var z = 0; z < 14; ++z) {
// generate resolutions and matrixIds arrays for this WMTS
resolutions[z] = size / Math.pow(2, z);
matrixIds[z] = z;
}
map = new ol.Map({
target: 'mapdiv',
layers: [
g_Tile,
wms_layer,
wms_h20v03,
wms_h20v04,
wms_h21v03,
wms_h21v04,
wms_h21v05,
wms_h22v03,
wms_h22v04,
wms_h22v05,
wms_h23v03,
wms_h23v04,
wms_h23v05,
g_boundaryTile,
/*new ol.layer.Tile({
opacity: 0.7,
source: new ol.source.WMTS({
attributions: 'Tiles © <a href="https://services.arcgisonline.com/arcgis/rest/' +
'services/Demographics/USA_Population_Density/MapServer/">ArcGIS</a>',
url: 'https://services.arcgisonline.com/arcgis/rest/services/Demographics/USA_Population_Density/MapServer/WMTS/',
layer: '0',
matrixSet: 'EPSG:3857',
format: 'image/png',
projection: projection,
tileGrid: new ol.tilegrid.WMTS({
origin: ol.extent.getTopLeft(projectionExtent),
resolutions: resolutions,
matrixIds: matrixIds
}),
style: 'default',
wrapX: true
})
}),*/
new ol.layer.Vector({
source: vectorSource,
zIndex: 100
}),
new ol.layer.Vector({
source: vectorSourceV,
zIndex: 50
}),
new ol.layer.Vector({
source: vectorSourceDel,
zIndex: 100
}),
new ol.layer.Vector({
source: vectorSourceDelV,
zIndex: 50
}),
new ol.layer.Vector({
source: vectorSourceHealth,
zIndex: 100
}),
new ol.layer.Vector({
source: vectorSourceHealthV,
zIndex: 50
}),
new ol.layer.Vector({
source: vectorSourceArea,
zIndex: 50
}),
new ol.layer.Vector({
source: vectorSourceCheckpoint,
zIndex: 50
})
/*,
new ol.layer.Vector({
title: 'added Layer',
source: new ol.source.Vector({
url: 'http://localhost:8081/ASDC/engine/geo_json.jsp?table=countriesregions&id=10',
format: new ol.format.GeoJSON(),
}),
style: new ol.style.Style({
fill: new ol.style.Fill({color: 'rgba(76, 181, 248, 0.2)'}),
stroke: new ol.style.Stroke({color: 'rgba(0, 0, 255, 0.5)', width: 1})
})
})*/
],
view: new ol.View({
center: ol.proj.fromLonLat([55 ,45]),
zoom: 5
})
});
/*
var districtLayer = new ol.layer.Tile({
opacity: 0.7,
source: new ol.source.WMTS({
attributions: 'Tiles © <a href="https://services.arcgisonline.com/arcgis/rest/' +
'services/Demographics/USA_Population_Density/MapServer/">ArcGIS</a>',
url: 'https://services.arcgisonline.com/arcgis/rest/services/Demographics/USA_Population_Density/MapServer/WMTS/',
layer: '0',
matrixSet: 'EPSG:3857',
format: 'image/png',
projection: projection,
tileGrid: new ol.tilegrid.WMTS({
origin: ol.extent.getTopLeft(projectionExtent),
resolutions: resolutions,
matrixIds: matrixIds
}),
style: 'default',
wrapX: true
})
});
map.addLayer(districtLayer);
*/
//-------------------------------------------------------------------------------------------------------------
//var popup = new ol.Overlay({element: document.getElementById('popup')});
//map.addOverlay(popup);
// display popup on click
map.on('singleclick', function(evt){ //map.on('click', function(evt){
let coordinate = evt.coordinate;
//var hdms = ol.coordinate.toStringHDMS(ol.proj.transform( coordinate, 'EPSG:3857', 'EPSG:4326'));
//$(element).popover('destroy');
//popup.setPosition(coordinate);
//$(popup.getElement()).show();
{
let center = ol.proj.transform(coordinate, 'EPSG:3857', 'EPSG:4326')
if (g_WeaLegend!=null && g_WeaLegend.visible) alert("g_WeaLegend");
if (g_AirLegend!=null && g_AirLegend.visible) alert("g_AirLegend");
if (g_PreLegend!=null && g_PreLegend.visible) alert("g_PreLegend");
//alert("lat = "+center[1]+" lon = "+center[0])
}
if(g_FrmCheckpoints!=null){
let center = ol.proj.transform(coordinate, 'EPSG:3857', 'EPSG:4326')
for(let i=0;i<g_FrmCheckpoints.win.childs.length;i++){
if(g_FrmCheckpoints.win.childs[i]!=null && g_FrmCheckpoints.win.childs[i].obj.constructor.name == "EdtRec"){
let erec = g_FrmCheckpoints.win.childs[i].obj;
erec.setValue("lat",center[1]);
erec.setValue("lon",center[0]);
}
}
}
let feature = map.forEachFeatureAtPixel(evt.pixel,function(feature) {return feature;});
if(feature)
{
if(feature.userType=="FrmLocust")
{
//alert("feature="+feature.userName+' id='+feature.userID);
if(m_winPP!=null) m_winPP.Close();
m_winPP=new TWin();
m_winPP.BuildGUI(pageX-100,pageY-100);
m_winPP.setSize(640,200);
m_winPP.setCaption(trt("Locust_survey") + ' "' + feature.userName + '".');
//m_winPP.showProgressBar();
m_winPP.setCenter();
callFrmLocustDataPopupInterface(feature.userID);
}
if(feature.userType=="FrmLocustDel")
{
//alert("feature="+feature.userName+' id='+feature.userID);
if(m_winPP!=null) m_winPP.Close();
m_winPP=new TWin();
m_winPP.BuildGUI(pageX-100,pageY-100);
m_winPP.setSize(640,200);
m_winPP.setCaption(trt("Spray_monitoring") + ' "' + feature.userName + '".');
//m_winPP.showProgressBar();
m_winPP.setCenter();
callFrmLocustDelDataPopupInterface(feature.userID);
}
if(feature.userType=="FrmCheckpoint")
{
let coordinates = feature.getGeometry().getCoordinates();
content.innerHTML =
'<span style="white-space: nowrap;"><b>' + trt('Title') + '</b>:&nbsp;' + feature.userTitle + '</span><br>' +
'<span style="white-space: nowrap;"><b>' + trt('Creator') + '</b>:&nbsp;' + feature.userName + '</span><br>' +
'<span style="white-space: nowrap;"><b>' + trt('Radius') + '</b>:&nbsp;' + feature.userRadius + 'm.</span><br>' +
'<span style="white-space: nowrap;"><b>' + trt('Want_air_temperature') + '</b>:&nbsp;' + feature.userTemperature_air + '°C</span><br>' +
'<span style="white-space: nowrap;"><b>' + trt('Want_soil_temperature') + '</b>:&nbsp;' + feature.userTemperature_air + '°C</span>';
content.innerHTML += '<table style="width: 100%;border-spacing: 2px; border-collapse: separate;"><tr><td><button class="main" style="width: 100%;" onclick="g_density_larval.callData('+feature.userID+');">'+trt('Hopper_density')+'</button></td><td><button class="main" style="width: 100%;" onclick="g_density_imago.callData('+feature.userID+');">'+trt('Adult_density')+'</button></td></tr></table>';
overlay.setPosition(coordinates);
}else{
overlay.setPosition(undefined);
closer.blur();
}
if(feature.userData !== undefined && (feature.userData.type=="Product2" || feature.userData.type=="Product3" || feature.userData.type=="Product2r" || feature.userData.type=="Product3r"))
{
//if(feature.userData.percent!='')
new TChartFRMLocustInfo(feature.userData);
//else
// alert2(trt('Alert'),trt('No_data')+'!',feature.userData.name);
}
if(feature.userData !== undefined && (feature.userData.type=="Product4" || feature.userData.type=="Product4r"))
{
if(feature.userData.percent!='')
{
var win = new TWin();
win.BuildGUI(pageX,pageY);
win.setCaption(trt('Data'));
win.setSize("220px","100px");
win.setCenter();
win.setContent(feature.userData.text);
win.hide(false);
}else
alert2(trt('Alert'),trt('No_data')+'!');
}
}else{
overlay.setPosition(undefined);
closer.blur();
}
});
// Change mouse cursor when over marker
map.on('pointermove', function(evt)
{
let elm=map.getTargetElement();
if(elm!=null)
{
let feature = map.forEachFeatureAtPixel(evt.pixel,function(feature) {return feature;});
if (feature && (feature.userType=="FrmLocust" || feature.userType=="FrmLocustDel" || feature.userType=="FrmCheckpoint" ))
elm.style.cursor = 'pointer';
else
elm.style.cursor = '';
}
});
// Создаем элемент для всплывающего окна
let container = document.getElementById('popup');
let content = document.getElementById('popup-content');
let closer = document.getElementById('popup-closer');
let overlay = new ol.Overlay({
element: container,
autoPan: true,
autoPanAnimation: {
duration: 250
}
});
map.addOverlay(overlay);
closer.onclick = function() {
overlay.setPosition(undefined);
closer.blur();
return false;
};
function updateSize()
{
//Сдвоеное Split окно расположено в ячейки таблицы
/*tSplit=document.getElementById('tSplit'); //Ячейка таблицы td
dSplit=document.getElementById('dSplit'); //Контейнер сплита div
if(tSplit!=null && dSplit!=null)
{
dSplit.style.width = (tSplit.offsetWidth-2)+"px";
dSplit.style.height = (tSplit.offsetHeight-2)+"px";
}*/
let tab_layouts=document.getElementById('tab_layouts');
tab_layouts.style.height = (tab.ctt.offsetHeight-3)+"px";
tab_layouts.style.width = (tab.ctt.offsetWidth-3)+"px";
let tab_reports=document.getElementById('tab_reports');
tab_reports.style.height = (tab.ctt.offsetHeight-3)+"px";
tab_reports.style.width = (tab.ctt.offsetWidth-3)+"px";
//Таб администрирования (при изменении размеров окна и при перемещении Split)
var tab_admin=document.getElementById('tab_admin');
tab_admin.style.height = (tab.ctt.offsetHeight-3)+"px";
tab_admin.style.width = (tab.ctt.offsetWidth-3)+"px";
//Регулирую высоту карты так как она не правильно работает если задать 100%
let cdiv=document.getElementById('cnt_mapdiv');
let tdiv=document.getElementById('mapdiv');
tdiv.style.height = (cdiv.offsetHeight)+"px";
tdiv.style.width = (cdiv.offsetWidth)+"px";
}
window.onresize = function()
{
setTimeout( function()
{
updateSize();
if(map!=null) map.updateSize();
}, 100);
}
onresize();
onLoadPage();
</script>
</td></tr></table>
<!-- div id="dSplit" class="api" style="position: absolute;">
<div id="three" class="split split-horizontal">
<div id="four" class="split split-horizontal">
</div>
</div-->
<!-- script src="split.js"></script>
<script>
var split = Split(['#three', '#four'], {
sizes: [10, 90],
minSize: 450,
onDragEnd: function(){ setTimeout(function(){if(map!=null) map.updateSize(); updateSize();}, 100)}
});
</script-->
</td>
</tr>
</table>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink