moebiusband/go-http-skeleton
Template
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Sync commit

Browse Source
This commit is contained in:
Jan Eitzinger 2025-06-16 07:23:13 +02:00
parent 562186fa47
commit c42f008ac8
7 changed files with 155 additions and 58 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

64
web/frontend/src/App.svelte
View File

@ -1,27 +1,16 @@
<script lang="ts">
import Table from "./lib/Table.svelte";
import GenericForm from "./lib/GenericForm.svelte";
import NewsForm from "./lib/NewsForm.svelte";
import { fetchData } from "./lib/RestAPI.svelte.ts";
import type { Retailer } from "./lib/Models.svelte.ts";
type Retailer = {
id: number;
shopname: string;
url: string;
country: string;
display: number;
};
let retailerrecords: Retailer[] = $state([]);
let records: Retailer[] = $state([]);
let columns: string[] = ["shopname", "country", "url"];
let activeTab = $state("invoice");
async function fetchData(endpoint: string) {
const res = await fetch("http://localhost:8080/api/" + endpoint);
records = await res.json();
}
$effect(() => {
if (activeTab === "retailers") {
fetchData("retailers/");
fetchData("retailers/", retailerrecords);
}
});
@ -31,22 +20,6 @@
showModal = true;
}
function closeModal() {
showModal = false;
}
let formdata: Retailer = {
shopname: "",
url: "",
id: 0,
country: "",
display: 0,
};
function submitUserForm(data: Retailer) {
closeModal();
console.log("User Form Submitted:", data);
}
function removeRowHandler(id: Number) {
console.log("Remove Record:", id);
}
@ -59,32 +32,7 @@
role="dialog"
style="display: {showModal ? 'block' : 'none'};"
>
<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={submitUserForm}>
{#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>
<NewsForm {showModal} role={"edit"} />
</div>
<main>

16
web/frontend/src/lib/Models.svelte.ts Normal file
View File

@ -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;
};

53
web/frontend/src/lib/NewsForm.svelte Normal file
View File

@ -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>

26
web/frontend/src/lib/RestAPI.svelte.ts Normal file
View File

@ -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();
}

52
web/frontend/src/lib/RetailerForm.svelte Normal file
View File

@ -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>

1
web/frontend/tsconfig.app.json
View File

@ -3,6 +3,7 @@
"compilerOptions": {
"target": "ESNext",
"useDefineForClassFields": true,
"allowImportingTsExtensions": true,
"module": "ESNext",
"resolveJsonModule": true,
/**

1
web/frontend/tsconfig.node.json
View File

@ -4,6 +4,7 @@
"target": "ES2022",
"lib": ["ES2023"],
"module": "ESNext",
"composite": true,
"skipLibCheck": true,
/* Bundler mode */