Add quest page

app/lang/de.json

@@ -11,6 +11,86 @@
   "layouts": {
     "title": "{title} {'|'} PicHunt",
     "default_tile": "PicHunt",
-    "switch_lang": "Sprache ändern zu {locale}"
+    "switch_lang": "Sprache ändern zu {locale}",
+    "refresh": "Aktualisieren"
+  },
+  "vuestic": {
+    "search": "Search",
+    "noOptions": "Items not found",
+    "ok": "OK",
+    "cancel": "Cancel",
+    "uploadFile": "Upload file",
+    "undo": "Undo",
+    "dropzone": "Drop files here to upload",
+    "fileDeleted": "File deleted",
+    "closeAlert": "close alert",
+    "backToTop": "back to top",
+    "toggleDropdown": "toggle dropdown",
+    "carousel": "carousel",
+    "goPreviousSlide": "go previous slide",
+    "goNextSlide": "go next slide",
+    "goSlide": "go slide {index}",
+    "slideOf": "slide {index} of {length}",
+    "close": "close",
+    "openColorPicker": "open color picker",
+    "colorSelection": "color selection",
+    "colorName": "color {color}",
+    "decreaseCounter": "decrease counter",
+    "increaseCounter": "increase counter",
+    "selectAllRows": "select all rows",
+    "sortColumnBy": "sort column by {name}",
+    "selectRowByIndex": "select row {index}",
+    "resetDate": "reset date",
+    "nextPeriod": "next period",
+    "switchView": "switch view",
+    "previousPeriod": "previous period",
+    "removeFile": "remove file",
+    "reset": "reset",
+    "pagination": "pagination",
+    "goToTheFirstPage": "go to the first page",
+    "goToPreviousPage": "go to the previous page",
+    "goToSpecificPage": "go to the {page} page",
+    "goToSpecificPageInput": "enter the page number to go",
+    "goNextPage": "go next page",
+    "goLastPage": "go last page",
+    "currentRating": "current rating {value} of {max}",
+    "voteRating": "vote rating {value} of {max}",
+    "optionsFilter": "options filter",
+    "splitPanels": "split panels",
+    "movePaginationLeft": "move pagination left",
+    "movePaginationRight": "move pagination right",
+    "resetTime": "reset time",
+    "closeToast": "close toast",
+    "selectedOption": "Selected option",
+    "noSelectedOption": "Option is not selected",
+    "breadcrumbs": "breadcrumbs",
+    "counterValue": "counter value",
+    "selectedDate": "selected date",
+    "selectedTime": "selected time",
+    "progressState": "progress state",
+    "color": "color",
+    "next": "Next",
+    "back": "Previous",
+    "finish": "Finish",
+    "step": "step",
+    "progress": "progress",
+    "loading": "Loading",
+    "sliderValue": "Current slider value is {value}",
+    "sliderDot": "Slider dot",
+    "sliderMaxDot": "Maximum slider value",
+    "sliderMinDot": "Minimum slider value",
+    "switch": "Switch",
+    "inputField": "Input field",
+    "fileTypeIncorrect": "File type is incorrect",
+    "select": "Select an option"
+  },
+  "enums": {
+    "text_type": {
+      "TEXT": "Freitext",
+      "WORD": "Ein Wort",
+      "NUMBER": "Zahl",
+      "INTEGER": "Ganzzahl"
+
+    }
   }
 }

app/lang/en.json

