Skip to content

Commit

Permalink
Your household interview led - USer journey up to hub
Browse files Browse the repository at this point in the history
  • Loading branch information
@saedwards
saedwards committed Dec 6, 2018
1 parent 2971a0d commit c305be4
Show file tree
Hide file tree
Showing 5 changed files with 376 additions and 27 deletions.
7 changes: 7 additions & 0 deletions _data/your-household-interview-led.yml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,3 +9,10 @@ navigationItemsHouseholdComplete:
state: complete
- label: Accommodation
state: incomplete

navigationItemsAccommodation:
- label: People in your household
state: complete
href: ../summary
- label: Accommodation
state: current
115 changes: 115 additions & 0 deletions _prototypes/your-household-interview-led/accommodation-kind.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,115 @@
---
title: Census Coverage Survey
project: your-household
globalcss: false
layout: eq-default-extras
cdn: v1.8.4
hideSaveLater: true
footer: minimal
---

<link rel="stylesheet" href="../style.css"/>
<div class="page__subheader">
<div class="container">
<a class="js-previous-link mars"
href="../does-anyone-else-live-here">Previous</a>
</div>
</div>

<div class="page__container container">
<div class="grid grid--reverse">
<div class="grid__col col-4@m">
{% include navigation.html
title="Your household"
items=site.data.your-household-interview-led.navigationItemsAccommodation
%}
</div>
<div class="grid__col col-7@m pull-1@m">
<main role="main" id="main" class="page__main">
<form name="trav" class="form qa-questionnaire-form" role="form"
autocomplete="off" novalidate="">
<input type="hidden" name="away-journeys"
value=""/>
<div class="group">
<div class="block">
<section class="section">
<div class="question u-mb-s"
id="total-retail-turnover-question">
<p class="mars"><strong class="card-number">3</strong>
Turn to card 3</p>

<h1 class="question__title saturn js-heading">
What kind of accommodation is/was
<span class="address-text"></span> on
<span class="js-significant-date"></span>
</h1>
</div>

<div class="answer__fields js-fields">
<div class="field field--radio field--multiplechoice ">
<fieldset class="u-mb-xl">
<div class="field__item js-focusable-box">
<input class="input input--radio js-focusable"
type="radio"
name="accommodation-kind"
id="whole-house"
value="yes">
<label class="label label--inline venus"
for="whole-house"
id="yes-someone-else-label">Whole house or bungalow
</label>
</div>

<div class="field__item js-focusable-box">
<input class="input input--radio js-focusable"
type="radio"
name="accommodation-kind"
id="flat"
value="flat">
<label class="label label--inline venus"
for="flat">Flat, maisonette
or apartment including
bedsits</label>
</div>

<div class="field__item js-focusable-box">
<input class="input input--radio js-focusable"
type="radio"
name="accommodation-kind"
id="caravan"
value="no">
<label class="label label--inline venus"
for="caravan">Caravan or
other mobile or temporary
structure</label>
</div>
</fieldset>
</div>
</div>
</section>
</div>
</div>
<button class="btn btn--primary btn--lg qa-btn-submit venus"
type="submit" name="">Save and continue
</button>
</form>
</main>
</div>
</div>
</div>

<script src='/js/compiled/your-household-interview-led/bundle.js'></script>

<div style="display:none">
<div id="question-list-item-template" class="field__item js-focusable-box">
<input class="input input--checkbox js-focusable js-exclusive-checkbox-group js-answer-field" name="away-type" value="" id="" type="checkbox" />
<label class="label label--inline venus js-answer-label"></label>
</div>
</div>

<script>
$('.qa-btn-submit').on('click', function (e) {
e.preventDefault();
window.location.href = '../hub';
});
</script>
251 changes: 251 additions & 0 deletions _prototypes/your-household-interview-led/hub.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,251 @@
---
title: Census Coverage Survey
project: your-household
globalcss: false
layout: eq-default-extras
cdn: v1.8.4
hideSaveLater: true
footer: minimal
---

