Conversão da ferramenta Mapa de Calor para Bootstrap

Edmar Moretti
1 parent adf5b5fb
Showing 3 changed files with 70 additions and 67 deletions Show diff stats
admin/admin.db
ferramentas/heatmap/index.js
ferramentas/heatmap/template_mst.html
@@ -213,12 +213,6 @@ i3GEOF.heatmap =
 				"i3GEOheatmapresultado",
 				true,
 				"i3GEOF.heatmap_rodape");
-			var b = new YAHOO.widget.Button("i3GEOheatmapbotao1", {
-				onclick : {
-					fn : i3GEOF.heatmap.criaheatmap
-				}
-			});
-			b.addClass("rodar");
 		},
 		/**
 		 * Function: criaheatmap
@@ -245,11 +239,9 @@ i3GEOF.heatmap =
 				p =
 					i3GEO.configura.locaplic + "/ferramentas/heatmap/exec.php?g_sid=" + i3GEO.configura.sid + "&funcao=criaheatmap"
 						+ "&tema=" + $i("i3GEOheatmaptemasComSel").value
-						// + "&multiplicar="
-						// + $i("i3GEOheatmapdfator").value
 						+ "&coluna=" + $i("i3GEOheatmaptemasItem").value + "&valorPonto=" + $i("i3GEOheatmapd").value + "&titulo="
 						+ $i("i3GEOheatmapTitulo").value + "&opacidade=" + $i("i3GEOheatmapOpacidade").value + "&raio="
-						+ $i("i3GEOheatmapRaio").value;// + "&raio=" + $i("i3GEOheatmapMax").value;
+						+ $i("i3GEOheatmapRaio").value;
 				cp = new cpaint();
 				cp.set_response_type("JSON");
@@ -269,19 +261,30 @@ i3GEOF.heatmap =
 		 * <i3GEO.util.comboTemas>
 		 */
 		comboTemasSel : function() {
-			i3GEO.util.comboTemas("i3GEOheatmaptemasComSel", function(retorno) {
-				$i("i3GEOheatmapSelTemas").innerHTML = retorno.dados;
-				$i("i3GEOheatmapSelTemas").style.display = "block";
-				if ($i("i3GEOheatmaptemasComSel")) {
-					$i("i3GEOheatmaptemasComSel").onchange = function() {
-						i3GEO.mapa.ativaTema($i("i3GEOheatmaptemasComSel").value);
-					};
-				}
-				if (i3GEO.temaAtivo !== "") {
-					$i("i3GEOheatmaptemasComSel").value = i3GEO.temaAtivo;
-					$i("i3GEOheatmaptemasComSel").onchange.call();
-				}
-			}, "i3GEOheatmapSelTemas", "", false, "ligados", "display:block;");
+			i3GEO.util.comboTemas(
+				"i3GEOheatmaptemasComSel",
+				function(retorno) {
+					$i("i3GEOheatmapSelTemas").innerHTML = retorno.dados;
+					$i("i3GEOheatmapSelTemas").style.display = "block";
+					if ($i("i3GEOheatmaptemasComSel")) {
+						$i("i3GEOheatmaptemasComSel").onchange = function() {
+							i3GEO.mapa.ativaTema($i("i3GEOheatmaptemasComSel").value);
+						};
+					}
+					if (i3GEO.temaAtivo !== "") {
+						$i("i3GEOheatmaptemasComSel").value = i3GEO.temaAtivo;
+						$i("i3GEOheatmaptemasComSel").onchange.call();
+					}
+				},
+				"i3GEOheatmapSelTemas",
+				"",
+				false,
+				"ligados",
+				" ",
+				false,
+				true,
+				"form-control comboTema"
+			);
 		},
 		/**
 		 * Function: comboItens
@@ -294,12 +297,18 @@ i3GEOF.heatmap =
 		 *
 		 */
 		comboItens : function() {
-			i3GEO.util.comboItens("i3GEOheatmaptemasItem", $i("i3GEOheatmaptemasComSel").value, function(retorno) {
-				$i("i3GEOheatmapondeItens").innerHTML = retorno.dados;
-				// + " "
-				//+ $trad('multiplica', i3GEOF.heatmap.dicionario)
-				//+ " <input  class=digitar id='i3GEOheatmapdfator' type=text size=10 value='1'/>";
-				$i("i3GEOheatmapondeItens").style.display = "block";
-			}, "i3GEOheatmapondeItens");
+			i3GEO.util.comboItens(
+				"i3GEOheatmaptemasItem",
+				$i("i3GEOheatmaptemasComSel").value,
+				function(retorno) {
+					$i("i3GEOheatmapondeItens").innerHTML = retorno.dados;
+					$i("i3GEOheatmapondeItens").style.display = "block";
+				},
+				"i3GEOheatmapondeItens",
+				"",
+				"",
+				"",
+				"form-control comboTema"
+			);
 		}
 	};
 \ No newline at end of file
