You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
245 lines
5.9 KiB
245 lines
5.9 KiB
<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>
|