Update frontend and forms

This commit is contained in:
Livvy Mackintosh
2017-11-18 16:54:44 +00:00
parent aa6c1cf33b
commit 310be805c5
16 changed files with 712 additions and 128 deletions

View File

@ -17,20 +17,20 @@
<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"><i class="fa fa-arrow-left" aria-hidden="true"></i> {% trans "Back to Map" %}</a>
<button class="btn btn-info" style="margin:15px 0;padding-left:20px;left:-10px;position:absolute;" onclick="window.history.back()" role="button"><i class="fa fa-arrow-left" aria-hidden="true"></i> {% trans "Back to Map" %}</button>
<div style="margin-top:70px;padding:0 20px;">
<h1>{{case_study.entry_name}}</h1>
<p>{{case_study.synopsis}}</p>
</div>
<div class="clearfix">
<div style="margin-left:20px;">
<span class="badge badge-pill bg-dark">{{case_study.get_sector_of_economy_display}}</span>
<span class="label label-default">{{case_study.get_sector_of_economy_display}}</span>
{% if case_study.positive_or_negative == "P" %}
<span class="badge badge-pill bg-success">{{case_study.get_positive_or_negative_display}}</span>
<span class="label label-success">{{case_study.get_positive_or_negative_display}}</span>
{% elif case_study.positive_or_negative == "N"%}
<span class="badge badge-pill bg-danger">{{case_study.get_positive_or_negative_display}}</span>
<span class="label label-danger">{{case_study.get_positive_or_negative_display}}</span>
{% endif %}
<span class="badge badge-pill bg-info">{{case_study.country.name}}</span>
<span class="label label-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>

View File

@ -34,27 +34,67 @@
<!-- Conditional logic for hiding and un-hiding fields. -->
<script type="text/javascript">
// Button classes for tab navigation
$('.btnNext').click(function(){
$('.nav-tabs > .active').next('li').find('a').trigger('click');
});
$('.btnPrevious').click(function(){
$('.nav-tabs > .active').prev('li').find('a').trigger('click');
});
// 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"
"condition": ["OTH"]
},
{
"field": "#id_location_context",
"showHide": ["#div_id_type_of_ecosystem"],
"condition": ["RUR"]
},
{
"field": "#id_power_technology",
"showHide": ["#div_id_power_technology_other"],
"condition": "OT"
"condition": ["OT"]
},
{ // 2.1 - Power Generation
"field": "#id_sector_of_economy",
"showHide": ["#power_generation_questions"],
"condition": ["WND","SOL","HYD"]
},
{
"field": "#id_generation_technology",
"showHide": ["#div_id_biomass_detail"],
"condition": ["BIOG", "OTHB"]
},
{
"field": "#id_generation_technology",
"showHide": ["#div_id_generation_technology_other"],
"condition": ["OTHR"]
},
{ // 2.2 - Power Grids
"field": "#id_sector_of_economy",
"showHide": ["#power_grids_energy_storage_questions"],
"condition": ["PG"]
},
{
"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"]
"showHide": ["#mineral_commodity_questions"],
"condition": ["SM"]
},
{ // 3.1
"field": "#id_positive_or_negative",
"showHide": ["#positive_case_questions"],
"condition": ["P"]
},
{ // 3.2
"field": "#id_positive_or_negative",
"showHide": ["#negative_case_questions"],
"condition": ["N"]
}];

View File

@ -35,11 +35,11 @@
{% endblock %}
{% block inner %}
<div class="btn-jumbo-group">
<a class="btn btn-jumbo bg-warning" href="{% url 'long-form' %}" role="button">
<a class="btn btn-block btn-warning" href="{% url 'long-form' %}" role="button">
<h2>20+ Minutes</h2>
<p>Full Form (Preferred)</p>
</a>
<a class="btn btn-jumbo bg-success" href="{% url 'short-form' %}" role="button">
<a class="btn btn-block btn-info" href="{% url 'short-form' %}" role="button">
<h2>5-10 Minutes</h2>
<p>Express Form</p>
</a>

View File

@ -2,19 +2,26 @@
{% load bootstrap3 %}
{% load i18n %}
{% load leaflet_tags %}
{% load static %}
{% block stylesheets %}
{{ block.super }}
{% leaflet_css %}
<style> html, body, #main { width: 100; height:100%; } </style>
<style>
html, body, #main {
width: 100; height:100%;
}
.leaflet-popup-content > a{
color: #fff;
}
</style>
{% endblock %}
{% block title %}{% trans "Ojuso Platform Map" %}{% endblock %}
{% block content %}
{% block inner_content %}
<div id="main"></div>
<div id="modals"></div>
{% endblock %}
@ -23,6 +30,7 @@
{% block scripts %}
{% leaflet_map "main" callback="main_app_init" creatediv=False %}
{% leaflet_js %}
<script type="text/javascript" src="{% static 'map/plugins/leaflet-hash.js' %}"></script>
<script type="text/javascript">
// This takes HTML as a string and returns an element
@ -38,7 +46,7 @@
// This is called when the map is initialized
function main_app_init(map, options) {
var hash = new L.hash(map);
// Pull data as GeoJSON and add to map with a modal
$.getJSON('/api/case-studies/', function (data) {
L.geoJson(data, {