stufflog2/svelte-ui/src/components/GoalEntry.svelte

<script lang="ts">
  import type { GoalResult } from "../models/goal";
  import type { ModalData } from "../stores/modal";
import Composition from "./Composition.svelte";
  import EveryMinute from "./EveryMinute.svelte";
  import Option from "./Option.svelte";
  import OptionRow from "./OptionRow.svelte";
  import ParentEntry from "./ParentEntry.svelte";
  import Progress from "./Progress.svelte";
import TimeProgress from "./TimeProgress.svelte";

  export let goal: GoalResult = null;
  export let showAllOptions = false;
  export let linkGoal = false;

  let mdGoalEdit: ModalData;
  let mdGoalDelete: ModalData;

  $: mdGoalEdit = {name:"goal.edit", goal};
  $: mdGoalDelete = {name:"goal.delete", goal};
</script>

<ParentEntry
  full={showAllOptions} 
  entry={goal} 
  headerLink={linkGoal ? "/goals#"+goal.id : ""}
>
  {#if showAllOptions}
    <OptionRow>
      <Option open={mdGoalEdit}>Edit</Option>
      <Option open={mdGoalDelete}>Delete</Option>
    </OptionRow>
  {/if}
  <div class="progress">
    <Progress count={goal.completedAmount} target={goal.amount} />
    <TimeProgress startTime={goal.startTime} endTime={goal.endTime} />
  </div>
  <Composition logs={goal.logs} mode={goal.compositionMode} />
</ParentEntry>

<style>
  div.progress {
    padding-top: 0.125em;
    font-size: 1.25em;
  }
</style>