Compare commits
6 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| 7f92b1714e | |||
| cd142f7601 | |||
| fe48e6a8c4 | |||
| 24d4d24edf | |||
| b68abfc1c9 | |||
| eadc96fb4f |
@@ -118,7 +118,7 @@
|
|||||||
</ul>
|
</ul>
|
||||||
</nav>
|
</nav>
|
||||||
{/if}
|
{/if}
|
||||||
<div class="flex mt-5">
|
<div class="flex">
|
||||||
<div class="w-20 mx-auto">
|
<div class="w-20 mx-auto">
|
||||||
<select
|
<select
|
||||||
bind:value={perPage}
|
bind:value={perPage}
|
||||||
|
|||||||
18
frontend/src/helperComponents/RefreshWatchListButton.svelte
Normal file
18
frontend/src/helperComponents/RefreshWatchListButton.svelte
Normal file
@@ -0,0 +1,18 @@
|
|||||||
|
<script lang="ts">
|
||||||
|
import { CheckIfAniListLoggedInAndLoadWatchList } from "../helperModules/CheckIfAniListLoggedInAndLoadWatchList.svelte";
|
||||||
|
import { loading } from "../helperModules/GlobalVariablesAndHelperFunctions.svelte";
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div class="flex justify-end">
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
class="py-2 px-4 mt-4 mr-4 bg-gray-700 rounded-lg"
|
||||||
|
on:click={async () => {
|
||||||
|
loading.set(true);
|
||||||
|
await CheckIfAniListLoggedInAndLoadWatchList();
|
||||||
|
loading.set(false);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Refresh WatchList
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
@@ -0,0 +1,77 @@
|
|||||||
|
<script lang="ts">
|
||||||
|
import {
|
||||||
|
aniListSort,
|
||||||
|
watchListPage,
|
||||||
|
animePerPage,
|
||||||
|
aniListWatchlist,
|
||||||
|
} from "../helperModules/GlobalVariablesAndHelperFunctions.svelte";
|
||||||
|
import { MediaListSort } from "../anilist/types/AniListTypes";
|
||||||
|
import { GetAniListUserWatchingList } from "../../wailsjs/go/main/App";
|
||||||
|
|
||||||
|
const sortTypes = [
|
||||||
|
{ value: MediaListSort.MediaId, name: "Media Id Asc" },
|
||||||
|
{ value: MediaListSort.MediaIdDesc, name: "Media Id Desc" },
|
||||||
|
{ value: MediaListSort.Score, name: "Score Asc" },
|
||||||
|
{ value: MediaListSort.ScoreDesc, name: "Score Desc" },
|
||||||
|
{ value: MediaListSort.Status, name: "Status Asc" },
|
||||||
|
{ value: MediaListSort.StatusDesc, name: "Status Desc" },
|
||||||
|
{ value: MediaListSort.Progress, name: "Progress Asc" },
|
||||||
|
{ value: MediaListSort.ProgressDesc, name: "Progress Desc" },
|
||||||
|
{ value: MediaListSort.ProgressVolumes, name: "Progress Valumes Asc" },
|
||||||
|
{ value: MediaListSort.ProgressVolumesDesc, name: "Progress Valumes Desc" },
|
||||||
|
{ value: MediaListSort.Repeat, name: "Repeat Asc" },
|
||||||
|
{ value: MediaListSort.RepeatDesc, name: "Repeat Desc" },
|
||||||
|
{ value: MediaListSort.Priority, name: "Priority Asc" },
|
||||||
|
{ value: MediaListSort.PriorityDesc, name: "Priority Desc" },
|
||||||
|
{ value: MediaListSort.StartedOn, name: "Started On Asc" },
|
||||||
|
{ value: MediaListSort.StartedOnDesc, name: "Started On Desc" },
|
||||||
|
{ value: MediaListSort.FinishedOn, name: "Finished On Asc" },
|
||||||
|
{ value: MediaListSort.FinishedOnDesc, name: "Finished On Desc" },
|
||||||
|
{ value: MediaListSort.AddedTime, name: "Added Time Asc" },
|
||||||
|
{ value: MediaListSort.AddedTimeDesc, name: "Added Time Desc" },
|
||||||
|
{ value: MediaListSort.UpdatedTime, name: "Updated Time Asc" },
|
||||||
|
{ value: MediaListSort.UpdatedTimeDesc, name: "Updated Time Desc" },
|
||||||
|
{ value: MediaListSort.MediaTitleRomaji, name: "Media Title Romaji Asc" },
|
||||||
|
{
|
||||||
|
value: MediaListSort.MediaTitleRomajiDesc,
|
||||||
|
name: "Media Title Romaji Desc",
|
||||||
|
},
|
||||||
|
{ value: MediaListSort.MediaTitleEnglish, name: "Media Title English Asc" },
|
||||||
|
{
|
||||||
|
value: MediaListSort.MediaTitleEnglishDesc,
|
||||||
|
name: "Media Title English Desc",
|
||||||
|
},
|
||||||
|
{ value: MediaListSort.MediaTitleNative, name: "Media Title Native Asc" },
|
||||||
|
{
|
||||||
|
value: MediaListSort.MediaTitleNativeDesc,
|
||||||
|
name: "Media Title Native Desc",
|
||||||
|
},
|
||||||
|
{ value: MediaListSort.MediaPopularity, name: "Media Popularity Asc" },
|
||||||
|
{ value: MediaListSort.MediaPopularityDesc, name: "Media Popularity Desc" },
|
||||||
|
];
|
||||||
|
|
||||||
|
let sort: string;
|
||||||
|
aniListSort.subscribe((value) => (sort = value));
|
||||||
|
console.log(sort);
|
||||||
|
|
||||||
|
async function changeWatchListSort() {
|
||||||
|
const result = await GetAniListUserWatchingList(
|
||||||
|
$watchListPage,
|
||||||
|
$animePerPage,
|
||||||
|
$aniListSort,
|
||||||
|
);
|
||||||
|
aniListWatchlist.set(result);
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<select
|
||||||
|
id="sort"
|
||||||
|
class="border rounded-lg block p-1.5 bg-gray-700 border-gray-600 placeholder-gray-400 text-white focus:ring-blue-500 focus:border-blue-500"
|
||||||
|
bind:value={$aniListSort}
|
||||||
|
on:change={() => changeWatchListSort()}
|
||||||
|
>
|
||||||
|
<option value="" disabled>Sort WatchList</option>
|
||||||
|
{#each sortTypes as sort}
|
||||||
|
<option value={sort.value}>{sort.name}</option>
|
||||||
|
{/each}
|
||||||
|
</select>
|
||||||
|
|||||||
@@ -10,6 +10,7 @@
|
|||||||
import { Rating } from "flowbite-svelte";
|
import { Rating } from "flowbite-svelte";
|
||||||
import loader from "../helperFunctions/loader";
|
import loader from "../helperFunctions/loader";
|
||||||
import { CheckIfAniListLoggedInAndLoadWatchList } from "../helperModules/CheckIfAniListLoggedInAndLoadWatchList.svelte";
|
import { CheckIfAniListLoggedInAndLoadWatchList } from "../helperModules/CheckIfAniListLoggedInAndLoadWatchList.svelte";
|
||||||
|
import Sort from "../helperComponents/Sort.svelte";
|
||||||
|
|
||||||
let isAniListLoggedIn: boolean;
|
let isAniListLoggedIn: boolean;
|
||||||
let aniListWatchListLoaded: AniListCurrentUserWatchList;
|
let aniListWatchListLoaded: AniListCurrentUserWatchList;
|
||||||
@@ -25,17 +26,7 @@
|
|||||||
>
|
>
|
||||||
<div class="flex justify-between items-center mb-4">
|
<div class="flex justify-between items-center mb-4">
|
||||||
<h1 class="text-left text-xl font-bold">Your AniList WatchList</h1>
|
<h1 class="text-left text-xl font-bold">Your AniList WatchList</h1>
|
||||||
<button
|
<Sort />
|
||||||
type="button"
|
|
||||||
class="py-2 px-4 bg-gray-700 rounded-lg"
|
|
||||||
on:click={async () => {
|
|
||||||
loading.set(true);
|
|
||||||
await CheckIfAniListLoggedInAndLoadWatchList();
|
|
||||||
loading.set(false);
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
Refresh WatchList
|
|
||||||
</button>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div
|
<div
|
||||||
|
|||||||
@@ -1,6 +1,7 @@
|
|||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import Pagination from "../helperComponents/Pagination.svelte";
|
import Pagination from "../helperComponents/Pagination.svelte";
|
||||||
import WatchList from "../helperComponents/WatchList.svelte";
|
import WatchList from "../helperComponents/WatchList.svelte";
|
||||||
|
import RefreshWatchListButton from "../helperComponents/RefreshWatchListButton.svelte";
|
||||||
import {
|
import {
|
||||||
aniListLoggedIn,
|
aniListLoggedIn,
|
||||||
aniListPrimary,
|
aniListPrimary,
|
||||||
@@ -45,6 +46,7 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
{:else if isAniListLoggedIn && isAniListPrimary}
|
{:else if isAniListLoggedIn && isAniListPrimary}
|
||||||
|
<RefreshWatchListButton />
|
||||||
<div class="container py-10">
|
<div class="container py-10">
|
||||||
<Pagination />
|
<Pagination />
|
||||||
<WatchList />
|
<WatchList />
|
||||||
|
|||||||
@@ -12,6 +12,6 @@
|
|||||||
},
|
},
|
||||||
"info": {
|
"info": {
|
||||||
"productName": "AniTrack",
|
"productName": "AniTrack",
|
||||||
"productVersion": "1.0.0"
|
"productVersion": "1.5.0"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user