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,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">

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