|
|
<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>
|