forked from nahual/qc-provinciano
-
Notifications
You must be signed in to change notification settings - Fork 0
/
mipais_1.html
executable file
·111 lines (105 loc) · 5.29 KB
/
mipais_1.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8" />
<title>MiPais</title>
<link rel="stylesheet" href="css/mipais.css" />
<script type="text/javascript" src="js/jquery-1.7.min.js"></script>
<script type="text/javascript" src="js/jquery.tmpl.min.js"></script>
<script type="text/javascript">
var departamentos = [
{ 'region': '', 'name': 'Montevideo', 'capital': 'Montevideo', 'inhabitants': '1.319.108', 'area': '530' },
{ 'region': '', 'name': 'Canelones', 'capital': 'Canelones', 'inhabitants': '520.187', 'area': '4536' },
{ 'region': 'Este', 'name': 'Maldonado', 'capital': 'Este', 'inhabitants': '164.300', 'area': '4793' },
{ 'region': 'Litoral', 'name': 'Salto', 'capital': 'Salto', 'inhabitants': '124.878', 'area': '14163' },
{ 'region': 'Litoral', 'name': 'Colonia', 'capital': 'Colonia del Sacramento', 'inhabitants': '123.203', 'area': '6106' },
{ 'region': 'Litoral', 'name': 'Paysandú', 'capital': 'Paysandú', 'inhabitants': '113.124', 'area': '13922' },
{ 'region': 'Metropolitana', 'name': 'San José', 'capital': 'San José de Mayo', 'inhabitants': '108.309', 'area': '4992' },
{ 'region': 'Norte', 'name': 'Rivera', 'capital': 'Rivera', 'inhabitants': '103.493', 'area': '9370' },
{ 'region': 'Norte', 'name': 'Tacuarembó', 'capital': 'Tacuarembó', 'inhabitants': '90.053', 'area': '15438' },
{ 'region': 'Norte', 'name': 'Cerro Largo', 'capital': 'Melo', 'inhabitants': '84.698', 'area': '13648' },
{ 'region': 'Litoral', 'name': 'Soriano', 'capital': 'Mercedes', 'inhabitants': '82.595', 'area': '9008' },
{ 'region': 'Norte', 'name': 'Artigas', 'capital': 'Artigas', 'inhabitants': '73.378', 'area': '11928' },
{ 'region': 'Este', 'name': 'Rocha', 'capital': 'Rocha', 'inhabitants': '68.088', 'area': '10551' },
{ 'region': 'Centro', 'name': 'Florida', 'capital': 'Florida', 'inhabitants': '67.048', 'area': '10417' },
{ 'region': 'Centro', 'name': 'Durazno', 'capital': 'Durazno', 'inhabitants': '57.088', 'area': '11643' },
{ 'region': 'Litoral', 'name': 'Río Negro', 'capital': 'Fray Bentos', 'inhabitants': '54.765', 'area': '9282' },
{ 'region': 'Este', 'name': 'Treinta y Tres', 'capital': 'Treinta y Tres', 'inhabitants': '48.134', 'area': '9529' }
];
function search_data() {
$("#data").attr({"style":""});
var data_to_search = new RegExp("^"+$("#input")[0].value+".*");
var region_to_search = $("#region").val();
var result = [];
$(departamentos).each(function(){
if (data_to_search.exec(this.name) || (region_to_search == "Todas" || region_to_search == this.region)) {
result.push(this);
}
});
return result;
}
function load_regions() {
$("<option value='Todas'>Todas</option>").appendTo( "#region" );
var visited = [];
$(departamentos).each(function(){
var region = this.region;
if (visited.indexOf(region) == -1) {
visited.push(region);
}
});
$(visited).each(function() {
$.tmpl( "<option value='${region}'>${region}</option>'", {"region":this}).appendTo( "#region" );
});
}
function load_data(data) {
$("tbody tr", "#data").each(function() { $(this).remove()});
$.randomize($(data)).each(function(){
$.tmpl( "<tr><td>${region}</td><td>${name}</td><td>${capital}</td><td>${inhabitants}</td><td>${area}</td></tr>", this).appendTo( "#data" );
});
if ($(data).size() == 0) {
$("<tr><td colspan='5'>No hay departamentos que coincidan con lo buscado</td></tr>").appendTo( "#data" );
}
}
$(document).ready(function() {
load_regions();
load_data(departamentos);
$("#input").keyup(function(event){
});
$("#filters").submit(function() {
load_data(search_data());
return false;
});
});
(function($) {
$.randomize = function(arr) {
for(var j, x, i = arr.length; i; j = parseInt(Math.random() * i), x = arr[--i], arr[i] = arr[j], arr[j] = x);
return arr;
};
})(jQuery);
</script>
</head>
<body>
<h1>MiPaís</h1>
<p>Buscador de datos sobre Departamentos de la república oriental del uruguay</p>
<div id="filter-wrapper">
<form id="filters" action="">
<label for="region">Región</label>
<select id="region"></select>
<label for="input">Nombre</label>
<input id="input" class="input" type="text" />
<input type="submit" class="button" value="buscar!"/>
</form>
</div>
<div id="data-wrapper">
<table style="display:none" id="data">
<thead>
<tr>
<th>Región</th><th>Nombre</th><th>Habitantes</th><th>Capital</th><th>Km<sup>2</sup></th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</body>
</html>