The citizen feedback page

citizen-feedback.html

{% extends "feedback_layout.html" %}

{% set guidanceTitle =  'Citizen feedback (not moderated)' %}
{% set isCitizenFeedback =  "true" %}
{% set hideBackLink =  "yes" %}

{% block pageTitle %}
  Citizen feedback - Apply for a Blue Badge
{% endblock %}

{% block guidance_content %}

<div id="loadingContainer" class="loading-container">
  <div class="spinner-container">
    <svg id="icon-spinner2" viewBox="0 0 32 32">
      <title>Loading</title>
      <path d="M32 16c-0.040-2.089-0.493-4.172-1.331-6.077-0.834-1.906-2.046-3.633-3.533-5.060-1.486-1.428-3.248-2.557-5.156-3.302-1.906-0.748-3.956-1.105-5.981-1.061-2.025 0.040-4.042 0.48-5.885 1.292-1.845 0.809-3.517 1.983-4.898 3.424s-2.474 3.147-3.193 4.994c-0.722 1.846-1.067 3.829-1.023 5.79 0.040 1.961 0.468 3.911 1.254 5.694 0.784 1.784 1.921 3.401 3.316 4.736 1.394 1.336 3.046 2.391 4.832 3.085 1.785 0.697 3.701 1.028 5.598 0.985 1.897-0.040 3.78-0.455 5.502-1.216 1.723-0.759 3.285-1.859 4.574-3.208 1.29-1.348 2.308-2.945 2.977-4.67 0.407-1.046 0.684-2.137 0.829-3.244 0.039 0.002 0.078 0.004 0.118 0.004 1.105 0 2-0.895 2-2 0-0.056-0.003-0.112-0.007-0.167h0.007zM28.822 21.311c-0.733 1.663-1.796 3.169-3.099 4.412s-2.844 2.225-4.508 2.868c-1.663 0.646-3.447 0.952-5.215 0.909-1.769-0.041-3.519-0.429-5.119-1.14-1.602-0.708-3.053-1.734-4.25-2.991s-2.141-2.743-2.76-4.346c-0.621-1.603-0.913-3.319-0.871-5.024 0.041-1.705 0.417-3.388 1.102-4.928 0.683-1.541 1.672-2.937 2.883-4.088s2.642-2.058 4.184-2.652c1.542-0.596 3.192-0.875 4.832-0.833 1.641 0.041 3.257 0.404 4.736 1.064 1.48 0.658 2.82 1.609 3.926 2.774s1.975 2.54 2.543 4.021c0.57 1.481 0.837 3.064 0.794 4.641h0.007c-0.005 0.055-0.007 0.11-0.007 0.167 0 1.032 0.781 1.88 1.784 1.988-0.195 1.088-0.517 2.151-0.962 3.156z"></path>
    </svg>
  </div>
  <p class="govuk-body">Loading responses</p>
</div>

<div id="feedbackContainer"></div>

<p class="" id="feedbackDateRange"></p>

{% if data['auto-refresh'] !== "true" %}
  <a href="?auto-refresh=true">30 sec auto-refresh</a>
{% else %}
  <div class="feedback-countdown-container">
    <a href="?auto-refresh=false">Turn off auto-refresh</a>
    <div class="countdown-container">
      <a href="" class="pause-button">
        <svg id="icon-pause" viewBox="0 0 32 32">
          <title>Pause countdown</title>
          <path d="M16 0c-8.837 0-16 7.163-16 16s7.163 16 16 16 16-7.163 16-16-7.163-16-16-16zM16 29c-7.18 0-13-5.82-13-13s5.82-13 13-13 13 5.82 13 13-5.82 13-13 13zM10 10h4v12h-4zM18 10h4v12h-4z"></path>
        </svg>
      </a>
      <a href="" class="play-button" style="display: none;">
        <svg id="icon-pause" viewBox="0 0 32 32">
          <title>Continue countdown</title>
          <path d="M16 0c-8.837 0-16 7.163-16 16s7.163 16 16 16 16-7.163 16-16-7.163-16-16-16zM16 29c-7.18 0-13-5.82-13-13s5.82-13 13-13 13 5.82 13 13-5.82 13-13 13zM12 9l12 7-12 7z"></path>
        </svg>
      </a>
      <p class="countdown-visual govuk-body" id="countdownVisual">30</p>
    </div>
  </div>
{% endif %}

