Initial commit - Migrated to Dev environment
This commit is contained in:
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>
|
||||
Reference in New Issue
Block a user