Add Category page

src/lib/components/ColorPicker.svelte

@@ -0,0 +1,51 @@
+<script lang="ts">
+  import { createEventDispatcher } from "svelte";
+
+  const dispatch = createEventDispatcher();
+  export let color = "#ff0000";
+
+  function handleColorChange(event: Event) {
+    const target = event.target as HTMLInputElement;
+    color = target.value;
+    dispatch("change", color);
+  }
+  export let borderRadius;
+  const actualBorderRadius = borderRadius || "50%";
+</script>
+
+<div class="color-picker" style="border-radius: {actualBorderRadius};">
+  <label style="border-radius: inherit;">
+    <input type="color" bind:value={color} on:input={handleColorChange} />
+    <div
+      class="color-circle"
+      style="background-color: {color || '#000'};"
+    ></div>
+  </label>
+</div>
+
+<style>
+  .color-picker {
+    position: relative;
+    display: inline-block;
+  }
+
+  .color-picker input[type="color"] {
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    opacity: 0;
+    cursor: pointer;
+    border-radius: inherit;
+  }
+
+  .color-picker .color-circle {
+    width: var(--color-picker-size, 40px);
+    height: var(--color-picker-size, 40px);
+    border-radius: inherit;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+</style>

src/lib/entities.ts

@@ -20,6 +20,25 @@ export interface Card {
   name: string;
 }
 
+export interface Category {
+  id: number;
+  name: string;
+  parent_id: number;
+}
+
+export const EntityTypes = {
+  card: "Card",
+  type: "Type",
+  category: "Category",
+} as const;
+
+export type EntityName = keyof typeof EntityTypes;
+export type EntityType<T extends EntityName> =
+  T extends "card" ? Card :
+  T extends "type" ? Type :
+  T extends "category" ? Category :
+  never;
+
 //
 // }}}
 //
@@ -125,7 +144,7 @@ export async function update<T>(groupName: string, id: number, data: T, session?
   }
 }
 
-export async function remove<T>(groupName: string, id: number, session?: string): Promise<T | ErrorMessage> {
+export async function remove(groupName: string, id: number, session?: string): Promise<Message | ErrorMessage> {
   const url = `${BASE_API_URL}/${groupName}/delete/${id}`
   const defaultHeaders = {
     'Content-Type': 'application/json',
@@ -145,7 +164,7 @@ export async function remove<T>(groupName: string, id: number, session?: string)
     if (!response.ok) {
       throw new Error(`Failed to delete ${groupName}: ${response.statusText}`);
     }
-    return await response.json() as T;
+    return await response.json() as Message;
   } catch (err) {
     const error = err as Error
     return { message: error.message };

src/routes/+layout.svelte

@@ -26,6 +26,14 @@
     {
     Path: "/card",
     Name: "Cards",
+    },
+    {
+    Path: "/type",
+    Name: "Types",
+    },
+    {
+    Path: "/category",
+    Name: "Categories",
     }
   ]
 </script>

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

@@ -0,0 +1,32 @@
+import type { ErrorMessage } from "$lib/api";
+import { getAll, EntityTypes, type EntityType, type EntityName } 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 }): Promise<Response> => {
+  const session = cookies.get('session');
+  const { entity } = params;
+
+  // Check if the entity is valid
+  if (!session) {
+    return new Response(JSON.stringify("no cookies"), { status: 401 });
+  }
+
+  if (!(entity in EntityTypes)) {
+    return new Response(JSON.stringify("Invalid entity"), { status: 400 });
+  }
+
+  // TypeScript type inference for entity
+  const entityName = entity as EntityName
+  const result = await getAll<EntityType<typeof entityName>>(entityName, session);
+
+  if (isErrorMessage(result)) {
+    console.log("ERROR");
+    return new Response(JSON.stringify(result), { status: 500 });
+  }
+
+  return new Response(JSON.stringify(result), { status: 200 });
+}

src/routes/api/[entity]/create/+server.ts

@@ -0,0 +1,29 @@
+import type { ErrorMessage } from "$lib/api";
+import { create, EntityTypes, type EntityType, type EntityName } from "$lib/entities";
+import type { RequestHandler } from "./$types";
+
+function isErrorMessage(value: any): value is ErrorMessage {
+  return value && typeof value.message === 'string';
+}
+
+export const POST: 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 EntityTypes)) {
+    return new Response(JSON.stringify("Invalid entity"), { status: 400 });
+  }
+
+  const entityName = entity as EntityName;
+  const data: EntityType<typeof entityName> = await request.json();
+
+  const result = await create<EntityType<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/api/[entity]/delete/+server.ts

