Commit 4f260e98ca9a3eaa0068563d7ccae4b8a1d877b1
1 parent
40b3fdbd
Exists in
master
and in
7 other branches
Conversão da ferramenta Grade Poligonal para Bootstrap
Showing
4 changed files
with
117 additions
and
83 deletions
Show diff stats
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;' /> "+$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í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 | ... | ... |