additional polish and QoL features

This commit is contained in:
DecDuck
2024-10-22 09:43:00 +11:00
parent 03a37f72aa
commit 93bc143dac
7 changed files with 353 additions and 269 deletions

157
error.vue
View File

@ -2,94 +2,103 @@
import type { NuxtError } from "#app";
const props = defineProps({
error: Object as () => NuxtError,
error: Object as () => NuxtError,
});
const route = useRoute();
const user = useUser();
async function signIn() {
clearError({
redirect: `/signin?redirect=${encodeURIComponent(route.fullPath)}`,
});
clearError({
redirect: `/signin?redirect=${encodeURIComponent(route.fullPath)}`,
});
}
useHead({
title: `${props.error?.statusCode ?? "An unknown error occurred"} | Drop`,
title: `${props.error?.statusCode ?? "An unknown error occurred"} | Drop`,
});
console.log(props.error);
const errorCode = props.error?.statusCode;
if (errorCode != undefined) {
switch (errorCode) {
case 403:
case 401:
if (!user.value) signIn();
break;
}
}
</script>
<template>
<div
class="grid min-h-screen grid-cols-1 grid-rows-[1fr,auto,1fr] bg-zinc-950 lg:grid-cols-[max(50%,36rem),1fr]"
>
<header
class="mx-auto w-full max-w-7xl px-6 pt-6 sm:pt-10 lg:col-span-2 lg:col-start-1 lg:row-start-1 lg:px-8"
>
<Logo class="h-10 w-auto sm:h-12" />
</header>
<main
class="mx-auto w-full max-w-7xl px-6 py-24 sm:py-32 lg:col-span-2 lg:col-start-1 lg:row-start-2 lg:px-8"
>
<div class="max-w-lg">
<p class="text-base font-semibold leading-8 text-blue-600">
{{ error?.statusCode }}
</p>
<h1
class="mt-4 text-3xl font-bold font-display tracking-tight text-zinc-100 sm:text-5xl"
>
Oh no!
</h1>
<p class="mt-6 text-base leading-7 text-zinc-400">
An error occurred while responding to your request. If you believe
this to be a bug, please report it.
</p>
<div class="mt-10">
<!-- full app reload to fix errors -->
<a
v-if="user"
href="/"
class="text-sm font-semibold leading-7 text-blue-600"
><span aria-hidden="true">&larr;</span> Back to home</a
>
<button
v-else
@click="signIn"
class="text-sm font-semibold leading-7 text-blue-600"
>
Sign in <span aria-hidden="true">&rarr;</span>
</button>
</div>
</div>
</main>
<footer class="self-end lg:col-span-2 lg:col-start-1 lg:row-start-3">
<div class="border-t border-zinc-700 bg-zinc-900 py-10">
<nav
class="mx-auto flex w-full max-w-7xl items-center gap-x-4 px-6 text-sm leading-7 text-zinc-400 lg:px-8"
>
<NuxtLink href="/docs">Documentation</NuxtLink>
<svg
viewBox="0 0 2 2"
aria-hidden="true"
class="h-0.5 w-0.5 fill-zinc-600"
>
<circle cx="1" cy="1" r="1" />
</svg>
<a href="https://discord.gg/NHx46XKJWA" target="_blank"
>Support Discord</a
>
</nav>
</div>
</footer>
<div
class="hidden lg:relative lg:col-start-2 lg:row-start-1 lg:row-end-4 lg:block"
class="grid min-h-screen grid-cols-1 grid-rows-[1fr,auto,1fr] bg-zinc-950 lg:grid-cols-[max(50%,36rem),1fr]"
>
<img
src="/wallpapers/error-wallpaper.jpg"
alt=""
class="absolute inset-0 h-full w-full object-cover"
/>
<header
class="mx-auto w-full max-w-7xl px-6 pt-6 sm:pt-10 lg:col-span-2 lg:col-start-1 lg:row-start-1 lg:px-8"
>
<Logo class="h-10 w-auto sm:h-12" />
</header>
<main
class="mx-auto w-full max-w-7xl px-6 py-24 sm:py-32 lg:col-span-2 lg:col-start-1 lg:row-start-2 lg:px-8"
>
<div class="max-w-lg">
<p class="text-base font-semibold leading-8 text-blue-600">
{{ error?.statusCode }}
</p>
<h1
class="mt-4 text-3xl font-bold font-display tracking-tight text-zinc-100 sm:text-5xl"
>
Oh no!
</h1>
<p class="mt-6 text-base leading-7 text-zinc-400">
An error occurred while responding to your request. If you
believe this to be a bug, please report it.
</p>
<div class="mt-10">
<!-- full app reload to fix errors -->
<a
v-if="user"
href="/"
class="text-sm font-semibold leading-7 text-blue-600"
><span aria-hidden="true">&larr;</span> Back to home</a
>
<button
v-else
@click="signIn"
class="text-sm font-semibold leading-7 text-blue-600"
>
Sign in <span aria-hidden="true">&rarr;</span>
</button>
</div>
</div>
</main>
<footer class="self-end lg:col-span-2 lg:col-start-1 lg:row-start-3">
<div class="border-t border-zinc-700 bg-zinc-900 py-10">
<nav
class="mx-auto flex w-full max-w-7xl items-center gap-x-4 px-6 text-sm leading-7 text-zinc-400 lg:px-8"
>
<NuxtLink href="/docs">Documentation</NuxtLink>
<svg
viewBox="0 0 2 2"
aria-hidden="true"
class="h-0.5 w-0.5 fill-zinc-600"
>
<circle cx="1" cy="1" r="1" />
</svg>
<a href="https://discord.gg/NHx46XKJWA" target="_blank"
>Support Discord</a
>
</nav>
</div>
</footer>
<div
class="hidden lg:relative lg:col-start-2 lg:row-start-1 lg:row-end-4 lg:block"
>
<img
src="/wallpapers/error-wallpaper.jpg"
alt=""
class="absolute inset-0 h-full w-full object-cover"
/>
</div>
</div>
</div>
</template>

