Garmelon/showbits
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Extract api request logic into component

Browse source
This commit is contained in:
Joscha 2025-03-03 15:12:51 +01:00
parent 8df09e1b21
commit db73dee8d7
4 changed files with 51 additions and 66 deletions
Download patch file Download diff file Expand all files Collapse all files

35
showbits-thermal-printer-ui/src/apiRequest.ts Normal file
View file

@ -0,0 +1,35 @@
import { ref } from "vue";
async function waitAtLeast(duration: number, since: number): Promise<void> {
const now = Date.now();
const wait = duration - (now - since);
if (wait > 0) {
await new Promise((resolve) => setTimeout(resolve, wait));
}
}
export function useApiRequest() {
const disabled = ref(false);
const error = ref<string>();
async function makeRequest(url: string, data: URLSearchParams | FormData) {
const start = Date.now();
disabled.value = true;
try {
const response = await fetch(url, { method: "POST", body: data });
if (!response.ok) {
const status = `${response.status.toFixed()} ${response.statusText}`;
const text = await response.text();
error.value = text.length > 0 ? `${status}: ${text}` : status;
}
} catch (err) {
error.value = String(err);
}
await waitAtLeast(500, start);
disabled.value = false;
}
return { disabled, error, makeRequest };
}

42
showbits-thermal-printer-ui/src/components/CSegmentCalendar.vue
View file

@ -1,48 +1,22 @@
<script setup lang="ts">
import { useApiRequest } from "@/apiRequest";
import { ref, useTemplateRef } from "vue";
import CSegmentError from "./CSegmentError.vue";
const { disabled, error, makeRequest } = useApiRequest();
const form = useTemplateRef<HTMLFormElement>("form");
const disabled = ref(false);
const error = ref<string>();
const today = new Date();
const year = ref(today.getFullYear());
const month = ref(today.getMonth() + 1);
const feed = ref(true);
async function waitAtLeast(duration: number, since: number): Promise<void> {
const now = Date.now();
const wait = duration - (now - since);
if (wait > 0) {
await new Promise((resolve) => setTimeout(resolve, wait));
}
}
async function submit(): Promise<void> {
const start = Date.now();
disabled.value = true;
try {
const data = new URLSearchParams();
data.append("year", String(year.value));
data.append("month", String(month.value));
data.append("feed", String(feed.value));
const response = await fetch("/api/calendar", {
method: "POST",
body: data,
});
if (!response.ok) {
const status = `${response.status.toFixed()} ${response.statusText}`;
const text = await response.text();
error.value = text.length > 0 ? `${status}: ${text}` : status;
}
} catch (err) {
error.value = String(err);
}
await waitAtLeast(500, start);
disabled.value = false;
function submit() {
const data = new URLSearchParams();
data.append("year", String(year.value));
data.append("month", String(month.value));
data.append("feed", String(feed.value));
void makeRequest("/api/calendar", data);
}
</script>

39
showbits-thermal-printer-ui/src/components/CSegmentText.vue
View file

@ -1,10 +1,10 @@
<script setup lang="ts">
import { useApiRequest } from "@/apiRequest";
import { computed, ref, type StyleValue, useTemplateRef } from "vue";
import CSegmentError from "./CSegmentError.vue";
const { disabled, error, makeRequest } = useApiRequest();
const form = useTemplateRef<HTMLFormElement>("form");
const disabled = ref(false);
const error = ref<string>();
const text = ref("");
const forceWrap = ref(false);
@ -22,35 +22,12 @@ function textareaKeypress(ev: KeyboardEvent): void {
}
}
async function waitAtLeast(duration: number, since: number): Promise<void> {
const now = Date.now();
const wait = duration - (now - since);
if (wait > 0) {
await new Promise((resolve) => setTimeout(resolve, wait));
}
}
async function submit(): Promise<void> {
const start = Date.now();
disabled.value = true;
try {
const data = new URLSearchParams();
data.append("text", text.value);
data.append("force_wrap", String(forceWrap.value));
data.append("feed", String(feed.value));
const response = await fetch("/api/text", { method: "POST", body: data });
if (!response.ok) {
const status = `${response.status.toFixed()} ${response.statusText}`;
const text = await response.text();
error.value = text.length > 0 ? `${status}: ${text}` : status;
}
} catch (err) {
error.value = String(err);
}
await waitAtLeast(500, start);
disabled.value = false;
function submit() {
const data = new URLSearchParams();
data.append("text", text.value);
data.append("force_wrap", String(forceWrap.value));
data.append("feed", String(feed.value));
void makeRequest("/api/text", data);
}
</script>