@@ -1,18 +1,25 @@
 import type { ErrorMessage } from "$lib/api";
-import { remove, type Card } from "$lib/entities";
+import { remove, EntityTypes, type EntityName } from "$lib/entities";
 import type { RequestHandler } from "./$types";
 
 function isErrorMessage(value: any): value is ErrorMessage {
   return value && typeof value.message === 'string';
 }
 
-export const DELETE: RequestHandler = async ({ request, cookies }): Promise<Response> => {
+export const DELETE: 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 EntityTypes)) {
+    return new Response(JSON.stringify("Invalid entity"), { status: 400 });
+  }
+
   const { id }: { id: number } = await request.json();
-  const result = await remove<Card>("card", id, session);
+  const result = await remove(entity as EntityName, id, session);
   if (isErrorMessage(result)) {
     return new Response(JSON.stringify(result), { status: 500 })
   }

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

@@ -0,0 +1,28 @@
+import type { ErrorMessage } from "$lib/api";
+import { update, EntityTypes, type EntityType, type EntityName } 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 EntityTypes)) {
+    return new Response(JSON.stringify("Invalid entity"), { status: 400 });
+  }
+
+  const entityName = entity as EntityName;
+  const data: EntityType<typeof entityName> = await request.json();
+  const result = await update<EntityType<typeof entityName>>(entityName, data.id, data, session);
+  if (isErrorMessage(result)) {
+    return new Response(JSON.stringify(result), { status: 500 })
+  }
+  return new Response(JSON.stringify(result), { status: 200 })
+}

src/routes/api/card/all/+server.ts

@@ -1,21 +0,0 @@
-import type { ErrorMessage } from "$lib/api";
-import { getAll, type Card } 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 }): Promise<Response> => {
-  const session = cookies.get('session')
-  if (!session) {
-    throw new Response(JSON.stringify("no cookies"), { status: 401 })
-  }
-
-  const result = await getAll<Card>("card", session);
-  if (isErrorMessage(result)) {
-    console.log("ERROR")
-    return new Response(JSON.stringify(result), { status: 500 })
-  }
-  return new Response(JSON.stringify(result), { status: 200 })
-}

src/routes/api/card/create/+server.ts

@@ -1,20 +0,0 @@
-import type { ErrorMessage } from "$lib/api";
-import { create, type Card } from "$lib/entities";
-import type { RequestHandler } from "./$types";
-
-function isErrorMessage(value: any): value is ErrorMessage {
-  return value && typeof value.message === 'string';
-}
-
-export const POST: RequestHandler = async ({ request, cookies }): Promise<Response> => {
-  const session = cookies.get('session')
-  if (!session) {
-    throw new Response(JSON.stringify("no cookies"), { status: 401 })
-  }
-  const data: Card = await request.json();
-  const result = await create<Card>("card", data, session);
-  if (isErrorMessage(result)) {
-    return new Response(JSON.stringify(result), { status: 500 })
-  }
-  return new Response(JSON.stringify(result), { status: 200 })
-}

src/routes/api/card/update/+server.ts

@@ -1,20 +0,0 @@
-import type { ErrorMessage } from "$lib/api";
-import { update, type Card } 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 }): Promise<Response> => {
-  const session = cookies.get('session')
-  if (!session) {
-    throw new Response(JSON.stringify("no cookies"), { status: 401 })
-  }
-  const data: Card = await request.json();
-  const result = await update<Card>("card", data.id, data, session);
-  if (isErrorMessage(result)) {
-    return new Response(JSON.stringify(result), { status: 500 })
-  }
-  return new Response(JSON.stringify(result), { status: 200 })
-}

src/routes/category/+page.svelte

