igor/org.ccalm.main
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

первая

Browse Source
This commit is contained in:
igor
2024-12-09 20:59:06 +06:00
parent 8ea4993263
commit 63e7081516
50 changed files with 18739 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

679
src/main/resources/templates/test.html Normal file
View File

@ -0,0 +1,679 @@
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="shortcut icon" href="./resources/favicon.ico" />
<title>Caucasus and Central Asia Locusts Management system (CCALM)</title>
<meta name="robots" content="noindex">
<meta name="description" content="According to the implementation of the Road Map program to improve national and regional locust control in the Caucasus and Central Asia (CCA) developed a system of monitoring and analysis designed to control locusts in the CCA using a geographic information system and remote sensing technology">
<meta name="yandex-verification" content="2cb5374be0668fe9" />
<script type="text/javascript" src="./resources/metadata/jquery.js"></script>
<script type="text/javascript" src="./translation?v=7"></script>
<script src="./resources/metadata/dbms/tools.js?v=9"></script>
<link rel="stylesheet" href="./resources/engine/css/buttons.css?v=7">
<link rel="stylesheet" href="./resources/engine/normalize.css?v=7">
<link rel="stylesheet" href="./resources/metadata/dbms/dbms.css?v=7"/>
<link rel="stylesheet" href="./resources/engine/index.css?v=7">
<script type="text/javascript" src="./resources/engine/popup.js?v=03"></script>
<script type="text/javascript" src="./resources/index.js?v=01"></script>
<link rel="stylesheet" href="./resources/engine/openlayers/ol.css" type="text/css">
<link rel="stylesheet" href="./resources/engine/openlayers/ol-ext.css" />
<script src="./resources/engine/openlayers/ol.js"></script>
<script src="./resources/engine/openlayers/proj4.js"></script>
<script src="./resources/engine/openlayers/ol-ext.js"></script>
<style>
html,body
{
height:100%;
min-height:100%;
margin:0px;
padding:0px;
text-align:center;
background-color: #f0f0f0;
}
h2{
font-size: 24px;
margin-block-start: 0.10em;
margin-block-end: 0.10em;
margin-bottom: 5px;
}
h3{
font-size: 20px;
margin-block-start: 0.10em;
margin-block-end: 0.10em;
margin-bottom: 5px;
}
table {
font-weight: inherit;
}
p{
text-indent: 25px;
text-align: justify;
margin-top: 5px;
}
.content
{
max-width:980px;
/*height:100%;*/
/*min-height:100%;*/
margin:0 auto;
text-align:left;
/*background-color: #ffffff;*/
}
.app {
display: grid;
grid-column-gap: 15px;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}
.ol-scale-line {
left: 50%;
transform: translate(-50%, 0);
-ms-transform: translate(-50%, 0)
}
.ol-full-screen{
left: .5em;
bottom: .5em;
right:inherit;
top:inherit
}
.ol-legend > div.ol-legend {
position: relative;
left: 50%;
}
</style>
<script type="text/javascript">
var date_start=getParam('date_start',window);
var date_end=getParam('date_end',window);
if(date_start=='') date_start=(Date.now()/1000)-2592000;
if(date_end=='') date_end=Date.now()/1000;
function setCookie (name, value, expires, path, domain, secure)
{
var exdate=new Date();
exdate.setDate(exdate.getDate() + expires);
expires=exdate.toUTCString()
document.cookie = name + "=" + escape(value) +
((expires) ? "; expires=" + expires : "") +
((path) ? "; path=" + path : "") +
((domain) ? "; domain=" + domain : "") +
((secure) ? "; secure" : "");
}
if(window.location.host.indexOf('locust.kz')>=0){
window.location.href = "https://ccalm.org";
}
if(window.location.host.indexOf('ccalm.org')>=0 && location.protocol == 'http:'){
location.href = location.href.replace(/^http:/, 'https:')
}
var g_lng = /*[[${m_locale}]]*/ '';
var g_map=null;
var m_winPP=null;
function Configure(){
let win=new TWin(false,'./resources');
win.BuildGUI(pageX-100,pageY-100);
win.setSize(300,20);
win.setCaption(trt('Configure'));
//win.showProgressBar();
win.shadow = true;
let html='<table width="100%" border="0"><tbody><tr><td style="padding: 1px; white-space: nowrap;" width="1%">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_first_date_start" type="text"></td><td style="width: 25px;"><img id="filter_first_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%">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_first_date_end" type="text"></td><td style="width: 25px;"><img id="filter_first_date_end_trigger" src="../resources/engine/images/datepicker.jpg" style="cursor: pointer; margin-left: 1px;"></td></tr></tbody></table></td></tr></tbody></table>';
html+='<input class="button-secondary" id="btnApply" type="button" value="'+trt('Apply')+'" style="margin: 0px 1px 0px 0px;float:right;">';
win.setContent(html);
win.setCenter();
win.hide(false);
$("#btnApply").click(function() {
let date_start="";
let input = document.getElementById('filter_first_date_start');
if(input!=null)
{
let date = new Date(input.value.replace(/-/g, "/"));
date_start=date.getTime()/1000;// - date.getTimezoneOffset()*60;
if(isNaN(date_start)) date_start='';
}
let date_end="";
input = document.getElementById('filter_first_date_end');
if(input!=null)
{
let date = new Date(input.value.replace(/-/g, "/"));
date_end=date.getTime()/1000;// - date.getTimezoneOffset()*60;
if(isNaN(date_end)) date_end='';
}
let path="./?date_start="+date_start+"&date_end="+date_end;
window.open(path, "_self");
});
}
</script>
</head>
<body>
<div style="background-color: #2694bb;">
<div class="content" style="color: #ffffff; font-size: 16px; padding-top: 15px;padding-bottom: 15px;position: relative;">
<img id="idLogo_ru" src="./resources/images/logo_en.svg" alt="" style="height:60px;cursor:pointer;display: none;" onclick="window.open('https://www.fao.org/locusts-cca/ru/', '_blank');">
<img id="idLogo_en" src="./resources/images/logo_en.svg" alt="" style="height:60px;cursor:pointer;display:none;" onclick="window.open('https://www.fao.org/locusts-cca/en/', '_blank');">
<div style="display: inline-block; position:absolute; top:5px; right: 5px;">
<a href="./?lng=3" id="lng_3" style="color:#ffffff;text-decoration:none;margin-right:15px;font-weight: bold;">English</a> <a href="./?lng=1" id="lng_1" style="color:#ffffff;text-decoration:none;font-weight: bold;">Русский</a>
<script>
document.getElementById('lng_3').addEventListener('click', function(event) {
setCookie('lng','3',365,'/');
window.location.href = event.target.href;
});
document.getElementById('lng_1').addEventListener('click', function(event) {
setCookie('lng','1',365,'/');
window.location.href = event.target.href;
});
</script>
</div>
</div>
</div>
<div style="background-color: #37390d; background-image: url('./resources/images/head.jpg'); background-repeat: no-repeat; background-position: center; height: 400; align-items: center;">
<div class="content" style="height:100%; color: #ffffff; font-size: 34px; display: flex; align-items: center; justify-content: center; position: relative;">
<div style="width: 100%;">
<div><span th:text="${Caucasus_and_Central_Asia_Locusts_Management_system}">Caucasus_and_Central_Asia_Locusts_Management_system</span> (CCALM)</div>
<div id="idInitiative_en" style="font-size: 14px; font-style: italic; display: none;">An Initiative of the Food and Agriculture Organization of the United Nations</div>
<div id="idInitiative_ru" style="font-size: 14px; font-style: italic; display: none;">По инициативе Продовольственной и сельскохозяйственной организации Объединенных Наций</div>
<script>
if(g_lng=="1")
{
document.getElementById("idLogo_ru").style.display="block";
document.getElementById("idInitiative_ru").style.display="block";
}else{
document.getElementById("idLogo_en").style.display="block";
document.getElementById("idInitiative_en").style.display="block";
}
</script>
</div>
<table style="color: #ffffff; position: absolute; bottom: 8px; right: 8px; padding: 0px;">
<tr>
<td style="text-align: center;">ASDC</td>
<td style="width: 15px;"></td>
<td style="text-align: center;">CCALM</td>
</tr>
<tr>
<td style="text-align: center;"><a target="_blank" href="https://play.google.com/store/apps/details?id=kz.istt.locust"><img src="./resources/images/google_android_download.png" style="width: 64px; height: 64px"></a></td>
<td style="width: 15px;"></td>
<td style="text-align: center;"><a href="#" onclick="window.open('./engine'); return false;"><img src="./resources/images/flex.png" style="width: 64px; height: 64px"></a></td>
</tr>
</table>
</div>
</div>
<!--div style="background-color: #2694bb;">
<div id="idSituation_en" class="content" style="display:none;color: #ffffff; font-size: 16px; padding-top: 15px;padding-bottom: 15px;">
<h2>Hazard levels as June 2023</h2>
<div style="background-color: #ff0000;color:#000000;">Situation level: DANGER in Afghanistan and Tajikistan (DMA)</div>
<div style="background-color: #ffff99;color:#000000;">Situation level: CAUTION in Turkmenistan (DMA), Azerbaijan, Georgia, Kazakhstan, Kyrgyzstan and Uzbekistan (DMA and CIT), Russian Federation (DMA, CIT and LMI), Tajikistan (CIT)</div>
<div style="background-color: #ccffcc;color:#000000;">Situation level: CALM elsewhere or for the other locust pests</div>
</div>
<div id="idSituation_ru" class="content" style="display:none;color: #ffffff; font-size: 16px; padding-top: 15px;padding-bottom: 15px;">
<h2>Уровни опасности июнь 2023г.</h2>
<div style="background-color: #ff0000;color:#000000;">Ситуация: ОПАСНАЯ в Афганистане и Таджикистане </div>
<div style="background-color: #ffff99;color:#000000;">Ситуация: ВНИМАНИЕ в Туркменистане (DMA), Азербайджане, Грузии, Казахстане, Кыргызстане и Узбекистане (DMA и CIT), Российской Федерации (DMA, CIT и LMI), Таджикистане (CIT)</div>
<div style="background-color: #ccffcc;color:#000000;">Ситуация: СПОКОЙНАЯ в других странах и для других видов саранчовых вредителей</div>
</div>
</div-->
<script>
/*if(g_lng=="1")
{
document.getElementById("idSituation_ru").style.display="block";
}else{
document.getElementById("idSituation_en").style.display="block";
}*/
</script>
<div style="background-color: #2694bb;">
<div class="content" style="color: #ffffff; font-size: 24px; padding-top: 15px;padding-bottom: 15px;">
<div>
<div style="display: inline-block;">
<h2 style="display: inline-block;"><span th:text="${Locust_Data}">Locust_Data</span> <span th:text="${with}">with</span> <span id="fromdate">___</span> <span th:text="${to}">to</span> <span id="todate">___</span></h2>
</div>
<div style="display: inline-block;float: right;">
<img src="./resources/images/config.svg" alt="" style="height:30px;cursor:pointer;" th:alt="${Configure}" th:title="${Configure}" onclick="Configure();">
</div>
</div>
<script>
document.getElementById("fromdate").innerHTML = (new Date(date_start * 1000)).toDateString();
document.getElementById("todate").innerHTML = (new Date(date_end * 1000)).toDateString();
</script>
<!--div id="mapdiv" style="color: #000000; font-size: 16px; background-color: Gray; width:100%; height:600px;"></div-->
<div id="cnt_mapdiv" style="width:100%; height:600px; background-color: Gray; overflow: hidden; position: relative;">
<div id="mapdiv" style="position: absolute; color: #000000; font-size: 16px; background-color: Gray; width:100%; height:100%;"></div>
<div style="font-weight: bold; color: #000000; position: absolute; background-color: #ffffff; opacity: 0.7; right: .5em; top: .5em; left:inherit; bottom:inherit">
<table style="margin: 5px;">
<!--tr><td><img src="./resources/images/stai.svg" alt="" height="16px" width="16px"/></td><td th:text="${Swarms}">Swarms</td></tr-->
<tr><td><img src="./resources/images/imago.svg" alt="" height="16px" width="16px"/></td><td th:text="${Adult}">Adult</td></tr>
<tr><td><img src="./resources/images/lichinki.svg" alt="" height="16px" width="16px"/></td><td th:text="${Hoppers}">Hoppers</td></tr><!--tr><td><img src="./resources/images/kuligi.svg" alt="" height="16px" width="16px"/></td><td th:text="${Bands}">Bands</td></tr-->
<tr><td><img src="./resources/images/eggs.svg" alt="" height="16px" width="16px"/></td><td th:text="${Egg_pod}">Egg_pod</td></tr>
<tr><td><img src="./resources/images/spraying.svg" alt="" height="16px" width="16px"/></td><td th:text="${Spraying}">Spraying</td></tr>
<tr><td><img src="./resources/images/point.svg" alt="" height="16px" width="16px"/></td><td th:text="${Not_infected}">Not_infected</td></tr>
</table>
</div>
</div>
</div>
</div>
<script>
// Style function
function getFeatureStyle (feature) {
var st= [];
// Shadow style
st.push (new ol.style.Style ({
image: new ol.style.Shadow ({
radius: 15
})
}));
var st1= [];
// Font style
st.push ( new ol.style.Style ({
image: new ol.style.FontSymbol({
form: "marker",
glyph: 'fa-car',
radius: 15,
offsetY: -15,
fontSize: .7,
color: '#fff',
fill: new ol.style.Fill ({
color: 'blue'
}),
stroke: new ol.style.Stroke ({
color: '#fff',
width: 2
})
}),
stroke: new ol.style.Stroke ({
width: 5,
color: '#f00'
}),
fill: new ol.style.Fill ({
color: [255, 0, 0, 0.6]
})
}));
return st;
}
var g_Layouts = new Object();
g_Layouts["OpenStreetMap"] = new ol.source.XYZ({
url: 'https://tile.openstreetmap.org/{z}/{x}/{y}.png'
,attributions: [
'© OpenStreetMap',
'<a href="https://www.openstreetmap.org/copyright">Terms of Use.</a>'
]
});
var g_Tile = new ol.layer.Tile({source:g_Layouts["OpenStreetMap"]});
var g_vectorSource = new ol.source.Vector({});
var g_vectorLayer = new ol.layer.Vector({source: g_vectorSource,zIndex: 100});
g_map = new ol.Map({
interactions: ol.interaction.defaults({ doubleClickZoom:false, mouseWheelZoom:false }),
target: 'mapdiv',
controls: ol.control.defaults().extend([
new ol.control.ScaleLine(),
new ol.control.ZoomSlider(),
new ol.control.FullScreen()
]),
/*controls: ol.control.defaults({ attribution: false }).extend([attribution]),*/
layers: [
g_Tile,
g_vectorLayer,
],
view: new ol.View({
center: ol.proj.fromLonLat([55 ,45]),
zoom: 4
})
});
// Change mouse cursor when over marker
g_map.on('pointermove', function(evt)
{
let elm=g_map.getTargetElement();
if(elm!=null)
{
var feature = g_map.forEachFeatureAtPixel(evt.pixel,function(feature) {return feature;});
if (feature)
elm.style.cursor = 'pointer';
else
elm.style.cursor = '';
}
});
// display popup on click
g_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();
var feature = g_map.forEachFeatureAtPixel(evt.pixel,function(feature) {return feature;});
if(feature)
{
if(feature.userType==4)
{
if(m_winPP!=null) m_winPP.Close();
m_winPP=new TWin(false,'./resources');
m_winPP.BuildGUI(pageX-100,pageY-100);
m_winPP.setSize(640,200);
m_winPP.setCaption(trt("Spray_monitoring") + ' "' + feature.userName + '".');
m_winPP.setCenter();
callFrmLocustDelDataPopupInterface(feature.userID);
}else
{
if(m_winPP!=null) m_winPP.Close();
m_winPP=new TWin(false,'./resources');
m_winPP.BuildGUI(pageX-100,pageY-100);
m_winPP.setSize(640,200);
m_winPP.setCaption(trt("Locust_survey") + ' "' + feature.userName + '".');
m_winPP.setCenter();
callFrmLocustDataPopupInterface(feature.userID);
}
/*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
alert(trt('No_data')+'!');
}
if(feature.userData.type=="Product4" || feature.userData.type=="Product4r")
{
if(feature.userData.percent!='')
{
var win = new TWin(false,'./resources');
win.BuildGUI(pageX,pageY);
win.setCaption(trt('Data'));
win.setSize("220px","100px");
win.setCenter();
win.setContent(feature.userData.text);
win.hide(false);
}else
alert(trt('No_data')+'!');
}*/
}
});
/*
// Vector layer
var vector = new ol.layer.Vector({
source: new ol.source.Vector(),
style: getFeatureStyle
})
g_map.addLayer(vector);
f0 = new ol.Feature(new ol.geom.Point( [269914, 6248592]));
vector.getSource().addFeature(f0);
// Define a new legend
var legend = new ol.control.Legend({
title: 'Legend',
style: getFeatureStyle,
collapsed: false
});
g_map.addControl(legend);
legend.on('select', function(e) {
if (e.index >= 0) log.info('You click on row: '+e.title+' ('+e.index+')');
else log.info('You click on the title: '+e.title);
});
legend.addRow({ title: 'Car placemark', feature: f0 });
*/
//select id,locust_populated,ST_SetSRID(ST_MakePoint(lon1, lat1),4326) from main.frmlocust where del=false and locust_populated>0 and date>'2022-01-01'
callDataIndex(date_start,date_end);
</script>
<div style="background-color: #ffffff;">
<div id="idBulletin_en" class="content" style="display:none;color:#000000;font-size:24px;padding-top: 15px;padding-bottom: 15px;">
<h2>Regional monthly bulletins on locusts</h2>
<div style="cursor: pointer;" onclick="window.open('https://www.fao.org/locusts-cca/current-situation/en/', '_blank');">
<img src="./resources/images/byulleten.jpg" alt="Byulleten" style="width: 100px; float: left; box-shadow: 0 0 5px rgba(0,0,0,0.5);margin: 10px;">
<div style="color: #0d6cac;">No. 89 June, 2023</div>
<strong>General Situation during May 2023 Forecast for June 2023</strong>
<p>Moroccan Locust (DMA) fledging, mating and egglaying started in most areas of Central Asia (CA), with swarm flights, including across borders, reported in southern parts. The situation was critical in Afghanistan and Tajikistan in...</p>
<div style="text-align: right;"><a href="https://www.fao.org/locusts-cca/current-situation/en/" target="_blank"><span th:text="${Data_source}">Data_source</span> >>></a></div>
</div>
</div>
<div id="idBulletin_ru" class="content" style="display:none;color:#000000;font-size:24px;padding-top: 15px;padding-bottom: 15px;">
<h2>Региональные ежемесячные бюллетени по саранче</h2>
<div style="cursor: pointer;" onclick="window.open('https://www.fao.org/locusts-cca/bulletins/ru/', '_blank');">
<img src="./resources/images/byulleten.jpg" alt="Byulleten" style="width: 100px; float: left; box-shadow: 0 0 5px rgba(0,0,0,0.5);margin: 10px;">
<div style="color: #0d6cac;">№ 89 – июнь 2023 г.</div>
<strong>Общая ситуация в мае 2023 г. Прогноз на июнь 2023 г.</strong>
<p>Окрыление, спаривание и яйцекладка мароккской саранчи (DMA) начались в большинстве районов Центральной Азии (ЦА), перелеты стай, в...</p>
<div style="text-align: right;"><a href="https://www.fao.org/locusts-cca/bulletins/ru/" target="_blank"><span th:text="${Data_source}">Data_source</span> >>></a></div>
</div>
</div>
</div>
<script>
if(g_lng=="1")
{
document.getElementById("idBulletin_ru").style.display="block";
}else{
document.getElementById("idBulletin_en").style.display="block";
}
</script>
<div style="background-color: #dedcdc;">
<div class="content" style="color: #000000; font-size: 24px; padding-top: 15px;padding-bottom: 15px;">
<h2 th:text="${ASDC_Field_Data}">ASDC_Field_Data</h2>
<div class="app" style="font-size: 14px;text-align: center;">
<div style="cursor:pointer; height: 200px; margin-top:5px;margin-bottom:5px;box-shadow: 0 0 10px rgba(0,0,0,0.5);border-radius: 10px;" onclick="showPopUpSurvey();">
<div style="border-radius: 10px 10px 0px 0px; background-color: #aaa9a9; background-image: url('./resources/images/swarms400.jpg'); background-repeat: no-repeat; background-position: center; width: 100%; height: 150px;"></div>
<div style="border-radius: 0px 0px 10px 10px; background-color: #ffffff;width:100%;height:50px;position:relative;"><div style="position:absolute;top:50%;left:50%;-ms-transform: translate(-50%, -50%);transform: translate(-50%, -50%);" th:text="${Locust_survey}">Locust_survey</div></div>
</div>
<div style="cursor:pointer; height: 200px; background-color: #ffffff;margin-top:5px;margin-bottom:5px;box-shadow: 0 0 10px rgba(0,0,0,0.5);border-radius: 10px;" onclick="showPopUpSpray();">
<div style="border-radius: 10px 10px 0px 0px; background-color: #aaa9a9; background-image: url('./resources/images/shell400.jpg'); background-repeat: no-repeat; background-position: center; width: 100%; height: 150px;"></div>
<div style="border-radius: 0px 0px 10px 10px; background-color: #ffffff;width:100%;height:50px;position:relative;"><div style="position:absolute;top:50%;left:50%;-ms-transform: translate(-50%, -50%);transform: translate(-50%, -50%);" th:text="${Spray_monitoring}">Spray_monitoring</div></div>
</div>
<div style="cursor:pointer; height: 200px; background-color: #ffffff;margin-top:5px;margin-bottom:5px;box-shadow: 0 0 10px rgba(0,0,0,0.5);border-radius: 10px;" onclick="showPopUpSafety();">
<div style="border-radius: 10px 10px 0px 0px; background-color: #aaa9a9; background-image: url('./resources/images/environment400.jpg'); background-repeat: no-repeat; background-position: center; width: 100%; height: 150px;"></div>
<div style="border-radius: 0px 0px 10px 10px; background-color: #ffffff;width:100%;height:50px;position:relative;"><div style="position:absolute;top:50%;left:50%;-ms-transform: translate(-50%, -50%);transform: translate(-50%, -50%);" th:text="${Safety_and_environment}">Safety_and_environment</div></div>
</div>
</div>
</div>
</div>
<div style="background-color: #dedcdc;">
<div class="content" style="color: #000000; font-size: 24px; padding-top: 15px;padding-bottom: 15px;">
<h2 th:text="${CALM_and_other_data}">CALM_and_other_data</h2>
<div class="app" style="font-size: 14px;text-align: center;">
<div style="cursor:pointer; height: 210px; background-color: #ffffff;margin-top:5px;margin-bottom:5px;box-shadow: 0 0 10px rgba(0,0,0,0.5);border-radius: 10px;" onclick="showPopUpSoil();">
<div style="border-radius: 10px 10px 0px 0px; background-color: #aaa9a9; background-image: url('./resources/images/soil400.jpg'); background-repeat: no-repeat; background-position: center; width: 100%; height: 150px;"></div>
<div style="border-radius: 0px 0px 10px 10px; background-color: #ffffff; width: 100%; height: 60px;position:relative;"><div style="position:absolute;top:50%;left:50%;-ms-transform: translate(-50%, -50%);transform: translate(-50%, -50%);width:100%;" th:text="${Soil_temperature_at_a_depth_of_10_cm}">Soil_temperature_at_a_depth_of_10_cm</div></div>
</div>
<div style="cursor:pointer; height: 210px; background-color: #ffffff;margin-top:5px;margin-bottom:5px;box-shadow: 0 0 10px rgba(0,0,0,0.5);border-radius: 10px;" onclick="showPopUpAir();">
<div style="border-radius: 10px 10px 0px 0px; background-color: #aaa9a9; background-image: url('./resources/images/air400.jpg'); background-repeat: no-repeat; background-position: center; width: 100%; height: 150px;"></div>
<div style="border-radius: 0px 0px 10px 10px; background-color: #ffffff; width: 100%; height: 60px;position:relative;"><div style="position:absolute;top:50%;left:50%;-ms-transform: translate(-50%, -50%);transform: translate(-50%, -50%);width:100%;" th:text="${Air_temperature_2m_above_the_ground}">Air_temperature_2m_above_the_ground</div></div>
</div>
<div style="cursor:pointer; height: 210px; background-color: #ffffff;margin-top:5px;margin-bottom:5px;box-shadow: 0 0 10px rgba(0,0,0,0.5);border-radius: 10px;" onclick="showPopUpPre();">
<div style="border-radius: 10px 10px 0px 0px; background-color: #aaa9a9; background-image: url('./resources/images/precipitation400.jpg'); background-repeat: no-repeat; background-position: center; width: 100%; height: 150px;"></div>
<div style="border-radius: 0px 0px 10px 10px; background-color: #ffffff; width: 100%; height: 60px;position:relative;"><div style="position:absolute;top:50%;left:50%;-ms-transform: translate(-50%, -50%);transform: translate(-50%, -50%);width:100%;" th:text="${Accumulated_precipitation_in_24_hours}">Accumulated_precipitation_in_24_hours</div></div>
</div>
<div style="cursor:pointer; height: 210px; background-color: #ffffff;margin-top:5px;margin-bottom:5px;box-shadow: 0 0 10px rgba(0,0,0,0.5);border-radius: 10px;" onclick="showPopUpSel();">
<div style="border-radius: 10px 10px 0px 0px; background-color: #aaa9a9; background-image: url('./resources/images/sel400.jpg'); background-repeat: no-repeat; background-position: center; width: 100%; height: 150px;"></div>
<div style="border-radius: 0px 0px 10px 10px; background-color: #ffffff; width: 100%; height: 60px;position:relative;"><div style="position:absolute;top:50%;left:50%;-ms-transform: translate(-50%, -50%);transform: translate(-50%, -50%);width:100%;" th:text="${Hydrothermal_coefficient_of_Selyaninov}">Hydrothermal_coefficient_of_Selyaninov</div></div>
</div>
<div style="cursor:pointer; height: 210px; background-color: #ffffff;margin-top:5px;margin-bottom:5px;box-shadow: 0 0 10px rgba(0,0,0,0.5);border-radius: 10px;" onclick="showPopUpNDVI();">
<div style="border-radius: 10px 10px 0px 0px; background-color: #aaa9a9; background-image: url('./resources/images/ndvi400.jpg'); background-repeat: no-repeat; background-position: center; width: 100%; height: 150px;"></div>
<div style="border-radius: 0px 0px 10px 10px; background-color: #ffffff; width: 100%; height: 60px;position:relative;"><div style="position:absolute;top:50%;left:50%;-ms-transform: translate(-50%, -50%);transform: translate(-50%, -50%);width:100%;"><strong>NDVI</strong> <span th="${Normalized_difference_vegetation_index}">Normalized_difference_vegetation_index</span></div></div>
</div>
<div style="cursor:pointer; height: 210px; background-color: #ffffff;margin-top:5px;margin-bottom:5px;box-shadow: 0 0 10px rgba(0,0,0,0.5);border-radius: 10px;" onclick="showPopUpIVI();">
<div style="border-radius: 10px 10px 0px 0px; background-color: #aaa9a9; background-image: url('./resources/images/ivi400.jpg'); background-repeat: no-repeat; background-position: center; width: 100%; height: 150px;"></div>
<div style="border-radius: 0px 0px 10px 10px; background-color: #ffffff; width: 100%; height: 60px;position:relative;"><div style="position:absolute;top:50%;left:50%;-ms-transform: translate(-50%, -50%);transform: translate(-50%, -50%);width:100%;"><strong>IVI</strong> <span th="${Integral_vegetation_index}">Integral_vegetation_index</span></div></div>
</div>
<div style="cursor:pointer; height: 210px; background-color: #ffffff;margin-top:5px;margin-bottom:5px;box-shadow: 0 0 10px rgba(0,0,0,0.5);border-radius: 10px;" onclick="showPopUpNDWI();">
<div style="border-radius: 10px 10px 0px 0px; background-color: #aaa9a9; background-image: url('./resources/images/ndwi400.jpg'); background-repeat: no-repeat; background-position: center; width: 100%; height: 150px;"></div>
<div style="border-radius: 0px 0px 10px 10px; background-color: #ffffff; width: 100%; height: 60px;position:relative;"><div style="position:absolute;top:50%;left:50%;-ms-transform: translate(-50%, -50%);transform: translate(-50%, -50%);width:100%;"><strong>NDWI</strong> <span th="${Normalized_difference_water_index}">Normalized_difference_water_index</span></div></div>
</div>
<div style="cursor:pointer; height: 210px; background-color: #ffffff;margin-top:5px;margin-bottom:5px;box-shadow: 0 0 10px rgba(0,0,0,0.5);border-radius: 10px;" onclick="showPopUpNDSI();">
<div style="border-radius: 10px 10px 0px 0px; background-color: #aaa9a9; background-image: url('./resources/images/ndsi400.jpg'); background-repeat: no-repeat; background-position: center; width: 100%; height: 150px;"></div>
<div style="border-radius: 0px 0px 10px 10px; background-color: #ffffff; width: 100%; height: 60px;position:relative;"><div style="position:absolute;top:50%;left:50%;-ms-transform: translate(-50%, -50%);transform: translate(-50%, -50%);width:100%;"><strong>NDSI</strong> <span th="${Normalised_difference_snow_index}">Normalised_difference_snow_index</span></div></div>
</div>
</div>
</div>
</div>
<!--div style="background-color: #ffffff;">
<div id="idCCALM_en" class="content" style="display:none;color:#000000;font-size:24px;padding-top: 15px;padding-bottom: 15px; height: 350;">
<iframe style="float: right;" width="560" height="315" src="https://www.youtube.com/embed/5kdXRocsOkQ?controls=0" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<div id="idCCALM_ru" class="content" style="display:none;color:#000000;font-size:24px;padding-top: 15px;padding-bottom: 15px; height: 350;">
<iframe style="float: right;" width="560" height="315" src="https://www.youtube.com/embed/qchZtE3atNA?controls=0" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</div-->
<script>
if(g_lng=="1")
{
//document.getElementById("idCCALM_ru").style.display="block";
}else{
//document.getElementById("idCCALM_en").style.display="block";
}
</script>
<div style="background-color: #2694bb;">
<div id="idMain_en" class="content" style="display:none; color: #ffffff; font-size: 24px; padding-top: 15px;padding-bottom: 15px;">
<p>A Locust Geographic Information System (GIS), entitled <strong>“Caucasus and Central Asia Locust Management system” (CCALM)</strong>, was developed to the benefit of the ten CCA countries participating in the FAO “Programme to improve national and regional locust management in Caucasus and Central Asia (CCA),” under Result 3 of its Roadmap “Locust issues and disasters better anticipated and mitigated” and more specifically Activity 3.3 “Develop monitoring and analyzing systems”. CCALM is filled using the Automated System for Data Collection (ASDC), satellite products and other sources. Its purpose is to improve data analysis as well as forecasting and reporting at the national and regional levels.</p>
<p>
<strong>The Automated System of Data Collection (ASDC)</strong>
<iframe style="float: right; border: 10px solid #2694bb;" width="460" height="260" src="https://www.youtube.com/embed/5kdXRocsOkQ?controls=0" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
was created in 2013 in order to facilitate collection and sharing of standardized locust data. It simulates the FAO standard “Locust Survey Form” and “Spray Monitoring Form” for CCA and serves as basic data for the locust GIS in CCA. After ASDC first testing by Georgia, Uzbekistan and Russia in 2014-2015, the system was endorsed by CCA countries (October 2015), finalized and made available in eleven languages (Armenian, Azeri, Dari, English, Georgian, Kazakh, Kyrgyz, Russian, Tajik, Turkmen and Uzbek) in 2016/2017 for use on tablets, smartphones and computers.
</p>
<p>CCALM basic functions (data import, query, display, output), i.e. the database and its management system, were developed by the Institute of Space Technique and Technologies (ISTT), Almaty, Kazakhstan, and launched in early 2016. Based on the technical specifications proposed by CCA Forecasting and FAO Experts, the advanced functions (summary, analysis and forecast algorithms) were developed by ISTT in line with the technical standards of FAO. They include a the set of output products for analyzing Italian (CIT), Moroccan (DMA) and Asian Migratory (LMI) locusts data and elaborating forecasts. Among them, there are maps of: (a) locust densities, (b) treated areas, (c) areas infested (or treated) with densities above the Economic Threshold (ET). CCALM is fully available since March 2017 in two languages, English and Russian, at ccalm.org.</p>
</div>
<div id="idMain_ru" class="content" style="display:none; color: #ffffff; font-size: 24px; padding-top: 15px;padding-bottom: 15px;">
<p>Географическая Информационная Система (ГИС) по Саранчовым, озаглавленная как <strong>«Система управления саранчовыми на Кавказе и в Центральной Азии” (CCALM - Caucasus and Central Asia Locust Management system)</strong>, разрабатывается в интересах десяти стран КЦА, участвующих в программе ФАО по улучшению национальной и региональной борьбы с саранчой на Кавказе и в Центральной Азии (КЦА) по Результату 3 Дорожной карты реализации “Саранчовые вспышки лучше прогнозируются и их катастрофичность снижается" и, более конкретно, Мероприятию 3.3 “Разработать мониторинговые и анализирующие системы”. База данных CCALM наполняется при помощи Автоматизированной системы сбора данных (ASDC) и других источников спутниковой продукции. Ее цель - улучшить анализ данных, а также прогнозирование и отчетность на национальном и региональном уровнях.</p>
<p>
<strong>Автоматизированная Система Сбора Данных (ASDC – Automated System for Data Collection)</strong>
<iframe style="float: right; border: 10px solid #2694bb;" width="460" height="260" src="https://www.youtube.com/embed/qchZtE3atNA?controls=0" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
была создана в 2013 году для облегчения сбора и совместного использования стандартизированных данных по саранчовым. Она имитирует стандартные формы ФАО для обследования угодий на заселенность и по борьбе с саранчой и служит основой создаваемой ГИС по Саранчовым в КЦА. После тестирования ASDC Грузией, Российской Федерацией и Узбекистаном в 2014-2015 гг., система была одобрена странами КЦА (октябрь 2015 г.), ее создание было завершено, и она стала доступна на одиннадцати языках (азербайджанском, английском, армянском, дари, грузинском, казахском, киргизском, русском, таджикском, туркменском и узбекском) в 2016-2017 гг. для использования на планшетах, смартфонах и компьютерах.
</p>
<p>CCALM основные функции (импорт данных, запрос, отображение, вывод), т.е. база данных и система управления базой данных были разработаны Институтом космической техники и технологий (ИКТТ), г. Алматы, Казахстан, и запущены в начале 2016 г. На основе технических спецификаций, разработанных и согласованных с экспертами КЦА по прогнозированию совместно с экспертами ФАО, расширенные функции (сводка, анализ, алгоритмы прогноза) были разработаны ИКТТ в соответствии с техническими стандартами ФАО. Они включают ряд выходных продуктов, предназначенных для анализа данных по итальянскому прусу (CIT), мароккской саранче (DMA) и азиатской перелетной саранче (LMI) и подготовки прогнозов. Среди них есть карты: (a) плотности саранчовых, (b) обработанных территорий, (c) территорий, заселенных (или обработанных) с плотностью выше экономического порога вредоносности (ЭПВ). CCALM полностью доступен с марта 2017 года на двух языках, английском и русском, по адресу ccalm.org.</p>
</div>
</div>
<script>
if(g_lng=="1")
{
document.getElementById("idMain_ru").style.display="block";
}else{
document.getElementById("idMain_en").style.display="block";
}
</script>
<div style="background-color: #dedcdc;">
<div class="content" style="color: #000000; font-size: 24px; padding-top: 15px;padding-bottom: 15px;">
<table style="width: 100%;">
<tr>
<td style="text-align: center;">
<h3 th:text="ASDC_User_Guides">ASDC_User_Guides</h3>
<a href="./resources/engine/help/ASDC_for_Android_ENG.pdf" target="_blank">ASDC_for_Android_ENG_v2.23.pdf</a><br/>
<a href="./resources/engine/help/ASDC_for_Android_RUS.pdf" target="_blank">ASDC_for_Android_RUS_v2.23.pdf</a>
</td>
<td style="text-align: center;">
<h3 th:text="${CCALM_User_Guides}">CCALM_User_Guides</h3>
<a href="./resources/engine/help/CCALM_help_ENG.pdf" target="_blank">CCALM_help_ENG_v3.3.pdf</a><br/>
<a href="./resources/engine/help/CCALM_help_RUS.pdf" target="_blank">CCALM_help_RUS_v3.4.pdf</a>
</td>
</tr>
</table>
</div>
</div>
<!--div id="idAppeal_ru" style="background-color: #ffffff; display: none;">
<div class="content" style="color: #000000; font-size: 24px; padding-top: 15px;padding-bottom: 15px;">
<h2>Призыв ФАО к быстрому реагированию</h2>
<p>Пустынная саранча представляет собой беспрецедентный риск для продовольственной безопасности и экономической ситуации. За последние несколько лет последовавшие друг за другом потрясения - в том числе засуха, наводнения, макроэкономические кризисы и вооруженные конфликты - способствовали значительному уровню дестабилизации. Необходимо приложить все усилия, чтобы нынешний всплеск не превратился в полноценное бедствие.</p>
<div style="text-align: right;"><a href="mailto:AGP-Director@fao.org?Subject=Donation%20for%20the%20Desert%20Locust%20Crisis" style="background-color: #B22222; color:white;padding: 10px;box-shadow: 0 0 5px rgba(0,0,0,0.5);" th:text="${Donate_Now}">Donate_Now</a></div>
<br>
</div>
</div>
<div id="idAppeal_en" style="background-color: #ffffff; display: none;">
<div class="content" style="color: #000000; font-size: 24px; padding-top: 15px;padding-bottom: 15px;">
<h2>FAO's Appeal for Rapid Response</h2>
<p>The Desert Locust poses an unprecedented risk to food security and economic conditions. Over the past several years, successive shocks - including droughts, floods, macroeconomic crises and armed conflicts - have contributed to significant levels of destabilization. Every effort must be made to ensure that the current surge does not turn into a full-fledged disaster.</p>
<div style="text-align: right;"><a href="mailto:AGP-Director@fao.org?Subject=Donation%20for%20the%20Desert%20Locust%20Crisis" style="background-color: #B22222; color:white;padding: 10px;box-shadow: 0 0 5px rgba(0,0,0,0.5);" th:text="${Donate_Now}">Donate_Now</a></div>
<br>
</div>
</div-->
<script>
/*
if(g_lng=="1")
{
document.getElementById("idAppeal_ru").style.display="block";
}else{
document.getElementById("idAppeal_en").style.display="block";
}
*/
</script>
<div style="background-color: #2694bb;">
<div id="idContact_en" class="content" style="display:none;color:#ffffff;font-size:16px;padding-top:15px;padding-bottom: 15px; text-align: center;">
For any questions, please contact us by email: <a href="mailto:info@ccalm.org" style="color: #fafaff;">info@ccalm.org</a>.
</div>
<div id="idContact_ru" class="content" style="display:none;color:#ffffff;font-size:16px; padding-top:15px;padding-bottom: 15px; text-align: center;">
По всем вопросам обращайтесь к нам по электронной почте: <a href="mailto:info@ccalm.org" style="color: #fafaff;">info@ccalm.org</a>.
</div>
</div>
<script>
if(g_lng=="1")
{
document.getElementById("idContact_ru").style.display="block";
}else{
document.getElementById("idContact_en").style.display="block";
}
</script>
</body>
</html>