Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Auto data session 4 #340

Merged
merged 13 commits into from
Apr 4, 2017
Merged

Auto data session 4 #340

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
8c3203d
add auto data store
joelanman Jan 10, 2017
b119452
add clear data link to docs app
joelanman Jan 11, 2017
474a6f8
only run autodata once, include JS in docs
joelanman Feb 17, 2017
0f4cae3
use 'data' hash in locals
joelanman Mar 27, 2017
49637a2
use new multiple-choice css, use hyphens in names
joelanman Mar 27, 2017
3fed845
store GET data
joelanman Apr 2, 2017
1df56c6
seperate guidance and example pages, added h1s
joelanman Apr 3, 2017
825b7a7
refactor checked function
joelanman Apr 3, 2017
de09e98
use list for vehicle features
joelanman Apr 3, 2017
1f0cea9
fix return to examples link
joelanman Apr 3, 2017
330b421
refactored docs
joelanman Apr 3, 2017
34ce07c
set cookie name and timeout, use crypto
joelanman Apr 4, 2017
047065a
de-duplicate forceHttps
joelanman Apr 4, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
26 changes: 26 additions & 0 deletions app/assets/javascripts/auto-store-data.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
/* global $ */
$('body').on('submit', 'form', function (e) {
// On form submit, add hidden inputs for checkboxes so the server knows if
// they've been unchecked. This means we can automatically store and update
// all form data on the server, including checkboxes that are checked, then
// later unchecked

var $checkboxes = $(this).find('input:checkbox')

var $inputs = []
var names = {}

$checkboxes.each(function () {
var $this = $(this)

if (!names[$this.attr('name')]) {
names[$this.attr('name')] = true
var $input = $('<input type="hidden">')
$input.attr('name', $this.attr('name'))
$input.attr('value', '_unchecked')
$inputs.push($input)
}
})

$(this).prepend($inputs)
})
3 changes: 3 additions & 0 deletions app/config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,9 @@ module.exports = {
// Enable or disable password protection on production
useAuth: 'true',

// Automatically stores form data, and send to all views
useAutoStoreData: 'true',

// Enable or disable built-in docs and examples.
useDocumentation: 'true',

Expand Down
4 changes: 4 additions & 0 deletions app/views/includes/scripts.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,3 +4,7 @@
<script src="/public/javascripts/govuk/shim-links-with-button-role.js"></script>
<script src="/public/javascripts/govuk/show-hide-content.js"></script>
<script src="/public/javascripts/application.js"></script>

{% if useAutoStoreData %}
<script src="/public/javascripts/auto-store-data.js"></script>
{% endif %}
10 changes: 10 additions & 0 deletions app/views/layout.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,16 @@
with-proposition
{% endblock %}

{% block footer_support_links %}
{% if useAutoStoreData %}
<ul>
<li>
<a href="/prototype-admin/clear-data">Clear data</a>
</li>
</ul>
{% endif %}
{% endblock %}

{% block body_end %}
{% include "includes/scripts.html" %}
<!-- GOV.UK Prototype kit {{releaseVersion}} -->
Expand Down
128 changes: 128 additions & 0 deletions docs/views/examples/pass-data/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,128 @@
{% extends "layout.html" %}

{% block page_title %}
Example - Passing data
{% endblock %}

{% block content %}
<main id="content" role="main">

{% include "includes/breadcrumb_examples.html" %}

<div class="grid-row">
<div class="column-two-thirds">

<h1 class="heading-xlarge">
Passing data from page to page
</h1>

<p>
You may want to use or display data a user has entered over a few screens. The kit automatically stores all data entered, so you can show it later.
</p>

<p>
To clear the data (for example at the end of a user research session) click the "Clear data" link in the footer.
</p>

<p>
<a href="/docs/examples/pass-data/vehicle-registration">You can see an example here.</a>
</p>

<p>
The code for the example is in this folder in the prototype kit:
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggest this be pulled out in to a section like the other examples below.

</p>

<pre>
<div class="code">
/docs/views/examples/pass-data

</div>
</pre>

<h2 class="heading-medium">How to use</h2>

<p>The kit stores data from inputs using the name attribute of the input.</p>

<p>For example, if you have this input:</p>

<pre>
<div class="code">
&lt;input name="first-name"&gt;

</div>
</pre>

<p>You can show what the user entered later on like this:</p>

<pre>
<div class="code">
&lt;p&gt;{%raw%}{{ data['first-name'] }}{%endraw%}&lt;/p&gt;

</div>
</pre>


<h3 class="heading-small">
Clearing data
</h3>

<p>
To clear the data (for example at the end of a user research session) click the "Clear data" link in the footer.
</p>

<h3 class="heading-small">
Showing answers in inputs
</h3>

<p>
If a user goes back to a page where they entered data, they would expect to see the answer they gave.
</p>

<p>For a text input:</p>
<pre>
<div class="code">
&lt;input name="first-name" value="{%raw%}{{ data['first-name'] }}{%endraw%}"&gt;

</div>
</pre>

<p>For a radio or checkbox input you need to use the 'checked' function:</p>
<pre>
<div class="code">
&lt;input type="radio" name="over-18" value="yes" {%raw%}{{ checked('over-18','yes') }}{%endraw%}&gt;

</div>
</pre>

<h2 class="heading-medium">Advanced features</h2>

<h3 class="heading-small">
Using the data on the server
</h3>

<p>You can access the data on the server in a route, for example for an input with name="first-name":</p>

<pre>
<div class="code">
var firstName = req.session.data['first-name']

</div>
</pre>

<h3 class="heading-small">
Ignoring inputs
</h3>

<p>To prevent an input being stored, use an underscore at the start of the name.</p>

<pre>
<div class="code">
&lt;input name="_secret"&gt;

</div>
</pre>

</div>
</div>
</main>
{% endblock %}
97 changes: 97 additions & 0 deletions docs/views/examples/pass-data/vehicle-check-answers.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,97 @@
{% extends "layout.html" %}

{% block page_title %}
Check your answers
{% endblock %}

{% block content %}

<main id="content" role="main">

<div class="grid-row">
<div class="column-two-thirds">
<h1 class="heading-large">
Check your answers before sending your application
</h1>

<div class="form-group">

<table class="check-your-answers">

<thead>
<tr>
<th colspan="2">
<h2 class="heading-medium">
Vehicle details
</h2>
</th>
<th>
</th>
</tr>
</thead>

<tbody>
<tr>
<td>
Registration number
</td>
<td>
{{data['vehicle-registration']}}
</td>
<td class="change-answer">
<a href="/docs/examples/pass-data/vehicle-registration">
Change <span class="visuallyhidden">registration number</span>
</a>
</td>
</tr>
<tr>
<td>
Vehicle type
</td>
<td>
{{data['vehicle-type']}}
</td>
<td class="change-answer">
<a href="/docs/examples/pass-data/vehicle-type">
Change <span class="visuallyhidden">vehicle type</span>
</a>
</td>
</tr>
<tr>
<td>
Vehicle features
</td>
<td>
<ul>
{% for feature in data['vehicle-features'] %}
<li>{{ feature }}</li>
{% else %}
<li>No features selected</li>
{% endfor %}
</ul>
</td>
<td class="change-answer">
<a href="/docs/examples/pass-data/vehicle-features">
Change <span class="visuallyhidden">vehicle features</span>
</a>
</td>
</tr>
</tbody>
</table>
</div>

<div class="form-group">
<p>
<a href="/docs/tutorials-and-examples">
Return to prototype kit examples
</a>
</p>
</div>

</div>

</div>

</main>

{% endblock %}
59 changes: 59 additions & 0 deletions docs/views/examples/pass-data/vehicle-features.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,59 @@
{% extends "layout.html" %}

{% block page_title %}
Example - Passing data
{% endblock %}

{% block content %}
<main id="content" role="main">

{% include "includes/breadcrumb_examples.html" %}

<div class="grid-row">
<div class="column-two-thirds">

<form action="/docs/examples/pass-data/vehicle-check-answers" method="post" class="form">

<h1 class="heading-medium">
Which of these applies to your vehicle?
</h1>

<div class="form-group">
<fieldset>

<legend class="visuallyhidden">
Which of these applies to your vehicle?
</legend>

<p>
Select all that apply
</p>

<div class="multiple-choice">
<input id="vehicle-feature-heated-seats" name="vehicle-features" type="checkbox" value="Heated seats" {{ checked("vehicle-features", "Heated seats") }}>
<label for="vehicle-feature-heated-seats">Heated seats</label>
</div>

<div class="multiple-choice">
<input id="vehicle-feature-gps" name="vehicle-features" type="checkbox" value="GPS" {{ checked("vehicle-features", "GPS") }}>
<label for="vehicle-feature-gps">GPS</label>
</div>

<div class="multiple-choice">
<input id="vehicle-feature-radio" name="vehicle-features" type="checkbox" value="Radio" {{ checked("vehicle-features", "Radio") }}>
<label for="vehicle-feature-radio">Radio</label>
</div>

</fieldset>
</div>

<div class="form-group">
<input type="submit" class="button" value="Continue">
</div>

</form>

</div>
</div>
</main>
{% endblock %}
43 changes: 43 additions & 0 deletions docs/views/examples/pass-data/vehicle-registration.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,43 @@
{% extends "layout.html" %}

{% block page_title %}
Example - Passing data
{% endblock %}

{% block content %}
<main id="content" role="main">

{% include "includes/breadcrumb_examples.html" %}

<div class="grid-row">
<div class="column-two-thirds">

<form action="/docs/examples/pass-data/vehicle-type" method="post" class="form">

<h1 class="heading-medium">
What is your vehicle registration number?
</h1>

<div class="form-group">
<fieldset>

<legend class="visuallyhidden">
What is your vehicle registration number?
</legend>

<label class="visually-hidden" for="registration-number">Vehicle registration number</label>
<input class="form-control" id="registration-number" name="vehicle-registration" type="text" value="{{data['vehicle-registration']}}">

</fieldset>
</div>

<div class="form-group">
<input type="submit" class="button" value="Continue">
</div>

</form>

</div>
</div>
</main>
{% endblock %}
Loading