stufflog2/svelte-ui/src/pages/FrontPage.svelte

<script lang="ts">
  import EmptyList from "../components/EmptyList.svelte";
import EmptyParentEntry from "../components/EmptyParentEntry.svelte";
  import GoalEntry from "../components/GoalEntry.svelte";
import LogEntry from "../components/LogEntry.svelte";
import ParentEntry from "../components/ParentEntry.svelte";
  import ProjectEntry from "../components/ProjectEntry.svelte";
  import RefreshSelection from "../components/RefreshSelection.svelte";
  import type { ProjectResult } from "../models/project";
  import { fpGoalStore } from "../stores/goal";
  import { fpLogStore } from "../stores/logs";
  import { fpProjectStore, fpProjectStore2 } from "../stores/project";
  import { fpTaskStore } from "../stores/tasks";
  import { endOfDay, startOfDay } from "../utils/time";

  let fakeMap: {[projectId: string]: boolean} = {}
  let fakeProjects: ProjectResult[]
  let sortedProjects: ProjectResult[]

  $: {
    if ($fpGoalStore.stale && !$fpGoalStore.loading) {
      fpGoalStore.load({
        maxTime: new Date(Date.now() + (86400000 * 3)),
        minTime: new Date(),
      });
    }
  }

  $: {
    if ($fpTaskStore.stale && !$fpTaskStore.loading) {
      fpTaskStore.load({
        active: true,
        expiring: true,
      })
    }
  }

  $: {
    if ($fpProjectStore.stale && !$fpProjectStore.loading) {
      fpProjectStore.load({
        active: true,
        expiring: true,
        includeSemiActive: true,
      });
    }
  }

  $: {
    if ($fpProjectStore2.stale && !$fpProjectStore2.loading) {
      fpProjectStore2.load({
        favorite: true,
      });
    }
  }


  $: {
    if ($fpLogStore.stale && !$fpLogStore.loading) {
      fpLogStore.load({
        maxTime: endOfDay(new Date()),
        minTime: startOfDay(new Date()),
      })
    }
  }

  $: {
    const individualTasks = $fpTaskStore.tasks
      .filter(t => $fpProjectStore.projects.find(p => p.id === t.projectId) == null)
      .sort((a,b) => Date.parse(a.endTime) - Date.parse(b.endTime));
    
    fakeProjects = [];
    fakeMap = {};
    for (let task of individualTasks) {
      if (!task.project.active) {
        continue;
      }

      let fakeProject = fakeProjects.find(p => p.id === task.id);
      if (fakeProject == null) {
        fakeMap[task.projectId] = true;
        fakeProjects.push({
          ...task.project,
          tasks: [task],
        });
      } else {
        fakeProject.tasks.push(task);
      }
    }

    for (const fakeProject of fakeProjects) {
      fakeProject.createdTime = fakeProject.tasks.map(t => t.createdTime).sort()[0];
      fakeProject.endTime = fakeProject.tasks[0].endTime;
    }
  }

  $: {
    sortedProjects = [...fakeProjects, ...$fpProjectStore.projects]
      .sort((a,b) => Date.parse(a.endTime) - Date.parse(b.endTime));
  }
</script>

<div class="page">
  <div class="left">
    {#if !$fpGoalStore.loading || $fpGoalStore.goals.length > 0}
      <h1>Active Goals</h1>
    {/if}
    {#each $fpGoalStore.goals as goal (goal.id)}
      <GoalEntry goal={goal} />
    {/each}
    {#if !$fpGoalStore.loading && $fpGoalStore.goals.length === 0}
      <EmptyList icon="list" text="No goals." />
    {/if}
    {#if $fpLogStore.logs.length > 0}
      <h1>Today's Logs</h1>
      <EmptyParentEntry icon="list">
        {#each $fpLogStore.logs as log (log.id)}
          <LogEntry log={log} />
        {/each}
      </EmptyParentEntry>
    {/if}
  </div>
  <div class="right">
    {#if $fpProjectStore.projects.length > 0}
      <h1>Upcoming Deadlines</h1>
      {#each sortedProjects as project (project.id)}
        <ProjectEntry isFake={fakeMap[project.id]} hideInactive project={project} />
      {/each}
    {/if}

    {#if $fpProjectStore2.projects.length > 0}
      <h1>Starred Projects</h1>
      {#each $fpProjectStore2.projects as project (project.id)}
        <ProjectEntry hideInactive project={project} />
      {/each}
    {/if}
  </div>
</div>
<RefreshSelection />

<style>
  div.page {
    display: flex;
    flex-direction: row;
    max-width: 100%;
    padding: 0 1ch;
    margin: 0;
    width: 1020px;
    box-sizing: border-box;
		margin: 1em auto;
  }
  div.left, div.right {
    width: 50%;
    padding: 0 1ch;
    margin: 0;
    box-sizing: border-box;
  }

  h1 {
    font-size: 1.5em;
    font-weight: 100;
    text-align: center;
  }

  @media screen and (max-width: 900px) {
    div.page {
      display: block;
    }
    div.left, div.right {
      padding-left: 0;
      padding-right: 0;
      padding-bottom: 2em;
      max-width: 100%;
      width: 640px;
      margin: auto;
    }
  }
</style>