Sync commit

web/frontend/src/lib/Models.svelte.ts

@@ -0,0 +1,16 @@
+export type Retailer = {
+  id: number;
+  shopname: string;
+  url: string;
+  country: string;
+  display: number;
+};
+
+export type News = {
+  id: number;
+  newsTitle: string;
+  newsText: string;
+  newsDate: Date;
+  newsPublish: Date;
+  display: number;
+};

web/frontend/src/lib/NewsForm.svelte

@@ -0,0 +1,53 @@
+<script lang="ts">
+  import GenericForm from "./GenericForm.svelte";
+  import type { News } from "./Models.svelte.ts";
+
+  let { showModal = $bindable(), role } = $props();
+
+  let formdata: News = {
+    newsTitle: "",
+    newsText: "",
+    id: 0,
+    newsDate: new Date(),
+    newsPublish: new Date(),
+    display: 0,
+  };
+
+  let columns: string[] = ["newsTitle", "newsText", "newsDate", "newsPublish"];
+
+  function closeModal() {
+    showModal = false;
+  }
+
+  function submitForm(data: News) {
+    closeModal();
+    console.log("News Form Submitted:", data, role);
+  }
+</script>
+
+<div class="modal-dialog" role="document">
+  <div class="modal-content">
+    <div class="modal-header">
+      <h5 class="modal-title">{role} News</h5>
+    </div>
+    <div class="modal-body">
+      <GenericForm formData={formdata} onSubmit={submitForm}>
+        {#each columns as col}
+          <div class="mb-3">
+            <label for={col}>{col}:</label>
+            <input
+              id={col}
+              type="text"
+              bind:value={formdata[col as keyof News]}
+            />
+          </div>
+        {/each}
+      </GenericForm>
+    </div>
+    <div class="modal-footer justify-content-end">
+      <button type="button" class="btn btn-secondary" onclick={closeModal}
+        >Close</button
+      >
+    </div>
+  </div>
+</div>

web/frontend/src/lib/RestAPI.svelte.ts

@@ -0,0 +1,26 @@
+export async function createResource<T>(
+  endpoint: string,
+  data: T,
+): Promise<Response> {
+  return fetch(endpoint, {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify(data),
+  });
+}
+
+export async function updateResource<T>(
+  endpoint: string,
+  data: T,
+): Promise<Response> {
+  return fetch(endpoint, {
+    method: "PUT", // or 'PATCH'
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify(data),
+  });
+}
+
+export async function fetchData<T>(endpoint: string, data: T) {
+  const res = await fetch("http://localhost:8080/api/" + endpoint);
+  data = await res.json();
+}

web/frontend/src/lib/RetailerForm.svelte

@@ -0,0 +1,52 @@
+<script lang="ts">
+  import GenericForm from "./GenericForm.svelte";
+  import type { Retailer } from "./Models.svelte.ts";
+
+  let { showModal = $bindable(), role } = $props();
+
+  let formdata: Retailer = {
+    shopname: "",
+    url: "",
+    id: 0,
+    country: "",
+    display: 0,
+  };
+
+  let columns: string[] = ["shopname", "country", "url"];
+
+  function closeModal() {
+    showModal = false;
+  }
+
+  function submitForm(data: Retailer) {
+    closeModal();
+    console.log("Retailer Form Submitted:", data, role);
+  }
+</script>
+
+<div class="modal-dialog" role="document">
+  <div class="modal-content">
+    <div class="modal-header">
+      <h5 class="modal-title">Add Retailer</h5>
+    </div>
+    <div class="modal-body">
+      <GenericForm formData={formdata} onSubmit={submitForm}>
+        {#each columns as col}
+          <div class="mb-3">
+            <label for={col}>{col}:</label>
+            <input
+              id={col}
+              type="text"
+              bind:value={formdata[col as keyof Retailer]}
+            />
+          </div>
+        {/each}
+      </GenericForm>
+    </div>
+    <div class="modal-footer justify-content-end">
+      <button type="button" class="btn btn-secondary" onclick={closeModal}
+        >Close</button
+      >
+    </div>
+  </div>
+</div>