Commit f2e74da8 authored by Maarten van der Veen's avatar Maarten van der Veen
Browse files

add shelter detail page

parent 6509fe55
......@@ -529,7 +529,7 @@ function generateShelterList(data) {
{
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>' +
'<h4 class="title"><a href="/shelter/' + data[i].db_id + '">' +data[i].nameofshelter+ '</a></h4>' +
'<div class="country">'+data[i].country+'</div> ' +
'<div class="description"><p>' +'' + '</p></div>');
}
......
<!DOCTYPE html>
<html lang="nl">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
{% extends "layout.html" %}
{% block head %}
{{ super() }}
<script src="{{ url_for('static', filename = 'lib/dc/d3.js') }}"></script>
<script src="{{ url_for('static', filename = 'lib/leaflet/leaflet.js') }}"></script>
<link href="{{ url_for('static', filename='lib/leaflet/leaflet.css') }}" rel="stylesheet" media="screen" />
{% endblock %}
<meta name="robots" content="noindex, nofollow">
<title>Shelter: Cordaid, TS Urban - Shelter Database</title>
<meta name="description" content="">
<link type='text/css' rel='stylesheet' href='https://fonts.googleapis.com/css?family=Lato:100,400,300,700'>
<link type="text/css" rel="stylesheet" href="vendor/font-awesome-4.6.3/css/font-awesome.min.css">
<link type="text/css" rel="stylesheet" href="vendor/bootstrap-3.3.6/css/bootstrap.min.css">
<link type="text/css" rel="stylesheet" href="css/style.css">
</head>
<body class="">
<header>
<nav>
<a class="home" href="index.html"><i class="fa fa-plus-square"></i><span class="text">Shelter Database</span></a>
<ul>
<li><a href="shelters.html" class="selected">Shelters</a></li>
<li><a href="contribute.html">Contribute</a></li>
<li><a href="#">Knowledge Base</a></li>
</ul>
</nav>
</header>
<main class="page">
{% block content %}
<section class="shelterheader">
<div class="content">
<h1>Cordaid, TS Urban</h1>
</div>
</section>
<section class="shelterimg" style="background-image: url('img/shelter.jpg')">
<section class="shelterimg" style="background-image: url('{{ url_for('static', filename = 'img/shelter.jpg') }}')">
<div class="dots">
<div class="dot selected"></div>
<div class="dot"></div>
......@@ -42,179 +22,102 @@
</div>
</section>
<section class="details">
<div class="content">
<table id="identification"></table>
</div>
</section>
<section class="details details-1">
<div class="content">
<table>
<tr>
<th>ID</th>
<td>HT004</td>
</tr>
<tr>
<th>Name of Shelter</th>
<td>Cordaid, TS Urban</td>
</tr>
<tr>
<th>Survey date</th>
<td>9/23/2014</td>
</tr>
<tr>
<th>Zone</th>
<td>Americas & Caribbean</td>
</tr>
<tr>
<th>Country</th>
<td>Haiti</td>
</tr>
<tr>
<th>Province / District / Region</th>
<td>West Department</td>
</tr>
<tr>
<th>City / Village</th>
<td>Ste Marie, Port au Prince</td>
</tr>
<tr>
<th>Climate zone</th>
<td>Moist tropical</td>
</tr>
<tr>
<th>Landform</th>
<td>Hills</td>
</tr>
</table>
<h3>General</h3>
<table id="general"></table>
</div>
</section>
<section>
<div class="content">
<div class="map2" style="background-image: url('img/map2.jpg')"></div>
<div class="details">
<div id="location-map" style="width:100%; height:400px;"></div>
</div>
</section>
<section class="details details-1">
<section class="details details-2">
<div class="content">
<h3>Disaster & Response</h3>
<table>
<tr>
<th>Associated disaster / Immediate cause</th>
<td>earthquake</td>
</tr>
<tr>
<th>Main hazards in country</th>
<td>earthquake, storm/cyclone, flood</td>
</tr>
<tr>
<th>Type of Implementing Agency</th>
<td>by NGO/agency</td>
</tr>
<tr>
<th>Implementing Agency</th>
<td>Cordaid</td>
</tr>
<tr>
<th>Name of Governmental Agency in charge of Disaster Management</th>
<td>DPC - Department of Civil Protection</td>
</tr>
<tr>
<th>Name of Governmental Agency in charge of Construction</th>
<td>UCLBP - Construction Unit for Habitat and Public Buildings</td>
</tr>
<tr>
<th>Type of shelter</th>
<td>transitional shelter</td>
</tr>
<tr>
<th>Total number of shelter built during project</th>
<td>850</td>
</tr>
<tr>
<th>Type of work (construction)</th>
<td>rebuilding</td>
</tr>
<tr>
<th>Type of settlement</th>
<td>self-settlement in-situ</td>
</tr>
<tr>
<th>Labour skills</th>
<td>skilled labour, unskilled labour</td>
</tr>
<tr>
<th>Support provided</th>
<td>technical training, technical support</td>
</tr>
</table>
<table id="disasterresponse"></table>
</div>
</section>
<section class="details details-2">
<section class="details details-1">
<div class="content">
<h3>Site</h3>
<!--
<div class="infoboxes">
<div class="infobox">
<div class="infobox-title">Location of the site</div>
<div class="infobox-img" style="background-image: url('img/site/3.png')"></div>
<div class="infobox-value">Undulating</div>
</div>
<div class="infobox">
<div class="infobox-title">Topography</div>
<div class="infobox-img" style="background-image: url('img/topo.png')"></div>
<div class="infobox-value">flat/level (&lt;2%)</div>
</div>
</div>
-->
<table>
<tr>
<th>Context</th>
<td>Urban</td>
</tr>
<tr>
<th>Topography</th>
<td>flat/level (&lt;2%)<span class="info"></span></td>
</tr>
<tr>
<th>Location of the site</th>
<td>Undulating</td>
</tr>
<tr>
<th>Soil type</th>
<td>stone/gravel</td>
</tr>
<tr>
<th>Vegetation</th>
<td>trees</td>
</tr>
<tr>
<th>Approximate plot area (m2)</th>
<td>40</td>
</tr>
</table>
<table id="site"></table>
</div>
</section>
<footer>
&copy; Copyright 2016
</footer>
</main>
<section class="details details-2">
<div class="content">
<h3>Foundation</h3>
<table id="foundation"></table>
</div>
</section>
<section class="shelterimg" style="background-image: url('{{ url_for('static', filename = 'img/shelter.jpg') }}')">
<div class="dots">
<div class="dot selected"></div>
<div class="dot"></div>
<div class="dot"></div>
</div>
</section>
<script type="text/javascript" class="source">
$(document).ready(function() {
$( ".attribute-multimedia-asset" ).click(show_multimedia_assets);
});
var shelter_id = {{shelter_id}};
d3.json('/api/v0.2/shelters/' + shelter_id + '?format=prettytext', function (error, data) {
// render the table(s)
var site = data[shelter_id]['Site']['Attributes'];
tabulate("#site", site, d3.keys(site));
var general = data[shelter_id]['General']['Attributes'];
tabulate("#general", general, d3.keys(general));
var disasterresponse = data[shelter_id]['Disaster & Response']['Attributes'];
tabulate("#disasterresponse", disasterresponse, d3.keys(disasterresponse));
var foundation = data[shelter_id]['Foundation']['Attributes'];
tabulate("#foundation", foundation, d3.keys(general));
// Get coordinates for this shelter
var lat = data[shelter_id]['Identification']['Attributes']['GPS Latitude'];
var lon = data[shelter_id]['Identification']['Attributes']['GPS Longitude'];
// Initiate leaflet map
var map = L.map('location-map').setView([lat, lon], 13);
L.marker([lat, lon]).addTo(map);
});
function tabulate(table_id, d, columns) {
// convert object keys to an attribute value pair
var data = Object.keys(d).map(function(k) { return {attribute:k, value:d[k]} })
var table = d3.select(table_id)
var tbody = table.append('tbody');
<!--
<div class="options">
<div class="option" style="background-image: url('img/site/1.png')"></div>
<div class="option selected" style="background-image: url('img/site/2.png')"></div>
<div class="option" style="background-image: url('img/site/3.png')"></div>
<div class="option" style="background-image: url('img/site/4.png')"></div>
<div class="option" style="background-image: url('img/site/5.png')"></div>
<div class="option" style="background-image: url('img/site/6.png')"></div>
<div class="option" style="background-image: url('img/site/7.png')"></div>
<div class="option" style="background-image: url('img/site/8.png')"></div>
</div>
-->
// create a row for each object in the data
var rows = tbody.selectAll('tr')
.data(data)
.enter()
.append('tr');
<script type="text/javascript">
var modalOpen = function(){
document.body.className = "modal-open"
}
var modalClose = function(){
document.body.className = ""
}
</script>
</body>
</html>
// Add column with attribute names
rows.append('th')
.text(function (d) { return d.attribute; });
// Add column with values
rows.append('td')
.text(function (d) { return d.value; });
}
</script>
{% endblock %}
\ No newline at end of file
......@@ -143,6 +143,11 @@ def shelters():
shelters = Shelter.query.filter(Shelter.is_published==True).all()
return render_template('shelters.html', shelters=shelters)
@current_app.route('/shelter/<int:shelter_id>', methods=['GET'])
def shelter(shelter_id):
return render_template('shelter.html', shelter_id=shelter_id)
@current_app.route('/stats', methods=['GET'])
def stats():
return render_template('stats.html')
......
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