develop-candymat #5

Merged
christoph.lienhard merged 1 commit from develop-candymat into master 2020-06-13 21:44:17 +02:00
5 changed files with 91 additions and 73 deletions

View file

@ -6,7 +6,7 @@
<span>/{{ thesesCount }}</span> <span>/{{ thesesCount }}</span>
</div> </div>
<button <button
:disabled="currentThesis === 1" :disabled="currentThesisStep === 1"
class="btn-dark btn-small" class="btn-dark btn-small"
type="button" type="button"
@click="goBack" @click="goBack"
@ -73,7 +73,7 @@
data () { data () {
return { return {
currentThesis: 1, currentThesisStep: 1,
theses: [], theses: [],
thesesCount: 0, thesesCount: 0,
answers: [] answers: []
@ -98,20 +98,17 @@
this.$route.query.embedded === 'iframe' this.$route.query.embedded === 'iframe'
) )
}, },
currentThesisStep () {
return this.currentThesis
},
thesisTitle () { thesisTitle () {
if (this.currentThesis > this.thesesCount) { if (this.currentThesisStep > this.thesesCount) {
return return
} }
return this.getThesis(this.currentThesis).thesis[this.$i18n.locale] return this.theses[this.currentThesisStep - 1].thesis[this.$i18n.locale]
}, },
thesisCategory () { thesisCategory () {
if (this.currentThesis > this.thesesCount) { if (this.currentThesisStep > this.thesesCount) {
return return
} }
return this.getThesis(this.currentThesis).category[this.$i18n.locale] return this.theses[this.currentThesisStep - 1].category[this.$i18n.locale]
}, },
possiblePositions () { possiblePositions () {
return possiblePositions.map(option => return possiblePositions.map(option =>
@ -139,14 +136,11 @@
default: default:
} }
}, },
getThesis (id) {
return this.theses.find(t => t.id === id)
},
goBack () { goBack () {
const thesis = this.getThesis(this.currentThesis) const thesis = this.theses[this.currentThesisStep - 1]
const index = this.answers.findIndex(a => a.thesis === thesis.id) const index = this.answers.findIndex(a => a.thesis === thesis.id)
this.answers.splice(index, 1) this.answers.splice(index, 1)
this.currentThesis -= 1 this.currentThesisStep -= 1
}, },
submitAnswer (option, event) { submitAnswer (option, event) {
if (!option) { if (!option) {
@ -154,13 +148,13 @@
return console.warn('Invalid answer') return console.warn('Invalid answer')
} }
const thesis = this.getThesis(this.currentThesis) const thesis = this.theses[this.currentThesisStep - 1]
this.answers.push({ thesis: thesis.id, position: option.position }) this.answers.push({ thesis: thesis.id, position: option.position })
this.currentThesis += 1 this.currentThesisStep += 1
event && event.target.blur() event && event.target.blur()
window.scrollTo(0, 0) window.scrollTo(0, 0)
if (this.currentThesis > this.thesesCount) { if (this.currentThesisStep > this.thesesCount) {
this.forwardToResults() this.forwardToResults()
} }
}, },

View file

