From 413e2ff9cdd8210a3736c176a801fbc213415c62 Mon Sep 17 00:00:00 2001 From: zomborip Date: Fri, 24 Oct 2025 22:08:39 +0200 Subject: [PATCH] =?UTF-8?q?Kilist=C3=A1z=C3=A1st?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit A kilistázása az API [GET] /contacts API hívásnak --- src/App.vue | 279 +++++++++++++++++++++++++++++++++++++++------------- 1 file changed, 212 insertions(+), 67 deletions(-) diff --git a/src/App.vue b/src/App.vue index b01e9b7..742d483 100644 --- a/src/App.vue +++ b/src/App.vue @@ -3,78 +3,134 @@
API Status: - - + - - -
API Info: {{ apiBase }}
+
-
{{loginErrorMsg}}
- +
-
+
- - -
-
Telefonkönyv
- - - -
- - -
-
Admin
- - - -
- - -
-
Kijelentkezés
- - - -
+
+
Telefonkönyv
+ + + +
+
+
Admin
+ + + +
+
+ + + + +
+
-
{{ menuSel }}
+
{{ menuSel }}
-
- - - - - - +
+ +
+
Kontaktok
+
+ + Töltés… +
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
IDNévTelefonCímMegjegyzésMűvelet
{{ c.id }} + + {{ c.name }} + + + {{ c.phone }} + + + {{ c.address }} + + + {{ c.note }} + + +
Nincs megjeleníthető kontakt.
+
+
Tipp: duplán kattints egy mezőre a szerkesztéshez. Enter ment, Esc mégse.
@@ -90,59 +146,148 @@ const loginCheck = ref(false) const loginErrorMsg = ref("Bejelentkezés...") const userLoginName = ref("") const userLoginPw = ref("") -const userName = ref("") -const userPassw = ref("") const userAdmin = ref(false) const isLoading = ref(false) -const menuSel = ref("Telefonkönyv") // Telefonkönyv, Admin, Kijelentkezés +const menuSel = ref("Telefonkönyv") // Telefonkönyv, Admin, Kijelentkezés +// --- Telefonkönyv állapot --- +const contacts = ref([]) +const isLoadingContacts = ref(false) +const editing = ref({ id: null, field: null }) +const editBuffer = ref({ id: null, name: "", phone: "", address: "", note: "" }) +// ---- Segédfüggvény: GET body workaround ---- +// Browserek nem küldenek body-t GET-tel, ezért POST-tal kérjük és +// X-HTTP-Method-Override: GET fejlécet adunk hozzá. +async function getWithBody(url, bodyObj) { + const res = await fetch(url, { + method: 'POST', + headers: { 'X-HTTP-Method-Override': 'GET', 'Content-Type': 'application/json' }, + body: JSON.stringify(bodyObj) + }) + return res +} +// --- API hívások a /contacts-hoz --- +async function loadContacts() { + isLoadingContacts.value = true + console.log(`${apiBase}/contacts`) + try { + const res = await getWithBody(`${apiBase}/contacts`, { + authUname: userLoginName.value, + authPw: userLoginPw.value + }) + const data = await res.json() + if (data.ok) contacts.value = data.contacts || [] + else contacts.value = [] + } catch (e) { + console.error(e) + contacts.value = [] + } finally { + isLoadingContacts.value = false + } +} + +async function patchContact(id, patch) { + const res = await fetch(`${apiBase}/contacts`, { + method: 'PATCH', + headers: { 'Content-Type': 'application/json' }, + body: JSON.stringify({ + authUname: userLoginName.value, + authPw: userLoginPw.value, + id, + ...patch + }) + }) + return res.json() +} + +async function deleteContact(id) { + if (!confirm(`Biztosan törlöd a(z) #${id} kontaktot?`)) return + const res = await fetch(`${apiBase}/contacts`, { + method: 'DELETE', + headers: { 'Content-Type': 'application/json' }, + body: JSON.stringify({ + authUname: userLoginName.value, + authPw: userLoginPw.value, + id + }) + }) + const data = await res.json() + if (data.ok) { + contacts.value = contacts.value.filter(c => c.id !== id) + } +} + +// --- Inline edit kezelése --- +function startEdit(row, field) { + editing.value = { id: row.id, field } + editBuffer.value = { ...row } +} + +function isEditing(row, field) { + return editing.value.id === row.id && editing.value.field === field +} + +async function commitEdit() { + if (!editing.value.id) return + const { id, field } = editing.value + const value = editBuffer.value[field] + const data = await patchContact(id, { [field]: value }) + if (data.ok) { + // lokális frissítés + const idx = contacts.value.findIndex(c => c.id === id) + if (idx !== -1) contacts.value[idx][field] = value + } + editing.value = { id: null, field: null } +} + +function cancelEdit() { + editing.value = { id: null, field: null } +} + +// --- Alap (health + auth) --- async function checkHealth() { out.value = 'Hívás...' const res = await fetch(`${apiBase}/`) out.value = await res.json() - console.log(out.value) } async function authUser(u, p) { - out.value = 'Hívás...' const res = await fetch(`${apiBase}/auth`, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ authUname: u, authPw: p }) }) - out.value = await res.json() - console.log(out.value) - - if (out.value.ok == true) { + const data = await res.json() + if (data.ok === true) { pageStatus.value = "contacts" - userAdmin.value = out.value.admin + userAdmin.value = data.admin + await loadContacts() + loginErrorMsg.value = "Sikeres bejelentkezés" } else { - loginErrorMsg.value = "Hiba..." + loginErrorMsg.value = "Hibás felhasználónév vagy jelszó" } - } async function loginUser() { isLoading.value = true - console.log(`Authenticateing user ${userLoginName.value}`) - authUser(userLoginName.value, userLoginPw.value) + await authUser(userLoginName.value, userLoginPw.value) isLoading.value = false } -// async IIFE -(async () => { - out.value = "" - await checkHealth() - if (out.value.status == "ok") { - loginCheck.value = true - console.log("[API] ok") - } - else { - loginCheck.value = false - console.log("[API] not ok") - } +function logout() { + pageStatus.value = "logout" + contacts.value = [] + userAdmin.value = false + userLoginPw.value = "" + loginErrorMsg.value = "Bejelentkezés..." +} -})(); +// async IIFE +;(async () => { + await checkHealth() + loginCheck.value = out.value?.status === "ok" + console.log(loginCheck.value ? "[API] ok" : "[API] not ok") +})()