233 lines
12 KiB
HTML
Executable File
233 lines
12 KiB
HTML
Executable File
<!DOCTYPE html>
|
|
<html lang="hu">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Service Finder</title>
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css">
|
|
<style>
|
|
body { background-color: #f0f2f5; font-family: 'Segoe UI', sans-serif; }
|
|
.main-container { max-width: 1000px; margin: 30px auto; }
|
|
|
|
/* Navigációs Fülek (Tabs) */
|
|
.nav-pills .nav-link { border-radius: 50px; padding: 10px 25px; font-weight: 600; color: #6c757d; margin-right: 10px; }
|
|
.nav-pills .nav-link.active { background-color: #0d6efd; color: white; }
|
|
|
|
/* Kártyák */
|
|
.garage-card { border: none; border-radius: 12px; background: white; box-shadow: 0 2px 8px rgba(0,0,0,0.04); transition: transform 0.2s; cursor: pointer; height: 100%; position: relative; overflow: hidden; }
|
|
.garage-card:hover { transform: translateY(-3px); box-shadow: 0 5px 15px rgba(0,0,0,0.1); }
|
|
.card-top-strip { height: 6px; background: #0d6efd; width: 100%; position: absolute; top: 0; left: 0; }
|
|
.car-icon { font-size: 2rem; color: #6c757d; }
|
|
.plate-badge { background: #ffcc00; color: black; border: 1px solid #e0b000; font-family: 'Courier New', monospace; font-weight: bold; padding: 2px 6px; font-size: 0.9rem; border-radius: 4px; }
|
|
|
|
/* Csapat táblázat */
|
|
.team-table th { font-weight: 600; text-transform: uppercase; font-size: 0.85rem; color: #adb5bd; }
|
|
.avatar-circle { width: 40px; height: 40px; background: #e9ecef; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: bold; color: #495057; }
|
|
|
|
/* Modal háttér */
|
|
.modal-backdrop-custom { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 1040; display: flex; align-items: center; justify-content: center; }
|
|
.modal-content-custom { background: white; padding: 30px; border-radius: 15px; width: 100%; max-width: 500px; box-shadow: 0 10px 30px rgba(0,0,0,0.2); animation: fadeIn 0.3s; }
|
|
@keyframes fadeIn { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: translateY(0); } }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<div id="app">
|
|
<nav class="navbar navbar-dark bg-primary mb-4 shadow-sm py-2">
|
|
<div class="container">
|
|
<span class="navbar-brand mb-0 h1 fs-5"><i class="bi bi-speedometer2 me-2"></i>Service Finder</span>
|
|
<div class="text-white small">
|
|
<i class="bi bi-building me-1"></i> Demo Company Kft.
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
<div class="container main-container">
|
|
|
|
<ul class="nav nav-pills mb-4">
|
|
<li class="nav-item">
|
|
<a class="nav-link" :class="{active: activeTab === 'garage'}" href="#" @click="activeTab = 'garage'">
|
|
<i class="bi bi-car-front-fill me-2"></i>Garázs
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" :class="{active: activeTab === 'team'}" href="#" @click="activeTab = 'team'">
|
|
<i class="bi bi-people-fill me-2"></i>Csapat
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
|
|
<div v-if="activeTab === 'garage'">
|
|
<div class="d-flex justify-content-between align-items-center mb-3">
|
|
<h4 class="fw-bold text-secondary mb-0">Járművek</h4>
|
|
<button class="btn btn-outline-primary btn-sm" @click="switchToWizard"><i class="bi bi-plus-lg"></i> Új rögzítése</button>
|
|
</div>
|
|
<div class="row g-3">
|
|
<div class="col-md-6 col-lg-4" v-for="car in myCars" :key="car.vehicle_id">
|
|
<div class="card garage-card p-3">
|
|
<div class="card-top-strip"></div>
|
|
<div class="d-flex justify-content-between align-items-start mb-2">
|
|
<div><h5 class="fw-bold mb-0 text-dark">{{ car.brand }}</h5><div class="text-muted small">{{ car.model }}</div></div>
|
|
<i class="bi bi-car-front car-icon"></i>
|
|
</div>
|
|
<div class="mt-2 d-flex justify-content-between align-items-end">
|
|
<div class="plate-badge">{{ car.plate }}</div>
|
|
<span class="badge bg-light text-dark border">{{ translateRole(car.role) }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div v-if="activeTab === 'team'">
|
|
<div class="d-flex justify-content-between align-items-center mb-3">
|
|
<h4 class="fw-bold text-secondary mb-0">Munkatársak</h4>
|
|
<button class="btn btn-primary btn-sm" @click="showInviteModal = true">
|
|
<i class="bi bi-person-plus-fill me-2"></i>Új meghívása
|
|
</button>
|
|
</div>
|
|
|
|
<div class="card border-0 shadow-sm rounded-4 overflow-hidden">
|
|
<div class="table-responsive">
|
|
<table class="table table-hover align-middle mb-0 team-table">
|
|
<thead class="bg-light">
|
|
<tr>
|
|
<th class="ps-4">Név / Email</th>
|
|
<th>Szerepkör</th>
|
|
<th>Ország</th>
|
|
<th>Csatlakozott</th>
|
|
<th class="text-end pe-4">Műveletek</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr v-for="member in team" :key="member.email">
|
|
<td class="ps-4">
|
|
<div class="d-flex align-items-center">
|
|
<div class="avatar-circle me-3">{{ member.email.charAt(0).toUpperCase() }}</div>
|
|
<div>
|
|
<div class="fw-bold text-dark">Munkatárs</div>
|
|
<div class="text-muted small">{{ member.email }}</div>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
<td><span class="badge bg-info text-dark">{{ translateRole(member.role) }}</span></td>
|
|
<td>{{ member.country }}</td>
|
|
<td>{{ member.joined_at ? member.joined_at.split('T')[0] : 'Ma' }}</td>
|
|
<td class="text-end pe-4">
|
|
<button class="btn btn-sm btn-light text-danger"><i class="bi bi-trash"></i></button>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<div v-if="team.length === 0" class="text-center p-5 text-muted">
|
|
<i class="bi bi-people display-4 mb-3 d-block opacity-25"></i>
|
|
Még nincs senki a csapatban. Hívj meg valakit!
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div v-if="showInviteModal" class="modal-backdrop-custom">
|
|
<div class="modal-content-custom">
|
|
<h4 class="fw-bold mb-4">Új munkatárs meghívása</h4>
|
|
|
|
<div class="mb-3">
|
|
<label class="form-label fw-bold">Email cím</label>
|
|
<input type="email" class="form-control" v-model="inviteForm.email" placeholder="pelda@email.hu">
|
|
</div>
|
|
|
|
<div class="mb-3">
|
|
<label class="form-label fw-bold">Szerepkör</label>
|
|
<select class="form-select" v-model="inviteForm.role">
|
|
<option value="DRIVER">Sofőr</option>
|
|
<option value="FLEET_MANAGER">Flotta Menedzser</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="mb-4" v-if="inviteForm.role === 'DRIVER'">
|
|
<label class="form-label fw-bold">Jogosultság Szint</label>
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="radio" value="FULL" v-model="inviteForm.access_level">
|
|
<label class="form-check-label">Teljes (Költségeket is lát)</label>
|
|
</div>
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="radio" value="LOG_ONLY" v-model="inviteForm.access_level">
|
|
<label class="form-check-label">Korlátozott (Csak rögzíthet)</label>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="d-flex justify-content-end gap-2">
|
|
<button class="btn btn-light" @click="showInviteModal = false">Mégse</button>
|
|
<button class="btn btn-primary" :disabled="!inviteForm.email" @click="sendInvite">
|
|
<i class="bi bi-send-fill me-2"></i>Meghívó küldése
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div v-if="activeTab === 'wizard'" class="wizard-card main-container">
|
|
<h3>Varázsló helye...</h3>
|
|
<button @click="activeTab = 'garage'">Bezár</button>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
|
|
<script>
|
|
const { createApp } = Vue
|
|
|
|
createApp({
|
|
data() {
|
|
return {
|
|
activeTab: 'garage',
|
|
showInviteModal: false,
|
|
myCars: [],
|
|
team: [],
|
|
inviteForm: { email: '', role: 'DRIVER', access_level: 'LOG_ONLY' }
|
|
}
|
|
},
|
|
methods: {
|
|
translateRole(role) {
|
|
const map = { 'OWNER': 'Tulajdonos', 'DRIVER': 'Sofőr', 'FLEET_MANAGER': 'Flotta Menedzser' };
|
|
return map[role] || role;
|
|
},
|
|
async fetchData() {
|
|
// 1. Garázs
|
|
const res1 = await fetch('/api/my_vehicles');
|
|
this.myCars = await res1.json();
|
|
|
|
// 2. Csapat
|
|
const res2 = await fetch('/api/fleet/members');
|
|
this.team = await res2.json();
|
|
},
|
|
async sendInvite() {
|
|
try {
|
|
const res = await fetch('/api/fleet/invite', {
|
|
method: 'POST',
|
|
headers: {'Content-Type': 'application/json'},
|
|
body: JSON.stringify(this.inviteForm)
|
|
});
|
|
const data = await res.json();
|
|
if(res.ok) {
|
|
alert("Siker! " + data.message);
|
|
this.showInviteModal = false;
|
|
this.inviteForm.email = ''; // Reset
|
|
} else {
|
|
alert("Hiba: " + data.detail);
|
|
}
|
|
} catch(e) { alert("Hiba történt!"); }
|
|
},
|
|
switchToWizard() {
|
|
// Itt majd vissza kell hozni a wizard logikát, most csak placeholder
|
|
alert("Itt nyílna meg a varázsló, ahogy eddig.");
|
|
}
|
|
},
|
|
mounted() {
|
|
this.fetchData();
|
|
}
|
|
}).mount('#app')
|
|
</script>
|
|
</body>
|
|
</html> |