|
| 1 | +<!-- eslint-disable vue/multi-word-component-names --> |
| 2 | +<template> |
| 3 | + <loading |
| 4 | + v-show="submitInProgress" |
| 5 | + v-model:active="submitInProgress" |
| 6 | + :is-full-page="true" |
| 7 | + class="realign-spinner" |
| 8 | + > |
| 9 | + <img class="spinner" src="@/assets/images/SpinningBikeV1.svg" alt="Loading..." /> |
| 10 | + </loading> |
| 11 | + |
| 12 | + <div class="queue-page"> |
| 13 | + <div v-if="submitSuccess"> |
| 14 | + A new BikeTag round for {{ getGameNameProper }} has been created! |
| 15 | + <bike-tag-button @click="router.push({ name: 'Home' })"> |
| 16 | + Go to the Home Page |
| 17 | + </bike-tag-button> |
| 18 | + </div> |
| 19 | + |
| 20 | + <div v-else> |
| 21 | + <h2>Start a New Round for {{ getGameNameProper }}</h2> |
| 22 | + |
| 23 | + <EditBikeTag :tag="newTag" @update="onFieldUpdate" /> |
| 24 | + |
| 25 | + <bike-tag-button variant="light" class="big-btn" @click="onSubmitClick"> |
| 26 | + Submit New Round |
| 27 | + </bike-tag-button> |
| 28 | + </div> |
| 29 | + |
| 30 | + <form |
| 31 | + ref="submitError" |
| 32 | + name="new-round-error" |
| 33 | + action="new-round-error" |
| 34 | + method="POST" |
| 35 | + data-netlify="true" |
| 36 | + data-netlify-honeypot="bot-field" |
| 37 | + hidden |
| 38 | + > |
| 39 | + <input type="hidden" name="form-name" value="new-round-error" /> |
| 40 | + <input type="hidden" name="ambassadorId" :value="getAmbassadorId" /> |
| 41 | + <input type="hidden" name="message" /> |
| 42 | + <input type="hidden" name="ip" value="" /> |
| 43 | + </form> |
| 44 | + </div> |
| 45 | +</template> |
| 46 | + |
| 47 | +<script setup name="NewRound"> |
| 48 | +import { computed, inject, onMounted, reactive, ref } from 'vue' |
| 49 | +import { useI18n } from 'vue-i18n' |
| 50 | +import { useRouter } from 'vue-router' |
| 51 | +
|
| 52 | +import { sendNetlifyError, sendNetlifyForm } from '@/common' |
| 53 | +import { useBikeTagStore } from '@/store/index' |
| 54 | +
|
| 55 | +import BikeTagButton from '@/components/BikeTagButton.vue' |
| 56 | +import EditBikeTag from '@/components/EditBikeTag.vue' |
| 57 | +import Loading from 'vue-loading-overlay' |
| 58 | +
|
| 59 | +const store = useBikeTagStore() |
| 60 | +const router = useRouter() |
| 61 | +const toast = inject('toast') |
| 62 | +const { t } = useI18n() |
| 63 | +
|
| 64 | +const submitInProgress = ref(false) |
| 65 | +const submitSuccess = ref(false) |
| 66 | +const submitError = ref(null) |
| 67 | +
|
| 68 | +const getGameName = computed(() => store.getGameName) |
| 69 | +const getGameNameProper = computed(() => store.getGameNameProper) |
| 70 | +const getAmbassadorId = computed(() => store.getAmbassadorId) |
| 71 | +
|
| 72 | +const newTag = reactive({ |
| 73 | + game: getGameName.value, |
| 74 | + tagnumber: null, |
| 75 | + foundPlayer: '', |
| 76 | + foundTime: 0, |
| 77 | + foundLocation: '', |
| 78 | + foundImageUrl: '', |
| 79 | + mysteryPlayer: '', |
| 80 | + mysteryTime: 0, |
| 81 | + mysteryLocation: '', |
| 82 | + mysteryImageUrl: '', |
| 83 | + hint: '', |
| 84 | +}) |
| 85 | +
|
| 86 | +async function onFieldUpdate({ field, value }) { |
| 87 | + newTag[field] = value |
| 88 | +} |
| 89 | +
|
| 90 | +async function onSubmitClick() { |
| 91 | + submitInProgress.value = true |
| 92 | + const errorAction = submitError.value.getAttribute('action') |
| 93 | +
|
| 94 | + const result = await store.createNewRoundTag(newTag) |
| 95 | + submitInProgress.value = false |
| 96 | +
|
| 97 | + if (result === true) { |
| 98 | + store.resetBikeTagCache() |
| 99 | + return sendNetlifyForm( |
| 100 | + 'new-round-success', |
| 101 | + `game=${getGameName.value}`, |
| 102 | + () => { |
| 103 | + toast.open({ |
| 104 | + message: 'New round submitted!', |
| 105 | + type: 'success', |
| 106 | + position: 'top', |
| 107 | + }) |
| 108 | + submitSuccess.value = true |
| 109 | + }, |
| 110 | + (m) => { |
| 111 | + toast.open({ |
| 112 | + message: `${t('notifications.error')} ${m}`, |
| 113 | + type: 'error', |
| 114 | + duration: 10000, |
| 115 | + timeout: false, |
| 116 | + position: 'bottom', |
| 117 | + }) |
| 118 | + return sendNetlifyError(m, undefined, errorAction) |
| 119 | + } |
| 120 | + ) |
| 121 | + } else { |
| 122 | + const message = `Error creating new round: ${result}` |
| 123 | + toast.open({ |
| 124 | + message, |
| 125 | + type: 'error', |
| 126 | + duration: 10000, |
| 127 | + timeout: false, |
| 128 | + position: 'bottom', |
| 129 | + }) |
| 130 | + console.error(message) |
| 131 | + return sendNetlifyError(message, undefined, errorAction) |
| 132 | + } |
| 133 | +} |
| 134 | +
|
| 135 | +onMounted(async () => { |
| 136 | + await store.isReady() |
| 137 | + newTag.tagnumber = store.getCurrentBikeTag?.tagnumber ?? 1 |
| 138 | +}) |
| 139 | +</script> |
| 140 | +
|
| 141 | +<style scoped> |
| 142 | +.biketag-container { |
| 143 | + max-width: clamp(80vw, 80vw, 500px); |
| 144 | + margin: auto; |
| 145 | +} |
| 146 | +</style> |
0 commit comments