121 lines
3.5 KiB
Plaintext
121 lines
3.5 KiB
Plaintext
---
|
|
import Layout from "../layouts/Layout.astro";
|
|
import type { APIResponse, Player, Note } from "../types";
|
|
import { API_URL } from "../env";
|
|
|
|
const res = await fetch(`${API_URL}/player`);
|
|
const data: APIResponse<Player[]> = await res.json();
|
|
|
|
const request = { success: true, message: "" };
|
|
if (Astro.request.method === "POST") {
|
|
try {
|
|
const body = await Astro.request.text();
|
|
const res = await fetch(`${API_URL}/note/new`, {
|
|
method: "POST",
|
|
body,
|
|
});
|
|
const data: APIResponse<Note> = await res.json();
|
|
request.success = data.success;
|
|
request.message = data.message;
|
|
return new Response(null, {
|
|
status: res.status,
|
|
statusText: data.message,
|
|
});
|
|
} catch (err) {
|
|
console.error(err);
|
|
}
|
|
}
|
|
console.log(request);
|
|
---
|
|
|
|
<script>
|
|
const form = document.querySelector("form");
|
|
if (form) {
|
|
form.addEventListener("submit", (e) => {
|
|
e.preventDefault();
|
|
const note = document.querySelector("#note");
|
|
if (!note) {
|
|
console.error("No note found");
|
|
return;
|
|
}
|
|
|
|
fetch(window.location.href, {
|
|
method: "POST",
|
|
body: note.textContent,
|
|
}).then((res) => {
|
|
if (res.status != 200) {
|
|
console.error(res);
|
|
const err = res.statusText;
|
|
const kaput = document.querySelector("#kaput");
|
|
if (!kaput) {
|
|
console.error("No kaput found");
|
|
return;
|
|
}
|
|
kaput?.classList.remove("display-none");
|
|
kaput.textContent = err;
|
|
} else {
|
|
const kaput = document.querySelector("#kaput");
|
|
kaput?.classList.add("display-none");
|
|
note.textContent = "";
|
|
window.location.reload();
|
|
}
|
|
});
|
|
});
|
|
}
|
|
</script>
|
|
|
|
<Layout title="Players">
|
|
<div id="kaput" class="display-none text-center text-2xl text-red-600 py-2"></div>
|
|
<form class="p-5 min-h-[25rem] h-[25rem]">
|
|
<div class="h-full w-full mb-4 border rounded-lg shadow-lg overflow-hidden flex flex-col">
|
|
<div
|
|
id="note"
|
|
contenteditable="true"
|
|
class="flex-grow w-full px-4 py-2 overflow-scroll border bg-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500 transition-all duration-200"
|
|
>
|
|
</div>
|
|
<div class="flex items-center justify-between px-3 py-2 border-t">
|
|
<button
|
|
id="note-submit-btn"
|
|
type="submit"
|
|
class="inline-flex items-center py-2.5 px-4 text-xs font-medium text-center text-white bg-blue-600 rounded-lg hover:bg-blue-700 focus:ring-4 transition-all duration-200"
|
|
>
|
|
Davai
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
|
|
<div class="overflow-x-auto p-5">
|
|
{
|
|
data.success && (
|
|
<table class="min-w-full bg-white border border-gray-300">
|
|
<thead>
|
|
<tr class="bg-gray-100">
|
|
<th class="p-4 border border-gray-300 text-left">Name</th>
|
|
<th class="p-4 border border-gray-300 text-left">Guild</th>
|
|
<th class="p-4 border border-gray-300 text-left">#Notes</th>
|
|
<th class="p-4 border border-gray-300 text-left">#Associations</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{data.data.map((player) => (
|
|
<tr class="hover:bg-gray-50">
|
|
<td class="p-4 border border-gray-300">
|
|
<a href={`/player/${player.name}`} class="text-blue-600 hover:underline">
|
|
{player.name}
|
|
</a>
|
|
</td>
|
|
<td class="p-4 border border-gray-300">{player.guild.name}</td>
|
|
<td class="p-4 border border-gray-300">{player.notes}</td>
|
|
<td class="p-4 border border-gray-300">{player.associations}</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
)
|
|
}
|
|
{!data.success && <div>{data.message}</div>}
|
|
</div>
|
|
</Layout>
|