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;
}
function rowsFromStats(stats: Stats.CardStatsResponse): StatsRow[] {
const statsRows: StatsRow[] = [];
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);
if (dueDate !== undefined) {
statsRows.push({ label: tr2.statisticsDueDate(), value: dateString(dueDate) });
statsRows.push({
label: tr2.statisticsDueDate(),
value: dateString(dueDate),
});
}
const duePosition = unwrapOptionalNumber(stats.duePosition);
if (duePosition !== undefined) {
@ -57,7 +61,10 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
});
}
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 });
@ -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.cardStatsNoteId(), value: stats.noteId });
return statsRows;
}
let statsRows: StatsRow[];
$: statsRows = rowsFromStats(stats);
</script>
<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) =>
revlogRowFromEntry(entry)
);
let revlogRows: RevlogRow[];
$: revlogRows = stats.revlog.map((entry) => revlogRowFromEntry(entry));
</script>
{#if stats.revlog.length}

View file

@ -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 });
});
});
}