349 lines
10 KiB
Vue
349 lines
10 KiB
Vue
<script setup lang="ts">
|
|
import { compressImage, createImageURL } from '#shared/utils/image';
|
|
import ClickableImage from '~/components/ClickableImage.vue';
|
|
import MultilineString from '~/components/MultilineString.vue';
|
|
import { useI18nKey } from '~/composables/useI18nKey';
|
|
import { useTitleStore } from '~/stores/title';
|
|
import { fullDate } from '~~/server/utils/date';
|
|
|
|
definePageMeta({
|
|
middleware: ['auth'],
|
|
keepalive: false
|
|
});
|
|
|
|
const app = useNuxtApp();
|
|
|
|
const { user } = useUserSession();
|
|
const { huntSlug, questSlug } = app.$slugData;
|
|
|
|
const { t, d, locale } = useI18n();
|
|
const { tKey, hasKey, tSluggy } = useI18nKey();
|
|
|
|
const titleStore = useTitleStore();
|
|
|
|
const { data, pending, refresh, error } = await useFetch(
|
|
`/api/quest/${questSlug?.id}`
|
|
);
|
|
|
|
titleStore.title = data.value ? tKey(data.value, 'title').value : undefined;
|
|
|
|
useHead({
|
|
title: t('layouts.title', {
|
|
title:
|
|
[
|
|
hasKey(data.value, 'title')
|
|
? tKey(data.value, 'title').value
|
|
: questSlug?.name,
|
|
hasKey(data.value?.hunt, 'name')
|
|
? tKey(data.value?.hunt, 'name').value
|
|
: huntSlug?.name
|
|
]
|
|
.filter((s) => s && s?.length > 0)
|
|
.join(' | ') || t('layouts.default_tile')
|
|
})
|
|
});
|
|
|
|
const answer = ref(data.value?.answer?.text);
|
|
const final = ref(data.value?.answer?.final || false);
|
|
|
|
const textType = {
|
|
TEXT: 'text',
|
|
NUMBER: 'number',
|
|
INTEGER: 'number',
|
|
WORD: 'text'
|
|
};
|
|
|
|
const newImage = ref<File>();
|
|
|
|
const newImageURL = computed(() =>
|
|
newImage.value ? createImageURL(newImage.value) : undefined
|
|
);
|
|
|
|
const uploading = ref(false);
|
|
const uploadingImage = ref(false);
|
|
const compressing = ref(false);
|
|
const uploadProgress = ref(1);
|
|
const submitError = ref('');
|
|
useEventListener(window, 'beforeunload', (ev) => {
|
|
if (uploading.value) {
|
|
ev.preventDefault();
|
|
}
|
|
});
|
|
async function submit() {
|
|
uploading.value = true;
|
|
submitError.value = '';
|
|
uploadProgress.value = 0;
|
|
|
|
const body = new FormData();
|
|
body.set('lang', locale.value);
|
|
|
|
if (data.value?.answer?.updatedAt) {
|
|
body.set('updatedAt', data.value?.answer?.updatedAt);
|
|
}
|
|
if (answer.value) {
|
|
body.set('answer', answer.value);
|
|
}
|
|
if (final.value) {
|
|
body.set('final', 'true');
|
|
}
|
|
if (newImage.value) {
|
|
uploadingImage.value = true;
|
|
compressing.value = true;
|
|
const compressedImage = await compressImage(newImage.value);
|
|
compressing.value = false;
|
|
body.set('image', compressedImage);
|
|
}
|
|
const xhr = new XMLHttpRequest();
|
|
|
|
try {
|
|
await new Promise((resolve) => {
|
|
xhr.upload.addEventListener('progress', (event) => {
|
|
if (event.lengthComputable) {
|
|
uploadProgress.value = event.loaded / event.total;
|
|
}
|
|
});
|
|
xhr.addEventListener('loadend', () => {
|
|
resolve(xhr.readyState === 4 && xhr.status === 200);
|
|
uploadProgress.value = 1;
|
|
});
|
|
xhr.open('POST', `/api/quest/${questSlug?.id}/submit`, true);
|
|
xhr.withCredentials = true;
|
|
xhr.send(body);
|
|
});
|
|
|
|
await refresh();
|
|
answer.value = data.value?.answer?.text;
|
|
newImage.value = undefined;
|
|
} catch (e) {
|
|
if (xhr.status === 418) {
|
|
submitError.value = t('page.quest.already_finalized');
|
|
await refresh();
|
|
} else if (xhr.status === 409) {
|
|
submitError.value = t('page.quest.conflict');
|
|
} else {
|
|
submitError.value = parseError(e);
|
|
}
|
|
}
|
|
|
|
uploading.value = false;
|
|
uploadingImage.value = false;
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div>
|
|
<VaModal
|
|
:model-value="uploadingImage"
|
|
no-outside-dismiss
|
|
hide-default-actions
|
|
no-dismiss
|
|
>
|
|
<h2 class="mt-16 text-2xl font-bold">
|
|
{{ t('page.quest.upload_title') }}
|
|
</h2>
|
|
<p v-if="compressing" class="text-lg">
|
|
{{ t('page.quest.upload_compress') }}
|
|
</p>
|
|
<VaProgressCircle
|
|
v-else
|
|
class="mx-auto"
|
|
:model-value="uploadProgress * 100"
|
|
size="50dvw"
|
|
>
|
|
{{ (uploadProgress * 100).toFixed(0) + '%' }}
|
|
</VaProgressCircle>
|
|
</VaModal>
|
|
<VaButtonGroup>
|
|
<VaButton
|
|
icon="arrow_back"
|
|
:to="
|
|
$localePath(
|
|
`/hunt/${data ? tSluggy(data.hunt).value : sluggy(huntSlug!)}`
|
|
)
|
|
"
|
|
>{{ t('page.common.back_to_hunt') }}</VaButton
|
|
>
|
|
<VaButton
|
|
icon="refresh"
|
|
:loading="pending"
|
|
color="success"
|
|
@click="
|
|
submitError = '';
|
|
refresh();
|
|
"
|
|
>{{ t('layouts.refresh') }}</VaButton
|
|
>
|
|
<VaButton
|
|
v-if="user && user.role === 'ADMIN'"
|
|
color="danger"
|
|
:to="
|
|
$localePath(
|
|
`/hunt/${data?.hunt ? tSluggy(data.hunt).value : sluggy(huntSlug!)}/${data ? tSluggy(data).value : sluggy(questSlug!)}}/admin`
|
|
)
|
|
"
|
|
>{{ t('page.common.admin') }}</VaButton
|
|
></VaButtonGroup
|
|
>
|
|
<div v-if="data">
|
|
<div class="mt-4 grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
|
|
<VaCard
|
|
:stripe="data.answer !== null"
|
|
:stripe-color="
|
|
data.answer?.review?.score && data.answer?.review?.score > 0
|
|
? 'success'
|
|
: 'primary'
|
|
"
|
|
>
|
|
<VaCardTitle><QuestTags :quest="data" /></VaCardTitle>
|
|
<ClickableImage
|
|
v-if="data?.picture"
|
|
:src="data?.picture?.url"
|
|
:title="(data ? tKey(data, 'title').value : questSlug?.name) || ''"
|
|
/>
|
|
<VaCardContent>
|
|
<div class="flex flex-col gap-4">
|
|
<MultilineString
|
|
:text="tKey(data, 'description').value"
|
|
css="text-lg"
|
|
/>
|
|
<p v-if="hasKey(data, 'question')" class="text-xl font-bold">
|
|
{{ data.textRequired ? '❓' : '❔' }}:
|
|
{{ tKey(data, 'question') }}
|
|
</p>
|
|
<p v-if="hasKey(data, 'question')">
|
|
🖋: {{ t(`enums.text_type.${data.textType}`) }}
|
|
</p>
|
|
<VaDivider v-if="hasKey(data, 'extraText')" />
|
|
<p v-if="hasKey(data, 'extraText')">
|
|
<span class="uppercase">{{
|
|
t('page.quest.extra_points')
|
|
}}</span>
|
|
{{ tKey(data, 'extraText') }}
|
|
</p>
|
|
</div>
|
|
</VaCardContent>
|
|
</VaCard>
|
|
<VaCard v-if="data.answer?.review" color="info">
|
|
<VaCardTitle>{{ t('page.quest.review') }}</VaCardTitle>
|
|
<VaCardContent>
|
|
<p v-if="data.answer.review?.score" class="mb-2">
|
|
{{ t('page.quest.score') }}
|
|
<VaChip color="success">{{ data.answer.review.score }}</VaChip>
|
|
<span v-if="data.answer.review.reviewer" class="text-sm">
|
|
{{
|
|
t('page.quest.reviewed_by', {
|
|
name: data.answer.review.reviewer.name,
|
|
date: d(data.answer.review.updatedAt, fullDate)
|
|
})
|
|
}}</span
|
|
>
|
|
</p>
|
|
<div
|
|
v-if="data.answer.review.review"
|
|
class="flex max-h-[60dvh] flex-col gap-2 overflow-y-auto pr-4"
|
|
>
|
|
<MultilineString :text="data.answer.review.review" css="italic" />
|
|
</div>
|
|
</VaCardContent>
|
|
</VaCard>
|
|
<VaCard
|
|
v-if="user && user.role !== 'ADMIN' && data.teamId"
|
|
stripe
|
|
:stripe-color="data.answer?.final ? 'success' : 'primary'"
|
|
>
|
|
<VaCardTitle>{{ t('page.quest.submission') }}</VaCardTitle>
|
|
<VaCardContent>
|
|
<div class="flex flex-col gap-4">
|
|
<VaInput
|
|
v-if="hasKey(data, 'question')"
|
|
v-model="answer"
|
|
:label="tKey(data, 'question').value"
|
|
:disabled="uploading || data.answer?.final"
|
|
:placeholder="t('page.quest.your_answer')"
|
|
:required-mark="data.textRequired"
|
|
:clearable="!!data.answer?.text"
|
|
:clear-value="data.answer?.text || ''"
|
|
clearable-icon="replay"
|
|
:type="textType[data.textType]"
|
|
:messages="[
|
|
t(`enums.text_type.${data.textType}`),
|
|
data.textRequired ? t('page.quest.required_answer') : ''
|
|
]"
|
|
>
|
|
<template v-if="data.textUnit" #appendInner>
|
|
<span>{{ data.textUnit }}</span>
|
|
</template>
|
|
</VaInput>
|
|
|
|
<VaImage
|
|
v-if="newImageURL"
|
|
:src="newImageURL"
|
|
class="max-h-60 w-full"
|
|
fit="contain"
|
|
lazy
|
|
/>
|
|
<VaImage
|
|
v-else-if="data.answer?.picture"
|
|
:src="data.answer?.picture?.url"
|
|
class="max-h-60 w-full"
|
|
fit="contain"
|
|
lazy
|
|
>
|
|
<template #loader> <VaProgressCircle indeterminate /> </template
|
|
></VaImage>
|
|
<VaFileUpload
|
|
v-model="newImage"
|
|
:disabled="uploading || data.answer?.final"
|
|
type="single"
|
|
file-types="jpg,png,jpeg"
|
|
/>
|
|
<p v-if="data.answer?.updatedAt">
|
|
{{
|
|
t('page.quest.last_update', {
|
|
date: d(data.answer.updatedAt, fullDate),
|
|
name: data.answer.member.name
|
|
})
|
|
}}
|
|
</p>
|
|
<VaCheckbox
|
|
v-model="final"
|
|
:disabled="data.answer?.final"
|
|
:label="t('page.quest.finalize')"
|
|
:messages="t('page.quest.already_finalized')"
|
|
/>
|
|
|
|
<VaAlert
|
|
v-if="submitError.length > 0"
|
|
color="danger"
|
|
class="w-full text-center"
|
|
>{{ t(submitError) }}</VaAlert
|
|
>
|
|
<VaButton
|
|
v-if="!data.answer?.final"
|
|
:disabled="
|
|
!(
|
|
newImage ||
|
|
data.answer?.text !== answer ||
|
|
data.answer?.final !== final
|
|
) || uploading
|
|
"
|
|
:loading="uploading"
|
|
@click="submit"
|
|
>{{ t('page.common.update_btn') }}</VaButton
|
|
>
|
|
<p v-else class="font-bold">
|
|
{{ t('page.quest.already_submitted') }}
|
|
</p>
|
|
</div>
|
|
</VaCardContent>
|
|
</VaCard>
|
|
</div>
|
|
</div>
|
|
<div v-if="error" class="mt-8 text-3xl">
|
|
{{ t(parseError(error)) }}
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped></style>
|