john-okeefe/Anitrack
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 10 Wiki Activity

made entire app only work in dark mode

Browse Source
This commit is contained in:
John O'Keefe
2024-10-01 16:57:42 -04:00
parent 753ecd968e
commit e229311190
5 changed files with 587 additions and 425 deletions
Download Patch File Download Diff File Expand all files Collapse all files

115
frontend/src/helperComponents/AnimeTable.svelte
View File

@@ -1,109 +1,106 @@
<script lang="ts">
import {createTable, Render, Subscribe} from "svelte-headless-table";
import { createTable, Render, Subscribe } from "svelte-headless-table";
// @ts-ignore
import { addSortBy } from "svelte-headless-table/plugins";
import {tableItems} from "../helperModules/GlobalVariablesAndHelperFunctions.svelte"
import { tableItems } from "../helperModules/GlobalVariablesAndHelperFunctions.svelte";
//when adding sort here is code { sort: addSortBy() }
const table = createTable(tableItems, { sort: addSortBy() })
const table = createTable(tableItems, { sort: addSortBy() });
const columns = table.createColumns([
table.column({
header: "Service Id",
accessor: 'id',
accessor: "id",
}),
table.column({
header: "Anime Title",
accessor: "title",
}),
table.column({
header: 'Service',
accessor: 'service',
header: "Service",
accessor: "service",
}),
table.column({
header: 'Episode Progress',
accessor: 'progress',
header: "Episode Progress",
accessor: "progress",
}),
table.column({
header: 'Status',
accessor: 'status',
header: "Status",
accessor: "status",
}),
table.column({
header: 'Started At',
accessor: 'startedAt',
header: "Started At",
accessor: "startedAt",
}),
table.column({
header: 'Completed At',
accessor: 'completedAt',
header: "Completed At",
accessor: "completedAt",
}),
table.column({
header: 'Rating',
accessor: 'score',
header: "Rating",
accessor: "score",
}),
table.column({
header: 'Repeat',
accessor: 'repeat',
header: "Repeat",
accessor: "repeat",
}),
table.column({
header: 'Notes',
accessor: 'notes',
header: "Notes",
accessor: "notes",
}),
])
]);
//add pluginStates when add sort back
const {
headerRows,
rows,
tableAttrs,
tableBodyAttrs,
} = table.createViewModel(columns)
const { headerRows, rows, tableAttrs, tableBodyAttrs } =
table.createViewModel(columns);
</script>
<div class="relative overflow-x-auto rounded-lg mb-5">
<table
class="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400"
{...$tableAttrs}
class="w-full text-sm text-left rtl:text-right text-gray-400"
{...$tableAttrs}
>
<thead
class="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400"
>
{#each $headerRows as headerRow (headerRow.id)}
<Subscribe attrs={headerRow.attrs()} let:attrs>
<tr {...attrs}>
{#each headerRow.cells as cell (cell.id)}
<Subscribe attrs={cell.attrs()} let:attrs props={cell.props()} let:props>
<th
<thead class="text-xs uppercase bg-gray-700 text-gray-400">
{#each $headerRows as headerRow (headerRow.id)}
<Subscribe attrs={headerRow.attrs()} let:attrs>
<tr {...attrs}>
{#each headerRow.cells as cell (cell.id)}
<Subscribe
attrs={cell.attrs()}
let:attrs
props={cell.props()}
let:props
>
<th
{...attrs}
on:click={props.sort.toggle}
class:sorted={props.sort.order !== undefined}
class:sorted={props.sort.order !==
undefined}
class="px-6 py-3"
>
<div>
<Render of={cell.render()}/>
{#if props.sort.order === 'asc'}
⬇️
{:else if props.sort.order === 'desc'}
⬆️
{/if}
</div>
</th>
</Subscribe>
{/each}
</tr>
</Subscribe>
{/each}
>
<div>
<Render of={cell.render()} />
{#if props.sort.order === "asc"}
⬇️
{:else if props.sort.order === "desc"}
⬆️
{/if}
</div>
</th>
</Subscribe>
{/each}
</tr>
</Subscribe>
{/each}
</thead>
<tbody {...$tableBodyAttrs}>
{#each $rows as row (row.id)}
<Subscribe attrs={row.attrs()} let:attrs>
<tr
{...attrs}
class="bg-white border-b dark:bg-gray-800 dark:border-gray-700"
>
<tr {...attrs} class="bg-gray-800 border-gray-700">
{#each row.cells as cell (cell.id)}
<Subscribe attrs={cell.attrs()} let:attrs>
<td {...attrs} class="px-6 py-4">
<Render of={cell.render()}/>
<Render of={cell.render()} />
</td>
</Subscribe>
{/each}