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

<script>
  import pluralize from "pluralize";

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

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

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

  export let period = {};
  export let log = {};
  export let activity = {};
  export let subActivity = {};
  export let subGoal = null;

  let activityPoints = 0;
  let subGoalBonus = 0;
  let roundingError = 0;

  $: activityPoints = log.score.amount * log.score.activityScore;
  $: subGoalBonus = subGoal.multiplier ? activityPoints * (subGoal.multiplier - 1) : 0;
  $: roundingError = (log.score.total) - (Math.floor(activityPoints) + Math.floor(subGoalBonus) + log.score.dailyBonus);
</script>

<ModalFrame title={`${dateStr(log.date)} - ${activity.name} ${subActivity.name}`} closable on:close={() => modal.close()}>
  <form on:submit|preventDefault={() => modal.close()}>
    {#if log.description !== ""}
      <Property label="Description">
        {log.description}
      </Property>
    {/if}
    
    <Property label="Activity Points">
      {Math.floor(activityPoints + roundingError)} points
      ({log.score.amount} {pluralize(subActivity.unitName, log.score.amount)})
    </Property>
    {#if subGoal.multiplier != null}
      <Property label="Sub-Goal">
        {Math.floor(subGoalBonus)} points
        ({subGoal.name})
      </Property>
    {/if}
    {#if log.score.dailyBonus != 0}
      <Property label="Daily Bonus">
        {log.score.dailyBonus} points
      </Property>
    {/if}
    <Property label="Total">
      {log.score.total} points
    </Property>

    <hr />

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

<style>
</style>