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
@@ -1,8 +1,14 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted } from 'vue'
|
||||
import { useApi } from '@/composables/useApi'
|
||||
import { Clock, Plus, Edit, Trash2, Power, Loader2 } from 'lucide-vue-next'
|
||||
import { safeDate } from '@/utils/formatters'
|
||||
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 Select from '@/components/ds/forms/Select.vue'
|
||||
import EmptyState from '@/components/ds/feedback/EmptyState.vue'
|
||||
|
||||
interface ScheduledTask {
|
||||
id: string
|
||||
@@ -12,7 +18,7 @@ interface ScheduledTask {
|
||||
timezone: string
|
||||
is_active: boolean
|
||||
next_run: string | null
|
||||
task_config: Record<string, any>
|
||||
task_config: Record<string, unknown>
|
||||
}
|
||||
|
||||
const api = useApi()
|
||||
@@ -31,6 +37,13 @@ const formData = ref({
|
||||
|
||||
const timezones = ['UTC', 'America/New_York', 'America/Chicago', 'America/Denver', 'America/Los_Angeles', 'Europe/London', 'Europe/Paris', 'Asia/Tokyo']
|
||||
|
||||
const TASK_TYPE_OPTIONS = [
|
||||
{ value: 'restart', label: 'Restart' },
|
||||
{ value: 'announcement', label: 'Announcement' },
|
||||
{ value: 'command', label: 'Command' },
|
||||
{ value: 'plugin_reload', label: 'Plugin reload' },
|
||||
]
|
||||
|
||||
async function fetchTasks() {
|
||||
isLoading.value = true
|
||||
try {
|
||||
@@ -95,167 +108,295 @@ async function toggleActive(task: ScheduledTask) {
|
||||
await fetchTasks()
|
||||
}
|
||||
|
||||
function taskTypeLabel(type: string): string {
|
||||
return type.replace('_', ' ')
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
fetchTasks()
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="p-6 space-y-6">
|
||||
<!-- Header -->
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex items-center gap-3">
|
||||
<Clock class="w-5 h-5 text-oxide-500" />
|
||||
<h1 class="text-2xl font-bold text-neutral-100">Scheduled Tasks</h1>
|
||||
<div class="schedules">
|
||||
<!-- Page head -->
|
||||
<div class="page__head">
|
||||
<div>
|
||||
<div class="t-eyebrow">Operations</div>
|
||||
<h1 class="page__title">Scheduled tasks</h1>
|
||||
</div>
|
||||
<button
|
||||
@click="openCreateModal"
|
||||
class="flex items-center gap-2 px-4 py-2 bg-oxide-500 hover:bg-oxide-600 text-white font-medium rounded-lg transition-colors"
|
||||
>
|
||||
<Plus class="w-4 h-4" />
|
||||
New Task
|
||||
</button>
|
||||
<Button icon="plus" @click="openCreateModal">New task</Button>
|
||||
</div>
|
||||
|
||||
<!-- Tasks Table -->
|
||||
<div class="bg-neutral-900 border border-neutral-800 rounded-lg overflow-hidden">
|
||||
<div v-if="isLoading" class="p-8 flex justify-center">
|
||||
<Loader2 class="w-6 h-6 text-oxide-500 animate-spin" />
|
||||
<!-- Tasks table -->
|
||||
<Panel :flush-body="true" title="Tasks">
|
||||
<div v-if="isLoading" class="loading-row">
|
||||
<span class="cc-btn__spin" style="width:20px;height:20px;border-width:2.5px;" />
|
||||
</div>
|
||||
<div v-else-if="tasks.length === 0" class="p-8 text-center text-neutral-500">
|
||||
No scheduled tasks configured.
|
||||
</div>
|
||||
<table v-else class="w-full">
|
||||
<thead class="bg-neutral-800/50 border-b border-neutral-800">
|
||||
|
||||
<EmptyState
|
||||
v-else-if="tasks.length === 0"
|
||||
icon="calendar-clock"
|
||||
title="No scheduled tasks"
|
||||
description="Create tasks to automate restarts, announcements, and commands."
|
||||
>
|
||||
<template #action>
|
||||
<Button icon="plus" size="sm" @click="openCreateModal">New task</Button>
|
||||
</template>
|
||||
</EmptyState>
|
||||
|
||||
<table v-else class="cc-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="px-4 py-3 text-left text-xs font-medium text-neutral-400 uppercase tracking-wider">Task Name</th>
|
||||
<th class="px-4 py-3 text-left text-xs font-medium text-neutral-400 uppercase tracking-wider">Type</th>
|
||||
<th class="px-4 py-3 text-left text-xs font-medium text-neutral-400 uppercase tracking-wider">Schedule</th>
|
||||
<th class="px-4 py-3 text-left text-xs font-medium text-neutral-400 uppercase tracking-wider">Timezone</th>
|
||||
<th class="px-4 py-3 text-left text-xs font-medium text-neutral-400 uppercase tracking-wider">Next Run</th>
|
||||
<th class="px-4 py-3 text-left text-xs font-medium text-neutral-400 uppercase tracking-wider">Status</th>
|
||||
<th class="px-4 py-3 text-left text-xs font-medium text-neutral-400 uppercase tracking-wider">Actions</th>
|
||||
<th>Task name</th>
|
||||
<th>Type</th>
|
||||
<th>Schedule</th>
|
||||
<th>Timezone</th>
|
||||
<th>Next run</th>
|
||||
<th>Status</th>
|
||||
<th>Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="divide-y divide-neutral-800">
|
||||
<tr v-for="task in tasks" :key="task.id" class="hover:bg-neutral-800/30">
|
||||
<td class="px-4 py-3 text-sm text-neutral-200">{{ task.task_name }}</td>
|
||||
<td class="px-4 py-3 text-sm text-neutral-400 capitalize">{{ task.task_type.replace('_', ' ') }}</td>
|
||||
<td class="px-4 py-3 text-sm font-mono text-neutral-400">{{ task.cron_expression }}</td>
|
||||
<td class="px-4 py-3 text-sm text-neutral-400">{{ task.timezone }}</td>
|
||||
<td class="px-4 py-3 text-sm text-neutral-400">{{ safeDate(task.next_run, '—') }}</td>
|
||||
<td class="px-4 py-3">
|
||||
<span
|
||||
class="text-xs font-medium px-2 py-0.5 rounded-full"
|
||||
:class="task.is_active ? 'bg-green-500/10 text-green-400' : 'bg-neutral-700/50 text-neutral-400'"
|
||||
>
|
||||
<tbody>
|
||||
<tr v-for="task in tasks" :key="task.id">
|
||||
<td class="td-primary">{{ task.task_name }}</td>
|
||||
<td class="td-cap">{{ taskTypeLabel(task.task_type) }}</td>
|
||||
<td class="td-mono">{{ task.cron_expression }}</td>
|
||||
<td>{{ task.timezone }}</td>
|
||||
<td class="td-mono">{{ safeDate(task.next_run, '—') }}</td>
|
||||
<td>
|
||||
<Badge :tone="task.is_active ? 'online' : 'neutral'">
|
||||
{{ task.is_active ? 'Active' : 'Paused' }}
|
||||
</span>
|
||||
</Badge>
|
||||
</td>
|
||||
<td class="px-4 py-3">
|
||||
<div class="flex items-center gap-2">
|
||||
<button
|
||||
<td>
|
||||
<div class="row-actions">
|
||||
<IconButton
|
||||
icon="power"
|
||||
size="sm"
|
||||
:label="task.is_active ? 'Pause' : 'Activate'"
|
||||
@click="toggleActive(task)"
|
||||
class="text-neutral-400 hover:text-oxide-400 transition-colors"
|
||||
:title="task.is_active ? 'Pause' : 'Activate'"
|
||||
>
|
||||
<Power class="w-4 h-4" />
|
||||
</button>
|
||||
<button
|
||||
/>
|
||||
<IconButton
|
||||
icon="pencil"
|
||||
size="sm"
|
||||
label="Edit"
|
||||
@click="openEditModal(task)"
|
||||
class="text-neutral-400 hover:text-oxide-400 transition-colors"
|
||||
>
|
||||
<Edit class="w-4 h-4" />
|
||||
</button>
|
||||
<button
|
||||
/>
|
||||
<IconButton
|
||||
icon="trash-2"
|
||||
variant="danger"
|
||||
size="sm"
|
||||
label="Delete"
|
||||
@click="deleteTask(task.id)"
|
||||
class="text-neutral-400 hover:text-red-400 transition-colors"
|
||||
>
|
||||
<Trash2 class="w-4 h-4" />
|
||||
</button>
|
||||
/>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</Panel>
|
||||
</div>
|
||||
|
||||
<!-- Create/Edit Modal -->
|
||||
<!-- Create / Edit Modal -->
|
||||
<Teleport to="body">
|
||||
<div
|
||||
v-if="showModal"
|
||||
class="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4"
|
||||
class="modal-backdrop"
|
||||
@click.self="showModal = false"
|
||||
>
|
||||
<div class="bg-neutral-900 border border-neutral-800 rounded-lg w-full max-w-lg">
|
||||
<div class="p-5 border-b border-neutral-800">
|
||||
<h2 class="text-lg font-bold text-neutral-100">{{ editingTask ? 'Edit Task' : 'New Task' }}</h2>
|
||||
<div class="modal">
|
||||
<div class="modal__head">
|
||||
<h2 class="modal__title">{{ editingTask ? 'Edit task' : 'New task' }}</h2>
|
||||
<IconButton icon="x" label="Close" @click="showModal = false" />
|
||||
</div>
|
||||
<div class="p-5 space-y-4">
|
||||
<div>
|
||||
<label class="block text-sm text-neutral-400 mb-2">Task Name</label>
|
||||
<input
|
||||
v-model="formData.task_name"
|
||||
type="text"
|
||||
class="w-full px-3 py-2 bg-neutral-800 border border-neutral-700 rounded-lg text-neutral-200 placeholder-neutral-500 focus:outline-none focus:ring-2 focus:ring-oxide-500"
|
||||
placeholder="Daily restart"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm text-neutral-400 mb-2">Task Type</label>
|
||||
<select
|
||||
v-model="formData.task_type"
|
||||
class="w-full px-3 py-2 bg-neutral-800 border border-neutral-700 rounded-lg text-neutral-200 focus:outline-none focus:ring-2 focus:ring-oxide-500"
|
||||
>
|
||||
<option value="restart">Restart</option>
|
||||
<option value="announcement">Announcement</option>
|
||||
<option value="command">Command</option>
|
||||
<option value="plugin_reload">Plugin Reload</option>
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm text-neutral-400 mb-2">Cron Expression</label>
|
||||
<input
|
||||
v-model="formData.cron_expression"
|
||||
type="text"
|
||||
class="w-full px-3 py-2 bg-neutral-800 border border-neutral-700 rounded-lg text-neutral-200 font-mono text-sm focus:outline-none focus:ring-2 focus:ring-oxide-500"
|
||||
placeholder="0 0 * * *"
|
||||
/>
|
||||
<p class="text-xs text-neutral-500 mt-1">Example: "0 0 * * *" = daily at midnight</p>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm text-neutral-400 mb-2">Timezone</label>
|
||||
<select
|
||||
v-model="formData.timezone"
|
||||
class="w-full px-3 py-2 bg-neutral-800 border border-neutral-700 rounded-lg text-neutral-200 focus:outline-none focus:ring-2 focus:ring-oxide-500"
|
||||
>
|
||||
<option v-for="tz in timezones" :key="tz" :value="tz">{{ tz }}</option>
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm text-neutral-400 mb-2">Task Config (JSON)</label>
|
||||
|
||||
<div class="modal__body">
|
||||
<Input
|
||||
v-model="formData.task_name"
|
||||
label="Task name"
|
||||
placeholder="Daily restart"
|
||||
/>
|
||||
|
||||
<Select
|
||||
v-model="formData.task_type"
|
||||
label="Task type"
|
||||
:options="TASK_TYPE_OPTIONS"
|
||||
/>
|
||||
|
||||
<Input
|
||||
v-model="formData.cron_expression"
|
||||
label="Cron expression"
|
||||
placeholder="0 0 * * *"
|
||||
:mono="true"
|
||||
hint="Example: 0 0 * * * = daily at midnight"
|
||||
/>
|
||||
|
||||
<Select
|
||||
v-model="formData.timezone"
|
||||
label="Timezone"
|
||||
:options="timezones"
|
||||
/>
|
||||
|
||||
<div class="cc-field">
|
||||
<span class="cc-field__label">Task config (JSON)</span>
|
||||
<textarea
|
||||
v-model="formData.task_config"
|
||||
rows="4"
|
||||
class="w-full px-3 py-2 bg-neutral-800 border border-neutral-700 rounded-lg text-neutral-200 font-mono text-sm focus:outline-none focus:ring-2 focus:ring-oxide-500"
|
||||
placeholder='{"message": "Server restarting..."}'
|
||||
class="cc-textarea cc-textarea--mono"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-5 border-t border-neutral-800 flex justify-end gap-3">
|
||||
<button
|
||||
@click="showModal = false"
|
||||
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="saveTask"
|
||||
class="px-4 py-2 text-sm font-medium bg-oxide-500 hover:bg-oxide-600 text-white rounded-lg transition-colors"
|
||||
>
|
||||
{{ editingTask ? 'Update' : 'Create' }}
|
||||
</button>
|
||||
|
||||
<div class="modal__foot">
|
||||
<Button variant="secondary" @click="showModal = false">Cancel</Button>
|
||||
<Button @click="saveTask">{{ editingTask ? 'Update' : 'Create' }}</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Teleport>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.schedules {
|
||||
max-width: 1100px;
|
||||
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;
|
||||
}
|
||||
|
||||
/* Loading row */
|
||||
.loading-row {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding: 40px;
|
||||
}
|
||||
|
||||
/* Table */
|
||||
.cc-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
font-size: var(--text-sm);
|
||||
}
|
||||
.cc-table thead tr {
|
||||
border-bottom: 1px solid var(--border-subtle);
|
||||
background: var(--surface-inset);
|
||||
}
|
||||
.cc-table th {
|
||||
padding: 10px 16px;
|
||||
text-align: left;
|
||||
font-size: var(--text-xs);
|
||||
font-weight: 600;
|
||||
color: var(--text-tertiary);
|
||||
white-space: nowrap;
|
||||
}
|
||||
.cc-table tbody tr {
|
||||
border-bottom: 1px solid var(--border-subtle);
|
||||
transition: var(--transition-colors);
|
||||
}
|
||||
.cc-table tbody tr:last-child { border-bottom: 0; }
|
||||
.cc-table tbody tr:hover { background: var(--surface-hover); }
|
||||
.cc-table td {
|
||||
padding: 11px 16px;
|
||||
color: var(--text-secondary);
|
||||
vertical-align: middle;
|
||||
}
|
||||
.td-primary { color: var(--text-primary); font-weight: 500; }
|
||||
.td-mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
|
||||
.td-cap { text-transform: capitalize; }
|
||||
|
||||
.row-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
/* Modal */
|
||||
.modal-backdrop {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 50;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: rgba(0, 0, 0, 0.55);
|
||||
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: 520px;
|
||||
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);
|
||||
}
|
||||
.modal__title {
|
||||
font-size: var(--text-base);
|
||||
font-weight: 700;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
.modal__body {
|
||||
padding: 20px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 14px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
.modal__foot {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
gap: 8px;
|
||||
padding: 14px 20px;
|
||||
border-top: 1px solid var(--border-subtle);
|
||||
}
|
||||
|
||||
/* Textarea */
|
||||
.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); }
|
||||
.cc-textarea--mono { font-family: var(--font-mono); font-size: var(--text-xs); }
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user