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

<script>
  import pluralize from "pluralize";
  import capitalize from "capitalize";

  import ModalFrame from "../components/ModalFrame";
  import SubGoalInput from "../components/SubGoalInput";

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

  import dateStr from "../utils/dateStr";

  export let period = {};

  let error = null;
  let goal = null;
  let activity = null;
  let subActivity = null;
  let dateInput = dateStr(new Date);
  let goalId = "";
  let subGoalId = "";
  let subActivityId = "";
  let amount = "200";
  let description = "";
  let dateInPeriod = false;

  function addPeriodLog() {
    error = null;
    const addLog = {
      date: new Date(`${dateInput} 12:00:00.000`),
      goalId: goalId,
      subGoalId: subGoalId,
      subActivityId: subActivityId,
      amount: parseInt(amount),
      description: description,
    }

    stufflog.updatePeriod(period.id, {addLog}).then(() => {
      modal.close();
    }).catch(err => {
      error = err.message || err;
      console.warn(err);
    });
  }

  $: goal = period.goals.find(g => g.id === goalId) || null;
  $: activity = $stufflog.activities.find(a => a.id === goal.activityId) || null;
  $: subActivity = activity.subActivities.find(sg => sg.id === subActivityId) || null;

  $: if (period.goals.length > 0 && goalId === "") {
    goalId = period.goals[0].id;
  }
  $: if (activity != null && !activity.subActivities.find(s => s.id === subActivityId)) {
    if (activity.subActivities.length > 0) {
      subActivityId = activity.subActivities[0].id;
    } else {
      subActivityId = "";
    }
  }

  $: dateInPeriod = Date.parse(dateInput) > Date.parse(period.from) && Date.parse(dateInput) < Date.parse(period.to)
</script>

<ModalFrame title={`Add ${period.name} Log`} error={error} closable on:close={() => modal.close()}>
  <form on:submit|preventDefault={() => addPeriodLog()}>
    <label>Date</label>
    <input type="date" bind:value={dateInput} />

    {#if (!dateInPeriod)}
      <p class="warning">Date is outside period!</p>
    {/if}

    <label>Goal</label>
    <select bind:value={goalId}>
      {#each period.goals as goal (goal.id)}
        <option value={goal.id}>{$stufflog.activities.find(a => a.id === goal.activityId).name}</option>
      {/each}
    </select>

    {#if (activity != null)}
      <label>Sub-Activity</label>
      <select bind:value={subActivityId}>
        {#each activity.subActivities as subActivity (subActivity.id)}
          <option value={subActivity.id}>{subActivity.name}</option>
        {/each}
      </select>
    {/if}

    {#if (subActivity != null)}
      <label>{pluralize(capitalize(subActivity.unitName))}</label>
      <input type="number" bind:value={amount} />
    {/if}

    <label>Description</label>
    <input type="text" bind:value={description} />
  
    <hr />

    <button type="submit">Add Log</button>
  </form>
</ModalFrame>

<style>
  p.warning {
    color: #FB1;
    margin: 0;
    text-align: center;
  }
</style>