fix: 1:1 prototype port – exact hms-* CSS, real logo, all components from app.js
This commit is contained in:
Implementation Engineer
@@ -0,0 +1,47 @@
|
||||
<template>
|
||||
<div class="max-w-md mx-auto px-4 py-16">
|
||||
<div class="hms-card p-8">
|
||||
<div class="text-center mb-6">
|
||||
<HmsLogo :size="48" />
|
||||
<h1 class="text-xl font-bold mt-4" style="color: var(--text)">Admin-Login</h1>
|
||||
<p class="text-sm mt-1" style="color: var(--secondary)">Equipment-Sync Verwaltungsbereich</p>
|
||||
</div>
|
||||
<div v-if="loggedIn" class="text-center py-8" role="status">
|
||||
<div class="inline-flex items-center justify-center w-12 h-12 rounded-full mb-3" :style="{ background: 'var(--color-success-bg)', color: 'var(--color-success)' }"><svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg></div>
|
||||
<p class="font-medium" style="color: var(--text)">Eingeloggt</p>
|
||||
<p class="text-xs mt-1" style="color: var(--secondary)">(Prototyp – keine echte Session)</p>
|
||||
</div>
|
||||
<form v-else @submit.prevent="login" novalidate>
|
||||
<div class="space-y-4">
|
||||
<div><label for="admin-user" class="block text-sm font-medium mb-1" style="color: var(--text-muted)">Benutzername</label><input id="admin-user" v-model="username" type="text" class="hms-input" placeholder="admin" :aria-invalid="!!error" /></div>
|
||||
<div><label for="admin-pass" class="block text-sm font-medium mb-1" style="color: var(--text-muted)">Passwort</label><input id="admin-pass" v-model="password" type="password" class="hms-input" placeholder="••••••••" :aria-invalid="!!error" /></div>
|
||||
<p v-if="error" class="text-xs" style="color: var(--color-error)" role="alert">{{ error }}</p>
|
||||
<button type="submit" :disabled="loading" class="hms-btn hms-btn-primary w-full py-3"><span v-if="loading" class="hms-spinner" style="width:18px;height:18px;border-width:2px"></span><span v-else>Einloggen</span></button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
|
||||
const username = ref('')
|
||||
const password = ref('')
|
||||
const error = ref('')
|
||||
const loading = ref(false)
|
||||
const loggedIn = ref(false)
|
||||
|
||||
function login() {
|
||||
error.value = ''
|
||||
if (!username.value || !password.value) {
|
||||
error.value = 'Bitte Benutzername und Passwort eingeben'
|
||||
return
|
||||
}
|
||||
loading.value = true
|
||||
setTimeout(() => {
|
||||
loading.value = false
|
||||
loggedIn.value = true
|
||||
}, 1200)
|
||||
}
|
||||
</script>
|
||||
+102
-174
@@ -1,193 +1,121 @@
|
||||
<template>
|
||||
<div>
|
||||
<!-- Hero Section -->
|
||||
<section class="relative mb-16 overflow-hidden rounded-lg">
|
||||
<div class="absolute inset-0 bg-bg">
|
||||
<img
|
||||
src="https://images.unsplash.com/photo-1505236858219-8359eb222e89?w=1600&q=80"
|
||||
alt="Veranstaltungstechnik"
|
||||
class="w-full h-full object-cover opacity-30"
|
||||
loading="eager"
|
||||
/>
|
||||
</div>
|
||||
<div class="absolute inset-0 bg-gradient-to-t from-bg via-bg/80 to-bg/50" />
|
||||
<div class="relative px-6 py-20 lg:py-32 max-w-4xl">
|
||||
<p class="text-sm text-accent font-semibold mb-2">Seit 2003 · Über 20 Jahre Veranstaltungstechnik</p>
|
||||
<h1 class="text-4xl lg:text-6xl font-extrabold mb-4" data-testid="hero-headline">
|
||||
Veranstaltungstechnik
|
||||
</h1>
|
||||
<p class="text-text-muted text-lg lg:text-xl mb-8 max-w-2xl">
|
||||
Professionelle Tontechnik, Lichttechnik, Rigging und Komplettlösungen
|
||||
für Ihre Veranstaltung. Von der Firmenevent-Beschallung bis zur
|
||||
Open-Air-Großproduktion – HMS Licht & Ton liefert aus Leipheim und Ellzee.
|
||||
</p>
|
||||
<div class="flex flex-wrap gap-4">
|
||||
<NuxtLink to="/mietkatalog" class="btn-primary" data-testid="hero-cta-mietkatalog">
|
||||
Mietkatalog öffnen
|
||||
</NuxtLink>
|
||||
<NuxtLink to="/kontakt" class="btn-secondary" data-testid="hero-cta-kontakt">
|
||||
Beratung anfragen
|
||||
</NuxtLink>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Speaker Grid (Equipment Types) -->
|
||||
<section class="mb-16">
|
||||
<h2 class="text-2xl font-bold mb-6">Unser Equipment</h2>
|
||||
<div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-6 gap-4" data-testid="speaker-grid">
|
||||
<div
|
||||
v-for="eq in equipmentTypes"
|
||||
:key="eq.label"
|
||||
class="flex flex-col items-center gap-3 p-5 rounded-lg border border-border-default bg-panel hover:border-accent-border transition-colors duration-fast"
|
||||
>
|
||||
<div class="w-12 h-12 flex items-center justify-center text-secondary">
|
||||
<component :is="eq.icon" />
|
||||
<!-- Hero with background image -->
|
||||
<section class="hms-hero py-20 sm:py-32" aria-labelledby="hero-title">
|
||||
<div class="hms-hero-bg" style="background-image: url('https://images.unsplash.com/photo-1470229722913-7c0e2dbbafd3?w=1920&q=80')"></div>
|
||||
<div class="hms-hero-overlay"></div>
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
|
||||
<div class="max-w-2xl">
|
||||
<span class="hms-badge hms-badge-primary mb-4">Seit 2003 · Über 20 Jahre Veranstaltungstechnik</span>
|
||||
<h1 id="hero-title" class="text-4xl sm:text-5xl lg:text-6xl font-bold leading-tight mb-6" style="color: var(--text)">
|
||||
Professionelle Technik<br><span style="color: var(--color-accent)">für Ihre Veranstaltung</span>
|
||||
</h1>
|
||||
<p class="text-lg sm:text-xl mb-8 max-w-xl" style="color: var(--text-muted)">
|
||||
Von der Firmenevent-Beschallung bis zur Open-Air-Großproduktion: HMS Licht & Ton liefert Tontechnik, Lichttechnik, Rigging und Komplettlösungen aus Leipheim und Ellzee.
|
||||
</p>
|
||||
<div class="flex flex-col sm:flex-row gap-4">
|
||||
<button @click="navigate('/mietkatalog')" class="hms-btn hms-btn-primary text-base px-8 py-4">
|
||||
Mietkatalog öffnen
|
||||
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3"/></svg>
|
||||
</button>
|
||||
<button @click="navigate('/kontakt')" class="hms-btn hms-btn-secondary text-base px-8 py-4">Beratung anfragen</button>
|
||||
</div>
|
||||
<span class="text-xs text-text-muted text-center">{{ eq.label }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Über uns Section -->
|
||||
<section class="mb-16 bg-panel rounded-lg p-8" data-testid="about-section">
|
||||
<h2 class="text-2xl font-bold mb-6">Über uns</h2>
|
||||
<div class="grid grid-cols-1 sm:grid-cols-3 gap-6 mb-6">
|
||||
<div class="text-center">
|
||||
<p class="text-4xl font-extrabold text-accent mb-1" data-testid="stat-years">20+</p>
|
||||
<p class="text-sm text-text-muted">Jahre Erfahrung</p>
|
||||
<!-- Speaker Grid -->
|
||||
<section class="py-12 sm:py-16" :style="{ background: 'var(--bg)' }" aria-labelledby="speaker-title">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="mb-8">
|
||||
<span class="text-sm font-semibold uppercase tracking-wider" style="color: var(--color-accent)">Equipment-Highlights</span>
|
||||
<h2 id="speaker-title" class="text-2xl sm:text-3xl font-bold mt-1" style="color: var(--text)">Lautsprecher & Strahler aus unserem Mietlager</h2>
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<p class="text-4xl font-extrabold text-accent mb-1" data-testid="stat-devices">1000+</p>
|
||||
<p class="text-sm text-text-muted">Geräte im Mietpark</p>
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<p class="text-4xl font-extrabold text-accent mb-1" data-testid="stat-events">500+</p>
|
||||
<p class="text-sm text-text-muted">Events betreut</p>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-text-muted text-sm max-w-3xl">
|
||||
HMS Licht & Ton ist Ihr verlässlicher Partner für Veranstaltungstechnik in
|
||||
Bayerisch-Schwaben und darüber hinaus. Seit über 20 Jahren planen, liefern und
|
||||
betreiben wir Technik für Konzerte, Firmenevents, Festspiele und private
|
||||
Feiern. Unser Team aus erfahrenen Tontechnikern, Lichttechnikern und Rigging-Spezialisten
|
||||
sorgt dafür, dass Ihre Veranstaltung perfekt läuft – vom ersten Beratungsgespräch
|
||||
bis zum letzten Kabel am Abbau.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<!-- 8 Service Cards -->
|
||||
<section class="mb-16" data-testid="services-section">
|
||||
<h2 class="text-2xl font-bold mb-6">Leistungen</h2>
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
|
||||
<div
|
||||
v-for="service in services"
|
||||
:key="service.title"
|
||||
class="bg-panel border border-border-default rounded-lg p-5 hover:border-accent-border transition-colors duration-fast"
|
||||
>
|
||||
<h3 class="text-accent text-sm font-bold mb-2">{{ service.title }}</h3>
|
||||
<p class="text-text-muted text-sm">{{ service.description }}</p>
|
||||
<div class="hms-speaker-grid">
|
||||
<div v-for="sp in speakers" :key="sp.name" class="hms-speaker-item" @click="navigate('/mietkatalog')" role="button" tabindex="0" @keydown.enter="navigate('/mietkatalog')">
|
||||
<SpeakerIcon :type="sp.type" />
|
||||
<div class="hms-speaker-name">{{ sp.name }}</div>
|
||||
<div class="hms-speaker-type">{{ sp.category }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Mietkatalog CTA -->
|
||||
<section class="mb-12 text-center bg-panel rounded-lg p-10" data-testid="mietkatalog-cta">
|
||||
<h2 class="text-2xl font-bold mb-4">Bereit für Ihr nächstes Event?</h2>
|
||||
<p class="text-text-muted mb-6 max-w-2xl mx-auto">
|
||||
Durchstöbern Sie unseren Mietkatalog mit über 1.000 Artikeln – von Lautsprechern
|
||||
über Lichtanlagen bis zu Rigging-Material.
|
||||
</p>
|
||||
<NuxtLink to="/mietkatalog" class="btn-primary" data-testid="cta-mietkatalog-link">
|
||||
Zum Mietkatalog
|
||||
</NuxtLink>
|
||||
<!-- Über uns -->
|
||||
<section class="py-16 sm:py-20" :style="{ background: 'var(--panel)' }" aria-labelledby="about-title">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="grid lg:grid-cols-2 gap-12 items-center">
|
||||
<div>
|
||||
<span class="text-sm font-semibold uppercase tracking-wider mb-2" style="color: var(--color-accent)">Unternehmen</span>
|
||||
<h2 id="about-title" class="text-3xl sm:text-4xl font-bold mb-6" style="color: var(--text)">Ihr Technik-Partner mit Erfahrung</h2>
|
||||
<p class="leading-relaxed mb-4" style="color: var(--text-muted)">Die <strong style="color: var(--text)">Hammerschmidt u. Mössle GbR</strong> ist seit 2003 Ihr zuverlässiger Partner für Veranstaltungstechnik in der Region Leipheim / Ellzee und im gesamten süddeutschen Raum.</p>
|
||||
<p class="leading-relaxed mb-4" style="color: var(--text-muted)">Mit einem Mietlager von über 1.000 Geräten, einer eigenen Werkstatt und erfahrenem Personal realisieren wir Veranstaltungen jeder Größenordnung.</p>
|
||||
<div class="grid grid-cols-3 gap-4 mt-8">
|
||||
<div class="text-center"><div class="text-3xl font-bold" style="color: var(--color-accent)">20+</div><div class="text-sm" style="color: var(--secondary)">Jahre Erfahrung</div></div>
|
||||
<div class="text-center"><div class="text-3xl font-bold" style="color: var(--color-accent)">1.000+</div><div class="text-sm" style="color: var(--secondary)">Geräte im Lager</div></div>
|
||||
<div class="text-center"><div class="text-3xl font-bold" style="color: var(--color-accent)">2</div><div class="text-sm" style="color: var(--secondary)">Standorte</div></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="relative">
|
||||
<div class="aspect-[4/3] rounded-lg overflow-hidden shadow-xl">
|
||||
<img src="https://images.unsplash.com/photo-1493225457124-a3eb161ffa5f?w=800&q=80" alt="Veranstaltungstechnik Setup" loading="lazy" class="w-full h-full object-cover" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Leistungen -->
|
||||
<section class="py-16 sm:py-20" :style="{ background: 'var(--bg)' }" aria-labelledby="services-title">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="text-center mb-12">
|
||||
<span class="text-sm font-semibold uppercase tracking-wider mb-2" style="color: var(--color-accent)">Leistungen</span>
|
||||
<h2 id="services-title" class="text-3xl sm:text-4xl font-bold" style="color: var(--text)">Von der Vermietung bis zur Komplettbetreuung</h2>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
|
||||
<ServiceCard v-for="s in services" :key="s.title" :icon="s.icon" :title="s.title" :description="s.description" />
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- CTA -->
|
||||
<section class="py-16 sm:py-20" :style="{ background: 'var(--panel)' }" aria-labelledby="rental-title">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="rounded-lg p-8 sm:p-12 lg:p-16 text-center" style="background: var(--bg); border: 1px solid var(--border)">
|
||||
<h2 id="rental-title" class="text-3xl sm:text-4xl font-bold mb-4" style="color: var(--text)">Online-Mietkatalog</h2>
|
||||
<p class="max-w-2xl mx-auto mb-8" style="color: var(--text-muted)">Durchsuchen Sie unser Equipment-Sortiment und stellen Sie Ihre Mietanfrage direkt online zusammen.</p>
|
||||
<button @click="navigate('/mietkatalog')" class="hms-btn hms-btn-primary text-base px-8 py-4">
|
||||
Katalog durchsuchen
|
||||
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { h } from "vue";
|
||||
|
||||
useHead({
|
||||
title: "HMS Licht & Ton – Veranstaltungstechnik Leipheim/Ellzee",
|
||||
meta: [
|
||||
{ name: "robots", content: "noindex, nofollow, noarchive, nosnippet" },
|
||||
{ property: "og:type", content: "website" },
|
||||
{ property: "og:title", content: "HMS Licht & Ton – Veranstaltungstechnik" },
|
||||
{ property: "og:description", content: "Professionelle Veranstaltungstechnik aus Leipheim/Ellzee. Vermietung, Verkauf, Personal, Transport." },
|
||||
{ property: "og:locale", content: "de_DE" },
|
||||
{ property: "og:site_name", content: "HMS Licht & Ton" },
|
||||
{ property: "og:url", content: "https://hms.media-on.de" },
|
||||
],
|
||||
});
|
||||
|
||||
const services = [
|
||||
{ title: "Vermietung", description: "Lautsprecher, Mischpulte, Lichtanlagen, Rigging und Komplett-Setups aus unserem 1.000+ Geräte umfassenden Mietlager." },
|
||||
{ title: "Verkauf", description: "Neu- und Gebrauchtgeräte führender Hersteller mit Beratung, Inbetriebnahme und Service." },
|
||||
{ title: "Personal", description: "Qualifizierte Tontechniker, Lichttechniker und Rigger für Aufbau, Betrieb und Abbau." },
|
||||
{ title: "Transport", description: "Eigene Transportfahrzeuge für sichere An- und Ablieferung inklusive Verladekonzept." },
|
||||
{ title: "Lagerung", description: "Klimatisierte und gesicherte Lagerung für empfindliche Technik zwischen den Einsätzen." },
|
||||
{ title: "Werkstatt", description: "Reparatur und Wartung eigener sowie fremder Geräte durch unsere zertifizierten Techniker." },
|
||||
{ title: "Installation", description: "Festinstallationen in Veranstaltungsräumen, Kirchen, Schulen und Firmengebäuden." },
|
||||
{ title: "Booking", description: "Vermittlung von Künstlern, DJs und Technikern für Ihre Veranstaltung aus unserem Partnernetzwerk." },
|
||||
];
|
||||
{ icon: '🔊', title: 'Vermietung', description: 'Lautsprecher, Mischpulte, Lichtanlagen, Rigging und Komplett-Setups aus unserem 1.000+ Geräte umfassenden Mietlager in Ellzee. Geprüftes Equipment, sofort einsatzbereit.' },
|
||||
{ icon: '🛒', title: 'Verkauf', description: 'Neu- und Gebrauchtgeräte führender Hersteller mit Beratung, Inbetriebnahme und Service. Wir liefern nicht nur – wir konfigurieren Ihre Anlage einsatzfertig.' },
|
||||
{ icon: '👷', title: 'Personal', description: 'Qualifizierte Tontechniker, Lichttechniker und Rigger für Aufbau, Betrieb und Abbau. Mit TÜV-geprüfter Ausbildung und umfangreicher Praxiserfahrung.' },
|
||||
{ icon: '🚚', title: 'Transport', description: 'Eigene Transportfahrzeuge für sichere An- und Ablieferung. Inklusive Verladekonzept, Positionierung und Rückholung – kundengerecht terminiert.' },
|
||||
{ icon: '📦', title: 'Lagerung', description: 'Klimatisierte und trockene Lagerung für Equipment und Veranstaltungsbestände. Mit Bestandsmanagement und regelmäßiger Funktionsprüfung.' },
|
||||
{ icon: '🔧', title: 'Werkstatt', description: 'Herstellerübergreifende Reparatur und Wartung in unserer eigenen Werkstatt. Regelmäßige DGUV-Prüfungen und Kalibrierung für Ihren sicheren Betrieb.' },
|
||||
{ icon: '⚡', title: 'Installation', description: 'Festinstallationen in Schaufenstern, Lokalen und Veranstaltungsstätten. Von der Planung über die Elektroinstallation bis zur Abnahme – alles aus einer Hand.' },
|
||||
{ icon: '📅', title: 'Booking', description: 'Vermittlung von Künstlern und Technik-Personal für Ihre Veranstaltung. Mit unserem branchenweiten Netzwerk finden wir die passenden Professionals für Ihr Event.' }
|
||||
]
|
||||
const speakers = [
|
||||
{ type: 'linearray', name: 'L-Acoustics K2', category: 'Line Array' },
|
||||
{ type: 'subwoofer', name: 'L-Acoustics KS28', category: 'Subwoofer' },
|
||||
{ type: 'pointsource', name: 'd&b T10', category: 'Point Source' },
|
||||
{ type: 'column', name: 'd&b KSL8', category: 'Column Array' },
|
||||
{ type: 'monitor', name: 'd&b M4', category: 'Monitor' },
|
||||
{ type: 'movinghead', name: 'Robe Pointe', category: 'Moving Head' }
|
||||
]
|
||||
|
||||
type EquipmentIcon = () => ReturnType<typeof h>;
|
||||
|
||||
const equipmentTypes: { label: string; icon: EquipmentIcon }[] = [
|
||||
{
|
||||
label: "Lautsprecher",
|
||||
icon: () => h("svg", { width: 48, height: 48, viewBox: "0 0 48 48", fill: "none" }, [
|
||||
h("rect", { x: 8, y: 8, width: 32, height: 32, rx: 2, fill: "none", stroke: "currentColor", "stroke-width": 2 }),
|
||||
h("circle", { cx: 24, cy: 24, r: 8, fill: "none", stroke: "currentColor", "stroke-width": 2 }),
|
||||
h("circle", { cx: 24, cy: 24, r: 4, fill: "none", stroke: "currentColor", "stroke-width": 1.5 }),
|
||||
]),
|
||||
},
|
||||
{
|
||||
label: "Mischpulte",
|
||||
icon: () => h("svg", { width: 48, height: 48, viewBox: "0 0 48 48", fill: "none" }, [
|
||||
h("rect", { x: 6, y: 12, width: 36, height: 24, rx: 2, fill: "none", stroke: "currentColor", "stroke-width": 2 }),
|
||||
h("line", { x1: 14, y1: 18, x2: 14, y2: 30, stroke: "currentColor", "stroke-width": 1.5 }),
|
||||
h("line", { x1: 22, y1: 18, x2: 22, y2: 30, stroke: "currentColor", "stroke-width": 1.5 }),
|
||||
h("line", { x1: 30, y1: 18, x2: 30, y2: 30, stroke: "currentColor", "stroke-width": 1.5 }),
|
||||
h("circle", { cx: 14, cy: 30, r: 3, fill: "none", stroke: "currentColor", "stroke-width": 1.5 }),
|
||||
]),
|
||||
},
|
||||
{
|
||||
label: "Lichtanlagen",
|
||||
icon: () => h("svg", { width: 48, height: 48, viewBox: "0 0 48 48", fill: "none" }, [
|
||||
h("rect", { x: 18, y: 6, width: 12, height: 10, rx: 1, fill: "currentColor" }),
|
||||
h("path", { d: "M24 16 L24 24", stroke: "currentColor", "stroke-width": 2, "stroke-linecap": "round" }),
|
||||
h("circle", { cx: 24, cy: 30, r: 6, fill: "none", stroke: "currentColor", "stroke-width": 2 }),
|
||||
h("path", { d: "M18 30 L14 30 M30 30 L34 30", stroke: "currentColor", "stroke-width": 1.5, "stroke-linecap": "round", opacity: 0.5 }),
|
||||
]),
|
||||
},
|
||||
{
|
||||
label: "Rigging",
|
||||
icon: () => h("svg", { width: 48, height: 48, viewBox: "0 0 48 48", fill: "none" }, [
|
||||
h("path", { d: "M24 6 L24 18", stroke: "currentColor", "stroke-width": 2, "stroke-linecap": "round" }),
|
||||
h("rect", { x: 16, y: 18, width: 16, height: 20, rx: 2, fill: "none", stroke: "currentColor", "stroke-width": 2 }),
|
||||
h("path", { d: "M20 18 L16 10 M28 18 L32 10", stroke: "currentColor", "stroke-width": 1.5, "stroke-linecap": "round" }),
|
||||
]),
|
||||
},
|
||||
{
|
||||
label: "Traversen",
|
||||
icon: () => h("svg", { width: 48, height: 48, viewBox: "0 0 48 48", fill: "none" }, [
|
||||
h("rect", { x: 6, y: 20, width: 36, height: 8, rx: 1, fill: "none", stroke: "currentColor", "stroke-width": 2 }),
|
||||
h("line", { x1: 12, y1: 20, x2: 12, y2: 28, stroke: "currentColor", "stroke-width": 1.5 }),
|
||||
h("line", { x1: 18, y1: 20, x2: 18, y2: 28, stroke: "currentColor", "stroke-width": 1.5 }),
|
||||
h("line", { x1: 24, y1: 20, x2: 24, y2: 28, stroke: "currentColor", "stroke-width": 1.5 }),
|
||||
h("line", { x1: 30, y1: 20, x2: 30, y2: 28, stroke: "currentColor", "stroke-width": 1.5 }),
|
||||
h("line", { x1: 36, y1: 20, x2: 36, y2: 28, stroke: "currentColor", "stroke-width": 1.5 }),
|
||||
]),
|
||||
},
|
||||
{
|
||||
label: "Komplett-Setups",
|
||||
icon: () => h("svg", { width: 48, height: 48, viewBox: "0 0 48 48", fill: "none" }, [
|
||||
h("circle", { cx: 24, cy: 24, r: 18, fill: "none", stroke: "currentColor", "stroke-width": 2 }),
|
||||
h("path", { d: "M24 6 L24 18 M6 24 L18 24 M24 30 L24 42 M30 24 L42 24", stroke: "currentColor", "stroke-width": 1.5, "stroke-linecap": "round" }),
|
||||
h("circle", { cx: 24, cy: 24, r: 6, fill: "none", stroke: "currentColor", "stroke-width": 2 }),
|
||||
]),
|
||||
},
|
||||
];
|
||||
</script>
|
||||
function navigate(route: string) {
|
||||
navigateTo(route)
|
||||
if (import.meta.client) window.scrollTo(0, 0)
|
||||
}
|
||||
</script>
|
||||
|
||||
+48
-271
@@ -1,285 +1,62 @@
|
||||
<template>
|
||||
<div>
|
||||
<h1 class="text-3xl font-bold text-text mb-2" data-testid="kontakt-headline">Kontakt</h1>
|
||||
<p class="text-text-muted mb-8">Planen Sie mit uns Ihre nächste Veranstaltung.</p>
|
||||
|
||||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8 mb-12">
|
||||
<!-- Left Column: Addresses + Persons -->
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
|
||||
<h1 class="text-3xl sm:text-4xl font-bold mb-2" style="color: var(--text)">Kontakt</h1>
|
||||
<p class="mb-8" style="color: var(--secondary)">Wir beraten Sie persönlich – telefonisch, per E-Mail oder über das Kontaktformular.</p>
|
||||
<div class="grid lg:grid-cols-2 gap-8">
|
||||
<div class="space-y-6">
|
||||
<!-- Office Address -->
|
||||
<div class="bg-panel border border-border-default rounded-lg p-6" data-testid="office-card">
|
||||
<h2 class="text-accent text-sm font-bold mb-3">Büro</h2>
|
||||
<p class="text-text mb-1">Hammerschmidt u. Mössle GbR</p>
|
||||
<p class="text-text-muted text-sm mb-1">Grockelhofen 10</p>
|
||||
<p class="text-text-muted text-sm mb-3">89340 Leipheim</p>
|
||||
<p class="text-text-muted text-sm mb-1">Tel: <a href="tel:+498221204433" class="text-accent hover:underline">+49 8221 204433</a></p>
|
||||
<p class="text-text-muted text-sm">E-Mail: <a href="mailto:info@hms-licht-ton.de" class="text-accent hover:underline">info@hms-licht-ton.de</a></p>
|
||||
</div>
|
||||
|
||||
<!-- Warehouse Address -->
|
||||
<div class="bg-panel border border-border-default rounded-lg p-6" data-testid="warehouse-card">
|
||||
<h2 class="text-accent text-sm font-bold mb-3">Lager / Werkstatt</h2>
|
||||
<p class="text-text-muted text-sm mb-1">Ellzee</p>
|
||||
<p class="text-text-muted text-sm mb-3">Bayern, Deutschland</p>
|
||||
<p class="text-text-muted text-sm">Besuche nach Terminvereinbarung.</p>
|
||||
</div>
|
||||
|
||||
<!-- Opening Hours -->
|
||||
<div class="bg-panel border border-border-default rounded-lg p-6" data-testid="hours-card">
|
||||
<h2 class="text-accent text-sm font-bold mb-3">Öffnungszeiten</h2>
|
||||
<div class="space-y-1 text-text-muted text-sm">
|
||||
<p>Mo – Do: 08:00 – 17:00</p>
|
||||
<p>Fr: 08:00 – 14:00</p>
|
||||
<p>Sa – So: Geschlossen</p>
|
||||
<p class="text-accent text-xs mt-2">Termine außerhalb der Öffnungszeiten nach Vereinbarung.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Contact Persons -->
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
||||
<div v-for="person in contactPersons" :key="person.name" class="bg-panel border border-border-default rounded-lg p-5" :data-testid="'contact-person-' + person.name.split(' ')[0].toLowerCase()">
|
||||
<div class="w-16 h-16 rounded-full bg-card border border-border-default mb-3 flex items-center justify-center text-secondary">
|
||||
<svg width="32" height="32" viewBox="0 0 32 32" fill="none">
|
||||
<circle cx="16" cy="12" r="5" fill="none" stroke="currentColor" stroke-width="2" />
|
||||
<path d="M6 28 Q16 20 26 28" fill="none" stroke="currentColor" stroke-width="2" />
|
||||
</svg>
|
||||
</div>
|
||||
<p class="text-text text-sm font-bold">{{ person.name }}</p>
|
||||
<p class="text-accent text-xs mb-1">{{ person.role }}</p>
|
||||
<a :href="'mailto:' + person.email" class="text-text-muted text-xs hover:text-accent transition-colors duration-fast">{{ person.email }}</a>
|
||||
</div>
|
||||
<div class="hms-card p-6"><h2 class="text-lg font-semibold mb-4 flex items-center gap-2" style="color: var(--text)"><span style="color: var(--color-accent)">🏢</span> Büro Leipheim</h2><div class="space-y-1 text-sm" style="color: var(--text-muted)"><p>Grockelhofen 10<br>89340 Leipheim</p><a href="https://maps.google.com/?q=Grockelhofen+10+89340+Leipheim" target="_blank" rel="noopener" class="inline-flex items-center gap-1 mt-2" style="color: var(--color-accent)">Route planen <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3"/></svg></a></div></div>
|
||||
<div class="hms-card p-6"><h2 class="text-lg font-semibold mb-4 flex items-center gap-2" style="color: var(--text)"><span style="color: var(--color-accent)">📦</span> Mietlager Ellzee</h2><div class="space-y-1 text-sm" style="color: var(--text-muted)"><p>Zur Schönhalde 8<br>89352 Ellzee</p><a href="https://maps.google.com/?q=Zur+Schönhalde+8+89352+Ellzee" target="_blank" rel="noopener" class="inline-flex items-center gap-1 mt-2" style="color: var(--color-accent)">Route planen <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3"/></svg></a></div></div>
|
||||
<div class="hms-card p-6"><h2 class="text-lg font-semibold mb-4 flex items-center gap-2" style="color: var(--text)"><span style="color: var(--color-accent)">🕐</span> Öffnungszeiten</h2><div class="text-sm" style="color: var(--text-muted)"><div class="flex justify-between py-2 border-b" :style="{ borderColor: 'var(--border)' }"><span>Montag – Freitag</span><span class="font-medium" style="color: var(--text)">10:00 – 18:00</span></div><div class="flex justify-between py-2"><span>Samstag & Sonntag</span><span style="color: var(--secondary)">Geschlossen</span></div></div></div>
|
||||
<div class="grid sm:grid-cols-2 gap-4">
|
||||
<div class="hms-card p-6 text-center"><div class="w-16 h-16 rounded-full mx-auto mb-3 flex items-center justify-center text-2xl" style="background: var(--surface); color: var(--secondary)">👤</div><h3 class="font-semibold" style="color: var(--text)">Leopold Hammerschmidt</h3><div class="text-xs mb-3" style="color: var(--secondary)">Geschäftsführung</div><a href="tel:+491726264796" class="block text-sm mb-1" style="color: var(--text-muted)">+49 (0) 172 6264796</a><a href="mailto:leopold.hammerschmidt@hms-licht-ton.de" class="block text-sm break-all" style="color: var(--text-muted)">leopold.hammerschmidt@hms-licht-ton.de</a></div>
|
||||
<div class="hms-card p-6 text-center"><div class="w-16 h-16 rounded-full mx-auto mb-3 flex items-center justify-center text-2xl" style="background: var(--surface); color: var(--secondary)">👤</div><h3 class="font-semibold" style="color: var(--text)">Andreas Mössle</h3><div class="text-xs mb-3" style="color: var(--secondary)">Geschäftsführung</div><a href="tel:+491739014604" class="block text-sm mb-1" style="color: var(--text-muted)">+49 (0) 173 / 9014604</a><a href="mailto:andreas.moessle@hms-licht-ton.de" class="block text-sm break-all" style="color: var(--text-muted)">andreas.moessle@hms-licht-ton.de</a></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Right Column: Contact Form -->
|
||||
<div class="bg-panel border border-border-default rounded-lg p-6" data-testid="contact-form-card">
|
||||
<h2 class="text-2xl font-bold mb-6">Anfrage senden</h2>
|
||||
|
||||
<!-- Success State -->
|
||||
<div v-if="submitSuccess" class="bg-success-bg border border-success/30 rounded-lg p-6 text-center" data-testid="success-message">
|
||||
<p class="text-success font-bold text-lg mb-2">Vielen Dank!</p>
|
||||
<p class="text-text-muted text-sm">Ihre Nachricht wurde erfolgreich gesendet. Wir melden uns in Kürze bei Ihnen.</p>
|
||||
<button class="btn-secondary mt-4" @click="resetForm" data-testid="reset-form">Neue Nachricht</button>
|
||||
<div>
|
||||
<div class="hms-card p-6 sm:p-8">
|
||||
<h2 class="text-xl font-semibold mb-6" style="color: var(--text)">Nachricht senden</h2>
|
||||
<div v-if="submitted" class="text-center py-8" role="status">
|
||||
<div class="inline-flex items-center justify-center w-16 h-16 rounded-full mb-4" :style="{ background: 'var(--color-success-bg)', color: 'var(--color-success)' }"><svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg></div>
|
||||
<h3 class="text-lg font-semibold mb-2" style="color: var(--text)">Nachricht übermittelt</h3>
|
||||
<p class="text-sm mb-6" style="color: var(--secondary)">Vielen Dank für Ihre Anfrage. Wir melden uns innerhalb von 24 Stunden bei Ihnen.</p>
|
||||
<button @click="resetForm" class="hms-btn hms-btn-secondary">Neue Nachricht</button>
|
||||
</div>
|
||||
<form v-else @submit.prevent="submit" novalidate>
|
||||
<div class="space-y-4">
|
||||
<div><label for="name" class="block text-sm font-medium mb-1" style="color: var(--text-muted)">Name <span style="color: var(--color-error)" aria-label="Pflichtfeld">*</span></label><input id="name" v-model="form.name" type="text" :class="['hms-input', errors.name ? 'hms-input-error' : '']" placeholder="Ihr Name" :aria-invalid="!!errors.name" /><p v-if="errors.name" class="text-xs mt-1" style="color: var(--color-error)" role="alert">{{ errors.name }}</p></div>
|
||||
<div><label for="email" class="block text-sm font-medium mb-1" style="color: var(--text-muted)">E-Mail <span style="color: var(--color-error)" aria-label="Pflichtfeld">*</span></label><input id="email" v-model="form.email" type="email" :class="['hms-input', errors.email ? 'hms-input-error' : '']" placeholder="ihre@email.de" :aria-invalid="!!errors.email" /><p v-if="errors.email" class="text-xs mt-1" style="color: var(--color-error)" role="alert">{{ errors.email }}</p></div>
|
||||
<div><label for="phone" class="block text-sm font-medium mb-1" style="color: var(--text-muted)">Telefon</label><input id="phone" v-model="form.phone" type="tel" class="hms-input" placeholder="+49 ..." /></div>
|
||||
<div><label for="subject" class="block text-sm font-medium mb-1" style="color: var(--text-muted)">Anliegen</label><select id="subject" v-model="form.subject" class="hms-input"><option value="">Bitte wählen</option><option value="vermietung">Vermietungsanfrage</option><option value="verkauf">Verkaufsberatung</option><option value="personal">Personalanfrage</option><option value="installation">Installationsanfrage</option><option value="sonstiges">Sonstiges</option></select></div>
|
||||
<div><label for="message" class="block text-sm font-medium mb-1" style="color: var(--text-muted)">Nachricht <span style="color: var(--color-error)" aria-label="Pflichtfeld">*</span></label><textarea id="message" v-model="form.message" rows="5" :class="['hms-input', errors.message ? 'hms-input-error' : '']" placeholder="Beschreiben Sie Ihr Anliegen – Veranstaltungstyp, Ort, erwartete Besucherzahl, benötigtes Equipment..." :aria-invalid="!!errors.message"></textarea><p v-if="errors.message" class="text-xs mt-1" style="color: var(--color-error)" role="alert">{{ errors.message }}</p></div>
|
||||
<div><label class="flex items-start gap-3 cursor-pointer"><input type="checkbox" v-model="form.privacy" class="mt-1 w-5 h-5 rounded" :style="{ accentColor: 'var(--color-accent)' }" :aria-invalid="!!errors.privacy" /><span class="text-xs" style="color: var(--text-muted)">Ich habe die <NuxtLink to="/datenschutz" style="color: var(--color-accent)">Datenschutzerklärung</NuxtLink> gelesen und stimme zu, dass meine Angaben zur Bearbeitung meiner Anfrage gespeichert werden. <span style="color: var(--color-error)">*</span></span></label><p v-if="errors.privacy" class="text-xs mt-1" style="color: var(--color-error)" role="alert">{{ errors.privacy }}</p></div>
|
||||
<button type="submit" :disabled="submitting" class="hms-btn hms-btn-primary w-full text-base py-3"><span v-if="submitting" class="hms-spinner" style="width:18px;height:18px;border-width:2px"></span><span v-else>Nachricht senden</span></button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<!-- Error State -->
|
||||
<div v-else-if="submitError" class="bg-error-bg border border-error/30 rounded-lg p-6 text-center" data-testid="error-message">
|
||||
<p class="text-error font-bold text-lg mb-2">Fehler</p>
|
||||
<p class="text-text-muted text-sm mb-4">Beim Senden ist ein Fehler aufgetreten. Bitte versuchen Sie es erneut.</p>
|
||||
<button class="btn-primary" @click="submitError = false" data-testid="retry-submit">Erneut versuchen</button>
|
||||
</div>
|
||||
|
||||
<!-- Form -->
|
||||
<form v-else @submit.prevent="handleSubmit" novalidate data-testid="contact-form">
|
||||
<!-- Name -->
|
||||
<div class="mb-4">
|
||||
<label for="name" class="block text-text-muted text-sm mb-1">Name *</label>
|
||||
<input
|
||||
id="name"
|
||||
v-model="form.name"
|
||||
type="text"
|
||||
class="w-full bg-surface border border-border-default rounded-md px-3 py-2 text-text focus:border-accent focus:outline-none"
|
||||
:class="{ 'border-error': errors.name }"
|
||||
data-testid="form-name"
|
||||
@blur="validateField('name')"
|
||||
/>
|
||||
<p v-if="errors.name" class="text-error text-xs mt-1" data-testid="error-name">{{ errors.name }}</p>
|
||||
</div>
|
||||
|
||||
<!-- Email -->
|
||||
<div class="mb-4">
|
||||
<label for="email" class="block text-text-muted text-sm mb-1">E-Mail *</label>
|
||||
<input
|
||||
id="email"
|
||||
v-model="form.email"
|
||||
type="email"
|
||||
class="w-full bg-surface border border-border-default rounded-md px-3 py-2 text-text focus:border-accent focus:outline-none"
|
||||
:class="{ 'border-error': errors.email }"
|
||||
data-testid="form-email"
|
||||
@blur="validateField('email')"
|
||||
/>
|
||||
<p v-if="errors.email" class="text-error text-xs mt-1" data-testid="error-email">{{ errors.email }}</p>
|
||||
</div>
|
||||
|
||||
<!-- Phone -->
|
||||
<div class="mb-4">
|
||||
<label for="phone" class="block text-text-muted text-sm mb-1">Telefon</label>
|
||||
<input
|
||||
id="phone"
|
||||
v-model="form.phone"
|
||||
type="tel"
|
||||
class="w-full bg-surface border border-border-default rounded-md px-3 py-2 text-text focus:border-accent focus:outline-none"
|
||||
data-testid="form-phone"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Message -->
|
||||
<div class="mb-4">
|
||||
<label for="message" class="block text-text-muted text-sm mb-1">Nachricht *</label>
|
||||
<textarea
|
||||
id="message"
|
||||
v-model="form.message"
|
||||
rows="5"
|
||||
class="w-full bg-surface border border-border-default rounded-md px-3 py-2 text-text focus:border-accent focus:outline-none"
|
||||
:class="{ 'border-error': errors.message }"
|
||||
data-testid="form-message"
|
||||
@blur="validateField('message')"
|
||||
></textarea>
|
||||
<p v-if="errors.message" class="text-error text-xs mt-1" data-testid="error-message-field">{{ errors.message }}</p>
|
||||
</div>
|
||||
|
||||
<!-- Privacy Consent -->
|
||||
<div class="mb-6">
|
||||
<label class="flex items-start gap-3 cursor-pointer">
|
||||
<input
|
||||
v-model="form.privacy"
|
||||
type="checkbox"
|
||||
class="mt-1 w-4 h-4 rounded border-border-default bg-surface accent-accent"
|
||||
:class="{ 'border-error': errors.privacy }"
|
||||
data-testid="form-privacy"
|
||||
/>
|
||||
<span class="text-text-muted text-sm">
|
||||
Ich habe die <NuxtLink to="/datenschutz" class="text-accent hover:underline">Datenschutzerklärung</NuxtLink> gelesen und stimme zu, dass meine Daten zur Bearbeitung meiner Anfrage gespeichert werden. *
|
||||
</span>
|
||||
</label>
|
||||
<p v-if="errors.privacy" class="text-error text-xs mt-1" data-testid="error-privacy">{{ errors.privacy }}</p>
|
||||
</div>
|
||||
|
||||
<!-- Submit Button -->
|
||||
<button
|
||||
type="submit"
|
||||
class="btn-primary w-full"
|
||||
:disabled="isSubmitting"
|
||||
data-testid="form-submit"
|
||||
>
|
||||
{{ isSubmitting ? "Wird gesendet..." : "Anfrage senden" }}
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { reactive, ref } from "vue";
|
||||
import { reactive, ref } from 'vue'
|
||||
|
||||
useHead({
|
||||
title: "Kontakt – HMS Licht & Ton",
|
||||
meta: [{ name: "robots", content: "noindex, nofollow, noarchive, nosnippet" }],
|
||||
});
|
||||
const form = reactive({ name: '', email: '', phone: '', subject: '', message: '', privacy: false })
|
||||
const errors = reactive<Record<string, string>>({})
|
||||
const submitted = ref(false)
|
||||
const submitting = ref(false)
|
||||
|
||||
const contactPersons = [
|
||||
{ name: "Markus Hammerschmidt", role: "Geschäftsführer – Ton & Verkauf", email: "m.hammerschmidt@hms-licht-ton.de" },
|
||||
{ name: "Thomas Mössle", role: "Geschäftsführer – Licht & Rigging", email: "t.moessle@hms-licht-ton.de" },
|
||||
];
|
||||
|
||||
interface ContactForm {
|
||||
name: string;
|
||||
email: string;
|
||||
phone: string;
|
||||
message: string;
|
||||
privacy: boolean;
|
||||
function validate(): boolean {
|
||||
const e: Record<string, string> = {}
|
||||
if (!form.name.trim()) e.name = 'Name ist erforderlich'
|
||||
if (!form.email.trim()) e.email = 'E-Mail ist erforderlich'
|
||||
else if (!/^\S+@\S+\.\S+$/.test(form.email)) e.email = 'Ungültige E-Mail-Adresse'
|
||||
if (!form.message.trim()) e.message = 'Nachricht ist erforderlich'
|
||||
if (!form.privacy) e.privacy = 'Bitte stimmen Sie der Datenschutzerklärung zu'
|
||||
Object.keys(errors).forEach(k => delete errors[k])
|
||||
Object.assign(errors, e)
|
||||
return Object.keys(e).length === 0
|
||||
}
|
||||
|
||||
interface FormErrors {
|
||||
name?: string;
|
||||
email?: string;
|
||||
message?: string;
|
||||
privacy?: string;
|
||||
}
|
||||
|
||||
const form = reactive<ContactForm>({
|
||||
name: "",
|
||||
email: "",
|
||||
phone: "",
|
||||
message: "",
|
||||
privacy: false,
|
||||
});
|
||||
|
||||
const errors = reactive<FormErrors>({});
|
||||
const isSubmitting = ref(false);
|
||||
const submitSuccess = ref(false);
|
||||
const submitError = ref(false);
|
||||
|
||||
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
|
||||
|
||||
function validateField(field: keyof FormErrors): boolean {
|
||||
switch (field) {
|
||||
case "name":
|
||||
if (!form.name.trim()) {
|
||||
errors.name = "Bitte geben Sie Ihren Namen ein.";
|
||||
return false;
|
||||
}
|
||||
delete errors.name;
|
||||
return true;
|
||||
case "email":
|
||||
if (!form.email.trim()) {
|
||||
errors.email = "Bitte geben Sie Ihre E-Mail-Adresse ein.";
|
||||
return false;
|
||||
}
|
||||
if (!emailRegex.test(form.email)) {
|
||||
errors.email = "Bitte geben Sie eine gültige E-Mail-Adresse ein.";
|
||||
return false;
|
||||
}
|
||||
delete errors.email;
|
||||
return true;
|
||||
case "message":
|
||||
if (!form.message.trim()) {
|
||||
errors.message = "Bitte geben Sie eine Nachricht ein.";
|
||||
return false;
|
||||
}
|
||||
delete errors.message;
|
||||
return true;
|
||||
case "privacy":
|
||||
if (!form.privacy) {
|
||||
errors.privacy = "Bitte stimmen Sie der Datenschutzerklärung zu.";
|
||||
return false;
|
||||
}
|
||||
delete errors.privacy;
|
||||
return true;
|
||||
default:
|
||||
return true;
|
||||
}
|
||||
}
|
||||
|
||||
function validateAll(): boolean {
|
||||
const nameValid = validateField("name");
|
||||
const emailValid = validateField("email");
|
||||
const messageValid = validateField("message");
|
||||
const privacyValid = validateField("privacy");
|
||||
return nameValid && emailValid && messageValid && privacyValid;
|
||||
}
|
||||
|
||||
async function handleSubmit(): Promise<void> {
|
||||
if (!validateAll()) return;
|
||||
|
||||
isSubmitting.value = true;
|
||||
try {
|
||||
await $fetch("/api/contact", {
|
||||
method: "POST",
|
||||
body: {
|
||||
name: form.name,
|
||||
email: form.email,
|
||||
phone: form.phone,
|
||||
message: form.message,
|
||||
},
|
||||
});
|
||||
submitSuccess.value = true;
|
||||
} catch (err) {
|
||||
submitError.value = true;
|
||||
} finally {
|
||||
isSubmitting.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
function resetForm(): void {
|
||||
form.name = "";
|
||||
form.email = "";
|
||||
form.phone = "";
|
||||
form.message = "";
|
||||
form.privacy = false;
|
||||
Object.keys(errors).forEach((k) => delete errors[k as keyof FormErrors]);
|
||||
submitSuccess.value = false;
|
||||
submitError.value = false;
|
||||
}
|
||||
</script>
|
||||
function submit() { if (!validate()) return; submitting.value = true; setTimeout(() => { submitting.value = false; submitted.value = true }, 1500) }
|
||||
function resetForm() { Object.assign(form, { name: '', email: '', phone: '', subject: '', message: '', privacy: false }); submitted.value = false }
|
||||
</script>
|
||||
|
||||
@@ -1,508 +0,0 @@
|
||||
<template>
|
||||
<div class="max-w-5xl mx-auto px-4 py-8">
|
||||
<!-- Breadcrumb -->
|
||||
<nav class="flex items-center gap-2 text-sm text-text-muted mb-6" aria-label="Breadcrumb">
|
||||
<NuxtLink to="/" class="hover:text-accent transition-colors duration-fast">Home</NuxtLink>
|
||||
<span class="text-secondary">/</span>
|
||||
<NuxtLink to="/warenkorb" class="hover:text-accent transition-colors duration-fast">Warenkorb</NuxtLink>
|
||||
<span class="text-secondary">/</span>
|
||||
<span class="text-text font-medium">Mietanfrage</span>
|
||||
</nav>
|
||||
|
||||
<h1 class="text-2xl font-bold text-text mb-6" data-testid="mietanfrage-title">Mietanfrage</h1>
|
||||
|
||||
<!-- Empty Cart Redirect -->
|
||||
<div v-if="isEmpty" class="flex flex-col items-center justify-center py-16 text-center" data-testid="mietanfrage-empty-cart">
|
||||
<div class="w-20 h-20 mb-4 flex items-center justify-center rounded-full bg-surface">
|
||||
<svg class="w-10 h-10 text-secondary" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" aria-hidden="true">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M2.25 3h1.386c.51 0 .955.343 1.087.835l.383 1.437M7.5 14.25a3 3 0 00-3 3h15.75m-12.75-3h11.218c1.121-2.3 2.1-4.684 2.924-7.138a60.114 60.114 0 00-16.536-1.84M7.5 14.25L5.106 5.272M6 20.25a.75.75 0 11-1.5 0 .75.75 0 011.5 0zm12.75 0a.75.75 0 11-1.5 0 .75.75 0 011.5 0z" />
|
||||
</svg>
|
||||
</div>
|
||||
<h2 class="text-lg font-bold text-text mb-2">Ihr Warenkorb ist leer</h2>
|
||||
<p class="text-text-muted text-sm mb-6 max-w-sm">Bitte fügen Sie zuerst Artikel zum Warenkorb hinzu, bevor Sie eine Mietanfrage stellen.</p>
|
||||
<NuxtLink to="/mietkatalog" class="btn-primary" data-testid="mietanfrage-empty-cta">
|
||||
Zum Mietkatalog
|
||||
</NuxtLink>
|
||||
</div>
|
||||
|
||||
<!-- Success State -->
|
||||
<div v-else-if="submitState === 'success'" class="flex flex-col items-center justify-center py-16 text-center" data-testid="mietanfrage-success">
|
||||
<div class="w-20 h-20 mb-4 flex items-center justify-center rounded-full bg-success-bg">
|
||||
<svg class="w-10 h-10 text-success" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" aria-hidden="true">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
</div>
|
||||
<h2 class="text-lg font-bold text-text mb-2">Vielen Dank für Ihre Anfrage!</h2>
|
||||
<p class="text-text-muted text-sm mb-2">Ihre Mietanfrage wurde erfolgreich übermittelt.</p>
|
||||
<p class="text-text-muted text-sm mb-4">
|
||||
Ihre Referenznummer:
|
||||
<span class="text-accent font-bold text-base" data-testid="mietanfrage-reference-number">{{ referenceNumber }}</span>
|
||||
</p>
|
||||
<p class="text-text-muted text-xs mb-6 max-w-md">Wir werden uns in Kürze mit Ihnen in Verbindung setzen, um die Verfügbarkeit zu prüfen und Ihnen ein Angebot zu erstellen.</p>
|
||||
<NuxtLink to="/" class="btn-primary" data-testid="mietanfrage-success-home">
|
||||
Zurück zur Startseite
|
||||
</NuxtLink>
|
||||
</div>
|
||||
|
||||
<!-- Form State -->
|
||||
<div v-else class="grid grid-cols-1 lg:grid-cols-3 gap-8">
|
||||
<!-- Cart Overview (Read-Only) -->
|
||||
<div class="lg:col-span-1">
|
||||
<div class="panel rounded-lg p-4" data-testid="mietanfrage-cart-overview">
|
||||
<h2 class="text-base font-bold text-text mb-4">Übersicht</h2>
|
||||
<div class="space-y-3">
|
||||
<div
|
||||
v-for="item in items"
|
||||
:key="item.equipment_id"
|
||||
class="flex items-center gap-3"
|
||||
data-testid="mietanfrage-cart-item"
|
||||
>
|
||||
<div class="w-10 h-10 rounded-md overflow-hidden bg-surface shrink-0">
|
||||
<img
|
||||
v-if="item.image_url"
|
||||
:src="item.image_url"
|
||||
:alt="item.name"
|
||||
class="w-full h-full object-cover"
|
||||
/>
|
||||
<div v-else class="w-full h-full flex items-center justify-center">
|
||||
<svg class="w-5 h-5 text-secondary" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" aria-hidden="true">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M2.25 15.75l5.159-5.159a2.25 2.25 0 013.182 0l5.159 5.159m-1.5-1.5l1.409-1.409a2.25 2.25 0 013.182 0l2.909 2.909M3.75 3.75h16.5a1.5 1.5 0 011.5 1.5v12a1.5 1.5 0 01-1.5 1.5H3.75a1.5 1.5 0 01-1.5-1.5V5.25a1.5 1.5 0 011.5-1.5z" />
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-grow min-w-0">
|
||||
<p class="text-sm font-medium text-text line-clamp-1">{{ item.name }}</p>
|
||||
<p class="text-xs text-text-muted">Menge: {{ item.quantity }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-4 pt-4 border-t border-border-default">
|
||||
<p class="text-sm text-text-muted">
|
||||
Insgesamt <span class="text-text font-bold">{{ totalCount }}</span> Artikel
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Form Section -->
|
||||
<div class="lg:col-span-2">
|
||||
<form class="space-y-8" @submit.prevent="handleSubmit" data-testid="mietanfrage-form">
|
||||
<!-- Event Details -->
|
||||
<fieldset class="panel rounded-lg p-6">
|
||||
<legend class="text-base font-bold text-text px-2">Veranstaltungsdetails</legend>
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4 mt-4">
|
||||
<!-- Event Name -->
|
||||
<div class="sm:col-span-2">
|
||||
<label for="event_name" class="block text-sm font-medium text-text-muted mb-1">
|
||||
Veranstaltung / Event <span class="text-accent">*</span>
|
||||
</label>
|
||||
<input
|
||||
id="event_name"
|
||||
v-model="form.event_name"
|
||||
type="text"
|
||||
class="w-full bg-surface border border-border-default rounded-md px-3 py-2.5 text-text placeholder:text-secondary focus:border-accent focus:outline-none transition-colors duration-fast"
|
||||
:class="{ 'border-error': errors.event_name }"
|
||||
data-testid="form-event-name"
|
||||
placeholder="z.B. Firmenfeier, Hochzeit, Konzert"
|
||||
@blur="validateField('event_name')"
|
||||
/>
|
||||
<p v-if="errors.event_name" class="text-xs text-error mt-1" data-testid="error-event-name">{{ errors.event_name }}</p>
|
||||
</div>
|
||||
|
||||
<!-- Date Start -->
|
||||
<div>
|
||||
<label for="date_start" class="block text-sm font-medium text-text-muted mb-1">
|
||||
Von <span class="text-accent">*</span>
|
||||
</label>
|
||||
<input
|
||||
id="date_start"
|
||||
v-model="form.date_start"
|
||||
type="date"
|
||||
class="w-full bg-surface border border-border-default rounded-md px-3 py-2.5 text-text focus:border-accent focus:outline-none transition-colors duration-fast"
|
||||
:class="{ 'border-error': errors.date_start }"
|
||||
data-testid="form-date-start"
|
||||
@blur="validateField('date_start')"
|
||||
/>
|
||||
<p v-if="errors.date_start" class="text-xs text-error mt-1" data-testid="error-date-start">{{ errors.date_start }}</p>
|
||||
</div>
|
||||
|
||||
<!-- Date End -->
|
||||
<div>
|
||||
<label for="date_end" class="block text-sm font-medium text-text-muted mb-1">
|
||||
Bis <span class="text-accent">*</span>
|
||||
</label>
|
||||
<input
|
||||
id="date_end"
|
||||
v-model="form.date_end"
|
||||
type="date"
|
||||
class="w-full bg-surface border border-border-default rounded-md px-3 py-2.5 text-text focus:border-accent focus:outline-none transition-colors duration-fast"
|
||||
:class="{ 'border-error': errors.date_end }"
|
||||
data-testid="form-date-end"
|
||||
@blur="validateField('date_end')"
|
||||
/>
|
||||
<p v-if="errors.date_end" class="text-xs text-error mt-1" data-testid="error-date-end">{{ errors.date_end }}</p>
|
||||
</div>
|
||||
|
||||
<!-- Location -->
|
||||
<div class="sm:col-span-2">
|
||||
<label for="location" class="block text-sm font-medium text-text-muted mb-1">
|
||||
Veranstaltungsort <span class="text-accent">*</span>
|
||||
</label>
|
||||
<input
|
||||
id="location"
|
||||
v-model="form.location"
|
||||
type="text"
|
||||
class="w-full bg-surface border border-border-default rounded-md px-3 py-2.5 text-text placeholder:text-secondary focus:border-accent focus:outline-none transition-colors duration-fast"
|
||||
:class="{ 'border-error': errors.location }"
|
||||
data-testid="form-location"
|
||||
placeholder="z.B. Leipheim, Bayern"
|
||||
@blur="validateField('location')"
|
||||
/>
|
||||
<p v-if="errors.location" class="text-xs text-error mt-1" data-testid="error-location">{{ errors.location }}</p>
|
||||
</div>
|
||||
|
||||
<!-- Person Count -->
|
||||
<div class="sm:col-span-2">
|
||||
<label for="person_count" class="block text-sm font-medium text-text-muted mb-1">
|
||||
Personenanzahl <span class="text-accent">*</span>
|
||||
</label>
|
||||
<input
|
||||
id="person_count"
|
||||
v-model.number="form.person_count"
|
||||
type="number"
|
||||
min="1"
|
||||
class="w-full bg-surface border border-border-default rounded-md px-3 py-2.5 text-text placeholder:text-secondary focus:border-accent focus:outline-none transition-colors duration-fast"
|
||||
:class="{ 'border-error': errors.person_count }"
|
||||
data-testid="form-person-count"
|
||||
placeholder="z.B. 100"
|
||||
@blur="validateField('person_count')"
|
||||
/>
|
||||
<p v-if="errors.person_count" class="text-xs text-error mt-1" data-testid="error-person-count">{{ errors.person_count }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</fieldset>
|
||||
|
||||
<!-- Contact Details -->
|
||||
<fieldset class="panel rounded-lg p-6">
|
||||
<legend class="text-base font-bold text-text px-2">Kontaktdaten</legend>
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4 mt-4">
|
||||
<!-- Contact Name -->
|
||||
<div>
|
||||
<label for="contact_name" class="block text-sm font-medium text-text-muted mb-1">
|
||||
Name <span class="text-accent">*</span>
|
||||
</label>
|
||||
<input
|
||||
id="contact_name"
|
||||
v-model="form.contact_name"
|
||||
type="text"
|
||||
class="w-full bg-surface border border-border-default rounded-md px-3 py-2.5 text-text placeholder:text-secondary focus:border-accent focus:outline-none transition-colors duration-fast"
|
||||
:class="{ 'border-error': errors.contact_name }"
|
||||
data-testid="form-contact-name"
|
||||
placeholder="Vor- und Nachname"
|
||||
@blur="validateField('contact_name')"
|
||||
/>
|
||||
<p v-if="errors.contact_name" class="text-xs text-error mt-1" data-testid="error-contact-name">{{ errors.contact_name }}</p>
|
||||
</div>
|
||||
|
||||
<!-- Contact Company -->
|
||||
<div>
|
||||
<label for="contact_company" class="block text-sm font-medium text-text-muted mb-1">
|
||||
Firma
|
||||
</label>
|
||||
<input
|
||||
id="contact_company"
|
||||
v-model="form.contact_company"
|
||||
type="text"
|
||||
class="w-full bg-surface border border-border-default rounded-md px-3 py-2.5 text-text placeholder:text-secondary focus:border-accent focus:outline-none transition-colors duration-fast"
|
||||
data-testid="form-contact-company"
|
||||
placeholder="Firmenname (optional)"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Contact Email -->
|
||||
<div>
|
||||
<label for="contact_email" class="block text-sm font-medium text-text-muted mb-1">
|
||||
E-Mail <span class="text-accent">*</span>
|
||||
</label>
|
||||
<input
|
||||
id="contact_email"
|
||||
v-model="form.contact_email"
|
||||
type="email"
|
||||
class="w-full bg-surface border border-border-default rounded-md px-3 py-2.5 text-text placeholder:text-secondary focus:border-accent focus:outline-none transition-colors duration-fast"
|
||||
:class="{ 'border-error': errors.contact_email }"
|
||||
data-testid="form-contact-email"
|
||||
placeholder="ihre@email.de"
|
||||
@blur="validateField('contact_email')"
|
||||
/>
|
||||
<p v-if="errors.contact_email" class="text-xs text-error mt-1" data-testid="error-contact-email">{{ errors.contact_email }}</p>
|
||||
</div>
|
||||
|
||||
<!-- Contact Phone -->
|
||||
<div>
|
||||
<label for="contact_phone" class="block text-sm font-medium text-text-muted mb-1">
|
||||
Telefon
|
||||
</label>
|
||||
<input
|
||||
id="contact_phone"
|
||||
v-model="form.contact_phone"
|
||||
type="tel"
|
||||
class="w-full bg-surface border border-border-default rounded-md px-3 py-2.5 text-text placeholder:text-secondary focus:border-accent focus:outline-none transition-colors duration-fast"
|
||||
data-testid="form-contact-phone"
|
||||
placeholder="+49 ..."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Contact Street -->
|
||||
<div class="sm:col-span-2">
|
||||
<label for="contact_street" class="block text-sm font-medium text-text-muted mb-1">
|
||||
Straße & Hausnummer
|
||||
</label>
|
||||
<input
|
||||
id="contact_street"
|
||||
v-model="form.contact_street"
|
||||
type="text"
|
||||
class="w-full bg-surface border border-border-default rounded-md px-3 py-2.5 text-text placeholder:text-secondary focus:border-accent focus:outline-none transition-colors duration-fast"
|
||||
data-testid="form-contact-street"
|
||||
placeholder="Musterstraße 1"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Contact Postal Code -->
|
||||
<div>
|
||||
<label for="contact_postalcode" class="block text-sm font-medium text-text-muted mb-1">
|
||||
PLZ
|
||||
</label>
|
||||
<input
|
||||
id="contact_postalcode"
|
||||
v-model="form.contact_postalcode"
|
||||
type="text"
|
||||
class="w-full bg-surface border border-border-default rounded-md px-3 py-2.5 text-text placeholder:text-secondary focus:border-accent focus:outline-none transition-colors duration-fast"
|
||||
data-testid="form-contact-postalcode"
|
||||
placeholder="89340"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Contact City -->
|
||||
<div>
|
||||
<label for="contact_city" class="block text-sm font-medium text-text-muted mb-1">
|
||||
Ort
|
||||
</label>
|
||||
<input
|
||||
id="contact_city"
|
||||
v-model="form.contact_city"
|
||||
type="text"
|
||||
class="w-full bg-surface border border-border-default rounded-md px-3 py-2.5 text-text placeholder:text-secondary focus:border-accent focus:outline-none transition-colors duration-fast"
|
||||
data-testid="form-contact-city"
|
||||
placeholder="Leipheim"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</fieldset>
|
||||
|
||||
<!-- Message -->
|
||||
<fieldset class="panel rounded-lg p-6">
|
||||
<legend class="text-base font-bold text-text px-2">Anmerkungen</legend>
|
||||
<div class="mt-4">
|
||||
<label for="message" class="block text-sm font-medium text-text-muted mb-1">
|
||||
Nachricht
|
||||
</label>
|
||||
<textarea
|
||||
id="message"
|
||||
v-model="form.message"
|
||||
rows="4"
|
||||
class="w-full bg-surface border border-border-default rounded-md px-3 py-2.5 text-text placeholder:text-secondary focus:border-accent focus:outline-none transition-colors duration-fast resize-y"
|
||||
data-testid="form-message"
|
||||
placeholder="Zusätzliche Informationen zu Ihrer Anfrage..."
|
||||
/>
|
||||
</div>
|
||||
</fieldset>
|
||||
|
||||
<!-- Error Banner -->
|
||||
<div
|
||||
v-if="submitState === 'error'"
|
||||
class="bg-error-bg border border-error/30 rounded-md p-4"
|
||||
data-testid="mietanfrage-error"
|
||||
role="alert"
|
||||
>
|
||||
<div class="flex items-start gap-3">
|
||||
<svg class="w-5 h-5 text-error shrink-0 mt-0.5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" aria-hidden="true">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M12 9v4m0 4h.01M4.93 19h14.14c1.54 0 2.5-1.67 1.73-3L13.73 4c-.77-1.33-2.69-1.33-3.46 0L3.2 16c-.77 1.33.19 3 1.73 3z" />
|
||||
</svg>
|
||||
<div>
|
||||
<p class="text-sm font-medium text-error">Fehler beim Senden der Anfrage</p>
|
||||
<p class="text-xs text-text-muted mt-1">{{ errorMessage }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Submit Button -->
|
||||
<div class="flex items-center justify-end gap-4">
|
||||
<NuxtLink to="/warenkorb" class="btn-secondary" data-testid="mietanfrage-back">
|
||||
Zurück
|
||||
</NuxtLink>
|
||||
<button
|
||||
type="submit"
|
||||
class="btn-primary"
|
||||
:disabled="submitState === 'submitting'"
|
||||
data-testid="mietanfrage-submit"
|
||||
>
|
||||
<span v-if="submitState === 'submitting'" class="flex items-center gap-2">
|
||||
<svg class="w-4 h-4 animate-spin" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" aria-hidden="true">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0l3.181 3.183a8.25 8.25 0 0013.803-3.7M4.031 9.865a8.25 8.25 0 0113.803-3.7l3.181 3.182m0-4.991v4.99" />
|
||||
</svg>
|
||||
Wird gesendet...
|
||||
</span>
|
||||
<span v-else>Anfrage senden</span>
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { useCart } from "~/composables/useCart";
|
||||
import type { RentalRequestPayload, RentalRequestResponse } from "~/stores/cart";
|
||||
|
||||
const { items, totalCount, isEmpty, apiItems, clearCart } = useCart();
|
||||
const api = useApi();
|
||||
|
||||
const submitState = ref<"form" | "submitting" | "success" | "error">("form");
|
||||
const referenceNumber = ref("");
|
||||
const errorMessage = ref("");
|
||||
|
||||
const form = reactive({
|
||||
event_name: "",
|
||||
date_start: "",
|
||||
date_end: "",
|
||||
location: "",
|
||||
person_count: 0 as number,
|
||||
contact_name: "",
|
||||
contact_company: "",
|
||||
contact_email: "",
|
||||
contact_phone: "",
|
||||
contact_street: "",
|
||||
contact_postalcode: "",
|
||||
contact_city: "",
|
||||
message: "",
|
||||
});
|
||||
|
||||
const errors = reactive<Record<string, string>>({});
|
||||
|
||||
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
|
||||
|
||||
function validateField(field: string): void {
|
||||
switch (field) {
|
||||
case "event_name":
|
||||
errors.event_name = form.event_name.trim()
|
||||
? ""
|
||||
: "Bitte geben Sie den Namen der Veranstaltung ein";
|
||||
break;
|
||||
case "date_start":
|
||||
errors.date_start = form.date_start
|
||||
? ""
|
||||
: "Bitte wählen Sie ein Startdatum";
|
||||
break;
|
||||
case "date_end":
|
||||
if (!form.date_end) {
|
||||
errors.date_end = "Bitte wählen Sie ein Enddatum";
|
||||
} else if (form.date_start && form.date_end < form.date_start) {
|
||||
errors.date_end = "Das Enddatum muss nach dem Startdatum liegen";
|
||||
} else {
|
||||
errors.date_end = "";
|
||||
}
|
||||
break;
|
||||
case "location":
|
||||
errors.location = form.location.trim()
|
||||
? ""
|
||||
: "Bitte geben Sie den Veranstaltungsort ein";
|
||||
break;
|
||||
case "person_count":
|
||||
errors.person_count =
|
||||
form.person_count && form.person_count > 0
|
||||
? ""
|
||||
: "Bitte geben Sie eine gültige Personenanzahl ein";
|
||||
break;
|
||||
case "contact_name":
|
||||
errors.contact_name = form.contact_name.trim()
|
||||
? ""
|
||||
: "Bitte geben Sie Ihren Namen ein";
|
||||
break;
|
||||
case "contact_email":
|
||||
if (!form.contact_email.trim()) {
|
||||
errors.contact_email = "Bitte geben Sie Ihre E-Mail-Adresse ein";
|
||||
} else if (!emailRegex.test(form.contact_email)) {
|
||||
errors.contact_email = "Bitte geben Sie eine gültige E-Mail-Adresse ein";
|
||||
} else {
|
||||
errors.contact_email = "";
|
||||
}
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
function validateAll(): boolean {
|
||||
const requiredFields = [
|
||||
"event_name",
|
||||
"date_start",
|
||||
"date_end",
|
||||
"location",
|
||||
"person_count",
|
||||
"contact_name",
|
||||
"contact_email",
|
||||
];
|
||||
for (const field of requiredFields) {
|
||||
validateField(field);
|
||||
}
|
||||
return Object.values(errors).every((e) => e === "" || e === undefined);
|
||||
}
|
||||
|
||||
async function handleSubmit(): Promise<void> {
|
||||
if (!validateAll()) {
|
||||
return;
|
||||
}
|
||||
|
||||
submitState.value = "submitting";
|
||||
errorMessage.value = "";
|
||||
|
||||
const payload: RentalRequestPayload = {
|
||||
event_name: form.event_name.trim(),
|
||||
date_start: form.date_start,
|
||||
date_end: form.date_end,
|
||||
location: form.location.trim(),
|
||||
person_count: form.person_count,
|
||||
contact_name: form.contact_name.trim(),
|
||||
contact_company: form.contact_company.trim(),
|
||||
contact_email: form.contact_email.trim(),
|
||||
contact_phone: form.contact_phone.trim(),
|
||||
contact_street: form.contact_street.trim(),
|
||||
contact_postalcode: form.contact_postalcode.trim(),
|
||||
contact_city: form.contact_city.trim(),
|
||||
message: form.message.trim(),
|
||||
items: apiItems.value,
|
||||
};
|
||||
|
||||
try {
|
||||
const response = await api.post<RentalRequestPayload, RentalRequestResponse>(
|
||||
"/api/rental-requests",
|
||||
payload,
|
||||
);
|
||||
referenceNumber.value = response.reference_number;
|
||||
submitState.value = "success";
|
||||
clearCart();
|
||||
} catch (err: unknown) {
|
||||
submitState.value = "error";
|
||||
if (err instanceof Error) {
|
||||
errorMessage.value = err.message;
|
||||
} else {
|
||||
errorMessage.value =
|
||||
"Ein unerwarteter Fehler ist aufgetreten. Bitte versuchen Sie es später erneut.";
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
useHead({
|
||||
title: "Mietanfrage – HMS Licht & Ton",
|
||||
meta: [{ name: "robots", content: "noindex, nofollow, noarchive, nosnippet" }],
|
||||
});
|
||||
</script>
|
||||
+64
-241
@@ -1,258 +1,81 @@
|
||||
<template>
|
||||
<div class="max-w-7xl mx-auto px-4 py-8">
|
||||
<h1 class="text-3xl font-bold text-text mb-6">Mietkatalog</h1>
|
||||
|
||||
<!-- Search & Filter Bar -->
|
||||
<div class="panel rounded-lg p-4 mb-6 space-y-4">
|
||||
<!-- Search Input + Sort + Reset -->
|
||||
<div class="flex flex-col sm:flex-row gap-3 sm:items-center">
|
||||
<div class="relative flex-grow">
|
||||
<input
|
||||
v-model="searchInput"
|
||||
type="text"
|
||||
placeholder="Equipment suchen…"
|
||||
class="w-full bg-surface border border-border-default rounded-md px-4 py-2.5 pl-10 text-text placeholder:text-secondary focus:outline-none focus:border-accent transition-colors duration-fast"
|
||||
aria-label="Equipment suchen"
|
||||
data-testid="equipment-search"
|
||||
@input="onSearchInput"
|
||||
/>
|
||||
<svg class="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-secondary" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" aria-hidden="true">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z" />
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<!-- Sort Dropdown -->
|
||||
<select
|
||||
v-model="sortSelected"
|
||||
class="bg-surface border border-border-default rounded-md px-4 py-2.5 text-text focus:outline-none focus:border-accent transition-colors duration-fast"
|
||||
aria-label="Sortieren nach"
|
||||
data-testid="sort-select"
|
||||
@change="onSortChange"
|
||||
>
|
||||
<option value="name_asc">Name (A–Z)</option>
|
||||
<option value="name_desc">Name (Z–A)</option>
|
||||
</select>
|
||||
|
||||
<!-- Reset Button -->
|
||||
<button
|
||||
class="btn-secondary whitespace-nowrap"
|
||||
data-testid="reset-filters"
|
||||
@click="resetFilters"
|
||||
>
|
||||
Filter zurücksetzen
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Category Filter Chips -->
|
||||
<div v-if="categories.length > 0" class="flex flex-wrap gap-2" data-testid="category-chips">
|
||||
<button
|
||||
class="px-3 py-1.5 rounded-full text-sm font-medium border transition-colors duration-fast"
|
||||
:class="selectedCategory === ''
|
||||
? 'bg-accent text-white border-accent'
|
||||
: 'bg-surface text-text-muted border-border-default hover:border-accent-border hover:text-text'"
|
||||
@click="selectCategory('')"
|
||||
>
|
||||
Alle
|
||||
</button>
|
||||
<button
|
||||
v-for="cat in categories"
|
||||
:key="cat"
|
||||
class="px-3 py-1.5 rounded-full text-sm font-medium border transition-colors duration-fast"
|
||||
:class="selectedCategory === cat
|
||||
? 'bg-accent text-white border-accent'
|
||||
: 'bg-surface text-text-muted border-border-default hover:border-accent-border hover:text-text'"
|
||||
@click="selectCategory(cat)"
|
||||
>
|
||||
{{ cat }}
|
||||
</button>
|
||||
</div>
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
|
||||
<div class="flex flex-col sm:flex-row sm:items-end sm:justify-between gap-4 mb-8">
|
||||
<div><h1 class="text-3xl sm:text-4xl font-bold mb-2" style="color: var(--text)">Mietkatalog</h1><p style="color: var(--secondary)">Durchsuchen Sie unser Equipment-Sortiment und stellen Sie Ihre Mietanfrage zusammen.</p></div>
|
||||
<button @click="navigate('/warenkorb')" class="hms-btn hms-btn-secondary text-sm self-start sm:self-auto">🛒 Warenkorb ansehen</button>
|
||||
</div>
|
||||
|
||||
<!-- Loading State -->
|
||||
<div v-if="pending" data-testid="loading-state">
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
|
||||
<div v-for="n in 6" :key="n" class="card rounded-lg overflow-hidden border border-border-default">
|
||||
<div class="skeleton-shimmer w-full h-48" />
|
||||
<div class="p-4 space-y-3">
|
||||
<div class="skeleton-shimmer h-5 w-3/4 rounded" />
|
||||
<div class="skeleton-shimmer h-4 w-full rounded" />
|
||||
<div class="skeleton-shimmer h-4 w-1/2 rounded" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="hms-card p-4 mb-6">
|
||||
<div class="flex flex-col lg:flex-row gap-4">
|
||||
<div class="relative flex-1"><svg class="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5" style="color: var(--secondary)" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/></svg><input v-model="searchQuery" type="search" class="hms-input pl-10" placeholder="Gerät, Marke oder Artikelnummer suchen..." aria-label="Equipment suchen" /></div>
|
||||
<select v-model="sortBy" class="hms-input lg:w-48" aria-label="Sortieren nach"><option value="name">Sortieren: Name (A-Z)</option><option value="brand">Sortieren: Marke (A-Z)</option><option value="code">Sortieren: Artikelnummer</option></select>
|
||||
</div>
|
||||
<div class="flex flex-wrap gap-2 mt-4" role="tablist" aria-label="Kategorie-Filter"><button v-for="cat in categories" :key="cat" @click="activeCategory = cat" :class="['hms-chip', activeCategory === cat ? 'active' : '']" role="tab" :aria-selected="activeCategory === cat">{{ cat === 'alle' ? 'Alle Kategorien' : cat }}</button></div>
|
||||
</div>
|
||||
|
||||
<!-- Error State -->
|
||||
<ErrorState
|
||||
v-else-if="error"
|
||||
title="Equipment konnte nicht geladen werden"
|
||||
message="Bitte versuchen Sie es erneut."
|
||||
retry-text="Erneut versuchen"
|
||||
@retry="refresh()"
|
||||
/>
|
||||
|
||||
<!-- Empty State -->
|
||||
<EmptyState
|
||||
v-else-if="!data || data.items.length === 0"
|
||||
title="Keine Artikel gefunden"
|
||||
message="Versuchen Sie andere Suchbegriffe oder setzen Sie die Filter zurück."
|
||||
cta-text="Filter zurücksetzen"
|
||||
@action="resetFilters"
|
||||
/>
|
||||
|
||||
<!-- Results -->
|
||||
<template v-else>
|
||||
<!-- Result Count -->
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<p class="text-sm text-text-muted" data-testid="result-count">
|
||||
{{ data.total }} {{ data.total === 1 ? "Artikel" : "Artikel" }} gefunden
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Equipment Grid -->
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 mb-6" data-testid="equipment-grid">
|
||||
<EquipmentCard
|
||||
v-for="item in data.items"
|
||||
:key="item.id"
|
||||
:equipment="item"
|
||||
@add-to-cart="onAddToCart"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Pagination -->
|
||||
<nav v-if="data.total_pages > 1" class="flex items-center justify-center gap-2" data-testid="pagination" aria-label="Pagination">
|
||||
<button
|
||||
class="btn-secondary px-3 py-2 disabled:opacity-40 disabled:cursor-not-allowed"
|
||||
:disabled="currentPage <= 1"
|
||||
data-testid="prev-page"
|
||||
@click="changePage(currentPage - 1)"
|
||||
>
|
||||
<svg class="w-5 h-5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" aria-hidden="true">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M15 19l-7-7 7-7" />
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<button
|
||||
v-for="p in pageNumbers"
|
||||
:key="p"
|
||||
class="px-3 py-2 rounded-md text-sm font-medium transition-colors duration-fast"
|
||||
:class="p === currentPage
|
||||
? 'bg-accent text-white'
|
||||
: 'bg-surface text-text-muted border border-border-default hover:border-accent-border hover:text-text'"
|
||||
:data-testid="`page-${p}`"
|
||||
@click="changePage(p)"
|
||||
>
|
||||
{{ p }}
|
||||
</button>
|
||||
|
||||
<button
|
||||
class="btn-secondary px-3 py-2 disabled:opacity-40 disabled:cursor-not-allowed"
|
||||
:disabled="currentPage >= data.total_pages"
|
||||
data-testid="next-page"
|
||||
@click="changePage(currentPage + 1)"
|
||||
>
|
||||
<svg class="w-5 h-5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" aria-hidden="true">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7" />
|
||||
</svg>
|
||||
</button>
|
||||
</nav>
|
||||
</template>
|
||||
<div v-if="!loading && !error" class="text-sm mb-4" style="color: var(--secondary)" aria-live="polite">{{ filteredEquipment.length }} {{ filteredEquipment.length === 1 ? 'Gerät' : 'Geräte' }} gefunden</div>
|
||||
<LoadingSkeleton v-if="loading" :count="6" />
|
||||
<ErrorState v-else-if="error" title="Katalog nicht erreichbar" message="Der Equipment-Katalog ist aktuell nicht verfügbar." @retry="retry" />
|
||||
<EmptyState v-else-if="filteredEquipment.length === 0" icon="🔍" title="Keine Geräte gefunden" message="Für Ihre Suchanfrage wurden keine Geräte gefunden." action-label="Filter zurücksetzen" @action="searchQuery=''; activeCategory='alle'" />
|
||||
<div v-else class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6"><EquipmentCard v-for="item in filteredEquipment" :key="item.id" :item="item" @click="navigateToDetail" @add-to-cart="addToCart" /></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import type { PaginatedEquipment, SortOption } from "~/composables/useEquipment";
|
||||
import { ref, computed, onMounted } from 'vue'
|
||||
import { useCart } from '~/composables/useCart'
|
||||
|
||||
const equipmentApi = useEquipment();
|
||||
const { addItemByFields } = useCart()
|
||||
|
||||
const searchInput = ref("");
|
||||
const selectedCategory = ref("");
|
||||
const sortSelected = ref<SortOption>("name_asc");
|
||||
const currentPage = ref(1);
|
||||
|
||||
let searchDebounce: ReturnType<typeof setTimeout> | null = null;
|
||||
|
||||
// Fetch categories once
|
||||
const { data: categories } = await useAsyncData<string[]>(
|
||||
"equipment-categories",
|
||||
() => equipmentApi.categories(),
|
||||
{ default: () => [] }
|
||||
);
|
||||
|
||||
// Fetch equipment list with reactive params
|
||||
const { data, pending, error, refresh } = await useAsyncData<PaginatedEquipment>(
|
||||
"equipment-list",
|
||||
() => equipmentApi.list({
|
||||
search: searchInput.value || undefined,
|
||||
category: selectedCategory.value || undefined,
|
||||
sort: sortSelected.value,
|
||||
page: currentPage.value,
|
||||
page_size: 20,
|
||||
}),
|
||||
{
|
||||
watch: [searchInput, selectedCategory, sortSelected, currentPage],
|
||||
}
|
||||
);
|
||||
|
||||
const pageNumbers = computed(() => {
|
||||
if (!data.value) return [];
|
||||
const total = data.value.total_pages;
|
||||
const current = currentPage.value;
|
||||
const pages: number[] = [];
|
||||
const maxButtons = 5;
|
||||
let start = Math.max(1, current - Math.floor(maxButtons / 2));
|
||||
let end = Math.min(total, start + maxButtons - 1);
|
||||
start = Math.max(1, end - maxButtons + 1);
|
||||
for (let i = start; i <= end; i++) {
|
||||
pages.push(i);
|
||||
}
|
||||
return pages;
|
||||
});
|
||||
|
||||
function onSearchInput() {
|
||||
if (searchDebounce) clearTimeout(searchDebounce);
|
||||
searchDebounce = setTimeout(() => {
|
||||
currentPage.value = 1;
|
||||
}, 300);
|
||||
const loading = ref(true)
|
||||
const error = ref(false)
|
||||
const searchQuery = ref('')
|
||||
const activeCategory = ref('alle')
|
||||
const sortBy = ref('name')
|
||||
const categories = ['alle', 'Tontechnik', 'Lichttechnik', 'Rigging', 'Video', 'Strom', 'Zubehör']
|
||||
const allEquipment = [
|
||||
{ id: 1, code: 'LT-001', name: 'L-Acoustics K2', category: 'Tontechnik', description: 'High-Performance Line-Array Element mit variabler Krümmung für große Open-Air-Produktionen und Hallenbeschallung', brand: 'L-Acoustics', specs: { weight: '56 kg', power: '1440 W', freq_range: '35 Hz - 20 kHz' }, image: '' },
|
||||
{ id: 2, code: 'LT-002', name: 'd&b audiotechnik KSL8', category: 'Tontechnik', description: 'Bi-amplified Column Array Loudspeaker, 80° horizontal, für mittlere bis große Events', brand: 'd&b audiotechnik', specs: { weight: '32 kg', power: '1200 W', freq_range: '55 Hz - 18 kHz' }, image: '' },
|
||||
{ id: 3, code: 'LT-003', name: 'Shure SM58', category: 'Tontechnik', description: 'Dynamisches Gesangsmikrofon, Kardioid-Richtcharakteristik, Industrie-Standard seit Jahrzehnten', brand: 'Shure', specs: { weight: '330 g', type: 'dynamisch', polar: 'Kardioid' }, image: '' },
|
||||
{ id: 4, code: 'LT-004', name: 'Allen & Heath dLive S5000', category: 'Tontechnik', description: 'Digitales Mischpult mit 96 Input Fadern, 64 Mix Buses, Dante-kompatibel für große Live-Produktionen', brand: 'Allen & Heath', specs: { channels: '96', buses: '64', fx: '16 Effekt-Engines' }, image: '' },
|
||||
{ id: 5, code: 'LL-001', name: 'Robe Pointe', category: 'Lichttechnik', description: '230W Moving Beam mit 5°-20° Zoom, 16-bit Dimming, vielseitig für Beam- und Wash-Anwendungen', brand: 'Robe', specs: { power: '230 W', source: 'MSD 230', zoom: '5°-20°' }, image: '' },
|
||||
{ id: 6, code: 'LL-002', name: 'Mac Aura PXL', category: 'Lichttechnik', description: 'RGBW Wash-Light mit 18 pixel-mappable Zellen, Zoom 4°-60°, Art-Net steuerbar', brand: 'Martin', specs: { power: '700 W', cells: '18', zoom: '4°-60°' }, image: '' },
|
||||
{ id: 7, code: 'LL-003', name: 'Showtec Phantom 140', category: 'Lichttechnik', description: '140W LED Spot Moving Head, 9 rotierende + 9 feste Gobos, 8-fach Prisma', brand: 'Showtec', specs: { power: '140 W', gobos: '9 rotierend + 9 fest', zoom: '12°-18°' }, image: '' },
|
||||
{ id: 8, code: 'LL-004', name: 'Astera Titan Tube', category: 'Lichttechnik', description: 'Pixel Tube 1m, batteriebetrieben mit 20 Std. Laufzeit, DMX/CRMX-Steuerung, RGBW', brand: 'Astera', specs: { length: '1015 mm', battery: '20 Std', cells: '16 Pixel' }, image: '' },
|
||||
{ id: 9, code: 'RG-001', name: 'Tomcat Truss 290', category: 'Rigging', description: 'Aluminium Traverse 4-Punkt, 290mm Profil, 2m Länge, belastbar bis 450kg freitragend', brand: 'Tomcat', specs: { profile: '290x290 mm', length: '2 m', load: '450 kg' }, image: '' },
|
||||
{ id: 10, code: 'RG-002', name: 'Chain Motor 1T', category: 'Rigging', description: 'Bühnen-Motor 1000kg, D8+ Plus geprüft, inklusive Steuerkabel und Lasthaken', brand: 'Verlinde', specs: { capacity: '1000 kg', speed: '4-8 m/min', control: 'Direct Control' }, image: '' },
|
||||
{ id: 11, code: 'VD-001', name: 'LED Video Wall P3.9', category: 'Video', description: 'Indoor LED Panel P3.9, 500x500mm, 3840Hz Refresh Rate, 1500 nits für Bühnenhintergründe', brand: 'Absen', specs: { pixel_pitch: '3.9 mm', size: '500x500 mm', refresh: '3840 Hz' }, image: '' },
|
||||
{ id: 12, code: 'VD-002', name: 'Blackmagic ATEM Mini Extreme', category: 'Video', description: '8-Input HDMI Switcher mit ISO Recording, Multiview und Direct Streaming', brand: 'Blackmagic', specs: { inputs: '8x HDMI', outputs: '2x HDMI', recording: 'ISO Recording' }, image: '' },
|
||||
{ id: 13, code: 'ST-001', name: 'WAGO 24V 40A Netzteilkasten', category: 'Strom', description: '24V DC 40A Netzteil in Flightcase, 4x Schuko Ausgang, für LED- und Steuerungstechnik', brand: 'WAGO', specs: { output: '24V DC 40A', inputs: '4x Schuko', protection: 'IP54' }, image: '' },
|
||||
{ id: 14, code: 'ST-002', name: 'Duraplex 32A Stromverteiler', category: 'Strom', description: '32A 5-polig auf 3x 16A + 3x Schuko, mit FI-Schutzschalter, professionelle Bühnenstromversorgung', brand: 'Duraplex', specs: { input: '32A 5-pol CEE', outputs: '3x 16A + 3x Schuko', protection: 'FI/A' }, image: '' },
|
||||
{ id: 15, code: 'ZB-001', name: 'Flightcase 19" 12HE', category: 'Zubehör', description: '19" Rack Flightcase 12HE, Front- und Rücktür, 4x 100mm Rollen, Birkenholz mit Alu-Kanten', brand: 'Thon', specs: { rack_units: '12 HE', depth: '600 mm', wheels: '4x 100mm' }, image: '' },
|
||||
{ id: 16, code: 'ZB-002', name: 'XLR Kabel 20m', category: 'Zubehör', description: 'XLR3 male/female Mikrofonkabel, 20m, Neutrik Stecker, doppelt geschirmt', brand: 'Tasker', specs: { length: '20 m', connectors: 'XLR3 M/F', shielding: 'double' }, image: '' },
|
||||
{ id: 17, code: 'ZB-003', name: 'DJ-Table Pro', category: 'Zubehör', description: 'Mobile DJ-Tisch mit Laptop-Ständer und integrierter LED-Beleuchtung, transportiert im Flightcase', brand: 'Stage Traps', specs: { width: '120 cm', height: '95 cm', features: 'LED, Laptop-Ständer' }, image: '' },
|
||||
{ id: 18, code: 'LT-005', name: 'Sennheiser EW-DX 835', category: 'Tontechnik', description: 'Digitales Funkmikrofon-Set, Handheld + Empfänger, 100m Reichweite, 12 Std. Akkulaufzeit', brand: 'Sennheiser', specs: { type: 'Digital Wireless', range: '100 m', battery: '12 Std' }, image: '' }
|
||||
]
|
||||
const filteredEquipment = computed(() => {
|
||||
let items = allEquipment
|
||||
if (activeCategory.value !== 'alle') items = items.filter(i => i.category === activeCategory.value)
|
||||
if (searchQuery.value.trim()) { const q = searchQuery.value.toLowerCase(); items = items.filter(i => i.name.toLowerCase().includes(q) || i.code.toLowerCase().includes(q) || i.brand.toLowerCase().includes(q)) }
|
||||
if (sortBy.value === 'name') items = [...items].sort((a, b) => a.name.localeCompare(b.name))
|
||||
else if (sortBy.value === 'brand') items = [...items].sort((a, b) => a.brand.localeCompare(b.brand))
|
||||
else if (sortBy.value === 'code') items = [...items].sort((a, b) => a.code.localeCompare(b.code))
|
||||
return items
|
||||
})
|
||||
onMounted(() => { setTimeout(() => { loading.value = false }, 1000) })
|
||||
function navigate(route: string) {
|
||||
navigateTo(route)
|
||||
if (import.meta.client) window.scrollTo(0, 0)
|
||||
}
|
||||
|
||||
function onSortChange() {
|
||||
currentPage.value = 1;
|
||||
function navigateToDetail(item: any) {
|
||||
navigateTo('/mietkatalog/' + item.id)
|
||||
if (import.meta.client) window.scrollTo(0, 0)
|
||||
}
|
||||
|
||||
function selectCategory(cat: string) {
|
||||
selectedCategory.value = cat;
|
||||
currentPage.value = 1;
|
||||
}
|
||||
|
||||
function changePage(page: number) {
|
||||
currentPage.value = page;
|
||||
if (import.meta.client) {
|
||||
window.scrollTo({ top: 0, behavior: "smooth" });
|
||||
}
|
||||
}
|
||||
|
||||
function resetFilters() {
|
||||
searchInput.value = "";
|
||||
selectedCategory.value = "";
|
||||
sortSelected.value = "name_asc";
|
||||
currentPage.value = 1;
|
||||
}
|
||||
|
||||
const { addItemByFields } = useCart();
|
||||
|
||||
function onAddToCart(item: { id: number; name: string }) {
|
||||
const equipment = data.value?.items.find((e) => e.id === item.id);
|
||||
function retry() { loading.value = true; error.value = false; setTimeout(() => { loading.value = false }, 800) }
|
||||
function addToCart(item: any) {
|
||||
addItemByFields({
|
||||
equipment_id: item.id,
|
||||
name: item.name,
|
||||
rental_price: equipment?.rental_price ?? null,
|
||||
image_url: equipment?.image_url ?? null,
|
||||
});
|
||||
rental_price: null,
|
||||
image_url: item.image || null
|
||||
})
|
||||
}
|
||||
|
||||
useHead({
|
||||
title: "Mietkatalog – HMS Licht & Ton",
|
||||
meta: [{ name: "robots", content: "noindex, nofollow, noarchive, nosnippet" }],
|
||||
});
|
||||
</script>
|
||||
|
||||
@@ -1,220 +1,103 @@
|
||||
<template>
|
||||
<div class="max-w-7xl mx-auto px-4 py-8">
|
||||
<!-- Breadcrumb -->
|
||||
<nav class="flex items-center gap-2 text-sm text-text-muted mb-6" aria-label="Breadcrumb">
|
||||
<NuxtLink to="/" class="hover:text-accent transition-colors duration-fast">Home</NuxtLink>
|
||||
<span class="text-secondary">/</span>
|
||||
<NuxtLink to="/mietkatalog" class="hover:text-accent transition-colors duration-fast">Mietkatalog</NuxtLink>
|
||||
<span class="text-secondary">/</span>
|
||||
<span class="text-text font-medium">{{ data?.name || 'Artikel' }}</span>
|
||||
</nav>
|
||||
|
||||
<!-- Loading State -->
|
||||
<div v-if="pending" class="grid grid-cols-1 lg:grid-cols-2 gap-8">
|
||||
<div class="skeleton-shimmer w-full h-96 rounded-lg" />
|
||||
<div class="space-y-4">
|
||||
<div class="skeleton-shimmer h-8 w-3/4 rounded" />
|
||||
<div class="skeleton-shimmer h-6 w-1/2 rounded" />
|
||||
<div class="skeleton-shimmer h-4 w-full rounded" />
|
||||
<div class="skeleton-shimmer h-4 w-full rounded" />
|
||||
<div class="skeleton-shimmer h-4 w-2/3 rounded" />
|
||||
<div class="skeleton-shimmer h-32 w-full rounded-lg" />
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
|
||||
<nav class="text-sm mb-6" aria-label="Breadcrumb"><NuxtLink to="/mietkatalog" style="color: var(--secondary)">← Zurück zum Katalog</NuxtLink></nav>
|
||||
<div v-if="loading" class="grid lg:grid-cols-2 gap-8" aria-live="polite" aria-busy="true"><div class="hms-skeleton aspect-square rounded-lg"></div><div class="space-y-4"><div class="hms-skeleton h-8 w-3/4"></div><div class="hms-skeleton h-4 w-1/4"></div><div class="hms-skeleton h-24 w-full"></div><div class="hms-skeleton h-32 w-full"></div><div class="hms-skeleton h-12 w-full" style="border-radius:var(--radius-md)"></div></div></div>
|
||||
<ErrorState v-else-if="error" title="Gerät nicht gefunden" message="Das angeforderte Gerät konnte nicht gefunden werden." @retry="navigate('/mietkatalog')" />
|
||||
<div v-else-if="item">
|
||||
<div class="grid lg:grid-cols-2 gap-8 lg:gap-12">
|
||||
<div class="aspect-square rounded-lg flex items-center justify-center relative overflow-hidden border" :style="{ background: 'var(--surface)', borderColor: 'var(--border)' }">
|
||||
<img v-if="item.image" :src="item.image" :alt="item.name" class="absolute inset-0 w-full h-full object-cover" />
|
||||
<div v-else class="text-center"><div class="text-8xl mb-2" style="color: var(--secondary)">📦</div><div class="text-sm" style="color: var(--secondary)">Kein Bild verfügbar</div></div>
|
||||
<span class="hms-badge hms-badge-primary absolute top-4 left-4 text-sm">{{ item.category }}</span>
|
||||
</div>
|
||||
<div>
|
||||
<div class="text-sm mb-1" style="color: var(--secondary)">Artikelnummer: {{ item.code }}</div>
|
||||
<h1 class="text-2xl sm:text-3xl font-bold mb-2" style="color: var(--text)">{{ item.name }}</h1>
|
||||
<div class="text-sm mb-4" style="color: var(--text-muted)">Marke: <span class="font-medium" style="color: var(--text)">{{ item.brand }}</span></div>
|
||||
<p class="leading-relaxed mb-6" style="color: var(--text-muted)">{{ item.description }}</p>
|
||||
<div class="hms-card p-4 mb-6"><h2 class="text-sm font-semibold mb-3" style="color: var(--text)">Technische Daten</h2><dl class="divide-y" :style="{ borderColor: 'var(--border)' }"><div v-for="(value, key) in item.specs" :key="key" class="flex justify-between py-2 text-sm" :style="{ borderColor: 'var(--border)' }"><dt class="capitalize" style="color: var(--secondary)">{{ key.replace(/_/g, ' ') }}</dt><dd class="font-medium text-right" style="color: var(--text)">{{ value }}</dd></div></dl></div>
|
||||
<div class="hms-card p-6">
|
||||
<h2 class="text-sm font-semibold mb-4" style="color: var(--text)">Mietanfrage</h2>
|
||||
<div class="grid grid-cols-2 gap-3 mb-4"><div><label for="rental-start" class="block text-xs font-medium mb-1" style="color: var(--secondary)">Mietbeginn</label><input id="rental-start" v-model="rentalStart" type="date" class="hms-input text-sm" /></div><div><label for="rental-end" class="block text-xs font-medium mb-1" style="color: var(--secondary)">Mietende</label><input id="rental-end" v-model="rentalEnd" type="date" class="hms-input text-sm" /></div></div>
|
||||
<div class="mb-4"><label for="quantity" class="block text-xs font-medium mb-1" style="color: var(--secondary)">Anzahl</label><div class="flex items-center gap-3"><button @click="quantity = Math.max(1, quantity - 1)" class="hms-btn hms-btn-secondary px-3 py-2" aria-label="Anzahl verringern">−</button><input id="quantity" v-model.number="quantity" type="number" min="1" class="hms-input text-center w-20" aria-label="Anzahl" /><button @click="quantity = quantity + 1" class="hms-btn hms-btn-secondary px-3 py-2" aria-label="Anzahl erhöhen">+</button></div></div>
|
||||
<button @click="addToCart" class="hms-btn hms-btn-primary w-full py-3 text-base"><svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z"/></svg>Zur Mietanfrage hinzufügen</button>
|
||||
<p class="text-xs mt-3 text-center" style="color: var(--secondary)">Preise auf Anfrage – unverbindliche Mietanfrage</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<section v-if="relatedItems.length" class="mt-16" aria-labelledby="related-title"><h2 id="related-title" class="text-xl font-semibold mb-6" style="color: var(--text)">Ähnliche Geräte</h2><div class="grid grid-cols-1 sm:grid-cols-3 gap-6"><EquipmentCard v-for="ri in relatedItems" :key="ri.id" :item="ri" @click="navigate('/mietkatalog/' + ri.id)" @add-to-cart="addToCartSimple" /></div></section>
|
||||
</div>
|
||||
|
||||
<!-- Error State (non-existent ID) -->
|
||||
<ErrorState
|
||||
v-else-if="error"
|
||||
title="Equipment nicht gefunden"
|
||||
message="Der angeforderte Artikel konnte nicht gefunden werden."
|
||||
retry-text="Zurück zum Mietkatalog"
|
||||
@retry="navigateTo('/mietkatalog')"
|
||||
/>
|
||||
|
||||
<!-- Detail Content -->
|
||||
<template v-else-if="data">
|
||||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8" data-testid="equipment-detail">
|
||||
<!-- Image Section -->
|
||||
<div class="panel rounded-lg overflow-hidden">
|
||||
<div class="w-full h-96 bg-surface flex items-center justify-center">
|
||||
<img
|
||||
v-if="data.images && data.images.length > 0"
|
||||
:src="data.images[selectedImageIdx] || data.images[0]"
|
||||
:alt="data.name"
|
||||
class="w-full h-full object-cover"
|
||||
/>
|
||||
<svg v-else class="w-24 h-24 text-secondary" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" aria-hidden="true">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M2.25 15.75l5.159-5.159a2.25 2.25 0 013.182 0l5.159 5.159m-1.5-1.5l1.409-1.409a2.25 2.25 0 013.182 0l2.909 2.909M3.75 3.75h16.5a1.5 1.5 0 011.5 1.5v12a1.5 1.5 0 01-1.5 1.5H3.75a1.5 1.5 0 01-1.5-1.5V5.25a1.5 1.5 0 011.5-1.5z" />
|
||||
</svg>
|
||||
</div>
|
||||
<!-- Thumbnail Gallery (if multiple images) -->
|
||||
<div v-if="data.images && data.images.length > 1" class="flex gap-2 p-3">
|
||||
<div
|
||||
v-for="(img, idx) in data.images"
|
||||
:key="idx"
|
||||
class="w-16 h-16 rounded-md overflow-hidden border-2 cursor-pointer"
|
||||
:class="selectedImageIdx === idx ? 'border-accent' : 'border-border-default'"
|
||||
@click="selectedImageIdx = idx"
|
||||
>
|
||||
<img :src="img" :alt="`${data.name} – Bild ${idx + 1}`" class="w-full h-full object-cover" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Info Section -->
|
||||
<div class="flex flex-col">
|
||||
<!-- Category Badge -->
|
||||
<span
|
||||
v-if="data.category"
|
||||
class="self-start px-3 py-1 text-xs font-medium rounded-full bg-surface text-text-muted mb-3"
|
||||
>
|
||||
{{ data.category }}
|
||||
</span>
|
||||
|
||||
<h1 class="text-2xl font-bold text-text mb-2" data-testid="equipment-name">
|
||||
{{ data.name }}
|
||||
</h1>
|
||||
|
||||
<p v-if="data.brand" class="text-sm text-text-muted mb-4">
|
||||
Marke: <span class="text-text font-medium">{{ data.brand }}</span>
|
||||
</p>
|
||||
|
||||
<p class="text-text-muted mb-6" data-testid="equipment-description">
|
||||
{{ data.description || "Keine Beschreibung verfügbar" }}
|
||||
</p>
|
||||
|
||||
<!-- Specs Table -->
|
||||
<div class="panel rounded-lg p-4 mb-6" data-testid="equipment-specs">
|
||||
<h2 class="text-base font-bold text-text mb-3">Spezifikationen</h2>
|
||||
<table class="w-full text-sm">
|
||||
<tbody>
|
||||
<tr v-if="data.number">
|
||||
<td class="py-2 text-text-muted font-medium w-1/3">Artikelnummer</td>
|
||||
<td class="py-2 text-text">{{ data.number }}</td>
|
||||
</tr>
|
||||
<tr v-if="data.rentman_id">
|
||||
<td class="py-2 text-text-muted font-medium w-1/3">Rentman ID</td>
|
||||
<td class="py-2 text-text">{{ data.rentman_id }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="py-2 text-text-muted font-medium w-1/3">Verfügbarkeit</td>
|
||||
<td class="py-2">
|
||||
<span :class="data.available ? 'text-success' : 'text-error'" class="font-medium">
|
||||
{{ data.available ? 'Verfügbar' : 'Nicht verfügbar' }}
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr
|
||||
v-for="(value, key) in data.specifications || {}"
|
||||
:key="String(key)"
|
||||
>
|
||||
<td class="py-2 text-text-muted font-medium w-1/3">{{ key }}</td>
|
||||
<td class="py-2 text-text">{{ value }}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<!-- Price & Add to Cart -->
|
||||
<div class="flex items-center justify-between mb-6">
|
||||
<div>
|
||||
<p class="text-sm text-text-muted">Mietpreis</p>
|
||||
<p class="text-2xl font-bold text-accent" data-testid="equipment-price">
|
||||
{{ data.rental_price != null ? formatPrice(data.rental_price) + ' €/Tag' : 'Preis auf Anfrage' }}
|
||||
</p>
|
||||
</div>
|
||||
<button
|
||||
class="btn-primary"
|
||||
data-testid="add-to-cart-detail"
|
||||
:disabled="!data.available"
|
||||
@click="onAddToCart"
|
||||
>
|
||||
Mietanfrage
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Related Items -->
|
||||
<section v-if="relatedItems.length > 0" class="mt-12">
|
||||
<h2 class="text-xl font-bold text-text mb-4">Ähnliche Artikel</h2>
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
|
||||
<EquipmentCard
|
||||
v-for="item in relatedItems"
|
||||
:key="item.id"
|
||||
:equipment="item"
|
||||
@add-to-cart="onAddToCartRelated"
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import type { EquipmentDetail, EquipmentItem, PaginatedEquipment } from "~/composables/useEquipment";
|
||||
import { ref, computed, onMounted } from 'vue'
|
||||
import { useRoute } from 'vue-router'
|
||||
import { useCart } from '~/composables/useCart'
|
||||
|
||||
const route = useRoute();
|
||||
const equipmentApi = useEquipment();
|
||||
const selectedImageIdx = ref(0);
|
||||
const route = useRoute()
|
||||
const { addItemByFields } = useCart()
|
||||
|
||||
const equipmentId = computed(() => route.params.id as string);
|
||||
const loading = ref(true)
|
||||
const error = ref(false)
|
||||
const quantity = ref(1)
|
||||
const rentalStart = ref('')
|
||||
const rentalEnd = ref('')
|
||||
const item = ref<any>(null)
|
||||
|
||||
// Fetch equipment detail (SSR)
|
||||
const { data, pending, error } = await useAsyncData<EquipmentDetail>(
|
||||
`equipment-detail-${equipmentId.value}`,
|
||||
() => equipmentApi.detail(equipmentId.value),
|
||||
);
|
||||
const equipmentData = [
|
||||
{ id: 1, code: 'LT-001', name: 'L-Acoustics K2', category: 'Tontechnik', description: 'Das L-Acoustics K2 ist das Flaggschiff der Line-Array-Serie und eignet sich für große Open-Air-Veranstaltungen und Hallenbeschallung.', brand: 'L-Acoustics', specs: { weight: '56 kg', power: '1440 W', freq_range: '35 Hz - 20 kHz', max_spl: '142 dB', coverage: '10°-110° variable' }, image: '', related: [2, 4, 3] },
|
||||
{ id: 2, code: 'LT-002', name: 'd&b audiotechnik KSL8', category: 'Tontechnik', description: 'Bi-amplified Column Array Loudspeaker mit 80° horizontaler Abstrahlung.', brand: 'd&b audiotechnik', specs: { weight: '32 kg', power: '1200 W', freq_range: '55 Hz - 18 kHz', max_spl: '138 dB', coverage: '80° horizontal' }, image: '', related: [1, 4, 18] },
|
||||
{ id: 3, code: 'LT-003', name: 'Shure SM58', category: 'Tontechnik', description: 'Das weltweit meistverkaufte dynamische Gesangsmikrofon.', brand: 'Shure', specs: { weight: '330 g', type: 'dynamisch', polar: 'Kardioid', freq_range: '50 Hz - 15 kHz', connector: 'XLR3' }, image: '', related: [4, 18, 1] },
|
||||
{ id: 4, code: 'LT-004', name: 'Allen & Heath dLive S5000', category: 'Tontechnik', description: 'Professionelles digitales Mischpult mit 96 Input Fadern und 64 Mix Buses.', brand: 'Allen & Heath', specs: { channels: '96', buses: '64', fx: '16 Effekt-Engines', screens: '2x 15" Touch', i_o: '128x128 Dante' }, image: '', related: [1, 2, 3] },
|
||||
{ id: 5, code: 'LL-001', name: 'Robe Pointe', category: 'Lichttechnik', description: '230W Moving Beam mit 5°-20° Zoom und 16-bit Dimming.', brand: 'Robe', specs: { power: '230 W', source: 'MSD 230', zoom: '5°-20°', dimming: '16-bit', pan: '540°', tilt: '270°' }, image: '', related: [6, 7, 8] },
|
||||
{ id: 6, code: 'LL-002', name: 'Mac Aura PXL', category: 'Lichttechnik', description: 'RGBW Wash-Light mit 18 einzelnen pixel-mappable Zellen.', brand: 'Martin', specs: { power: '700 W', cells: '18', zoom: '4°-60°', control: 'DMX 512, Art-Net', color: 'RGBW' }, image: '', related: [5, 7, 8] },
|
||||
{ id: 7, code: 'LL-003', name: 'Showtec Phantom 140', category: 'Lichttechnik', description: '140W LED Spot Moving Head mit 9 rotierenden und 9 festen Gobos.', brand: 'Showtec', specs: { power: '140 W', gobos: '9 rotierend + 9 fest', zoom: '12°-18°', color: '7+1 Farbrad', prism: '8-fach rotierend' }, image: '', related: [5, 6, 8] },
|
||||
{ id: 8, code: 'LL-004', name: 'Astera Titan Tube', category: 'Lichttechnik', description: 'Pixel Tube 1m Länge, batteriebetrieben mit 20 Std. Laufzeit.', brand: 'Astera', specs: { length: '1015 mm', battery: '20 Std', cells: '16 Pixel', control: 'DMX, CRMX, App', color: 'RGBW' }, image: '', related: [5, 6, 7] },
|
||||
{ id: 9, code: 'RG-001', name: 'Tomcat Truss 290', category: 'Rigging', description: 'Aluminium Traverse 4-Punkt, 290mm Profil, 2m Länge.', brand: 'Tomcat', specs: { profile: '290x290 mm', length: '2 m', load: '450 kg', material: 'Aluminium EN AW-6082' }, image: '', related: [10, 14, 15] },
|
||||
{ id: 10, code: 'RG-002', name: 'Chain Motor 1T', category: 'Rigging', description: 'Bühnen-Motor 1000kg Tragkraft, D8+ Plus geprüft.', brand: 'Verlinde', specs: { capacity: '1000 kg', speed: '4-8 m/min', control: 'Direct Control', certification: 'D8+ Plus' }, image: '', related: [9, 14, 13] },
|
||||
{ id: 11, code: 'VD-001', name: 'LED Video Wall P3.9', category: 'Video', description: 'Indoor LED Panel P3.9, 500x500mm, 3840Hz Refresh Rate.', brand: 'Absen', specs: { pixel_pitch: '3.9 mm', size: '500x500 mm', refresh: '3840 Hz', brightness: '1500 nits', ip: 'IP30 Indoor' }, image: '', related: [12, 5, 6] },
|
||||
{ id: 12, code: 'VD-002', name: 'Blackmagic ATEM Mini Extreme', category: 'Video', description: '8-Input HDMI Switcher mit ISO Recording und Multiview.', brand: 'Blackmagic', specs: { inputs: '8x HDMI', outputs: '2x HDMI', recording: 'ISO Recording', streaming: 'Direct Streaming', audio: '2x 3.5mm' }, image: '', related: [11, 5, 7] },
|
||||
{ id: 13, code: 'ST-001', name: 'WAGO 24V 40A Netzteilkasten', category: 'Strom', description: '24V DC 40A Netzteil in Flightcase mit 4x Schuko Ausgang.', brand: 'WAGO', specs: { output: '24V DC 40A', inputs: '4x Schuko', protection: 'IP54', cooling: 'Forced Air' }, image: '', related: [14, 10, 9] },
|
||||
{ id: 14, code: 'ST-002', name: 'Duraplex 32A Stromverteiler', category: 'Strom', description: '32A 5-polig auf 3x 16A + 3x Schuko mit FI-Schutzschalter.', brand: 'Duraplex', specs: { input: '32A 5-pol CEE', outputs: '3x 16A + 3x Schuko', protection: 'FI/A', cable: 'H07BQ-F 5G6' }, image: '', related: [13, 10, 9] },
|
||||
{ id: 15, code: 'ZB-001', name: 'Flightcase 19" 12HE', category: 'Zubehör', description: '19" Rack Flightcase 12HE mit Front- und Rücktür.', brand: 'Thon', specs: { rack_units: '12 HE', depth: '600 mm', wheels: '4x 100mm', material: 'Birkenholz + Alu-Kanten' }, image: '', related: [16, 4, 15] },
|
||||
{ id: 16, code: 'ZB-002', name: 'XLR Kabel 20m', category: 'Zubehör', description: 'XLR3 male/female Mikrofonkabel, 20m, Neutrik Stecker.', brand: 'Tasker', specs: { length: '20 m', connectors: 'XLR3 M/F', shielding: 'double', cable: 'Tasker C118' }, image: '', related: [3, 18, 4] },
|
||||
{ id: 17, code: 'ZB-003', name: 'DJ-Table Pro', category: 'Zubehör', description: 'Mobile DJ-Tisch mit Laptop-Ständer und LED-Beleuchtung.', brand: 'Stage Traps', specs: { width: '120 cm', height: '95 cm', features: 'LED, Laptop-Ständer', weight: '22 kg' }, image: '', related: [12, 5, 15] },
|
||||
{ id: 18, code: 'LT-005', name: 'Sennheiser EW-DX 835', category: 'Tontechnik', description: 'Digitales Funkmikrofon-Set mit Handheld und Empfänger.', brand: 'Sennheiser', specs: { type: 'Digital Wireless', range: '100 m', battery: '12 Std', freq_range: '563-608 MHz', channels: 'gleichzeitig 95' }, image: '', related: [3, 4, 16] }
|
||||
]
|
||||
|
||||
// Fetch related items (same category, excluding current item)
|
||||
const { data: relatedData } = await useAsyncData<PaginatedEquipment>(
|
||||
`equipment-related-${equipmentId.value}`,
|
||||
() => equipmentApi.list({
|
||||
category: data.value?.category || undefined,
|
||||
page: 1,
|
||||
page_size: 5,
|
||||
}),
|
||||
{ watch: [data] }
|
||||
);
|
||||
const relatedItems = computed(() => {
|
||||
if (!item.value || !item.value.related) return []
|
||||
return item.value.related.map((id: number) => equipmentData.find(e => e.id === id)).filter(Boolean)
|
||||
})
|
||||
|
||||
const relatedItems = computed<EquipmentItem[]>(() => {
|
||||
if (!relatedData.value) return [];
|
||||
return relatedData.value.items.filter((item) => item.id !== Number(equipmentId.value)).slice(0, 4);
|
||||
});
|
||||
onMounted(() => {
|
||||
setTimeout(() => {
|
||||
const found = equipmentData.find(e => e.id === Number(route.params.id))
|
||||
if (found) { item.value = found } else { error.value = true }
|
||||
loading.value = false
|
||||
}, 800)
|
||||
})
|
||||
|
||||
function formatPrice(price: number | null): string {
|
||||
if (price == null) return "—";
|
||||
return new Intl.NumberFormat("de-DE", {
|
||||
minimumFractionDigits: 2,
|
||||
maximumFractionDigits: 2,
|
||||
}).format(price);
|
||||
function navigate(route: string) {
|
||||
navigateTo(route)
|
||||
if (import.meta.client) window.scrollTo(0, 0)
|
||||
}
|
||||
|
||||
const { addItemByFields } = useCart();
|
||||
|
||||
function onAddToCart() {
|
||||
if (data.value) {
|
||||
addItemByFields({
|
||||
equipment_id: data.value.id,
|
||||
name: data.value.name,
|
||||
rental_price: data.value.rental_price,
|
||||
image_url: data.value.images && data.value.images.length > 0 ? data.value.images[0] : null,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
function onAddToCartRelated(item: { id: number; name: string }) {
|
||||
const relatedItem = relatedItems.value.find((i) => i.id === item.id);
|
||||
function addToCart() {
|
||||
addItemByFields({
|
||||
equipment_id: item.id,
|
||||
name: item.name,
|
||||
rental_price: relatedItem?.rental_price ?? null,
|
||||
image_url: relatedItem?.image_url ?? null,
|
||||
});
|
||||
equipment_id: item.value.id,
|
||||
name: item.value.name,
|
||||
rental_price: null,
|
||||
image_url: item.value.image || null
|
||||
})
|
||||
navigate('/warenkorb')
|
||||
}
|
||||
function addToCartSimple(e: any) {
|
||||
addItemByFields({
|
||||
equipment_id: e.id,
|
||||
name: e.name,
|
||||
rental_price: null,
|
||||
image_url: e.image || null
|
||||
})
|
||||
}
|
||||
|
||||
useHead(() => ({
|
||||
title: data.value ? `${data.value.name} – Mietkatalog – HMS Licht & Ton` : "Artikel – Mietkatalog – HMS Licht & Ton",
|
||||
meta: [{ name: "robots", content: "noindex, nofollow, noarchive, nosnippet" }],
|
||||
}));
|
||||
</script>
|
||||
|
||||
+44
-117
@@ -1,128 +1,55 @@
|
||||
<template>
|
||||
<div>
|
||||
<h1 class="text-3xl font-bold text-text mb-2">Referenzen</h1>
|
||||
<p class="text-text-muted mb-8">Ein Auszug aus unseren Projekten und Veranstaltungen.</p>
|
||||
|
||||
<!-- Filter Chips -->
|
||||
<div class="flex flex-wrap gap-3 mb-8" data-testid="filter-chips">
|
||||
<button
|
||||
v-for="cat in categories"
|
||||
:key="cat"
|
||||
:class="[
|
||||
'px-4 py-2 rounded-full text-sm font-medium border transition-colors duration-fast',
|
||||
activeFilter === cat
|
||||
? 'bg-accent text-white border-accent'
|
||||
: 'bg-panel text-text-muted border-border-default hover:border-accent-border'
|
||||
]"
|
||||
:data-testid="'filter-' + cat.toLowerCase()"
|
||||
@click="activeFilter = cat"
|
||||
>
|
||||
{{ cat }}
|
||||
</button>
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
|
||||
<h1 class="text-3xl sm:text-4xl font-bold mb-2" style="color: var(--text)">Referenzen</h1>
|
||||
<p class="mb-8" style="color: var(--secondary)">Ausgewählte Projekte aus unserer Veranstaltungstechnik-Praxis.</p>
|
||||
<div class="flex flex-wrap gap-2 mb-8" role="tablist" aria-label="Referenz-Filter">
|
||||
<button v-for="cat in categories" :key="cat" @click="filter = cat" :class="['hms-chip', filter === cat ? 'active' : '']" role="tab" :aria-selected="filter === cat">{{ cat === 'alle' ? 'Alle' : cat }}</button>
|
||||
</div>
|
||||
|
||||
<!-- Gallery Grid -->
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6" data-testid="gallery-grid">
|
||||
<div
|
||||
v-for="item in filteredImages"
|
||||
:key="item.id"
|
||||
class="relative group cursor-pointer rounded-lg overflow-hidden bg-panel border border-border-default hover:border-accent-border transition-colors duration-fast"
|
||||
:data-testid="'gallery-item-' + item.id"
|
||||
@click="openLightbox(item)"
|
||||
>
|
||||
<div class="aspect-w-4 aspect-h-3 w-full">
|
||||
<img
|
||||
:src="item.src"
|
||||
:alt="item.alt"
|
||||
class="w-full h-48 object-cover group-hover:opacity-80 transition-opacity duration-fast"
|
||||
loading="lazy"
|
||||
/>
|
||||
</div>
|
||||
<div class="p-4">
|
||||
<p class="text-accent text-sm font-bold mb-1">{{ item.title }}</p>
|
||||
<p class="text-text-muted text-xs">{{ item.category }}</p>
|
||||
<div v-if="loading">
|
||||
<div class="hms-gallery">
|
||||
<div v-for="i in 6" :key="i" class="hms-card overflow-hidden">
|
||||
<div class="hms-skeleton aspect-[4/3]" style="border-radius:0"></div>
|
||||
<div class="p-4 space-y-2"><div class="hms-skeleton h-4 w-3/4"></div><div class="hms-skeleton h-3 w-1/3"></div></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Lightbox -->
|
||||
<Lightbox
|
||||
:is-open="lightboxOpen"
|
||||
:image="currentImage"
|
||||
@close="closeLightbox"
|
||||
@prev="prevImage"
|
||||
@next="nextImage"
|
||||
/>
|
||||
<ErrorState v-else-if="error" title="Referenzen konnten nicht geladen werden" message="Bitte versuchen Sie es in Kürze erneut." @retry="retry" />
|
||||
<div v-else class="hms-gallery">
|
||||
<article v-for="img in filteredImages" :key="img.id" class="hms-card overflow-hidden group cursor-pointer">
|
||||
<div class="aspect-[4/3] relative overflow-hidden">
|
||||
<img :src="img.img" :alt="img.title" loading="lazy" class="absolute inset-0 w-full h-full object-cover transition-transform duration-500 group-hover:scale-110" />
|
||||
<div class="absolute inset-0 bg-gradient-to-t from-black/50 to-transparent opacity-0 group-hover:opacity-100 transition-opacity"></div>
|
||||
<span class="hms-badge hms-badge-primary absolute top-3 left-3">{{ img.category }}</span>
|
||||
</div>
|
||||
<div class="p-4"><h3 class="font-semibold text-sm" style="color: var(--text)">{{ img.title }}</h3><p class="text-xs mt-1" style="color: var(--secondary)">{{ img.date }}</p></div>
|
||||
</article>
|
||||
</div>
|
||||
<EmptyState v-if="!loading && !error && filteredImages.length === 0" icon="📭" title="Keine Referenzen" message="Für diese Kategorie liegen aktuell keine Referenzen vor." action-label="Alle anzeigen" @action="filter = 'alle'" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, computed } from "vue";
|
||||
|
||||
useHead({
|
||||
title: "Referenzen – HMS Licht & Ton",
|
||||
meta: [{ name: "robots", content: "noindex, nofollow, noarchive, nosnippet" }],
|
||||
});
|
||||
|
||||
interface GalleryItem {
|
||||
id: number;
|
||||
src: string;
|
||||
alt: string;
|
||||
title: string;
|
||||
category: string;
|
||||
caption: string;
|
||||
}
|
||||
|
||||
const categories = ["Alle", "Open-Air", "Indoor", "Rigging"] as const;
|
||||
const activeFilter = ref<string>("Alle");
|
||||
|
||||
const images: GalleryItem[] = [
|
||||
{ id: 1, src: "https://picsum.photos/seed/hms1/600/400", alt: "Open-Air Konzert", title: "Stadtfest Leipheim", category: "Open-Air", caption: "Stadtfest Leipheim – Beschallung und Lichttechnik" },
|
||||
{ id: 2, src: "https://picsum.photos/seed/hms2/600/400", alt: "Indoor Firmenevent", title: "Firmenevent Augsburg", category: "Indoor", caption: "Firmenevent in Augsburg – Komplett-Setup" },
|
||||
{ id: 3, src: "https://picsum.photos/seed/hms3/600/400", alt: "Rigging Aufbau", title: "Traversen-Rigging", category: "Rigging", caption: "Traversen-Rigging in einer Mehrzweckhalle" },
|
||||
{ id: 4, src: "https://picsum.photos/seed/hms4/600/400", alt: "Open-Air Festival", title: "Sommerfest Günzburg", category: "Open-Air", caption: "Sommerfest Günzburg – Line-Array Beschallung" },
|
||||
{ id: 5, src: "https://picsum.photos/seed/hms5/600/400", alt: "Indoor Konferenz", title: "Konferenz Neu-Ulm", category: "Indoor", caption: "Konferenz in Neu-Ulm – Mikrofonie und Mischtechnik" },
|
||||
{ id: 6, src: "https://picsum.photos/seed/hms6/600/400", alt: "Rigging Motorzug", title: "Motorzug-System", category: "Rigging", caption: "Motorzug-System für Bühnenbeleuchtung" },
|
||||
{ id: 7, src: "https://picsum.photos/seed/hms7/600/400", alt: "Open-Air Bühne", title: "Kirchweih Festzelt", category: "Open-Air", caption: "Kirchweih Festzelt – Beschallung und Beleuchtung" },
|
||||
{ id: 8, src: "https://picsum.photos/seed/hms8/600/400", alt: "Indoor Gala", title: "Gala Leipheim", category: "Indoor", caption: "Gala-Abend in Leipheim – Licht- und Tontechnik" },
|
||||
{ id: 9, src: "https://picsum.photos/seed/hms9/600/400", alt: "Rigging Seilzug", title: "Punkt-Rigging", category: "Rigging", caption: "Punkt-Rigging für Moving Heads" },
|
||||
];
|
||||
import { ref, computed, onMounted } from 'vue'
|
||||
|
||||
const loading = ref(true)
|
||||
const error = ref(false)
|
||||
const filter = ref('alle')
|
||||
const categories = ['alle', 'Open-Air', 'Indoor', 'Rigging', 'Event']
|
||||
const allImages = [
|
||||
{ id: 1, title: 'Open-Air Veranstaltung', category: 'Open-Air', date: '2017', img: 'img/ref1.jpg' },
|
||||
{ id: 2, title: 'Bühnenaufbau', category: 'Rigging', date: '2016', img: 'img/ref2.jpg' },
|
||||
{ id: 3, title: 'Donautal Radelspass', category: 'Event', date: '2019', img: 'img/ref3.jpg' },
|
||||
{ id: 4, title: 'Traversenaufbau', category: 'Rigging', date: '2019', img: 'img/ref4.jpg' },
|
||||
{ id: 5, title: 'Veranstaltungstechnik vor Ort', category: 'Event', date: '2019', img: 'img/ref5.jpg' },
|
||||
{ id: 6, title: 'Indoor Beschallung', category: 'Indoor', date: '2016', img: 'img/ref6.jpg' },
|
||||
{ id: 7, title: 'Bühnentechnik Setup', category: 'Rigging', date: '2019', img: 'img/ref7.jpg' },
|
||||
{ id: 8, title: 'Event-Aufbau', category: 'Event', date: '2019', img: 'img/ref8.jpg' },
|
||||
{ id: 9, title: 'Großbühne Aufbau', category: 'Open-Air', date: '2016', img: 'img/ref9.jpg' }
|
||||
]
|
||||
const filteredImages = computed(() => {
|
||||
if (activeFilter.value === "Alle") return images;
|
||||
return images.filter((img) => img.category === activeFilter.value);
|
||||
});
|
||||
|
||||
const lightboxOpen = ref(false);
|
||||
const currentIndex = ref(0);
|
||||
|
||||
const currentImage = computed<GalleryItem>(() => {
|
||||
const item = filteredImages.value[currentIndex.value];
|
||||
return item
|
||||
? { src: item.src, alt: item.alt, caption: item.caption }
|
||||
: { src: "", alt: "", caption: "" };
|
||||
});
|
||||
|
||||
function openLightbox(item: GalleryItem) {
|
||||
const idx = filteredImages.value.findIndex((i) => i.id === item.id);
|
||||
if (idx >= 0) {
|
||||
currentIndex.value = idx;
|
||||
lightboxOpen.value = true;
|
||||
}
|
||||
}
|
||||
|
||||
function closeLightbox() {
|
||||
lightboxOpen.value = false;
|
||||
}
|
||||
|
||||
function nextImage() {
|
||||
currentIndex.value = (currentIndex.value + 1) % filteredImages.value.length;
|
||||
}
|
||||
|
||||
function prevImage() {
|
||||
currentIndex.value =
|
||||
currentIndex.value === 0
|
||||
? filteredImages.value.length - 1
|
||||
: currentIndex.value - 1;
|
||||
}
|
||||
</script>
|
||||
if (filter.value === 'alle') return allImages
|
||||
return allImages.filter(i => i.category === filter.value)
|
||||
})
|
||||
onMounted(() => { setTimeout(() => { loading.value = false }, 1000) })
|
||||
function retry() { loading.value = true; error.value = false; setTimeout(() => { loading.value = false }, 800) }
|
||||
</script>
|
||||
|
||||
+68
-125
@@ -1,120 +1,45 @@
|
||||
<template>
|
||||
<div class="max-w-5xl mx-auto px-4 py-8">
|
||||
<!-- Breadcrumb -->
|
||||
<nav class="flex items-center gap-2 text-sm text-text-muted mb-6" aria-label="Breadcrumb">
|
||||
<NuxtLink to="/" class="hover:text-accent transition-colors duration-fast">Home</NuxtLink>
|
||||
<span class="text-secondary">/</span>
|
||||
<span class="text-text font-medium">Warenkorb</span>
|
||||
</nav>
|
||||
|
||||
<h1 class="text-2xl font-bold text-text mb-6" data-testid="warenkorb-title">Warenkorb</h1>
|
||||
|
||||
<!-- Empty State -->
|
||||
<div v-if="isEmpty" class="flex flex-col items-center justify-center py-16 text-center" data-testid="warenkorb-empty">
|
||||
<div class="w-20 h-20 mb-4 flex items-center justify-center rounded-full bg-surface">
|
||||
<svg class="w-10 h-10 text-secondary" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" aria-hidden="true">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M2.25 3h1.386c.51 0 .955.343 1.087.835l.383 1.437M7.5 14.25a3 3 0 00-3 3h15.75m-12.75-3h11.218c1.121-2.3 2.1-4.684 2.924-7.138a60.114 60.114 0 00-16.536-1.84M7.5 14.25L5.106 5.272M6 20.25a.75.75 0 11-1.5 0 .75.75 0 011.5 0zm12.75 0a.75.75 0 11-1.5 0 .75.75 0 011.5 0z" />
|
||||
</svg>
|
||||
</div>
|
||||
<h2 class="text-lg font-bold text-text mb-2">Ihr Warenkorb ist leer</h2>
|
||||
<p class="text-text-muted text-sm mb-6 max-w-sm">Sie haben noch keine Artikel zum Ausleihen ausgewählt.</p>
|
||||
<NuxtLink to="/mietkatalog" class="btn-primary" data-testid="warenkorb-empty-cta">
|
||||
Zum Mietkatalog
|
||||
</NuxtLink>
|
||||
<div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
|
||||
<h1 class="text-3xl sm:text-4xl font-bold mb-2" style="color: var(--text)">Mietanfrage</h1>
|
||||
<p class="mb-8" style="color: var(--secondary)">Überprüfen Sie Ihre Geräteauswahl und senden Sie die Anfrage ab.</p>
|
||||
<div v-if="submitted" class="hms-card p-8 text-center" role="status">
|
||||
<div class="inline-flex items-center justify-center w-16 h-16 rounded-full mb-4" :style="{ background: 'var(--color-success-bg)', color: 'var(--color-success)' }"><svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg></div>
|
||||
<h2 class="text-xl font-semibold mb-2" style="color: var(--text)">Mietanfrage übermittelt</h2>
|
||||
<p class="mb-6" style="color: var(--secondary)">Vielen Dank! Wir melden uns innerhalb von 24 Stunden mit einem unverbindlichen Angebot.</p>
|
||||
<div class="flex flex-col sm:flex-row gap-4 justify-center"><button @click="navigate('/mietkatalog')" class="hms-btn hms-btn-secondary">Weiter stöbern</button><button @click="navigate('/')" class="hms-btn hms-btn-primary">Zur Startseite</button></div>
|
||||
</div>
|
||||
|
||||
<!-- Cart Items -->
|
||||
<div v-else class="space-y-4">
|
||||
<div
|
||||
v-for="item in items"
|
||||
:key="item.equipment_id"
|
||||
class="card rounded-lg border border-border-default p-4 flex flex-col sm:flex-row gap-4"
|
||||
data-testid="warenkorb-item"
|
||||
>
|
||||
<!-- Item Image -->
|
||||
<div class="w-full sm:w-24 h-24 rounded-md overflow-hidden bg-surface shrink-0">
|
||||
<img
|
||||
v-if="item.image_url"
|
||||
:src="item.image_url"
|
||||
:alt="item.name"
|
||||
class="w-full h-full object-cover"
|
||||
/>
|
||||
<div v-else class="w-full h-full flex items-center justify-center">
|
||||
<svg class="w-10 h-10 text-secondary" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" aria-hidden="true">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M2.25 15.75l5.159-5.159a2.25 2.25 0 013.182 0l5.159 5.159m-1.5-1.5l1.409-1.409a2.25 2.25 0 013.182 0l2.909 2.909M3.75 3.75h16.5a1.5 1.5 0 011.5 1.5v12a1.5 1.5 0 01-1.5 1.5H3.75a1.5 1.5 0 01-1.5-1.5V5.25a1.5 1.5 0 011.5-1.5z" />
|
||||
</svg>
|
||||
<EmptyState v-else-if="cartItems.length === 0" icon="🛒" title="Warenkorb ist leer" message="Fügen Sie Geräte aus dem Mietkatalog hinzu, um eine Mietanfrage zu stellen." action-label="Zum Mietkatalog" @action="navigate('/mietkatalog')" />
|
||||
<div v-else class="grid lg:grid-cols-3 gap-8">
|
||||
<div class="lg:col-span-2 space-y-4">
|
||||
<div v-for="(item, index) in cartItems" :key="index" class="hms-card p-4 sm:p-6">
|
||||
<div class="flex gap-4">
|
||||
<div class="w-20 h-20 rounded-lg flex items-center justify-center flex-shrink-0 text-2xl" style="background: var(--surface); color: var(--secondary)">📦</div>
|
||||
<div class="flex-1 min-w-0">
|
||||
<div class="flex items-start justify-between gap-2"><div><h3 class="font-semibold text-sm sm:text-base" style="color: var(--text)">{{ item.name }}</h3><div class="text-xs mt-0.5" style="color: var(--secondary)">{{ item.equipment_id }}</div></div>
|
||||
<button @click="removeItem(item.equipment_id)" class="p-1" style="color: var(--secondary)" :aria-label="item.name + ' entfernen'"><svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/></svg></button>
|
||||
</div>
|
||||
<div class="flex flex-wrap items-center gap-3 mt-3"><div class="flex items-center gap-2"><button @click="decrementQuantity(item.equipment_id)" class="w-7 h-7 rounded border flex items-center justify-center" style="border-color: var(--border-strong); color: var(--text-muted)" aria-label="Anzahl verringern">−</button><span class="w-8 text-center text-sm font-medium" style="color: var(--text)">{{ item.quantity }}</span><button @click="incrementQuantity(item.equipment_id)" class="w-7 h-7 rounded border flex items-center justify-center" style="border-color: var(--border-strong); color: var(--text-muted)" aria-label="Anzahl erhöhen">+</button></div></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Item Info -->
|
||||
<div class="flex-grow flex flex-col justify-between">
|
||||
<div>
|
||||
<NuxtLink :to="`/mietkatalog/${item.equipment_id}`" class="text-base font-bold text-text hover:text-accent transition-colors duration-fast" data-testid="warenkorb-item-name">
|
||||
{{ item.name }}
|
||||
</NuxtLink>
|
||||
<p class="text-sm text-text-muted mt-1">
|
||||
<span v-if="item.rental_price != null" class="text-accent font-semibold">{{ formatPrice(item.rental_price) }} €/Tag</span>
|
||||
<span v-else>Preis auf Anfrage</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Quantity Stepper -->
|
||||
<div class="flex items-center gap-3 shrink-0" data-testid="warenkorb-item-stepper">
|
||||
<button
|
||||
class="w-9 h-9 rounded-md bg-surface border border-border-default text-text-muted hover:text-accent hover:border-accent-border transition-colors duration-fast flex items-center justify-center"
|
||||
:aria-label="`Menge von ${item.name} verringern`"
|
||||
data-testid="warenkorb-item-decrement"
|
||||
@click="decrementQuantity(item.equipment_id)"
|
||||
>
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" aria-hidden="true">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M5 12h14" />
|
||||
</svg>
|
||||
</button>
|
||||
<span class="text-base font-semibold text-text w-8 text-center" data-testid="warenkorb-item-quantity">{{ item.quantity }}</span>
|
||||
<button
|
||||
class="w-9 h-9 rounded-md bg-surface border border-border-default text-text-muted hover:text-accent hover:border-accent-border transition-colors duration-fast flex items-center justify-center"
|
||||
:aria-label="`Menge von ${item.name} erhöhen`"
|
||||
data-testid="warenkorb-item-increment"
|
||||
@click="incrementQuantity(item.equipment_id)"
|
||||
>
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" aria-hidden="true">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M12 4v16m8-8H4" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Remove Button -->
|
||||
<div class="flex items-center shrink-0">
|
||||
<button
|
||||
class="text-text-muted hover:text-error transition-colors duration-fast w-9 h-9 flex items-center justify-center"
|
||||
:aria-label="`${item.name} aus Warenkorb entfernen`"
|
||||
data-testid="warenkorb-item-remove"
|
||||
@click="removeItem(item.equipment_id)"
|
||||
>
|
||||
<svg class="w-5 h-5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" aria-hidden="true">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<button @click="clearCart" class="text-sm hover:text-[var(--color-error)]" style="color: var(--secondary)">Warenkorb leeren</button>
|
||||
</div>
|
||||
|
||||
<!-- Summary & Actions -->
|
||||
<div class="flex flex-col sm:flex-row items-center justify-between gap-4 pt-4 border-t border-border-default">
|
||||
<p class="text-sm text-text-muted">
|
||||
Insgesamt <span class="text-text font-bold">{{ totalCount }}</span> Artikel
|
||||
</p>
|
||||
<div class="flex items-center gap-3">
|
||||
<button
|
||||
class="btn-secondary"
|
||||
data-testid="warenkorb-clear"
|
||||
@click="clearCart"
|
||||
>
|
||||
Warenkorb leeren
|
||||
</button>
|
||||
<NuxtLink to="/mietanfrage" class="btn-primary" data-testid="warenkorb-checkout">
|
||||
Zur Mietanfrage
|
||||
</NuxtLink>
|
||||
<div>
|
||||
<div class="hms-card p-6 sticky top-20">
|
||||
<h2 class="text-lg font-semibold mb-4" style="color: var(--text)">Anfrage senden</h2>
|
||||
<div class="text-sm mb-4 pb-4 border-b" :style="{ borderColor: 'var(--border)', color: 'var(--secondary)' }"><div class="flex justify-between mb-1"><span>Geräte gesamt:</span><span class="font-medium" style="color: var(--text)">{{ totalCount }}</span></div><div class="flex justify-between"><span>Positionen:</span><span class="font-medium" style="color: var(--text)">{{ cartItems.length }}</span></div></div>
|
||||
<form @submit.prevent="submitRequest" novalidate>
|
||||
<div class="space-y-3">
|
||||
<div><label for="req-name" class="block text-xs font-medium mb-1" style="color: var(--secondary)">Name <span style="color: var(--color-error)">*</span></label><input id="req-name" v-model="form.name" type="text" :class="['hms-input text-sm', errors.name ? 'hms-input-error' : '']" placeholder="Ihr Name" /><p v-if="errors.name" class="text-xs mt-1" style="color: var(--color-error)">{{ errors.name }}</p></div>
|
||||
<div><label for="req-email" class="block text-xs font-medium mb-1" style="color: var(--secondary)">E-Mail <span style="color: var(--color-error)">*</span></label><input id="req-email" v-model="form.email" type="email" :class="['hms-input text-sm', errors.email ? 'hms-input-error' : '']" placeholder="ihre@email.de" /><p v-if="errors.email" class="text-xs mt-1" style="color: var(--color-error)">{{ errors.email }}</p></div>
|
||||
<div><label for="req-phone" class="block text-xs font-medium mb-1" style="color: var(--secondary)">Telefon</label><input id="req-phone" v-model="form.phone" type="tel" class="hms-input text-sm" placeholder="+49 ..." /></div>
|
||||
<div><label for="req-date" class="block text-xs font-medium mb-1" style="color: var(--secondary)">Veranstaltungsdatum <span style="color: var(--color-error)">*</span></label><input id="req-date" v-model="form.event_date" type="date" :class="['hms-input text-sm', errors.event_date ? 'hms-input-error' : '']" /><p v-if="errors.event_date" class="text-xs mt-1" style="color: var(--color-error)">{{ errors.event_date }}</p></div>
|
||||
<div><label for="req-location" class="block text-xs font-medium mb-1" style="color: var(--secondary)">Veranstaltungsort <span style="color: var(--color-error)">*</span></label><input id="req-location" v-model="form.event_location" type="text" :class="['hms-input text-sm', errors.event_location ? 'hms-input-error' : '']" placeholder="Ort / Location" /><p v-if="errors.event_location" class="text-xs mt-1" style="color: var(--color-error)">{{ errors.event_location }}</p></div>
|
||||
<div><label for="req-message" class="block text-xs font-medium mb-1" style="color: var(--secondary)">Anmerkung</label><textarea id="req-message" v-model="form.message" rows="3" class="hms-input text-sm" placeholder="Zusätzliche Informationen..."></textarea></div>
|
||||
<button type="submit" :disabled="submitting" class="hms-btn hms-btn-primary w-full py-3"><span v-if="submitting" class="hms-spinner" style="width:18px;height:18px;border-width:2px"></span><span v-else>Anfrage absenden</span></button>
|
||||
<p class="text-xs text-center" style="color: var(--secondary)">Unverbindlich – Angebot innerhalb 24 Std.</p>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -122,20 +47,38 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { useCart } from "~/composables/useCart";
|
||||
import { reactive, ref } from 'vue'
|
||||
import { useCart } from '~/composables/useCart'
|
||||
|
||||
const { items, totalCount, isEmpty, removeItem, incrementQuantity, decrementQuantity, clearCart } = useCart();
|
||||
const { items: cartItems, totalCount, removeItem, incrementQuantity, decrementQuantity, clearCart } = useCart()
|
||||
|
||||
function formatPrice(price: number | null): string {
|
||||
if (price == null) return "—";
|
||||
return new Intl.NumberFormat("de-DE", {
|
||||
minimumFractionDigits: 2,
|
||||
maximumFractionDigits: 2,
|
||||
}).format(price);
|
||||
const submitting = ref(false)
|
||||
const submitted = ref(false)
|
||||
const form = reactive({ name: '', email: '', phone: '', event_date: '', event_location: '', message: '' })
|
||||
const errors = reactive<Record<string, string>>({})
|
||||
|
||||
function navigate(route: string) {
|
||||
navigateTo(route)
|
||||
if (import.meta.client) window.scrollTo(0, 0)
|
||||
}
|
||||
function validate(): boolean {
|
||||
const e: Record<string, string> = {}
|
||||
if (!form.name.trim()) e.name = 'Name ist erforderlich'
|
||||
if (!form.email.trim()) e.email = 'E-Mail ist erforderlich'
|
||||
else if (!/^\S+@\S+\.\S+$/.test(form.email)) e.email = 'Ungültige E-Mail'
|
||||
if (!form.event_date) e.event_date = 'Veranstaltungsdatum erforderlich'
|
||||
if (!form.event_location.trim()) e.event_location = 'Veranstaltungsort erforderlich'
|
||||
Object.keys(errors).forEach(k => delete errors[k])
|
||||
Object.assign(errors, e)
|
||||
return Object.keys(e).length === 0
|
||||
}
|
||||
function submitRequest() {
|
||||
if (!validate()) return
|
||||
submitting.value = true
|
||||
setTimeout(() => {
|
||||
submitting.value = false
|
||||
submitted.value = true
|
||||
clearCart()
|
||||
}, 1800)
|
||||
}
|
||||
|
||||
useHead({
|
||||
title: "Warenkorb – HMS Licht & Ton",
|
||||
meta: [{ name: "robots", content: "noindex, nofollow, noarchive, nosnippet" }],
|
||||
});
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user