stufflog/svelte-ui/src/modals/EditActivityModal.svelte

<script>
  import ModalFrame from "../components/ModalFrame";
  import ActivityIconSelect from "../components/ActivityIconSelect";

  import modal from "../stores/modal";
  import stufflog from "../stores/stufflog";

  export let activity = {}

  let name = activity.name;
  let icon = activity.icon;
  let dailyBonus = activity.dailyBonus;
  let error = null;

  function editActivity() {
    stufflog.updateActivity(activity.id, {setName: name, setIcon: icon, setDailyBonus: dailyBonus}).then(() => {
      modal.close();
    }).catch(err => {
      error = err.message || err;
      console.warn(err);
    });
  }
</script>

<ModalFrame title={`Update ${activity.name}`} error={error} closable on:close={() => modal.close()}>
  <form on:submit|preventDefault={() => editActivity()}>
    <label>Name</label>
    <input type="text" bind:value={name} />
    <label>Icon</label>
    <ActivityIconSelect bind:value={icon} />
    <label>Daily Bonus</label>
    <input type="number" bind:value={dailyBonus} />
    <hr />

    <button type="submit">Edit Activity</button>
  </form>
</ModalFrame>