feat(redesign): re-skin server-ops/operations/store/analytics views to DS (Phase D batch 2)
All checks were successful
Test Asgard Runner / test (push) Successful in 3s
All checks were successful
Test Asgard Runner / test (push) Successful in 3s
18 admin views re-skinned onto design-system components + tokens: Server/Players/Plugins/ChatLog, Wipes/WipeProfiles/Maps/Schedules/Alerts, StoreConfig/StoreItems/ModuleStore, Analytics/WipeAnalytics/MapAnalytics/PlayerRetention/StoreRevenue. ECharts now read var(--accent) (token-driven, follows game skin). 14 icons added to the registry. All logic/store/router/handlers/API calls preserved; presentation-only re-skin. Build green. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
Vantz Stockwell
@@ -3,7 +3,13 @@ import { ref, onMounted } from 'vue'
|
||||
import { useWipeStore } from '@/stores/wipe'
|
||||
import { useToastStore } from '@/stores/toast'
|
||||
import type { WipeProfile } from '@/types'
|
||||
import { FileText, Plus, ChevronDown, ChevronRight, Edit2, Trash2, X } from 'lucide-vue-next'
|
||||
import Panel from '@/components/ds/data/Panel.vue'
|
||||
import Button from '@/components/ds/core/Button.vue'
|
||||
import Badge from '@/components/ds/core/Badge.vue'
|
||||
import IconButton from '@/components/ds/core/IconButton.vue'
|
||||
import Input from '@/components/ds/forms/Input.vue'
|
||||
import Checkbox from '@/components/ds/forms/Checkbox.vue'
|
||||
import EmptyState from '@/components/ds/feedback/EmptyState.vue'
|
||||
|
||||
const wipeStore = useWipeStore()
|
||||
const toast = useToastStore()
|
||||
@@ -135,288 +141,489 @@ onMounted(() => {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="p-6 space-y-6">
|
||||
<!-- Header -->
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex items-center gap-3">
|
||||
<FileText class="w-5 h-5 text-oxide-500" />
|
||||
<h1 class="text-2xl font-bold text-neutral-100">Wipe Profiles</h1>
|
||||
<div class="profiles">
|
||||
<!-- Page head -->
|
||||
<div class="page__head">
|
||||
<div>
|
||||
<div class="t-eyebrow">Operations</div>
|
||||
<h1 class="page__title">Wipe profiles</h1>
|
||||
</div>
|
||||
<button
|
||||
@click="openCreateModal"
|
||||
class="flex items-center gap-2 px-4 py-2 bg-oxide-600 hover:bg-oxide-700 text-white text-sm font-medium rounded-lg transition-colors"
|
||||
<Button icon="plus" @click="openCreateModal">New profile</Button>
|
||||
</div>
|
||||
|
||||
<!-- Empty state -->
|
||||
<Panel v-if="wipeStore.profiles.length === 0">
|
||||
<EmptyState
|
||||
icon="file-text"
|
||||
title="No wipe profiles"
|
||||
description="Create a profile to define pre-wipe and post-wipe behavior."
|
||||
>
|
||||
<Plus class="w-4 h-4" />
|
||||
New Profile
|
||||
</button>
|
||||
</div>
|
||||
<template #action>
|
||||
<Button icon="plus" size="sm" @click="openCreateModal">New profile</Button>
|
||||
</template>
|
||||
</EmptyState>
|
||||
</Panel>
|
||||
|
||||
<!-- Profiles -->
|
||||
<div v-if="wipeStore.profiles.length === 0" class="bg-neutral-900 border border-neutral-800 rounded-lg p-12 text-center">
|
||||
<FileText class="w-10 h-10 text-neutral-600 mx-auto mb-3" />
|
||||
<h3 class="text-lg font-medium text-neutral-300 mb-1">No Wipe Profiles</h3>
|
||||
<p class="text-sm text-neutral-500">Create a profile to define pre-wipe and post-wipe behavior.</p>
|
||||
</div>
|
||||
|
||||
<div v-else class="space-y-3">
|
||||
<div
|
||||
<!-- Profile list -->
|
||||
<div v-else class="profile-list">
|
||||
<Panel
|
||||
v-for="profile in wipeStore.profiles"
|
||||
:key="profile.id"
|
||||
class="bg-neutral-900 border border-neutral-800 rounded-lg overflow-hidden"
|
||||
:flush-body="true"
|
||||
>
|
||||
<div class="flex items-center">
|
||||
<template #title-append>
|
||||
<!-- Nothing — title is injected via Panel slot at row level instead -->
|
||||
</template>
|
||||
|
||||
<!-- Accordion row header -->
|
||||
<div class="profile-row">
|
||||
<button
|
||||
type="button"
|
||||
class="profile-toggle"
|
||||
@click="toggle(profile.id)"
|
||||
class="flex-1 flex items-center justify-between p-4 text-left hover:bg-neutral-800/50 transition-colors"
|
||||
>
|
||||
<div>
|
||||
<h3 class="text-sm font-medium text-neutral-100">{{ profile.profile_name }}</h3>
|
||||
<p class="text-xs text-neutral-500 mt-0.5">{{ profile.description || 'No description' }}</p>
|
||||
<div class="profile-meta">
|
||||
<span class="profile-name">{{ profile.profile_name }}</span>
|
||||
<span class="profile-desc">{{ profile.description || 'No description' }}</span>
|
||||
</div>
|
||||
<component :is="expandedId === profile.id ? ChevronDown : ChevronRight" class="w-4 h-4 text-neutral-500" />
|
||||
<span class="profile-chev" :class="expandedId === profile.id && 'profile-chev--open'">
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
|
||||
<polyline points="6 9 12 15 18 9" />
|
||||
</svg>
|
||||
</span>
|
||||
</button>
|
||||
<div class="flex items-center gap-1 pr-4">
|
||||
<button
|
||||
@click="openEditModal(profile)"
|
||||
class="p-1.5 text-neutral-500 hover:text-oxide-400 rounded transition-colors"
|
||||
title="Edit"
|
||||
>
|
||||
<Edit2 class="w-4 h-4" />
|
||||
</button>
|
||||
<button
|
||||
@click="deleteProfile(profile)"
|
||||
class="p-1.5 text-neutral-500 hover:text-red-400 rounded transition-colors"
|
||||
title="Delete"
|
||||
>
|
||||
<Trash2 class="w-4 h-4" />
|
||||
</button>
|
||||
<div class="profile-actions">
|
||||
<IconButton icon="pencil" size="sm" label="Edit" @click="openEditModal(profile)" />
|
||||
<IconButton icon="trash-2" variant="danger" size="sm" label="Delete" @click="deleteProfile(profile)" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="expandedId === profile.id" class="border-t border-neutral-800 p-4">
|
||||
<div class="grid grid-cols-2 gap-6">
|
||||
<!-- Expanded detail -->
|
||||
<div v-if="expandedId === profile.id" class="profile-detail">
|
||||
<div class="detail-grid">
|
||||
<!-- Pre-wipe -->
|
||||
<div>
|
||||
<h4 class="text-xs font-medium text-neutral-400 uppercase tracking-wider mb-3">Pre-Wipe</h4>
|
||||
<div class="space-y-2 text-sm">
|
||||
<div class="flex justify-between">
|
||||
<span class="text-neutral-500">Backup before wipe</span>
|
||||
<span :class="profile.pre_wipe_config.backup_before_wipe ? 'text-green-400' : 'text-neutral-600'">
|
||||
<div class="t-eyebrow detail-eyebrow">Pre-wipe</div>
|
||||
<div class="detail-rows">
|
||||
<div class="detail-kv">
|
||||
<span class="detail-k">Backup before wipe</span>
|
||||
<Badge :tone="profile.pre_wipe_config.backup_before_wipe ? 'online' : 'neutral'">
|
||||
{{ profile.pre_wipe_config.backup_before_wipe ? 'Yes' : 'No' }}
|
||||
</span>
|
||||
</Badge>
|
||||
</div>
|
||||
<div class="flex justify-between">
|
||||
<span class="text-neutral-500">Kick players</span>
|
||||
<span :class="profile.pre_wipe_config.kick_players_before_wipe ? 'text-green-400' : 'text-neutral-600'">
|
||||
<div class="detail-kv">
|
||||
<span class="detail-k">Kick players</span>
|
||||
<Badge :tone="profile.pre_wipe_config.kick_players_before_wipe ? 'online' : 'neutral'">
|
||||
{{ profile.pre_wipe_config.kick_players_before_wipe ? 'Yes' : 'No' }}
|
||||
</span>
|
||||
</Badge>
|
||||
</div>
|
||||
<div class="flex justify-between">
|
||||
<span class="text-neutral-500">Final save</span>
|
||||
<span :class="profile.pre_wipe_config.run_final_save ? 'text-green-400' : 'text-neutral-600'">
|
||||
<div class="detail-kv">
|
||||
<span class="detail-k">Final save</span>
|
||||
<Badge :tone="profile.pre_wipe_config.run_final_save ? 'online' : 'neutral'">
|
||||
{{ profile.pre_wipe_config.run_final_save ? 'Yes' : 'No' }}
|
||||
</span>
|
||||
</Badge>
|
||||
</div>
|
||||
<div class="flex justify-between">
|
||||
<span class="text-neutral-500">Discord announce</span>
|
||||
<span :class="profile.pre_wipe_config.discord_pre_announce ? 'text-green-400' : 'text-neutral-600'">
|
||||
<div class="detail-kv">
|
||||
<span class="detail-k">Discord announce</span>
|
||||
<Badge :tone="profile.pre_wipe_config.discord_pre_announce ? 'online' : 'neutral'">
|
||||
{{ profile.pre_wipe_config.discord_pre_announce ? 'Yes' : 'No' }}
|
||||
</span>
|
||||
</Badge>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Post-wipe -->
|
||||
<div>
|
||||
<h4 class="text-xs font-medium text-neutral-400 uppercase tracking-wider mb-3">Post-Wipe</h4>
|
||||
<div class="space-y-2 text-sm">
|
||||
<div class="flex justify-between">
|
||||
<span class="text-neutral-500">Verify server started</span>
|
||||
<span :class="profile.post_wipe_config.verify_server_started ? 'text-green-400' : 'text-neutral-600'">
|
||||
<div class="t-eyebrow detail-eyebrow">Post-wipe</div>
|
||||
<div class="detail-rows">
|
||||
<div class="detail-kv">
|
||||
<span class="detail-k">Verify server started</span>
|
||||
<Badge :tone="profile.post_wipe_config.verify_server_started ? 'online' : 'neutral'">
|
||||
{{ profile.post_wipe_config.verify_server_started ? 'Yes' : 'No' }}
|
||||
</span>
|
||||
</Badge>
|
||||
</div>
|
||||
<div class="flex justify-between">
|
||||
<span class="text-neutral-500">Verify plugins loaded</span>
|
||||
<span :class="profile.post_wipe_config.verify_plugins_loaded ? 'text-green-400' : 'text-neutral-600'">
|
||||
<div class="detail-kv">
|
||||
<span class="detail-k">Verify plugins loaded</span>
|
||||
<Badge :tone="profile.post_wipe_config.verify_plugins_loaded ? 'online' : 'neutral'">
|
||||
{{ profile.post_wipe_config.verify_plugins_loaded ? 'Yes' : 'No' }}
|
||||
</span>
|
||||
</Badge>
|
||||
</div>
|
||||
<div class="flex justify-between">
|
||||
<span class="text-neutral-500">Rollback on failure</span>
|
||||
<span :class="profile.post_wipe_config.rollback_on_failure ? 'text-oxide-400' : 'text-neutral-600'">
|
||||
<div class="detail-kv">
|
||||
<span class="detail-k">Rollback on failure</span>
|
||||
<Badge :tone="profile.post_wipe_config.rollback_on_failure ? 'accent' : 'neutral'">
|
||||
{{ profile.post_wipe_config.rollback_on_failure ? 'Yes' : 'No' }}
|
||||
</span>
|
||||
</Badge>
|
||||
</div>
|
||||
<div class="flex justify-between">
|
||||
<span class="text-neutral-500">Max restart attempts</span>
|
||||
<span class="text-neutral-300">{{ profile.post_wipe_config.max_restart_attempts }}</span>
|
||||
<div class="detail-kv">
|
||||
<span class="detail-k">Max restart attempts</span>
|
||||
<span class="detail-v-mono">{{ profile.post_wipe_config.max_restart_attempts }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Panel>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Create / Edit Modal -->
|
||||
<div
|
||||
v-if="showModal"
|
||||
class="fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm p-4"
|
||||
@click.self="closeModal"
|
||||
>
|
||||
<div class="bg-neutral-900 border border-neutral-800 rounded-lg max-w-2xl w-full max-h-[90vh] overflow-y-auto">
|
||||
<!-- Modal header -->
|
||||
<div class="sticky top-0 bg-neutral-900 border-b border-neutral-800 px-6 py-4 flex items-center justify-between">
|
||||
<h2 class="text-xl font-bold text-neutral-100">{{ editingProfile ? 'Edit Profile' : 'New Profile' }}</h2>
|
||||
<button @click="closeModal" class="p-2 text-neutral-400 hover:text-neutral-200 rounded-lg transition-colors">
|
||||
<X class="w-5 h-5" />
|
||||
</button>
|
||||
</div>
|
||||
<Teleport to="body">
|
||||
<div
|
||||
v-if="showModal"
|
||||
class="modal-backdrop"
|
||||
@click.self="closeModal"
|
||||
>
|
||||
<div class="modal">
|
||||
<!-- Modal header -->
|
||||
<div class="modal__head">
|
||||
<h2 class="modal__title">{{ editingProfile ? 'Edit profile' : 'New profile' }}</h2>
|
||||
<IconButton icon="x" label="Close" @click="closeModal" />
|
||||
</div>
|
||||
|
||||
<div class="p-6 space-y-6">
|
||||
<!-- Basic Info -->
|
||||
<div class="space-y-4">
|
||||
<h3 class="text-xs font-medium text-neutral-400 uppercase tracking-wider">Basic Information</h3>
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-neutral-300 mb-2">Profile Name</label>
|
||||
<input
|
||||
<div class="modal__body">
|
||||
<!-- Basic info -->
|
||||
<div class="form-section">
|
||||
<div class="t-eyebrow form-section__eyebrow">Basic information</div>
|
||||
<Input
|
||||
v-model="form.profile_name"
|
||||
type="text"
|
||||
placeholder="Default Wipe Profile"
|
||||
class="w-full px-3 py-2 bg-neutral-800 border border-neutral-700 rounded-lg text-sm text-neutral-100 placeholder-neutral-500 focus:outline-none focus:ring-2 focus:ring-oxide-500/50 focus:border-oxide-500 transition-colors"
|
||||
label="Profile name"
|
||||
placeholder="Default wipe profile"
|
||||
:required="true"
|
||||
/>
|
||||
<div class="cc-field">
|
||||
<span class="cc-field__label">Description (optional)</span>
|
||||
<textarea
|
||||
v-model="form.description"
|
||||
rows="2"
|
||||
placeholder="Standard wipe configuration for monthly force wipes"
|
||||
class="cc-textarea"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-neutral-300 mb-2">Description (optional)</label>
|
||||
<textarea
|
||||
v-model="form.description"
|
||||
rows="2"
|
||||
placeholder="Standard wipe configuration for monthly force wipes"
|
||||
class="w-full px-3 py-2 bg-neutral-800 border border-neutral-700 rounded-lg text-sm text-neutral-100 placeholder-neutral-500 focus:outline-none focus:ring-2 focus:ring-oxide-500/50 focus:border-oxide-500 transition-colors resize-none"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Pre-Wipe Config -->
|
||||
<div class="space-y-4">
|
||||
<div class="flex items-center justify-between">
|
||||
<h3 class="text-xs font-medium text-neutral-400 uppercase tracking-wider">Pre-Wipe</h3>
|
||||
<label class="flex items-center gap-2 text-sm text-neutral-300 cursor-pointer">
|
||||
<input v-model="form.pre_wipe_config.enabled" type="checkbox" class="w-4 h-4 rounded border-neutral-700 bg-neutral-800 text-oxide-600 focus:ring-2 focus:ring-oxide-500/50" />
|
||||
Enabled
|
||||
</label>
|
||||
</div>
|
||||
<div class="grid grid-cols-2 gap-4">
|
||||
<label class="flex items-center gap-2 text-sm text-neutral-300 cursor-pointer">
|
||||
<input v-model="form.pre_wipe_config.backup_before_wipe" type="checkbox" class="w-4 h-4 rounded border-neutral-700 bg-neutral-800 text-oxide-600 focus:ring-2 focus:ring-oxide-500/50" />
|
||||
Backup before wipe
|
||||
</label>
|
||||
<label class="flex items-center gap-2 text-sm text-neutral-300 cursor-pointer">
|
||||
<input v-model="form.pre_wipe_config.run_final_save" type="checkbox" class="w-4 h-4 rounded border-neutral-700 bg-neutral-800 text-oxide-600 focus:ring-2 focus:ring-oxide-500/50" />
|
||||
Run final save
|
||||
</label>
|
||||
<label class="flex items-center gap-2 text-sm text-neutral-300 cursor-pointer">
|
||||
<input v-model="form.pre_wipe_config.kick_players_before_wipe" type="checkbox" class="w-4 h-4 rounded border-neutral-700 bg-neutral-800 text-oxide-600 focus:ring-2 focus:ring-oxide-500/50" />
|
||||
Kick players before wipe
|
||||
</label>
|
||||
<label class="flex items-center gap-2 text-sm text-neutral-300 cursor-pointer">
|
||||
<input v-model="form.pre_wipe_config.discord_pre_announce" type="checkbox" class="w-4 h-4 rounded border-neutral-700 bg-neutral-800 text-oxide-600 focus:ring-2 focus:ring-oxide-500/50" />
|
||||
Discord pre-announce
|
||||
</label>
|
||||
<label class="flex items-center gap-2 text-sm text-neutral-300 cursor-pointer">
|
||||
<input v-model="form.pre_wipe_config.pushbullet_notify" type="checkbox" class="w-4 h-4 rounded border-neutral-700 bg-neutral-800 text-oxide-600 focus:ring-2 focus:ring-oxide-500/50" />
|
||||
Pushbullet notify
|
||||
</label>
|
||||
</div>
|
||||
<div v-if="form.pre_wipe_config.kick_players_before_wipe">
|
||||
<label class="block text-sm font-medium text-neutral-300 mb-2">Kick Message</label>
|
||||
<input
|
||||
<!-- Pre-wipe config -->
|
||||
<div class="form-section">
|
||||
<div class="form-section__row">
|
||||
<div class="t-eyebrow">Pre-wipe</div>
|
||||
<Checkbox
|
||||
v-model="form.pre_wipe_config.enabled"
|
||||
label="Enabled"
|
||||
/>
|
||||
</div>
|
||||
<div class="check-grid">
|
||||
<Checkbox
|
||||
v-model="form.pre_wipe_config.backup_before_wipe"
|
||||
label="Backup before wipe"
|
||||
/>
|
||||
<Checkbox
|
||||
v-model="form.pre_wipe_config.run_final_save"
|
||||
label="Run final save"
|
||||
/>
|
||||
<Checkbox
|
||||
v-model="form.pre_wipe_config.kick_players_before_wipe"
|
||||
label="Kick players before wipe"
|
||||
/>
|
||||
<Checkbox
|
||||
v-model="form.pre_wipe_config.discord_pre_announce"
|
||||
label="Discord pre-announce"
|
||||
/>
|
||||
<Checkbox
|
||||
v-model="form.pre_wipe_config.pushbullet_notify"
|
||||
label="Pushbullet notify"
|
||||
/>
|
||||
</div>
|
||||
<Input
|
||||
v-if="form.pre_wipe_config.kick_players_before_wipe"
|
||||
v-model="form.pre_wipe_config.kick_message"
|
||||
type="text"
|
||||
label="Kick message"
|
||||
placeholder="Server is wiping, back soon!"
|
||||
class="w-full px-3 py-2 bg-neutral-800 border border-neutral-700 rounded-lg text-sm text-neutral-100 placeholder-neutral-500 focus:outline-none focus:ring-2 focus:ring-oxide-500/50 focus:border-oxide-500 transition-colors"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Post-Wipe Config -->
|
||||
<div class="space-y-4">
|
||||
<div class="flex items-center justify-between">
|
||||
<h3 class="text-xs font-medium text-neutral-400 uppercase tracking-wider">Post-Wipe</h3>
|
||||
<label class="flex items-center gap-2 text-sm text-neutral-300 cursor-pointer">
|
||||
<input v-model="form.post_wipe_config.enabled" type="checkbox" class="w-4 h-4 rounded border-neutral-700 bg-neutral-800 text-oxide-600 focus:ring-2 focus:ring-oxide-500/50" />
|
||||
Enabled
|
||||
</label>
|
||||
</div>
|
||||
<div class="grid grid-cols-2 gap-4">
|
||||
<label class="flex items-center gap-2 text-sm text-neutral-300 cursor-pointer">
|
||||
<input v-model="form.post_wipe_config.verify_server_started" type="checkbox" class="w-4 h-4 rounded border-neutral-700 bg-neutral-800 text-oxide-600 focus:ring-2 focus:ring-oxide-500/50" />
|
||||
Verify server started
|
||||
</label>
|
||||
<label class="flex items-center gap-2 text-sm text-neutral-300 cursor-pointer">
|
||||
<input v-model="form.post_wipe_config.verify_correct_map" type="checkbox" class="w-4 h-4 rounded border-neutral-700 bg-neutral-800 text-oxide-600 focus:ring-2 focus:ring-oxide-500/50" />
|
||||
Verify correct map
|
||||
</label>
|
||||
<label class="flex items-center gap-2 text-sm text-neutral-300 cursor-pointer">
|
||||
<input v-model="form.post_wipe_config.verify_plugins_loaded" type="checkbox" class="w-4 h-4 rounded border-neutral-700 bg-neutral-800 text-oxide-600 focus:ring-2 focus:ring-oxide-500/50" />
|
||||
Verify plugins loaded
|
||||
</label>
|
||||
<label class="flex items-center gap-2 text-sm text-neutral-300 cursor-pointer">
|
||||
<input v-model="form.post_wipe_config.verify_player_slots_open" type="checkbox" class="w-4 h-4 rounded border-neutral-700 bg-neutral-800 text-oxide-600 focus:ring-2 focus:ring-oxide-500/50" />
|
||||
Verify player slots open
|
||||
</label>
|
||||
<label class="flex items-center gap-2 text-sm text-neutral-300 cursor-pointer">
|
||||
<input v-model="form.post_wipe_config.rollback_on_failure" type="checkbox" class="w-4 h-4 rounded border-neutral-700 bg-neutral-800 text-oxide-600 focus:ring-2 focus:ring-oxide-500/50" />
|
||||
Rollback on failure
|
||||
</label>
|
||||
<label class="flex items-center gap-2 text-sm text-neutral-300 cursor-pointer">
|
||||
<input v-model="form.post_wipe_config.discord_post_announce" type="checkbox" class="w-4 h-4 rounded border-neutral-700 bg-neutral-800 text-oxide-600 focus:ring-2 focus:ring-oxide-500/50" />
|
||||
Discord post-announce
|
||||
</label>
|
||||
</div>
|
||||
<div class="grid grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-neutral-300 mb-2">Max Restart Attempts</label>
|
||||
<input
|
||||
v-model.number="form.post_wipe_config.max_restart_attempts"
|
||||
type="number"
|
||||
min="1"
|
||||
max="10"
|
||||
class="w-full px-3 py-2 bg-neutral-800 border border-neutral-700 rounded-lg text-sm text-neutral-100 focus:outline-none focus:ring-2 focus:ring-oxide-500/50 focus:border-oxide-500 transition-colors"
|
||||
<!-- Post-wipe config -->
|
||||
<div class="form-section">
|
||||
<div class="form-section__row">
|
||||
<div class="t-eyebrow">Post-wipe</div>
|
||||
<Checkbox
|
||||
v-model="form.post_wipe_config.enabled"
|
||||
label="Enabled"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-neutral-300 mb-2">Health Check Timeout (seconds)</label>
|
||||
<input
|
||||
v-model.number="form.post_wipe_config.health_check_timeout_seconds"
|
||||
type="number"
|
||||
min="30"
|
||||
max="600"
|
||||
class="w-full px-3 py-2 bg-neutral-800 border border-neutral-700 rounded-lg text-sm text-neutral-100 focus:outline-none focus:ring-2 focus:ring-oxide-500/50 focus:border-oxide-500 transition-colors"
|
||||
<div class="check-grid">
|
||||
<Checkbox
|
||||
v-model="form.post_wipe_config.verify_server_started"
|
||||
label="Verify server started"
|
||||
/>
|
||||
<Checkbox
|
||||
v-model="form.post_wipe_config.verify_correct_map"
|
||||
label="Verify correct map"
|
||||
/>
|
||||
<Checkbox
|
||||
v-model="form.post_wipe_config.verify_plugins_loaded"
|
||||
label="Verify plugins loaded"
|
||||
/>
|
||||
<Checkbox
|
||||
v-model="form.post_wipe_config.verify_player_slots_open"
|
||||
label="Verify player slots open"
|
||||
/>
|
||||
<Checkbox
|
||||
v-model="form.post_wipe_config.rollback_on_failure"
|
||||
label="Rollback on failure"
|
||||
/>
|
||||
<Checkbox
|
||||
v-model="form.post_wipe_config.discord_post_announce"
|
||||
label="Discord post-announce"
|
||||
/>
|
||||
</div>
|
||||
<div class="number-grid">
|
||||
<div class="cc-field">
|
||||
<span class="cc-field__label">Max restart attempts</span>
|
||||
<span class="cc-input cc-input--mono">
|
||||
<input
|
||||
v-model.number="form.post_wipe_config.max_restart_attempts"
|
||||
type="number"
|
||||
min="1"
|
||||
max="10"
|
||||
/>
|
||||
</span>
|
||||
</div>
|
||||
<div class="cc-field">
|
||||
<span class="cc-field__label">Health check timeout (s)</span>
|
||||
<span class="cc-input cc-input--mono">
|
||||
<input
|
||||
v-model.number="form.post_wipe_config.health_check_timeout_seconds"
|
||||
type="number"
|
||||
min="30"
|
||||
max="600"
|
||||
/>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Modal footer -->
|
||||
<div class="sticky bottom-0 bg-neutral-900 border-t border-neutral-800 px-6 py-4 flex items-center justify-end gap-3">
|
||||
<button
|
||||
@click="closeModal"
|
||||
class="px-4 py-2 text-sm font-medium text-neutral-300 bg-neutral-800 hover:bg-neutral-700 rounded-lg transition-colors"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
@click="saveProfile"
|
||||
:disabled="isSaving"
|
||||
class="px-6 py-2 text-sm font-medium text-white bg-oxide-600 hover:bg-oxide-700 disabled:opacity-50 rounded-lg transition-colors"
|
||||
>
|
||||
{{ isSaving ? 'Saving...' : (editingProfile ? 'Save Changes' : 'Create Profile') }}
|
||||
</button>
|
||||
<!-- Modal footer -->
|
||||
<div class="modal__foot">
|
||||
<Button variant="secondary" @click="closeModal">Cancel</Button>
|
||||
<Button
|
||||
:loading="isSaving"
|
||||
@click="saveProfile"
|
||||
>
|
||||
{{ editingProfile ? 'Save changes' : 'Create profile' }}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Teleport>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.profiles {
|
||||
max-width: 900px;
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 18px;
|
||||
}
|
||||
|
||||
/* Page head */
|
||||
.page__head {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.page__title {
|
||||
font-size: var(--text-3xl);
|
||||
font-weight: 700;
|
||||
letter-spacing: -0.02em;
|
||||
color: var(--text-primary);
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
/* Profile list */
|
||||
.profile-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
/* Profile row inside panel */
|
||||
.profile-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.profile-toggle {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 14px 16px;
|
||||
background: transparent;
|
||||
border: 0;
|
||||
cursor: pointer;
|
||||
text-align: left;
|
||||
gap: 12px;
|
||||
transition: var(--transition-colors);
|
||||
}
|
||||
.profile-toggle:hover { background: var(--surface-hover); }
|
||||
.profile-meta { display: flex; flex-direction: column; gap: 2px; }
|
||||
.profile-name {
|
||||
font-size: var(--text-sm);
|
||||
font-weight: 600;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
.profile-desc {
|
||||
font-size: var(--text-xs);
|
||||
color: var(--text-tertiary);
|
||||
}
|
||||
.profile-chev {
|
||||
color: var(--text-tertiary);
|
||||
transition: transform var(--dur-base) var(--ease-standard);
|
||||
display: flex;
|
||||
}
|
||||
.profile-chev--open { transform: rotate(180deg); }
|
||||
.profile-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
padding-right: 12px;
|
||||
}
|
||||
|
||||
/* Expanded detail */
|
||||
.profile-detail {
|
||||
border-top: 1px solid var(--border-subtle);
|
||||
padding: 16px;
|
||||
}
|
||||
.detail-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 24px;
|
||||
}
|
||||
.detail-eyebrow { margin-bottom: 10px; }
|
||||
.detail-rows {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
.detail-kv {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 8px;
|
||||
}
|
||||
.detail-k {
|
||||
font-size: var(--text-xs);
|
||||
color: var(--text-tertiary);
|
||||
}
|
||||
.detail-v-mono {
|
||||
font-family: var(--font-mono);
|
||||
font-size: var(--text-xs);
|
||||
font-variant-numeric: tabular-nums;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
/* Modal */
|
||||
.modal-backdrop {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 50;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: rgba(0, 0, 0, 0.6);
|
||||
backdrop-filter: blur(4px);
|
||||
padding: 16px;
|
||||
}
|
||||
.modal {
|
||||
background: var(--surface-base);
|
||||
border-radius: var(--radius-lg);
|
||||
box-shadow: var(--shadow-xl, 0 24px 60px rgba(0,0,0,.45));
|
||||
width: 100%;
|
||||
max-width: 660px;
|
||||
max-height: 90vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
}
|
||||
.modal__head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 16px 20px;
|
||||
border-bottom: 1px solid var(--border-subtle);
|
||||
flex: none;
|
||||
}
|
||||
.modal__title {
|
||||
font-size: var(--text-lg);
|
||||
font-weight: 700;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
.modal__body {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 20px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 24px;
|
||||
}
|
||||
.modal__foot {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
gap: 8px;
|
||||
padding: 14px 20px;
|
||||
border-top: 1px solid var(--border-subtle);
|
||||
flex: none;
|
||||
}
|
||||
|
||||
/* Form sections */
|
||||
.form-section {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
.form-section__eyebrow { margin-bottom: 4px; }
|
||||
.form-section__row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.check-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 10px;
|
||||
}
|
||||
.number-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
/* Textarea token-based */
|
||||
.cc-textarea {
|
||||
width: 100%;
|
||||
padding: 9px 11px;
|
||||
background: var(--surface-inset);
|
||||
border: 0;
|
||||
border-radius: var(--radius-md);
|
||||
box-shadow: var(--ring-default);
|
||||
color: var(--text-primary);
|
||||
font-family: var(--font-sans);
|
||||
font-size: var(--text-sm);
|
||||
line-height: 1.5;
|
||||
resize: vertical;
|
||||
outline: 0;
|
||||
transition: var(--transition-colors);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.cc-textarea::placeholder { color: var(--text-muted); }
|
||||
.cc-textarea:focus { box-shadow: inset 0 0 0 1px var(--accent), var(--glow-accent-sm); }
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.detail-grid { grid-template-columns: 1fr; }
|
||||
.check-grid { grid-template-columns: 1fr; }
|
||||
.number-grid { grid-template-columns: 1fr; }
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user