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 82 * Template no formato mustache. E preenchido na carga do javascript com o programa dependencias.php
83 83 */
84 84 MUSTACHE : "",
  85 + MUSTACHELISTA : "",
85 86 /**
86 87 * Susbtitutos para o template
87 88 */
... ... @@ -117,9 +118,16 @@ i3GEOF.tme =
117 118 */
118 119 inicia : function(iddiv) {
119 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 127 i3GEOF.tme.inicia(iddiv);
  128 + }).fail(function() {
  129 + i3GEO.janela.closeMsg($trad("erroTpl"));
  130 + return;
123 131 });
124 132 return;
125 133 }
... ... @@ -143,7 +151,9 @@ i3GEOF.tme =
143 151 return;
144 152 }
145 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 157 try {
148 158 //
149 159 // verifica se a camada possui definicao dos parametros
... ... @@ -174,73 +184,38 @@ i3GEOF.tme =
174 184 $i("i3GEOTMEoutlinecolor").value = i3GEOF.tme.OUTLINECOLOR;
175 185 $i("i3GEOTMEnumvertices").value = i3GEOF.tme.NUMVERTICES;
176 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 214 i3GEOF.tme.ativaFoco();
196 215 } catch (erro) {
197 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 220 * Function: html
246 221 *
... ... @@ -279,11 +254,29 @@ i3GEOF.tme =
279 254 };
280 255 // cria a janela flutuante
281 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 258 + "</div><a class='i3GeoTituloJanelaBs' target=_blank href='"
284 259 + i3GEO.configura.locaplic
285 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 280 divid = janela[2].id;
288 281 i3GEOF.tme.aguarde = $i("i3GEOF.tme_imagemCabecalho").style;
289 282 $i("i3GEOF.tme_corpo").style.backgroundColor = "white";
... ... @@ -368,18 +361,28 @@ i3GEOF.tme =
368 361 * A lista &eacute; inserida no elemento html com id "i3GEOtmelistai"
369 362 */
370 363 montaListaItens : function(retorno) {
371   - var ins, i, n, item, litens;
  364 + var ins, i, n, item, litens,temp = {}, mustache = [];
372 365 try {
373 366 ins = [];
374   - ins.push("<table class=lista >");
  367 + ins.push("<table>");
375 368 n = retorno.data.valores.length;
376 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 387 // marca as colunas default
385 388 //
... ... @@ -439,22 +442,14 @@ i3GEOF.tme =
439 442 function(retorno) {
440 443 i3GEOF.tme.aguarde.visibility = "hidden";
441 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 447 + retorno.data.url
445 448 + "' target=new >"
446 449 + retorno.data.url
447   - + "</a><br>";
  450 + + "</a>";
448 451 ext = i3GEO.parametros.mapexten;
449 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 453 url =
459 454 i3GEO.configura.locaplic + "/ferramentas/cesium/kml3d.php?kmlurl="
460 455 + retorno.data.url
... ... @@ -462,12 +457,12 @@ i3GEOF.tme =
462 457 + retorno.data.legenda
463 458 + "&mapext=" + ext;
464 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 462 + url
468 463 + "' target='new' >"
469 464 + url
470   - + "</a><br>";
  465 + + "</a>";
471 466  
472 467 $i("i3GEOTMEresultado").innerHTML = ins;
473 468 $i("i3GEOTMEresultado").scrollIntoView(true);
... ...
ferramentas/tme/templateLista_mst.html 0 → 100755
  Diff comments   View file @fb564b9
... ... @@ -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 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 71 \ No newline at end of file
... ...