Implement reactively updating Card Info

This commit is contained in:
RumovZ 2021-10-16 23:32:00 +02:00
parent 800975b0db
commit a47453d5f3
3 changed files with 90 additions and 60 deletions

View file

@ -19,6 +19,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
value: string | number; value: string | number;
} }
function rowsFromStats(stats: Stats.CardStatsResponse): StatsRow[] {
const statsRows: StatsRow[] = []; const statsRows: StatsRow[] = [];
statsRows.push({ label: tr2.cardStatsAdded(), value: dateString(stats.added) }); statsRows.push({ label: tr2.cardStatsAdded(), value: dateString(stats.added) });
@ -40,7 +41,10 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
const dueDate = unwrapOptionalNumber(stats.dueDate); const dueDate = unwrapOptionalNumber(stats.dueDate);
if (dueDate !== undefined) { if (dueDate !== undefined) {
statsRows.push({ label: tr2.statisticsDueDate(), value: dateString(dueDate) }); statsRows.push({
label: tr2.statisticsDueDate(),
value: dateString(dueDate),
});
} }
const duePosition = unwrapOptionalNumber(stats.duePosition); const duePosition = unwrapOptionalNumber(stats.duePosition);
if (duePosition !== undefined) { if (duePosition !== undefined) {
@ -57,7 +61,10 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
}); });
} }
if (stats.ease) { if (stats.ease) {
statsRows.push({ label: tr2.cardStatsEase(), value: `${stats.ease / 10}%` }); statsRows.push({
label: tr2.cardStatsEase(),
value: `${stats.ease / 10}%`,
});
} }
statsRows.push({ label: tr2.cardStatsReviewCount(), value: stats.reviews }); statsRows.push({ label: tr2.cardStatsReviewCount(), value: stats.reviews });
@ -80,6 +87,12 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
statsRows.push({ label: tr2.cardStatsCardId(), value: stats.cardId }); statsRows.push({ label: tr2.cardStatsCardId(), value: stats.cardId });
statsRows.push({ label: tr2.cardStatsNoteId(), value: stats.noteId }); statsRows.push({ label: tr2.cardStatsNoteId(), value: stats.noteId });
return statsRows;
}
let statsRows: StatsRow[];
$: statsRows = rowsFromStats(stats);
</script> </script>
<div class="container"> <div class="container">

View file

@ -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) => let revlogRows: RevlogRow[];
revlogRowFromEntry(entry) $: revlogRows = stats.revlog.map((entry) => revlogRowFromEntry(entry));
);
</script> </script>
{#if stats.revlog.length} {#if stats.revlog.length}

View file

@ -7,6 +7,8 @@ import { checkNightMode } from "../lib/nightmode";
import CardInfo from "./CardInfo.svelte"; import CardInfo from "./CardInfo.svelte";
const _updatingQueue: Promise<void> = Promise.resolve();
export async function cardInfo( export async function cardInfo(
target: HTMLDivElement, target: HTMLDivElement,
cardId: number, cardId: number,
@ -31,3 +33,19 @@ export async function cardInfo(
props: { stats }, 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 });
});
});
}