Download as
Browse Code »

Commit fb564b977c560cdd61f38e60f2da02334c7c1019

Authored by Edmar Moretti
1 parent fcd4eb50
Exists in master and in 7 other branches composer, doc-root, docker, guia, licenca, readme, unmaintened

Adaptação da ferramenta TME para Bootstrap

Showing 3 changed files with 171 additions and 133 deletions   Show diff stats
ferramentas/tme/index.js
  Diff comments   View file @fb564b9
@@ -82,6 +82,7 @@ i3GEOF.tme = @@ -82,6 +82,7 @@ i3GEOF.tme =
82 * Template no formato mustache. E preenchido na carga do javascript com o programa dependencias.php 82 * Template no formato mustache. E preenchido na carga do javascript com o programa dependencias.php
83 */ 83 */
84 MUSTACHE : "", 84 MUSTACHE : "",
  85 + MUSTACHELISTA : "",
85 /** 86 /**
86 * Susbtitutos para o template 87 * Susbtitutos para o template
87 */ 88 */
@@ -117,9 +118,16 @@ i3GEOF.tme = @@ -117,9 +118,16 @@ i3GEOF.tme =
117 */ 118 */
118 inicia : function(iddiv) { 119 inicia : function(iddiv) {
119 if(i3GEOF.tme.MUSTACHE == ""){ 120 if(i3GEOF.tme.MUSTACHE == ""){
120 - $.get(i3GEO.configura.locaplic + "/ferramentas/tme/template_mst.html", function(template) {  
121 - i3GEOF.tme.MUSTACHE = template; 121 + var t1 = i3GEO.configura.locaplic + "/ferramentas/tme/template_mst.html",
  122 + t2 = i3GEO.configura.locaplic + "/ferramentas/tme/templateLista_mst.html";
  123 +
  124 + $.when( $.get(t1),$.get(t2) ).done(function(r1,r2) {
  125 + i3GEOF.tme.MUSTACHE = r1[0];
  126 + i3GEOF.tme.MUSTACHELISTA = r2[0];
122 i3GEOF.tme.inicia(iddiv); 127 i3GEOF.tme.inicia(iddiv);
  128 + }).fail(function() {
  129 + i3GEO.janela.closeMsg($trad("erroTpl"));
  130 + return;
123 }); 131 });
124 return; 132 return;
125 } 133 }
@@ -143,7 +151,9 @@ i3GEOF.tme = @@ -143,7 +151,9 @@ i3GEOF.tme =
143 return; 151 return;
144 } 152 }
145 $i(iddiv).innerHTML = i3GEOF.tme.html(); 153 $i(iddiv).innerHTML = i3GEOF.tme.html();
146 - i3GEOF.tme.rodape(); 154 + if (i3GEO.login.verificaCookieLogin() === true && i3GEO.parametros.editor === "sim") {
  155 + $(".hidden").removeClass("hidden");
  156 + }
