From a47453d5f32d88afde7170a3b819c352a2184845 Mon Sep 17 00:00:00 2001 From: RumovZ Date: Sat, 16 Oct 2021 23:32:00 +0200 Subject: [PATCH] Implement reactively updating Card Info --- ts/card-info/CardInfo.svelte | 127 +++++++++++++++++++---------------- ts/card-info/Revlog.svelte | 5 +- ts/card-info/index.ts | 18 +++++ 3 files changed, 90 insertions(+), 60 deletions(-) diff --git a/ts/card-info/CardInfo.svelte b/ts/card-info/CardInfo.svelte index c0c980f59..e1f8e1e97 100644 --- a/ts/card-info/CardInfo.svelte +++ b/ts/card-info/CardInfo.svelte @@ -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);
diff --git a/ts/card-info/Revlog.svelte b/ts/card-info/Revlog.svelte index b5e6f6f0b..f8ec555c4 100644 --- a/ts/card-info/Revlog.svelte +++ b/ts/card-info/Revlog.svelte @@ -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)); {#if stats.revlog.length} diff --git a/ts/card-info/index.ts b/ts/card-info/index.ts index 61cd7d9ac..db972562c 100644 --- a/ts/card-info/index.ts +++ b/ts/card-info/index.ts @@ -7,6 +7,8 @@ import { checkNightMode } from "../lib/nightmode"; import CardInfo from "./CardInfo.svelte"; +const _updatingQueue: Promise = 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, + cardId: number, + includeRevlog: boolean +): Promise { + _updatingQueue.then(async () => { + cardInfo.then(async (cardInfo) => { + const stats = await getCardStats(cardId); + if (!includeRevlog) { + stats.revlog = []; + } + cardInfo.$set({ stats }); + }); + }); +}