Finished Metadata Input Mask mechanics

This commit is contained in:
Neshura 2023-11-01 21:55:39 +01:00
parent 5740d173c5
commit d6c5e52527
Signed by: Neshura
GPG key ID: B6983AAA6B9A7A6C
8 changed files with 176 additions and 131 deletions

View file

@ -22,9 +22,6 @@
Settings go here Settings go here
</p> </p>
{/if} {/if}
<div class="row">
<Greet />
</div>
</div> </div>

View file

@ -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>

View file

@ -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 {

View file

@ -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 {

View file

@ -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 {

View file

@ -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;

View file

@ -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}

View file

@ -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;