magnetar/fe_calckey/frontend/client/src/components/MkPoll.vue

<template>
    <div class="tivcixzd" :class="{ done: closed || isVoted }">
        <ul>
            <li
                v-for="(choice, i) in magTransProperty(
                    note.poll,
                    'options',
                    'choices'
                )"
                :key="i"
                :class="{ voted: magTransProperty(choice, 'voted', 'isVoted') }"
                @click.stop="vote(i)"
            >
                <div
                    class="backdrop"
                    :style="{
                        width: `${
                            showResult
                                ? (magTransProperty(
                                      choice,
                                      'votes_count',
                                      'votes'
                                  ) /
                                      total) *
                                  100
                                : 0
                        }%`,
                    }"
                ></div>
                <span>
                    <template
                        v-if="magTransProperty(choice, 'voted', 'isVoted')"
                        ><i class="ph-check ph-bold ph-lg"></i
                    ></template>
                    <Mfm
                        :text="magTransProperty(choice, 'title', 'text')"
                        :plain="true"
                        :custom-emojis="note.emojis"
                    />
                    <span v-if="showResult" class="votes"
                        >({{
                            i18n.t("_poll.votesCount", {
                                n: magTransProperty(
                                    choice,
                                    "votes_count",
                                    "votes"
                                ),
                            })
                        }})</span
                    >
                </span>
            </li>
        </ul>
        <p v-if="!readOnly">
            <span>{{ i18n.t("_poll.totalVotes", { n: total }) }}</span>
            <span v-if="!closed && !isVoted">
                <span> · </span>
                <a @click.stop="showResult = !showResult">{{
                    showResult ? i18n.ts._poll.vote : i18n.ts._poll.showResult
                }}</a>
            </span>
            <span v-if="!isLocal">
                <span> · </span>
                <a v-if="!pollRefreshing" @click.stop="refresh">{{
                    i18n.ts.reload
                }}</a>
                <i
                    v-else
                    class="ph-circle-notch ph-bold ph-lg fa-pulse ph-fw ph-lg"
                ></i>
            </span>
            <span v-if="isVoted"> · {{ i18n.ts._poll.voted }}</span>
            <span v-else-if="closed"> · {{ i18n.ts._poll.closed }}</span>
            <span v-if="remaining > 0"> · {{ timer }}</span>
        </p>
    </div>
</template>

<script lang="ts" setup>
import { computed, ref } from "vue";
import * as misskey from "calckey-js";
import { sum } from "@/scripts/array";
import { pleaseLogin } from "@/scripts/please-login";
import * as os from "@/os";
import { i18n } from "@/i18n";
import { useInterval } from "@/scripts/use-interval";
import { packed } from "magnetar-common";
import { magTransProperty } from "@/scripts-mag/mag-util";

const props = defineProps<{
    note:
        | (packed.PackNoteMaybeFull & { poll: {} })
        | (misskey.entities.Note &
              Required<Pick<misskey.entities.Note, "poll">>);
    readOnly?: boolean;
}>();

const pollRefreshing = ref(false);
const remaining = ref(-1);

const total = computed(() =>
    sum(
        magTransProperty(props.note.poll, "options", "choices").map(
            (x) => magTransProperty(x, "votes_count", "votes") as number
        )
    )
);
const closed = computed(() => remaining.value === 0);
const isLocal = computed(() => !props.note.uri);
const isVoted = computed(
    () =>
        !magTransProperty(props.note.poll, "multiple_choice", "multiple") &&
        magTransProperty(props.note.poll, "options", "choices").some(
            (c) => magTransProperty(c, "voted", "isVoted") ?? false
        )
);
const timer = computed(() =>
    i18n.t(
        remaining.value >= 86400
            ? "_poll.remainingDays"
            : remaining.value >= 3600
            ? "_poll.remainingHours"
            : remaining.value >= 60
            ? "_poll.remainingMinutes"
            : "_poll.remainingSeconds",
        {
            s: Math.floor(remaining.value % 60),
            m: Math.floor(remaining.value / 60) % 60,
            h: Math.floor(remaining.value / 3600) % 24,
            d: Math.floor(remaining.value / 86400),
        }
    )
);

const showResult = ref(props.readOnly || isVoted.value);

// 期限付きアンケート
if (magTransProperty(props.note.poll, "expires_at", "expiresAt")) {
    const tick = () => {
        remaining.value = Math.floor(
            Math.max(
                new Date(
                    magTransProperty(
                        props.note.poll,
                        "expires_at",
                        "expiresAt"
                    )!
                ).getTime() - Date.now(),
                0
            ) / 1000
        );
        if (remaining.value === 0) {
            showResult.value = true;
        }
    };

    useInterval(tick, 3000, {
        immediate: true,
        afterMounted: false,
    });
}

async function refresh() {
    if (!props.note.uri) return;

    pollRefreshing.value = true;

    os.api("ap/show", { uri: props.note.uri })
        .then((obj) => {
            if (obj && obj.type === "Note" && obj.object.poll) {
                props.note.poll = obj.object.poll;
            }
        })
        .catch((err) => {
            os.alert({
                type: "error",
                text: err.message + "\n" + (err as any).id,
            });
        })
        .finally(() => {
            pollRefreshing.value = false;
        });
}

const vote = async (id: number) => {
    pleaseLogin();

    if (props.readOnly || closed.value || isVoted.value) return;

    const { canceled } = await os.confirm({
        type: "question",
        text: i18n.t("voteConfirm", {
            choice: magTransProperty(
                magTransProperty(props.note.poll, "options", "choices")[id],
                "title",
                "text"
            ),
        }),
    });
    if (canceled) return;

    await os.api("notes/polls/vote", {
        noteId: props.note.id,
        choice: id,
    });
    if (!showResult.value)
        showResult.value = !magTransProperty(
            props.note.poll,
            "multiple_choice",
            "multiple"
        );
};
</script>

<style lang="scss" scoped>
.tivcixzd {
    > ul {
        display: block;
        margin: 0;
        padding: 0;
        list-style: none;

        > li {
            display: block;
            position: relative;
            margin: 4px 0;
            padding: 4px;
            //border: solid 0.5px var(--divider);
            background: var(--accentedBg);
            border-radius: 4px;
            overflow: hidden;
            cursor: pointer;

            > .backdrop {
                position: absolute;
                top: 0;
                left: 0;
                height: 100%;
                background: var(--accent);
                background: linear-gradient(
                    90deg,
                    var(--buttonGradateA),
                    var(--buttonGradateB)
                );
                transition: width 1s ease;
            }

            > span {
                position: relative;
                display: inline-block;
                padding: 3px 5px;
                background: var(--panel);
                border-radius: 3px;

                > i {
                    margin-right: 4px;
                    color: var(--accent);
                }

                > .votes {
                    margin-left: 4px;
                    opacity: 0.7;
                }
            }
        }
    }

    > p {
        color: var(--fg);

        a {
            color: inherit;
        }
    }

    &.done {
        > ul > li {
            cursor: default;
        }
    }
}
</style>