-
Notifications
You must be signed in to change notification settings - Fork 2
/
slider2.php
146 lines (144 loc) · 8.07 KB
/
slider2.php
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
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
<?php
/*
* Content of the second slide.
*/
?>
<div id="slide2" class="slide" style="width: 900px;" style="margin: 0 auto;" >
<div id="slideContainer2" display="none" >
<div style="margin: 20px 20px 0px 20px;" >
<table>
<tr>
<td>
<button id="PreviousButton1" class="btn" ><< Overview</button>
</td>
<td>
<button id="goToTableView1" class="btn" style="margin-left:630px" >Table view >></button>
</td>
</tr>
</table>
<span style="clear:both" />
</div>
<br />
<div style="width: 850px; margin: 0px auto;" >
<span id="detailedViewTitle" style="font-size: 18px; line-height: 27px; color: inherit; font-weight: bold; margin: 0; text-rendering: optimizelegibility;" >Detailed view</span><br />
<br />
<div style="text-align:center" >
<div style="display: inline-block;" >
<div class="well">
<table>
<tr>
<td>
<div style="margin:0 10px 0 0;" >
<b>Type of population</b>
<div id="catList" class="btn-group">
<a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
<span id="catListSelectedValue" ></span>
<span id="catListSelectedId" style="display: none;" ></span>
<span class="caret"></span>
</a>
<ul id="catListItems" class="dropdown-menu" >
</ul>
</div>
</div>
</td>
<td>
<div style="margin:0 10px 0 10px;" >
<b>Location</b><br />
<a id="locListSelectedValue" data-toggle="modal" href="#myModal" class="btn"></a><span id="locListSelectedId" style="display: none;" ></span>
</td>
<td>
<div style="margin:0 0 0 10px;" >
<b>Source</b>
<div id="sourceList" class="btn-group" >
<a class="btn dropdown-toggle" data-toggle="dropdown" href="#" style="width: 230px;" >
<span id="sourceListSelectedValue" style="float: left;" ></span>
<span id="sourceListSelectedId" style="display: none;" ></span>
<span class="caret" style="float: right;"></span>
</a>
<ul id="sourceListItems" class="dropdown-menu" style="width: 246px;" >
</ul>
</div>
</div>
</td>
</tr>
</table>
</div>
</div>
</div>
<table style="width: 860px;" >
<tr>
<td colspan="2" width="620" style="vertical-align: top;" >
<div id="chart_div2" style="width: 850px; height: 350px; margin: 10px 20px 10px 0px; border: 1px solid black;" >
</div>
<div class="downloadBar" style="margin: 0px; text-align: center;" >
<!-- <button>XLS</button>
<button>GML</button>
<button>CSV</button> -->
</div>
</td>
</tr>
<td style="vertical-align: top;" >
<div style="margin: 20px 10px 10px 0px;" >
Sex categories:<br />
<div id="sexList" class="btn-group" style="margin: 0px 0px 8px 0px;" >
<a class="btn dropdown-toggle" data-toggle="dropdown" href="#" style="width: 230px;" >
<span id="sexListSelectedValue" style="float: left;" ></span>
<span id="sexListSelectedId" style="display: none;" ></span>
<span class="caret" style="float: right;"></span>
</a>
<ul id="sexListItems" class="dropdown-menu" style="width: 246px;" >
</ul>
</div>
Age groups:<br />
<div id="ageList" class="btn-group" style="margin: 0px 0px 8px 0px;" >
<a class="btn dropdown-toggle" data-toggle="dropdown" href="#" style="width: 230px;" >
<span id="ageListSelectedValue" style="float: left;" ></span>
<span id="ageListSelectedId" style="display: none;" ></span>
<span class="caret" style="float: right;"></span>
</a>
<ul id="ageListItems" class="dropdown-menu" style="width: 246px;" >
</ul>
</div>
Country of origin:<br />
<div id="originList" class="btn-group" style="margin: 0px 0px 8px 0px;" >
<a class="btn dropdown-toggle" data-toggle="dropdown" href="#" style="width: 230px;" >
<span id="originListSelectedValue" style="float: left;" ></span>
<span id="originListSelectedId" style="display: none;" ></span>
<span class="caret" style="float: right;"></span>
</a>
<ul id="originListItems" class="dropdown-menu" style="width: 246px;" >
</ul>
</div>
<button id="goToTableView2" class="btn" style="margin: 20px 0px 0px 80px;" >Table view >></button>
</div>
</td>
<td>
<br />
<!-- MAP -->
<div id="mapMessage" style="text-align: center;display:none"><span class="text-warning" >Too many locations or no coordinate to display</span></div>
<div id="map" style="width: 560px; height: 300px; margin: 10px 20px 20px 20px; border: 1px solid black;"></div>
</td>
</tr>
</table>
<!-- Location popup -->
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display: none;">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="myModalLabel">Affected people locations</h3>
<span class="label label-warning" style="margin-left: 20px;">Note:</span><span class="text-warning" > Please select only one location and press Ok. No selection means everything is selected.</span>
</div>
<div class="modal-body">
<div id="modalContent">
</div>
</div>
<div class="modal-footer">
<!--<button class="btn" data-dismiss="modal" aria-hidden="true">Cancel</button>-->
<button class="btn btn-primary" data-dismiss="modal" >Ok</button>
</div>
</div>
</br>
</br>
</br>
</div>
</div>
</div>