Merge remote-tracking branch 'server/develop'
This commit is contained in:
DecDuck
@@ -0,0 +1,43 @@
|
||||
Dockerfile
|
||||
.github
|
||||
.vscode
|
||||
*.md
|
||||
|
||||
#### gitignore below
|
||||
# Nuxt dev/build outputs
|
||||
.output
|
||||
.data
|
||||
.nuxt
|
||||
.nitro
|
||||
.cache
|
||||
dist
|
||||
|
||||
# Node dependencies
|
||||
node_modules
|
||||
.yarn
|
||||
|
||||
# Logs
|
||||
logs
|
||||
*.log
|
||||
|
||||
# Misc
|
||||
.DS_Store
|
||||
.fleet
|
||||
.idea
|
||||
|
||||
# Local env files
|
||||
.env
|
||||
.env.*
|
||||
!.env.example
|
||||
|
||||
.data
|
||||
|
||||
|
||||
# deploy template
|
||||
deploy-template/*
|
||||
|
||||
!deploy-template/compose.yml
|
||||
|
||||
# generated prisma client
|
||||
/prisma/client
|
||||
/prisma/validate
|
||||
@@ -0,0 +1,10 @@
|
||||
root = true
|
||||
|
||||
[*]
|
||||
end_of_line = lf
|
||||
insert_final_newline = true
|
||||
|
||||
[*.{js,json,yml}]
|
||||
charset = utf-8
|
||||
indent_style = space
|
||||
indent_size = 2
|
||||
@@ -0,0 +1,7 @@
|
||||
DATABASE_URL="postgres://drop:drop@127.0.0.1:5432/drop"
|
||||
|
||||
GIANT_BOMB_API_KEY=""
|
||||
|
||||
EXTERNAL_URL="http://localhost:3000"
|
||||
|
||||
NUXT_PORT=4000
|
||||
@@ -0,0 +1,5 @@
|
||||
/.yarn/** linguist-vendored
|
||||
/.yarn/releases/* binary
|
||||
/.yarn/plugins/**/* binary
|
||||
/.pnp.* binary linguist-generated
|
||||
* text=auto eol=lf
|
||||
Vendored
+61
@@ -0,0 +1,61 @@
|
||||
name: CI
|
||||
|
||||
on:
|
||||
push:
|
||||
branches:
|
||||
- develop
|
||||
pull_request:
|
||||
branches:
|
||||
- develop
|
||||
|
||||
permissions:
|
||||
contents: read
|
||||
|
||||
jobs:
|
||||
typecheck:
|
||||
name: Typecheck
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- name: Check out the repo
|
||||
uses: actions/checkout@v4
|
||||
with:
|
||||
submodules: true
|
||||
|
||||
- name: Install pnpm
|
||||
uses: pnpm/action-setup@v4
|
||||
|
||||
- name: Setup Node.js environment
|
||||
uses: actions/setup-node@v4
|
||||
with:
|
||||
node-version: lts/*
|
||||
cache: "pnpm"
|
||||
|
||||
- name: Install dependencies
|
||||
run: pnpm install
|
||||
|
||||
- name: Typecheck
|
||||
run: pnpm run typecheck
|
||||
|
||||
lint:
|
||||
name: Lint
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- name: Check out the repo
|
||||
uses: actions/checkout@v4
|
||||
with:
|
||||
submodules: true
|
||||
|
||||
- name: Install pnpm
|
||||
uses: pnpm/action-setup@v4
|
||||
|
||||
- name: Setup Node.js environment
|
||||
uses: actions/setup-node@v4
|
||||
with:
|
||||
node-version: lts/*
|
||||
cache: "pnpm"
|
||||
|
||||
- name: Install dependencies
|
||||
run: pnpm install
|
||||
|
||||
- name: Lint
|
||||
run: pnpm run lint
|
||||
Vendored
+158
@@ -0,0 +1,158 @@
|
||||
name: Release Workflow
|
||||
|
||||
on:
|
||||
workflow_dispatch: {}
|
||||
release:
|
||||
types: [published]
|
||||
# This can be used to automatically publish nightlies at UTC nighttime
|
||||
schedule:
|
||||
- cron: "0 2 * * *" # run at 2 AM UTC
|
||||
|
||||
env:
|
||||
REGISTRY_IMAGE: ghcr.io/drop-oss/drop
|
||||
|
||||
jobs:
|
||||
build:
|
||||
strategy:
|
||||
fail-fast: false
|
||||
matrix:
|
||||
include:
|
||||
- platform: linux/amd64
|
||||
runner: ubuntu-latest
|
||||
- platform: linux/arm64
|
||||
runner: ubuntu-24.04-arm
|
||||
runs-on: ${{ matrix.runner }}
|
||||
permissions:
|
||||
packages: write
|
||||
contents: read
|
||||
steps:
|
||||
- name: Check out the repo
|
||||
uses: actions/checkout@v4
|
||||
with:
|
||||
submodules: true
|
||||
fetch-depth: 3 # fix for when this gets triggered by tag
|
||||
fetch-tags: true
|
||||
ref: ${{ github.ref }}
|
||||
token: ${{ secrets.GITHUB_TOKEN }}
|
||||
|
||||
- name: Prepare
|
||||
run: |
|
||||
platform=${{ matrix.platform }}
|
||||
echo "PLATFORM_PAIR=${platform//\//-}" >> $GITHUB_ENV
|
||||
|
||||
- name: Docker meta
|
||||
id: meta
|
||||
uses: docker/metadata-action@v5
|
||||
with:
|
||||
images: ${{ env.REGISTRY_IMAGE }}
|
||||
|
||||
- name: Login to Docker Hub
|
||||
uses: docker/login-action@v3
|
||||
with:
|
||||
registry: ghcr.io
|
||||
username: ${{ github.actor }}
|
||||
password: ${{ secrets.GITHUB_TOKEN }}
|
||||
|
||||
- name: Set up QEMU
|
||||
uses: docker/setup-qemu-action@v3
|
||||
|
||||
- name: Set up Docker Buildx
|
||||
uses: docker/setup-buildx-action@v3
|
||||
|
||||
- name: Determine final version
|
||||
id: get_final_ver
|
||||
run: |
|
||||
BASE_VER=v$(jq -r '.version' package.json)
|
||||
TODAY=$(date +'%Y.%m.%d')
|
||||
|
||||
echo "Today will be: $TODAY"
|
||||
echo "today=$TODAY" >> $GITHUB_OUTPUT
|
||||
|
||||
if [[ "${{ github.event_name }}" == "release" ]]; then
|
||||
FINAL_VER="$BASE_VER"
|
||||
else
|
||||
FINAL_VER="${BASE_VER}-nightly.$TODAY"
|
||||
fi
|
||||
|
||||
echo "Drop's release tag will be: $FINAL_VER"
|
||||
echo "final_ver=$FINAL_VER" >> $GITHUB_OUTPUT
|
||||
|
||||
- name: Build and push by digest
|
||||
id: build
|
||||
uses: docker/build-push-action@v6
|
||||
with:
|
||||
platforms: ${{ matrix.platform }}
|
||||
labels: ${{ steps.meta.outputs.labels }}
|
||||
tags: ${{ env.REGISTRY_IMAGE }}
|
||||
outputs: type=image,push-by-digest=true,name-canonical=true,push=true
|
||||
provenance: mode=max
|
||||
sbom: true
|
||||
build-args: |
|
||||
BUILD_DROP_VERSION=${{ steps.get_final_ver.outputs.final_ver }}
|
||||
BUILD_GIT_REF=${{ github.sha }}
|
||||
|
||||
- name: Export digest
|
||||
run: |
|
||||
mkdir -p ${{ runner.temp }}/digests
|
||||
digest="${{ steps.build.outputs.digest }}"
|
||||
touch "${{ runner.temp }}/digests/${digest#sha256:}"
|
||||
|
||||
- name: Upload digest
|
||||
uses: actions/upload-artifact@v4
|
||||
with:
|
||||
name: digests-${{ env.PLATFORM_PAIR }}
|
||||
path: ${{ runner.temp }}/digests/*
|
||||
if-no-files-found: error
|
||||
retention-days: 1
|
||||
|
||||
merge:
|
||||
runs-on: ubuntu-latest
|
||||
needs:
|
||||
- build
|
||||
permissions:
|
||||
packages: write
|
||||
contents: read
|
||||
steps:
|
||||
- name: Download digests
|
||||
uses: actions/download-artifact@v4
|
||||
with:
|
||||
path: ${{ runner.temp }}/digests
|
||||
pattern: digests-*
|
||||
merge-multiple: true
|
||||
|
||||
- name: Login to Docker Hub
|
||||
uses: docker/login-action@v3
|
||||
with:
|
||||
registry: ghcr.io
|
||||
username: ${{ github.actor }}
|
||||
password: ${{ secrets.GITHUB_TOKEN }}
|
||||
|
||||
- name: Set up Docker Buildx
|
||||
uses: docker/setup-buildx-action@v3
|
||||
- name: Extract metadata (tags, labels) for Docker
|
||||
id: meta
|
||||
uses: docker/metadata-action@v5
|
||||
with:
|
||||
images: |
|
||||
ghcr.io/drop-OSS/drop
|
||||
tags: |
|
||||
type=schedule,pattern=nightly
|
||||
type=schedule,pattern=nightly.${{ steps.get_final_ver.outputs.today }}
|
||||
type=semver,pattern=v{{version}}
|
||||
type=semver,pattern=v{{major}}.{{minor}}
|
||||
type=semver,pattern=v{{major}}
|
||||
type=ref,event=branch,prefix=branch-
|
||||
type=ref,event=pr
|
||||
type=sha
|
||||
# set latest tag for stable releases
|
||||
type=raw,value=latest,enable=${{ github.event_name == 'release' && github.event.release.prerelease == false }}
|
||||
|
||||
- name: Create manifest list and push
|
||||
working-directory: ${{ runner.temp }}/digests
|
||||
run: |
|
||||
docker buildx imagetools create $(jq -cr '.tags | map("-t " + .) | join(" ")' <<< "$DOCKER_METADATA_OUTPUT_JSON") \
|
||||
$(printf '${{ env.REGISTRY_IMAGE }}@sha256:%s ' *)
|
||||
|
||||
- name: Inspect image
|
||||
run: |
|
||||
docker buildx imagetools inspect ${{ env.REGISTRY_IMAGE }}:${{ steps.meta.outputs.version }}
|
||||
@@ -0,0 +1,39 @@
|
||||
# Nuxt dev/build outputs
|
||||
.output
|
||||
.data
|
||||
.nuxt
|
||||
.nitro
|
||||
.cache
|
||||
dist
|
||||
|
||||
# Node dependencies
|
||||
node_modules
|
||||
.yarn
|
||||
|
||||
# Logs
|
||||
logs
|
||||
*.log
|
||||
|
||||
# Misc
|
||||
.DS_Store
|
||||
.fleet
|
||||
.idea
|
||||
|
||||
# Local env files
|
||||
.env
|
||||
.env.*
|
||||
!.env.example
|
||||
|
||||
.data
|
||||
|
||||
|
||||
# deploy template
|
||||
deploy-template/*
|
||||
|
||||
!deploy-template/compose.yml
|
||||
|
||||
# generated prisma client
|
||||
/prisma/client
|
||||
/prisma/validate
|
||||
|
||||
/server/internal/proto
|
||||
@@ -0,0 +1,6 @@
|
||||
[submodule "drop-base"]
|
||||
path = drop-base
|
||||
url = https://github.com/Drop-OSS/drop-base.git
|
||||
[submodule "torrential"]
|
||||
path = torrential
|
||||
url = https://github.com/Drop-OSS/torrential.git
|
||||
@@ -0,0 +1,7 @@
|
||||
drop-base/
|
||||
# file is fully managed by pnpm, no reason to break it
|
||||
pnpm-lock.yaml
|
||||
|
||||
/torrential/
|
||||
.data/**
|
||||
**/.data/**
|
||||
@@ -0,0 +1,5 @@
|
||||
{
|
||||
"jsonRecursiveSort": true,
|
||||
"jsonSortOrder": "{\"/.*/\": \"lexical\"}",
|
||||
"plugins": ["prettier-plugin-sort-json"]
|
||||
}
|
||||
Vendored
+12
@@ -0,0 +1,12 @@
|
||||
{
|
||||
"recommendations": [
|
||||
"lokalise.i18n-ally",
|
||||
"esbenp.prettier-vscode",
|
||||
"Prisma.prisma",
|
||||
"bradlc.vscode-tailwindcss",
|
||||
"Vue.volar",
|
||||
"arktypeio.arkdark",
|
||||
"EditorConfig.EditorConfig",
|
||||
"dbaeumer.vscode-eslint"
|
||||
]
|
||||
}
|
||||
Vendored
+35
@@ -0,0 +1,35 @@
|
||||
{
|
||||
// allow autocomplete for ArkType expressions like "string | num"
|
||||
"editor.quickSuggestions": {
|
||||
"strings": "on"
|
||||
},
|
||||
"i18n-ally.extract.autoDetect": true,
|
||||
"i18n-ally.extract.ignored": ["string >= 14", "string.alphanumeric >= 5"],
|
||||
"i18n-ally.extract.ignoredByFiles": {
|
||||
"components/NewsArticleCreateButton.vue": ["[", "`", "Enter"],
|
||||
"pages/admin/library/sources/index.vue": ["Filesystem"],
|
||||
"server/api/v1/auth/signin/simple.post.ts": ["boolean | undefined"]
|
||||
},
|
||||
"i18n-ally.keepFulfilled": true,
|
||||
"i18n-ally.keystyle": "nested",
|
||||
"i18n-ally.localesPaths": ["i18n", "i18n/locales"],
|
||||
// i18n Ally settings
|
||||
"i18n-ally.sortKeys": true,
|
||||
"prisma.pinToPrisma6": false,
|
||||
"spellchecker.ignoreWordsList": ["mTLS", "Wireguard"],
|
||||
"sqltools.connections": [
|
||||
{
|
||||
"database": "drop",
|
||||
"driver": "PostgreSQL",
|
||||
"name": "drop",
|
||||
"password": "drop",
|
||||
"port": 5432,
|
||||
"previewLimit": 50,
|
||||
"server": "localhost",
|
||||
"username": "drop"
|
||||
}
|
||||
],
|
||||
"typescript.experimental.useTsgo": false,
|
||||
// prioritize ArkType's "type" for autoimports
|
||||
"typescript.preferences.autoImportSpecifierExcludeRegexes": ["^(node:)?os$"]
|
||||
}
|
||||
@@ -0,0 +1,3 @@
|
||||
# Contributing
|
||||
|
||||
Check out our contributing guidelines on our developer docs: [https://developer.droposs.org/contributing](https://developer.droposs.org/contributing).
|
||||
@@ -0,0 +1,75 @@
|
||||
# syntax=docker/dockerfile:1
|
||||
|
||||
FROM node:lts-alpine AS base
|
||||
ENV PNPM_HOME="/pnpm"
|
||||
ENV PATH="$PNPM_HOME:$PATH"
|
||||
RUN corepack enable
|
||||
WORKDIR /app
|
||||
|
||||
## so corepack knows pnpm's version
|
||||
COPY package.json pnpm-lock.yaml pnpm-workspace.yaml ./
|
||||
## prevent prompt to download
|
||||
ENV COREPACK_ENABLE_DOWNLOAD_PROMPT=0
|
||||
## setup for offline
|
||||
RUN corepack pack
|
||||
## don't call out to network anymore
|
||||
ENV COREPACK_ENABLE_NETWORK=0
|
||||
|
||||
### INSTALL DEPS ONCE
|
||||
FROM base AS deps
|
||||
RUN pnpm install --frozen-lockfile --ignore-scripts
|
||||
|
||||
### BUILD TORRENTIAL
|
||||
FROM rustlang/rust:nightly-alpine AS torrential-build
|
||||
RUN apk add musl-dev
|
||||
WORKDIR /build
|
||||
COPY torrential .
|
||||
RUN apk add protoc
|
||||
RUN cargo build --release
|
||||
|
||||
### BUILD APP
|
||||
FROM base AS build-system
|
||||
|
||||
ENV NODE_ENV=production
|
||||
ENV NUXT_TELEMETRY_DISABLED=1
|
||||
|
||||
## add git so drop can determine its git ref at build
|
||||
RUN apk add --no-cache git
|
||||
|
||||
## copy deps and rest of project files
|
||||
COPY --from=deps /app/node_modules ./node_modules
|
||||
COPY . .
|
||||
|
||||
ARG BUILD_DROP_VERSION
|
||||
ARG BUILD_GIT_REF
|
||||
|
||||
## build
|
||||
RUN pnpm run postinstall && pnpm run build
|
||||
|
||||
|
||||
# create run environment for Drop
|
||||
FROM base AS run-system
|
||||
|
||||
ENV NODE_ENV=production
|
||||
ENV NUXT_TELEMETRY_DISABLED=1
|
||||
|
||||
# RUN --mount=type=cache,target=/root/.yarn YARN_CACHE_FOLDER=/root/.yarn yarn add --network-timeout 1000000 --no-lockfile --ignore-scripts prisma@6.11.1
|
||||
RUN apk add --no-cache pnpm 7zip nginx
|
||||
RUN pnpm install prisma@7.3.0
|
||||
# init prisma to download all required files
|
||||
RUN pnpm prisma init
|
||||
|
||||
COPY --from=build-system /app/prisma.config.ts ./
|
||||
COPY --from=build-system /app/.output ./app
|
||||
COPY --from=build-system /app/prisma ./prisma
|
||||
COPY --from=build-system /app/build ./startup
|
||||
COPY --from=build-system /app/build/nginx.conf /nginx.conf
|
||||
COPY --from=torrential-build /build/target/release/torrential /usr/bin/
|
||||
|
||||
ENV LIBRARY="/library"
|
||||
ENV DATA="/data"
|
||||
ENV NGINX_CONFIG="/nginx.conf"
|
||||
# NGINX's port
|
||||
ENV PORT=4000
|
||||
|
||||
CMD ["sh", "/app/startup/launch.sh"]
|
||||
+661
@@ -0,0 +1,661 @@
|
||||
GNU AFFERO GENERAL PUBLIC LICENSE
|
||||
Version 3, 19 November 2007
|
||||
|
||||
Copyright (C) 2007 Free Software Foundation, Inc. <https://fsf.org/>
|
||||
Everyone is permitted to copy and distribute verbatim copies
|
||||
of this license document, but changing it is not allowed.
|
||||
|
||||
Preamble
|
||||
|
||||
The GNU Affero General Public License is a free, copyleft license for
|
||||
software and other kinds of works, specifically designed to ensure
|
||||
cooperation with the community in the case of network server software.
|
||||
|
||||
The licenses for most software and other practical works are designed
|
||||
to take away your freedom to share and change the works. By contrast,
|
||||
our General Public Licenses are intended to guarantee your freedom to
|
||||
share and change all versions of a program--to make sure it remains free
|
||||
software for all its users.
|
||||
|
||||
When we speak of free software, we are referring to freedom, not
|
||||
price. Our General Public Licenses are designed to make sure that you
|
||||
have the freedom to distribute copies of free software (and charge for
|
||||
them if you wish), that you receive source code or can get it if you
|
||||
want it, that you can change the software or use pieces of it in new
|
||||
free programs, and that you know you can do these things.
|
||||
|
||||
Developers that use our General Public Licenses protect your rights
|
||||
with two steps: (1) assert copyright on the software, and (2) offer
|
||||
you this License which gives you legal permission to copy, distribute
|
||||
and/or modify the software.
|
||||
|
||||
A secondary benefit of defending all users' freedom is that
|
||||
improvements made in alternate versions of the program, if they
|
||||
receive widespread use, become available for other developers to
|
||||
incorporate. Many developers of free software are heartened and
|
||||
encouraged by the resulting cooperation. However, in the case of
|
||||
software used on network servers, this result may fail to come about.
|
||||
The GNU General Public License permits making a modified version and
|
||||
letting the public access it on a server without ever releasing its
|
||||
source code to the public.
|
||||
|
||||
The GNU Affero General Public License is designed specifically to
|
||||
ensure that, in such cases, the modified source code becomes available
|
||||
to the community. It requires the operator of a network server to
|
||||
provide the source code of the modified version running there to the
|
||||
users of that server. Therefore, public use of a modified version, on
|
||||
a publicly accessible server, gives the public access to the source
|
||||
code of the modified version.
|
||||
|
||||
An older license, called the Affero General Public License and
|
||||
published by Affero, was designed to accomplish similar goals. This is
|
||||
a different license, not a version of the Affero GPL, but Affero has
|
||||
released a new version of the Affero GPL which permits relicensing under
|
||||
this license.
|
||||
|
||||
The precise terms and conditions for copying, distribution and
|
||||
modification follow.
|
||||
|
||||
TERMS AND CONDITIONS
|
||||
|
||||
0. Definitions.
|
||||
|
||||
"This License" refers to version 3 of the GNU Affero General Public License.
|
||||
|
||||
"Copyright" also means copyright-like laws that apply to other kinds of
|
||||
works, such as semiconductor masks.
|
||||
|
||||
"The Program" refers to any copyrightable work licensed under this
|
||||
License. Each licensee is addressed as "you". "Licensees" and
|
||||
"recipients" may be individuals or organizations.
|
||||
|
||||
To "modify" a work means to copy from or adapt all or part of the work
|
||||
in a fashion requiring copyright permission, other than the making of an
|
||||
exact copy. The resulting work is called a "modified version" of the
|
||||
earlier work or a work "based on" the earlier work.
|
||||
|
||||
A "covered work" means either the unmodified Program or a work based
|
||||
on the Program.
|
||||
|
||||
To "propagate" a work means to do anything with it that, without
|
||||
permission, would make you directly or secondarily liable for
|
||||
infringement under applicable copyright law, except executing it on a
|
||||
computer or modifying a private copy. Propagation includes copying,
|
||||
distribution (with or without modification), making available to the
|
||||
public, and in some countries other activities as well.
|
||||
|
||||
To "convey" a work means any kind of propagation that enables other
|
||||
parties to make or receive copies. Mere interaction with a user through
|
||||
a computer network, with no transfer of a copy, is not conveying.
|
||||
|
||||
An interactive user interface displays "Appropriate Legal Notices"
|
||||
to the extent that it includes a convenient and prominently visible
|
||||
feature that (1) displays an appropriate copyright notice, and (2)
|
||||
tells the user that there is no warranty for the work (except to the
|
||||
extent that warranties are provided), that licensees may convey the
|
||||
work under this License, and how to view a copy of this License. If
|
||||
the interface presents a list of user commands or options, such as a
|
||||
menu, a prominent item in the list meets this criterion.
|
||||
|
||||
1. Source Code.
|
||||
|
||||
The "source code" for a work means the preferred form of the work
|
||||
for making modifications to it. "Object code" means any non-source
|
||||
form of a work.
|
||||
|
||||
A "Standard Interface" means an interface that either is an official
|
||||
standard defined by a recognized standards body, or, in the case of
|
||||
interfaces specified for a particular programming language, one that
|
||||
is widely used among developers working in that language.
|
||||
|
||||
The "System Libraries" of an executable work include anything, other
|
||||
than the work as a whole, that (a) is included in the normal form of
|
||||
packaging a Major Component, but which is not part of that Major
|
||||
Component, and (b) serves only to enable use of the work with that
|
||||
Major Component, or to implement a Standard Interface for which an
|
||||
implementation is available to the public in source code form. A
|
||||
"Major Component", in this context, means a major essential component
|
||||
(kernel, window system, and so on) of the specific operating system
|
||||
(if any) on which the executable work runs, or a compiler used to
|
||||
produce the work, or an object code interpreter used to run it.
|
||||
|
||||
The "Corresponding Source" for a work in object code form means all
|
||||
the source code needed to generate, install, and (for an executable
|
||||
work) run the object code and to modify the work, including scripts to
|
||||
control those activities. However, it does not include the work's
|
||||
System Libraries, or general-purpose tools or generally available free
|
||||
programs which are used unmodified in performing those activities but
|
||||
which are not part of the work. For example, Corresponding Source
|
||||
includes interface definition files associated with source files for
|
||||
the work, and the source code for shared libraries and dynamically
|
||||
linked subprograms that the work is specifically designed to require,
|
||||
such as by intimate data communication or control flow between those
|
||||
subprograms and other parts of the work.
|
||||
|
||||
The Corresponding Source need not include anything that users
|
||||
can regenerate automatically from other parts of the Corresponding
|
||||
Source.
|
||||
|
||||
The Corresponding Source for a work in source code form is that
|
||||
same work.
|
||||
|
||||
2. Basic Permissions.
|
||||
|
||||
All rights granted under this License are granted for the term of
|
||||
copyright on the Program, and are irrevocable provided the stated
|
||||
conditions are met. This License explicitly affirms your unlimited
|
||||
permission to run the unmodified Program. The output from running a
|
||||
covered work is covered by this License only if the output, given its
|
||||
content, constitutes a covered work. This License acknowledges your
|
||||
rights of fair use or other equivalent, as provided by copyright law.
|
||||
|
||||
You may make, run and propagate covered works that you do not
|
||||
convey, without conditions so long as your license otherwise remains
|
||||
in force. You may convey covered works to others for the sole purpose
|
||||
of having them make modifications exclusively for you, or provide you
|
||||
with facilities for running those works, provided that you comply with
|
||||
the terms of this License in conveying all material for which you do
|
||||
not control copyright. Those thus making or running the covered works
|
||||
for you must do so exclusively on your behalf, under your direction
|
||||
and control, on terms that prohibit them from making any copies of
|
||||
your copyrighted material outside their relationship with you.
|
||||
|
||||
Conveying under any other circumstances is permitted solely under
|
||||
the conditions stated below. Sublicensing is not allowed; section 10
|
||||
makes it unnecessary.
|
||||
|
||||
3. Protecting Users' Legal Rights From Anti-Circumvention Law.
|
||||
|
||||
No covered work shall be deemed part of an effective technological
|
||||
measure under any applicable law fulfilling obligations under article
|
||||
11 of the WIPO copyright treaty adopted on 20 December 1996, or
|
||||
similar laws prohibiting or restricting circumvention of such
|
||||
measures.
|
||||
|
||||
When you convey a covered work, you waive any legal power to forbid
|
||||
circumvention of technological measures to the extent such circumvention
|
||||
is effected by exercising rights under this License with respect to
|
||||
the covered work, and you disclaim any intention to limit operation or
|
||||
modification of the work as a means of enforcing, against the work's
|
||||
users, your or third parties' legal rights to forbid circumvention of
|
||||
technological measures.
|
||||
|
||||
4. Conveying Verbatim Copies.
|
||||
|
||||
You may convey verbatim copies of the Program's source code as you
|
||||
receive it, in any medium, provided that you conspicuously and
|
||||
appropriately publish on each copy an appropriate copyright notice;
|
||||
keep intact all notices stating that this License and any
|
||||
non-permissive terms added in accord with section 7 apply to the code;
|
||||
keep intact all notices of the absence of any warranty; and give all
|
||||
recipients a copy of this License along with the Program.
|
||||
|
||||
You may charge any price or no price for each copy that you convey,
|
||||
and you may offer support or warranty protection for a fee.
|
||||
|
||||
5. Conveying Modified Source Versions.
|
||||
|
||||
You may convey a work based on the Program, or the modifications to
|
||||
produce it from the Program, in the form of source code under the
|
||||
terms of section 4, provided that you also meet all of these conditions:
|
||||
|
||||
a) The work must carry prominent notices stating that you modified
|
||||
it, and giving a relevant date.
|
||||
|
||||
b) The work must carry prominent notices stating that it is
|
||||
released under this License and any conditions added under section
|
||||
7. This requirement modifies the requirement in section 4 to
|
||||
"keep intact all notices".
|
||||
|
||||
c) You must license the entire work, as a whole, under this
|
||||
License to anyone who comes into possession of a copy. This
|
||||
License will therefore apply, along with any applicable section 7
|
||||
additional terms, to the whole of the work, and all its parts,
|
||||
regardless of how they are packaged. This License gives no
|
||||
permission to license the work in any other way, but it does not
|
||||
invalidate such permission if you have separately received it.
|
||||
|
||||
d) If the work has interactive user interfaces, each must display
|
||||
Appropriate Legal Notices; however, if the Program has interactive
|
||||
interfaces that do not display Appropriate Legal Notices, your
|
||||
work need not make them do so.
|
||||
|
||||
A compilation of a covered work with other separate and independent
|
||||
works, which are not by their nature extensions of the covered work,
|
||||
and which are not combined with it such as to form a larger program,
|
||||
in or on a volume of a storage or distribution medium, is called an
|
||||
"aggregate" if the compilation and its resulting copyright are not
|
||||
used to limit the access or legal rights of the compilation's users
|
||||
beyond what the individual works permit. Inclusion of a covered work
|
||||
in an aggregate does not cause this License to apply to the other
|
||||
parts of the aggregate.
|
||||
|
||||
6. Conveying Non-Source Forms.
|
||||
|
||||
You may convey a covered work in object code form under the terms
|
||||
of sections 4 and 5, provided that you also convey the
|
||||
machine-readable Corresponding Source under the terms of this License,
|
||||
in one of these ways:
|
||||
|
||||
a) Convey the object code in, or embodied in, a physical product
|
||||
(including a physical distribution medium), accompanied by the
|
||||
Corresponding Source fixed on a durable physical medium
|
||||
customarily used for software interchange.
|
||||
|
||||
b) Convey the object code in, or embodied in, a physical product
|
||||
(including a physical distribution medium), accompanied by a
|
||||
written offer, valid for at least three years and valid for as
|
||||
long as you offer spare parts or customer support for that product
|
||||
model, to give anyone who possesses the object code either (1) a
|
||||
copy of the Corresponding Source for all the software in the
|
||||
product that is covered by this License, on a durable physical
|
||||
medium customarily used for software interchange, for a price no
|
||||
more than your reasonable cost of physically performing this
|
||||
conveying of source, or (2) access to copy the
|
||||
Corresponding Source from a network server at no charge.
|
||||
|
||||
c) Convey individual copies of the object code with a copy of the
|
||||
written offer to provide the Corresponding Source. This
|
||||
alternative is allowed only occasionally and noncommercially, and
|
||||
only if you received the object code with such an offer, in accord
|
||||
with subsection 6b.
|
||||
|
||||
d) Convey the object code by offering access from a designated
|
||||
place (gratis or for a charge), and offer equivalent access to the
|
||||
Corresponding Source in the same way through the same place at no
|
||||
further charge. You need not require recipients to copy the
|
||||
Corresponding Source along with the object code. If the place to
|
||||
copy the object code is a network server, the Corresponding Source
|
||||
may be on a different server (operated by you or a third party)
|
||||
that supports equivalent copying facilities, provided you maintain
|
||||
clear directions next to the object code saying where to find the
|
||||
Corresponding Source. Regardless of what server hosts the
|
||||
Corresponding Source, you remain obligated to ensure that it is
|
||||
available for as long as needed to satisfy these requirements.
|
||||
|
||||
e) Convey the object code using peer-to-peer transmission, provided
|
||||
you inform other peers where the object code and Corresponding
|
||||
Source of the work are being offered to the general public at no
|
||||
charge under subsection 6d.
|
||||
|
||||
A separable portion of the object code, whose source code is excluded
|
||||
from the Corresponding Source as a System Library, need not be
|
||||
included in conveying the object code work.
|
||||
|
||||
A "User Product" is either (1) a "consumer product", which means any
|
||||
tangible personal property which is normally used for personal, family,
|
||||
or household purposes, or (2) anything designed or sold for incorporation
|
||||
into a dwelling. In determining whether a product is a consumer product,
|
||||
doubtful cases shall be resolved in favor of coverage. For a particular
|
||||
product received by a particular user, "normally used" refers to a
|
||||
typical or common use of that class of product, regardless of the status
|
||||
of the particular user or of the way in which the particular user
|
||||
actually uses, or expects or is expected to use, the product. A product
|
||||
is a consumer product regardless of whether the product has substantial
|
||||
commercial, industrial or non-consumer uses, unless such uses represent
|
||||
the only significant mode of use of the product.
|
||||
|
||||
"Installation Information" for a User Product means any methods,
|
||||
procedures, authorization keys, or other information required to install
|
||||
and execute modified versions of a covered work in that User Product from
|
||||
a modified version of its Corresponding Source. The information must
|
||||
suffice to ensure that the continued functioning of the modified object
|
||||
code is in no case prevented or interfered with solely because
|
||||
modification has been made.
|
||||
|
||||
If you convey an object code work under this section in, or with, or
|
||||
specifically for use in, a User Product, and the conveying occurs as
|
||||
part of a transaction in which the right of possession and use of the
|
||||
User Product is transferred to the recipient in perpetuity or for a
|
||||
fixed term (regardless of how the transaction is characterized), the
|
||||
Corresponding Source conveyed under this section must be accompanied
|
||||
by the Installation Information. But this requirement does not apply
|
||||
if neither you nor any third party retains the ability to install
|
||||
modified object code on the User Product (for example, the work has
|
||||
been installed in ROM).
|
||||
|
||||
The requirement to provide Installation Information does not include a
|
||||
requirement to continue to provide support service, warranty, or updates
|
||||
for a work that has been modified or installed by the recipient, or for
|
||||
the User Product in which it has been modified or installed. Access to a
|
||||
network may be denied when the modification itself materially and
|
||||
adversely affects the operation of the network or violates the rules and
|
||||
protocols for communication across the network.
|
||||
|
||||
Corresponding Source conveyed, and Installation Information provided,
|
||||
in accord with this section must be in a format that is publicly
|
||||
documented (and with an implementation available to the public in
|
||||
source code form), and must require no special password or key for
|
||||
unpacking, reading or copying.
|
||||
|
||||
7. Additional Terms.
|
||||
|
||||
"Additional permissions" are terms that supplement the terms of this
|
||||
License by making exceptions from one or more of its conditions.
|
||||
Additional permissions that are applicable to the entire Program shall
|
||||
be treated as though they were included in this License, to the extent
|
||||
that they are valid under applicable law. If additional permissions
|
||||
apply only to part of the Program, that part may be used separately
|
||||
under those permissions, but the entire Program remains governed by
|
||||
this License without regard to the additional permissions.
|
||||
|
||||
When you convey a copy of a covered work, you may at your option
|
||||
remove any additional permissions from that copy, or from any part of
|
||||
it. (Additional permissions may be written to require their own
|
||||
removal in certain cases when you modify the work.) You may place
|
||||
additional permissions on material, added by you to a covered work,
|
||||
for which you have or can give appropriate copyright permission.
|
||||
|
||||
Notwithstanding any other provision of this License, for material you
|
||||
add to a covered work, you may (if authorized by the copyright holders of
|
||||
that material) supplement the terms of this License with terms:
|
||||
|
||||
a) Disclaiming warranty or limiting liability differently from the
|
||||
terms of sections 15 and 16 of this License; or
|
||||
|
||||
b) Requiring preservation of specified reasonable legal notices or
|
||||
author attributions in that material or in the Appropriate Legal
|
||||
Notices displayed by works containing it; or
|
||||
|
||||
c) Prohibiting misrepresentation of the origin of that material, or
|
||||
requiring that modified versions of such material be marked in
|
||||
reasonable ways as different from the original version; or
|
||||
|
||||
d) Limiting the use for publicity purposes of names of licensors or
|
||||
authors of the material; or
|
||||
|
||||
e) Declining to grant rights under trademark law for use of some
|
||||
trade names, trademarks, or service marks; or
|
||||
|
||||
f) Requiring indemnification of licensors and authors of that
|
||||
material by anyone who conveys the material (or modified versions of
|
||||
it) with contractual assumptions of liability to the recipient, for
|
||||
any liability that these contractual assumptions directly impose on
|
||||
those licensors and authors.
|
||||
|
||||
All other non-permissive additional terms are considered "further
|
||||
restrictions" within the meaning of section 10. If the Program as you
|
||||
received it, or any part of it, contains a notice stating that it is
|
||||
governed by this License along with a term that is a further
|
||||
restriction, you may remove that term. If a license document contains
|
||||
a further restriction but permits relicensing or conveying under this
|
||||
License, you may add to a covered work material governed by the terms
|
||||
of that license document, provided that the further restriction does
|
||||
not survive such relicensing or conveying.
|
||||
|
||||
If you add terms to a covered work in accord with this section, you
|
||||
must place, in the relevant source files, a statement of the
|
||||
additional terms that apply to those files, or a notice indicating
|
||||
where to find the applicable terms.
|
||||
|
||||
Additional terms, permissive or non-permissive, may be stated in the
|
||||
form of a separately written license, or stated as exceptions;
|
||||
the above requirements apply either way.
|
||||
|
||||
8. Termination.
|
||||
|
||||
You may not propagate or modify a covered work except as expressly
|
||||
provided under this License. Any attempt otherwise to propagate or
|
||||
modify it is void, and will automatically terminate your rights under
|
||||
this License (including any patent licenses granted under the third
|
||||
paragraph of section 11).
|
||||
|
||||
However, if you cease all violation of this License, then your
|
||||
license from a particular copyright holder is reinstated (a)
|
||||
provisionally, unless and until the copyright holder explicitly and
|
||||
finally terminates your license, and (b) permanently, if the copyright
|
||||
holder fails to notify you of the violation by some reasonable means
|
||||
prior to 60 days after the cessation.
|
||||
|
||||
Moreover, your license from a particular copyright holder is
|
||||
reinstated permanently if the copyright holder notifies you of the
|
||||
violation by some reasonable means, this is the first time you have
|
||||
received notice of violation of this License (for any work) from that
|
||||
copyright holder, and you cure the violation prior to 30 days after
|
||||
your receipt of the notice.
|
||||
|
||||
Termination of your rights under this section does not terminate the
|
||||
licenses of parties who have received copies or rights from you under
|
||||
this License. If your rights have been terminated and not permanently
|
||||
reinstated, you do not qualify to receive new licenses for the same
|
||||
material under section 10.
|
||||
|
||||
9. Acceptance Not Required for Having Copies.
|
||||
|
||||
You are not required to accept this License in order to receive or
|
||||
run a copy of the Program. Ancillary propagation of a covered work
|
||||
occurring solely as a consequence of using peer-to-peer transmission
|
||||
to receive a copy likewise does not require acceptance. However,
|
||||
nothing other than this License grants you permission to propagate or
|
||||
modify any covered work. These actions infringe copyright if you do
|
||||
not accept this License. Therefore, by modifying or propagating a
|
||||
covered work, you indicate your acceptance of this License to do so.
|
||||
|
||||
10. Automatic Licensing of Downstream Recipients.
|
||||
|
||||
Each time you convey a covered work, the recipient automatically
|
||||
receives a license from the original licensors, to run, modify and
|
||||
propagate that work, subject to this License. You are not responsible
|
||||
for enforcing compliance by third parties with this License.
|
||||
|
||||
An "entity transaction" is a transaction transferring control of an
|
||||
organization, or substantially all assets of one, or subdividing an
|
||||
organization, or merging organizations. If propagation of a covered
|
||||
work results from an entity transaction, each party to that
|
||||
transaction who receives a copy of the work also receives whatever
|
||||
licenses to the work the party's predecessor in interest had or could
|
||||
give under the previous paragraph, plus a right to possession of the
|
||||
Corresponding Source of the work from the predecessor in interest, if
|
||||
the predecessor has it or can get it with reasonable efforts.
|
||||
|
||||
You may not impose any further restrictions on the exercise of the
|
||||
rights granted or affirmed under this License. For example, you may
|
||||
not impose a license fee, royalty, or other charge for exercise of
|
||||
rights granted under this License, and you may not initiate litigation
|
||||
(including a cross-claim or counterclaim in a lawsuit) alleging that
|
||||
any patent claim is infringed by making, using, selling, offering for
|
||||
sale, or importing the Program or any portion of it.
|
||||
|
||||
11. Patents.
|
||||
|
||||
A "contributor" is a copyright holder who authorizes use under this
|
||||
License of the Program or a work on which the Program is based. The
|
||||
work thus licensed is called the contributor's "contributor version".
|
||||
|
||||
A contributor's "essential patent claims" are all patent claims
|
||||
owned or controlled by the contributor, whether already acquired or
|
||||
hereafter acquired, that would be infringed by some manner, permitted
|
||||
by this License, of making, using, or selling its contributor version,
|
||||
but do not include claims that would be infringed only as a
|
||||
consequence of further modification of the contributor version. For
|
||||
purposes of this definition, "control" includes the right to grant
|
||||
patent sublicenses in a manner consistent with the requirements of
|
||||
this License.
|
||||
|
||||
Each contributor grants you a non-exclusive, worldwide, royalty-free
|
||||
patent license under the contributor's essential patent claims, to
|
||||
make, use, sell, offer for sale, import and otherwise run, modify and
|
||||
propagate the contents of its contributor version.
|
||||
|
||||
In the following three paragraphs, a "patent license" is any express
|
||||
agreement or commitment, however denominated, not to enforce a patent
|
||||
(such as an express permission to practice a patent or covenant not to
|
||||
sue for patent infringement). To "grant" such a patent license to a
|
||||
party means to make such an agreement or commitment not to enforce a
|
||||
patent against the party.
|
||||
|
||||
If you convey a covered work, knowingly relying on a patent license,
|
||||
and the Corresponding Source of the work is not available for anyone
|
||||
to copy, free of charge and under the terms of this License, through a
|
||||
publicly available network server or other readily accessible means,
|
||||
then you must either (1) cause the Corresponding Source to be so
|
||||
available, or (2) arrange to deprive yourself of the benefit of the
|
||||
patent license for this particular work, or (3) arrange, in a manner
|
||||
consistent with the requirements of this License, to extend the patent
|
||||
license to downstream recipients. "Knowingly relying" means you have
|
||||
actual knowledge that, but for the patent license, your conveying the
|
||||
covered work in a country, or your recipient's use of the covered work
|
||||
in a country, would infringe one or more identifiable patents in that
|
||||
country that you have reason to believe are valid.
|
||||
|
||||
If, pursuant to or in connection with a single transaction or
|
||||
arrangement, you convey, or propagate by procuring conveyance of, a
|
||||
covered work, and grant a patent license to some of the parties
|
||||
receiving the covered work authorizing them to use, propagate, modify
|
||||
or convey a specific copy of the covered work, then the patent license
|
||||
you grant is automatically extended to all recipients of the covered
|
||||
work and works based on it.
|
||||
|
||||
A patent license is "discriminatory" if it does not include within
|
||||
the scope of its coverage, prohibits the exercise of, or is
|
||||
conditioned on the non-exercise of one or more of the rights that are
|
||||
specifically granted under this License. You may not convey a covered
|
||||
work if you are a party to an arrangement with a third party that is
|
||||
in the business of distributing software, under which you make payment
|
||||
to the third party based on the extent of your activity of conveying
|
||||
the work, and under which the third party grants, to any of the
|
||||
parties who would receive the covered work from you, a discriminatory
|
||||
patent license (a) in connection with copies of the covered work
|
||||
conveyed by you (or copies made from those copies), or (b) primarily
|
||||
for and in connection with specific products or compilations that
|
||||
contain the covered work, unless you entered into that arrangement,
|
||||
or that patent license was granted, prior to 28 March 2007.
|
||||
|
||||
Nothing in this License shall be construed as excluding or limiting
|
||||
any implied license or other defenses to infringement that may
|
||||
otherwise be available to you under applicable patent law.
|
||||
|
||||
12. No Surrender of Others' Freedom.
|
||||
|
||||
If conditions are imposed on you (whether by court order, agreement or
|
||||
otherwise) that contradict the conditions of this License, they do not
|
||||
excuse you from the conditions of this License. If you cannot convey a
|
||||
covered work so as to satisfy simultaneously your obligations under this
|
||||
License and any other pertinent obligations, then as a consequence you may
|
||||
not convey it at all. For example, if you agree to terms that obligate you
|
||||
to collect a royalty for further conveying from those to whom you convey
|
||||
the Program, the only way you could satisfy both those terms and this
|
||||
License would be to refrain entirely from conveying the Program.
|
||||
|
||||
13. Remote Network Interaction; Use with the GNU General Public License.
|
||||
|
||||
Notwithstanding any other provision of this License, if you modify the
|
||||
Program, your modified version must prominently offer all users
|
||||
interacting with it remotely through a computer network (if your version
|
||||
supports such interaction) an opportunity to receive the Corresponding
|
||||
Source of your version by providing access to the Corresponding Source
|
||||
from a network server at no charge, through some standard or customary
|
||||
means of facilitating copying of software. This Corresponding Source
|
||||
shall include the Corresponding Source for any work covered by version 3
|
||||
of the GNU General Public License that is incorporated pursuant to the
|
||||
following paragraph.
|
||||
|
||||
Notwithstanding any other provision of this License, you have
|
||||
permission to link or combine any covered work with a work licensed
|
||||
under version 3 of the GNU General Public License into a single
|
||||
combined work, and to convey the resulting work. The terms of this
|
||||
License will continue to apply to the part which is the covered work,
|
||||
but the work with which it is combined will remain governed by version
|
||||
3 of the GNU General Public License.
|
||||
|
||||
14. Revised Versions of this License.
|
||||
|
||||
The Free Software Foundation may publish revised and/or new versions of
|
||||
the GNU Affero General Public License from time to time. Such new versions
|
||||
will be similar in spirit to the present version, but may differ in detail to
|
||||
address new problems or concerns.
|
||||
|
||||
Each version is given a distinguishing version number. If the
|
||||
Program specifies that a certain numbered version of the GNU Affero General
|
||||
Public License "or any later version" applies to it, you have the
|
||||
option of following the terms and conditions either of that numbered
|
||||
version or of any later version published by the Free Software
|
||||
Foundation. If the Program does not specify a version number of the
|
||||
GNU Affero General Public License, you may choose any version ever published
|
||||
by the Free Software Foundation.
|
||||
|
||||
If the Program specifies that a proxy can decide which future
|
||||
versions of the GNU Affero General Public License can be used, that proxy's
|
||||
public statement of acceptance of a version permanently authorizes you
|
||||
to choose that version for the Program.
|
||||
|
||||
Later license versions may give you additional or different
|
||||
permissions. However, no additional obligations are imposed on any
|
||||
author or copyright holder as a result of your choosing to follow a
|
||||
later version.
|
||||
|
||||
15. Disclaimer of Warranty.
|
||||
|
||||
THERE IS NO WARRANTY FOR THE PROGRAM, TO THE EXTENT PERMITTED BY
|
||||
APPLICABLE LAW. EXCEPT WHEN OTHERWISE STATED IN WRITING THE COPYRIGHT
|
||||
HOLDERS AND/OR OTHER PARTIES PROVIDE THE PROGRAM "AS IS" WITHOUT WARRANTY
|
||||
OF ANY KIND, EITHER EXPRESSED OR IMPLIED, INCLUDING, BUT NOT LIMITED TO,
|
||||
THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
|
||||
PURPOSE. THE ENTIRE RISK AS TO THE QUALITY AND PERFORMANCE OF THE PROGRAM
|
||||
IS WITH YOU. SHOULD THE PROGRAM PROVE DEFECTIVE, YOU ASSUME THE COST OF
|
||||
ALL NECESSARY SERVICING, REPAIR OR CORRECTION.
|
||||
|
||||
16. Limitation of Liability.
|
||||
|
||||
IN NO EVENT UNLESS REQUIRED BY APPLICABLE LAW OR AGREED TO IN WRITING
|
||||
WILL ANY COPYRIGHT HOLDER, OR ANY OTHER PARTY WHO MODIFIES AND/OR CONVEYS
|
||||
THE PROGRAM AS PERMITTED ABOVE, BE LIABLE TO YOU FOR DAMAGES, INCLUDING ANY
|
||||
GENERAL, SPECIAL, INCIDENTAL OR CONSEQUENTIAL DAMAGES ARISING OUT OF THE
|
||||
USE OR INABILITY TO USE THE PROGRAM (INCLUDING BUT NOT LIMITED TO LOSS OF
|
||||
DATA OR DATA BEING RENDERED INACCURATE OR LOSSES SUSTAINED BY YOU OR THIRD
|
||||
PARTIES OR A FAILURE OF THE PROGRAM TO OPERATE WITH ANY OTHER PROGRAMS),
|
||||
EVEN IF SUCH HOLDER OR OTHER PARTY HAS BEEN ADVISED OF THE POSSIBILITY OF
|
||||
SUCH DAMAGES.
|
||||
|
||||
17. Interpretation of Sections 15 and 16.
|
||||
|
||||
If the disclaimer of warranty and limitation of liability provided
|
||||
above cannot be given local legal effect according to their terms,
|
||||
reviewing courts shall apply local law that most closely approximates
|
||||
an absolute waiver of all civil liability in connection with the
|
||||
Program, unless a warranty or assumption of liability accompanies a
|
||||
copy of the Program in return for a fee.
|
||||
|
||||
END OF TERMS AND CONDITIONS
|
||||
|
||||
How to Apply These Terms to Your New Programs
|
||||
|
||||
If you develop a new program, and you want it to be of the greatest
|
||||
possible use to the public, the best way to achieve this is to make it
|
||||
free software which everyone can redistribute and change under these terms.
|
||||
|
||||
To do so, attach the following notices to the program. It is safest
|
||||
to attach them to the start of each source file to most effectively
|
||||
state the exclusion of warranty; and each file should have at least
|
||||
the "copyright" line and a pointer to where the full notice is found.
|
||||
|
||||
<one line to give the program's name and a brief idea of what it does.>
|
||||
Copyright (C) 2024 DecDuck
|
||||
|
||||
This program is free software: you can redistribute it and/or modify
|
||||
it under the terms of the GNU Affero General Public License as published
|
||||
by the Free Software Foundation, either version 3 of the License, or
|
||||
(at your option) any later version.
|
||||
|
||||
This program is distributed in the hope that it will be useful,
|
||||
but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
GNU Affero General Public License for more details.
|
||||
|
||||
You should have received a copy of the GNU Affero General Public License
|
||||
along with this program. If not, see <https://www.gnu.org/licenses/>.
|
||||
|
||||
Also add information on how to contact you by electronic and paper mail.
|
||||
|
||||
If your software can interact with users remotely through a computer
|
||||
network, you should also make sure that it provides a way for users to
|
||||
get its source. For example, if your program is a web application, its
|
||||
interface could display a "Source" link that leads users to an archive
|
||||
of the code. There are many ways you could offer source, and different
|
||||
solutions will be better for different programs; see section 13 for the
|
||||
specific requirements.
|
||||
|
||||
You should also get your employer (if you work as a programmer) or school,
|
||||
if any, to sign a "copyright disclaimer" for the program, if necessary.
|
||||
For more information on this, and how to apply and follow the GNU AGPL, see
|
||||
<https://www.gnu.org/licenses/>.
|
||||
@@ -0,0 +1,37 @@
|
||||
<div align="center">
|
||||
<img src="https://raw.githubusercontent.com/Drop-OSS/media-sources/refs/heads/main/drop.svg" width="200rem"/>
|
||||
</div>
|
||||
<br/>
|
||||
|
||||
# Drop
|
||||
|
||||
[](https://droposs.org)
|
||||
[](https://docs.droposs.org/)
|
||||
[](https://forum.droposs.org)
|
||||
[](LICENSE)
|
||||
[](https://discord.gg/ACq4qZp4a9)
|
||||
[](https://opencollective.com/drop-oss)
|
||||
[
|
||||
](https://translate.droposs.org/engage/drop/)
|
||||
|
||||
Drop is an open-source game distribution platform, similar to GameVault or Steam. It's designed to distribute and share DRM-free games quickly, all while being incredibly flexible, beautiful, and fast.
|
||||
|
||||
<div align="center">
|
||||
<img src="https://droposs.org/_ipx/f_webp&q_80/images/carousel/store.png" alt="Drop Screenshot" width="900rem"/>
|
||||
</div>
|
||||
|
||||
## Philosophy
|
||||
|
||||
1. Drop is flexible. While abstractions and interfaces can complicate the codebase, the flexibility is worth it.
|
||||
2. Drop is secure. The nature of Drop means an instance can never be accessible without authentication. In line with #1, Drop also supports a huge variety of authentication mechanisms, from username/password to SSO.
|
||||
3. Drop is user-friendly. The interface is designed to be clean and simple to use, with advanced features available to users who want them.
|
||||
|
||||
## Deployment
|
||||
|
||||
See our documentation on how to [deploy Drop](https://docs.droposs.org/docs/guides/quickstart) for more information.
|
||||
|
||||
## Contributing
|
||||
|
||||
Please see the [in-depth contributing guide](CONTRIBUTING.md). The guide includes information on how to set up the project, how to contribute code, how to report issues, and even how to effectively translate Drop.
|
||||
|
||||
[](https://translate.droposs.org/engage/drop/)
|
||||
@@ -0,0 +1,5 @@
|
||||
# Security
|
||||
|
||||
To report a vulnerability, please DO NOT create an issue for it
|
||||
as this may lead to the vulnerability being exploited before it
|
||||
can be fixed. Instead, please email [security@deepcore.dev](mailto:security@deepcore.dev)
|
||||
@@ -0,0 +1,54 @@
|
||||
<template>
|
||||
<NuxtLoadingIndicator color="#2563eb" />
|
||||
<NuxtLayout>
|
||||
<NuxtPage />
|
||||
</NuxtLayout>
|
||||
<ModalStack />
|
||||
<div
|
||||
v-if="showExternalUrlWarning"
|
||||
class="fixed flex flex-row gap-x-2 right-0 bottom-0 m-2 px-2 py-2 z-50 text-right bg-red-700/90 rounded-lg"
|
||||
>
|
||||
<div class="flex flex-col">
|
||||
<span class="text-sm text-zinc-200 font-bold font-display">{{
|
||||
$t("errors.externalUrl.title")
|
||||
}}</span>
|
||||
<span class="text-xs text-red-400">{{
|
||||
$t("errors.externalUrl.subtitle")
|
||||
}}</span>
|
||||
</div>
|
||||
<button class="text-red-200" @click="() => hideExternalURL()">
|
||||
<XMarkIcon class="size-5" />
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { XMarkIcon } from "@heroicons/vue/24/outline";
|
||||
|
||||
await updateUser();
|
||||
|
||||
const user = useUser();
|
||||
const apiDetails = await $dropFetch("/api/v1");
|
||||
const clientMode = isClientRequest();
|
||||
|
||||
const showExternalUrlWarning = ref(false);
|
||||
function checkExternalUrl() {
|
||||
if (!import.meta.client || clientMode) return;
|
||||
const realOrigin = window.location.origin.trim();
|
||||
const chosenOrigin = apiDetails.external.trim();
|
||||
const ignore = window.localStorage.getItem("ignoreExternalUrl");
|
||||
if (ignore && ignore == "true") return;
|
||||
showExternalUrlWarning.value = !(realOrigin == chosenOrigin);
|
||||
}
|
||||
|
||||
function hideExternalURL() {
|
||||
window.localStorage.setItem("ignoreExternalUrl", "true");
|
||||
showExternalUrlWarning.value = false;
|
||||
}
|
||||
|
||||
if (user.value?.admin) {
|
||||
onMounted(() => {
|
||||
checkExternalUrl();
|
||||
});
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,77 @@
|
||||
$motiva: (
|
||||
("MotivaSansThin.ttf", "ttf", 100, normal),
|
||||
("MotivaSansLight.woff.ttf", "woff", 300, normal),
|
||||
("MotivaSansRegular.woff.ttf", "woff", 400, normal),
|
||||
("MotivaSansMedium.woff.ttf", "woff", 500, normal),
|
||||
("MotivaSansBold.woff.ttf", "woff", 600, normal),
|
||||
("MotivaSansExtraBold.ttf", "woff", 700, normal),
|
||||
("MotivaSansBlack.woff.ttf", "woff", 900, normal)
|
||||
);
|
||||
|
||||
$helvetica: (
|
||||
("Helvetica.woff", "woff", 400, normal),
|
||||
("Helvetica-Oblique.woff", "woff", 400, italic),
|
||||
("Helvetica-Bold.woff", "woff", 600, normal),
|
||||
("Helvetica-BoldOblique.woff", "woff", 600, italic),
|
||||
("helvetica-light-587ebe5a59211.woff2", "woff2", 300, normal)
|
||||
);
|
||||
|
||||
@each $file, $format, $weight, $style in $motiva {
|
||||
@font-face {
|
||||
font-family: "Motiva Sans";
|
||||
src: url("/fonts/motiva/#{$file}") format($format);
|
||||
font-weight: $weight;
|
||||
font-style: $style;
|
||||
}
|
||||
}
|
||||
|
||||
@each $file, $format, $weight, $style in $helvetica {
|
||||
@font-face {
|
||||
font-family: "Helvetica";
|
||||
src: url("/fonts/helvetica/#{$file}") format($format);
|
||||
font-weight: $weight;
|
||||
font-style: $style;
|
||||
}
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Inter";
|
||||
src: url("/fonts/inter/InterVariable.ttf");
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Inter";
|
||||
src: url("/fonts/inter/InterVariable-Italic.ttf");
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.carousel__icon {
|
||||
color: #f4f4f5;
|
||||
}
|
||||
.carousel__pagination-button::after {
|
||||
background-color: #3f3f46;
|
||||
border-radius: 999999px;
|
||||
}
|
||||
.carousel__pagination-button:hover::after {
|
||||
background-color: #27272a;
|
||||
border-radius: 999999px;
|
||||
}
|
||||
.carousel__pagination-button--active::after {
|
||||
background-color: #a1a1aa;
|
||||
}
|
||||
.carousel__pagination-button--active:hover::after {
|
||||
background-color: #d4d4d8;
|
||||
}
|
||||
|
||||
.store-carousel > .carousel__viewport {
|
||||
overflow: visible !important;
|
||||
}
|
||||
|
||||
button {
|
||||
cursor: pointer !important;
|
||||
}
|
||||
|
||||
html {
|
||||
background-color: oklch(0.21 0.006 285.885);
|
||||
}
|
||||
@@ -0,0 +1,13 @@
|
||||
@import "tailwindcss";
|
||||
@plugin "@tailwindcss/typography";
|
||||
@plugin "@tailwindcss/forms";
|
||||
@config "../tailwind.config.js";
|
||||
|
||||
@layer base {
|
||||
input[type="number"]::-webkit-outer-spin-button,
|
||||
input[type="number"]::-webkit-inner-spin-button,
|
||||
input[type="number"] {
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: textfield !important;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,5 @@
|
||||
version: v2
|
||||
plugins:
|
||||
- local: protoc-gen-es
|
||||
out: server/internal/proto
|
||||
opt: target=ts
|
||||
Executable
+8
@@ -0,0 +1,8 @@
|
||||
#!/bin/bash
|
||||
|
||||
# This file starts up the Drop server by running migrations and then starting the executable
|
||||
echo "[Drop] performing migrations..."
|
||||
pnpm prisma migrate deploy
|
||||
|
||||
# Actually start the application
|
||||
node /app/app/server/index.mjs
|
||||
@@ -0,0 +1,41 @@
|
||||
worker_processes 1;
|
||||
|
||||
events {
|
||||
worker_connections 1024;
|
||||
}
|
||||
|
||||
pid nginx.pid;
|
||||
error_log stderr;
|
||||
daemon off;
|
||||
|
||||
http {
|
||||
default_type application/octet-stream;
|
||||
|
||||
sendfile on;
|
||||
server_tokens off;
|
||||
|
||||
access_log nginx_host.access.log;
|
||||
client_body_temp_path client_body;
|
||||
fastcgi_temp_path fastcgi_temp;
|
||||
proxy_temp_path proxy_temp;
|
||||
scgi_temp_path scgi_temp;
|
||||
uwsgi_temp_path uwsgi_temp;
|
||||
|
||||
server {
|
||||
listen 3000;
|
||||
server_name localhost;
|
||||
|
||||
location / {
|
||||
proxy_pass http://localhost:4000;
|
||||
proxy_http_version 1.1;
|
||||
proxy_set_header Upgrade $http_upgrade;
|
||||
proxy_set_header Connection "upgrade";
|
||||
}
|
||||
|
||||
location /api/v1/depot/ {
|
||||
proxy_pass http://localhost:5000;
|
||||
proxy_read_timeout 300s;
|
||||
proxy_connect_timeout 75s;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,544 @@
|
||||
## Release 0.2.0-beta
|
||||
|
||||
### Fixes
|
||||
|
||||
- fix recursive dirs util #02d6346
|
||||
- Fix username length requirement #0a5a649
|
||||
- remove dynamic imports #0f10626
|
||||
- fix for missing developers or publishers #25fc957
|
||||
- split prisma schemas #2859005
|
||||
- results are returned alphabetically #33d3770
|
||||
- update prisma schemas #36776cc
|
||||
- removed global flag #43e32b4
|
||||
- properly disconnect websockets from task handler #5358f1f
|
||||
- follow best practices #54c5d55
|
||||
- future lenience #5c78b20
|
||||
- fix width of token breaking things #61d88c3
|
||||
- fixed websocket authentication #62ea9a1
|
||||
- fix delta manifest generation #6df560c
|
||||
- admin invitation w/ system user #8463e35
|
||||
- properly import icons #8945196
|
||||
- prisma create footprint #952ece8
|
||||
- game panel now always shows 3 lines exactly #9c2249e
|
||||
- remove unnecessary import #a361c38
|
||||
- fix disconnect code #a8f2106
|
||||
- fix types #b511b40
|
||||
- add drop-base as git submodule #b75ebd1
|
||||
- Update README.md with discord link #c6bb21d
|
||||
- fix expires requirement in the admin endpoint #c7b675f
|
||||
- fix always being created as admin #c7eb11a
|
||||
- moved icons and created PlatformClient so we can use the enum on the frontend #cada630
|
||||
- recurse submodules #db103de
|
||||
- fix FATAL: "root"... message #dbb315a
|
||||
- only show versions that are directories #ef8f3ae
|
||||
|
||||
### Features
|
||||
|
||||
- update prisma & delete games #089c3e0
|
||||
- manual handshake #12e3125
|
||||
- fetch game endpoint #1f4d075
|
||||
- under the hood organisation and consolidation #26a31f6
|
||||
- 'no images' slide on image carousel #28baabc
|
||||
- improve feedback when metadata fails #2c19e13
|
||||
- introduction of 'system user' #2c21a23
|
||||
- change name, description and icon #2cfe75a
|
||||
- 'manual' metadata provider #2f52a16
|
||||
- add disabled state #38fc6b8
|
||||
- overhauled version importing #39d7ce7
|
||||
- automatically create library folder if it doesn't exist #39fe9d5
|
||||
- smoother bar in admin task ui #4488ae2
|
||||
- add noWrapper option #4f9b949
|
||||
- add version metadata route #5393db3
|
||||
- completed admin UI, with minor changes to backend #599da0e
|
||||
- adjust gradient #5a1f841
|
||||
- keep track of last connected #69e4c25
|
||||
- added notification system w/ interwoven refactoring #6e6f09d
|
||||
- content length header for chunk downloads #76bceb1
|
||||
- add title to tab #7b0756c
|
||||
- add button to open in admin panel #7b3b919
|
||||
- client capability framework + peer API configuration #7d72a86
|
||||
- customisable image carousel and new layout #937954f
|
||||
- support more types #9b12d45
|
||||
- generate a server certificate for mtls APIs #9c4b6f3
|
||||
- new endpoints, ui and beginnings of main store page #9cbdcbc
|
||||
- backend #a309651
|
||||
- more subtle design improvements #a815542
|
||||
- add aden's carousel pagination design #a86045c
|
||||
- add header #a8a152e
|
||||
- client side search #b50e27f
|
||||
- new ws handler #bc0c47c
|
||||
- user widget now redirects to actual page #bfafe02
|
||||
- require lowercase usernames #d7160ab
|
||||
- more ui improvements #e408ac5
|
||||
- add modifying game descriptions #e505e58
|
||||
- mobile nav #e5cf13f
|
||||
- slightly improved game page #e796b46
|
||||
- game carousel #ecc819e
|
||||
- add enum dictionary type #f2e0182
|
||||
- improved ux #f3ed0f6
|
||||
- cleanup and raw accessors #f7d767d
|
||||
- add support for overriding UMU id #fd4a7d1
|
||||
- add .sh for linux #fe9373a
|
||||
|
||||
### Other Changes
|
||||
|
||||
- quexeky <git@quexeky.dev>
|
||||
- fixed manifest generation #03a37f7
|
||||
- manual ci/cd #03b0b0c
|
||||
- ability to fetch client certs for p2p #0a715fe
|
||||
- disable tls in build #0f80fcd
|
||||
- Updated README.md #17971e0
|
||||
- Merge pull request #18 from Drop-OSS/develop
|
||||
- initial work on metadata system #196f87c
|
||||
- more ui #1bd19ad
|
||||
- remove log statements #1d5e1bd
|
||||
- small fixes & SSR disabled #1f575b2
|
||||
- update information and setup guide #2236622
|
||||
- metadata engine #22ac7f6
|
||||
- Update CONTRIBUTING.md #2309407
|
||||
- slight bug fixes and clean up #24a0d11
|
||||
- almst complete admin ui and initial store designs #27070b6
|
||||
- handshakes #2b4382d
|
||||
- user mobile header #2e44ef3
|
||||
- more consistent naming for globals #305de9f
|
||||
- replaced markdown-it with micromark #31e8359
|
||||
- fixes to store page for mobile clients #328b9ba
|
||||
- game version re-ordering #329c74d
|
||||
- verbose yarn install #36568c3
|
||||
- patch for no version check in manifest generation #395219d
|
||||
- migrate bcrypt to bcryptjs #3a51c9c
|
||||
- added download chunk endpoint #3dd6062
|
||||
- Update README.md #425934d
|
||||
- build only ci #4273a20
|
||||
- object storage + full permission system + testing #435551c
|
||||
- rename admin socket session map #44c6028
|
||||
- bump droplet and add vue carousel #46551f9
|
||||
- version importing #46c8f0c
|
||||
- back to yarn, with nuxt telemetry force disabled #46d35ad
|
||||
- finished object endpoints #486bce8
|
||||
- update dependencies and add note about optional dependencies #4fa771a
|
||||
- use configuration from docs for ci/cd #52315d0
|
||||
- slight fixes to register logic #583301f
|
||||
- removed yarn.lock #584bcf1
|
||||
- Version bump #5f29c28
|
||||
- immutable application settings framework #5fe2036
|
||||
- fixed docker daemon location #62a111b
|
||||
- copy autodevops configuration #6328c24
|
||||
- Delete .gitlab-ci.yml #69f341b
|
||||
- admin ui shell #6b5e48d
|
||||
- bump @drop/droplet version for windows developers #6ba5cdd
|
||||
- Add LICENSE #6e2dc89
|
||||
- custom dind #716eac7
|
||||
- task API #718f5ba
|
||||
- use gitlab ci variable declaration #7194d35
|
||||
- move icons into dedicated folder #74fa671
|
||||
- another stage of client authentication #7523e53
|
||||
- refactoring #7869043
|
||||
- moved windows logo into logos dir #789d3ba
|
||||
- updated text colours across app #7a88f4c
|
||||
- starting docs infra #7d2a1c6
|
||||
- more cleaning #7e17626
|
||||
- slight patch to rename query to be more consistent #7f4db0c
|
||||
- move to raw docker #803752e
|
||||
- server side and user client side completed for registration #848a611
|
||||
- beginnings of download implementation #8674ac7
|
||||
- more consistent naming for object handler #87230fb
|
||||
- use autodevops build stage #886beb6
|
||||
- Updated tailwind config #88c95d6
|
||||
- change name of store file #8999303
|
||||
- split prisma schemas #9011cf5
|
||||
- client initiate #909432a
|
||||
- more client routes to support Drop app update #91b7e10
|
||||
- additional polish and QoL features #93bc143
|
||||
- upload images to games #9b7ee4e
|
||||
- migrate to pnpm due to ci/cd issues with yarn #9cb2d6d
|
||||
- run yarn install in CI/CD non interactively #a208fbe
|
||||
- completed game importing; partial work on version importing #a7c33e7
|
||||
- remove canvas from dependencies #a8f58eb
|
||||
- fix registry authentication #ad25d3e
|
||||
- consolidate type utils #adb4b73
|
||||
- Updated README.md #b0ef675
|
||||
- add proper carousel to store page #b2ab827
|
||||
- move to yarn v2 #b744671
|
||||
- remove client API deadweight #b9ae26c
|
||||
- add expires field #be6c30d
|
||||
- ca groundwork #bfafd2a
|
||||
- cleanup & polish #c355f6f
|
||||
- remove bcrypt (debug) #c3914cc
|
||||
- non rounded bottom #c4391d3
|
||||
- failed gracefully on invalid chunk index #c4a3e4e
|
||||
- update deploy template #c4a419f
|
||||
- migrate to new droplet ca system #c4d8113
|
||||
- docker based deployment #c5d00b4
|
||||
- updated CONTRIBUTING.md #cd0d2bf
|
||||
- update prisma version #ce0a9ab
|
||||
- README update #ceacd84
|
||||
- patch metadata handler #cf578bd
|
||||
- Added SECURITY.md #d3d93b0
|
||||
- finalised client APIs and authentication method #d4e2dc8
|
||||
- Update README.md #db916bf
|
||||
- object storage interface + utility functions #de388a9
|
||||
- initial commit #e1a789f
|
||||
- fixed task system #e1c1d7e
|
||||
- Update file chunk.get.ts #e4339c3
|
||||
- ui groundwork #e52f072
|
||||
- Update changelog #eadcaa1
|
||||
- check for no version in manifest generation #eb3f9f9
|
||||
- break into single column store on lg devices #ecb381e
|
||||
- better server side signin redirects #ef13b68
|
||||
- patch signin #f3672f8
|
||||
|
||||
_changelog generated by_ [go-conventional-commits](https://github.com/joselitofilho/go-conventional-commits)
|
||||
|
||||
## Release 0.2.0-beta
|
||||
|
||||
### Fixes
|
||||
|
||||
- fix recursive dirs util #02d6346
|
||||
- Fix username length requirement #0a5a649
|
||||
- remove dynamic imports #0f10626
|
||||
- fix for missing developers or publishers #25fc957
|
||||
- split prisma schemas #2859005
|
||||
- results are returned alphabetically #33d3770
|
||||
- update prisma schemas #36776cc
|
||||
- removed global flag #43e32b4
|
||||
- properly disconnect websockets from task handler #5358f1f
|
||||
- follow best practices #54c5d55
|
||||
- future lenience #5c78b20
|
||||
- fix width of token breaking things #61d88c3
|
||||
- fixed websocket authentication #62ea9a1
|
||||
- fix delta manifest generation #6df560c
|
||||
- admin invitation w/ system user #8463e35
|
||||
- properly import icons #8945196
|
||||
- prisma create footprint #952ece8
|
||||
- game panel now always shows 3 lines exactly #9c2249e
|
||||
- remove unnecessary import #a361c38
|
||||
- fix disconnect code #a8f2106
|
||||
- fix types #b511b40
|
||||
- add drop-base as git submodule #b75ebd1
|
||||
- Update README.md with discord link #c6bb21d
|
||||
- fix expires requirement in the admin endpoint #c7b675f
|
||||
- fix always being created as admin #c7eb11a
|
||||
- moved icons and created PlatformClient so we can use the enum on the frontend #cada630
|
||||
- recurse submodules #db103de
|
||||
- fix FATAL: "root"... message #dbb315a
|
||||
- only show versions that are directories #ef8f3ae
|
||||
|
||||
### Features
|
||||
|
||||
- update prisma & delete games #089c3e0
|
||||
- manual handshake #12e3125
|
||||
- fetch game endpoint #1f4d075
|
||||
- under the hood organisation and consolidation #26a31f6
|
||||
- 'no images' slide on image carousel #28baabc
|
||||
- improve feedback when metadata fails #2c19e13
|
||||
- introduction of 'system user' #2c21a23
|
||||
- change name, description and icon #2cfe75a
|
||||
- 'manual' metadata provider #2f52a16
|
||||
- add disabled state #38fc6b8
|
||||
- overhauled version importing #39d7ce7
|
||||
- automatically create library folder if it doesn't exist #39fe9d5
|
||||
- smoother bar in admin task ui #4488ae2
|
||||
- add noWrapper option #4f9b949
|
||||
- add version metadata route #5393db3
|
||||
- completed admin UI, with minor changes to backend #599da0e
|
||||
- adjust gradient #5a1f841
|
||||
- keep track of last connected #69e4c25
|
||||
- added notification system w/ interwoven refactoring #6e6f09d
|
||||
- content length header for chunk downloads #76bceb1
|
||||
- add title to tab #7b0756c
|
||||
- add button to open in admin panel #7b3b919
|
||||
- client capability framework + peer API configuration #7d72a86
|
||||
- customisable image carousel and new layout #937954f
|
||||
- support more types #9b12d45
|
||||
- generate a server certificate for mtls APIs #9c4b6f3
|
||||
- new endpoints, ui and beginnings of main store page #9cbdcbc
|
||||
- backend #a309651
|
||||
- more subtle design improvements #a815542
|
||||
- add aden's carousel pagination design #a86045c
|
||||
- add header #a8a152e
|
||||
- client side search #b50e27f
|
||||
- new ws handler #bc0c47c
|
||||
- user widget now redirects to actual page #bfafe02
|
||||
- require lowercase usernames #d7160ab
|
||||
- more ui improvements #e408ac5
|
||||
- add modifying game descriptions #e505e58
|
||||
- mobile nav #e5cf13f
|
||||
- slightly improved game page #e796b46
|
||||
- game carousel #ecc819e
|
||||
- add enum dictionary type #f2e0182
|
||||
- improved ux #f3ed0f6
|
||||
- cleanup and raw accessors #f7d767d
|
||||
- add support for overriding UMU id #fd4a7d1
|
||||
- add .sh for linux #fe9373a
|
||||
|
||||
### Other Changes
|
||||
|
||||
- quexeky <git@quexeky.dev>
|
||||
- fixed manifest generation #03a37f7
|
||||
- manual ci/cd #03b0b0c
|
||||
- ability to fetch client certs for p2p #0a715fe
|
||||
- disable tls in build #0f80fcd
|
||||
- Updated README.md #17971e0
|
||||
- Merge pull request #18 from Drop-OSS/develop
|
||||
- initial work on metadata system #196f87c
|
||||
- more ui #1bd19ad
|
||||
- remove log statements #1d5e1bd
|
||||
- small fixes & SSR disabled #1f575b2
|
||||
- update information and setup guide #2236622
|
||||
- metadata engine #22ac7f6
|
||||
- Update CONTRIBUTING.md #2309407
|
||||
- slight bug fixes and clean up #24a0d11
|
||||
- almst complete admin ui and initial store designs #27070b6
|
||||
- handshakes #2b4382d
|
||||
- user mobile header #2e44ef3
|
||||
- more consistent naming for globals #305de9f
|
||||
- replaced markdown-it with micromark #31e8359
|
||||
- fixes to store page for mobile clients #328b9ba
|
||||
- game version re-ordering #329c74d
|
||||
- verbose yarn install #36568c3
|
||||
- patch for no version check in manifest generation #395219d
|
||||
- migrate bcrypt to bcryptjs #3a51c9c
|
||||
- added download chunk endpoint #3dd6062
|
||||
- Update README.md #425934d
|
||||
- build only ci #4273a20
|
||||
- object storage + full permission system + testing #435551c
|
||||
- rename admin socket session map #44c6028
|
||||
- bump droplet and add vue carousel #46551f9
|
||||
- version importing #46c8f0c
|
||||
- back to yarn, with nuxt telemetry force disabled #46d35ad
|
||||
- finished object endpoints #486bce8
|
||||
- update dependencies and add note about optional dependencies #4fa771a
|
||||
- use configuration from docs for ci/cd #52315d0
|
||||
- slight fixes to register logic #583301f
|
||||
- removed yarn.lock #584bcf1
|
||||
- Version bump #5f29c28
|
||||
- immutable application settings framework #5fe2036
|
||||
- fixed docker daemon location #62a111b
|
||||
- copy autodevops configuration #6328c24
|
||||
- Delete .gitlab-ci.yml #69f341b
|
||||
- admin ui shell #6b5e48d
|
||||
- bump @drop/droplet version for windows developers #6ba5cdd
|
||||
- Add LICENSE #6e2dc89
|
||||
- custom dind #716eac7
|
||||
- task API #718f5ba
|
||||
- use gitlab ci variable declaration #7194d35
|
||||
- move icons into dedicated folder #74fa671
|
||||
- another stage of client authentication #7523e53
|
||||
- refactoring #7869043
|
||||
- moved windows logo into logos dir #789d3ba
|
||||
- updated text colours across app #7a88f4c
|
||||
- starting docs infra #7d2a1c6
|
||||
- more cleaning #7e17626
|
||||
- slight patch to rename query to be more consistent #7f4db0c
|
||||
- move to raw docker #803752e
|
||||
- server side and user client side completed for registration #848a611
|
||||
- beginnings of download implementation #8674ac7
|
||||
- more consistent naming for object handler #87230fb
|
||||
- use autodevops build stage #886beb6
|
||||
- Updated tailwind config #88c95d6
|
||||
- change name of store file #8999303
|
||||
- split prisma schemas #9011cf5
|
||||
- client initiate #909432a
|
||||
- more client routes to support Drop app update #91b7e10
|
||||
- additional polish and QoL features #93bc143
|
||||
- upload images to games #9b7ee4e
|
||||
- migrate to pnpm due to ci/cd issues with yarn #9cb2d6d
|
||||
- run yarn install in CI/CD non interactively #a208fbe
|
||||
- completed game importing; partial work on version importing #a7c33e7
|
||||
- remove canvas from dependencies #a8f58eb
|
||||
- fix registry authentication #ad25d3e
|
||||
- consolidate type utils #adb4b73
|
||||
- Updated README.md #b0ef675
|
||||
- add proper carousel to store page #b2ab827
|
||||
- move to yarn v2 #b744671
|
||||
- remove client API deadweight #b9ae26c
|
||||
- add expires field #be6c30d
|
||||
- ca groundwork #bfafd2a
|
||||
- cleanup & polish #c355f6f
|
||||
- remove bcrypt (debug) #c3914cc
|
||||
- non rounded bottom #c4391d3
|
||||
- failed gracefully on invalid chunk index #c4a3e4e
|
||||
- update deploy template #c4a419f
|
||||
- migrate to new droplet ca system #c4d8113
|
||||
- docker based deployment #c5d00b4
|
||||
- updated CONTRIBUTING.md #cd0d2bf
|
||||
- update prisma version #ce0a9ab
|
||||
- README update #ceacd84
|
||||
- patch metadata handler #cf578bd
|
||||
- Added SECURITY.md #d3d93b0
|
||||
- finalised client APIs and authentication method #d4e2dc8
|
||||
- Update README.md #db916bf
|
||||
- object storage interface + utility functions #de388a9
|
||||
- initial commit #e1a789f
|
||||
- fixed task system #e1c1d7e
|
||||
- Update file chunk.get.ts #e4339c3
|
||||
- ui groundwork #e52f072
|
||||
- Update changelog #eadcaa1
|
||||
- check for no version in manifest generation #eb3f9f9
|
||||
- break into single column store on lg devices #ecb381e
|
||||
- better server side signin redirects #ef13b68
|
||||
- patch signin #f3672f8
|
||||
|
||||
_changelog generated by_ [go-conventional-commits](https://github.com/joselitofilho/go-conventional-commits)
|
||||
|
||||
## Release 0.1.0-beta
|
||||
|
||||
### Fixes
|
||||
|
||||
- remove dynamic imports #0f10626
|
||||
- fix for missing developers or publishers #25fc957
|
||||
- split prisma schemas #2859005
|
||||
- results are returned alphabetically #33d3770
|
||||
- properly disconnect websockets from task handler #5358f1f
|
||||
- follow best practices #54c5d55
|
||||
- future lenience #5c78b20
|
||||
- fixed websocket authentication #62ea9a1
|
||||
- fix delta manifest generation #6df560c
|
||||
- admin invitation w/ system user #8463e35
|
||||
- properly import icons #8945196
|
||||
- prisma create footprint #952ece8
|
||||
- game panel now always shows 3 lines exactly #9c2249e
|
||||
- remove unnecessary import #a361c38
|
||||
- fix types #b511b40
|
||||
- fix expires requirement in the admin endpoint #c7b675f
|
||||
- moved icons and created PlatformClient so we can use the enum on the frontend #cada630
|
||||
- only show versions that are directories #ef8f3ae
|
||||
|
||||
### Features
|
||||
|
||||
- update prisma & delete games #089c3e0
|
||||
- fetch game endpoint #1f4d075
|
||||
- under the hood organisation and consolidation #26a31f6
|
||||
- introduction of 'system user' #2c21a23
|
||||
- automatically create library folder if it doesn't exist #39fe9d5
|
||||
- smoother bar in admin task ui #4488ae2
|
||||
- add version metadata route #5393db3
|
||||
- completed admin UI, with minor changes to backend #599da0e
|
||||
- keep track of last connected #69e4c25
|
||||
- added notification system w/ interwoven refactoring #6e6f09d
|
||||
- content length header for chunk downloads #76bceb1
|
||||
- add title to tab #7b0756c
|
||||
- add button to open in admin panel #7b3b919
|
||||
- client capability framework + peer API configuration #7d72a86
|
||||
- generate a server certificate for mtls APIs #9c4b6f3
|
||||
- new endpoints, ui and beginnings of main store page #9cbdcbc
|
||||
- more subtle design improvements #a815542
|
||||
- add header #a8a152e
|
||||
- client side search #b50e27f
|
||||
- new ws handler #bc0c47c
|
||||
- user widget now redirects to actual page #bfafe02
|
||||
- require lowercase usernames #d7160ab
|
||||
- more ui improvements #e408ac5
|
||||
- slightly improved game page #e796b46
|
||||
- game carousel #ecc819e
|
||||
- add enum dictionary type #f2e0182
|
||||
- cleanup and raw accessors #f7d767d
|
||||
- add support for overriding UMU id #fd4a7d1
|
||||
|
||||
### Other Changes
|
||||
|
||||
- quexeky <git@quexeky.dev>
|
||||
- fixed manifest generation #03a37f7
|
||||
- manual ci/cd #03b0b0c
|
||||
- ability to fetch client certs for p2p #0a715fe
|
||||
- disable tls in build #0f80fcd
|
||||
- Updated README.md #17971e0
|
||||
- initial work on metadata system #196f87c
|
||||
- more ui #1bd19ad
|
||||
- remove log statements #1d5e1bd
|
||||
- small fixes & SSR disabled #1f575b2
|
||||
- update information and setup guide #2236622
|
||||
- metadata engine #22ac7f6
|
||||
- Update CONTRIBUTING.md #2309407
|
||||
- slight bug fixes and clean up #24a0d11
|
||||
- almst complete admin ui and initial store designs #27070b6
|
||||
- handshakes #2b4382d
|
||||
- user mobile header #2e44ef3
|
||||
- more consistent naming for globals #305de9f
|
||||
- replaced markdown-it with micromark #31e8359
|
||||
- fixes to store page for mobile clients #328b9ba
|
||||
- game version re-ordering #329c74d
|
||||
- verbose yarn install #36568c3
|
||||
- patch for no version check in manifest generation #395219d
|
||||
- migrate bcrypt to bcryptjs #3a51c9c
|
||||
- added download chunk endpoint #3dd6062
|
||||
- Update README.md #425934d
|
||||
- build only ci #4273a20
|
||||
- object storage + full permission system + testing #435551c
|
||||
- rename admin socket session map #44c6028
|
||||
- bump droplet and add vue carousel #46551f9
|
||||
- version importing #46c8f0c
|
||||
- back to yarn, with nuxt telemetry force disabled #46d35ad
|
||||
- finished object endpoints #486bce8
|
||||
- update dependencies and add note about optional dependencies #4fa771a
|
||||
- use configuration from docs for ci/cd #52315d0
|
||||
- slight fixes to register logic #583301f
|
||||
- removed yarn.lock #584bcf1
|
||||
- Version bump #5f29c28
|
||||
- immutable application settings framework #5fe2036
|
||||
- fixed docker daemon location #62a111b
|
||||
- copy autodevops configuration #6328c24
|
||||
- Delete .gitlab-ci.yml #69f341b
|
||||
- admin ui shell #6b5e48d
|
||||
- bump @drop/droplet version for windows developers #6ba5cdd
|
||||
- Add LICENSE #6e2dc89
|
||||
- task API #718f5ba
|
||||
- use gitlab ci variable declaration #7194d35
|
||||
- move icons into dedicated folder #74fa671
|
||||
- another stage of client authentication #7523e53
|
||||
- refactoring #7869043
|
||||
- moved windows logo into logos dir #789d3ba
|
||||
- updated text colours across app #7a88f4c
|
||||
- starting docs infra #7d2a1c6
|
||||
- more cleaning #7e17626
|
||||
- slight patch to rename query to be more consistent #7f4db0c
|
||||
- move to raw docker #803752e
|
||||
- server side and user client side completed for registration #848a611
|
||||
- beginnings of download implementation #8674ac7
|
||||
- more consistent naming for object handler #87230fb
|
||||
- use autodevops build stage #886beb6
|
||||
- Updated tailwind config #88c95d6
|
||||
- change name of store file #8999303
|
||||
- split prisma schemas #9011cf5
|
||||
- client initiate #909432a
|
||||
- more client routes to support Drop app update #91b7e10
|
||||
- additional polish and QoL features #93bc143
|
||||
- upload images to games #9b7ee4e
|
||||
- migrate to pnpm due to ci/cd issues with yarn #9cb2d6d
|
||||
- run yarn install in CI/CD non interactively #a208fbe
|
||||
- completed game importing; partial work on version importing #a7c33e7
|
||||
- remove canvas from dependencies #a8f58eb
|
||||
- fix registry authentication #ad25d3e
|
||||
- consolidate type utils #adb4b73
|
||||
- Updated README.md #b0ef675
|
||||
- add proper carousel to store page #b2ab827
|
||||
- move to yarn v2 #b744671
|
||||
- remove client API deadweight #b9ae26c
|
||||
- add expires field #be6c30d
|
||||
- ca groundwork #bfafd2a
|
||||
- cleanup & polish #c355f6f
|
||||
- remove bcrypt (debug) #c3914cc
|
||||
- non rounded bottom #c4391d3
|
||||
- failed gracefully on invalid chunk index #c4a3e4e
|
||||
- update deploy template #c4a419f
|
||||
- migrate to new droplet ca system #c4d8113
|
||||
- docker based deployment #c5d00b4
|
||||
- updated CONTRIBUTING.md #cd0d2bf
|
||||
- update prisma version #ce0a9ab
|
||||
- README update #ceacd84
|
||||
- patch metadata handler #cf578bd
|
||||
- Added SECURITY.md #d3d93b0
|
||||
- finalised client APIs and authentication method #d4e2dc8
|
||||
- Update README.md #db916bf
|
||||
- object storage interface + utility functions #de388a9
|
||||
- initial commit #e1a789f
|
||||
- fixed task system #e1c1d7e
|
||||
- Update file chunk.get.ts #e4339c3
|
||||
- ui groundwork #e52f072
|
||||
- check for no version in manifest generation #eb3f9f9
|
||||
- break into single column store on lg devices #ecb381e
|
||||
- better server side signin redirects #ef13b68
|
||||
- patch signin #f3672f8
|
||||
|
||||
_changelog generated by_ [go-conventional-commits](https://github.com/joselitofilho/go-conventional-commits)
|
||||
@@ -0,0 +1,99 @@
|
||||
<template>
|
||||
<div class="flex grow flex-col gap-y-5 overflow-y-auto px-6 py-4">
|
||||
<span class="inline-flex items-center gap-x-2 font-semibold text-zinc-100">
|
||||
<UserIcon class="size-5" /> {{ $t("account.title") }}
|
||||
</span>
|
||||
<nav class="flex flex-1 flex-col">
|
||||
<ul role="list" class="flex flex-1 flex-col gap-y-7">
|
||||
<li>
|
||||
<ul role="list" class="-mx-2 space-y-1">
|
||||
<li v-for="(item, itemIdx) in navigation" :key="item.route">
|
||||
<NuxtLink
|
||||
:href="item.route"
|
||||
:class="[
|
||||
itemIdx == currentPageIndex
|
||||
? 'bg-zinc-800 text-white'
|
||||
: 'text-zinc-400 hover:bg-zinc-800 hover:text-white',
|
||||
'group flex gap-x-3 rounded-md p-2 text-sm/6 font-semibold',
|
||||
]"
|
||||
>
|
||||
<component
|
||||
:is="item.icon"
|
||||
class="size-6 shrink-0"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
{{ item.label }}
|
||||
<span
|
||||
v-if="item.count !== undefined"
|
||||
class="ml-auto w-9 min-w-max whitespace-nowrap rounded-full bg-zinc-900 px-2.5 py-0.5 text-center text-xs/5 font-medium text-white ring-1 ring-inset ring-zinc-700"
|
||||
aria-hidden="true"
|
||||
>{{ item.count }}</span
|
||||
>
|
||||
</NuxtLink>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import {
|
||||
BellIcon,
|
||||
HomeIcon,
|
||||
LockClosedIcon,
|
||||
DevicePhoneMobileIcon,
|
||||
WrenchScrewdriverIcon,
|
||||
CodeBracketIcon,
|
||||
} from "@heroicons/vue/24/outline";
|
||||
import { UserIcon } from "@heroicons/vue/24/solid";
|
||||
import type { Component } from "vue";
|
||||
|
||||
const notifications = useNotifications();
|
||||
const { t } = useI18n();
|
||||
|
||||
const navigation: Ref<
|
||||
(NavigationItem & { icon: Component; count?: number })[]
|
||||
> = computed(() => [
|
||||
{
|
||||
label: t("account.home.title"),
|
||||
route: "/account",
|
||||
icon: HomeIcon,
|
||||
prefix: "/account",
|
||||
},
|
||||
{
|
||||
label: t("account.security.title"),
|
||||
route: "/account/security",
|
||||
prefix: "/account/security",
|
||||
icon: LockClosedIcon,
|
||||
},
|
||||
{
|
||||
label: t("account.devices.title"),
|
||||
route: "/account/devices",
|
||||
prefix: "/account/devices",
|
||||
icon: DevicePhoneMobileIcon,
|
||||
},
|
||||
{
|
||||
label: t("account.token.title"),
|
||||
route: "/account/tokens",
|
||||
prefix: "/account/tokens",
|
||||
icon: CodeBracketIcon,
|
||||
},
|
||||
{
|
||||
label: t("account.notifications.notifications"),
|
||||
route: "/account/notifications",
|
||||
prefix: "/account/notifications",
|
||||
icon: BellIcon,
|
||||
count: notifications.value.length,
|
||||
},
|
||||
{
|
||||
label: t("account.settings"),
|
||||
route: "/account/settings",
|
||||
prefix: "/account/settings",
|
||||
icon: WrenchScrewdriverIcon,
|
||||
},
|
||||
]);
|
||||
|
||||
const currentPageIndex = useCurrentNavigationIndex(navigation.value);
|
||||
</script>
|
||||
@@ -0,0 +1,153 @@
|
||||
<template>
|
||||
<div
|
||||
class="inline-flex w-full group hover:scale-105 transition-all duration-200"
|
||||
>
|
||||
<LoadingButton
|
||||
:loading="isLibraryLoading"
|
||||
:style="'none'"
|
||||
class="transition w-full inline-flex items-center justify-center h-full gap-x-2 rounded-none rounded-l-md bg-white/10 hover:bg-white/20 text-zinc-100 backdrop-blur px-5 py-3 active:scale-95"
|
||||
@click="() => toggleLibrary()"
|
||||
>
|
||||
{{ inLibrary ? $t("library.inLib") : $t("library.addToLib") }}
|
||||
<CheckIcon v-if="inLibrary" class="-mr-0.5 h-5 w-5" aria-hidden="true" />
|
||||
<PlusIcon v-else class="-mr-0.5 h-5 w-5" aria-hidden="true" />
|
||||
</LoadingButton>
|
||||
|
||||
<!-- Collections dropdown -->
|
||||
<Menu as="div" class="relative">
|
||||
<MenuButton
|
||||
as="div"
|
||||
class="transition cursor-pointer inline-flex items-center rounded-r-md h-full ml-[2px] bg-white/10 hover:bg-white/20 backdrop-blur py-3.5 px-2 justify-center focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white/20"
|
||||
>
|
||||
<ChevronDownIcon class="h-5 w-5 text-white" aria-hidden="true" />
|
||||
</MenuButton>
|
||||
<transition
|
||||
enter-active-class="transition ease-out duration-100"
|
||||
enter-from-class="transform opacity-0 scale-95"
|
||||
enter-to-class="transform opacity-100 scale-100"
|
||||
leave-active-class="transition ease-in duration-75"
|
||||
leave-from-class="transform opacity-100 scale-100"
|
||||
leave-to-class="transform opacity-0 scale-95"
|
||||
>
|
||||
<MenuItems
|
||||
class="absolute right-0 z-50 mt-2 w-72 origin-top-right rounded-md bg-zinc-800/90 backdrop-blur shadow-lg focus:outline-none"
|
||||
>
|
||||
<div class="p-2">
|
||||
<div
|
||||
class="font-display uppercase px-3 py-2 text-sm font-semibold text-zinc-500"
|
||||
>
|
||||
{{ $t("library.collection.collections") }}
|
||||
</div>
|
||||
<div
|
||||
class="flex flex-col gap-y-2 py-1 max-h-[150px] overflow-y-auto"
|
||||
>
|
||||
<div
|
||||
v-if="collections.length === 0"
|
||||
class="px-3 py-2 text-sm text-zinc-500"
|
||||
>
|
||||
{{ $t("library.collection.noCollections") }}
|
||||
</div>
|
||||
<MenuItem
|
||||
v-for="(collection, collectionIdx) in collections"
|
||||
:key="collection.id"
|
||||
v-slot="{ active }"
|
||||
>
|
||||
<button
|
||||
:class="[
|
||||
active ? 'bg-zinc-700/90' : '',
|
||||
'group flex w-full items-center justify-between rounded-md px-3 py-2 text-sm text-zinc-200',
|
||||
]"
|
||||
@click="() => toggleCollection(collection.id)"
|
||||
>
|
||||
<span>{{ collection.name }}</span>
|
||||
<CheckIcon
|
||||
v-if="inCollections[collectionIdx]"
|
||||
class="h-5 w-5 text-blue-400"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
</button>
|
||||
</MenuItem>
|
||||
</div>
|
||||
<div class="border-t border-zinc-700 pt-1">
|
||||
<LoadingButton
|
||||
:loading="false"
|
||||
class="w-full"
|
||||
@click="createCollectionModal = true"
|
||||
>
|
||||
<PlusIcon class="mr-2 h-4 w-4" />
|
||||
{{ $t("library.collection.addToNew") }}
|
||||
</LoadingButton>
|
||||
</div>
|
||||
</div>
|
||||
</MenuItems>
|
||||
</transition>
|
||||
</Menu>
|
||||
</div>
|
||||
|
||||
<ModalCreateCollection
|
||||
v-model="createCollectionModal"
|
||||
:game-id="props.gameId"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { PlusIcon, ChevronDownIcon, CheckIcon } from "@heroicons/vue/24/solid";
|
||||
import { Menu, MenuButton, MenuItems, MenuItem } from "@headlessui/vue";
|
||||
|
||||
const props = defineProps<{
|
||||
gameId: string;
|
||||
}>();
|
||||
|
||||
const isLibraryLoading = ref(false);
|
||||
|
||||
const { t } = useI18n();
|
||||
const createCollectionModal = ref(false);
|
||||
const collections = await useCollections();
|
||||
const library = await useLibrary();
|
||||
|
||||
const inLibrary = computed(
|
||||
() => library.value.entries.findIndex((e) => e.gameId == props.gameId) != -1,
|
||||
);
|
||||
const inCollections = computed(() =>
|
||||
collections.value.map(
|
||||
(e) => e.entries.findIndex((e) => e.gameId == props.gameId) != -1,
|
||||
),
|
||||
);
|
||||
|
||||
async function toggleLibrary() {
|
||||
isLibraryLoading.value = true;
|
||||
try {
|
||||
await $dropFetch("/api/v1/collection/default/entry", {
|
||||
method: inLibrary.value ? "DELETE" : "POST",
|
||||
body: {
|
||||
id: props.gameId,
|
||||
},
|
||||
failTitle: t("errors.library.add.title"),
|
||||
});
|
||||
await refreshLibrary();
|
||||
} finally {
|
||||
isLibraryLoading.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
async function toggleCollection(id: string) {
|
||||
try {
|
||||
const collection = collections.value.find((e) => e.id == id);
|
||||
if (!collection) return;
|
||||
const index = collection.entries.findIndex((e) => e.gameId == props.gameId);
|
||||
|
||||
await $dropFetch(`/api/v1/collection/:id/entry`, {
|
||||
method: index == -1 ? "POST" : "DELETE",
|
||||
params: { id },
|
||||
body: {
|
||||
id: props.gameId,
|
||||
},
|
||||
failTitle: t("errors.library.add.title"),
|
||||
});
|
||||
|
||||
await refreshCollection(id);
|
||||
} finally {
|
||||
/* empty */
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,12 @@
|
||||
<template>
|
||||
<template v-if="!mLogoObjectId">
|
||||
<DropLogo />
|
||||
</template>
|
||||
<template v-else>
|
||||
<img :src="useObject(mLogoObjectId)" :alt="`${serverName} logo`" />
|
||||
</template>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
const { serverName, mLogoObjectId } = await $dropFetch("/api/v1");
|
||||
</script>
|
||||
@@ -0,0 +1,27 @@
|
||||
<template>
|
||||
<div class="flex">
|
||||
<a
|
||||
:href="`/auth/oidc?redirect=${route.query.redirect ?? '/'}`"
|
||||
class="transition rounded-md grow inline-flex items-center justify-center bg-white/10 px-3.5 py-2.5 text-sm font-semibold text-white shadow-xs hover:bg-white/20"
|
||||
>
|
||||
<i18n-t
|
||||
keypath="auth.signin.signinWithExternalProvider"
|
||||
tag="span"
|
||||
scope="global"
|
||||
>
|
||||
<template #externalProvider>{{
|
||||
providerName || $t("auth.signin.externalProvider")
|
||||
}}</template>
|
||||
<template #arrow>
|
||||
<span aria-hidden="true">{{ $t("chars.arrow") }}</span>
|
||||
</template>
|
||||
</i18n-t>
|
||||
</a>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
const route = useRoute();
|
||||
|
||||
const { providerName = undefined } = defineProps<{ providerName?: string }>();
|
||||
</script>
|
||||
@@ -0,0 +1,175 @@
|
||||
<template>
|
||||
<form class="space-y-6" @submit.prevent="signin_wrapper">
|
||||
<div>
|
||||
<label
|
||||
for="username"
|
||||
class="block text-sm font-medium leading-6 text-zinc-300"
|
||||
>{{ $t("auth.username") }}</label
|
||||
>
|
||||
<div class="mt-2">
|
||||
<input
|
||||
id="username"
|
||||
v-model="username"
|
||||
name="username"
|
||||
type="username"
|
||||
autocomplete="username webauthn"
|
||||
required
|
||||
class="block w-full rounded-md border-0 py-1.5 px-3 shadow-sm bg-zinc-950/20 text-zinc-300 ring-1 ring-inset ring-zinc-800 placeholder:text-zinc-400 focus:ring-2 focus:ring-inset focus:ring-blue-600 sm:text-sm sm:leading-6"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label
|
||||
for="password"
|
||||
class="block text-sm font-medium leading-6 text-zinc-300"
|
||||
>{{ $t("auth.password") }}</label
|
||||
>
|
||||
<div class="mt-2">
|
||||
<input
|
||||
id="password"
|
||||
v-model="password"
|
||||
name="password"
|
||||
type="password"
|
||||
autocomplete="current-password"
|
||||
required
|
||||
class="block w-full rounded-md border-0 py-1.5 px-3 shadow-sm bg-zinc-950/20 text-zinc-300 ring-1 ring-inset ring-zinc-800 placeholder:text-zinc-400 focus:ring-2 focus:ring-inset focus:ring-blue-600 sm:text-sm sm:leading-6"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex items-center">
|
||||
<input
|
||||
id="remember-me"
|
||||
v-model="rememberMe"
|
||||
name="remember-me"
|
||||
type="checkbox"
|
||||
class="h-4 w-4 rounded bg-zinc-800 border-zinc-700 text-blue-600 focus:ring-blue-600"
|
||||
/>
|
||||
<label
|
||||
for="remember-me"
|
||||
class="ml-3 block text-sm leading-6 text-zinc-400"
|
||||
>{{ $t("auth.signin.rememberMe") }}</label
|
||||
>
|
||||
</div>
|
||||
|
||||
<div class="text-sm leading-6">
|
||||
<NuxtLink
|
||||
to="#"
|
||||
class="font-semibold text-blue-600 hover:text-blue-500"
|
||||
>{{ $t("auth.signin.forgot") }}</NuxtLink
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<LoadingButton class="w-full" :loading="loading">{{
|
||||
$t("auth.signin.signin")
|
||||
}}</LoadingButton>
|
||||
</div>
|
||||
|
||||
<div v-if="error" class="mt-1 rounded-md bg-red-600/10 p-4">
|
||||
<div class="flex">
|
||||
<div class="flex-shrink-0">
|
||||
<XCircleIcon class="h-5 w-5 text-red-600" aria-hidden="true" />
|
||||
</div>
|
||||
<div class="ml-3">
|
||||
<h3 class="text-sm font-medium text-red-600">
|
||||
{{ error }}
|
||||
</h3>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { XCircleIcon } from "@heroicons/vue/20/solid";
|
||||
import {
|
||||
startAuthentication,
|
||||
browserSupportsWebAuthn,
|
||||
} from "@simplewebauthn/browser";
|
||||
import { FetchError } from "ofetch";
|
||||
|
||||
const username = ref("");
|
||||
const password = ref("");
|
||||
const rememberMe = ref(false);
|
||||
const loading = ref(false);
|
||||
|
||||
async function passkeyAutofill() {
|
||||
let silentWebauthnOptions;
|
||||
try {
|
||||
silentWebauthnOptions = await $dropFetch("/api/v1/auth/passkey/start", {
|
||||
method: "POST",
|
||||
});
|
||||
} catch {
|
||||
return;
|
||||
}
|
||||
|
||||
const result = await startAuthentication({
|
||||
optionsJSON: silentWebauthnOptions,
|
||||
useBrowserAutofill: true,
|
||||
});
|
||||
|
||||
loading.value = true;
|
||||
|
||||
await $dropFetch("/api/v1/auth/passkey/finish", {
|
||||
method: "POST",
|
||||
body: result,
|
||||
});
|
||||
|
||||
await completeSignin();
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
if (browserSupportsWebAuthn()) {
|
||||
try {
|
||||
await passkeyAutofill();
|
||||
} catch (response) {
|
||||
const message = (response as FetchError).message || t("errors.unknown");
|
||||
error.value = message;
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
const error = ref<string | undefined>();
|
||||
|
||||
const router = useRouter();
|
||||
const route = useRoute();
|
||||
const { t } = useI18n();
|
||||
|
||||
async function signin_wrapper() {
|
||||
loading.value = true;
|
||||
try {
|
||||
await signin();
|
||||
} catch (e) {
|
||||
if (e instanceof FetchError) {
|
||||
error.value = e.data.message || t("errors.unknown");
|
||||
} else {
|
||||
error.value = e as string;
|
||||
}
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
async function signin() {
|
||||
const { result } = await $dropFetch("/api/v1/auth/signin/simple", {
|
||||
method: "POST",
|
||||
body: {
|
||||
username: username.value,
|
||||
password: password.value,
|
||||
rememberMe: rememberMe.value,
|
||||
},
|
||||
});
|
||||
if (result == "2fa") {
|
||||
router.push({ query: route.query, path: "/auth/mfa" });
|
||||
return;
|
||||
}
|
||||
|
||||
await completeSignin();
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,26 @@
|
||||
<template>
|
||||
<div class="flex flex-row flex-wrap gap-2 justify-center">
|
||||
<button
|
||||
v-for="(_, i) in amount"
|
||||
:key="i"
|
||||
:class="[
|
||||
carousel.currentSlide === i ? 'bg-blue-600 w-6' : 'bg-zinc-700 w-3',
|
||||
'transition-all cursor-pointer h-2 rounded-full',
|
||||
]"
|
||||
@click="slideTo(i)"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { injectCarousel } from "vue3-carousel";
|
||||
|
||||
const carousel = inject(injectCarousel)!;
|
||||
|
||||
const amount = carousel.maxSlide - carousel.minSlide + 1;
|
||||
|
||||
function slideTo(index: number) {
|
||||
const offsetIndex = index + carousel.minSlide;
|
||||
carousel.nav.slideTo(offsetIndex);
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,86 @@
|
||||
<template>
|
||||
<input
|
||||
v-for="i in length"
|
||||
ref="codeElements"
|
||||
:key="i"
|
||||
v-model="code[i - 1]"
|
||||
:class="[
|
||||
size,
|
||||
'uppercase appearance-none text-center bg-zinc-900 rounded-xl border-zinc-700 focus:border-blue-600 text-bold font-display text-zinc-100',
|
||||
]"
|
||||
type="text"
|
||||
pattern="\d*"
|
||||
:placeholder="placeholder[i - 1]"
|
||||
@keydown="(v) => keydown(i - 1, v)"
|
||||
@input="() => input(i - 1)"
|
||||
@focusin="() => select(i - 1)"
|
||||
@paste="(v) => paste(i - 1, v)"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
const {
|
||||
length = 7,
|
||||
placeholder = "1A2B3C4",
|
||||
size = "w-16 h-16 text-2xl",
|
||||
} = defineProps<{
|
||||
length?: number;
|
||||
placeholder?: string;
|
||||
size?: string;
|
||||
}>();
|
||||
const emit = defineEmits<{
|
||||
(e: "complete", code: string): void;
|
||||
}>();
|
||||
|
||||
const codeElements = useTemplateRef("codeElements");
|
||||
const code = ref<string[]>([]);
|
||||
|
||||
function keydown(index: number, event: KeyboardEvent) {
|
||||
if (event.key === "Backspace" && !code.value[index] && index > 0) {
|
||||
codeElements.value![index - 1].focus();
|
||||
}
|
||||
}
|
||||
|
||||
function input(index: number) {
|
||||
if (codeElements.value === null) return;
|
||||
const v = code.value[index] ?? "";
|
||||
if (v.length > 1) code.value[index] = v[0];
|
||||
|
||||
if (!(index + 1 >= codeElements.value.length) && v) {
|
||||
codeElements.value[index + 1].focus();
|
||||
}
|
||||
|
||||
if (!(index - 1 < 0) && !v) {
|
||||
codeElements.value[index - 1].focus();
|
||||
}
|
||||
|
||||
if (index == length - 1) {
|
||||
const assembledCode = code.value.join("");
|
||||
if (assembledCode.length == length) {
|
||||
complete(assembledCode);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function select(index: number) {
|
||||
if (!codeElements.value) return;
|
||||
if (index >= codeElements.value.length) return;
|
||||
codeElements.value[index].select();
|
||||
}
|
||||
|
||||
function paste(index: number, event: ClipboardEvent) {
|
||||
const newCode = event.clipboardData!.getData("text/plain");
|
||||
for (let i = 0; i < newCode.length && i < length; i++) {
|
||||
code.value[i] = newCode[i];
|
||||
codeElements.value![i].focus();
|
||||
if (i + 1 == length) {
|
||||
complete(code.value.join(""));
|
||||
}
|
||||
}
|
||||
event.preventDefault();
|
||||
}
|
||||
|
||||
async function complete(completedCode: string) {
|
||||
emit("complete", completedCode);
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,75 @@
|
||||
<template>
|
||||
<div class="flex grow flex-col overflow-y-auto px-6 py-4">
|
||||
<span class="inline-flex items-center gap-x-2 font-semibold text-zinc-100">
|
||||
<Bars3Icon class="size-6" /> {{ $t("userHeader.links.library") }}
|
||||
</span>
|
||||
|
||||
<!-- Search bar -->
|
||||
<div class="mt-5 relative">
|
||||
<input
|
||||
id="search"
|
||||
v-model="searchQuery"
|
||||
type="text"
|
||||
name="search"
|
||||
autocomplete="off"
|
||||
class="block w-full rounded-md bg-zinc-900 py-2 pl-9 pr-2 text-sm text-zinc-100 outline outline-1 -outline-offset-1 outline-zinc-700 placeholder:text-gray-400 focus:outline focus:outline-2 focus:-outline-offset-2 focus:outline-blue-600"
|
||||
:placeholder="$t('library.search')"
|
||||
/>
|
||||
<MagnifyingGlassIcon
|
||||
class="pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-zinc-400"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<TransitionGroup
|
||||
v-if="filteredLibrary.length > 0"
|
||||
name="list"
|
||||
tag="ul"
|
||||
role="list"
|
||||
class="mt-2 space-y-0.5"
|
||||
>
|
||||
<li v-for="game in filteredLibrary" :key="game.id" class="flex">
|
||||
<NuxtLink
|
||||
:to="`/library/game/${game.id}`"
|
||||
class="flex flex-row items-center w-full p-2 rounded-md transition-all duration-200 hover:bg-zinc-800 hover:scale-105 hover:shadow-lg active:scale-95"
|
||||
>
|
||||
<img
|
||||
:src="useObject(game.mIconObjectId)"
|
||||
class="h-5 flex-shrink-0 rounded transition-all duration-300 group-hover:scale-105 hover:rotate-[-2deg] hover:shadow-lg"
|
||||
alt=""
|
||||
/>
|
||||
<div class="min-w-0 flex-1 pl-2.5">
|
||||
<p
|
||||
class="text-sm font-semibold text-display text-zinc-200 truncate text-left"
|
||||
>
|
||||
{{ game.mName }}
|
||||
</p>
|
||||
</div>
|
||||
</NuxtLink>
|
||||
</li>
|
||||
</TransitionGroup>
|
||||
|
||||
<p
|
||||
v-else
|
||||
class="text-zinc-600 text-sm font-display font-bold uppercase text-center mt-8"
|
||||
>
|
||||
{{ !!searchQuery ? $t("common.noResults") : $t("library.noGames") }}
|
||||
</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { Bars3Icon, MagnifyingGlassIcon } from "@heroicons/vue/24/solid";
|
||||
|
||||
const library = await useLibrary();
|
||||
|
||||
const searchQuery = ref("");
|
||||
|
||||
const filteredLibrary = computed(() =>
|
||||
library.value.entries
|
||||
.map((e) => e.game)
|
||||
.filter((e) =>
|
||||
e.mName.toLowerCase().includes(searchQuery.value.toLowerCase()),
|
||||
),
|
||||
);
|
||||
</script>
|
||||
@@ -0,0 +1,212 @@
|
||||
<!-- eslint-disable vue/no-v-html -->
|
||||
<template>
|
||||
<div
|
||||
class="flex grow flex-col gap-y-5 overflow-y-auto bg-zinc-900 px-6 py-6 ring-1 ring-white/10"
|
||||
>
|
||||
<!-- Search and filters -->
|
||||
<div class="space-y-6">
|
||||
<div>
|
||||
<label for="search" class="sr-only">{{ $t("news.search") }}</label>
|
||||
<div class="relative">
|
||||
<div
|
||||
class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3"
|
||||
>
|
||||
<MagnifyingGlassIcon
|
||||
class="h-5 w-5 text-zinc-400"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
</div>
|
||||
<input
|
||||
id="search"
|
||||
v-model="searchQuery"
|
||||
type="text"
|
||||
class="block w-full rounded-md border-0 bg-zinc-800 py-2.5 pl-10 pr-3 text-zinc-100 placeholder:text-zinc-400 focus:ring-2 focus:ring-inset focus:ring-blue-500 sm:text-sm sm:leading-6"
|
||||
:placeholder="$t('news.searchPlaceholder')"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="pt-2">
|
||||
<label
|
||||
for="date"
|
||||
class="block text-sm font-medium text-zinc-400 mb-2"
|
||||
>{{ $t("common.date") }}</label
|
||||
>
|
||||
<select
|
||||
id="date"
|
||||
v-model="dateFilter"
|
||||
class="mt-1 block w-full rounded-md border-0 bg-zinc-800 py-2 pl-3 pr-10 text-zinc-100 focus:ring-2 focus:ring-inset focus:ring-blue-500 sm:text-sm sm:leading-6"
|
||||
>
|
||||
<option value="all">{{ $t("news.filter.all") }}</option>
|
||||
<option value="today">{{ $t("common.today") }}</option>
|
||||
<option value="week">{{ $t("news.filter.week") }}</option>
|
||||
<option value="month">{{ $t("news.filter.month") }}</option>
|
||||
<option value="year">{{ $t("news.filter.year") }}</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<!-- Tags -->
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-zinc-400 mb-2">
|
||||
{{ $t("common.tags") }}
|
||||
</label>
|
||||
<div class="flex flex-wrap gap-2">
|
||||
<button
|
||||
v-for="tag in availableTags"
|
||||
:key="tag"
|
||||
class="inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium transition-colors duration-200"
|
||||
:class="[
|
||||
selectedTags.includes(tag)
|
||||
? 'bg-blue-600 text-white'
|
||||
: 'bg-zinc-800 text-zinc-300 hover:bg-zinc-700',
|
||||
]"
|
||||
@click="toggleTag(tag)"
|
||||
>
|
||||
{{ tag }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<nav class="flex-1 space-y-2">
|
||||
<NuxtLink
|
||||
v-for="article in filteredArticles"
|
||||
:key="article.id"
|
||||
:to="`/news/${article.id}`"
|
||||
class="group block rounded-lg hover-lift"
|
||||
>
|
||||
<div
|
||||
class="relative flex flex-col gap-y-2 rounded-lg p-3 transition-all duration-200"
|
||||
:class="[
|
||||
route.params.id === article.id
|
||||
? 'bg-zinc-800'
|
||||
: 'hover:bg-zinc-800/50',
|
||||
]"
|
||||
>
|
||||
<div
|
||||
v-if="article.imageObjectId"
|
||||
class="absolute inset-0 rounded-lg transition-all duration-200 overflow-hidden"
|
||||
>
|
||||
<img
|
||||
:src="useObject(article.imageObjectId)"
|
||||
class="absolute blur-sm inset-0 w-full h-full object-cover transition-all duration-200 group-hover:scale-110"
|
||||
/>
|
||||
<div class="absolute inset-0 bg-zinc-900/50" />
|
||||
</div>
|
||||
|
||||
<h3 class="relative text-sm font-medium text-zinc-100">
|
||||
{{ article.title }}
|
||||
</h3>
|
||||
<p
|
||||
class="relative mt-1 text-xs text-zinc-400 line-clamp-2"
|
||||
v-html="formatExcerpt(article.description)"
|
||||
/>
|
||||
<div
|
||||
class="relative mt-2 flex items-center gap-x-2 text-xs text-zinc-500"
|
||||
>
|
||||
<time :datetime="article.publishedAt">
|
||||
{{ $d(new Date(article.publishedAt), "short") }}
|
||||
</time>
|
||||
</div>
|
||||
</div>
|
||||
</NuxtLink>
|
||||
</nav>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, computed } from "vue";
|
||||
import { MagnifyingGlassIcon } from "@heroicons/vue/24/solid";
|
||||
import { micromark } from "micromark";
|
||||
|
||||
const news = useNews();
|
||||
if (!news.value) {
|
||||
news.value = await fetchNews();
|
||||
}
|
||||
|
||||
const route = useRoute();
|
||||
const searchQuery = ref("");
|
||||
const dateFilter = ref("all");
|
||||
const selectedTags = ref<string[]>([]);
|
||||
|
||||
// Get unique tags from all articles
|
||||
const availableTags = computed(() => {
|
||||
if (!news.value) return [];
|
||||
const tags = new Set<string>();
|
||||
news.value.forEach((article) => {
|
||||
article.tags.forEach((tag) => tags.add(tag.name));
|
||||
});
|
||||
return Array.from(tags);
|
||||
});
|
||||
|
||||
const toggleTag = (tag: string) => {
|
||||
const index = selectedTags.value.indexOf(tag);
|
||||
if (index === -1) {
|
||||
selectedTags.value.push(tag);
|
||||
} else {
|
||||
selectedTags.value.splice(index, 1);
|
||||
}
|
||||
};
|
||||
|
||||
const formatExcerpt = (excerpt: string) => {
|
||||
// Convert markdown to HTML, micromark is safe
|
||||
return micromark(excerpt);
|
||||
};
|
||||
|
||||
const filteredArticles = computed(() => {
|
||||
if (!news.value) return [];
|
||||
|
||||
// filter articles based on search, date, and tags
|
||||
return news.value.filter((article) => {
|
||||
const matchesSearch =
|
||||
article.title.toLowerCase().includes(searchQuery.value.toLowerCase()) ||
|
||||
article.description
|
||||
.toLowerCase()
|
||||
.includes(searchQuery.value.toLowerCase());
|
||||
|
||||
const articleDate = new Date(article.publishedAt);
|
||||
const now = new Date();
|
||||
let matchesDate = true;
|
||||
|
||||
switch (dateFilter.value.toLowerCase()) {
|
||||
case "today": {
|
||||
matchesDate = articleDate.toDateString() === now.toDateString();
|
||||
break;
|
||||
}
|
||||
case "week": {
|
||||
const weekAgo = new Date(now.setDate(now.getDate() - 7));
|
||||
matchesDate = articleDate >= weekAgo;
|
||||
break;
|
||||
}
|
||||
case "month": {
|
||||
matchesDate =
|
||||
articleDate.getMonth() === now.getMonth() &&
|
||||
articleDate.getFullYear() === now.getFullYear();
|
||||
break;
|
||||
}
|
||||
case "year": {
|
||||
matchesDate = articleDate.getFullYear() === now.getFullYear();
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
const matchesTags =
|
||||
selectedTags.value.length === 0 ||
|
||||
selectedTags.value.every((tag) =>
|
||||
article.tags.find((e) => e.name == tag),
|
||||
);
|
||||
|
||||
return matchesSearch && matchesDate && matchesTags;
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.hover-lift {
|
||||
transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
|
||||
}
|
||||
|
||||
.hover-lift:hover {
|
||||
transform: translateY(-2px) scale(1.02);
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,25 @@
|
||||
<template>
|
||||
<svg
|
||||
aria-label="Drop Logo"
|
||||
class="text-blue-400"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M4 13.5C4 11.0008 5.38798 8.76189 7.00766 7C8.43926 5.44272 10.0519 4.25811 11.0471 3.5959C11.6287 3.20893 12.3713 3.20893 12.9529 3.5959C13.9481 4.25811 15.5607 5.44272 16.9923 7C18.612 8.76189 20 11.0008 20 13.5C20 17.9183 16.4183 21.5 12 21.5C7.58172 21.5 4 17.9183 4 13.5Z"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
stroke-dasharray="100"
|
||||
:stroke-dashoffset="dashArray"
|
||||
/>
|
||||
</svg>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
const props = defineProps<{ progress?: number }>();
|
||||
|
||||
const dashArray = computed(() =>
|
||||
props.progress === undefined ? 0 : ((100 - props.progress) / 100) * 50 + 50,
|
||||
);
|
||||
</script>
|
||||
@@ -0,0 +1,27 @@
|
||||
<template>
|
||||
<div class="inline-flex justify-center items-center gap-x-1 -mb-1 relative">
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
viewBox="0 0 418 42"
|
||||
class="absolute inset-0 h-full w-full fill-blue-300/30 scale-75"
|
||||
preserveAspectRatio="none"
|
||||
>
|
||||
<path
|
||||
d="M203.371.916c-26.013-2.078-76.686 1.963-124.73 9.946L67.3 12.749C35.421 18.062 18.2 21.766 6.004 25.934 1.244 27.561.828 27.778.874 28.61c.07 1.214.828 1.121 9.595-1.176 9.072-2.377 17.15-3.92 39.246-7.496C123.565 7.986 157.869 4.492 195.942 5.046c7.461.108 19.25 1.696 19.17 2.582-.107 1.183-7.874 4.31-25.75 10.366-21.992 7.45-35.43 12.534-36.701 13.884-2.173 2.308-.202 4.407 4.442 4.734 2.654.187 3.263.157 15.593-.78 35.401-2.686 57.944-3.488 88.365-3.143 46.327.526 75.721 2.23 130.788 7.584 19.787 1.924 20.814 1.98 24.557 1.332l.066-.011c1.201-.203 1.53-1.825.399-2.335-2.911-1.31-4.893-1.604-22.048-3.261-57.509-5.556-87.871-7.36-132.059-7.842-23.239-.254-33.617-.116-50.627.674-11.629.54-42.371 2.494-46.696 2.967-2.359.259 8.133-3.625 26.504-9.81 23.239-7.825 27.934-10.149 28.304-14.005.417-4.348-3.529-6-16.878-7.066Z"
|
||||
/>
|
||||
</svg>
|
||||
<ApplicationLogo aria-hidden="true" class="h-6" />
|
||||
<span class="text-blue-400 font-display font-bold text-xl uppercase">
|
||||
<template v-if="serverName">
|
||||
{{ serverName }}
|
||||
</template>
|
||||
<template v-else>
|
||||
{{ $t("drop.drop") }}
|
||||
</template>
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
const { serverName } = await $dropFetch("/api/v1");
|
||||
</script>
|
||||
@@ -0,0 +1,15 @@
|
||||
<template>
|
||||
<img ref="emojiEl" class="inline-block emoji" :src="url" :alt="emoji" />
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import twemoji from "@discordapp/twemoji";
|
||||
|
||||
const props = defineProps<{
|
||||
emoji: string;
|
||||
}>();
|
||||
|
||||
const url = computed(() => {
|
||||
return `/api/v1/emoji/${twemoji.convert.toCodePoint(props.emoji)}`;
|
||||
});
|
||||
</script>
|
||||
@@ -0,0 +1,41 @@
|
||||
<template>
|
||||
<div
|
||||
v-if="emulator"
|
||||
class="flex space-x-4 rounded-md bg-zinc-900/50 px-6 outline -outline-offset-1 outline-white/10 w-fit text-xs font-bold text-zinc-100"
|
||||
>
|
||||
<div class="inline-flex gap-x-2 items-center">
|
||||
<img :src="useObject(emulator.gameIcon)" class="size-6" />
|
||||
<span>{{ emulator.gameName }}</span>
|
||||
</div>
|
||||
<div class="flex items-center">
|
||||
<svg
|
||||
class="h-full w-6 shrink-0 text-white/10"
|
||||
viewBox="0 0 24 44"
|
||||
preserveAspectRatio="none"
|
||||
fill="currentColor"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path d="M.293 0l22 22-22 22h1.414l22-22-22-22H.293z" />
|
||||
</svg>
|
||||
<span class="ml-4">{{ emulator.versionName }}</span>
|
||||
</div>
|
||||
<div class="flex items-center">
|
||||
<svg
|
||||
class="h-full w-6 shrink-0 text-white/10"
|
||||
viewBox="0 0 24 44"
|
||||
preserveAspectRatio="none"
|
||||
fill="currentColor"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path d="M.293 0l22 22-22 22h1.414l22-22-22-22H.293z" />
|
||||
</svg>
|
||||
<span class="ml-4 truncate">{{ emulator.launchName }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import type { EmulatorLaunchObject } from "~/composables/frontend";
|
||||
|
||||
defineProps<{ emulator: EmulatorLaunchObject }>();
|
||||
</script>
|
||||
@@ -0,0 +1,78 @@
|
||||
<template>
|
||||
<div ref="currentComponent">
|
||||
<ClientOnly fallback-tag="span">
|
||||
<VueCarousel :items-to-show="singlePage" :items-to-scroll="singlePage">
|
||||
<VueSlide
|
||||
v-for="(game, gameIdx) in games"
|
||||
:key="gameIdx"
|
||||
class="justify-start"
|
||||
>
|
||||
<GamePanel
|
||||
:game="game"
|
||||
:href="game ? `/store/${game.id}` : undefined"
|
||||
:show-title-description="showGamePanelTextDecoration"
|
||||
/>
|
||||
</VueSlide>
|
||||
|
||||
<template #addons>
|
||||
<VueNavigation />
|
||||
</template>
|
||||
</VueCarousel>
|
||||
<template #fallback>
|
||||
<div
|
||||
class="flex flex-nowrap flex-row overflow-hidden whitespace-nowrap"
|
||||
>
|
||||
<SkeletonCard
|
||||
v-for="index in 10"
|
||||
:key="index"
|
||||
:loading="true"
|
||||
class="mr-3 flex-none"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
</ClientOnly>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import type { GameModel } from "~/prisma/client/models";
|
||||
import type { SerializeObject } from "nitropack";
|
||||
|
||||
const props = defineProps<{
|
||||
items: Array<SerializeObject<GameModel>>;
|
||||
min?: number;
|
||||
width?: number;
|
||||
}>();
|
||||
|
||||
const {
|
||||
store: { showGamePanelTextDecoration },
|
||||
} = await $dropFetch(`/api/v1/settings`);
|
||||
|
||||
const currentComponent = ref<HTMLDivElement>();
|
||||
|
||||
const min = computed(() => Math.max(props.min ?? 8, props.items.length));
|
||||
const games: Ref<Array<SerializeObject<GameModel> | undefined>> = computed(() =>
|
||||
Array(min.value)
|
||||
.fill(0)
|
||||
.map((_, i) => props.items[i]),
|
||||
);
|
||||
|
||||
const singlePage = ref(2);
|
||||
const sizeOfCard = 192 + 10;
|
||||
|
||||
const handleResize = () => {
|
||||
singlePage.value =
|
||||
(props.width ??
|
||||
currentComponent.value?.parentElement?.clientWidth ??
|
||||
window.innerWidth) / sizeOfCard;
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
handleResize();
|
||||
window.addEventListener("resize", handleResize);
|
||||
});
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
window.removeEventListener("resize", handleResize);
|
||||
});
|
||||
</script>
|
||||
@@ -0,0 +1,839 @@
|
||||
<!-- eslint-disable vue/no-v-html -->
|
||||
<template>
|
||||
<div v-if="game!">
|
||||
<div class="grow flex flex-col xl:flex-row gap-y-8">
|
||||
<div class="grow w-full h-full px-6 py-4 flex flex-col">
|
||||
<div
|
||||
class="flex flex-col lg:flex-row lg:justify-between items-start lg:items-center gap-2"
|
||||
>
|
||||
<div class="inline-flex items-center gap-4">
|
||||
<!-- icon image -->
|
||||
<img :src="coreMetadataIconUrl" class="size-20" />
|
||||
<div>
|
||||
<h1
|
||||
class="text-2xl xl:text-5xl font-bold font-display text-zinc-100"
|
||||
>
|
||||
{{ game.mName }}
|
||||
</h1>
|
||||
<p class="mt-1 text-sm xl:text-lg text-zinc-400">
|
||||
{{ game.mShortDescription }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
class="relative inline-flex gap-x-3 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"
|
||||
@click="() => (showEditCoreMetadata = true)"
|
||||
>
|
||||
{{ $t("common.edit") }} <PencilIcon class="size-4" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 lg:grid-cols-3 gap-4 pt-8">
|
||||
<SelectorMultiItem
|
||||
v-model="currentTags"
|
||||
:items="tags"
|
||||
:create="createTag"
|
||||
/>
|
||||
<div class="flex flex-col">
|
||||
<label
|
||||
for="releaseDate"
|
||||
class="text-sm/6 font-medium text-zinc-100"
|
||||
>
|
||||
{{ $t("library.admin.game.editReleaseDate") }}
|
||||
</label>
|
||||
<div class="mt-2">
|
||||
<input
|
||||
id="releaseDate"
|
||||
v-model="releaseDate"
|
||||
type="date"
|
||||
name="releaseDate"
|
||||
class="block w-full rounded-md bg-zinc-800 px-3 py-1.5 text-base text-zinc-100 outline outline-1 -outline-offset-1 outline-zinc-700 placeholder:text-zinc-400 focus:outline focus:outline-2 focus:-outline-offset-2 focus:outline-blue-600 sm:text-sm/6"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- image carousel pick -->
|
||||
<div class="border-b border-zinc-700">
|
||||
<div class="border-b border-zinc-700 py-4">
|
||||
<div
|
||||
class="-ml-4 -mt-4 flex flex-wrap items-center justify-between sm:flex-nowrap"
|
||||
>
|
||||
<div class="ml-4 mt-4">
|
||||
<h3 class="text-base font-semibold text-zinc-100">
|
||||
{{ $t("library.admin.game.imageCarousel") }}
|
||||
</h3>
|
||||
<p class="mt-1 text-sm text-zinc-400 max-w-lg">
|
||||
{{ $t("library.admin.game.imageCarouselDescription") }}
|
||||
</p>
|
||||
</div>
|
||||
<div class="ml-4 mt-4 shrink-0">
|
||||
<button
|
||||
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"
|
||||
@click="() => (showAddCarouselModal = true)"
|
||||
>
|
||||
{{ $t("library.admin.game.addImageCarousel") }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
v-if="game.mImageCarouselObjectIds.length == 0"
|
||||
class="text-zinc-400 text-center py-8"
|
||||
>
|
||||
{{ $t("library.admin.game.imageCarouselEmpty") }}
|
||||
</div>
|
||||
|
||||
<draggable
|
||||
v-else
|
||||
:list="game.mImageCarouselObjectIds"
|
||||
class="w-full flex flex-row gap-x-4 overflow-x-auto my-2 py-4"
|
||||
@update="() => updateImageCarousel()"
|
||||
>
|
||||
<template #item="{ element }: { element: string }">
|
||||
<div class="relative group min-w-fit">
|
||||
<img :src="useObject(element)" class="h-48 w-auto" />
|
||||
<div
|
||||
class="transition-all lg:opacity-0 lg:group-hover:opacity-100 absolute inset-0 flex flex-col items-center justify-center gap-y-2 bg-zinc-950/50"
|
||||
>
|
||||
<button
|
||||
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 transition-all duration-200 hover:scale-105 hover:shadow-lg hover:shadow-blue-500/25 active:scale-95 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600"
|
||||
@click="() => removeImageFromCarousel(element)"
|
||||
>
|
||||
{{ $t("library.admin.game.removeImageCarousel") }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</draggable>
|
||||
</div>
|
||||
|
||||
<!-- description editor -->
|
||||
<div
|
||||
class="mt-4 grow flex flex-col w-full space-y-4 border border-zinc-800 rounded overflow-hidden p-2"
|
||||
>
|
||||
<!-- toolbar -->
|
||||
<div
|
||||
class="h-8 bg-zinc-800 rounded inline-flex gap-x-4 items-center justify-start p-2"
|
||||
>
|
||||
<div>
|
||||
<CheckIcon
|
||||
v-if="descriptionSaving == DescriptionSavingState.NotLoading"
|
||||
class="size-5 text-zinc-100"
|
||||
/>
|
||||
<div
|
||||
v-else-if="descriptionSaving == DescriptionSavingState.Waiting"
|
||||
>
|
||||
<PencilIcon class="animate-pulse size-5 text-zinc-100" />
|
||||
</div>
|
||||
<div
|
||||
v-else-if="descriptionSaving == DescriptionSavingState.Loading"
|
||||
role="status"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class="w-5 h-5 text-transparent animate-spin fill-white"
|
||||
viewBox="0 0 100 101"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
<path
|
||||
d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z"
|
||||
fill="currentFill"
|
||||
/>
|
||||
</svg>
|
||||
<span class="sr-only">{{ $t("common.srLoading") }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button @click="() => (showAddImageDescriptionModal = true)">
|
||||
<PhotoIcon
|
||||
class="transition size-5 text-zinc-100 hover:text-zinc-300"
|
||||
/>
|
||||
</button>
|
||||
|
||||
<button
|
||||
class="block lg:hidden"
|
||||
@click="
|
||||
() => (mobileShowFinalDescription = !mobileShowFinalDescription)
|
||||
"
|
||||
>
|
||||
<DocumentIcon
|
||||
v-if="!mobileShowFinalDescription"
|
||||
class="transition size-5 text-zinc-100 hover:text-zinc-300"
|
||||
/>
|
||||
<PencilIcon
|
||||
v-else
|
||||
class="transition size-5 text-zinc-100 hover:text-zinc-300"
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
<!-- edit area -->
|
||||
<div class="grid lg:grid-cols-2 lg:gap-x-8 grow">
|
||||
<!-- editing box -->
|
||||
<div
|
||||
:class="[
|
||||
mobileShowFinalDescription ? 'hidden' : 'block',
|
||||
'lg:block',
|
||||
]"
|
||||
>
|
||||
<textarea
|
||||
ref="descriptionEditor"
|
||||
v-model="game.mDescription"
|
||||
class="grow h-full w-full bg-zinc-950/30 text-zinc-100 border-zinc-900 rounded"
|
||||
/>
|
||||
</div>
|
||||
<!-- result box -->
|
||||
<div
|
||||
:class="[
|
||||
mobileShowFinalDescription ? 'block' : 'hidden',
|
||||
'lg:block prose prose-invert prose-blue bg-zinc-950/30 rounded px-4 py-3',
|
||||
]"
|
||||
v-html="descriptionHTML"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="lg:overflow-y-auto lg:border-l lg:border-zinc-800 lg:block lg:inset-y-0 lg:z-50 lg:w-[30vw] flex flex-col gap-y-8 px-6 py-4"
|
||||
>
|
||||
<!-- image library -->
|
||||
<div>
|
||||
<div class="border-b border-zinc-800 pb-3">
|
||||
<div
|
||||
class="flex flex-wrap items-center justify-between sm:flex-nowrap gap-4"
|
||||
>
|
||||
<div>
|
||||
<h3
|
||||
class="text-base font-semibold font-display leading-6 text-zinc-100"
|
||||
>
|
||||
{{ $t("library.admin.game.imageLibrary") }}
|
||||
</h3>
|
||||
<p class="mt-1 text-sm text-zinc-400 max-w-lg">
|
||||
{{ $t("library.admin.game.imageLibraryDescription") }}
|
||||
</p>
|
||||
</div>
|
||||
<div class="flex-shrink-0">
|
||||
<button
|
||||
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"
|
||||
@click="() => (showUploadModal = true)"
|
||||
>
|
||||
{{ $t("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.mImageLibraryObjectIds"
|
||||
:key="imageIdx"
|
||||
class="group relative flex items-center bg-zinc-950/30"
|
||||
>
|
||||
<img :src="useObject(image)" class="w-full h-auto" />
|
||||
<div
|
||||
class="transition-all lg:opacity-0 lg:group-hover:opacity-100 absolute inset-0 flex flex-col items-center justify-center gap-y-2 bg-zinc-950/50"
|
||||
>
|
||||
<button
|
||||
v-if="image !== game.mBannerObjectId"
|
||||
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 transition-all duration-200 hover:scale-105 hover:shadow-lg hover:shadow-blue-500/25 active:scale-95 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600"
|
||||
@click="() => updateBannerImage(image)"
|
||||
>
|
||||
{{ $t("library.admin.game.setBanner") }}
|
||||
</button>
|
||||
<button
|
||||
v-if="image !== game.mCoverObjectId"
|
||||
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 transition-all duration-200 hover:scale-105 hover:shadow-lg hover:shadow-blue-500/25 active:scale-95 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600"
|
||||
@click="() => updateCoverImage(image)"
|
||||
>
|
||||
{{ $t("library.admin.game.setCover") }}
|
||||
</button>
|
||||
<button
|
||||
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 transition-all duration-200 hover:scale-105 hover:shadow-lg hover:shadow-red-500/25 active:scale-95 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-red-600"
|
||||
@click="() => deleteImage(image)"
|
||||
>
|
||||
{{ $t("library.admin.game.deleteImage") }}
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
v-if="
|
||||
image === game.mBannerObjectId ||
|
||||
image === game.mCoverObjectId
|
||||
"
|
||||
class="absolute bottom-0 left-0 flex flex-row gap-x-1 p-1"
|
||||
>
|
||||
<span
|
||||
v-for="[key] of (
|
||||
[
|
||||
[
|
||||
$t('library.admin.game.currentBanner'),
|
||||
image === game.mBannerObjectId,
|
||||
],
|
||||
[
|
||||
$t('library.admin.game.currentCover'),
|
||||
image === game.mCoverObjectId,
|
||||
],
|
||||
] as const
|
||||
).filter((e) => e[1])"
|
||||
:key="key"
|
||||
class="inline-flex items-center rounded-full bg-blue-900 px-2 py-1 text-xs font-medium text-blue-100"
|
||||
>{{ key }}</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<ModalUploadFile
|
||||
v-model="showUploadModal"
|
||||
:options="{ id: game.id }"
|
||||
accept="image/*"
|
||||
endpoint="/api/v1/admin/game/image"
|
||||
:multiple="true"
|
||||
@upload="(result: GameModel) => uploadAfterImageUpload(result)"
|
||||
/>
|
||||
<ModalTemplate v-model="showAddCarouselModal">
|
||||
<template #default>
|
||||
<div
|
||||
class="grid grid-cols-2 grid-flow-dense gap-4 max-h-[70vh] overflow-y-auto p-4"
|
||||
>
|
||||
<div
|
||||
v-for="(image, imageIdx) in validAddCarouselImages"
|
||||
:key="imageIdx"
|
||||
class="group relative flex items-center bg-zinc-950/30"
|
||||
>
|
||||
<img :src="useObject(image)" class="w-full h-auto" />
|
||||
<div
|
||||
class="transition-all lg:opacity-0 lg:group-hover:opacity-100 absolute inset-0 flex flex-col items-center justify-center gap-y-2 bg-zinc-950/50"
|
||||
>
|
||||
<button
|
||||
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 transition-all duration-200 hover:scale-105 hover:shadow-lg hover:shadow-blue-500/25 active:scale-95 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600"
|
||||
@click="() => addImageToCarousel(image)"
|
||||
>
|
||||
{{ $t("add") }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
v-if="validAddCarouselImages.length == 0"
|
||||
class="text-zinc-400 col-span-2"
|
||||
>
|
||||
{{ $t("library.admin.game.addCarouselNoImages") }}
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template #buttons>
|
||||
<button
|
||||
ref="cancelButtonRef"
|
||||
type="button"
|
||||
class="mt-3 inline-flex w-full justify-center rounded-md bg-zinc-900 px-3 py-2 text-sm font-semibold text-zinc-100 shadow-sm ring-1 ring-inset ring-zinc-700 hover:bg-zinc-950 transition-all duration-200 hover:scale-105 hover:shadow-lg active:scale-95 sm:mt-0 sm:w-auto"
|
||||
@click="showAddCarouselModal = false"
|
||||
>
|
||||
{{ $t("common.close") }}
|
||||
</button>
|
||||
</template>
|
||||
</ModalTemplate>
|
||||
<ModalTemplate v-model="showAddImageDescriptionModal">
|
||||
<template #default>
|
||||
<div class="grid grid-cols-2 grid-flow-dense gap-4">
|
||||
<div
|
||||
v-for="(image, imageIdx) in game.mImageLibraryObjectIds"
|
||||
:key="imageIdx"
|
||||
class="group relative flex items-center bg-zinc-950/30"
|
||||
>
|
||||
<img :src="useObject(image)" class="w-full h-auto" />
|
||||
<div
|
||||
class="transition-all lg:opacity-0 lg:group-hover:opacity-100 absolute inset-0 flex flex-col items-center justify-center gap-y-2 bg-zinc-950/50"
|
||||
>
|
||||
<button
|
||||
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 transition-all duration-200 hover:scale-105 hover:shadow-lg hover:shadow-blue-500/25 active:scale-95 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600"
|
||||
@click="() => insertImageAtCursor(image)"
|
||||
>
|
||||
{{ $t("common.insert") }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
v-if="game.mImageLibraryObjectIds.length == 0"
|
||||
class="text-zinc-400 col-span-2"
|
||||
>
|
||||
{{ $t("library.admin.game.addDescriptionNoImages") }}
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template #buttons>
|
||||
<button
|
||||
ref="cancelButtonRef"
|
||||
type="button"
|
||||
class="mt-3 inline-flex w-full justify-center rounded-md bg-zinc-900 px-3 py-2 text-sm font-semibold text-zinc-100 shadow-sm ring-1 ring-inset ring-zinc-700 hover:bg-zinc-950 transition-all duration-200 hover:scale-105 hover:shadow-lg active:scale-95 sm:mt-0 sm:w-auto"
|
||||
@click="showAddImageDescriptionModal = false"
|
||||
>
|
||||
{{ $t("cancel") }}
|
||||
</button>
|
||||
</template>
|
||||
</ModalTemplate>
|
||||
<ModalTemplate v-model="showEditCoreMetadata">
|
||||
<template #default>
|
||||
<div class="flex flex-col lg:flex-row gap-6">
|
||||
<!-- icon upload div -->
|
||||
<div class="flex flex-col items-center gap-4">
|
||||
<img :src="coreMetadataIconUrl" class="size-24 aspect-square" />
|
||||
<label for="file-upload">
|
||||
<span
|
||||
type="button"
|
||||
class="cursor-pointer 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"
|
||||
>
|
||||
{{ $t("upload") }}
|
||||
</span>
|
||||
<input
|
||||
id="file-upload"
|
||||
accept="image/*"
|
||||
class="hidden"
|
||||
type="file"
|
||||
@change="(e: Event) => coreMetadataUploadFiles(e as any)"
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
<!-- edit title -->
|
||||
<div class="flex flex-col gap-y-4 grow">
|
||||
<div>
|
||||
<label
|
||||
for="name"
|
||||
class="block text-sm/6 font-medium text-zinc-100"
|
||||
>{{ $t("library.admin.game.editGameName") }}</label
|
||||
>
|
||||
<div class="mt-2">
|
||||
<input
|
||||
id="name"
|
||||
v-model="coreMetadataName"
|
||||
type="text"
|
||||
name="name"
|
||||
class="block w-full rounded-md bg-zinc-800 px-3 py-1.5 text-base text-zinc-100 outline outline-1 -outline-offset-1 outline-zinc-700 placeholder:text-zinc-400 focus:outline focus:outline-2 focus:-outline-offset-2 focus:outline-blue-600 sm:text-sm/6"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<label
|
||||
for="description"
|
||||
class="block text-sm/6 font-medium text-zinc-100"
|
||||
>{{ $t("library.admin.game.editGameDescription") }}</label
|
||||
>
|
||||
<div class="mt-2">
|
||||
<input
|
||||
id="description"
|
||||
v-model="coreMetadataDescription"
|
||||
type="text"
|
||||
name="description"
|
||||
class="block w-full rounded-md bg-zinc-800 px-3 py-1.5 text-base text-zinc-100 outline outline-1 -outline-offset-1 outline-zinc-700 placeholder:text-zinc-400 focus:outline focus:outline-2 focus:-outline-offset-2 focus:outline-blue-600 sm:text-sm/6"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template #buttons>
|
||||
<LoadingButton
|
||||
type="button"
|
||||
:loading="coreMetadataLoading"
|
||||
:class="['inline-flex w-full shadow-sm sm:ml-3 sm:w-auto']"
|
||||
@click="() => coreMetadataUpdate_wrapper()"
|
||||
>
|
||||
{{ $t("common.save") }}
|
||||
</LoadingButton>
|
||||
<button
|
||||
ref="cancelButtonRef"
|
||||
type="button"
|
||||
class="mt-3 inline-flex w-full justify-center rounded-md bg-zinc-900 px-3 py-2 text-sm font-semibold text-zinc-100 shadow-sm ring-1 ring-inset ring-zinc-700 hover:bg-zinc-950 transition-all duration-200 hover:scale-105 hover:shadow-lg active:scale-95 sm:mt-0 sm:w-auto"
|
||||
@click="showEditCoreMetadata = false"
|
||||
>
|
||||
{{ $t("cancel") }}
|
||||
</button>
|
||||
</template>
|
||||
</ModalTemplate>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import type { GameModel } from "~/prisma/client/models";
|
||||
import { micromark } from "micromark";
|
||||
import {
|
||||
CheckIcon,
|
||||
DocumentIcon,
|
||||
PencilIcon,
|
||||
PhotoIcon,
|
||||
} from "@heroicons/vue/24/solid";
|
||||
import type { SerializeObject } from "nitropack";
|
||||
import type { H3Error } from "h3";
|
||||
import type { AdminFetchGameType } from "~/server/api/v1/admin/game/[id]/index.get";
|
||||
|
||||
const showUploadModal = ref(false);
|
||||
const showAddCarouselModal = ref(false);
|
||||
const showAddImageDescriptionModal = ref(false);
|
||||
const showEditCoreMetadata = ref(false);
|
||||
const mobileShowFinalDescription = ref(true);
|
||||
|
||||
const game = defineModel<SerializeObject<AdminFetchGameType>>({
|
||||
required: true,
|
||||
});
|
||||
if (!game.value)
|
||||
throw createError({
|
||||
statusCode: 500,
|
||||
statusMessage: "Game not provided to editor component",
|
||||
});
|
||||
|
||||
const currentTags = ref<{ [key: string]: boolean }>(
|
||||
Object.fromEntries(game.value.tags.map((e) => [e.id, true])),
|
||||
);
|
||||
const rawTags = await $dropFetch("/api/v1/admin/tags");
|
||||
const tags = ref(
|
||||
rawTags.map((e) => ({ name: e.name, param: e.id }) satisfies StoreSortOption),
|
||||
);
|
||||
|
||||
watch(
|
||||
currentTags,
|
||||
async (v) => {
|
||||
await $dropFetch(`/api/v1/admin/game/:id/tags`, {
|
||||
method: "PATCH",
|
||||
params: {
|
||||
id: game.value.id,
|
||||
},
|
||||
body: {
|
||||
tags: Object.entries(v)
|
||||
.filter((v) => v[1])
|
||||
.map((v) => v[0]),
|
||||
},
|
||||
failTitle: "Failed to update game tags",
|
||||
});
|
||||
},
|
||||
{ deep: true },
|
||||
);
|
||||
|
||||
const releaseDate = ref(
|
||||
game.value.mReleased
|
||||
? new Date(game.value.mReleased).toISOString().substring(0, 10)
|
||||
: "",
|
||||
);
|
||||
|
||||
watch(releaseDate, async (newDate) => {
|
||||
const body: PatchGameBody = {};
|
||||
|
||||
if (newDate) {
|
||||
const parsed = new Date(newDate);
|
||||
if (!isNaN(parsed.getTime())) {
|
||||
body.mReleased = parsed;
|
||||
}
|
||||
}
|
||||
|
||||
await $dropFetch(`/api/v1/admin/game/:id`, {
|
||||
method: "PATCH",
|
||||
params: {
|
||||
id: game.value.id,
|
||||
},
|
||||
body,
|
||||
failTitle: "Failed to update release date",
|
||||
});
|
||||
});
|
||||
|
||||
const { t } = useI18n();
|
||||
|
||||
// I don't know why I split these fields off.
|
||||
const coreMetadataName = ref(game.value.mName);
|
||||
const coreMetadataDescription = ref(game.value.mShortDescription);
|
||||
|
||||
const coreMetadataIconUrl = ref(useObject(game.value.mIconObjectId));
|
||||
const coreMetadataIconFileUpload = ref<FileList | undefined>();
|
||||
const coreMetadataLoading = ref(false);
|
||||
|
||||
function coreMetadataUploadFiles(e: InputEvent) {
|
||||
if (coreMetadataIconUrl.value.startsWith("blob")) {
|
||||
URL.revokeObjectURL(coreMetadataIconUrl.value);
|
||||
}
|
||||
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
coreMetadataIconFileUpload.value = (e.target as any)?.files;
|
||||
const file = coreMetadataIconFileUpload.value?.item(0);
|
||||
if (!file) {
|
||||
createModal(
|
||||
ModalType.Notification,
|
||||
{
|
||||
title: t("errors.upload.title"),
|
||||
description: t("errors.upload.description", [t("errors.unknown")]),
|
||||
buttonText: t("common.close"),
|
||||
},
|
||||
(e, c) => c(),
|
||||
);
|
||||
return;
|
||||
}
|
||||
const objectUrl = URL.createObjectURL(file);
|
||||
coreMetadataIconUrl.value = objectUrl;
|
||||
}
|
||||
async function coreMetadataUpdate() {
|
||||
const formData = new FormData();
|
||||
|
||||
const newIcon = coreMetadataIconFileUpload.value?.item(0);
|
||||
if (newIcon) {
|
||||
formData.append("icon", newIcon);
|
||||
}
|
||||
|
||||
formData.append("name", coreMetadataName.value);
|
||||
formData.append("description", coreMetadataDescription.value);
|
||||
|
||||
const result = await $dropFetch(
|
||||
`/api/v1/admin/game/${game.value.id}/metadata`,
|
||||
{
|
||||
method: "POST",
|
||||
body: formData,
|
||||
},
|
||||
);
|
||||
return result;
|
||||
}
|
||||
|
||||
function coreMetadataUpdate_wrapper() {
|
||||
coreMetadataLoading.value = true;
|
||||
coreMetadataUpdate()
|
||||
.catch((e) => {
|
||||
createModal(
|
||||
ModalType.Notification,
|
||||
{
|
||||
title: t("errors.game.metadata.title"),
|
||||
description: t("errors.game.metadata.description", [
|
||||
(e as H3Error)?.statusMessage ?? t("errors.unknown"),
|
||||
]),
|
||||
buttonText: t("common.close"),
|
||||
},
|
||||
(e, c) => c(),
|
||||
);
|
||||
})
|
||||
.then((newGame) => {
|
||||
if (!newGame) return;
|
||||
Object.assign(game.value, newGame);
|
||||
coreMetadataIconUrl.value = useObject(newGame.mIconObjectId);
|
||||
})
|
||||
.finally(() => {
|
||||
coreMetadataLoading.value = false;
|
||||
showEditCoreMetadata.value = false;
|
||||
});
|
||||
}
|
||||
|
||||
const descriptionHTML = computed(() =>
|
||||
micromark(game.value?.mDescription ?? ""),
|
||||
);
|
||||
const descriptionEditor = ref<HTMLTextAreaElement | undefined>();
|
||||
// 0 is not loading
|
||||
// 1 is waiting for stop
|
||||
// 2 is loading
|
||||
enum DescriptionSavingState {
|
||||
NotLoading,
|
||||
Waiting,
|
||||
Loading,
|
||||
}
|
||||
const descriptionSaving = ref<DescriptionSavingState>(
|
||||
DescriptionSavingState.NotLoading,
|
||||
);
|
||||
|
||||
let savingTimeout: undefined | NodeJS.Timeout;
|
||||
|
||||
type PatchGameBody = Partial<GameModel>;
|
||||
|
||||
watch(descriptionHTML, (_v) => {
|
||||
descriptionSaving.value = DescriptionSavingState.Waiting;
|
||||
if (savingTimeout) clearTimeout(savingTimeout);
|
||||
savingTimeout = setTimeout(async () => {
|
||||
try {
|
||||
descriptionSaving.value = DescriptionSavingState.Loading;
|
||||
await $dropFetch(`/api/v1/admin/game/:id`, {
|
||||
method: "PATCH",
|
||||
params: {
|
||||
id: game.value.id,
|
||||
},
|
||||
body: {
|
||||
mDescription: game.value.mDescription,
|
||||
} satisfies PatchGameBody,
|
||||
});
|
||||
descriptionSaving.value = DescriptionSavingState.NotLoading;
|
||||
} catch (e) {
|
||||
createModal(
|
||||
ModalType.Notification,
|
||||
{
|
||||
title: t("errors.game.description.title"),
|
||||
description: t("errors.game.description.description", [
|
||||
(e as H3Error)?.statusMessage ?? t("errors.unknown"),
|
||||
]),
|
||||
buttonText: t("common.close"),
|
||||
},
|
||||
(e, c) => c(),
|
||||
);
|
||||
}
|
||||
}, 1500);
|
||||
});
|
||||
|
||||
const validAddCarouselImages = computed(() =>
|
||||
game.value.mImageLibraryObjectIds.filter(
|
||||
(e) => !game.value.mImageCarouselObjectIds.includes(e),
|
||||
),
|
||||
);
|
||||
|
||||
function insertImageAtCursor(id: string) {
|
||||
showAddImageDescriptionModal.value = false;
|
||||
if (!descriptionEditor.value || !game.value) return;
|
||||
const insertPosition = descriptionEditor.value.selectionStart;
|
||||
const text = ``;
|
||||
game.value.mDescription = `${game.value.mDescription.slice(
|
||||
0,
|
||||
insertPosition,
|
||||
)}${text}${game.value.mDescription.slice(insertPosition)}`;
|
||||
}
|
||||
|
||||
async function updateBannerImage(id: string) {
|
||||
try {
|
||||
if (game.value.mBannerObjectId == id) return;
|
||||
const { mBannerObjectId } = await $dropFetch(`/api/v1/admin/game/:id`, {
|
||||
method: "PATCH",
|
||||
params: {
|
||||
id: game.value.id,
|
||||
},
|
||||
body: {
|
||||
mBannerObjectId: id,
|
||||
} satisfies PatchGameBody,
|
||||
});
|
||||
game.value.mBannerObjectId = mBannerObjectId;
|
||||
} catch (e) {
|
||||
createModal(
|
||||
ModalType.Notification,
|
||||
{
|
||||
title: t("errors.game.banner.title"),
|
||||
description: t("errors.game.banner.description", [
|
||||
(e as H3Error)?.statusMessage ?? t("errors.unknown"),
|
||||
]),
|
||||
buttonText: t("common.close"),
|
||||
},
|
||||
(e, c) => c(),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
async function updateCoverImage(id: string) {
|
||||
try {
|
||||
if (game.value.mCoverObjectId == id) return;
|
||||
const { mCoverObjectId } = await $dropFetch(`/api/v1/admin/game/:id`, {
|
||||
method: "PATCH",
|
||||
params: {
|
||||
id: game.value.id,
|
||||
},
|
||||
body: {
|
||||
mCoverObjectId: id,
|
||||
} satisfies PatchGameBody,
|
||||
});
|
||||
game.value.mCoverObjectId = mCoverObjectId;
|
||||
} catch (e) {
|
||||
createModal(
|
||||
ModalType.Notification,
|
||||
{
|
||||
title: t("errors.game.cover.title"),
|
||||
description: t("errors.game.cover.description", [
|
||||
(e as H3Error)?.statusMessage ?? t("errors.unknown"),
|
||||
]),
|
||||
buttonText: t("common.close"),
|
||||
},
|
||||
(e, c) => c(),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
async function deleteImage(id: string) {
|
||||
try {
|
||||
const { mBannerObjectId, mImageLibraryObjectIds } = await $dropFetch(
|
||||
"/api/v1/admin/game/image",
|
||||
{
|
||||
method: "DELETE",
|
||||
body: {
|
||||
gameId: game.value.id,
|
||||
imageId: id,
|
||||
},
|
||||
},
|
||||
);
|
||||
game.value.mImageLibraryObjectIds = mImageLibraryObjectIds;
|
||||
game.value.mBannerObjectId = mBannerObjectId;
|
||||
} catch (e) {
|
||||
createModal(
|
||||
ModalType.Notification,
|
||||
{
|
||||
title: t("errors.game.deleteImage.title"),
|
||||
description: t("errors.game.deleteImage.description", [
|
||||
(e as H3Error)?.statusMessage ?? t("errors.unknown"),
|
||||
]),
|
||||
buttonText: t("common.close"),
|
||||
},
|
||||
(e, c) => c(),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
async function uploadAfterImageUpload(result: GameModel) {
|
||||
if (!game.value) return;
|
||||
game.value.mImageLibraryObjectIds = result.mImageLibraryObjectIds;
|
||||
}
|
||||
|
||||
function addImageToCarousel(id: string) {
|
||||
game.value.mImageCarouselObjectIds.push(id);
|
||||
updateImageCarousel();
|
||||
}
|
||||
|
||||
function removeImageFromCarousel(id: string) {
|
||||
const imageIndex = game.value.mImageCarouselObjectIds.findIndex(
|
||||
(e) => e == id,
|
||||
);
|
||||
game.value.mImageCarouselObjectIds.splice(imageIndex, 1);
|
||||
updateImageCarousel();
|
||||
}
|
||||
|
||||
async function updateImageCarousel() {
|
||||
try {
|
||||
await $dropFetch(`/api/v1/admin/game/:id`, {
|
||||
method: "PATCH",
|
||||
params: {
|
||||
id: game.value.id,
|
||||
},
|
||||
body: {
|
||||
mImageCarouselObjectIds: game.value.mImageCarouselObjectIds,
|
||||
} satisfies PatchGameBody,
|
||||
});
|
||||
} catch (e) {
|
||||
createModal(
|
||||
ModalType.Notification,
|
||||
{
|
||||
title: t("errors.game.carousel.title"),
|
||||
description: t("errors.game.carousel.description", [
|
||||
(e as H3Error)?.statusMessage ?? t("errors.unknown"),
|
||||
]),
|
||||
buttonText: t("common.close"),
|
||||
},
|
||||
(e, c) => c(),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
async function createTag(value: string): Promise<string> {
|
||||
const tag = await $dropFetch(`/api/v1/admin/tags`, {
|
||||
method: "POST",
|
||||
body: {
|
||||
name: value,
|
||||
},
|
||||
});
|
||||
tags.value.push({ name: tag.name, param: tag.id });
|
||||
return tag.id;
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,269 @@
|
||||
<!-- eslint-disable vue/no-v-html -->
|
||||
<template>
|
||||
<div v-if="game && unimportedVersions" class="px-4 sm:px-6 lg:px-8 py-8">
|
||||
<div class="sm:flex sm:items-center">
|
||||
<div class="sm:flex-auto">
|
||||
<h1 class="text-base font-semibold text-white">
|
||||
{{ $t("library.admin.version.title") }}
|
||||
</h1>
|
||||
<p class="mt-2 text-sm text-gray-300">
|
||||
{{ $t("library.admin.version.description") }}
|
||||
</p>
|
||||
</div>
|
||||
<div class="mt-4 sm:mt-0 sm:ml-16 sm:flex-none">
|
||||
<NuxtLink
|
||||
:href="canImport ? `/admin/library/${game.id}/import` : ''"
|
||||
type="button"
|
||||
:class="[
|
||||
canImport ? 'bg-blue-600 hover:bg-blue-700' : 'bg-blue-800/50',
|
||||
'inline-flex w-fit items-center gap-x-2 rounded-md px-3 py-1 text-sm font-semibold font-display text-white shadow-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600',
|
||||
]"
|
||||
>
|
||||
{{
|
||||
canImport
|
||||
? $t("library.admin.import.version.import")
|
||||
: $t("library.admin.import.version.noVersions")
|
||||
}}
|
||||
</NuxtLink>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-8 flow-root">
|
||||
<div class="-mx-4 -my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
|
||||
<div class="inline-block min-w-full py-2 align-middle sm:px-6 lg:px-8">
|
||||
<table class="relative min-w-full divide-y divide-white/15">
|
||||
<thead>
|
||||
<tr>
|
||||
<th></th>
|
||||
<th
|
||||
scope="col"
|
||||
class="py-3 pr-3 pl-4 text-left text-xs font-medium tracking-wide text-gray-400 uppercase sm:pl-0"
|
||||
>
|
||||
{{ $t("library.admin.version.table.name") }}
|
||||
</th>
|
||||
<th
|
||||
scope="col"
|
||||
class="px-3 py-3 text-left text-xs font-medium tracking-wide text-gray-400 uppercase"
|
||||
>
|
||||
{{ $t("library.admin.version.table.path") }}
|
||||
</th>
|
||||
<th
|
||||
scope="col"
|
||||
class="px-3 py-3 text-left text-xs font-medium tracking-wide text-gray-400 uppercase"
|
||||
>
|
||||
{{ $t("library.admin.version.table.delta") }}
|
||||
</th>
|
||||
<th
|
||||
scope="col"
|
||||
class="px-3 py-3 text-left text-xs font-medium tracking-wide text-gray-400 uppercase"
|
||||
>
|
||||
{{ $t("library.admin.version.table.setup") }}
|
||||
</th>
|
||||
<th
|
||||
scope="col"
|
||||
class="px-3 py-3 text-left text-xs font-medium tracking-wide text-gray-400 uppercase"
|
||||
>
|
||||
{{ $t("library.admin.version.table.launch") }}
|
||||
</th>
|
||||
<th scope="col" class="py-3 pr-4 pl-3 sm:pr-0">
|
||||
<span class="sr-only">{{ $t("common.edit") }}</span>
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<draggable
|
||||
:list="game.versions"
|
||||
handle=".handle"
|
||||
class="divide-y divide-white/10"
|
||||
tag="tbody"
|
||||
@update="() => updateVersionOrder()"
|
||||
>
|
||||
<template #item="{ element: version }: { element: VersionType }">
|
||||
<tr :key="version.versionId">
|
||||
<td>
|
||||
<Bars3Icon
|
||||
class="cursor-move w-6 h-6 text-zinc-400 handle"
|
||||
/>
|
||||
</td>
|
||||
<td class="py-4 pr-3 pl-4 sm:pl-0">
|
||||
<div class="flex flex-col">
|
||||
<span
|
||||
class="text-sm font-medium whitespace-nowrap text-white"
|
||||
>{{ version.displayName ?? version.versionPath }}</span
|
||||
>
|
||||
<span class="text-xs text-zinc-500 mono">{{
|
||||
version.versionId
|
||||
}}</span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-3 py-4 text-sm whitespace-nowrap text-gray-400">
|
||||
{{ version.versionPath }}
|
||||
</td>
|
||||
<td class="px-3 py-4 text-sm whitespace-nowrap text-gray-400">
|
||||
{{ version.delta }}
|
||||
</td>
|
||||
|
||||
<td class="px-3 py-4 text-sm whitespace-nowrap text-gray-400">
|
||||
<ul class="space-y-2">
|
||||
<GameEditorVersionConfig
|
||||
v-for="config in version.setups"
|
||||
:key="config.setupId"
|
||||
:config="config"
|
||||
/>
|
||||
<li
|
||||
v-if="version.setups.length == 0"
|
||||
class="text-xs uppercase font-display text-zinc-700 font-semibold"
|
||||
>
|
||||
{{ $t("library.admin.version.noSetups") }}
|
||||
</li>
|
||||
</ul>
|
||||
</td>
|
||||
<td class="px-3 py-4 text-sm whitespace-nowrap text-gray-400">
|
||||
<div v-if="version.onlySetup">
|
||||
{{ $t("library.admin.version.setupOnly") }}
|
||||
</div>
|
||||
<ul v-else class="space-y-2">
|
||||
<GameEditorVersionConfig
|
||||
v-for="config in version.launches"
|
||||
:key="config.launchId"
|
||||
:config="config"
|
||||
/>
|
||||
</ul>
|
||||
</td>
|
||||
<td
|
||||
class="py-4 pr-4 pl-3 text-right text-sm font-medium whitespace-nowrap sm:pr-0 space-x-2"
|
||||
>
|
||||
<!--
|
||||
<button class="text-blue-400 hover:text-blue-300">
|
||||
Edit<span class="sr-only"
|
||||
>,
|
||||
{{ version.displayName ?? version.versionPath }}</span
|
||||
>
|
||||
</button>
|
||||
-->
|
||||
<button
|
||||
class="text-red-400 hover:text-red-300"
|
||||
@click="() => deleteVersion(version.versionId)"
|
||||
>
|
||||
{{ $t("common.delete") }}
|
||||
</button>
|
||||
</td>
|
||||
</tr></template
|
||||
>
|
||||
</draggable>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else class="grow w-full flex items-center justify-center">
|
||||
<div class="flex flex-col items-center">
|
||||
<ExclamationCircleIcon
|
||||
class="h-12 w-12 text-red-600"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
<div class="mt-3 text-center sm:mt-5">
|
||||
<h1 class="text-3xl font-semibold font-display leading-6 text-zinc-100">
|
||||
{{ $t("library.admin.offlineTitle") }}
|
||||
</h1>
|
||||
<div class="mt-4">
|
||||
<p class="text-sm text-zinc-400 max-w-md">
|
||||
{{ $t("library.admin.offline") }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import type { SerializeObject } from "nitropack";
|
||||
import type { H3Error } from "h3";
|
||||
import { ExclamationCircleIcon, Bars3Icon } from "@heroicons/vue/24/outline";
|
||||
import type { AdminFetchGameType } from "~/server/api/v1/admin/game/[id]/index.get";
|
||||
|
||||
// TODO implement UI for this page
|
||||
|
||||
const props = defineProps<{ unimportedVersions: string[] }>();
|
||||
|
||||
const { t } = useI18n();
|
||||
|
||||
const hasDeleted = ref(false);
|
||||
|
||||
const canImport = computed(
|
||||
() => hasDeleted.value || props.unimportedVersions.length > 0,
|
||||
);
|
||||
|
||||
const game = defineModel<SerializeObject<AdminFetchGameType>>({
|
||||
required: true,
|
||||
});
|
||||
if (!game.value)
|
||||
throw createError({
|
||||
statusCode: 500,
|
||||
statusMessage: "Game not provided to editor component",
|
||||
});
|
||||
|
||||
type VersionType = (typeof game.value.versions)[number];
|
||||
|
||||
async function updateVersionOrder() {
|
||||
try {
|
||||
const newVersionOrder = await $dropFetch(
|
||||
"/api/v1/admin/game/:id/versions",
|
||||
{
|
||||
method: "PATCH",
|
||||
body: {
|
||||
versions: game.value.versions.map((e) => e.versionId),
|
||||
},
|
||||
params: {
|
||||
id: game.value.id,
|
||||
},
|
||||
},
|
||||
);
|
||||
const newVersions = newVersionOrder.map(
|
||||
(id) => game.value.versions.find((k) => k.versionId == id)!,
|
||||
);
|
||||
game.value.versions = newVersions;
|
||||
} catch (e) {
|
||||
createModal(
|
||||
ModalType.Notification,
|
||||
{
|
||||
title: t("errors.version.order.title"),
|
||||
description: t("errors.version.order.desc", {
|
||||
error: (e as H3Error)?.statusMessage ?? t("errors.unknown"),
|
||||
}),
|
||||
buttonText: t("common.close"),
|
||||
},
|
||||
(e, c) => c(),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
async function deleteVersion(versionId: string) {
|
||||
try {
|
||||
await $dropFetch("/api/v1/admin/game/:id/versions", {
|
||||
method: "DELETE",
|
||||
body: {
|
||||
version: versionId,
|
||||
},
|
||||
params: {
|
||||
id: game.value.id,
|
||||
},
|
||||
});
|
||||
game.value.versions.splice(
|
||||
game.value.versions.findIndex((e) => e.versionId === versionId),
|
||||
1,
|
||||
);
|
||||
hasDeleted.value = true;
|
||||
} catch (e) {
|
||||
createModal(
|
||||
ModalType.Notification,
|
||||
{
|
||||
title: t("errors.version.delete.title"),
|
||||
description: t("errors.version.delete.desc", {
|
||||
error: (e as H3Error)?.statusMessage ?? t("errors.unknown"),
|
||||
}),
|
||||
buttonText: t("common.close"),
|
||||
},
|
||||
(e, c) => c(),
|
||||
);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,55 @@
|
||||
<template>
|
||||
<li class="p-3 bg-zinc-800 ring-1 ring-zinc-700 shadow rounded-lg space-y-2">
|
||||
<div class="flex justify-between">
|
||||
<h1
|
||||
v-if="!isSetup(props.config)"
|
||||
class="font-semibold text-zinc-300 text-md"
|
||||
>
|
||||
{{ props.config.name }}
|
||||
</h1>
|
||||
<span class="flex items-center">
|
||||
<component
|
||||
:is="PLATFORM_ICONS[props.config.platform]"
|
||||
alt=""
|
||||
class="size-5 flex-shrink-0 text-blue-600"
|
||||
/>
|
||||
<span class="ml-2 block truncate text-zinc-100 text-sm font-bold">{{
|
||||
props.config.platform
|
||||
}}</span>
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="inline-flex gap-x-1 items-center bg-zinc-950 text-zinc-400 mono rounded-md p-2"
|
||||
>
|
||||
<p>{{ props.config.command }}</p>
|
||||
</div>
|
||||
<EmulatorWidget
|
||||
v-if="!isSetup(props.config) && props.config.emulator"
|
||||
:emulator="{
|
||||
launchId: props.config.launchId,
|
||||
gameName: props.config.emulator.gameVersion.game.mName,
|
||||
gameIcon: props.config.emulator.gameVersion.game.mIconObjectId,
|
||||
versionName: (props.config.emulator.gameVersion.displayName ??
|
||||
props.config.emulator.gameVersion.versionPath)!,
|
||||
launchName: props.config.emulator.name,
|
||||
platform: props.config.emulator.platform,
|
||||
}"
|
||||
/>
|
||||
</li>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import type { AdminFetchGameType } from "~/server/api/v1/admin/game/[id]/index.get";
|
||||
|
||||
const props = defineProps<{
|
||||
config:
|
||||
| AdminFetchGameType["versions"][number]["setups"][number]
|
||||
| AdminFetchGameType["versions"][number]["launches"][number];
|
||||
}>();
|
||||
|
||||
function isSetup(
|
||||
v: typeof props.config,
|
||||
): v is AdminFetchGameType["versions"][number]["setups"][number] {
|
||||
return Object.prototype.hasOwnProperty.call(v, "setupId");
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,104 @@
|
||||
<template>
|
||||
<NuxtLink
|
||||
v-if="game || defaultPlaceholder"
|
||||
:href="href"
|
||||
:class="{
|
||||
'transition-all duration-300 text-left hover:scale-[1.02] hover:shadow-lg hover:-translate-y-0.5':
|
||||
animate,
|
||||
}"
|
||||
class="group relative flex-1 min-w-42 max-w-48 h-64 rounded-lg overflow-hidden"
|
||||
>
|
||||
<div
|
||||
:class="{
|
||||
'transition-all duration-300 group-hover:scale-110': animate,
|
||||
}"
|
||||
class="absolute inset-0"
|
||||
>
|
||||
<img
|
||||
:src="imageProps.src"
|
||||
class="w-full h-full object-cover brightness-[90%]"
|
||||
:alt="imageProps.alt"
|
||||
/>
|
||||
<div
|
||||
v-if="showTitleDescription"
|
||||
class="absolute inset-0 bg-gradient-to-t from-zinc-950/80 via-zinc-950/0 to-transparent"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-if="showTitleDescription"
|
||||
class="absolute bottom-0 left-0 w-full p-3"
|
||||
>
|
||||
<h1
|
||||
:class="{ 'group-hover:text-white transition-colors': animate }"
|
||||
class="text-zinc-100 text-sm font-bold font-display"
|
||||
>
|
||||
{{
|
||||
game ? game.mName : $t("settings.admin.store.dropGameNamePlaceholder")
|
||||
}}
|
||||
</h1>
|
||||
<p
|
||||
:class="{
|
||||
'group-hover:text-zinc-300 transition-colors': animate,
|
||||
}"
|
||||
class="text-zinc-400 text-xs line-clamp-2"
|
||||
>
|
||||
{{
|
||||
game
|
||||
? game.mShortDescription
|
||||
: $t("settings.admin.store.dropGameDescriptionPlaceholder")
|
||||
}}
|
||||
</p>
|
||||
</div>
|
||||
</NuxtLink>
|
||||
<SkeletonCard
|
||||
v-else-if="defaultPlaceholder === false"
|
||||
:message="$t('store.noGame')"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import type { SerializeObject } from "nitropack";
|
||||
|
||||
const { t } = useI18n();
|
||||
const {
|
||||
game,
|
||||
href = undefined,
|
||||
showTitleDescription = true,
|
||||
animate = true,
|
||||
defaultPlaceholder = false,
|
||||
} = defineProps<{
|
||||
game:
|
||||
| SerializeObject<{
|
||||
id: string;
|
||||
mCoverObjectId: string;
|
||||
mName: string;
|
||||
mShortDescription: string;
|
||||
}>
|
||||
| undefined
|
||||
| null;
|
||||
href?: string;
|
||||
showTitleDescription?: boolean;
|
||||
animate?: boolean;
|
||||
defaultPlaceholder?: boolean;
|
||||
}>();
|
||||
|
||||
const imageProps = {
|
||||
src: "",
|
||||
alt: t("settings.admin.store.dropGameAltPlaceholder"),
|
||||
};
|
||||
|
||||
if (game) {
|
||||
imageProps.src = useObject(game.mCoverObjectId);
|
||||
imageProps.alt = game.mName;
|
||||
} else if (defaultPlaceholder) {
|
||||
imageProps.src = "/game-panel-placeholder.png";
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
img.active {
|
||||
view-transition-name: selected-game;
|
||||
contain: layout;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,28 @@
|
||||
<template>
|
||||
<div class="flex flex-row items-center gap-x-2">
|
||||
<img
|
||||
:src="rawIcon ? game.icon : useObject(game.icon)"
|
||||
class="w-12 h-12 rounded-sm object-cover"
|
||||
/>
|
||||
<div class="flex flex-col items-left">
|
||||
<h1 class="font-semibold font-display text-lg text-zinc-100">
|
||||
{{ game.name }}
|
||||
<span
|
||||
v-if="game.sourceName"
|
||||
class="inline-flex items-center rounded-md bg-blue-600/50 px-2 py-1 text-xs font-medium text-blue-400 ring-1 ring-inset ring-blue-700/10"
|
||||
>{{ game.sourceName }}</span
|
||||
>
|
||||
</h1>
|
||||
<p class="text-sm text-zinc-400">{{ game.description }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import type { GameMetadataSearchResult } from "~/server/internal/metadata/types";
|
||||
|
||||
const { game, rawIcon = true } = defineProps<{
|
||||
game: Omit<GameMetadataSearchResult, "year"> & { sourceName?: string };
|
||||
rawIcon?: boolean;
|
||||
}>();
|
||||
</script>
|
||||
@@ -0,0 +1,9 @@
|
||||
<template>
|
||||
<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
|
||||
<svg viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
fill="currentColor"
|
||||
d="M20.992 20.163c-1.511-0.099-2.699-1.349-2.699-2.877 0-0.051 0.001-0.102 0.004-0.153l-0 0.007c-0.003-0.048-0.005-0.104-0.005-0.161 0-1.525 1.19-2.771 2.692-2.862l0.008-0c1.509 0.082 2.701 1.325 2.701 2.847 0 0.062-0.002 0.123-0.006 0.184l0-0.008c0.003 0.050 0.005 0.109 0.005 0.168 0 1.523-1.191 2.768-2.693 2.854l-0.008 0zM11.026 20.163c-1.511-0.099-2.699-1.349-2.699-2.877 0-0.051 0.001-0.102 0.004-0.153l-0 0.007c-0.003-0.048-0.005-0.104-0.005-0.161 0-1.525 1.19-2.771 2.692-2.862l0.008-0c1.509 0.082 2.701 1.325 2.701 2.847 0 0.062-0.002 0.123-0.006 0.184l0-0.008c0.003 0.048 0.005 0.104 0.005 0.161 0 1.525-1.19 2.771-2.692 2.862l-0.008 0zM26.393 6.465c-1.763-0.832-3.811-1.49-5.955-1.871l-0.149-0.022c-0.005-0.001-0.011-0.002-0.017-0.002-0.035 0-0.065 0.019-0.081 0.047l-0 0c-0.234 0.411-0.488 0.924-0.717 1.45l-0.043 0.111c-1.030-0.165-2.218-0.259-3.428-0.259s-2.398 0.094-3.557 0.275l0.129-0.017c-0.27-0.63-0.528-1.142-0.813-1.638l0.041 0.077c-0.017-0.029-0.048-0.047-0.083-0.047-0.005 0-0.011 0-0.016 0.001l0.001-0c-2.293 0.403-4.342 1.060-6.256 1.957l0.151-0.064c-0.017 0.007-0.031 0.019-0.040 0.034l-0 0c-2.854 4.041-4.562 9.069-4.562 14.496 0 0.907 0.048 1.802 0.141 2.684l-0.009-0.11c0.003 0.029 0.018 0.053 0.039 0.070l0 0c2.14 1.601 4.628 2.891 7.313 3.738l0.176 0.048c0.008 0.003 0.018 0.004 0.028 0.004 0.032 0 0.060-0.015 0.077-0.038l0-0c0.535-0.72 1.044-1.536 1.485-2.392l0.047-0.1c0.006-0.012 0.010-0.027 0.010-0.043 0-0.041-0.026-0.075-0.062-0.089l-0.001-0c-0.912-0.352-1.683-0.727-2.417-1.157l0.077 0.042c-0.029-0.017-0.048-0.048-0.048-0.083 0-0.031 0.015-0.059 0.038-0.076l0-0c0.157-0.118 0.315-0.24 0.465-0.364 0.016-0.013 0.037-0.021 0.059-0.021 0.014 0 0.027 0.003 0.038 0.008l-0.001-0c2.208 1.061 4.8 1.681 7.536 1.681s5.329-0.62 7.643-1.727l-0.107 0.046c0.012-0.006 0.025-0.009 0.040-0.009 0.022 0 0.043 0.008 0.059 0.021l-0-0c0.15 0.124 0.307 0.248 0.466 0.365 0.023 0.018 0.038 0.046 0.038 0.077 0 0.035-0.019 0.065-0.046 0.082l-0 0c-0.661 0.395-1.432 0.769-2.235 1.078l-0.105 0.036c-0.036 0.014-0.062 0.049-0.062 0.089 0 0.016 0.004 0.031 0.011 0.044l-0-0.001c0.501 0.96 1.009 1.775 1.571 2.548l-0.040-0.057c0.017 0.024 0.046 0.040 0.077 0.040 0.010 0 0.020-0.002 0.029-0.004l-0.001 0c2.865-0.892 5.358-2.182 7.566-3.832l-0.065 0.047c0.022-0.016 0.036-0.041 0.039-0.069l0-0c0.087-0.784 0.136-1.694 0.136-2.615 0-5.415-1.712-10.43-4.623-14.534l0.052 0.078c-0.008-0.016-0.022-0.029-0.038-0.036l-0-0z"
|
||||
/>
|
||||
</svg>
|
||||
</template>
|
||||
@@ -0,0 +1,19 @@
|
||||
<template>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
>
|
||||
<line x1="6" y1="11" x2="10" y2="11" />
|
||||
<line x1="8" y1="9" x2="8" y2="13" />
|
||||
<line x1="15" y1="12" x2="15.01" y2="12" />
|
||||
<line x1="18" y1="10" x2="18.01" y2="10" />
|
||||
<path
|
||||
d="M17.32 5H6.68a4 4 0 00-3.978 3.59c-.006.052-.01.101-.017.152C2.604 9.416 2 14.456 2 16a3 3 0 003 3c1 0 1.5-.5 2-1l1.414-1.414A2 2 0 019.828 16h4.344a2 2 0 011.414.586L17 18c.5.5 1 1 2 1a3 3 0 003-3c0-1.545-.604-6.584-.685-7.258-.007-.05-.011-.1-.017-.151A4 4 0 0017.32 5z"
|
||||
/>
|
||||
</svg>
|
||||
</template>
|
||||
@@ -0,0 +1,29 @@
|
||||
<template>
|
||||
<svg
|
||||
viewBox="0 0 20 20"
|
||||
version="1.1"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
>
|
||||
<g
|
||||
id="Page-1"
|
||||
stroke="none"
|
||||
stroke-width="1"
|
||||
fill="none"
|
||||
fill-rule="evenodd"
|
||||
>
|
||||
<g
|
||||
id="Dribbble-Light-Preview"
|
||||
transform="translate(-140.000000, -7559.000000)"
|
||||
fill="currentColor"
|
||||
>
|
||||
<g id="icons" transform="translate(56.000000, 160.000000)">
|
||||
<path
|
||||
id="github-[#142]"
|
||||
d="M94,7399 C99.523,7399 104,7403.59 104,7409.253 C104,7413.782 101.138,7417.624 97.167,7418.981 C96.66,7419.082 96.48,7418.762 96.48,7418.489 C96.48,7418.151 96.492,7417.047 96.492,7415.675 C96.492,7414.719 96.172,7414.095 95.813,7413.777 C98.04,7413.523 100.38,7412.656 100.38,7408.718 C100.38,7407.598 99.992,7406.684 99.35,7405.966 C99.454,7405.707 99.797,7404.664 99.252,7403.252 C99.252,7403.252 98.414,7402.977 96.505,7404.303 C95.706,7404.076 94.85,7403.962 94,7403.958 C93.15,7403.962 92.295,7404.076 91.497,7404.303 C89.586,7402.977 88.746,7403.252 88.746,7403.252 C88.203,7404.664 88.546,7405.707 88.649,7405.966 C88.01,7406.684 87.619,7407.598 87.619,7408.718 C87.619,7412.646 89.954,7413.526 92.175,7413.785 C91.889,7414.041 91.63,7414.493 91.54,7415.156 C90.97,7415.418 89.522,7415.871 88.63,7414.304 C88.63,7414.304 88.101,7413.319 87.097,7413.247 C87.097,7413.247 86.122,7413.234 87.029,7413.87 C87.029,7413.87 87.684,7414.185 88.139,7415.37 C88.139,7415.37 88.726,7417.2 91.508,7416.58 C91.513,7417.437 91.522,7418.245 91.522,7418.489 C91.522,7418.76 91.338,7419.077 90.839,7418.982 C86.865,7417.627 84,7413.783 84,7409.253 C84,7403.59 88.478,7399 94,7399"
|
||||
/>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
</template>
|
||||
@@ -0,0 +1,10 @@
|
||||
<template>
|
||||
<svg viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
clip-rule="evenodd"
|
||||
d="M4.53918 2.40715C4.82145 1.0075 6.06066 0 7.49996 0C8.93926 0 10.1785 1.0075 10.4607 2.40715L10.798 4.07944C10.9743 4.9539 11.3217 5.78562 11.8205 6.52763L12.4009 7.39103C12.7631 7.92978 12.9999 8.5385 13.0979 9.17323C13.6747 9.22167 14.1803 9.58851 14.398 10.1283L14.8897 11.3474C15.1376 11.962 14.9583 12.665 14.4455 13.0887L12.5614 14.6458C12.0128 15.0992 11.2219 15.1193 10.6506 14.6944L9.89192 14.1301C9.88189 14.1227 9.87197 14.1151 9.86216 14.1074C9.48973 14.2075 9.09793 14.261 8.69355 14.261H6.30637C5.90201 14.261 5.51023 14.2076 5.13782 14.1074C5.12802 14.1151 5.11811 14.1227 5.10808 14.1301L4.34942 14.6944C3.77811 15.1193 2.98725 15.0992 2.43863 14.6458L0.55446 13.0887C0.0417175 12.665 -0.1376 11.962 0.110281 11.3474L0.602025 10.1283C0.819715 9.58854 1.32527 9.2217 1.90198 9.17324C2 8.5385 2.2368 7.92978 2.59897 7.39103L3.17938 6.52763C3.67818 5.78562 4.02557 4.9539 4.20193 4.07944L4.53918 2.40715ZM10.8445 9.47585C10.6345 9.63293 10.4642 9.84382 10.3561 10.0938L9.58799 11.8713C9.20026 12.0979 8.75209 12.2237 8.28465 12.2237H6.7153C6.24789 12.2237 5.79975 12.0979 5.41203 11.8714L4.64386 10.0938C4.53581 9.8438 4.36552 9.6329 4.15546 9.47582C4.18121 9.15355 4.2689 8.83503 4.41853 8.53826L5.67678 6.04259L5.68433 6.05007C6.68715 7.04458 8.31304 7.04458 9.31585 6.05007L9.32324 6.04274L10.5814 8.53825C10.7311 8.83504 10.8187 9.15357 10.8445 9.47585ZM9.04068 4.26906V3.05592H8.01353V3.85713C8.23151 3.90123 8.44506 3.97371 8.64848 4.07458L9.04068 4.26906ZM6.98638 3.85718V3.05592H5.95923V4.26919L6.3517 4.07458C6.55504 3.97375 6.7685 3.90129 6.98638 3.85718ZM2.03255 10.1864C1.82255 10.1864 1.6337 10.3132 1.55571 10.5066L1.06397 11.7257C0.981339 11.9306 1.04111 12.1649 1.21203 12.3062L3.0962 13.8633C3.27907 14.0144 3.54269 14.0211 3.73313 13.8795L4.49179 13.3152C4.6813 13.1743 4.74901 12.923 4.6557 12.7071L3.69976 10.4951C3.61884 10.3078 3.43316 10.1864 3.22771 10.1864H2.03255ZM13.4443 10.5066C13.3663 10.3132 13.1775 10.1864 12.9674 10.1864H11.7723C11.5668 10.1864 11.3812 10.3078 11.3002 10.4951L10.3443 12.7071C10.251 12.923 10.3187 13.1743 10.5082 13.3152L11.2669 13.8795C11.4573 14.0211 11.7209 14.0144 11.9038 13.8633L13.788 12.3062C13.9589 12.1649 14.0187 11.9306 13.936 11.7257L13.4443 10.5066ZM6.81106 4.98568C7.24481 4.7706 7.75537 4.7706 8.18912 4.98568L8.68739 5.23275L8.58955 5.32978C7.98786 5.92649 7.01232 5.92649 6.41063 5.32978L6.31279 5.23275L6.81106 4.98568Z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
</svg>
|
||||
</template>
|
||||
@@ -0,0 +1,13 @@
|
||||
<template>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xml:space="preserve"
|
||||
viewBox="0 0 814 1000"
|
||||
>
|
||||
<path
|
||||
stroke="currentColor"
|
||||
fill="currentColor"
|
||||
d="M788.1 340.9c-5.8 4.5-108.2 62.2-108.2 190.5 0 148.4 130.3 200.9 134.2 202.2-.6 3.2-20.7 71.9-68.7 141.9-42.8 61.6-87.5 123.1-155.5 123.1s-85.5-39.5-164-39.5c-76.5 0-103.7 40.8-165.9 40.8s-105.6-57-155.5-127C46.7 790.7 0 663 0 541.8c0-194.4 126.4-297.5 250.8-297.5 66.1 0 121.2 43.4 162.7 43.4 39.5 0 101.1-46 176.3-46 28.5 0 130.9 2.6 198.3 99.2zm-234-181.5c31.1-36.9 53.1-88.1 53.1-139.3 0-7.1-.6-14.3-1.9-20.1-50.6 1.9-110.8 33.7-147.1 75.8-28.5 32.4-55.1 83.6-55.1 135.5 0 7.8 1.3 15.6 1.9 18.1 3.2.6 8.4 1.3 13.6 1.3 45.4 0 102.5-30.4 135.5-71.3z"
|
||||
/>
|
||||
</svg>
|
||||
</template>
|
||||
@@ -0,0 +1,8 @@
|
||||
<template>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
|
||||
<path
|
||||
fill="currentColor"
|
||||
d="M9.41 20H6.5c-1.5 0-2.82-.5-3.89-1.57C1.54 17.38 1 16.09 1 14.58q0-1.95 1.17-3.48a5.25 5.25 0 0 1 3.08-1.95c.42-1.53 1.25-2.77 2.5-3.72C9 4.5 10.42 4 12 4c1.95 0 3.61.68 4.96 2.04C18.32 7.39 19 9.05 19 11c1.15.13 2.11.63 2.86 1.5c.64.73 1 1.56 1.1 2.5H18a5.01 5.01 0 0 0-4-2c-2.8 0-5 2.2-5 5c0 .72.15 1.39.41 2M23 17v2h-2v2h-2v-2h-2.2c-.4 1.2-1.5 2-2.8 2c-1.7 0-3-1.3-3-3s1.3-3 3-3c1.3 0 2.4.8 2.8 2zm-8 1c0-.5-.4-1-1-1s-1 .5-1 1s.4 1 1 1s1-.5 1-1"
|
||||
/>
|
||||
</svg>
|
||||
</template>
|
||||
@@ -0,0 +1,11 @@
|
||||
<template>
|
||||
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
d="M15 9H15.01M15 15C18.3137 15 21 12.3137 21 9C21 5.68629 18.3137 3 15 3C11.6863 3 9 5.68629 9 9C9 9.27368 9.01832 9.54308 9.05381 9.80704C9.11218 10.2412 9.14136 10.4583 9.12172 10.5956C9.10125 10.7387 9.0752 10.8157 9.00469 10.9419C8.937 11.063 8.81771 11.1823 8.57913 11.4209L3.46863 16.5314C3.29568 16.7043 3.2092 16.7908 3.14736 16.8917C3.09253 16.9812 3.05213 17.0787 3.02763 17.1808C3 17.2959 3 17.4182 3 17.6627V19.4C3 19.9601 3 20.2401 3.10899 20.454C3.20487 20.6422 3.35785 20.7951 3.54601 20.891C3.75992 21 4.03995 21 4.6 21H6.33726C6.58185 21 6.70414 21 6.81923 20.9724C6.92127 20.9479 7.01881 20.9075 7.10828 20.8526C7.2092 20.7908 7.29568 20.7043 7.46863 20.5314L12.5791 15.4209C12.8177 15.1823 12.937 15.063 13.0581 14.9953C13.1843 14.9248 13.2613 14.8987 13.4044 14.8783C13.5417 14.8586 13.7588 14.8878 14.193 14.9462C14.4569 14.9817 14.7263 15 15 15Z"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
</template>
|
||||
@@ -0,0 +1,12 @@
|
||||
<template>
|
||||
<svg
|
||||
fill="currentColor"
|
||||
viewBox="0 0 1920 1920"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M1863.53 1016.437c31.171 0 56.47 25.299 56.47 56.47v790.589c0 16.376-7.115 31.849-19.313 42.465-10.39 9.149-23.605 14.005-37.158 14.005-2.484 0-5.082-.113-7.567-.452l-903.53-123.331c-28.008-3.84-48.903-27.784-48.903-56.02v-667.256c0-31.171 25.3-56.47 56.471-56.47Zm-1129.412 0c31.171 0 56.47 25.299 56.47 56.47v634.504c0 16.376-7.115 31.85-19.426 42.579-10.39 9.035-23.491 13.891-37.044 13.891-2.485 0-5.196-.113-7.68-.564L48.79 1669.35C20.78 1665.51 0 1641.68 0 1613.444v-540.537c0-31.171 25.299-56.47 56.47-56.47Zm-7.726-859.855c16.151-2.372 32.415 2.597 44.725 13.327 12.424 10.73 19.426 26.315 19.426 42.579V846.99c0 31.285-25.186 56.47-56.47 56.47H56.424c-31.171 0-56.47-25.185-56.47-56.47V306.455c0-28.123 20.781-52.066 48.79-55.906ZM1855.974.474c16.15-2.033 32.414 2.71 44.724 13.44 12.198 10.73 19.313 26.203 19.313 42.466v790.588c0 31.285-25.299 56.471-56.47 56.471H960.01c-31.171 0-56.47-25.186-56.47-56.47V179.711c0-28.235 20.78-52.066 48.903-55.906Z"
|
||||
fill-rule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
</template>
|
||||
@@ -0,0 +1,27 @@
|
||||
<template>
|
||||
<div
|
||||
class="relative group/iconupload rounded-xl overflow-hidden w-20 mx-auto"
|
||||
>
|
||||
<img v-if="objectId" :src="useObject(objectId)" :alt="imageAlt" />
|
||||
<ArrowUpTrayIcon v-else />
|
||||
<button
|
||||
type="button"
|
||||
class="rounded-xl transition duration-200 absolute inset-0 opacity-0 group-hover/iconupload:opacity-100 focus-visible/iconupload:opacity-100 cursor-pointer bg-zinc-900/80 text-zinc-100 flex flex-col items-center justify-center text-center text-xs font-semibold ring-1 ring-inset ring-zinc-800 px-2"
|
||||
@click="openModal"
|
||||
>
|
||||
<ArrowUpTrayIcon class="size-5" />
|
||||
<span>{{ hoverText }}</span>
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ArrowUpTrayIcon } from "@heroicons/vue/24/solid";
|
||||
|
||||
const { objectId, openModal, hoverText, imageAlt } = defineProps<{
|
||||
objectId: string | null;
|
||||
openModal: () => void;
|
||||
hoverText: string;
|
||||
imageAlt: string;
|
||||
}>();
|
||||
</script>
|
||||
@@ -0,0 +1,316 @@
|
||||
<template>
|
||||
<div class="w-full">
|
||||
<div v-if="needsName" class="mb-2">
|
||||
<div
|
||||
class="flex w-full rounded-md shadow-sm bg-zinc-950 ring-1 ring-inset ring-zinc-800 focus-within:ring-2 focus-within:ring-inset focus-within:ring-blue-600"
|
||||
>
|
||||
<input
|
||||
id="startup"
|
||||
v-model="launchConfiguration.name"
|
||||
type="text"
|
||||
name="startup"
|
||||
class="block flex-1 border-0 py-1.5 px-3 bg-transparent text-zinc-100 placeholder:text-zinc-400 focus:ring-0 sm:text-sm sm:leading-6"
|
||||
placeholder="Launch name"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-2">
|
||||
<div
|
||||
class="flex w-full rounded-md shadow-sm bg-zinc-950 ring-1 ring-inset ring-zinc-800 focus-within:ring-2 focus-within:ring-inset focus-within:ring-blue-600"
|
||||
>
|
||||
<span
|
||||
class="flex select-none items-center gap-x-0.5 pl-3 text-zinc-500 sm:text-sm"
|
||||
>
|
||||
<div class="relative">
|
||||
<InformationCircleIcon class="peer size-4" />
|
||||
<div
|
||||
class="z-50 w-64 transition duration-100 opacity-0 shadow peer-hover:opacity-100 absolute left-0 p-2 bg-zinc-900 rounded text-xs text-zinc-300"
|
||||
>
|
||||
{{ $t("library.admin.launchRow.currentDirHint") }}
|
||||
</div>
|
||||
</div>
|
||||
{{ $t("library.admin.import.version.installDir") }}
|
||||
</span>
|
||||
<Combobox
|
||||
as="div"
|
||||
:value="launchConfiguration.launch"
|
||||
nullable
|
||||
class="w-full"
|
||||
@update:model-value="(v) => updateLaunchCommand(v)"
|
||||
>
|
||||
<div class="relative">
|
||||
<ComboboxInput
|
||||
class="block flex-1 border-0 py-1.5 pl-1 w-full bg-transparent text-zinc-100 placeholder:text-zinc-400 focus:ring-0 sm:text-sm sm:leading-6"
|
||||
:placeholder="
|
||||
$t('library.admin.import.version.launchPlaceholder')
|
||||
"
|
||||
@change="launchProcessQuery = $event.target.value"
|
||||
@blur="launchProcessQuery = ''"
|
||||
/>
|
||||
<ComboboxButton
|
||||
v-if="launchFilteredVersionGuesses?.length ?? 0 > 0"
|
||||
class="absolute inset-y-0 right-0 flex items-center rounded-r-md px-2 focus:outline-none"
|
||||
>
|
||||
<ChevronUpDownIcon
|
||||
class="size-5 text-gray-400"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
</ComboboxButton>
|
||||
|
||||
<ComboboxOptions
|
||||
class="absolute z-10 mt-1 max-h-60 w-full overflow-auto rounded-md bg-zinc-900 py-1 text-base shadow-lg ring-1 ring-white/5 focus:outline-none sm:text-sm"
|
||||
>
|
||||
<ComboboxOption
|
||||
v-for="guess in launchFilteredVersionGuesses"
|
||||
:key="guess.filename"
|
||||
v-slot="{ active, selected }"
|
||||
:value="guess.filename"
|
||||
as="template"
|
||||
>
|
||||
<li
|
||||
:class="[
|
||||
'relative cursor-default select-none py-2 pl-3 pr-9',
|
||||
active
|
||||
? 'bg-blue-600 text-white outline-none'
|
||||
: 'text-zinc-100',
|
||||
]"
|
||||
>
|
||||
<span
|
||||
:class="[
|
||||
'inline-flex items-center gap-x-2 block truncate',
|
||||
selected && 'font-semibold',
|
||||
]"
|
||||
>
|
||||
{{ guess.filename }}
|
||||
<component
|
||||
:is="PLATFORM_ICONS[guess.platform]"
|
||||
class="size-5"
|
||||
/>
|
||||
<img
|
||||
v-if="guess.type === 'emulator'"
|
||||
:src="useObject(guess.icon)"
|
||||
class="size-5"
|
||||
/>
|
||||
</span>
|
||||
|
||||
<span
|
||||
v-if="selected"
|
||||
:class="[
|
||||
'absolute inset-y-0 right-0 flex items-center pr-4',
|
||||
active ? 'text-white' : 'text-blue-600',
|
||||
]"
|
||||
>
|
||||
<CheckIcon class="size-5" aria-hidden="true" />
|
||||
</span>
|
||||
</li>
|
||||
</ComboboxOption>
|
||||
<ComboboxOption
|
||||
v-if="
|
||||
launchProcessQuery &&
|
||||
launchConfiguration.launch !== launchProcessQuery
|
||||
"
|
||||
v-slot="{ active, selected }"
|
||||
:value="launchProcessQuery"
|
||||
>
|
||||
<li
|
||||
:class="[
|
||||
'relative cursor-default select-none py-2 pl-3 pr-9',
|
||||
active
|
||||
? 'bg-blue-600 text-white outline-none'
|
||||
: 'text-zinc-100',
|
||||
]"
|
||||
>
|
||||
<span
|
||||
:class="['block truncate', selected && 'font-semibold']"
|
||||
>
|
||||
{{ launchProcessQuery }}
|
||||
</span>
|
||||
|
||||
<span
|
||||
v-if="selected"
|
||||
:class="[
|
||||
'absolute inset-y-0 right-0 flex items-center pr-4',
|
||||
active ? 'text-white' : 'text-blue-600',
|
||||
]"
|
||||
>
|
||||
<CheckIcon class="size-5" aria-hidden="true" />
|
||||
</span>
|
||||
</li>
|
||||
</ComboboxOption>
|
||||
</ComboboxOptions>
|
||||
</div>
|
||||
</Combobox>
|
||||
</div>
|
||||
<div
|
||||
v-if="props.type && props.type === 'Emulator'"
|
||||
class="ml-1 mt-2 rounded-lg bg-blue-900/10 p-1 outline outline-blue-900"
|
||||
>
|
||||
<div class="flex items-center">
|
||||
<div class="shrink-0">
|
||||
<InformationCircleIcon
|
||||
class="size-5 text-blue-500"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
</div>
|
||||
<div class="ml-2 inline-flex items-center">
|
||||
<p class="text-sm text-blue-200">
|
||||
<i18n-t
|
||||
keypath="library.admin.launchRow.emulatorHint"
|
||||
tag="span"
|
||||
scope="global"
|
||||
>
|
||||
<template #rom>
|
||||
<span
|
||||
class="font-mono bg-zinc-950 text-zinc-100 py-1 px-0.5 rounded-xl"
|
||||
>{{
|
||||
// eslint-disable-next-line @intlify/vue-i18n/no-raw-text
|
||||
"{rom}"
|
||||
}}</span
|
||||
>
|
||||
</template>
|
||||
</i18n-t>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<SelectorPlatform
|
||||
:model-value="launchConfiguration.platform"
|
||||
class="mb-2"
|
||||
@update:model-value="updatePlatform"
|
||||
>
|
||||
{{ $t("library.admin.import.version.platform") }}
|
||||
</SelectorPlatform>
|
||||
<div v-if="props.type && props.type === 'Game' && props.allowEmulator">
|
||||
<h1 class="block text-sm font-medium leading-6 text-zinc-100">
|
||||
{{ $t("library.admin.launchRow.emulatorTitle") }}
|
||||
</h1>
|
||||
<div class="relative mt-2 space-x-1 inline-flex items-center w-full">
|
||||
<EmulatorWidget v-if="emulator" :emulator="emulator" />
|
||||
<div
|
||||
v-else
|
||||
class="font-bold uppercase font-display text-zinc-500 text-sm"
|
||||
>
|
||||
{{ $t("library.admin.launchRow.noEmulatorSelected") }}
|
||||
</div>
|
||||
<div class="grow" />
|
||||
<LoadingButton :loading="false" @click="selectLaunchOpen = true">{{
|
||||
$t("library.admin.launchRow.emulatorSelect")
|
||||
}}</LoadingButton>
|
||||
<button
|
||||
:disabled="!emulator"
|
||||
class="transition rounded p-2 bg-zinc-900/30 group hover:enabled:bg-red-600/10 text-zinc-400 hover:enabled:text-red-600 disabled:bg-zinc-900/80 disabled:text-zinc-700"
|
||||
@click="() => (emulator = undefined)"
|
||||
>
|
||||
<TrashIcon class="transition size-5" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="props.type && props.type === 'Emulator'">
|
||||
<p class="block text-sm font-medium leading-6 text-zinc-100">
|
||||
{{ $t("library.admin.launchRow.autosuggestHint") }}
|
||||
</p>
|
||||
<SelectorFileExtension
|
||||
v-model="launchConfiguration.suggestions!"
|
||||
class="mt-2"
|
||||
/>
|
||||
</div>
|
||||
<ModalSelectLaunch
|
||||
v-model="selectLaunchOpen"
|
||||
class="-mt-2"
|
||||
:filter-platform="launchConfiguration.platform"
|
||||
@select="(v) => (emulator = v)"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import {
|
||||
Combobox,
|
||||
ComboboxButton,
|
||||
ComboboxInput,
|
||||
ComboboxOption,
|
||||
ComboboxOptions,
|
||||
} from "@headlessui/vue";
|
||||
import { CheckIcon, ChevronUpDownIcon } from "@heroicons/vue/20/solid";
|
||||
import { InformationCircleIcon, TrashIcon } from "@heroicons/vue/24/outline";
|
||||
import type { EmulatorLaunchObject } from "~/composables/frontend";
|
||||
import type { GameType, Platform } from "~/prisma/client/enums";
|
||||
|
||||
import type { ImportVersion } from "~/server/api/v1/admin/import/version/index.post";
|
||||
import type { VersionGuess } from "~/server/internal/library";
|
||||
|
||||
const launchProcessQuery = ref("");
|
||||
|
||||
const launchConfiguration = defineModel<
|
||||
Omit<(typeof ImportVersion.infer)["launches"][number], "name"> & {
|
||||
name?: string;
|
||||
}
|
||||
>({ required: true });
|
||||
const _emulatorMetadata = ref<EmulatorLaunchObject | undefined>(undefined);
|
||||
const emulator = computed({
|
||||
get() {
|
||||
return _emulatorMetadata.value;
|
||||
},
|
||||
set(v) {
|
||||
_emulatorMetadata.value = v;
|
||||
if (v) {
|
||||
launchConfiguration.value.emulatorId = v.launchId;
|
||||
} else {
|
||||
launchConfiguration.value.emulatorId = undefined;
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
function updatePlatform(v: Platform | undefined) {
|
||||
if (!v) return;
|
||||
launchConfiguration.value.platform = v;
|
||||
if (emulator.value) {
|
||||
if (emulator.value.platform !== v) {
|
||||
emulator.value = undefined;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const props = defineProps<{
|
||||
versionGuesses: Array<VersionGuess> | undefined;
|
||||
needsName: boolean;
|
||||
allowEmulator?: boolean;
|
||||
type?: GameType;
|
||||
}>();
|
||||
|
||||
if (props.type && props.type === "Emulator")
|
||||
launchConfiguration.value.suggestions ??= [];
|
||||
|
||||
const selectLaunchOpen = ref(false);
|
||||
|
||||
const launchFilteredVersionGuesses = computed(() =>
|
||||
props.versionGuesses?.filter((e) =>
|
||||
e.filename.toLowerCase().includes(launchProcessQuery.value.toLowerCase()),
|
||||
),
|
||||
);
|
||||
|
||||
function updateLaunchCommand(command: string) {
|
||||
launchConfiguration.value.launch = command;
|
||||
if (launchConfiguration.value.platform === undefined) {
|
||||
const autosetGuess = props.versionGuesses?.find(
|
||||
(v) => v.filename == command,
|
||||
);
|
||||
if (autosetGuess) {
|
||||
if (autosetGuess.type === "platform") {
|
||||
launchConfiguration.value.platform = autosetGuess.platform;
|
||||
} else if (autosetGuess.type === "emulator") {
|
||||
emulator.value = {
|
||||
launchId: autosetGuess.emulatorId,
|
||||
gameName: autosetGuess.gameName,
|
||||
gameIcon: autosetGuess.icon,
|
||||
versionName: autosetGuess.launchName,
|
||||
launchName: autosetGuess.launchName,
|
||||
platform: autosetGuess.platform,
|
||||
} satisfies EmulatorLaunchObject;
|
||||
launchConfiguration.value.platform = autosetGuess.platform;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,26 @@
|
||||
<template>
|
||||
<span class="text-xs font-mono text-zinc-400 inline-flex items-top gap-x-2"
|
||||
><span v-if="!short" class="text-zinc-500">{{ log.time }}</span>
|
||||
<span
|
||||
:class="[
|
||||
colours[log.level] || 'text-green-400',
|
||||
'uppercase font-display font-semibold',
|
||||
]"
|
||||
>{{ log.level }}</span
|
||||
>
|
||||
<span v-if="log.prefix" class="text-zinc-200"> {{ log.prefix }}</span>
|
||||
<pre :class="[short ? 'line-clamp-1' : '', 'mt-[1px]']">{{ log.msg }}</pre>
|
||||
</span>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import type { TaskLog } from "~/server/internal/tasks";
|
||||
|
||||
defineProps<{ log: typeof TaskLog.infer; short?: boolean }>();
|
||||
|
||||
const colours: { [key: string]: string } = {
|
||||
info: "text-blue-400",
|
||||
warn: "text-yellow-400",
|
||||
error: "text-red-400",
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,28 @@
|
||||
<template>
|
||||
<TileWithLink>
|
||||
<div class="h-full flex gap-4">
|
||||
<div class="flex-1 my-auto">
|
||||
<slot name="icon" />
|
||||
</div>
|
||||
<div
|
||||
class="md:flex-8 flex-6 lg:flex-2 my-auto text-center flex md:flex-row-reverse lg:inline"
|
||||
>
|
||||
<div class="md:text-2xl text-3xl flex-1 font-bold self-center">
|
||||
{{ value }}
|
||||
</div>
|
||||
<div
|
||||
class="text-2xl xl:text-xs flex-1 md:flex-auto text-left md:text-center lg:text-center self-center"
|
||||
>
|
||||
{{ label }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</TileWithLink>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
const { label, value } = defineProps<{
|
||||
label: string;
|
||||
value: string | number;
|
||||
}>();
|
||||
</script>
|
||||
@@ -0,0 +1,171 @@
|
||||
<template>
|
||||
<ModalTemplate v-model="open">
|
||||
<template #default>
|
||||
<div>
|
||||
<DialogTitle as="h3" class="text-lg font-medium leading-6 text-white">
|
||||
{{ $t("library.admin.metadata.companies.addGame.title") }}
|
||||
</DialogTitle>
|
||||
<p class="mt-1 text-zinc-400 text-sm">
|
||||
{{ $t("library.admin.metadata.companies.addGame.description") }}
|
||||
</p>
|
||||
</div>
|
||||
<div class="mt-2">
|
||||
<form @submit.prevent="() => addGame()">
|
||||
<SelectorGame v-model="currentGame" :search="search" />
|
||||
<div class="mt-6 flex items-center justify-between gap-3">
|
||||
<label
|
||||
id="published-label"
|
||||
for="published"
|
||||
class="font-medium text-md text-zinc-100"
|
||||
>{{
|
||||
$t("library.admin.metadata.companies.addGame.publisher")
|
||||
}}</label
|
||||
>
|
||||
|
||||
<div
|
||||
class="group/published relative inline-flex w-11 shrink-0 rounded-full p-0.5 inset-ring outline-offset-2 transition-colors duration-200 ease-in-out has-focus-visible:outline-2 bg-white/5 inset-ring-white/10 outline-blue-500 has-checked:bg-blue-500"
|
||||
>
|
||||
<span
|
||||
class="size-5 rounded-full bg-white shadow-xs ring-1 ring-gray-900/5 transition-transform duration-200 ease-in-out group-has-checked/published:translate-x-5"
|
||||
/>
|
||||
<input
|
||||
id="published"
|
||||
v-model="published"
|
||||
type="checkbox"
|
||||
class="w-auto h-auto opacity-0 absolute inset-0 focus:outline-hidden"
|
||||
aria-labelledby="published-label"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-2 flex items-center justify-between gap-3">
|
||||
<label
|
||||
id="developer-label"
|
||||
for="developer"
|
||||
class="font-medium text-md text-zinc-100"
|
||||
>{{
|
||||
$t("library.admin.metadata.companies.addGame.developer")
|
||||
}}</label
|
||||
>
|
||||
|
||||
<div
|
||||
class="group/developer relative inline-flex w-11 shrink-0 rounded-full p-0.5 inset-ring outline-offset-2 transition-colors duration-200 ease-in-out has-focus-visible:outline-2 bg-white/5 inset-ring-white/10 outline-blue-500 has-checked:bg-blue-500"
|
||||
>
|
||||
<span
|
||||
class="size-5 rounded-full bg-white shadow-xs ring-1 ring-gray-900/5 transition-transform duration-200 ease-in-out group-has-checked/developer:translate-x-5"
|
||||
/>
|
||||
<input
|
||||
id="developer"
|
||||
v-model="developed"
|
||||
type="checkbox"
|
||||
class="w-auto h-auto opacity-0 absolute inset-0 focus:outline-hidden"
|
||||
aria-labelledby="developer-label"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<button class="hidden" type="submit" />
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div v-if="addError" class="mt-3 rounded-md bg-red-600/10 p-4">
|
||||
<div class="flex">
|
||||
<div class="flex-shrink-0">
|
||||
<XCircleIcon class="h-5 w-5 text-red-600" aria-hidden="true" />
|
||||
</div>
|
||||
<div class="ml-3">
|
||||
<h3 class="text-sm font-medium text-red-600">
|
||||
{{ addError }}
|
||||
</h3>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template #buttons="{ close }">
|
||||
<LoadingButton
|
||||
:loading="addGameLoading"
|
||||
:disabled="!(currentGame && (developed || published))"
|
||||
class="w-full sm:w-fit"
|
||||
@click="() => addGame()"
|
||||
>
|
||||
{{ $t("common.add") }}
|
||||
</LoadingButton>
|
||||
<button
|
||||
ref="cancelButtonRef"
|
||||
type="button"
|
||||
class="mt-3 inline-flex w-full justify-center rounded-md bg-zinc-800 px-3 py-2 text-sm font-semibold text-zinc-100 shadow-sm ring-1 ring-inset ring-zinc-800 hover:bg-zinc-900 sm:mt-0 sm:w-auto"
|
||||
@click="() => close()"
|
||||
>
|
||||
{{ $t("cancel") }}
|
||||
</button>
|
||||
</template>
|
||||
</ModalTemplate>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from "vue";
|
||||
import type { GameModel } from "~/prisma/client/models";
|
||||
import { DialogTitle } from "@headlessui/vue";
|
||||
import { FetchError } from "ofetch";
|
||||
import type { SerializeObject } from "nitropack";
|
||||
import { XCircleIcon } from "@heroicons/vue/24/solid";
|
||||
import type { GameMetadataSearchResult } from "~/server/internal/metadata/types";
|
||||
|
||||
const props = defineProps<{
|
||||
companyId: string;
|
||||
exclude?: string[];
|
||||
}>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
created: [
|
||||
game: SerializeObject<GameModel>,
|
||||
published: boolean,
|
||||
developed: boolean,
|
||||
];
|
||||
}>();
|
||||
|
||||
const { t } = useI18n();
|
||||
|
||||
const open = defineModel<boolean>({ required: true });
|
||||
|
||||
const currentGame = ref<GameMetadataSearchResult>();
|
||||
const developed = ref(false);
|
||||
const published = ref(false);
|
||||
const addGameLoading = ref(false);
|
||||
const addError = ref<string | undefined>(undefined);
|
||||
|
||||
async function addGame() {
|
||||
if (!currentGame.value) return;
|
||||
addGameLoading.value = true;
|
||||
|
||||
try {
|
||||
const game = await $dropFetch("/api/v1/admin/company/:id/game", {
|
||||
method: "POST",
|
||||
params: { id: props.companyId },
|
||||
body: {
|
||||
id: currentGame.value.id,
|
||||
developed: developed.value,
|
||||
published: published.value,
|
||||
},
|
||||
});
|
||||
emit("created", game, published.value, developed.value);
|
||||
} catch (e) {
|
||||
if (e instanceof FetchError) {
|
||||
addError.value = e.statusMessage ?? e.message ?? t("errors.unknown");
|
||||
} else {
|
||||
throw e;
|
||||
}
|
||||
} finally {
|
||||
currentGame.value = undefined;
|
||||
developed.value = false;
|
||||
published.value = false;
|
||||
addGameLoading.value = false;
|
||||
open.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
async function search(query: string) {
|
||||
return await $dropFetch("/api/v1/admin/search/game?type=Game", {
|
||||
query: { q: query },
|
||||
});
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,102 @@
|
||||
<template>
|
||||
<ModalTemplate v-model="open">
|
||||
<template #default>
|
||||
<div>
|
||||
<DialogTitle as="h3" class="text-lg font-medium leading-6 text-white">
|
||||
{{ $t("library.collection.create") }}
|
||||
</DialogTitle>
|
||||
<p class="mt-1 text-zinc-400 text-sm">
|
||||
{{ $t("library.collection.createDesc") }}
|
||||
</p>
|
||||
</div>
|
||||
<div class="mt-2">
|
||||
<form @submit.prevent="() => createCollection()">
|
||||
<input
|
||||
v-model="collectionName"
|
||||
type="text"
|
||||
:placeholder="$t('library.collection.namePlaceholder')"
|
||||
class="block w-full rounded-md border-0 bg-zinc-800 py-1.5 text-white shadow-sm ring-1 ring-inset ring-zinc-700 placeholder:text-zinc-400 focus:ring-2 focus:ring-inset focus:ring-blue-600 sm:text-sm sm:leading-6"
|
||||
/>
|
||||
<button class="hidden" type="submit" />
|
||||
</form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template #buttons="{ close }">
|
||||
<LoadingButton
|
||||
:loading="createCollectionLoading"
|
||||
:disabled="!collectionName"
|
||||
class="w-full sm:w-fit"
|
||||
@click="() => createCollection()"
|
||||
>
|
||||
{{ $t("common.create") }}
|
||||
</LoadingButton>
|
||||
<button
|
||||
ref="cancelButtonRef"
|
||||
type="button"
|
||||
class="mt-3 inline-flex w-full justify-center rounded-md bg-zinc-800 px-3 py-2 text-sm font-semibold text-zinc-100 shadow-sm ring-1 ring-inset ring-zinc-800 hover:bg-zinc-900 sm:mt-0 sm:w-auto"
|
||||
@click="() => close()"
|
||||
>
|
||||
{{ $t("cancel") }}
|
||||
</button>
|
||||
</template>
|
||||
</ModalTemplate>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from "vue";
|
||||
import { DialogTitle } from "@headlessui/vue";
|
||||
import type { CollectionEntryModel, GameModel } from "~/prisma/client/models";
|
||||
import type { SerializeObject } from "nitropack";
|
||||
|
||||
const props = defineProps<{
|
||||
gameId?: string;
|
||||
}>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
created: [collectionId: string];
|
||||
}>();
|
||||
|
||||
const open = defineModel<boolean>({ required: true });
|
||||
|
||||
const collectionName = ref("");
|
||||
const createCollectionLoading = ref(false);
|
||||
const collections = await useCollections();
|
||||
|
||||
async function createCollection() {
|
||||
if (!collectionName.value || createCollectionLoading.value) return;
|
||||
|
||||
try {
|
||||
createCollectionLoading.value = true;
|
||||
|
||||
// Create the collection
|
||||
const response = await $dropFetch("/api/v1/collection", {
|
||||
method: "POST",
|
||||
body: { name: collectionName.value },
|
||||
failTitle: "Failed to create collection",
|
||||
});
|
||||
|
||||
// Add the game if provided
|
||||
if (props.gameId) {
|
||||
const entry = await $dropFetch<
|
||||
CollectionEntryModel & { game: SerializeObject<GameModel> }
|
||||
>(`/api/v1/collection/${response.id}/entry`, {
|
||||
method: "POST",
|
||||
body: { id: props.gameId },
|
||||
failTitle: "Failed to add game to collection",
|
||||
});
|
||||
response.entries.push(entry);
|
||||
}
|
||||
|
||||
collections.value.push(response);
|
||||
|
||||
// Reset and emit
|
||||
collectionName.value = "";
|
||||
open.value = false;
|
||||
|
||||
emit("created", response.id);
|
||||
} finally {
|
||||
createCollectionLoading.value = false;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,148 @@
|
||||
<template>
|
||||
<ModalTemplate v-model="open">
|
||||
<template #default>
|
||||
<div>
|
||||
<h3 class="text-lg font-medium leading-6 text-white">
|
||||
{{ $t("library.admin.metadata.companies.modals.createTitle") }}
|
||||
</h3>
|
||||
<p class="mt-1 text-zinc-400 text-sm">
|
||||
{{ $t("library.admin.metadata.companies.modals.createDescription") }}
|
||||
</p>
|
||||
</div>
|
||||
<div class="mt-2">
|
||||
<form class="space-y-4" @submit.prevent="() => createCompany()">
|
||||
<div>
|
||||
<label
|
||||
for="name"
|
||||
class="block text-sm/6 font-medium text-zinc-100"
|
||||
>{{
|
||||
$t("library.admin.metadata.companies.modals.createFieldName")
|
||||
}}</label
|
||||
>
|
||||
<div class="mt-2">
|
||||
<input
|
||||
id="name"
|
||||
v-model="companyName"
|
||||
type="text"
|
||||
name="name"
|
||||
:placeholder="
|
||||
$t(
|
||||
'library.admin.metadata.companies.modals.createFieldNamePlaceholder',
|
||||
)
|
||||
"
|
||||
class="block w-full rounded-md bg-zinc-800 px-3 py-1.5 text-base text-zinc-100 outline outline-1 -outline-offset-1 outline-zinc-700 placeholder:text-zinc-400 focus:outline focus:outline-2 focus:-outline-offset-2 focus:outline-blue-600 sm:text-sm/6"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<label
|
||||
for="description"
|
||||
class="block text-sm/6 font-medium text-zinc-100"
|
||||
>{{
|
||||
$t(
|
||||
"library.admin.metadata.companies.modals.createFieldDescription",
|
||||
)
|
||||
}}</label
|
||||
>
|
||||
<div class="mt-2">
|
||||
<input
|
||||
id="description"
|
||||
v-model="companyDescription"
|
||||
type="text"
|
||||
name="description"
|
||||
:placeholder="
|
||||
$t(
|
||||
'library.admin.metadata.companies.modals.createFieldDescriptionPlaceholder',
|
||||
)
|
||||
"
|
||||
class="block w-full rounded-md bg-zinc-800 px-3 py-1.5 text-base text-zinc-100 outline outline-1 -outline-offset-1 outline-zinc-700 placeholder:text-zinc-400 focus:outline focus:outline-2 focus:-outline-offset-2 focus:outline-blue-600 sm:text-sm/6"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<label
|
||||
for="website"
|
||||
class="block text-sm/6 font-medium text-zinc-100"
|
||||
>{{
|
||||
$t("library.admin.metadata.companies.modals.createFieldWebsite")
|
||||
}}</label
|
||||
>
|
||||
<div class="mt-2">
|
||||
<input
|
||||
id="website"
|
||||
v-model="companyWebsite"
|
||||
type="text"
|
||||
name="website"
|
||||
:placeholder="
|
||||
$t(
|
||||
'library.admin.metadata.companies.modals.createFieldWebsitePlaceholder',
|
||||
)
|
||||
"
|
||||
class="block w-full rounded-md bg-zinc-800 px-3 py-1.5 text-base text-zinc-100 outline outline-1 -outline-offset-1 outline-zinc-700 placeholder:text-zinc-400 focus:outline focus:outline-2 focus:-outline-offset-2 focus:outline-blue-600 sm:text-sm/6"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button class="hidden" type="submit" />
|
||||
</form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template #buttons="{ close }">
|
||||
<LoadingButton
|
||||
:loading="loading"
|
||||
:disabled="!companyValid"
|
||||
class="w-full sm:w-fit"
|
||||
@click="() => createCompany()"
|
||||
>
|
||||
{{ $t("common.create") }}
|
||||
</LoadingButton>
|
||||
<button
|
||||
ref="cancelButtonRef"
|
||||
type="button"
|
||||
class="mt-3 inline-flex w-full justify-center rounded-md bg-zinc-800 px-3 py-2 text-sm font-semibold text-zinc-100 shadow-sm ring-1 ring-inset ring-zinc-800 hover:bg-zinc-900 sm:mt-0 sm:w-auto"
|
||||
@click="() => close()"
|
||||
>
|
||||
{{ $t("cancel") }}
|
||||
</button>
|
||||
</template>
|
||||
</ModalTemplate>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import type { CompanyModel } from "~/prisma/client/models";
|
||||
|
||||
const open = defineModel<boolean>({ required: true });
|
||||
|
||||
const emit = defineEmits<{
|
||||
created: [company: CompanyModel];
|
||||
}>();
|
||||
|
||||
const companyName = ref("");
|
||||
const companyDescription = ref("");
|
||||
const companyWebsite = ref("");
|
||||
|
||||
const loading = ref(false);
|
||||
const companyValid = computed(
|
||||
() => companyName.value && companyDescription.value,
|
||||
);
|
||||
async function createCompany() {
|
||||
loading.value = true;
|
||||
try {
|
||||
const newCompany = await $dropFetch("/api/v1/admin/company", {
|
||||
method: "POST",
|
||||
body: {
|
||||
name: companyName.value,
|
||||
description: companyDescription.value,
|
||||
website: companyWebsite.value,
|
||||
},
|
||||
failTitle: "Failed to create new company",
|
||||
});
|
||||
open.value = false;
|
||||
emit("created", newCompany);
|
||||
} finally {
|
||||
/* empty */
|
||||
}
|
||||
loading.value = false;
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,78 @@
|
||||
<template>
|
||||
<ModalTemplate v-model="open">
|
||||
<template #default>
|
||||
<div>
|
||||
<DialogTitle as="h3" class="text-lg font-medium leading-6 text-white">
|
||||
{{ $t("library.admin.metadata.tags.modal.title") }}
|
||||
</DialogTitle>
|
||||
<p class="mt-1 text-zinc-400 text-sm">
|
||||
{{ $t("library.admin.metadata.tags.modal.description") }}
|
||||
</p>
|
||||
</div>
|
||||
<div class="mt-2">
|
||||
<form @submit.prevent="() => createTag()">
|
||||
<input
|
||||
v-model="tagName"
|
||||
type="text"
|
||||
class="block w-full rounded-md border-0 bg-zinc-800 py-1.5 text-white shadow-sm ring-1 ring-inset ring-zinc-700 placeholder:text-zinc-400 focus:ring-2 focus:ring-inset focus:ring-blue-600 sm:text-sm sm:leading-6"
|
||||
/>
|
||||
<button class="hidden" type="submit" />
|
||||
</form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template #buttons="{ close }">
|
||||
<LoadingButton
|
||||
:loading="createTagLoading"
|
||||
:disabled="!tagName"
|
||||
class="w-full sm:w-fit"
|
||||
@click="() => createTag()"
|
||||
>
|
||||
{{ $t("common.create") }}
|
||||
</LoadingButton>
|
||||
<button
|
||||
ref="cancelButtonRef"
|
||||
type="button"
|
||||
class="mt-3 inline-flex w-full justify-center rounded-md bg-zinc-800 px-3 py-2 text-sm font-semibold text-zinc-100 shadow-sm ring-1 ring-inset ring-zinc-800 hover:bg-zinc-900 sm:mt-0 sm:w-auto"
|
||||
@click="() => close()"
|
||||
>
|
||||
{{ $t("cancel") }}
|
||||
</button>
|
||||
</template>
|
||||
</ModalTemplate>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from "vue";
|
||||
import { DialogTitle } from "@headlessui/vue";
|
||||
import type { GameTagModel } from "~/prisma/client/models";
|
||||
|
||||
const emit = defineEmits<{
|
||||
created: [tag: GameTagModel];
|
||||
}>();
|
||||
|
||||
const open = defineModel<boolean>({ required: true });
|
||||
|
||||
const tagName = ref("");
|
||||
const createTagLoading = ref(false);
|
||||
|
||||
async function createTag() {
|
||||
if (!tagName.value || createTagLoading.value) return;
|
||||
|
||||
createTagLoading.value = true;
|
||||
|
||||
// Create the collection
|
||||
const tag = await $dropFetch("/api/v1/admin/tags", {
|
||||
method: "POST",
|
||||
body: { name: tagName.value },
|
||||
failTitle: "Failed to create tag",
|
||||
});
|
||||
|
||||
// Reset and emit
|
||||
tagName.value = "";
|
||||
open.value = false;
|
||||
|
||||
emit("created", tag);
|
||||
createTagLoading.value = false;
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,267 @@
|
||||
<template>
|
||||
<ModalTemplate v-model="model" size-class="max-w-3xl">
|
||||
<template #default>
|
||||
<div class="space-y-5">
|
||||
<div>
|
||||
<label
|
||||
for="name"
|
||||
class="block text-sm font-medium leading-6 text-zinc-100"
|
||||
>{{ $t("account.token.name") }}</label
|
||||
>
|
||||
<p class="text-zinc-400 block text-xs font-medium leading-6">
|
||||
{{ $t("account.token.nameDesc") }}
|
||||
</p>
|
||||
<div class="mt-2">
|
||||
<input
|
||||
id="name"
|
||||
v-model="name"
|
||||
name="name"
|
||||
type="text"
|
||||
autocomplete="name"
|
||||
:placeholder="
|
||||
props.suggestedName ?? $t('account.token.namePlaceholder')
|
||||
"
|
||||
class="block w-full rounded-md border-0 py-1.5 px-3 bg-zinc-800 disabled:bg-zinc-900/80 text-zinc-100 disabled:text-zinc-400 shadow-sm ring-1 ring-inset ring-zinc-700 disabled:ring-zinc-800 placeholder:text-zinc-400 focus:ring-2 focus:ring-inset focus:ring-blue-600 sm:text-sm sm:leading-6"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Listbox v-model="expiryKey" as="div">
|
||||
<ListboxLabel class="block text-sm/6 font-medium text-zinc-100">{{
|
||||
$t("users.admin.simple.inviteExpiryLabel")
|
||||
}}</ListboxLabel>
|
||||
<div class="relative mt-2">
|
||||
<ListboxButton
|
||||
class="relative w-full cursor-default rounded-md bg-zinc-800 py-1.5 pl-3 pr-10 text-left text-zinc-100 shadow-sm ring-1 ring-inset ring-zinc-700 focus:outline-none focus:ring-2 focus:ring-blue-600 sm:text-sm/6"
|
||||
>
|
||||
<span class="block truncate">{{ expiryKey }}</span>
|
||||
<span
|
||||
class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2"
|
||||
>
|
||||
<ChevronUpDownIcon
|
||||
class="h-5 w-5 text-gray-400"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
</span>
|
||||
</ListboxButton>
|
||||
|
||||
<transition
|
||||
leave-active-class="transition ease-in duration-100"
|
||||
leave-from-class="opacity-100"
|
||||
leave-to-class="opacity-0"
|
||||
>
|
||||
<ListboxOptions
|
||||
class="absolute z-10 mt-1 max-h-60 w-full overflow-auto rounded-md bg-zinc-900 py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm"
|
||||
>
|
||||
<ListboxOption
|
||||
v-for="[label] in Object.entries(expiry)"
|
||||
:key="label"
|
||||
v-slot="{ active, selected }"
|
||||
as="template"
|
||||
:value="label"
|
||||
>
|
||||
<li
|
||||
:class="[
|
||||
active ? 'bg-blue-600 text-white' : 'text-zinc-300',
|
||||
'relative cursor-default select-none py-2 pl-3 pr-9',
|
||||
]"
|
||||
>
|
||||
<span
|
||||
:class="[
|
||||
selected
|
||||
? 'font-semibold text-zinc-100'
|
||||
: 'font-normal',
|
||||
'block truncate',
|
||||
]"
|
||||
>{{ label }}</span
|
||||
>
|
||||
|
||||
<span
|
||||
v-if="selected"
|
||||
:class="[
|
||||
active ? 'text-white' : 'text-blue-600',
|
||||
'absolute inset-y-0 right-0 flex items-center pr-4',
|
||||
]"
|
||||
>
|
||||
<CheckIcon class="h-5 w-5" aria-hidden="true" />
|
||||
</span>
|
||||
</li>
|
||||
</ListboxOption>
|
||||
</ListboxOptions>
|
||||
</transition>
|
||||
</div>
|
||||
</Listbox>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label
|
||||
for="name"
|
||||
class="block text-sm font-medium leading-6 text-zinc-100"
|
||||
>{{ $t("account.token.acls") }}</label
|
||||
>
|
||||
<p class="text-zinc-400 block text-xs font-medium leading-6">
|
||||
{{ $t("account.token.aclsDesc") }}
|
||||
</p>
|
||||
<fieldset class="divide-y divide-zinc-700">
|
||||
<div
|
||||
v-for="[sectionName, sectionAcls] in Object.entries(
|
||||
aclsBySection,
|
||||
)"
|
||||
:key="sectionName"
|
||||
class="grid lg:grid-cols-3 gap-1 py-3"
|
||||
>
|
||||
<div
|
||||
v-for="[acl, description] in Object.entries(sectionAcls)"
|
||||
:key="acl"
|
||||
class="flex gap-3"
|
||||
>
|
||||
<div class="flex h-6 shrink-0 items-center">
|
||||
<div class="group grid size-4 grid-cols-1">
|
||||
<input
|
||||
:id="`acl-${acl}`"
|
||||
v-model="currentACLs[acl]"
|
||||
aria-describedby="acl-description"
|
||||
:name="`acl-${acl}`"
|
||||
type="checkbox"
|
||||
class="col-start-1 row-start-1 appearance-none rounded-sm border checked:border-blue-600 checked:bg-blue-600 indeterminate:border-blue-600 indeterminate:bg-blue-600 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600 disabled:border-gray-300 disabled:bg-gray-100 disabled:checked:bg-gray-100 border-white/10 bg-white/5 dark:checked:border-blue-500 dark:checked:bg-blue-500 dark:indeterminate:border-blue-500 dark:indeterminate:bg-blue-500 dark:focus-visible:outline-blue-500 dark:disabled:border-white/5 dark:disabled:bg-white/10 dark:disabled:checked:bg-white/10 forced-colors:appearance-auto"
|
||||
/>
|
||||
<svg
|
||||
class="pointer-events-none col-start-1 row-start-1 size-3.5 self-center justify-self-center stroke-white group-has-disabled:stroke-white/25"
|
||||
viewBox="0 0 14 14"
|
||||
fill="none"
|
||||
>
|
||||
<path
|
||||
class="opacity-0 group-has-checked:opacity-100"
|
||||
d="M3 8L6 11L11 3.5"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
<path
|
||||
class="opacity-0 group-has-indeterminate:opacity-100"
|
||||
d="M3 7H11"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-sm/6">
|
||||
<label
|
||||
:for="`acl-${acl}`"
|
||||
class="font-display font-medium text-white"
|
||||
>{{ acl }}</label
|
||||
>
|
||||
{{ " " }}
|
||||
<span id="acl-description" class="text-xs text-zinc-400"
|
||||
><span class="sr-only">{{ acl }} </span
|
||||
>{{ description }}</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</fieldset>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template #buttons>
|
||||
<LoadingButton :loading="props.loading" @click="() => createToken()">
|
||||
{{ $t("common.create") }}
|
||||
</LoadingButton>
|
||||
<button
|
||||
class="inline-flex items-center rounded-md bg-zinc-800 px-3 py-2 text-sm font-semibold font-display text-white hover:bg-zinc-700"
|
||||
@click="() => cancel()"
|
||||
>
|
||||
{{ $t("cancel") }}
|
||||
</button>
|
||||
</template>
|
||||
</ModalTemplate>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import {
|
||||
Listbox,
|
||||
ListboxButton,
|
||||
ListboxLabel,
|
||||
ListboxOption,
|
||||
ListboxOptions,
|
||||
} from "@headlessui/vue";
|
||||
import { CheckIcon, ChevronUpDownIcon } from "@heroicons/vue/24/outline";
|
||||
import type { DurationLike } from "luxon";
|
||||
|
||||
// Reuse for both admin and user tokens
|
||||
|
||||
const model = defineModel<boolean>({ required: true });
|
||||
|
||||
const { t } = useI18n();
|
||||
|
||||
const props = defineProps<{
|
||||
acls: { [key: string]: string };
|
||||
loading?: boolean;
|
||||
suggestedAcls?: string[];
|
||||
suggestedName?: string;
|
||||
}>();
|
||||
|
||||
// Label to parameters to moment.js .add()
|
||||
const expiry: Record<string, DurationLike | undefined> = {
|
||||
[t("account.token.expiryMonth")]: {
|
||||
month: 1,
|
||||
},
|
||||
[t("account.token.expiry3Month")]: {
|
||||
month: 3,
|
||||
},
|
||||
[t("account.token.expiry6Month")]: {
|
||||
month: 6,
|
||||
},
|
||||
[t("account.token.expiryYear")]: {
|
||||
year: 1,
|
||||
},
|
||||
[t("account.token.expiry5Year")]: {
|
||||
year: 5,
|
||||
},
|
||||
[t("account.token.noExpiry")]: undefined,
|
||||
};
|
||||
const expiryKey = ref<keyof typeof expiry>(Object.keys(expiry)[0]); // Cast to any because we just know it's okay
|
||||
const name = ref(props.suggestedName ?? "");
|
||||
const currentACLs = ref<{ [key: string]: boolean }>(
|
||||
Object.fromEntries((props.suggestedAcls ?? []).map((v) => [v, true])),
|
||||
);
|
||||
|
||||
const aclsBySection = computed(() => {
|
||||
const sections: { [key: string]: { [key: string]: string } } = {};
|
||||
for (const [acl, description] of Object.entries(props.acls)) {
|
||||
const section = acl.split(":")[0];
|
||||
sections[section] ??= {};
|
||||
sections[section][acl] = description;
|
||||
}
|
||||
return sections;
|
||||
});
|
||||
|
||||
const emit = defineEmits<{
|
||||
create: [name: string, acls: string[], expiry: DurationLike | undefined];
|
||||
}>();
|
||||
|
||||
function createToken() {
|
||||
emit(
|
||||
"create",
|
||||
name.value,
|
||||
Object.entries(currentACLs.value)
|
||||
.filter(([_acl, enabled]) => enabled)
|
||||
.map(([acl, _enabled]) => acl),
|
||||
expiry[expiryKey.value],
|
||||
);
|
||||
}
|
||||
|
||||
function cancel() {
|
||||
model.value = false;
|
||||
}
|
||||
|
||||
watch(model, (c) => {
|
||||
if (!c) {
|
||||
name.value = "";
|
||||
currentACLs.value = {};
|
||||
}
|
||||
});
|
||||
</script>
|
||||
@@ -0,0 +1,80 @@
|
||||
<template>
|
||||
<ModalTemplate :model-value="!!collection">
|
||||
<template #default>
|
||||
<div>
|
||||
<DialogTitle
|
||||
as="h3"
|
||||
class="text-lg font-bold font-display text-zinc-100"
|
||||
>
|
||||
{{ $t("library.collection.delete") }}
|
||||
</DialogTitle>
|
||||
<p class="mt-1 text-sm text-zinc-400">
|
||||
{{ $t("common.deleteConfirm", [collection?.name]) }}
|
||||
</p>
|
||||
<p class="mt-2 text-sm font-bold text-red-500">
|
||||
{{ $t("common.cannotUndo") }}
|
||||
</p>
|
||||
</div>
|
||||
</template>
|
||||
<template #buttons>
|
||||
<LoadingButton
|
||||
:loading="deleteLoading"
|
||||
class="bg-red-600 text-white hover:bg-red-500"
|
||||
@click="() => deleteCollection()"
|
||||
>
|
||||
{{ $t("common.delete") }}
|
||||
</LoadingButton>
|
||||
<button
|
||||
class="inline-flex items-center rounded-md bg-zinc-800 px-3 py-2 text-sm font-semibold font-display text-white hover:bg-zinc-700"
|
||||
@click="() => (collection = undefined)"
|
||||
>
|
||||
{{ $t("cancel") }}
|
||||
</button>
|
||||
</template>
|
||||
</ModalTemplate>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import type { CollectionModel } from "~/prisma/client/models";
|
||||
import { DialogTitle } from "@headlessui/vue";
|
||||
|
||||
const collection = defineModel<CollectionModel | undefined>();
|
||||
const deleteLoading = ref(false);
|
||||
|
||||
const collections = await useCollections();
|
||||
const { t } = useI18n();
|
||||
|
||||
async function deleteCollection() {
|
||||
try {
|
||||
if (!collection.value) return;
|
||||
|
||||
deleteLoading.value = true;
|
||||
await $dropFetch(`/api/v1/collection/:id`, {
|
||||
method: "DELETE",
|
||||
params: {
|
||||
id: collection.value.id,
|
||||
},
|
||||
});
|
||||
const index = collections.value.findIndex(
|
||||
(e) => e.id == collection.value?.id,
|
||||
);
|
||||
collections.value.splice(index, 1);
|
||||
|
||||
collection.value = undefined;
|
||||
} catch (e) {
|
||||
createModal(
|
||||
ModalType.Notification,
|
||||
{
|
||||
title: t("errors.library.add.title"),
|
||||
description: t("errors.library.add.desc", [
|
||||
// @ts-expect-error attempt to display statusMessage on error
|
||||
e?.statusMessage ?? t("errors.unknown"),
|
||||
]),
|
||||
},
|
||||
(_, c) => c(),
|
||||
);
|
||||
} finally {
|
||||
deleteLoading.value = false;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,84 @@
|
||||
<template>
|
||||
<ModalTemplate :model-value="!!article">
|
||||
<template #default>
|
||||
<div>
|
||||
<DialogTitle
|
||||
as="h3"
|
||||
class="text-lg font-bold font-display text-zinc-100"
|
||||
>
|
||||
{{ $t("news.delete") }}
|
||||
</DialogTitle>
|
||||
<p class="mt-1 text-sm text-zinc-400">
|
||||
{{ $t("common.deleteConfirm", [article?.title]) }}
|
||||
</p>
|
||||
<p class="mt-2 text-sm font-bold text-red-500">
|
||||
{{ $t("common.cannotUndo") }}
|
||||
</p>
|
||||
</div>
|
||||
</template>
|
||||
<template #buttons>
|
||||
<LoadingButton
|
||||
:loading="deleteLoading"
|
||||
class="bg-red-600 text-white hover:bg-red-500"
|
||||
@click="() => deleteArticle()"
|
||||
>
|
||||
{{ $t("common.delete") }}
|
||||
</LoadingButton>
|
||||
<button
|
||||
class="inline-flex items-center rounded-md bg-zinc-800 px-3 py-2 text-sm font-semibold font-display text-white hover:bg-zinc-700"
|
||||
@click="() => (article = undefined)"
|
||||
>
|
||||
{{ $t("cancel") }}
|
||||
</button>
|
||||
</template>
|
||||
</ModalTemplate>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { DialogTitle } from "@headlessui/vue";
|
||||
|
||||
interface Article {
|
||||
id: string;
|
||||
title: string;
|
||||
}
|
||||
|
||||
const article = defineModel<Article | undefined>();
|
||||
const deleteLoading = ref(false);
|
||||
const router = useRouter();
|
||||
const { t } = useI18n();
|
||||
const news = useNews();
|
||||
if (!news.value) {
|
||||
news.value = await fetchNews();
|
||||
}
|
||||
|
||||
async function deleteArticle() {
|
||||
try {
|
||||
if (!article.value || !news.value) return;
|
||||
|
||||
deleteLoading.value = true;
|
||||
await $dropFetch(`/api/v1/admin/news/${article.value.id}`, {
|
||||
method: "DELETE",
|
||||
});
|
||||
|
||||
const index = news.value.findIndex((e) => e.id == article.value?.id);
|
||||
news.value.splice(index, 1);
|
||||
|
||||
article.value = undefined;
|
||||
router.push("/news");
|
||||
} catch (e) {
|
||||
createModal(
|
||||
ModalType.Notification,
|
||||
{
|
||||
title: t("errors.news.article.delete.title"),
|
||||
description: t("errors.news.article.delete.desc", [
|
||||
// @ts-expect-error attempt to display statusMessage on error
|
||||
e?.statusMessage ?? t("errors.unknown"),
|
||||
]),
|
||||
},
|
||||
(_, c) => c(),
|
||||
);
|
||||
} finally {
|
||||
deleteLoading.value = false;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,75 @@
|
||||
<template>
|
||||
<ModalTemplate :model-value="!!user">
|
||||
<template #default>
|
||||
<div>
|
||||
<DialogTitle
|
||||
as="h3"
|
||||
class="text-lg font-bold font-display text-zinc-100"
|
||||
>
|
||||
{{ $t("users.admin.deleteUser", [user?.username]) }}
|
||||
</DialogTitle>
|
||||
<p class="mt-1 text-sm text-zinc-400">
|
||||
{{ $t("common.deleteConfirm", [user?.username]) }}
|
||||
</p>
|
||||
<p class="mt-2 text-sm font-bold text-red-500">
|
||||
{{ $t("common.cannotUndo") }}
|
||||
</p>
|
||||
</div>
|
||||
</template>
|
||||
<template #buttons>
|
||||
<LoadingButton
|
||||
:loading="deleteLoading"
|
||||
class="bg-red-600 text-white hover:bg-red-500"
|
||||
@click="() => deleteUser()"
|
||||
>
|
||||
{{ $t("common.delete") }}
|
||||
</LoadingButton>
|
||||
<button
|
||||
class="inline-flex items-center rounded-md bg-zinc-800 px-3 py-2 text-sm font-semibold font-display text-white hover:bg-zinc-700"
|
||||
@click="() => (user = undefined)"
|
||||
>
|
||||
{{ $t("cancel") }}
|
||||
</button>
|
||||
</template>
|
||||
</ModalTemplate>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { DialogTitle } from "@headlessui/vue";
|
||||
import type { UserModel } from "~/prisma/client/models";
|
||||
|
||||
const user = defineModel<UserModel | undefined>();
|
||||
const deleteLoading = ref(false);
|
||||
const router = useRouter();
|
||||
const { t } = useI18n();
|
||||
|
||||
async function deleteUser() {
|
||||
try {
|
||||
if (!user.value) return;
|
||||
|
||||
deleteLoading.value = true;
|
||||
await $dropFetch(`/api/v1/admin/users/${user.value.id}`, {
|
||||
method: "DELETE",
|
||||
});
|
||||
|
||||
user.value = undefined;
|
||||
|
||||
await fetchUsers();
|
||||
router.push("/admin/users");
|
||||
} catch (e) {
|
||||
createModal(
|
||||
ModalType.Notification,
|
||||
{
|
||||
title: t("errors.admin.user.delete.title"),
|
||||
description: t("errors.admin.user.delete.desc", [
|
||||
// @ts-expect-error attempt to display statusMessage on error
|
||||
e?.statusMessage ?? t("errors.unknown"),
|
||||
]),
|
||||
},
|
||||
(_, c) => c(),
|
||||
);
|
||||
} finally {
|
||||
deleteLoading.value = false;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,229 @@
|
||||
<template>
|
||||
<ModalTemplate v-model="open">
|
||||
<template #default>
|
||||
<div>
|
||||
<h1 as="h3" class="text-lg font-medium leading-6 text-white">
|
||||
{{ $t("library.admin.launchSelector.title") }}
|
||||
</h1>
|
||||
<p class="mt-1 text-zinc-400 text-sm">
|
||||
{{ $t("library.admin.launchSelector.description") }}
|
||||
</p>
|
||||
<div
|
||||
v-if="props.filterPlatform"
|
||||
class="inline-flex items-center mt-2 gap-x-4"
|
||||
>
|
||||
<h1 class="block text-sm font-medium leading-6 text-zinc-100">
|
||||
{{ $t("library.admin.launchSelector.platformFilterHint") }}
|
||||
</h1>
|
||||
<span class="flex items-center">
|
||||
<component
|
||||
:is="PLATFORM_ICONS[props.filterPlatform]"
|
||||
alt=""
|
||||
class="size-5 flex-shrink-0 text-blue-600"
|
||||
/>
|
||||
<span class="ml-2 block truncate text-zinc-100 text-sm font-bold">{{
|
||||
props.filterPlatform
|
||||
}}</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-2 space-y-4">
|
||||
<div>
|
||||
<h1 class="block text-sm font-medium leading-6 text-zinc-100">
|
||||
{{ $t("library.admin.launchSelector.search") }}
|
||||
</h1>
|
||||
<SelectorGame
|
||||
:search="search"
|
||||
:model-value="game"
|
||||
class="w-full mt-2"
|
||||
@update:model-value="(value) => updateGame(value)"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
v-if="versions !== undefined && Object.entries(versions).length == 0"
|
||||
class="text-zinc-300 text-sm font-bold font-display uppercase text-center w-full"
|
||||
>
|
||||
{{ $t("library.admin.launchSelector.noVersions") }}
|
||||
</div>
|
||||
<div v-else-if="versions !== undefined">
|
||||
<h1 class="block text-sm font-medium leading-6 text-zinc-100">
|
||||
{{ $t("library.admin.launchSelector.selectVersions") }}
|
||||
</h1>
|
||||
<SelectorCombox
|
||||
:search="
|
||||
(v) =>
|
||||
Object.values(versions!)
|
||||
.filter((k) =>
|
||||
(k.displayName || k.versionPath)!
|
||||
.toLowerCase()
|
||||
.includes(v.toLowerCase()),
|
||||
)
|
||||
.map((v) => ({
|
||||
id: v.versionId,
|
||||
name: (v.displayName ?? v.versionPath)!,
|
||||
}))
|
||||
"
|
||||
:display="(v) => v.name"
|
||||
:model-value="version"
|
||||
class="w-full mt-2"
|
||||
@update:model-value="updateVersion"
|
||||
>
|
||||
<template #default="{ value }">
|
||||
{{ value.name }}
|
||||
</template>
|
||||
</SelectorCombox>
|
||||
</div>
|
||||
<div v-if="versions && version">
|
||||
<h1 class="block text-sm font-medium leading-6 text-zinc-100">
|
||||
{{ $t("library.admin.launchSelector.selectCommand") }}
|
||||
</h1>
|
||||
<SelectorCombox
|
||||
:search="
|
||||
(v) =>
|
||||
versions![version!.id].launches
|
||||
.filter(
|
||||
(k) =>
|
||||
(k.name || k.command)
|
||||
.toLowerCase()
|
||||
.includes(v.toLowerCase()) &&
|
||||
(props.filterPlatform
|
||||
? k.platform == props.filterPlatform
|
||||
: true),
|
||||
)
|
||||
.map((v) => ({
|
||||
id: v.launchId,
|
||||
...v,
|
||||
}))
|
||||
"
|
||||
:display="(v) => v.name"
|
||||
:model-value="launchId"
|
||||
class="w-full mt-2"
|
||||
@update:model-value="(v) => (launchId = v)"
|
||||
>
|
||||
<template #default="{ value }">
|
||||
<div class="flex flex-col">
|
||||
<span class="text-zinc-300 text-sm">
|
||||
{{ value.name }}
|
||||
</span>
|
||||
<span class="text-zinc-400 text-xs">{{ value.command }}</span>
|
||||
</div>
|
||||
</template>
|
||||
</SelectorCombox>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="error" class="mt-3 rounded-md bg-red-600/10 p-4">
|
||||
<div class="flex">
|
||||
<div class="flex-shrink-0">
|
||||
<XCircleIcon class="h-5 w-5 text-red-600" aria-hidden="true" />
|
||||
</div>
|
||||
<div class="ml-3">
|
||||
<h3 class="text-sm font-medium text-red-600">
|
||||
{{ error }}
|
||||
</h3>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template #buttons>
|
||||
<LoadingButton :loading="false" :disabled="!launchId" @click="submit">
|
||||
{{ $t("common.select") }}
|
||||
</LoadingButton>
|
||||
<button
|
||||
class="inline-flex items-center rounded-md bg-zinc-800 px-3 py-2 text-sm font-semibold font-display text-white hover:bg-zinc-700"
|
||||
@click="() => (open = false)"
|
||||
>
|
||||
{{ $t("cancel") }}
|
||||
</button>
|
||||
</template>
|
||||
</ModalTemplate>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { XCircleIcon } from "@heroicons/vue/24/outline";
|
||||
import type { EmulatorLaunchObject } from "~/composables/frontend";
|
||||
import type { Platform } from "~/prisma/client/enums";
|
||||
import type { GameMetadataSearchResult } from "~/server/internal/metadata/types";
|
||||
|
||||
const props = defineProps<{ filterPlatform?: Platform }>();
|
||||
|
||||
const open = defineModel<boolean>({ required: true });
|
||||
|
||||
const error = ref<string | undefined>();
|
||||
const game = ref<GameMetadataSearchResult | undefined>(undefined);
|
||||
const version = ref<{ id: string; name: string } | undefined>(undefined);
|
||||
const launchId = ref<
|
||||
{ id: string; name: string; command: string; platform: Platform } | undefined
|
||||
>(undefined);
|
||||
|
||||
const versions = ref<
|
||||
| {
|
||||
[key: string]: {
|
||||
displayName: string | null;
|
||||
launches: {
|
||||
launchId: string;
|
||||
command: string;
|
||||
name: string;
|
||||
platform: Platform;
|
||||
}[];
|
||||
versionId: string;
|
||||
versionPath: string | null;
|
||||
};
|
||||
}
|
||||
| undefined
|
||||
>(undefined);
|
||||
|
||||
const emit = defineEmits<{
|
||||
select: [data: EmulatorLaunchObject];
|
||||
}>();
|
||||
|
||||
async function search(query: string) {
|
||||
return await $dropFetch("/api/v1/admin/search/game", {
|
||||
query: { q: query, type: "Emulator" },
|
||||
});
|
||||
}
|
||||
|
||||
function updateGame(value: GameMetadataSearchResult | undefined) {
|
||||
if (game.value !== value || value == undefined) {
|
||||
version.value = undefined;
|
||||
versions.value = undefined;
|
||||
launchId.value = undefined;
|
||||
}
|
||||
|
||||
game.value = value;
|
||||
|
||||
if (game.value) fetchVersions();
|
||||
}
|
||||
|
||||
async function fetchVersions() {
|
||||
const newVersions = await $dropFetch("/api/v1/admin/game/:id/versions", {
|
||||
params: { id: game.value!.id },
|
||||
failTitle: "Failed to fetch versions for launch picker",
|
||||
});
|
||||
versions.value = Object.fromEntries(newVersions.map((v) => [v.versionId, v]));
|
||||
}
|
||||
|
||||
function updateVersion(v: typeof version.value) {
|
||||
if (version.value !== v || v == undefined) {
|
||||
launchId.value = undefined;
|
||||
}
|
||||
version.value = v;
|
||||
}
|
||||
|
||||
function submit() {
|
||||
emit("select", {
|
||||
launchId: launchId.value!.id,
|
||||
gameName: game.value!.name,
|
||||
gameIcon: game.value!.icon,
|
||||
versionName: version.value!.name,
|
||||
launchName: launchId.value!.name,
|
||||
platform: launchId.value!.platform,
|
||||
});
|
||||
open.value = false;
|
||||
}
|
||||
|
||||
watch(open, () => {
|
||||
game.value = undefined;
|
||||
updateGame(game.value);
|
||||
});
|
||||
</script>
|
||||
@@ -0,0 +1,186 @@
|
||||
<template>
|
||||
<TransitionRoot as="template" :show="open">
|
||||
<Dialog class="relative z-50" @close="open = false">
|
||||
<TransitionChild
|
||||
as="template"
|
||||
enter="ease-out duration-300"
|
||||
enter-from="opacity-0"
|
||||
enter-to="opacity-100"
|
||||
leave="ease-in duration-200"
|
||||
leave-from="opacity-100"
|
||||
leave-to="opacity-0"
|
||||
>
|
||||
<div
|
||||
class="fixed inset-0 bg-zinc-950 bg-opacity-75 transition-opacity"
|
||||
/>
|
||||
</TransitionChild>
|
||||
|
||||
<div class="fixed inset-0 z-10 w-screen overflow-y-auto">
|
||||
<div
|
||||
class="flex min-h-full items-start justify-center p-4 text-center sm:items-center sm:p-0"
|
||||
>
|
||||
<TransitionChild
|
||||
as="template"
|
||||
enter="ease-out duration-300"
|
||||
enter-from="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
|
||||
enter-to="opacity-100 translate-y-0 sm:scale-100"
|
||||
leave="ease-in duration-200"
|
||||
leave-from="opacity-100 translate-y-0 sm:scale-100"
|
||||
leave-to="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
|
||||
>
|
||||
<DialogPanel
|
||||
class="relative transform overflow-hidden rounded-lg bg-zinc-900 px-4 pb-4 pt-5 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-lg sm:p-6"
|
||||
>
|
||||
<div class="sm:flex sm:items-start">
|
||||
<div
|
||||
class="mt-3 w-full text-center sm:ml-4 sm:mt-0 sm:text-left"
|
||||
>
|
||||
<div class="mt-2">
|
||||
<label
|
||||
for="file-upload"
|
||||
class="group cursor-pointer transition relative block w-full rounded-lg border-2 border-dashed border-zinc-600 p-12 text-center hover:border-zinc-700 focus:outline-none focus:ring-2 focus:ring-blue-600 focus:ring-offset-2"
|
||||
>
|
||||
<ArrowUpTrayIcon
|
||||
class="transition mx-auto h-6 w-6 text-zinc-600 group-hover:text-zinc-700"
|
||||
stroke="currentColor"
|
||||
fill="none"
|
||||
viewBox="0 0 48 48"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
<span
|
||||
class="transition mt-2 block text-sm font-semibold text-zinc-400 group-hover:text-zinc-500"
|
||||
>{{ $t("uploadFile") }}</span
|
||||
>
|
||||
<div v-if="currentFileList">
|
||||
<p
|
||||
v-for="currentFile in currentFileList"
|
||||
:key="currentFile"
|
||||
class="mt-1 text-[10px] text-zinc-500 whitespace-nowrap"
|
||||
>
|
||||
{{ currentFile }}
|
||||
</p>
|
||||
</div>
|
||||
</label>
|
||||
<input
|
||||
id="file-upload"
|
||||
:accept="props.accept"
|
||||
class="hidden"
|
||||
type="file"
|
||||
:multiple="props.multiple"
|
||||
@change="(e: Event) => (file = (e.target as any)?.files)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-5 sm:mt-4 sm:flex sm:flex-row-reverse">
|
||||
<LoadingButton
|
||||
:disabled="currentFiles == undefined"
|
||||
type="button"
|
||||
:loading="uploadLoading"
|
||||
:class="['inline-flex w-full shadow-sm sm:ml-3 sm:w-auto']"
|
||||
@click="() => uploadFile_wrapper()"
|
||||
>
|
||||
{{ $t("upload") }}
|
||||
</LoadingButton>
|
||||
<button
|
||||
ref="cancelButtonRef"
|
||||
type="button"
|
||||
class="mt-3 inline-flex w-full justify-center rounded-md bg-zinc-800 px-3 py-2 text-sm font-semibold text-zinc-100 shadow-sm ring-1 ring-inset ring-zinc-800 hover:bg-zinc-900 sm:mt-0 sm:w-auto"
|
||||
@click="open = false"
|
||||
>
|
||||
{{ $t("cancel") }}
|
||||
</button>
|
||||
</div>
|
||||
<div v-if="uploadError" class="mt-3 rounded-md bg-red-600/10 p-4">
|
||||
<div class="flex">
|
||||
<div class="flex-shrink-0">
|
||||
<XCircleIcon
|
||||
class="h-5 w-5 text-red-600"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
</div>
|
||||
<div class="ml-3">
|
||||
<h3 class="text-sm font-medium text-red-600">
|
||||
{{ uploadError }}
|
||||
</h3>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</DialogPanel>
|
||||
</TransitionChild>
|
||||
</div>
|
||||
</div>
|
||||
</Dialog>
|
||||
</TransitionRoot>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from "vue";
|
||||
import {
|
||||
Dialog,
|
||||
DialogPanel,
|
||||
TransitionChild,
|
||||
TransitionRoot,
|
||||
} from "@headlessui/vue";
|
||||
import { ArrowUpTrayIcon } from "@heroicons/vue/20/solid";
|
||||
import { XCircleIcon } from "@heroicons/vue/24/solid";
|
||||
|
||||
const open = defineModel<boolean>({
|
||||
required: true,
|
||||
});
|
||||
|
||||
const { t } = useI18n();
|
||||
const file = ref<FileList | undefined>();
|
||||
const currentFiles = computed(() => file.value);
|
||||
const currentFileList = computed(() => {
|
||||
if (!currentFiles.value) return undefined;
|
||||
const list = [];
|
||||
for (const file of currentFiles.value) {
|
||||
list.push(file.name);
|
||||
}
|
||||
return list;
|
||||
});
|
||||
const props = defineProps<{
|
||||
endpoint: string;
|
||||
accept: string;
|
||||
multiple?: boolean;
|
||||
options?: { [key: string]: string };
|
||||
}>();
|
||||
const emit = defineEmits(["upload"]);
|
||||
|
||||
const uploadLoading = ref(false);
|
||||
const uploadError = ref<string | undefined>();
|
||||
async function uploadFile() {
|
||||
if (!currentFiles.value) return;
|
||||
|
||||
const form = new FormData();
|
||||
for (const file of currentFiles.value) {
|
||||
form.append(file.name, file);
|
||||
}
|
||||
|
||||
if (props.options) {
|
||||
for (const [key, value] of Object.entries(props.options)) {
|
||||
form.append(key, value);
|
||||
}
|
||||
}
|
||||
|
||||
const result = await $dropFetch(props.endpoint, {
|
||||
method: "POST",
|
||||
body: form,
|
||||
});
|
||||
open.value = false;
|
||||
file.value = undefined;
|
||||
emit("upload", result);
|
||||
}
|
||||
|
||||
function uploadFile_wrapper() {
|
||||
uploadLoading.value = true;
|
||||
uploadFile()
|
||||
.catch((error) => {
|
||||
uploadError.value = error.statusMessage ?? t("errors.unknown");
|
||||
})
|
||||
.finally(() => {
|
||||
uploadLoading.value = false;
|
||||
});
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,455 @@
|
||||
<!-- eslint-disable vue/no-v-html -->
|
||||
<template>
|
||||
<div class="w-full">
|
||||
<!-- Create article button - only show for admin users -->
|
||||
<button
|
||||
v-if="user?.admin"
|
||||
class="transition inline-flex w-full items-center px-4 gap-x-2 py-2 bg-zinc-800 hover:bg-zinc-700 text-zinc-200 font-semibold text-sm shadow-sm"
|
||||
@click="modalOpen = !modalOpen"
|
||||
>
|
||||
<PlusIcon
|
||||
class="h-5 w-5 transition-transform duration-200"
|
||||
:class="{ 'rotate-90': modalOpen }"
|
||||
/>
|
||||
<span>{{ $t("news.article.new") }}</span>
|
||||
</button>
|
||||
|
||||
<ModalTemplate v-model="modalOpen" size-class="sm:max-w-[80vw]">
|
||||
<h3 class="text-lg font-semibold text-zinc-100 mb-4">
|
||||
{{ $t("news.article.create") }}
|
||||
</h3>
|
||||
<form class="space-y-4" @submit.prevent="() => createArticle()">
|
||||
<div>
|
||||
<label for="title" class="block text-sm font-medium text-zinc-400">{{
|
||||
$t("news.article.titles")
|
||||
}}</label>
|
||||
<input
|
||||
id="title"
|
||||
v-model="newArticle.title"
|
||||
type="text"
|
||||
autocomplete="off"
|
||||
class="mt-1 block w-full rounded-md bg-zinc-900 border-zinc-700 text-zinc-100 shadow-sm focus:border-primary-500 focus:ring-primary-500"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label
|
||||
for="excerpt"
|
||||
class="block text-sm font-medium text-zinc-400"
|
||||
>{{ $t("news.article.shortDesc") }}</label
|
||||
>
|
||||
<input
|
||||
id="excerpt"
|
||||
v-model="newArticle.description"
|
||||
type="text"
|
||||
class="mt-1 block w-full rounded-md bg-zinc-900 border-zinc-700 text-zinc-100 shadow-sm focus:border-primary-500 focus:ring-primary-500"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label
|
||||
for="content"
|
||||
class="block text-sm font-medium text-zinc-400"
|
||||
>{{ $t("news.article.content") }}</label
|
||||
>
|
||||
<div class="mt-1 flex flex-col gap-4">
|
||||
<!-- Markdown shortcuts -->
|
||||
<div class="flex flex-wrap gap-2">
|
||||
<button
|
||||
v-for="shortcut in markdownShortcuts"
|
||||
:key="shortcut.label"
|
||||
type="button"
|
||||
class="px-2 py-1 text-sm rounded bg-zinc-800 text-zinc-300 hover:bg-zinc-700 transition-colors"
|
||||
@click="applyMarkdown(shortcut)"
|
||||
>
|
||||
{{ shortcut.label }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="grid grid-rows-2 sm:grid-cols-2 sm:grid-rows-1 gap-4 h-[400px]"
|
||||
>
|
||||
<!-- Editor -->
|
||||
<div class="flex flex-col">
|
||||
<span class="text-sm text-zinc-500 mb-2">{{
|
||||
$t("news.article.editor")
|
||||
}}</span>
|
||||
<textarea
|
||||
id="content"
|
||||
ref="contentEditor"
|
||||
v-model="newArticle.content"
|
||||
class="flex-1 rounded-md bg-zinc-900 border-zinc-700 text-zinc-100 shadow-sm focus:border-primary-500 focus:ring-primary-500 font-mono resize-none"
|
||||
required
|
||||
@keydown="handleContentKeydown"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Preview -->
|
||||
<div class="flex flex-col">
|
||||
<span class="text-sm text-zinc-500 mb-2">{{
|
||||
$t("news.article.preview")
|
||||
}}</span>
|
||||
<div
|
||||
class="flex-1 p-4 rounded-md bg-zinc-900 border border-zinc-700 overflow-y-auto"
|
||||
>
|
||||
<div
|
||||
class="prose prose-invert prose-sm h-full overflow-y-auto"
|
||||
v-html="markdownPreview"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p class="mt-2 text-sm text-zinc-500">
|
||||
{{ $t("news.article.editorGuide") }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label
|
||||
for="file-upload"
|
||||
class="group cursor-pointer transition relative block w-full rounded-lg border-2 border-dashed border-zinc-600 p-12 text-center hover:border-zinc-700 focus:outline-none focus:ring-2 focus:ring-blue-600 focus:ring-offset-2"
|
||||
>
|
||||
<ArrowUpTrayIcon
|
||||
class="transition mx-auto h-6 w-6 text-zinc-600 group-hover:text-zinc-700"
|
||||
stroke="currentColor"
|
||||
fill="none"
|
||||
viewBox="0 0 48 48"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
<span
|
||||
class="transition mt-2 block text-sm font-semibold text-zinc-400 group-hover:text-zinc-500"
|
||||
>{{ $t("news.article.uploadCover") }}</span
|
||||
>
|
||||
<p v-if="currentFile" class="mt-1 text-xs text-zinc-400">
|
||||
{{ currentFile.name }}
|
||||
</p>
|
||||
</label>
|
||||
<input
|
||||
id="file-upload"
|
||||
accept="image/*"
|
||||
class="hidden"
|
||||
type="file"
|
||||
@change="(e: Event) => (file = (e.target as any)?.files)"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-zinc-400 mb-2">{{
|
||||
$t("common.tags")
|
||||
}}</label>
|
||||
<div class="flex flex-wrap gap-2 mb-2">
|
||||
<span
|
||||
v-for="tag in newArticle.tags"
|
||||
:key="tag"
|
||||
class="inline-flex items-center gap-x-1 px-2 py-1 rounded-full text-xs font-medium bg-blue-600/80 text-white"
|
||||
>
|
||||
{{ tag }}
|
||||
<button
|
||||
type="button"
|
||||
class="text-white hover:text-white/80"
|
||||
@click="removeTag(tag)"
|
||||
>
|
||||
<XMarkIcon class="h-3 w-3" />
|
||||
</button>
|
||||
</span>
|
||||
</div>
|
||||
<div class="flex gap-x-2">
|
||||
<input
|
||||
v-model="newTagInput"
|
||||
type="text"
|
||||
:placeholder="$t('news.article.tagPlaceholder')"
|
||||
class="mt-1 block w-full rounded-md bg-zinc-900 border-zinc-700 text-zinc-100 shadow-sm focus:border-primary-500 focus:ring-primary-500"
|
||||
@keydown.enter.prevent="addTag"
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
class="mt-1 px-3 py-2 rounded-md bg-zinc-800 text-zinc-100 hover:bg-zinc-700"
|
||||
@click="addTag"
|
||||
>
|
||||
{{ $t("news.article.add") }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button type="submit" class="hidden" />
|
||||
|
||||
<div v-if="error" class="mt-3 rounded-md bg-red-600/10 p-4">
|
||||
<div class="flex">
|
||||
<div class="flex-shrink-0">
|
||||
<XCircleIcon class="h-5 w-5 text-red-600" aria-hidden="true" />
|
||||
</div>
|
||||
<div class="ml-3">
|
||||
<h3 class="text-sm font-medium text-red-600">
|
||||
{{ error }}
|
||||
</h3>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
<template #buttons>
|
||||
<LoadingButton
|
||||
:loading="loading"
|
||||
class="bg-blue-600 text-white hover:bg-blue-500"
|
||||
:disabled="!isValidArticle"
|
||||
@click="() => createArticle()"
|
||||
>
|
||||
{{ $t("news.article.submit") }}
|
||||
</LoadingButton>
|
||||
<button
|
||||
class="inline-flex items-center rounded-md bg-zinc-800 px-3 py-2 text-sm font-semibold font-display text-white hover:bg-zinc-700"
|
||||
@click="() => (modalOpen = !modalOpen)"
|
||||
>
|
||||
{{ $t("cancel") }}
|
||||
</button>
|
||||
</template>
|
||||
</ModalTemplate>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import {
|
||||
ArrowUpTrayIcon,
|
||||
PlusIcon,
|
||||
XCircleIcon,
|
||||
XMarkIcon,
|
||||
} from "@heroicons/vue/24/solid";
|
||||
import { micromark } from "micromark";
|
||||
|
||||
const news = useNews();
|
||||
if (!news.value) {
|
||||
news.value = await fetchNews();
|
||||
}
|
||||
|
||||
const user = useUser();
|
||||
|
||||
const modalOpen = ref(false);
|
||||
const loading = ref(false);
|
||||
const newTagInput = ref("");
|
||||
|
||||
const newArticle = ref({
|
||||
title: "",
|
||||
description: "",
|
||||
content: "",
|
||||
tags: [] as string[],
|
||||
});
|
||||
|
||||
const isValidArticle = computed(
|
||||
() =>
|
||||
newArticle.value.title &&
|
||||
newArticle.value.description &&
|
||||
newArticle.value.content,
|
||||
);
|
||||
|
||||
const markdownPreview = computed(() => {
|
||||
// TODO: maybe?? add https://github.com/cure53/DOMPurify
|
||||
// micromark says its safe, but this is straight html we are injecting
|
||||
return micromark(newArticle.value.content);
|
||||
});
|
||||
|
||||
const file = ref<FileList | undefined>();
|
||||
const currentFile = computed(() => file.value?.item(0));
|
||||
const { t } = useI18n();
|
||||
|
||||
const error = ref<string | undefined>();
|
||||
|
||||
const contentEditor = ref<HTMLTextAreaElement>();
|
||||
|
||||
const markdownShortcuts = [
|
||||
{
|
||||
label: t("editor.bold"),
|
||||
prefix: "**",
|
||||
suffix: "**",
|
||||
placeholder: t("editor.boldPlaceholder"),
|
||||
},
|
||||
{
|
||||
label: t("editor.italic"),
|
||||
prefix: "_",
|
||||
suffix: "_",
|
||||
placeholder: t("editor.italicPlaceholder"),
|
||||
},
|
||||
{
|
||||
label: t("editor.link"),
|
||||
prefix: "[",
|
||||
suffix: "](url)",
|
||||
placeholder: t("editor.linkPlaceholder"),
|
||||
},
|
||||
{
|
||||
label: t("editor.code"),
|
||||
prefix: "`",
|
||||
suffix: "`",
|
||||
placeholder: t("editor.codePlaceholder"),
|
||||
},
|
||||
{
|
||||
label: t("editor.listItem"),
|
||||
prefix: "- ",
|
||||
suffix: "",
|
||||
placeholder: t("editor.listItemPlaceholder"),
|
||||
},
|
||||
{
|
||||
label: t("editor.heading"),
|
||||
prefix: "## ",
|
||||
suffix: "",
|
||||
placeholder: t("editor.headingPlaceholder"),
|
||||
},
|
||||
];
|
||||
|
||||
function handleContentKeydown(e: KeyboardEvent) {
|
||||
if (e.key === "Enter") {
|
||||
e.preventDefault();
|
||||
|
||||
const textarea = contentEditor.value;
|
||||
if (!textarea) return;
|
||||
|
||||
const start = textarea.selectionStart;
|
||||
const text = textarea.value;
|
||||
const lineStart = text.lastIndexOf("\n", start - 1) + 1;
|
||||
const currentLine = text.slice(lineStart, start);
|
||||
|
||||
// Check if the current line starts with a list marker
|
||||
const listMatch = currentLine.match(/^(\s*)([-*+]|\d+\.)\s/);
|
||||
let insertion = "\n";
|
||||
|
||||
if (listMatch) {
|
||||
// If the line is empty except for the list marker, end the list
|
||||
if (currentLine.trim() === listMatch[0].trim()) {
|
||||
const removeLength = currentLine.length;
|
||||
newArticle.value.content =
|
||||
text.slice(0, lineStart) + text.slice(lineStart + removeLength);
|
||||
|
||||
// Move cursor to new position after removing the list marker
|
||||
nextTick(() => {
|
||||
textarea.selectionStart = textarea.selectionEnd = lineStart;
|
||||
});
|
||||
return;
|
||||
}
|
||||
// Otherwise, continue the list
|
||||
insertion = "\n" + listMatch[1] + listMatch[2] + " ";
|
||||
}
|
||||
|
||||
newArticle.value.content =
|
||||
text.slice(0, start) + insertion + text.slice(start);
|
||||
|
||||
nextTick(() => {
|
||||
textarea.selectionStart = textarea.selectionEnd =
|
||||
start + insertion.length;
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
function addTag() {
|
||||
const tag = newTagInput.value.trim();
|
||||
if (tag && !newArticle.value.tags.includes(tag)) {
|
||||
newArticle.value.tags.push(tag);
|
||||
newTagInput.value = ""; // Clear the input
|
||||
}
|
||||
}
|
||||
|
||||
function removeTag(tagToRemove: string) {
|
||||
newArticle.value.tags = newArticle.value.tags.filter(
|
||||
(tag) => tag !== tagToRemove,
|
||||
);
|
||||
}
|
||||
|
||||
function applyMarkdown(shortcut: (typeof markdownShortcuts)[0]) {
|
||||
const textarea = contentEditor.value;
|
||||
if (!textarea) return;
|
||||
|
||||
const start = textarea.selectionStart;
|
||||
const end = textarea.selectionEnd;
|
||||
const text = textarea.value;
|
||||
|
||||
const selectedText = text.substring(start, end);
|
||||
const replacement = selectedText || shortcut.placeholder;
|
||||
|
||||
const newText =
|
||||
text.substring(0, start) +
|
||||
shortcut.prefix +
|
||||
replacement +
|
||||
shortcut.suffix +
|
||||
text.substring(end);
|
||||
|
||||
newArticle.value.content = newText;
|
||||
|
||||
nextTick(() => {
|
||||
textarea.focus();
|
||||
const newStart = start + shortcut.prefix.length;
|
||||
const newEnd = newStart + replacement.length;
|
||||
textarea.setSelectionRange(newStart, newEnd);
|
||||
});
|
||||
}
|
||||
|
||||
async function createArticle() {
|
||||
if (!user.value) return;
|
||||
|
||||
loading.value = true;
|
||||
try {
|
||||
const formData = new FormData();
|
||||
|
||||
if (currentFile.value) {
|
||||
formData.append("image", currentFile.value);
|
||||
}
|
||||
|
||||
formData.append("title", newArticle.value.title);
|
||||
formData.append("description", newArticle.value.description);
|
||||
formData.append("content", newArticle.value.content);
|
||||
formData.append("tags", JSON.stringify(newArticle.value.tags));
|
||||
|
||||
const createdArticle = await $dropFetch("/api/v1/admin/news", {
|
||||
method: "POST",
|
||||
body: formData,
|
||||
});
|
||||
|
||||
news.value?.push(createdArticle);
|
||||
|
||||
// Reset form
|
||||
newArticle.value = {
|
||||
title: "",
|
||||
description: "",
|
||||
content: "",
|
||||
tags: [],
|
||||
};
|
||||
|
||||
modalOpen.value = false;
|
||||
} catch (e) {
|
||||
// @ts-expect-error attempt to get statusMessage on error
|
||||
error.value = e?.statusMessage ?? t("errors.unknown");
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.prose {
|
||||
max-width: none;
|
||||
}
|
||||
|
||||
.prose a {
|
||||
color: #60a5fa;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.prose a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.prose img {
|
||||
border-radius: 0.5rem;
|
||||
}
|
||||
|
||||
.prose code {
|
||||
background: #27272a;
|
||||
padding: 0.2em 0.4em;
|
||||
border-radius: 0.25rem;
|
||||
font-size: 0.875em;
|
||||
}
|
||||
|
||||
.prose pre {
|
||||
background: #18181b;
|
||||
padding: 1em;
|
||||
border-radius: 0.5rem;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,67 @@
|
||||
<template>
|
||||
<div class="pointer-events-auto w-full bg-zinc-950/40 rounded">
|
||||
<div class="p-4">
|
||||
<div class="flex items-start">
|
||||
<div class="w-0 flex-1 pt-0.5">
|
||||
<p class="text-sm font-medium text-zinc-100">
|
||||
{{ notification.title }}
|
||||
</p>
|
||||
<p class="mt-1 text-sm text-zinc-400 line-clamp-3">
|
||||
{{ notification.description }}
|
||||
</p>
|
||||
<div
|
||||
v-if="notification.actions.length > 0"
|
||||
class="mt-3 flex space-x-7"
|
||||
>
|
||||
<NuxtLink
|
||||
v-for="[name, link] in notification.actions.map((e) =>
|
||||
e.split('|'),
|
||||
)"
|
||||
:key="name"
|
||||
type="button"
|
||||
:href="link"
|
||||
class="rounded-md text-sm font-medium text-blue-600 hover:text-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
|
||||
>
|
||||
{{ name }}
|
||||
</NuxtLink>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ml-4 flex shrink-0">
|
||||
<button
|
||||
type="button"
|
||||
class="inline-flex rounded-md text-zinc-400 hover:text-zinc-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
|
||||
@click="() => deleteMe()"
|
||||
>
|
||||
<span class="sr-only">{{ $t("common.close") }}</span>
|
||||
<XMarkIcon class="size-5" aria-hidden="true" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { XMarkIcon } from "@heroicons/vue/24/solid";
|
||||
import type { SerializeObject } from "nitropack";
|
||||
import type { NotificationModel } from "~/prisma/client/models";
|
||||
|
||||
const props = defineProps<{
|
||||
notification: SerializeObject<NotificationModel>;
|
||||
}>();
|
||||
|
||||
async function deleteMe() {
|
||||
await $dropFetch(`/api/v1/notifications/:id`, {
|
||||
method: "DELETE",
|
||||
params: {
|
||||
id: props.notification.id,
|
||||
},
|
||||
});
|
||||
const notifications = useNotifications();
|
||||
const indexOfMe = notifications.value.findIndex(
|
||||
(e) => e.id === props.notification.id,
|
||||
);
|
||||
// Delete me
|
||||
notifications.value.splice(indexOfMe, 1);
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,22 @@
|
||||
<template>
|
||||
<div
|
||||
:class="[
|
||||
'transition border border-3 rounded-xl relative cursor-pointer',
|
||||
active ? 'border-blue-600' : 'border-zinc-700',
|
||||
]"
|
||||
>
|
||||
<div v-if="active" class="absolute top-1 right-1 z-1">
|
||||
<CheckIcon
|
||||
class="rounded-full p-1.5 bg-blue-600 size-6 text-transparent stroke-3 stroke-zinc-900 font-bold"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<slot />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { CheckIcon } from "@heroicons/vue/24/solid";
|
||||
|
||||
const { active = false } = defineProps<{ active?: boolean }>();
|
||||
</script>
|
||||
@@ -0,0 +1,5 @@
|
||||
<template>
|
||||
<div class="flex rounded px-2 py-2 bg-zinc-900 text-zinc-600">
|
||||
<slot />
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,47 @@
|
||||
<template>
|
||||
<h2 v-if="title" class="text-lg mb-4 w-full">{{ title }}</h2>
|
||||
<div class="flex">
|
||||
<div class="flex flex-col md:flex-row xl:gap-4 mx-auto">
|
||||
<div class="relative flex max-w-[12rem] my-auto min-w-50">
|
||||
<svg class="aspect-square grow relative inline" viewBox="0 0 100 100">
|
||||
<PieChartPieSlice
|
||||
v-for="slice in slices"
|
||||
:key="`${slice.percentage}-${slice.totalPercentage}`"
|
||||
:slice="slice"
|
||||
/>
|
||||
</svg>
|
||||
<div class="absolute inset-0 bg-zinc-900 rounded-full m-12" />
|
||||
</div>
|
||||
<ul class="flex flex-col gap-y-1 m-auto text-left">
|
||||
<li
|
||||
v-for="slice in slices"
|
||||
:key="slice.value"
|
||||
class="text-sm inline-flex items-center gap-x-1"
|
||||
>
|
||||
<span
|
||||
class="size-3 inline-block rounded-sm"
|
||||
:class="CHART_COLOURS[slice.color].bg"
|
||||
/>
|
||||
{{
|
||||
$t("common.labelValueColon", {
|
||||
label: slice.label,
|
||||
value: $n(slice.value),
|
||||
})
|
||||
}}
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { generateSlices } from "~/components/PieChart/utils";
|
||||
import type { SliceData } from "~/components/PieChart/types";
|
||||
|
||||
const { data, title = undefined } = defineProps<{
|
||||
data: SliceData[];
|
||||
title?: string | undefined;
|
||||
}>();
|
||||
|
||||
const slices = generateSlices(data);
|
||||
</script>
|
||||
@@ -0,0 +1,35 @@
|
||||
<template>
|
||||
<path
|
||||
v-if="slice.percentage !== 0 && slice.percentage !== 100"
|
||||
:class="[CHART_COLOURS[slice.color].fill]"
|
||||
:d="`
|
||||
M ${slice.start}
|
||||
A ${slice.radius},${slice.radius} 0 ${getFlags(slice.percentage)} ${polarToCartesian(slice.center, slice.radius, percent2Degrees(slice.totalPercentage))}
|
||||
L ${slice.center}
|
||||
z
|
||||
`"
|
||||
stroke-width="2"
|
||||
/>
|
||||
<circle
|
||||
v-if="slice.percentage === 100"
|
||||
:r="slice.radius"
|
||||
:cx="slice.center.x"
|
||||
:cy="slice.center.y"
|
||||
:class="[CHART_COLOURS[slice.color].fill]"
|
||||
stroke-width="2"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import type { Slice } from "~/components/PieChart/types";
|
||||
import {
|
||||
getFlags,
|
||||
percent2Degrees,
|
||||
polarToCartesian,
|
||||
} from "~/components/PieChart/utils";
|
||||
import { CHART_COLOURS } from "~/utils/colors";
|
||||
|
||||
const { slice } = defineProps<{
|
||||
slice: Slice;
|
||||
}>();
|
||||
</script>
|
||||
+19
@@ -0,0 +1,19 @@
|
||||
import type Tuple from "~/utils/tuple";
|
||||
import type { ChartColour } from "~/utils/colors";
|
||||
|
||||
export type Slice = {
|
||||
start: Tuple;
|
||||
center: Tuple;
|
||||
percentage: number;
|
||||
totalPercentage: number;
|
||||
radius: number;
|
||||
color: ChartColour;
|
||||
label: string;
|
||||
value: number;
|
||||
};
|
||||
|
||||
export type SliceData = {
|
||||
value: number;
|
||||
color?: ChartColour;
|
||||
label: string;
|
||||
};
|
||||
@@ -0,0 +1,50 @@
|
||||
import Tuple from "~/utils/tuple";
|
||||
import type { Slice, SliceData } from "~/components/PieChart/types";
|
||||
import { sum, lastItem } from "~/utils/array";
|
||||
|
||||
export const START = new Tuple(50, 10);
|
||||
export const CENTER = new Tuple(50, 50);
|
||||
export const RADIUS = 40;
|
||||
|
||||
export const polarToCartesian = (
|
||||
center: Tuple,
|
||||
radius: number,
|
||||
angleInDegrees: number,
|
||||
) => {
|
||||
const angleInRadians = ((angleInDegrees - 90) * Math.PI) / 180;
|
||||
const x = center.x + radius * Math.cos(angleInRadians);
|
||||
const y = center.y + radius * Math.sin(angleInRadians);
|
||||
return new Tuple(x, y);
|
||||
};
|
||||
|
||||
export const percent2Degrees = (percentage: number) => (360 * percentage) / 100;
|
||||
|
||||
export function generateSlices(data: SliceData[]): Slice[] {
|
||||
return data.reduce((accumulator, currentValue, index, array) => {
|
||||
const percentage =
|
||||
(currentValue.value * 100) / sum(array.map((slice) => slice.value));
|
||||
return [
|
||||
...accumulator,
|
||||
{
|
||||
start: accumulator.length
|
||||
? polarToCartesian(
|
||||
CENTER,
|
||||
RADIUS,
|
||||
percent2Degrees(lastItem(accumulator).totalPercentage),
|
||||
)
|
||||
: START,
|
||||
radius: RADIUS,
|
||||
percentage: percentage,
|
||||
totalPercentage:
|
||||
sum(accumulator.map((element) => element.percentage)) + percentage,
|
||||
center: CENTER,
|
||||
color: PIE_COLOURS[index % PIE_COLOURS.length],
|
||||
label: currentValue.label,
|
||||
value: currentValue.value,
|
||||
},
|
||||
];
|
||||
}, [] as Slice[]);
|
||||
}
|
||||
|
||||
export const getFlags = (percentage: number) =>
|
||||
percentage > 50 ? new Tuple(1, 1) : new Tuple(0, 1);
|
||||
@@ -0,0 +1,32 @@
|
||||
<template>
|
||||
<div
|
||||
:class="[
|
||||
'relative h-5 rounded-xl overflow-hidden',
|
||||
CHART_COLOURS[backgroundColor].bg,
|
||||
]"
|
||||
>
|
||||
<div
|
||||
:style="{ width: `${percentage}%` }"
|
||||
:class="['transition-all h-full', CHART_COLOURS[color].bg]"
|
||||
/>
|
||||
<span
|
||||
class="absolute inset-0 flex items-center justify-center text-blue-200 text-sm font-bold font-display"
|
||||
>
|
||||
<!-- {{ $t("tasks.admin.progress", [Math.round(percentage * 10) / 10]) }} -->
|
||||
{{ $n(Math.round(percentage * 100) / 10000, "percent") }}
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { type ChartColour, CHART_COLOURS } from "~/utils/colors";
|
||||
const {
|
||||
percentage,
|
||||
color = "blue",
|
||||
backgroundColor = "zinc",
|
||||
} = defineProps<{
|
||||
percentage: number;
|
||||
color?: ChartColour;
|
||||
backgroundColor?: ChartColour;
|
||||
}>();
|
||||
</script>
|
||||
@@ -0,0 +1,43 @@
|
||||
<template>
|
||||
<table v-if="items.length > 0" class="w-full mt-4 space-y-6">
|
||||
<thead>
|
||||
<tr>
|
||||
<th></th>
|
||||
<th></th>
|
||||
<th></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="divide-y divide-white/10">
|
||||
<tr v-for="item in items" :key="`${item.rank}-${item.name}`">
|
||||
<td
|
||||
class="my-2 size-7 rounded-sm bg-zinc-950 ring ring-zinc-800 inline-flex items-center justify-center font-bold font-display text-blue-500"
|
||||
>
|
||||
{{ item.rank }}
|
||||
</td>
|
||||
<td class="w-full font-bold px-2">{{ item.name }}</td>
|
||||
<td
|
||||
class="text-right text-sm font-semibold text-zinc-500 whitespace-nowrap"
|
||||
>
|
||||
{{ item.value }}
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<p
|
||||
v-else
|
||||
class="w-full p-2 text-center uppercase text-sm font-display font-bold text-zinc-700"
|
||||
>
|
||||
{{ $t("common.noData") }}
|
||||
</p>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
export type RankItem = {
|
||||
rank: number;
|
||||
name: string;
|
||||
value: string;
|
||||
};
|
||||
const { items } = defineProps<{
|
||||
items: RankItem[];
|
||||
}>();
|
||||
</script>
|
||||
@@ -0,0 +1,32 @@
|
||||
<template>
|
||||
<div class="relative inline-block group/relative-time">
|
||||
<!-- Visible relative time -->
|
||||
<time :datetime="isoDate" class="text-sm text-muted-foreground">
|
||||
{{ DateTime.fromJSDate(date).toRelative({ locale: $i18n.locale }) }}
|
||||
</time>
|
||||
|
||||
<!-- Custom tooltip that shows on hover -->
|
||||
<div
|
||||
role="tooltip"
|
||||
class="absolute bottom-full left-1/2 -translate-x-1/2 mb-1 px-2 py-1 rounded bg-zinc-900 text-white text-xs whitespace-nowrap shadow z-10 opacity-0 group-hover/relative-time:opacity-100 transition-opacity pointer-events-none"
|
||||
aria-hidden="true"
|
||||
>
|
||||
{{ $d(date, "long") }}
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { DateTime } from "luxon";
|
||||
import { computed } from "vue";
|
||||
|
||||
const props = defineProps<{
|
||||
date: string | Date;
|
||||
}>();
|
||||
|
||||
const date = computed(() =>
|
||||
typeof props.date === "string" ? new Date(props.date) : props.date,
|
||||
);
|
||||
|
||||
const isoDate = computed(() => date.value.toISOString());
|
||||
</script>
|
||||
@@ -0,0 +1,91 @@
|
||||
<template>
|
||||
<Combobox
|
||||
as="div"
|
||||
nullable
|
||||
:immediate="true"
|
||||
:model-value="model"
|
||||
class="bg-zinc-800 rounded"
|
||||
@update:model-value="updateModelValue"
|
||||
>
|
||||
<div class="relative">
|
||||
<ComboboxInput
|
||||
:key="model?.id ?? 'off'"
|
||||
class="block flex-1 border-0 py-1.5 pl-2 bg-transparent text-zinc-100 placeholder:text-zinc-400 focus:ring-0 sm:text-sm sm:leading-6"
|
||||
placeholder="Start typing..."
|
||||
:display-value="(v) => (v ? props.display(v as T) : '')"
|
||||
@change="query = $event.target.value"
|
||||
@blur="query = ''"
|
||||
/>
|
||||
<ComboboxButton
|
||||
class="absolute inset-0 right-0 flex items-center justify-end rounded-r-md px-2 focus:outline-none"
|
||||
>
|
||||
<ChevronUpDownIcon class="size-5 text-gray-400" aria-hidden="true" />
|
||||
</ComboboxButton>
|
||||
|
||||
<ComboboxOptions
|
||||
class="absolute z-10 mt-1 max-h-60 w-full overflow-auto rounded-md bg-zinc-900 py-1 text-base shadow-lg ring-1 ring-white/5 focus:outline-none sm:text-sm"
|
||||
>
|
||||
<div
|
||||
v-if="results.length == 0"
|
||||
class="text-zinc-300 uppercase font-display font-bold text-center p-4"
|
||||
>
|
||||
{{ $t("common.noResults") }}
|
||||
</div>
|
||||
<ComboboxOption
|
||||
v-for="result in results"
|
||||
v-else
|
||||
:key="result.id"
|
||||
v-slot="{ active, selected }"
|
||||
:value="result"
|
||||
as="template"
|
||||
>
|
||||
<li
|
||||
:class="[
|
||||
'relative cursor-default select-none py-2 pl-3 pr-9',
|
||||
active ? 'bg-blue-600 text-white outline-none' : 'text-zinc-100',
|
||||
]"
|
||||
>
|
||||
<span>
|
||||
<slot :value="result" />
|
||||
</span>
|
||||
|
||||
<span
|
||||
v-if="selected"
|
||||
:class="[
|
||||
'absolute inset-y-0 right-0 flex items-center pr-4',
|
||||
active ? 'text-white' : 'text-blue-600',
|
||||
]"
|
||||
>
|
||||
<CheckIcon class="size-5" aria-hidden="true" />
|
||||
</span>
|
||||
</li>
|
||||
</ComboboxOption>
|
||||
</ComboboxOptions>
|
||||
</div>
|
||||
</Combobox>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts" generic="T extends { id: string }">
|
||||
import {
|
||||
Combobox,
|
||||
ComboboxButton,
|
||||
ComboboxInput,
|
||||
ComboboxOption,
|
||||
ComboboxOptions,
|
||||
} from "@headlessui/vue";
|
||||
import { CheckIcon, ChevronUpDownIcon } from "@heroicons/vue/24/outline";
|
||||
|
||||
const props = defineProps<{
|
||||
search: (query: string) => T[];
|
||||
display: (value: T) => string;
|
||||
}>();
|
||||
|
||||
const model = defineModel<T | undefined>();
|
||||
const query = ref("");
|
||||
|
||||
const results = computed(() => props.search(query.value));
|
||||
|
||||
function updateModelValue(v: T) {
|
||||
model.value = v;
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,122 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="flex gap-1 flex-wrap">
|
||||
<span
|
||||
v-for="extension in model"
|
||||
:key="extension"
|
||||
class="inline-flex items-center gap-x-0.5 rounded-md bg-blue-400/10 px-2 py-1 text-xs font-medium text-blue-400 inset-ring inset-ring-blue-400/30"
|
||||
>
|
||||
{{ extension }}
|
||||
<button
|
||||
type="button"
|
||||
class="group relative -mr-1 size-3.5 rounded-xs hover:bg-blue-500/30"
|
||||
@click="() => removeFileExtension(extension)"
|
||||
>
|
||||
<span class="sr-only">{{ $t("common.remove") }}</span>
|
||||
<svg
|
||||
viewBox="0 0 14 14"
|
||||
class="size-3.5 stroke-blue-400 group-hover:stroke-blue-300"
|
||||
>
|
||||
<path d="M4 4l6 6m0-6l-6 6" />
|
||||
</svg>
|
||||
<span class="absolute -inset-1"></span>
|
||||
</button>
|
||||
</span>
|
||||
<span v-if="model.length == 0" class="text-zinc-500 text-xs">{{
|
||||
$t("library.admin.fileExtSelector.noSelected")
|
||||
}}</span>
|
||||
</div>
|
||||
<Combobox
|
||||
as="div"
|
||||
nullable
|
||||
:immediate="true"
|
||||
:model-value="model"
|
||||
class="mt-2 bg-zinc-800 rounded"
|
||||
@update:model-value="addFileExtension"
|
||||
>
|
||||
<div class="relative">
|
||||
<ComboboxInput
|
||||
class="block flex-1 border-0 py-1.5 pl-2 bg-transparent text-zinc-100 placeholder:text-zinc-400 focus:ring-0 sm:text-sm sm:leading-6 w-full"
|
||||
placeholder="Start typing..."
|
||||
:display-value="(_) => ''"
|
||||
@change="query = $event.target.value"
|
||||
@blur="query = ''"
|
||||
/>
|
||||
<ComboboxButton
|
||||
class="absolute inset-0 right-0 flex items-center justify-end rounded-r-md px-2 focus:outline-none"
|
||||
>
|
||||
<ChevronUpDownIcon class="size-5 text-gray-400" aria-hidden="true" />
|
||||
</ComboboxButton>
|
||||
|
||||
<ComboboxOptions
|
||||
class="absolute z-10 mt-1 max-h-60 w-full overflow-auto rounded-md bg-zinc-900 py-1 text-base shadow-lg ring-1 ring-white/5 focus:outline-none sm:text-sm"
|
||||
>
|
||||
<ComboboxOption
|
||||
v-if="query"
|
||||
v-slot="{ active, selected }"
|
||||
:value="query"
|
||||
as="template"
|
||||
>
|
||||
<li
|
||||
:class="[
|
||||
'relative cursor-default select-none py-2 pl-3 pr-9',
|
||||
active
|
||||
? 'bg-blue-600 text-white outline-none'
|
||||
: 'text-zinc-100',
|
||||
]"
|
||||
>
|
||||
<span>
|
||||
{{
|
||||
$t("library.admin.fileExtSelector.add", [normalize(query)])
|
||||
}}</span
|
||||
>
|
||||
|
||||
<span
|
||||
v-if="selected"
|
||||
:class="[
|
||||
'absolute inset-y-0 right-0 flex items-center pr-4',
|
||||
active ? 'text-white' : 'text-blue-600',
|
||||
]"
|
||||
>
|
||||
<CheckIcon class="size-5" aria-hidden="true" />
|
||||
</span>
|
||||
</li>
|
||||
</ComboboxOption>
|
||||
</ComboboxOptions>
|
||||
</div>
|
||||
</Combobox>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import {
|
||||
Combobox,
|
||||
ComboboxButton,
|
||||
ComboboxInput,
|
||||
ComboboxOption,
|
||||
ComboboxOptions,
|
||||
} from "@headlessui/vue";
|
||||
import { CheckIcon, ChevronUpDownIcon } from "@heroicons/vue/24/outline";
|
||||
|
||||
const model = defineModel<string[]>({ required: true });
|
||||
|
||||
const query = ref("");
|
||||
|
||||
function normalize(v: string) {
|
||||
const k = v.toLowerCase().replaceAll(/[^a-zA-Z0-9]*/g, "");
|
||||
if (k.startsWith(".")) return k;
|
||||
return `.${k}`;
|
||||
}
|
||||
|
||||
function addFileExtension(raw: string) {
|
||||
const value = normalize(raw);
|
||||
if (model.value.includes(value)) return;
|
||||
model.value.push(value);
|
||||
}
|
||||
|
||||
function removeFileExtension(extension: string) {
|
||||
const index = model.value.findIndex((v) => v === extension);
|
||||
if (index == -1) return;
|
||||
model.value.splice(index, 1);
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,131 @@
|
||||
<template>
|
||||
<Combobox
|
||||
v-model="currentResult"
|
||||
as="div"
|
||||
nullable
|
||||
class="bg-zinc-800 rounded"
|
||||
>
|
||||
<div class="relative">
|
||||
<ComboboxInput
|
||||
class="block flex-1 border-0 py-1.5 pl-2 bg-transparent text-zinc-100 placeholder:text-zinc-400 focus:ring-0 sm:text-sm sm:leading-6"
|
||||
placeholder="Start typing..."
|
||||
:display-value="(game) => (game as GameMetadataSearchResult)?.name"
|
||||
@change="gameSearchQuery = $event.target.value"
|
||||
@blur="gameSearchQuery = ''"
|
||||
/>
|
||||
<ComboboxButton
|
||||
class="absolute inset-y-0 right-0 flex items-center rounded-r-md px-2 focus:outline-none"
|
||||
>
|
||||
<ChevronUpDownIcon class="size-5 text-gray-400" aria-hidden="true" />
|
||||
</ComboboxButton>
|
||||
|
||||
<ComboboxOptions
|
||||
class="absolute z-10 mt-1 max-h-60 w-full overflow-auto rounded-md bg-zinc-900 py-1 text-base shadow-lg ring-1 ring-white/5 focus:outline-none sm:text-sm"
|
||||
>
|
||||
<div
|
||||
v-if="gameSearchQuery.length < 4"
|
||||
class="text-zinc-300 uppercase font-display font-bold text-center p-4"
|
||||
>
|
||||
{{ $t("library.admin.gameSelector.hint") }}
|
||||
</div>
|
||||
<div
|
||||
v-else-if="resultsLoading || results === undefined"
|
||||
class="flex items-center justify-center p-2"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class="w-8 h-8 text-transparent animate-spin fill-zinc-100"
|
||||
viewBox="0 0 100 101"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
<path
|
||||
d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z"
|
||||
fill="currentFill"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<div
|
||||
v-else-if="results.length == 0"
|
||||
class="text-zinc-500 uppercase font-display font-bold text-center p-4"
|
||||
>
|
||||
{{ $t("common.noResults") }}
|
||||
</div>
|
||||
<ComboboxOption
|
||||
v-for="result in results"
|
||||
v-else
|
||||
:key="result.id"
|
||||
v-slot="{ active, selected }"
|
||||
:value="result"
|
||||
as="template"
|
||||
>
|
||||
<li
|
||||
:class="[
|
||||
'relative cursor-default select-none py-2 pl-3 pr-9',
|
||||
active ? 'bg-blue-600 text-white outline-none' : 'text-zinc-100',
|
||||
]"
|
||||
>
|
||||
<span>
|
||||
<GameSearchResultWidget :game="result" :raw-icon="false" />
|
||||
</span>
|
||||
|
||||
<span
|
||||
v-if="selected"
|
||||
:class="[
|
||||
'absolute inset-y-0 right-0 flex items-center pr-4',
|
||||
active ? 'text-white' : 'text-blue-600',
|
||||
]"
|
||||
>
|
||||
<CheckIcon class="size-5" aria-hidden="true" />
|
||||
</span>
|
||||
</li>
|
||||
</ComboboxOption>
|
||||
</ComboboxOptions>
|
||||
</div>
|
||||
</Combobox>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import {
|
||||
Combobox,
|
||||
ComboboxButton,
|
||||
ComboboxInput,
|
||||
ComboboxOption,
|
||||
ComboboxOptions,
|
||||
} from "@headlessui/vue";
|
||||
import { ChevronUpDownIcon } from "@heroicons/vue/24/outline";
|
||||
|
||||
import type { GameMetadataSearchResult } from "~/server/internal/metadata/types";
|
||||
|
||||
const props = defineProps<{
|
||||
search: (query: string) => Promise<Array<GameMetadataSearchResult>>;
|
||||
}>();
|
||||
|
||||
const currentResult = defineModel<GameMetadataSearchResult | undefined>();
|
||||
const gameSearchQuery = ref("");
|
||||
|
||||
const resultsLoading = ref(false);
|
||||
const results = ref<Array<GameMetadataSearchResult>>();
|
||||
|
||||
let timeout: NodeJS.Timeout | undefined = undefined;
|
||||
|
||||
watch(gameSearchQuery, async (v) => {
|
||||
if (v.length < 4) {
|
||||
results.value = [];
|
||||
resultsLoading.value = false;
|
||||
return;
|
||||
}
|
||||
|
||||
if (timeout) clearTimeout(timeout);
|
||||
resultsLoading.value = true;
|
||||
timeout = setTimeout(async () => {
|
||||
results.value = await props.search(v);
|
||||
resultsLoading.value = false;
|
||||
timeout = undefined;
|
||||
}, 600);
|
||||
});
|
||||
</script>
|
||||
@@ -0,0 +1,29 @@
|
||||
<template>
|
||||
<div>
|
||||
<SelectorLanguageListbox />
|
||||
<NuxtLink
|
||||
class="mt-1 transition text-blue-500 hover:text-blue-600 text-sm"
|
||||
to="https://translate.droposs.org/engage/drop/"
|
||||
target="_blank"
|
||||
>
|
||||
<i18n-t
|
||||
keypath="helpUsTranslate"
|
||||
tag="span"
|
||||
scope="global"
|
||||
class="inline-flex items-center gap-x-1 hover:underline"
|
||||
>
|
||||
<template #arrow>
|
||||
<ArrowTopRightOnSquareIcon class="size-4" />
|
||||
</template>
|
||||
</i18n-t>
|
||||
</NuxtLink>
|
||||
|
||||
<DevOnly>
|
||||
<h1 class="mt-3 text-sm text-gray-500">{{ $t("welcome") }}</h1>
|
||||
</DevOnly>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ArrowTopRightOnSquareIcon } from "@heroicons/vue/24/outline";
|
||||
</script>
|
||||
@@ -0,0 +1,155 @@
|
||||
<template>
|
||||
<Listbox v-model="wiredLocale" as="div">
|
||||
<ListboxLabel
|
||||
v-if="showText"
|
||||
class="block text-sm/6 font-medium text-zinc-400"
|
||||
>{{ $t("selectLanguage") }}</ListboxLabel
|
||||
>
|
||||
<div class="relative mt-2">
|
||||
<ListboxButton
|
||||
class="grid w-full cursor-default grid-cols-1 rounded-md bg-zinc-900 py-1.5 pr-2 pl-3 text-left text-zinc-300 outline-1 -outline-offset-1 outline-zinc-700 focus:outline-2 focus:-outline-offset-2 focus:outline-blue-600 sm:text-sm/6"
|
||||
>
|
||||
<span class="col-start-1 row-start-1 flex items-center gap-3 pr-6">
|
||||
<EmojiText
|
||||
:emoji="localeToEmoji(wiredLocale)"
|
||||
class="-mt-0.5 shrink-0 max-w-6"
|
||||
/>
|
||||
<span class="block truncate">{{
|
||||
currentLocaleInformation?.name ?? wiredLocale
|
||||
}}</span>
|
||||
</span>
|
||||
<ChevronUpDownIcon
|
||||
class="col-start-1 row-start-1 size-5 self-center justify-self-end text-gray-500 sm:size-4"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
</ListboxButton>
|
||||
|
||||
<transition
|
||||
leave-active-class="transition ease-in duration-100"
|
||||
leave-from-class="opacity-100"
|
||||
leave-to-class="opacity-0"
|
||||
>
|
||||
<ListboxOptions
|
||||
class="absolute z-10 mt-1 max-h-56 w-full overflow-auto rounded-md bg-zinc-900 py-1 text-base shadow-lg ring-1 ring-black/5 focus:outline-hidden sm:text-sm"
|
||||
>
|
||||
<ListboxOption
|
||||
v-for="listLocale in locales"
|
||||
:key="listLocale.code"
|
||||
v-slot="{ active, selected }"
|
||||
as="template"
|
||||
:value="listLocale.code"
|
||||
>
|
||||
<li
|
||||
:class="[
|
||||
active
|
||||
? 'bg-blue-600 text-white outline-hidden'
|
||||
: 'text-zinc-300',
|
||||
'relative cursor-default py-2 pr-9 pl-3 select-none',
|
||||
]"
|
||||
>
|
||||
<div class="flex items-center">
|
||||
<EmojiText
|
||||
:emoji="localeToEmoji(listLocale.code)"
|
||||
class="-mt-0.5 shrink-0 max-w-6"
|
||||
/>
|
||||
<span
|
||||
:class="[
|
||||
selected ? 'font-semibold' : 'font-normal',
|
||||
'ml-3 block truncate',
|
||||
]"
|
||||
>{{ listLocale.name }}</span
|
||||
>
|
||||
</div>
|
||||
|
||||
<span
|
||||
v-if="selected"
|
||||
:class="[
|
||||
active ? 'text-white' : 'text-blue-600',
|
||||
'absolute inset-y-0 right-0 flex items-center pr-4',
|
||||
]"
|
||||
>
|
||||
<CheckIcon class="size-5" aria-hidden="true" />
|
||||
</span>
|
||||
</li>
|
||||
</ListboxOption>
|
||||
</ListboxOptions>
|
||||
</transition>
|
||||
</div>
|
||||
</Listbox>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import {
|
||||
Listbox,
|
||||
ListboxButton,
|
||||
ListboxLabel,
|
||||
ListboxOption,
|
||||
ListboxOptions,
|
||||
} from "@headlessui/vue";
|
||||
import { ChevronUpDownIcon } from "@heroicons/vue/16/solid";
|
||||
import { CheckIcon } from "@heroicons/vue/24/outline";
|
||||
import type { Locale } from "vue-i18n";
|
||||
|
||||
const { showText = true } = defineProps<{ showText?: boolean }>();
|
||||
|
||||
const { locales, locale: currLocale, setLocale } = useI18n();
|
||||
|
||||
function changeLocale(locale: Locale) {
|
||||
setLocale(locale);
|
||||
|
||||
// dynamically update the HTML attributes for language and direction
|
||||
// this is necessary for proper rendering of the page in the new language
|
||||
useHead({
|
||||
htmlAttrs: {
|
||||
lang: locale,
|
||||
dir: locales.value.find((l) => l.code === locale)?.dir || "ltr",
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
function localeToEmoji(local: string): string {
|
||||
switch (local) {
|
||||
// Default locale
|
||||
case "en":
|
||||
case "en-us":
|
||||
return "🇺🇸";
|
||||
|
||||
case "en-gb":
|
||||
return "🇬🇧";
|
||||
case "en-ca":
|
||||
return "🇨🇦";
|
||||
case "en-au":
|
||||
return "🇦🇺";
|
||||
case "en-pirate":
|
||||
return "🏴☠️";
|
||||
case "fr":
|
||||
return "🇫🇷";
|
||||
case "de":
|
||||
return "🇩🇪";
|
||||
case "es":
|
||||
return "🇪🇸";
|
||||
case "it":
|
||||
return "🇮🇹";
|
||||
case "zh":
|
||||
return "🇨🇳";
|
||||
case "zh-tw":
|
||||
return "🇹🇼";
|
||||
|
||||
default: {
|
||||
return "❓";
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const wiredLocale = computed({
|
||||
get() {
|
||||
return currLocale.value;
|
||||
},
|
||||
set(v) {
|
||||
changeLocale(v);
|
||||
},
|
||||
});
|
||||
const currentLocaleInformation = computed(() =>
|
||||
locales.value.find((e) => e.code == wiredLocale.value),
|
||||
);
|
||||
</script>
|
||||
@@ -0,0 +1,190 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="inline-flex gap-1 items-center flex-wrap">
|
||||
<span
|
||||
v-for="item in enabledItems"
|
||||
:key="item.param"
|
||||
class="inline-flex items-center gap-x-0.5 rounded-md bg-blue-600/10 px-2 py-1 text-xs font-medium text-blue-500 ring-1 ring-blue-800 ring-inset"
|
||||
>
|
||||
{{ item.name }}
|
||||
<button
|
||||
type="button"
|
||||
class="group relative -mr-1 size-3.5 rounded-xs hover:bg-blue-600/20"
|
||||
@click="() => remove(item.param)"
|
||||
>
|
||||
<span class="sr-only">{{ $t("common.remove") }}</span>
|
||||
<svg
|
||||
viewBox="0 0 14 14"
|
||||
class="size-3.5 stroke-blue-500 group-hover:stroke-blue-400"
|
||||
>
|
||||
<path d="M4 4l6 6m0-6l-6 6" />
|
||||
</svg>
|
||||
<span class="absolute -inset-1" />
|
||||
</button>
|
||||
</span>
|
||||
<span
|
||||
v-if="enabledItems.length == 0"
|
||||
class="font-display uppercase text-xs font-bold text-zinc-700"
|
||||
>
|
||||
{{ $t("common.noSelected") }}
|
||||
</span>
|
||||
</div>
|
||||
<Combobox as="div" @update:model-value="add">
|
||||
<div class="relative mt-2">
|
||||
<ComboboxInput
|
||||
class="block w-full rounded-md bg-zinc-900 py-1.5 pr-12 pl-3 text-base text-zinc-100 outline-1 -outline-offset-1 outline-zinc-700 placeholder:text-zinc-500 focus:outline-2 focus:-outline-offset-2 focus:outline-blue-600 sm:text-sm/6"
|
||||
:display-value="(item) => (item as StoreSortOption)?.name"
|
||||
:placeholder="$t('common.components.multiitem.placeholder')"
|
||||
@change="search = $event.target.value"
|
||||
@blur="search = ''"
|
||||
/>
|
||||
<ComboboxButton
|
||||
class="absolute inset-0 flex items-center justify-end rounded-r-md px-2 focus:outline-hidden"
|
||||
>
|
||||
<ChevronDownIcon class="size-5 text-gray-400" aria-hidden="true" />
|
||||
</ComboboxButton>
|
||||
|
||||
<ComboboxOptions
|
||||
v-if="filteredItems.length > 0 || search.length > 0"
|
||||
class="absolute z-50 mt-1 max-h-60 w-full overflow-auto rounded-md bg-zinc-900 py-1 text-base shadow-lg ring-1 ring-white/5 focus:outline-hidden sm:text-sm"
|
||||
>
|
||||
<ComboboxOption
|
||||
v-for="item in filteredItems"
|
||||
:key="item.param"
|
||||
v-slot="{ active }"
|
||||
:value="item.param"
|
||||
as="template"
|
||||
>
|
||||
<li
|
||||
:class="[
|
||||
'relative cursor-default py-2 pr-9 pl-3 select-none',
|
||||
active
|
||||
? 'bg-blue-600 text-white outline-hidden'
|
||||
: 'text-zinc-100',
|
||||
]"
|
||||
>
|
||||
<span class="block truncate">
|
||||
{{ item.name }}
|
||||
</span>
|
||||
</li>
|
||||
</ComboboxOption>
|
||||
<ComboboxOption
|
||||
v-if="$props.create"
|
||||
v-slot="{ active }"
|
||||
:value="CREATE_PREFIX + search"
|
||||
as="template"
|
||||
>
|
||||
<li
|
||||
:class="[
|
||||
'relative cursor-default py-2 pr-9 pl-3 select-none',
|
||||
active
|
||||
? 'bg-blue-600 text-white outline-hidden'
|
||||
: 'text-zinc-100',
|
||||
]"
|
||||
>
|
||||
<span class="block truncate">
|
||||
{{ $t("common.components.multiitem.new", [search]) }}
|
||||
</span>
|
||||
</li>
|
||||
</ComboboxOption>
|
||||
</ComboboxOptions>
|
||||
|
||||
<div
|
||||
v-if="createLoading"
|
||||
class="absolute inset-0 bg-zinc-950 flex items-center justify-center"
|
||||
>
|
||||
<div role="status">
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class="size-8 text-transparent animate-spin fill-white"
|
||||
viewBox="0 0 100 101"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
<path
|
||||
d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z"
|
||||
fill="currentFill"
|
||||
/>
|
||||
</svg>
|
||||
<span class="sr-only">{{ $t("common.srLoading") }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Combobox>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ChevronDownIcon } from "@heroicons/vue/20/solid";
|
||||
import {
|
||||
Combobox,
|
||||
ComboboxButton,
|
||||
ComboboxInput,
|
||||
ComboboxOption,
|
||||
ComboboxOptions,
|
||||
} from "@headlessui/vue";
|
||||
const props = defineProps<{
|
||||
items: Array<StoreSortOption>;
|
||||
create?: (value: string) => Promise<string>;
|
||||
}>();
|
||||
|
||||
const model = defineModel<{ [key: string]: boolean }>();
|
||||
|
||||
const search = ref("");
|
||||
const filteredItems = computed(() =>
|
||||
props.items.filter(
|
||||
(item) =>
|
||||
!model.value?.[item.param] &&
|
||||
item.name.toLowerCase().includes(search.value.toLowerCase()),
|
||||
),
|
||||
);
|
||||
|
||||
const enabledItems = computed(() =>
|
||||
props.items.filter((e) => model.value?.[e.param]),
|
||||
);
|
||||
|
||||
// I do not love how this works, but it's okay for now
|
||||
const CREATE_PREFIX = "CREATE";
|
||||
|
||||
const createLoading = ref(false);
|
||||
function add(item: string) {
|
||||
if (item.startsWith(CREATE_PREFIX)) {
|
||||
if (!props.create) return;
|
||||
const value = item.substring(CREATE_PREFIX.length);
|
||||
createLoading.value = true;
|
||||
props
|
||||
.create(value)
|
||||
.then(
|
||||
(result) => {
|
||||
add(result);
|
||||
},
|
||||
(err) => {
|
||||
createModal(
|
||||
ModalType.Notification,
|
||||
{
|
||||
title: "Failed to create value",
|
||||
description: err,
|
||||
},
|
||||
(_, c) => c(),
|
||||
);
|
||||
},
|
||||
)
|
||||
.finally(() => {
|
||||
createLoading.value = false;
|
||||
});
|
||||
return;
|
||||
}
|
||||
search.value = "";
|
||||
model.value ??= {};
|
||||
model.value[item] = true;
|
||||
}
|
||||
|
||||
function remove(item: string) {
|
||||
model.value ??= {};
|
||||
model.value[item] = false;
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,100 @@
|
||||
<template>
|
||||
<Listbox v-model="typedModel" as="div">
|
||||
<ListboxLabel class="block text-sm font-medium leading-6 text-zinc-100"
|
||||
><slot
|
||||
/></ListboxLabel>
|
||||
<div class="relative mt-2">
|
||||
<ListboxButton
|
||||
class="relative w-full cursor-default rounded-md bg-zinc-950 py-1.5 pl-3 pr-10 text-left text-zinc-100 shadow-sm ring-1 ring-inset ring-zinc-800 focus:outline-none focus:ring-2 focus:ring-blue-500 sm:text-sm sm:leading-6"
|
||||
>
|
||||
<span v-if="model" class="flex items-center">
|
||||
<component
|
||||
:is="PLATFORM_ICONS[model]"
|
||||
alt=""
|
||||
class="h-5 w-5 flex-shrink-0 text-blue-600"
|
||||
/>
|
||||
<span class="ml-3 block truncate">{{ model }}</span>
|
||||
</span>
|
||||
<span v-else>{{ $t("library.admin.import.selectPlatform") }}</span>
|
||||
<span
|
||||
class="pointer-events-none absolute inset-y-0 right-0 ml-3 flex items-center pr-2"
|
||||
>
|
||||
<ChevronUpDownIcon class="h-5 w-5 text-gray-400" aria-hidden="true" />
|
||||
</span>
|
||||
</ListboxButton>
|
||||
|
||||
<transition
|
||||
leave-active-class="transition ease-in duration-100"
|
||||
leave-from-class="opacity-100"
|
||||
leave-to-class="opacity-0"
|
||||
>
|
||||
<ListboxOptions
|
||||
class="absolute z-10 mt-1 max-h-56 w-full overflow-auto rounded-md bg-zinc-900 py-1 text-base shadow-lg ring-1 ring-zinc-950 ring-opacity-5 focus:outline-none sm:text-sm"
|
||||
>
|
||||
<ListboxOption
|
||||
v-for="[name, value] in values"
|
||||
:key="value"
|
||||
v-slot="{ active, selected }"
|
||||
as="template"
|
||||
:value="value"
|
||||
>
|
||||
<li
|
||||
:class="[
|
||||
active ? 'bg-blue-600 text-white' : 'text-zinc-100',
|
||||
'relative cursor-default select-none py-2 pl-3 pr-9',
|
||||
]"
|
||||
>
|
||||
<div class="flex items-center">
|
||||
<component
|
||||
:is="PLATFORM_ICONS[value]"
|
||||
alt=""
|
||||
:class="[
|
||||
active ? 'text-zinc-100' : 'text-blue-600',
|
||||
'h-5 w-5 flex-shrink-0',
|
||||
]"
|
||||
/>
|
||||
<span class="ml-3 block truncate">{{ name }}</span>
|
||||
</div>
|
||||
|
||||
<span
|
||||
v-if="selected"
|
||||
:class="[
|
||||
active ? 'text-white' : 'text-blue-600',
|
||||
'absolute inset-y-0 right-0 flex items-center pr-4',
|
||||
]"
|
||||
>
|
||||
<CheckIcon class="h-5 w-5" aria-hidden="true" />
|
||||
</span>
|
||||
</li>
|
||||
</ListboxOption>
|
||||
</ListboxOptions>
|
||||
</transition>
|
||||
</div>
|
||||
</Listbox>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import {
|
||||
Listbox,
|
||||
ListboxButton,
|
||||
ListboxLabel,
|
||||
ListboxOption,
|
||||
ListboxOptions,
|
||||
} from "@headlessui/vue";
|
||||
import { CheckIcon, ChevronUpDownIcon } from "@heroicons/vue/20/solid";
|
||||
import { Platform } from "~/prisma/client/enums";
|
||||
|
||||
const model = defineModel<Platform | undefined>();
|
||||
|
||||
const typedModel = computed<Platform | null>({
|
||||
get() {
|
||||
return model.value || null;
|
||||
},
|
||||
set(v) {
|
||||
if (v === null) return (model.value = undefined);
|
||||
model.value = v;
|
||||
},
|
||||
});
|
||||
|
||||
const values = Object.entries(Platform);
|
||||
</script>
|
||||
@@ -0,0 +1,159 @@
|
||||
<template>
|
||||
<div class="p-2 lg:p-4">
|
||||
<div class="px-4 py-2 max-w-xl">
|
||||
<h1 class="font-semibold text-zinc-100 text-xl">
|
||||
{{ $t("setup.auth.title") }}
|
||||
</h1>
|
||||
<p class="mt-2 text-sm text-zinc-400">
|
||||
{{ $t("setup.auth.description") }}
|
||||
</p>
|
||||
</div>
|
||||
<div class="grid lg:grid-cols-2 xl:grid-cols-3 h-fit p-4 gap-4">
|
||||
<div class="p-4 border-1 border-zinc-800 rounded-xl">
|
||||
<div>
|
||||
<h1 class="text-zinc-100 font-semibold text-lg">
|
||||
{{ $t("setup.auth.simple.title") }}
|
||||
</h1>
|
||||
<p class="text-sm text-zinc-400">
|
||||
{{ $t("setup.auth.simple.description") }}
|
||||
</p>
|
||||
<NuxtLink
|
||||
class="mt-4 rounded-md inline-flex items-center text-sm font-semibold text-blue-500 hover:text-blue-600 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-500"
|
||||
href="https://docs.droposs.org/docs/authentication/simple"
|
||||
target="_blank"
|
||||
>
|
||||
<i18n-t
|
||||
keypath="setup.auth.docs"
|
||||
tag="span"
|
||||
class="inline-flex items-center gap-x-1"
|
||||
scope="global"
|
||||
>
|
||||
<template #arrow>
|
||||
<ArrowTopRightOnSquareIcon class="size-4" />
|
||||
</template>
|
||||
</i18n-t>
|
||||
</NuxtLink>
|
||||
</div>
|
||||
<div class="mt-4">
|
||||
<div class="w-full flex justify-between items-center">
|
||||
<span class="text-zinc-100 font-semibold text-sm">{{
|
||||
$t("setup.auth.enabled")
|
||||
}}</span>
|
||||
<CheckIcon
|
||||
v-if="enabledAuth.Simple"
|
||||
class="size-5 text-green-600"
|
||||
/>
|
||||
<XMarkIcon v-else class="size-5 text-red-600" />
|
||||
</div>
|
||||
<LoadingButton
|
||||
class="mt-4"
|
||||
:loading="invitationLoading"
|
||||
:disabled="!enabledAuth.Simple"
|
||||
@click="() => registerAsAdmin()"
|
||||
>
|
||||
<i18n-t
|
||||
keypath="setup.auth.simple.register"
|
||||
tag="span"
|
||||
class="inline-flex items-center gap-x-1"
|
||||
scope="global"
|
||||
>
|
||||
<template #arrow>
|
||||
{{ $t("chars.arrow") }}
|
||||
</template>
|
||||
</i18n-t>
|
||||
</LoadingButton>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-4 border-1 border-zinc-800 rounded-xl">
|
||||
<div>
|
||||
<h1 class="text-zinc-100 font-semibold text-lg">
|
||||
{{ $t("setup.auth.openid.title") }}
|
||||
</h1>
|
||||
<p class="text-sm text-zinc-400">
|
||||
{{ $t("setup.auth.openid.description") }}
|
||||
</p>
|
||||
<NuxtLink
|
||||
class="mt-4 rounded-md inline-flex items-center text-sm font-semibold text-blue-500 hover:text-blue-600 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-500"
|
||||
href="https://docs.droposs.org/docs/authentication/oidc"
|
||||
target="_blank"
|
||||
>
|
||||
<i18n-t
|
||||
keypath="setup.auth.docs"
|
||||
tag="span"
|
||||
class="inline-flex items-center gap-x-1"
|
||||
scope="global"
|
||||
>
|
||||
<template #arrow>
|
||||
<ArrowTopRightOnSquareIcon class="size-4" />
|
||||
</template>
|
||||
</i18n-t>
|
||||
</NuxtLink>
|
||||
</div>
|
||||
<div class="mt-4">
|
||||
<div class="w-full flex justify-between items-center">
|
||||
<span class="text-zinc-100 font-semibold text-sm">{{
|
||||
$t("setup.auth.enabled")
|
||||
}}</span>
|
||||
<CheckIcon
|
||||
v-if="enabledAuth.OpenID"
|
||||
class="size-5 text-green-600"
|
||||
/>
|
||||
<XMarkIcon v-else class="size-5 text-red-600" />
|
||||
</div>
|
||||
<LoadingButton
|
||||
class="mt-4"
|
||||
:loading="false"
|
||||
:disabled="!enabledAuth.OpenID"
|
||||
@click="() => (complete = true)"
|
||||
>
|
||||
<i18n-t
|
||||
keypath="setup.auth.openid.skip"
|
||||
tag="span"
|
||||
class="inline-flex items-center gap-x-1"
|
||||
scope="global"
|
||||
>
|
||||
<template #arrow>
|
||||
{{ $t("chars.arrow") }}
|
||||
</template>
|
||||
</i18n-t>
|
||||
</LoadingButton>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import {
|
||||
ArrowTopRightOnSquareIcon,
|
||||
CheckIcon,
|
||||
XMarkIcon,
|
||||
} from "@heroicons/vue/24/outline";
|
||||
import { DateTime } from "luxon";
|
||||
|
||||
const complete = defineModel<boolean>({ required: true });
|
||||
|
||||
const { token } = defineProps<{ token: string }>();
|
||||
|
||||
const invitationLoading = ref(false);
|
||||
|
||||
const enabledAuth = await $dropFetch("/api/v1/admin/auth", {
|
||||
headers: { Authorization: token },
|
||||
});
|
||||
|
||||
async function registerAsAdmin() {
|
||||
invitationLoading.value = true;
|
||||
const expiryDate = DateTime.now().plus({ year: 5000 }).toJSON();
|
||||
|
||||
const invitation = await $dropFetch("/api/v1/admin/auth/invitation", {
|
||||
method: "POST",
|
||||
body: { isAdmin: true, expires: expiryDate },
|
||||
headers: { Authorization: token },
|
||||
failTitle: "Failed to create admin invitation",
|
||||
});
|
||||
|
||||
window.open(`${invitation.inviteUrl}&after=close`, "_blank")?.focus();
|
||||
invitationLoading.value = false;
|
||||
complete.value = true;
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,15 @@
|
||||
<template>
|
||||
<div class="p-8">
|
||||
<AdminSourcesPage :token="token" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import AdminSourcesPage from "~/pages/admin/library/sources/index.vue";
|
||||
|
||||
const complete = defineModel<boolean>({ required: true });
|
||||
// Only runs on component load, so it's fine
|
||||
complete.value = true;
|
||||
|
||||
const { token } = defineProps<{ token: string }>();
|
||||
</script>
|
||||
@@ -0,0 +1,19 @@
|
||||
<template>
|
||||
<div
|
||||
:class="[
|
||||
'rounded-lg w-48 h-64 bg-zinc-800/50 flex items-center justify-center transition-all duration-300 hover:bg-zinc-800',
|
||||
props.loading && 'animate-pulse',
|
||||
]"
|
||||
>
|
||||
<p class="text-zinc-700 text-sm font-semibold font-display uppercase">
|
||||
{{ props.message }}
|
||||
</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
const props = defineProps<{
|
||||
message?: string;
|
||||
loading?: boolean;
|
||||
}>();
|
||||
</script>
|
||||
@@ -0,0 +1,27 @@
|
||||
<template>
|
||||
<div>
|
||||
<label
|
||||
for="path"
|
||||
class="block text-sm font-medium leading-6 text-zinc-100"
|
||||
>{{ $t("library.admin.sources.fsPath") }}</label
|
||||
>
|
||||
<p class="text-zinc-400 block text-xs font-medium leading-6">
|
||||
{{ $t("library.admin.sources.fsPathDesc") }}
|
||||
</p>
|
||||
<div class="mt-2">
|
||||
<input
|
||||
id="path"
|
||||
v-model="model!.baseDir"
|
||||
name="path"
|
||||
type="text"
|
||||
autocomplete="path"
|
||||
:placeholder="$t('library.admin.sources.fsPathPlaceholder')"
|
||||
class="block w-full rounded-md border-0 py-1.5 px-3 bg-zinc-800 disabled:bg-zinc-900/80 text-zinc-100 disabled:text-zinc-400 shadow-sm ring-1 ring-inset ring-zinc-700 disabled:ring-zinc-800 placeholder:text-zinc-400 focus:ring-2 focus:ring-inset focus:ring-blue-600 sm:text-sm sm:leading-6"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
const model = defineModel<{ baseDir: string }>();
|
||||
</script>
|
||||
@@ -0,0 +1,27 @@
|
||||
<template>
|
||||
<div>
|
||||
<label
|
||||
for="path"
|
||||
class="block text-sm font-medium leading-6 text-zinc-100"
|
||||
>{{ $t("library.admin.sources.fsPath") }}</label
|
||||
>
|
||||
<p class="text-zinc-400 block text-xs font-medium leading-6">
|
||||
{{ $t("library.admin.sources.fsPathDesc") }}
|
||||
</p>
|
||||
<div class="mt-2">
|
||||
<input
|
||||
id="path"
|
||||
v-model="model!.baseDir"
|
||||
name="path"
|
||||
type="text"
|
||||
autocomplete="path"
|
||||
:placeholder="$t('library.admin.sources.fsPathPlaceholder')"
|
||||
class="block w-full rounded-md border-0 py-1.5 px-3 bg-zinc-800 disabled:bg-zinc-900/80 text-zinc-100 disabled:text-zinc-400 shadow-sm ring-1 ring-inset ring-zinc-700 disabled:ring-zinc-800 placeholder:text-zinc-400 focus:ring-2 focus:ring-inset focus:ring-blue-600 sm:text-sm sm:leading-6"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
const model = defineModel<{ baseDir: string }>();
|
||||
</script>
|
||||
@@ -0,0 +1,187 @@
|
||||
<template>
|
||||
<div class="-mx-4 -my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
|
||||
<div class="inline-block min-w-full py-2 align-middle sm:px-6 lg:px-8">
|
||||
<table class="min-w-full divide-y divide-zinc-700">
|
||||
<thead>
|
||||
<tr>
|
||||
<th
|
||||
scope="col"
|
||||
class="py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-zinc-100 sm:pl-3"
|
||||
>
|
||||
{{ $t("common.name") }}
|
||||
</th>
|
||||
<th
|
||||
scope="col"
|
||||
class="px-3 py-3.5 text-left text-sm font-semibold text-zinc-100"
|
||||
>
|
||||
{{ $t("type") }}
|
||||
</th>
|
||||
<th
|
||||
scope="col"
|
||||
class="px-3 py-3.5 text-left text-sm font-semibold text-zinc-100"
|
||||
>
|
||||
{{ $t("library.admin.sources.working") }}
|
||||
</th>
|
||||
<th
|
||||
scope="col"
|
||||
class="px-3 py-3.5 text-left text-sm font-semibold text-zinc-100"
|
||||
>
|
||||
{{ $t("options") }}
|
||||
</th>
|
||||
<th
|
||||
scope="col"
|
||||
class="px-3 py-3.5 text-left text-sm font-semibold text-zinc-100"
|
||||
>
|
||||
{{ $t("library.admin.sources.totalSpace") }}
|
||||
</th>
|
||||
<th
|
||||
scope="col"
|
||||
class="px-3 py-3.5 text-left text-sm font-semibold text-zinc-100"
|
||||
>
|
||||
{{ $t("library.admin.sources.freeSpace") }}
|
||||
</th>
|
||||
<th
|
||||
scope="col"
|
||||
class="px-3 py-3.5 text-left text-sm font-semibold text-zinc-100"
|
||||
>
|
||||
{{ $t("library.admin.sources.utilizationPercentage") }}
|
||||
</th>
|
||||
<th
|
||||
v-if="editSource || deleteSource"
|
||||
scope="col"
|
||||
class="relative py-3.5 pl-3 pr-4 sm:pr-3"
|
||||
>
|
||||
<span class="sr-only">{{ $t("actions") }}</span>
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="(source, sourceIdx) in sources" :key="source.id">
|
||||
<td
|
||||
class="whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-zinc-100 sm:pl-3"
|
||||
>
|
||||
{{ source.name }}
|
||||
</td>
|
||||
<td
|
||||
class="whitespace-nowrap px-3 py-4 text-sm text-zinc-400 flex gap-x-1 items-center"
|
||||
>
|
||||
<component
|
||||
:is="optionsMetadata[source.backend].icon"
|
||||
class="size-5 text-zinc-400"
|
||||
/>
|
||||
{{ optionsMetadata[source.backend].title }}
|
||||
</td>
|
||||
<td class="whitespace-nowrap px-3 py-4 text-sm text-zinc-400">
|
||||
<CheckIcon v-if="source.working" class="size-5 text-green-500" />
|
||||
<XMarkIcon v-else class="size-5 text-red-500" />
|
||||
</td>
|
||||
<td class="whitespace-nowrap px-3 py-4 text-sm text-zinc-400">
|
||||
{{ source.options }}
|
||||
</td>
|
||||
<td class="whitespace-nowrap px-3 py-4 text-sm text-zinc-400">
|
||||
{{ source.fsStats && formatBytes(source.fsStats.totalSpace) }}
|
||||
</td>
|
||||
<td class="whitespace-nowrap px-3 py-4 text-sm text-zinc-400">
|
||||
{{ source.fsStats && formatBytes(source.fsStats.freeSpace) }}
|
||||
</td>
|
||||
<td
|
||||
class="align-middle flex flex-cols-5 whitespace-nowrap px-3 py-4 text-sm text-zinc-400"
|
||||
>
|
||||
<div class="flex-auto content-right">
|
||||
<ProgressBar
|
||||
v-if="source.fsStats"
|
||||
:percentage="
|
||||
getPercentage(
|
||||
source.fsStats.totalSpace - source.fsStats.freeSpace,
|
||||
source.fsStats.totalSpace,
|
||||
)
|
||||
"
|
||||
:color="
|
||||
getBarColor(
|
||||
getPercentage(
|
||||
source.fsStats.totalSpace - source.fsStats.freeSpace,
|
||||
source.fsStats.totalSpace,
|
||||
),
|
||||
)
|
||||
"
|
||||
background-color="slate"
|
||||
/>
|
||||
</div>
|
||||
</td>
|
||||
<td
|
||||
v-if="editSource || deleteSource"
|
||||
class="relative whitespace-nowrap py-4 pl-3 pr-3 text-right text-sm font-medium space-x-2"
|
||||
>
|
||||
<button
|
||||
v-if="editSource"
|
||||
class="text-blue-500 hover:text-blue-400"
|
||||
@click="() => editSource(sourceIdx)"
|
||||
>
|
||||
{{ $t("common.edit") }}
|
||||
<span class="sr-only">
|
||||
{{ $t("chars.srComma", [source.name]) }}
|
||||
</span>
|
||||
</button>
|
||||
|
||||
<button
|
||||
v-if="deleteSource"
|
||||
class="text-red-500 hover:text-red-400"
|
||||
@click="() => deleteSource(sourceIdx)"
|
||||
>
|
||||
{{ $t("common.delete") }}
|
||||
<span class="sr-only">
|
||||
{{ $t("chars.srComma", [source.name]) }}
|
||||
</span>
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import type { WorkingLibrarySource } from "~/server/api/v1/admin/library/sources/index.get";
|
||||
import type { LibraryBackend } from "~/prisma/client/enums";
|
||||
import { BackwardIcon, CheckIcon, XMarkIcon } from "@heroicons/vue/24/outline";
|
||||
import { DropLogo } from "#components";
|
||||
import { formatBytes } from "~/server/internal/utils/files";
|
||||
import { getBarColor } from "~/utils/colors";
|
||||
import { getPercentage } from "~/utils/utils";
|
||||
|
||||
const {
|
||||
sources,
|
||||
deleteSource = undefined,
|
||||
editSource = undefined,
|
||||
} = defineProps<{
|
||||
sources: WorkingLibrarySource[];
|
||||
summaryMode?: boolean;
|
||||
deleteSource?: (id: number) => void;
|
||||
editSource?: (id: number) => void;
|
||||
}>();
|
||||
|
||||
const { t } = useI18n();
|
||||
|
||||
const optionsMetadata: {
|
||||
[key in LibraryBackend]: {
|
||||
title: string;
|
||||
description: string;
|
||||
docsLink: string;
|
||||
icon: Component;
|
||||
};
|
||||
} = {
|
||||
Filesystem: {
|
||||
title: t("library.admin.sources.fsTitle"),
|
||||
description: t("library.admin.sources.fsDesc"),
|
||||
docsLink: "https://docs.droposs.org/docs/library#drop-style",
|
||||
icon: DropLogo,
|
||||
},
|
||||
FlatFilesystem: {
|
||||
title: t("library.admin.sources.fsFlatTitle"),
|
||||
description: t("library.admin.sources.fsFlatDesc"),
|
||||
docsLink: "https://docs.droposs.org/docs/library#flat-style-or-compat",
|
||||
icon: BackwardIcon,
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,524 @@
|
||||
<i18n>
|
||||
{
|
||||
"en": {
|
||||
"↓": "↓",
|
||||
"↑": "↑"
|
||||
}
|
||||
}
|
||||
</i18n>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<div>
|
||||
<!-- Mobile filter dialog -->
|
||||
<TransitionRoot as="template" :show="mobileFiltersOpen">
|
||||
<Dialog
|
||||
class="relative z-100 lg:hidden"
|
||||
@close="mobileFiltersOpen = false"
|
||||
>
|
||||
<TransitionChild
|
||||
as="template"
|
||||
enter="transition-opacity ease-linear duration-300"
|
||||
enter-from="opacity-0"
|
||||
enter-to="opacity-100"
|
||||
leave="transition-opacity ease-linear duration-300"
|
||||
leave-from="opacity-100"
|
||||
leave-to="opacity-0"
|
||||
>
|
||||
<div class="fixed inset-0 bg-black/25" />
|
||||
</TransitionChild>
|
||||
|
||||
<div class="fixed inset-0 z-40 flex">
|
||||
<TransitionChild
|
||||
as="template"
|
||||
enter="transition ease-in-out duration-300 transform"
|
||||
enter-from="translate-x-full"
|
||||
enter-to="translate-x-0"
|
||||
leave="transition ease-in-out duration-300 transform"
|
||||
leave-from="translate-x-0"
|
||||
leave-to="translate-x-full"
|
||||
>
|
||||
<DialogPanel
|
||||
class="relative ml-auto flex size-full max-w-sm flex-col overflow-y-auto bg-zinc-900 pt-4 pb-6 shadow-xl"
|
||||
>
|
||||
<div class="flex items-center justify-between px-4">
|
||||
<h2 class="text-lg font-medium text-zinc-100">
|
||||
{{ $t("store.view.srFilters") }}
|
||||
</h2>
|
||||
<button
|
||||
type="button"
|
||||
class="relative -mr-2 flex size-10 items-center justify-center rounded-md bg-zinc-900 p-2 text-zinc-500 hover:bg-zinc-800 focus:ring-2 focus:ring-blue-500 focus:outline-hidden"
|
||||
@click="mobileFiltersOpen = false"
|
||||
>
|
||||
<span class="absolute -inset-0.5" />
|
||||
<span class="sr-only">{{ $t("common.close") }}</span>
|
||||
<XMarkIcon class="size-6" aria-hidden="true" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Filters -->
|
||||
<form class="mt-4 border-t border-zinc-700">
|
||||
<Disclosure
|
||||
v-for="section in options"
|
||||
v-slot="{ open }"
|
||||
:key="section.param"
|
||||
as="div"
|
||||
class="border-t border-zinc-700 px-4 py-6"
|
||||
>
|
||||
<h3 class="-mx-2 -my-3 flow-root">
|
||||
<DisclosureButton
|
||||
class="flex w-full items-center justify-between bg-zinc-900 px-2 py-3 text-zinc-500 hover:text-zinc-400"
|
||||
>
|
||||
<span class="font-medium text-zinc-100">{{
|
||||
section.name
|
||||
}}</span>
|
||||
<span class="ml-6 flex items-center">
|
||||
<PlusIcon
|
||||
v-if="!open"
|
||||
class="size-5"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
<MinusIcon v-else class="size-5" aria-hidden="true" />
|
||||
</span>
|
||||
</DisclosureButton>
|
||||
</h3>
|
||||
<DisclosurePanel class="pt-6">
|
||||
<div
|
||||
v-if="section.options.length <= 10"
|
||||
class="gap-3 grid grid-cols-2"
|
||||
>
|
||||
<div
|
||||
v-for="(option, optionIdx) in section.options"
|
||||
:key="option.param"
|
||||
class="flex gap-3"
|
||||
>
|
||||
<div class="flex h-5 shrink-0 items-center">
|
||||
<div class="group grid size-4 grid-cols-1">
|
||||
<input
|
||||
v-if="section.multiple"
|
||||
:id="`filter-${section.param}-${option}`"
|
||||
v-model="
|
||||
(optionValues[section.param] as any)[
|
||||
option.param
|
||||
]
|
||||
"
|
||||
:name="`${section.param}[]`"
|
||||
type="checkbox"
|
||||
class="col-start-1 row-start-1 appearance-none rounded-sm border border-zinc-700 bg-zinc-900 checked:border-blue-600 checked:bg-blue-600 indeterminate:border-blue-600 indeterminate:bg-blue-600 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600 disabled:border-gray-300 disabled:bg-gray-100 disabled:checked:bg-gray-100 forced-colors:appearance-auto"
|
||||
/>
|
||||
<input
|
||||
v-else
|
||||
:id="`filter-${section.param}`"
|
||||
:value="optionValues[section.param]"
|
||||
:name="`${section.param}[]`"
|
||||
type="checkbox"
|
||||
class="col-start-1 row-start-1 appearance-none rounded-sm border border-gray-300 bg-white checked:border-blue-600 checked:bg-blue-600 indeterminate:border-blue-600 indeterminate:bg-blue-600 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600 disabled:border-gray-300 disabled:bg-gray-100 disabled:checked:bg-gray-100 forced-colors:appearance-auto"
|
||||
@update:value="
|
||||
() =>
|
||||
(optionValues[section.param] = option.param)
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<label
|
||||
:for="`filter-mobile-${section.param}-${optionIdx}`"
|
||||
class="min-w-0 flex-1 text-zinc-400"
|
||||
>{{ option.name }}</label
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<SelectorMultiItem
|
||||
v-else
|
||||
v-model="[optionValues[section.param] as any][0]"
|
||||
:items="section.options"
|
||||
/>
|
||||
</DisclosurePanel>
|
||||
</Disclosure>
|
||||
</form>
|
||||
</DialogPanel>
|
||||
</TransitionChild>
|
||||
</div>
|
||||
</Dialog>
|
||||
</TransitionRoot>
|
||||
|
||||
<main class="mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div
|
||||
class="flex items-baseline justify-between border-b border-zinc-700 py-6"
|
||||
>
|
||||
<div />
|
||||
<div class="flex items-center">
|
||||
<Menu as="div" class="relative inline-block text-left">
|
||||
<div>
|
||||
<MenuButton
|
||||
class="group inline-flex justify-center text-sm font-medium text-zinc-400 hover:text-zinc-100"
|
||||
>
|
||||
{{ $t("store.view.sort") }}
|
||||
<ChevronDownIcon
|
||||
class="-mr-1 ml-1 size-5 shrink-0 text-gray-400 group-hover:text-zinc-100"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
</MenuButton>
|
||||
</div>
|
||||
|
||||
<transition
|
||||
enter-active-class="transition ease-out duration-100"
|
||||
enter-from-class="transform opacity-0 scale-95"
|
||||
enter-to-class="transform opacity-100 scale-100"
|
||||
leave-active-class="transition ease-in duration-75"
|
||||
leave-from-class="transform opacity-100 scale-100"
|
||||
leave-to-class="transform opacity-0 scale-95"
|
||||
>
|
||||
<MenuItems
|
||||
class="absolute right-0 z-10 mt-2 w-40 origin-top-right rounded-md bg-zinc-950 shadow-2xl ring-1 ring-white/5 focus:outline-hidden"
|
||||
>
|
||||
<div class="py-1">
|
||||
<MenuItem
|
||||
v-for="option in sorts"
|
||||
:key="option.param"
|
||||
v-slot="{ active }"
|
||||
>
|
||||
<button
|
||||
:class="[
|
||||
currentSort == option.param
|
||||
? 'font-medium text-zinc-100'
|
||||
: 'text-zinc-400',
|
||||
active ? 'bg-zinc-900 outline-hidden' : '',
|
||||
'w-full text-left block px-4 py-2 text-sm',
|
||||
]"
|
||||
@click.prevent="handleSortClick(option, $event)"
|
||||
>
|
||||
{{ option.name }}
|
||||
<span v-if="currentSort === option.param">
|
||||
{{
|
||||
sortOrder === "asc"
|
||||
? $t("chars.arrowUp")
|
||||
: $t("chars.arrowDown")
|
||||
}}
|
||||
</span>
|
||||
</button>
|
||||
</MenuItem>
|
||||
</div>
|
||||
</MenuItems>
|
||||
</transition>
|
||||
</Menu>
|
||||
|
||||
<button
|
||||
v-if="false"
|
||||
type="button"
|
||||
class="-m-2 ml-5 p-2 text-zinc-500 hover:text-zinc-400 sm:ml-7"
|
||||
>
|
||||
<span class="sr-only">{{ $t("store.view.srViewGrid") }}</span>
|
||||
<Squares2X2Icon class="size-5" aria-hidden="true" />
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
:class="[
|
||||
'-m-2 ml-4 p-2 sm:ml-6 lg:hidden',
|
||||
filterQuery
|
||||
? 'text-zinc-100 hover:text-zinc-200'
|
||||
: 'text-zinc-500 hover:text-zinc-400',
|
||||
]"
|
||||
@click="mobileFiltersOpen = true"
|
||||
>
|
||||
<span class="sr-only"> {{ $t("store.view.srFilters") }} </span>
|
||||
<FunnelIcon class="size-5" aria-hidden="true" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<section aria-labelledby="games-heading" class="pt-6 pb-24">
|
||||
<h2 id="games-heading" class="sr-only">
|
||||
{{ $t("store.view.srGames") }}
|
||||
</h2>
|
||||
|
||||
<div class="grid grid-cols-1 gap-x-8 gap-y-10 lg:grid-cols-5">
|
||||
<!-- Filters -->
|
||||
<form class="hidden lg:block">
|
||||
<Disclosure
|
||||
v-for="section in options"
|
||||
:key="section.param"
|
||||
v-slot="{ open }"
|
||||
as="div"
|
||||
class="border-b border-zinc-700 py-6"
|
||||
>
|
||||
<h3 class="-my-3 flow-root">
|
||||
<DisclosureButton
|
||||
class="flex w-full items-center justify-between bg-zinc-900 py-3 text-sm text-zinc-500 hover:text-zinc-400"
|
||||
>
|
||||
<span class="font-medium text-zinc-100">{{
|
||||
section.name
|
||||
}}</span>
|
||||
<span class="ml-6 flex items-center">
|
||||
<PlusIcon
|
||||
v-if="!open"
|
||||
class="size-5"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
<MinusIcon v-else class="size-5" aria-hidden="true" />
|
||||
</span>
|
||||
</DisclosureButton>
|
||||
</h3>
|
||||
<DisclosurePanel class="pt-6">
|
||||
<div v-if="section.options.length <= 10" class="space-y-4">
|
||||
<div
|
||||
v-for="(option, optionIdx) in section.options"
|
||||
:key="option.param"
|
||||
class="flex gap-3"
|
||||
>
|
||||
<div class="flex h-5 shrink-0 items-center">
|
||||
<div class="group grid size-4 grid-cols-1">
|
||||
<input
|
||||
v-if="section.multiple"
|
||||
:id="`filter-${section.param}-${optionIdx}`"
|
||||
v-model="
|
||||
(optionValues[section.param] as any)[option.param]
|
||||
"
|
||||
:name="`${section.param}[]`"
|
||||
type="checkbox"
|
||||
class="col-start-1 row-start-1 appearance-none rounded-sm border border-zinc-700 bg-zinc-800 checked:border-blue-600 checked:bg-blue-600 indeterminate:border-blue-600 indeterminate:bg-blue-600 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600 disabled:border-gray-300 disabled:bg-gray-100 disabled:checked:bg-gray-100 forced-colors:appearance-auto"
|
||||
/>
|
||||
<input
|
||||
v-else
|
||||
:id="`filter-${section.param}-${optionIdx}`"
|
||||
:value="optionValues[section.param]"
|
||||
:name="`${section.param}[]`"
|
||||
type="radio"
|
||||
class="col-start-1 row-start-1 appearance-none rounded-sm border border-zinc-700 bg-zinc-800 checked:border-blue-600 checked:bg-blue-600 indeterminate:border-blue-600 indeterminate:bg-blue-600 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600 disabled:border-gray-300 disabled:bg-gray-100 disabled:checked:bg-gray-100 forced-colors:appearance-auto"
|
||||
@input="optionValues[section.param] = option.param"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<label
|
||||
:for="`filter-${section.param}-${optionIdx}`"
|
||||
class="text-sm text-zinc-400"
|
||||
>{{ option.name }}</label
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<SelectorMultiItem
|
||||
v-else
|
||||
v-model="[optionValues[section.param] as any][0]"
|
||||
:items="section.options"
|
||||
/>
|
||||
</DisclosurePanel>
|
||||
</Disclosure>
|
||||
</form>
|
||||
|
||||
<!-- Product grid -->
|
||||
<div
|
||||
v-if="games?.length ?? 0 > 0"
|
||||
ref="product-grid"
|
||||
class="col-span-4 grid gap-5 grid-cols-[repeat(auto-fill,minmax(150px,auto))]"
|
||||
>
|
||||
<!-- Your content -->
|
||||
<GamePanel
|
||||
v-for="game in games"
|
||||
:key="game.id"
|
||||
:game="game"
|
||||
:href="`/store/${game.id}`"
|
||||
:show-title-description="showGamePanelTextDecoration"
|
||||
/>
|
||||
<div
|
||||
v-if="loading"
|
||||
class="absolute inset-0 bg-zinc-900/40 flex items-center justify-center"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class="w-8 h-8 text-transparent animate-spin fill-blue-600"
|
||||
viewBox="0 0 100 101"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
<path
|
||||
d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z"
|
||||
fill="currentFill"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else class="flex lg:col-span-4 items-start justify-center">
|
||||
<span class="uppercase text-zinc-700 font-display font-bold">{{
|
||||
$t("common.noResults")
|
||||
}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import {
|
||||
Dialog,
|
||||
DialogPanel,
|
||||
Disclosure,
|
||||
DisclosureButton,
|
||||
DisclosurePanel,
|
||||
Menu,
|
||||
MenuButton,
|
||||
MenuItem,
|
||||
MenuItems,
|
||||
TransitionChild,
|
||||
TransitionRoot,
|
||||
} from "@headlessui/vue";
|
||||
import { XMarkIcon } from "@heroicons/vue/24/outline";
|
||||
import {
|
||||
ChevronDownIcon,
|
||||
FunnelIcon,
|
||||
MinusIcon,
|
||||
PlusIcon,
|
||||
Squares2X2Icon,
|
||||
} from "@heroicons/vue/20/solid";
|
||||
import type { SerializeObject } from "nitropack";
|
||||
import type { GameModel, GameTagModel } from "~/prisma/client/models";
|
||||
import { Platform } from "~/prisma/client/enums";
|
||||
const {
|
||||
store: { showGamePanelTextDecoration },
|
||||
} = await $dropFetch(`/api/v1/settings`);
|
||||
|
||||
const mobileFiltersOpen = ref(false);
|
||||
|
||||
const props = defineProps<{
|
||||
params?: { [key: string]: string };
|
||||
extraOptions?: Array<StoreFilterOption>;
|
||||
prefilled?: {
|
||||
[key: string]: { [key: string]: string | { [key: string]: boolean } };
|
||||
};
|
||||
}>();
|
||||
|
||||
const tags =
|
||||
await $dropFetch<Array<SerializeObject<GameTagModel>>>("/api/v1/store/tags");
|
||||
|
||||
const sorts: Array<StoreSortOption> = [
|
||||
{
|
||||
name: "Default",
|
||||
param: "default",
|
||||
},
|
||||
{
|
||||
name: "Newest",
|
||||
param: "newest",
|
||||
},
|
||||
{
|
||||
name: "Recently Added",
|
||||
param: "recent",
|
||||
},
|
||||
{
|
||||
name: "Name",
|
||||
param: "name",
|
||||
},
|
||||
];
|
||||
const currentSort = ref(sorts[0].param);
|
||||
const sortOrder = ref<"asc" | "desc">("desc");
|
||||
|
||||
const options: Array<StoreFilterOption> = [
|
||||
...(tags.length > 0
|
||||
? [
|
||||
{
|
||||
name: "Tags",
|
||||
param: "tags",
|
||||
multiple: true,
|
||||
options: tags.map((e) => ({ name: e.name, param: e.id })),
|
||||
},
|
||||
]
|
||||
: []),
|
||||
{
|
||||
name: "Platform",
|
||||
param: "platform",
|
||||
multiple: true,
|
||||
options: Object.values(Platform).map((e) => ({ name: e, param: e })),
|
||||
},
|
||||
...(props.extraOptions ?? []),
|
||||
];
|
||||
const optionValues = ref<{
|
||||
[key: string]: string | undefined | { [key: string]: boolean | undefined };
|
||||
}>(
|
||||
Object.fromEntries(
|
||||
options.map((v) => [v.param, v.multiple ? {} : undefined]),
|
||||
),
|
||||
);
|
||||
Object.assign(optionValues.value, props.prefilled);
|
||||
|
||||
const filterQuery = computed(() => {
|
||||
const query = Object.entries(optionValues.value)
|
||||
.filter(
|
||||
([_, v]) =>
|
||||
v &&
|
||||
(typeof v !== "object" || Object.values(v).filter((e) => e).length > 0),
|
||||
)
|
||||
.map(([n, v]) => {
|
||||
if (typeof v === "string") return [`${n}=${v}`];
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
const enabledOptions = Object.entries(v as any).filter(([_, e]) => e);
|
||||
return `${n}=${enabledOptions.map(([k, _]) => k).join(",")}`;
|
||||
})
|
||||
.join("&");
|
||||
const extraFilters = props.params
|
||||
? Object.entries(props.params)
|
||||
.map(([k, v]) => `${k}=${v}`)
|
||||
.join("&")
|
||||
: props.params;
|
||||
return `${query}${extraFilters ? (query ? "&" : "") + extraFilters : ""}`;
|
||||
});
|
||||
|
||||
const games = ref<Array<SerializeObject<GameModel>>>();
|
||||
const loading = ref(false);
|
||||
|
||||
const productGrid = useTemplateRef<HTMLElement>("product-grid");
|
||||
|
||||
const { reset } = useInfiniteScroll(
|
||||
productGrid,
|
||||
async () => await updateGames(filterQuery.value, false),
|
||||
{
|
||||
distance: 10,
|
||||
canLoadMore: () => {
|
||||
return canLoadMore.value;
|
||||
},
|
||||
},
|
||||
);
|
||||
|
||||
const canLoadMore = ref(true);
|
||||
async function updateGames(query: string, resetGames: boolean) {
|
||||
loading.value = true;
|
||||
games.value ??= [];
|
||||
const newValues = await $dropFetch<{
|
||||
results: Array<SerializeObject<GameModel>>;
|
||||
count: number;
|
||||
}>(
|
||||
`/api/v1/store?take=50&skip=${resetGames ? 0 : games.value?.length || 0}&sort=${currentSort.value}&order=${sortOrder.value}${query ? "&" + query : ""}`,
|
||||
);
|
||||
if (resetGames) {
|
||||
games.value = newValues.results;
|
||||
if (import.meta.client) await reset();
|
||||
} else {
|
||||
games.value.push(...newValues.results);
|
||||
}
|
||||
canLoadMore.value = games.value.length < newValues.count;
|
||||
loading.value = false;
|
||||
}
|
||||
watch(filterQuery, (newUrl) => {
|
||||
updateGames(newUrl, true);
|
||||
});
|
||||
watch(currentSort, (_) => {
|
||||
updateGames(filterQuery.value, true);
|
||||
});
|
||||
watch(sortOrder, (_) => {
|
||||
updateGames(filterQuery.value, true);
|
||||
});
|
||||
|
||||
await updateGames(filterQuery.value, true);
|
||||
|
||||
function handleSortClick(option: StoreSortOption, event: MouseEvent) {
|
||||
event.stopPropagation();
|
||||
if (currentSort.value === option.param) {
|
||||
sortOrder.value = sortOrder.value === "asc" ? "desc" : "asc";
|
||||
} else {
|
||||
currentSort.value = option.param;
|
||||
sortOrder.value = option.param === "name" ? "asc" : "desc";
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,64 @@
|
||||
<template>
|
||||
<div
|
||||
v-if="task"
|
||||
class="flex w-full items-center justify-between space-x-6 p-6"
|
||||
>
|
||||
<div class="flex-1 truncate">
|
||||
<div class="flex items-center space-x-1">
|
||||
<div>
|
||||
<CheckCircleIcon v-if="task.success" class="size-5 text-green-600" />
|
||||
<XMarkIcon v-else-if="task.error" class="size-5 text-red-600" />
|
||||
<div
|
||||
v-else
|
||||
class="size-2 bg-blue-600 rounded-full animate-pulse m-1"
|
||||
/>
|
||||
</div>
|
||||
<h3 class="truncate text-sm font-medium text-zinc-100">
|
||||
{{ task.name }}
|
||||
</h3>
|
||||
</div>
|
||||
<div
|
||||
v-if="active"
|
||||
class="mt-2 w-full rounded-full overflow-hidden bg-zinc-900"
|
||||
>
|
||||
<div
|
||||
:style="{ width: `${task.progress}%` }"
|
||||
class="bg-blue-600 h-[3px] transition-all"
|
||||
/>
|
||||
</div>
|
||||
<div class="mt-2 bg-zinc-950 px-2 pb-1 rounded-sm">
|
||||
<LogLine :short="true" :log="parseTaskLog(task.log.at(-1))" />
|
||||
</div>
|
||||
<ul v-if="task.actions" class="mt-1 flex flex-row gap-x-2">
|
||||
<NuxtLink
|
||||
v-for="[name, link] in task.actions.map((v) => v.split(':'))"
|
||||
:key="link"
|
||||
:href="link"
|
||||
class="text-xs text-zinc-100 bg-blue-900 p-1 rounded"
|
||||
>{{ name }}</NuxtLink
|
||||
>
|
||||
</ul>
|
||||
<NuxtLink
|
||||
type="button"
|
||||
:href="`/admin/task/${task.id}`"
|
||||
class="mt-3 ml-1 rounded-md text-xs font-medium text-zinc-100 hover:text-zinc-300 focus:outline-none focus:ring-2 focus:ring-zinc-100 focus:ring-offset-2"
|
||||
>
|
||||
<i18n-t keypath="tasks.admin.viewTask" tag="span" scope="global">
|
||||
<template #arrow>
|
||||
<span aria-hidden="true">{{ $t("chars.arrow") }}</span>
|
||||
</template>
|
||||
</i18n-t>
|
||||
</NuxtLink>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else>
|
||||
<!-- renders server side when we don't want to access the current tasks -->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { CheckCircleIcon, XMarkIcon } from "@heroicons/vue/24/solid";
|
||||
import type { TaskMessage } from "~/server/internal/tasks";
|
||||
|
||||
defineProps<{ task: TaskMessage | undefined; active?: boolean }>();
|
||||
</script>
|
||||
@@ -0,0 +1,52 @@
|
||||
<template>
|
||||
<div
|
||||
:class="[
|
||||
'border border-zinc-800 rounded-xl h-full px-6 py-4 relative bg-zinc-950/30',
|
||||
{ 'min-h-50 pb-15': link, 'lg:pb-4': !link },
|
||||
]"
|
||||
>
|
||||
<h1
|
||||
v-if="props.title"
|
||||
:class="[
|
||||
'font-semibold text-lg w-full',
|
||||
{ 'mb-3': !props.subtitle && link },
|
||||
]"
|
||||
>
|
||||
{{ props.title }}
|
||||
<div v-if="rightTitle" class="float-right">{{ props.rightTitle }}</div>
|
||||
</h1>
|
||||
<h2
|
||||
v-if="props.subtitle"
|
||||
:class="['text-zinc-400 text-sm w-full', { 'mb-3': link }]"
|
||||
>
|
||||
{{ props.subtitle }}
|
||||
<div v-if="rightTitle" class="float-right">{{ props.rightTitle }}</div>
|
||||
</h2>
|
||||
|
||||
<slot />
|
||||
|
||||
<div v-if="props.link" class="absolute bottom-5 right-5">
|
||||
<NuxtLink
|
||||
:to="props.link.url"
|
||||
class="transition text-sm/6 font-semibold text-zinc-400 hover:text-zinc-100 inline-flex gap-x-2 items-center duration-200 hover:scale-105"
|
||||
>
|
||||
{{ props.link.label }}
|
||||
<ArrowRightIcon class="h-4 w-4" aria-hidden="true" />
|
||||
</NuxtLink>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ArrowRightIcon } from "@heroicons/vue/20/solid";
|
||||
|
||||
const props = defineProps<{
|
||||
title?: string;
|
||||
subtitle?: string;
|
||||
rightTitle?: string;
|
||||
link?: {
|
||||
url: string;
|
||||
label: string;
|
||||
};
|
||||
}>();
|
||||
</script>
|
||||
@@ -0,0 +1,161 @@
|
||||
<template>
|
||||
<footer class="bg-zinc-950" aria-labelledby="footer-heading">
|
||||
<h2 id="footer-heading" class="sr-only">{{ $t("footer.footer") }}</h2>
|
||||
<div class="mx-auto max-w-7xl px-6 py-16 sm:py-24 lg:px-8">
|
||||
<!-- Drop Info -->
|
||||
<div class="xl:grid xl:grid-cols-3 xl:gap-8">
|
||||
<div class="space-y-8">
|
||||
<DropWordmark class="h-10" />
|
||||
<p class="text-sm leading-6 text-zinc-300">
|
||||
{{ $t("drop.desc") }}
|
||||
</p>
|
||||
|
||||
<SelectorLanguage />
|
||||
|
||||
<div class="flex space-x-6">
|
||||
<NuxtLink
|
||||
v-for="item in navigation.social"
|
||||
:key="item.name"
|
||||
:to="item.href"
|
||||
target="_blank"
|
||||
class="text-zinc-400 hover:text-zinc-400"
|
||||
>
|
||||
<span class="sr-only">{{ item.name }}</span>
|
||||
<component :is="item.icon" class="h-6 w-6" aria-hidden="true" />
|
||||
</NuxtLink>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Foot links -->
|
||||
<div class="mt-16 grid grid-cols-2 gap-8 xl:col-span-2 xl:mt-0">
|
||||
<div class="md:grid md:grid-cols-2 md:gap-8">
|
||||
<div>
|
||||
<h3 class="text-sm font-semibold leading-6 text-white">
|
||||
{{ $t("footer.games") }}
|
||||
</h3>
|
||||
<ul role="list" class="mt-6 space-y-4">
|
||||
<li v-for="item in navigation.games" :key="item.name">
|
||||
<NuxtLink
|
||||
:to="item.href"
|
||||
class="text-sm leading-6 text-zinc-300 hover:text-white"
|
||||
>{{ item.name }}</NuxtLink
|
||||
>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="mt-10 md:mt-0">
|
||||
<h3 class="text-sm font-semibold leading-6 text-white">
|
||||
{{ $t("userHeader.links.community") }}
|
||||
</h3>
|
||||
<ul role="list" class="mt-6 space-y-4">
|
||||
<li v-for="item in navigation.community" :key="item.name">
|
||||
<NuxtLink
|
||||
:to="item.href"
|
||||
class="text-sm leading-6 text-zinc-300 hover:text-white"
|
||||
>{{ item.name }}</NuxtLink
|
||||
>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="md:grid md:grid-cols-2 md:gap-8">
|
||||
<div>
|
||||
<h3 class="text-sm font-semibold leading-6 text-white">
|
||||
{{ $t("footer.documentation") }}
|
||||
</h3>
|
||||
<ul role="list" class="mt-6 space-y-4">
|
||||
<li v-for="item in navigation.documentation" :key="item.name">
|
||||
<NuxtLink
|
||||
:to="item.href"
|
||||
class="text-sm leading-6 text-zinc-300 hover:text-white"
|
||||
>{{ item.name }}</NuxtLink
|
||||
>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="mt-10 md:mt-0">
|
||||
<h3 class="text-sm font-semibold leading-6 text-white">
|
||||
{{ $t("footer.about") }}
|
||||
</h3>
|
||||
<ul role="list" class="mt-6 space-y-4">
|
||||
<li v-for="item in navigation.about" :key="item.name">
|
||||
<NuxtLink
|
||||
:to="item.href"
|
||||
class="text-sm leading-6 text-zinc-300 hover:text-white"
|
||||
>{{ item.name }}</NuxtLink
|
||||
>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center justify-center xl:col-span-3 mt-8">
|
||||
<NuxtLink
|
||||
:to="`https://github.com/Drop-OSS/drop/releases/tag/${versionInfo.version}`"
|
||||
class="text-xs text-zinc-700 hover:text-zinc-400 transition-colors duration-200 cursor-default select-none"
|
||||
>
|
||||
<i18n-t keypath="footer.version" tag="span" scope="global">
|
||||
<template #version>
|
||||
<span>{{ versionInfo.version }}</span>
|
||||
</template>
|
||||
<template #gitRef>
|
||||
<span>{{ versionInfo.gitRef }}</span>
|
||||
</template>
|
||||
</i18n-t>
|
||||
</NuxtLink>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { IconsDiscordLogo, IconsGithubLogo } from "#components";
|
||||
|
||||
const { t } = useI18n();
|
||||
|
||||
const versionInfo = await $dropFetch("/api/v1");
|
||||
|
||||
const navigation = computed(() => ({
|
||||
games: [
|
||||
{ name: t("store.recentlyAdded"), href: "#" },
|
||||
{ name: t("store.recentlyReleased"), href: "#" },
|
||||
{ name: t("footer.topSellers"), href: "#" },
|
||||
{ name: t("footer.findGame"), href: "#" },
|
||||
],
|
||||
community: [
|
||||
{ name: t("common.friends"), href: "#" },
|
||||
{ name: t("common.groups"), href: "#" },
|
||||
{ name: t("common.servers"), href: "#" },
|
||||
],
|
||||
documentation: [
|
||||
// TODO: public API docs
|
||||
// { name: t("footer.api"), href: "https://api.droposs.org/" },
|
||||
{
|
||||
name: t("footer.docs.server"),
|
||||
href: "https://docs.droposs.org/docs/guides/quickstart",
|
||||
},
|
||||
{
|
||||
name: t("footer.docs.client"),
|
||||
href: "https://docs.droposs.org/docs/guides/client",
|
||||
},
|
||||
],
|
||||
about: [
|
||||
{ name: t("footer.aboutDrop"), href: "https://droposs.org/" },
|
||||
{ name: t("footer.comparison"), href: "https://droposs.org/comparison" },
|
||||
],
|
||||
social: [
|
||||
{
|
||||
name: t("footer.social.github"),
|
||||
href: "https://github.com/Drop-OSS",
|
||||
icon: IconsGithubLogo,
|
||||
},
|
||||
{
|
||||
name: t("footer.social.discord"),
|
||||
href: "https://discord.gg/NHx46XKJWA",
|
||||
icon: IconsDiscordLogo,
|
||||
},
|
||||
],
|
||||
}));
|
||||
</script>
|
||||
@@ -0,0 +1,241 @@
|
||||
<template>
|
||||
<div class="hidden lg:flex bg-zinc-950 flex-row px-12 xl:px-48 py-5">
|
||||
<div class="grow inline-flex items-center gap-x-20">
|
||||
<NuxtLink :to="homepageURL">
|
||||
<DropWordmark class="h-8" />
|
||||
</NuxtLink>
|
||||
<nav class="inline-flex items-center">
|
||||
<ol class="inline-flex items-center gap-x-12">
|
||||
<NuxtLink
|
||||
v-for="(nav, navIdx) in navigation"
|
||||
:key="navIdx"
|
||||
:href="nav.route"
|
||||
:class="[
|
||||
'transition hover:text-zinc-200 uppercase font-display font-semibold text-md',
|
||||
navIdx === currentPageIndex ? 'text-zinc-100' : 'text-zinc-400',
|
||||
]"
|
||||
>
|
||||
{{ nav.label }}
|
||||
</NuxtLink>
|
||||
</ol>
|
||||
</nav>
|
||||
</div>
|
||||
<div class="inline-flex items-center">
|
||||
<ol class="inline-flex gap-3">
|
||||
<li>
|
||||
<UserHeaderWidget>
|
||||
<UserGroupIcon class="h-5" />
|
||||
</UserHeaderWidget>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<Menu as="div" class="relative inline-block">
|
||||
<MenuButton>
|
||||
<UserHeaderWidget :notifications="unreadNotifications.length">
|
||||
<BellIcon class="h-5" />
|
||||
</UserHeaderWidget>
|
||||
</MenuButton>
|
||||
|
||||
<transition
|
||||
enter-active-class="transition ease-out duration-100"
|
||||
enter-from-class="transform opacity-0 scale-95"
|
||||
enter-to-class="transform opacity-100 scale-100"
|
||||
leave-active-class="transition ease-in duration-75"
|
||||
leave-from-class="transform opacity-100 scale-100"
|
||||
leave-to-class="transform opacity-0 scale-95"
|
||||
>
|
||||
<MenuItems
|
||||
class="absolute inset-x-0 -translate-x-1/2 top-10 z-50 w-96 focus:outline-none shadow-md"
|
||||
>
|
||||
<UserHeaderNotificationWidgetPanel
|
||||
:notifications="unreadNotifications"
|
||||
/>
|
||||
</MenuItems>
|
||||
</transition>
|
||||
</Menu>
|
||||
</li>
|
||||
<UserHeaderUserWidget />
|
||||
</ol>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="sticky lg:hidden top-0 z-40 flex h-16 justify-between items-center gap-x-4 border-b border-zinc-700 bg-zinc-950 px-4 shadow-sm sm:gap-x-6 sm:px-6 lg:px-8"
|
||||
>
|
||||
<NuxtLink :to="homepageURL">
|
||||
<DropWordmark class="mb-0.5" />
|
||||
</NuxtLink>
|
||||
|
||||
<div class="flex gap-x-4 lg:gap-x-6">
|
||||
<div class="flex items-center gap-x-3">
|
||||
<!-- Profile dropdown -->
|
||||
<UserHeaderUserWidget />
|
||||
|
||||
<button
|
||||
type="button"
|
||||
class="-m-2.5 p-2.5 text-zinc-400 lg:hidden"
|
||||
@click="sidebarOpen = true"
|
||||
>
|
||||
<span class="sr-only">{{ $t("header.openSidebar") }}</span>
|
||||
<Bars3Icon class="h-6 w-6" aria-hidden="true" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<TransitionRoot as="template" :show="sidebarOpen">
|
||||
<Dialog class="relative z-50 lg:hidden" @close="sidebarOpen = false">
|
||||
<TransitionChild
|
||||
as="template"
|
||||
enter="transition-opacity ease-linear duration-300"
|
||||
enter-from="opacity-0"
|
||||
enter-to="opacity-100"
|
||||
leave="transition-opacity ease-linear duration-300"
|
||||
leave-from="opacity-100"
|
||||
leave-to="opacity-0"
|
||||
>
|
||||
<div class="fixed inset-0 bg-zinc-900/80" />
|
||||
</TransitionChild>
|
||||
|
||||
<div class="fixed inset-0 flex">
|
||||
<TransitionChild
|
||||
as="template"
|
||||
enter="transition ease-in-out duration-300 transform"
|
||||
enter-from="-translate-x-full"
|
||||
enter-to="translate-x-0"
|
||||
leave="transition ease-in-out duration-300 transform"
|
||||
leave-from="translate-x-0"
|
||||
leave-to="-translate-x-full"
|
||||
>
|
||||
<DialogPanel class="relative mr-16 flex w-full max-w-xs flex-1">
|
||||
<TransitionChild
|
||||
as="template"
|
||||
enter="ease-in-out duration-300"
|
||||
enter-from="opacity-0"
|
||||
enter-to="opacity-100"
|
||||
leave="ease-in-out duration-300"
|
||||
leave-from="opacity-100"
|
||||
leave-to="opacity-0"
|
||||
>
|
||||
<div
|
||||
class="absolute left-full top-0 flex w-16 justify-center pt-5"
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
class="-m-2.5 p-2.5"
|
||||
@click="sidebarOpen = false"
|
||||
>
|
||||
<span class="sr-only">{{
|
||||
$t("userHeader.closeSidebar")
|
||||
}}</span>
|
||||
<XMarkIcon class="h-6 w-6 text-zinc-400" aria-hidden="true" />
|
||||
</button>
|
||||
</div>
|
||||
</TransitionChild>
|
||||
<!-- Sidebar component, swap this element with another sidebar if you like -->
|
||||
<div
|
||||
class="flex grow flex-col gap-y-5 overflow-y-auto bg-zinc-950 px-6 pb-4"
|
||||
>
|
||||
<div class="flex shrink-0 h-16 items-center justify-between">
|
||||
<NuxtLink :to="homepageURL">
|
||||
<ApplicationLogo class="h-8 w-auto" />
|
||||
</NuxtLink>
|
||||
|
||||
<UserHeaderUserWidget />
|
||||
</div>
|
||||
<nav class="flex flex-1 flex-col gap-y-8">
|
||||
<ol class="flex flex-col gap-y-3">
|
||||
<NuxtLink
|
||||
v-for="(nav, navIdx) in navigation"
|
||||
:key="navIdx"
|
||||
:href="nav.route"
|
||||
:class="[
|
||||
'transition hover:text-zinc-200 uppercase font-display font-semibold text-md',
|
||||
navIdx === currentPageIndex
|
||||
? 'text-zinc-100'
|
||||
: 'text-zinc-400',
|
||||
]"
|
||||
>
|
||||
{{ nav.label }}
|
||||
</NuxtLink>
|
||||
</ol>
|
||||
<div class="h-px w-full bg-zinc-700" />
|
||||
<div class="flex flex-row gap-x-4 justify-stretch">
|
||||
<li class="w-full">
|
||||
<UserHeaderWidget class="w-full">
|
||||
<UserGroupIcon class="h-5" />
|
||||
</UserHeaderWidget>
|
||||
</li>
|
||||
<li class="w-full">
|
||||
<UserHeaderWidget
|
||||
class="w-full"
|
||||
:notifications="unreadNotifications.length"
|
||||
>
|
||||
<BellIcon class="h-5" />
|
||||
</UserHeaderWidget>
|
||||
</li>
|
||||
<li class="w-full">
|
||||
<UserHeaderWidget class="w-full" />
|
||||
</li>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
</DialogPanel>
|
||||
</TransitionChild>
|
||||
</div>
|
||||
</Dialog>
|
||||
</TransitionRoot>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { BellIcon, UserGroupIcon } from "@heroicons/vue/16/solid";
|
||||
import {
|
||||
Dialog,
|
||||
DialogPanel,
|
||||
TransitionChild,
|
||||
TransitionRoot,
|
||||
Menu,
|
||||
MenuButton,
|
||||
MenuItems,
|
||||
} from "@headlessui/vue";
|
||||
import type { NavigationItem } from "../composables/types";
|
||||
import { Bars3Icon } from "@heroicons/vue/24/outline";
|
||||
import { XMarkIcon } from "@heroicons/vue/24/solid";
|
||||
|
||||
const router = useRouter();
|
||||
const { t } = useI18n();
|
||||
|
||||
const homepageURL = "/store";
|
||||
const navigation: Ref<Array<NavigationItem>> = computed(() => [
|
||||
{
|
||||
prefix: "/store",
|
||||
route: "/store",
|
||||
label: t("store.title"),
|
||||
},
|
||||
{
|
||||
prefix: "/library",
|
||||
route: "/library",
|
||||
label: t("userHeader.links.library"),
|
||||
},
|
||||
{
|
||||
prefix: "/community",
|
||||
route: "/community",
|
||||
label: t("userHeader.links.community"),
|
||||
},
|
||||
{
|
||||
prefix: "/news",
|
||||
route: "/news",
|
||||
label: t("userHeader.links.news"),
|
||||
},
|
||||
]);
|
||||
|
||||
const currentPageIndex = useCurrentNavigationIndex(navigation.value);
|
||||
|
||||
const notifications = useNotifications();
|
||||
const unreadNotifications = computed(() =>
|
||||
notifications.value.filter((e) => !e.read),
|
||||
);
|
||||
|
||||
const sidebarOpen = ref(false);
|
||||
router.afterEach(() => (sidebarOpen.value = false));
|
||||
</script>
|
||||
@@ -0,0 +1,55 @@
|
||||
<template>
|
||||
<PanelWidget class="flex-col gap-y-2">
|
||||
<div class="border-b border-zinc-700 pb-3 p-2">
|
||||
<div
|
||||
class="-ml-4 -mt-2 flex flex-wrap items-center justify-between sm:flex-nowrap"
|
||||
>
|
||||
<div class="ml-4 mt-2">
|
||||
<h3 class="text-base font-semibold text-zinc-100 text-sm">
|
||||
{{ $t("account.notifications.unread") }}
|
||||
</h3>
|
||||
</div>
|
||||
<div class="ml-4 mt-2 shrink-0">
|
||||
<NuxtLink
|
||||
to="/account/notifications"
|
||||
type="button"
|
||||
class="text-sm text-zinc-400"
|
||||
>
|
||||
<i18n-t
|
||||
keypath="account.notifications.all"
|
||||
tag="span"
|
||||
scope="global"
|
||||
>
|
||||
<template #arrow>
|
||||
<span aria-hidden="true">{{ $t("chars.arrow") }}</span>
|
||||
</template>
|
||||
</i18n-t>
|
||||
</NuxtLink>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col gap-y-2 max-h-[300px] overflow-y-scroll">
|
||||
<NotificationItem
|
||||
v-for="notification in props.notifications"
|
||||
:key="notification.id"
|
||||
:notification="notification"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
v-if="props.notifications.length == 0"
|
||||
class="text-sm text-zinc-400 p-3 text-center w-full"
|
||||
>
|
||||
{{ $t("account.notifications.none") }}
|
||||
</div>
|
||||
</PanelWidget>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import type { SerializeObject } from "nitropack";
|
||||
import type { NotificationModel } from "~/prisma/client/models";
|
||||
|
||||
const props = defineProps<{
|
||||
notifications: Array<SerializeObject<NotificationModel>>;
|
||||
}>();
|
||||
</script>
|
||||
@@ -0,0 +1,39 @@
|
||||
<template>
|
||||
<div
|
||||
class="w-full bg-zinc-950 p-1 inline-flex items-center gap-x-2 fixed inset-x-0 top-0 z-100"
|
||||
>
|
||||
<button
|
||||
class="p-1 text-zinc-300 hover:text-zinc-100 hover:bg-zinc-900 transition-all rounded"
|
||||
@click="() => router.back()"
|
||||
>
|
||||
<ChevronLeftIcon class="size-4" />
|
||||
</button>
|
||||
<button
|
||||
class="p-1 text-zinc-300 hover:text-zinc-100 hover:bg-zinc-900 transition-all rounded"
|
||||
@click="() => router.forward()"
|
||||
>
|
||||
<ChevronRightIcon class="size-4" />
|
||||
</button>
|
||||
<span class="text-zinc-400 text-sm">
|
||||
{{ title }}
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { ChevronLeftIcon, ChevronRightIcon } from "@heroicons/vue/24/outline";
|
||||
|
||||
const router = useRouter();
|
||||
const title = ref("Loading...");
|
||||
|
||||
onMounted(() => {
|
||||
title.value = document.title;
|
||||
});
|
||||
|
||||
router.afterEach(() => {
|
||||
title.value = "Loading...";
|
||||
// TODO: more robust after-render "detection"
|
||||
setTimeout(() => {
|
||||
title.value = document.title;
|
||||
}, 500);
|
||||
});
|
||||
</script>
|
||||
@@ -0,0 +1,110 @@
|
||||
<template>
|
||||
<Menu v-if="user" as="div" class="relative inline-block">
|
||||
<MenuButton>
|
||||
<UserHeaderWidget>
|
||||
<div class="inline-flex items-center text-zinc-300 hover:text-white">
|
||||
<img
|
||||
:src="useObject(user.profilePictureObjectId)"
|
||||
class="w-5 h-5 rounded-sm"
|
||||
/>
|
||||
<span class="ml-2 text-sm font-bold">{{ user.displayName }}</span>
|
||||
<ChevronDownIcon class="ml-3 h-4" />
|
||||
</div>
|
||||
</UserHeaderWidget>
|
||||
</MenuButton>
|
||||
|
||||
<transition
|
||||
enter-active-class="transition ease-out duration-100"
|
||||
enter-from-class="transform opacity-0 scale-95"
|
||||
enter-to-class="transform opacity-100 scale-100"
|
||||
leave-active-class="transition ease-in duration-75"
|
||||
leave-from-class="transform opacity-100 scale-100"
|
||||
leave-to-class="transform opacity-0 scale-95"
|
||||
>
|
||||
<MenuItems
|
||||
class="absolute right-0 top-10 z-50 w-56 origin-top-right focus:outline-none shadow-md"
|
||||
>
|
||||
<PanelWidget class="flex-col gap-y-2">
|
||||
<NuxtLink
|
||||
:to="`/user/${user.id}`"
|
||||
class="transition inline-flex items-center w-full py-3 px-4 hover:bg-zinc-800"
|
||||
>
|
||||
<div class="inline-flex items-center text-zinc-300">
|
||||
<img
|
||||
:src="useObject(user.profilePictureObjectId)"
|
||||
class="w-5 h-5 rounded-sm"
|
||||
/>
|
||||
<span class="ml-2 text-sm font-bold">{{ user.displayName }}</span>
|
||||
</div>
|
||||
</NuxtLink>
|
||||
<div class="h-0.5 rounded-full w-full bg-zinc-800" />
|
||||
<div class="flex flex-col">
|
||||
<MenuItem
|
||||
v-for="(nav, navIdx) in navigation"
|
||||
:key="navIdx"
|
||||
v-slot="{ active, close }"
|
||||
hydrate-on-visible
|
||||
as="div"
|
||||
>
|
||||
<NuxtLink
|
||||
:to="nav.route"
|
||||
:class="[
|
||||
active ? 'bg-zinc-800 text-zinc-100' : 'text-zinc-400',
|
||||
'w-full text-left transition block px-4 py-2 text-sm',
|
||||
]"
|
||||
@click="close"
|
||||
>
|
||||
{{ nav.label }}
|
||||
</NuxtLink>
|
||||
</MenuItem>
|
||||
<MenuItem v-slot="{ active, close }" hydrate-on-visible as="div">
|
||||
<NuxtLink
|
||||
to="/auth/signout"
|
||||
:class="[
|
||||
active ? 'bg-zinc-800 text-zinc-100' : 'text-zinc-400',
|
||||
'w-full text-left transition block px-4 py-2 text-sm',
|
||||
]"
|
||||
:data-comment="'external=true is required because we implemented the signout as a route on the server for performance'"
|
||||
:external="true"
|
||||
@click="close"
|
||||
>
|
||||
{{ $t("auth.signout") }}
|
||||
</NuxtLink>
|
||||
</MenuItem>
|
||||
</div>
|
||||
</PanelWidget>
|
||||
</MenuItems>
|
||||
</transition>
|
||||
</Menu>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { Menu, MenuButton, MenuItem, MenuItems } from "@headlessui/vue";
|
||||
import { ChevronDownIcon } from "@heroicons/vue/16/solid";
|
||||
import { useObject } from "~/composables/objects";
|
||||
import type { NavigationItem } from "~/composables/types";
|
||||
|
||||
const user = useUser();
|
||||
|
||||
const navigation = computed<NavigationItem[]>(() =>
|
||||
[
|
||||
user.value?.admin
|
||||
? {
|
||||
label: $t("userHeader.profile.admin"),
|
||||
route: "/admin",
|
||||
prefix: "",
|
||||
}
|
||||
: undefined,
|
||||
{
|
||||
label: $t("userHeader.profile.settings"),
|
||||
route: "/account",
|
||||
prefix: "",
|
||||
},
|
||||
{
|
||||
label: "Authorize client",
|
||||
route: "/client/code",
|
||||
prefix: "",
|
||||
},
|
||||
].filter((e) => e !== undefined),
|
||||
);
|
||||
</script>
|
||||
@@ -0,0 +1,37 @@
|
||||
<template>
|
||||
<div
|
||||
:class="[
|
||||
'transition inline-flex items-center justify-center cursor-pointer rounded-sm px-4 py-2 relative',
|
||||
showNotifications
|
||||
? 'bg-blue-300 text-zinc-900 hover:bg-blue-200 hover:text-zinc-950'
|
||||
: 'bg-zinc-900 text-zinc-600 hover:bg-zinc-800 hover:text-zinc-300',
|
||||
]"
|
||||
>
|
||||
<slot />
|
||||
<TransitionRoot
|
||||
:show="showNotifications"
|
||||
enter="ease-out duration-150"
|
||||
enter-from="opacity-0"
|
||||
enter-to="opacity-100"
|
||||
leave="ease-in duration-150"
|
||||
leave-from="opacity-100"
|
||||
leave-to="opacity-0"
|
||||
>
|
||||
<div
|
||||
class="w-4 h-4 absolute top-0 right-0 translate-x-[30%] translate-y-[-30%] rounded-full bg-blue-300 inline-flex items-center justify-center text-xs text-zinc-900 font-bold"
|
||||
>
|
||||
{{ props.notifications }}
|
||||
</div>
|
||||
</TransitionRoot>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { TransitionRoot } from "@headlessui/vue";
|
||||
|
||||
const props = defineProps<{
|
||||
notifications?: number;
|
||||
}>();
|
||||
|
||||
const showNotifications = computed(() => !!props.notifications);
|
||||
</script>
|
||||
@@ -0,0 +1,21 @@
|
||||
import type { SerializeObject } from "nitropack";
|
||||
import type { SystemData } from "~/server/internal/system-data";
|
||||
|
||||
const ws = new WebSocketHandler("/api/v1/admin/system-data/ws");
|
||||
|
||||
export const useSystemData = () =>
|
||||
useState<SerializeObject<SystemData>>(
|
||||
"system-data",
|
||||
(): SystemData => ({
|
||||
totalRam: 0,
|
||||
freeRam: 0,
|
||||
cpuLoad: 0,
|
||||
cpuCores: 0,
|
||||
}),
|
||||
);
|
||||
|
||||
ws.listen((systemDataString) => {
|
||||
const data = JSON.parse(systemDataString) as SerializeObject<SystemData>;
|
||||
const systemData = useSystemData();
|
||||
systemData.value = data;
|
||||
});
|
||||
@@ -0,0 +1,48 @@
|
||||
import type {
|
||||
CollectionModel,
|
||||
CollectionEntryModel,
|
||||
GameModel,
|
||||
} from "~/prisma/client/models";
|
||||
import type { SerializeObject } from "nitropack";
|
||||
|
||||
type FullCollection = CollectionModel & {
|
||||
entries: Array<CollectionEntryModel & { game: SerializeObject<GameModel> }>;
|
||||
};
|
||||
|
||||
export const useCollections = async () => {
|
||||
// @ts-expect-error undefined is used to tell if value has been fetched or not
|
||||
const state = useState<FullCollection[]>("collections", () => undefined);
|
||||
if (state.value === undefined) {
|
||||
state.value = await $dropFetch<FullCollection[]>("/api/v1/collection");
|
||||
}
|
||||
|
||||
return state;
|
||||
};
|
||||
|
||||
export async function refreshCollection(id: string) {
|
||||
const state = useState<FullCollection[]>("collections");
|
||||
const collection = await $dropFetch<FullCollection>(
|
||||
`/api/v1/collection/${id}`,
|
||||
);
|
||||
const index = state.value.findIndex((e) => e.id == id);
|
||||
if (index == -1) {
|
||||
state.value.push(collection);
|
||||
return;
|
||||
}
|
||||
state.value[index] = collection;
|
||||
}
|
||||
|
||||
export const useLibrary = async () => {
|
||||
// @ts-expect-error undefined is used to tell if value has been fetched or not
|
||||
const state = useState<FullCollection>("library", () => undefined);
|
||||
if (state.value === undefined) {
|
||||
await refreshLibrary();
|
||||
}
|
||||
|
||||
return state;
|
||||
};
|
||||
|
||||
export async function refreshLibrary() {
|
||||
const state = useState<FullCollection>("library");
|
||||
state.value = await $dropFetch<FullCollection>("/api/v1/collection/default");
|
||||
}
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user