Skip to content

Commit d847870

Browse files
martavjmartavj
authored
Merge pull request #4 from GeoVoluntarios/master
merge geosearch master
2 parents 2d6afe2 + acb0158 commit d847870

File tree

3 files changed

+79
-10
lines changed

3 files changed

+79
-10
lines changed

‎css/estilo.css

+4-3
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,11 @@
11
body {
22
background-color: #e6e6e6;
3-
text-align: center;
43
}
5-
#search-box {
6-
margin: 0 auto;
4+
5+
.listEl {
6+
border: 1px solid black;
77
}
8+
89
/* #mapDiv{
910
1011
height:500px;

‎index.html

+35-3
Original file line numberDiff line numberDiff line change
@@ -14,13 +14,45 @@
1414
href="https://js.arcgis.com/4.20/esri/themes/light/main.css"
1515
/>
1616
<link rel="stylesheet" href="./css/estilo.css" />
17+
<link
18+
href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css"
19+
rel="stylesheet"
20+
/>
1721

1822
<script src="https://js.arcgis.com/4.20/"></script>
1923
</head>
24+
2025
<body>
21-
<h1>InfoRiesgo</h1>
22-
<div id="search-box"></div>
23-
<ul id="results-box"></ul>
26+
<div class="container mx-auto">
27+
<div id="search-panel" class="max-w-4xl h-screen flex flex-col justify-center items-center mx-auto">
28+
<h1 class="text-5xl mb-10">InfoRiesgo</h1>
29+
<div class="w-full mb-10" id="search-box"></div>
30+
<div class="w-full grid sm:grid-cols-2 text-center mb-10">
31+
<div class="mb-2 sm:mb-0">
32+
<label class="mr-5" for="riesgos">Riesgos</label>
33+
<select class="p-1" name="riesgos" id="riesgos">
34+
<option value="todos">Todos</option>
35+
<option value="incendios">Natural - Incendios</option>
36+
<option value="sismicos">Natural - Sísmicos</option>
37+
<option value="meteorologico">Natural - Meteorológico</option>
38+
<option value="quimicos">Químicos</option>
39+
<option value="seguridad">Seguridad ciudadana</option>
40+
<option value="nuclear">Nuclear</option>
41+
</select>
42+
</div>
43+
<div>
44+
<label class="mr-5" for="informacion">Información</label>
45+
<select class="p-1" name="informacion" id="informacion">
46+
<option value="toda">Toda</option>
47+
<option value="historias">Historias reales</option>
48+
<option value="prevencion">Prevención</option>
49+
<option value="reaccion">Reacción</option>
50+
</select>
51+
</div>
52+
</div>
53+
<div class="w-full" id="results-box"></div>
54+
</div>
55+
2456
<script src="config.js"></script>
2557
<script src="index.js"></script>
2658
</body>

‎index.js

+40-4
Original file line numberDiff line numberDiff line change
@@ -36,18 +36,54 @@ require([
3636
resultsBoxEl.innerHTML = "";
3737

3838
res.features.forEach((el) => {
39-
const listEl = document.createElement("li");
39+
const searchPanel = document.getElementById("search-panel");
40+
searchPanel.classList.remove("h-screen");
41+
searchPanel.classList.add("mt-10");
42+
43+
const listEl = document.createElement("div");
44+
listEl.className = "listEl sm:flex p-2 my-5";
45+
const noLogo = "geosearch.png";
46+
47+
listEl.innerHTML = `
48+
<div class="w-32 p-4">
49+
<img src=${
50+
el.attributes.logo ? el.attributes.logo : noLogo
51+
}></img>
52+
</div>
53+
<div class="ml-5">
54+
<h1 class="name">${el.attributes.name}</h1>
55+
<ul class="features">
56+
<li><strong>Riesgo: </strong>${
57+
el.attributes.riesgo ? el.attributes.riesgo : ""
58+
}</li>
59+
<li><strong>Información: </strong>${
60+
el.attributes.info ? el.attributes.info : ""
61+
}</li>
62+
<li><strong>Ámbito territorial: </strong>${
63+
el.attributes.territorio ? el.attributes.territorio : ""
64+
}</li>
65+
<li><strong>Idiomas: </strong>${
66+
el.attributes.idiomas ? el.attributes.idiomas : ""
67+
}</li>
68+
<li><strong>Descripción: </strong>${
69+
el.attributes.descripcion ? el.attributes.descripcion : ""
70+
}</li>
71+
</ul>
72+
<a class="url" href="${el.attributes.url}" target="_blank">${
73+
el.attributes.url
74+
}</a>
75+
</div>
76+
`;
4077

41-
listEl.innerHTML = JSON.stringify(el.attributes);
4278
resultsBoxEl.appendChild(listEl);
4379
});
4480
} else {
45-
resultsBoxEl.innerHTML = "<li>No hay resultados</li>";
81+
resultsBoxEl.innerHTML = "<p>No hay resultados</p>";
4682
}
4783
})
4884
.catch(function (e) {
4985
resultsBoxEl.innerHTML =
50-
"<li>No se ha podido consultar la base de datos, por favor inténtelo más tarde</li>";
86+
"<p>No se ha podido consultar la base de datos, por favor inténtelo más tarde</p>";
5187
console.error("query failed: ", e);
5288
});
5389
});

0 commit comments

Comments
 (0)