mirror of
https://github.com/ankitects/anki.git
synced 2025-11-06 12:47:11 -05:00
Add remaining queue counts
This commit is contained in:
parent
f49d7d5fd7
commit
19f1df3a02
3 changed files with 53 additions and 33 deletions
38
ts/routes/reviewer/reviewer-bottom/Remaining.svelte
Normal file
38
ts/routes/reviewer/reviewer-bottom/Remaining.svelte
Normal 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>
|
||||
|
|
@ -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%;
|
||||
|
|
|
|||
|
|
@ -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) {
|
||||
|
|
|
|||
Loading…
Reference in a new issue