84 lines
3.0 KiB
Vue
84 lines
3.0 KiB
Vue
<script setup lang="ts">
|
|
import { SingleChapterResult } from "@client/types/slightlyDifferentStory";
|
|
import { theme } from "ant-design-vue";
|
|
import { storyMiddleware } from "@client/middleware";
|
|
import forChapter from "~/components/reviews/forChapter.vue";
|
|
import storyInfo from "~/components/story/view/storyInfo.vue";
|
|
import chapterPicker from "~/components/story/view/chapterPicker.vue";
|
|
import { IUser } from "@models/user";
|
|
import { recordView } from "@client/science";
|
|
|
|
const { useToken } = theme;
|
|
const { token } = useToken();
|
|
definePageMeta({
|
|
middleware: [storyMiddleware],
|
|
});
|
|
const rtr = useRoute();
|
|
const { data: story, error } = await useApiFetch<SingleChapterResult>(`/story/${rtr.params.id}/${rtr.params.cidx}`);
|
|
provide<SingleChapterResult | null>("story", story.value);
|
|
console.log("storyyy", story.value?.currentChapter);
|
|
console.log(rtr);
|
|
let dark = inject<boolean>("dark");
|
|
const and = computed(() => {
|
|
return story.value.coAuthor ? ` and ${story.value.coAuthor.username}` : "";
|
|
});
|
|
useHead({
|
|
title: `"${story.value.title}" by ${story.value.author.username}${and.value}`,
|
|
});
|
|
await recordView(story.value._id!);
|
|
</script>
|
|
<template>
|
|
<a-typography-title>
|
|
{{ story?.title }}
|
|
</a-typography-title>
|
|
<story-info />
|
|
<div>
|
|
<a-card
|
|
:style="{
|
|
backgroundColor: dark ? 'rgb(191, 54, 67)' : token.colorError,
|
|
display: 'flow-root',
|
|
color: '#fff',
|
|
}"
|
|
>
|
|
<div>
|
|
<a-typography-title :level="2"> Disclaimer </a-typography-title>
|
|
<a-divider style="background-color: #fff" />
|
|
{{ (story.author as IUser).profile.disclaimer }}
|
|
</div>
|
|
</a-card>
|
|
<a-typography-title :level="3">
|
|
{{ story.currentChapter.title }}
|
|
</a-typography-title>
|
|
<chapter-picker v-if="story.totalChapters > 1" />
|
|
<div style="display: flow-root">
|
|
<div>
|
|
<a-typography-title :level="4">Author's notes:</a-typography-title>
|
|
<div v-html="story?.currentChapter.notes" />
|
|
</div>
|
|
<a-divider />
|
|
</div>
|
|
<div v-html="story?.currentChapter.text"></div>
|
|
<a-divider style="background-color: #fff" />
|
|
<a-button-group size="large" v-if="story.totalChapters > 1">
|
|
<a-button v-if="parseInt(rtr.params.cidx as string) > 1" @click="() => navigateTo(`/story/${rtr.params.id}/1`)"> First </a-button>
|
|
<a-button v-if="parseInt(rtr.params.cidx as string) > 1" @click="() => navigateTo(`/story/${rtr.params.id}/${parseInt(rtr.params.cidx as string) - 1}`)">
|
|
Previous
|
|
</a-button>
|
|
<a-button
|
|
v-if="parseInt(rtr.params.cidx as string) < story.chapterNames.length - 1"
|
|
@click="() => navigateTo(`/story/${rtr.params.id}/${parseInt(rtr.params.cidx as string) + 1}`)"
|
|
>
|
|
Next
|
|
</a-button>
|
|
<a-button
|
|
@click="() => navigateTo(`/story/${rtr.params.id}/${story.chapterNames.length}`)"
|
|
v-if="parseInt(rtr.params.cidx as string) < story.chapterNames.length - 1"
|
|
>
|
|
Last
|
|
</a-button>
|
|
</a-button-group>
|
|
<a-typography-title style="text-align: center" :level="2"> Reviews </a-typography-title>
|
|
<for-chapter :endpoint="`/story/${rtr.params.id}/${rtr.params.cidx}`" />
|
|
</div>
|
|
</template>
|