Nearly finished app

client/src/views/results/compare-answers/CompareQuestion.vue

@@ -0,0 +1,125 @@
+<script>
+    import { useQuestionStore } from '@/stores/questions.js'
+    import { useAnswersStore } from '@/stores/answers.js'
+    import { useAppStore } from '@/stores/app.js'
+    import Content from '@/components/Content.vue'
+    import Header from '@/components/Header.vue'
+    import TextFrame from '@/components/TextFrame.vue'
+    import ArrowLeftBold from '@/components/icons/ArrowLeftBold.vue'
+    import ArrowRightBold from '@/components/icons/ArrowRightBold.vue'
+
+    export default {
+        name: 'CompareQuestion',
+        components: {
+            ArrowLeftBold,
+            ArrowRightBold,
+            Content,
+            Header,
+            TextFrame
+        },
+        setup() {
+            const questionStore = useQuestionStore()
+            const answersStore = useAnswersStore()
+            const appStore = useAppStore()
+
+            return {
+                questionStore,
+                answersStore,
+                appStore
+            }
+        },
+        methods: {
+            optionSelected(id, index) {
+                if (Array.isArray(this.answersStore.answers[id])) {
+                    return this.answersStore.answers[id].includes(index)
+                }
+                return this.answersStore.answers[id] == index
+            }
+        },
+        mounted() {
+            this.appStore.compareCurrent = this.id
+            this.$watch(
+                () => this.$route.params, (toParams, previousParams) => {
+                    if (this.$route.name == 'CompareQuestion') {
+                        if (toParams.id >= this.questionStore.questions.length || this.id < 0) {
+                            this.$router.push('/err_notfound')
+                        } else {
+                            this.appStore.compareCurrent = toParams.id
+                        }
+                    }
+                }
+            )
+        },
+        props: {
+            id: {
+                type: Number,
+                required: true
+            }
+        }
+    }
+</script>
+<template>
+    <TextFrame>
+        <Header>
+            Compare Answers
+        </Header>
+        <Content>
+            <div v-if="questionStore.questions[this.id] && answersStore.answers[this.id] != null && appStore.answers[this.id]">
+                <article class="prose">
+                    <h3>Question {{ this.id + 1}}</h3>
+                    <div v-html="questionStore.questions[this.id].question"></div>
+                </article>
+                <div class="grid grid-cols-1 content-evenly items-center gap-2 justify-between mt-12 mx-auto lg:grid-cols-2">
+                    <div v-for="(answer, index) in questionStore.questions[this.id].answers" :key="`q${this.id}-o${index}`" class="inline-flex justify-between rounded-md bg-lime-200" :style="`background: linear-gradient(to right, rgb(217 249 157) ${100*this.appStore.answers[this.id][index] / this.appStore.count}%, transparent ${100*this.appStore.answers[this.id][index] / this.appStore.count+3}%)`">
+                        <div v-html="answer" class="flex uncial-antiqua h-full p-2 select-none transition-all duration-100 ease-in-out" :class=" optionSelected(this.id, index) ? 'option-selected' : '' " :aria-label="answer" :title="answer"></div>
+                        <div class="flex p-2 w-fit items-center" style="white-space:nowrap;">{{ Math.round(100*this.appStore.answers[this.id][index] / this.appStore.count) }} &#37;</div>
+                    </div>
+                </div>
+                <div class="text-center mt-6 mb-12 text-lg text-gray-600">
+                    From of {{ this.appStore.count }} users.
+                </div>
+                <div class="w-full flex mx-auto items-center justify-between max-w-sm">
+                    <router-link :to="`/results/answers/${this.id-1}`" v-if="this.id > 0">
+                        <div class="inline-flex h-full px-3 py-1 space-x-1 rounded-md bg-lime-800 text-white items-center transition-all duration-300 ease-in-out hover:bg-lime-600" title="Back">
+                            <span class="scale-100">
+                                <ArrowLeftBold/>
+                            </span>
+                            <span class="uncial-antiqua">Back</span>
+                        </div>
+                    </router-link>
+                    <div class="inline-flex h-full px-3 py-1 space-x-1 rounded-md bg-lime-800 opacity-50 text-white items-center hover:cursor-not-allowed" v-else>
+                        <span class="scale-100">
+                            <ArrowLeftBold/>
+                        </span>
+                        <span class="uncial-antiqua">Back</span>
+                    </div>
+                    <router-link :to="`/results/answers/${this.id+1}`" v-if="this.id < this.questionStore.questions.length - 1">
+                        <div class="inline-flex h-full px-3 py-1 space-x-1 rounded-md bg-lime-800 text-white items-center transition-all duration-300 ease-in-out hover:bg-lime-600" title="Next">
+                            <span class="uncial-antiqua">Next</span>
+                            <span class="scale-100">
+                                <ArrowRightBold/>
+                            </span>
+                        </div>
+                    </router-link>
+                    <div class="inline-flex h-full px-3 py-1 space-x-1 rounded-md bg-lime-800 opacity-50 text-white items-center hover:cursor-not-allowed" v-else>
+                        <span class="uncial-antiqua">Next</span>
+                        <span class="scale-100">
+                            <ArrowRightBold/>
+                        </span>
+                    </div>
+                </div>
+            </div>
+            <div v-else>
+
+            </div>
+        </Content>
+    </TextFrame>
+</template>
+<style scoped>
+    .option-selected {
+        @apply border-lime-600;
+        @apply border-solid;
+        @apply border-l-2;
+        @apply text-orange-600;
+    }
+</style>