296 lines
18 KiB
HTML
Executable File
296 lines
18 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; }
|
|
|
|
.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; }
|
|
.card-top-strip.danger { background: #dc3545; }
|
|
|
|
.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-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; }
|
|
.tab-content-area { background: white; border-radius: 15px; padding: 30px; box-shadow: 0 5px 15px rgba(0,0,0,0.03); }
|
|
|
|
/* Timeline / History List */
|
|
.history-item { border-left: 3px solid #e9ecef; padding-left: 20px; padding-bottom: 20px; position: relative; }
|
|
.history-item:last-child { border-left: none; }
|
|
.history-icon { position: absolute; left: -11px; top: 0; width: 20px; height: 20px; background: white; border-radius: 50%; border: 2px solid #0d6efd; }
|
|
.history-icon.SERVICE { border-color: #fd7e14; background: #fd7e14; }
|
|
.history-icon.FUEL { border-color: #198754; background: #198754; }
|
|
.history-icon.ISSUE_REPORT { border-color: #dc3545; background: #dc3545; }
|
|
.history-icon.ISSUE_RESOLVED { border-color: #0d6efd; background: #0d6efd; }
|
|
|
|
.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); }
|
|
</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>
|
|
</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 active" href="#">Garázs</a></li>
|
|
</ul>
|
|
<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.vehicle_id)">
|
|
<div class="card-top-strip" :class="{ 'danger': car.status !== 'OK' && car.status !== null }"></div>
|
|
<div class="d-flex justify-content-between align-items-start mb-2">
|
|
<div><h5 class="fw-bold mb-0">{{ car.brand }}</h5><div class="text-muted small">{{ car.model }}</div></div>
|
|
<i v-if="car.status !== 'OK' && car.status !== null" class="bi bi-exclamation-triangle-fill text-danger fs-2"></i>
|
|
<i v-else class="bi bi-car-front fs-2 text-secondary"></i>
|
|
</div>
|
|
<div class="mt-2 d-flex justify-content-between align-items-end">
|
|
<div class="plate-badge">{{ car.plate }}</div>
|
|
<span class="badge" :class="(car.status !== 'OK' && car.status !== null) ? 'bg-danger' : 'bg-light text-dark border'">
|
|
{{ (car.status !== 'OK' && car.status !== null) ? 'HIBA' : car.role }}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div v-if="view === 'detail' && selectedCar">
|
|
<button class="btn btn-outline-secondary mb-3 rounded-pill" @click="view = 'dashboard'; fetchData()"><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.status !== 'OK' && selectedCar.status !== null) ? 'bg-danger' : 'bg-primary'" style="width: 60px; height: 60px;">
|
|
<i class="bi" :class="(selectedCar.status !== 'OK' && selectedCar.status !== null) ? '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.status !== 'OK' && selectedCar.status !== null" class="badge bg-danger">ÁLLAPOT: {{ selectedCar.status }}</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> Jelentés</button>
|
|
<button class="btn btn-success" @click="openCostModal"><i class="bi bi-plus-lg me-1"></i> Költség / Szerviz</button>
|
|
</div>
|
|
</div>
|
|
|
|
<ul class="nav nav-tabs detail-tabs mb-3">
|
|
<li class="nav-item"><a class="nav-link" :class="{active: detailTab==='overview'}" href="#" @click="detailTab='overview'">Áttekintés</a></li>
|
|
<li class="nav-item"><a class="nav-link" :class="{active: detailTab==='history'}" href="#" @click="loadHistory()">Szervizkönyv</a></li>
|
|
</ul>
|
|
|
|
<div class="tab-content-area">
|
|
<div v-if="detailTab === 'overview'">
|
|
<div class="row g-4">
|
|
<div class="col-md-3"><div class="stat-box"><div class="stat-value">{{ selectedCar.mileage.toLocaleString() }}</div><div class="stat-label">Km</div></div></div>
|
|
<div class="col-md-3">
|
|
<div class="stat-box" :style="(selectedCar.status !== 'OK' && selectedCar.status !== null) ? 'background: #f8d7da; color: #721c24;' : 'background: #d1e7dd; color: #0f5132;'">
|
|
<div class="stat-value"><i :class="(selectedCar.status !== 'OK' && selectedCar.status !== null) ? 'bi bi-x-circle' : 'bi bi-check-circle'"></i> {{ (selectedCar.status !== 'OK' && selectedCar.status !== null) ? 'HIBA' : 'OK' }}</div><div class="stat-label">Állapot</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div v-if="selectedCar.status !== 'OK' && selectedCar.status !== null" class="alert alert-danger h-100 shadow-sm border-danger">
|
|
<div class="d-flex justify-content-between">
|
|
<div><h6 class="fw-bold text-danger">Hiba:</h6><p class="mb-2">{{ selectedCar.current_issue }}</p></div>
|
|
<button class="btn btn-sm btn-danger" @click="resolveIssue">Megjavítva</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.</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div v-if="detailTab === 'history'">
|
|
<div v-if="history.length === 0" class="text-center py-5 text-muted">
|
|
<i class="bi bi-journal-album display-4 mb-3 d-block opacity-25"></i>
|
|
Még üres a szervizkönyv. Rögzíts tankolást vagy eseményt!
|
|
</div>
|
|
<div v-else class="ps-3 pt-2">
|
|
<div v-for="item in history" :key="item.date + item.type" class="history-item">
|
|
<div class="history-icon" :class="item.type"></div>
|
|
<div class="d-flex justify-content-between align-items-start">
|
|
<div>
|
|
<h6 class="fw-bold mb-1">
|
|
{{ translateType(item.type) }}
|
|
<span v-if="item.amount" class="text-success ms-2">+{{ formatMoney(item.amount, item.currency) }}</span>
|
|
</h6>
|
|
<p class="text-muted small mb-0">{{ item.description }}</p>
|
|
<small class="text-muted" v-if="item.mileage > 0"><i class="bi bi-speedometer2 me-1"></i>{{ item.mileage.toLocaleString() }} km</small>
|
|
</div>
|
|
<div class="text-end">
|
|
<span class="badge bg-light text-dark border">{{ item.date }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div v-if="showCostModal" class="modal-backdrop-custom">
|
|
<div class="modal-content-custom">
|
|
<h4 class="fw-bold mb-4">Költség / Esemény</h4>
|
|
<div class="row g-3">
|
|
<div class="col-12">
|
|
<label class="form-label fw-bold">Típus</label>
|
|
<select class="form-select" v-model="costForm.type">
|
|
<option value="FUEL">⛽ Tankolás</option>
|
|
<option value="SERVICE">🔧 Szerviz / Javítás</option>
|
|
<option value="INSURANCE">📄 Biztosítás</option>
|
|
<option value="TAX">🏛️ Adó / Illeték</option>
|
|
<option value="OTHER">Egyéb</option>
|
|
</select>
|
|
</div>
|
|
<div class="col-7">
|
|
<label class="form-label fw-bold">Összeg</label>
|
|
<input type="number" class="form-control" v-model="costForm.amount">
|
|
</div>
|
|
<div class="col-5">
|
|
<label class="form-label fw-bold">Pénznem</label>
|
|
<select class="form-select" v-model="costForm.currency">
|
|
<option value="HUF">HUF</option>
|
|
<option value="EUR">EUR</option>
|
|
</select>
|
|
</div>
|
|
<div class="col-6">
|
|
<label class="form-label fw-bold">Km óraállás</label>
|
|
<input type="number" class="form-control" v-model="costForm.mileage">
|
|
</div>
|
|
<div class="col-6">
|
|
<label class="form-label fw-bold">Dátum</label>
|
|
<input type="date" class="form-control" v-model="costForm.date">
|
|
</div>
|
|
<div class="col-12">
|
|
<label class="form-label">Leírás / Megjegyzés</label>
|
|
<textarea class="form-control" rows="2" v-model="costForm.description"></textarea>
|
|
</div>
|
|
</div>
|
|
<div class="d-flex justify-content-end gap-2 mt-4">
|
|
<button class="btn btn-light" @click="showCostModal = false">Mégse</button>
|
|
<button class="btn btn-success" @click="submitCost">Mentés</button>
|
|
</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">Hiba bejelentése</h4>
|
|
<textarea class="form-control my-3" rows="3" v-model="errorForm.description"></textarea>
|
|
<div class="form-check mb-3"><input class="form-check-input" type="checkbox" v-model="errorForm.is_critical"><label class="form-check-label">Kritikus</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" @click="submitError">Menté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', detailTab: 'overview',
|
|
showErrorModal: false, showCostModal: false,
|
|
myCars: [], selectedCar: null, history: [],
|
|
errorForm: {description: '', is_critical: false},
|
|
costForm: { type: 'FUEL', amount: 0, currency: 'HUF', mileage: 0, date: '', description: '' }
|
|
}},
|
|
methods: {
|
|
async fetchData() { const res = await fetch('/api/my_vehicles'); this.myCars = await res.json(); },
|
|
|
|
async openVehicleDetail(id) {
|
|
const res = await fetch('/api/vehicle/' + id);
|
|
this.selectedCar = await res.json();
|
|
this.view = 'detail';
|
|
this.detailTab = 'overview';
|
|
},
|
|
|
|
// --- KÖLTSÉG KEZELÉS ---
|
|
openCostModal() {
|
|
// Alapértékek beállítása
|
|
this.costForm = {
|
|
type: 'FUEL', amount: '', currency: this.selectedCar.currency || 'HUF',
|
|
mileage: this.selectedCar.mileage,
|
|
date: new Date().toISOString().split('T')[0],
|
|
description: ''
|
|
};
|
|
this.showCostModal = true;
|
|
},
|
|
async submitCost() {
|
|
try {
|
|
const res = await fetch('/api/add_cost', {
|
|
method: 'POST', headers: {'Content-Type': 'application/json'},
|
|
body: JSON.stringify({
|
|
vehicle_id: this.selectedCar.id,
|
|
cost_type: this.costForm.type,
|
|
amount: parseFloat(this.costForm.amount),
|
|
currency: this.costForm.currency,
|
|
mileage: parseInt(this.costForm.mileage),
|
|
date: this.costForm.date,
|
|
description: this.costForm.description
|
|
})
|
|
});
|
|
if (res.ok) {
|
|
alert("Költség rögzítve!");
|
|
this.showCostModal = false;
|
|
this.openVehicleDetail(this.selectedCar.id); // Frissítjük a fő adatokat (pl. km)
|
|
if(this.detailTab === 'history') this.loadHistory(); // Frissítjük a listát ha ott vagyunk
|
|
}
|
|
} catch(e) { alert("Hiba!"); }
|
|
},
|
|
async loadHistory() {
|
|
this.detailTab = 'history';
|
|
const res = await fetch('/api/vehicle/' + this.selectedCar.id + '/history');
|
|
this.history = await res.json();
|
|
},
|
|
|
|
// --- SEGÉDEK ---
|
|
formatMoney(amount, currency) {
|
|
try { return new Intl.NumberFormat('hu-HU', { style: 'currency', currency: currency }).format(amount); }
|
|
catch(e) { return amount + " " + currency; }
|
|
},
|
|
translateType(type) {
|
|
const map = {
|
|
'FUEL': 'Tankolás', 'SERVICE': 'Szerviz', 'INSURANCE': 'Biztosítás', 'TAX': 'Adó',
|
|
'ISSUE_REPORT': 'Hiba Bejelentés', 'ISSUE_RESOLVED': 'Hiba Javítva', 'MILEAGE_UPDATE': 'Km Korrekció'
|
|
};
|
|
return map[type] || type;
|
|
},
|
|
|
|
// --- HIBA KEZELÉS (Meglévő) ---
|
|
openErrorModal() { this.errorForm = {description: '', is_critical: false}; this.showErrorModal = true; },
|
|
async submitError() {
|
|
await fetch('/api/report_issue', { method: 'POST', headers: {'Content-Type': 'application/json'}, body: JSON.stringify({ vehicle_id: this.selectedCar.id, description: this.errorForm.description, is_critical: this.errorForm.is_critical }) });
|
|
this.showErrorModal = false; this.openVehicleDetail(this.selectedCar.id);
|
|
},
|
|
async resolveIssue() {
|
|
if(!confirm("Megjavítva?")) return;
|
|
await fetch('/api/resolve_issue', { method: 'POST', headers: {'Content-Type': 'application/json'}, body: JSON.stringify({ vehicle_id: this.selectedCar.id }) });
|
|
this.openVehicleDetail(this.selectedCar.id);
|
|
}
|
|
},
|
|
mounted() { this.fetchData(); }
|
|
}).mount('#app')
|
|
</script>
|
|
</body>
|
|
</html> |