anki/ts/graphs/RangeBox.svelte

153 lines
3.7 KiB
Svelte

<script lang="typescript">
import { createEventDispatcher } from "svelte";
import type { Writable } from "svelte/store";
import InputBox from "./InputBox.svelte";
import type { I18n } from "anki/i18n";
import { RevlogRange, daysToRevlogRange } from "./graph-helpers";
enum SearchRange {
Deck = 1,
Collection = 2,
Custom = 3,
}
export let i18n: I18n;
export let loading: boolean;
export let days: Writable<number>;
export let search: Writable<string>;
let revlogRange = daysToRevlogRange($days);
let searchRange = $search === "deck:current"
? SearchRange.Deck
: $search === ""
? SearchRange.Collection
: SearchRange.Custom;
let displayedSearch = $search;
$: {
switch (searchRange as SearchRange) {
case SearchRange.Deck:
displayedSearch = "deck:current";
search.set(displayedSearch);
break;
case SearchRange.Collection:
displayedSearch = "";
search.set(displayedSearch);
break;
}
}
$: {
switch (revlogRange as RevlogRange) {
case RevlogRange.Year:
days.set(365);
break;
case RevlogRange.All:
days.set(0);
break;
}
}
const searchKeyUp = (event: KeyboardEvent) => {
// fetch data on enter
if (event.key === "Enter") {
search.set(displayedSearch);
}
};
const year = i18n.tr(i18n.TR.STATISTICS_RANGE_1_YEAR_HISTORY);
const deck = i18n.tr(i18n.TR.STATISTICS_RANGE_DECK);
const collection = i18n.tr(i18n.TR.STATISTICS_RANGE_COLLECTION);
const searchLabel = i18n.tr(i18n.TR.STATISTICS_RANGE_SEARCH);
const all = i18n.tr(i18n.TR.STATISTICS_RANGE_ALL_HISTORY);
</script>
<style lang="scss">
.range-box {
position: fixed;
z-index: 1;
top: 0;
width: 100%;
color: var(--text-fg);
background: var(--window-bg);
padding: 0.5em;
@media print {
position: absolute;
}
}
@keyframes spin {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
}
}
.spin {
display: inline-block;
position: absolute;
font-size: 2em;
animation: spin;
animation-duration: 1s;
animation-iteration-count: infinite;
opacity: 0;
&.loading {
opacity: 0.5;
transition: opacity 1s;
}
}
.range-box-pad {
height: 2em;
}
</style>
<div class="range-box">
<div class="spin" class:loading></div>
<InputBox>
<label>
<input type="radio" bind:group={searchRange} value={SearchRange.Deck} />
{deck}
</label>
<label>
<input
type="radio"
bind:group={searchRange}
value={SearchRange.Collection} />
{collection}
</label>
<input
type="text"
bind:value={displayedSearch}
on:keyup={searchKeyUp}
on:focus={() => {
searchRange = SearchRange.Custom;
}}
placeholder={searchLabel} />
</InputBox>
<InputBox>
<label>
<input type="radio" bind:group={revlogRange} value={RevlogRange.Year} />
{year}
</label>
<label>
<input type="radio" bind:group={revlogRange} value={RevlogRange.All} />
{all}
</label>
</InputBox>
</div>
<div class="range-box-pad" />