171 lines
3.9 KiB
Vue
171 lines
3.9 KiB
Vue
<template>
|
|
<section>
|
|
<header class="party-header">
|
|
<div class="party-header-logo">
|
|
<img :src="partyLogo" :width="logoSize" :height="logoSize" :alt="partyName" />
|
|
</div>
|
|
|
|
<div class="party-header-info">
|
|
<router-link v-if="!!answers" class="btn btn-dark btn-small" :to="{ path: resultsPath }">
|
|
{{ $t('party.back') }}
|
|
<feather-corner-up-left />
|
|
</router-link>
|
|
<h1>{{ partyName }}</h1>
|
|
</div>
|
|
</header>
|
|
|
|
<ul class="party-theses-list">
|
|
<li class="list-header">
|
|
<h2>Thesis</h2>
|
|
<h2>Partei</h2>
|
|
<h2>Deine Wahl</h2>
|
|
</li>
|
|
<li v-for="thesis in theses">
|
|
<div class="list-thesis">
|
|
<span>{{ getCategory(thesis.category) }}</span>
|
|
<h3>{{ getThesis(thesis.thesis) }}</h3>
|
|
</div>
|
|
|
|
<div class="list-statements">
|
|
<div class="statements-party">
|
|
<feather-icon :type="getPartyStatement(thesis.id)" />
|
|
</div>
|
|
<div v-if="!!answers" class="statements-user">
|
|
<feather-icon :type="getUserStatement(thesis.id)" />
|
|
</div>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</section>
|
|
</template>
|
|
|
|
<script>
|
|
import { parties, theses } from '@/data'
|
|
export default {
|
|
name: 'Party',
|
|
|
|
data () {
|
|
return {
|
|
logoSize: 60,
|
|
partyLogo: require(`@/assets/svg/${this.$route.params.token}-logo.svg`),
|
|
party: parties.find(p => p.token === this.$route.params.token.toUpperCase()),
|
|
answers: JSON.parse(sessionStorage.getItem('euromat-answers')),
|
|
theses
|
|
}
|
|
},
|
|
|
|
computed: {
|
|
isGermanLocale () {
|
|
return this.$i18n.locale === 'de'
|
|
},
|
|
resultsPath () {
|
|
return this.isGermanLocale
|
|
? '/thesen/ergebnis'
|
|
: '/theses/results'
|
|
},
|
|
partyName () {
|
|
return this.party.name[this.$i18n.locale]
|
|
}
|
|
},
|
|
|
|
methods: {
|
|
getCategory (category) {
|
|
return category[this.$i18n.locale]
|
|
},
|
|
getThesis (thesis) {
|
|
return thesis[this.$i18n.locale]
|
|
},
|
|
positionToIconName (position) {
|
|
switch (position) {
|
|
case 'positive':
|
|
return 'thumbs-up'
|
|
case 'negative':
|
|
return 'thumbs-down'
|
|
case 'skipped':
|
|
return 'corner-up-right'
|
|
case 'neutral':
|
|
default:
|
|
return 'circle'
|
|
}
|
|
},
|
|
getPartyStatement (id) {
|
|
return this.positionToIconName(
|
|
this.party.positions.find(p => p.thesis === id).position
|
|
)
|
|
},
|
|
getUserStatement (id) {
|
|
return this.positionToIconName(
|
|
this.answers.find(a => a.thesis === id).position
|
|
)
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
@import "~styles/colors";
|
|
@import "~styles/layout";
|
|
|
|
.party-header {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
|
|
.party-header-info {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
margin-right: $small-gap;
|
|
|
|
.btn {
|
|
margin-bottom: $small-gap / 2;
|
|
}
|
|
}
|
|
|
|
.party-header-logo {
|
|
margin-right: $small-gap;
|
|
background: $background-secondary;
|
|
padding: $small-gap;
|
|
border-radius: 100%;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
box-shadow: $button-shadow;
|
|
|
|
img {
|
|
object-fit: contain;
|
|
}
|
|
}
|
|
}
|
|
|
|
.party-theses-list {
|
|
margin-top: $base-gap;
|
|
list-style: none;
|
|
|
|
.list-header {
|
|
background: $transparent-white;
|
|
border-radius: $border-radius;
|
|
|
|
h2 {
|
|
font-size: $font-size-base;
|
|
color: $text-color-base;
|
|
margin: 0;
|
|
}
|
|
}
|
|
|
|
li {
|
|
padding: $small-gap 0;
|
|
display: flex;
|
|
}
|
|
|
|
li:not(:last-child):not(.list-header) {
|
|
border-bottom: 2px dashed $transparent-white;
|
|
}
|
|
|
|
.list-thesis {
|
|
span {
|
|
color: $text-color-secondary;
|
|
}
|
|
}
|
|
}
|
|
</style>
|