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

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

{% block stylesheets %}
  {{ block.super }}
  {% leaflet_css %}
  <style>
    .page-lead { border-left: 10px solid #4ac95d; }
  </style>
{% endblock %}

{% block page_title %}{% trans "New Case Study" %} - {{ block.super }}{% endblock %}
{% block title %}{% trans "New 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 %}
  <div class="draftprompt alert alert-info">
    <div>
      <b class="lead">{% trans "You have a saved draft." %}</b>
      <p>{% trans "Do you want to restore it? Restoring the draft will overwrite any other data you have input into the form below." %}</p>
    </div>
    <button class="draftprompt--restore btn btn-success">{% trans "Restore draft" %}</button>
    <button class="draftprompt--delete btn btn-default">{% trans "Delete draft" %}</button>
    <span class="draftprompt--details"></span>
  </div>

  <div class="savebutton" style="display: none">
    <button class="savebutton--button btn btn-success">{% trans "Save" %}</button>
    <i class="savebutton--icon"></i> <span class="savebutton--details"></span>
  </div>

  <input type="hidden" id="form_errors" value="{% if form.errors %}true{% else %}false{% endif %}">

  {% crispy form %}
{% endblock %}

{% block scripts %}
  {{ form.media }}
  {% leaflet_js %}
  <script src="{% static 'js/map_minzoom.js' %}"></script>
  <script src="{% static 'map/plugins/FormSaver.js' %}"></script>
  <script src="{% static 'map/plugins/jquery.dirtyforms.min.js' %}"></script>
  <script src="{% static 'js/form_casestudy_drafts.js' %}"></script>

  <!-- Conditional logic for hiding and un-hiding fields. -->
  <script>

    //
    // Helper functions for conditional field show/hide
    //

    // Show or hide an element, or selection of elements, depending shouldShow
    function showIf(thingToShow, shouldShow) {
      if (shouldShow) {
        $(thingToShow).show()
      } else {
        $(thingToShow).hide()
      }
    }

    // Constructor function to make list below more terse
    function show(condition, selector) {
      return { showHide: selector, visible: condition }
    }

    // Returns true if checkbox is checked
    function isChecked(elem) {
      return elem.checked
    }

    // Returns a function that returns true if its parameter matches `condition`
    function isEqual(condition) {
      return elem => elem.value === condition
    }

    // Inverse of the above
    function isNot(condition) {
      return elem => elem.value !== condition
    }

    // Returns a function that returns true if its parameter is in `conditions`
    function isOneOf(conditions) {
      return elem => conditions.includes(elem.value)
    }

    //
    // The big ol' list of controls and what sections they toggle the display of
    // TODO: Move this knowledge out of the template
    //

    var showHideFields = {
      // 'Basic information' tab
      'location_context': [
        show(isEqual('RUR'), '#div_id_type_of_ecosystem'), // Rural
      ],

      // Technical/economic tab
      'sector_of_economy': [
        show(isEqual('RN'), '.power_generation_questions'),  // Energy generation project
        show(isEqual('PG'), '.energy_network_questions'),    // Energy networks (PG = power grid)
        show(isEqual('ST'), '.energy_storage_questions'),    // Storage
        show(isOneOf(['RN', 'ST', 'PG']),
                            '.energy_generation_network_and_storage_questions'),
        show(isEqual('SM'), '.mineral_commodity_questions'), // Mining
        show(isEqual('MA'), '.manufacturing_questions'),     // Manufacturing
      ],

      'use_in_energy_economy': [
        show(isEqual('OTR'), '#div_id_use_in_energy_economy_other'),
      ],

      'power_technology': [
        show(isEqual('OT'), '#div_id_power_technology_other'),
      ],

      'generation_technology': [
        show(isEqual('BIO'), '#div_id_biomass_detail'), // Bio-energy
      ],

      // Socio-environmental tab
      'positive_or_negative': [
        show(isNot('N'), '#div_id_positive_case_type'),
        show(isNot('P'), '#div_id_negative_case_reasons'),
        show(isOneOf([ 'P', 'N' ]), '#div_id_obstacles_and_hindrances'),
      ],

      'negative_case_reasons': [
        show(isEqual('OTHR'), '#div_id_negative_case_reasons_other'),
      ],

      // Contact tab
      'shown_on_other_platforms': [
        show(isChecked, '#div_id_shown_on_other_platforms_detail'),
      ],
    };

    //
    // Fields that require their own more advanced logic
    //

    var conditionalControls = [
      {
        name: 'sector_of_economy',
        redraw: function() {
          const sector = document.forms['case-study-form'].sector_of_economy
          const input = document.querySelector(`[name=positive_case_type][value=CORS]`)

          // If sector of economy is transmission, mining, or processing
          // Then enable this input.  Otherwise, disable.
          // TODO: Could make the row invisible
          input.disabled = ['PG', 'SM', 'MA'].includes(sector.value) ? false : true
        }
      },

      {
        name: 'positive_or_negative',
        redraw: function() {
          const setting = document.forms['case-study-form'].positive_or_negative

          //
          // This is some nasty hacking around wanting different field labels/
          // help texts depending on the positive_or_negative option.
          //
          // Each piece of text whose display is dependent on what option is selected
          // has the class 'organising', plus at least one of 'organising-vs/pro/none/idk'.
          //
          // The base `organising` class sets display: none.  Then, we go through
          // all the elements tagged with the current choice, reset element-specific
          // display styling, and then apply `display: inline` just to the desired
          // elements.
          //

          const relatedElements = [
            { value: 'P', elements: '.organising-pro' },
            { value: 'N', elements: '.organising-vs' },
            { value: 'X', elements: '.organising-none' },
            { value: 'U', elements: '.organising-idk' },
            { value: '',  elements: '.organising-idk' },
          ]

          let show = null

          for (const { value, elements } of relatedElements) {
            if (value === setting.value) {
              show = elements
            }

            $(elements).css("display", "")
          }

          $(show).css("display", "inline")
        }
      },
    ]

    $(function() {
      // 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');
      });

      $('form').attr('novalidate', 'novalidate');

      // Add conditional form show/hide logic
      for (const field of Object.keys(showHideFields)) {
        const control = document.forms['case-study-form'][field]

        $(control).change(() => {

          for (const row of showHideFields[field]) {
            // Check the value matches any of the conditions.
            showIf(row.showHide, row.visible(control))
          }
        });

        $(control).change();
      }

      // Add handlers for more advanced form logic
      for (const group of conditionalControls) {
        $(`[name=${group.name}]`).on('change', group.redraw)
        group.redraw();
      }

      initDrafts()

      // Jump to error
      if ($('.has-error').length) {
        location.href = '#' + $('.has-error:first').attr('id');
      }
    })
  </script>

{% endblock %}