Skip to content

Instantly share code, notes, and snippets.

@charge-valtech
Created March 9, 2019 19:27
Show Gist options
  • Save charge-valtech/a0435e8c860261283b0d62a08e46fdf1 to your computer and use it in GitHub Desktop.
Save charge-valtech/a0435e8c860261283b0d62a08e46fdf1 to your computer and use it in GitHub Desktop.
The citizen feedback page
{% 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 %}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment