Delete test2 page

src/lib/components/Toggle.svelte

@@ -16,7 +16,7 @@
     <div
       class="relative w-11 h-6 bg-gray-200 rounded-full peer peer-focus:ring-4 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 dark:bg-gray-700 peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-0.5 after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-blue-600"
     ></div>
-    <span class="ms-3 text-sm font-bold text-gray-700 dark:text-gray-300">
+    <span class="ms-3 text-sm font-bold text-gray-700">
       {title}
     </span>
   </label>

src/lib/entities.ts

@@ -148,6 +148,28 @@ export interface StatsTypeCurrencyChart {
   elements: StatsType[];
 }
 
+// {{{ Settings section
+
+export interface SettingsTypeFilter {
+  type_id: number;
+  filter_this: boolean;
+  // For UI
+  color: string;
+  comment: string;
+  name: string;
+}
+
+export const SettingsTypes = {
+  type: "SettingsTypeFilter",
+} as const;
+
+export type SettingsName = keyof typeof SettingsTypes;
+export type SettingsType<T extends SettingsName> =
+  T extends "type" ? SettingsTypeFilter :
+  never;
+
+// }}}
+
 export const EntityTypes = {
   card: "Card",
   type: "Type",
@@ -401,3 +423,64 @@ export async function get_stats_for<R>(groupName: string, session?: string): Pro
     return { message: error.message };
   }
 }
+
+// {{{ Settings functions 
+
+export async function get_settings_for<R>(groupName: string, session?: string, queryParams?: string): Promise<R | ErrorMessage> {
+  const url = queryParams ? `${BASE_API_URL}/settings/${groupName}/all1${queryParams}` : `${BASE_API_URL}/settings/${groupName}/all`
+  const defaultHeaders = {
+    'Content-Type': 'application/json',
+  };
+
+  const headers = session
+    ? { ...defaultHeaders, Cookie: `session=${session}` }
+    : defaultHeaders
+
+  const config: RequestInit = {
+    method: 'GET',
+    headers,
+  };
+
+  try {
+    const response = await fetch(url, config);
+    if (!response.ok) {
+      const body = await response.json()
+      throw new Error(`Failed to update ${groupName}: ${body.message}`);
+    }
+    return await response.json() as R;
+  } catch (err) {
+    const error = err as Error
+    return { message: error.message };
+  }
+}
+
+export async function update_settings_for<T>(groupName: string, data: T, session?: string): Promise<T | ErrorMessage> {
+  const url = `${BASE_API_URL}/settings/${groupName}/update`
+  const defaultHeaders = {
+    'Content-Type': 'application/json',
+  };
+
+  const headers = session
+    ? { ...defaultHeaders, Cookie: `session=${session}` }
+    : defaultHeaders
+
+  const config: RequestInit = {
+    method: 'PUT',
+    headers,
+    body: JSON.stringify(data)
+  };
+
+  try {
+    const response = await fetch(url, config);
+    if (!response.ok) {
+      const body = await response.json()
+      throw new Error(`Failed to update ${groupName}: ${body.message}`);
+    }
+    return await response.json() as T;
+  } catch (err) {
+    const error = err as Error
+    return { message: error.message };
+  }
+}
+
+// }}}

src/routes/api/settings/[entity]/all/+server.ts

@@ -0,0 +1,31 @@
+import type { ErrorMessage } from "$lib/api";
+import { get_settings_for, type SettingsType, type SettingsName, SettingsTypes } from "$lib/entities";
+import type { RequestHandler } from "./$types";
+
+function isErrorMessage(value: any): value is ErrorMessage {
+  return value && typeof value.message === 'string';
+}
+
+export const GET: RequestHandler = async ({ cookies, params, url }): Promise<Response> => {
+  const session = cookies.get('session');
+  const { entity } = params;
+
+  const queryParams = url.searchParams.toString();
+  if (!session) {
+    return new Response(JSON.stringify("no cookies"), { status: 401 });
+  }
+
+  if (!(entity in SettingsTypes)) {
+    return new Response(JSON.stringify("Invalid entity"), { status: 400 });
+  }
+
+  const entityName = entity as SettingsName
+  const result = await get_settings_for<SettingsType<typeof entityName>>(entityName, session, queryParams);
+
+  if (isErrorMessage(result)) {
+    return new Response(JSON.stringify(result), { status: 500 });
+  }
+
+  return new Response(JSON.stringify(result), { status: 200 });
+}
+

src/routes/api/settings/[entity]/update/+server.ts

