🇪🇺 Vue.js powered voting application. Issues are tracked @ https://git.verdigado.com/NB-Public/kandimat/issues
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 
kandimat-user-app/src/app/euromat/components/results.vue

365 lines
7.8 KiB

<template>
<section>
<header class="results-header">
<h1>{{ $t('results.headline') }}</h1>
</header>
<div class="results-content">
<p>{{ $t('results.entry') }}</p>
<span>{{ $t('results.hint') }}</span>
</div>
<ul class="party-results">
<li v-for="party of parties" :key="party.token">
<router-link :to="{ path: getPartyPath(party.id) }">
<div class="result-party-info">
<div class="result-party-logo">
<span>{{ party.token }}</span>
</div>
<h2>{{ getScorePercentage(party.score) }}%</h2>
</div>
<feather-zoom-in class="results-see-more" />
<v-progress
class="result-percentage"
:value="party.score"
:max="totalMaxPoints"
/>
</router-link>
<div class="party-results-national">
<span>
{{ party.name }}
</span>
</div>
</li>
</ul>
<div v-if="!isEmbedded" class="results-ctrls">
<p>{{ $t('results.thanks') }}</p>
<router-link tag="a"
class="btn"
:to="{ path: `/${$i18n.locale}/` }"
>
{{ $t('results.indexBtn') }}
</router-link>
<router-link
tag="a"
class="btn btn-dark btn-small"
:to="{ path: startOverUrl }"
>
{{ $t('results.startoverBtn') }}
<feather-rotate-cw />
</router-link>
</div>
</section>
</template>
<script>
import { getTranslatedUrl } from '@/i18n/helper'
import { getPartiesWithScores, getTotalMaxPoints } from '@/app/euromat/scoring'
import {
apolloPersonsForResultsQuery,
apolloPersonsForResultsUpdate
} from '@/app/euromat/graphqlQueries'
export default {
name: 'Results',
components: {
'feather-zoom-in': () =>
import('vue-feather-icons/icons/ZoomInIcon' /* webpackChunkName: "icons" */),
'feather-rotate-cw': () =>
import('vue-feather-icons/icons/RotateCwIcon' /* webpackChunkName: "icons" */)
},
data () {
return {
scoringGrid: [],
scores: [],
parties: [],
totalMaxPoints: 0
}
},
computed: {
startOverUrl () {
return getTranslatedUrl('theses')
},
isEmbedded () {
return (
this.$route.query.embedded &&
this.$route.query.embedded === 'iframe'
)
}
},
async created () {
let emphasized
let answers
if (this.$browser.supports('sessionStorage')) {
emphasized = JSON.parse(sessionStorage.getItem('euromat-emphasized'))
answers = JSON.parse(sessionStorage.getItem('euromat-answers'))
} else {
emphasized = JSON.parse(this.$root.$data.backupStorage.emphasized)
answers = JSON.parse(this.$root.$data.backupStorage.answers)
}
if (!emphasized) {
await this.$router.push({ path: getTranslatedUrl('theses') })
}
const apolloResponse = await this.$apollo.query({ query: apolloPersonsForResultsQuery })
const parties = apolloPersonsForResultsUpdate(apolloResponse.data)
const partiesWithScores = getPartiesWithScores(answers, emphasized, parties)
this.parties = partiesWithScores.map(party => ({
id: party.id,
token: party.token,
score: party.score,
name: party.name
}))
.sort((a, b) => a.score - b.score)
.reverse()
this.totalMaxPoints = getTotalMaxPoints(answers, emphasized)
},
methods: {
getPartyPath (partyId) {
return `${getTranslatedUrl('party')}/${partyId}`
},
getScorePercentage (score) {
return (score / this.totalMaxPoints * 100).toFixed(2)
}
}
}
</script>
<style lang="scss" scoped>
@import "~@/styles/animations";
@import "~@/styles/colors";
@import "~@/styles/layout";
$result-bar-length: 92%;
section {
width: 95%;
margin: 0 auto;
}
.results-header {
margin-bottom: $base-gap;
h1 {
margin-bottom: $small-gap;
}
}
.results-content {
margin-bottom: $base-gap;
span {
margin-top: $small-gap;
color: $text-color-secondary;
font-size: $font-size-small;
}
}
.party-results {
list-style: none;
width: 100%;
counter-reset: result;
li {
display: flex;
flex-direction: column;
align-items: flex-end;
margin-bottom: $base-gap;
position: relative;
&:hover .results-see-more {
opacity: 1;
}
&::before {
counter-increment: result;
content: counter(result) ".";
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%);
color: $text-color-secondary;
font-size: $font-size-xlarge;
font-weight: 600;
}
@media (max-width: 650px) {
&::before {
display: none;
}
}
}
a:not(.party-results-national-logo) {
height: 80px;
width: $result-bar-length;
position: relative;
display: flex;
justify-content: space-between;
align-items: center;
@media (max-width: 650px) {
width: 100%;
}
}
h2,
.results-see-more {
position: relative;
z-index: 1;
}
h2 {
color: $text-color-base;
font-weight: 600;
text-shadow: $text-shadow;
span {
font-weight: 400;
}
}
.results-see-more {
stroke: $text-color-base;
filter: drop-shadow($text-shadow);
height: 32px;
width: 32px;
opacity: 0;
transition: opacity 150ms $easeOutBack;
margin-right: $base-gap;
}
.result-percentage {
height: 100%;
position: absolute;
top: 0;
left: 0;
}
}
.party-results-national {
width: $result-bar-length;
display: flex;
justify-content: flex-start;
align-items: center;
padding-top: calc(#{$small-gap} / 2);
padding-left: $small-gap;
svg {
margin-right: calc(#{$small-gap} / 2);
}
> span {
display: inline-flex;
align-items: center;
}
.party-results-national-logo {
display: inline-block;
font-weight: 700;
margin-left: calc(#{$small-gap} / 2);
> div {
width: 70px;
height: auto;
display: inline-flex;
justify-content: center;
align-items: center;
vertical-align: middle;
}
img {
object-fit: contain;
width: 80%;
}
}
@media (max-width: 650px) {
width: 100%;
}
}
.result-party-info {
display: flex;
height: calc(100% - 4px);
align-items: center;
justify-content: center;
.result-party-logo {
margin-right: $small-gap;
position: relative;
z-index: 1;
background: $background-secondary;
border-radius: $border-radius;
width: 80px;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
margin-left: 2px;
img {
object-fit: contain;
}
span {
color: $text-color-invert;
font-weight: 700;
}
}
}
.results-ctrls {
margin-top: $base-gap * 2;
border-top: 4px solid $transparent-white;
padding-top: $small-gap;
p {
margin-bottom: $small-gap;
}
a:first-of-type {
margin-right: $small-gap;
}
}
.results-affiliation {
background: $medium-blue;
width: 100%;
margin-top: $base-gap * 2;
padding: calc(#{$small-gap} / 2);
border-radius: calc(#{$border-radius} / 3);
@media (max-width: 650px) {
padding: 0;
margin-top: $base-gap * 2;
border-top: 4px solid $transparent-white;
padding-top: $small-gap;
border-radius: 0;
background: transparent;
}
a {
display: block;
}
img {
width: 100%;
height: auto;
vertical-align: middle;
}
}
</style>