From d8533b7e8faf413f8a1c7f7ef595d6a5db2537c7 Mon Sep 17 00:00:00 2001 From: patte Date: Wed, 19 Feb 2020 23:00:18 +0100 Subject: [PATCH 01/12] question groups --- src/components/Question.js | 6 +-- src/components/Questionnaire.js | 83 ++++++++++++++++++++++++++------- test/article.md | 2 +- 3 files changed, 71 insertions(+), 20 deletions(-) diff --git a/src/components/Question.js b/src/components/Question.js index 324312b..1b1673e 100644 --- a/src/components/Question.js +++ b/src/components/Question.js @@ -16,7 +16,7 @@ import Chart from './Chart' const styles = { container: css({ - margin: '50px 0 10px 0' + paddingBottom: 50 }), question: css({ margin: '0px 0 10px 0', @@ -71,8 +71,8 @@ class ChoiceQuestion extends Component { } const { questionnaire, question: { id, text, userAnswer, options, results } } = this.props - const { question } = this.props - const { userHasSubmitted } = questionnaire + const { question, style } = this.props + const { userHasSubmitted } = questionnaire return (
diff --git a/src/components/Questionnaire.js b/src/components/Questionnaire.js index 28c533d..3678369 100644 --- a/src/components/Questionnaire.js +++ b/src/components/Questionnaire.js @@ -30,10 +30,15 @@ import Question from './Question' const { P } = Interaction const { Note } = Editorial +const HEADER_HEIGHT = 60 +const HEADER_HEIGHT_MOBILE = 45 + const styles = { + container: css({ + margin: '50px 0 10px 0' + }), count: css({ background: '#fff', - zIndex: 10, borderTop: `0.5px solid ${colors.divider}`, minHeight: 25 }), @@ -54,8 +59,16 @@ const styles = { textAlign: 'center', margin: '40px 0' - }) - + }), + group: css({ + background: '#fff', + zIndex: 10, + position: 'sticky', + top: HEADER_HEIGHT - 1, + [mediaQueries.onlyS]: { + top: HEADER_HEIGHT_MOBILE - 1 + }, + }), } class Page extends Component { @@ -123,22 +136,58 @@ class Page extends Component { const questionCount = questions.filter(Boolean).length const userAnswerCount = questions.map(q => q.userAnswer).filter(Boolean).length + const elementForQuestion = q => + React.createElement( + Question, + { + onChange: this.createHandleChange(q), + questionnaire, + question: q, + key: q.id + } + ) + + // rolls questions into groups. The last question of a group is left outside + // for nicer sticky behaviour + const items = [] + let group + questions.forEach( (q, index) => { + const groupText = q.metadata && q.metadata.group + const nextQuestion = questions[index+1] + const nextHasGroup = nextQuestion && nextQuestion.metadata && nextQuestion.metadata.group + const isLast = index === questions.length - 1 + if (groupText) { + group = { + text: groupText, + questions: [], + __typename: 'QuestionGroup' + } + items.push(group) + } + if (group && !nextHasGroup && !isLast) { + group.questions.push(q) + } else { + items.push(q) + } + }) + return ( -
+
{ - questions - //.slice(0, userHasSubmitted ? questionCount : userAnswerCount + 1) - .map(q => - React.createElement( - Question, - { - onChange: this.createHandleChange(q), - questionnaire, - question: q, - key: q.id - } + items.map((i, index) => { + if (i.__typename === 'QuestionGroup') { + return ( +
+

{i.text}

+ { + i.questions.map(q => elementForQuestion(q)) + } +
) - ) + } else { + return elementForQuestion(i) + } + }) }
{ error && @@ -241,10 +290,12 @@ query getQuestionnaire($slug: String!) { id order text + metadata userAnswer { id payload } + __typename } ... on QuestionTypeChoice { cardinality diff --git a/test/article.md b/test/article.md index 8f3e8cd..9aa808f 100755 --- a/test/article.md +++ b/test/article.md @@ -22,7 +22,7 @@ Was möchten Sie Fragen? { "autoHtml": false, "props": { - "slug": "mss-vaterschaftsurlaub" + "slug": "mss-demokratie" }, "src": "https://cdn.republik.space/s3/republik-assets/dynamic-components/questionnaire-dn/index.js" } From d6c7aaf100de2ddad7693def3c188b2e34768951 Mon Sep 17 00:00:00 2001 From: patte Date: Wed, 19 Feb 2020 23:01:02 +0100 Subject: [PATCH 02/12] rename questionnaire-dn -> questionnaire --- README.md | 2 +- package.json | 10 +++++----- test/article.md | 2 +- 3 files changed, 7 insertions(+), 7 deletions(-) diff --git a/README.md b/README.md index 0b74316..4012b47 100755 --- a/README.md +++ b/README.md @@ -39,7 +39,7 @@ npm run deploy Goto https://app.keycdn.com/zones/purgeurl/87880 and enter: ``` -/s3/republik-assets/dynamic-components/questionnaire-dn/index.js +/s3/republik-assets/dynamic-components/questionnaire/index.js ``` If you change asset files be sure to purge those too. diff --git a/package.json b/package.json index 9fe93ec..0469fab 100755 --- a/package.json +++ b/package.json @@ -1,5 +1,5 @@ { - "name": "questionnaire-dn", + "name": "questionnaire", "version": "0.0.1", "description": "use a questionnaire inline", "main": "index.js", @@ -11,18 +11,18 @@ "now-build": "NODE_ENV=production rollup -c && cd test && next build", "heroku-postbuild": "NODE_ENV=production rollup -c && cd test && next build", "start": "NODE_ENV=production cd test && node server.js", - "deploy": "s3cmd sync --exclude '.DS_Store' --verbose --acl-public build/ s3://republik-assets/dynamic-components/questionnaire-dn/" + "deploy": "s3cmd sync --exclude '.DS_Store' --verbose --acl-public build/ s3://republik-assets/dynamic-components/questionnaire/" }, "repository": { "type": "git", - "url": "git+https://github.com/orbiting/questionnaire-dn.git" + "url": "git+https://github.com/orbiting/questionnaire.git" }, "author": "", "license": "BSD-3-Clause", "bugs": { - "url": "https://github.com/orbiting/questionnaire-dn/issues" + "url": "https://github.com/orbiting/questionnaire/issues" }, - "homepage": "https://github.com/orbiting/questionnaire-dn#readme", + "homepage": "https://github.com/orbiting/questionnaire#readme", "devDependencies": { "@babel/core": "^7.0.0-beta.51", "@babel/preset-env": "^7.0.0-beta.51", diff --git a/test/article.md b/test/article.md index 9aa808f..00426bc 100755 --- a/test/article.md +++ b/test/article.md @@ -24,7 +24,7 @@ Was möchten Sie Fragen? "props": { "slug": "mss-demokratie" }, - "src": "https://cdn.republik.space/s3/republik-assets/dynamic-components/questionnaire-dn/index.js" + "src": "https://cdn.republik.space/s3/republik-assets/dynamic-components/questionnaire/index.js" } ``` From 5ae2c15154361b22adf030c668c4aa44771c058b Mon Sep 17 00:00:00 2001 From: patte Date: Wed, 19 Feb 2020 23:02:27 +0100 Subject: [PATCH 03/12] cleanup --- src/components/Question.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Question.js b/src/components/Question.js index 1b1673e..0db98a0 100644 --- a/src/components/Question.js +++ b/src/components/Question.js @@ -71,7 +71,7 @@ class ChoiceQuestion extends Component { } const { questionnaire, question: { id, text, userAnswer, options, results } } = this.props - const { question, style } = this.props + const { question } = this.props const { userHasSubmitted } = questionnaire return ( From 1d49972c327b5278efb443f9ecdd69a8e1d2b3f5 Mon Sep 17 00:00:00 2001 From: patte Date: Thu, 20 Feb 2020 01:26:29 +0100 Subject: [PATCH 04/12] colors prop --- src/components/Chart.js | 9 ++++++--- src/components/Question.js | 4 ++-- src/components/Questionnaire.js | 5 +++-- test/article.md | 3 ++- 4 files changed, 13 insertions(+), 8 deletions(-) diff --git a/src/components/Chart.js b/src/components/Chart.js index 67a0f36..947e3c1 100644 --- a/src/components/Chart.js +++ b/src/components/Chart.js @@ -69,7 +69,7 @@ const styles = { class Chart extends Component { render () { - const { question } = this.props + const { question, colors = [] } = this.props if (!question || !question.results) { return } @@ -87,6 +87,9 @@ class Chart extends Component { const truePercent = getPercentage(trueResult) const falsePercent = getPercentage(falseResult) + const trueColor = colors.find(c => c.value) + const falseColor = colors.find(c => !c.value) + return (
@@ -97,7 +100,7 @@ class Chart extends Component {
@@ -113,7 +116,7 @@ class Chart extends Component {
diff --git a/src/components/Question.js b/src/components/Question.js index 0db98a0..6a83666 100644 --- a/src/components/Question.js +++ b/src/components/Question.js @@ -71,7 +71,7 @@ class ChoiceQuestion extends Component { } const { questionnaire, question: { id, text, userAnswer, options, results } } = this.props - const { question } = this.props + const { question, colors } = this.props const { userHasSubmitted } = questionnaire return ( @@ -80,7 +80,7 @@ class ChoiceQuestion extends Component {
{ (userAnswer || userHasSubmitted) &&
- +
} { (!userAnswer && !userHasSubmitted) && diff --git a/src/components/Questionnaire.js b/src/components/Questionnaire.js index 3678369..548535c 100644 --- a/src/components/Questionnaire.js +++ b/src/components/Questionnaire.js @@ -107,7 +107,7 @@ class Page extends Component { ) } - const { data, me, t, meta } = this.props + const { data, me, t, meta, colors } = this.props return ( { @@ -143,7 +143,8 @@ class Page extends Component { onChange: this.createHandleChange(q), questionnaire, question: q, - key: q.id + key: q.id, + colors } ) diff --git a/test/article.md b/test/article.md index 00426bc..0912e5d 100755 --- a/test/article.md +++ b/test/article.md @@ -22,7 +22,8 @@ Was möchten Sie Fragen? { "autoHtml": false, "props": { - "slug": "mss-demokratie" + "slug": "mss-demokratie", + "colors": [{ "value": true, "color": "#2ca02c" }, { "value": false, "color": "#9467bd" }] }, "src": "https://cdn.republik.space/s3/republik-assets/dynamic-components/questionnaire/index.js" } From 661b2923b9da07c313639ee7e735c71febadaf1d Mon Sep 17 00:00:00 2001 From: patte Date: Thu, 20 Feb 2020 01:34:34 +0100 Subject: [PATCH 05/12] devider for group --- src/components/Questionnaire.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/Questionnaire.js b/src/components/Questionnaire.js index 548535c..0e9f984 100644 --- a/src/components/Questionnaire.js +++ b/src/components/Questionnaire.js @@ -62,6 +62,7 @@ const styles = { }), group: css({ background: '#fff', + borderBottom: `0.5px solid ${colors.divider}`, zIndex: 10, position: 'sticky', top: HEADER_HEIGHT - 1, From 61692720f90835eefff27bc3372b65214261161f Mon Sep 17 00:00:00 2001 From: patte Date: Thu, 20 Feb 2020 01:53:13 +0100 Subject: [PATCH 06/12] better signIn text --- src/components/Questionnaire.js | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/src/components/Questionnaire.js b/src/components/Questionnaire.js index 0e9f984..0c36612 100644 --- a/src/components/Questionnaire.js +++ b/src/components/Questionnaire.js @@ -56,9 +56,7 @@ const styles = { minHeight: 30 }), signIn: css({ - textAlign: 'center', - margin: '40px 0' - + margin: '60px 0' }), group: css({ background: '#fff', @@ -125,7 +123,10 @@ class Page extends Component { if (!me || !me.id) { return ( -

Damit wir Ihnen zeigen können wo Sie im Vergleich zu allen anderen stehen müssen Sie sich anmelden. Sie benötigen keine Mitgliedschaft. Um Ihre Privatsphäre müssen Sie sich keine Sorgen machen: Sie können Ihre Antworten jederzeit wieder anonymisieren.

+
+

Melden Sie sich an um an der Umfrage teilzunehmen und live zu sehen wo Sie im Vergleich zu allen Anderen stehen. Sie können Ihre Antworten jederzeit anonymisieren.

+

Das erste Mal hier? Starten Sie am besten gleich ein kostenloses Probeabo für 14 Tage.

+
) } From 6cd5d2d76cbae8f93646f94690be7c3f26a13879 Mon Sep 17 00:00:00 2001 From: patte Date: Thu, 20 Feb 2020 04:53:41 +0100 Subject: [PATCH 07/12] cleanup --- src/components/Question.js | 22 +++++++++++++++++++--- 1 file changed, 19 insertions(+), 3 deletions(-) diff --git a/src/components/Question.js b/src/components/Question.js index 6a83666..8296100 100644 --- a/src/components/Question.js +++ b/src/components/Question.js @@ -51,7 +51,14 @@ class ChoiceQuestion extends Component { render () { this.handleChange = (value) => { - const { onChange, questionnaire, question: { userAnswer, cardinality } } = this.props + const { + onChange, + questionnaire, + question: { + userAnswer, + cardinality + } + } = this.props const nextValue = new Set(userAnswer ? userAnswer.payload.value : []) if (cardinality === 0 || cardinality > 1) { @@ -70,9 +77,18 @@ class ChoiceQuestion extends Component { onChange(answerId, Array.from(nextValue)) } - const { questionnaire, question: { id, text, userAnswer, options, results } } = this.props + const { + questionnaire = {}, + question: { + id, + text, + userAnswer, + options, + results + } + } = this.props const { question, colors } = this.props - const { userHasSubmitted } = questionnaire + const { userHasSubmitted = false } = questionnaire return (
From 08dadbeb2500e067c59726da9a27b2d7c5b5bf1c Mon Sep 17 00:00:00 2001 From: patte Date: Thu, 20 Feb 2020 04:53:54 +0100 Subject: [PATCH 08/12] filter with questionIndex prop --- src/components/Questionnaire.js | 35 +++++++++++++++++++-------------- 1 file changed, 20 insertions(+), 15 deletions(-) diff --git a/src/components/Questionnaire.js b/src/components/Questionnaire.js index 0c36612..24fba63 100644 --- a/src/components/Questionnaire.js +++ b/src/components/Questionnaire.js @@ -106,7 +106,7 @@ class Page extends Component { ) } - const { data, me, t, meta, colors } = this.props + const { data, me, t, meta, colors, questionIndex } = this.props return ( { @@ -167,6 +167,9 @@ class Page extends Component { } items.push(group) } + if (questionIndex && index !== questionIndex) { + return + } if (group && !nextHasGroup && !isLast) { group.questions.push(q) } else { @@ -177,20 +180,22 @@ class Page extends Component { return (
{ - items.map((i, index) => { - if (i.__typename === 'QuestionGroup') { - return ( -
-

{i.text}

- { - i.questions.map(q => elementForQuestion(q)) - } -
- ) - } else { - return elementForQuestion(i) - } - }) + items + .filter( i => i && (!i.questions || (i.questions && i.questions.length))) + .map((i, index) => { + if (i.__typename === 'QuestionGroup') { + return ( +
+

{i.text}

+ { + i.questions.map(q => elementForQuestion(q)) + } +
+ ) + } else { + return elementForQuestion(i) + } + }) }
{ error && From 82cedf9d4b14f9331ae37587651967ad9e460b06 Mon Sep 17 00:00:00 2001 From: patte Date: Thu, 20 Feb 2020 16:13:18 +0100 Subject: [PATCH 09/12] styling --- src/components/Question.js | 2 +- src/components/Questionnaire.js | 244 +++++++++++++++++--------------- 2 files changed, 127 insertions(+), 119 deletions(-) diff --git a/src/components/Question.js b/src/components/Question.js index 8296100..f53d6f5 100644 --- a/src/components/Question.js +++ b/src/components/Question.js @@ -16,7 +16,7 @@ import Chart from './Chart' const styles = { container: css({ - paddingBottom: 50 + paddingBottom: 30 }), question: css({ margin: '0px 0 10px 0', diff --git a/src/components/Questionnaire.js b/src/components/Questionnaire.js index 24fba63..454d5ec 100644 --- a/src/components/Questionnaire.js +++ b/src/components/Questionnaire.js @@ -22,7 +22,8 @@ import { OverlayToolbar, OverlayToolbarClose, OverlayBody, - Button + Button, + Center } from '@project-r/styleguide' import Question from './Question' @@ -61,6 +62,7 @@ const styles = { group: css({ background: '#fff', borderBottom: `0.5px solid ${colors.divider}`, + marginBottom: 10, zIndex: 10, position: 'sticky', top: HEADER_HEIGHT - 1, @@ -107,137 +109,143 @@ class Page extends Component { } const { data, me, t, meta, colors, questionIndex } = this.props + const singleQuestion = questionIndex !== undefined && questionIndex !== null + const Wrapper = singleQuestion ? Center : React.Fragment return ( - { - const now = new Date() + + { + const now = new Date() - // handle not found or not started - if (!data.questionnaire || new Date(data.questionnaire.beginDate) > now) { - return ( -

- Der Fragebogen konnte nicht gefunden werden. -

- ) - } + // handle not found or not started + if (!data.questionnaire || new Date(data.questionnaire.beginDate) > now) { + return ( +

+ Der Fragebogen konnte nicht gefunden werden. +

+ ) + } - if (!me || !me.id) { - return ( -
-

Melden Sie sich an um an der Umfrage teilzunehmen und live zu sehen wo Sie im Vergleich zu allen Anderen stehen. Sie können Ihre Antworten jederzeit anonymisieren.

-

Das erste Mal hier? Starten Sie am besten gleich ein kostenloses Probeabo für 14 Tage.

-
- ) - } + if (!me || !me.id) { + return ( +
+

Melden Sie sich an um an der Umfrage teilzunehmen und live zu sehen wo Sie im Vergleich zu allen Anderen stehen. Sie können Ihre Antworten jederzeit anonymisieren.

+

Das erste Mal hier? Starten Sie am besten gleich ein kostenloses Probeabo für 14 Tage.

+
+ ) + } - // handle questions - const { questionnaire } = data - const { questions, userHasSubmitted } = questionnaire + // handle questions + const { questionnaire } = data + const { questions, userHasSubmitted } = questionnaire - const { error, submitting, updating, showOverlay } = this.state - const questionCount = questions.filter(Boolean).length - const userAnswerCount = questions.map(q => q.userAnswer).filter(Boolean).length + const { error, submitting, updating, showOverlay } = this.state + const questionCount = questions.filter(Boolean).length + const userAnswerCount = questions.map(q => q.userAnswer).filter(Boolean).length - const elementForQuestion = q => - React.createElement( - Question, - { - onChange: this.createHandleChange(q), - questionnaire, - question: q, - key: q.id, - colors - } - ) + const elementForQuestion = q => + React.createElement( + Question, + { + onChange: this.createHandleChange(q), + questionnaire, + question: q, + key: q.id, + colors + } + ) - // rolls questions into groups. The last question of a group is left outside - // for nicer sticky behaviour - const items = [] - let group - questions.forEach( (q, index) => { - const groupText = q.metadata && q.metadata.group - const nextQuestion = questions[index+1] - const nextHasGroup = nextQuestion && nextQuestion.metadata && nextQuestion.metadata.group - const isLast = index === questions.length - 1 - if (groupText) { - group = { - text: groupText, - questions: [], - __typename: 'QuestionGroup' + // rolls questions into groups. The last question of a group is left outside + // for nicer sticky behaviour + const items = [] + let group + questions.forEach( (q, index) => { + const groupText = q.metadata && q.metadata.group + const nextQuestion = questions[index+1] + const nextHasGroup = nextQuestion && nextQuestion.metadata && nextQuestion.metadata.group + const isLast = index === questions.length - 1 + if (groupText) { + group = { + text: groupText, + questions: [], + __typename: 'QuestionGroup' + } + items.push(group) } - items.push(group) - } - if (questionIndex && index !== questionIndex) { - return - } - if (group && !nextHasGroup && !isLast) { - group.questions.push(q) - } else { - items.push(q) - } - }) - - return ( -
- { - items - .filter( i => i && (!i.questions || (i.questions && i.questions.length))) - .map((i, index) => { - if (i.__typename === 'QuestionGroup') { - return ( -
-

{i.text}

- { - i.questions.map(q => elementForQuestion(q)) - } -
- ) - } else { - return elementForQuestion(i) - } - }) + if (questionIndex && index !== questionIndex) { + return } -
- { error && -

{errorToString(error)}

- } -
- { userHasSubmitted - ?

Sie haben Ihre Antworten anonymisiert und können daher nicht noch einmal teilnehmen.

- :

{t('questionnaire/header', { questionCount, userAnswerCount })}

- } - { (updating || submitting) && -
- } -
- { !userHasSubmitted && -

{e.preventDefault(); this.setState({ showOverlay: true })}}>Möchten Sie Ihre Antworten anonymisieren?

- } - { showOverlay && - {this.setState({ showOverlay: false })}}> - - {this.setState({ showOverlay: false })}} /> - + if (group && !nextHasGroup && !isLast) { + group.questions.push(q) + } else { + items.push(q) + } + }) - -

Wenn Sie möchten, können Sie Ihre Antworten anonymisieren. Diese bleiben zwar in unserer Datenbank erhalten, aber wir vergessen, dass sie von Ihnen stammen. Wir können Ihnen danach nicht mehr anzeigen, was Sie geantwortet haben, und Sie können keine Antworten mehr abgeben.

- - - + } else { + return elementForQuestion(i) + } + }) + } + { !singleQuestion && +
+ { error && +

{errorToString(error)}

+ } +
+ { userHasSubmitted + ?

Sie haben Ihre Antworten anonymisiert und können daher nicht noch einmal teilnehmen.

+ :

{t('questionnaire/header', { questionCount, userAnswerCount })}

+ } + { (updating || submitting) && +
+ } +
+ { !userHasSubmitted && +

{e.preventDefault(); this.setState({ showOverlay: true })}}>Möchten Sie Ihre Antworten anonymisieren?

+ } + { showOverlay && + {this.setState({ showOverlay: false })}}> + + {this.setState({ showOverlay: false })}} /> + + + +

Wenn Sie möchten, können Sie Ihre Antworten anonymisieren. Diese bleiben zwar in unserer Datenbank erhalten, aber wir vergessen, dass sie von Ihnen stammen. Wir können Ihnen danach nicht mehr anzeigen, was Sie geantwortet haben, und Sie können keine Antworten mehr abgeben.

+ + + + } +
}
-
- ) - }} /> + ) + }} /> + ) } } From 4e587edbafe0a412c8f51974f63cc2dff0506cb5 Mon Sep 17 00:00:00 2001 From: patte Date: Thu, 20 Feb 2020 18:40:15 +0100 Subject: [PATCH 10/12] show results for unauthorized users --- src/components/Question.js | 9 +- src/components/Questionnaire.js | 151 ++++++++++++++++++-------------- 2 files changed, 91 insertions(+), 69 deletions(-) diff --git a/src/components/Question.js b/src/components/Question.js index f53d6f5..4599122 100644 --- a/src/components/Question.js +++ b/src/components/Question.js @@ -85,21 +85,24 @@ class ChoiceQuestion extends Component { userAnswer, options, results - } + }, + forceShowResults = false } = this.props const { question, colors } = this.props const { userHasSubmitted = false } = questionnaire + const showResults = userAnswer || userHasSubmitted || forceShowResults + return (

{text}

- { (userAnswer || userHasSubmitted) && + { showResults &&
} - { (!userAnswer && !userHasSubmitted) && + { !showResults &&
{ options.map(option =>
diff --git a/src/components/Questionnaire.js b/src/components/Questionnaire.js index 454d5ec..64888bb 100644 --- a/src/components/Questionnaire.js +++ b/src/components/Questionnaire.js @@ -57,7 +57,7 @@ const styles = { minHeight: 30 }), signIn: css({ - margin: '60px 0' + marginTop: 60 }), group: css({ background: '#fff', @@ -76,7 +76,8 @@ class Page extends Component { constructor (props) { super(props) this.state = { - showOverlay: false + showOverlay: false, + forceShowResults: false } } @@ -108,13 +109,23 @@ class Page extends Component { ) } + this.onClickForceShowResults = event => { + event.preventDefault() + this.setState({ + forceShowResults: true + }) + } + const { data, me, t, meta, colors, questionIndex } = this.props const singleQuestion = questionIndex !== undefined && questionIndex !== null const Wrapper = singleQuestion ? Center : React.Fragment + const pdfRendering = typeof window !== 'undefined' && window.location.search && window.location.search.indexOf('extract') + const forceShowResults = this.state.forceShowResults || pdfRendering + return ( - { + { const now = new Date() // handle not found or not started @@ -126,15 +137,6 @@ class Page extends Component { ) } - if (!me || !me.id) { - return ( -
-

Melden Sie sich an um an der Umfrage teilzunehmen und live zu sehen wo Sie im Vergleich zu allen Anderen stehen. Sie können Ihre Antworten jederzeit anonymisieren.

-

Das erste Mal hier? Starten Sie am besten gleich ein kostenloses Probeabo für 14 Tage.

-
- ) - } - // handle questions const { questionnaire } = data const { questions, userHasSubmitted } = questionnaire @@ -151,7 +153,8 @@ class Page extends Component { questionnaire, question: q, key: q.id, - colors + colors, + forceShowResults } ) @@ -184,63 +187,79 @@ class Page extends Component { return (
- { - items - .filter( i => i && (!i.questions || (i.questions && i.questions.length))) - .map((i, index) => { - if (i.__typename === 'QuestionGroup') { - return ( -
-

{i.text}

- { - i.questions.map(q => elementForQuestion(q)) - } -
- ) - } else { - return elementForQuestion(i) - } - }) - } - { !singleQuestion && -
- { error && -

{errorToString(error)}

+ { !pdfRendering && !me && +
+

Melden Sie sich an, um an der Umfrage teilzunehmen und live zu sehen, wo Sie im Vergleich zu allen Anderen stehen. Sie können Ihre Antworten jederzeit anonymisieren.

+

Das erste Mal hier? Starten Sie am besten gleich ein kostenloses Probeabo für 14 Tage.

+
+ { !forceShowResults && +

Jetzt gerade nicht? Resultate anzeigen.

} -
- { userHasSubmitted - ?

Sie haben Ihre Antworten anonymisiert und können daher nicht noch einmal teilnehmen.

- :

{t('questionnaire/header', { questionCount, userAnswerCount })}

- } - { (updating || submitting) && -
- } -
- { !userHasSubmitted && -

{e.preventDefault(); this.setState({ showOverlay: true })}}>Möchten Sie Ihre Antworten anonymisieren?

+
+ } + { (me || forceShowResults) && + <> + { + items + .filter( i => i && (!i.questions || (i.questions && i.questions.length))) + .map((i, index) => { + if (i.__typename === 'QuestionGroup') { + return ( +
+

{i.text}

+ { + i.questions.map(q => elementForQuestion(q)) + } +
+ ) + } else { + return elementForQuestion(i) + } + }) } - { showOverlay && - {this.setState({ showOverlay: false })}}> - - {this.setState({ showOverlay: false })}} /> - + { me && !singleQuestion && +
+ { error && +

{errorToString(error)}

+ } +
+ { userHasSubmitted + ?

Sie haben Ihre Antworten anonymisiert und können daher nicht noch einmal teilnehmen.

+ :

{t('questionnaire/header', { questionCount, userAnswerCount })}

+ } + { (updating || submitting) && +
+ } +
+ { !userHasSubmitted && +

+ {e.preventDefault(); this.setState({ showOverlay: true })}}>Möchten Sie Ihre Antworten anonymisieren? +

+ } + { showOverlay && + {this.setState({ showOverlay: false })}}> + + {this.setState({ showOverlay: false })}} /> + - -

Wenn Sie möchten, können Sie Ihre Antworten anonymisieren. Diese bleiben zwar in unserer Datenbank erhalten, aber wir vergessen, dass sie von Ihnen stammen. Wir können Ihnen danach nicht mehr anzeigen, was Sie geantwortet haben, und Sie können keine Antworten mehr abgeben.

- - - + +

Wenn Sie möchten, können Sie Ihre Antworten anonymisieren. Diese bleiben zwar in unserer Datenbank erhalten, aber wir vergessen, dass sie von Ihnen stammen. Wir können Ihnen danach nicht mehr anzeigen, was Sie geantwortet haben, und Sie können keine Antworten mehr abgeben.

+ + + + } +
} -
+ }
) From a803e4736dcba4925e61c35dc961773ca0ad8eb1 Mon Sep 17 00:00:00 2001 From: patte Date: Thu, 20 Feb 2020 18:40:24 +0100 Subject: [PATCH 11/12] better colors --- test/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/test/article.md b/test/article.md index 0912e5d..5fce270 100755 --- a/test/article.md +++ b/test/article.md @@ -23,7 +23,7 @@ Was möchten Sie Fragen? "autoHtml": false, "props": { "slug": "mss-demokratie", - "colors": [{ "value": true, "color": "#2ca02c" }, { "value": false, "color": "#9467bd" }] + "colors": [{ "value": true, "color": "#6FB977" }, { "value": false, "color": "#AD8BBD" }] }, "src": "https://cdn.republik.space/s3/republik-assets/dynamic-components/questionnaire/index.js" } From 3dcb6222cb1676ae4c6b57ff55ca612091748694 Mon Sep 17 00:00:00 2001 From: patte Date: Thu, 20 Feb 2020 22:57:59 +0100 Subject: [PATCH 12/12] typo --- src/components/Questionnaire.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Questionnaire.js b/src/components/Questionnaire.js index 64888bb..d805727 100644 --- a/src/components/Questionnaire.js +++ b/src/components/Questionnaire.js @@ -189,7 +189,7 @@ class Page extends Component {
{ !pdfRendering && !me &&
-

Melden Sie sich an, um an der Umfrage teilzunehmen und live zu sehen, wo Sie im Vergleich zu allen Anderen stehen. Sie können Ihre Antworten jederzeit anonymisieren.

+

Melden Sie sich an, um an der Umfrage teilzunehmen und live zu sehen, wo Sie im Vergleich zu allen anderen stehen. Sie können Ihre Antworten jederzeit anonymisieren.

Das erste Mal hier? Starten Sie am besten gleich ein kostenloses Probeabo für 14 Tage.


{ !forceShowResults &&