From deeb273f103c96197a9a5f9b6bdf9e08ba9e207e Mon Sep 17 00:00:00 2001 From: Matsuuu Date: Sun, 22 Mar 2020 11:16:47 +0200 Subject: [PATCH] Feat: New quickly hacked together front end for the questionnaire --- app/src/app/views/fevermap-data-entry.js | 291 ++++++++++++------ .../styles/views/fevermap-data-entry.scss | 186 ++++++++++- 2 files changed, 379 insertions(+), 98 deletions(-) diff --git a/app/src/app/views/fevermap-data-entry.js b/app/src/app/views/fevermap-data-entry.js index af2af7d..aa65762 100644 --- a/app/src/app/views/fevermap-data-entry.js +++ b/app/src/app/views/fevermap-data-entry.js @@ -1,4 +1,4 @@ -import { LitElement, html, css } from 'lit-element'; +import { LitElement, html, css, unsafeCSS } from 'lit-element'; import { MDCSlider } from '@material/slider'; import { MDCCheckbox } from '@material/checkbox/component'; import maleIcon from 'src/assets/images/male.svg'; @@ -35,11 +35,13 @@ class FevermapDataEntry extends LitElement { selectedCountryIndex: { type: Number }, errorMessage: { type: String }, - }; - } - static get styles() { - return []; + currentQuestion: { type: Number }, + questionCount: { type: Number }, + + yearOfBirth: { type: Number }, + symptoms: { type: Array }, + }; } constructor() { @@ -83,13 +85,18 @@ class FevermapDataEntry extends LitElement { this.previousSubmissions = []; this.hasQueuedEntries = false; this.queuedEntries = []; + + this.currentQuestion = 1; + this.questionCount = this.firstTimeSubmitting ? 4 : 3; + this.symptoms = []; } firstUpdated(_changedProperties) { - this.initializeComponents(); - this.getGeoLocationInfo(); + /*this.initializeComponents(); this.getPreviousSubmissionsFromIndexedDb(); - this.getQueuedEntriesFromIndexedDb(); + this.getQueuedEntriesFromIndexedDb();*/ + this.initSlider(); + this.getGeoLocationInfo(); } createCountrySelectOptions() { @@ -195,11 +202,10 @@ class FevermapDataEntry extends LitElement { } initSlider() { - const slider = new MDCSlider(this.querySelector('.mdc-slider')); - slider.listen('MDCSlider:input', () => { - this.feverAmount = slider.value.toFixed(1); + this.querySelector('#temperature-meter').addEventListener('input', e => { + console.log(e); + this.feverAmount = e.target.value; }); - return slider; } async handleSubmit() { @@ -351,7 +357,156 @@ class FevermapDataEntry extends LitElement { SnackBar.success(Translator.get('system_messages.success.location_update')); } + moveToFeverQuestions() { + let carouselWrapper = this.querySelector('.fevermap-data-entry-content'); + let targetElem = this.querySelector('.fevermap-fever-questions'); + let target = targetElem.offsetLeft * 0.925; + + this.yearOfBirth = this.querySelector('#birth-year').getValue(); + this.smoothScroll(carouselWrapper, target); + } + + moveToOtherSymptomps(tempNotKnown) { + let carouselWrapper = this.querySelector('.fevermap-data-entry-content'); + let targetElem = this.querySelector('.fevermap-other-symptoms-questions'); + let target = targetElem.offsetLeft * 0.96; + + this.smoothScroll(carouselWrapper, target); + } + + moveToLocation() { + let carouselWrapper = this.querySelector('.fevermap-data-entry-content'); + let targetElem = this.querySelector('.fevermap-location-questions'); + let target = targetElem.offsetLeft * 0.975; + + this.smoothScroll(carouselWrapper, target); + } + + smoothScroll(div, target) { + (function smoothScroll() { + if (div.scrollLeft >= target) return; + div.scrollLeft += 10; + setTimeout(smoothScroll, 10); + })(); + } + + handleSymptomAdd(e) { + let target = e.target; + if (e.target.nodeName === 'P') { + target = target.parentNode; + } + if (this.symptoms.includes(e.target.id)) { + this.symptoms.splice(this.symptoms.indexOf(e.target.id), 1); + target.classList.remove('symptom--selected'); + } else { + this.symptoms.push(e.target.id); + target.classList.add('symptom--selected'); + } + } + render() { + return html` +
+
+
+ ${this.renderQuestions()} +
+
+
+ `; + } + + renderQuestions() { + return html` + ${this.questionCount === 4 + ? html` +
+

New Entry

+

As this is your first time, we'll ask you a few questions first.

+ ${this.getYearOfBirthInput()} ${this.getGenderInput()} +
+ +
+
+ ` + : ''} +
+

New Entry

+

What's your temperature?

+ ${this.getFeverMeter()} + +
+ +
+
+
+

New Entry

+

Other symptoms?

+

Choose all that apply

+
+
+

Difficulty to breathe

+
+
+

Cough

+
+
+

Sore throat

+
+
+

Muscular pain

+
+
+ +
+
+ +
+ + + +
+
+
+
+ +
+
+ +
+
+
+

New Entry

+

What's your location?

+ ${this.getGeoLocationInput()} +
+ `; + } + + /*render() { return html`
@@ -406,90 +561,32 @@ class FevermapDataEntry extends LitElement { ` : ''} `; - } + }*/ getFeverMeter() { return html`
-

${Translator.get('entry.questions.do_you_have_fever')}

-
-
-

${Translator.get('entry.questions.no')}

-
-
-

${Translator.get('entry.questions.yes')}

-
-
- ${ - this.hasFever - ? html`
-

${Translator.get('entry.questions.how_much')}

-
-
-
-
-
-
-
- -
- - - -
-
+
+
-

- ${Translator.get('entry.questions.degrees_of_fever', { - degrees: this.getFeverWithUnit(), - })} - (${this.getFeverWithUnit(true)}) -

+
+

${this.getFeverWithUnit()}

+

${this.getFeverWithUnit(true)}

+
-
- -
- - - -
-
-
-
- - +

${Translator.get( + 'entry.questions.not_measured' + )}

- ` - : '' - }
`; @@ -500,7 +597,7 @@ class FevermapDataEntry extends LitElement {

${Translator.get('entry.questions.birth_year')}

-

${Translator.get('entry.questions.location_information')}

- -

- ${Translator.get('entry.questions.location_determination_subtitle')} -

${Translator.get('entry.questions.location_change_subtitle')}

@@ -585,6 +671,15 @@ class FevermapDataEntry extends LitElement { ${Translator.get('entry.questions.use_gps')}
+ +
+ +
`; } @@ -608,7 +703,7 @@ class FevermapDataEntry extends LitElement {
`; } - + /* getPreviousSubmissionsSummary() { return html`
@@ -634,6 +729,8 @@ class FevermapDataEntry extends LitElement {
`; } + + */ createRenderRoot() { return this; diff --git a/app/src/assets/styles/views/fevermap-data-entry.scss b/app/src/assets/styles/views/fevermap-data-entry.scss index 6d2fb7e..7e1f08b 100644 --- a/app/src/assets/styles/views/fevermap-data-entry.scss +++ b/app/src/assets/styles/views/fevermap-data-entry.scss @@ -1,5 +1,9 @@ @use "~@material/button/mixins"; +.container { + margin-bottom: 1rem; +} + .fevermap-data-entry-content { margin: 3rem 30% 10%; height: 100%; @@ -241,14 +245,194 @@ p.mdc-theme--error { } } } +/* new styles */ +.fevermap-data-entry-content { + min-height: 75vh; + max-width: 100%; + overflow-x: hidden; + padding: 4rem 2rem 2rem; + margin: 0; +} .first-entry-disclaimer { color: #ed143d; } + +.fevermap-entry-carousel { + min-height: inherit; + display: flex; + flex-direction: row; + justify-content: space-between; + padding-right: 4rem; + + &--full-width { + width: calc(100vw * 4.15); + } + + &--smaller-width { + width: calc(100vw * 3.15); + } + + .fevermap-entry-window { + width: calc(85vw - 4rem); + border-radius: 25px; + display: flex; + align-items: center; + flex-direction: column; + padding: 1rem 2rem 0; + + .entry-field { + width: 100%; + } + + .subtitle { + color: #8e8e8e; + } + + h2 { + font-weight: 400; + } + + .proceed-button { + text-align:center; + margin-top: 2rem; + .mdc-button { + background: cornflowerblue; + } + } + } +} + +.fever-slider { + display: flex; + align-items: center; + justify-content: center; + .fever-slider-element { + input { + writing-mode: bt-lr; /* IE */ + -webkit-appearance: slider-vertical; /* WebKit */ + width: 8px; + height: 175px; + padding: 0 5px; + } + } +} + +.temperature-title { + font-size: 1.2rem; + margin: 0 0 2rem; +} + +.symptoms-title { + margin: 0 0 1rem 0; + font-size: 1.2rem; +} + +.fever-amount-display { + display: flex; + flex-direction: row; + justify-content: space-around; + p { + padding: 0.5rem; + font-size: 1.4rem; + border-radius: 5px; + } +} + +.fever-not-measured-field { + width: 100%; + display: flex; + align-items: center; + justify-content: center; + p { + text-decoration: underline; + margin: 0; + } +} + +.symptom-holder { + display: flex; + flex-direction: column; + justify-content: space-between; + width: 100%; + margin-top: 2rem; + .symptom { + width: 90%; + display: flex; + align-items: center; + border-radius: 10px; + border: 2px solid #25a2b1; + padding: 0.5rem; + margin-bottom: 1rem; + + &--selected { + background: #25a2b166; + } + p { + margin: 0; + } + } +} + +label { + font-size: 0.9rem; +} + + +input[type=range]::-webkit-slider-runnable-track { + width: 100%; + height: 8.4px; + cursor: pointer; + box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d; + background: linear-gradient(45deg, #03A9F4, #F44336); + border-radius: 10px; + border: 0.2px solid #010101; +} + +input[type=range]:focus::-webkit-slider-runnable-track { + background: linear-gradient(45deg, #03A9F4, #F44336); +} + +input[type=range]::-moz-range-track { + width: 100%; + height: 8.4px; + cursor: pointer; + box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d; + background: linear-gradient(45deg, #03A9F4, #F44336); + border-radius: 10px; + border: 0.2px solid #010101; +} + +input[type=range]::-ms-track { + width: 100%; + height: 8.4px; + cursor: pointer; + background: transparent; + border-color: transparent; + border-width: 16px 0; + color: transparent; +} +input[type=range]::-ms-fill-lower { + background: linear-gradient(45deg, #03A9F4, #F44336); + border: 0.2px solid #010101; + border-radius: 10px; + box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d; +} +input[type=range]:focus::-ms-fill-lower { + background: linear-gradient(45deg, #03A9F4, #F44336); +} +input[type=range]::-ms-fill-upper { + background: linear-gradient(45deg, #03A9F4, #F44336); + border: 0.2px solid #010101; + border-radius: 10px; + box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d; +} +input[type=range]:focus::-ms-fill-upper { + background: linear-gradient(45deg, #03A9F4, #F44336); +} @media only screen and (max-width: 780px) { .fevermap-data-entry-content { - margin: 3rem 5%; } } \ No newline at end of file -- GitLab