@@ -11,6 +11,86 @@
   "layouts": {
     "title": "{title} {'|'} PicHunt",
     "default_tile": "PicHunt",
-    "switch_lang": "Switch locale to {locale}"
+    "switch_lang": "Switch locale to {locale}",
+    "refresh": "Refresh"
+  },
+  "vuestic": {
+    "search": "Search",
+    "noOptions": "Items not found",
+    "ok": "OK",
+    "cancel": "Cancel",
+    "uploadFile": "Upload file",
+    "undo": "Undo",
+    "dropzone": "Drop files here to upload",
+    "fileDeleted": "File deleted",
+    "closeAlert": "close alert",
+    "backToTop": "back to top",
+    "toggleDropdown": "toggle dropdown",
+    "carousel": "carousel",
+    "goPreviousSlide": "go previous slide",
+    "goNextSlide": "go next slide",
+    "goSlide": "go slide {index}",
+    "slideOf": "slide {index} of {length}",
+    "close": "close",
+    "openColorPicker": "open color picker",
+    "colorSelection": "color selection",
+    "colorName": "color {color}",
+    "decreaseCounter": "decrease counter",
+    "increaseCounter": "increase counter",
+    "selectAllRows": "select all rows",
+    "sortColumnBy": "sort column by {name}",
+    "selectRowByIndex": "select row {index}",
+    "resetDate": "reset date",
+    "nextPeriod": "next period",
+    "switchView": "switch view",
+    "previousPeriod": "previous period",
+    "removeFile": "remove file",
+    "reset": "reset",
+    "pagination": "pagination",
+    "goToTheFirstPage": "go to the first page",
+    "goToPreviousPage": "go to the previous page",
+    "goToSpecificPage": "go to the {page} page",
+    "goToSpecificPageInput": "enter the page number to go",
+    "goNextPage": "go next page",
+    "goLastPage": "go last page",
+    "currentRating": "current rating {value} of {max}",
+    "voteRating": "vote rating {value} of {max}",
+    "optionsFilter": "options filter",
+    "splitPanels": "split panels",
+    "movePaginationLeft": "move pagination left",
+    "movePaginationRight": "move pagination right",
+    "resetTime": "reset time",
+    "closeToast": "close toast",
+    "selectedOption": "Selected option",
+    "noSelectedOption": "Option is not selected",
+    "breadcrumbs": "breadcrumbs",
+    "counterValue": "counter value",
+    "selectedDate": "selected date",
+    "selectedTime": "selected time",
+    "progressState": "progress state",
+    "color": "color",
+    "next": "Next",
+    "back": "Previous",
+    "finish": "Finish",
+    "step": "step",
+    "progress": "progress",
+    "loading": "Loading",
+    "sliderValue": "Current slider value is {value}",
+    "sliderDot": "Slider dot",
+    "sliderMaxDot": "Maximum slider value",
+    "sliderMinDot": "Minimum slider value",
+    "switch": "Switch",
+    "inputField": "Input field",
+    "fileTypeIncorrect": "File type is incorrect",
+    "select": "Select an option"
+  },
+  "enums": {
+    "text_type": {
+      "TEXT": "Free text",
+      "WORD": "One Word",
+      "NUMBER": "Number",
+      "INTEGER": "Whole number"
+
+    }
   }
 }

app/layouts/default.vue

@@ -1,14 +1,19 @@
 <script setup lang="ts">
+import { useTitleStore } from '~/stores/title';
+
 const { loggedIn, clear } = useUserSession();
 
 const route = useRoute();
 const breakpoints = useBreakpoint();
+const titleStore = useTitleStore();
 
 const isSidebarVisible = ref(breakpoints.mdUp);
 
 watchEffect(() => {
   isSidebarVisible.value = breakpoints.smUp;
 });
+
+const slugs = computed(() => checkSlug(route.params));
 </script>
 
 <template>
@@ -31,7 +36,9 @@ watchEffect(() => {
             @click="isSidebarVisible = !isSidebarVisible"
           />
         </template>
-        <template #center>{{ $t('layouts.default_tile') }}</template>
+        <template #center>
+          {{ titleStore.title || $t('layouts.default_tile') }}</template
+        >
       </VaNavbar>
     </template>
 
@@ -46,6 +53,40 @@ watchEffect(() => {
             <VaSidebarItemTitle>Home</VaSidebarItemTitle>
           </VaSidebarItemContent>
         </VaSidebarItem>
+        <VaSidebarItem
+          v-if="slugs?.huntSlug"
+          :to="$localePath(`/hunt/${sluggy(slugs.huntSlug)}`)"
+          :active="
+            $localePath(`/hunt/${sluggy(slugs.huntSlug)}`) === route.path
+          "
+        >
+          <VaSidebarItemContent>
+            <VaIcon name="camera_indoor" />
+            <VaSidebarItemTitle>{{
+              slugs.huntSlug.name || 'Hunt'
+            }}</VaSidebarItemTitle>
+          </VaSidebarItemContent>
+        </VaSidebarItem>
+        <VaSidebarItem
+          v-if="slugs?.huntSlug && slugs?.questSlug"
+          :to="
+            $localePath(
+              `/hunt/${sluggy(slugs.huntSlug)}/${sluggy(slugs.questSlug)}`
+            )
+          "
+          :active="
+            $localePath(
+              `/hunt/${sluggy(slugs.huntSlug)}/${sluggy(slugs.questSlug)}`
+            ) === route.path
+          "
+        >
+          <VaSidebarItemContent>
+            <VaIcon name="question_mark" />
+            <VaSidebarItemTitle>{{
+              slugs.questSlug.name || 'Quest'
+            }}</VaSidebarItemTitle>
+          </VaSidebarItemContent>
+        </VaSidebarItem>
         <VaSpacer />
         <VaSidebarItem v-if="loggedIn" @click="clear">
           <VaSidebarItemContent>

app/middleware/updateTitle.global.ts

@@ -0,0 +1,6 @@
+import { useTitleStore } from '~/stores/title';
+
+export default defineNuxtRouteMiddleware(() => {
+  const titleStore = useTitleStore();
+  titleStore.title = undefined;
+});

app/pages/hunt/[huntSlug]/[questSlug]/index.vue

@@ -1,24 +1,186 @@
 <script setup lang="ts">
+import { useTitleStore } from '~/stores/title';
+
 const app = useNuxtApp();
 const { huntSlug, questSlug } = app.$slugData;
-console.log(app.$slugData);
-const { t } = useI18n();
 
+const { t, locale } = useI18n();
+
+const titleStore = useTitleStore();
+
+const { data, pending, refresh } = await useFetch(
+  `/api/quest/${questSlug?.id}`
+);
+
+titleStore.title = data.value?.title;
 useHead({
   title: t('layouts.title', {
     title:
-      [questSlug?.name, huntSlug?.name]
+      [
+        data.value?.title || questSlug?.name,
+        data.value?.hunt?.name || huntSlug?.name
+      ]
         .filter((s) => s && s?.length > 0)
         .join(' | ') || t('layouts.default_tile')
   })
 });
+
+const answer = ref(data.value?.answer?.text);
+
+const textType = {
+  TEXT: 'text',
+  NUMBER: 'number',
+  INTEGER: 'number',
+  WORD: 'text'
+};
+
+const newImage = ref<File>();
+
+const uploading = ref(false);
+async function submit() {
+  uploading.value = true;
+
+  // TODO: add upload logic
+  await refresh();
+
+  uploading.value = false;
+  answer.value = data.value?.answer?.text;
+  newImage.value = undefined;
+}
+
+const createImageURL = (file: File) => URL.createObjectURL(file);
 </script>
 
 <template>
-  <h1>{{ huntSlug!.name }} - {{ questSlug!.name }}</h1>
-  <VaButton :to="$localePath(`/hunt/${sluggy(huntSlug!)}`)"
-    >Back to Hunt</VaButton
-  >
+  <div v-if="data">
+    <h1>
+      {{ data.hunt.name || huntSlug!.name }} -
+      {{ data.title || questSlug!.name }}
+    </h1>
+    <VaButton
+      icon="arrow_back"
+      :to="$localePath(`/hunt/${sluggy(data.hunt || huntSlug!)}`)"
+      >Back to Hunt</VaButton
+    >
+    <VaButton
+      @click="refresh"
+      icon="refresh"
+      :loading="pending"
+      color="success"
+      >{{ $t('layouts.refresh') }}</VaButton
+    >
+    <div class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
+      <VaCard
+        :stripe="data.answer !== null"
+        :stripe-color="
+          data.answer?.score && data.answer?.score > 0 ? 'success' : 'primary'
+        "
+      >
+        <VaCardTitle><QuestTags :quest="data" /></VaCardTitle>
+        <VaCardContent>
+          <div class="flex flex-col gap-4">
+            <p class="text-lg">{{ data.description }}</p>
+            <p v-if="data.question" class="text-xl font-bold">
+              {{ data.textRequired ? '❓' : '❔' }}: {{ data.question }}
+            </p>
+            <p v-if="data.question">
+              🖋: {{ $t(`enums.text_type.${data.textType}`) }}
+            </p>
+            <p v-if="data.extraText">
+              <span class="uppercase">Extra points:</span> {{ data.extraText }}
+            </p>
+          </div>
+        </VaCardContent>
+      </VaCard>
+      <VaCard color="info" v-if="data.answer?.review">
+        <VaCardTitle>Review</VaCardTitle>
+        <VaCardContent>
+          <p v-if="data.answer.score" class="mb-2">
+            <VaChip color="success"
+              >Answer type: {{ data.answer.score }}</VaChip
+            >
+            <span v-if="data.answer.reviewer" class="text-sm">
+              by {{ data.answer.reviewer.name }}</span
+            >
+          </p>
+          <p>{{ data.answer.review }}</p>
+        </VaCardContent>
+      </VaCard>
+      <VaCard color="primary">
+        <VaCardTitle>Submission</VaCardTitle>
+        <VaCardContent>
+          <div class="flex flex-col gap-4">
+            <VaInput
+              :label="data.question"
+              :disabled="uploading"
+              v-if="data.question"
+              color="onPrimary"
+              placeholder="Your answer"
+              :required-mark="data.textRequired"
+              v-model="answer"
+              :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 ? 'Required Answer' : undefined
+              ]"
+            >
+              <template v-if="data.textUnit" #appendInner>
+                <span>{{ data.textUnit }}</span>
+              </template>
+            </VaInput>
+
+            <VaImage
+              v-if="newImage"
+              :src="createImageURL(newImage)"
+              class="max-h-60 w-full"
+              fit="contain"
+              lazy
+            />
+            <VaImage
+              v-else-if="data.answer?.picture"
+              :src="data.answer?.picture"
+              class="max-h-60 w-full"
+              fit="contain"
+              lazy
+            >
+              <template #loader> <VaProgressCircle indeterminate /> </template
+            ></VaImage>
+            <VaFileUpload
+              v-model="newImage"
+              :disabled="uploading"
+              color="onPrimary"
+              type="single"
+              file-types="jpg,png,jpeg"
+            />
+            <p v-if="data.answer?.updatedAt">
+              Last update:
+              {{
+                $d(
+                  data.answer.updatedAt,
+                  {
+                    dateStyle: 'medium',
+                    timeStyle: 'medium'
+                  },
+                  locale
+                )
+              }}
+              by {{ data.answer.member.name }}
+            </p>
+            <VaButton
+              :disabled="!(newImage || data.answer?.text !== answer)"
+              color="onPrimary"
+              :loading="uploading"
+              @click="submit"
+              >Update</VaButton
+            >
+          </div>
+        </VaCardContent>
+      </VaCard>
+    </div>
+  </div>
 </template>
 
 <style scoped></style>

app/pages/hunt/[huntSlug]/index.vue

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import { useTitleStore } from '~/stores/title';
+
 const app = useNuxtApp();
 const { user } = useUserSession();
 const localePath = useLocalePath();
@@ -6,6 +8,8 @@ const { t } = useI18n();
 
 const { name, id } = app.$slugData.huntSlug!;
 
+const titleStore = useTitleStore();
+
 const { data, pending } = await useFetch(`/api/hunt/${id}`);
 
 const hideAnswers = ref(true);
@@ -15,6 +19,8 @@ useHead({
     title: data.value?.name || name
   })
 });
+
+titleStore.title = data.value?.name;
 </script>
 
 <template>

app/stores/title.ts

@@ -0,0 +1,8 @@
+export const useTitleStore = defineStore('title', () => {
+  const title = ref<string | undefined>();
+
+  return { title };
+});
+if (import.meta.hot) {
+  import.meta.hot.accept(acceptHMRUpdate(useTitleStore, import.meta.hot));
+}