97 lines
3.3 KiB
Vue
97 lines
3.3 KiB
Vue
<template>
|
|
<div class="max-w-xl mx-auto p-6">
|
|
<h1 class="text-2xl font-bold mb-6">Настройки</h1>
|
|
|
|
<div class="space-y-6">
|
|
<!-- Push Notifications -->
|
|
<div class="bg-slate-800 border border-slate-700 rounded-xl p-6">
|
|
<h2 class="text-lg font-semibold mb-4 flex items-center gap-2">
|
|
<span>🔔</span> Push-уведомления
|
|
</h2>
|
|
<div class="space-y-3">
|
|
<div class="flex items-center justify-between">
|
|
<span class="text-slate-300">Статус поддержки</span>
|
|
<span :class="isSupported ? 'text-emerald-400' : 'text-red-400'">
|
|
{{ isSupported ? 'Доступно' : 'Недоступно' }}
|
|
</span>
|
|
</div>
|
|
<div class="flex items-center justify-between">
|
|
<span class="text-slate-300">Разрешение</span>
|
|
<span :class="permissionGranted ? 'text-emerald-400' : 'text-yellow-400'">
|
|
{{ permissionGranted ? 'Разрешено' : 'Не запрошено' }}
|
|
</span>
|
|
</div>
|
|
<button
|
|
v-if="isSupported && !permissionGranted"
|
|
@click="enablePush"
|
|
class="w-full py-2 bg-blue-600 hover:bg-blue-500 text-white rounded-lg font-medium transition"
|
|
>
|
|
Включить уведомления
|
|
</button>
|
|
<button
|
|
v-if="isSupported && permissionGranted && !subscription"
|
|
@click="subscribe"
|
|
class="w-full py-2 bg-emerald-600 hover:bg-emerald-500 text-white rounded-lg font-medium transition"
|
|
>
|
|
Подписаться на пуши
|
|
</button>
|
|
<div v-if="subscription" class="text-sm text-emerald-400">
|
|
✅ Подписка активна
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Achievements -->
|
|
<div class="bg-slate-800 border border-slate-700 rounded-xl p-6">
|
|
<h2 class="text-lg font-semibold mb-4 flex items-center gap-2">
|
|
<span>🏆</span> Ачивки
|
|
</h2>
|
|
<div v-if="achievements.length === 0" class="text-slate-400 text-sm">
|
|
Пока нет разблокированных ачивок. Завершите задачи в Canvas!
|
|
</div>
|
|
<div v-else class="space-y-2">
|
|
<div
|
|
v-for="ach in achievements"
|
|
:key="ach.id"
|
|
class="flex items-center gap-3 p-3 bg-slate-700 rounded-lg"
|
|
>
|
|
<span class="text-xl">{{ ach.icon || '🏆' }}</span>
|
|
<div>
|
|
<div class="font-medium">{{ ach.title }}</div>
|
|
<div class="text-xs text-slate-400">{{ ach.description }}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
definePageMeta({
|
|
middleware: 'auth'
|
|
})
|
|
|
|
const { isSupported, subscription, requestPermission, subscribe: pushSubscribe } = usePush()
|
|
const { achievements, loadAchievements } = useAchievements()
|
|
|
|
const permissionGranted = ref(false)
|
|
|
|
const enablePush = async () => {
|
|
const granted = await requestPermission()
|
|
permissionGranted.value = granted
|
|
if (granted) {
|
|
await pushSubscribe()
|
|
}
|
|
}
|
|
|
|
const subscribe = async () => {
|
|
await pushSubscribe()
|
|
}
|
|
|
|
onMounted(async () => {
|
|
permissionGranted.value = Notification.permission === 'granted'
|
|
await loadAchievements()
|
|
})
|
|
</script>
|