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

<script lang="ts">
  import { onMount } from "svelte";
  import { endOfDay, endOfMonth, endOfWeek, endOfYear, formatFormTime, lastMonth, lastYear, monthName, nextMonth, nextYear, startOfDay, startOfMonth, startOfWeek, startOfYear } from "../utils/time";
import EveryMinute from "./EveryMinute.svelte";

  interface DateOption {
    id: string
    label: string
    from: Date
    to: Date
  }

  export let fromValue: string;
  export let toValue: string;
  export let disabled: boolean = false;
  export let styled: boolean;
  export let noFuture: boolean;
  export let label: string = "Time Period";

  let selected: string = "custom";
  let options: DateOption[] = [];
  let now: Date = new Date();

  onMount(() => {
    for (const option of options) {
      console.log(formatFormTime(option.from), fromValue, formatFormTime(option.to), toValue);
      if (formatFormTime(option.from) === fromValue && formatFormTime(option.to) === toValue) {
        selected = option.id;
        console.log("-- SELECTED")
        break;
      }
    }
  });

  $: {
    if (options.length === 0) {
      let current = startOfMonth(now);
      const nextWeek = new Date(now.getTime() + (86400000 * 7));
      const lastWeek = new Date(now.getTime() - (86400000 * 7));

      options.push({
        id: "this_week",
        label: "This Week",
        from: startOfWeek(now),
        to: endOfWeek(now),
      });
      if (!noFuture) {
        options.push({
          id: "next_week",
          label: "Next Week",
          from: startOfWeek(nextWeek),
          to: endOfWeek(nextWeek),
        });
        options.push({
          id: "next_7days",
          label: "Next 7 Days",
          from: startOfDay(now),
          to: endOfDay(new Date(now.getTime() + 86400000 * 7)),
        });
      }
      options.push({
        id: "last_week",
        label: "Last Week",
        from: startOfWeek(lastWeek),
        to: endOfWeek(lastWeek),
      });
      options.push({
        id: "last_7days",
        label: "Last 7 Days",
        from: startOfDay(new Date(now.getTime() - 86400000 * 7)),
        to: endOfDay(now),
      });

      options.push({
        id: "this_month",
        label: "This Month",
        from: current,
        to: endOfMonth(current),
      });
      if (!noFuture) {
        options.push({
          id: "next_month",
          label: "Next Month",
          from: nextMonth(current),
          to: endOfMonth(nextMonth(current)),
        });
        options.push({
        id: "next_30days",
          label: "Next 30 Days",
          from: startOfDay(now),
          to: endOfDay(new Date(now.getTime() + 86400000 * 30)),
        });
        options.push({
          id: "next_90days",
          label: "Next 90 Days",
          from: startOfDay(now),
          to: endOfDay(new Date(now.getTime() + 86400000 * 90)),
        });
      }
      options.push({
        id: "last_month",
        label: "Last Month",
        from: lastMonth(current),
        to: endOfMonth(lastMonth(current)),
      });
      options.push({
        id: "last_30days",
        label: "Last 30 Days",
        from: startOfDay(new Date(now.getTime() - 86400000 * 30)),
        to: endOfDay(now),
      });
      options.push({
        id: "last_90days",
        label: "Last 90 Days",
        from: startOfDay(new Date(now.getTime() - 86400000 * 90)),
        to: endOfDay(now),
      });

      options.push({
        id: "this_year",
        label: "This Year",
        from: startOfYear(now),
        to: endOfYear(now),
      });
      if (!noFuture) {
        options.push({
          id: "next_year",
          label: "Next Year",
          from: startOfYear(nextYear(now)),
          to: endOfYear(nextYear(now, 2)),
        });
        options.push({
          id: "next_1year",
          label: "Next 1 Year",
          from: startOfDay(now),
          to: endOfDay(nextYear(now)),
        });
      }
      options.push({
        id: "last_year",
        label: "Last Year",
        from: startOfYear(lastYear(now)),
        to: endOfYear(lastYear(now)),
      });
      options.push({
        id: "last_1year",
        label: "Last 1 Year",
        from: startOfDay(lastYear(now)),
        to: endOfDay(now),
      });

      options.push({
        id: "custom",
        label: "Specific Dates",
        from: null,
        to: null,
      });

      console.log(options);
    }
  }

  $: {
    if (selected !== "custom") {
      const option = options.find(o => o.id === selected);
      if (option != null) {
        fromValue = formatFormTime(option.from);
        toValue = formatFormTime(option.to);
      }
    }
  }
</script>

<EveryMinute bind:now={now} />
<div class:styled>
  <div>
    <label for="timeRange">{label}</label>
    <select name="timeRange" disabled={disabled} bind:value={selected}>
      {#each options as option (option.id)}
        <option value={option.id}>{option.label}</option>
      {/each}
    </select>
  </div>
  {#if selected === "custom"}
    <div>
      <label for="startTime">Start Time</label>
      <input disabled={disabled} name="startTime" type="datetime-local" bind:value={fromValue} />
    </div>
    <div>
      <label for="endTime">End Time</label>
      <input disabled={disabled} name="endTime" type="datetime-local" bind:value={toValue} />
    </div>
  {/if}
</div>

<style>
div.styled {
  display: flex;
  flex-direction: row;
  width: 100%;
}

div.styled > div:first {
  width: 20%;
}

div.styled > div {
  padding: 0.5em;
  margin: 0 auto;
  width: 35%;
}

div.styled select, div.styled input {
  width: 100%;
  margin-bottom: 0.5em;

  background: #222;
  color: #777;
  border: none;
  outline: none;
  resize: vertical;
}
div.styled select {
  padding: 0.46em 0.5ch;
}

div.styled input:focus, div.styled select:focus {
  background: #191919;
  color: #CCC;
  border: none;
  outline: none;
}

@media screen and (max-width: 900px) {
  div.styled {
    flex-direction: column;
    margin-bottom: 1em;
  }

  div.styled > div {
    width: 90%;
  }
}

</style>