autonomic-cooperative/ojuso-map
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add updated front end, updated CaseStudy model and profiles app

Browse Source
This commit is contained in:
Livvy Mackintosh
2017-10-31 14:57:26 +00:00
parent f91b4d2a2a
commit 43d6ec989b
30 changed files with 1065 additions and 77 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
apps/map/templates/map/detail.html
View File

@ -17,7 +17,7 @@
<div class="container-fluid">
<div class="row" style="background-color: #e3f3fd;">
<div class="col-lg-8 border-top-0">
<a class="btn btn-info" style="margin:15px 0;padding-left:20px;left:-10px;position:absolute;" href="{% url 'index' %}" role="button"><- {% trans "Back to Map" %}</a>
<a class="btn btn-info" style="margin:15px 0;padding-left:20px;left:-10px;position:absolute;" href="{% url 'index' %}" role="button"><i class="fa fa-arrow-left" aria-hidden="true"></i> {% trans "Back to Map" %}</a>
<div style="margin-top:70px;padding:0 20px;">
<h1>{{case_study.entry_name}}</h1>
<p>{{case_study.synopsis}}</p>
@ -33,13 +33,13 @@
<span class="badge badge-pill bg-info">{{case_study.country.name}}</span>
</br>
<small class="text-muted">Created {{case_study.date_created|naturaltime}} by <i>{{case_study.author.}}</i></small>
</div>
</div>
<a class="btn btn-primary btn-lg float-right" href="#" role="button">Get Involved</a>
</div>
</div>
<div class="col-lg-4">
<div class="embed-responsive embed-responsive-16by9">
<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/ScMzIvxBSi4?rel=0&amp;showinfo=0" frameborder="0" allowfullscreen></iframe>
<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/{{case_study.get_video_id}}?rel=0&amp;showinfo=0" frameborder="0" allowfullscreen></iframe>
</div>
</div>
</div>

91
apps/map/templates/map/form.html
View File

@ -31,4 +31,95 @@
// See GeometryField source (static/leaflet/leaflet.forms.js) to override more stuff...
});
</script>
<!-- Conditional logic for hiding and un-hiding fields. -->
<script type="text/javascript">
// Here we define the fields we need to conditionally toggle.
// TODO: Move this knowledge out of the template
var conditionalFields = [{
"field": "#id_land_ownership",
"showHide": ["#div_id_land_ownership_details"],
"condition": "OTH"
},
{
"field": "#id_power_technology",
"showHide": ["#div_id_power_technology_other"],
"condition": "OT"
},
{
"field": "#id_sector_of_economy",
"showHide": ["#div_id_generation_technology",
"#div_id_biomass_detail",
"#div_id_generation_technology_other",
"#div_id_total_generation_capacity",
"#div_id_total_investment",
"#div_id_technical_or_economic_details"],
"condition": ["WND","SOL","HYD"]
}];
// Here we define the checkboxes that we need to use to
// conditionally toggle fields - they use slightly different
// logic as they rely on the 'checked' attribute rather than value.
var conditionalCheckboxes = [{
"checkbox": "#id_affects_indigenous",
"showHide": "#div_id_affects_indigenous_detail"
}];
// Define a function that hides the field and then creates a listener to toggle the field.
// Takes a single conditionalField dictionary with (field, showHide and condition).
function addConditionalField(item) {
hideAll(item.showHide);
$(item.field).change(function(){
// Get the value of the option
var value = $(this).val();
// Check the value matches any of the conditions.
if (isInArray(value, item.condition)){
showAll(item.showHide);
} else {
hideAll(item.showHide);
}
});
}
// This function does the same as addConditionalField except it checks the status of
// checkboxes instead of fields.
function addConditionalCheckbox(item) {
$(item.showHide).hide();
$(item.checkbox).change(function(){
if ($(this).is(":checked")) {
$(item.showHide).show();
} else {
$(item.showHide).hide();
}
});
}
// Helper functions
function show(tag) {
$(tag).show();
}
function hide(tag) {
$(tag).hide();
}
function showAll(tags) {
tags.forEach(show);
}
function hideAll(tags) {
tags.forEach(hide);
}
function isInArray(value, array) {
return array.indexOf(value) > -1;
}
conditionalFields.forEach(addConditionalField);
conditionalCheckboxes.forEach(addConditionalCheckbox);
</script>
{% endblock %}

14
apps/map/templates/map/index.html
View File

@ -100,13 +100,13 @@
}).addTo(map);
});
// Add an on-click listener for map click events. Show popup with button to submit a casestudy
map.on('click', function(e) {
var popup = L.popup()
.setLatLng(e.latlng)
.setContent("<a class='btn btn-primary btn-sm' href='{% url 'create' %}?lat="+e.latlng.lat+"&lng="+e.latlng.lng+"' role='button'>{% trans "Submit a Case Study" %}</a>")
.openOn(map);
});
<!--// Add an on-click listener for map click events. Show popup with button to submit a casestudy-->
<!--map.on('click', function(e) {-->
<!--var popup = L.popup()-->
<!--.setLatLng(e.latlng)-->
<!--.setContent("<a class='btn btn-primary btn-sm' href='{% url 'create' %}?lat="+e.latlng.lat+"&lng="+e.latlng.lng+"' role='button'>{% trans "Submit a Case Study" %}</a>")-->
<!--.openOn(map);-->
<!--});-->
}
</script>
{% endblock %}