View File

@ -1,144 +1,199 @@
<template>
<div v-if="game" class="grid grid-cols-2 gap-16">
<div class="grow">
<h1 class="mt-4 text-5xl font-bold font-display text-zinc-100">
{{ game.mName }}
</h1>
<p class="mt-1 text-lg text-zinc-400">{{ game.mShortDescription }}</p>
<div
v-if="game && unimportedVersions !== undefined"
class="grid grid-cols-2 gap-16"
>
<div class="grow">
<h1 class="mt-4 text-5xl font-bold font-display text-zinc-100">
{{ game.mName }}
</h1>
<p class="mt-1 text-lg text-zinc-400">
{{ game.mShortDescription }}
</p>
<div
v-html="descriptionHTML"
class="mt-5 pt-5 border-t border-zinc-700 prose prose-invert prose-blue"
></div>
</div>
<div class="space-y-8">
<div class="px-4 py-3 bg-gray-950 rounded">
<div class="border-b border-zinc-800 pb-3">
<div
class="flex flex-wrap items-center justify-between sm:flex-nowrap"
>
<h3
class="text-base font-semibold font-display leading-6 text-zinc-100"
>
Images
</h3>
<div class="flex-shrink-0">
<button
@click="() => (showUploadModal = true)"
type="button"
class="relative inline-flex items-center rounded-md bg-blue-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-blue-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600"
>
Upload
</button>
</div>
</div>
<div
v-html="descriptionHTML"
class="mt-5 pt-5 border-t border-zinc-700 prose prose-invert prose-blue"
></div>
</div>
<div class="mt-3 grid grid-cols-2 grid-flow-dense gap-8">
<div
v-for="(image, imageIdx) in game.mImageLibrary"
:key="image"
class="group relative flex items-center"
>
<img :src="useObject(image)" class="w-full h-auto" />
<div
class="transition-all opacity-0 group-hover:opacity-100 absolute flex flex-col gap-y-1 top-1 right-1 bg-zinc-950/50 rounded-xl p-2"
>
<button
v-if="image !== game.mBannerId"
@click="() => updateBannerImage(image)"
type="button"
class="inline-flex items-center gap-x-1.5 rounded-md bg-blue-600 px-1.5 py-0.5 text-sm font-semibold text-white shadow-sm hover:bg-blue-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600"
>
Set as banner
</button>
<button
v-if="image !== game.mCoverId"
@click="() => updateCoverImage(image)"
type="button"
class="inline-flex items-center gap-x-1.5 rounded-md bg-blue-600 px-1.5 py-0.5 text-sm font-semibold text-white shadow-sm hover:bg-blue-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600"
>
Set as cover
</button>
<button
@click="() => deleteImage(image)"
type="button"
class="inline-flex items-center gap-x-1.5 rounded-md bg-red-600 px-1.5 py-0.5 text-sm font-semibold text-white shadow-sm hover:bg-red-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-red-600"
>
Delete image
</button>
<div class="space-y-8">
<div class="px-4 py-3 bg-gray-950 rounded">
<div class="border-b border-zinc-800 pb-3">
<div
class="flex flex-wrap items-center justify-between sm:flex-nowrap"
>
<h3
class="text-base font-semibold font-display leading-6 text-zinc-100"
>
Images
</h3>
<div class="flex-shrink-0">
<button
@click="() => (showUploadModal = true)"
type="button"
class="relative inline-flex items-center rounded-md bg-blue-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-blue-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600"
>
Upload
</button>
</div>
</div>
</div>
<div class="mt-3 grid grid-cols-2 grid-flow-dense gap-8">
<div
v-for="(image, imageIdx) in game.mImageLibrary"
:key="image"
class="group relative flex items-center"
>
<img :src="useObject(image)" class="w-full h-auto" />
<div
class="transition-all opacity-0 group-hover:opacity-100 absolute flex flex-col gap-y-1 top-1 right-1 bg-zinc-950/50 rounded-xl p-2"
>
<button
v-if="image !== game.mBannerId"
@click="() => updateBannerImage(image)"
type="button"
class="inline-flex items-center gap-x-1.5 rounded-md bg-blue-600 px-1.5 py-0.5 text-sm font-semibold text-white shadow-sm hover:bg-blue-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600"
>
Set as banner
</button>
<button
v-if="image !== game.mCoverId"
@click="() => updateCoverImage(image)"
type="button"
class="inline-flex items-center gap-x-1.5 rounded-md bg-blue-600 px-1.5 py-0.5 text-sm font-semibold text-white shadow-sm hover:bg-blue-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600"
>
Set as cover
</button>
<button
@click="() => deleteImage(image)"
type="button"
class="inline-flex items-center gap-x-1.5 rounded-md bg-red-600 px-1.5 py-0.5 text-sm font-semibold text-white shadow-sm hover:bg-red-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-red-600"
>
Delete image
</button>
</div>
<div
v-if="
image === game.mBannerId &&
image === game.mCoverId
"
class="absolute bottom-0 left-0 bg-zinc-950/75 text-zinc-100 text-sm font-semibold px-2 py-1 rounded-tr"
>
current banner & cover
</div>
<div
v-else-if="image === game.mCoverId"
class="absolute bottom-0 left-0 bg-zinc-950/75 text-zinc-100 text-sm font-semibold px-2 py-1 rounded-tr"
>
current cover
</div>
<div
v-else-if="image === game.mBannerId"
class="absolute bottom-0 left-0 bg-zinc-950/75 text-zinc-100 text-sm font-semibold px-2 py-1 rounded-tr"
>
current banner
</div>
</div>
</div>
</div>
<div class="py-5 px-6 bg-gray-950 rounded">
<h1 class="text-2xl font-semibold font-display text-zinc-100">
Manage version order
</h1>
<div class="text-center w-full text-sm text-zinc-600">
lowest
</div>
<draggable
@update="() => updateVersionOrder()"
:list="game.versions"
handle=".handle"
class="mt-2 space-y-4"
>
<template
#item="{ element: item }: { element: GameVersion }"
>
<div
class="w-full inline-flex items-center px-4 py-2 bg-zinc-900 rounded justify-between"
>
<div class="text-zinc-100 font-semibold">
{{ item.versionName }}
</div>
<div class="text-zinc-400">
{{ item.delta ? "Upgrade mode" : "" }}
</div>
<div class="inline-flex gap-x-2">
<Bars3Icon
class="cursor-move w-6 h-6 text-zinc-400 handle"
/>
<button
@click="
() => deleteVersion(item.versionName)
"
>
<TrashIcon class="w-5 h-5 text-red-600" />
</button>
</div>
</div>
</template>
</draggable>
<div
class="text-center font-bold text-zinc-400 my-3"
v-if="game.versions.length == 0"
>
no versions added
</div>
<div class="mt-2 text-center w-full text-sm text-zinc-600">
highest
</div>
</div>
<div
v-if="image === game.mBannerId && image === game.mCoverId"
class="absolute bottom-0 left-0 bg-zinc-950/75 text-zinc-100 text-sm font-semibold px-2 py-1 rounded-tr"
v-if="unimportedVersions.length > 0"
class="rounded-md bg-blue-600/10 p-4"
>
current banner & cover
<div class="flex">
<div class="flex-shrink-0">
<InformationCircleIcon
class="h-5 w-5 text-blue-400"
aria-hidden="true"
/>
</div>
<div class="ml-3 flex-1 md:flex md:justify-between">
<p class="text-sm text-blue-400">
Drop has detected you have new verions of this game
to import.
</p>
<p class="mt-3 text-sm md:ml-6 md:mt-0">
<NuxtLink
:href="`/admin/library/${game.id}/import`"
class="whitespace-nowrap font-medium text-blue-400 hover:text-blue-500"
>
Import
<span aria-hidden="true"> &rarr;</span>
</NuxtLink>
</p>
</div>
</div>
</div>
<div
v-else-if="image === game.mCoverId"
class="absolute bottom-0 left-0 bg-zinc-950/75 text-zinc-100 text-sm font-semibold px-2 py-1 rounded-tr"
>
current cover
</div>
<div
v-else-if="image === game.mBannerId"
class="absolute bottom-0 left-0 bg-zinc-950/75 text-zinc-100 text-sm font-semibold px-2 py-1 rounded-tr"
>
current banner
</div>
</div>
</div>
</div>
<div class="py-5 px-6 bg-gray-950 rounded">
<h1 class="text-2xl font-semibold font-display text-zinc-100">
Manage version order
</h1>
<div class="text-center w-full text-sm text-zinc-600">lowest</div>
<draggable
@update="() => updateVersionOrder()"
:list="game.versions"
handle=".handle"
class="mt-2 space-y-4"
>
<template #item="{ element: item }: { element: GameVersion }">
<div
class="w-full inline-flex items-center px-4 py-2 bg-zinc-900 rounded justify-between"
>
<div class="text-zinc-100 font-semibold">
{{ item.versionName }}
</div>
<div class="text-zinc-400">
{{ item.delta ? "Upgrade mode" : "" }}
</div>
<div class="inline-flex gap-x-2">
<Bars3Icon class="cursor-move w-6 h-6 text-zinc-400 handle" />
<button @click="() => deleteVersion(item.versionName)">
<TrashIcon class="w-5 h-5 text-red-600" />
</button>
</div>
</div>
</template>
</draggable>
<div class="mt-2 text-center w-full text-sm text-zinc-600">highest</div>
</div>
</div>
</div>
<UploadFileDialog
v-model="showUploadModal"
:options="{ id: game.id }"
accept="image/*"
endpoint="/api/v1/admin/game/image"
@upload="(result) => uploadAfterImageUpload(result)"
/>
<UploadFileDialog
v-model="showUploadModal"
:options="{ id: game.id }"
accept="image/*"
endpoint="/api/v1/admin/game/image"
@upload="(result) => uploadAfterImageUpload(result)"
/>
</template>
<script setup lang="ts">
import { InformationCircleIcon } from "@heroicons/vue/20/solid";
import { Bars3Icon, TrashIcon } from "@heroicons/vue/16/solid";
import type { Game, GameVersion } from "@prisma/client";
import markdownit from "markdown-it";
import UploadFileDialog from "~/components/UploadFileDialog.vue";
definePageMeta({
layout: "admin",
layout: "admin",
});
const showUploadModal = ref(false);
@ -146,84 +201,83 @@ const showUploadModal = ref(false);
const route = useRoute();
const gameId = route.params.id.toString();
const headers = useRequestHeaders(["cookie"]);
const game = ref(
await $fetch(
const { game: rawGame, unimportedVersions } = await $fetch(
`/api/v1/admin/game?id=${encodeURIComponent(gameId)}`,
{
headers,
}
)
headers,
},
);
const game = ref(rawGame);
const md = markdownit();
const descriptionHTML = md.render(game.value?.mDescription ?? "");
async function updateBannerImage(id: string) {
if (game.value.mBannerId == id) return;
const { mBannerId } = await $fetch("/api/v1/admin/game", {
method: "PATCH",
body: {
id: gameId,
mBannerId: id,
},
});
game.value.mBannerId = mBannerId;
if (game.value.mBannerId == id) return;
const { mBannerId } = await $fetch("/api/v1/admin/game", {
method: "PATCH",
body: {
id: gameId,
mBannerId: id,
},
});
game.value.mBannerId = mBannerId;
}
async function updateCoverImage(id: string) {
if (game.value.mCoverId == id) return;
const { mCoverId } = await $fetch("/api/v1/admin/game", {
method: "PATCH",
body: {
id: gameId,
mCoverId: id,
},
});
game.value.mCoverId = mCoverId;
if (game.value.mCoverId == id) return;
const { mCoverId } = await $fetch("/api/v1/admin/game", {
method: "PATCH",
body: {
id: gameId,
mCoverId: id,
},
});
game.value.mCoverId = mCoverId;
}
async function deleteImage(id: string) {
const { mBannerId, mImageLibrary } = await $fetch(
"/api/v1/admin/game/image",
{
method: "DELETE",
body: {
gameId: game.value.id,
imageId: id,
},
}
);
game.value.mImageLibrary = mImageLibrary;
game.value.mBannerId = mBannerId;
const { mBannerId, mImageLibrary } = await $fetch(
"/api/v1/admin/game/image",
{
method: "DELETE",
body: {
gameId: game.value.id,
imageId: id,
},
},
);
game.value.mImageLibrary = mImageLibrary;
game.value.mBannerId = mBannerId;
}
async function uploadAfterImageUpload(result: Game) {
if (!game.value) return;
game.value.mImageLibrary = result.mImageLibrary;
if (!game.value) return;
game.value.mImageLibrary = result.mImageLibrary;
}
async function deleteVersion(versionName: string) {
await $fetch("/api/v1/admin/game/version", {
method: "DELETE",
body: {
id: gameId,
versionName: versionName,
},
});
game.value.versions.splice(
game.value.versions.findIndex((e) => e.versionName === versionName),
1
);
await $fetch("/api/v1/admin/game/version", {
method: "DELETE",
body: {
id: gameId,
versionName: versionName,
},
});
game.value.versions.splice(
game.value.versions.findIndex((e) => e.versionName === versionName),
1,
);
}
async function updateVersionOrder() {
const newVersions = await $fetch("/api/v1/admin/game/version", {
method: "POST",
body: {
id: gameId,
versions: game.value.versions.map((e) => e.versionName),
},
});
game.value.versions = newVersions;
const newVersions = await $fetch("/api/v1/admin/game/version", {
method: "POST",
body: {
id: gameId,
versions: game.value.versions.map((e) => e.versionName),
},
});
game.value.versions = newVersions;
}
</script>

