Base Frontend

This commit is contained in:
2025-10-13 01:20:15 +02:00
parent 74d7f60dfc
commit ea043234a3
14 changed files with 3027 additions and 0 deletions

5
.dockerignore Normal file
View File

@@ -0,0 +1,5 @@
node_modules
npm-debug.log
Dockerfile
docker-compose.yml
.env

2
.env Normal file
View File

@@ -0,0 +1,2 @@
VITE_BACKEND_API_HOST=http://localhost
VITE_BACKEND_API_PORT=3000

139
.gitignore vendored
View File

@@ -9,3 +9,142 @@ docs/_book
# TODO: where does this rule come from? # TODO: where does this rule come from?
test/ test/
# ---> Node
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
lerna-debug.log*
.pnpm-debug.log*
# Diagnostic reports (https://nodejs.org/api/report.html)
report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
# Runtime data
pids
*.pid
*.seed
*.pid.lock
# Directory for instrumented libs generated by jscoverage/JSCover
lib-cov
# Coverage directory used by tools like istanbul
coverage
*.lcov
# nyc test coverage
.nyc_output
# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
.grunt
# Bower dependency directory (https://bower.io/)
bower_components
# node-waf configuration
.lock-wscript
# Compiled binary addons (https://nodejs.org/api/addons.html)
build/Release
# Dependency directories
node_modules/
jspm_packages/
# Snowpack dependency directory (https://snowpack.dev/)
web_modules/
# TypeScript cache
*.tsbuildinfo
# Optional npm cache directory
.npm
# Optional eslint cache
.eslintcache
# Optional stylelint cache
.stylelintcache
# Microbundle cache
.rpt2_cache/
.rts2_cache_cjs/
.rts2_cache_es/
.rts2_cache_umd/
# Optional REPL history
.node_repl_history
# Output of 'npm pack'
*.tgz
# Yarn Integrity file
.yarn-integrity
# dotenv environment variable files
# EZ KELL MOST
# .env
# .env.development.local
# .env.test.local
# .env.production.local
# .env.local
# parcel-bundler cache (https://parceljs.org/)
.cache
.parcel-cache
# Next.js build output
.next
out
# Nuxt.js build / generate output
.nuxt
dist
# Gatsby files
.cache/
# Comment in the public line in if your project uses Gatsby and not Next.js
# https://nextjs.org/blog/next-9-1#public-directory-support
# public
# vuepress build output
.vuepress/dist
# vuepress v2.x temp and cache directory
.temp
.cache
# vitepress build output
**/.vitepress/dist
# vitepress cache directory
**/.vitepress/cache
# Docusaurus cache and generated files
.docusaurus
# Serverless directories
.serverless/
# FuseBox cache
.fusebox/
# DynamoDB Local files
.dynamodb/
# TernJS port file
.tern-port
# Stores VSCode versions used for testing VSCode extensions
.vscode-test
# yarn v2
.yarn/cache
.yarn/unplugged
.yarn/build-state.yml
.yarn/install-state.gz
.pnp.*

11
Dockerfile Normal file
View File

@@ -0,0 +1,11 @@
FROM node:20-alpine
WORKDIR /usr/src/app
COPY package*.json ./
RUN npm install
EXPOSE 5173
# A futtatási parancsot a compose adja

22
docker-compose.yml Normal file
View File

@@ -0,0 +1,22 @@
services:
frontend:
build: .
container_name: telefonkonyv-frontend
restart: always
env_file: .env
environment:
- CHOKIDAR_USEPOLLING=true
- BACKEND_API_HOST=${BACKEND_API_HOST}
- BACKEND_API_PORT=${BACKEND_API_PORT}
ports:
- "${FRONTEND_PORT:-5173}:5173"
volumes:
- ./:/usr/src/app
- ./node_modules:/usr/src/app/node_modules
command: sh -c "npm install && npm run dev"
networks:
- telefonkonyv-net
networks:
telefonkonyv-net:
name: telefonkonyv-net

12
index.html Normal file
View File

@@ -0,0 +1,12 @@
<!doctype html>
<html lang="hu">
<head>
<meta charset="UTF-8" />
<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>
<script type="module" src="/src/main.js"></script>
</body>
</html>

2727
package-lock.json generated Normal file

File diff suppressed because it is too large Load Diff

21
package.json Normal file
View File

@@ -0,0 +1,21 @@
{
"name": "telefonkonyv-frontend",
"version": "1.0.0",
"private": true,
"type": "module",
"scripts": {
"dev": "vite --host 0.0.0.0 --port 5173 --strictPort",
"build": "vite build",
"preview": "vite preview --host 0.0.0.0 --port 5173"
},
"dependencies": {
"vue": "^3.4.38"
},
"devDependencies": {
"@vitejs/plugin-vue": "^5.0.4",
"autoprefixer": "^10.4.20",
"postcss": "^8.4.47",
"tailwindcss": "^3.4.10",
"vite": "^5.4.8"
}
}

6
postcss.config.js Normal file
View File

@@ -0,0 +1,6 @@
export default {
plugins: {
tailwindcss: {},
autoprefixer: {}
}
}

52
src/App.vue Normal file
View File

@@ -0,0 +1,52 @@
<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>
</div>
</section>
</main>
</template>
<script setup>
import { ref } from 'vue'
const apiBase = `${import.meta.env.VITE_BACKEND_API_HOST}:${import.meta.env.VITE_BACKEND_API_PORT}`
const out = ref('')
async function checkHealth() {
out.value = 'Hívás...'
const res = await fetch(`${apiBase}/`)
out.value = JSON.stringify(await res.json(), null, 2)
}
async function authTest() {
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' })
})
out.value = JSON.stringify(await res.json(), null, 2)
}
</script>

3
src/index.css Normal file
View File

@@ -0,0 +1,3 @@
@tailwind base;
@tailwind components;
@tailwind utilities;

5
src/main.js Normal file
View File

@@ -0,0 +1,5 @@
import { createApp } from 'vue'
import App from './App.vue'
import './index.css'
createApp(App).mount('#app')

11
tailwind.config.js Normal file
View File

@@ -0,0 +1,11 @@
/** @type {import('tailwindcss').Config} */
export default {
content: [
'./index.html',
'./src/**/*.{vue,js,ts,jsx,tsx}'
],
theme: {
extend: {}
},
plugins: []
}

11
vite.config.js Normal file
View File

@@ -0,0 +1,11 @@
import { defineConfig, loadEnv } from 'vite'
import vue from '@vitejs/plugin-vue'
export default defineConfig({
plugins: [vue()],
server: {
host: '0.0.0.0',
port: 5173,
strictPort: true
}
})