[ui] rudimentary frecency display on Home
This commit is contained in:
parent
c78a1a1d67
commit
22afee0e16
1 changed files with 44 additions and 12 deletions
|
@ -19,11 +19,43 @@
|
||||||
.sort(([_, i1], [__, i2]) => i1.localeCompare(i2));
|
.sort(([_, i1], [__, i2]) => i1.localeCompare(i2));
|
||||||
})();
|
})();
|
||||||
|
|
||||||
const { result: lastVisitedQuery } = query(`(matches ? "LAST_VISITED" ? )`);
|
const { result: frecencyQuery } = query(
|
||||||
$: lastVisited = ($lastVisitedQuery?.entries || [])
|
`(matches ? (in "LAST_VISITED" "NUM_VISITED") ? )`
|
||||||
.filter((e) => e.value.t == "Number")
|
);
|
||||||
.sort((a, b) => (b.value.c as number) - (a.value.c as number))
|
let frecent = [];
|
||||||
.slice(0, 25);
|
$: {
|
||||||
|
const entries = ($frecencyQuery?.entries || []).filter(
|
||||||
|
(e) => e.value.t == "Number"
|
||||||
|
);
|
||||||
|
|
||||||
|
const recentEntities = entries
|
||||||
|
.filter((e) => e.attribute == "LAST_VISITED")
|
||||||
|
.sort((a, b) => (b.value.c as number) - (a.value.c as number))
|
||||||
|
.map((e) => e.entity);
|
||||||
|
|
||||||
|
const frequentEntities = entries
|
||||||
|
.filter((e) => e.attribute == "NUM_VISITED")
|
||||||
|
.sort((a, b) => (b.value.c as number) - (a.value.c as number))
|
||||||
|
.map((e) => e.entity);
|
||||||
|
|
||||||
|
function indexOfDefault<T>(arr: T[], el: T, _default: number): number {
|
||||||
|
const index = arr.indexOf(el);
|
||||||
|
return index === -1 ? _default : index;
|
||||||
|
}
|
||||||
|
|
||||||
|
const result = entries.filter((e) => e.attribute == "LAST_VISITED");
|
||||||
|
result.sort((a, b) => {
|
||||||
|
const aRank =
|
||||||
|
indexOfDefault(recentEntities, a.entity, 9999) +
|
||||||
|
indexOfDefault(frequentEntities, a.entity, 9999);
|
||||||
|
const bRank =
|
||||||
|
indexOfDefault(recentEntities, b.entity, 9999) +
|
||||||
|
indexOfDefault(frequentEntities, b.entity, 9999);
|
||||||
|
return aRank - bRank;
|
||||||
|
});
|
||||||
|
|
||||||
|
frecent = result.slice(0, 25);
|
||||||
|
}
|
||||||
|
|
||||||
const { result: latestQuery } = query(`(matches ? "ADDED" ?)`);
|
const { result: latestQuery } = query(`(matches ? "ADDED" ?)`);
|
||||||
$: latest = ($latestQuery?.entries || [])
|
$: latest = ($latestQuery?.entries || [])
|
||||||
|
@ -59,15 +91,15 @@
|
||||||
{/await}
|
{/await}
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
{#if lastVisited.length || $lastVisitedQuery === undefined}
|
{#if frecent.length || $frecencyQuery === undefined}
|
||||||
<section class="lastVisited">
|
<section class="frecent">
|
||||||
<h2>Last visited</h2>
|
<h2>Frequently or recently visited</h2>
|
||||||
{#if $lastVisitedQuery == undefined}
|
{#if $frecencyQuery == undefined}
|
||||||
<Spinner centered />
|
<Spinner centered />
|
||||||
{:else}
|
{:else}
|
||||||
<AttributeView
|
<AttributeView
|
||||||
--current-background="var(--background)"
|
--current-background="var(--background)"
|
||||||
entries={lastVisited}
|
entries={frecent}
|
||||||
type={HomeViewType}
|
type={HomeViewType}
|
||||||
/>
|
/>
|
||||||
{/if}
|
{/if}
|
||||||
|
@ -111,14 +143,14 @@
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
}
|
}
|
||||||
|
|
||||||
h1,
|
h1,
|
||||||
h2 {
|
h2 {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.latest,
|
.latest,
|
||||||
.lastVisited {
|
.frecent {
|
||||||
margin: 2rem;
|
margin: 2rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue