Finished Metadata Input Mask mechanics
This commit is contained in:
parent
5740d173c5
commit
d6c5e52527
8 changed files with 176 additions and 131 deletions
|
@ -22,9 +22,6 @@
|
||||||
Settings go here
|
Settings go here
|
||||||
</p>
|
</p>
|
||||||
{/if}
|
{/if}
|
||||||
<div class="row">
|
|
||||||
<Greet />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
|
@ -0,0 +1,48 @@
|
||||||
|
<script lang="ts">
|
||||||
|
let open = false;
|
||||||
|
|
||||||
|
export let list: Array<string>;
|
||||||
|
export let activeElement: string;
|
||||||
|
export let id: string;
|
||||||
|
|
||||||
|
function handleDropdownOpen() {
|
||||||
|
open = !open;
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleSelect(newSelection: string) {
|
||||||
|
console.log("newSelection")
|
||||||
|
activeElement = newSelection;
|
||||||
|
open = false;
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div {id} class="dropdown-container">
|
||||||
|
<button on:click|preventDefault={handleDropdownOpen}>{activeElement}</button>
|
||||||
|
|
||||||
|
{#if open}
|
||||||
|
<div class="dropdown-list">
|
||||||
|
{#each list as listElem}
|
||||||
|
<div class="dropdown-element" on:click|preventDefault={() => {handleSelect(listElem)}}>{listElem}</div>
|
||||||
|
{/each}
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.dropdown-container {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dropdown-list {
|
||||||
|
position: absolute;
|
||||||
|
|
||||||
|
max-height: 10rem;
|
||||||
|
|
||||||
|
overflow-y: auto;
|
||||||
|
|
||||||
|
z-index: 100;
|
||||||
|
|
||||||
|
background-color: var(--color-bg);
|
||||||
|
border: 1px solid var(--color-border)
|
||||||
|
}
|
||||||
|
</style>
|
|
@ -13,10 +13,6 @@
|
||||||
function inputInteger(event: Event & {currentTarget: (EventTarget & HTMLInputElement)}) {
|
function inputInteger(event: Event & {currentTarget: (EventTarget & HTMLInputElement)}) {
|
||||||
let newValue = event.currentTarget.value;
|
let newValue = event.currentTarget.value;
|
||||||
|
|
||||||
if (newValue.startsWith("0") && newValue.length > 1) {
|
|
||||||
newValue = newValue.slice(1, newValue.length)
|
|
||||||
}
|
|
||||||
|
|
||||||
if (newValue != "" && !isNaN(Number(newValue))) {
|
if (newValue != "" && !isNaN(Number(newValue))) {
|
||||||
value = Number(newValue);
|
value = Number(newValue);
|
||||||
}
|
}
|
||||||
|
@ -25,17 +21,13 @@
|
||||||
event.currentTarget.value = value.toString();
|
event.currentTarget.value = value.toString();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
else if (newValue === "") {
|
|
||||||
event.currentTarget.value = defaultValue.toString();
|
|
||||||
value = defaultValue;
|
|
||||||
}
|
|
||||||
else {
|
else {
|
||||||
event.currentTarget.value = value.toString();
|
event.currentTarget.value = value.toString();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<input {id} type="text" class="digitInput" style="--valuelen: {value.toString().length + 3}ch" on:input|preventDefault={inputInteger} {value}>
|
<input {id} type="number" class="digitInput" style="--valuelen: {value.toString().length + 4}ch" on:input|preventDefault={inputInteger} {value}>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
.digitInput {
|
.digitInput {
|
||||||
|
|
|
@ -16,7 +16,7 @@
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<input id="tag-{id}" type="text" class="letterInput" style="--valuelen: {width}ch" bind:value={value}>
|
<input id="tag-{id}" type="text" class="letterInput" style="--valuelen: {width}ch" bind:value={value}>
|
||||||
<button on:click={handleClick}>X</button>
|
<button on:click|preventDefault={handleClick}>X</button>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
.letterInput {
|
.letterInput {
|
||||||
|
|
|
@ -7,7 +7,7 @@
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<button {id} class="letterInput" on:click={handleClick}>+</button>
|
<button {id} class="letterInput" on:click|preventDefault={handleClick}>+</button>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
.letterInput {
|
.letterInput {
|
||||||
|
|
|
@ -5,48 +5,13 @@
|
||||||
import ListTextInputElement from "./ListTextInput/ListTextInputElement.svelte";
|
import ListTextInputElement from "./ListTextInput/ListTextInputElement.svelte";
|
||||||
import {invoke} from "@tauri-apps/api/tauri";
|
import {invoke} from "@tauri-apps/api/tauri";
|
||||||
import {AgeRating, LanguageISO, type Metadata} from "./metadata";
|
import {AgeRating, LanguageISO, type Metadata} from "./metadata";
|
||||||
|
import Dropdown from "./Dropdown/Dropdown.svelte";
|
||||||
|
|
||||||
let returnMessage = "";
|
let returnMessage = "";
|
||||||
|
|
||||||
let seriesTitle = "";
|
let metadata: Metadata = {
|
||||||
let volumeTitle = "";
|
series_title: "",
|
||||||
let volumeNumber = 0;
|
title: "",
|
||||||
let chapterNumber = 0;
|
|
||||||
let pageCount = 1;
|
|
||||||
let chapterCount = 0;
|
|
||||||
let summary = "";
|
|
||||||
let releaseYear: number;
|
|
||||||
let releaseMonth: number;
|
|
||||||
let releaseDay: number;
|
|
||||||
let author: string;
|
|
||||||
let typesetter: string;
|
|
||||||
let editor: string;
|
|
||||||
let translator: string;
|
|
||||||
let publisher: string;
|
|
||||||
let tags: Array<string> = [];
|
|
||||||
let genre = "Hentai";
|
|
||||||
let lang = LanguageISO.EN;
|
|
||||||
let ageRating = AgeRating.R18;
|
|
||||||
|
|
||||||
$: {
|
|
||||||
if (releaseYear < 0) {
|
|
||||||
releaseMonth = -1;
|
|
||||||
}
|
|
||||||
if (releaseMonth < 0) {
|
|
||||||
releaseDay = -1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function deleteTag(event: any) {
|
|
||||||
console.log("deleted")
|
|
||||||
tags.splice(event.detail.tagId, 1);
|
|
||||||
tags = tags;
|
|
||||||
}
|
|
||||||
|
|
||||||
async function saveMetadata() {
|
|
||||||
let message: Metadata = {
|
|
||||||
title: volumeTitle,
|
|
||||||
series_title: seriesTitle,
|
|
||||||
|
|
||||||
chapter_number: 0,
|
chapter_number: 0,
|
||||||
|
|
||||||
|
@ -56,9 +21,11 @@
|
||||||
|
|
||||||
summary: "",
|
summary: "",
|
||||||
|
|
||||||
year: 2023,
|
release_date: {
|
||||||
|
year: new Date().getFullYear(),
|
||||||
month: -1,
|
month: -1,
|
||||||
day: -1,
|
day: -1,
|
||||||
|
},
|
||||||
|
|
||||||
writer: "",
|
writer: "",
|
||||||
translator: "",
|
translator: "",
|
||||||
|
@ -71,98 +38,129 @@
|
||||||
|
|
||||||
tags: [],
|
tags: [],
|
||||||
|
|
||||||
page_count: 10,
|
page_count: 1,
|
||||||
|
|
||||||
language: LanguageISO.EN,
|
language: LanguageISO.EN,
|
||||||
|
|
||||||
characters: [],
|
characters: [],
|
||||||
|
|
||||||
age_rating: AgeRating.R18,
|
age_rating: AgeRating.Unknown
|
||||||
|
};
|
||||||
|
|
||||||
|
$: {
|
||||||
|
if (metadata.release_date.year < 0) {
|
||||||
|
metadata.release_date.month = -1;
|
||||||
}
|
}
|
||||||
console.log(message);
|
if (metadata.release_date.month < 0) {
|
||||||
returnMessage = await invoke("test", { message })
|
metadata.release_date.day = -1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function deleteTag(event: any) {
|
||||||
|
metadata.tags.splice(event.detail.tagId, 1);
|
||||||
|
metadata.tags = metadata.tags;
|
||||||
|
}
|
||||||
|
|
||||||
|
async function saveMetadata() {
|
||||||
|
console.log(metadata);
|
||||||
|
returnMessage = await invoke("test", { message: metadata })
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<form class="metadataInput" on:submit|preventDefault={saveMetadata}>
|
<div class="metadataInputContainer">
|
||||||
<h1>Metadata</h1>
|
<h1>Metadata</h1>
|
||||||
|
|
||||||
|
<form class="metadataInput" on:submit|preventDefault={saveMetadata}>
|
||||||
|
|
||||||
|
|
||||||
<label for="series">Series:</label>
|
<label for="series">Series:</label>
|
||||||
<TextInput id="series" bind:value={seriesTitle} placeholder="Series Title" /><br>
|
<TextInput id="series" bind:value={metadata.series_title} placeholder="Series Title" /><br>
|
||||||
|
|
||||||
<label for="title">Title:</label>
|
<label for="title">Title:</label>
|
||||||
<TextInput id="title" bind:value={volumeTitle} placeholder="Volume Title" /><br>
|
<TextInput id="title" bind:value={metadata.title} placeholder="Volume Title" /><br>
|
||||||
|
|
||||||
<label for="volume">Volume:</label>
|
<label for="volume">Volume:</label>
|
||||||
<IntegerInput id="volume" bind:value={volumeNumber} />
|
<IntegerInput id="volume" bind:value={metadata.volume_number} defaultValue={-1}/>
|
||||||
<label for="chapter">Chapter:</label>
|
<label for="chapter">Chapter:</label>
|
||||||
<IntegerInput id="chapter" bind:value={chapterNumber} /> /
|
<IntegerInput id="chapter" bind:value={metadata.chapter_number} /> /
|
||||||
|
|
||||||
<IntegerInput id="chapter_count" bind:value={chapterCount} negative={true}/><br>
|
<IntegerInput id="chapter_count" bind:value={metadata.total_chapter_count} negative={true}/><br>
|
||||||
|
|
||||||
<label for="page_count">Page Count</label>
|
<label for="page_count">Page Count</label>
|
||||||
<IntegerInput id="page_count" bind:value={pageCount} defaultValue={1} /><br>
|
<IntegerInput id="page_count" bind:value={metadata.page_count} /><br>
|
||||||
|
|
||||||
<label for="summary">Summary:</label><br>
|
<label for="summary">Summary:</label><br>
|
||||||
<label for="summary"></label><input id="series" type="text"><br>
|
<label for="summary"></label><textarea rows="3" cols="60" id="series" name="text" placeholder="Summary..." bind:value={metadata.summary}></textarea><br>
|
||||||
|
|
||||||
<label for="release_date">Release Date:</label>
|
<label for="release_date">Release Date:</label>
|
||||||
<IntegerInput id="release_year" bind:value={releaseYear} defaultValue={new Date().getFullYear()} />
|
<IntegerInput id="release_year" bind:value={metadata.release_date.year} />
|
||||||
{#if releaseYear > 0}
|
{#if metadata.release_date.year > 0}
|
||||||
<IntegerInput id="release_month" bind:value={releaseMonth} defaultValue={new Date().getMonth()} />
|
<IntegerInput id="release_month" bind:value={metadata.release_date.month} />
|
||||||
{#if releaseMonth > 0}
|
{#if metadata.release_date.month > 0}
|
||||||
<IntegerInput id="release_day" bind:value={releaseDay} defaultValue={new Date().getDay()} />
|
<IntegerInput id="release_day" bind:value={metadata.release_date.day} />
|
||||||
{/if}
|
{/if}
|
||||||
{/if}
|
{/if}
|
||||||
<br>
|
<br>
|
||||||
<!--TODO: if date element is 0 do not display finer element, also set finer element to -1-->
|
<!--TODO: if date element is 0 do not display finer element, also set finer element to -1-->
|
||||||
|
|
||||||
<label for="author">Author:</label>
|
<label for="author">Author:</label>
|
||||||
<TextInput id="author" bind:value={author} placeholder="Author" /><br>
|
<TextInput id="author" bind:value={metadata.writer} placeholder="Author" /><br>
|
||||||
|
|
||||||
<label for="translator">Translator:</label>
|
<label for="translator">Translator:</label>
|
||||||
<TextInput id="translator" bind:value={translator} placeholder="Translator" /><br>
|
<TextInput id="translator" bind:value={metadata.translator} placeholder="Translator" /><br>
|
||||||
|
|
||||||
<label for="typesetter">Typesetter:</label>
|
<label for="typesetter">Letterer:</label>
|
||||||
<TextInput id="typesetter" bind:value={typesetter} placeholder="Typesetter" /><br>
|
<TextInput id="typesetter" bind:value={metadata.letterer} placeholder="Letterer" /><br>
|
||||||
|
|
||||||
<label for="editor">Editor:</label>
|
<label for="editor">Editor:</label>
|
||||||
<TextInput id="editor" bind:value={editor} placeholder="Editor" /><br>
|
<TextInput id="editor" bind:value={metadata.editor} placeholder="Editor" /><br>
|
||||||
|
|
||||||
<label for="publisher">Publisher:</label>
|
<label for="publisher">Publisher:</label>
|
||||||
<TextInput id="publisher" bind:value={publisher} placeholder="Publisher" /><br>
|
<TextInput id="publisher" bind:value={metadata.publisher} placeholder="Publisher" /><br>
|
||||||
|
|
||||||
<label for="new-tag">Tags:</label>
|
<label for="new-tag">Tags:</label>
|
||||||
<!-- List of Tags, New Button -->
|
<!-- List of Tags, New Button -->
|
||||||
{#each tags as tag, id}
|
{#each metadata.tags as tag, id}
|
||||||
<ListTextInputElement {id} bind:value={tag} on:deleted={deleteTag}/>
|
<ListTextInputElement {id} bind:value={tag} on:deleted={deleteTag}/>
|
||||||
{/each}
|
{/each}
|
||||||
<NewListTextInput id="new-tag" bind:value={tags[tags.length]}/><br>
|
<NewListTextInput id="new-tag" bind:value={metadata.tags[metadata.tags.length]}/><br>
|
||||||
|
|
||||||
|
|
||||||
|
<div class="row-left">
|
||||||
<label for="genre">Genre:</label>
|
<label for="genre">Genre:</label>
|
||||||
<TextInput id="genre" bind:value={genre} placeholder="Genre" />
|
<TextInput id="genre" bind:value={metadata.genre} placeholder="Genre" />
|
||||||
|
|
||||||
<label for="lang">Language:</label>
|
<label for="language-select">Language:</label>
|
||||||
<input id="lang" type="text"><br>
|
<Dropdown id="language-select" bind:activeElement={metadata.language} list={Object.values(LanguageISO)}></Dropdown>
|
||||||
|
</div>
|
||||||
|
|
||||||
<label for="age_rating">Age Rating:</label>
|
<div class="row-left">
|
||||||
<input id="age_rating" type="text"><br>
|
<label for="age-rating">Age Rating:</label>
|
||||||
|
<Dropdown id="" bind:activeElement={metadata.age_rating} list={Object.values(AgeRating)}></Dropdown>
|
||||||
|
</div>
|
||||||
|
|
||||||
<input type="submit" value="Save"/>
|
<input type="submit" value="Save"/>
|
||||||
<p>{returnMessage}</p>
|
<p>{returnMessage}</p>
|
||||||
</form>
|
</form>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
.metadataInput {
|
.metadataInputContainer {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
max-height: 100%;
|
||||||
|
|
||||||
overflow: auto;
|
overflow: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
.metadataInput label, input[type="submit"] {
|
.metadataInput {
|
||||||
margin-left: 4rem;
|
margin-left: 4rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.metadataInput label, input[type="submit"] {
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
.metadataInput h1 {
|
.metadataInput h1 {
|
||||||
position: sticky;
|
position: sticky;
|
||||||
top: 0;
|
top: 0;
|
||||||
|
|
|
@ -8,9 +8,7 @@ type Metadata = {
|
||||||
|
|
||||||
summary: string,
|
summary: string,
|
||||||
|
|
||||||
year: number,
|
release_date: ReleaseDate,
|
||||||
month: number,
|
|
||||||
day: number,
|
|
||||||
|
|
||||||
writer: string,
|
writer: string,
|
||||||
translator: string,
|
translator: string,
|
||||||
|
@ -32,6 +30,12 @@ type Metadata = {
|
||||||
age_rating: AgeRating
|
age_rating: AgeRating
|
||||||
}
|
}
|
||||||
|
|
||||||
|
type ReleaseDate = {
|
||||||
|
year: number,
|
||||||
|
month: number,
|
||||||
|
day: number,
|
||||||
|
}
|
||||||
|
|
||||||
enum AgeRating {
|
enum AgeRating {
|
||||||
Unknown = "Unknown",
|
Unknown = "Unknown",
|
||||||
AdultsOnly = "Adults Only 18+",
|
AdultsOnly = "Adults Only 18+",
|
||||||
|
@ -55,4 +59,4 @@ enum LanguageISO {
|
||||||
}
|
}
|
||||||
|
|
||||||
export { LanguageISO, AgeRating}
|
export { LanguageISO, AgeRating}
|
||||||
export type {Metadata}
|
export type {Metadata, ReleaseDate}
|
|
@ -5,6 +5,7 @@
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
|
|
||||||
--color-bg: #f6f6f6;
|
--color-bg: #f6f6f6;
|
||||||
|
--color-border: #000000;
|
||||||
|
|
||||||
color: #0f0f0f;
|
color: #0f0f0f;
|
||||||
background-color: #f6f6f6;
|
background-color: #f6f6f6;
|
||||||
|
@ -58,6 +59,11 @@ body, html {
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.row-left {
|
||||||
|
display: flex;
|
||||||
|
gap: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
a {
|
a {
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
color: #646cff;
|
color: #646cff;
|
||||||
|
|
Reference in a new issue