Add remaining queue counts

This commit is contained in:
Luc Mcgrady 2025-10-04 23:12:42 +01:00
parent f49d7d5fd7
commit 19f1df3a02
No known key found for this signature in database
GPG key ID: 4F3D7A0B17CC3D9C
3 changed files with 53 additions and 33 deletions

View file

@ -0,0 +1,38 @@
<!--
Copyright: Ankitects Pty Ltd and contributors
License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
-->
<script lang="ts">
import { QueuedCards_Queue } from "@generated/anki/scheduler_pb";
import type { ReviewerState } from "../reviewer";
import RemainingNumber from "./RemainingNumber.svelte";
export let state: ReviewerState;
const cardData = state.cardData;
$: queue = $cardData?.queue;
$: underlined = queue?.cards[0].queue;
</script>
<span>
<RemainingNumber cls="new-count" underlined={underlined === QueuedCards_Queue.NEW}>
{queue?.newCount}
</RemainingNumber> +
<RemainingNumber
cls="learn-count"
underlined={underlined === QueuedCards_Queue.LEARNING}
>
{queue?.learningCount}
</RemainingNumber> +
<RemainingNumber
cls="review-count"
underlined={underlined === QueuedCards_Queue.REVIEW}
>
{queue?.reviewCount}
</RemainingNumber>
</span>
<style>
span {
text-align: center;
}
</style>

View file

@ -8,17 +8,13 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
import AnswerButton from "./AnswerButton.svelte";
import { bridgeCommand } from "@tslib/bridgecommand";
import * as tr from "@generated/ftl";
import RemainingNumber from "./RemainingNumber.svelte";
import type { ReviewerState } from "../reviewer";
import { writable } from "svelte/store";
import Remaining from "./Remaining.svelte";
export let state: ReviewerState;
const answerButtons = state.answerButtons;
const answerShown = state.answerShown;
// Placeholders
const remaining = writable([0, 0, 0]);
const remainingIndex = writable(0);
$: button_count = $answerShown ? $answerButtons.length : 1;
</script>
@ -39,17 +35,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
<AnswerButton {state} info={answerButton}></AnswerButton>
{/each}
{:else}
<span class="remaining-count">
<RemainingNumber cls="new-count" underlined={$remainingIndex === 0}>
{$remaining[0]}
</RemainingNumber> +
<RemainingNumber cls="learn-count" underlined={$remainingIndex === 1}>
{$remaining[1]}
</RemainingNumber> +
<RemainingNumber cls="review-count" underlined={$remainingIndex === 2}>
{$remaining[2]}
</RemainingNumber>
</span>
<Remaining {state}></Remaining>
<button on:click={() => state.showAnswer()}>
{tr.studyingShowAnswer()}
</button>
@ -78,10 +64,6 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
grid-auto-flow: column;
}
.remaining-count {
text-align: center;
}
.more,
.edit {
width: 100%;

View file

@ -1,20 +1,17 @@
// Copyright: Ankitects Pty Ltd and contributors
// License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
import {
CardAnswer,
type NextCardDataResponse_AnswerButton,
type NextCardDataResponse_NextCardData,
} from "@generated/anki/scheduler_pb";
import { CardAnswer, type NextCardDataResponse_NextCardData } from "@generated/anki/scheduler_pb";
import { nextCardData } from "@generated/backend";
import { writable } from "svelte/store";
import { derived, writable } from "svelte/store";
export class ReviewerState {
answerHtml = "";
cardData: NextCardDataResponse_NextCardData | undefined = undefined;
_cardData: NextCardDataResponse_NextCardData | undefined = undefined;
beginAnsweringMs = Date.now();
readonly cardClass = writable("");
readonly answerButtons = writable<NextCardDataResponse_AnswerButton[]>([]);
readonly answerShown = writable(false);
readonly cardData = writable<NextCardDataResponse_NextCardData | undefined>(undefined);
readonly answerButtons = derived(this.cardData, ($cardData) => $cardData?.answerButtons ?? []);
iframe: HTMLIFrameElement | undefined = undefined;
@ -36,22 +33,25 @@ export class ReviewerState {
const resp = await nextCardData({
answer: answer || undefined,
});
// TODO: "Congratulation screen" logic
this.cardData = resp.nextCard;
this.answerButtons.set(this.cardData?.answerButtons ?? []);
const question = resp.nextCard?.front || "";
this._cardData = resp.nextCard;
this.cardData.set(this._cardData);
this.answerShown.set(false);
const question = resp.nextCard?.front || "";
this.updateHtml(question);
this.beginAnsweringMs = Date.now();
}
get currentCard() {
return this.cardData?.queue?.cards[0];
return this._cardData?.queue?.cards[0];
}
public showAnswer() {
this.answerShown.set(true);
this.updateHtml(this.cardData?.back || "");
this.updateHtml(this._cardData?.back || "");
}
public easeButtonPressed(rating: number) {