@ -6,26 +6,26 @@ export function getPositionById (id) {
} }
export const apolloThesesQuery = gql`{ export const apolloThesesQuery = gql`{
allQuestions(orderBy: ID_ASC) { allQuestions(orderBy: ROW_ID_ASC) {
nodes { nodes {
category: categoryByCategoryId { category: categoryByCategoryRowId {
nodeId id
title title
} }
text title
rowId
id id
nodeId
} }
} }
}` }`
export const apolloThesesUpdate = data => data.allQuestions.nodes.map(node => ({ export const apolloThesesUpdate = data => data.allQuestions.nodes.map(node => ({
id: node.id, id: node.rowId,
thesis: { thesis: {
de: node.text de: node.title
}, },
category: { category: {
de: node.category.title de: node.category ? node.category.title : ''
} }
})) }))
@ -40,15 +40,15 @@ export const apolloThesesCountUpdate = data => data.allQuestions.totalCount
export const apolloPersonsForResultsQuery = gql`{ export const apolloPersonsForResultsQuery = gql`{
allPeople(condition: {role: CANDYMAT_CANDIDATE}) { allPeople(condition: {role: CANDYMAT_CANDIDATE}) {
nodes { nodes {
nodeId id
firstName firstName
lastName lastName
id rowId
answersByPersonId { answers: answersByPersonRowId {
nodes { nodes {
nodeId id
position position
questionId questionRowId
text text
} }
} }
@ -57,11 +57,11 @@ export const apolloPersonsForResultsQuery = gql`{
}` }`
export const apolloPersonsForResultsUpdate = data => data.allPeople.nodes.map(person => ({ export const apolloPersonsForResultsUpdate = data => data.allPeople.nodes.map(person => ({
id: person.id, id: person.rowId,
name: `${person.firstName} ${person.lastName}`, name: `${person.firstName} ${person.lastName}`,
token: person.firstName.charAt(0) + person.lastName.charAt(0), token: person.firstName.charAt(0) + person.lastName.charAt(0),
positions: person.answersByPersonId.nodes.map(answer => ({ positions: person.answers.nodes.map(answer => ({
thesis: answer.questionId, thesis: answer.questionRowId,
position: getPositionById(answer.position), position: getPositionById(answer.position),
statement: { statement: {
de: answer.text de: answer.text
@ -71,45 +71,39 @@ export const apolloPersonsForResultsUpdate = data => data.allPeople.nodes.map(pe
export const apolloPersonPositionsQuery = gql` export const apolloPersonPositionsQuery = gql`
query Person($partyId: Int!) { query Person($partyId: Int!) {
personById(id: $partyId) { personByRowId(rowId: $partyId) {
nodeId
id id
firstName firstName
lastName lastName
answersByPersonId { answers: answersByPersonRowId {
nodes { nodes {
nodeId id
position position
personId personRowId
text text
questionByQuestionId { question: questionByQuestionRowId {
nodeId
categoryByCategoryId {
nodeId
title
}
text
id id
description rowId
} }
} }
} }
} }
}` }`
export const apolloPersonPositionsUpdate = data => ({ export const apolloPersonPositionsUpdate = data => {
id: data.personById.id, const person = data.personByRowId
name: `${data.personById.firstName} ${data.personById.lastName}`, return {
token: data.personById.firstName.charAt(0) + data.personById.lastName.charAt(0), id: person.rowId,
theses: data.personById.answersByPersonId.nodes.map(answer => { name: `${person.firstName} ${person.lastName}`,
const question = answer.questionByQuestionId token: person.firstName.charAt(0) + person.lastName.charAt(0),
return { theses: person.answers ? person.answers.nodes.map(answer => {
id: question.id, const question = answer.question
thesis: question.text, return question ? {
category: question.categoryByCategoryId.title, id: question.rowId,
position: getPositionById(answer.position), position: getPositionById(answer.position),
statement: answer.text, statement: answer.text,
showStatement: false showStatement: false
} } : null
}) }) : []
}) }
}

View file

@ -73,7 +73,7 @@ function getUserPosition (row) {
// ... // ...
// ] // ]
function getScoringGrid (userAnswers, emphasizedTheses, parties) { function getScoringGrid (userAnswers, emphasizedTheses, parties) {
return userAnswers.map(answer => ( const grid = userAnswers.map(answer => (
{ {
thesis: answer.thesis, thesis: answer.thesis,
emphasis: emphasizedTheses.filter(e => e.thesis === answer.thesis).length >= 1, emphasis: emphasizedTheses.filter(e => e.thesis === answer.thesis).length >= 1,
@ -83,6 +83,7 @@ function getScoringGrid (userAnswers, emphasizedTheses, parties) {
] ]
} }
)) ))
return grid
} }
function getPartyPositions (thesis, parties) { function getPartyPositions (thesis, parties) {
@ -91,15 +92,16 @@ function getPartyPositions (thesis, parties) {
return { return {
type: 'party', type: 'party',
party: party.id, party: party.id,
position: (position && position.position) || {} position: (position && position.position) || 'skipped'
} }
}) })
} }
export function evalPointsPerThesisPerParty (partyPosition, userPosition, emphasis) { export function evalPointsPerThesisPerParty (partyPosition, userPosition, emphasis) {
let score = 0 let score = 0
if (partyPosition === 'skipped' || userPosition === 'skipped') {
if (userPosition === partyPosition) { score = MIN_POINTS
} else if (userPosition === partyPosition) {
score = MAX_POINTS score = MAX_POINTS
} else if ( } else if (
(userPosition === 'positive' && partyPosition === 'neutral') || (userPosition === 'positive' && partyPosition === 'neutral') ||

View file

@ -90,13 +90,19 @@ describe('The evalPointsPerThesisPerParty fucntion', () => {
${'negative'} | ${'negative'} | ${2} | ${4} ${'negative'} | ${'negative'} | ${2} | ${4}
${'negative'} | ${'neutral'} | ${1} | ${2} ${'negative'} | ${'neutral'} | ${1} | ${2}
${'negative'} | ${'positive'} | ${0} | ${0} ${'negative'} | ${'positive'} | ${0} | ${0}
${'negative'} | ${'skipped'} | ${0} | ${0}
${'neutral'} | ${'negative'} | ${1} | ${2} ${'neutral'} | ${'negative'} | ${1} | ${2}
${'neutral'} | ${'neutral'} | ${2} | ${4} ${'neutral'} | ${'neutral'} | ${2} | ${4}
${'neutral'} | ${'positive'} | ${1} | ${2} ${'neutral'} | ${'positive'} | ${1} | ${2}
${'neutral'} | ${'skipped'} | ${0} | ${0}
${'positive'} | ${'negative'} | ${0} | ${0} ${'positive'} | ${'negative'} | ${0} | ${0}
${'positive'} | ${'neutral'} | ${1} | ${2} ${'positive'} | ${'neutral'} | ${1} | ${2}
${'positive'} | ${'positive'} | ${2} | ${4} ${'positive'} | ${'positive'} | ${2} | ${4}
${'positive'} | ${'skipped'} | ${0} | ${0} ${'positive'} | ${'skipped'} | ${0} | ${0}
${'skipped'} | ${'negative'} | ${0} | ${0}
${'skipped'} | ${'neutral'} | ${0} | ${0}
${'skipped'} | ${'positive'} | ${0} | ${0}
${'skipped'} | ${'skipped'} | ${0} | ${0}
`('returns the correct score (according to the Rechenmodell of the bpb' + `('returns the correct score (according to the Rechenmodell of the bpb' +
' if the party position is $partyPosition and the user\'s position is $userPosition', ' if the party position is $partyPosition and the user\'s position is $userPosition',
({ partyPosition, userPosition, expectedScore, expectedScoreWithEmphasis }) => { ({ partyPosition, userPosition, expectedScore, expectedScoreWithEmphasis }) => {

View file

@ -47,18 +47,18 @@
</h2> </h2>
</li> </li>
<li v-for="thesis in party.theses" :key="thesis.id"> <li v-for="thesis in theses" :key="thesis.id">
<div class="thesis-facts"> <div class="thesis-facts">
<div class="list-thesis" @click="toggleStatement(thesis)"> <div class="list-thesis" @click="toggleStatement(thesis)">
<div class="thesis-subline"> <div class="thesis-subline">
<component :is="'feather-' + chevronIcon(thesis.showStatement)" /> <component :is="'feather-' + chevronIcon(thesis.showStatement)" />
<span>{{ thesis.category }}</span> <span>{{ thesis.category[$i18n.locale] }}</span>
</div> </div>
<h3>{{ thesis.thesis }}</h3> <h3>{{ thesis.thesis[$i18n.locale] }}</h3>
</div> </div>
<div class="statements-party"> <div class="statements-party">
<component :is="'feather-' + positionToIconName(thesis.position)" /> <component :is="'feather-' + positionToIconName(getPartyPosition(thesis))" />
</div> </div>
<div v-if="!!answers" class="statements-user"> <div v-if="!!answers" class="statements-user">
<component :is="'feather-' + getUserPosition(thesis.id)" /> <component :is="'feather-' + getUserPosition(thesis.id)" />
@ -68,7 +68,7 @@
<div v-show="thesis.showStatement" class="thesis-statement"> <div v-show="thesis.showStatement" class="thesis-statement">
<p><strong>{{ $t('party.partyAnswer') }}:</strong></p> <p><strong>{{ $t('party.partyAnswer') }}:</strong></p>
<blockquote> <blockquote>
{{ thesis.statement }} {{ getPartyStatement(thesis) }}
</blockquote> </blockquote>
</div> </div>
</li> </li>
@ -87,7 +87,11 @@
<script> <script>
import possiblePositions from '@/app/euromat/possiblePositions' import possiblePositions from '@/app/euromat/possiblePositions'
import { getTranslatedUrl } from '@/i18n/helper' import { getTranslatedUrl } from '@/i18n/helper'
import { apolloPersonPositionsQuery, apolloPersonPositionsUpdate } from '@/app/euromat/graphqlQueries' import {
apolloPersonPositionsQuery,
apolloPersonPositionsUpdate,
apolloThesesQuery, apolloThesesUpdate
} from '@/app/euromat/graphqlQueries'
export default { export default {
name: 'Party', name: 'Party',
@ -129,6 +133,7 @@
name: 'Loading ...', name: 'Loading ...',
theses: [] theses: []
}, },
theses: [],
answers, answers,
possiblePositions possiblePositions
} }
@ -143,9 +148,15 @@
} }
}, },
update: apolloPersonPositionsUpdate update: apolloPersonPositionsUpdate
},
theses: {
query: apolloThesesQuery,
update: data => {
const allTheses = apolloThesesUpdate(data)
return allTheses.map(thesis => ({ ...thesis, showStatement: false }))
}
} }
}, },
computed: { computed: {
resultsPath () { resultsPath () {
return getTranslatedUrl('results', getTranslatedUrl('theses', null, true)) return getTranslatedUrl('results', getTranslatedUrl('theses', null, true))
@ -156,6 +167,17 @@
}, },
methods: { methods: {
getPartyAnswerForThesis (thesis) {
return this.party.theses.find(partyThesis => partyThesis.id === thesis.id)
},
getPartyPosition (thesis) {
const partyAnswerForThesis = this.getPartyAnswerForThesis(thesis)
return partyAnswerForThesis ? partyAnswerForThesis.position : 'skipped'
},
getPartyStatement (thesis) {
const partyAnswerForThesis = this.getPartyAnswerForThesis(thesis)
return partyAnswerForThesis ? partyAnswerForThesis.statement : ''
},
chevronIcon (showStatement) { chevronIcon (showStatement) {
return showStatement return showStatement
? 'chevron-up' ? 'chevron-up'