mirror of https://github.com/TZGyn/shortener
update links page to use correct qr dialog, create and edit form
parent
37fb2871dc
commit
9c358a340b
GPG Key ID:
122EAF77AE81FD4A
@ -0,0 +1,217 @@
|
|||||||
|
<script lang="ts">
|
||||||
|
import * as Form from '$lib/components/ui/form'
|
||||||
|
import * as Dialog from '$lib/components/ui/dialog'
|
||||||
|
import * as Select from '$lib/components/ui/select'
|
||||||
|
import { Input } from '$lib/components/ui/input'
|
||||||
|
import { Switch } from '$lib/components/ui/switch'
|
||||||
|
import { formSchema, type FormSchema } from '../schema'
|
||||||
|
import {
|
||||||
|
type SuperValidated,
|
||||||
|
type Infer,
|
||||||
|
superForm,
|
||||||
|
} from 'sveltekit-superforms'
|
||||||
|
import { zodClient } from 'sveltekit-superforms/adapters'
|
||||||
|
import { toast } from 'svelte-sonner'
|
||||||
|
import { Loader2, LoaderCircle, PlusCircle } from 'lucide-svelte'
|
||||||
|
import { buttonVariants } from '$lib/components/ui/button'
|
||||||
|
import { Checkbox } from '$lib/components/ui/checkbox'
|
||||||
|
import { ScrollArea } from '$lib/components/ui/scroll-area'
|
||||||
|
import type { Project } from '$lib/db/types'
|
||||||
|
|
||||||
|
export let data: SuperValidated<Infer<FormSchema>>
|
||||||
|
export let projects: Project[]
|
||||||
|
export let dialogOpen: boolean
|
||||||
|
let shortenerCategory: any = undefined
|
||||||
|
|
||||||
|
const form = superForm(data, {
|
||||||
|
validators: zodClient(formSchema),
|
||||||
|
invalidateAll: 'force',
|
||||||
|
resetForm: true,
|
||||||
|
onResult: ({ result }) => {
|
||||||
|
if (result.status === 200) {
|
||||||
|
dialogOpen = false
|
||||||
|
toast.success('Shortener added to project')
|
||||||
|
}
|
||||||
|
},
|
||||||
|
onError: ({ result }) => {
|
||||||
|
toast.error('Error adding shortener')
|
||||||
|
},
|
||||||
|
})
|
||||||
|
|
||||||
|
const { form: formData, enhance, submitting } = form
|
||||||
|
|
||||||
|
let inputTimer: any
|
||||||
|
let previewData: any
|
||||||
|
let isPreviewLoading: boolean = false
|
||||||
|
|
||||||
|
const getMetadata = async () => {
|
||||||
|
isPreviewLoading = true
|
||||||
|
clearTimeout(inputTimer)
|
||||||
|
const link =
|
||||||
|
$formData.link.startsWith('https://') ||
|
||||||
|
$formData.link.startsWith('http://')
|
||||||
|
? $formData.link
|
||||||
|
: 'https://' + $formData.link
|
||||||
|
inputTimer = setTimeout(async () => {
|
||||||
|
const response = await fetch(`/api/url/metadata?url=${link}`)
|
||||||
|
previewData = await response.json()
|
||||||
|
isPreviewLoading = false
|
||||||
|
console.log(previewData)
|
||||||
|
}, 1000)
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<Dialog.Root bind:open={dialogOpen}>
|
||||||
|
<Dialog.Trigger
|
||||||
|
class={buttonVariants({ variant: 'default' }) + 'flex gap-2'}>
|
||||||
|
<PlusCircle />
|
||||||
|
Add Shortner
|
||||||
|
</Dialog.Trigger>
|
||||||
|
<Dialog.Content class="sm:max-w-[500px]">
|
||||||
|
<Dialog.Header>
|
||||||
|
<Dialog.Title>Add Shortener</Dialog.Title>
|
||||||
|
<Dialog.Description>
|
||||||
|
Create A New Shortener Here. Click Add To Save.
|
||||||
|
</Dialog.Description>
|
||||||
|
</Dialog.Header>
|
||||||
|
<ScrollArea class="max-h-[calc(100vh-200px)]">
|
||||||
|
<div class="grid grid-cols-4 gap-4 items-center pb-4">
|
||||||
|
<div class="font-bold">Preview</div>
|
||||||
|
<div class="flex flex-col col-span-4 justify-center border">
|
||||||
|
<div class="overflow-hidden relative h-64">
|
||||||
|
{#if isPreviewLoading}
|
||||||
|
<div class="flex justify-center items-center h-full">
|
||||||
|
<Loader2 class="animate-spin" />
|
||||||
|
</div>
|
||||||
|
{:else if previewData}
|
||||||
|
<img
|
||||||
|
src={previewData.image}
|
||||||
|
alt=""
|
||||||
|
class="object-cover w-full h-64" />
|
||||||
|
<div
|
||||||
|
class="absolute bottom-2 left-2 px-2 rounded-lg bg-secondary">
|
||||||
|
{previewData.title}
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<form
|
||||||
|
method="POST"
|
||||||
|
use:enhance
|
||||||
|
class="flex flex-col gap-6"
|
||||||
|
action="?/create">
|
||||||
|
<Form.Field {form} name="link" class="flex flex-col gap-2">
|
||||||
|
<Form.Control let:attrs>
|
||||||
|
<Form.Label>Link</Form.Label>
|
||||||
|
<Input
|
||||||
|
{...attrs}
|
||||||
|
bind:value={$formData.link}
|
||||||
|
placeholder="https://example.com"
|
||||||
|
on:input={getMetadata} />
|
||||||
|
</Form.Control>
|
||||||
|
<Form.Description>Shortener link</Form.Description>
|
||||||
|
<Form.FieldErrors />
|
||||||
|
</Form.Field>
|
||||||
|
<Form.Field {form} name="project" class="flex flex-col gap-2">
|
||||||
|
<Form.Control let:attrs>
|
||||||
|
<Form.Label>Project</Form.Label>
|
||||||
|
<Select.Root
|
||||||
|
bind:selected={shortenerCategory}
|
||||||
|
onSelectedChange={(v) => {
|
||||||
|
v && ($formData.project = v.value)
|
||||||
|
}}
|
||||||
|
multiple={false}>
|
||||||
|
<Select.Trigger {...attrs} class="col-span-3">
|
||||||
|
<Select.Value placeholder="Select a Project" />
|
||||||
|
</Select.Trigger>
|
||||||
|
<Select.Content>
|
||||||
|
<Select.Item value={''}>None</Select.Item>
|
||||||
|
<Select.Separator />
|
||||||
|
<Select.Group>
|
||||||
|
{#each projects as project}
|
||||||
|
<Select.Item value={project.uuid}>
|
||||||
|
{project.name}
|
||||||
|
</Select.Item>
|
||||||
|
{/each}
|
||||||
|
</Select.Group>
|
||||||
|
</Select.Content>
|
||||||
|
</Select.Root>
|
||||||
|
<input
|
||||||
|
hidden
|
||||||
|
bind:value={$formData.project}
|
||||||
|
name={attrs.name} />
|
||||||
|
</Form.Control>
|
||||||
|
<Form.Description>Shortener Project</Form.Description>
|
||||||
|
<Form.FieldErrors />
|
||||||
|
</Form.Field>
|
||||||
|
<Form.Field
|
||||||
|
{form}
|
||||||
|
name="ios"
|
||||||
|
class="flex gap-2 items-center space-y-0">
|
||||||
|
<Form.Control let:attrs>
|
||||||
|
<Form.Label>iOS Link</Form.Label>
|
||||||
|
<Switch {...attrs} bind:checked={$formData.ios} />
|
||||||
|
</Form.Control>
|
||||||
|
</Form.Field>
|
||||||
|
{#if $formData.ios}
|
||||||
|
<Form.Field
|
||||||
|
{form}
|
||||||
|
name="ios_link"
|
||||||
|
class="flex flex-col gap-2">
|
||||||
|
<Form.Control let:attrs>
|
||||||
|
<Input
|
||||||
|
{...attrs}
|
||||||
|
bind:value={$formData.ios_link}
|
||||||
|
placeholder="https://example.com" />
|
||||||
|
</Form.Control>
|
||||||
|
<Form.Description
|
||||||
|
>Shortener link for iOS</Form.Description>
|
||||||
|
<Form.FieldErrors />
|
||||||
|
</Form.Field>
|
||||||
|
{/if}
|
||||||
|
<Form.Field
|
||||||
|
{form}
|
||||||
|
name="android"
|
||||||
|
class="flex gap-2 items-center space-y-0">
|
||||||
|
<Form.Control let:attrs>
|
||||||
|
<Form.Label>Android Link</Form.Label>
|
||||||
|
<Switch {...attrs} bind:checked={$formData.android} />
|
||||||
|
</Form.Control>
|
||||||
|
</Form.Field>
|
||||||
|
{#if $formData.android}
|
||||||
|
<Form.Field
|
||||||
|
{form}
|
||||||
|
name="android_link"
|
||||||
|
class="flex flex-col gap-2">
|
||||||
|
<Form.Control let:attrs>
|
||||||
|
<Input
|
||||||
|
{...attrs}
|
||||||
|
bind:value={$formData.android_link}
|
||||||
|
placeholder="https://example.com" />
|
||||||
|
</Form.Control>
|
||||||
|
<Form.Description
|
||||||
|
>Shortener link for Android</Form.Description>
|
||||||
|
<Form.FieldErrors />
|
||||||
|
</Form.Field>
|
||||||
|
{/if}
|
||||||
|
<Form.Field
|
||||||
|
{form}
|
||||||
|
name="active"
|
||||||
|
class="flex gap-2 items-center space-y-0">
|
||||||
|
<Form.Control let:attrs>
|
||||||
|
<Checkbox {...attrs} bind:checked={$formData.active} />
|
||||||
|
<Form.Label>Active</Form.Label>
|
||||||
|
</Form.Control>
|
||||||
|
<Form.FieldErrors />
|
||||||
|
</Form.Field>
|
||||||
|
<Form.Button class="w-fit">
|
||||||
|
{#if $submitting}
|
||||||
|
<LoaderCircle class="animate-spin" />
|
||||||
|
{/if}
|
||||||
|
Add
|
||||||
|
</Form.Button>
|
||||||
|
</form>
|
||||||
|
</ScrollArea>
|
||||||
|
</Dialog.Content>
|
||||||
|
</Dialog.Root>
|
||||||
@ -0,0 +1,191 @@
|
|||||||
|
<script lang="ts">
|
||||||
|
import * as Form from '$lib/components/ui/form'
|
||||||
|
import * as Select from '$lib/components/ui/select'
|
||||||
|
import { Input } from '$lib/components/ui/input'
|
||||||
|
import { Switch } from '$lib/components/ui/switch'
|
||||||
|
import { formSchema, type FormSchema } from '../schema'
|
||||||
|
import {
|
||||||
|
type SuperValidated,
|
||||||
|
type Infer,
|
||||||
|
superForm,
|
||||||
|
} from 'sveltekit-superforms'
|
||||||
|
import { zodClient } from 'sveltekit-superforms/adapters'
|
||||||
|
import { toast } from 'svelte-sonner'
|
||||||
|
import { Loader2, LoaderCircle } from 'lucide-svelte'
|
||||||
|
import { Checkbox } from '$lib/components/ui/checkbox'
|
||||||
|
import { onMount } from 'svelte'
|
||||||
|
import type { Project } from '$lib/db/types'
|
||||||
|
|
||||||
|
export let data: SuperValidated<Infer<FormSchema>>
|
||||||
|
export let projects: Project[]
|
||||||
|
export let shortenerCategory: any = undefined
|
||||||
|
|
||||||
|
const form = superForm(data, {
|
||||||
|
validators: zodClient(formSchema),
|
||||||
|
invalidateAll: 'force',
|
||||||
|
resetForm: true,
|
||||||
|
onResult: ({ result }) => {
|
||||||
|
if (result.status === 200) {
|
||||||
|
toast.success('Project shortener updated')
|
||||||
|
}
|
||||||
|
},
|
||||||
|
onError: ({ result }) => {
|
||||||
|
toast.error('Error updating shortener')
|
||||||
|
},
|
||||||
|
})
|
||||||
|
|
||||||
|
const { form: formData, enhance, submitting } = form
|
||||||
|
|
||||||
|
let inputTimer: any
|
||||||
|
let previewData: any
|
||||||
|
let isPreviewLoading: boolean = false
|
||||||
|
|
||||||
|
const getMetadata = async () => {
|
||||||
|
isPreviewLoading = true
|
||||||
|
clearTimeout(inputTimer)
|
||||||
|
const link =
|
||||||
|
$formData.link.startsWith('https://') ||
|
||||||
|
$formData.link.startsWith('http://')
|
||||||
|
? $formData.link
|
||||||
|
: 'https://' + $formData.link
|
||||||
|
inputTimer = setTimeout(async () => {
|
||||||
|
const response = await fetch(`/api/url/metadata?url=${link}`)
|
||||||
|
previewData = await response.json()
|
||||||
|
isPreviewLoading = false
|
||||||
|
console.log(previewData)
|
||||||
|
}, 1000)
|
||||||
|
}
|
||||||
|
|
||||||
|
onMount(() => {
|
||||||
|
getMetadata()
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div class="grid grid-cols-4 gap-4 items-center pb-4">
|
||||||
|
<div class="font-bold">Preview</div>
|
||||||
|
<div class="flex flex-col col-span-4 justify-center border">
|
||||||
|
<div class="overflow-hidden relative h-64">
|
||||||
|
{#if isPreviewLoading}
|
||||||
|
<div class="flex justify-center items-center h-full">
|
||||||
|
<Loader2 class="animate-spin" />
|
||||||
|
</div>
|
||||||
|
{:else if previewData}
|
||||||
|
<img
|
||||||
|
src={previewData.image}
|
||||||
|
alt=""
|
||||||
|
class="object-cover w-full h-64" />
|
||||||
|
<div
|
||||||
|
class="absolute bottom-2 left-2 px-2 rounded-lg bg-secondary">
|
||||||
|
{previewData.title}
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<form method="POST" use:enhance class="flex flex-col gap-6">
|
||||||
|
<Form.Field {form} name="link" class="flex flex-col gap-2">
|
||||||
|
<Form.Control let:attrs>
|
||||||
|
<Form.Label>Link</Form.Label>
|
||||||
|
<Input
|
||||||
|
{...attrs}
|
||||||
|
bind:value={$formData.link}
|
||||||
|
placeholder="https://example.com"
|
||||||
|
on:input={getMetadata} />
|
||||||
|
</Form.Control>
|
||||||
|
<Form.Description>Shortener link</Form.Description>
|
||||||
|
<Form.FieldErrors />
|
||||||
|
</Form.Field>
|
||||||
|
<Form.Field {form} name="project" class="flex flex-col gap-2">
|
||||||
|
<Form.Control let:attrs>
|
||||||
|
<Form.Label>Project</Form.Label>
|
||||||
|
<Select.Root
|
||||||
|
bind:selected={shortenerCategory}
|
||||||
|
onSelectedChange={(v) => {
|
||||||
|
v && ($formData.project = v.value)
|
||||||
|
}}
|
||||||
|
multiple={false}>
|
||||||
|
<Select.Trigger {...attrs} class="col-span-3">
|
||||||
|
<Select.Value placeholder="Select a Project" />
|
||||||
|
</Select.Trigger>
|
||||||
|
<Select.Content>
|
||||||
|
<Select.Item value={''}>None</Select.Item>
|
||||||
|
<Select.Separator />
|
||||||
|
<Select.Group>
|
||||||
|
{#each projects as project}
|
||||||
|
<Select.Item value={project.uuid}>
|
||||||
|
{project.name}
|
||||||
|
</Select.Item>
|
||||||
|
{/each}
|
||||||
|
</Select.Group>
|
||||||
|
</Select.Content>
|
||||||
|
</Select.Root>
|
||||||
|
<input
|
||||||
|
hidden
|
||||||
|
bind:value={$formData.project}
|
||||||
|
name={attrs.name} />
|
||||||
|
</Form.Control>
|
||||||
|
<Form.Description>Shortener Project</Form.Description>
|
||||||
|
<Form.FieldErrors />
|
||||||
|
</Form.Field>
|
||||||
|
<Form.Field
|
||||||
|
{form}
|
||||||
|
name="ios"
|
||||||
|
class="flex gap-2 items-center space-y-0">
|
||||||
|
<Form.Control let:attrs>
|
||||||
|
<Form.Label>iOS Link</Form.Label>
|
||||||
|
<Switch {...attrs} bind:checked={$formData.ios} />
|
||||||
|
</Form.Control>
|
||||||
|
</Form.Field>
|
||||||
|
{#if $formData.ios}
|
||||||
|
<Form.Field {form} name="ios_link" class="flex flex-col gap-2">
|
||||||
|
<Form.Control let:attrs>
|
||||||
|
<Input
|
||||||
|
{...attrs}
|
||||||
|
bind:value={$formData.ios_link}
|
||||||
|
placeholder="https://example.com" />
|
||||||
|
</Form.Control>
|
||||||
|
<Form.Description>Shortener link for iOS</Form.Description>
|
||||||
|
<Form.FieldErrors />
|
||||||
|
</Form.Field>
|
||||||
|
{/if}
|
||||||
|
<Form.Field
|
||||||
|
{form}
|
||||||
|
name="android"
|
||||||
|
class="flex gap-2 items-center space-y-0">
|
||||||
|
<Form.Control let:attrs>
|
||||||
|
<Form.Label>Android Link</Form.Label>
|
||||||
|
<Switch {...attrs} bind:checked={$formData.android} />
|
||||||
|
</Form.Control>
|
||||||
|
</Form.Field>
|
||||||
|
{#if $formData.android}
|
||||||
|
<Form.Field
|
||||||
|
{form}
|
||||||
|
name="android_link"
|
||||||
|
class="flex flex-col gap-2">
|
||||||
|
<Form.Control let:attrs>
|
||||||
|
<Input
|
||||||
|
{...attrs}
|
||||||
|
bind:value={$formData.android_link}
|
||||||
|
placeholder="https://example.com" />
|
||||||
|
</Form.Control>
|
||||||
|
<Form.Description>Shortener link for Android</Form.Description>
|
||||||
|
<Form.FieldErrors />
|
||||||
|
</Form.Field>
|
||||||
|
{/if}
|
||||||
|
<Form.Field
|
||||||
|
{form}
|
||||||
|
name="active"
|
||||||
|
class="flex gap-2 items-center space-y-0">
|
||||||
|
<Form.Control let:attrs>
|
||||||
|
<Checkbox {...attrs} bind:checked={$formData.active} />
|
||||||
|
<Form.Label>Active</Form.Label>
|
||||||
|
</Form.Control>
|
||||||
|
<Form.FieldErrors />
|
||||||
|
</Form.Field>
|
||||||
|
<Form.Button class="w-fit">
|
||||||
|
{#if $submitting}
|
||||||
|
<LoaderCircle class="animate-spin" />
|
||||||
|
{/if}
|
||||||
|
Save
|
||||||
|
</Form.Button>
|
||||||
|
</form>
|
||||||
@ -0,0 +1,139 @@
|
|||||||
|
import type { PageServerLoad } from './$types'
|
||||||
|
import { fail, setError, superValidate } from 'sveltekit-superforms'
|
||||||
|
import { zod } from 'sveltekit-superforms/adapters'
|
||||||
|
import { formSchema } from './schema'
|
||||||
|
import type { Actions } from './$types'
|
||||||
|
import { db } from '$lib/db'
|
||||||
|
import { redirect } from '@sveltejs/kit'
|
||||||
|
import { shortener } from '$lib/db/schema'
|
||||||
|
import { eq } from 'drizzle-orm'
|
||||||
|
|
||||||
|
export const load = (async (event) => {
|
||||||
|
const user = event.locals.user
|
||||||
|
const { id } = event.params
|
||||||
|
|
||||||
|
const shortener = await db.query.shortener.findFirst({
|
||||||
|
columns: {
|
||||||
|
code: true,
|
||||||
|
projectId: true,
|
||||||
|
ios: true,
|
||||||
|
ios_link: true,
|
||||||
|
android: true,
|
||||||
|
android_link: true,
|
||||||
|
link: true,
|
||||||
|
active: true,
|
||||||
|
},
|
||||||
|
where: (shortener, { eq, and }) =>
|
||||||
|
and(eq(shortener.code, id), eq(shortener.userId, user.id)),
|
||||||
|
})
|
||||||
|
|
||||||
|
if (!shortener) {
|
||||||
|
redirect(300, `/links`)
|
||||||
|
}
|
||||||
|
|
||||||
|
const projects = await db.query.project.findMany({
|
||||||
|
where: (project, { eq }) => eq(project.userId, user.id),
|
||||||
|
})
|
||||||
|
|
||||||
|
let selectedCategory = undefined
|
||||||
|
if (shortener.projectId) {
|
||||||
|
const project = projects.find(
|
||||||
|
(project) => project.id === shortener.projectId,
|
||||||
|
)
|
||||||
|
if (project) {
|
||||||
|
selectedCategory = { value: project.uuid, label: project.name }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return {
|
||||||
|
projects,
|
||||||
|
selectedCategory,
|
||||||
|
form: await superValidate(
|
||||||
|
{
|
||||||
|
...shortener,
|
||||||
|
project: selectedCategory?.value || undefined,
|
||||||
|
},
|
||||||
|
zod(formSchema),
|
||||||
|
),
|
||||||
|
}
|
||||||
|
}) satisfies PageServerLoad
|
||||||
|
|
||||||
|
export const actions: Actions = {
|
||||||
|
default: async (event) => {
|
||||||
|
const form = await superValidate(event, zod(formSchema))
|
||||||
|
if (!form.valid) {
|
||||||
|
return fail(400, {
|
||||||
|
form,
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
if (form.data.link.startsWith('http://')) {
|
||||||
|
return setError(form, 'link', 'Link must be HTTPS')
|
||||||
|
}
|
||||||
|
|
||||||
|
if (
|
||||||
|
form.data.ios_link &&
|
||||||
|
form.data.ios_link.startsWith('http://')
|
||||||
|
) {
|
||||||
|
return setError(form, 'ios_link', 'Link must be HTTPS')
|
||||||
|
}
|
||||||
|
|
||||||
|
if (
|
||||||
|
form.data.android_link &&
|
||||||
|
form.data.android_link.startsWith('http://')
|
||||||
|
) {
|
||||||
|
return setError(form, 'android_link', 'Link must be HTTPS')
|
||||||
|
}
|
||||||
|
|
||||||
|
const user = event.locals.user
|
||||||
|
|
||||||
|
let project = undefined
|
||||||
|
const selected_project = form.data.project
|
||||||
|
if (selected_project) {
|
||||||
|
project = await db.query.project.findFirst({
|
||||||
|
where: (project, { eq, and }) =>
|
||||||
|
and(
|
||||||
|
eq(project.userId, user.id),
|
||||||
|
eq(project.uuid, selected_project),
|
||||||
|
),
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
let ios_link = ''
|
||||||
|
|
||||||
|
if (form.data.ios_link) {
|
||||||
|
if (form.data.ios_link.startsWith('https://')) {
|
||||||
|
ios_link = form.data.ios_link
|
||||||
|
} else {
|
||||||
|
ios_link = `https://${form.data.ios_link}`
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
let android_link = ''
|
||||||
|
|
||||||
|
if (form.data.android_link) {
|
||||||
|
if (form.data.android_link.startsWith('https://')) {
|
||||||
|
android_link = form.data.android_link
|
||||||
|
} else {
|
||||||
|
android_link = `https://${form.data.android_link}`
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
await db
|
||||||
|
.update(shortener)
|
||||||
|
.set({
|
||||||
|
link: form.data.link.startsWith('https://')
|
||||||
|
? form.data.link
|
||||||
|
: `https://${form.data.link}`,
|
||||||
|
projectId: project ? project.id : null,
|
||||||
|
userId: user.id,
|
||||||
|
ios: form.data.ios,
|
||||||
|
ios_link: ios_link,
|
||||||
|
android: form.data.android,
|
||||||
|
android_link: android_link,
|
||||||
|
})
|
||||||
|
.where(eq(shortener.code, event.params.id))
|
||||||
|
|
||||||
|
return { form }
|
||||||
|
},
|
||||||
|
}
|
||||||
@ -0,0 +1,24 @@
|
|||||||
|
<script lang="ts">
|
||||||
|
import { ScrollArea } from '$lib/components/ui/scroll-area'
|
||||||
|
import type { PageData } from './$types'
|
||||||
|
import Form from './(components)/form.svelte'
|
||||||
|
|
||||||
|
export let data: PageData
|
||||||
|
export let shallowRouting = false
|
||||||
|
</script>
|
||||||
|
|
||||||
|
{#if !shallowRouting}
|
||||||
|
<ScrollArea>
|
||||||
|
<div class="py-4 px-10 max-w-2xl">
|
||||||
|
<Form
|
||||||
|
data={data.form}
|
||||||
|
projects={data.projects}
|
||||||
|
shortenerCategory={data.selectedCategory} />
|
||||||
|
</div>
|
||||||
|
</ScrollArea>
|
||||||
|
{:else}
|
||||||
|
<Form
|
||||||
|
data={data.form}
|
||||||
|
projects={data.projects}
|
||||||
|
shortenerCategory={data.selectedCategory} />
|
||||||
|
{/if}
|
||||||
@ -0,0 +1,13 @@
|
|||||||
|
import { z } from 'zod'
|
||||||
|
|
||||||
|
export const formSchema = z.object({
|
||||||
|
link: z.string(),
|
||||||
|
project: z.string().optional(),
|
||||||
|
active: z.boolean(),
|
||||||
|
ios: z.boolean(),
|
||||||
|
ios_link: z.string().nullable(),
|
||||||
|
android: z.boolean(),
|
||||||
|
android_link: z.string().nullable(),
|
||||||
|
})
|
||||||
|
|
||||||
|
export type FormSchema = typeof formSchema
|
||||||
@ -0,0 +1,85 @@
|
|||||||
|
<script lang="ts">
|
||||||
|
import QRCode from 'qrcode'
|
||||||
|
import { Button } from '$lib/components/ui/button'
|
||||||
|
import { toast } from 'svelte-sonner'
|
||||||
|
import * as DropdownMenu from '$lib/components/ui/dropdown-menu'
|
||||||
|
import { Badge } from '$lib/components/ui/badge'
|
||||||
|
|
||||||
|
export let background = '#fff'
|
||||||
|
export let color = '#000'
|
||||||
|
export let value = ''
|
||||||
|
export let code = ''
|
||||||
|
|
||||||
|
let image = ''
|
||||||
|
|
||||||
|
const copyImageToClipboard = async () => {
|
||||||
|
if (!image) return
|
||||||
|
|
||||||
|
const imageData = await fetch(image)
|
||||||
|
|
||||||
|
const imageBlob = await imageData.blob()
|
||||||
|
|
||||||
|
try {
|
||||||
|
navigator.clipboard.write([
|
||||||
|
new ClipboardItem({
|
||||||
|
'image/png': imageBlob,
|
||||||
|
}),
|
||||||
|
])
|
||||||
|
toast.success('Copied Image To Clipboard')
|
||||||
|
} catch (error) {
|
||||||
|
toast.error(
|
||||||
|
'Unable to copy item to clipboard. If you are using firefox, you can change the setting dom.events.asyncclipboard.clipboarditem in about:config to true',
|
||||||
|
)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async function generateQrCode() {
|
||||||
|
try {
|
||||||
|
image = await QRCode.toDataURL(value, {
|
||||||
|
errorCorrectionLevel: 'L',
|
||||||
|
margin: 1,
|
||||||
|
scale: 20,
|
||||||
|
color: {
|
||||||
|
light: background,
|
||||||
|
dark: color,
|
||||||
|
},
|
||||||
|
})
|
||||||
|
} catch (e) {
|
||||||
|
image = await QRCode.toDataURL(value, {
|
||||||
|
errorCorrectionLevel: 'L',
|
||||||
|
margin: 1,
|
||||||
|
scale: 20,
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
$: {
|
||||||
|
if (value) {
|
||||||
|
generateQrCode()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div class="flex flex-col gap-4 items-center h-full">
|
||||||
|
<Badge variant="secondary">
|
||||||
|
{value}
|
||||||
|
</Badge>
|
||||||
|
<img src={image} alt={value} width={300} height={300} />
|
||||||
|
<div class="flex gap-4 w-full">
|
||||||
|
<Button class="w-full" on:click={copyImageToClipboard}
|
||||||
|
>Copy Image</Button>
|
||||||
|
<DropdownMenu.Root>
|
||||||
|
<DropdownMenu.Trigger asChild let:builder>
|
||||||
|
<Button builders={[builder]} class="w-full">QR Link</Button>
|
||||||
|
</DropdownMenu.Trigger>
|
||||||
|
<DropdownMenu.Content>
|
||||||
|
<DropdownMenu.Item
|
||||||
|
href={`/api/shortener/${code}/qr`}
|
||||||
|
target="_blank">Standard</DropdownMenu.Item>
|
||||||
|
<DropdownMenu.Item
|
||||||
|
href={`/api/shortener/${code}/qr?color=true`}
|
||||||
|
target="_blank">With Color</DropdownMenu.Item>
|
||||||
|
</DropdownMenu.Content>
|
||||||
|
</DropdownMenu.Root>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
@ -0,0 +1,26 @@
|
|||||||
|
import { db } from '$lib/db'
|
||||||
|
import { redirect } from '@sveltejs/kit'
|
||||||
|
import type { PageServerLoad } from './$types'
|
||||||
|
|
||||||
|
export const load = (async (event) => {
|
||||||
|
const user = event.locals.user
|
||||||
|
const { id } = event.params
|
||||||
|
|
||||||
|
const shortener = await db.query.shortener.findFirst({
|
||||||
|
columns: {
|
||||||
|
code: true,
|
||||||
|
},
|
||||||
|
where: (shortener, { eq, and, isNull }) =>
|
||||||
|
and(eq(shortener.code, id), isNull(shortener.projectId)),
|
||||||
|
})
|
||||||
|
|
||||||
|
if (!shortener) {
|
||||||
|
redirect(300, `/links`)
|
||||||
|
}
|
||||||
|
|
||||||
|
const settings = await db.query.setting.findFirst({
|
||||||
|
where: (settings, { eq }) => eq(settings.userId, user.id),
|
||||||
|
})
|
||||||
|
|
||||||
|
return { shortener, settings }
|
||||||
|
}) satisfies PageServerLoad
|
||||||
@ -0,0 +1,26 @@
|
|||||||
|
<script lang="ts">
|
||||||
|
import { ScrollArea } from '$lib/components/ui/scroll-area'
|
||||||
|
import type { PageData } from './$types'
|
||||||
|
import QR from './(components)/qr.svelte'
|
||||||
|
|
||||||
|
export let data: PageData
|
||||||
|
export let shallowRouting = false
|
||||||
|
</script>
|
||||||
|
|
||||||
|
{#if !shallowRouting}
|
||||||
|
<ScrollArea>
|
||||||
|
<div class="py-4 px-10 max-w-2xl">
|
||||||
|
<QR
|
||||||
|
value={data.shortener_url + '/' + data.shortener.code}
|
||||||
|
code={data.shortener.code}
|
||||||
|
background={data.settings?.qr_background || '#fff'}
|
||||||
|
color={data.settings?.qr_foreground || '#000'} />
|
||||||
|
</div>
|
||||||
|
</ScrollArea>
|
||||||
|
{:else}
|
||||||
|
<QR
|
||||||
|
value={data.shortener_url + '/' + data.shortener.code}
|
||||||
|
code={data.shortener.code}
|
||||||
|
background={data.settings?.qr_background || '#fff'}
|
||||||
|
color={data.settings?.qr_foreground || '#000'} />
|
||||||
|
{/if}
|
||||||
@ -0,0 +1,13 @@
|
|||||||
|
import { z } from 'zod'
|
||||||
|
|
||||||
|
export const formSchema = z.object({
|
||||||
|
link: z.string(),
|
||||||
|
project: z.string().optional(),
|
||||||
|
active: z.boolean(),
|
||||||
|
ios: z.boolean(),
|
||||||
|
ios_link: z.string(),
|
||||||
|
android: z.boolean(),
|
||||||
|
android_link: z.string(),
|
||||||
|
})
|
||||||
|
|
||||||
|
export type FormSchema = typeof formSchema
|
||||||
Loading…
Reference in New Issue