+
-
{{ menuSel }}
+
{{ menuSel }}
-
-
-
-
-
-
-
+
+
+
+
Kontaktok
+
+
+ Töltés…
+
+
+
+
+
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")
+})()