147 try { 157 try {
148 // 158 //
149 // verifica se a camada possui definicao dos parametros 159 // verifica se a camada possui definicao dos parametros
@@ -174,73 +184,38 @@ i3GEOF.tme = @@ -174,73 +184,38 @@ i3GEOF.tme =
174 $i("i3GEOTMEoutlinecolor").value = i3GEOF.tme.OUTLINECOLOR; 184 $i("i3GEOTMEoutlinecolor").value = i3GEOF.tme.OUTLINECOLOR;
175 $i("i3GEOTMEnumvertices").value = i3GEOF.tme.NUMVERTICES; 185 $i("i3GEOTMEnumvertices").value = i3GEOF.tme.NUMVERTICES;
176 // combo para escolher a coluna com os nomes das regioes 186 // combo para escolher a coluna com os nomes das regioes
177 - i3GEO.util.comboItens("i3GEOTMEregioes", i3GEOF.tme.tema, function(retorno) {  
178 - if ($i("i3GEOTMEregioeslista")) {  
179 - $i("i3GEOTMEregioeslista").innerHTML = retorno.dados;  
180 - }  
181 - if (i3GEOF.tme.ITEMNOMEREGIOES != "") {  
182 - $i("i3GEOTMEregioes").value = i3GEOF.tme.ITEMNOMEREGIOES;  
183 - }  
184 - // lista para escolher as colunas com os valores  
185 - var temp = function(r) {  
186 - i3GEOF.tme.montaListaItens(r);  
187 - // se os parametros da ferramenta estiverem definidos na camada  
188 - if (camada != "" && camada.ferramentas.tme && camada.ferramentas.tme.exec === "sim") {  
189 - i3GEOF.tme.ativa(); 187 + i3GEO.util.comboItens(
  188 + "i3GEOTMEregioes",
  189 + i3GEOF.tme.tema,
  190 + function(retorno) {
  191 + if ($i("i3GEOTMEregioeslista")) {
  192 + $i("i3GEOTMEregioeslista").innerHTML = retorno.dados;
190 } 193 }
191 - };  
192 - i3GEO.php.listaItensTema(temp, i3GEOF.tme.tema);  
193 - }, "i3GEOTMEregioeslista");  
194 - i3GEO.util.mensagemAjuda("i3GEOtmemen1", $i("i3GEOtmemen1").innerHTML); 194 + if (i3GEOF.tme.ITEMNOMEREGIOES != "") {
  195 + $i("i3GEOTMEregioes").value = i3GEOF.tme.ITEMNOMEREGIOES;
  196 + }
  197 + // lista para escolher as colunas com os valores
  198 + var temp = function(r) {
  199 + i3GEOF.tme.montaListaItens(r);
  200 + // se os parametros da ferramenta estiverem definidos na camada
  201 + if (camada != "" && camada.ferramentas.tme && camada.ferramentas.tme.exec === "sim") {
  202 + i3GEOF.tme.ativa();
  203 + }
  204 + };
  205 + i3GEO.php.listaItensTema(temp, i3GEOF.tme.tema);
  206 + },
  207 + "i3GEOTMEregioeslista",
  208 + "",
  209 + "sim",
  210 + "",
  211 + "form-control"
  212 + );
  213 +
195 i3GEOF.tme.ativaFoco(); 214 i3GEOF.tme.ativaFoco();
196 } catch (erro) { 215 } catch (erro) {
197 i3GEO.janela.tempoMsg(erro); 216 i3GEO.janela.tempoMsg(erro);
198 } 217 }
199 }, 218 },
200 - rodape : function() {  
201 - var ins =  
202 - '<input class="paragrafo" id="i3GEOtmebotao1" type="button" value="' + $trad('geraKml', i3GEOF.tme.dicionario)  
203 - + '" style="cursor:pointer;color:blue"/>';  
204 - if (i3GEO.login.verificaCookieLogin() === true) {  
205 - ins +=  
206 - '<input class="paragrafo" style="margin-top:3px;" id="i3GEOtmebotaoSalva" type="button" value="' + $trad(  
207 - 'salvaParametros',  
208 - i3GEOF.tme.dicionario)  
209 - + '" style="cursor:pointer;color:blue"/>';  
210 - ins +=  
211 - '<input class="paragrafo" style="margin-top:3px;" id="i3GEOtmebotaoRemove" type="button" value="' + $trad(  
212 - 'removeParametros',  
213 - i3GEOF.tme.dicionario)  
214 - + '" style="cursor:pointer;color:blue"/>';  
215 - }  
216 - YAHOO.i3GEO.janela.manager.find("i3GEOF.tme").setFooter(ins);  
217 -  
218 - var b = new YAHOO.widget.Button("i3GEOtmebotao1", {  
219 - onclick : {  
220 - fn : i3GEOF.tme.ativa  
221 - }  
222 - });  
223 - b.addClass("rodar");  
224 - $i("i3GEOtmebotao1-button").style.width = "350px";  
225 - if (i3GEO.login.verificaCookieLogin() === true && i3GEO.parametros.editor === "sim") {  
226 - $i("parametrosComLogin").style.display = 'block';  
227 - b = new YAHOO.widget.Button("i3GEOtmebotaoSalva", {  
228 - onclick : {  
229 - fn : i3GEOF.tme.salvaParametros  
230 - }  
231 - });  
232 - b.addClass("rodar");  
233 - $i("i3GEOtmebotaoSalva-button").style.width = "350px";  
234 -  
235 - b = new YAHOO.widget.Button("i3GEOtmebotaoRemove", {  
236 - onclick : {  
237 - fn : i3GEOF.tme.removeParametros  
238 - }  
239 - });  
240 - b.addClass("rodar");  
241 - $i("i3GEOtmebotaoRemove-button").style.width = "350px";  
242 - }  
243 - },  
244 /* 219 /*
245 * Function: html 220 * Function: html
246 * 221 *
@@ -279,11 +254,29 @@ i3GEOF.tme = @@ -279,11 +254,29 @@ i3GEOF.tme =
279 }; 254 };
280 // cria a janela flutuante 255 // cria a janela flutuante
281 titulo = 256 titulo =
282 - "<div id='i3GEOFtmeComboCabeca' class='comboTemasCabecalhoBs form-group' style='width:200px; left:5px;'> ------</div>" 257 + "<div id='i3GEOFtmeComboCabeca' class='comboTemasCabecalhoBs form-group' style='width:200px; left:15px;'> ------</div>"
283 + "</div><a class='i3GeoTituloJanelaBs' target=_blank href='" 258 + "</div><a class='i3GeoTituloJanelaBs' target=_blank href='"
284 + i3GEO.configura.locaplic 259 + i3GEO.configura.locaplic
285 + "/ajuda_usuario.php?idcategoria=5&idajuda=108' >tme</a>"; 260 + "/ajuda_usuario.php?idcategoria=5&idajuda=108' >tme</a>";
286 - janela = i3GEO.janela.cria("380px", "320px", "", "", "", titulo, "i3GEOF.tme", false, "hd", cabecalho, minimiza, "", true); 261 + janela = i3GEO.janela.cria(
  262 + "380px",
  263 + "320px",
  264 + "",
  265 + "",
  266 + "",
  267 + titulo,
  268 + "i3GEOF.tme",
  269 + false,
  270 + "hd",
  271 + cabecalho,
  272 + minimiza,
  273 + "",
  274 + true,
  275 + "",
  276 + "",
  277 + "",
  278 + ""
  279 + );
287 divid = janela[2].id; 280 divid = janela[2].id;
288 i3GEOF.tme.aguarde = $i("i3GEOF.tme_imagemCabecalho").style; 281 i3GEOF.tme.aguarde = $i("i3GEOF.tme_imagemCabecalho").style;
289 $i("i3GEOF.tme_corpo").style.backgroundColor = "white"; 282 $i("i3GEOF.tme_corpo").style.backgroundColor = "white";
@@ -368,18 +361,28 @@ i3GEOF.tme = @@ -368,18 +361,28 @@ i3GEOF.tme =
368 * A lista &eacute; inserida no elemento html com id "i3GEOtmelistai" 361 * A lista &eacute; inserida no elemento html com id "i3GEOtmelistai"
369 */ 362 */
370 montaListaItens : function(retorno) { 363 montaListaItens : function(retorno) {
371 - var ins, i, n, item, litens; 364 + var ins, i, n, item, litens,temp = {}, mustache = [];
372 try { 365 try {
373 ins = []; 366 ins = [];
374 - ins.push("<table class=lista >"); 367 + ins.push("<table>");
375 n = retorno.data.valores.length; 368 n = retorno.data.valores.length;
376 for (i = 0; i < n; i++) { 369 for (i = 0; i < n; i++) {
377 - item = retorno.data.valores[i].item;  
378 - ins.push("<tr><td><input size=2 style='cursor:pointer' type=checkbox id=i3GEOtme" + item + " /></td>");  
379 - ins.push("<td>&nbsp;" + item + "</td>"); 370 + temp = {};
  371 + temp.item = retorno.data.valores[i].item;
  372 + mustache.push(temp);
380 } 373 }
381 - $i("i3GEOtmelistai").innerHTML = ins.join("");  
382 - ins.push("</table>"); 374 +
  375 + ins = Mustache.render(
  376 + i3GEOF.tme.MUSTACHELISTA,
  377 + $.extend(
  378 + {},
  379 + {
  380 + "linhas" : mustache,
  381 + },
  382 + i3GEOF.tme.DICIONARIO
  383 + )
  384 + );
  385 + $i("i3GEOtmelistai").innerHTML = ins;
383 // 386 //
384 // marca as colunas default 387 // marca as colunas default
385 // 388 //
@@ -439,22 +442,14 @@ i3GEOF.tme = @@ -439,22 +442,14 @@ i3GEOF.tme =
439 function(retorno) { 442 function(retorno) {
440 i3GEOF.tme.aguarde.visibility = "hidden"; 443 i3GEOF.tme.aguarde.visibility = "hidden";
441 var ext, url, ins = 444 var ext, url, ins =
442 - "<p class=paragrafo >" + $trad('arquivoDownload', i3GEOF.tme.dicionario)  
443 - + "<br><a href='" 445 + "<h5>" + $trad('arquivoDownload', i3GEOF.tme.dicionario)
  446 + + "</h5><a href='"
444 + retorno.data.url 447 + retorno.data.url
445 + "' target=new >" 448 + "' target=new >"
446 + retorno.data.url 449 + retorno.data.url
447 - + "</a><br>"; 450 + + "</a>";
448 ext = i3GEO.parametros.mapexten; 451 ext = i3GEO.parametros.mapexten;
449 ext = i3GEO.util.extOSM2Geo(ext); 452 ext = i3GEO.util.extOSM2Geo(ext);
450 - url = i3GEO.configura.locaplic + "/ms_criamapa.php?interface=googleearth.phtml&kmlurl=" + retorno.data.url;  
451 - ins +=  
452 - "<br>" + $trad('abreNoI3geo', i3GEOF.tme.dicionario)  
453 - + "<br><a href='"  
454 - + url  
455 - + "' target='new' >"  
456 - + url  
457 - + "</a><br>";  
458 url = 453 url =
459 i3GEO.configura.locaplic + "/ferramentas/cesium/kml3d.php?kmlurl=" 454 i3GEO.configura.locaplic + "/ferramentas/cesium/kml3d.php?kmlurl="
460 + retorno.data.url 455 + retorno.data.url
@@ -462,12 +457,12 @@ i3GEOF.tme = @@ -462,12 +457,12 @@ i3GEOF.tme =
462 + retorno.data.legenda 457 + retorno.data.legenda
463 + "&mapext=" + ext; 458 + "&mapext=" + ext;
464 ins += 459 ins +=
465 - "<br>" + $trad('abreNoCesium', i3GEOF.tme.dicionario)  
466 - + "<br><a href='" 460 + "<<h5>" + $trad('abreNoCesium', i3GEOF.tme.dicionario)
  461 + + "</h5><a href='"
467 + url 462 + url
468 + "' target='new' >" 463 + "' target='new' >"
469 + url 464 + url
470 - + "</a><br>"; 465 + + "</a>";
471 466
472 $i("i3GEOTMEresultado").innerHTML = ins; 467 $i("i3GEOTMEresultado").innerHTML = ins;
473 $i("i3GEOTMEresultado").scrollIntoView(true); 468 $i("i3GEOTMEresultado").scrollIntoView(true);
ferramentas/tme/templateLista_mst.html 0 → 100755
  Diff comments   View file @fb564b9
@@ -0,0 +1,19 @@ @@ -0,0 +1,19 @@
  1 +<table class=lista8>
  2 + <tr>
  3 + </tr>
  4 + {{#linhas}}
  5 + <tr>
  6 + <td>
  7 + <div class="checkbox condensed">
  8 + <label>
  9 + <input name="{{{item}}}" type=checkbox id="i3GEOtme{{{item}}}" />
  10 + <span class="checkbox-material noprint">
  11 + <span class="check"></span>
  12 + </span>
  13 + </label>
  14 + </div>
  15 + </td>
  16 + <td>{{{item}}}</td>
  17 + </tr>
  18 + {{/linhas}}
  19 +</table>
0 \ No newline at end of file 20 \ No newline at end of file
ferramentas/tme/template_mst.html
  Diff comments   View file @fb564b9
1 -<div style='text-align: left; background: yellow;' id='i3GEOTMEresultado'></div>  
2 -<div style='display: none;' id='parametrosComLogin'>  
3 -<p class='paragrafo'>  
4 -<input type='checkbox' id='ativaAoAdic' /><label>{{{ativaAoAdic}}}</label>  
5 -<p class='paragrafo'>  
6 -<input type='checkbox' id='execAoAdic' /><label>{{{execAoAdic}}}</label>  
7 -</div>  
8 -<p class='paragrafo'>{{{tituloMapa}}}  
9 -<div class='i3geoForm i3geoFormIconeEdita'>  
10 - <input type='text' value='' id='i3GEOTMEtitulo' />  
11 -</div>  
12 -<br>  
13 -<p class='paragrafo'>{{{descricaoMapa}}}  
14 -<div class='i3geoForm i3geoFormIconeEdita'>  
15 - <input type='text' value='' id='i3GEOTMEdesc' />  
16 -</div>  
17 -<br>  
18 -<p class='paragrafo'>{{{alturaMaxBarras}}}  
19 -<div class='i3geoForm i3geoFormIconeNumero'>  
20 - <input type='number' value='5000' id='i3GEOTMEbarSize' />  
21 -</div>  
22 -<br>  
23 -<p class='paragrafo'>{{{larguraMaxBarras}}}  
24 -<div class='i3geoForm i3geoFormIconeNumero'>  
25 - <input type='number' value='2000000' id='i3GEOTMEmaxHeight' />  
26 -</div>  
27 -<br>  
28 -<p class='paragrafo'>{{{outLineColor}}}  
29 -<div class='i3geoForm i3geoFormIconeEdita'>  
30 - <input type='text' value='-1,-1,-1' id='i3GEOTMEoutlinecolor' />  
31 -</div>  
32 -<br>  
33 -<p class='paragrafo'>{{{numvertices}}}  
34 -<div class='i3geoForm i3geoFormIconeNumero'>  
35 - <input type='number' value='8' id='i3GEOTMEnumvertices' />  
36 -</div>  
37 -<br>  
38 -<p class='paragrafo'>{{{colunaRegioes}}}  
39 -<div id='i3GEOTMEregioeslista' class='styled-select'></div>  
40 -<p class='paragrafo'>  
41 - <br>{{{colunasDadosEstat}}}  
42 -<div id='i3GEOtmelistai' class='digitar' style='text-align: left; left: 0px; top: 0px; 330 px; height: 80px; overflow: auto; display: block;'></div>  
43 -<br>  
44 -<div id='i3GEOtmemen1' style='top: 15px; left: 0px;'>  
45 - <p class='paragrafo'>Ser&aacute; criado um arquivo KML que pode ser aberto com o Google Earth. A coluna com os nomes das regi&otilde;es define o nome que ser&aacute; mostrado para cada elemento mapeado. Quando os nomes das colunas com os valores corresponderem a um determinado ano, ser&aacute; mostrado um bot&atilde;o do tipo slide no Google Earth, mas isso s&oacute; ocorre se o nome da coluna for o mesmo nome do ano, exemplo, para o ano de 1980 o nome da coluna dever&aacute; ser 1980  
46 -</div> 1 +<div class='container-fluid'>
  2 + <div class="alert alert-info" id='i3GEOTMEresultado'></div>
  3 +
  4 + <div class="hidden" id='parametrosComLogin'>
  5 + <div class="checkbox text-left">
  6 + <label>
  7 + <input checked id='ativaAoAdic' type="checkbox">
  8 + <span class="checkbox-material noprint">
  9 + <span class="check"></span>
  10 + </span>
  11 + {{{ativaAoAdic}}}
  12 + </label>
  13 + </div>
  14 + <div class="checkbox text-left">
  15 + <label>
  16 + <input checked id='execAoAdic' type="checkbox">
  17 + <span class="checkbox-material noprint">
  18 + <span class="check"></span>
  19 + </span>
  20 + {{{execAoAdic}}}
  21 + </label>
  22 + </div>
  23 + </div>
  24 + <div class='form-group label-fixed condensed'>
  25 + <label class="control-label" for="i3GEOTMEtitulo">{{{tituloMapa}}}</label>
  26 + <input class="form-control input-lg" type='text' id='i3GEOTMEtitulo' value='' />
  27 + </div>
  28 + <div class='form-group label-fixed condensed'>
  29 + <label class="control-label" for="i3GEOTMEdesc">{{{descricaoMapa}}}</label>
  30 + <input class="form-control input-lg" type='text' id='i3GEOTMEdesc' value='' />
  31 + </div>
  32 + <div class='form-group label-fixed condensed'>
  33 + <label class="control-label" for="i3GEOTMEbarSize">{{{alturaMaxBarras}}}</label>
  34 + <input class="form-control input-lg" type='text' id='i3GEOTMEbarSize' value='5000' />
  35 + </div>
  36 + <div class='form-group label-fixed condensed'>
  37 + <label class="control-label" for="i3GEOTMEmaxHeight">{{{larguraMaxBarras}}}</label>
  38 + <input class="form-control input-lg" type='text' id='i3GEOTMEmaxHeight' value='2000000' />
  39 + </div>
  40 + <div class='form-group label-fixed condensed'>
  41 + <label class="control-label" for="i3GEOTMEoutlinecolor">{{{outLineColor}}}</label>
  42 + <input class="form-control input-lg i3geoFormIconeAquarela" type='text' id='i3GEOTMEoutlinecolor' value='-1,-1,-1' />
  43 + </div>
  44 + <div class='form-group label-fixed condensed'>
  45 + <label class="control-label" for="i3GEOTMEnumvertices">{{{numvertices}}}</label>
  46 + <input class="form-control input-lg" type='text' id='i3GEOTMEnumvertices' value='8' />
  47 + </div>
  48 + <div class='form-group label-fixed condensed'>
  49 + <label class="control-label" for="i3GEOTMEregioeslista">{{{colunaRegioes}}}</label>
  50 + <div class="input-group">
  51 + <div id='i3GEOTMEregioeslista'></div>
  52 + </div>
  53 + </div>
  54 +
  55 + <h5>{{{colunasDadosEstat}}}</h5>
  56 + <div id='i3GEOtmelistai' ></div>
  57 +
  58 + <button onclick="i3GEOF.tme.ativa()" class='btn btn-primary btn-sm btn-raised hidden'>{{{geraKml}}}</button>
  59 + <button onclick="i3GEOF.tme.salvaParametros()" class='btn btn-primary btn-sm btn-raised hidden'>{{{salvaParametros}}}</button>
  60 + <button onclick="i3GEOF.tme.removeParametros()" class='btn btn-primary btn-sm btn-raised hidden'>{{{removeParametros}}}</button>
  61 +
  62 +
  63 + <h5 class="alert alert-info">
  64 + Ser&aacute; criado um arquivo KML que pode ser aberto com o Google Earth. A coluna com os nomes das regi&otilde;es define o nome que ser&aacute; mostrado para cada elemento
  65 + mapeado. Quando os nomes das colunas com os valores corresponderem a um determinado ano, ser&aacute; mostrado um bot&atilde;o do tipo slide no Google Earth, mas isso s&oacute; ocorre se o nome da
  66 + coluna for o mesmo nome do ano, exemplo, para o ano de 1980 o nome da coluna dever&aacute; ser 1980
  67 + </h5>
  68 +
  69 +
  70 +</div>
47 \ No newline at end of file 71 \ No newline at end of file