comicinfo-editor-v2/src/lib/MetadataInput.svelte

<script lang="ts">
  import IntegerInput from "./IntegerInput.svelte";
  import TextInput from "./TextInput.svelte";
  import NewListTextInput from "./ListTextInput/NewListTextInput.svelte";
  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";
  import PathInput from "./PathInput.svelte";
  import {tempdir} from "@tauri-apps/api/os";
  import {downloadDir} from "@tauri-apps/api/path";
  let tauriInitDone = false;

  let downloadDirPath: string;
  let tempDirPath: string;

  let returnMessage = "";

  let metadata: Metadata = {
    series_title: "",
    title: "",

    chapter_number: 0,

    total_chapter_count: -1,

    volume_number: -1,

    summary: "",

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

    writer: "",
    translator: "",
    letterer: "",
    editor: "",

    publisher: "",

    genre: "",

    tags: [],

    page_count: 1,

    language: LanguageISO.EN,

    characters: [],

    age_rating: AgeRating.Unknown
  };

  let saveDirectory = "";

  let bundleDirectory = "";
  let doBundle = false;

  $: {
    if (metadata.release_date.year < 0) {
      metadata.release_date.month = -1;
    }
    if (metadata.release_date.month < 0) {
      metadata.release_date.day = -1;
    }
  }

  $: {
    if (tauriInitDone) {
      if (saveDirectory == "") {
        saveDirectory = downloadDirPath;
      }

      if (bundleDirectory == "" && doBundle) {
        bundleDirectory = downloadDirPath;
      }
    }
  }

  async function init() {
    downloadDirPath = await downloadDir();
    tempDirPath = await tempdir();
    tauriInitDone = true;
  }

  function deleteTag(event: any) {
    metadata.tags.splice(event.detail.tagId, 1);
    metadata.tags = metadata.tags;
  }
  
  async function saveMetadata() {
    while (!tauriInitDone) {
      await new Promise( resolve => setTimeout(resolve, 100) );
    }
    console.log(metadata);
    if (bundleDirectory != "") {
      let savePath = saveDirectory;
      if (saveDirectory.endsWith("/")) {
        savePath += "test.cbz";
      }
      else {
        savePath += "/test.cbz";
      }

      let comicInfoPath = await invoke("save", { metadata: metadata, path: tempDirPath});
      let bundlePath = await invoke("save_bundle", { bundleDir: bundleDirectory, metadataFilePath: comicInfoPath, savePath: savePath })
      returnMessage = "Saved '" + metadata.title + "' bundled to '" + bundlePath + "'";
    }
    else {
      let comicInfoPath = await invoke("save", { message: metadata, path: saveDirectory })
      returnMessage = "Saved '" + metadata.title + "' to '" + comicInfoPath + "'";
    }
  }

  init();
</script>

<div class="metadataInputContainer">
  <h1>Metadata</h1>

  <form class="metadataInput" on:submit|preventDefault={saveMetadata}>


    <label for="series">Series:</label>
    <TextInput id="series" bind:value={metadata.series_title} placeholder="Series Title" /><br>

    <label for="title">Title:</label>
    <TextInput id="title" bind:value={metadata.title} placeholder="Volume Title" /><br>

    <label for="volume">Volume:</label>
    <IntegerInput id="volume" bind:value={metadata.volume_number} defaultValue={-1}/>
    <label for="chapter">Chapter:</label>
    <IntegerInput id="chapter" bind:value={metadata.chapter_number} /> /

    <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={metadata.page_count} /><br>

    <label for="summary">Summary:</label><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={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={metadata.writer} placeholder="Author" /><br>

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

    <label for="publisher">Publisher:</label>
    <TextInput id="publisher" bind:value={metadata.publisher} placeholder="Publisher" /><br>

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

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

    <div class="row-left">
      <label for="age-rating">Age Rating:</label>
      <Dropdown id="" bind:activeElement={metadata.age_rating} list={Object.values(AgeRating)} />
    </div>

    <hr>

    <PathInput bind:path={saveDirectory}/>
    <div class="row-left">
      <label for="bundle-check">Bundle:</label>
      <input id="bundle-check" type="checkbox" bind:checked={doBundle}>
    </div>
    {#if doBundle}
      <PathInput bind:path={bundleDirectory}/>
    {/if}
    <input type="submit" value="Save"/>
    <p>{returnMessage}</p>
  </form>
</div>


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

    overflow: auto;
  }

  .metadataInput {
    margin-left: 4rem;
  }

  .metadataInput label, input[type="submit"] {

  }

  .metadataInput h1 {
    position: sticky;
    top: 0;

    margin: 0;

    border-bottom: 2px solid black;

    background-color: var(--color-bg);
    padding: 1.3rem;
  }
</style>