Rescue Agency Vue Component Library

# poll

This component adds a poll that is taken from the Over The Dose site.

# Example

<poll :title="title" :options="options"></poll>

Which Fact Surprised You The Most?

Opioids include many different prescription drugs.
Opioids and heroin affect your brain the same way.
It’s very easy to get addicted to opioids.
Taking opioids not as prescribed can increase the risk of overdose and death.
Mixing depressants can greatly increase the risk of overdose and death.
Mixing prescription opioids & alcohol can lead to an overdose and death.
Selling leftover prescription opioids can lead to jail time.

# props

title (required) the title of the poll

options (required) an array of poll options

  • slug: unique identifier for a poll option
  • label: the title or label
  • iconWrapClass: class names that wrap the icon
  • icon: the icon class
  • answer: the answer of the poll option
  • votes: the amount of votes for the poll option

# Source Code

<template>
    <div class="poll">
        <h2>{{title}}</h2>

        <div class="poll-option" v-for="option in options" :key="option.slug">
            <div :class="option.iconWrapClass">
                <span :class="option.icon"></span>
            </div>
            <div class="vote" v-if="!voted">
                <span>{{option.answer}}</span>
                <span>
                    <button @click="vote(option)">Vote</button>
                </span>
            </div>
            <div class="result" v-if="voted">
                <span class="bar" v-bind:style="{ width: getPercent(option.slug) + '%' }"></span>
                <span class="percent">{{ getPercent(option.slug) }}%</span>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: "poll",
    props: {
        title: {
            type: String,
            default: ''
        },
        options: {
            type: Array,
            default: () => []
        },
        voted: {
            type: Boolean,
            default: false
        }
    },
    methods: {
        vote: function(option) {
            this.$emit('vote', option);
        },
        getPercent: function(slug) {
            return this.percents.find((percent) => percent.slug === slug).percent;
        }
    },
    computed: {
        percents: function() {
            const total = this.options.map((option) => option.votes)
                .reduce((acc, current) => acc + current);

            return this.options.map((option) => {
                const { slug, votes } = option;
                return { slug, percent: Math.floor(votes / total * 100) };
            });
        }
    }
};
</script>

<style scoped lang="scss">
.poll {
    text-align: center;
}

.poll-option {
    display: flex;

    .bar {
        height: 1em;
        position: relative;
        background: blue;
    }
}

.vote, .result {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
</style>

← hero →