gisle/stufflog2
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

fix date range behavior to be more strongly typed, last 7 days is not an alias for a static date range.

Browse Source
This commit is contained in:
gisle
2021-07-17 11:08:23 +02:00
parent 2c909e6d85
commit ba4384b41d
12 changed files with 241 additions and 14907 deletions
Download Patch File Download Diff File Expand all files Collapse all files
svelte-ui/src/components/Composition.svelte
+1 -1
View File
@@ -84,7 +84,7 @@
</script>
<div class="composition">
{#each list as item (item.name)}
{#each list as item}
<div class="item">
<span class="amount">{item.amount}x&nbsp;</span>
<a href={item.link}>{item.name}</a>
svelte-ui/src/components/DateRangeSelect.svelte
+28 -168
View File
@@ -1,194 +1,54 @@
<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";
import { allOffsets, pastOffsets, customDateRange } from "../utils/date-range";
import type { DateRange } from "../utils/date-range";
import { formatFormTime } from "../utils/time";
interface DateOption {
id: string
label: string
from: Date
to: Date
}
export let fromValue: string;
export let toValue: string;
export let noFuture: boolean = false;
export let value: DateRange;
export let styled: boolean = false;
export let label: string = "Time";
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;
}
}
});
let rangeOptions: DateRange[];
let selected = value.name;
let [customMin, customMax] = pastOffsets[0].calculate(new Date()).map(d => formatFormTime(d));
$: rangeOptions = noFuture ? pastOffsets : allOffsets;
$: {
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);
if (selected === "Specific Dates") {
value = customDateRange(new Date(customMin), new Date(customMax))
} else {
value = rangeOptions.find(v => v.name === selected);
if (value != null) {
let [from, to] = value.calculate(new Date()).map(d => formatFormTime(d));
customMin = from;
customMax = to;
} else {
selected = rangeOptions[0].name;
value = rangeOptions[0];
}
}
}
</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 rangeOptions as option (option.name)}
<option value={option.name}>{option.name}</option>
{/each}
<option value="Specific Dates">Specific Dates</option>
</select>
</div>
{#if selected === "custom"}
{#if value.name === "Specific Dates"}
<div>
<label for="startTime">Start Time</label>
<input disabled={disabled} name="startTime" type="datetime-local" bind:value={fromValue} />
<input disabled={disabled} name="startTime" type="datetime-local" bind:value={customMin} />
</div>
<div>
<label for="endTime">End Time</label>
<input disabled={disabled} name="endTime" type="datetime-local" bind:value={toValue} />
<input disabled={disabled} name="endTime" type="datetime-local" bind:value={customMax} />
</div>
{/if}
</div>
svelte-ui/src/components/GoalEntry.svelte
+1 -1
View File
@@ -7,7 +7,7 @@
import OptionRow from "./OptionRow.svelte";
import ParentEntry from "./ParentEntry.svelte";
import Progress from "./Progress.svelte";
import ProgressNumbers from "./ProgressNumbers.svelte";
import ProgressNumbers from "./ProgressNumbers.svelte";
import TimeProgress from "./TimeProgress.svelte";
export let goal: GoalResult = null;
svelte-ui/src/components/ProgressNumbers.svelte
+2 -2
View File
@@ -2,8 +2,8 @@
import type { ProjectResult } from "../models/project";
import type { GoalResult } from "../models/goal";
export let project: ProjectResult | undefined | null;
export let goal: GoalResult | undefined | null;
export let project: ProjectResult | undefined | null = void(0);
export let goal: GoalResult | undefined | null = void(0);
let progressAmount: number = 0;
let progressTarget: number = 0;