Initial commit: Robot ökoszisztéma v2.0 - Stabilizált jármű és szerviz robotok
This commit is contained in:
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>
|
||||
Reference in New Issue
Block a user