{% endblock %}

{% block pageScripts %}

  <script src="/public/javascripts/moment.js"></script>

  {% if data['auto-refresh'] === "true" %}
    <script>
      var $countdownVisual = $('#countdownVisual'),
          countdownTime = Number($countdownVisual.text()),
          isPaused = false,
          counter = 0,
          interval = setInterval(function() {
                      if(!isPaused) {
                          counter++;
                          $countdownVisual.text(countdownTime - counter);
                          if (counter == 30) {
                              //Refreshes the window
                              document.location.reload(true)
                          }
                        }
                    }, 1000);

      $('.pause-button').on('click', function(e) {
        e.preventDefault();

        isPaused = true;

        $(this).hide();
        $('.play-button').show();
      });

      $('.play-button').on('click', function(e) {
        e.preventDefault();

        isPaused = false;
        $(this).hide();
        $('.pause-button').show();
      });
      
    </script>
  {% endif %}
  <script>
    $(document).ready(function () {
      function randomIntFromInterval(min,max)
      {
        return Math.floor(Math.random()*(max-min+1)+min);
      }

      function convertDigitIn(str){
        return str.split('/').reverse().join('-');
      }

      var sheetsURL = "https://sheets.googleapis.com/v4/spreadsheets/",
          sheetID = "{{googleSheetID}}",
          apiKey = "{{googleSheetApiKey}}",
          $feedbackContainer = $('#feedbackContainer'),
          responsesURL = sheetsURL+sheetID+"/values/Satisfaction%20score!A4:B4?key=" + apiKey;

      // Get total responses
      $.getJSON( responsesURL ).done(function( data ) {
        var total = data.values[0][0],
            score = data.values[0][1],
            maxResponses = total - 5,
            rangeStart = randomIntFromInterval(2,maxResponses),
            rangeEnd = rangeStart + 4,
            range = "A"+rangeStart+":C"+rangeEnd,
            feedbackURL = sheetsURL+sheetID+"/values/Feedback!"+range+"?key=" + apiKey,
            datesURL = sheetsURL+sheetID+"/values/Feedback!A2:A?key=" + apiKey;

        // Show the satisfaction score
        $('#satisfactionScore').html(score);

        // Display 5 responses
        $.getJSON( feedbackURL ).done(function( data ) {
          var values = data.values,
              startDate = values[0][0],
              justDate = startDate.toString().slice(0, -6),
              reversedDate = convertDigitIn(justDate),
              formattedDate = moment(reversedDate).format('ddd D MMM YYYY'); 

          $('#loadingContainer').hide();

          $feedbackContainer.prepend('<p class="govuk-body-l"><small>5 responses from ' + formattedDate + '</small>');

          $.each( values, function( i, value ) {
            var feedback = value[2].replace('’', '\'');

            if(feedback.indexOf('Rating of') >= 0 ||
               feedback.length < 4  ||
               feedback == 'apply-blue-badge' ){

              $feedbackContainer.append('<p class="govuk-body-l" data-removed-text><i>Text removed</i></p>');

              if($('[data-removed-text]').length > 3) {
                window.setTimeout(function(){ document.location.reload(true); }, 2000)
              }

            } else {
              $feedbackContainer.append('<p class="govuk-body-l">“' + feedback + '”</p>');
            }
          });
        });

        // Display total responses and time period
        $.getJSON( datesURL ).done(function( data ) {
          var values = data.values,
              startFullDate = values[0],
              justStartDate = startFullDate.toString().slice(0, -6),
              reversedStartDate = convertDigitIn(justStartDate),
              formattedStartDate = moment(reversedStartDate).format('ddd D MMM YYYY'),
              responseLength = values.length-1,
              endFullDate = values[responseLength],
              justEndDate = endFullDate.toString().slice(0, -6),
              reversedEndDate = convertDigitIn(justEndDate),
              formattedEndDate = moment(reversedEndDate).format('ddd D MMM YYYY');

          $('#feedbackDateRange').html("<small>" + responseLength + " responses from " + formattedStartDate + " to " + formattedEndDate + "</small>");
        });

      });
    });
  </script>
{% endblock %}