Add working CRUD page for cards

src/hooks.server.ts

@@ -6,19 +6,22 @@ import type { HandleFetch } from "@sveltejs/kit";
 //   return await resolve(event)
 // }
 
-console.log("in hooks file: 1")
 export const handleFetch: HandleFetch = async ({ request, fetch }) => {
-  console.log(request)
-  console.log("handleFetch triggered for URL:", request.url);
-  console.log("in handleFetch: 2")
+  if (!request.url.match('authping')) {
+    console.log(request)
+    console.log("handleFetch triggered for URL:", request.url);
+    console.log("in handleFetch: 2")
+  }
   if (request.url.startsWith("https://api.fin.qowevisa.click/api")) {
     request = new Request(
       request.url.replace("https://api.fin.qowevisa.click/api", "http://localhost:3000/api"),
       request
     )
   };
-  console.log(request)
-  console.log("in handleFetch: 3")
+  if (!request.url.match('authping')) {
+    console.log(request)
+    console.log("in handleFetch: 3")
+  }
 
   return fetch(request);
 };

src/lib/api.ts

@@ -73,6 +73,14 @@ interface UserData {
   name: string;
 }
 
+export interface ErrorMessage {
+  message: string;
+}
+
+export interface Message {
+  info: string;
+}
+
 // Generic function for making API requests
 export async function apiFetch<T>(
   endpoint: string,
@@ -114,7 +122,7 @@ export async function apiFetch<T>(
     return await response.json() as T;
   } catch (error) {
     console.error(`API fetch error: ${error}`);
-    throw error;
+    throw error as ErrorMessage;
   }
 }
 

src/lib/entities.ts

@@ -0,0 +1,153 @@
+
+// TYPES {{{
+
+import { BASE_API_URL } from "./api";
+import type { ErrorMessage, Message } from "./api";
+
+//
+export interface Type {
+  color: string;
+  comment: string;
+  id: number;
+  name: string;
+}
+
+export interface Card {
+  balance: number;
+  credit_line: number;
+  have_credit_line: boolean;
+  id: number;
+  name: string;
+}
+
+//
+// }}}
+//
+
+
+export async function getAll<T>(groupName: string, session?: string): Promise<T[] | ErrorMessage> {
+  const url = `${BASE_API_URL}/${groupName}/all`
+  const defaultHeaders = {
+    'Content-Type': 'application/json',
+  };
+
+  const headers = session
+    ? { ...defaultHeaders, Cookie: `session=${session}` }
+    : defaultHeaders
+
+  const config: RequestInit = {
+    headers
+  };
+
+  try {
+    const response = await fetch(url, config);
+    if (!response.ok) {
+      const body = await response.json()
+      throw new Error(`Failed to fetch ${groupName}: ${body.message}`);
+    }
+    return await response.json() as T[];
+  } catch (err) {
+    const error = err as Error
+    return { message: error.message };
+  }
+}
+
+export async function getByID<T>(groupName: string, id: number): Promise<T | ErrorMessage> {
+  try {
+    const response = await fetch(`${BASE_API_URL}/${groupName}/${id}`);
+    if (!response.ok) {
+      throw new Error(`Failed to fetch ${groupName} by ID: ${response.statusText}`);
+    }
+    return await response.json() as T;
+  } catch (err) {
+    const error = err as Error
+    return { message: error.message };
+  }
+}
+
+export async function create<T>(groupName: string, data: T, session?: string): Promise<Message | ErrorMessage> {
+  const url = `${BASE_API_URL}/${groupName}/add`
+  const defaultHeaders = {
+    'Content-Type': 'application/json',
+  };
+
+  const headers = session
+    ? { ...defaultHeaders, Cookie: `session=${session}` }
+    : defaultHeaders
+
+  const config: RequestInit = {
+    method: 'POST',
+    headers,
+    body: JSON.stringify(data)
+  };
+
+  console.log(data)
+
+  try {
+    const response = await fetch(url, config);
+    if (!response.ok) {
+      const body = await response.json()
+      throw new Error(`Failed to create ${groupName}: ${body.message}`);
+    }
+    return await response.json() as Message;
+  } catch (err) {
+    const error = err as Error
+    return { message: error.message };
+  }
+}
+
+export async function update<T>(groupName: string, id: number, data: T, session?: string): Promise<T | ErrorMessage> {
+  const url = `${BASE_API_URL}/${groupName}/edit/${id}`
+  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 };
+  }
+}
+
+export async function remove<T>(groupName: string, id: number, session?: string): Promise<T | ErrorMessage> {
+  const url = `${BASE_API_URL}/${groupName}/delete/${id}`
+  const defaultHeaders = {
+    'Content-Type': 'application/json',
+  };
+
+  const headers = session
+    ? { ...defaultHeaders, Cookie: `session=${session}` }
+    : defaultHeaders
+
+  const config: RequestInit = {
+    method: 'DELETE',
+    headers,
+  };
+
+  try {
+    const response = await fetch(url, config);
+    if (!response.ok) {
+      throw new Error(`Failed to delete ${groupName}: ${response.statusText}`);
+    }
+    return await response.json() as T;
+  } catch (err) {
+    const error = err as Error
+    return { message: error.message };
+  }
+}

