Finished Metadata Input Mask mechanics

2023-11-01 21:55:39 +01:00 · 2023-11-01 21:55:39 +01:00 · d6c5e52527
commit d6c5e52527
parent 5740d173c5
8 changed files with 176 additions and 131 deletions
--- a/src/App.svelte
+++ b/src/App.svelte
@ -22,9 +22,6 @@
        Settings go here
      </p>
    {/if}
-    <div class="row">
-      <Greet />
-    </div>
  
  </div>

--- a/src/lib/Dropdown/Dropdown.svelte
+++ b/src/lib/Dropdown/Dropdown.svelte
@ -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>
--- a/src/lib/IntegerInput.svelte
+++ b/src/lib/IntegerInput.svelte
@ -13,10 +13,6 @@
    function inputInteger(event: Event & {currentTarget: (EventTarget & HTMLInputElement)}) {
        let newValue = event.currentTarget.value;

-        if (newValue.startsWith("0") && newValue.length > 1) {
-            newValue = newValue.slice(1, newValue.length)
-        }
-
        if (newValue != "" && !isNaN(Number(newValue))) {
            value = Number(newValue);
        }
@ -25,17 +21,13 @@
                event.currentTarget.value = value.toString();
            }
        }
-        else if (newValue === "") {
-            event.currentTarget.value = defaultValue.toString();
-            value = defaultValue;
-        }
        else {
            event.currentTarget.value = value.toString();
        }
    }
 </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>
    .digitInput {
--- a/src/lib/ListTextInput/ListTextInputElement.svelte
+++ b/src/lib/ListTextInput/ListTextInputElement.svelte
@ -16,7 +16,7 @@
 </script>

 <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>
    .letterInput {
--- a/src/lib/ListTextInput/NewListTextInput.svelte
+++ b/src/lib/ListTextInput/NewListTextInput.svelte
@ -7,7 +7,7 @@
    }
 </script>

-<button {id} class="letterInput" on:click={handleClick}>+</button>
+<button {id} class="letterInput" on:click|preventDefault={handleClick}>+</button>

 <style>
    .letterInput {
--- a/src/lib/MetadataInput.svelte
+++ b/src/lib/MetadataInput.svelte
@ -5,48 +5,13 @@
  import ListTextInputElement from "./ListTextInput/ListTextInputElement.svelte";
  import {invoke} from "@tauri-apps/api/tauri";
  import {AgeRating, LanguageISO, type Metadata} from "./metadata";
+  import Dropdown from "./Dropdown/Dropdown.svelte";

  let returnMessage = "";

-  let seriesTitle = "";
-  let volumeTitle = "";
-  let volumeNumber = 0;
-  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,
+  let metadata: Metadata = {
+    series_title: "",
+    title: "",

    chapter_number: 0,

@ -56,9 +21,11 @@

    summary: "",

-      year: 2023,
+    release_date: {
+      year: new Date().getFullYear(),
      month: -1,
      day: -1,
+    },

    writer: "",
    translator: "",
@ -71,98 +38,129 @@

    tags: [],

-      page_count: 10,
+    page_count: 1,

    language: LanguageISO.EN,

    characters: [],

-      age_rating: AgeRating.R18,
+    age_rating: AgeRating.Unknown
+  };
+
+  $: {
+    if (metadata.release_date.year < 0) {
+      metadata.release_date.month = -1;
    }
-    console.log(message);
-    returnMessage = await invoke("test", { message })
+    if (metadata.release_date.month < 0) {
+      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>

-<form class="metadataInput" on:submit|preventDefault={saveMetadata}>
+<div class="metadataInputContainer">
  <h1>Metadata</h1>

+  <form class="metadataInput" on:submit|preventDefault={saveMetadata}>
+
+
    <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>
-  <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>
-  <IntegerInput id="volume" bind:value={volumeNumber} />
+    <IntegerInput id="volume" bind:value={metadata.volume_number} defaultValue={-1}/>
    <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>
-  <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"></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>
-  <IntegerInput id="release_year" bind:value={releaseYear} defaultValue={new Date().getFullYear()} />
-  {#if releaseYear > 0}
-    <IntegerInput id="release_month" bind:value={releaseMonth} defaultValue={new Date().getMonth()} />
-    {#if releaseMonth > 0}
-      <IntegerInput id="release_day" bind:value={releaseDay} defaultValue={new Date().getDay()} />
+    <IntegerInput id="release_year" bind:value={metadata.release_date.year}  />
+    {#if metadata.release_date.year > 0}
+      <IntegerInput id="release_month" bind:value={metadata.release_date.month} />
+      {#if metadata.release_date.month > 0}
+        <IntegerInput id="release_day" bind:value={metadata.release_date.day} />
      {/if}
    {/if}
    <br>
    <!--TODO: if date element is 0 do not display finer element, also set finer element to -1-->

    <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>
-  <TextInput id="translator" bind:value={translator} placeholder="Translator" /><br>
+    <TextInput id="translator" bind:value={metadata.translator} placeholder="Translator" /><br>

-  <label for="typesetter">Typesetter:</label>
-  <TextInput id="typesetter" bind:value={typesetter} placeholder="Typesetter" /><br>
+    <label for="typesetter">Letterer:</label>
+    <TextInput id="typesetter" bind:value={metadata.letterer} placeholder="Letterer" /><br>

    <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>
-  <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>
    <!-- List of Tags, New Button -->
-  {#each tags as tag, id}
+    {#each metadata.tags as tag, id}
      <ListTextInputElement {id} bind:value={tag} on:deleted={deleteTag}/>
    {/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>
-  <TextInput id="genre" bind:value={genre} placeholder="Genre" />
+      <TextInput id="genre" bind:value={metadata.genre} placeholder="Genre" />

-  <label for="lang">Language:</label>
-  <input id="lang" type="text"><br>
+      <label for="language-select">Language:</label>
+      <Dropdown id="language-select" bind:activeElement={metadata.language} list={Object.values(LanguageISO)}></Dropdown>
+    </div>

-  <label for="age_rating">Age Rating:</label>
-  <input id="age_rating" type="text"><br>
+    <div class="row-left">
+      <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"/>
    <p>{returnMessage}</p>
  </form>
+</div>
+

 <style>
-  .metadataInput {
+  .metadataInputContainer {
    height: 100%;
+    max-height: 100%;

    overflow: auto;
  }

-  .metadataInput label, input[type="submit"] {
+  .metadataInput {
    margin-left: 4rem;
  }

+  .metadataInput label, input[type="submit"] {
+
+  }
+
  .metadataInput h1 {
    position: sticky;
    top: 0;
--- a/src/lib/metadata.ts
+++ b/src/lib/metadata.ts
@ -8,9 +8,7 @@ type Metadata = {

    summary: string,

-    year: number,
-    month: number,
-    day: number,
+    release_date: ReleaseDate,

    writer: string,
    translator: string,
@ -32,6 +30,12 @@ type Metadata = {
    age_rating: AgeRating
 }

+type ReleaseDate = {
+    year: number,
+    month: number,
+    day: number,
+}
+
 enum AgeRating {
    Unknown = "Unknown",
    AdultsOnly = "Adults Only 18+",
@ -55,4 +59,4 @@ enum LanguageISO {
 }

 export { LanguageISO, AgeRating}
-export type {Metadata}
+export type {Metadata, ReleaseDate}
--- a/src/styles.css
+++ b/src/styles.css
@ -5,6 +5,7 @@
  font-weight: 400;

  --color-bg: #f6f6f6;
+  --color-border: #000000;

  color: #0f0f0f;
  background-color: #f6f6f6;
@ -58,6 +59,11 @@ body, html {
  justify-content: center;
 }

+.row-left {
+  display: flex;
+  gap: 0.5rem;
+}
+
 a {
  font-weight: 500;
  color: #646cff;