@@ -0,0 +1,28 @@
+import type { ErrorMessage } from "$lib/api";
+import { SettingsTypes, type SettingsName, type SettingsType, update_settings_for } from "$lib/entities";
+import type { RequestHandler } from "./$types";
+
+function isErrorMessage(value: any): value is ErrorMessage {
+  return value && typeof value.message === 'string';
+}
+
+export const PUT: RequestHandler = async ({ request, cookies, params }): Promise<Response> => {
+  const session = cookies.get('session')
+  const { entity } = params;
+
+  if (!session) {
+    throw new Response(JSON.stringify("no cookies"), { status: 401 })
+  }
+
+  if (!(entity in SettingsTypes)) {
+    return new Response(JSON.stringify("Invalid entity"), { status: 400 });
+  }
+
+  const entityName = entity as SettingsName;
+  const data: SettingsType<typeof entityName> = await request.json();
+  const result = await update_settings_for<SettingsType<typeof entityName>>(entityName, data, session);
+  if (isErrorMessage(result)) {
+    return new Response(JSON.stringify(result), { status: 500 })
+  }
+  return new Response(JSON.stringify(result), { status: 200 })
+}

src/routes/settings/type/+page.server.ts

@@ -0,0 +1,13 @@
+import type { PageServerLoad } from "./$types";
+
+export const load: PageServerLoad = async ({ fetch }) => {
+  const typesPromise = fetch("/api/type/all").then((res) => res.json());
+  const settingsPromise = fetch("/api/settings/type/all").then((res) => res.json());
+  const [types, storedFilters] = await Promise.all([typesPromise, settingsPromise]);
+  if (storedFilters) {
+    return { types: types, storedFilters: storedFilters };
+  } else {
+    return { types: types, storedFilters: [] };
+  }
+};
+

src/routes/settings/type/+page.svelte

@@ -0,0 +1,159 @@
+<script lang="ts">
+  import { onMount } from "svelte";
+  import { type SettingsTypeFilter, type Type } from "$lib/entities";
+  import Toggle from "$lib/components/Toggle.svelte";
+
+  let { data } = $props();
+  $inspect("props = ", data);
+  let types: Type[] = $state(data.types);
+  let storedFilters: SettingsTypeFilter[] = $state(data.storedFilters);
+  let typeFilters: SettingsTypeFilter[] = $state([]);
+  let changes: SettingsTypeFilter[] = $state([]);
+  let error: string | null = $state(null);
+
+  // Fetch all types on page load
+  onMount(async () => {
+    await updateStoredFilters();
+    await createTypeFilterForUser();
+  });
+
+  async function forseNewFetchTypeFilters() {
+    const result = await fetch("/api/settings/type/all");
+    if (!result.ok) {
+      const obj = await result.json();
+      error = obj.message;
+    } else {
+      storedFilters = await result.json();
+    }
+  }
+
+  // NOTE: This function should be called after fetchTypes as it requires types
+  //  to be loaded for UI stuff
+  async function updateStoredFilters() {
+    storedFilters = storedFilters ?? [];
+    if (storedFilters.length > 0) {
+      storedFilters = storedFilters.map((filter) => {
+        for (let i = 0; i < types.length; i++) {
+          const type = types[i];
+          if (type.id == filter.type_id) {
+            return {
+              ...filter,
+              color: type.color,
+              comment: type.comment,
+              name: type.name,
+            };
+          }
+        }
+        return filter;
+      });
+    }
+  }
+
+  // NOTE: This function should be called only after types and storedFilters
+  //  are fetched
+  async function createTypeFilterForUser() {
+    typeFilters = types.map((type) => {
+      for (let i = 0; i < storedFilters.length; i++) {
+        if (storedFilters[i].type_id == type.id) {
+          return {
+            ...storedFilters[i],
+            filter_this: true,
+          };
+        }
+      }
+      return {
+        filter_this: false,
+        type_id: type.id,
+        name: type.name,
+        color: type.color,
+        comment: type.comment,
+      };
+    });
+  }
+
+  async function updateSettings() {
+    const endpoint = "/api/settings/type/update";
+    const method = "PUT";
+
+    const data = changes;
+    const response = await fetch(endpoint, {
+      method,
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify(data),
+    });
+
+    if (!response.ok) {
+      const { message } = await response.json();
+      error = message;
+    } else {
+      changes = [];
+      await forseNewFetchTypeFilters();
+      await updateStoredFilters();
+      await createTypeFilterForUser();
+    }
+  }
+
+  $inspect(typeFilters);
+  $inspect(types);
+</script>
+
+{#if error}
+  <p class="bg-red-100 text-red-700 p-4 rounded">{error}</p>
+{/if}
+
+<div class="container mx-auto my-8 p-6 bg-gray-100 rounded-lg shadow-lg">
+  <h1 class="text-2xl font-bold mb-4 text-center">Manage Types</h1>
+
+  <div class="mb-8 p-6 bg-white rounded-lg shadow-md">
+    <h2 class="text-xl font-semibold mb-4">Changes</h2>
+    {#each changes as type}
+      <li class="bg-white p-4 rounded-lg shadow-md flex items-start space-x-2">
+        <strong class="block text-lg" style="color: {type.color};"
+          >{type.name}</strong
+        >
+        <div class="text-sm text-gray-600">
+          Color: {type.color}, Comment: {type.comment}
+        </div>
+      </li>
+    {/each}
+    {#if changes.length > 0}
+      <button
+        class="px-4 py-2 bg-green-500 text-white rounded-md hover:bg-green-600"
+        onclick={updateSettings}
+        >Update settings
+      </button>
+    {/if}
+  </div>
+
+  <h2 class="text-xl font-semibold mb-4 text-center">Types List</h2>
+  <ul class="space-y-4">
+    {#each typeFilters as type}
+      <li class="bg-white p-4 rounded-lg shadow-md flex items-start space-x-2">
+        <div class="block text-lg">
+          <Toggle
+            title="Filter out"
+            changeField={type.filter_this}
+            onChangeFunc={() => {
+              type.filter_this = !type.filter_this;
+              for (let i = 0; i < changes.length; i++) {
+                if (changes[i].type_id == type.type_id) {
+                  changes.splice(i, 1);
+                  return;
+                }
+              }
+              changes.push(type);
+            }}
+          />
+        </div>
+        <div>
+          <strong class="block text-lg" style="color: {type.color};"
+            >{type.name}</strong
+          >
+          <div class="text-sm text-gray-600">
+            Color: {type.color}, Comment: {type.comment}
+          </div>
+        </div>
+      </li>
+    {/each}
+  </ul>
+</div>

src/routes/test2/+page.server.ts

@@ -1,9 +0,0 @@
-import type { PageServerLoad } from "./$types";
-
-export const load: PageServerLoad = async ({ fetch }) => {
-  const response = await fetch("https://api.fin.qowevisa.click/api/authping");
-
-  return {
-    message: await response.json()
-  };
-}

src/routes/test2/+page.svelte

@@ -1,58 +0,0 @@
-<script lang="ts">
-  import ColorPicker from "$lib/components/ColorPicker.svelte";
-  import { addSuccessToast } from "$lib/components/store";
-  import Toasts from "$lib/components/Toasts.svelte";
-  import { selectedDate } from "$lib/stores/dateStore";
-
-  let { data } = $props();
-  let selectedColor = $state("#ff0000");
-
-  function testNotification() {
-    console.log("Tested!");
-    addSuccessToast("Test string", false);
-  }
-
-  async function test2() {
-    addSuccessToast("Test string", false);
-    const resp = await fetch("https://api.fin.qowevisa.click/api/ping");
-    // const resp = await fetch("http://localhost:3000/api/ping");
-    if (resp.ok) {
-      console.log(await resp.json());
-    }
-  }
-
-  async function test3() {
-    console.log(data);
-  }
-
-  function handleColorChange(event: CustomEvent) {
-    selectedColor = event.detail;
-  }
-</script>
-
-<Toasts />
-<p>{data.message.message}</p>
-<div class="flex justify-center items-center min-h-screen bg-gray-100">
-  <button
-    onclick={testNotification}
-    class="w-1/6 bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 rounded-md focus:outline-none focus:ring focus:ring-blue-300"
-  >
-    Click Me!
-  </button>
-  <button
-    onclick={test2}
-    class="w-1/6 bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 rounded-md focus:outline-none focus:ring focus:ring-blue-300"
-  >
-    Click Me2!
-  </button>
-  <button
-    onclick={test3}
-    class="w-1/6 bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 rounded-md focus:outline-none focus:ring focus:ring-blue-300"
-  >
-    Click Me3!
-  </button>
-  <ColorPicker on:change={handleColorChange} borderRadius="50%" />
-  <p>Selected color: {selectedColor}</p>
-  <h1>Selected Date</h1>
-  <p>The date you selected in the navbar is: {$selectedDate}</p>
-</div>