Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Watched Page Filters #51

Merged
merged 3 commits into from
Jun 9, 2023
Merged
Show file tree
Hide file tree
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
Finalize filters menu
  • Loading branch information
IRHM committed Jun 6, 2023
commit ff0eb750bb85d690a175a7f334f82a5accbdc711
87 changes: 76 additions & 11 deletions src/routes/(app)/+layout.svelte
Original file line number Diff line number Diff line change
@@ -1,18 +1,22 @@
<script lang="ts">
import { goto } from "$app/navigation";
import { page } from "$app/stores";
import Icon from "@/lib/Icon.svelte";
import PageError from "@/lib/PageError.svelte";
import Spinner from "@/lib/Spinner.svelte";
import { isTouch } from "@/lib/util/helpers";
import { clearAllStores, watchedList } from "@/store";
import { activeFilter, clearAllStores, watchedList } from "@/store";
import axios from "axios";
import { get } from "svelte/store";

const username = localStorage.getItem("username");

let searchTimeout: number;
let subMenuShown = false;
let filterMenuShown = false;

$: filter = $activeFilter;

function handleProfileClick() {
if (!localStorage.getItem("token")) {
goto("/login");
Expand Down Expand Up @@ -65,7 +69,31 @@
}
}

function filterClicked(type: string) {}
function filterClicked(type: string, modeType: string = "UPDOWN") {
const af = get(activeFilter);
let mode: string;
if (modeType === "UPDOWN") {
mode = "UP";
if (af[0] == type) {
if (af[1] === "UP") {
mode = "DOWN";
} else if (af[1] === "DOWN") {
mode = "";
}
}
} else if (modeType === "TOGGLE") {
mode = "ON";
if (af[0] == type) {
if (af[1] === "ON") {
mode = "OFF";
}
}
} else {
console.error("filterClicked() ran without a valid modeType:", modeType);
return;
}
activeFilter.update((af) => (af = [type, mode]));
}
</script>

<nav>
Expand All @@ -75,14 +103,27 @@
</a>
<input type="text" placeholder="Search" on:keydown={handleSearch} />
<div class="btns">
<button class="plain filter" on:click={() => (filterMenuShown = !filterMenuShown)}>
<Icon i="filter" />
</button>
{#if filterMenuShown}
<div class="filter-menu">
<button class="plain" on:click={() => filterClicked("dateadded")}>Date Added</button>
<button class="plain">Alphabetical</button>
</div>
<!-- Only show on watched list -->
{#if $page.url?.pathname === "/"}
<button class="plain filter" on:click={() => (filterMenuShown = !filterMenuShown)}>
<Icon i="filter" />
</button>
{#if filterMenuShown}
<div class="filter-menu">
<button
class={`plain ${filter[0] == "DATEADDED" ? filter[1].toLowerCase() : ""}`}
on:click={() => filterClicked("DATEADDED")}
>
Date Added
</button>
<button
class={`plain ${filter[0] == "ALPHA" ? filter[1].toLowerCase() : ""}`}
on:click={() => filterClicked("ALPHA")}
>
Alphabetical
</button>
</div>
{/if}
{/if}
<button class="plain face" on:click={handleProfileClick}>:)</button>
{#if subMenuShown}
Expand Down Expand Up @@ -196,7 +237,31 @@
}

div.filter-menu {
width: 150px;
width: 180px;

& > button {
position: relative;

&.down::before {
content: "\2193";
}

&.up::before {
content: "\2191";
}

&.on::before {
content: "\2713";
}

&::before {
position: absolute;
top: 4px;
left: 12px;
font-family: system-ui, -apple-system, BlinkMacSystemFont;
font-size: 18px;
}
}
}

div {
Expand Down
14 changes: 12 additions & 2 deletions src/routes/(app)/+page.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,19 @@
import Poster from "@/lib/Poster.svelte";
import PosterList from "@/lib/PosterList.svelte";
import { removeWatched, updateWatched } from "@/lib/util/api";
import { watchedList } from "@/store";
import { activeFilter, watchedList } from "@/store";

$: watched = $watchedList;
$: filter = $activeFilter;
$: watched = $watchedList.sort((a, b) => {
if (filter[0] === "DATEADDED" && filter[1] === "UP") {
return Date.parse(a.createdAt) - Date.parse(b.createdAt);
} else if (filter[0] === "ALPHA") {
if (filter[1] === "UP") return a.content.title.localeCompare(b.content.title);
else if (filter[1] === "DOWN") return b.content.title.localeCompare(a.content.title);
}
// default DATEADDED DOWN
return Date.parse(b.createdAt) - Date.parse(a.createdAt);
});
</script>

<svelte:head>
Expand Down
16 changes: 16 additions & 0 deletions src/store.ts
Original file line number Diff line number Diff line change
@@ -1,11 +1,27 @@
import { writable } from "svelte/store";
import type { Watched } from "./types";
import type { Notification } from "./lib/util/notify";
import { browser } from "$app/environment";

export const watchedList = writable<Watched[]>([]);
export const notifications = writable<(Notification & { id: number })[]>([]);
export const activeFilter = writable<string[]>(["DATEADDED", "DOWN"]);

export const clearAllStores = () => {
watchedList.set([]);
notifications.set([]);
activeFilter.set([]);
};

// Rehydrate
if (browser) {
const raf = localStorage.getItem("activeFilter");
if (raf) {
activeFilter.update((v) => (v = JSON.parse(raf)));
}
}

// Save changes
activeFilter.subscribe((v) => {
if (browser) localStorage.setItem("activeFilter", JSON.stringify(v));
});
3 changes: 3 additions & 0 deletions src/types.ts
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,9 @@ export interface Watched {
rating?: number;
content: Content;
status: WatchedStatus;
createdAt: string;
updatedAt: string;
deletedAt: string;
}

export interface WatchedAddRequest {
Expand Down