src/routes/+layout.server.ts

@@ -5,7 +5,6 @@ export const load: LayoutServerLoad = async ({ url, fetch, cookies }) => {
   if (url.pathname == "/login") {
     return
   }
-  console.log("what?")
   const response = await fetch("https://api.fin.qowevisa.click/api/authping");
 
   if (!response.ok) {

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

@@ -0,0 +1,21 @@
+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

@@ -0,0 +1,20 @@
+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/delete/+server.ts

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

@@ -0,0 +1,20 @@
+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/card/+page.svelte

@@ -0,0 +1,177 @@
+<script lang="ts">
+  import { onMount } from "svelte";
+  import { type Card } from "$lib/entities";
+
+  let cards: Card[] = $state([]);
+  let error: string | null = $state(null);
+  let editingCard: Card | null = $state(null);
+  let newCard: Partial<Card> = {
+    balance: 0,
+    credit_line: 0,
+    have_credit_line: false,
+    name: "",
+  };
+
+  // Fetch all cards on page load
+  onMount(async () => {
+    await fetchCards();
+  });
+
+  async function fetchCards() {
+    const result = await fetch("/api/card/all", { credentials: "same-origin" });
+    if (!result.ok) {
+      const obj = await result.json();
+      error = obj.message;
+    } else {
+      cards = await result.json();
+    }
+  }
+
+  async function saveCard() {
+    const endpoint = editingCard ? `/api/card/update` : "/api/card/create";
+    const method = editingCard ? "PUT" : "POST";
+
+    const response = await fetch(endpoint, {
+      method,
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify(editingCard || newCard),
+    });
+
+    if (!response.ok) {
+      const { message } = await response.json();
+      error = message;
+    } else {
+      await fetchCards();
+      if (editingCard) {
+        editingCard = null;
+      } else {
+        newCard = {
+          balance: 0,
+          credit_line: 0,
+          have_credit_line: false,
+          name: "",
+        };
+      }
+    }
+  }
+
+  function editCard(card: Card) {
+    editingCard = { ...card };
+  }
+
+  async function deleteCard(id: number) {
+    const response = await fetch(`/api/card/delete`, {
+      method: "DELETE",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ id }),
+    });
+    if (!response.ok) {
+      const { message } = await response.json();
+      error = message;
+    } else {
+      await fetchCards();
+    }
+  }
+
+  const currentCard = $derived(editingCard ?? newCard);
+</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 Cards</h1>
+
+  <div class="mb-8 p-6 bg-white rounded-lg shadow-md">
+    <h2 class="text-xl font-semibold mb-4">
+      {editingCard ? "Edit Card" : "Add New Card"}
+    </h2>
+    <form onsubmit={saveCard} class="space-y-4">
+      <label class="block">
+        <span class="text-gray-700">Name:</span>
+        <input
+          type="text"
+          bind:value={currentCard.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">Balance:</span>
+        <input
+          type="number"
+          bind:value={currentCard.balance}
+          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>
+      {#if currentCard.have_credit_line}
+        <label class="block">
+          <span class="text-gray-700">Credit Line:</span>
+          <input
+            type="number"
+            bind:value={currentCard.credit_line}
+            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>
+      {/if}
+      <label class="flex items-center">
+        <input
+          type="checkbox"
+          bind:checked={currentCard.have_credit_line}
+          class="form-checkbox"
+        />
+        <span class="ml-2 text-gray-700">Have Credit Line</span>
+      </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"
+        >
+          {editingCard ? "Update Card" : "Add Card"}
+        </button>
+        {#if editingCard}
+          <button
+            type="button"
+            onclick={() => (editingCard = 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">Cards List</h2>
+  <ul class="space-y-4">
+    {#each cards as card}
+      <li
+        class="bg-white p-4 rounded-lg shadow-md flex justify-between items-center"
+      >
+        <div>
+          <strong class="block text-lg">{card.name}</strong>
+          <div class="text-sm text-gray-600">
+            Balance: {card.balance}, Credit Line: {card.credit_line},{" "}
+            Have Credit Line: {card.have_credit_line ? "Yes" : "No"}
+          </div>
+        </div>
+        <div class="flex space-x-2">
+          <button
+            onclick={() => editCard(card)}
+            class="px-4 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600"
+          >
+            Edit
+          </button>
+          <button
+            onclick={() => deleteCard(card.id)}
+            class="px-4 py-2 bg-red-500 text-white rounded-md hover:bg-red-600"
+          >
+            Delete
+          </button>
+        </div>
+      </li>
+    {/each}
+  </ul>
+</div>