Szakdolgozat/Frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Frontend update

Browse Source 
Változtatások, haladás a végleges UI fele
This commit is contained in:
zomborip
2025-10-19 09:53:21 +02:00
parent ea043234a3
commit b09dff6b4c
2 changed files with 126 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
index.html
View File

@@ -2,11 +2,14 @@
<html lang="hu">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- <meta name="viewport" content="width=device-width, initial-scale=1.0" /> -->
<title>Telefonkönyv</title>
</head>
<body class="bg-gray-50 text-gray-900">
<div id="app"></div>
<body class="flex flex-col overflow-x-hidden w-full">
<div id="app" class="flex flex-col w-full h-screen"></div>
<div class="felx flex-row bg-neutral-600 text-white">
<div class="flex w-fit justify-self-center">© Zombori Péter - 2025</div>
</div>
<script type="module" src="/src/main.js"></script>
</body>
</html>

150
src/App.vue
View File

@@ -1,31 +1,77 @@
<template>
<main class="min-h-screen p-6">
<h1 class="text-3xl font-bold mb-4">Telefonkönyv – Frontend</h1>
<section class="space-y-3">
<div class="p-4 rounded-2xl border bg-white shadow-sm">
<div class="text-sm opacity-70 mb-2">
API prefix: <code>{{ apiBase }}</code>
</div>
<button
class="px-4 py-2 rounded-xl border shadow hover:bg-gray-100"
@click="checkHealth"
>
/ (health) hívása
</button>
<button
class="ml-2 px-4 py-2 rounded-xl border shadow hover:bg-gray-100"
@click="authTest"
>
/auth (admin,admin) hívása
</button>
<pre class="mt-3 p-3 bg-gray-100 rounded-xl text-sm overflow-auto">{{ out }}</pre>
<!-- Login oldal rész -->
<div v-if="pageStatus=='logout'" class="flex flex-col w-full h-full">
<div class="flex flex-row-reverse font-serif p-2">
<div class="flex">API Status:
<svg v-if="loginCheck" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="flex size-6 ml-2 fill-green-500">
<path fill-rule="evenodd" d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12Zm13.36-1.814a.75.75 0 1 0-1.22-.872l-3.236 4.53L9.53 12.22a.75.75 0 0 0-1.06 1.06l2.25 2.25a.75.75 0 0 0 1.14-.094l3.75-5.25Z" clip-rule="evenodd" />
</svg>
<svg v-else xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="flex size-6 ml-2 fill-red-500">
<path fill-rule="evenodd" d="M9.401 3.003c1.155-2 4.043-2 5.197 0l7.355 12.748c1.154 2-.29 4.5-2.599 4.5H4.645c-2.309 0-3.752-2.5-2.598-4.5L9.4 3.003ZM12 8.25a.75.75 0 0 1 .75.75v3.75a.75.75 0 0 1-1.5 0V9a.75.75 0 0 1 .75-.75Zm0 8.25a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Z" clip-rule="evenodd" />
</svg>
</div>
</section>
</main>
<div class="flex mr-5">API Info: {{ apiBase }} </div>
</div>
<div class="flex w-full h-full justify-center items-center">
<div class="flex flex-col w-1/4 h-max bg-stone-300 p-4 rounded-xl">
<div class="flex flex-row font-serif text-2xl">{{loginErrorMsg}}</div>
<hr class="flex border-2 border-black mb-5">
<input v-model="userLoginName" type="text" class="flex p-2 mb-1 font-serif" placeholder="Felhasználónév">
<input v-model="userLoginPw" type="password" class="flex p-2 font-serif" :class="{hidden: isLoading}" placeholder="Jelszó">
<div class="flex flex-row-reverse w-full h-max" >
<input @click="loginUser" type="submit" value="Login" class="flex bg-neutral-500 text-white mt-5 px-3 py-1 rounded-xl w-min"></input>
</div>
</div>
</div>
</div>
<!-- Dashboard oldal nézet -->
<div v-else-if="pageStatus=='contacts'" class="flex flex-row w-full h-full bg-red-300">
<!-- Menü -->
<div class="flex flex-col w-1/6 h-full bg-neutral-400 py-10 px-3 space-y-3">
<!-- Menü Item -->
<div class="flex flex-row h-fit w-full border-dashed border-2 border-neutral-300 p-1 rounded-lg justify-between">
<div class="flex h-min w-fit ">Telefonkönyv</div>
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="flex size-6">
<path stroke-linecap="round" stroke-linejoin="round" d="M14.25 9.75v-4.5m0 4.5h4.5m-4.5 0 6-6m-3 18c-8.284 0-15-6.716-15-15V4.5A2.25 2.25 0 0 1 4.5 2.25h1.372c.516 0 .966.351 1.091.852l1.106 4.423c.11.44-.054.902-.417 1.173l-1.293.97a1.062 1.062 0 0 0-.38 1.21 12.035 12.035 0 0 0 7.143 7.143c.441.162.928-.004 1.21-.38l.97-1.293a1.125 1.125 0 0 1 1.173-.417l4.423 1.106c.5.125.852.575.852 1.091V19.5a2.25 2.25 0 0 1-2.25 2.25h-2.25Z" />
</svg>
</div>
<!-- Menü Item -->
<div class="flex flex-row h-fit w-full border-dashed border-2 border-neutral-300 p-1 rounded-lg justify-between">
<div class="flex h-min w-fit ">Admin</div>
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="flex size-6">
<path stroke-linecap="round" stroke-linejoin="round" d="M15.75 5.25a3 3 0 0 1 3 3m3 0a6 6 0 0 1-7.029 5.912c-.563-.097-1.159.026-1.563.43L10.5 17.25H8.25v2.25H6v2.25H2.25v-2.818c0-.597.237-1.17.659-1.591l6.499-6.499c.404-.404.527-1 .43-1.563A6 6 0 1 1 21.75 8.25Z" />
</svg>
</div>
<!-- Menü Item -->
<div class="flex flex-row h-fit w-full border-dashed border-2 border-neutral-300 p-1 rounded-lg justify-between">
<div class="flex h-min w-fit ">Kijelentkezés</div>
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="flex size-6">
<path stroke-linecap="round" stroke-linejoin="round" d="M5.636 5.636a9 9 0 1 0 12.728 0M12 3v9" />
</svg>
</div>
</div>
<!-- Oldal -->
<div class="flex flex-col w-full h-full bg-neutral-200">
<div class="flex px-20 pt-10 pb-5 font-[tahoma] text-5xl "> {{ menuSel }} </div>
<hr class="flex border-2 border-black ml-20 mb-6">
<!-- Contents -->
<div class="flex flex-col bg-neutral-50 mx-20 py-5 px-2 h-full">
asd
</div>
</div>
</div>
</template>
<script setup>
@@ -33,20 +79,64 @@ import { ref } from 'vue'
const apiBase = `${import.meta.env.VITE_BACKEND_API_HOST}:${import.meta.env.VITE_BACKEND_API_PORT}`
const out = ref('')
const pageStatus = ref("logout")
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
async function checkHealth() {
out.value = 'Hívás...'
const res = await fetch(`${apiBase}/`)
out.value = JSON.stringify(await res.json(), null, 2)
out.value = await res.json()
console.log(out.value)
}
async function authTest() {
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: 'admin', authPw: 'admin' })
body: JSON.stringify({ authUname: u, authPw: p })
})
out.value = JSON.stringify(await res.json(), null, 2)
out.value = await res.json()
console.log(out.value)
if (out.value.ok == true) {
pageStatus.value = "contacts"
userAdmin.value = out.value.admin
} else {
loginErrorMsg.value = "Hiba..."
}
}
async function loginUser() {
isLoading.value = true
console.log(`Authenticateing user ${userLoginName.value}`)
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")
}
})();
</script>