mirror of
https://github.com/ankitects/anki.git
synced 2025-11-10 14:47:12 -05:00
Implement reactively updating Card Info
This commit is contained in:
parent
800975b0db
commit
a47453d5f3
3 changed files with 90 additions and 60 deletions
|
|
@ -19,67 +19,80 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
|
|||
value: string | number;
|
||||
}
|
||||
|
||||
const statsRows: StatsRow[] = [];
|
||||
function rowsFromStats(stats: Stats.CardStatsResponse): StatsRow[] {
|
||||
const statsRows: StatsRow[] = [];
|
||||
|
||||
statsRows.push({ label: tr2.cardStatsAdded(), value: dateString(stats.added) });
|
||||
statsRows.push({ label: tr2.cardStatsAdded(), value: dateString(stats.added) });
|
||||
|
||||
const firstReview = unwrapOptionalNumber(stats.firstReview);
|
||||
if (firstReview !== undefined) {
|
||||
statsRows.push({
|
||||
label: tr2.cardStatsFirstReview(),
|
||||
value: dateString(firstReview),
|
||||
});
|
||||
}
|
||||
const latestReview = unwrapOptionalNumber(stats.latestReview);
|
||||
if (latestReview !== undefined) {
|
||||
statsRows.push({
|
||||
label: tr2.cardStatsLatestReview(),
|
||||
value: dateString(latestReview),
|
||||
});
|
||||
const firstReview = unwrapOptionalNumber(stats.firstReview);
|
||||
if (firstReview !== undefined) {
|
||||
statsRows.push({
|
||||
label: tr2.cardStatsFirstReview(),
|
||||
value: dateString(firstReview),
|
||||
});
|
||||
}
|
||||
const latestReview = unwrapOptionalNumber(stats.latestReview);
|
||||
if (latestReview !== undefined) {
|
||||
statsRows.push({
|
||||
label: tr2.cardStatsLatestReview(),
|
||||
value: dateString(latestReview),
|
||||
});
|
||||
}
|
||||
|
||||
const dueDate = unwrapOptionalNumber(stats.dueDate);
|
||||
if (dueDate !== undefined) {
|
||||
statsRows.push({
|
||||
label: tr2.statisticsDueDate(),
|
||||
value: dateString(dueDate),
|
||||
});
|
||||
}
|
||||
const duePosition = unwrapOptionalNumber(stats.duePosition);
|
||||
if (duePosition !== undefined) {
|
||||
statsRows.push({
|
||||
label: tr2.cardStatsNewCardPosition(),
|
||||
value: dateString(duePosition),
|
||||
});
|
||||
}
|
||||
|
||||
if (stats.interval) {
|
||||
statsRows.push({
|
||||
label: tr2.cardStatsInterval(),
|
||||
value: timeSpan(stats.interval * DAY),
|
||||
});
|
||||
}
|
||||
if (stats.ease) {
|
||||
statsRows.push({
|
||||
label: tr2.cardStatsEase(),
|
||||
value: `${stats.ease / 10}%`,
|
||||
});
|
||||
}
|
||||
|
||||
statsRows.push({ label: tr2.cardStatsReviewCount(), value: stats.reviews });
|
||||
statsRows.push({ label: tr2.cardStatsLapseCount(), value: stats.lapses });
|
||||
|
||||
if (stats.totalSecs) {
|
||||
statsRows.push({
|
||||
label: tr2.cardStatsAverageTime(),
|
||||
value: timeSpan(stats.averageSecs),
|
||||
});
|
||||
statsRows.push({
|
||||
label: tr2.cardStatsTotalTime(),
|
||||
value: timeSpan(stats.totalSecs),
|
||||
});
|
||||
}
|
||||
|
||||
statsRows.push({ label: tr2.cardStatsCardTemplate(), value: stats.cardType });
|
||||
statsRows.push({ label: tr2.cardStatsNoteType(), value: stats.notetype });
|
||||
statsRows.push({ label: tr2.cardStatsDeckName(), value: stats.deck });
|
||||
|
||||
statsRows.push({ label: tr2.cardStatsCardId(), value: stats.cardId });
|
||||
statsRows.push({ label: tr2.cardStatsNoteId(), value: stats.noteId });
|
||||
|
||||
return statsRows;
|
||||
}
|
||||
|
||||
const dueDate = unwrapOptionalNumber(stats.dueDate);
|
||||
if (dueDate !== undefined) {
|
||||
statsRows.push({ label: tr2.statisticsDueDate(), value: dateString(dueDate) });
|
||||
}
|
||||
const duePosition = unwrapOptionalNumber(stats.duePosition);
|
||||
if (duePosition !== undefined) {
|
||||
statsRows.push({
|
||||
label: tr2.cardStatsNewCardPosition(),
|
||||
value: dateString(duePosition),
|
||||
});
|
||||
}
|
||||
|
||||
if (stats.interval) {
|
||||
statsRows.push({
|
||||
label: tr2.cardStatsInterval(),
|
||||
value: timeSpan(stats.interval * DAY),
|
||||
});
|
||||
}
|
||||
if (stats.ease) {
|
||||
statsRows.push({ label: tr2.cardStatsEase(), value: `${stats.ease / 10}%` });
|
||||
}
|
||||
|
||||
statsRows.push({ label: tr2.cardStatsReviewCount(), value: stats.reviews });
|
||||
statsRows.push({ label: tr2.cardStatsLapseCount(), value: stats.lapses });
|
||||
|
||||
if (stats.totalSecs) {
|
||||
statsRows.push({
|
||||
label: tr2.cardStatsAverageTime(),
|
||||
value: timeSpan(stats.averageSecs),
|
||||
});
|
||||
statsRows.push({
|
||||
label: tr2.cardStatsTotalTime(),
|
||||
value: timeSpan(stats.totalSecs),
|
||||
});
|
||||
}
|
||||
|
||||
statsRows.push({ label: tr2.cardStatsCardTemplate(), value: stats.cardType });
|
||||
statsRows.push({ label: tr2.cardStatsNoteType(), value: stats.notetype });
|
||||
statsRows.push({ label: tr2.cardStatsDeckName(), value: stats.deck });
|
||||
|
||||
statsRows.push({ label: tr2.cardStatsCardId(), value: stats.cardId });
|
||||
statsRows.push({ label: tr2.cardStatsNoteId(), value: stats.noteId });
|
||||
let statsRows: StatsRow[];
|
||||
$: statsRows = rowsFromStats(stats);
|
||||
</script>
|
||||
|
||||
<div class="container">
|
||||
|
|
|
|||
|
|
@ -72,9 +72,8 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
|
|||
};
|
||||
}
|
||||
|
||||
const revlogRows: RevlogRow[] = stats.revlog.map((entry) =>
|
||||
revlogRowFromEntry(entry)
|
||||
);
|
||||
let revlogRows: RevlogRow[];
|
||||
$: revlogRows = stats.revlog.map((entry) => revlogRowFromEntry(entry));
|
||||
</script>
|
||||
|
||||
{#if stats.revlog.length}
|
||||
|
|
|
|||
|
|
@ -7,6 +7,8 @@ import { checkNightMode } from "../lib/nightmode";
|
|||
|
||||
import CardInfo from "./CardInfo.svelte";
|
||||
|
||||
const _updatingQueue: Promise<void> = Promise.resolve();
|
||||
|
||||
export async function cardInfo(
|
||||
target: HTMLDivElement,
|
||||
cardId: number,
|
||||
|
|
@ -31,3 +33,19 @@ export async function cardInfo(
|
|||
props: { stats },
|
||||
});
|
||||
}
|
||||
|
||||
export async function updateCardInfo(
|
||||
cardInfo: Promise<CardInfo>,
|
||||
cardId: number,
|
||||
includeRevlog: boolean
|
||||
): Promise<void> {
|
||||
_updatingQueue.then(async () => {
|
||||
cardInfo.then(async (cardInfo) => {
|
||||
const stats = await getCardStats(cardId);
|
||||
if (!includeRevlog) {
|
||||
stats.revlog = [];
|
||||
}
|
||||
cardInfo.$set({ stats });
|
||||
});
|
||||
});
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue