247 lines
13 KiB
HTML
Executable File
247 lines
13 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; }
|
|
.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; }
|
|
/* Ha hiba van, a csík piros legyen */
|
|
.card-top-strip.danger { background: #dc3545; }
|
|
|
|
.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; }
|
|
|
|
/* Detail View */
|
|
.detail-header { background: white; border-radius: 15px; padding: 25px; margin-bottom: 20px; box-shadow: 0 2px 10px rgba(0,0,0,0.03); }
|
|
.stat-box { background: #f8f9fa; border-radius: 10px; padding: 15px; text-align: center; height: 100%; transition: 0.3s; }
|
|
.stat-value { font-size: 1.5rem; font-weight: bold; color: #212529; }
|
|
.stat-label { font-size: 0.85rem; color: #6c757d; text-transform: uppercase; }
|
|
|
|
/* Tabs */
|
|
.detail-tabs .nav-link { border: none; color: #6c757d; font-weight: 600; padding-bottom: 15px; border-bottom: 3px solid transparent; }
|
|
.detail-tabs .nav-link.active { color: #0d6efd; border-bottom-color: #0d6efd; background: none; }
|
|
.tab-content-area { background: white; border-radius: 0 0 15px 15px; padding: 30px; box-shadow: 0 5px 15px rgba(0,0,0,0.03); margin-top: -1px; }
|
|
|
|
/* Modals */
|
|
.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">
|
|
|
|
<div v-if="view === 'dashboard'">
|
|
<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="view = 'wizard'"><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" @click="openVehicleDetail(car)">
|
|
<div class="card-top-strip" :class="{ 'danger': car.has_issues }"></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 v-if="car.has_issues" class="bi bi-exclamation-triangle-fill text-danger fs-2"></i>
|
|
<i v-else 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 border" :class="car.has_issues ? 'bg-danger text-white' : 'bg-light text-dark'">
|
|
{{ car.has_issues ? 'HIBA' : translateRole(car.role) }}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div v-if="activeTab === 'team'">
|
|
<h3>Csapat nézet (változatlan)</h3>
|
|
<button class="btn btn-secondary btn-sm" @click="activeTab='garage'">Vissza</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div v-if="view === 'detail' && selectedCar">
|
|
|
|
<button class="btn btn-outline-secondary mb-3 ps-3 pe-3 rounded-pill" @click="view = 'dashboard'">
|
|
<i class="bi bi-arrow-left me-2"></i>Garázs
|
|
</button>
|
|
|
|
<div class="detail-header d-flex justify-content-between align-items-center flex-wrap gap-3">
|
|
<div class="d-flex align-items-center">
|
|
<div class="text-white rounded-circle d-flex align-items-center justify-content-center me-3"
|
|
:class="selectedCar.has_issues ? 'bg-danger' : 'bg-primary'"
|
|
style="width: 60px; height: 60px;">
|
|
<i class="bi" :class="selectedCar.has_issues ? 'bi-exclamation-triangle' : 'bi-car-front'" style="font-size: 1.8rem;"></i>
|
|
</div>
|
|
<div>
|
|
<h2 class="fw-bold mb-0">{{ selectedCar.brand }} {{ selectedCar.model }}</h2>
|
|
<div class="d-flex align-items-center mt-1 gap-2">
|
|
<span class="plate-badge fs-6">{{ selectedCar.plate }}</span>
|
|
<span v-if="selectedCar.has_issues" class="badge bg-danger">HIBA JELENTVE</span>
|
|
<span v-else class="badge bg-success">ÁLLAPOT: OK</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="text-end">
|
|
<button class="btn btn-outline-danger me-2" @click="openErrorModal">
|
|
<i class="bi bi-exclamation-circle-fill me-1"></i> Hiba jelentése
|
|
</button>
|
|
<button class="btn btn-success"><i class="bi bi-plus-lg"></i> Költség</button>
|
|
</div>
|
|
</div>
|
|
|
|
<ul class="nav nav-tabs detail-tabs mb-0">
|
|
<li class="nav-item"><a class="nav-link active" href="#">Áttekintés</a></li>
|
|
<li class="nav-item"><a class="nav-link" href="#">Szervizkönyv</a></li>
|
|
</ul>
|
|
|
|
<div class="tab-content-area">
|
|
<div class="row g-4">
|
|
<div class="col-md-3">
|
|
<div class="stat-box">
|
|
<div class="stat-value text-primary">{{ selectedCar.mileage ? selectedCar.mileage.toLocaleString() : 0 }} km</div>
|
|
<div class="stat-label">Aktuális óraállás</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-3">
|
|
<div class="stat-box" :style="selectedCar.has_issues ? 'background: #f8d7da; color: #721c24;' : 'background: #d1e7dd; color: #0f5132;'">
|
|
<div class="stat-value">
|
|
<i :class="selectedCar.has_issues ? 'bi bi-x-circle' : 'bi bi-check-circle'"></i>
|
|
{{ selectedCar.has_issues ? 'HIBA' : 'OK' }}
|
|
</div>
|
|
<div class="stat-label">Műszaki állapot</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div v-if="selectedCar.has_issues" class="alert alert-danger h-100">
|
|
<h6 class="fw-bold"><i class="bi bi-exclamation-triangle me-2"></i>Nyitott probléma:</h6>
|
|
<p class="mb-0">{{ selectedCar.last_issue_text }}</p>
|
|
<div class="mt-2 text-end">
|
|
<button class="btn btn-sm btn-outline-danger bg-white" @click="resolveIssue">Megjavítva (Lezárás)</button>
|
|
</div>
|
|
</div>
|
|
<div v-else class="alert alert-light border h-100 d-flex align-items-center justify-content-center text-muted">
|
|
Nincs nyitott hiba. Az autó útra kész.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div v-if="showErrorModal" class="modal-backdrop-custom">
|
|
<div class="modal-content-custom bg-danger bg-opacity-10 border border-danger">
|
|
<h4 class="fw-bold text-danger mb-3"><i class="bi bi-exclamation-triangle-fill me-2"></i>Hiba bejelentése</h4>
|
|
<p class="small text-muted">A hiba rögzítése azonnal értesíti a flotta menedzsert.</p>
|
|
|
|
<div class="mb-3">
|
|
<label class="form-label fw-bold">Mi a probléma?</label>
|
|
<textarea class="form-control" rows="3" v-model="errorForm.description" placeholder="pl. Kigyulladt a motor lámpa, jobb első defekt..."></textarea>
|
|
</div>
|
|
|
|
<div class="form-check mb-4">
|
|
<input class="form-check-input" type="checkbox" id="criticalCheck">
|
|
<label class="form-check-label" for="criticalCheck">Az autó mozgásképtelen</label>
|
|
</div>
|
|
|
|
<div class="d-flex justify-content-end gap-2">
|
|
<button class="btn btn-light" @click="showErrorModal = false">Mégse</button>
|
|
<button class="btn btn-danger" :disabled="!errorForm.description" @click="submitError">Bejelentés</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
|
|
<script>
|
|
const { createApp } = Vue
|
|
|
|
createApp({
|
|
data() {
|
|
return {
|
|
view: 'dashboard',
|
|
activeTab: 'garage',
|
|
showErrorModal: false,
|
|
|
|
errorForm: { description: '' },
|
|
|
|
myCars: [],
|
|
selectedCar: null
|
|
}
|
|
},
|
|
methods: {
|
|
translateRole(role) { return role === 'OWNER' ? 'Tulajdonos' : 'Sofőr'; },
|
|
|
|
async fetchData() {
|
|
const res = await fetch('/api/my_vehicles');
|
|
const data = await res.json();
|
|
// Hozzáadunk egy kliens oldali flag-et a demóhoz (has_issues)
|
|
this.myCars = data.map(c => ({...c, has_issues: false, last_issue_text: ''}));
|
|
},
|
|
|
|
async openVehicleDetail(car) {
|
|
// Itt most a lista objektumot használjuk közvetlenül a demó kedvéért
|
|
// A valóságban itt kérnénk le az API-t
|
|
this.selectedCar = car;
|
|
this.view = 'detail';
|
|
},
|
|
|
|
// --- HIBAKEZELÉS LOGIKA (DEMO) ---
|
|
openErrorModal() {
|
|
this.errorForm.description = '';
|
|
this.showErrorModal = true;
|
|
},
|
|
submitError() {
|
|
// 1. Beállítjuk a hibát a kiválasztott autón
|
|
this.selectedCar.has_issues = true;
|
|
this.selectedCar.last_issue_text = this.errorForm.description;
|
|
|
|
// 2. Bezárjuk a modalt
|
|
this.showErrorModal = false;
|
|
alert("Hiba sikeresen rögzítve! A státusz megváltozott.");
|
|
},
|
|
resolveIssue() {
|
|
if(confirm("Biztosan lezárod a hibát? (Megjavítva)")) {
|
|
this.selectedCar.has_issues = false;
|
|
this.selectedCar.last_issue_text = '';
|
|
}
|
|
}
|
|
},
|
|
mounted() {
|
|
this.fetchData();
|
|
}
|
|
}).mount('#app')
|
|
</script>
|
|
</body>
|
|
</html> |