Titel bearbeiten mit Button speichern

src/components/Medium.svelte

@@ -1,42 +1,53 @@
 <script>
-console.log('Medium')
+  console.log("Medium");
   import { db, view } from "./../stores.js";
   import Schueler from "./Schueler.svelte";
   import { get_schueler } from "./../getter.js";
   export let medium = [];
   export let modal;
-  export let update
+  export let update;
   let suche = "";
-  let yes
-  $: medien_filter = medium.filter(m =>
-    m.barcode && m.barcode.toLowerCase().includes(suche.toLowerCase())
+  let yes;
+  $: medien_filter = medium.filter(
+    (m) => m.barcode && m.barcode.toLowerCase().includes(suche.toLowerCase())
   );
-  const edit = _ => {
-    const m = medium[0]
-    const res = $db.prepare(`
+  const edit = (_) => {
+    const m = medium[0];
+    const res = $db
+      .prepare(
+        `
       UPDATE medienbezeichnung SET name=? WHERE id = ?
-    `).run(m.medien_name, m.medien_id)
-    if (res) update()
-    else console.log('Es gab einen Fehler beim Ändern der Medienbezeichnung')
+    `
+      )
+      .run(m.medien_name, m.medien_id);
+    if (res) update();
+    else console.log("Es gab einen Fehler beim Ändern der Medienbezeichnung");
   };
-  const remove_medium = _ => {
-    const res = $db.prepare(`
+  const remove_medium = (_) => {
+    const res = $db
+      .prepare(
+        `
       DELETE FROM medienbezeichnung WHERE id = ?
-    `).run(medium[0].medien_id)
+    `
+      )
+      .run(medium[0].medien_id);
     if (res) {
-      update()
-      modal = false
-    }
-    else console.log('Es gab einen Fehler beim Löschen des Mediums')
+      update();
+      modal = false;
+    } else console.log("Es gab einen Fehler beim Löschen des Mediums");
   };
-  const remove_exemplar = e => {
-    const res = $db.prepare(`
+  const remove_exemplar = (e) => {
+    const res = $db
+      .prepare(
+        `
       DELETE FROM medienexemplar WHERE id = ?
-    `).run(e.exemplar_id)
-    if (res) update()
-    else console.log('Es gab einen Fehler beim Löschen des Exemplars')
+    `
+      )
+      .run(e.exemplar_id);
+    if (res) update();
+    else console.log("Es gab einen Fehler beim Löschen des Exemplars");
   };
-  const schueler_action = s => {
+  const schueler_action = (s) => {
     if (s.verliehen) {
       get_schueler({ id: s.schueler_id });
       $view = Schueler;
@@ -44,34 +55,49 @@ console.log('Medium')
   };
 </script>
 
-<svelte:window on:keydown={e => (e.key === 'Escape') && (modal = false)}/>
+<svelte:window on:keydown={(e) => e.key === 'Escape' && (modal = false)} />
 <div class="modal" class:is-active={modal}>
-  <div class="modal-background" on:click={()=>modal=false}/>
-  <button class="modal-close is-large" aria-label="close" on:click={()=>modal=false}></button>
+  <div class="modal-background" on:click={() => (modal = false)} />
+  <button
+    class="modal-close is-large"
+    aria-label="close"
+    on:click={() => (modal = false)} />
   <div class="modal-content">
     <div class="box">
-      <div class="field">
-        <div class="control">
-        <label class="label">
-          Medien-Titel
-            <input
+      <label class="label" for="titel_aendern">Titel bearbeiten</label>
+      <div class="field has-addons">
+        <div class="control is-expanded">
+          <input
+            id="titel_aendern"
             class="input"
             type="text"
             bind:value={medium[0].medien_name}
-            on:keydown={e => e.key === 'Enter' && edit()} />
-          </label>
+            on:keydown={(e) => e.key === 'Enter' && edit()} />
+        </div>
+        <div class="control">
+          <button class="button is-primary" on:click={() => edit()}>
+            Speichern
+          </button>
         </div>
       </div>
       {#if yes}
-        <button class="button is-small is-fullwidth is-danger" on:click={()=>remove_medium()}>Medium löschen</button>
+        <button
+          class="button is-small is-fullwidth is-danger"
+          on:click={() => remove_medium()}>
+          Medium löschen
+        </button>
       {:else}
         <div class="field">
           <label class="checkbox is-danger">
-          <input type="checkbox" bind:checked={yes}> Entfernen aktivieren. Alle Exemplare und Leihgaben dieses Mediums werden gelöscht.</label>
+            <input type="checkbox" bind:checked={yes} />
+            Entfernen aktivieren. Alle Exemplare und Leihgaben dieses Mediums
+            werden gelöscht.
+          </label>
         </div>
       {/if}
       <hr />
-      Füge neue Exemplare durch einscannen neuer Barcodes diesem Titel hinzu. Bereits vergebene Barcodes müssen erst gelöscht werden.
+      Füge neue Exemplare durch einscannen neuer Barcodes diesem Titel hinzu.
+      Bereits vergebene Barcodes müssen erst gelöscht werden.
       <div class="field">
         <div class="control">
           <input
@@ -96,7 +122,9 @@ console.log('Medium')
             <tr>
               <td>{e.barcode}</td>
               {#if e.verliehen}
-                <td style="cursor:pointer" on:click={() => schueler_action(e)}>{e.name}, {e.vorname}</td>
+                <td style="cursor:pointer" on:click={() => schueler_action(e)}>
+                  {e.name}, {e.vorname}
+                </td>
                 <td>{e.klasse}</td>
                 <td>{e.jahr}</td>
               {:else}