2017-08-13 14:03:38 +02:00
|
|
|
<template>
|
2020-06-14 03:13:52 +02:00
|
|
|
<section v-if="thesesCount > 0 && theses.length > 0" class="theses">
|
2017-08-13 14:03:38 +02:00
|
|
|
<div class="header-progress">
|
2017-08-25 22:45:04 +02:00
|
|
|
<div>
|
2017-08-27 15:54:43 +02:00
|
|
|
<span class="progress-current">{{ currentThesisStep }}</span>
|
2017-08-25 22:45:04 +02:00
|
|
|
<span>/{{ thesesCount }}</span>
|
|
|
|
</div>
|
|
|
|
<button
|
2020-06-14 03:13:52 +02:00
|
|
|
:disabled="currentThesis === 1"
|
2017-08-25 22:45:04 +02:00
|
|
|
class="btn-dark btn-small"
|
|
|
|
type="button"
|
2019-03-20 23:39:49 +01:00
|
|
|
@click="goBack"
|
|
|
|
>
|
2019-04-13 19:46:15 +02:00
|
|
|
{{ $t('theses.backBtn') }}
|
2017-08-25 22:45:04 +02:00
|
|
|
</button>
|
2017-08-13 14:03:38 +02:00
|
|
|
</div>
|
|
|
|
|
2019-04-13 20:07:30 +02:00
|
|
|
<div class="theses-content">
|
|
|
|
<header class="theses-header">
|
2017-08-25 22:45:04 +02:00
|
|
|
<h2>{{ thesisCategory }}</h2>
|
|
|
|
<h1>{{ thesisTitle }}</h1>
|
|
|
|
</header>
|
|
|
|
|
2019-04-13 20:07:30 +02:00
|
|
|
<div class="theses-controls">
|
|
|
|
<ul class="theses-btns">
|
2019-03-20 23:39:49 +01:00
|
|
|
<li v-for="option in options" :key="option.label">
|
2017-08-25 22:45:04 +02:00
|
|
|
<button type="button" @click="submitAnswer(option, $event)">
|
2019-03-25 11:23:02 +01:00
|
|
|
{{ option.label }} <component :is="'feather-' + option.icon" />
|
2017-08-25 22:45:04 +02:00
|
|
|
</button>
|
|
|
|
</li>
|
|
|
|
</ul>
|
|
|
|
<div class="controls-sub">
|
|
|
|
<button
|
|
|
|
class="btn-dark btn-small"
|
|
|
|
type="button"
|
2019-03-20 23:39:49 +01:00
|
|
|
@click="submitAnswer(optionSkip)"
|
|
|
|
>
|
2020-06-14 03:13:52 +02:00
|
|
|
{{ optionSkip.label }}
|
|
|
|
<feather-corner-up-right />
|
2017-08-13 14:03:38 +02:00
|
|
|
</button>
|
2017-08-25 22:45:04 +02:00
|
|
|
</div>
|
2017-08-14 22:28:12 +02:00
|
|
|
</div>
|
2017-08-13 14:03:38 +02:00
|
|
|
</div>
|
|
|
|
</section>
|
2020-06-14 03:13:52 +02:00
|
|
|
<section v-else>
|
|
|
|
<span>Loading...</span>
|
|
|
|
</section>
|
2017-08-13 14:03:38 +02:00
|
|
|
</template>
|
|
|
|
|
|
|
|
<script>
|
2020-06-14 03:13:52 +02:00
|
|
|
import { options } from '@/data'
|
2019-04-13 20:07:30 +02:00
|
|
|
import { getTranslatedUrl } from '@/i18n/helper'
|
2020-06-14 03:13:52 +02:00
|
|
|
import { apolloTheses, apolloThesesCount } from '@/app/euromat/helper'
|
2017-08-13 14:03:38 +02:00
|
|
|
|
|
|
|
export default {
|
|
|
|
name: 'EuroMat',
|
|
|
|
|
2019-03-25 11:23:02 +01:00
|
|
|
components: {
|
|
|
|
'feather-corner-up-right': () =>
|
|
|
|
import('vue-feather-icons/icons/CornerUpRightIcon' /* webpackChunkName: "icons" */),
|
|
|
|
'feather-circle': () =>
|
|
|
|
import('vue-feather-icons/icons/CircleIcon' /* webpackChunkName: "icons" */),
|
|
|
|
'feather-thumbs-up': () =>
|
|
|
|
import('vue-feather-icons/icons/ThumbsUpIcon' /* webpackChunkName: "icons" */),
|
|
|
|
'feather-thumbs-down': () =>
|
|
|
|
import('vue-feather-icons/icons/ThumbsDownIcon' /* webpackChunkName: "icons" */)
|
|
|
|
},
|
|
|
|
|
2017-08-13 14:03:38 +02:00
|
|
|
data () {
|
|
|
|
return {
|
2020-06-14 03:13:52 +02:00
|
|
|
currentThesis: 1,
|
|
|
|
theses: [],
|
|
|
|
thesesCount: 0,
|
2017-08-13 14:03:38 +02:00
|
|
|
answers: []
|
|
|
|
}
|
|
|
|
},
|
|
|
|
|
2020-06-14 03:13:52 +02:00
|
|
|
apollo: {
|
|
|
|
theses: apolloTheses,
|
|
|
|
thesesCount: apolloThesesCount
|
|
|
|
},
|
|
|
|
|
2017-08-13 14:03:38 +02:00
|
|
|
computed: {
|
2019-05-05 16:39:12 +02:00
|
|
|
isEmbedded () {
|
|
|
|
return (
|
|
|
|
this.$route.query.embedded &&
|
|
|
|
this.$route.query.embedded === 'iframe'
|
|
|
|
)
|
|
|
|
},
|
2017-08-27 15:54:43 +02:00
|
|
|
currentThesisStep () {
|
2020-06-14 03:13:52 +02:00
|
|
|
return this.currentThesis
|
2017-08-27 15:54:43 +02:00
|
|
|
},
|
2017-08-13 14:03:38 +02:00
|
|
|
thesisTitle () {
|
2020-06-14 03:13:52 +02:00
|
|
|
if (this.currentThesis > this.thesesCount) {
|
2017-08-13 14:03:38 +02:00
|
|
|
return
|
|
|
|
}
|
2017-08-16 21:13:04 +02:00
|
|
|
return this.getThesis(this.currentThesis).thesis[this.$i18n.locale]
|
2017-08-13 14:03:38 +02:00
|
|
|
},
|
2017-08-25 22:45:04 +02:00
|
|
|
thesisCategory () {
|
2020-06-14 03:13:52 +02:00
|
|
|
if (this.currentThesis > this.thesesCount) {
|
2017-08-25 22:45:04 +02:00
|
|
|
return
|
|
|
|
}
|
|
|
|
return this.getThesis(this.currentThesis).category[this.$i18n.locale]
|
|
|
|
},
|
2017-08-13 15:44:03 +02:00
|
|
|
options () {
|
2017-08-14 22:28:12 +02:00
|
|
|
return options.map(option =>
|
2017-08-13 15:44:03 +02:00
|
|
|
Object.assign({}, option, {
|
2019-04-13 19:46:15 +02:00
|
|
|
label: this.$t(`theses.${option.position}`),
|
2017-08-25 22:45:04 +02:00
|
|
|
icon: this.getIconName(option.position)
|
2017-08-13 15:44:03 +02:00
|
|
|
}))
|
2019-03-20 23:39:49 +01:00
|
|
|
.filter(option => option.position !== 'skipped')
|
2017-08-13 15:44:03 +02:00
|
|
|
},
|
2017-08-13 14:03:38 +02:00
|
|
|
optionSkip () {
|
2019-04-13 19:46:15 +02:00
|
|
|
const skipped = options.find(option => option.position === 'skipped')
|
|
|
|
return Object.assign({}, skipped, {
|
|
|
|
label: this.$t('theses.skipped')
|
|
|
|
})
|
2017-08-13 14:03:38 +02:00
|
|
|
}
|
|
|
|
},
|
|
|
|
|
|
|
|
methods: {
|
2017-08-25 22:45:04 +02:00
|
|
|
getIconName (type) {
|
|
|
|
switch (type) {
|
|
|
|
case 'positive': return 'thumbs-up'
|
|
|
|
case 'neutral': return 'circle'
|
|
|
|
case 'negative': return 'thumbs-down'
|
|
|
|
case 'skipped': return 'corner-up-right'
|
2019-03-20 23:39:49 +01:00
|
|
|
default:
|
2017-08-25 22:45:04 +02:00
|
|
|
}
|
|
|
|
},
|
2017-08-14 22:28:12 +02:00
|
|
|
getThesis (id) {
|
2020-06-14 03:13:52 +02:00
|
|
|
return this.theses.find(t => t.id === id)
|
2017-08-14 22:28:12 +02:00
|
|
|
},
|
|
|
|
goBack () {
|
|
|
|
const thesis = this.getThesis(this.currentThesis)
|
|
|
|
const index = this.answers.findIndex(a => a.thesis === thesis.id)
|
|
|
|
this.answers.splice(index, 1)
|
|
|
|
this.currentThesis -= 1
|
|
|
|
},
|
2017-08-13 14:03:38 +02:00
|
|
|
submitAnswer (option, event) {
|
|
|
|
if (!option) {
|
2019-04-10 10:21:27 +02:00
|
|
|
// eslint-disable-next-line
|
2017-08-13 14:03:38 +02:00
|
|
|
return console.warn('Invalid answer')
|
|
|
|
}
|
|
|
|
|
2017-08-14 22:28:12 +02:00
|
|
|
const thesis = this.getThesis(this.currentThesis)
|
2017-08-13 21:42:02 +02:00
|
|
|
this.answers.push({ thesis: thesis.id, position: option.position })
|
2017-08-13 14:03:38 +02:00
|
|
|
this.currentThesis += 1
|
|
|
|
event && event.target.blur()
|
2017-08-27 23:03:48 +02:00
|
|
|
window.scrollTo(0, 0)
|
2017-08-27 15:54:43 +02:00
|
|
|
|
2020-06-14 03:13:52 +02:00
|
|
|
if (this.currentThesis > this.thesesCount) {
|
2017-08-27 15:54:43 +02:00
|
|
|
this.forwardToResults()
|
|
|
|
}
|
2017-08-13 14:03:38 +02:00
|
|
|
},
|
|
|
|
forwardToResults () {
|
2017-09-05 00:33:31 +02:00
|
|
|
const answers = JSON.stringify(this.answers)
|
|
|
|
|
|
|
|
if (this.$browser.supports('sessionStorage')) {
|
|
|
|
sessionStorage.setItem('euromat-answers', answers)
|
|
|
|
} else {
|
|
|
|
this.$root.$data.backupStorage.answers = answers
|
|
|
|
}
|
|
|
|
|
2019-04-13 20:07:30 +02:00
|
|
|
this.$router.push({
|
2019-05-05 16:39:12 +02:00
|
|
|
path: getTranslatedUrl('emphasis', getTranslatedUrl('theses', null, true)),
|
|
|
|
query: this.isEmbedded ? { embedded: 'iframe' } : {}
|
2017-08-15 22:59:50 +02:00
|
|
|
})
|
2017-08-13 14:03:38 +02:00
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
</script>
|
|
|
|
|
|
|
|
<style lang="scss" scoped>
|
2019-03-20 23:19:13 +01:00
|
|
|
@import "~@/styles/fonts";
|
|
|
|
@import "~@/styles/colors";
|
|
|
|
@import "~@/styles/layout";
|
2017-08-13 14:03:38 +02:00
|
|
|
|
2017-08-25 23:28:07 +02:00
|
|
|
$breakpoint: 835px;
|
|
|
|
|
2019-04-13 20:07:30 +02:00
|
|
|
.theses {
|
2017-08-25 22:45:04 +02:00
|
|
|
display: flex;
|
|
|
|
align-items: flex-start;
|
2017-08-25 23:28:07 +02:00
|
|
|
|
|
|
|
@media (max-width: $breakpoint) {
|
|
|
|
flex-direction: column;
|
|
|
|
}
|
2017-08-25 22:45:04 +02:00
|
|
|
}
|
|
|
|
|
2017-08-13 14:03:38 +02:00
|
|
|
.header-progress {
|
2017-08-25 22:45:04 +02:00
|
|
|
flex: 1 0 100px;
|
2017-08-13 14:03:38 +02:00
|
|
|
display: flex;
|
2017-08-25 22:45:04 +02:00
|
|
|
flex-direction: column;
|
|
|
|
align-items: flex-end;
|
|
|
|
margin-right: $base-gap * 2;
|
|
|
|
color: $text-color-secondary;
|
|
|
|
|
2017-08-25 23:28:07 +02:00
|
|
|
@media (max-width: $breakpoint) {
|
|
|
|
flex: 1;
|
|
|
|
width: 100%;
|
|
|
|
flex-direction: row;
|
|
|
|
justify-content: space-between;
|
|
|
|
margin-right: 0;
|
|
|
|
margin-bottom: 0;
|
|
|
|
}
|
|
|
|
|
2017-08-25 22:45:04 +02:00
|
|
|
> div {
|
|
|
|
display: flex;
|
|
|
|
}
|
2017-08-13 14:03:38 +02:00
|
|
|
|
|
|
|
span {
|
2017-08-25 22:45:04 +02:00
|
|
|
font-size: $font-size-large;
|
|
|
|
font-weight: 600;
|
|
|
|
display: inline;
|
2017-08-25 23:28:07 +02:00
|
|
|
|
|
|
|
@media (max-width: $breakpoint) {
|
|
|
|
font-size: $font-size-large - 50%;
|
|
|
|
}
|
2017-08-25 22:45:04 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
.progress-current {
|
|
|
|
color: $text-color-special;
|
2017-08-13 14:03:38 +02:00
|
|
|
}
|
2017-08-25 22:45:04 +02:00
|
|
|
|
|
|
|
button {
|
2017-08-26 00:18:00 +02:00
|
|
|
margin-top: $base-gap + 5;
|
2017-08-25 23:28:07 +02:00
|
|
|
|
|
|
|
@media (max-width: $breakpoint) {
|
|
|
|
margin-top: 0;
|
|
|
|
margin-left: $base-gap;
|
|
|
|
}
|
2017-08-25 22:45:04 +02:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2019-04-13 20:07:30 +02:00
|
|
|
.theses-content {
|
2017-08-25 22:45:04 +02:00
|
|
|
text-align: left;
|
2019-05-01 14:05:39 +02:00
|
|
|
width: 100%;
|
2017-08-13 14:03:38 +02:00
|
|
|
}
|
|
|
|
|
2019-04-13 20:07:30 +02:00
|
|
|
.theses-header {
|
2017-08-25 22:45:04 +02:00
|
|
|
margin-bottom: $base-gap + 5;
|
|
|
|
text-align: left;
|
|
|
|
|
2019-05-02 19:26:36 +02:00
|
|
|
h1, h2 {
|
2017-09-02 14:25:39 +02:00
|
|
|
overflow-wrap: break-word;
|
|
|
|
}
|
|
|
|
|
2017-08-25 22:45:04 +02:00
|
|
|
h2 {
|
|
|
|
margin-bottom: $base-gap;
|
|
|
|
}
|
2017-08-13 14:03:38 +02:00
|
|
|
}
|
|
|
|
|
2019-04-13 20:07:30 +02:00
|
|
|
.theses-controls {
|
2017-08-13 14:03:38 +02:00
|
|
|
display: flex;
|
|
|
|
flex-direction: column;
|
|
|
|
justify-content: center;
|
2017-08-25 22:45:04 +02:00
|
|
|
align-items: flex-start;
|
2017-08-13 14:03:38 +02:00
|
|
|
}
|
|
|
|
|
2017-08-14 22:28:12 +02:00
|
|
|
.controls-sub {
|
|
|
|
display: flex;
|
|
|
|
margin-top: $small-gap;
|
|
|
|
|
|
|
|
button:first-of-type {
|
|
|
|
margin-right: $small-gap;
|
|
|
|
}
|
2017-08-13 14:03:38 +02:00
|
|
|
}
|
|
|
|
|
2019-04-13 20:07:30 +02:00
|
|
|
.theses-btns {
|
2017-08-13 14:03:38 +02:00
|
|
|
list-style: none;
|
|
|
|
display: flex;
|
|
|
|
justify-content: center;
|
|
|
|
|
|
|
|
li:not(:last-child) {
|
2017-08-14 22:28:12 +02:00
|
|
|
margin-right: $small-gap;
|
2017-08-13 14:03:38 +02:00
|
|
|
}
|
2017-08-25 23:28:07 +02:00
|
|
|
|
|
|
|
@media (max-width: $breakpoint) {
|
|
|
|
flex-direction: column;
|
|
|
|
margin-bottom: $base-gap;
|
|
|
|
|
|
|
|
li:not(:last-child) {
|
|
|
|
margin-right: 0;
|
|
|
|
margin-bottom: $small-gap;
|
|
|
|
}
|
|
|
|
}
|
2017-08-13 14:03:38 +02:00
|
|
|
}
|
|
|
|
</style>
|