Initial commit: Robot ökoszisztéma v2.0 - Stabilizált jármű és szerviz robotok
This commit is contained in:
192
code-server-config/data/User/History/-52e5c41d/0xVC.html
Executable file
192
code-server-config/data/User/History/-52e5c41d/0xVC.html
Executable file
@@ -0,0 +1,192 @@
|
||||
<!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; display: flex; flex-direction: column; justify-content: center; }
|
||||
.stat-value { font-size: 1.5rem; font-weight: bold; color: #212529; }
|
||||
.stat-label { font-size: 0.85rem; color: #6c757d; text-transform: uppercase; margin-top: 5px; }
|
||||
.tab-content-area { background: white; border-radius: 15px; padding: 30px; box-shadow: 0 5px 15px rgba(0,0,0,0.03); }
|
||||
|
||||
.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 #6c757d; }
|
||||
.history-icon.FUEL { border-color: #198754; background: #198754; }
|
||||
.history-icon.PURCHASE { border-color: #0d6efd; background: #0d6efd; }
|
||||
.history-icon.SERVICE { border-color: #fd7e14; background: #fd7e14; }
|
||||
.history-icon.INSURANCE { border-color: #6610f2; background: #6610f2; }
|
||||
.history-icon.TAX { border-color: #dc3545; background: #dc3545; }
|
||||
.history-icon.ISSUE_REPORT { border-color: #212529; background: #212529; }
|
||||
|
||||
.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</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-3">
|
||||
<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-3"><div class="stat-box"><div class="stat-value">{{ formatMoney(selectedCar.year_cost, selectedCar.currency) }}</div><div class="stat-label">Idei költés</div></div></div>
|
||||
<div class="col-md-3"><div v-if="selectedCar.status !== 'OK' && selectedCar.status !== null" class="alert alert-danger h-100 shadow-sm border-danger p-2 m-0 d-flex flex-column justify-content-center"><h6 class="fw-bold text-danger mb-1" style="font-size: 0.9rem">Hiba:</h6><p class="mb-2 text-dark small" style="line-height: 1.2">{{ selectedCar.current_issue }}</p><button class="btn btn-sm btn-danger w-100" @click="resolveIssue">Megjavítva</button></div><div v-else class="stat-box text-muted border bg-light"><div class="fs-4"><i class="bi bi-shield-check"></i></div><div class="stat-label">Nincs hiba</div></div></div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="detailTab === 'history'">
|
||||
<div v-if="history.length === 0" class="text-center py-5 text-muted">Még üres a szervizkönyv.</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.split('_')[0]"></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>
|
||||
<div class="d-flex align-items-center gap-2 text-muted small mt-1"><span v-if="item.mileage > 0"><i class="bi bi-speedometer2 me-1"></i>{{ item.mileage.toLocaleString() }} km</span><a v-if="item.document_url" :href="item.document_url" target="_blank" class="badge bg-primary text-decoration-none"><i class="bi bi-paperclip me-1"></i>Csatolmány</a></div>
|
||||
</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-6"><label class="form-label fw-bold small">Kategória</label><select class="form-select" v-model="costForm.mainCategory" @change="updateSubCategory"><option v-for="(val, key) in costDefinitions" :value="key">{{ val.label }}</option></select></div>
|
||||
<div class="col-6"><label class="form-label fw-bold small">Típus</label><select class="form-select" v-model="costForm.subCategory" :disabled="!currentSubOptions"><option v-for="(label, key) in currentSubOptions" :value="key">{{ label }}</option></select></div>
|
||||
<div class="col-7"><label class="form-label fw-bold small">Összeg</label><input type="number" class="form-control" v-model="costForm.amount"></div>
|
||||
<div class="col-5"><label class="form-label fw-bold small">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 small">Km állás</label><input type="number" class="form-control" v-model="costForm.mileage"></div>
|
||||
<div class="col-6"><label class="form-label fw-bold small">Dátum</label><input type="date" class="form-control" v-model="costForm.date"></div>
|
||||
<div class="col-12"><label class="form-label small">Megjegyzés</label><textarea class="form-control" rows="2" v-model="costForm.description"></textarea></div>
|
||||
<div class="col-12"><label class="form-label fw-bold small"><i class="bi bi-paperclip me-1"></i>Bizonylat</label><input type="file" class="form-control" ref="fileInput"></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</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: { mainCategory: 'FUEL', subCategory: '', amount: 0, currency: 'HUF', mileage: 0, date: '', description: '' },
|
||||
costDefinitions: {} // MOST MÁR ÜRES, AZ API TÖLTI KI!
|
||||
}},
|
||||
computed: {
|
||||
currentSubOptions() { return this.costDefinitions[this.costForm.mainCategory] ? this.costDefinitions[this.costForm.mainCategory].subs : null; }
|
||||
},
|
||||
methods: {
|
||||
async fetchRefData() {
|
||||
// ITT KÉRDEZZÜK LE AZ ADATBÁZISBÓL!
|
||||
const res = await fetch('/api/ref/cost_types');
|
||||
this.costDefinitions = await res.json();
|
||||
this.costForm.mainCategory = Object.keys(this.costDefinitions)[0]; // Az elsőt kijelöljük
|
||||
},
|
||||
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'; },
|
||||
|
||||
openCostModal() {
|
||||
this.costForm = { mainCategory: Object.keys(this.costDefinitions)[0], subCategory: '', amount: '', currency: this.selectedCar.currency || 'HUF', mileage: this.selectedCar.mileage, date: new Date().toISOString().split('T')[0], description: '' };
|
||||
this.updateSubCategory();
|
||||
this.showCostModal = true;
|
||||
},
|
||||
updateSubCategory() {
|
||||
const subs = this.costDefinitions[this.costForm.mainCategory].subs;
|
||||
this.costForm.subCategory = subs ? Object.keys(subs)[0] : '';
|
||||
},
|
||||
|
||||
async submitCost() {
|
||||
const finalType = this.costForm.subCategory || this.costForm.mainCategory;
|
||||
const formData = new FormData();
|
||||
formData.append('vehicle_id', this.selectedCar.id); formData.append('cost_type', finalType); formData.append('amount', this.costForm.amount); formData.append('currency', this.costForm.currency); formData.append('mileage', this.costForm.mileage); formData.append('date_str', this.costForm.date); formData.append('description', this.costForm.description);
|
||||
const fileInput = this.$refs.fileInput; if(fileInput.files.length > 0) formData.append('file', fileInput.files[0]);
|
||||
|
||||
try {
|
||||
const res = await fetch('/api/add_cost', { method: 'POST', body: formData });
|
||||
if (res.ok) { alert("Költség rögzítve!"); this.showCostModal = false; this.openVehicleDetail(this.selectedCar.id); if(this.detailTab === 'history') this.loadHistory(); } else { alert("Hiba: " + JSON.stringify(await res.json())); }
|
||||
} catch(e) { alert("Szerver hiba!"); }
|
||||
},
|
||||
async loadHistory() { this.detailTab = 'history'; const res = await fetch('/api/vehicle/' + this.selectedCar.id + '/history'); this.history = await res.json(); },
|
||||
formatMoney(amount, currency) { try { return new Intl.NumberFormat('hu-HU', { style: 'currency', currency: currency }).format(amount); } catch(e) { return amount + " " + currency; } },
|
||||
translateType(type) {
|
||||
if(!this.costDefinitions) return type;
|
||||
if (this.costDefinitions[type]) return this.costDefinitions[type].label;
|
||||
for (const main in this.costDefinitions) {
|
||||
if (this.costDefinitions[main].subs && this.costDefinitions[main].subs[type]) return this.costDefinitions[main].subs[type];
|
||||
}
|
||||
const map = { 'ISSUE_REPORT': 'Hiba Bejelentés', 'ISSUE_RESOLVED': 'Hiba Javítva', 'MILEAGE_UPDATE': 'Km Korrekció' };
|
||||
return map[type] || type;
|
||||
},
|
||||
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(); this.fetchRefData(); }
|
||||
}).mount('#app')
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
242
code-server-config/data/User/History/-52e5c41d/83UF.html
Executable file
242
code-server-config/data/User/History/-52e5c41d/83UF.html
Executable file
@@ -0,0 +1,242 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="hu">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Service Finder - Flotta Kezelő</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; }
|
||||
/* Auth Képernyő */
|
||||
.auth-wrapper { height: 100vh; display: flex; align-items: center; justify-content: center; }
|
||||
.auth-card { background: white; padding: 40px; border-radius: 20px; box-shadow: 0 10px 30px rgba(0,0,0,0.1); width: 100%; max-width: 400px; }
|
||||
|
||||
/* Alkalmazás stílusok */
|
||||
.main-container { max-width: 1000px; margin: 30px auto; }
|
||||
.garage-card { border: none; border-radius: 12px; background: white; box-shadow: 0 2px 8px rgba(0,0,0,0.04); cursor: pointer; transition: 0.2s; 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; border-radius: 4px; }
|
||||
.history-item { border-left: 3px solid #e9ecef; padding-left: 20px; padding-bottom: 20px; position: relative; }
|
||||
.history-icon { position: absolute; left: -11px; top: 0; width: 20px; height: 20px; border-radius: 50%; border: 2px solid white; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="app">
|
||||
<div v-if="!isLoggedIn" class="auth-wrapper">
|
||||
<div class="auth-card">
|
||||
<h2 class="fw-bold mb-4 text-center text-primary"><i class="bi bi-speedometer2"></i> Service Finder</h2>
|
||||
<div v-if="authView === 'login'">
|
||||
<input type="email" class="form-control mb-3" v-model="authForm.email" placeholder="Email">
|
||||
<input type="password" class="form-control mb-3" v-model="authForm.password" placeholder="Jelszó">
|
||||
<button class="btn btn-primary w-100 py-2" @click="login">Bejelentkezés</button>
|
||||
<p class="text-center mt-3 small">Nincs fiókod? <a href="#" @click="authView='register'">Regisztrálj!</a></p>
|
||||
</div>
|
||||
<div v-if="authView === 'register'">
|
||||
<input type="email" class="form-control mb-3" v-model="authForm.email" placeholder="Email">
|
||||
<input type="password" class="form-control mb-3" v-model="authForm.password" placeholder="Jelszó">
|
||||
<button class="btn btn-success w-100 py-2" @click="register">Regisztráció</button>
|
||||
<p class="text-center mt-3 small"><a href="#" @click="authView='login'">Vissza a belépéshez</a></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-else>
|
||||
<nav class="navbar navbar-dark bg-primary shadow-sm px-4 py-2">
|
||||
<div class="container">
|
||||
<span class="navbar-brand fw-bold"><i class="bi bi-speedometer2 me-2"></i>Service Finder</span>
|
||||
<div class="d-flex align-items-center">
|
||||
<span class="text-white me-3 small">{{ userEmail }}</span>
|
||||
<button class="btn btn-outline-light btn-sm" @click="logout"><i class="bi bi-box-arrow-right"></i></button>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<div class="container main-container">
|
||||
<div v-if="view === 'dashboard'">
|
||||
<div class="d-flex justify-content-between mb-4">
|
||||
<h4 class="fw-bold">Saját Járművek</h4>
|
||||
<button class="btn btn-primary btn-sm"><i class="bi bi-plus-lg"></i> Új jármű</button>
|
||||
</div>
|
||||
<div class="row g-3">
|
||||
<div class="col-md-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'}"></div>
|
||||
<h5 class="fw-bold mb-0">{{ car.brand }}</h5>
|
||||
<div class="text-muted small mb-2">{{ car.model }}</div>
|
||||
<div class="d-flex justify-content-between align-items-center">
|
||||
<span class="plate-badge">{{ car.plate }}</span>
|
||||
<i v-if="car.status !== 'OK'" class="bi bi-exclamation-triangle text-danger"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="view === 'detail' && selectedCar">
|
||||
<button class="btn btn-link text-decoration-none ps-0 mb-3" @click="view='dashboard'"><i class="bi bi-arrow-left"></i> Vissza a listához</button>
|
||||
<div class="detail-header shadow-sm border">
|
||||
<div class="d-flex justify-content-between align-items-center">
|
||||
<div>
|
||||
<h2 class="fw-bold mb-1">{{ selectedCar.brand }} {{ selectedCar.model }}</h2>
|
||||
<span class="plate-badge fs-6">{{ selectedCar.plate }}</span>
|
||||
</div>
|
||||
<div class="text-end">
|
||||
<button class="btn btn-success" @click="openCostModal"><i class="bi bi-plus-lg"></i> Költség</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="tab-content-area shadow-sm">
|
||||
<div class="row text-center">
|
||||
<div class="col-4 border-end"><h6>Km állás</h6><div class="fw-bold fs-4">{{ selectedCar.mileage }}</div></div>
|
||||
<div class="col-4 border-end"><h6>Idei költség</h6><div class="fw-bold fs-4">{{ formatMoney(selectedCar.year_cost, selectedCar.currency) }}</div></div>
|
||||
<div class="col-4"><h6>Állapot</h6><div :class="selectedCar.status === 'OK' ? 'text-success' : 'text-danger'" class="fw-bold fs-4">{{ selectedCar.status }}</div></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="showCostModal" class="modal-backdrop-custom auth-wrapper" style="position:fixed; top:0; left:0; width:100%; background:rgba(0,0,0,0.5); z-index:9999;">
|
||||
<div class="auth-card" style="max-width: 500px;">
|
||||
<h4 class="fw-bold mb-4">Új Költség Rögzítése</h4>
|
||||
<div class="row g-3">
|
||||
<div class="col-6">
|
||||
<label class="small fw-bold">Kategória</label>
|
||||
<select class="form-select" v-model="costForm.mainCategory" @change="updateSubCategory">
|
||||
<option v-for="(val, key) in costDefinitions" :value="key">{{ val.label }}</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<label class="small fw-bold">Típus</label>
|
||||
<select class="form-select" v-model="costForm.subCategory">
|
||||
<option v-for="(label, key) in currentSubOptions" :value="key">{{ label }}</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="col-6"><input type="number" class="form-control" v-model="costForm.amount" placeholder="Összeg"></div>
|
||||
<div class="col-6"><select class="form-select" v-model="costForm.currency"><option value="HUF">HUF</option><option value="EUR">EUR</option></select></div>
|
||||
</div>
|
||||
<div class="d-flex justify-content-end mt-4">
|
||||
<button class="btn btn-light me-2" @click="showCostModal=false">Mégse</button>
|
||||
<button class="btn btn-success" @click="submitCost">Mentés</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
|
||||
<script>
|
||||
const { createApp } = Vue
|
||||
createApp({
|
||||
data() {
|
||||
return {
|
||||
isLoggedIn: !!localStorage.getItem('token'),
|
||||
userEmail: '',
|
||||
authView: 'login',
|
||||
view: 'dashboard',
|
||||
authForm: { email: '', password: '' },
|
||||
myCars: [],
|
||||
selectedCar: null,
|
||||
showCostModal: false,
|
||||
costForm: { mainCategory: '', subCategory: '', amount: '', currency: 'HUF' },
|
||||
costDefinitions: {}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
currentSubOptions() { return this.costDefinitions[this.costForm.mainCategory]?.subs || null; }
|
||||
},
|
||||
methods: {
|
||||
// --- AUTH ---
|
||||
async login() {
|
||||
const params = new URLSearchParams();
|
||||
params.append('username', this.authForm.email); // Az email megy a username mezőbe
|
||||
params.append('password', this.authForm.password);
|
||||
|
||||
try {
|
||||
const res = await fetch('/api/auth/login', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
|
||||
body: params
|
||||
});
|
||||
|
||||
if (res.ok) {
|
||||
const data = await res.json();
|
||||
localStorage.setItem('token', data.access_token);
|
||||
this.isLoggedIn = true;
|
||||
this.initApp();
|
||||
} else {
|
||||
const errorData = await res.json();
|
||||
alert("Belépés elutasítva: " + (errorData.detail || "Ismeretlen hiba"));
|
||||
}
|
||||
} catch (e) {
|
||||
alert("Szerver hiba a bejelentkezéskor!");
|
||||
}
|
||||
}
|
||||
},
|
||||
async register() {
|
||||
const fd = new FormData();
|
||||
fd.append('email', this.authForm.email);
|
||||
fd.append('password', this.authForm.password);
|
||||
await fetch('/api/auth/register', { method: 'POST', body: fd });
|
||||
alert("Sikeres regisztráció! Jelentkezz be.");
|
||||
this.authView = 'login';
|
||||
},
|
||||
logout() { localStorage.removeItem('token'); this.isLoggedIn = false; },
|
||||
|
||||
// --- API HELPERS (JWT Token-nel!) ---
|
||||
async apiFetch(url, options = {}) {
|
||||
const token = localStorage.getItem('token');
|
||||
options.headers = { ...options.headers, 'Authorization': `Bearer ${token}` };
|
||||
const res = await fetch(url, options);
|
||||
if(res.status === 401) this.logout();
|
||||
return res;
|
||||
},
|
||||
|
||||
// --- ALKALMAZÁS LOGIKA ---
|
||||
async initApp() {
|
||||
if(!this.isLoggedIn) return;
|
||||
const resCars = await this.apiFetch('/api/my_vehicles');
|
||||
this.myCars = await resCars.json();
|
||||
const resTypes = await fetch('/api/ref/cost_types'); // Ez publikus is lehet
|
||||
this.costDefinitions = await resTypes.json();
|
||||
},
|
||||
async openVehicleDetail(id) {
|
||||
const res = await this.apiFetch(`/api/vehicle/${id}`);
|
||||
this.selectedCar = await res.json();
|
||||
this.view = 'detail';
|
||||
},
|
||||
openCostModal() {
|
||||
this.costForm.mainCategory = Object.keys(this.costDefinitions)[0];
|
||||
this.updateSubCategory();
|
||||
this.showCostModal = true;
|
||||
},
|
||||
updateSubCategory() {
|
||||
const subs = this.costDefinitions[this.costForm.mainCategory]?.subs;
|
||||
this.costForm.subCategory = subs ? Object.keys(subs)[0] : '';
|
||||
},
|
||||
async submitCost() {
|
||||
const fd = new FormData();
|
||||
fd.append('vehicle_id', this.selectedCar.id);
|
||||
fd.append('cost_type', this.costForm.subCategory || this.costForm.mainCategory);
|
||||
fd.append('amount', this.costForm.amount);
|
||||
fd.append('currency', this.costForm.currency);
|
||||
fd.append('date_str', new Date().toISOString().split('T')[0]);
|
||||
fd.append('mileage', this.selectedCar.mileage);
|
||||
|
||||
const res = await this.apiFetch('/api/add_cost', { method: 'POST', body: fd });
|
||||
if(res.ok) {
|
||||
this.showCostModal = false;
|
||||
this.openVehicleDetail(this.selectedCar.id);
|
||||
}
|
||||
},
|
||||
formatMoney(amount, curr) { return new Intl.NumberFormat('hu-HU', { style: 'currency', currency: curr }).format(amount); }
|
||||
},
|
||||
mounted() { this.initApp(); }
|
||||
}).mount('#app')
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
216
code-server-config/data/User/History/-52e5c41d/9eYi.html
Executable file
216
code-server-config/data/User/History/-52e5c41d/9eYi.html
Executable file
@@ -0,0 +1,216 @@
|
||||
<!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; display: flex; flex-direction: column; justify-content: center; }
|
||||
.stat-value { font-size: 1.5rem; font-weight: bold; color: #212529; }
|
||||
.stat-label { font-size: 0.85rem; color: #6c757d; text-transform: uppercase; margin-top: 5px; }
|
||||
.tab-content-area { background: white; border-radius: 15px; padding: 30px; box-shadow: 0 5px 15px rgba(0,0,0,0.03); }
|
||||
|
||||
.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</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-3">
|
||||
<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-3"><div class="stat-box"><div class="stat-value">{{ formatMoney(selectedCar.year_cost, selectedCar.currency) }}</div><div class="stat-label">Idei költés</div></div></div>
|
||||
<div class="col-md-3">
|
||||
<div v-if="selectedCar.status !== 'OK' && selectedCar.status !== null" class="alert alert-danger h-100 shadow-sm border-danger p-2 m-0 d-flex flex-column justify-content-center">
|
||||
<h6 class="fw-bold text-danger mb-1" style="font-size: 0.9rem">Hiba:</h6><p class="mb-2 text-dark small" style="line-height: 1.2">{{ selectedCar.current_issue }}</p><button class="btn btn-sm btn-danger w-100" @click="resolveIssue">Megjavítva</button>
|
||||
</div>
|
||||
<div v-else class="stat-box text-muted border bg-light"><div class="fs-4"><i class="bi bi-shield-check"></i></div><div class="stat-label">Nincs hiba</div></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="detailTab === 'history'">
|
||||
<div v-if="history.length === 0" class="text-center py-5 text-muted">Még üres a szervizkönyv.</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>
|
||||
<div class="d-flex align-items-center gap-2 text-muted small mt-1">
|
||||
<span v-if="item.mileage > 0"><i class="bi bi-speedometer2 me-1"></i>{{ item.mileage.toLocaleString() }} km</span>
|
||||
<a v-if="item.document_url" :href="item.document_url" target="_blank" class="badge bg-primary text-decoration-none">
|
||||
<i class="bi bi-paperclip me-1"></i>Csatolmány
|
||||
</a>
|
||||
</div>
|
||||
</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</option><option value="INSURANCE">📄 Biztosítás</option><option value="TAX">🏛️ Adó</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</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">Megjegyzés</label><textarea class="form-control" rows="2" v-model="costForm.description"></textarea></div>
|
||||
<div class="col-12"><label class="form-label fw-bold"><i class="bi bi-paperclip me-1"></i>Bizonylat (Kép)</label><input type="file" class="form-control" ref="fileInput"></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</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'; },
|
||||
openCostModal() { 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() {
|
||||
const formData = new FormData();
|
||||
formData.append('vehicle_id', this.selectedCar.id);
|
||||
formData.append('cost_type', this.costForm.type);
|
||||
formData.append('amount', this.costForm.amount);
|
||||
formData.append('currency', this.costForm.currency);
|
||||
formData.append('mileage', this.costForm.mileage);
|
||||
formData.append('date_str', this.costForm.date);
|
||||
formData.append('description', this.costForm.description);
|
||||
|
||||
const fileInput = this.$refs.fileInput;
|
||||
if(fileInput.files.length > 0) {
|
||||
formData.append('file', fileInput.files[0]);
|
||||
}
|
||||
|
||||
try {
|
||||
const res = await fetch('/api/add_cost', { method: 'POST', body: formData });
|
||||
|
||||
// --- HIBAKEZELÉS (EZ HIÁNYZOTT!) ---
|
||||
if (res.ok) {
|
||||
alert("Költség és fájl rögzítve!");
|
||||
this.showCostModal = false;
|
||||
this.openVehicleDetail(this.selectedCar.id);
|
||||
if(this.detailTab === 'history') this.loadHistory();
|
||||
} else {
|
||||
// Ha a szerver hibát dob, olvassuk ki és jelezzük!
|
||||
const err = await res.json();
|
||||
alert("Hiba történt a mentéskor: " + JSON.stringify(err));
|
||||
console.error(err);
|
||||
}
|
||||
} catch(e) {
|
||||
alert("Kritikus hiba: A szerver nem válaszol. Fut a 'python-multipart'?");
|
||||
console.error(e);
|
||||
}
|
||||
},
|
||||
|
||||
async loadHistory() { this.detailTab = 'history'; const res = await fetch('/api/vehicle/' + this.selectedCar.id + '/history'); this.history = await res.json(); },
|
||||
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; },
|
||||
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>
|
||||
179
code-server-config/data/User/History/-52e5c41d/E3XE.html
Executable file
179
code-server-config/data/User/History/-52e5c41d/E3XE.html
Executable file
@@ -0,0 +1,179 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="hu">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Szerviz Kereső - Flotta Menedzser</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: #f0f2f5; font-family: 'Inter', sans-serif; }
|
||||
.auth-card { background: white; padding: 40px; border-radius: 20px; box-shadow: 0 10px 30px rgba(0,0,0,0.1); width: 100%; max-width: 400px; }
|
||||
.navbar { background: white !important; box-shadow: 0 2px 10px rgba(0,0,0,0.05); }
|
||||
.garage-card { border: none; border-radius: 15px; transition: 0.3s; cursor: pointer; background: white; }
|
||||
.garage-card:hover { transform: translateY(-5px); box-shadow: 0 10px 20px rgba(0,0,0,0.08); }
|
||||
.modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 1000; display: flex; align-items: center; justify-content: center; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app">
|
||||
<nav class="navbar navbar-expand-lg navbar-light px-4 mb-4" v-if="isLoggedIn">
|
||||
<div class="container">
|
||||
<a class="navbar-brand fw-bold text-primary" href="#" @click="view='garage'"><i class="bi bi-tools me-2"></i>SZERVIZ KERESŐ</a>
|
||||
<div class="collapse navbar-collapse">
|
||||
<ul class="navbar-nav me-auto">
|
||||
<li class="nav-item"><a class="nav-link" :class="{active: view==='garage'}" @click="view='garage'" href="#">Garázs</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="#">Szervizek</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="#">Csapatom</a></li>
|
||||
</ul>
|
||||
<div class="d-flex align-items-center">
|
||||
<select class="form-select form-select-sm me-3" style="width: auto;"><option>🇭🇺 HU</option><option>🇬🇧 EN</option></select>
|
||||
<button class="btn btn-outline-danger btn-sm" @click="logout"><i class="bi bi-box-arrow-right"></i></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<div v-if="!isLoggedIn" class="d-flex align-items-center justify-content-center" style="height:100vh">
|
||||
<div class="auth-card">
|
||||
<h2 class="text-center fw-bold mb-4 text-primary">Service Finder</h2>
|
||||
|
||||
<div v-if="authMode === 'login'">
|
||||
<input type="email" class="form-control mb-3" v-model="authForm.email" placeholder="Email cím">
|
||||
<input type="password" class="form-control mb-3" v-model="authForm.password" placeholder="Jelszó">
|
||||
<button class="btn btn-primary w-100 py-2" @click="handleLogin">Bejelentkezés</button>
|
||||
<p class="text-center mt-3 small">Nincs még fiókod? <a href="#" @click="authMode='register'">Regisztráció</a></p>
|
||||
</div>
|
||||
|
||||
<div v-else>
|
||||
<input type="email" class="form-control mb-3" v-model="authForm.email" placeholder="Új Email cím">
|
||||
<input type="password" class="form-control mb-3" v-model="authForm.password" placeholder="Új Jelszó">
|
||||
<button class="btn btn-success w-100 py-2" @click="handleRegister">Fiók létrehozása</button>
|
||||
<p class="text-center mt-3 small"><a href="#" @click="authMode='login'">Vissza a belépéshez</a></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-else class="container">
|
||||
<div v-if="view === 'garage'">
|
||||
<div class="d-flex justify-content-between align-items-center mb-4">
|
||||
<h3 class="fw-bold">Garázsom</h3>
|
||||
<button class="btn btn-primary" @click="modals.reg = true"><i class="bi bi-plus-lg me-2"></i>Új Jármű</button>
|
||||
</div>
|
||||
|
||||
<div class="row g-4">
|
||||
<div class="col-md-4" v-for="car in myCars">
|
||||
<div class="card garage-card p-4 shadow-sm" @click="selectedCar=car; view='detail'">
|
||||
<div class="d-flex justify-content-between mb-2">
|
||||
<h5 class="fw-bold mb-0">{{car.brand}}</h5>
|
||||
<span class="badge bg-warning text-dark">{{car.plate}}</span>
|
||||
</div>
|
||||
<div class="text-muted small">{{car.model}}</div>
|
||||
<div class="mt-3 d-flex justify-content-between">
|
||||
<button class="btn btn-sm btn-outline-success" @click.stop="openCost(car)">Költség +</button>
|
||||
<button class="btn btn-sm btn-outline-secondary">Részletek</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="view === 'detail' && selectedCar">
|
||||
<button class="btn btn-link ps-0 mb-3 text-decoration-none" @click="view='garage'"><i class="bi bi-arrow-left"></i> Vissza</button>
|
||||
<div class="card p-4 rounded-4 border-0 shadow-sm">
|
||||
<h2 class="fw-bold">{{selectedCar.brand}} {{selectedCar.model}}</h2>
|
||||
<p class="text-muted">Rendszám: {{selectedCar.plate}}</p>
|
||||
<hr>
|
||||
<div class="row text-center mt-4">
|
||||
<div class="col-4"><h6>Állapot</h6><h5 class="text-success">Kiváló</h5></div>
|
||||
<div class="col-4"><h6>Szerviz</h6><h5>Aktuális</h5></div>
|
||||
<div class="col-4"><h6>Csapat</h6><h5>1 Sofőr</h5></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="modals.reg" class="modal-overlay">
|
||||
<div class="auth-card" style="max-width: 500px;">
|
||||
<h4 class="fw-bold mb-4">Új Jármű</h4>
|
||||
<select class="form-select mb-3" v-model="regForm.cat" @change="regForm.brand=''; regForm.model_id=''">
|
||||
<option value="" disabled>Kategória...</option>
|
||||
<option v-for="(brands, cat) in meta.hierarchy" :value="cat">{{cat}}</option>
|
||||
</select>
|
||||
<select class="form-select mb-3" v-model="regForm.brand" :disabled="!regForm.cat">
|
||||
<option value="" disabled>Márka...</option>
|
||||
<option v-for="(models, brand) in meta.hierarchy[regForm.cat]" :value="brand">{{brand}}</option>
|
||||
</select>
|
||||
<select class="form-select mb-3" v-model="regForm.model_id" :disabled="!regForm.brand">
|
||||
<option value="" disabled>Típus...</option>
|
||||
<option v-for="m in meta.hierarchy[regForm.cat]?.[regForm.brand]" :value="m.id">{{m.name}}</option>
|
||||
</select>
|
||||
<input type="text" class="form-control mb-3" v-model="regForm.plate" placeholder="Rendszám">
|
||||
<div class="d-flex gap-2">
|
||||
<button class="btn btn-light w-100" @click="modals.reg=false">Mégse</button>
|
||||
<button class="btn btn-primary w-100" @click="submitReg">Mentés</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
|
||||
<script>
|
||||
const { createApp } = Vue
|
||||
createApp({
|
||||
data() {
|
||||
return {
|
||||
isLoggedIn: !!localStorage.getItem('token'),
|
||||
authMode: 'login',
|
||||
view: 'garage',
|
||||
authForm: { email: '', password: '' },
|
||||
regForm: { cat: '', brand: '', model_id: '', plate: '', mileage: 0 },
|
||||
myCars: [],
|
||||
meta: { hierarchy: {}, costTypes: {} },
|
||||
modals: { reg: false },
|
||||
selectedCar: null
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
async handleLogin() {
|
||||
const p = new URLSearchParams(); p.append('username', this.authForm.email); p.append('password', this.authForm.password);
|
||||
const res = await fetch('/api/auth/login', { method: 'POST', body: p });
|
||||
if (res.ok) {
|
||||
const d = await res.json();
|
||||
localStorage.setItem('token', d.access_token);
|
||||
this.isLoggedIn = true;
|
||||
this.initApp();
|
||||
} else alert("Hibás belépés!");
|
||||
},
|
||||
async handleRegister() {
|
||||
const f = new FormData(); f.append('email', this.authForm.email); f.append('password', this.authForm.password);
|
||||
const res = await fetch('/api/auth/register', { method: 'POST', body: f });
|
||||
if (res.ok) { alert("Sikeres regisztráció! Most jelentkezz be."); this.authMode = 'login'; }
|
||||
else alert("Hiba a regisztráció során.");
|
||||
},
|
||||
async initApp() {
|
||||
const token = localStorage.getItem('token');
|
||||
if(!token) return;
|
||||
const headers = { 'Authorization': 'Bearer ' + token };
|
||||
const [r1, r2, r3] = await Promise.all([
|
||||
fetch('/api/my_vehicles', { headers }),
|
||||
fetch('/api/meta/vehicle-hierarchy'),
|
||||
fetch('/api/meta/cost-types')
|
||||
]);
|
||||
if(r1.ok) this.myCars = await r1.json();
|
||||
if(r2.ok) this.meta.hierarchy = await r2.json();
|
||||
},
|
||||
async submitReg() {
|
||||
const res = await fetch('/api/register', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json', 'Authorization': 'Bearer ' + localStorage.getItem('token') },
|
||||
body: JSON.stringify({ ...this.regForm, vin: 'AUTO'+Math.random(), purchase_date: '2026-01-01' })
|
||||
});
|
||||
if(res.ok) { this.modals.reg = false; this.initApp(); }
|
||||
},
|
||||
logout() { localStorage.clear(); this.isLoggedIn = false; }
|
||||
},
|
||||
mounted() { if(this.isLoggedIn) this.initApp(); }
|
||||
}).mount('#app')
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
200
code-server-config/data/User/History/-52e5c41d/J4V4.html
Executable file
200
code-server-config/data/User/History/-52e5c41d/J4V4.html
Executable file
@@ -0,0 +1,200 @@
|
||||
<!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 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; }
|
||||
.tab-content-area { background: white; border-radius: 15px; padding: 30px; box-shadow: 0 5px 15px rgba(0,0,0,0.03); }
|
||||
|
||||
.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" :class="{active: activeTab === 'garage'}" href="#" @click="activeTab = 'garage'">Garázs</a></li>
|
||||
<li class="nav-item"><a class="nav-link" :class="{active: activeTab === 'team'}" href="#" @click="activeTab = 'team'">Csapat</a></li>
|
||||
</ul>
|
||||
|
||||
<div v-if="activeTab === 'garage'" 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 v-if="activeTab === 'team'"><h3>Csapat...</h3></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>
|
||||
<button class="btn btn-outline-danger" @click="openErrorModal"><i class="bi bi-exclamation-circle-fill me-1"></i> Jelentés</button>
|
||||
</div>
|
||||
|
||||
<div class="tab-content-area">
|
||||
<div class="row g-4">
|
||||
<div class="col-md-3">
|
||||
<div class="stat-box"><div class="stat-value">{{ selectedCar.mileage }}</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">Műszaki á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 align-items-start">
|
||||
<div>
|
||||
<h6 class="fw-bold text-danger"><i class="bi bi-exclamation-triangle me-2"></i>Nyitott probléma:</h6>
|
||||
<p class="mb-2 text-dark">{{ selectedCar.current_issue }}</p>
|
||||
</div>
|
||||
<button class="btn btn-sm btn-danger" @click="resolveIssue">
|
||||
<i class="bi bi-wrench-adjustable me-1"></i> Megjavítva
|
||||
</button>
|
||||
</div>
|
||||
<small class="text-muted">A javítás rögzítése naplózásra kerül.</small>
|
||||
</div>
|
||||
|
||||
<div v-else class="alert alert-light border h-100 d-flex align-items-center justify-content-center text-muted">
|
||||
<i class="bi bi-check2-all me-2"></i> 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">Hiba bejelentése</h4>
|
||||
<textarea class="form-control my-3" rows="3" v-model="errorForm.description" placeholder="Mi a gond?"></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 (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" @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', activeTab: 'garage', showErrorModal: false, myCars: [], selectedCar: null, errorForm: {description: '', is_critical: false} } },
|
||||
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';
|
||||
},
|
||||
openErrorModal() { this.errorForm = {description: '', is_critical: false}; this.showErrorModal = true; },
|
||||
|
||||
async submitError() {
|
||||
try {
|
||||
const res = 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
|
||||
})
|
||||
});
|
||||
if (res.ok) {
|
||||
alert("Hiba naplózva!");
|
||||
this.showErrorModal = false;
|
||||
this.openVehicleDetail(this.selectedCar.id);
|
||||
}
|
||||
} catch(e) { alert("Hiba!"); }
|
||||
},
|
||||
|
||||
// EZ A FÜGGVÉNY MOST MÁR TÉNYLEG JAVÍT ÉS NAPLÓZ!
|
||||
async resolveIssue() {
|
||||
if(!confirm("Biztosan megjavítottad az autót? A státusz visszaáll OK-ra.")) return;
|
||||
|
||||
try {
|
||||
const res = await fetch('/api/resolve_issue', {
|
||||
method: 'POST', headers: {'Content-Type': 'application/json'},
|
||||
body: JSON.stringify({ vehicle_id: this.selectedCar.id })
|
||||
});
|
||||
|
||||
if (res.ok) {
|
||||
alert("Siker! Az autó újra bevethető.");
|
||||
this.openVehicleDetail(this.selectedCar.id); // Frissítés
|
||||
}
|
||||
} catch(e) { alert("Hiba történt!"); }
|
||||
}
|
||||
},
|
||||
mounted() { this.fetchData(); }
|
||||
}).mount('#app')
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
247
code-server-config/data/User/History/-52e5c41d/JA3R.html
Executable file
247
code-server-config/data/User/History/-52e5c41d/JA3R.html
Executable file
@@ -0,0 +1,247 @@
|
||||
|
||||
<!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>
|
||||
208
code-server-config/data/User/History/-52e5c41d/Rpxl.html
Executable file
208
code-server-config/data/User/History/-52e5c41d/Rpxl.html
Executable file
@@ -0,0 +1,208 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="hu">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Service Finder - Garázs</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; }
|
||||
|
||||
/* KOMPAKT CSEMPE STÍLUSOK */
|
||||
.garage-card {
|
||||
border: none; border-radius: 12px; background: white;
|
||||
box-shadow: 0 2px 8px rgba(0,0,0,0.04); transition: transform 0.2s, box-shadow 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); }
|
||||
|
||||
/* Fejléc sáv a kártyán (Márka színe lehetne később) */
|
||||
.card-top-strip { height: 6px; background: #0d6efd; width: 100%; position: absolute; top: 0; left: 0; }
|
||||
|
||||
.car-icon { font-size: 2rem; color: #6c757d; } /* Kisebb ikon */
|
||||
|
||||
.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; display: inline-block; letter-spacing: 1px;
|
||||
}
|
||||
|
||||
.role-badge { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.5px; }
|
||||
|
||||
/* Új Hozzáadása Csempe - Kompakt */
|
||||
.add-card {
|
||||
border: 2px dashed #cbd5e1; background: rgba(255,255,255,0.5);
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
color: #64748b; min-height: 160px; /* Alacsonyabb */
|
||||
}
|
||||
.add-card:hover { border-color: #0d6efd; color: #0d6efd; background: white; }
|
||||
|
||||
.wizard-card { background: white; border-radius: 15px; box-shadow: 0 10px 30px rgba(0,0,0,0.05); padding: 30px; }
|
||||
.step { width: 30px; height: 30px; background: #e9ecef; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; margin-right: 10px; font-weight: bold; }
|
||||
.step.active { background: #0d6efd; color: white; }
|
||||
</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>
|
||||
<span class="text-white small opacity-75">Demo User</span>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<div class="container main-container">
|
||||
|
||||
<div v-if="view === 'dashboard'">
|
||||
<div class="d-flex justify-content-between align-items-center mb-3">
|
||||
<h4 class="fw-bold text-secondary mb-0">Saját Járművek</h4>
|
||||
<span class="badge bg-secondary rounded-pill">{{ myCars.length }} db</span>
|
||||
</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 v-if="car.category === 'Motor'" class="bi bi-bicycle car-icon"></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 bg-light text-dark border role-badge">
|
||||
{{ translateRole(car.role) }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="text-end mt-3">
|
||||
<small class="text-primary fw-bold" style="cursor: pointer;">Adatlap megnyitása <i class="bi bi-chevron-right"></i></small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-6 col-lg-4">
|
||||
<div class="garage-card add-card" @click="switchToWizard">
|
||||
<div class="text-center">
|
||||
<i class="bi bi-plus-lg fs-3 mb-1"></i>
|
||||
<h6 class="fw-bold mb-0">Új jármű</h6>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="view === 'wizard'" class="wizard-card">
|
||||
<div class="d-flex justify-content-between mb-4">
|
||||
<h4 class="fw-bold"><span class="step" :class="{active: step <= 3}">{{ step }}</span> Új rögzítése</h4>
|
||||
<button class="btn btn-close" @click="cancelWizard"></button>
|
||||
</div>
|
||||
|
||||
<div v-if="step === 1">
|
||||
<div class="row g-3">
|
||||
<div class="col-md-4"><label class="form-label small fw-bold">Kategória</label><select class="form-select" v-model="form.category"><option v-for="c in uniqueCategories" :value="c">{{ c }}</option></select></div>
|
||||
<div class="col-md-4"><label class="form-label small fw-bold">Márka</label><select class="form-select" v-model="form.brand" :disabled="!form.category"><option v-for="b in filteredBrands" :value="b">{{ b }}</option></select></div>
|
||||
<div class="col-md-4"><label class="form-label small fw-bold">Modell</label><select class="form-select" v-model="form.model" :disabled="!form.brand"><option v-for="m in filteredModels" :value="m">{{ m.model }}</option></select></div>
|
||||
</div>
|
||||
<div class="mt-4 text-end"><button class="btn btn-primary" :disabled="!form.model" @click="step++">Tovább</button></div>
|
||||
</div>
|
||||
|
||||
<div v-if="step === 2">
|
||||
<div class="alert alert-info py-2 small">Jármű: <strong>{{ form.brand }} {{ form.model.model }}</strong></div>
|
||||
<div class="row g-3">
|
||||
<div class="col-6"><label class="form-label small fw-bold">Alvázszám (VIN) *</label><input class="form-control text-uppercase" v-model="form.vin"></div>
|
||||
<div class="col-6"><label class="form-label small fw-bold">Rendszám *</label><input class="form-control text-uppercase" v-model="form.plate"></div>
|
||||
<div class="col-6"><label class="form-label small fw-bold">Km állás *</label><input type="number" class="form-control" v-model="form.mileage"></div>
|
||||
<div class="col-6"><label class="form-label small fw-bold">Vásárlás dátuma</label><input type="date" class="form-control" v-model="form.purchaseDate"></div>
|
||||
</div>
|
||||
<div class="mt-4 d-flex justify-content-between"><button class="btn btn-secondary" @click="step--">Vissza</button><button class="btn btn-success" :disabled="!form.vin || !form.plate" @click="saveVehicle">Mentés</button></div>
|
||||
</div>
|
||||
|
||||
<div v-if="step === 3" class="text-center py-5">
|
||||
<i class="bi bi-check-circle-fill text-success display-3"></i>
|
||||
<h4 class="mt-3">Sikeres rögzítés!</h4>
|
||||
<button class="btn btn-primary mt-4" @click="finishWizard">Vissza a Garázsba</button>
|
||||
</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',
|
||||
step: 1,
|
||||
myCars: [],
|
||||
catalog: [],
|
||||
form: { category: "", brand: "", model: null, vin: "", plate: "", mileage: "", purchaseDate: "" }
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
uniqueCategories() { return [...new Set(this.catalog.map(v => v.category).filter(c => c))].sort(); },
|
||||
filteredBrands() { return this.form.category ? [...new Set(this.catalog.filter(v => v.category === this.form.category).map(v => v.brand))].sort() : []; },
|
||||
filteredModels() { return this.form.brand ? this.catalog.filter(v => v.brand === this.form.brand && v.category === this.form.category).sort((a,b)=>a.model.localeCompare(b.model)) : []; }
|
||||
},
|
||||
methods: {
|
||||
// --- FORDÍTÓ FÜGGVÉNY ---
|
||||
translateRole(role) {
|
||||
const map = {
|
||||
'OWNER': 'Tulajdonos',
|
||||
'DRIVER': 'Sofőr',
|
||||
'LEASE': 'Lízingelő',
|
||||
'COMPANY': 'Cég'
|
||||
};
|
||||
return map[role] || role; // Ha nincs a listában, marad az eredeti
|
||||
},
|
||||
async fetchMyGarage() {
|
||||
const res = await fetch('/api/my_vehicles');
|
||||
this.myCars = await res.json();
|
||||
},
|
||||
async fetchCatalog() {
|
||||
const res = await fetch('/api/vehicles');
|
||||
this.catalog = await res.json();
|
||||
},
|
||||
switchToWizard() {
|
||||
this.step = 1;
|
||||
this.form = { category: "", brand: "", model: null, vin: "", plate: "", mileage: "", purchaseDate: "" };
|
||||
this.view = 'wizard';
|
||||
},
|
||||
cancelWizard() { this.view = 'dashboard'; },
|
||||
async saveVehicle() {
|
||||
const payload = {
|
||||
model_id: this.form.model.id,
|
||||
vin: this.form.vin,
|
||||
plate: this.form.plate,
|
||||
mileage: parseInt(this.form.mileage),
|
||||
purchase_date: this.form.purchaseDate || new Date().toISOString().split('T')[0]
|
||||
};
|
||||
try {
|
||||
const res = await fetch('/api/register', { method: 'POST', headers: {'Content-Type': 'application/json'}, body: JSON.stringify(payload) });
|
||||
if(res.ok) { this.step = 3; }
|
||||
} catch(e) { alert(e); }
|
||||
},
|
||||
finishWizard() {
|
||||
this.fetchMyGarage();
|
||||
this.view = 'dashboard';
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.fetchMyGarage();
|
||||
this.fetchCatalog();
|
||||
}
|
||||
}).mount('#app')
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
241
code-server-config/data/User/History/-52e5c41d/SVyy.html
Executable file
241
code-server-config/data/User/History/-52e5c41d/SVyy.html
Executable file
@@ -0,0 +1,241 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="hu">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Service Finder - Flotta Kezelő</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; }
|
||||
/* Auth Képernyő */
|
||||
.auth-wrapper { height: 100vh; display: flex; align-items: center; justify-content: center; }
|
||||
.auth-card { background: white; padding: 40px; border-radius: 20px; box-shadow: 0 10px 30px rgba(0,0,0,0.1); width: 100%; max-width: 400px; }
|
||||
|
||||
/* Alkalmazás stílusok */
|
||||
.main-container { max-width: 1000px; margin: 30px auto; }
|
||||
.garage-card { border: none; border-radius: 12px; background: white; box-shadow: 0 2px 8px rgba(0,0,0,0.04); cursor: pointer; transition: 0.2s; 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; border-radius: 4px; }
|
||||
.history-item { border-left: 3px solid #e9ecef; padding-left: 20px; padding-bottom: 20px; position: relative; }
|
||||
.history-icon { position: absolute; left: -11px; top: 0; width: 20px; height: 20px; border-radius: 50%; border: 2px solid white; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="app">
|
||||
<div v-if="!isLoggedIn" class="auth-wrapper">
|
||||
<div class="auth-card">
|
||||
<h2 class="fw-bold mb-4 text-center text-primary"><i class="bi bi-speedometer2"></i> Service Finder</h2>
|
||||
<div v-if="authView === 'login'">
|
||||
<input type="email" class="form-control mb-3" v-model="authForm.email" placeholder="Email">
|
||||
<input type="password" class="form-control mb-3" v-model="authForm.password" placeholder="Jelszó">
|
||||
<button class="btn btn-primary w-100 py-2" @click="login">Bejelentkezés</button>
|
||||
<p class="text-center mt-3 small">Nincs fiókod? <a href="#" @click="authView='register'">Regisztrálj!</a></p>
|
||||
</div>
|
||||
<div v-if="authView === 'register'">
|
||||
<input type="email" class="form-control mb-3" v-model="authForm.email" placeholder="Email">
|
||||
<input type="password" class="form-control mb-3" v-model="authForm.password" placeholder="Jelszó">
|
||||
<button class="btn btn-success w-100 py-2" @click="register">Regisztráció</button>
|
||||
<p class="text-center mt-3 small"><a href="#" @click="authView='login'">Vissza a belépéshez</a></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-else>
|
||||
<nav class="navbar navbar-dark bg-primary shadow-sm px-4 py-2">
|
||||
<div class="container">
|
||||
<span class="navbar-brand fw-bold"><i class="bi bi-speedometer2 me-2"></i>Service Finder</span>
|
||||
<div class="d-flex align-items-center">
|
||||
<span class="text-white me-3 small">{{ userEmail }}</span>
|
||||
<button class="btn btn-outline-light btn-sm" @click="logout"><i class="bi bi-box-arrow-right"></i></button>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<div class="container main-container">
|
||||
<div v-if="view === 'dashboard'">
|
||||
<div class="d-flex justify-content-between mb-4">
|
||||
<h4 class="fw-bold">Saját Járművek</h4>
|
||||
<button class="btn btn-primary btn-sm"><i class="bi bi-plus-lg"></i> Új jármű</button>
|
||||
</div>
|
||||
<div class="row g-3">
|
||||
<div class="col-md-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'}"></div>
|
||||
<h5 class="fw-bold mb-0">{{ car.brand }}</h5>
|
||||
<div class="text-muted small mb-2">{{ car.model }}</div>
|
||||
<div class="d-flex justify-content-between align-items-center">
|
||||
<span class="plate-badge">{{ car.plate }}</span>
|
||||
<i v-if="car.status !== 'OK'" class="bi bi-exclamation-triangle text-danger"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="view === 'detail' && selectedCar">
|
||||
<button class="btn btn-link text-decoration-none ps-0 mb-3" @click="view='dashboard'"><i class="bi bi-arrow-left"></i> Vissza a listához</button>
|
||||
<div class="detail-header shadow-sm border">
|
||||
<div class="d-flex justify-content-between align-items-center">
|
||||
<div>
|
||||
<h2 class="fw-bold mb-1">{{ selectedCar.brand }} {{ selectedCar.model }}</h2>
|
||||
<span class="plate-badge fs-6">{{ selectedCar.plate }}</span>
|
||||
</div>
|
||||
<div class="text-end">
|
||||
<button class="btn btn-success" @click="openCostModal"><i class="bi bi-plus-lg"></i> Költség</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="tab-content-area shadow-sm">
|
||||
<div class="row text-center">
|
||||
<div class="col-4 border-end"><h6>Km állás</h6><div class="fw-bold fs-4">{{ selectedCar.mileage }}</div></div>
|
||||
<div class="col-4 border-end"><h6>Idei költség</h6><div class="fw-bold fs-4">{{ formatMoney(selectedCar.year_cost, selectedCar.currency) }}</div></div>
|
||||
<div class="col-4"><h6>Állapot</h6><div :class="selectedCar.status === 'OK' ? 'text-success' : 'text-danger'" class="fw-bold fs-4">{{ selectedCar.status }}</div></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="showCostModal" class="modal-backdrop-custom auth-wrapper" style="position:fixed; top:0; left:0; width:100%; background:rgba(0,0,0,0.5); z-index:9999;">
|
||||
<div class="auth-card" style="max-width: 500px;">
|
||||
<h4 class="fw-bold mb-4">Új Költség Rögzítése</h4>
|
||||
<div class="row g-3">
|
||||
<div class="col-6">
|
||||
<label class="small fw-bold">Kategória</label>
|
||||
<select class="form-select" v-model="costForm.mainCategory" @change="updateSubCategory">
|
||||
<option v-for="(val, key) in costDefinitions" :value="key">{{ val.label }}</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<label class="small fw-bold">Típus</label>
|
||||
<select class="form-select" v-model="costForm.subCategory">
|
||||
<option v-for="(label, key) in currentSubOptions" :value="key">{{ label }}</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="col-6"><input type="number" class="form-control" v-model="costForm.amount" placeholder="Összeg"></div>
|
||||
<div class="col-6"><select class="form-select" v-model="costForm.currency"><option value="HUF">HUF</option><option value="EUR">EUR</option></select></div>
|
||||
</div>
|
||||
<div class="d-flex justify-content-end mt-4">
|
||||
<button class="btn btn-light me-2" @click="showCostModal=false">Mégse</button>
|
||||
<button class="btn btn-success" @click="submitCost">Mentés</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
|
||||
<script>
|
||||
const { createApp } = Vue
|
||||
createApp({
|
||||
data() {
|
||||
return {
|
||||
isLoggedIn: !!localStorage.getItem('token'),
|
||||
userEmail: '',
|
||||
authView: 'login',
|
||||
view: 'dashboard',
|
||||
authForm: { email: '', password: '' },
|
||||
myCars: [],
|
||||
selectedCar: null,
|
||||
showCostModal: false,
|
||||
costForm: { mainCategory: '', subCategory: '', amount: '', currency: 'HUF' },
|
||||
costDefinitions: {}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
currentSubOptions() { return this.costDefinitions[this.costForm.mainCategory]?.subs || null; }
|
||||
},
|
||||
methods: {
|
||||
// --- AUTH ---
|
||||
async login() {
|
||||
const params = new URLSearchParams();
|
||||
params.append('username', this.authForm.email); // Az email megy a username mezőbe
|
||||
params.append('password', this.authForm.password);
|
||||
|
||||
try {
|
||||
const res = await fetch('/api/auth/login', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
|
||||
body: params
|
||||
});
|
||||
|
||||
if (res.ok) {
|
||||
const data = await res.json();
|
||||
localStorage.setItem('token', data.access_token);
|
||||
this.isLoggedIn = true;
|
||||
this.initApp();
|
||||
} else {
|
||||
const errorData = await res.json();
|
||||
alert("Belépés elutasítva: " + (errorData.detail || "Ismeretlen hiba"));
|
||||
}
|
||||
} catch (e) {
|
||||
alert("Szerver hiba a bejelentkezéskor!");
|
||||
}
|
||||
}
|
||||
async register() {
|
||||
const fd = new FormData();
|
||||
fd.append('email', this.authForm.email);
|
||||
fd.append('password', this.authForm.password);
|
||||
await fetch('/api/auth/register', { method: 'POST', body: fd });
|
||||
alert("Sikeres regisztráció! Jelentkezz be.");
|
||||
this.authView = 'login';
|
||||
},
|
||||
logout() { localStorage.removeItem('token'); this.isLoggedIn = false; },
|
||||
|
||||
// --- API HELPERS (JWT Token-nel!) ---
|
||||
async apiFetch(url, options = {}) {
|
||||
const token = localStorage.getItem('token');
|
||||
options.headers = { ...options.headers, 'Authorization': `Bearer ${token}` };
|
||||
const res = await fetch(url, options);
|
||||
if(res.status === 401) this.logout();
|
||||
return res;
|
||||
},
|
||||
|
||||
// --- ALKALMAZÁS LOGIKA ---
|
||||
async initApp() {
|
||||
if(!this.isLoggedIn) return;
|
||||
const resCars = await this.apiFetch('/api/my_vehicles');
|
||||
this.myCars = await resCars.json();
|
||||
const resTypes = await fetch('/api/ref/cost_types'); // Ez publikus is lehet
|
||||
this.costDefinitions = await resTypes.json();
|
||||
},
|
||||
async openVehicleDetail(id) {
|
||||
const res = await this.apiFetch(`/api/vehicle/${id}`);
|
||||
this.selectedCar = await res.json();
|
||||
this.view = 'detail';
|
||||
},
|
||||
openCostModal() {
|
||||
this.costForm.mainCategory = Object.keys(this.costDefinitions)[0];
|
||||
this.updateSubCategory();
|
||||
this.showCostModal = true;
|
||||
},
|
||||
updateSubCategory() {
|
||||
const subs = this.costDefinitions[this.costForm.mainCategory]?.subs;
|
||||
this.costForm.subCategory = subs ? Object.keys(subs)[0] : '';
|
||||
},
|
||||
async submitCost() {
|
||||
const fd = new FormData();
|
||||
fd.append('vehicle_id', this.selectedCar.id);
|
||||
fd.append('cost_type', this.costForm.subCategory || this.costForm.mainCategory);
|
||||
fd.append('amount', this.costForm.amount);
|
||||
fd.append('currency', this.costForm.currency);
|
||||
fd.append('date_str', new Date().toISOString().split('T')[0]);
|
||||
fd.append('mileage', this.selectedCar.mileage);
|
||||
|
||||
const res = await this.apiFetch('/api/add_cost', { method: 'POST', body: fd });
|
||||
if(res.ok) {
|
||||
this.showCostModal = false;
|
||||
this.openVehicleDetail(this.selectedCar.id);
|
||||
}
|
||||
},
|
||||
formatMoney(amount, curr) { return new Intl.NumberFormat('hu-HU', { style: 'currency', currency: curr }).format(amount); }
|
||||
},
|
||||
mounted() { this.initApp(); }
|
||||
}).mount('#app')
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
263
code-server-config/data/User/History/-52e5c41d/Smd7.html
Executable file
263
code-server-config/data/User/History/-52e5c41d/Smd7.html
Executable file
@@ -0,0 +1,263 @@
|
||||
|
||||
<!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ó */
|
||||
.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; }
|
||||
|
||||
/* Csempé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; }
|
||||
|
||||
/* DETAIL VIEW (Adatlap) */
|
||||
.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%; }
|
||||
.stat-value { font-size: 1.5rem; font-weight: bold; color: #212529; }
|
||||
.stat-label { font-size: 0.85rem; color: #6c757d; text-transform: uppercase; }
|
||||
|
||||
/* Detail 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; }
|
||||
|
||||
/* Csapat táblázat */
|
||||
.avatar-circle { width: 40px; height: 40px; background: #e9ecef; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: bold; }
|
||||
.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 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="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" @click="openVehicleDetail(car.vehicle_id)">
|
||||
<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 p-4 text-center text-muted" v-if="team.length === 0">Nincs adat</div>
|
||||
<div class="card border-0 shadow-sm rounded-4 overflow-hidden" v-else>
|
||||
<table class="table table-hover align-middle mb-0">
|
||||
<thead class="bg-light"><tr><th class="ps-4">Név</th><th>Szerepkör</th><th>Ország</th><th>Csatlakozott</th></tr></thead>
|
||||
<tbody>
|
||||
<tr v-for="member in team">
|
||||
<td class="ps-4"><div class="fw-bold">Munkatárs</div><div class="small text-muted">{{member.email}}</div></td>
|
||||
<td>{{translateRole(member.role)}}</td>
|
||||
<td>{{member.country}}</td>
|
||||
<td>{{member.joined_at ? member.joined_at.split('T')[0] : ''}}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="view === 'detail' && selectedCar">
|
||||
|
||||
<button class="btn btn-link text-decoration-none mb-3 ps-0" @click="view = 'dashboard'">
|
||||
<i class="bi bi-arrow-left me-1"></i> Vissza a Garázsba
|
||||
</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="bg-primary text-white rounded-circle d-flex align-items-center justify-content-center me-3" style="width: 60px; height: 60px;">
|
||||
<i class="bi bi-car-front fs-2"></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 class="badge bg-secondary">{{ translateRole(selectedCar.role) }}</span>
|
||||
<span class="text-muted small ms-2"><i class="bi bi-upc-scan me-1"></i>{{ selectedCar.vin }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-end">
|
||||
<button class="btn btn-outline-danger me-2"><i class="bi bi-exclamation-triangle"></i> Hiba jelentése</button>
|
||||
<button class="btn btn-success"><i class="bi bi-plus-lg"></i> Költség / Szerviz</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<ul class="nav nav-tabs detail-tabs mb-0">
|
||||
<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="detailTab = 'history'">Szervizkönyv</a></li>
|
||||
<li class="nav-item"><a class="nav-link" :class="{active: detailTab === 'settings'}" href="#" @click="detailTab = 'settings'">Beállítások</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 text-primary">{{ selectedCar.mileage.toLocaleString() }} km</div>
|
||||
<div class="stat-label">Aktuális óraállás</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<div class="stat-box">
|
||||
<div class="stat-value text-success">OK</div>
|
||||
<div class="stat-label">Műszaki állapot</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<div class="stat-box">
|
||||
<div class="stat-value">{{ formatCurrency(0, selectedCar.currency) }}</div>
|
||||
<div class="stat-label">Idei költés</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<div class="stat-box">
|
||||
<div class="stat-value text-muted">{{ selectedCar.start_date }}</div>
|
||||
<div class="stat-label">Flottába került</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h5 class="fw-bold mt-5 mb-3">Legutóbbi aktivitás</h5>
|
||||
<div class="alert alert-light border text-center text-muted py-4">
|
||||
<i class="bi bi-clock-history fs-3 d-block mb-2"></i>
|
||||
Még nincs rögzített esemény.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="detailTab === 'history'">
|
||||
<div class="text-center py-5 text-muted">
|
||||
<i class="bi bi-tools display-4 mb-3"></i>
|
||||
<h5>A szerviztörténet üres</h5>
|
||||
<p>Rögzíts tankolást vagy szervizt a jobb felső gombbal!</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="detailTab === 'settings'">
|
||||
<h5 class="text-danger fw-bold">Veszélyzóna</h5>
|
||||
<hr>
|
||||
<p>Jármű eltávolítása a flottából vagy eladás.</p>
|
||||
<button class="btn btn-outline-danger">Jármű archiválása</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="showInviteModal" class="modal-backdrop-custom">
|
||||
<div class="modal-content-custom">
|
||||
<h4>Meghívás</h4>
|
||||
<input class="form-control my-3" v-model="inviteForm.email" placeholder="Email cím">
|
||||
<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" @click="sendInvite">Küldés</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="view === 'wizard'" class="wizard-card"><button @click="view='dashboard'">Mégse</button> <h3>Varázsló...</h3></div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
|
||||
<script>
|
||||
const { createApp } = Vue
|
||||
|
||||
createApp({
|
||||
data() {
|
||||
return {
|
||||
view: 'dashboard', // dashboard | detail | wizard
|
||||
activeTab: 'garage', // garage | team
|
||||
detailTab: 'overview',// overview | history | settings
|
||||
|
||||
showInviteModal: false,
|
||||
inviteForm: { email: '', role: 'DRIVER', access_level: 'LOG_ONLY' },
|
||||
|
||||
myCars: [],
|
||||
team: [],
|
||||
selectedCar: null // Ide töltjük be a részleteket
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
translateRole(role) {
|
||||
const map = { 'OWNER': 'Tulajdonos', 'DRIVER': 'Sofőr', 'FLEET_MANAGER': 'Flotta Menedzser' };
|
||||
return map[role] || role;
|
||||
},
|
||||
formatCurrency(amount, currency) {
|
||||
// Ez a "Varázsló", ami a böngésző nyelvétől függően formáz
|
||||
try {
|
||||
return new Intl.NumberFormat(navigator.language, { style: 'currency', currency: currency || 'HUF' }).format(amount);
|
||||
} catch (e) { return amount + " " + currency; }
|
||||
},
|
||||
async fetchData() {
|
||||
const res1 = await fetch('/api/my_vehicles');
|
||||
this.myCars = await res1.json();
|
||||
const res2 = await fetch('/api/fleet/members');
|
||||
this.team = await res2.json();
|
||||
},
|
||||
async openVehicleDetail(id) {
|
||||
// Lekérjük a részletes adatokat
|
||||
try {
|
||||
const res = await fetch('/api/vehicle/' + id);
|
||||
if(res.ok) {
|
||||
this.selectedCar = await res.json();
|
||||
this.view = 'detail';
|
||||
this.detailTab = 'overview';
|
||||
} else { alert("Hiba az adatok betöltésekor"); }
|
||||
} catch(e) { console.error(e); }
|
||||
},
|
||||
async sendInvite() { /* ... (előző kód) ... */ alert("Meghívó elküldve!"); this.showInviteModal = false; },
|
||||
switchToWizard() { this.view = 'wizard'; }
|
||||
},
|
||||
mounted() {
|
||||
this.fetchData();
|
||||
}
|
||||
}).mount('#app')
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
228
code-server-config/data/User/History/-52e5c41d/SxEq.html
Executable file
228
code-server-config/data/User/History/-52e5c41d/SxEq.html
Executable file
@@ -0,0 +1,228 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="hu">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Service Finder - Flotta Kezelő</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; }
|
||||
/* Auth Képernyő */
|
||||
.auth-wrapper { height: 100vh; display: flex; align-items: center; justify-content: center; }
|
||||
.auth-card { background: white; padding: 40px; border-radius: 20px; box-shadow: 0 10px 30px rgba(0,0,0,0.1); width: 100%; max-width: 400px; }
|
||||
|
||||
/* Alkalmazás stílusok */
|
||||
.main-container { max-width: 1000px; margin: 30px auto; }
|
||||
.garage-card { border: none; border-radius: 12px; background: white; box-shadow: 0 2px 8px rgba(0,0,0,0.04); cursor: pointer; transition: 0.2s; 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; border-radius: 4px; }
|
||||
.history-item { border-left: 3px solid #e9ecef; padding-left: 20px; padding-bottom: 20px; position: relative; }
|
||||
.history-icon { position: absolute; left: -11px; top: 0; width: 20px; height: 20px; border-radius: 50%; border: 2px solid white; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="app">
|
||||
<div v-if="!isLoggedIn" class="auth-wrapper">
|
||||
<div class="auth-card">
|
||||
<h2 class="fw-bold mb-4 text-center text-primary"><i class="bi bi-speedometer2"></i> Service Finder</h2>
|
||||
<div v-if="authView === 'login'">
|
||||
<input type="email" class="form-control mb-3" v-model="authForm.email" placeholder="Email">
|
||||
<input type="password" class="form-control mb-3" v-model="authForm.password" placeholder="Jelszó">
|
||||
<button class="btn btn-primary w-100 py-2" @click="login">Bejelentkezés</button>
|
||||
<p class="text-center mt-3 small">Nincs fiókod? <a href="#" @click="authView='register'">Regisztrálj!</a></p>
|
||||
</div>
|
||||
<div v-if="authView === 'register'">
|
||||
<input type="email" class="form-control mb-3" v-model="authForm.email" placeholder="Email">
|
||||
<input type="password" class="form-control mb-3" v-model="authForm.password" placeholder="Jelszó">
|
||||
<button class="btn btn-success w-100 py-2" @click="register">Regisztráció</button>
|
||||
<p class="text-center mt-3 small"><a href="#" @click="authView='login'">Vissza a belépéshez</a></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-else>
|
||||
<nav class="navbar navbar-dark bg-primary shadow-sm px-4 py-2">
|
||||
<div class="container">
|
||||
<span class="navbar-brand fw-bold"><i class="bi bi-speedometer2 me-2"></i>Service Finder</span>
|
||||
<div class="d-flex align-items-center">
|
||||
<span class="text-white me-3 small">{{ userEmail }}</span>
|
||||
<button class="btn btn-outline-light btn-sm" @click="logout"><i class="bi bi-box-arrow-right"></i></button>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<div class="container main-container">
|
||||
<div v-if="view === 'dashboard'">
|
||||
<div class="d-flex justify-content-between mb-4">
|
||||
<h4 class="fw-bold">Saját Járművek</h4>
|
||||
<button class="btn btn-primary btn-sm"><i class="bi bi-plus-lg"></i> Új jármű</button>
|
||||
</div>
|
||||
<div class="row g-3">
|
||||
<div class="col-md-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'}"></div>
|
||||
<h5 class="fw-bold mb-0">{{ car.brand }}</h5>
|
||||
<div class="text-muted small mb-2">{{ car.model }}</div>
|
||||
<div class="d-flex justify-content-between align-items-center">
|
||||
<span class="plate-badge">{{ car.plate }}</span>
|
||||
<i v-if="car.status !== 'OK'" class="bi bi-exclamation-triangle text-danger"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="view === 'detail' && selectedCar">
|
||||
<button class="btn btn-link text-decoration-none ps-0 mb-3" @click="view='dashboard'"><i class="bi bi-arrow-left"></i> Vissza a listához</button>
|
||||
<div class="detail-header shadow-sm border">
|
||||
<div class="d-flex justify-content-between align-items-center">
|
||||
<div>
|
||||
<h2 class="fw-bold mb-1">{{ selectedCar.brand }} {{ selectedCar.model }}</h2>
|
||||
<span class="plate-badge fs-6">{{ selectedCar.plate }}</span>
|
||||
</div>
|
||||
<div class="text-end">
|
||||
<button class="btn btn-success" @click="openCostModal"><i class="bi bi-plus-lg"></i> Költség</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="tab-content-area shadow-sm">
|
||||
<div class="row text-center">
|
||||
<div class="col-4 border-end"><h6>Km állás</h6><div class="fw-bold fs-4">{{ selectedCar.mileage }}</div></div>
|
||||
<div class="col-4 border-end"><h6>Idei költség</h6><div class="fw-bold fs-4">{{ formatMoney(selectedCar.year_cost, selectedCar.currency) }}</div></div>
|
||||
<div class="col-4"><h6>Állapot</h6><div :class="selectedCar.status === 'OK' ? 'text-success' : 'text-danger'" class="fw-bold fs-4">{{ selectedCar.status }}</div></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="showCostModal" class="modal-backdrop-custom auth-wrapper" style="position:fixed; top:0; left:0; width:100%; background:rgba(0,0,0,0.5); z-index:9999;">
|
||||
<div class="auth-card" style="max-width: 500px;">
|
||||
<h4 class="fw-bold mb-4">Új Költség Rögzítése</h4>
|
||||
<div class="row g-3">
|
||||
<div class="col-6">
|
||||
<label class="small fw-bold">Kategória</label>
|
||||
<select class="form-select" v-model="costForm.mainCategory" @change="updateSubCategory">
|
||||
<option v-for="(val, key) in costDefinitions" :value="key">{{ val.label }}</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<label class="small fw-bold">Típus</label>
|
||||
<select class="form-select" v-model="costForm.subCategory">
|
||||
<option v-for="(label, key) in currentSubOptions" :value="key">{{ label }}</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="col-6"><input type="number" class="form-control" v-model="costForm.amount" placeholder="Összeg"></div>
|
||||
<div class="col-6"><select class="form-select" v-model="costForm.currency"><option value="HUF">HUF</option><option value="EUR">EUR</option></select></div>
|
||||
</div>
|
||||
<div class="d-flex justify-content-end mt-4">
|
||||
<button class="btn btn-light me-2" @click="showCostModal=false">Mégse</button>
|
||||
<button class="btn btn-success" @click="submitCost">Mentés</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
|
||||
<script>
|
||||
const { createApp } = Vue
|
||||
createApp({
|
||||
data() {
|
||||
return {
|
||||
isLoggedIn: !!localStorage.getItem('token'),
|
||||
userEmail: '',
|
||||
authView: 'login',
|
||||
view: 'dashboard',
|
||||
authForm: { email: '', password: '' },
|
||||
myCars: [],
|
||||
selectedCar: null,
|
||||
showCostModal: false,
|
||||
costForm: { mainCategory: '', subCategory: '', amount: '', currency: 'HUF' },
|
||||
costDefinitions: {}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
currentSubOptions() { return this.costDefinitions[this.costForm.mainCategory]?.subs || null; }
|
||||
},
|
||||
methods: {
|
||||
// --- AUTH ---
|
||||
async login() {
|
||||
const fd = new FormData();
|
||||
fd.append('username', this.authForm.email);
|
||||
fd.append('password', this.authForm.password);
|
||||
const res = await fetch('/api/auth/login', { method: 'POST', body: fd });
|
||||
if(res.ok) {
|
||||
const data = await res.json();
|
||||
localStorage.setItem('token', data.access_token);
|
||||
this.isLoggedIn = true;
|
||||
this.initApp();
|
||||
} else { alert("Belépés elutasítva!"); }
|
||||
},
|
||||
async register() {
|
||||
const fd = new FormData();
|
||||
fd.append('email', this.authForm.email);
|
||||
fd.append('password', this.authForm.password);
|
||||
await fetch('/api/auth/register', { method: 'POST', body: fd });
|
||||
alert("Sikeres regisztráció! Jelentkezz be.");
|
||||
this.authView = 'login';
|
||||
},
|
||||
logout() { localStorage.removeItem('token'); this.isLoggedIn = false; },
|
||||
|
||||
// --- API HELPERS (JWT Token-nel!) ---
|
||||
async apiFetch(url, options = {}) {
|
||||
const token = localStorage.getItem('token');
|
||||
options.headers = { ...options.headers, 'Authorization': `Bearer ${token}` };
|
||||
const res = await fetch(url, options);
|
||||
if(res.status === 401) this.logout();
|
||||
return res;
|
||||
},
|
||||
|
||||
// --- ALKALMAZÁS LOGIKA ---
|
||||
async initApp() {
|
||||
if(!this.isLoggedIn) return;
|
||||
const resCars = await this.apiFetch('/api/my_vehicles');
|
||||
this.myCars = await resCars.json();
|
||||
const resTypes = await fetch('/api/ref/cost_types'); // Ez publikus is lehet
|
||||
this.costDefinitions = await resTypes.json();
|
||||
},
|
||||
async openVehicleDetail(id) {
|
||||
const res = await this.apiFetch(`/api/vehicle/${id}`);
|
||||
this.selectedCar = await res.json();
|
||||
this.view = 'detail';
|
||||
},
|
||||
openCostModal() {
|
||||
this.costForm.mainCategory = Object.keys(this.costDefinitions)[0];
|
||||
this.updateSubCategory();
|
||||
this.showCostModal = true;
|
||||
},
|
||||
updateSubCategory() {
|
||||
const subs = this.costDefinitions[this.costForm.mainCategory]?.subs;
|
||||
this.costForm.subCategory = subs ? Object.keys(subs)[0] : '';
|
||||
},
|
||||
async submitCost() {
|
||||
const fd = new FormData();
|
||||
fd.append('vehicle_id', this.selectedCar.id);
|
||||
fd.append('cost_type', this.costForm.subCategory || this.costForm.mainCategory);
|
||||
fd.append('amount', this.costForm.amount);
|
||||
fd.append('currency', this.costForm.currency);
|
||||
fd.append('date_str', new Date().toISOString().split('T')[0]);
|
||||
fd.append('mileage', this.selectedCar.mileage);
|
||||
|
||||
const res = await this.apiFetch('/api/add_cost', { method: 'POST', body: fd });
|
||||
if(res.ok) {
|
||||
this.showCostModal = false;
|
||||
this.openVehicleDetail(this.selectedCar.id);
|
||||
}
|
||||
},
|
||||
formatMoney(amount, curr) { return new Intl.NumberFormat('hu-HU', { style: 'currency', currency: curr }).format(amount); }
|
||||
},
|
||||
mounted() { this.initApp(); }
|
||||
}).mount('#app')
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
142
code-server-config/data/User/History/-52e5c41d/UAc0.html
Executable file
142
code-server-config/data/User/History/-52e5c41d/UAc0.html
Executable file
@@ -0,0 +1,142 @@
|
||||
<!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; }
|
||||
.auth-wrapper { height: 100vh; display: flex; align-items: center; justify-content: center; }
|
||||
.auth-card { background: white; padding: 40px; border-radius: 20px; box-shadow: 0 10px 30px rgba(0,0,0,0.1); width: 100%; max-width: 400px; }
|
||||
.main-container { max-width: 1000px; margin: 30px auto; }
|
||||
.garage-card { border: none; border-radius: 12px; background: white; box-shadow: 0 2px 8px rgba(0,0,0,0.04); cursor: pointer; transition: 0.2s; 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; }
|
||||
.plate-badge { background: #ffcc00; color: black; border: 1px solid #e0b000; font-family: 'Courier New', monospace; font-weight: bold; padding: 2px 6px; border-radius: 4px; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="app">
|
||||
<div v-if="!isLoggedIn" class="auth-wrapper">
|
||||
<div class="auth-card">
|
||||
<h2 class="fw-bold mb-4 text-center text-primary"><i class="bi bi-speedometer2"></i> Service Finder</h2>
|
||||
<div class="mb-3">
|
||||
<input type="email" class="form-control" v-model="authForm.email" placeholder="Email">
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<input type="password" class="form-control" v-model="authForm.password" placeholder="Jelszó">
|
||||
</div>
|
||||
<button class="btn btn-primary w-100" @click="login">Bejelentkezés</button>
|
||||
<p class="text-center mt-3 small">Nincs fiókod? <a href="#" @click="register">Regisztráció</a></p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-else>
|
||||
<nav class="navbar navbar-dark bg-primary px-4 py-2">
|
||||
<div class="container">
|
||||
<span class="navbar-brand fw-bold">Service Finder</span>
|
||||
<button class="btn btn-outline-light btn-sm" @click="logout">Kijelentkezés</button>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<div class="container main-container">
|
||||
<div class="d-flex justify-content-between align-items-center mb-4">
|
||||
<h4 class="fw-bold">Garázs</h4>
|
||||
<div class="text-muted">Üdv: {{ userEmail }}</div>
|
||||
</div>
|
||||
|
||||
<div v-if="myCars.length === 0" class="alert alert-info border-0 shadow-sm rounded-4 p-4 text-center">
|
||||
<i class="bi bi-info-circle fs-2 d-block mb-2"></i>
|
||||
Még nincsenek járművek a profilodhoz rendelve.
|
||||
<br>Használd a pgAdmint vagy az API-t a járművek hozzárendeléséhez az <b>ID: {{ userId }}</b> felhasználóhoz.
|
||||
</div>
|
||||
|
||||
<div class="row g-3">
|
||||
<div class="col-md-4" v-for="car in myCars" :key="car.vehicle_id">
|
||||
<div class="card garage-card p-3">
|
||||
<div class="card-top-strip"></div>
|
||||
<h5 class="fw-bold mb-0">{{ car.brand }}</h5>
|
||||
<div class="text-muted small mb-2">{{ car.model }}</div>
|
||||
<span class="plate-badge">{{ car.plate }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
|
||||
<script>
|
||||
const { createApp } = Vue
|
||||
createApp({
|
||||
data() {
|
||||
return {
|
||||
isLoggedIn: !!localStorage.getItem('token'),
|
||||
userId: localStorage.getItem('userId') || '',
|
||||
userEmail: localStorage.getItem('userEmail') || '',
|
||||
authForm: { email: '', password: '' },
|
||||
myCars: []
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
async login() {
|
||||
const params = new URLSearchParams();
|
||||
params.append('username', this.authForm.email);
|
||||
params.append('password', this.authForm.password);
|
||||
try {
|
||||
const res = await fetch('/api/auth/login', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
|
||||
body: params
|
||||
});
|
||||
if (res.ok) {
|
||||
const data = await res.json();
|
||||
localStorage.setItem('token', data.access_token);
|
||||
localStorage.setItem('userEmail', this.authForm.email);
|
||||
|
||||
// Token dekódolása az ID kinyeréséhez (opcionális, de hasznos)
|
||||
const payload = JSON.parse(atob(data.access_token.split('.')[1]));
|
||||
localStorage.setItem('userId', payload.sub);
|
||||
|
||||
this.userId = payload.sub;
|
||||
this.userEmail = this.authForm.email;
|
||||
this.isLoggedIn = true;
|
||||
this.initApp();
|
||||
} else { alert("Hibás belépés!"); }
|
||||
} catch (e) { alert("Szerver hiba!"); }
|
||||
},
|
||||
async register() {
|
||||
const fd = new FormData();
|
||||
fd.append('email', this.authForm.email);
|
||||
fd.append('password', this.authForm.password);
|
||||
const res = await fetch('/api/auth/register', { method: 'POST', body: fd });
|
||||
if(res.ok) alert("Sikeres regisztráció! Most jelentkezz be.");
|
||||
else alert("Regisztrációs hiba!");
|
||||
},
|
||||
logout() {
|
||||
localStorage.clear();
|
||||
this.isLoggedIn = false;
|
||||
},
|
||||
async initApp() {
|
||||
if(!this.isLoggedIn) return;
|
||||
const token = localStorage.getItem('token');
|
||||
try {
|
||||
const res = await fetch('/api/my_vehicles', {
|
||||
headers: { 'Authorization': 'Bearer ' + token }
|
||||
});
|
||||
if(res.ok) {
|
||||
this.myCars = await res.json();
|
||||
} else if(res.status === 401) {
|
||||
this.logout();
|
||||
}
|
||||
} catch(e) { console.error("Hiba az adatok betöltésekor"); }
|
||||
}
|
||||
},
|
||||
mounted() { if(this.isLoggedIn) this.initApp(); }
|
||||
}).mount('#app')
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
203
code-server-config/data/User/History/-52e5c41d/UE2n.html
Executable file
203
code-server-config/data/User/History/-52e5c41d/UE2n.html
Executable file
@@ -0,0 +1,203 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="hu">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Service Finder - Profi Flotta</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; }
|
||||
.auth-wrapper { height: 100vh; display: flex; align-items: center; justify-content: center; }
|
||||
.auth-card { background: white; padding: 40px; border-radius: 20px; box-shadow: 0 10px 30px rgba(0,0,0,0.1); width: 100%; max-width: 400px; }
|
||||
.main-container { max-width: 1000px; margin: 30px auto; }
|
||||
.garage-card { border: none; border-radius: 12px; background: white; box-shadow: 0 2px 8px rgba(0,0,0,0.04); cursor: pointer; transition: 0.2s; 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; border-radius: 4px; }
|
||||
.tab-content-area { background: white; border-radius: 15px; padding: 25px; box-shadow: 0 5px 15px rgba(0,0,0,0.03); }
|
||||
.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; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="app">
|
||||
<div v-if="!isLoggedIn" class="auth-wrapper">
|
||||
<div class="auth-card">
|
||||
<h2 class="text-center text-primary mb-4 fw-bold">Service Finder</h2>
|
||||
<input type="email" class="form-control mb-3" v-model="authForm.email" placeholder="Email">
|
||||
<input type="password" class="form-control mb-3" v-model="authForm.password" placeholder="Jelszó">
|
||||
<button class="btn btn-primary w-100" @click="login">Belépés</button>
|
||||
<p class="text-center mt-3 small"><a href="#" @click="register">Regisztráció</a></p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-else>
|
||||
<nav class="navbar navbar-dark bg-primary px-4 py-2 shadow-sm">
|
||||
<div class="container">
|
||||
<span class="navbar-brand fw-bold" @click="view='dashboard'; initApp()" style="cursor:pointer">Service Finder</span>
|
||||
<button class="btn btn-outline-light btn-sm" @click="logout">Kijelentkezés</button>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<div class="container main-container">
|
||||
<div v-if="view === 'dashboard'">
|
||||
<div class="d-flex justify-content-between align-items-center mb-4">
|
||||
<h4 class="fw-bold">Garázsom</h4>
|
||||
<button class="btn btn-success" @click="showRegisterModal=true"><i class="bi bi-plus-lg"></i> Új Jármű</button>
|
||||
</div>
|
||||
<div class="row g-3">
|
||||
<div class="col-md-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'}"></div>
|
||||
<h5 class="fw-bold mb-0">{{ car.brand }}</h5>
|
||||
<div class="text-muted small mb-2">{{ car.model }}</div>
|
||||
<span class="plate-badge">{{ car.plate }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="view === 'detail' && selectedCar">
|
||||
<button class="btn btn-link ps-0 mb-3 text-decoration-none" @click="view='dashboard'"><i class="bi bi-arrow-left"></i> Vissza</button>
|
||||
<div class="tab-content-area mb-4">
|
||||
<div class="d-flex justify-content-between align-items-center mb-3">
|
||||
<div>
|
||||
<h2 class="fw-bold mb-0">{{ selectedCar.brand }} {{ selectedCar.model }}</h2>
|
||||
<span class="plate-badge fs-6">{{ selectedCar.plate }}</span>
|
||||
</div>
|
||||
<div class="d-flex gap-2">
|
||||
<button class="btn btn-danger btn-sm" @click="showErrorModal=true">Hiba Jelentése</button>
|
||||
<button class="btn btn-success btn-sm" @click="openCostModal">Költség +</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row g-2 text-center">
|
||||
<div class="col-4 border-end"><h6>Km állás</h6><div class="fw-bold">{{ selectedCar.mileage }}</div></div>
|
||||
<div class="col-4 border-end"><h6>Státusz</h6><div class="fw-bold" :class="selectedCar.status==='OK'?'text-success':'text-danger'">{{ selectedCar.status }}</div></div>
|
||||
<div class="col-4"><h6>Idei költség</h6><div class="fw-bold">{{ formatMoney(selectedCar.year_cost, selectedCar.currency) }}</div></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="showRegisterModal" class="modal-backdrop-custom">
|
||||
<div class="auth-card" style="max-width: 500px;">
|
||||
<h4 class="fw-bold mb-4">Jármű Regisztráció</h4>
|
||||
<div class="mb-3">
|
||||
<label class="small fw-bold">Modell kiválasztása</label>
|
||||
<select class="form-select" v-model="regForm.model_id">
|
||||
<option v-for="m in allModels" :value="m.id">{{ m.brand }} {{ m.model }}</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="row g-2 mb-3">
|
||||
<div class="col-6"><input type="text" class="form-control" placeholder="Rendszám" v-model="regForm.plate"></div>
|
||||
<div class="col-6"><input type="text" class="form-control" placeholder="Alvázszám (utolsó 6)" v-model="regForm.vin"></div>
|
||||
</div>
|
||||
<div class="row g-2 mb-3">
|
||||
<div class="col-6"><input type="number" class="form-control" placeholder="Km óra" v-model="regForm.mileage"></div>
|
||||
<div class="col-6"><input type="date" class="form-control" v-model="regForm.purchase_date"></div>
|
||||
</div>
|
||||
<div class="d-flex justify-content-end gap-2">
|
||||
<button class="btn btn-light" @click="showRegisterModal=false">Mégse</button>
|
||||
<button class="btn btn-primary" @click="submitRegister">Mentés</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="showCostModal" class="modal-backdrop-custom">
|
||||
<div class="auth-card" style="max-width: 500px;">
|
||||
<h4 class="fw-bold mb-4">Költség rögzítése</h4>
|
||||
<select class="form-select mb-3" v-model="costForm.type">
|
||||
<option value="FUEL">Üzemanyag</option>
|
||||
<option value="SERVICE_REPAIR">Szerviz/Javítás</option>
|
||||
<option value="TAX_WEIGHT">Súlyadó</option>
|
||||
<option value="INSURANCE_KGFB">Biztosítás (KGFB)</option>
|
||||
</select>
|
||||
<input type="number" class="form-control mb-3" placeholder="Összeg" v-model="costForm.amount">
|
||||
<div class="d-flex justify-content-end gap-2">
|
||||
<button class="btn btn-light" @click="showCostModal=false">Bezár</button>
|
||||
<button class="btn btn-success" @click="submitCost">Mentés</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
|
||||
<script>
|
||||
const { createApp } = Vue
|
||||
createApp({
|
||||
data() {
|
||||
return {
|
||||
isLoggedIn: !!localStorage.getItem('token'),
|
||||
view: 'dashboard',
|
||||
authForm: { email: '', password: '' },
|
||||
regForm: { model_id: '', plate: '', vin: '', mileage: '', purchase_date: '' },
|
||||
costForm: { type: 'FUEL', amount: '' },
|
||||
myCars: [],
|
||||
allModels: [],
|
||||
selectedCar: null,
|
||||
showRegisterModal: false,
|
||||
showCostModal: false,
|
||||
showErrorModal: false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
async login() {
|
||||
const p = new URLSearchParams(); p.append('username', this.authForm.email); p.append('password', this.authForm.password);
|
||||
const res = await fetch('/api/auth/login', { method: 'POST', body: p });
|
||||
if (res.ok) { const d = await res.json(); localStorage.setItem('token', d.access_token); this.isLoggedIn = true; this.initApp(); }
|
||||
},
|
||||
async register() {
|
||||
const f = new FormData(); f.append('email', this.authForm.email); f.append('password', this.authForm.password);
|
||||
await fetch('/api/auth/register', { method: 'POST', body: f }); alert("Sikeres regisztráció!");
|
||||
},
|
||||
logout() { localStorage.clear(); this.isLoggedIn = false; },
|
||||
|
||||
async apiFetch(url, options = {}) {
|
||||
const token = localStorage.getItem('token');
|
||||
options.headers = { ...options.headers, 'Authorization': 'Bearer ' + token };
|
||||
return await fetch(url, options);
|
||||
},
|
||||
|
||||
async initApp() {
|
||||
if(!this.isLoggedIn) return;
|
||||
const r1 = await this.apiFetch('/api/my_vehicles'); if(r1.ok) this.myCars = await r1.json();
|
||||
const r2 = await fetch('/api/vehicles'); if(r2.ok) this.allModels = await r2.json();
|
||||
},
|
||||
|
||||
async openVehicleDetail(id) {
|
||||
const r = await this.apiFetch('/api/vehicle/' + id);
|
||||
if(r.ok) { this.selectedCar = await r.json(); this.view = 'detail'; }
|
||||
},
|
||||
|
||||
async submitRegister() {
|
||||
const r = await this.apiFetch('/api/register', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify(this.regForm)
|
||||
});
|
||||
if(r.ok) { this.showRegisterModal = false; this.initApp(); }
|
||||
},
|
||||
|
||||
async submitCost() {
|
||||
const fd = new FormData();
|
||||
fd.append('vehicle_id', this.selectedCar.id);
|
||||
fd.append('cost_type', this.costForm.type);
|
||||
fd.append('amount', this.costForm.amount);
|
||||
fd.append('currency', this.selectedCar.currency || 'HUF');
|
||||
fd.append('date_str', new Date().toISOString().split('T')[0]);
|
||||
fd.append('mileage', this.selectedCar.mileage);
|
||||
|
||||
const r = await this.apiFetch('/api/add_cost', { method: 'POST', body: fd });
|
||||
if(r.ok) { this.showCostModal = false; this.openVehicleDetail(this.selectedCar.id); }
|
||||
},
|
||||
|
||||
formatMoney(a, c) { return new Intl.NumberFormat('hu-HU', { style: 'currency', currency: c || 'HUF' }).format(a || 0); }
|
||||
},
|
||||
mounted() { this.initApp(); }
|
||||
}).mount('#app')
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
280
code-server-config/data/User/History/-52e5c41d/W3D5.html
Executable file
280
code-server-config/data/User/History/-52e5c41d/W3D5.html
Executable file
@@ -0,0 +1,280 @@
|
||||
Senior PM-ként mondom: Vettem az adást! 📡 A motor (Backend) már duruzsol, most építsük rá a műszerfalat (Frontend).
|
||||
|
||||
Ez a frissítés a rendszer leglátványosabb része lesz. Amikor rákattintasz egy autóra a Garázsban, az nem csak egy sima ablakot nyit meg, hanem egy teljes Jármű Irányítópultot, három fő füllel:
|
||||
|
||||
Áttekintés (Overview): A legfontosabb adatok (Rendszám, Alvázszám, Aktuális km).
|
||||
|
||||
Szervizkönyv (History): (Egyelőre üres, de ide jönnek majd a bejegyzések).
|
||||
|
||||
Beállítások: Itt lehet majd sofőrt cserélni vagy eladni az autót.
|
||||
|
||||
🎨 Frontend 7.0 – A Részletes Adatlap
|
||||
|
||||
Másold be ezt a kódot. Figyeld meg a formatCurrency függvényt a script alján! Ez már felkészült arra, hogy ha a felhasználó német (EUR), akkor úgy írja ki az összegeket, ha magyar (HUF), akkor meg úgy.
|
||||
Bash
|
||||
|
||||
echo "--- 🖥️ Frontend 7.0: Jármű Részletes Adatlap (Detail View) ---"
|
||||
|
||||
cat <<EOF > frontend/index.html
|
||||
<!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ó */
|
||||
.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; }
|
||||
|
||||
/* Csempé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; }
|
||||
|
||||
/* DETAIL VIEW (Adatlap) */
|
||||
.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%; }
|
||||
.stat-value { font-size: 1.5rem; font-weight: bold; color: #212529; }
|
||||
.stat-label { font-size: 0.85rem; color: #6c757d; text-transform: uppercase; }
|
||||
|
||||
/* Detail 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; }
|
||||
|
||||
/* Csapat táblázat */
|
||||
.avatar-circle { width: 40px; height: 40px; background: #e9ecef; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: bold; }
|
||||
.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 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="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" @click="openVehicleDetail(car.vehicle_id)">
|
||||
<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 p-4 text-center text-muted" v-if="team.length === 0">Nincs adat</div>
|
||||
<div class="card border-0 shadow-sm rounded-4 overflow-hidden" v-else>
|
||||
<table class="table table-hover align-middle mb-0">
|
||||
<thead class="bg-light"><tr><th class="ps-4">Név</th><th>Szerepkör</th><th>Ország</th><th>Csatlakozott</th></tr></thead>
|
||||
<tbody>
|
||||
<tr v-for="member in team">
|
||||
<td class="ps-4"><div class="fw-bold">Munkatárs</div><div class="small text-muted">{{member.email}}</div></td>
|
||||
<td>{{translateRole(member.role)}}</td>
|
||||
<td>{{member.country}}</td>
|
||||
<td>{{member.joined_at ? member.joined_at.split('T')[0] : ''}}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="view === 'detail' && selectedCar">
|
||||
|
||||
<button class="btn btn-link text-decoration-none mb-3 ps-0" @click="view = 'dashboard'">
|
||||
<i class="bi bi-arrow-left me-1"></i> Vissza a Garázsba
|
||||
</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="bg-primary text-white rounded-circle d-flex align-items-center justify-content-center me-3" style="width: 60px; height: 60px;">
|
||||
<i class="bi bi-car-front fs-2"></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 class="badge bg-secondary">{{ translateRole(selectedCar.role) }}</span>
|
||||
<span class="text-muted small ms-2"><i class="bi bi-upc-scan me-1"></i>{{ selectedCar.vin }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-end">
|
||||
<button class="btn btn-outline-danger me-2"><i class="bi bi-exclamation-triangle"></i> Hiba jelentése</button>
|
||||
<button class="btn btn-success"><i class="bi bi-plus-lg"></i> Költség / Szerviz</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<ul class="nav nav-tabs detail-tabs mb-0">
|
||||
<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="detailTab = 'history'">Szervizkönyv</a></li>
|
||||
<li class="nav-item"><a class="nav-link" :class="{active: detailTab === 'settings'}" href="#" @click="detailTab = 'settings'">Beállítások</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 text-primary">{{ selectedCar.mileage.toLocaleString() }} km</div>
|
||||
<div class="stat-label">Aktuális óraállás</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<div class="stat-box">
|
||||
<div class="stat-value text-success">OK</div>
|
||||
<div class="stat-label">Műszaki állapot</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<div class="stat-box">
|
||||
<div class="stat-value">{{ formatCurrency(0, selectedCar.currency) }}</div>
|
||||
<div class="stat-label">Idei költés</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<div class="stat-box">
|
||||
<div class="stat-value text-muted">{{ selectedCar.start_date }}</div>
|
||||
<div class="stat-label">Flottába került</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h5 class="fw-bold mt-5 mb-3">Legutóbbi aktivitás</h5>
|
||||
<div class="alert alert-light border text-center text-muted py-4">
|
||||
<i class="bi bi-clock-history fs-3 d-block mb-2"></i>
|
||||
Még nincs rögzített esemény.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="detailTab === 'history'">
|
||||
<div class="text-center py-5 text-muted">
|
||||
<i class="bi bi-tools display-4 mb-3"></i>
|
||||
<h5>A szerviztörténet üres</h5>
|
||||
<p>Rögzíts tankolást vagy szervizt a jobb felső gombbal!</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="detailTab === 'settings'">
|
||||
<h5 class="text-danger fw-bold">Veszélyzóna</h5>
|
||||
<hr>
|
||||
<p>Jármű eltávolítása a flottából vagy eladás.</p>
|
||||
<button class="btn btn-outline-danger">Jármű archiválása</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="showInviteModal" class="modal-backdrop-custom">
|
||||
<div class="modal-content-custom">
|
||||
<h4>Meghívás</h4>
|
||||
<input class="form-control my-3" v-model="inviteForm.email" placeholder="Email cím">
|
||||
<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" @click="sendInvite">Küldés</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="view === 'wizard'" class="wizard-card"><button @click="view='dashboard'">Mégse</button> <h3>Varázsló...</h3></div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
|
||||
<script>
|
||||
const { createApp } = Vue
|
||||
|
||||
createApp({
|
||||
data() {
|
||||
return {
|
||||
view: 'dashboard', // dashboard | detail | wizard
|
||||
activeTab: 'garage', // garage | team
|
||||
detailTab: 'overview',// overview | history | settings
|
||||
|
||||
showInviteModal: false,
|
||||
inviteForm: { email: '', role: 'DRIVER', access_level: 'LOG_ONLY' },
|
||||
|
||||
myCars: [],
|
||||
team: [],
|
||||
selectedCar: null // Ide töltjük be a részleteket
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
translateRole(role) {
|
||||
const map = { 'OWNER': 'Tulajdonos', 'DRIVER': 'Sofőr', 'FLEET_MANAGER': 'Flotta Menedzser' };
|
||||
return map[role] || role;
|
||||
},
|
||||
formatCurrency(amount, currency) {
|
||||
// Ez a "Varázsló", ami a böngésző nyelvétől függően formáz
|
||||
try {
|
||||
return new Intl.NumberFormat(navigator.language, { style: 'currency', currency: currency || 'HUF' }).format(amount);
|
||||
} catch (e) { return amount + " " + currency; }
|
||||
},
|
||||
async fetchData() {
|
||||
const res1 = await fetch('/api/my_vehicles');
|
||||
this.myCars = await res1.json();
|
||||
const res2 = await fetch('/api/fleet/members');
|
||||
this.team = await res2.json();
|
||||
},
|
||||
async openVehicleDetail(id) {
|
||||
// Lekérjük a részletes adatokat
|
||||
try {
|
||||
const res = await fetch('/api/vehicle/' + id);
|
||||
if(res.ok) {
|
||||
this.selectedCar = await res.json();
|
||||
this.view = 'detail';
|
||||
this.detailTab = 'overview';
|
||||
} else { alert("Hiba az adatok betöltésekor"); }
|
||||
} catch(e) { console.error(e); }
|
||||
},
|
||||
async sendInvite() { /* ... (előző kód) ... */ alert("Meghívó elküldve!"); this.showInviteModal = false; },
|
||||
switchToWizard() { this.view = 'wizard'; }
|
||||
},
|
||||
mounted() {
|
||||
this.fetchData();
|
||||
}
|
||||
}).mount('#app')
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
216
code-server-config/data/User/History/-52e5c41d/Ycqg.html
Executable file
216
code-server-config/data/User/History/-52e5c41d/Ycqg.html
Executable file
@@ -0,0 +1,216 @@
|
||||
<!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; display: flex; flex-direction: column; justify-content: center; }
|
||||
.stat-value { font-size: 1.5rem; font-weight: bold; color: #212529; }
|
||||
.stat-label { font-size: 0.85rem; color: #6c757d; text-transform: uppercase; margin-top: 5px; }
|
||||
.tab-content-area { background: white; border-radius: 15px; padding: 30px; box-shadow: 0 5px 15px rgba(0,0,0,0.03); }
|
||||
|
||||
.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</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-3">
|
||||
<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-3"><div class="stat-box"><div class="stat-value">{{ formatMoney(selectedCar.year_cost, selectedCar.currency) }}</div><div class="stat-label">Idei költés</div></div></div>
|
||||
<div class="col-md-3">
|
||||
<div v-if="selectedCar.status !== 'OK' && selectedCar.status !== null" class="alert alert-danger h-100 shadow-sm border-danger p-2 m-0 d-flex flex-column justify-content-center">
|
||||
<h6 class="fw-bold text-danger mb-1" style="font-size: 0.9rem">Hiba:</h6><p class="mb-2 text-dark small" style="line-height: 1.2">{{ selectedCar.current_issue }}</p><button class="btn btn-sm btn-danger w-100" @click="resolveIssue">Megjavítva</button>
|
||||
</div>
|
||||
<div v-else class="stat-box text-muted border bg-light"><div class="fs-4"><i class="bi bi-shield-check"></i></div><div class="stat-label">Nincs hiba</div></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="detailTab === 'history'">
|
||||
<div v-if="history.length === 0" class="text-center py-5 text-muted">Még üres a szervizkönyv.</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>
|
||||
<div class="d-flex align-items-center gap-2 text-muted small mt-1">
|
||||
<span v-if="item.mileage > 0"><i class="bi bi-speedometer2 me-1"></i>{{ item.mileage.toLocaleString() }} km</span>
|
||||
<a v-if="item.document_url" :href="item.document_url" target="_blank" class="badge bg-primary text-decoration-none">
|
||||
<i class="bi bi-paperclip me-1"></i>Csatolmány
|
||||
</a>
|
||||
</div>
|
||||
</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</option><option value="INSURANCE">📄 Biztosítás</option><option value="TAX">🏛️ Adó</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</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">Megjegyzés</label><textarea class="form-control" rows="2" v-model="costForm.description"></textarea></div>
|
||||
|
||||
<div class="col-12">
|
||||
<label class="form-label fw-bold"><i class="bi bi-paperclip me-1"></i>Bizonylat / Számla (NAS)</label>
|
||||
<input type="file" class="form-control" ref="fileInput">
|
||||
</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</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'; },
|
||||
openCostModal() { 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; },
|
||||
|
||||
// --- MÓDOSÍTOTT SUBMIT: FORM DATA ---
|
||||
async submitCost() {
|
||||
const formData = new FormData();
|
||||
formData.append('vehicle_id', this.selectedCar.id);
|
||||
formData.append('cost_type', this.costForm.type);
|
||||
formData.append('amount', this.costForm.amount);
|
||||
formData.append('currency', this.costForm.currency);
|
||||
formData.append('mileage', this.costForm.mileage);
|
||||
formData.append('date_str', this.costForm.date);
|
||||
formData.append('description', this.costForm.description);
|
||||
|
||||
// Fájl hozzáadása, ha van
|
||||
const fileInput = this.$refs.fileInput;
|
||||
if(fileInput.files.length > 0) {
|
||||
formData.append('file', fileInput.files[0]);
|
||||
}
|
||||
|
||||
try {
|
||||
const res = await fetch('/api/add_cost', {
|
||||
method: 'POST',
|
||||
body: formData // Nem JSON, hanem FormData!
|
||||
});
|
||||
if (res.ok) {
|
||||
alert("Költség és fájl rögzítve!");
|
||||
this.showCostModal = false;
|
||||
this.openVehicleDetail(this.selectedCar.id);
|
||||
if(this.detailTab === 'history') this.loadHistory();
|
||||
}
|
||||
} catch(e) { alert("Hiba a feltöltéskor!"); }
|
||||
},
|
||||
|
||||
async loadHistory() { this.detailTab = 'history'; const res = await fetch('/api/vehicle/' + this.selectedCar.id + '/history'); this.history = await res.json(); },
|
||||
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; },
|
||||
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>
|
||||
228
code-server-config/data/User/History/-52e5c41d/eRba.html
Executable file
228
code-server-config/data/User/History/-52e5c41d/eRba.html
Executable file
@@ -0,0 +1,228 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="hu">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Service Finder - Flotta Kezelő</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; }
|
||||
/* Auth Képernyő */
|
||||
.auth-wrapper { height: 100vh; display: flex; align-items: center; justify-content: center; }
|
||||
.auth-card { background: white; padding: 40px; border-radius: 20px; box-shadow: 0 10px 30px rgba(0,0,0,0.1); width: 100%; max-width: 400px; }
|
||||
|
||||
/* Alkalmazás stílusok */
|
||||
.main-container { max-width: 1000px; margin: 30px auto; }
|
||||
.garage-card { border: none; border-radius: 12px; background: white; box-shadow: 0 2px 8px rgba(0,0,0,0.04); cursor: pointer; transition: 0.2s; 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; border-radius: 4px; }
|
||||
.history-item { border-left: 3px solid #e9ecef; padding-left: 20px; padding-bottom: 20px; position: relative; }
|
||||
.history-icon { position: absolute; left: -11px; top: 0; width: 20px; height: 20px; border-radius: 50%; border: 2px solid white; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="app">
|
||||
<div v-if="!isLoggedIn" class="auth-wrapper">
|
||||
<div class="auth-card">
|
||||
<h2 class="fw-bold mb-4 text-center text-primary"><i class="bi bi-speedometer2"></i> Service Finder</h2>
|
||||
<div v-if="authView === 'login'">
|
||||
<input type="email" class="form-control mb-3" v-model="authForm.email" placeholder="Email">
|
||||
<input type="password" class="form-control mb-3" v-model="authForm.password" placeholder="Jelszó">
|
||||
<button class="btn btn-primary w-100 py-2" @click="login">Bejelentkezés</button>
|
||||
<p class="text-center mt-3 small">Nincs fiókod? <a href="#" @click="authView='register'">Regisztrálj!</a></p>
|
||||
</div>
|
||||
<div v-if="authView === 'register'">
|
||||
<input type="email" class="form-control mb-3" v-model="authForm.email" placeholder="Email">
|
||||
<input type="password" class="form-control mb-3" v-model="authForm.password" placeholder="Jelszó">
|
||||
<button class="btn btn-success w-100 py-2" @click="register">Regisztráció</button>
|
||||
<p class="text-center mt-3 small"><a href="#" @click="authView='login'">Vissza a belépéshez</a></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-else>
|
||||
<nav class="navbar navbar-dark bg-primary shadow-sm px-4 py-2">
|
||||
<div class="container">
|
||||
<span class="navbar-brand fw-bold"><i class="bi bi-speedometer2 me-2"></i>Service Finder</span>
|
||||
<div class="d-flex align-items-center">
|
||||
<span class="text-white me-3 small">{{ userEmail }}</span>
|
||||
<button class="btn btn-outline-light btn-sm" @click="logout"><i class="bi bi-box-arrow-right"></i></button>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<div class="container main-container">
|
||||
<div v-if="view === 'dashboard'">
|
||||
<div class="d-flex justify-content-between mb-4">
|
||||
<h4 class="fw-bold">Saját Járművek</h4>
|
||||
<button class="btn btn-primary btn-sm"><i class="bi bi-plus-lg"></i> Új jármű</button>
|
||||
</div>
|
||||
<div class="row g-3">
|
||||
<div class="col-md-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'}"></div>
|
||||
<h5 class="fw-bold mb-0">{{ car.brand }}</h5>
|
||||
<div class="text-muted small mb-2">{{ car.model }}</div>
|
||||
<div class="d-flex justify-content-between align-items-center">
|
||||
<span class="plate-badge">{{ car.plate }}</span>
|
||||
<i v-if="car.status !== 'OK'" class="bi bi-exclamation-triangle text-danger"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="view === 'detail' && selectedCar">
|
||||
<button class="btn btn-link text-decoration-none ps-0 mb-3" @click="view='dashboard'"><i class="bi bi-arrow-left"></i> Vissza a listához</button>
|
||||
<div class="detail-header shadow-sm border">
|
||||
<div class="d-flex justify-content-between align-items-center">
|
||||
<div>
|
||||
<h2 class="fw-bold mb-1">{{ selectedCar.brand }} {{ selectedCar.model }}</h2>
|
||||
<span class="plate-badge fs-6">{{ selectedCar.plate }}</span>
|
||||
</div>
|
||||
<div class="text-end">
|
||||
<button class="btn btn-success" @click="openCostModal"><i class="bi bi-plus-lg"></i> Költség</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="tab-content-area shadow-sm">
|
||||
<div class="row text-center">
|
||||
<div class="col-4 border-end"><h6>Km állás</h6><div class="fw-bold fs-4">{{ selectedCar.mileage }}</div></div>
|
||||
<div class="col-4 border-end"><h6>Idei költség</h6><div class="fw-bold fs-4">{{ formatMoney(selectedCar.year_cost, selectedCar.currency) }}</div></div>
|
||||
<div class="col-4"><h6>Állapot</h6><div :class="selectedCar.status === 'OK' ? 'text-success' : 'text-danger'" class="fw-bold fs-4">{{ selectedCar.status }}</div></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="showCostModal" class="modal-backdrop-custom auth-wrapper" style="position:fixed; top:0; left:0; width:100%; background:rgba(0,0,0,0.5); z-index:9999;">
|
||||
<div class="auth-card" style="max-width: 500px;">
|
||||
<h4 class="fw-bold mb-4">Új Költség Rögzítése</h4>
|
||||
<div class="row g-3">
|
||||
<div class="col-6">
|
||||
<label class="small fw-bold">Kategória</label>
|
||||
<select class="form-select" v-model="costForm.mainCategory" @change="updateSubCategory">
|
||||
<option v-for="(val, key) in costDefinitions" :value="key">{{ val.label }}</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<label class="small fw-bold">Típus</label>
|
||||
<select class="form-select" v-model="costForm.subCategory">
|
||||
<option v-for="(label, key) in currentSubOptions" :value="key">{{ label }}</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="col-6"><input type="number" class="form-control" v-model="costForm.amount" placeholder="Összeg"></div>
|
||||
<div class="col-6"><select class="form-select" v-model="costForm.currency"><option value="HUF">HUF</option><option value="EUR">EUR</option></select></div>
|
||||
</div>
|
||||
<div class="d-flex justify-content-end mt-4">
|
||||
<button class="btn btn-light me-2" @click="showCostModal=false">Mégse</button>
|
||||
<button class="btn btn-success" @click="submitCost">Mentés</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
|
||||
<script>
|
||||
const { createApp } = Vue
|
||||
createApp({
|
||||
data() {
|
||||
return {
|
||||
isLoggedIn: !!localStorage.getItem('token'),
|
||||
userEmail: '',
|
||||
authView: 'login',
|
||||
view: 'dashboard',
|
||||
authForm: { email: '', password: '' },
|
||||
myCars: [],
|
||||
selectedCar: null,
|
||||
showCostModal: false,
|
||||
costForm: { mainCategory: '', subCategory: '', amount: '', currency: 'HUF' },
|
||||
costDefinitions: {}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
currentSubOptions() { return this.costDefinitions[this.costForm.mainCategory]?.subs || null; }
|
||||
},
|
||||
methods: {
|
||||
// --- AUTH ---
|
||||
async login() {
|
||||
const fd = new FormData();
|
||||
fd.append('username', this.authForm.email);
|
||||
fd.append('password', this.authForm.password);
|
||||
const res = await fetch('/api/auth/login', { method: 'POST', body: fd });
|
||||
if(res.ok) {
|
||||
const data = await res.json();
|
||||
localStorage.setItem('token', data.access_token);
|
||||
this.isLoggedIn = true;
|
||||
this.initApp();
|
||||
} else { alert("Belépés elutasítva!"); }
|
||||
},
|
||||
async register() {
|
||||
const fd = new FormData();
|
||||
fd.append('email', this.authForm.email);
|
||||
fd.append('password', this.authForm.password);
|
||||
await fetch('/api/auth/register', { method: 'POST', body: fd });
|
||||
alert("Sikeres regisztráció! Jelentkezz be.");
|
||||
this.authView = 'login';
|
||||
},
|
||||
logout() { localStorage.removeItem('token'); this.isLoggedIn = false; },
|
||||
|
||||
// --- API HELPERS (JWT Token-nel!) ---
|
||||
async apiFetch(url, options = {}) {
|
||||
const token = localStorage.getItem('token');
|
||||
options.headers = { ...options.headers, 'Authorization': `Bearer ${token}` };
|
||||
const res = await fetch(url, options);
|
||||
if(res.status === 401) this.logout();
|
||||
return res;
|
||||
},
|
||||
|
||||
// --- ALKALMAZÁS LOGIKA ---
|
||||
async initApp() {
|
||||
if(!this.isLoggedIn) return;
|
||||
const resCars = await this.apiFetch('/api/my_vehicles');
|
||||
this.myCars = await resCars.json();
|
||||
const resTypes = await fetch('/api/ref/cost_types'); // Ez publikus is lehet
|
||||
this.costDefinitions = await resTypes.json();
|
||||
},
|
||||
async openVehicleDetail(id) {
|
||||
const res = await this.apiFetch(`/api/vehicle/${id}`);
|
||||
this.selectedCar = await res.json();
|
||||
this.view = 'detail';
|
||||
},
|
||||
openCostModal() {
|
||||
this.costForm.mainCategory = Object.keys(this.costDefinitions)[0];
|
||||
this.updateSubCategory();
|
||||
this.showCostModal = true;
|
||||
},
|
||||
updateSubCategory() {
|
||||
const subs = this.costDefinitions[this.costForm.mainCategory]?.subs;
|
||||
this.costForm.subCategory = subs ? Object.keys(subs)[0] : '';
|
||||
},
|
||||
async submitCost() {
|
||||
const fd = new FormData();
|
||||
fd.append('vehicle_id', this.selectedCar.id);
|
||||
fd.append('cost_type', this.costForm.subCategory || this.costForm.mainCategory);
|
||||
fd.append('amount', this.costForm.amount);
|
||||
fd.append('currency', this.costForm.currency);
|
||||
fd.append('date_str', new Date().toISOString().split('T')[0]);
|
||||
fd.append('mileage', this.selectedCar.mileage);
|
||||
|
||||
const res = await this.apiFetch('/api/add_cost', { method: 'POST', body: fd });
|
||||
if(res.ok) {
|
||||
this.showCostModal = false;
|
||||
this.openVehicleDetail(this.selectedCar.id);
|
||||
}
|
||||
},
|
||||
formatMoney(amount, curr) { return new Intl.NumberFormat('hu-HU', { style: 'currency', currency: curr }).format(amount); }
|
||||
},
|
||||
mounted() { this.initApp(); }
|
||||
}).mount('#app')
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
195
code-server-config/data/User/History/-52e5c41d/eVfD.html
Executable file
195
code-server-config/data/User/History/-52e5c41d/eVfD.html
Executable file
@@ -0,0 +1,195 @@
|
||||
<!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; display: flex; flex-direction: column; justify-content: center; }
|
||||
.stat-value { font-size: 1.5rem; font-weight: bold; color: #212529; }
|
||||
.stat-label { font-size: 0.85rem; color: #6c757d; text-transform: uppercase; margin-top: 5px; }
|
||||
.tab-content-area { background: white; border-radius: 15px; padding: 30px; box-shadow: 0 5px 15px rgba(0,0,0,0.03); }
|
||||
|
||||
.history-item { border-left: 3px solid #e9ecef; padding-left: 20px; padding-bottom: 20px; position: relative; }
|
||||
.history-item:last-child { border-left: none; }
|
||||
|
||||
/* ÚJ IKON SZÍNEK */
|
||||
.history-icon { position: absolute; left: -11px; top: 0; width: 20px; height: 20px; background: white; border-radius: 50%; border: 2px solid #6c757d; }
|
||||
.history-icon.FUEL { border-color: #198754; background: #198754; } /* Zöld */
|
||||
.history-icon.PURCHASE { border-color: #0d6efd; background: #0d6efd; } /* Kék */
|
||||
.history-icon.SERVICE { border-color: #fd7e14; background: #fd7e14; } /* Narancs */
|
||||
.history-icon.INSURANCE { border-color: #6610f2; background: #6610f2; } /* Lila */
|
||||
.history-icon.TAX { border-color: #dc3545; background: #dc3545; } /* Piros */
|
||||
.history-icon.EQUIPMENT { border-color: #20c997; background: #20c997; } /* Türkiz (Felszerelés) */
|
||||
.history-icon.OPERATIONAL { border-color: #6f42c1; background: #6f42c1; }/* Sötétlila (Üzemeltetés) */
|
||||
.history-icon.FINE { border-color: #212529; background: #212529; } /* Fekete (Bírság) */
|
||||
|
||||
.history-icon.ISSUE_REPORT { border-color: #dc3545; background: #white; border-width: 4px; }
|
||||
|
||||
.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</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-3">
|
||||
<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-3"><div class="stat-box"><div class="stat-value">{{ formatMoney(selectedCar.year_cost, selectedCar.currency) }}</div><div class="stat-label">Idei költés</div></div></div>
|
||||
<div class="col-md-3">
|
||||
<div v-if="selectedCar.status !== 'OK' && selectedCar.status !== null" class="alert alert-danger h-100 shadow-sm border-danger p-2 m-0 d-flex flex-column justify-content-center"><h6 class="fw-bold text-danger mb-1" style="font-size: 0.9rem">Hiba:</h6><p class="mb-2 text-dark small" style="line-height: 1.2">{{ selectedCar.current_issue }}</p><button class="btn btn-sm btn-danger w-100" @click="resolveIssue">Megjavítva</button></div><div v-else class="stat-box text-muted border bg-light"><div class="fs-4"><i class="bi bi-shield-check"></i></div><div class="stat-label">Nincs hiba</div></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="detailTab === 'history'">
|
||||
<div v-if="history.length === 0" class="text-center py-5 text-muted">Még üres a szervizkönyv.</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.split('_')[0]"></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>
|
||||
<div class="d-flex align-items-center gap-2 text-muted small mt-1"><span v-if="item.mileage > 0"><i class="bi bi-speedometer2 me-1"></i>{{ item.mileage.toLocaleString() }} km</span><a v-if="item.document_url" :href="item.document_url" target="_blank" class="badge bg-primary text-decoration-none"><i class="bi bi-paperclip me-1"></i>Csatolmány</a></div>
|
||||
</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-6"><label class="form-label fw-bold small">Kategória</label><select class="form-select" v-model="costForm.mainCategory" @change="updateSubCategory"><option v-for="(val, key) in costDefinitions" :value="key">{{ val.label }}</option></select></div>
|
||||
<div class="col-6"><label class="form-label fw-bold small">Típus</label><select class="form-select" v-model="costForm.subCategory" :disabled="!currentSubOptions"><option v-for="(label, key) in currentSubOptions" :value="key">{{ label }}</option></select></div>
|
||||
<div class="col-7"><label class="form-label fw-bold small">Összeg</label><input type="number" class="form-control" v-model="costForm.amount"></div>
|
||||
<div class="col-5"><label class="form-label fw-bold small">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 small">Km állás</label><input type="number" class="form-control" v-model="costForm.mileage"></div>
|
||||
<div class="col-6"><label class="form-label fw-bold small">Dátum</label><input type="date" class="form-control" v-model="costForm.date"></div>
|
||||
<div class="col-12"><label class="form-label small">Megjegyzés</label><textarea class="form-control" rows="2" v-model="costForm.description"></textarea></div>
|
||||
<div class="col-12"><label class="form-label fw-bold small"><i class="bi bi-paperclip me-1"></i>Bizonylat</label><input type="file" class="form-control" ref="fileInput"></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</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: { mainCategory: '', subCategory: '', amount: 0, currency: 'HUF', mileage: 0, date: '', description: '' },
|
||||
costDefinitions: {}
|
||||
}},
|
||||
computed: {
|
||||
currentSubOptions() { return (this.costDefinitions[this.costForm.mainCategory]) ? this.costDefinitions[this.costForm.mainCategory].subs : null; }
|
||||
},
|
||||
methods: {
|
||||
async fetchRefData() {
|
||||
const res = await fetch('/api/ref/cost_types');
|
||||
this.costDefinitions = await res.json();
|
||||
this.costForm.mainCategory = Object.keys(this.costDefinitions)[0];
|
||||
},
|
||||
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'; },
|
||||
|
||||
openCostModal() {
|
||||
this.costForm = { mainCategory: Object.keys(this.costDefinitions)[0], subCategory: '', amount: '', currency: this.selectedCar.currency || 'HUF', mileage: this.selectedCar.mileage, date: new Date().toISOString().split('T')[0], description: '' };
|
||||
this.updateSubCategory();
|
||||
this.showCostModal = true;
|
||||
},
|
||||
updateSubCategory() {
|
||||
if(!this.costDefinitions[this.costForm.mainCategory]) return;
|
||||
const subs = this.costDefinitions[this.costForm.mainCategory].subs;
|
||||
this.costForm.subCategory = subs ? Object.keys(subs)[0] : '';
|
||||
},
|
||||
async submitCost() {
|
||||
const finalType = this.costForm.subCategory || this.costForm.mainCategory;
|
||||
const formData = new FormData();
|
||||
formData.append('vehicle_id', this.selectedCar.id); formData.append('cost_type', finalType); formData.append('amount', this.costForm.amount); formData.append('currency', this.costForm.currency); formData.append('mileage', this.costForm.mileage); formData.append('date_str', this.costForm.date); formData.append('description', this.costForm.description);
|
||||
const fileInput = this.$refs.fileInput; if(fileInput.files.length > 0) formData.append('file', fileInput.files[0]);
|
||||
try {
|
||||
const res = await fetch('/api/add_cost', { method: 'POST', body: formData });
|
||||
if (res.ok) { alert("Költség rögzítve!"); this.showCostModal = false; this.openVehicleDetail(this.selectedCar.id); if(this.detailTab === 'history') this.loadHistory(); } else { alert("Hiba: " + JSON.stringify(await res.json())); }
|
||||
} catch(e) { alert("Szerver hiba!"); }
|
||||
},
|
||||
async loadHistory() { this.detailTab = 'history'; const res = await fetch('/api/vehicle/' + this.selectedCar.id + '/history'); this.history = await res.json(); },
|
||||
formatMoney(amount, currency) { try { return new Intl.NumberFormat('hu-HU', { style: 'currency', currency: currency }).format(amount); } catch(e) { return amount + " " + currency; } },
|
||||
translateType(type) {
|
||||
if(!this.costDefinitions) return type;
|
||||
if (this.costDefinitions[type]) return this.costDefinitions[type].label;
|
||||
for (const main in this.costDefinitions) {
|
||||
if (this.costDefinitions[main].subs && this.costDefinitions[main].subs[type]) return this.costDefinitions[main].subs[type];
|
||||
}
|
||||
const map = { 'ISSUE_REPORT': 'Hiba Bejelentés', 'ISSUE_RESOLVED': 'Hiba Javítva', 'MILEAGE_UPDATE': 'Km Korrekció' };
|
||||
return map[type] || type;
|
||||
},
|
||||
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(); this.fetchRefData(); }
|
||||
}).mount('#app')
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
157
code-server-config/data/User/History/-52e5c41d/eiJs.html
Executable file
157
code-server-config/data/User/History/-52e5c41d/eiJs.html
Executable file
@@ -0,0 +1,157 @@
|
||||
<!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; } /* PIROS CSÍK */
|
||||
|
||||
.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; }
|
||||
.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" :class="{active: activeTab === 'garage'}" href="#" @click="activeTab = 'garage'">Garázs</a></li>
|
||||
<li class="nav-item"><a class="nav-link" :class="{active: activeTab === 'team'}" href="#" @click="activeTab = 'team'">Csapat</a></li>
|
||||
</ul>
|
||||
|
||||
<div v-if="activeTab === 'garage'" 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 v-if="activeTab === 'team'"><h3>Csapat...</h3></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>
|
||||
<button class="btn btn-outline-danger" @click="openErrorModal"><i class="bi bi-exclamation-circle-fill me-1"></i> Jelentés</button>
|
||||
</div>
|
||||
|
||||
<div class="row g-4">
|
||||
<div class="col-md-3">
|
||||
<div class="stat-box"><div class="stat-value">{{ selectedCar.mileage }}</div><div class="stat-label">Km</div></div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div v-if="selectedCar.status !== 'OK' && selectedCar.status !== null" class="alert alert-danger h-100">
|
||||
<h6 class="fw-bold">Jelentett hiba:</h6>
|
||||
<p class="mb-0">{{ selectedCar.current_issue }}</p>
|
||||
</div>
|
||||
<div v-else class="alert alert-success h-100 d-flex align-items-center justify-content-center">Minden rendben.</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">Hiba bejelentése</h4>
|
||||
<textarea class="form-control my-3" rows="3" v-model="errorForm.description" placeholder="Mi a gond?"></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 (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" @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', activeTab: 'garage', showErrorModal: false, myCars: [], selectedCar: null, errorForm: {description: '', is_critical: false} } },
|
||||
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';
|
||||
},
|
||||
openErrorModal() { this.errorForm = {description: '', is_critical: false}; this.showErrorModal = true; },
|
||||
|
||||
async submitError() {
|
||||
// VALÓS API HÍVÁS
|
||||
try {
|
||||
const res = 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
|
||||
})
|
||||
});
|
||||
if (res.ok) {
|
||||
alert("Hiba naplózva az adatbázisba!");
|
||||
this.showErrorModal = false;
|
||||
this.openVehicleDetail(this.selectedCar.id); // Adatok frissítése
|
||||
}
|
||||
} catch(e) { alert("Hiba a mentéskor!"); }
|
||||
}
|
||||
},
|
||||
mounted() { this.fetchData(); }
|
||||
}).mount('#app')
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
1
code-server-config/data/User/History/-52e5c41d/entries.json
Executable file
1
code-server-config/data/User/History/-52e5c41d/entries.json
Executable file
@@ -0,0 +1 @@
|
||||
{"version":1,"resource":"vscode-remote://192.168.100.43:8443/home/coder/project/frontend/index.html","entries":[{"id":"Rpxl.html","timestamp":1768942812487},{"id":"uiHD.html","timestamp":1768944736458},{"id":"W3D5.html","timestamp":1768945170064},{"id":"Smd7.html","timestamp":1768945219838},{"id":"JA3R.html","timestamp":1768945489618},{"id":"eiJs.html","timestamp":1768945771369},{"id":"J4V4.html","timestamp":1768946012393},{"id":"u9Y2.html","timestamp":1768946248437},{"id":"voAw.html","timestamp":1768946585191},{"id":"Ycqg.html","timestamp":1768946927538},{"id":"9eYi.html","timestamp":1768947157813},{"id":"0xVC.html","timestamp":1768948398804},{"id":"eVfD.html","timestamp":1768948761622},{"id":"SxEq.html","timestamp":1768952718461},{"id":"83UF.html","timestamp":1768953098851},{"id":"eRba.html","source":"undoRedo.source","timestamp":1768953103288},{"id":"SVyy.html","timestamp":1768953182984},{"id":"x8lC.html","timestamp":1768953329888},{"id":"UAc0.html","timestamp":1768954114635},{"id":"UE2n.html","timestamp":1768954243537},{"id":"tEyM.html","timestamp":1768954546782},{"id":"iTl3.html","timestamp":1768954770366},{"id":"E3XE.html","timestamp":1768954920487}]}
|
||||
207
code-server-config/data/User/History/-52e5c41d/iTl3.html
Executable file
207
code-server-config/data/User/History/-52e5c41d/iTl3.html
Executable file
@@ -0,0 +1,207 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="hu">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Service Finder - Full Control</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>
|
||||
:root { --primary: #0d6efd; --bg: #f8f9fa; }
|
||||
body { background: var(--bg); font-family: 'Inter', sans-serif; }
|
||||
.navbar { background: white !important; box-shadow: 0 2px 10px rgba(0,0,0,0.05); }
|
||||
.nav-link { color: #555 !important; font-weight: 500; }
|
||||
.nav-link.active { color: var(--primary) !important; }
|
||||
.garage-card { background: white; border-radius: 16px; border: none; transition: 0.3s; cursor: pointer; }
|
||||
.garage-card:hover { transform: translateY(-5px); box-shadow: 0 10px 25px rgba(0,0,0,0.1); }
|
||||
.modal-custom { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 1050; display: flex; align-items: center; justify-content: center; }
|
||||
.glass-panel { background: white; border-radius: 24px; padding: 35px; width: 100%; max-width: 500px; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app">
|
||||
<nav class="navbar navbar-expand-lg navbar-light mb-4 py-3" v-if="isLoggedIn">
|
||||
<div class="container">
|
||||
<a class="navbar-brand fw-bold text-primary" href="#"><i class="bi bi-tools me-2"></i>Szerviz Kereső</a>
|
||||
<div class="collapse navbar-collapse">
|
||||
<ul class="navbar-nav me-auto">
|
||||
<li class="nav-item"><a class="nav-link" :class="{active: view==='garage'}" @click="view='garage'" href="#">Garázs</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="#">Szervizek</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="#">Csapatom</a></li>
|
||||
</ul>
|
||||
<div class="d-flex align-items-center">
|
||||
<select class="form-select form-select-sm me-3" style="width: auto;">
|
||||
<option>🇭🇺 HU</option>
|
||||
<option>🇬🇧 EN</option>
|
||||
</select>
|
||||
<button class="btn btn-outline-danger btn-sm" @click="logout"><i class="bi bi-box-arrow-right"></i></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<div v-if="!isLoggedIn" class="d-flex align-items-center justify-content-center" style="height:100vh">
|
||||
<div class="glass-panel shadow text-center">
|
||||
<h2 class="fw-bold mb-4">Service Finder</h2>
|
||||
<input type="email" class="form-control mb-3" v-model="auth.email" placeholder="Email">
|
||||
<input type="password" class="form-control mb-3" v-model="auth.password" placeholder="Jelszó">
|
||||
<button class="btn btn-primary w-100 py-2" @click="login">Belépés</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-else class="container">
|
||||
<div v-if="view === 'garage'">
|
||||
<div class="d-flex justify-content-between align-items-center mb-4">
|
||||
<h3 class="fw-bold">Járműveim</h3>
|
||||
<button class="btn btn-primary" @click="modals.reg = true"><i class="bi bi-plus-lg me-2"></i>Új Jármű</button>
|
||||
</div>
|
||||
|
||||
<div class="row g-4">
|
||||
<div class="col-md-4" v-for="car in myCars">
|
||||
<div class="card garage-card shadow-sm p-4" @click="selectCar(car)">
|
||||
<div class="d-flex justify-content-between align-items-start mb-3">
|
||||
<div>
|
||||
<h5 class="fw-bold mb-0">{{car.brand}}</h5>
|
||||
<div class="text-muted small">{{car.model}}</div>
|
||||
</div>
|
||||
<span class="badge bg-primary px-3 py-2">{{car.plate}}</span>
|
||||
</div>
|
||||
<div class="d-flex justify-content-between align-items-center mt-3">
|
||||
<div class="small text-muted"><i class="bi bi-cash me-1"></i> {{formatMoney(car.total_cost)}}</div>
|
||||
<div class="btn-group">
|
||||
<button class="btn btn-sm btn-outline-success" @click.stop="openCost(car)"><i class="bi bi-plus"></i></button>
|
||||
<button class="btn btn-sm btn-outline-danger" @click.stop="deleteCar(car)"><i class="bi bi-trash"></i></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="view === 'detail' && selectedCar">
|
||||
<button class="btn btn-link ps-0 mb-3 text-decoration-none" @click="view='garage'"><i class="bi bi-arrow-left"></i> Vissza a garázsba</button>
|
||||
<div class="card border-0 shadow-sm p-4 rounded-4">
|
||||
<div class="d-flex justify-content-between align-items-center">
|
||||
<h2 class="fw-bold">{{selectedCar.brand}} {{selectedCar.model}}</h2>
|
||||
<button class="btn btn-outline-danger" @click="modals.sell = true">Jármű Eladása</button>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="row text-center mt-3">
|
||||
<div class="col-md-4"><h6>Állapot</h6><h4 class="text-success fw-bold">Rendben</h4></div>
|
||||
<div class="col-md-4"><h6>Hibaüzenetek</h6><h4 class="text-muted">Nincs</h4></div>
|
||||
<div class="col-md-4"><h6>Következő szerviz</h6><h4 class="text-primary">15,000 km múlva</h4></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="modals.reg" class="modal-custom">
|
||||
<div class="glass-panel">
|
||||
<h4 class="fw-bold mb-4">Új Jármű Felvétele</h4>
|
||||
<select class="form-select mb-3" v-model="forms.reg.cat" @change="forms.reg.brand=''; forms.reg.model_id=''">
|
||||
<option value="" disabled>Kategória választása...</option>
|
||||
<option v-for="(brands, cat) in meta.hierarchy" :value="cat">{{cat}}</option>
|
||||
</select>
|
||||
<select class="form-select mb-3" v-model="forms.reg.brand" :disabled="!forms.reg.cat">
|
||||
<option value="" disabled>Márka...</option>
|
||||
<option v-for="(models, brand) in meta.hierarchy[forms.reg.cat]" :value="brand">{{brand}}</option>
|
||||
</select>
|
||||
<select class="form-select mb-3" v-model="forms.reg.model_id" :disabled="!forms.reg.brand">
|
||||
<option value="" disabled>Típus...</option>
|
||||
<option v-for="m in meta.hierarchy[forms.reg.cat]?.[forms.reg.brand]" :value="m.id">{{m.name}}</option>
|
||||
</select>
|
||||
<input type="text" class="form-control mb-3" v-model="forms.reg.plate" placeholder="Rendszám">
|
||||
<input type="number" class="form-control mb-4" v-model="forms.reg.mileage" placeholder="Aktuális km állás">
|
||||
<div class="d-flex gap-2">
|
||||
<button class="btn btn-light w-100" @click="modals.reg = false">Mégse</button>
|
||||
<button class="btn btn-primary w-100" @click="submitReg">Mentés</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="modals.cost" class="modal-custom">
|
||||
<div class="glass-panel">
|
||||
<h4 class="fw-bold mb-4">Költség rögzítése: {{selectedCar?.plate}}</h4>
|
||||
<select class="form-select mb-3" v-model="forms.cost.type">
|
||||
<option v-for="(name, code) in meta.costTypes" :value="code">{{name}}</option>
|
||||
</select>
|
||||
<input type="number" class="form-control mb-4" v-model="forms.cost.amount" placeholder="Összeg (HUF)">
|
||||
<div class="d-flex gap-2">
|
||||
<button class="btn btn-light w-100" @click="modals.cost = false">Mégse</button>
|
||||
<button class="btn btn-success w-100" @click="submitCost">Rögzítés</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
|
||||
<script>
|
||||
const { createApp } = Vue
|
||||
createApp({
|
||||
data() {
|
||||
return {
|
||||
isLoggedIn: !!localStorage.getItem('token'),
|
||||
view: 'garage',
|
||||
selectedCar: null,
|
||||
myCars: [],
|
||||
meta: { hierarchy: {}, costTypes: {} },
|
||||
modals: { reg: false, cost: false },
|
||||
auth: { email: '', password: '' },
|
||||
forms: {
|
||||
reg: { cat: '', brand: '', model_id: '', plate: '', mileage: '' },
|
||||
cost: { type: '', amount: '' }
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
async login() {
|
||||
const p = new URLSearchParams(); p.append('username', this.auth.email); p.append('password', this.auth.password);
|
||||
const res = await fetch('/api/auth/login', { method: 'POST', body: p });
|
||||
if (res.ok) {
|
||||
const d = await res.json();
|
||||
localStorage.setItem('token', d.access_token);
|
||||
this.isLoggedIn = true;
|
||||
location.reload();
|
||||
}
|
||||
},
|
||||
async init() {
|
||||
if(!this.isLoggedIn) return;
|
||||
const headers = { 'Authorization': 'Bearer ' + localStorage.getItem('token') };
|
||||
const [r1, r2, r3] = await Promise.all([
|
||||
fetch('/api/my_vehicles', { headers }),
|
||||
fetch('/api/meta/vehicle-hierarchy'),
|
||||
fetch('/api/meta/cost-types')
|
||||
]);
|
||||
this.myCars = await r1.json();
|
||||
this.meta.hierarchy = await r2.json();
|
||||
this.meta.costTypes = await r3.json();
|
||||
},
|
||||
selectCar(car) { this.selectedCar = car; this.view = 'detail'; },
|
||||
openCost(car) { this.selectedCar = car; this.modals.cost = true; },
|
||||
async submitReg() {
|
||||
const res = await fetch('/api/register', {
|
||||
method: 'POST', headers: { 'Content-Type': 'application/json', 'Authorization': 'Bearer ' + localStorage.getItem('token') },
|
||||
body: JSON.stringify({ ...this.forms.reg, vin: 'TEMP123' })
|
||||
});
|
||||
if(res.ok) { this.modals.reg = false; this.init(); }
|
||||
},
|
||||
async submitCost() {
|
||||
const res = await fetch('/api/add_cost', {
|
||||
method: 'POST', headers: { 'Content-Type': 'application/json', 'Authorization': 'Bearer ' + localStorage.getItem('token') },
|
||||
body: JSON.stringify({ vehicle_id: this.selectedCar.vehicle_id, ...this.forms.cost })
|
||||
});
|
||||
if(res.ok) { this.modals.cost = false; this.init(); }
|
||||
},
|
||||
async deleteCar(car) {
|
||||
if(confirm('Biztosan törlöd a garázsból?')) {
|
||||
await fetch('/api/vehicle/' + car.vehicle_id, { method: 'DELETE', headers: { 'Authorization': 'Bearer ' + localStorage.getItem('token') } });
|
||||
this.init();
|
||||
}
|
||||
},
|
||||
logout() { localStorage.clear(); this.isLoggedIn = false; },
|
||||
formatMoney(v) { return new Intl.NumberFormat('hu-HU', { style: 'currency', currency: 'HUF' }).format(v || 0); }
|
||||
},
|
||||
mounted() { this.init(); }
|
||||
}).mount('#app')
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
122
code-server-config/data/User/History/-52e5c41d/tEyM.html
Executable file
122
code-server-config/data/User/History/-52e5c41d/tEyM.html
Executable file
@@ -0,0 +1,122 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="hu">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Service Finder - Dinamikus</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: #f4f7f6; }
|
||||
.modal-backdrop-custom { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.6); z-index: 1000; display: flex; align-items: center; justify-content: center; }
|
||||
.glass-card { background: white; border-radius: 15px; padding: 30px; width: 100%; max-width: 550px; box-shadow: 0 15px 35px rgba(0,0,0,0.1); }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app" class="p-3">
|
||||
<div v-if="!isLoggedIn" class="d-flex align-items-center justify-content-center" style="height:90vh">
|
||||
<div class="glass-card text-center">
|
||||
<h2 class="fw-bold text-primary mb-4">Service Finder</h2>
|
||||
<input type="email" class="form-control mb-3" v-model="auth.email" placeholder="Email">
|
||||
<input type="password" class="form-control mb-3" v-model="auth.password" placeholder="Jelszó">
|
||||
<button class="btn btn-primary w-100" @click="login">Belépés</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-else class="container">
|
||||
<div class="d-flex justify-content-between mb-4 mt-3">
|
||||
<h3 class="fw-bold">Garázsom</h3>
|
||||
<button class="btn btn-success" @click="openRegister"><i class="bi bi-plus"></i> Új Jármű</button>
|
||||
</div>
|
||||
|
||||
<div class="row g-3">
|
||||
<div class="col-md-4" v-for="car in myCars">
|
||||
<div class="card p-3 border-0 shadow-sm" style="border-radius:12px; border-left: 5px solid #0d6efd !important;">
|
||||
<h5 class="fw-bold mb-0">{{car.brand}}</h5>
|
||||
<div class="text-muted small mb-2">{{car.model}}</div>
|
||||
<span class="badge bg-warning text-dark" style="width: fit-content;">{{car.plate}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="showReg" class="modal-backdrop-custom">
|
||||
<div class="glass-card">
|
||||
<h4 class="fw-bold mb-4">Jármű rögzítése</h4>
|
||||
|
||||
<label class="small fw-bold">Kategória</label>
|
||||
<select class="form-select mb-3" v-model="form.cat" @change="form.brand=''; form.model_id=''">
|
||||
<option v-for="(brands, cat) in hierarchy" :value="cat">{{ cat }}</option>
|
||||
</select>
|
||||
|
||||
<label class="small fw-bold">Márka</label>
|
||||
<select class="form-select mb-3" v-model="form.brand" :disabled="!form.cat" @change="form.model_id=''">
|
||||
<option v-for="(models, brand) in hierarchy[form.cat]" :value="brand">{{ brand }}</option>
|
||||
</select>
|
||||
|
||||
<label class="small fw-bold">Modell</label>
|
||||
<select class="form-select mb-3" v-model="form.model_id" :disabled="!form.brand">
|
||||
<option v-for="m in hierarchy[form.cat]?.[form.brand]" :value="m.id">{{ m.name }}</option>
|
||||
</select>
|
||||
|
||||
<div class="row g-2 mb-3">
|
||||
<div class="col-6"><input type="text" class="form-control" v-model="form.plate" placeholder="Rendszám"></div>
|
||||
<div class="col-6"><input type="text" class="form-control" v-model="form.vin" placeholder="Alvázszám"></div>
|
||||
</div>
|
||||
|
||||
<div class="d-flex justify-content-end gap-2 mt-4">
|
||||
<button class="btn btn-light" @click="showReg=false">Mégse</button>
|
||||
<button class="btn btn-primary" @click="submit" :disabled="!form.model_id">Mentés</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
|
||||
<script>
|
||||
const { createApp } = Vue
|
||||
createApp({
|
||||
data() {
|
||||
return {
|
||||
isLoggedIn: !!localStorage.getItem('token'),
|
||||
auth: { email: '', password: '' },
|
||||
myCars: [],
|
||||
hierarchy: {}, // Ezt a Backendtől kapjuk
|
||||
showReg: false,
|
||||
form: { cat: '', brand: '', model_id: '', plate: '', vin: '', mileage: 0, purchase_date: new Date().toISOString().split('T')[0] }
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
async login() {
|
||||
const p = new URLSearchParams(); p.append('username', this.auth.email); p.append('password', this.auth.password);
|
||||
const res = await fetch('/api/auth/login', { method: 'POST', body: p });
|
||||
if (res.ok) { const d = await res.json(); localStorage.setItem('token', d.access_token); this.isLoggedIn = true; this.loadMeta(); this.loadCars(); }
|
||||
},
|
||||
async loadMeta() {
|
||||
const res = await fetch('/api/meta/vehicle-hierarchy');
|
||||
this.hierarchy = await res.json();
|
||||
},
|
||||
async loadCars() {
|
||||
const res = await fetch('/api/my_vehicles', { headers: { 'Authorization': 'Bearer ' + localStorage.getItem('token') } });
|
||||
this.myCars = await res.json();
|
||||
},
|
||||
openRegister() { this.showReg = true; },
|
||||
async submit() {
|
||||
const res = await fetch('/api/register', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json', 'Authorization': 'Bearer ' + localStorage.getItem('token') },
|
||||
body: JSON.stringify({
|
||||
model_id: this.form.model_id,
|
||||
vin: this.form.vin,
|
||||
plate: this.form.plate,
|
||||
mileage: parseInt(this.form.mileage),
|
||||
purchase_date: this.form.purchase_date
|
||||
})
|
||||
});
|
||||
if(res.ok) { this.showReg = false; this.loadCars(); }
|
||||
}
|
||||
},
|
||||
mounted() { if(this.isLoggedIn) { this.loadMeta(); this.loadCars(); } }
|
||||
}).mount('#app')
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
296
code-server-config/data/User/History/-52e5c41d/u9Y2.html
Executable file
296
code-server-config/data/User/History/-52e5c41d/u9Y2.html
Executable file
@@ -0,0 +1,296 @@
|
||||
<!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>
|
||||
233
code-server-config/data/User/History/-52e5c41d/uiHD.html
Executable file
233
code-server-config/data/User/History/-52e5c41d/uiHD.html
Executable file
@@ -0,0 +1,233 @@
|
||||
<!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>
|
||||
206
code-server-config/data/User/History/-52e5c41d/voAw.html
Executable file
206
code-server-config/data/User/History/-52e5c41d/voAw.html
Executable file
@@ -0,0 +1,206 @@
|
||||
<!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; display: flex; flex-direction: column; justify-content: center; }
|
||||
.stat-value { font-size: 1.5rem; font-weight: bold; color: #212529; }
|
||||
.stat-label { font-size: 0.85rem; color: #6c757d; text-transform: uppercase; margin-top: 5px; }
|
||||
.tab-content-area { background: white; border-radius: 15px; padding: 30px; box-shadow: 0 5px 15px rgba(0,0,0,0.03); }
|
||||
|
||||
/* Timeline */
|
||||
.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</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-3">
|
||||
<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">Műszaki állapot</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<div class="stat-box">
|
||||
<div class="stat-value">{{ formatMoney(selectedCar.year_cost, selectedCar.currency) }}</div>
|
||||
<div class="stat-label">Idei költés</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<div v-if="selectedCar.status !== 'OK' && selectedCar.status !== null" class="alert alert-danger h-100 shadow-sm border-danger p-2 m-0 d-flex flex-column justify-content-center">
|
||||
<h6 class="fw-bold text-danger mb-1" style="font-size: 0.9rem">Hiba:</h6>
|
||||
<p class="mb-2 text-dark small" style="line-height: 1.2">{{ selectedCar.current_issue }}</p>
|
||||
<button class="btn btn-sm btn-danger w-100" @click="resolveIssue">Megjavítva</button>
|
||||
</div>
|
||||
<div v-else class="stat-box text-muted border bg-light">
|
||||
<div class="fs-4"><i class="bi bi-shield-check"></i></div>
|
||||
<div class="stat-label">Nincs hiba</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="detailTab === 'history'">
|
||||
<div v-if="history.length === 0" class="text-center py-5 text-muted">Még üres a szervizkönyv.</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</option><option value="INSURANCE">📄 Biztosítás</option><option value="TAX">🏛️ Adó</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</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">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</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'; },
|
||||
openCostModal() { 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() {
|
||||
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) { this.showCostModal = false; this.openVehicleDetail(this.selectedCar.id); if(this.detailTab === 'history') this.loadHistory(); }
|
||||
},
|
||||
async loadHistory() { this.detailTab = 'history'; const res = await fetch('/api/vehicle/' + this.selectedCar.id + '/history'); this.history = await res.json(); },
|
||||
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; },
|
||||
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>
|
||||
256
code-server-config/data/User/History/-52e5c41d/x8lC.html
Executable file
256
code-server-config/data/User/History/-52e5c41d/x8lC.html
Executable file
@@ -0,0 +1,256 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="hu">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Service Finder - Flotta Kezelő</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; }
|
||||
.auth-wrapper { height: 100vh; display: flex; align-items: center; justify-content: center; }
|
||||
.auth-card { background: white; padding: 40px; border-radius: 20px; box-shadow: 0 10px 30px rgba(0,0,0,0.1); width: 100%; max-width: 400px; }
|
||||
.main-container { max-width: 1000px; margin: 30px auto; }
|
||||
.garage-card { border: none; border-radius: 12px; background: white; box-shadow: 0 2px 8px rgba(0,0,0,0.04); cursor: pointer; transition: 0.2s; 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; border-radius: 4px; }
|
||||
.history-item { border-left: 3px solid #e9ecef; padding-left: 20px; padding-bottom: 20px; position: relative; }
|
||||
.history-icon { position: absolute; left: -11px; top: 0; width: 20px; height: 20px; border-radius: 50%; border: 2px solid white; }
|
||||
.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; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="app">
|
||||
<div v-if="!isLoggedIn" class="auth-wrapper">
|
||||
<div class="auth-card">
|
||||
<h2 class="fw-bold mb-4 text-center text-primary"><i class="bi bi-speedometer2"></i> Service Finder</h2>
|
||||
|
||||
<div v-if="authView === 'login'">
|
||||
<div class="mb-3">
|
||||
<label class="form-label small">Email</label>
|
||||
<input type="email" class="form-control" v-model="authForm.email" placeholder="email@pelda.hu">
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label small">Jelszó</label>
|
||||
<input type="password" class="form-control" v-model="authForm.password" placeholder="******">
|
||||
</div>
|
||||
<button class="btn btn-primary w-100 py-2" @click="login">Bejelentkezés</button>
|
||||
<p class="text-center mt-3 small">Nincs fiókod? <a href="#" @click="authView='register'">Regisztrálj!</a></p>
|
||||
</div>
|
||||
|
||||
<div v-if="authView === 'register'">
|
||||
<div class="mb-3">
|
||||
<label class="form-label small">Új Email</label>
|
||||
<input type="email" class="form-control" v-model="authForm.email">
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label small">Új Jelszó</label>
|
||||
<input type="password" class="form-control" v-model="authForm.password">
|
||||
</div>
|
||||
<button class="btn btn-success w-100 py-2" @click="register">Regisztráció</button>
|
||||
<p class="text-center mt-3 small"><a href="#" @click="authView='login'">Vissza a belépéshez</a></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-else>
|
||||
<nav class="navbar navbar-dark bg-primary shadow-sm px-4 py-2">
|
||||
<div class="container">
|
||||
<span class="navbar-brand fw-bold"><i class="bi bi-speedometer2 me-2"></i>Service Finder</span>
|
||||
<div class="d-flex align-items-center">
|
||||
<span class="text-white me-3 small">{{ authForm.email }}</span>
|
||||
<button class="btn btn-outline-light btn-sm" @click="logout"><i class="bi bi-box-arrow-right"></i></button>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<div class="container main-container">
|
||||
<div v-if="view === 'dashboard'">
|
||||
<div class="d-flex justify-content-between mb-4">
|
||||
<h4 class="fw-bold">Saját Járművek</h4>
|
||||
<button class="btn btn-primary btn-sm"><i class="bi bi-plus-lg"></i> Új jármű</button>
|
||||
</div>
|
||||
<div class="row g-3">
|
||||
<div class="col-md-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'}"></div>
|
||||
<h5 class="fw-bold mb-0">{{ car.brand }}</h5>
|
||||
<div class="text-muted small mb-2">{{ car.model }}</div>
|
||||
<div class="d-flex justify-content-between align-items-center">
|
||||
<span class="plate-badge">{{ car.plate }}</span>
|
||||
<i v-if="car.status !== 'OK'" class="bi bi-exclamation-triangle text-danger"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="myCars.length === 0" class="text-center mt-5 text-muted">
|
||||
<i class="bi bi-car-front fs-1 d-block mb-3"></i>
|
||||
A garázsod még üres.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="view === 'detail' && selectedCar">
|
||||
<button class="btn btn-link text-decoration-none ps-0 mb-3" @click="view='dashboard'; initApp()"><i class="bi bi-arrow-left"></i> Vissza a listához</button>
|
||||
<div class="detail-header shadow-sm border p-4 bg-white rounded-4 mb-4">
|
||||
<div class="d-flex justify-content-between align-items-center">
|
||||
<div>
|
||||
<h2 class="fw-bold mb-1">{{ selectedCar.brand }} {{ selectedCar.model }}</h2>
|
||||
<span class="plate-badge fs-6">{{ selectedCar.plate }}</span>
|
||||
</div>
|
||||
<div class="text-end">
|
||||
<button class="btn btn-success" @click="openCostModal"><i class="bi bi-plus-lg"></i> Költség</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row g-3 text-center">
|
||||
<div class="col-md-4"><div class="stat-box border bg-white p-3 rounded-4"><h6>Km állás</h6><div class="fw-bold fs-4">{{ selectedCar.mileage }}</div></div></div>
|
||||
<div class="col-md-4"><div class="stat-box border bg-white p-3 rounded-4"><h6>Idei költség</h6><div class="fw-bold fs-4">{{ formatMoney(selectedCar.year_cost, selectedCar.currency) }}</div></div></div>
|
||||
<div class="col-md-4"><div class="stat-box border bg-white p-3 rounded-4"><h6>Állapot</h6><div :class="selectedCar.status === 'OK' ? 'text-success' : 'text-danger'" class="fw-bold fs-4">{{ selectedCar.status }}</div></div></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="showCostModal" class="modal-backdrop-custom">
|
||||
<div class="auth-card" style="max-width: 500px;">
|
||||
<h4 class="fw-bold mb-4">Új Költség Rögzítése</h4>
|
||||
<div class="row g-3">
|
||||
<div class="col-6">
|
||||
<label class="small fw-bold">Kategória</label>
|
||||
<select class="form-select" v-model="costForm.mainCategory" @change="updateSubCategory">
|
||||
<option v-for="(val, key) in costDefinitions" :value="key">{{ val.label }}</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<label class="small fw-bold">Típus</label>
|
||||
<select class="form-select" v-model="costForm.subCategory">
|
||||
<option v-for="(label, key) in currentSubOptions" :value="key">{{ label }}</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<label class="small fw-bold">Összeg</label>
|
||||
<input type="number" class="form-control" v-model="costForm.amount">
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<label class="small 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>
|
||||
<div class="d-flex justify-content-end mt-4">
|
||||
<button class="btn btn-light me-2" @click="showCostModal=false">Mégse</button>
|
||||
<button class="btn btn-success" @click="submitCost">Mentés</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
|
||||
<script>
|
||||
const { createApp } = Vue
|
||||
createApp({
|
||||
data() {
|
||||
return {
|
||||
isLoggedIn: !!localStorage.getItem('token'),
|
||||
authView: 'login',
|
||||
view: 'dashboard',
|
||||
authForm: { email: '', password: '' },
|
||||
myCars: [],
|
||||
selectedCar: null,
|
||||
showCostModal: false,
|
||||
costForm: { mainCategory: '', subCategory: '', amount: '', currency: 'HUF' },
|
||||
costDefinitions: {}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
currentSubOptions() { return this.costDefinitions[this.costForm.mainCategory]?.subs || null; }
|
||||
},
|
||||
methods: {
|
||||
async login() {
|
||||
const params = new URLSearchParams();
|
||||
params.append('username', this.authForm.email);
|
||||
params.append('password', this.authForm.password);
|
||||
|
||||
try {
|
||||
const res = await fetch('/api/auth/login', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
|
||||
body: params
|
||||
});
|
||||
if (res.ok) {
|
||||
const data = await res.json();
|
||||
localStorage.setItem('token', data.access_token);
|
||||
this.isLoggedIn = true;
|
||||
this.initApp();
|
||||
} else {
|
||||
const err = await res.json();
|
||||
alert("Hiba: " + (err.detail || "Sikertelen belépés"));
|
||||
}
|
||||
} catch (e) { alert("Szerver hiba!"); }
|
||||
},
|
||||
async register() {
|
||||
const fd = new FormData();
|
||||
fd.append('email', this.authForm.email);
|
||||
fd.append('password', this.authForm.password);
|
||||
try {
|
||||
const res = await fetch('/api/auth/register', { method: 'POST', body: fd });
|
||||
if(res.ok) {
|
||||
alert("Regisztráció sikeres!");
|
||||
this.authView = 'login';
|
||||
} else {
|
||||
const err = await res.json();
|
||||
alert("Hiba: " + (err.detail || "Sikertelen regisztráció"));
|
||||
}
|
||||
} catch(e) { alert("Szerver hiba!"); }
|
||||
},
|
||||
logout() { localStorage.removeItem('token'); this.isLoggedIn = false; },
|
||||
async apiFetch(url, options = {}) {
|
||||
const token = localStorage.getItem('token');
|
||||
options.headers = { ...options.headers, 'Authorization': `Bearer \${token}` };
|
||||
const res = await fetch(url, options);
|
||||
if(res.status === 401) this.logout();
|
||||
return res;
|
||||
},
|
||||
async initApp() {
|
||||
if(!this.isLoggedIn) return;
|
||||
try {
|
||||
const resCars = await this.apiFetch('/api/my_vehicles');
|
||||
this.myCars = await resCars.json();
|
||||
const resTypes = await fetch('/api/ref/cost_types');
|
||||
this.costDefinitions = await resTypes.json();
|
||||
} catch(e) { console.error("Adatbetöltési hiba", e); }
|
||||
},
|
||||
async openVehicleDetail(id) {
|
||||
const res = await this.apiFetch(`/api/vehicle/\${id}`);
|
||||
this.selectedCar = await res.json();
|
||||
this.view = 'detail';
|
||||
},
|
||||
openCostModal() {
|
||||
this.costForm.mainCategory = Object.keys(this.costDefinitions)[0];
|
||||
this.updateSubCategory();
|
||||
this.showCostModal = true;
|
||||
},
|
||||
updateSubCategory() {
|
||||
const subs = this.costDefinitions[this.costForm.mainCategory]?.subs;
|
||||
this.costForm.subCategory = subs ? Object.keys(subs)[0] : '';
|
||||
},
|
||||
async submitCost() {
|
||||
const fd = new FormData();
|
||||
fd.append('vehicle_id', this.selectedCar.id);
|
||||
fd.append('cost_type', this.costForm.subCategory || this.costForm.mainCategory);
|
||||
fd.append('amount', this.costForm.amount);
|
||||
fd.append('currency', this.costForm.currency);
|
||||
fd.append('date_str', new Date().toISOString().split('T')[0]);
|
||||
fd.append('mileage', this.selectedCar.mileage);
|
||||
const res = await this.apiFetch('/api/add_cost', { method: 'POST', body: fd });
|
||||
if(res.ok) { this.showCostModal = false; this.openVehicleDetail(this.selectedCar.id); }
|
||||
},
|
||||
formatMoney(amount, curr) { return new Intl.NumberFormat('hu-HU', { style: 'currency', currency: curr || 'HUF' }).format(amount); }
|
||||
},
|
||||
mounted() { this.initApp(); }
|
||||
}).mount('#app')
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user