-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Add long list checkboxes prototype (#4)
- Loading branch information
Showing
29 changed files
with
3,986 additions
and
1 deletion.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -8,6 +8,6 @@ lib/extensions/_extensions.scss | |
| .start.pid | ||
| .port.tmp | ||
| public | ||
| node_modules/* | ||
| node_modules | ||
| .tmuxp.* | ||
| .idea/ | ||
104 changes: 104 additions & 0 deletions
104
app/views/features/long-list-checkboxes/calculated-summary.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,104 @@ | ||
| {% extends "../includes/layout.html" %} | ||
|
|
||
| {% set prevPage = "hub-complete" %} | ||
| {% set form = { | ||
| "method": "GET", | ||
| "attributes": { | ||
| "action": pageInfo.rootPath + "/summary.html" | ||
| } | ||
| } %} | ||
|
|
||
| {% block preMain %} | ||
| {% from "components/breadcrumbs/_macro.njk" import onsBreadcrumbs %} | ||
|
|
||
| {{ | ||
| onsBreadcrumbs({ | ||
| "ariaLabel": 'Previous', | ||
| "itemsList": [ | ||
| { | ||
| "url": '/features/long-list-checkboxes/hub-complete.html', | ||
| "id": "backlink", | ||
| "text": 'Previous', | ||
| "attributes": { | ||
| "data-attribute": "Example attribute" | ||
| } | ||
| } | ||
| ] | ||
| }) | ||
| }} | ||
|
|
||
| {% endblock %} | ||
|
|
||
| {% block main %} | ||
|
|
||
| <script> | ||
| // Step 1: Retrieve the stored string from localStorage | ||
| const storedValue = localStorage.getItem('ddvalue'); | ||
|
|
||
| // Step 2: Parse the string into a JavaScript object | ||
| const parsedValue = JSON.parse(storedValue); | ||
|
|
||
| // Calculate the sum of parsedValue[i][1] | ||
| let grandTotal = 0; | ||
| for (var i = 0; i < parsedValue.length; i++) { | ||
| grandTotal += parseFloat(parsedValue[i][1]) || 0; // Convert to float and handle NaN | ||
| } | ||
|
|
||
| document.write(`<div class="ons-summary"> | ||
| <div class="ons-summary__group"> | ||
| <h2 class="ons-summary__group-title">We calculate the total expenditure to be £${grandTotal}. Is this correct?</h2> | ||
| <div class="ons-summary__items">`); | ||
|
|
||
| for (var i = 0; i < parsedValue.length; i++) { | ||
| const itemName = parsedValue[i][0]; | ||
| const itemValue = parsedValue[i][1]; | ||
|
|
||
| document.write(` | ||
| <div class="ons-summary__item"> | ||
| <dl class="ons-summary__row ons-summary__row--has-values"> | ||
| <dt class="ons-summary__item-title"> | ||
| <div class="ons-summary__item--text">${itemName}</div> | ||
| </dt> | ||
| <dd class="ons-summary__values"> | ||
| <span class="ons-summary__text">£${itemValue}</span> | ||
| </dd> | ||
| <dd class="ons-summary__actions"> | ||
| <a href="#" class="ons-summary__button" onclick="changeLink(${i})">Change<span class="ons-u-vh">answer for ${itemName}</span></a> | ||
| </dd> | ||
| </dl> | ||
| </div>`); | ||
| } | ||
|
|
||
| document.write(`<div class="ons-summary__item ons-summary__item--total"> | ||
| <dl class="ons-summary__row ons-summary__row--has-values"> | ||
| <dt class="ons-summary__item-title"> | ||
| <div class="ons-summary__item--text">Grand total</div> | ||
| </dt> | ||
| <dd class="ons-summary__values ons-summary__values--2"> | ||
| <span class="ons-summary__text">£${grandTotal}</span> | ||
| </dd> | ||
| </dl> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div>`); | ||
| </script> | ||
| {% from "components/button/_macro.njk" import onsButton %} | ||
| {{ | ||
| onsButton({ | ||
| "text": 'Yes, I confirm this is correct', | ||
| "classes": 'ons-u-mb-m ons-u-mt-l' | ||
| }) | ||
| }} | ||
|
|
||
| <script> | ||
| function changeLink(index) { | ||
| // Store the clicked index in localStorage | ||
| localStorage.setItem('changeLink', index); | ||
|
|
||
| // Redirect to "question.html" | ||
| window.location.href = 'question.html'; | ||
| } | ||
| </script> | ||
|
|
||
| {% endblock %} |
126 changes: 126 additions & 0 deletions
126
app/views/features/long-list-checkboxes/categories/index.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,126 @@ | ||
| {% extends "../includes/layout.html" %} | ||
|
|
||
| {% set prevPage = "index" %} | ||
| {% set form = { | ||
| "method": "GET", | ||
| "attributes": { | ||
| "action": "/features/long-list-checkboxes/hub.html" | ||
| } | ||
| } %} | ||
|
|
||
| {% block preMain %} | ||
| {% from "components/breadcrumbs/_macro.njk" import onsBreadcrumbs %} | ||
|
|
||
| {{ | ||
| onsBreadcrumbs({ | ||
| "ariaLabel": 'Previous', | ||
| "itemsList": [ | ||
| { | ||
| "url": '/', | ||
| "id": "backlink", | ||
| "text": 'Previous', | ||
| "attributes": { | ||
| "data-attribute": "Example attribute" | ||
| } | ||
| } | ||
| ] | ||
| }) | ||
| }} | ||
|
|
||
| {% endblock %} | ||
|
|
||
| {% block main %} | ||
|
|
||
|
|
||
| {% from "components/question/_macro.njk" import onsQuestion %} | ||
| {% from "components/checkboxes/_macro.njk" import onsCheckboxes %} | ||
| {% from "components/button/_macro.njk" import onsButton %} | ||
|
|
||
|
|
||
| {% call onsQuestion({ | ||
| "title": "Which categories of goods or services have you purchased during the last month?", | ||
| "legendIsQuestionTitle": true, | ||
| "classes": "ons-u-mt-no" | ||
| }) %} | ||
| {{ | ||
| onsCheckboxes({ | ||
| "checkboxesLabel": "Select all that apply", | ||
| "dontWrap": true, | ||
| "name": "services", | ||
| "checkboxes": [ | ||
| { | ||
| "id": "1", | ||
| "name":"inputCheck", | ||
| "label": { | ||
| "text": "Home furnishings and decor" | ||
| }, | ||
| "value": "Home furnishings and decor" | ||
| }, | ||
| { | ||
| "id": "2", | ||
| "name":"inputCheck", | ||
| "label": { | ||
| "text": "Outdoor living and leisure" | ||
| }, | ||
| "value": "Outdoor living and leisure" | ||
| }, | ||
| { | ||
| "id": "3", | ||
| "name":"inputCheck", | ||
| "label": { | ||
| "text": "Home electronics and entertainment" | ||
| }, | ||
| "value": "Home electronics and entertainment" | ||
| }, | ||
| { | ||
| "id": "4", | ||
| "name":"inputCheck", | ||
| "label": { | ||
| "text": "Apparel, accessories, and safety gear" | ||
| }, | ||
| "value": "Apparel, accessories, and safety gear" | ||
| }, | ||
| { | ||
| "id": "5", | ||
| "name":"inputCheck", | ||
| "label": { | ||
| "text": "Real estate and housing costs" | ||
| }, | ||
| "value": "Real estate and housing costs" | ||
| }, | ||
| { | ||
| "id": "6", | ||
| "name":"inputCheck", | ||
| "label": { | ||
| "text": "DIY tools and equipment" | ||
| }, | ||
| "value": "DIY tools and equipment" | ||
| }, | ||
| { | ||
| "id": "7", | ||
| "name":"inputCheck", | ||
| "label": { | ||
| "text": "Electric mobility" | ||
| }, | ||
| "value": "Electric mobility" | ||
| } | ||
| ] | ||
| }) | ||
| }} | ||
| {% endcall %} | ||
|
|
||
| <button type="submit" class="ons-btn" onclick="printChecked()"/> | ||
| <span class="ons-btn__inner"><span class="ons-btn__text">Save and continue</span> | ||
| </span> | ||
| </button> | ||
|
|
||
| {% endblock %} | ||
|
|
||
| {% block scripts %} | ||
| <script> | ||
|
|
||
| </script> | ||
|
|
||
|
|
||
|
|
||
| {% endblock %} |
126 changes: 126 additions & 0 deletions
126
app/views/features/long-list-checkboxes/categories/list.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,126 @@ | ||
| {% extends "../includes/layout.html" %} | ||
|
|
||
| {% set prevPage = "index" %} | ||
| {% set form = { | ||
| "method": "GET", | ||
| "attributes": { | ||
| "action": "/features/long-list-checkboxes/hub.html" | ||
| } | ||
| } %} | ||
|
|
||
| {% block preMain %} | ||
| {% from "components/breadcrumbs/_macro.njk" import onsBreadcrumbs %} | ||
|
|
||
| {{ | ||
| onsBreadcrumbs({ | ||
| "ariaLabel": 'Previous', | ||
| "itemsList": [ | ||
| { | ||
| "url": '/', | ||
| "id": "backlink", | ||
| "text": 'Previous', | ||
| "attributes": { | ||
| "data-attribute": "Example attribute" | ||
| } | ||
| } | ||
| ] | ||
| }) | ||
| }} | ||
|
|
||
| {% endblock %} | ||
|
|
||
| {% block main %} | ||
|
|
||
|
|
||
| {% from "components/question/_macro.njk" import onsQuestion %} | ||
| {% from "components/checkboxes/_macro.njk" import onsCheckboxes %} | ||
| {% from "components/button/_macro.njk" import onsButton %} | ||
|
|
||
|
|
||
| {% call onsQuestion({ | ||
| "title": "Which categories of goods or services have you purchased during the last month?", | ||
| "legendIsQuestionTitle": true, | ||
| "classes": "ons-u-mt-no" | ||
| }) %} | ||
| {{ | ||
| onsCheckboxes({ | ||
| "checkboxesLabel": "Select all that apply", | ||
| "dontWrap": true, | ||
| "name": "services", | ||
| "checkboxes": [ | ||
| { | ||
| "id": "1", | ||
| "name":"inputCheck", | ||
| "label": { | ||
| "text": "Home furnishings and decor" | ||
| }, | ||
| "value": "Home furnishings and decor" | ||
| }, | ||
| { | ||
| "id": "2", | ||
| "name":"inputCheck", | ||
| "label": { | ||
| "text": "Outdoor living and leisure" | ||
| }, | ||
| "value": "Outdoor living and leisure" | ||
| }, | ||
| { | ||
| "id": "3", | ||
| "name":"inputCheck", | ||
| "label": { | ||
| "text": "Home electronics and entertainment" | ||
| }, | ||
| "value": "Home electronics and entertainment" | ||
| }, | ||
| { | ||
| "id": "4", | ||
| "name":"inputCheck", | ||
| "label": { | ||
| "text": "Apparel, accessories, and safety gear" | ||
| }, | ||
| "value": "Apparel, accessories, and safety gear" | ||
| }, | ||
| { | ||
| "id": "5", | ||
| "name":"inputCheck", | ||
| "label": { | ||
| "text": "Real estate and housing costs" | ||
| }, | ||
| "value": "Real estate and housing costs" | ||
| }, | ||
| { | ||
| "id": "6", | ||
| "name":"inputCheck", | ||
| "label": { | ||
| "text": "DIY tools and equipment" | ||
| }, | ||
| "value": "DIY tools and equipment" | ||
| }, | ||
| { | ||
| "id": "7", | ||
| "name":"inputCheck", | ||
| "label": { | ||
| "text": "Electric mobility" | ||
| }, | ||
| "value": "Electric mobility" | ||
| } | ||
| ] | ||
| }) | ||
| }} | ||
| {% endcall %} | ||
|
|
||
| <button type="submit" class="ons-btn" onclick="printChecked()"/> | ||
| <span class="ons-btn__inner"><span class="ons-btn__text">Save and continue</span> | ||
| </span> | ||
| </button> | ||
|
|
||
| {% endblock %} | ||
|
|
||
| {% block scripts %} | ||
| <script> | ||
|
|
||
| </script> | ||
|
|
||
|
|
||
|
|
||
| {% endblock %} |
Oops, something went wrong.