Commit 4f260e98ca9a3eaa0068563d7ccae4b8a1d877b1

Authored by Edmar Moretti
1 parent 40b3fdbd

Conversão da ferramenta Grade Poligonal para Bootstrap

ferramentas/gradepol/index.js
... ... @@ -48,6 +48,18 @@ i3GEOF.gradeDePoligonos = {
48 48 Estilo do objeto DOM com a imagem de aguarde existente no cabeçalho da janela.
49 49 */
50 50 aguarde: "",
  51 + /**
  52 + * Template no formato mustache. E preenchido na carga do javascript com o programa dependencias.php
  53 + */
  54 + MUSTACHE : "",
  55 + /**
  56 + * Susbtitutos para o template
  57 + */
  58 + mustacheHash : function() {
  59 + var dicionario = i3GEO.idioma.objetoIdioma(i3GEOF.gradeDePoligonos.dicionario);
  60 + dicionario["locaplic"] = i3GEO.configura.locaplic;
  61 + return dicionario;
  62 + },
51 63 /*
52 64 Para efeitos de compatibilidade antes da versão 4.7 que não tinha dicionário
53 65 */
... ... @@ -55,25 +67,6 @@ i3GEOF.gradeDePoligonos = {
55 67 i3GEOF.gradeDePoligonos.iniciaDicionario();
56 68 },
57 69 /*
58   - Function: iniciaDicionario
59   -
60   - Carrega o dicionário e chama a função que inicia a ferramenta
61   -
62   - O Javascript é carregado com o id i3GEOF.nomedaferramenta.dicionario_script
63   - */
64   - iniciaDicionario: function(){
65   - if(typeof(i3GEOF.gradeDePoligonos.dicionario) === 'undefined'){
66   - i3GEO.util.scriptTag(
67   - i3GEO.configura.locaplic+"/ferramentas/gradepol/dicionario.js",
68   - "i3GEOF.gradeDePoligonos.iniciaJanelaFlutuante()",
69   - "i3GEOF.gradeDePoligonos.dicionario_script"
70   - );
71   - }
72   - else{
73   - i3GEOF.gradeDePoligonos.iniciaJanelaFlutuante();
74   - }
75   - },
76   - /*
77 70 Function: inicia
78 71  
79 72 Inicia a ferramenta. É chamado por criaJanelaFlutuante
... ... @@ -103,11 +96,7 @@ i3GEOF.gradeDePoligonos = {
103 96 String com o código html
104 97 */
105 98 html:function(){
106   - var ins = '';
107   - ins += '<div style="padding:5px;background-color:#F2F2F2;top:0px;left:0px;display:block;width:98%;" id="i3GEOgradedepoligonosresultado" >';
108   - ins += '</div>';
109   - ins += '<div style="top:10px;left:0px;display:block;width:98%;color:red" id="i3GEOgradedepoligonosfim" >';
110   - ins += '</div>';
  99 + var ins = Mustache.render(i3GEOF.gradeDePoligonos.MUSTACHE, i3GEOF.gradeDePoligonos.mustacheHash());
111 100 return ins;
112 101 },
113 102 /*
... ... @@ -130,7 +119,7 @@ i3GEOF.gradeDePoligonos = {
130 119 };
131 120 janela = i3GEO.janela.cria(
132 121 "400px",
133   - "190px",
  122 + "240px",
134 123 "",
135 124 "",
136 125 "",
... ... @@ -141,7 +130,11 @@ i3GEOF.gradeDePoligonos = {
141 130 cabecalho,
142 131 minimiza,
143 132 "",
144   - false
  133 + false,
  134 + "",
  135 + "",
  136 + "",
  137 + ""
145 138 );
146 139 divid = janela[2].id;
147 140 janela[0].setFooter("<div id=i3GEOF.gradeDePoligonos_rodape class='i3GeoRodapeJanela' ></div>");
... ... @@ -153,75 +146,35 @@ i3GEOF.gradeDePoligonos = {
153 146 };
154 147 YAHOO.util.Event.addListener(janela[0].close, "click", temp);
155 148 },
156   - t0: function()
157   - {
158   - var ins = "<img class=i3GeoExemploImg src='"+i3GEO.configura.locaplic+"/ferramentas/gradepol/exemplo.png' />" +
159   - "<p class='paragrafo' >"+$trad('ajuda',i3GEOF.gradeDePoligonos.dicionario) +
160   - "<p class='paragrafo'>"+$trad('ajuda2',i3GEOF.gradeDePoligonos.dicionario) +
161   - "<p class='paragrafo'>"+$trad('ajuda3',i3GEOF.gradeDePoligonos.dicionario) +
162   - "<p class='paragrafo'><input type=checkbox id=i3GEOgradedepoligonosProj style='cursor:pointer;position:relative;top:2px;' />&nbsp;"+$trad('projMercator',i3GEOF.gradeDePoligonos.dicionario);
  149 + t0: function(){
  150 + var ins = $i("i3GEOgradedepoligonosT0").innerHTML;
163 151 i3GEO.util.proximoAnterior("","i3GEOF.gradeDePoligonos.t1()",ins,"i3GEOF.gradeDePoligonos.t0","i3GEOgradedepoligonosresultado",true,"i3GEOF.gradeDePoligonos_rodape");
164 152 },
165 153 t1: function(){
166   - var ins = "<p class='paragrafo'><b>"+$trad('distancia',i3GEOF.gradeDePoligonos.dicionario)+"</b>";
  154 + var ins = "";
  155 + //false para nao criar dois ids iguais
167 156 if($i("i3GEOgradedepoligonosProj").checked){
168   - ins += "<p class='paragrafo'>" + $trad('metros',i3GEOF.gradeDePoligonos.dicionario)+" X:";
169   - ins += "<div class='i3geoForm i3geoFormIconeNumero' ><input id='i3GEOgradedepoligonosxg' title='metros' type=number value='100000'/></div>";
170   - ins += "<br><p class='paragrafo'>"+$trad('metros',i3GEOF.gradeDePoligonos.dicionario)+" Y:";
171   - ins += "<div class='i3geoForm i3geoFormIconeNumero' ><input id='i3GEOgradedepoligonosyg' title='metros' type=number value='100000'/></div>";
  157 + ins = $i("i3GEOgradedepoligonosT1a").innerHTML;
  158 + i3GEO.util.proximoAnterior("i3GEOF.gradeDePoligonos.t0()","i3GEOF.gradeDePoligonos.t2()",ins,"i3GEOF.gradeDePoligonos.t1a","i3GEOgradedepoligonosresultado",false,"i3GEOF.gradeDePoligonos_rodape");
172 159 }
173 160 else{
174   - ins += "<p class='paragrafo'>X: ";
175   - ins += $trad('grau',i3GEOF.gradeDePoligonos.dicionario)+" - "+$trad('minuto',i3GEOF.gradeDePoligonos.dicionario)+" - "+$trad('segundo',i3GEOF.gradeDePoligonos.dicionario)+"</p>";
176   - ins += "<div class='i3geoForm100 i3geoFormIconeLongitude' style='float:left;' ><input id='i3GEOgradedepoligonosxg' title='grau' type=text value='1'/></div>";
177   - ins += "<div class='i3geoForm100 i3geoFormIconeMinuto' style='float:left;margin-left:10px;margin-right:10px;' ><input id='i3GEOgradedepoligonosxm' title='minuto' type=text value='00'/></div>";
178   - ins += "<div class='i3geoForm100 i3geoFormIconeSegundo' style='margin-left:10px;' ><input id='i3GEOgradedepoligonosxs' title='segundo' type=text value='00.00'/></div>";
179   -
180   - ins += "<br><p class='paragrafo'>Y: ";
181   - ins += $trad('grau',i3GEOF.gradeDePoligonos.dicionario)+" - "+$trad('minuto',i3GEOF.gradeDePoligonos.dicionario)+" - "+$trad('segundo',i3GEOF.gradeDePoligonos.dicionario)+"</p>";
182   - ins += "<div class='i3geoForm100 i3geoFormIconeLatitude' style='float:left;' ><input id='i3GEOgradedepoligonosyg' title='grau' type=text value='1'/></div>";
183   - ins += "<div class='i3geoForm100 i3geoFormIconeMinuto' style='float:left;margin-left:10px;' ><input id='i3GEOgradedepoligonosym' title='minuto' type=text value='00'/></div>";
184   - ins += "<div class='i3geoForm100 i3geoFormIconeSegundo' style='float:left;margin-left:10px;' ><input id='i3GEOgradedepoligonosys' title='segundo' type=text value='00.00'/></div>";
  161 + ins = $i("i3GEOgradedepoligonosT1b").innerHTML;
  162 + i3GEO.util.proximoAnterior("i3GEOF.gradeDePoligonos.t0()","i3GEOF.gradeDePoligonos.t2()",ins,"i3GEOF.gradeDePoligonos.t1b","i3GEOgradedepoligonosresultado",false,"i3GEOF.gradeDePoligonos_rodape");
185 163 }
186   - i3GEO.util.proximoAnterior("i3GEOF.gradeDePoligonos.t0()","i3GEOF.gradeDePoligonos.t2()",ins,"i3GEOF.gradeDePoligonos.t1","i3GEOgradedepoligonosresultado",true,"i3GEOF.gradeDePoligonos_rodape");
187 164 },
188 165 t2: function(){
189   - var ins = "<p class='paragrafo'><b>"+$trad('coord',i3GEOF.gradeDePoligonos.dicionario)+"</b>";
190   - ins += "<p class='paragrafo'>X: ";
191   - ins += $trad('grau',i3GEOF.gradeDePoligonos.dicionario)+" - "+$trad('minuto',i3GEOF.gradeDePoligonos.dicionario)+" - "+$trad('segundo',i3GEOF.gradeDePoligonos.dicionario)+"</p>";
192   - ins += "<div class='i3geoForm100 i3geoFormIconeLongitude' style='float:left;' ><input id='i3GEOgradedepoligonosixg' title='grau' type=text value='1'/></div>";
193   - ins += "<div class='i3geoForm100 i3geoFormIconeMinuto' style='float:left;margin-left:10px;margin-right:10px;' ><input id='i3GEOgradedepoligonosixm' title='minuto' type=text value='00'/></div>";
194   - ins += "<div class='i3geoForm100 i3geoFormIconeSegundo' style='margin-left:10px;' ><input id='i3GEOgradedepoligonosixs' title='segundo' type=text value='00.00'/></div>";
195   -
196   - ins += "<br><p class='paragrafo'>Y: ";
197   - ins += $trad('grau',i3GEOF.gradeDePoligonos.dicionario)+" - "+$trad('minuto',i3GEOF.gradeDePoligonos.dicionario)+" - "+$trad('segundo',i3GEOF.gradeDePoligonos.dicionario)+"</p>";
198   - ins += "<div class='i3geoForm100 i3geoFormIconeLatitude' style='float:left;' ><input id='i3GEOgradedepoligonosiyg' title='grau' type=text value='1'/></div>";
199   - ins += "<div class='i3geoForm100 i3geoFormIconeMinuto' style='float:left;margin-left:10px;' ><input id='i3GEOgradedepoligonosiym' title='minuto' type=text value='00'/></div>";
200   - ins += "<div class='i3geoForm100 i3geoFormIconeSegundo' style='float:left;margin-left:10px;' ><input id='i3GEOgradedepoligonosiys' title='segundo' type=text value='00.00'/></div>";
201   -
  166 + var ins = $i("i3GEOgradedepoligonosT2").innerHTML;
202 167 i3GEO.util.proximoAnterior("i3GEOF.gradeDePoligonos.t1()","i3GEOF.gradeDePoligonos.t3()",ins,"i3GEOF.gradeDePoligonos.t2","i3GEOgradedepoligonosresultado",true,"i3GEOF.gradeDePoligonos_rodape");
203 168 i3GEO.eventos.cliquePerm.desativa();
204 169 i3GEO.eventos.adicionaEventos("MOUSECLIQUE",["i3GEOF.gradeDePoligonos.capturaPonto()"]);
205 170 },
206 171 t3: function(){
207   - var ins = "<p class='paragrafo'><b>"+$trad('numero',i3GEOF.gradeDePoligonos.dicionario)+"</b>";
208   - ins += "<p class='paragrafo'>X</p>";
209   - ins += "<div class='i3geoForm i3geoFormIconeNumero' ><input id='i3GEOgradedepoligonosnptx' title='pontos em x' type=number value='10'/></div>";
210   - ins += "<br><p class='paragrafo'>Y";
211   - ins += "<div class='i3geoForm i3geoFormIconeNumero' ><input id='i3GEOgradedepoligonosnpty' title='pontos em y' type=number value='10'/></div>";
212   -
  172 + var ins = $i("i3GEOgradedepoligonosT3").innerHTML;
213 173 i3GEO.util.proximoAnterior("i3GEOF.gradeDePoligonos.t2()","i3GEOF.gradeDePoligonos.t4()",ins,"i3GEOF.gradeDePoligonos.t3","i3GEOgradedepoligonosresultado",true,"i3GEOF.gradeDePoligonos_rodape");
214 174 },
215 175 t4: function(){
216   - var b,ins = "<p class='paragrafo'><b>"+$trad('adicionaTema',i3GEOF.gradeDePoligonos.dicionario)+"</b>";
217   - ins += "<p class='paragrafo'><input id=i3GEOgradedepoligonosbotao1 size=18 class=executar type='button' value='"+$trad('criaGrade',i3GEOF.gradeDePoligonos.dicionario)+"' />";
218   -
  176 + var ins = $i("i3GEOgradedepoligonosT4").innerHTML;
219 177 i3GEO.util.proximoAnterior("i3GEOF.gradeDePoligonos.t3()","",ins,"i3GEOF.gradeDePoligonos.t4","i3GEOgradedepoligonosresultado",true,"i3GEOF.gradeDePoligonos_rodape");
220   - b = new YAHOO.widget.Button(
221   - "i3GEOgradedepoligonosbotao1",
222   - {onclick:{fn: i3GEOF.gradeDePoligonos.criaGrade}}
223   - );
224   - b.addClass("rodar");
225 178 },
226 179 /*
227 180 Function: criaGrade
... ... @@ -261,8 +214,9 @@ i3GEOF.gradeDePoligonos = {
261 214 i3GEOF.gradeDePoligonos.aguarde.visibility = "hidden";
262 215 if (retorno.data == undefined )
263 216 {$i("i3GEOgradedepoligonosfim").innerHTML = "<p class='paragrafo'>Erro. ";}
264   - else
265   - {i3GEO.atualiza("");}
  217 + else{
  218 + i3GEO.atualiza();
  219 + }
266 220 };
267 221 p = i3GEO.configura.locaplic+"/ferramentas/gradepol/exec.php?g_sid="+i3GEO.configura.sid+"&proj="+proj+"&funcao=gradedepol&xdd="+dx+"&ydd="+dy+"&px="+ix+"&py="+iy+"&nptx="+nptx+"&npty="+npty;
268 222 cp = new cpaint();
... ...
ferramentas/gradepol/template_mst.html
1   -<div style='padding: 5px; background-color: #F2F2F2; top: 0px; left: 0px; display: block; width: 98%;' id='i3GEOgradedepoligonosresultado'></div>
2   -<div style='top: 10px; left: 0px; display: block; width: 98%; color: red' id='i3GEOgradedepoligonosfim'></div>
3 1 \ No newline at end of file
  2 +<div class='container-fluid'>
  3 + <div id='i3GEOgradedepoligonosresultado'></div>
  4 + <div id='i3GEOgradedepoligonosfim'></div>
  5 +</div>
  6 +<!-- telas do ajudante -->
  7 +<script id="i3GEOgradedepoligonosT0" type="x-tmpl-mustache">
  8 + <img class="img-rounded pull-left" style="margin: 5px;" src='{{{locaplic}}}/ferramentas/gradepol/exemplo.png' />
  9 + <h5>{{{ajuda}}}</h5>
  10 + <h5>{{{ajuda2}}}</h5>
  11 + <h5>{{{ajuda3}}}</h5>
  12 + <div class="checkbox text-left">
  13 + <label>
  14 + <input id='i3GEOgradedepoligonosProj' type="checkbox">
  15 + <span class="checkbox-material noprint">
  16 + <span class="check"></span>
  17 + </span>
  18 + {{{projMercator}}}
  19 + </label>
  20 + </div>
  21 +</script>
  22 +<script id="i3GEOgradedepoligonosT1a" type="x-tmpl-mustache">
  23 + <h5>{{{distancia}}}</h5>
  24 + <div class='form-group label-fixed condensed'>
  25 + <label class="control-label" for="i3GEOgradedepoligonosxg">{{{metros}}} X</label>
  26 + <input class="form-control input-lg" type='text' id='i3GEOgradedepoligonosxg' value='100000' />
  27 + </div>
  28 + <div class='form-group label-fixed condensed'>
  29 + <label class="control-label" for="i3GEOgradedepoligonosyg">{{{metros}}} Y</label>
  30 + <input class="form-control input-lg" type='text' id='i3GEOgradedepoligonosyg' value='100000' />
  31 + </div>
  32 +</script>
  33 +<script id="i3GEOgradedepoligonosT1b" type="x-tmpl-mustache">
  34 + <h5>{{{distancia}}} {{{grau}}} - {{{minuto}}} - {{{segundo}}}</h5>
  35 + <h5>X</h5>
  36 + <div class="form-group condensed">
  37 + <input style="display: inline; width: 100px;" class="form-control input-lg" type='text' id='i3GEOgradedepoligonosxg' value='1' title='grau' />
  38 + <input style="display: inline; width: 100px;" class="form-control input-lg" type='text' id='i3GEOgradedepoligonosxm' value='00' title='minuto' />
  39 + <input style="display: inline; width: 100px;" class="form-control input-lg" type='text' id='i3GEOgradedepoligonosxs' value='00.00' title='segundo' />
  40 + </div>
  41 + <h5>Y</h5>
  42 + <div class="form-group condensed">
  43 + <input style="display: inline; width: 100px;" class="form-control input-lg" type='text' id='i3GEOgradedepoligonosyg' value='1' title='grau' />
  44 + <input style="display: inline; width: 100px;" class="form-control input-lg" type='text' id='i3GEOgradedepoligonosym' value='00' title='minuto' />
  45 + <input style="display: inline; width: 100px;" class="form-control input-lg" type='text' id='i3GEOgradedepoligonosys' value='00.00' title='segundo' />
  46 + </div>
  47 +</script>
  48 +<script id="i3GEOgradedepoligonosT2" type="x-tmpl-mustache">
  49 + <h5>{{{coord}}} {{{grau}}} - {{{minuto}}} - {{{segundo}}}</h5>
  50 +
  51 + <h5>X</h5>
  52 + <div class="form-group condensed">
  53 + <input style="display: inline; width: 100px;" class="form-control input-lg" type='text' id='i3GEOgradedepoligonosixg' value='00' title='grau' />
  54 + <input style="display: inline; width: 100px;" class="form-control input-lg" type='text' id='i3GEOgradedepoligonosixm' value='00' title='minuto' />
  55 + <input style="display: inline; width: 100px;" class="form-control input-lg" type='text' id='i3GEOgradedepoligonosixs' value='00.00' title='segundo' />
  56 + </div>
  57 + <h5>Y</h5>
  58 + <div class="form-group condensed">
  59 + <input style="display: inline; width: 100px;" class="form-control input-lg" type='text' id='i3GEOgradedepoligonosiyg' value='00' title='grau' />
  60 + <input style="display: inline; width: 100px;" class="form-control input-lg" type='text' id='i3GEOgradedepoligonosiym' value='00' title='minuto' />
  61 + <input style="display: inline; width: 100px;" class="form-control input-lg" type='text' id='i3GEOgradedepoligonosiys' value='00.00' title='segundo' />
  62 + </div>
  63 +</script>
  64 +<script id="i3GEOgradedepoligonosT3" type="x-tmpl-mustache">
  65 + <h5>{{{numero}}}</h5>
  66 +
  67 + <div class='form-group label-fixed condensed' >
  68 + <label class="control-label" for="">X</label>
  69 + <input class="form-control input-lg" type='text' id='i3GEOgradedepoligonosnptx' value='10' />
  70 + </div>
  71 + <div class='form-group label-fixed condensed' >
  72 + <label class="control-label" for="">Y</label>
  73 + <input class="form-control input-lg" type='text' id='i3GEOgradedepoligonosnpty' value='10' />
  74 + </div>
  75 +</script>
  76 +<script id="i3GEOgradedepoligonosT4" type="x-tmpl-mustache">
  77 + <button onclick="i3GEOF.gradeDePoligonos.criaGrade()" class='btn btn-primary btn-sm btn-raised'>{{{criaGrade}}}</button>
  78 +</script>
4 79 \ No newline at end of file
... ...
js/analise.js
... ... @@ -262,7 +262,13 @@ i3GEO.analise =
262 262 * Ferramenta grade de pol&iacute;gonos
263 263 */
264 264 gradePol : function() {
265   - i3GEO.util.dialogoFerramenta("i3GEO.analise.dialogo.gradePol()", "gradepol", "gradeDePoligonos");
  265 + i3GEO.util.dialogoFerramenta(
  266 + "i3GEO.analise.dialogo.gradePol()",
  267 + "gradepol",
  268 + "gradeDePoligonos",
  269 + "dependencias.php",
  270 + "i3GEOF.gradeDePoligonos.iniciaJanelaFlutuante()"
  271 + );
266 272 },
267 273 /**
268 274 * Function: gradeHex
... ...
js/util.js
... ... @@ -2200,7 +2200,6 @@ i3GEO.util =
2200 2200 if(!c){
2201 2201 return;
2202 2202 }
2203   -
2204 2203 if (temp && mantem == false && c) {
2205 2204 c.removeChild(temp);
2206 2205 }
... ...