UI: create judge vote form

[Manggigi]

• let isJudge = true

• if isJudge = false show existing participants UI, hide the dropdown for participants

• if isJudge = true show judge UI, show dropdown for select current team (copy dropdown)

• comment prop

• score prop

log onsubmit


[Frostzeichen]

I'll separate this into three branches to reduce task complexity:

• [ ] basic judge ui (just a simple form that makes a new instance of judgeVote upon submit)
• [ ] judge check (checks if current logged-in user has a linked judge id on an ongoing/upcoming hackathon)
• [ ] basic judge design (use Skeleton to add some colors and stuff)

[Manggigi]

JudgeVote.svelte

<script lang="ts">
    import { fade } from 'svelte/transition';
    import { getModalStore } from '@skeletonlabs/skeleton';
    const modalStore = getModalStore();

    const handleSubmit = () => {
        // function here to submit vote

        modalStore.close();
    };
</script>

<div
    transition:fade={{ duration: 300 }}
    class="relative z-10"
    aria-labelledby="modal-title"
    role="dialog"
    aria-modal="true"
>
    <!--
    Background backdrop, show/hide based on modal state.

    Entering: "ease-out duration-300"
      From: "opacity-0"
      To: "opacity-100"
    Leaving: "ease-in duration-200"
      From: "opacity-100"
      To: "opacity-0"
  -->
    <div class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity"></div>

    <div class="fixed inset-0 z-10 w-screen overflow-y-auto">
        <div class="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
            <!--
        Modal panel, show/hide based on modal state.

        Entering: "ease-out duration-300"
          From: "opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
          To: "opacity-100 translate-y-0 sm:scale-100"
        Leaving: "ease-in duration-200"
          From: "opacity-100 translate-y-0 sm:scale-100"
          To: "opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
      -->
            <div
                class="relative transform overflow-hidden rounded-lg bg-white px-4 pb-4 pt-5 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-lg sm:p-6"
            >
                <div>
                    <div class="mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-green-100">
                        <svg
                            class="h-6 w-6 text-green-600"
                            fill="none"
                            viewBox="0 0 24 24"
                            stroke-width="1.5"
                            stroke="currentColor"
                            aria-hidden="true"
                        >
                            <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5" />
                        </svg>
                    </div>
                    <div class="mt-3 text-center sm:mt-5">
                        <h3 class="text-base font-semibold leading-6 text-gray-900" id="modal-title">
                            Payment successful
                        </h3>
                        <div class="mt-2">
                            <p class="text-sm text-gray-500">
                                details: {JSON.stringify($modalStore[0]?.meta)}
                            </p>
                        </div>
                    </div>
                </div>
                <div class="mt-5 sm:mt-6 sm:grid sm:grid-flow-row-dense sm:grid-cols-2 sm:gap-3">
                    <button
                        on:click={handleSubmit}
                        type="button"
                        class="inline-flex w-full justify-center rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600 sm:col-start-2"
                        >Submit Vote</button
                    >
                    <button
                        on:click={() => modalStore.close()}
                        type="button"
                        class="mt-3 inline-flex w-full justify-center rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50 sm:col-start-1 sm:mt-0"
                        >Cancel</button
                    >
                </div>
            </div>
        </div>
    </div>
</div>

[Manggigi]

/vote

const modalStore = getModalStore();
    const handleChangeTeam = (team: HackathonTeam) => {
        const modal: ModalSettings = {
            type: 'component',
            component: 'judgeVote',
            meta: {
                team: team,
                userId: data.user?.id
            }
        };
        modalStore.trigger(modal);
    };

[Manggigi]

layout.svelte

    import JudgeVote from '@components/JudgeVote.svelte';
    import { initializeStores, storePopup, type ModalComponent, Modal } from '@skeletonlabs/skeleton';

    initializeStores();

    const modalRegistry: Record<string, ModalComponent> = {
        // Set a unique modal ID, then pass the component reference
        judgeVote: { ref: JudgeVote }
    };
</script>

<Modal components={modalRegistry} />