182 lines
7.1 KiB
Vue
182 lines
7.1 KiB
Vue
<script setup lang="ts">
|
|
import { Head, router } from '@inertiajs/vue3'
|
|
import { AlertTriangle } from 'lucide-vue-next'
|
|
import { ref } from 'vue'
|
|
import Button from '@/components/ui/button.vue'
|
|
import Input from '@/components/ui/input.vue'
|
|
import Label from '@/components/ui/label.vue'
|
|
import Select from '@/components/ui/select.vue'
|
|
import UserLayout from '@/layouts/user/userlayout.vue'
|
|
|
|
// Local state for forms (no persistence yet — posts to placeholder endpoint)
|
|
const lossLimitDaily = ref<string>('')
|
|
const lossLimitWeekly = ref<string>('')
|
|
const lossLimitMonthly = ref<string>('')
|
|
|
|
const wagerLimitDaily = ref<string>('')
|
|
|
|
const sessionLimitMinutes = ref<string>('')
|
|
|
|
const timeoutDuration = ref<string>('')
|
|
|
|
function submitLimits() {
|
|
router.post('/responsible/limits', {
|
|
lossLimitDaily: lossLimitDaily.value || null,
|
|
lossLimitWeekly: lossLimitWeekly.value || null,
|
|
lossLimitMonthly: lossLimitMonthly.value || null,
|
|
wagerLimitDaily: wagerLimitDaily.value || null,
|
|
sessionLimitMinutes: sessionLimitMinutes.value || null,
|
|
timeoutDuration: timeoutDuration.value || null,
|
|
})
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<UserLayout>
|
|
<Head title="Self Exclusion" />
|
|
|
|
<section class="content">
|
|
<div class="wrap">
|
|
<!-- Intro panel -->
|
|
<div class="panel">
|
|
<div class="section-head">
|
|
<h2>Responsible Gaming</h2>
|
|
<div class="view-all">Self Exclusion</div>
|
|
</div>
|
|
<div class="panel-body">
|
|
<p class="muted">Setze persönliche Limits und nimm bei Bedarf eine Spielpause. Behalte jederzeit die Kontrolle über dein Spielverhalten.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Verlustlimits -->
|
|
<div class="panel">
|
|
<div class="section-head">
|
|
<h2>Verlustlimits</h2>
|
|
</div>
|
|
<div class="panel-body">
|
|
<p class="muted">Begrenze, wie viel du in einem bestimmten Zeitraum maximal verlieren möchtest.</p>
|
|
<div class="form-row three">
|
|
<div class="field">
|
|
<Label for="lossDaily">Tageslimit</Label>
|
|
<Input id="lossDaily" v-model="lossLimitDaily" type="number" min="0" placeholder="z. B. 100" />
|
|
</div>
|
|
<div class="field">
|
|
<Label for="lossWeekly">Wochenlimit</Label>
|
|
<Input id="lossWeekly" v-model="lossLimitWeekly" type="number" min="0" placeholder="z. B. 300" />
|
|
</div>
|
|
<div class="field">
|
|
<Label for="lossMonthly">Monatslimit</Label>
|
|
<Input id="lossMonthly" v-model="lossLimitMonthly" type="number" min="0" placeholder="z. B. 1000" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Einsatzlimits -->
|
|
<div class="panel">
|
|
<div class="section-head">
|
|
<h2>Einsatzlimits</h2>
|
|
</div>
|
|
<div class="panel-body">
|
|
<p class="muted">Lege fest, wie viel du pro Tag maximal einsetzen möchtest.</p>
|
|
<div class="form-row one">
|
|
<div class="field">
|
|
<Label for="wagerDaily">Tägliches Einsatzlimit</Label>
|
|
<Input id="wagerDaily" v-model="wagerLimitDaily" type="number" min="0" placeholder="z. B. 200" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Spielpause -->
|
|
<div class="panel">
|
|
<div class="section-head">
|
|
<h2>Spielpause</h2>
|
|
</div>
|
|
<div class="panel-body">
|
|
<p class="muted">Lege eine Auszeit fest. Während der gewählten Dauer kannst du dich nicht einloggen und nicht spielen.</p>
|
|
<div class="form-row one">
|
|
<div class="field">
|
|
<Label for="timeout">Dauer wählen</Label>
|
|
<Select id="timeout" v-model="timeoutDuration" :options="[
|
|
{ label: 'Keine', value: '' },
|
|
{ label: '1 Tag', value: '1d' },
|
|
{ label: '3 Tage', value: '3d' },
|
|
{ label: '7 Tage', value: '7d' },
|
|
{ label: '14 Tage', value: '14d' },
|
|
{ label: '1 Monat', value: '1m' },
|
|
{ label: '3 Monate', value: '3m' },
|
|
{ label: '6 Monate', value: '6m' }
|
|
]" placeholder="Dauer wählen" />
|
|
</div>
|
|
</div>
|
|
<div class="warning">
|
|
<AlertTriangle class="w-4 h-4" />
|
|
<span>Hinweis: Eine Spielpause kann nicht rückgängig gemacht werden und gilt sofort.</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Sitzungslimits -->
|
|
<div class="panel">
|
|
<div class="section-head">
|
|
<h2>Sitzungslimits</h2>
|
|
</div>
|
|
<div class="panel-body">
|
|
<p class="muted">Lege fest, wie lange eine einzelne Spielsitzung maximal dauern darf.</p>
|
|
<div class="form-row one">
|
|
<div class="field">
|
|
<Label for="sessionLimit">Minuten pro Sitzung</Label>
|
|
<Input id="sessionLimit" v-model="sessionLimitMinutes" type="number" min="0" placeholder="z. B. 60" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Aktionen -->
|
|
<div class="panel">
|
|
<div class="panel-body actions">
|
|
<Button class="btn-primary" @click="submitLimits">Speichern</Button>
|
|
<Button variant="outline" @click="router.visit('/wallet')">Abbrechen</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</UserLayout>
|
|
</template>
|
|
|
|
<style scoped>
|
|
/* Align with User.vue layout */
|
|
.content { padding: 30px; padding-bottom: 30px; }
|
|
.wrap { max-width: 1400px; margin: 0 auto; display: flex; flex-direction: column; gap: 30px; }
|
|
|
|
.panel { background: var(--bg-card); border: 1px solid var(--border); border-radius: 16px; overflow: hidden; animation: fade-in 0.8s cubic-bezier(0.2, 0, 0, 1); }
|
|
@keyframes fade-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
|
|
|
|
.section-head { padding: 25px 20px 10px; display: flex; justify-content: space-between; align-items: flex-end; border-bottom: 1px solid var(--border); }
|
|
.section-head h2 { margin: 0; font-size: 11px; font-weight: 900; text-transform: uppercase; letter-spacing: 2px; color: #444; }
|
|
.view-all { font-size: 10px; color: var(--cyan); font-weight: 900; text-transform: uppercase; }
|
|
|
|
.panel-body { padding: 20px; }
|
|
.muted { color: #777; font-size: 12px; font-weight: 700; margin: 0 0 12px; }
|
|
|
|
.form-row { display: grid; gap: 12px; }
|
|
.form-row.three { grid-template-columns: repeat(3, minmax(0,1fr)); }
|
|
.form-row.one { grid-template-columns: 1fr; }
|
|
.field { display: flex; flex-direction: column; gap: 8px; }
|
|
|
|
.warning { display: flex; align-items: center; gap: 10px; border: 1px solid #111; background: #050505; padding: 12px 14px; border-radius: 12px; color: #facc15; font-weight: 800; }
|
|
|
|
.actions { display: flex; gap: 12px; align-items: center; }
|
|
.btn-primary { background: var(--cyan); color: #000; border: none; }
|
|
|
|
:global(:root) {
|
|
--bg-card: #0a0a0a;
|
|
--border: #151515;
|
|
--magenta: #ff007a;
|
|
--cyan: #00f2ff;
|
|
--green: #00ff9d;
|
|
--gold: #f7931a;
|
|
}
|
|
</style>
|