<link rel="stylesheet" href="../style.css"/>
<div class="page__subheader">
</div>

<style>
.completed {
position: relative;
}

.completed::before {
z-index:2;
content:"";
background:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACIAAAAbCAYAAAAZMl2nAAAABGdBTUEAALGPC/xhBQAAAjtJREFUSA29l0FLW0EQx2f2NWDSQ196sFBELKFfwVMPNcmLFZV68eRFPBd6K4IexKT0IHjpqdDi0aMg5iCKUvDkqdBDQYiKIIJY0oO1wZhMd0L3+V6yz+TlrZ1DNjOzM/9f9u1uEoD/aH3Lk/EgORGUMB1/VHDeXf4u7z9ZyvXqeqMuaDqWLGTf1Ov0sdEX8UdMWJmLuc0zr869g9iL2RlC+gwEHi08eCB60j/nN04VjCepQuZGe9GZJqAvANS6BRBKIobp8uz2CSu2TjDEcScEaxCk6Jq+2h9eDbB7LyBtIVhZGgEMQLVaXKAFYfzRdArBIFL8EgWOlOe394yCdAvBUBa/NNvTT+MJa7B/rSf7/KyyUzpuzuv8KBDcr2WPMMTV+Z+i3O2jUKtt2O+Hh3TC3lhUCO7lezQuBNFLJYSAV2BZY7/mNndVzDuagOB+7oroIHiCXJkE1G+Kj/NOjn2vmYLgng2QIAglSgTxGtB6spAbVzGTENwTiQiTeWdLfvKMEgkcEaqAYgrr8DDwxmwq9h7RppTPFYhIKGgFEGu+jM4hiAHRqmkIlmoc38rO0fdE5llJfi+9ljF33+hY/uV9m1w3r9OVULXuPRISRtVrx7AQ3MQFYccETDcQLSBRYbqF0IJ0CxMFIhAkLExUiDtBOoUxAdEWxAdDOCF9qXtrpiC4o+/U3Er43/Fpig+lTuQ9zPdMA8YkBKt1BMITK7uH3xLp1Ln8eTdqGoL7hzY777yV/1NehC5sU/AXb484yamkz/AAAAAASUVORK5CYII=") no-repeat 50%;
background-size:1rem;
position:absolute;
left:9px;left:-1.5rem;
width:1.2em;
height:1.2em;
bottom:0;
top:0;
margin:auto;
}

.btn--primary[disabled] {
opacity: .5;
}
</style>

<div class="page__container container">
<div class="grid grid--reverse">
<div class="grid__col col-12@m">
<main role="main" id="main" class="page__main">
<form name="trav" class="form qa-questionnaire-form" role="form"
autocomplete="off" novalidate="">
<div class="group" id="rsi">
<div class="block" id="total-retail-turnover">
<section class="section"
id="total-retail-turnover-section">
<div class="question u-mb-s"
id="total-retail-turnover-question">
<h1 class="question__title saturn">
Survey progress
</h1>
</div>

<!--<div class="panel panel&#45;&#45;simple panel&#45;&#45;info"
id="question-guidance-everyone-at-address-confirmation-question">
<strong class="u-mb-s">You have completed
the section
<span class="address-text-line1"></span></strong>
<p class="mars">In order to submit this
survey you need to complete all of
the following sections</p>
</div>
<br />-->

<div class="summary u-mb-xl">
<div class="summary__block">
<div class="summary__item">
<div class="grid">
<div class="grid__col col-12@xs col-6@m">
<div
class="summary__question venus address-text-line1"></div>
</div>
<div
class="grid__col col-8@xs col-3@m">
<div
class="summary__answer mars completed">Completed</div>
</div>
<div
class="grid__col col-4@xs col-3@m">
<div class="summary__link mars">
<a
href="../summary" class="js-view-summary">View
answers
<span class="u-vh"></span>
</a>
</div>
</div>
</div>
</div>
<div id="household-member-surveys"></div>
</div>
</div>

