Skip to content

Commit

Permalink
feat: ranking settings
Browse files Browse the repository at this point in the history
  • Loading branch information
davidemarcoli committed Nov 8, 2024
1 parent af4b2fb commit 279544e
Show file tree
Hide file tree
Showing 8 changed files with 1,302 additions and 62 deletions.
39 changes: 39 additions & 0 deletions src/lib/forms/components/custom-rank-section.svelte
Original file line number Diff line number Diff line change
@@ -0,0 +1,39 @@
<script lang="ts">
import { slide } from 'svelte/transition';
import type { SuperForm } from 'sveltekit-superforms';
import CheckboxField from './checkbox-field.svelte';
import NumberField from './number-field.svelte';
import { Separator } from '$lib/components/ui/separator';
// eslint-disable-next-line @typescript-eslint/no-explicit-any
export let form: SuperForm<any, any>;
// eslint-disable-next-line @typescript-eslint/no-explicit-any
export let formData: any;
export let sectionTitle: string;
export let prefix: 'quality' | 'rips' | 'hdr' | 'audio' | 'extras' | 'trash';
export let types: readonly string[];
</script>

<div class="space-y-4">
<h3 class="text-lg font-medium">{sectionTitle}</h3>
{#each types as type}
<div class="rounded border p-4">
<CheckboxField {form} name={`${prefix}_${type}_fetch`} label={type} {formData} />
{#if $formData[`${prefix}_${type}_fetch`]}
<div transition:slide class="ml-4 mt-4 space-y-2">
<CheckboxField
{form}
name={`${prefix}_${type}_use_custom_rank`}
label="Use Custom Rank"
{formData}
/>
{#if $formData[`${prefix}_${type}_use_custom_rank`]}
<NumberField {form} name={`${prefix}_${type}_rank`} {formData} stepValue={1} />
{/if}
</div>
{/if}
</div>
{/each}
</div>

<Separator />
182 changes: 182 additions & 0 deletions src/lib/forms/components/language-codes.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,182 @@
export const languageCodes = [
'aa',
'ab',
'af',
'ak',
'am',
'ar',
'as',
'ay',
'az',
'ba',
'be',
'bg',
'bh',
'bi',
'bn',
'bo',
'br',
'bs',
'ca',
'ce',
'ch',
'co',
'cr',
'cs',
'cu',
'cv',
'cy',
'da',
'de',
'dv',
'dz',
'ee',
'el',
'en',
'eo',
'es',
'et',
'eu',
'fa',
'ff',
'fi',
'fj',
'fo',
'fr',
'fy',
'ga',
'gd',
'gl',
'gn',
'gu',
'gv',
'ha',
'he',
'hi',
'ho',
'hr',
'ht',
'hu',
'hy',
'hz',
'ia',
'id',
'ie',
'ig',
'ii',
'ik',
'io',
'is',
'it',
'iu',
'ja',
'jv',
'ka',
'kg',
'ki',
'kj',
'kk',
'kl',
'km',
'kn',
'ko',
'kr',
'ks',
'ku',
'kv',
'kw',
'ky',
'la',
'lb',
'lg',
'li',
'ln',
'lo',
'lt',
'lu',
'lv',
'mg',
'mh',
'mi',
'mk',
'ml',
'mn',
'mr',
'ms',
'mt',
'my',
'na',
'nb',
'nd',
'ne',
'ng',
'nl',
'nn',
'no',
'nr',
'nv',
'ny',
'oc',
'oj',
'om',
'or',
'os',
'pa',
'pi',
'pl',
'ps',
'pt',
'qu',
'rm',
'rn',
'ro',
'ru',
'rw',
'sa',
'sc',
'sd',
'se',
'sg',
'si',
'sk',
'sl',
'sm',
'sn',
'so',
'sq',
'sr',
'ss',
'st',
'su',
'sv',
'sw',
'ta',
'te',
'tg',
'th',
'ti',
'tk',
'tl',
'tn',
'to',
'tr',
'ts',
'tt',
'tw',
'ty',
'ug',
'uk',
'ur',
'uz',
've',
'vi',
'vo',
'wa',
'wo',
'xh',
'yi',
'yo',
'za',
'zh',
'zu'
];
81 changes: 81 additions & 0 deletions src/lib/forms/components/language-field.svelte
Original file line number Diff line number Diff line change
@@ -0,0 +1,81 @@
<script lang="ts">
import * as Form from '$lib/components/ui/form';
import { Input } from '$lib/components/ui/input';
import { Trash2, Plus } from 'lucide-svelte';
import { languageCodes } from './language-codes';
import ArrayField from './array-field.svelte';
// eslint-disable-next-line @typescript-eslint/no-explicit-any
export let form: any;
// eslint-disable-next-line @typescript-eslint/no-explicit-any
export let formData: any;
export let name: string;
function addField() {
$formData[name] = [...$formData[name], ''];
}
function removeField(index: number) {
// @ts-expect-error eslint-disable-next-line
$formData[name] = $formData[name].filter((_, i) => i !== index);
}
// Language code validation
function validateInput(event: Event, index: number) {
const input = event.target as HTMLInputElement;
let value = input.value.toLowerCase();
// Only allow letters
value = value.replace(/[^a-z]/g, '');
// Limit to 2 characters
if (value.length > 2) {
value = value.slice(0, 2);
}
// Update the form data
$formData[name][index] = value;
}
</script>

<ArrayField {form} {name} {formData}>
{#each $formData[name] as _, i}
<Form.ElementField {form} name="{name}[{i}]">
<Form.Control let:attrs>
<div class="flex items-center gap-2">
<Input
type="text"
spellcheck="false"
autocomplete="false"
{...attrs}
bind:value={$formData[name][i]}
on:input={(e) => validateInput(e, i)}
/>
<Form.Button
type="button"
size="sm"
variant="destructive"
on:click={() => removeField(i)}
>
<Trash2 class="h-4 w-4" />
</Form.Button>
</div>
</Form.Control>
<Form.Description>
{#if $formData[name][i]}
{#if languageCodes.includes($formData[name][i].toLowerCase())}
<span class="text-green-500">Valid language code</span>
{:else}
<span class="text-yellow-500">Invalid language code</span>
{/if}
{/if}
</Form.Description>
</Form.ElementField>
{/each}
<div class="flex w-full items-center justify-between gap-2">
<p class="text-sm text-muted-foreground">Add language code (e.g., en, fr, de)</p>
<Form.Button type="button" size="sm" variant="outline" on:click={addField}>
<Plus class="h-4 w-4" />
</Form.Button>
</div>
</ArrayField>
Loading

0 comments on commit 279544e

Please sign in to comment.