-<div style='padding: 5px; background-color: #F2F2F2; top: 0px; left: 0px; display: block; width: 98%;' id='i3GEOheatmapresultado'>
+<div class='container-fluid' id='i3GEOheatmapresultado'>
 	<div id='i3GEOFgradeDePontost0'>
-		<img class='i3GeoExemploImg'
-			src='{{{locaplic}}}/ferramentas/heatmap/exemplo.png' />
-		<p class='paragrafo'>{{{ajuda}}}
-		<p class='paragrafo'>{{{ajuda2}}}
+		<img class="img-rounded pull-left" style="margin: 5px; width: 40px;" src='{{{locaplic}}}/ferramentas/heatmap/exemplo.png' />
+		<h5>{{{ajuda}}}</h5>
+		<h5>{{{ajuda2}}}</h5>
 	</div>
 	<div id='i3GEOF.heatmap.t1'>
-		<p class='paragrafo'>{{{selecionaTema}}}:</p>
-		<div id='i3GEOheatmapSelTemas' class='styled-select'></div>
+		<div style="width: 100%;" class='form-group label-fixed condensed'>
+			<label class="control-label" for="">{{{selecionaTema}}}</label>
+			<div style="width: 100%;" class="input-group">
+				<div id='i3GEOheatmapSelTemas'></div>
+			</div>
+		</div>
 	</div>
 	<div id='i3GEOF.heatmap.t2'>
-		<p class='paragrafo'>{{{valorPonto}}}</p>
-		<div class='i3geoForm i3geoFormIconeEdita'>
-			<input id='i3GEOheatmapd' type='text' value='1' />
+		<div class='form-group label-fixed condensed'>
+			<label class="control-label" for="i3GEOheatmapd">{{{valorPonto}}}</label>
+			<input class="form-control input-lg" type='text' id='i3GEOheatmapd' value='1' />
+		</div>
+		<div style="width: 100%;" class='form-group label-fixed condensed'>
+			<label class="control-label" for="">{{{selecionaAtributo}}}</label>
+			<div style="width: 100%;" class="input-group">
+				<div id='i3GEOheatmapondeItens'></div>
+			</div>
 		</div>
-		<br>
-		<p class='paragrafo'>{{{selecionaAtributo}}}</p>
-		<div class='styled-select' id='i3GEOheatmapondeItens' style='display: block'></div>
 	</div>
 	<div id='i3GEOF.heatmap.t3'>
-		<p class='paragrafo'>
-			{{{tituloNovaCamada}}}<br>
-		</p>
-		<div class='i3geoForm i3geoFormIconeEdita'>
-			<input id='i3GEOheatmapTitulo' type='text' value='Mapa de calor' />
+		<div class='form-group label-fixed condensed'>
+			<label class="control-label" for="i3GEOheatmapTitulo">{{{tituloNovaCamada}}}</label>
+			<input class="form-control input-lg" type='text' id='i3GEOheatmapTitulo' value='Mapa de calor' />
 		</div>
-		<br>
-		<br>
-		<p class='paragrafo'>
-			{{{valorRaio}}}<br>
-		</p>
-		<div class='i3geoForm i3geoFormIconeNumero'>
-			<input id='i3GEOheatmapRaio' type='number' size='10' value='15' />
+		<div class='form-group label-fixed condensed'>
+			<label class="control-label" for="i3GEOheatmapRaio">{{{valorRaio}}}</label>
+			<input class="form-control input-lg" type='text' id='i3GEOheatmapRaio' value='15' />
 		</div>
-		<br>
-		<br>
-		<p class='paragrafo'>
-			{{{opacidade}}}<br>
-		</p>
-		<div class='i3geoForm i3geoFormIconeEdita'>
-			<input id='i3GEOheatmapOpacidade' type='text' size='10' value='50' />
+		<div class='form-group label-fixed condensed'>
+			<label class="control-label" for="i3GEOheatmapOpacidade">{{{opacidade}}}</label>
+			<input class="form-control input-lg" type='text' id='i3GEOheatmapOpacidade' value='50' />
 		</div>
 	</div>
 	<div id='i3GEOF.heatmap.t4'>
-		<p class='paragrafo'>
-			{{{adicionaTema}}}<br>
-			<br>
-			<input id='i3GEOheatmapbotao1' type='button' value='{{{criaCamada}}}' />
+		<h5>{{{adicionaTema}}}</h5>
+		<button onclick="i3GEOF.heatmap.criaheatmap()" class='btn btn-primary btn-sm btn-raised'>{{{criaCamada}}}</button>
+		<h5 id='i3GEOheatmapfim'></h5>
 	</div>
-</div>
-<div style='top: 10px; left: 0px; display: block; width: 98%; color: red' id='i3GEOheatmapfim'></div>
 \ No newline at end of file
+</div>
 \ No newline at end of file