Skip to content

GitLab

Shelter Database
Shelter Database
Commit 015826ba authored by Krystyna Milian's avatar Krystyna Milian
Browse files
Options

Added integration of tabs, list of shelters corresponds to filtered shelters... 

Added integration of tabs, list of shelters corresponds to filtered shelters (filtered using charts)
parent 4c5262c5
Show whitespace changes
Inline Side-by-side
Showing with 37 additions and 44 deletions
src/web/static/js/dashboard.js
View file @ 015826ba
......@@ -120,7 +120,7 @@ $(document).ready(function () {
.zoom(2)
.filterByArea(true)
.cluster(true)
.on("filtered", getFiltersValues);
.on("filtered", onFiltered);
addLayersToChart(mapChart)
mapChart.map().scrollWheelZoom.disable()
......@@ -132,7 +132,7 @@ $(document).ready(function () {
.dimension(zoneDimension)
.group(zoneCount)
.innerRadius(20)
.on("filtered", getFiltersValues);
.on("filtered", onFiltered);
crisisChart
.width(110)
......@@ -140,7 +140,7 @@ $(document).ready(function () {
.dimension(crisisDimension)
.group(crisisCount)
.innerRadius(20)
.on("filtered", getFiltersValues);
.on("filtered", onFiltered);
climateChart
......@@ -149,7 +149,7 @@ $(document).ready(function () {
.dimension(climateDimension)
.group(climateCount)
.innerRadius(20)
.on("filtered", getFiltersValues);
.on("filtered", onFiltered);
;
timeChart
......@@ -160,7 +160,7 @@ $(document).ready(function () {
.barPadding(5)
.x(d3.time.scale().domain([new Date(2003, 01, 01), new Date()]))
.xUnits(d3.time.year)
.on("filtered", getFiltersValues)
.on("filtered", onFiltered)
.yAxis().tickFormat(
function (v) {
return d3.format('f')(v);
......@@ -173,7 +173,7 @@ $(document).ready(function () {
.margins({left: 0, right: 10, top: 10, bottom: 20})
.dimension(countryDimension)
.group(countryCount)
.on("filtered", getFiltersValues)
.on("filtered", onFiltered)
.xAxis().tickFormat(
function (v) {
return d3.format('f')(v);
......@@ -187,7 +187,7 @@ $(document).ready(function () {
.margins({left: 0, right: 10, top: 10, bottom: 20})
.dimension(topographyDimension)
.group(topographyCount)
.on("filtered", getFiltersValues)
.on("filtered", onFiltered)
.xAxis().tickFormat(
function (v) {
return d3.format('f')(v);
......@@ -290,8 +290,15 @@ $(document).ready(function () {
saveAs(blob, 'data.csv');
});
initFilters()
function onFiltered() {
getFiltersValues();
generateShelterList(allDimensions.top(Infinity));
}
generateShelterList(data);
initFilters()
})
d3.selectAll('#all').on('click', function () {
......@@ -301,6 +308,8 @@ $(document).ready(function () {
// Serializing filters values in URL
function getFiltersValues() {
var filters = [
{name: 'zone', value: zoneChart.filters()},
......@@ -351,6 +360,8 @@ $(document).ready(function () {
dc.redrawAll();
});
loadFilterValues()
})
......@@ -455,4 +466,19 @@ function loadFilterValues() {
}
loadFilterValues()
\ No newline at end of file
function generateShelterList(data) {
$('#shelterList').empty();
for (var i = 0; i <data.length; i ++)
{
var shelter = $('<div class="shelter"/>').appendTo('#shelterList');
shelter.append('<div class="image" style="background-image: url(' + '' + ')"></div> ' +
'<h4 class="title"><a href="shelter.html">' +data[i].nameofshelter+ '</a></h4>' +
'<div class="country">'+data[i].country+'</div> ' +
'<div class="description"><p>' +'' + '</p></div>');
}
}
src/web/templates/dashboard.html
View file @ 015826ba
......@@ -128,40 +128,7 @@
<li class="tab2" onclick="setTab(2)">Statistics</li>
</ul>
<div class="tabcontent tabcontent1">
<div class="shelters">
<div class="shelter">
<div class="image" style="background-image: url('img/shelter.jpg')"></div>
<h4 class="title"><a href="shelter.html">Cordaid, TS Urban</a></h4>
<div class="country">Haiti</div>
<div class="description"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit
anim id est laborum.</p></div>
</div>
<div class="shelter">
<div class="image" style="background-image: url('img/shelter.jpg')"></div>
<h4 class="title"><a href="shelter.html">Cordaid, TS Urban</a></h4>
<div class="country">Haiti</div>
<div class="description"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit
anim id est laborum.</p></div>
</div>
<div class="shelter">
<div class="image" style="background-image: url('img/shelter.jpg')"></div>
<h4 class="title"><a href="shelter.html">Cordaid, TS Urban</a></h4>
<div class="country">Haiti</div>
<div class="description"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit
anim id est laborum.</p></div>
</div>
<div class="shelters" id="shelterList">
</div>
</div>
<div class="tabcontent tabcontent2">
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment

Luxembourg Institute of Science and Technology - www.list.lu.