@@ -0,0 +1,176 @@
+<script lang="ts">
+  import { onMount } from "svelte";
+  import { type Category } from "$lib/entities";
+
+  let categories: Category[] = $state([]);
+  let error: string | null = $state(null);
+  let editingCategory: Category | null = $state(null);
+  let newCategory: Partial<Category> = $state({
+    name: "",
+    parent_id: 0,
+  });
+
+  onMount(async () => {
+    await fetchCategories();
+  });
+
+  async function fetchCategories() {
+    const result = await fetch("/api/category/all");
+    if (!result.ok) {
+      const obj = await result.json();
+      error = obj.message;
+    } else {
+      categories = await result.json();
+    }
+  }
+
+  async function saveCategory() {
+    const endpoint = editingCategory
+      ? `/api/category/update`
+      : "/api/category/create";
+    const method = editingCategory ? "PUT" : "POST";
+
+    const data = {
+      ...currentCategory,
+      parent_id: Number(currentCategory.parent_id),
+    };
+    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 {
+      await fetchCategories();
+      if (editingCategory) {
+        editingCategory = null;
+      } else {
+        newCategory = {
+          name: "",
+          parent_id: 0,
+        };
+      }
+    }
+  }
+
+  function editCategory(category: Category) {
+    editingCategory = { ...category };
+  }
+
+  async function deleteCategory(id: number) {
+    const response = await fetch(`/api/category/delete`, {
+      method: "DELETE",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ id }),
+    });
+    if (!response.ok) {
+      const { message } = await response.json();
+      error = message;
+    } else {
+      await fetchCategories();
+    }
+  }
+
+  // Helper function to get the name of the parent category
+  function getParentCategoryName(parentId: number) {
+    if (parentId === 0) return "None";
+    const parentCategory = categories.find(
+      (category) => category.id === parentId,
+    );
+    return parentCategory ? parentCategory.name : "Unknown";
+  }
+
+  const currentCategory = $derived(editingCategory ?? newCategory);
+  $inspect(currentCategory);
+</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 Categories</h1>
+
+  <div class="mb-8 p-6 bg-white rounded-lg shadow-md">
+    <h2 class="text-xl font-semibold mb-4">
+      {editingCategory ? "Edit Category" : "Add New Category"}
+    </h2>
+    <form onsubmit={saveCategory} class="space-y-4">
+      <label class="block">
+        <span class="text-gray-700">Name:</span>
+        <input
+          type="text"
+          bind:value={currentCategory.name}
+          required
+          class="mt-1 block w-full px-4 py-2 border border-gray-300 rounded-md focus:ring focus:ring-indigo-200 focus:border-indigo-500"
+        />
+      </label>
+
+      <label class="block">
+        <span class="text-gray-700">Parent Category:</span>
+        <select
+          bind:value={currentCategory.parent_id}
+          class="mt-1 block w-full px-4 py-2 border border-gray-300 rounded-md focus:ring focus:ring-indigo-200 focus:border-indigo-500"
+        >
+          <option value="0">None</option>
+          {#each categories as parentCategory}
+            {#if parentCategory.id != currentCategory.id}
+              <option value={parentCategory.id}>{parentCategory.name}</option>
+            {/if}
+          {/each}
+        </select>
+      </label>
+
+      <div class="flex space-x-2">
+        <button
+          type="submit"
+          class="px-4 py-2 bg-indigo-500 text-white rounded-md hover:bg-indigo-600"
+        >
+          {editingCategory ? "Update Category" : "Add Category"}
+        </button>
+        {#if editingCategory}
+          <button
+            type="button"
+            onclick={() => (editingCategory = null)}
+            class="px-4 py-2 bg-gray-300 text-gray-700 rounded-md hover:bg-gray-400"
+          >
+            Cancel
+          </button>
+        {/if}
+      </div>
+    </form>
+  </div>
+
+  <h2 class="text-xl font-semibold mb-4 text-center">Categories List</h2>
+  <ul class="space-y-4">
+    {#each categories as category}
+      <li
+        class="bg-white p-4 rounded-lg shadow-md flex justify-between items-center"
+      >
+        <div>
+          <strong class="block text-lg">{category.name}</strong>
+          <div class="text-sm text-gray-600">
+            Parent: {getParentCategoryName(category.parent_id)}
+          </div>
+        </div>
+        <div class="flex space-x-2">
+          <button
+            onclick={() => editCategory(category)}
+            class="px-4 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600"
+          >
+            Edit
+          </button>
+          <button
+            onclick={() => deleteCategory(category.id)}
+            class="px-4 py-2 bg-red-500 text-white rounded-md hover:bg-red-600"
+          >
+            Delete
+          </button>
+        </div>
+      </li>
+    {/each}
+  </ul>
+</div>

src/routes/type/+page.svelte

@@ -0,0 +1,172 @@
+<script lang="ts">
+  import { onMount } from "svelte";
+  import { type Type } from "$lib/entities";
+  import ColorPicker from "$lib/components/ColorPicker.svelte";
+
+  let types: Type[] = $state([]);
+  let error: string | null = $state(null);
+  let editingType: Type | null = $state(null);
+  let newType: Partial<Type> = $state({
+    name: "",
+    color: "",
+    comment: "",
+  });
+
+  // Fetch all types on page load
+  onMount(async () => {
+    await fetchTypes();
+  });
+
+  async function fetchTypes() {
+    const result = await fetch("/api/type/all");
+    if (!result.ok) {
+      const obj = await result.json();
+      error = obj.message;
+    } else {
+      types = await result.json();
+    }
+  }
+
+  async function saveType() {
+    const endpoint = editingType ? `/api/type/update` : "/api/type/create";
+    const method = editingType ? "PUT" : "POST";
+
+    const response = await fetch(endpoint, {
+      method,
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify(editingType || newType),
+    });
+
+    if (!response.ok) {
+      const { message } = await response.json();
+      error = message;
+    } else {
+      await fetchTypes();
+      if (editingType) {
+        editingType = null;
+      } else {
+        newType = {
+          name: "",
+          comment: "",
+          color: "",
+        };
+      }
+    }
+  }
+
+  function editType(type: Type) {
+    editingType = { ...type };
+  }
+
+  async function deleteType(id: number) {
+    const response = await fetch(`/api/type/delete`, {
+      method: "DELETE",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ id }),
+    });
+    if (!response.ok) {
+      const { message } = await response.json();
+      error = message;
+    } else {
+      await fetchTypes();
+    }
+  }
+
+  function handleColorChange(event: CustomEvent) {
+    currentType.color = event.detail;
+  }
+
+  const currentType = $derived(editingType ?? newType);
+  $inspect(currentType);
+</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">
+      {editingType ? "Edit Type" : "Add New Type"}
+    </h2>
+    <form onsubmit={saveType} class="space-y-4">
+      <label class="block">
+        <span class="text-gray-700">Name:</span>
+        <input
+          type="text"
+          bind:value={currentType.name}
+          required
+          class="mt-1 block w-full px-4 py-2 border border-gray-300 rounded-md focus:ring focus:ring-indigo-200 focus:border-indigo-500"
+        />
+      </label>
+      <label class="block">
+        <span class="text-gray-700">Comment:</span>
+        <input
+          type="text"
+          bind:value={currentType.comment}
+          required
+          class="mt-1 block w-full px-4 py-2 border border-gray-300 rounded-md focus:ring focus:ring-indigo-200 focus:border-indigo-500"
+        />
+      </label>
+      <label class="block">
+        <span class="text-gray-700">Color:</span>
+        <ColorPicker
+          on:change={handleColorChange}
+          bind:color={currentType.color}
+          borderRadius="50%"
+        />
+      </label>
+      <div class="flex space-x-2">
+        <button
+          type="submit"
+          class="px-4 py-2 bg-indigo-500 text-white rounded-md hover:bg-indigo-600"
+        >
+          {editingType ? "Update Type" : "Add Type"}
+        </button>
+        {#if editingType}
+          <button
+            type="button"
+            onclick={() => (editingType = null)}
+            class="px-4 py-2 bg-gray-300 text-gray-700 rounded-md hover:bg-gray-400"
+          >
+            Cancel
+          </button>
+        {/if}
+      </div>
+    </form>
+  </div>
+
+  <h2 class="text-xl font-semibold mb-4 text-center">Types List</h2>
+  <ul class="space-y-4">
+    {#each types as type}
+      <li
+        class="bg-white p-4 rounded-lg shadow-md flex justify-between items-center"
+      >
+        <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>
+        <div class="flex space-x-2">
+          <button
+            onclick={() => editType(type)}
+            class="px-4 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600"
+          >
+            Edit
+          </button>
+          <button
+            onclick={() => deleteType(type.id)}
+            class="px-4 py-2 bg-red-500 text-white rounded-md hover:bg-red-600"
+          >
+            Delete
+          </button>
+        </div>
+      </li>
+    {/each}
+  </ul>
+</div>