View File

@ -1,4 +1,5 @@
import prisma from "~/server/internal/db/database";
import libraryManager from "~/server/internal/library";
export default defineEventHandler(async (h3) => {
const user = await h3.context.session.getAdminUser(h3);
@ -26,7 +27,7 @@ export default defineEventHandler(async (h3) => {
versionName: true,
platform: true,
delta: true,
}
},
},
},
});
@ -34,5 +35,9 @@ export default defineEventHandler(async (h3) => {
if (!game)
throw createError({ statusCode: 404, statusMessage: "Game ID not found" });
return game;
const unimportedVersions = await libraryManager.fetchUnimportedVersions(
game.id,
);
return { game, unimportedVersions };
});

View File

@ -15,7 +15,7 @@ export default defineEventHandler(async (h3) => {
throw createError({
statusCode: 400,
statusMessage:
"Missing id, version, platform, setup or startup from body",
"ID, version, platform, setup and startup (if not in upgrade mode) are required. ",
});
const taskId = await libraryManager.importVersion(
@ -26,7 +26,7 @@ export default defineEventHandler(async (h3) => {
startup,
setup,
},
delta
delta,
);
if (!taskId)
throw createError({

View File

@ -0,0 +1,9 @@
import { defineClientEventHandler } from "~/server/internal/clients/event-handler";
export default defineClientEventHandler(async (h3) => {
const query = getQuery(h3);
const gameId = query.game;
const versionName = query.version;
const chunkId = query.chunk;
});

View File

@ -26,10 +26,10 @@ export abstract class MetadataProvider {
abstract search(query: string): Promise<GameMetadataSearchResult[]>;
abstract fetchGame(params: _FetchGameMetadataParams): Promise<GameMetadata>;
abstract fetchPublisher(
params: _FetchPublisherMetadataParams
params: _FetchPublisherMetadataParams,
): Promise<PublisherMetadata>;
abstract fetchDeveloper(
params: _FetchDeveloperMetadataParams
params: _FetchDeveloperMetadataParams,
): Promise<DeveloperMetadata>;
}
@ -56,7 +56,7 @@ export class MetadataHandler {
Object.assign({}, result, {
sourceId: provider.id(),
sourceName: provider.name(),
})
}),
);
resolve(mappedResults);
});
@ -74,7 +74,7 @@ export class MetadataHandler {
async createGame(
result: InternalGameMetadataResult,
libraryBasePath: string
libraryBasePath: string,
) {
const provider = this.providers.get(result.sourceId);
if (!provider)
@ -92,7 +92,7 @@ export class MetadataHandler {
const [createObject, pullObjects, dumpObjects] = this.objectHandler.new(
{},
["internal:read"]
["internal:read"],
);
let metadata;
@ -144,7 +144,7 @@ export class MetadataHandler {
return (await this.fetchDeveloperPublisher(
query,
"fetchDeveloper",
"developer"
"developer",
)) as Developer;
}
@ -152,16 +152,16 @@ export class MetadataHandler {
return (await this.fetchDeveloperPublisher(
query,
"fetchPublisher",
"publisher"
"publisher",
)) as Publisher;
}
// Careful with this function, it has no typechecking
// TODO: fix typechecking
// Type-checking this thing is impossible
private async fetchDeveloperPublisher(
query: string,
functionName: any,
databaseName: any
databaseName: any,
) {
const existing = await (prisma as any)[databaseName].findFirst({
where: {
@ -173,12 +173,12 @@ export class MetadataHandler {
for (const provider of this.providers.values() as any) {
const [createObject, pullObjects, dumpObjects] = this.objectHandler.new(
{},
["internal:read"]
["internal:read"],
);
let result;
try {
result = await provider[functionName]({ query, createObject });
} catch(e) {
} catch (e) {
console.warn(e);
dumpObjects();
continue;
@ -206,7 +206,7 @@ export class MetadataHandler {
}
throw new Error(
`No metadata provider found a ${databaseName} for "${query}"`
`No metadata provider found a ${databaseName} for "${query}"`,
);
}
}

7
server/internal/utils/types.d.ts vendored Normal file
View File

@ -0,0 +1,7 @@
export type FilterConditionally<Source, Condition> = Pick<
Source,
{ [K in keyof Source]: Source[K] extends Condition ? K : never }[keyof Source]
>;
export type KeyOfType<T, V> = keyof {
[P in keyof T as T[P] extends V ? P : never]: any;
};