ojuso-map/apps/map/templates/map/form.html

{% extends "base_page.html" %}
{% load compress %}
{% load crispy_forms_tags %}
{% load i18n %}
{% load leaflet_tags %}


{% block stylesheets %}
  {{ block.super }}
  {% leaflet_css %}
  <style> html, body, #main { width: 100; height:100%; } </style>
{% endblock %}


{% block title %}{% trans "Submit a Case Study" %}{% endblock %}
{% block description %}{% trans "Here you can submit a case study for review and it will be added to the map." %}{% endblock %}

{% block inner %}
  {% crispy form %}
{% endblock %}

{% block scripts %}
  {% leaflet_js %}
  <script type="text/javascript">
    YourGeometryField = L.GeometryField.extend({
      addTo: function (map) {
        L.GeometryField.prototype.addTo.call(this, map);
        // Customize map for field
        console.log(this);
      },
      // 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">
    // 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"]
    },
    {
      "field": "#id_location_context",
      "showHide": ["#div_id_type_of_ecosystem"],
      "condition": ["RUR"]
    },
    {
      "field": "#id_power_technology",
      "showHide": ["#div_id_power_technology_other"],
      "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": ["#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"]
    }];




    // 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 %}