<!--<p>You can submit this survey once all of
the sections are complete</p>-->
</section>
</div>
</div>
<button class="btn btn--primary btn--lg qa-btn-submit venus"
type="submit"
disabled="disabled">Submit survey
</button>
</form>
</main>
</div>
</div>
</div>

<ul style="display:none;">
<div id="person-survey-item-template" class="summary__item">
<div class="grid">
<div class="grid__col col-12@xs col-6@m">
<div
class="summary__question venus js-person-name"></div>
</div>
<div class="grid__col col-8@xs col-3@m">
<div
class="summary__answer mars js-survey-status">[Status
not found]</div>
</div>
<div class="grid__col col-4@xs col-3@m">
<div class="summary__link mars">
<a class="js-link"
href="#">Start section
</a>
</div>
</div>
</div>
</div>
</ul>

<script src='/js/compiled/your-household-v8/bundle.js'></script>

<script>
var storageAPI = window.ONS.storage,
urlParams = new URLSearchParams(window.location.search),
surveyType = urlParams.get('survey');

var statusMap = {
'not-started': {
label: 'Not started',
linkText: 'Start section',
},
'in-progress': {
label: 'In progress',
linkText: 'Continue with section'
},
'completed': {
label: 'Completed',
linkText: 'View answers'
},
'private': {
label: 'Responding individually',
linkText: null
}
};

var people = storageAPI.getAllHouseholdMembers()
.filter(storageAPI.isHouseholdMember)
.map(function (member) {
return member['@person'];
}),
peopleIdsToComplete = _.pluck(people, 'id');

var nextPageSurvey = surveyType ? '&survey=' + surveyType : '';

function updateIndividualSurveyList() {
$.each(people, function (i, person) {

var $nodeEl = $('#person-survey-item-template').clone(),
$surveyStatus = $nodeEl.find('.js-survey-status'),
personDetails = storageAPI.getPersonalDetailsFor(person.id),
personPin = storageAPI.getPinFor(person.id),
surveyStatus,
linkHref;

/**
* Set state
*/
if (personPin && personPin.exported) {
surveyStatus = 'private';
}
else if (!personDetails) {
surveyStatus = 'not-started';
}
else if (
personDetails.dob &&
personDetails.country &&
personDetails.orientation &&
personDetails.maritalStatus &&
personDetails.salary
) {
surveyStatus = 'completed';

window.ONS.utils.removeFromList(peopleIdsToComplete, person.id);
}
else {
surveyStatus = 'in-progress';
}

/**
* Link routing
*/
linkHref = surveyStatus === 'completed'
? '../individual-details-summary/'
: '../individual-intro/';

if (personPin && personPin.pin) {
linkHref = '../individual-pin-security/?returnurl=' + linkHref +
'&person=' + person.id;
}
else {
linkHref += '?person=' + person.id;
}

linkHref += nextPageSurvey;

/**
* Manipulate DOM fragment
*/
$nodeEl.attr('id', '');
$nodeEl.find('.js-person-name').html(person.fullName);
$nodeEl.find('.js-link').html(statusMap[surveyStatus].linkText);
$surveyStatus.html(statusMap[surveyStatus].label);

surveyStatus === 'private'
? $nodeEl.find('.js-link').hide()
: $nodeEl.find('.js-link').attr('href',linkHref);

(surveyStatus === 'completed' || surveyStatus === 'private')
&& $surveyStatus.addClass('completed');

$('#household-member-surveys').append($nodeEl);
});

if (peopleIdsToComplete.length === 0) {
$('.qa-btn-submit').attr('disabled', false);
}
}

function updateLinks () {
if (surveyType) {
$('.js-view-summary').attr('href', '../summary/?survey=' + surveyType);
}
}

$(updateIndividualSurveyList);
$(updateLinks);
</script>
Loading

0 comments on commit c305be4

Please sign in to comment.