vantzs/corrosion-admin-panel
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 18 Wiki Activity

feat(redesign): re-skin plugin-config editors + Loot Builder to DS (Phase D batch 3)
All checks were successful
Test Asgard Runner / test (push) Successful in 2s
Details

Browse Source 
10 plugin-config views (LootBuilder, RaidableBases, Teleport, Kits, Gather, AutoDoors, FurnaceSplitter, BetterChat, TimedExecute, PluginConfigs landing) + 5 child components (loot sidebar/item-editor/group-editor/item-picker, teleport PermissionGroupEditor) re-skinned onto DS components + tokens. All config logic preserved (path-traversal get/set, apply-to-server, import-from-server, CRUD, multiplier logic, per-store status derivation). Presentation-only. Build green.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
Vantz Stockwell
2026-06-11 02:46:16 -04:00
parent b42a2d7ea7
commit 376ed9a98d
15 changed files with 4990 additions and 4006 deletions
Download Patch File Download Diff File Expand all files Collapse all files

168
frontend/src/components/loot/LootContainerSidebar.vue
View File

@@ -1,7 +1,8 @@
<script setup lang="ts"> <script setup lang="ts">
import { ref, computed } from 'vue' import { ref, computed } from 'vue'
import { rustContainers, containerCategories } from '@/data/rust-containers' import { rustContainers, containerCategories } from '@/data/rust-containers'
import { Search, Box, Cylinder, Shield, Users, HelpCircle } from 'lucide-vue-next' import Icon from '@/components/ds/core/Icon.vue'
import DsInput from '@/components/ds/forms/Input.vue'
const props = defineProps<{ const props = defineProps<{
lootTable: Record<string, any> lootTable: Record<string, any>
@@ -14,20 +15,21 @@ const emit = defineEmits<{
const searchQuery = ref('') const searchQuery = ref('')
const categoryIcons: Record<string, any> = { // Map container categories to DS icon names
crates: Box, const categoryIcons: Record<string, string> = {
barrels: Cylinder, crates: 'box',
military: Shield, barrels: 'flask-conical',
npcs: Users, military: 'shield',
other: HelpCircle, npcs: 'users',
other: 'info',
} }
const categoryLabels: Record<string, string> = { const categoryLabels: Record<string, string> = {
crates: 'CRATES', crates: 'Crates',
barrels: 'BARRELS', barrels: 'Barrels',
military: 'MILITARY', military: 'Military',
npcs: 'NPCs', npcs: 'NPCs',
other: 'OTHER', other: 'Other',
} }
const filteredContainers = computed(() => { const filteredContainers = computed(() => {
@@ -56,48 +58,136 @@ function isConfigured(prefab: string): boolean {
</script> </script>
<template> <template>
<div class="w-64 shrink-0 bg-neutral-900 border border-neutral-800 rounded-xl overflow-hidden flex flex-col"> <aside class="lcs-root">
<!-- Search --> <!-- Search -->
<div class="p-3 border-b border-neutral-800"> <div class="lcs-search">
<div class="relative"> <DsInput
<Search class="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-neutral-500" /> v-model="searchQuery"
<input icon="search"
v-model="searchQuery" placeholder="Search containers…"
placeholder="Search containers..." size="sm"
class="w-full bg-neutral-800 border border-neutral-700 rounded-lg pl-9 pr-3 py-2 text-sm text-neutral-200 placeholder-neutral-500" />
/>
</div>
</div> </div>
<!-- Container List --> <!-- Container list -->
<div class="flex-1 overflow-y-auto py-2"> <div class="lcs-list">
<template v-for="(containers, category) in groupedContainers" :key="category"> <template v-for="(containers, category) in groupedContainers" :key="category">
<div class="px-3 pt-3 pb-1"> <!-- Category heading -->
<div class="flex items-center gap-2 text-[10px] font-semibold uppercase tracking-widest text-neutral-500"> <div class="lcs-cat">
<component :is="categoryIcons[category]" class="w-3 h-3" /> <Icon
{{ categoryLabels[category] || category }} :name="categoryIcons[category] ?? 'box'"
</div> :size="12"
class="lcs-cat__icon"
/>
<span class="lcs-cat__label">{{ categoryLabels[category] ?? category }}</span>
</div> </div>
<!-- Container rows -->
<button <button
v-for="c in containers" v-for="c in containers"
:key="c.prefab" :key="c.prefab"
class="lcs-item"
:class="{ 'lcs-item--active': selected === c.prefab }"
@click="emit('select', c.prefab)" @click="emit('select', c.prefab)"
class="w-full text-left px-3 py-1.5 text-sm flex items-center gap-2 transition-colors"
:class="selected === c.prefab
? 'bg-oxide-500/10 text-oxide-400'
: 'text-neutral-400 hover:bg-neutral-800 hover:text-neutral-200'"
> >
<span class="truncate flex-1">{{ c.name }}</span> <span class="lcs-item__name">{{ c.name }}</span>
<span <span v-if="isConfigured(c.prefab)" class="lcs-item__dot" />
v-if="isConfigured(c.prefab)"
class="w-1.5 h-1.5 rounded-full bg-oxide-500 shrink-0"
/>
</button> </button>
</template> </template>
<div v-if="Object.keys(groupedContainers).length === 0" class="px-3 py-6 text-center text-neutral-500 text-sm"> <div v-if="Object.keys(groupedContainers).length === 0" class="lcs-empty">
No containers match No containers match
</div> </div>
</div> </div>
</div> </aside>
</template> </template>
<style scoped>
.lcs-root {
width: 240px;
flex: none;
background: var(--surface-base);
border-radius: var(--radius-lg);
box-shadow: var(--ring-default);
display: flex;
flex-direction: column;
overflow: hidden;
}
.lcs-search {
padding: 10px 10px 8px;
border-bottom: 1px solid var(--border-subtle);
}
.lcs-list {
flex: 1;
overflow-y: auto;
padding: 6px 0;
}
/* Category heading */
.lcs-cat {
display: flex;
align-items: center;
gap: 6px;
padding: 10px 12px 4px;
}
.lcs-cat__icon {
color: var(--text-muted);
flex: none;
}
.lcs-cat__label {
font-size: var(--text-2xs, 10px);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.09em;
color: var(--text-muted);
}
/* Container row */
.lcs-item {
width: 100%;
display: flex;
align-items: center;
gap: 6px;
padding: 5px 12px;
background: transparent;
border: 0;
cursor: pointer;
font-family: var(--font-sans);
font-size: var(--text-sm);
color: var(--text-secondary);
text-align: left;
transition: var(--transition-colors);
border-radius: 0;
}
.lcs-item:hover {
background: var(--surface-hover);
color: var(--text-primary);
}
.lcs-item--active {
background: var(--accent-soft);
color: var(--accent-text);
}
.lcs-item__name {
flex: 1;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.lcs-item__dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--accent);
flex: none;
}
.lcs-empty {
padding: 20px 12px;
text-align: center;
font-size: var(--text-sm);
color: var(--text-muted);
}
</style>

264
frontend/src/components/loot/LootGroupEditor.vue
View File

@@ -1,7 +1,13 @@
<script setup lang="ts"> <script setup lang="ts">
import { ref, computed } from 'vue' import { ref, computed } from 'vue'
import { rustItems } from '@/data/rust-items' import { rustItems } from '@/data/rust-items'
import { Plus, Trash2, ChevronDown, ChevronRight } from 'lucide-vue-next' import Panel from '@/components/ds/data/Panel.vue'
import Button from '@/components/ds/core/Button.vue'
import IconButton from '@/components/ds/core/IconButton.vue'
import Icon from '@/components/ds/core/Icon.vue'
import Badge from '@/components/ds/core/Badge.vue'
import EmptyState from '@/components/ds/feedback/EmptyState.vue'
import DsInput from '@/components/ds/forms/Input.vue'
import type { LootGroupProfile } from '@/types' import type { LootGroupProfile } from '@/types'
const props = defineProps<{ const props = defineProps<{
@@ -65,120 +71,260 @@ function updateGroupItemField(groupName: string, shortname: string, field: strin
</script> </script>
<template> <template>
<div class="space-y-4"> <div class="lge-root">
<!-- Add Group --> <!-- Add group panel -->
<div class="bg-neutral-900 border border-neutral-800 rounded-xl p-4"> <Panel>
<div class="flex gap-2"> <div class="lge-add">
<input <DsInput
v-model="newGroupName" v-model="newGroupName"
placeholder="New group name..." placeholder="New group name…"
class="flex-1 bg-neutral-800 border border-neutral-700 rounded-lg px-3 py-2 text-sm text-neutral-200"
@keydown.enter="addGroup" @keydown.enter="addGroup"
/> />
<button <Button
@click="addGroup" icon="plus"
:disabled="!newGroupName.trim()" :disabled="!newGroupName.trim()"
class="flex items-center gap-1 px-3 py-2 bg-oxide-500 text-white rounded-lg hover:bg-oxide-600 disabled:opacity-50 text-sm" @click="addGroup"
> >
<Plus class="w-4 h-4" /> Add group
Add Group </Button>
</button>
</div> </div>
</div> </Panel>
<!-- Group List --> <!-- Empty state -->
<div v-if="groupEntries.length === 0" class="bg-neutral-900 border border-neutral-800 rounded-xl p-8 text-center text-neutral-500 text-sm"> <Panel v-if="groupEntries.length === 0">
No loot groups defined. Groups let you create reusable item pools that can be assigned to multiple containers. <EmptyState
</div> icon="layers"
title="No loot groups"
description="Groups let you create reusable item pools that can be assigned to multiple containers."
/>
</Panel>
<!-- Group cards -->
<div <div
v-for="entry in groupEntries" v-for="entry in groupEntries"
:key="entry.name" :key="entry.name"
class="bg-neutral-900 border border-neutral-800 rounded-xl overflow-hidden" class="lge-card"
> >
<!-- Group Header --> <!-- Group header -->
<button <button
class="lge-card__head"
@click="toggleGroup(entry.name)" @click="toggleGroup(entry.name)"
class="w-full flex items-center justify-between px-4 py-3 hover:bg-neutral-800/50 transition-colors"
> >
<div class="flex items-center gap-3"> <Icon
<component :name="expandedGroup === entry.name ? 'chevron-down' : 'chevron-right'"
:is="expandedGroup === entry.name ? ChevronDown : ChevronRight" :size="16"
class="w-4 h-4 text-neutral-500" class="lge-card__chevron"
/> />
<span class="text-neutral-200 font-medium">{{ entry.name }}</span> <span class="lge-card__name">{{ entry.name }}</span>
<span class="text-xs text-neutral-500">{{ entry.itemCount }} items</span> <Badge tone="neutral" mono>{{ entry.itemCount }}</Badge>
</div> <IconButton
<button icon="trash-2"
variant="danger"
size="sm"
label="Delete group"
class="lge-card__del"
@click.stop="deleteGroup(entry.name)" @click.stop="deleteGroup(entry.name)"
class="text-neutral-600 hover:text-red-400 transition-colors p-1" />
>
<Trash2 class="w-4 h-4" />
</button>
</button> </button>
<!-- Group Items --> <!-- Expanded items -->
<div v-if="expandedGroup === entry.name" class="border-t border-neutral-800 p-4"> <div v-if="expandedGroup === entry.name" class="lge-card__body">
<table v-if="entry.itemCount > 0" class="w-full text-sm"> <table v-if="entry.itemCount > 0" class="lge-table">
<thead> <thead>
<tr class="border-b border-neutral-800"> <tr>
<th class="text-left py-2 px-2 text-neutral-500 font-medium">Item</th> <th class="lge-th">Item</th>
<th class="text-center py-2 px-2 text-neutral-500 font-medium w-20">Min</th> <th class="lge-th lge-th--num">Min</th>
<th class="text-center py-2 px-2 text-neutral-500 font-medium w-20">Max</th> <th class="lge-th lge-th--num">Max</th>
<th class="text-center py-2 px-2 text-neutral-500 font-medium w-24">Prob %</th> <th class="lge-th lge-th--num">Prob %</th>
<th class="w-10"></th> <th class="lge-th lge-th--action"></th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr <tr
v-for="(itemData, shortname) in entry.data.ItemList" v-for="(itemData, shortname) in entry.data.ItemList"
:key="shortname" :key="shortname"
class="border-b border-neutral-800/50" class="lge-tr"
> >
<td class="py-2 px-2 text-neutral-200">{{ getItemName(shortname as string) }}</td> <td class="lge-td">{{ getItemName(shortname as string) }}</td>
<td class="py-2 px-2"> <td class="lge-td lge-td--num">
<input <input
type="number" type="number"
:value="(itemData as any).Min ?? 1" :value="(itemData as any).Min ?? 1"
@input="updateGroupItemField(entry.name, shortname as string, 'Min', Number(($event.target as HTMLInputElement).value))" @input="updateGroupItemField(entry.name, shortname as string, 'Min', Number(($event.target as HTMLInputElement).value))"
class="w-full bg-neutral-800 border border-neutral-700 rounded px-2 py-1 text-center text-neutral-200" class="cc-num-input cc-num-input--center"
min="0" min="0"
/> />
</td> </td>
<td class="py-2 px-2"> <td class="lge-td lge-td--num">
<input <input
type="number" type="number"
:value="(itemData as any).Max ?? 1" :value="(itemData as any).Max ?? 1"
@input="updateGroupItemField(entry.name, shortname as string, 'Max', Number(($event.target as HTMLInputElement).value))" @input="updateGroupItemField(entry.name, shortname as string, 'Max', Number(($event.target as HTMLInputElement).value))"
class="w-full bg-neutral-800 border border-neutral-700 rounded px-2 py-1 text-center text-neutral-200" class="cc-num-input cc-num-input--center"
min="0" min="0"
/> />
</td> </td>
<td class="py-2 px-2"> <td class="lge-td lge-td--num">
<input <input
type="number" type="number"
:value="(itemData as any).Probability ?? 100" :value="(itemData as any).Probability ?? 100"
@input="updateGroupItemField(entry.name, shortname as string, 'Probability', Number(($event.target as HTMLInputElement).value))" @input="updateGroupItemField(entry.name, shortname as string, 'Probability', Number(($event.target as HTMLInputElement).value))"
class="w-full bg-neutral-800 border border-neutral-700 rounded px-2 py-1 text-center text-neutral-200" class="cc-num-input cc-num-input--center"
min="0" min="0"
max="100" max="100"
/> />
</td> </td>
<td class="py-2 px-2"> <td class="lge-td lge-td--action">
<button <IconButton
icon="trash-2"
variant="danger"
size="sm"
label="Remove item"
@click="removeItemFromGroup(entry.name, shortname as string)" @click="removeItemFromGroup(entry.name, shortname as string)"
class="text-neutral-600 hover:text-red-400" />
>
<Trash2 class="w-4 h-4" />
</button>
</td> </td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
<p v-else class="text-neutral-500 text-sm text-center py-4"> <p v-else class="lge-card__empty">
No items in this group yet. Add items from the container editor. No items in this group yet. Add items from the container editor.
</p> </p>
</div> </div>
</div> </div>
</div> </div>
</template> </template>
<style scoped>
.lge-root {
display: flex;
flex-direction: column;
gap: 10px;
}
/* Add group row */
.lge-add {
display: flex;
gap: 10px;
align-items: flex-end;
}
.lge-add > :first-child {
flex: 1;
}
/* Group card */
.lge-card {
background: var(--surface-base);
border-radius: var(--radius-lg);
box-shadow: var(--ring-default);
overflow: hidden;
}
.lge-card__head {
width: 100%;
display: flex;
align-items: center;
gap: 10px;
padding: 10px 14px;
background: transparent;
border: 0;
cursor: pointer;
font-family: var(--font-sans);
text-align: left;
transition: var(--transition-colors);
}
.lge-card__head:hover {
background: var(--surface-hover);
}
.lge-card__chevron {
color: var(--text-muted);
flex: none;
}
.lge-card__name {
flex: 1;
font-size: var(--text-sm);
font-weight: 600;
color: var(--text-primary);
}
.lge-card__del {
margin-left: auto;
flex: none;
}
/* Expanded body */
.lge-card__body {
border-top: 1px solid var(--border-subtle);
padding: 12px;
}
.lge-card__empty {
font-size: var(--text-sm);
color: var(--text-tertiary);
text-align: center;
padding: 16px 0 8px;
}
/* Table */
.lge-table {
width: 100%;
border-collapse: collapse;
font-size: var(--text-sm);
}
.lge-th {
padding: 6px 10px;
text-align: left;
font-size: var(--text-xs);
font-weight: 600;
color: var(--text-tertiary);
border-bottom: 1px solid var(--border-subtle);
white-space: nowrap;
}
.lge-th--num {
text-align: center;
width: 80px;
}
.lge-th--action {
width: 40px;
}
.lge-tr {
border-bottom: 1px solid var(--border-subtle);
}
.lge-tr:last-child {
border-bottom: 0;
}
.lge-tr:hover {
background: var(--surface-hover);
}
.lge-td {
padding: 7px 10px;
color: var(--text-primary);
vertical-align: middle;
}
.lge-td--num {
text-align: center;
width: 80px;
}
.lge-td--action {
width: 40px;
padding: 4px 6px;
}
/* Shared number input (same as LootItemEditor) */
.cc-num-input {
width: 100%;
background: var(--surface-inset);
border: 0;
border-radius: var(--radius-sm);
box-shadow: var(--ring-default);
padding: 5px 8px;
font-family: var(--font-mono);
font-size: var(--text-sm);
font-variant-numeric: tabular-nums;
color: var(--text-primary);
outline: none;
transition: var(--transition-colors);
}
.cc-num-input:focus {
box-shadow: inset 0 0 0 1px var(--accent), var(--glow-accent-sm);
}
.cc-num-input--center {
text-align: center;
}
</style>

281
frontend/src/components/loot/LootItemEditor.vue
View File

@@ -2,7 +2,12 @@
import { computed } from 'vue' import { computed } from 'vue'
import { rustItems } from '@/data/rust-items' import { rustItems } from '@/data/rust-items'
import { rustContainers } from '@/data/rust-containers' import { rustContainers } from '@/data/rust-containers'
import { Trash2, Plus, Settings2 } from 'lucide-vue-next' import Panel from '@/components/ds/data/Panel.vue'
import Button from '@/components/ds/core/Button.vue'
import IconButton from '@/components/ds/core/IconButton.vue'
import Badge from '@/components/ds/core/Badge.vue'
import Switch from '@/components/ds/forms/Switch.vue'
import EmptyState from '@/components/ds/feedback/EmptyState.vue'
import type { PrefabLoot } from '@/types' import type { PrefabLoot } from '@/types'
const props = defineProps<{ const props = defineProps<{
@@ -76,157 +81,273 @@ const ungroupedItems = computed(() => {
...(data as any), ...(data as any),
})) }))
}) })
// Computed boolean for the Switch v-model
const isEnabled = computed({
get: () => containerData.value?.Enabled ?? true,
set: () => toggleEnabled(),
})
</script> </script>
<template> <template>
<div class="space-y-4"> <div class="lie-root">
<!-- Container Header --> <!-- Container settings panel -->
<div class="bg-neutral-900 border border-neutral-800 rounded-xl p-4"> <Panel :title="containerName">
<div class="flex items-center justify-between mb-4"> <template #actions>
<div class="flex items-center gap-3"> <Badge tone="neutral" mono class="lie-prefab">
<h2 class="text-lg font-semibold text-neutral-100">{{ containerName }}</h2> {{ containerKey.split('/').pop() }}
<label class="flex items-center gap-2 cursor-pointer"> </Badge>
<input <Switch v-model="isEnabled" label="Enabled" size="sm" />
type="checkbox" </template>
:checked="containerData?.Enabled ?? true"
@change="toggleEnabled"
class="rounded bg-neutral-800 border-neutral-600 text-oxide-500 focus:ring-oxide-500"
/>
<span class="text-sm text-neutral-400">Enabled</span>
</label>
</div>
<div class="flex items-center gap-2">
<Settings2 class="w-4 h-4 text-neutral-500" />
<span class="text-xs text-neutral-500 font-mono">{{ containerKey.split('/').pop() }}</span>
</div>
</div>
<!-- Item Settings --> <!-- Item settings grid -->
<div class="grid grid-cols-4 gap-3" v-if="containerData"> <div v-if="containerData" class="lie-settings">
<div> <div class="lie-setting">
<label class="block text-xs text-neutral-500 mb-1">Items Min</label> <label class="lie-setting__label">Items min</label>
<input <input
type="number" type="number"
:value="containerData.ItemSettings?.ItemsMin ?? 1" :value="containerData.ItemSettings?.ItemsMin ?? 1"
@input="updateSettings('ItemsMin', Number(($event.target as HTMLInputElement).value))" @input="updateSettings('ItemsMin', Number(($event.target as HTMLInputElement).value))"
class="w-full bg-neutral-800 border border-neutral-700 rounded px-2 py-1 text-sm text-neutral-200" class="cc-num-input"
min="0" min="0"
/> />
</div> </div>
<div> <div class="lie-setting">
<label class="block text-xs text-neutral-500 mb-1">Items Max</label> <label class="lie-setting__label">Items max</label>
<input <input
type="number" type="number"
:value="containerData.ItemSettings?.ItemsMax ?? 6" :value="containerData.ItemSettings?.ItemsMax ?? 6"
@input="updateSettings('ItemsMax', Number(($event.target as HTMLInputElement).value))" @input="updateSettings('ItemsMax', Number(($event.target as HTMLInputElement).value))"
class="w-full bg-neutral-800 border border-neutral-700 rounded px-2 py-1 text-sm text-neutral-200" class="cc-num-input"
min="0" min="0"
/> />
</div> </div>
<div> <div class="lie-setting">
<label class="block text-xs text-neutral-500 mb-1">Min Scrap</label> <label class="lie-setting__label">Min scrap</label>
<input <input
type="number" type="number"
:value="containerData.ItemSettings?.MinScrap ?? 0" :value="containerData.ItemSettings?.MinScrap ?? 0"
@input="updateSettings('MinScrap', Number(($event.target as HTMLInputElement).value))" @input="updateSettings('MinScrap', Number(($event.target as HTMLInputElement).value))"
class="w-full bg-neutral-800 border border-neutral-700 rounded px-2 py-1 text-sm text-neutral-200" class="cc-num-input"
min="0" min="0"
/> />
</div> </div>
<div> <div class="lie-setting">
<label class="block text-xs text-neutral-500 mb-1">Max Scrap</label> <label class="lie-setting__label">Max scrap</label>
<input <input
type="number" type="number"
:value="containerData.ItemSettings?.MaxScrap ?? 0" :value="containerData.ItemSettings?.MaxScrap ?? 0"
@input="updateSettings('MaxScrap', Number(($event.target as HTMLInputElement).value))" @input="updateSettings('MaxScrap', Number(($event.target as HTMLInputElement).value))"
class="w-full bg-neutral-800 border border-neutral-700 rounded px-2 py-1 text-sm text-neutral-200" class="cc-num-input"
min="0" min="0"
/> />
</div> </div>
</div> </div>
</div> <p v-else class="lie-unconfigured">
Container not yet configured. Add an item to initialise its settings.
</p>
</Panel>
<!-- Ungrouped Items Table --> <!-- Ungrouped items panel -->
<div class="bg-neutral-900 border border-neutral-800 rounded-xl p-4"> <Panel title="Ungrouped items" :flush-body="ungroupedItems.length > 0">
<div class="flex items-center justify-between mb-3"> <template #actions>
<h3 class="text-sm font-semibold text-neutral-300">Ungrouped Items</h3> <Button size="sm" variant="outline" icon="plus" @click="emit('add-item')">
<button Add item
@click="emit('add-item')" </Button>
class="flex items-center gap-1 px-3 py-1.5 bg-oxide-500/10 text-oxide-400 rounded-lg hover:bg-oxide-500/20 text-sm" </template>
>
<Plus class="w-3.5 h-3.5" />
Add Item
</button>
</div>
<div v-if="ungroupedItems.length > 0" class="overflow-x-auto"> <div v-if="ungroupedItems.length > 0" class="lie-table-wrap">
<table class="w-full text-sm"> <table class="lie-table">
<thead> <thead>
<tr class="border-b border-neutral-800"> <tr>
<th class="text-left py-2 px-2 text-neutral-500 font-medium">Item</th> <th class="lie-th">Item</th>
<th class="text-center py-2 px-2 text-neutral-500 font-medium w-20">Min</th> <th class="lie-th lie-th--num">Min</th>
<th class="text-center py-2 px-2 text-neutral-500 font-medium w-20">Max</th> <th class="lie-th lie-th--num">Max</th>
<th class="text-center py-2 px-2 text-neutral-500 font-medium w-24">Prob %</th> <th class="lie-th lie-th--num">Prob %</th>
<th class="w-10"></th> <th class="lie-th lie-th--action"></th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr <tr
v-for="item in ungroupedItems" v-for="item in ungroupedItems"
:key="item.shortname" :key="item.shortname"
class="border-b border-neutral-800/50 hover:bg-neutral-800/30" class="lie-tr"
> >
<td class="py-2 px-2"> <td class="lie-td">
<div> <span class="lie-item-name">{{ item.name }}</span>
<span class="text-neutral-200">{{ item.name }}</span> <span class="lie-item-short">{{ item.shortname }}</span>
<span class="text-neutral-600 text-xs ml-2">{{ item.shortname }}</span>
</div>
</td> </td>
<td class="py-2 px-2"> <td class="lie-td lie-td--num">
<input <input
type="number" type="number"
:value="item.Min" :value="item.Min"
@input="updateItemField(item.shortname, 'Min', Number(($event.target as HTMLInputElement).value))" @input="updateItemField(item.shortname, 'Min', Number(($event.target as HTMLInputElement).value))"
class="w-full bg-neutral-800 border border-neutral-700 rounded px-2 py-1 text-center text-neutral-200" class="cc-num-input cc-num-input--center"
min="0" min="0"
/> />
</td> </td>
<td class="py-2 px-2"> <td class="lie-td lie-td--num">
<input <input
type="number" type="number"
:value="item.Max" :value="item.Max"
@input="updateItemField(item.shortname, 'Max', Number(($event.target as HTMLInputElement).value))" @input="updateItemField(item.shortname, 'Max', Number(($event.target as HTMLInputElement).value))"
class="w-full bg-neutral-800 border border-neutral-700 rounded px-2 py-1 text-center text-neutral-200" class="cc-num-input cc-num-input--center"
min="0" min="0"
/> />
</td> </td>
<td class="py-2 px-2"> <td class="lie-td lie-td--num">
<input <input
type="number" type="number"
:value="item.Probability ?? 100" :value="item.Probability ?? 100"
@input="updateItemField(item.shortname, 'Probability', Number(($event.target as HTMLInputElement).value))" @input="updateItemField(item.shortname, 'Probability', Number(($event.target as HTMLInputElement).value))"
class="w-full bg-neutral-800 border border-neutral-700 rounded px-2 py-1 text-center text-neutral-200" class="cc-num-input cc-num-input--center"
min="0" min="0"
max="100" max="100"
/> />
</td> </td>
<td class="py-2 px-2"> <td class="lie-td lie-td--action">
<button <IconButton
icon="trash-2"
variant="danger"
size="sm"
label="Remove item"
@click="removeItem(item.shortname)" @click="removeItem(item.shortname)"
class="text-neutral-600 hover:text-red-400 transition-colors" />
>
<Trash2 class="w-4 h-4" />
</button>
</td> </td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div> </div>
<div v-else class="text-center py-6 text-neutral-500 text-sm"> <EmptyState
No items configured for this container. v-else
<button @click="emit('add-item')" class="text-oxide-400 hover:underline ml-1">Add one</button> icon="package"
</div> title="No items configured"
</div> description="Add items to configure what this container can spawn."
>
<template #action>
<Button size="sm" variant="outline" icon="plus" @click="emit('add-item')">
Add item
</Button>
</template>
</EmptyState>
</Panel>
</div> </div>
</template> </template>
<style scoped>
.lie-root {
display: flex;
flex-direction: column;
gap: 14px;
}
/* Badge for prefab key */
.lie-prefab {
font-size: 10px !important;
}
.lie-unconfigured {
font-size: var(--text-sm);
color: var(--text-tertiary);
}
/* Settings grid */
.lie-settings {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
}
.lie-setting {
display: flex;
flex-direction: column;
gap: 5px;
}
.lie-setting__label {
font-size: var(--text-xs);
color: var(--text-tertiary);
font-weight: 500;
}
/* Table */
.lie-table-wrap {
overflow-x: auto;
}
.lie-table {
width: 100%;
border-collapse: collapse;
font-size: var(--text-sm);
}
.lie-th {
padding: 8px 12px;
text-align: left;
font-size: var(--text-xs);
font-weight: 600;
color: var(--text-tertiary);
border-bottom: 1px solid var(--border-subtle);
white-space: nowrap;
}
.lie-th--num {
text-align: center;
width: 80px;
}
.lie-th--action {
width: 40px;
}
.lie-tr {
border-bottom: 1px solid var(--border-subtle);
transition: var(--transition-colors);
}
.lie-tr:last-child {
border-bottom: 0;
}
.lie-tr:hover {
background: var(--surface-hover);
}
.lie-td {
padding: 8px 12px;
color: var(--text-primary);
vertical-align: middle;
}
.lie-td--num {
text-align: center;
width: 80px;
}
.lie-td--action {
width: 40px;
padding: 4px 8px;
}
.lie-item-name {
display: block;
color: var(--text-primary);
}
.lie-item-short {
display: block;
font-family: var(--font-mono);
font-size: var(--text-xs);
color: var(--text-muted);
margin-top: 1px;
}
/* Shared number input */
.cc-num-input {
width: 100%;
background: var(--surface-inset);
border: 0;
border-radius: var(--radius-sm);
box-shadow: var(--ring-default);
padding: 5px 8px;
font-family: var(--font-mono);
font-size: var(--text-sm);
font-variant-numeric: tabular-nums;
color: var(--text-primary);
outline: none;
transition: var(--transition-colors);
}
.cc-num-input:focus {
box-shadow: inset 0 0 0 1px var(--accent), var(--glow-accent-sm);
}
.cc-num-input--center {
text-align: center;
}
</style>

244
frontend/src/components/loot/LootItemPicker.vue
View File

@@ -1,7 +1,9 @@
<script setup lang="ts"> <script setup lang="ts">
import { ref, computed } from 'vue' import { ref, computed } from 'vue'
import { rustItems, itemCategories } from '@/data/rust-items' import { rustItems, itemCategories } from '@/data/rust-items'
import { Search, X } from 'lucide-vue-next' import Icon from '@/components/ds/core/Icon.vue'
import IconButton from '@/components/ds/core/IconButton.vue'
import DsInput from '@/components/ds/forms/Input.vue'
const emit = defineEmits<{ const emit = defineEmits<{
select: [shortname: string] select: [shortname: string]
@@ -25,64 +27,200 @@ const filteredItems = computed(() => {
</script> </script>
<template> <template>
<div class="fixed inset-0 bg-black/60 z-50 flex items-center justify-center p-4" @click.self="emit('close')"> <Teleport to="body">
<div class="bg-neutral-900 border border-neutral-800 rounded-xl w-full max-w-2xl max-h-[80vh] flex flex-col"> <div class="lip-overlay" @click.self="emit('close')">
<!-- Header --> <div class="lip-modal">
<div class="p-4 border-b border-neutral-800 flex items-center justify-between"> <!-- Header -->
<h2 class="text-lg font-semibold text-neutral-100">Add Item</h2> <div class="lip-head">
<button @click="emit('close')" class="text-neutral-500 hover:text-neutral-300"> <span class="lip-head__title">Add item</span>
<X class="w-5 h-5" /> <IconButton icon="x" size="sm" label="Close" @click="emit('close')" />
</button> </div>
</div>
<!-- Search + Filter --> <!-- Search + category filter -->
<div class="p-4 space-y-3 border-b border-neutral-800"> <div class="lip-filters">
<div class="relative"> <DsInput
<Search class="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-neutral-500" />
<input
v-model="searchQuery" v-model="searchQuery"
placeholder="Search items..." icon="search"
class="w-full bg-neutral-800 border border-neutral-700 rounded-lg pl-9 pr-3 py-2 text-sm text-neutral-200" placeholder="Search items…"
autofocus size="sm"
/> />
<div class="lip-cats">
<button
class="lip-cat"
:class="{ 'lip-cat--active': selectedCategory === 'all' }"
@click="selectedCategory = 'all'"
>
All
</button>
<button
v-for="cat in itemCategories"
:key="cat"
class="lip-cat"
:class="{ 'lip-cat--active': selectedCategory === cat }"
@click="selectedCategory = cat"
>
{{ cat }}
</button>
</div>
</div> </div>
<div class="flex flex-wrap gap-1">
<button
@click="selectedCategory = 'all'"
class="px-2 py-1 rounded text-xs"
:class="selectedCategory === 'all' ? 'bg-oxide-500 text-white' : 'bg-neutral-800 text-neutral-400 hover:text-neutral-200'"
>
All
</button>
<button
v-for="cat in itemCategories"
:key="cat"
@click="selectedCategory = cat"
class="px-2 py-1 rounded text-xs capitalize"
:class="selectedCategory === cat ? 'bg-oxide-500 text-white' : 'bg-neutral-800 text-neutral-400 hover:text-neutral-200'"
>
{{ cat }}
</button>
</div>
</div>
<!-- Item Grid --> <!-- Item grid -->
<div class="flex-1 overflow-y-auto p-4"> <div class="lip-grid-wrap">
<div class="grid grid-cols-2 sm:grid-cols-3 gap-2"> <div v-if="filteredItems.length > 0" class="lip-grid">
<button <button
v-for="item in filteredItems" v-for="item in filteredItems"
:key="item.shortname" :key="item.shortname"
@click="emit('select', item.shortname)" class="lip-item"
class="text-left px-3 py-2 bg-neutral-800 rounded-lg hover:bg-neutral-700 transition-colors group" @click="emit('select', item.shortname)"
> >
<div class="text-sm text-neutral-200 group-hover:text-oxide-400">{{ item.name }}</div> <span class="lip-item__name">{{ item.name }}</span>
<div class="text-xs text-neutral-500">{{ item.shortname }}</div> <span class="lip-item__short">{{ item.shortname }}</span>
</button> </button>
</div> </div>
<div v-if="filteredItems.length === 0" class="text-center py-8 text-neutral-500"> <div v-else class="lip-empty">
No items found <Icon name="search" :size="20" class="lip-empty__icon" />
<span>No items found</span>
</div>
</div> </div>
</div> </div>
</div> </div>
</div> </Teleport>
</template> </template>
<style scoped>
.lip-overlay {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.6);
z-index: 50;
display: flex;
align-items: center;
justify-content: center;
padding: 16px;
}
.lip-modal {
background: var(--surface-raised);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-xl);
width: 100%;
max-width: 640px;
max-height: 80vh;
display: flex;
flex-direction: column;
overflow: hidden;
}
/* Header */
.lip-head {
display: flex;
align-items: center;
justify-content: space-between;
padding: 14px 16px 12px;
border-bottom: 1px solid var(--border-subtle);
flex: none;
}
.lip-head__title {
font-size: var(--text-sm);
font-weight: 600;
color: var(--text-primary);
}
/* Filters */
.lip-filters {
padding: 12px 16px;
border-bottom: 1px solid var(--border-subtle);
display: flex;
flex-direction: column;
gap: 10px;
flex: none;
}
.lip-cats {
display: flex;
flex-wrap: wrap;
gap: 4px;
}
.lip-cat {
background: var(--surface-inset);
border: 0;
border-radius: var(--radius-sm);
box-shadow: var(--ring-default);
padding: 3px 10px;
font-family: var(--font-sans);
font-size: var(--text-xs);
font-weight: 500;
color: var(--text-secondary);
cursor: pointer;
text-transform: capitalize;
transition: var(--transition-colors);
}
.lip-cat:hover {
background: var(--surface-hover);
color: var(--text-primary);
}
.lip-cat--active {
background: var(--accent);
color: var(--accent-contrast);
box-shadow: none;
}
.lip-cat--active:hover {
background: var(--accent-hover);
}
/* Grid */
.lip-grid-wrap {
flex: 1;
overflow-y: auto;
padding: 12px 16px;
}
.lip-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
gap: 6px;
}
.lip-item {
background: var(--surface-inset);
border: 0;
border-radius: var(--radius-md);
box-shadow: var(--ring-default);
padding: 9px 12px;
text-align: left;
cursor: pointer;
transition: var(--transition-colors);
display: flex;
flex-direction: column;
gap: 2px;
}
.lip-item:hover {
background: var(--accent-soft);
box-shadow: inset 0 0 0 1px var(--accent-border);
}
.lip-item__name {
font-size: var(--text-sm);
color: var(--text-primary);
font-weight: 500;
}
.lip-item:hover .lip-item__name {
color: var(--accent-text);
}
.lip-item__short {
font-family: var(--font-mono);
font-size: var(--text-xs);
color: var(--text-muted);
}
/* Empty */
.lip-empty {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 10px;
padding: 48px 0;
font-size: var(--text-sm);
color: var(--text-tertiary);
}
.lip-empty__icon {
color: var(--text-muted);
}
</style>

160
frontend/src/components/teleport/PermissionGroupEditor.vue
View File

@@ -1,6 +1,8 @@
<script setup lang="ts"> <script setup lang="ts">
import { computed, ref } from 'vue' import { computed, ref } from 'vue'
import { Plus, Trash2 } from 'lucide-vue-next' import Button from '@/components/ds/core/Button.vue'
import Icon from '@/components/ds/core/Icon.vue'
import EmptyState from '@/components/ds/feedback/EmptyState.vue'
const props = defineProps<{ const props = defineProps<{
configData: Record<string, any> configData: Record<string, any>
@@ -47,7 +49,6 @@ function ensurePaths(data: Record<string, any>) {
function addGroup() { function addGroup() {
const name = newGroupName.value.trim() const name = newGroupName.value.trim()
if (!name) return if (!name) return
// Check if already exists
if (groups.value.some(g => g.name === name)) return if (groups.value.some(g => g.name === name)) return
const updated = { ...props.configData } const updated = { ...props.configData }
@@ -95,96 +96,95 @@ function updateField(groupName: string, field: string, value: number) {
</script> </script>
<template> <template>
<div class="space-y-4"> <div class="pge">
<div class="flex items-center justify-between"> <div class="pge__head">
<h3 class="text-sm font-semibold text-neutral-300 uppercase tracking-wider">VIP Permission Groups</h3> <div class="pge__section-label">VIP permission groups</div>
</div> </div>
<!-- Add Group --> <!-- Add group row -->
<div class="flex gap-2"> <div class="pge__add-row">
<input <input
v-model="newGroupName" v-model="newGroupName"
placeholder="New group name (e.g. vip, vip+, mvp)..." type="text"
class="flex-1 bg-neutral-800 border border-neutral-700 rounded-lg px-3 py-2 text-sm text-neutral-200" class="pge__name-input"
placeholder="New group name (e.g. vip, vip+, mvp)…"
@keydown.enter="addGroup" @keydown.enter="addGroup"
/> />
<button <Button
@click="addGroup" size="sm"
icon="plus"
:disabled="!newGroupName.trim()" :disabled="!newGroupName.trim()"
class="flex items-center gap-1 px-3 py-2 bg-oxide-500 text-white rounded-lg hover:bg-oxide-600 disabled:opacity-50 text-sm" @click="addGroup"
> >Add group</Button>
<Plus class="w-4 h-4" />
Add Group
</button>
</div> </div>
<!-- Empty State --> <!-- Empty state -->
<div v-if="groups.length === 0" class="bg-neutral-900 border border-neutral-800 rounded-xl p-8 text-center text-neutral-500 text-sm"> <EmptyState
No VIP groups defined. Add groups to configure per-permission teleport limits, cooldowns, and countdowns. v-if="groups.length === 0"
</div> icon="users"
title="No VIP groups defined"
description="Add groups to configure per-permission teleport limits, cooldowns, and countdowns."
/>
<!-- Groups Table --> <!-- Groups table -->
<div v-else class="bg-neutral-900 border border-neutral-800 rounded-xl overflow-hidden"> <div v-else class="pge__table-wrap">
<table class="w-full text-sm"> <table class="pge__table">
<thead> <thead>
<tr class="border-b border-neutral-800"> <tr>
<th class="text-left py-3 px-4 text-neutral-500 font-medium">Group Name</th> <th class="pge__th pge__th--left">Group name</th>
<th class="text-center py-3 px-4 text-neutral-500 font-medium w-28">Homes Limit</th> <th class="pge__th">Homes limit</th>
<th class="text-center py-3 px-4 text-neutral-500 font-medium w-28">Cooldown (s)</th> <th class="pge__th">Cooldown (s)</th>
<th class="text-center py-3 px-4 text-neutral-500 font-medium w-28">Countdown (s)</th> <th class="pge__th">Countdown (s)</th>
<th class="text-center py-3 px-4 text-neutral-500 font-medium w-28">Daily Limit</th> <th class="pge__th">Daily limit</th>
<th class="w-12"></th> <th class="pge__th pge__th--action" />
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr <tr
v-for="group in groups" v-for="group in groups"
:key="group.name" :key="group.name"
class="border-b border-neutral-800/50" class="pge__tr"
> >
<td class="py-3 px-4 text-neutral-200 font-medium">{{ group.name }}</td> <td class="pge__td pge__td--name">{{ group.name }}</td>
<td class="py-3 px-4"> <td class="pge__td pge__td--num">
<input <input
type="number" type="number"
class="pge__num-input"
:value="group.homesLimit" :value="group.homesLimit"
min="0"
@input="updateField(group.name, 'homesLimit', Number(($event.target as HTMLInputElement).value))" @input="updateField(group.name, 'homesLimit', Number(($event.target as HTMLInputElement).value))"
class="w-full bg-neutral-800 border border-neutral-700 rounded px-2 py-1 text-center text-neutral-200"
min="0"
/> />
</td> </td>
<td class="py-3 px-4"> <td class="pge__td pge__td--num">
<input <input
type="number" type="number"
class="pge__num-input"
:value="group.cooldown" :value="group.cooldown"
min="0"
@input="updateField(group.name, 'cooldown', Number(($event.target as HTMLInputElement).value))" @input="updateField(group.name, 'cooldown', Number(($event.target as HTMLInputElement).value))"
class="w-full bg-neutral-800 border border-neutral-700 rounded px-2 py-1 text-center text-neutral-200"
min="0"
/> />
</td> </td>
<td class="py-3 px-4"> <td class="pge__td pge__td--num">
<input <input
type="number" type="number"
class="pge__num-input"
:value="group.countdown" :value="group.countdown"
@input="updateField(group.name, 'countdown', Number(($event.target as HTMLInputElement).value))"
class="w-full bg-neutral-800 border border-neutral-700 rounded px-2 py-1 text-center text-neutral-200"
min="0" min="0"
@input="updateField(group.name, 'countdown', Number(($event.target as HTMLInputElement).value))"
/> />
</td> </td>
<td class="py-3 px-4"> <td class="pge__td pge__td--num">
<input <input
type="number" type="number"
class="pge__num-input"
:value="group.dailyLimit" :value="group.dailyLimit"
@input="updateField(group.name, 'dailyLimit', Number(($event.target as HTMLInputElement).value))"
class="w-full bg-neutral-800 border border-neutral-700 rounded px-2 py-1 text-center text-neutral-200"
min="0" min="0"
@input="updateField(group.name, 'dailyLimit', Number(($event.target as HTMLInputElement).value))"
/> />
</td> </td>
<td class="py-3 px-4"> <td class="pge__td pge__td--action">
<button <button class="pge__del" type="button" @click="removeGroup(group.name)">
@click="removeGroup(group.name)" <Icon name="trash-2" :size="15" />
class="text-neutral-600 hover:text-red-400 transition-colors p-1"
>
<Trash2 class="w-4 h-4" />
</button> </button>
</td> </td>
</tr> </tr>
@@ -193,3 +193,63 @@ function updateField(groupName: string, field: string, value: number) {
</div> </div>
</div> </div>
</template> </template>
<style scoped>
/* ---------- Shell ---------- */
.pge { display: flex; flex-direction: column; gap: 14px; }
/* ---------- Head ---------- */
.pge__head { display: flex; align-items: center; justify-content: space-between; }
.pge__section-label {
font-size: var(--text-xs); font-weight: 600; color: var(--text-tertiary);
text-transform: uppercase; letter-spacing: var(--tracking-wider);
}
/* ---------- Add row ---------- */
.pge__add-row { display: flex; gap: 8px; align-items: center; }
.pge__name-input {
flex: 1; height: var(--control-h-sm); padding: 0 10px;
background: var(--surface-inset); border: 0; border-radius: var(--radius-sm);
box-shadow: var(--ring-default); font-family: var(--font-sans);
font-size: var(--text-sm); color: var(--text-primary);
}
.pge__name-input:focus { outline: none; box-shadow: inset 0 0 0 1px var(--accent), var(--glow-accent-sm); }
.pge__name-input::placeholder { color: var(--text-muted); }
/* ---------- Table ---------- */
.pge__table-wrap { border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--ring-default); }
.pge__table { width: 100%; border-collapse: collapse; }
.pge__th {
padding: 9px 12px; font-size: var(--text-xs); font-weight: 600;
color: var(--text-tertiary); text-align: center;
background: var(--surface-raised); border-bottom: 1px solid var(--border-subtle);
}
.pge__th--left { text-align: left; }
.pge__th--action { width: 44px; }
.pge__tr { border-bottom: 1px solid var(--border-subtle); }
.pge__tr:last-child { border-bottom: 0; }
.pge__tr:hover { background: var(--surface-hover); }
.pge__td { padding: 8px 12px; font-size: var(--text-sm); color: var(--text-primary); }
.pge__td--name { font-weight: 500; font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.pge__td--num { text-align: center; }
.pge__td--action { text-align: center; }
/* ---------- Number input (table cell) ---------- */
.pge__num-input {
width: 80px; height: 28px; padding: 0 8px; text-align: center;
background: var(--surface-inset); border: 0; border-radius: var(--radius-sm);
box-shadow: var(--ring-default); font-family: var(--font-mono);
font-size: var(--text-sm); color: var(--text-primary);
font-variant-numeric: tabular-nums;
}
.pge__num-input:focus { outline: none; box-shadow: inset 0 0 0 1px var(--accent), var(--glow-accent-sm); }
/* ---------- Delete button ---------- */
.pge__del {
display: inline-flex; align-items: center; justify-content: center;
width: 28px; height: 28px; border-radius: var(--radius-sm); border: none;
background: transparent; color: var(--text-muted); cursor: pointer;
transition: var(--transition-colors);
}
.pge__del:hover { color: var(--danger); background: var(--status-offline-soft); }
</style>

640
frontend/src/views/admin/AutoDoorsView.vue
View File

@@ -1,15 +1,11 @@
<script setup lang="ts"> <script setup lang="ts">
import { ref, onMounted } from 'vue' import { ref, onMounted } from 'vue'
import { useAutoDoorsStore } from '@/stores/autodoors' import { useAutoDoorsStore } from '@/stores/autodoors'
import { import Panel from '@/components/ds/data/Panel.vue'
Save, import Button from '@/components/ds/core/Button.vue'
Play, import Icon from '@/components/ds/core/Icon.vue'
Download, import Switch from '@/components/ds/forms/Switch.vue'
Plus, import EmptyState from '@/components/ds/feedback/EmptyState.vue'
Trash2,
DoorOpen,
Settings as SettingsIcon,
} from 'lucide-vue-next'
const store = useAutoDoorsStore() const store = useAutoDoorsStore()
@@ -21,13 +17,13 @@ const importConfigName = ref('')
// Door types from the AutoDoors plugin // Door types from the AutoDoors plugin
const doorTypes = [ const doorTypes = [
{ key: 'door.hinged.wood', label: 'Wooden Door', displayName: 'Wooden Door' }, { key: 'door.hinged.wood', label: 'Wooden door', displayName: 'Wooden Door' },
{ key: 'door.hinged.metal', label: 'Sheet Metal Door', displayName: 'Sheet Metal Door' }, { key: 'door.hinged.metal', label: 'Sheet metal door', displayName: 'Sheet Metal Door' },
{ key: 'door.hinged.toptier', label: 'Armored Door', displayName: 'Armored Door' }, { key: 'door.hinged.toptier', label: 'Armored door', displayName: 'Armored Door' },
{ key: 'door.double.hinged.wood', label: 'Double Wooden Door', displayName: 'Double Wooden Door' }, { key: 'door.double.hinged.wood', label: 'Double wooden door', displayName: 'Double Wooden Door' },
{ key: 'door.double.hinged.metal', label: 'Double Sheet Metal Door', displayName: 'Double Sheet Metal Door' }, { key: 'door.double.hinged.metal', label: 'Double sheet metal door', displayName: 'Double Sheet Metal Door' },
{ key: 'door.double.hinged.toptier', label: 'Double Armored Door', displayName: 'Double Armored Door' }, { key: 'door.double.hinged.toptier', label: 'Double armored door', displayName: 'Double Armored Door' },
{ key: 'floor.ladder.hatch', label: 'Ladder Hatch', displayName: 'Ladder Hatch' }, { key: 'floor.ladder.hatch', label: 'Ladder hatch', displayName: 'Ladder Hatch' },
] ]
onMounted(async () => { onMounted(async () => {
@@ -154,442 +150,472 @@ async function handleImport() {
importConfigName.value = '' importConfigName.value = ''
} }
} }
// Helper: coerce getConfigValue result to boolean for Switch
function getBool(path: string, def: boolean): boolean {
return !!getConfigValue(path, def)
}
</script> </script>
<template> <template>
<div class="p-6 space-y-6"> <div class="adv">
<!-- Header --> <!-- Page head -->
<div class="flex items-center justify-between"> <div class="adv__head">
<h1 class="text-2xl font-bold text-white">Auto Doors</h1> <div class="adv__head-id">
<div class="flex items-center gap-3"> <div class="adv__head-chip">
<button <Icon name="door-open" :size="20" :stroke-width="2" />
@click="showCreateModal = true" </div>
class="flex items-center gap-2 px-3 py-2 bg-neutral-800 text-neutral-300 rounded-lg hover:bg-neutral-700 text-sm" <div>
> <div class="t-eyebrow">Plugin config</div>
<Plus class="w-4 h-4" /> <h1 class="adv__title">Auto doors</h1>
New Config </div>
</button>
</div> </div>
<Button size="sm" icon="plus" @click="showCreateModal = true">New config</Button>
</div> </div>
<!-- Config Selector + Action Bar --> <!-- Config action bar -->
<div class="bg-neutral-900 border border-neutral-800 rounded-xl p-4"> <Panel>
<div class="flex items-center gap-3 flex-wrap"> <div class="adv__bar">
<!-- Config Selector -->
<select <select
v-if="store.configs.length > 0" v-if="store.configs.length > 0"
:value="store.currentConfig?.id || ''" :value="store.currentConfig?.id ?? ''"
class="adv__config-select"
@change="handleConfigChange(($event.target as HTMLSelectElement).value)" @change="handleConfigChange(($event.target as HTMLSelectElement).value)"
class="bg-neutral-800 border border-neutral-700 text-neutral-200 rounded-lg px-3 py-2 text-sm min-w-[200px]"
> >
<option v-for="c in store.configs" :key="c.id" :value="c.id"> <option v-for="c in store.configs" :key="c.id" :value="c.id">
{{ c.config_name }} {{ c.config_name }}{{ c.is_active ? ' (Active)' : '' }}
<template v-if="c.is_active"> (Active)</template>
</option> </option>
</select> </select>
<span v-else class="text-neutral-500 text-sm">No configs yet</span> <span v-else class="adv__no-configs">No configs yet</span>
<!-- Save --> <Button
<button icon="save"
@click="store.saveCurrentConfig()" size="sm"
:disabled="!store.currentConfig || !store.isDirty || store.isSaving" :disabled="!store.currentConfig || !store.isDirty || store.isSaving"
class="flex items-center gap-2 px-3 py-2 bg-oxide-500 text-white rounded-lg hover:bg-oxide-600 disabled:opacity-50 disabled:cursor-not-allowed text-sm" :loading="store.isSaving"
> @click="store.saveCurrentConfig()"
<Save class="w-4 h-4" /> >{{ store.isSaving ? 'Saving…' : 'Save' }}</Button>
{{ store.isSaving ? 'Saving...' : 'Save' }}
</button>
<!-- Apply to Server --> <Button
<button variant="outline"
@click="handleApply" icon="play"
size="sm"
:disabled="!store.currentConfig || store.isApplying" :disabled="!store.currentConfig || store.isApplying"
class="flex items-center gap-2 px-3 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 disabled:opacity-50 disabled:cursor-not-allowed text-sm" :loading="store.isApplying"
> @click="handleApply"
<Play class="w-4 h-4" /> >{{ store.isApplying ? 'Applying…' : 'Apply to server' }}</Button>
{{ store.isApplying ? 'Applying...' : 'Apply to Server' }}
</button>
<!-- Import from Server --> <Button
<button variant="secondary"
icon="download"
size="sm"
@click="showImportModal = true" @click="showImportModal = true"
class="flex items-center gap-2 px-3 py-2 bg-neutral-800 text-neutral-300 rounded-lg hover:bg-neutral-700 text-sm" >Import from server</Button>
>
<Download class="w-4 h-4" />
Import from Server
</button>
<!-- Delete --> <Button
<button variant="danger-soft"
@click="handleDeleteConfig" icon="trash-2"
size="sm"
:disabled="!store.currentConfig" :disabled="!store.currentConfig"
class="flex items-center gap-2 px-3 py-2 bg-red-500/10 text-red-400 rounded-lg hover:bg-red-500/20 disabled:opacity-50 text-sm ml-auto" class="adv__bar-delete"
> @click="handleDeleteConfig"
<Trash2 class="w-4 h-4" /> >Delete</Button>
Delete
</button>
</div> </div>
</Panel>
<!-- Loading -->
<div v-if="store.isLoading" class="adv__loading">
<span class="adv__spinner" />
</div> </div>
<!-- Loading State --> <!-- Empty state -->
<div v-if="store.isLoading" class="flex items-center justify-center py-20"> <Panel v-else-if="!store.currentConfig">
<div class="animate-spin w-8 h-8 border-2 border-oxide-500 border-t-transparent rounded-full" /> <EmptyState
</div> icon="door-open"
title="No AutoDoors config selected"
<!-- No Config Selected --> description="Create a new config, import from server, or select one from the dropdown above."
<div v-else-if="!store.currentConfig" class="bg-neutral-900 border border-neutral-800 rounded-xl p-12 text-center">
<DoorOpen class="w-12 h-12 text-neutral-600 mx-auto mb-4" />
<h2 class="text-lg font-semibold text-neutral-300 mb-2">No AutoDoors Config Selected</h2>
<p class="text-neutral-500 mb-4">Create a new config, import from server, or select one from the dropdown above.</p>
<button
@click="showCreateModal = true"
class="px-4 py-2 bg-oxide-500 text-white rounded-lg hover:bg-oxide-600"
> >
Create First Config <template #action>
</button> <Button icon="plus" @click="showCreateModal = true">Create first config</Button>
</div> </template>
</EmptyState>
</Panel>
<!-- Config Editor --> <!-- Config editor -->
<div v-else class="space-y-6"> <template v-else>
<!-- Settings Section --> <!-- Global settings -->
<div class="bg-neutral-900 border border-neutral-800 rounded-xl p-6 space-y-6"> <Panel title="Global settings">
<div class="flex items-center gap-2"> <!-- Delay sliders -->
<SettingsIcon class="w-4 h-4 text-neutral-400" /> <div class="adv__delay-grid">
<h3 class="text-sm font-semibold text-neutral-300 uppercase tracking-wider">Global Settings</h3> <div class="adv__field">
</div> <div class="adv__field-label">Default delay (seconds)</div>
<div class="adv__field-hint">Time before door auto-closes</div>
<!-- Delay Settings --> <div class="adv__slider-row">
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
<div>
<label class="block text-sm text-neutral-200 mb-1">Default Delay (seconds)</label>
<p class="text-xs text-neutral-500 mb-2">Time before door auto-closes</p>
<div class="flex items-center gap-3">
<input <input
type="range" type="range"
:value="getConfigValue('DefaultDelay', 5)" :value="getConfigValue('DefaultDelay', 5)"
@input="setConfigValue('DefaultDelay', Number(($event.target as HTMLInputElement).value))"
min="1" min="1"
max="30" max="30"
step="1" step="1"
class="flex-1 accent-oxide-500" class="adv__slider"
style="accent-color: var(--accent)"
@input="setConfigValue('DefaultDelay', Number(($event.target as HTMLInputElement).value))"
/> />
<input <input
type="number" type="number"
:value="getConfigValue('DefaultDelay', 5)" :value="getConfigValue('DefaultDelay', 5)"
min="1"
max="30"
class="cc-num-input adv__delay-num"
@input="setConfigValue('DefaultDelay', Number(($event.target as HTMLInputElement).value))" @input="setConfigValue('DefaultDelay', Number(($event.target as HTMLInputElement).value))"
min="1"
max="30"
class="w-16 bg-neutral-800 border border-neutral-700 rounded-lg px-2 py-1 text-neutral-200 text-sm text-center"
/> />
<span class="text-xs text-neutral-500">sec</span> <span class="adv__unit">sec</span>
</div> </div>
</div> </div>
<div> <div class="adv__field">
<label class="block text-sm text-neutral-200 mb-1">Minimum Delay (seconds)</label> <div class="adv__field-label">Minimum delay (seconds)</div>
<p class="text-xs text-neutral-500 mb-2">Lowest delay a player can set</p> <div class="adv__field-hint">Lowest delay a player can set</div>
<div class="flex items-center gap-3"> <div class="adv__slider-row">
<input <input
type="range" type="range"
:value="getConfigValue('MinimumDelay', 5)" :value="getConfigValue('MinimumDelay', 5)"
@input="setConfigValue('MinimumDelay', Number(($event.target as HTMLInputElement).value))"
min="1" min="1"
max="30" max="30"
step="1" step="1"
class="flex-1 accent-oxide-500" class="adv__slider"
style="accent-color: var(--accent)"
@input="setConfigValue('MinimumDelay', Number(($event.target as HTMLInputElement).value))"
/> />
<input <input
type="number" type="number"
:value="getConfigValue('MinimumDelay', 5)" :value="getConfigValue('MinimumDelay', 5)"
@input="setConfigValue('MinimumDelay', Number(($event.target as HTMLInputElement).value))"
min="1" min="1"
max="30" max="30"
class="w-16 bg-neutral-800 border border-neutral-700 rounded-lg px-2 py-1 text-neutral-200 text-sm text-center" class="cc-num-input adv__delay-num"
@input="setConfigValue('MinimumDelay', Number(($event.target as HTMLInputElement).value))"
/> />
<span class="text-xs text-neutral-500">sec</span> <span class="adv__unit">sec</span>
</div> </div>
</div> </div>
<div> <div class="adv__field">
<label class="block text-sm text-neutral-200 mb-1">Maximum Delay (seconds)</label> <div class="adv__field-label">Maximum delay (seconds)</div>
<p class="text-xs text-neutral-500 mb-2">Highest delay a player can set</p> <div class="adv__field-hint">Highest delay a player can set</div>
<div class="flex items-center gap-3"> <div class="adv__slider-row">
<input <input
type="range" type="range"
:value="getConfigValue('MaximumDelay', 30)" :value="getConfigValue('MaximumDelay', 30)"
@input="setConfigValue('MaximumDelay', Number(($event.target as HTMLInputElement).value))"
min="1" min="1"
max="60" max="60"
step="1" step="1"
class="flex-1 accent-oxide-500" class="adv__slider"
style="accent-color: var(--accent)"
@input="setConfigValue('MaximumDelay', Number(($event.target as HTMLInputElement).value))"
/> />
<input <input
type="number" type="number"
:value="getConfigValue('MaximumDelay', 30)" :value="getConfigValue('MaximumDelay', 30)"
@input="setConfigValue('MaximumDelay', Number(($event.target as HTMLInputElement).value))"
min="1" min="1"
max="60" max="60"
class="w-16 bg-neutral-800 border border-neutral-700 rounded-lg px-2 py-1 text-neutral-200 text-sm text-center" class="cc-num-input adv__delay-num"
@input="setConfigValue('MaximumDelay', Number(($event.target as HTMLInputElement).value))"
/> />
<span class="text-xs text-neutral-500">sec</span> <span class="adv__unit">sec</span>
</div> </div>
</div> </div>
</div> </div>
<!-- Global Toggles --> <!-- Global toggles -->
<div class="grid grid-cols-1 md:grid-cols-2 gap-6"> <div class="adv__toggles adv__mt">
<div class="flex items-center justify-between"> <div class="adv__toggle-row">
<div> <div>
<label class="text-sm text-neutral-200">Default Enabled</label> <div class="adv__toggle-label">Default enabled</div>
<p class="text-xs text-neutral-500">Auto-close enabled for new players by default</p> <div class="adv__toggle-sub">Auto-close enabled for new players by default</div>
</div> </div>
<button <Switch
@click="setConfigValue('GlobalSettings.defaultEnabled', !getConfigValue('GlobalSettings.defaultEnabled', true))" :model-value="getBool('GlobalSettings.defaultEnabled', true)"
class="relative w-11 h-6 rounded-full transition-colors" @update:model-value="v => setConfigValue('GlobalSettings.defaultEnabled', v)"
:class="getConfigValue('GlobalSettings.defaultEnabled', true) ? 'bg-oxide-500' : 'bg-neutral-700'" />
>
<span
class="absolute top-0.5 left-0.5 w-5 h-5 bg-white rounded-full transition-transform"
:class="getConfigValue('GlobalSettings.defaultEnabled', true) ? 'translate-x-5' : 'translate-x-0'"
/>
</button>
</div> </div>
<div class="adv__toggle-row">
<div class="flex items-center justify-between">
<div> <div>
<label class="text-sm text-neutral-200">Allow Unowned Doors</label> <div class="adv__toggle-label">Allow unowned doors</div>
<p class="text-xs text-neutral-500">Auto-close doors that the player does not own</p> <div class="adv__toggle-sub">Auto-close doors that the player does not own</div>
</div> </div>
<button <Switch
@click="setConfigValue('GlobalSettings.useUnownedDoor', !getConfigValue('GlobalSettings.useUnownedDoor', false))" :model-value="getBool('GlobalSettings.useUnownedDoor', false)"
class="relative w-11 h-6 rounded-full transition-colors" @update:model-value="v => setConfigValue('GlobalSettings.useUnownedDoor', v)"
:class="getConfigValue('GlobalSettings.useUnownedDoor', false) ? 'bg-oxide-500' : 'bg-neutral-700'" />
>
<span
class="absolute top-0.5 left-0.5 w-5 h-5 bg-white rounded-full transition-transform"
:class="getConfigValue('GlobalSettings.useUnownedDoor', false) ? 'translate-x-5' : 'translate-x-0'"
/>
</button>
</div> </div>
<div class="adv__toggle-row">
<div class="flex items-center justify-between">
<div> <div>
<label class="text-sm text-neutral-200">Exclude Door Controller</label> <div class="adv__toggle-label">Exclude door controller</div>
<p class="text-xs text-neutral-500">Skip doors that have a Code Lock or Key Lock</p> <div class="adv__toggle-sub">Skip doors that have a code lock or key lock</div>
</div> </div>
<button <Switch
@click="setConfigValue('GlobalSettings.excludeDoorController', !getConfigValue('GlobalSettings.excludeDoorController', false))" :model-value="getBool('GlobalSettings.excludeDoorController', false)"
class="relative w-11 h-6 rounded-full transition-colors" @update:model-value="v => setConfigValue('GlobalSettings.excludeDoorController', v)"
:class="getConfigValue('GlobalSettings.excludeDoorController', false) ? 'bg-oxide-500' : 'bg-neutral-700'" />
>
<span
class="absolute top-0.5 left-0.5 w-5 h-5 bg-white rounded-full transition-transform"
:class="getConfigValue('GlobalSettings.excludeDoorController', false) ? 'translate-x-5' : 'translate-x-0'"
/>
</button>
</div> </div>
<div class="adv__toggle-row">
<div class="flex items-center justify-between">
<div> <div>
<label class="text-sm text-neutral-200">Cancel on Player Death</label> <div class="adv__toggle-label">Cancel on player death</div>
<p class="text-xs text-neutral-500">Cancel auto-close if the player dies</p> <div class="adv__toggle-sub">Cancel auto-close if the player dies</div>
</div> </div>
<button <Switch
@click="setConfigValue('GlobalSettings.cancelOnKill', !getConfigValue('GlobalSettings.cancelOnKill', false))" :model-value="getBool('GlobalSettings.cancelOnKill', false)"
class="relative w-11 h-6 rounded-full transition-colors" @update:model-value="v => setConfigValue('GlobalSettings.cancelOnKill', v)"
:class="getConfigValue('GlobalSettings.cancelOnKill', false) ? 'bg-oxide-500' : 'bg-neutral-700'" />
>
<span
class="absolute top-0.5 left-0.5 w-5 h-5 bg-white rounded-full transition-transform"
:class="getConfigValue('GlobalSettings.cancelOnKill', false) ? 'translate-x-5' : 'translate-x-0'"
/>
</button>
</div> </div>
<div class="adv__toggle-row">
<div class="flex items-center justify-between">
<div> <div>
<label class="text-sm text-neutral-200">Use Permissions</label> <div class="adv__toggle-label">Use permissions</div>
<p class="text-xs text-neutral-500">Require Oxide permission to use auto-close</p> <div class="adv__toggle-sub">Require Oxide permission to use auto-close</div>
</div> </div>
<button <Switch
@click="setConfigValue('UsePermissions', !getConfigValue('UsePermissions', false))" :model-value="getBool('UsePermissions', false)"
class="relative w-11 h-6 rounded-full transition-colors" @update:model-value="v => setConfigValue('UsePermissions', v)"
:class="getConfigValue('UsePermissions', false) ? 'bg-oxide-500' : 'bg-neutral-700'" />
>
<span
class="absolute top-0.5 left-0.5 w-5 h-5 bg-white rounded-full transition-transform"
:class="getConfigValue('UsePermissions', false) ? 'translate-x-5' : 'translate-x-0'"
/>
</button>
</div> </div>
<div class="adv__toggle-row">
<div class="flex items-center justify-between">
<div> <div>
<label class="text-sm text-neutral-200">Clear Data on Map Wipe</label> <div class="adv__toggle-label">Clear data on map wipe</div>
<p class="text-xs text-neutral-500">Reset all player preferences on map wipe</p> <div class="adv__toggle-sub">Reset all player preferences on map wipe</div>
</div> </div>
<button <Switch
@click="setConfigValue('ClearDataOnWipe', !getConfigValue('ClearDataOnWipe', false))" :model-value="getBool('ClearDataOnWipe', false)"
class="relative w-11 h-6 rounded-full transition-colors" @update:model-value="v => setConfigValue('ClearDataOnWipe', v)"
:class="getConfigValue('ClearDataOnWipe', false) ? 'bg-oxide-500' : 'bg-neutral-700'" />
>
<span
class="absolute top-0.5 left-0.5 w-5 h-5 bg-white rounded-full transition-transform"
:class="getConfigValue('ClearDataOnWipe', false) ? 'translate-x-5' : 'translate-x-0'"
/>
</button>
</div> </div>
</div> </div>
</div> </Panel>
<!-- Door Types Section --> <!-- Door types -->
<div class="bg-neutral-900 border border-neutral-800 rounded-xl p-6 space-y-4"> <Panel title="Door types" subtitle="Enable or disable auto-close for each door type.">
<div class="flex items-center gap-2"> <div class="adv__toggles">
<DoorOpen class="w-4 h-4 text-neutral-400" />
<h3 class="text-sm font-semibold text-neutral-300 uppercase tracking-wider">Door Types</h3>
</div>
<p class="text-xs text-neutral-500">Enable or disable auto-close for each door type.</p>
<div class="space-y-3">
<div <div
v-for="door in doorTypes" v-for="door in doorTypes"
:key="door.key" :key="door.key"
class="flex items-center justify-between py-2 border-b border-neutral-800 last:border-0" class="adv__toggle-row"
> >
<div> <div>
<label class="text-sm text-neutral-200">{{ door.label }}</label> <div class="adv__toggle-label">{{ door.label }}</div>
<p class="text-xs text-neutral-500 font-mono">{{ door.key }}</p> <div class="adv__toggle-sub adv__mono">{{ door.key }}</div>
</div> </div>
<button <Switch
@click="setConfigValue(`DoorSettings.${door.key}.enabled`, !getConfigValue(`DoorSettings.${door.key}.enabled`, true))" :model-value="getBool(`DoorSettings.${door.key}.enabled`, true)"
class="relative w-11 h-6 rounded-full transition-colors" @update:model-value="v => setConfigValue(`DoorSettings.${door.key}.enabled`, v)"
:class="getConfigValue(`DoorSettings.${door.key}.enabled`, true) ? 'bg-oxide-500' : 'bg-neutral-700'" />
>
<span
class="absolute top-0.5 left-0.5 w-5 h-5 bg-white rounded-full transition-transform"
:class="getConfigValue(`DoorSettings.${door.key}.enabled`, true) ? 'translate-x-5' : 'translate-x-0'"
/>
</button>
</div> </div>
</div> </div>
</div> </Panel>
<!-- Permission Groups Section --> <!-- Permission group overrides -->
<div class="bg-neutral-900 border border-neutral-800 rounded-xl p-6 space-y-4"> <Panel title="Permission group overrides" subtitle="Override the default delay for specific Oxide permission groups.">
<div class="flex items-center justify-between"> <template #actions>
<div class="flex items-center gap-2"> <Button size="sm" icon="plus" variant="secondary" @click="addPermissionGroup">Add group</Button>
<SettingsIcon class="w-4 h-4 text-neutral-400" /> </template>
<h3 class="text-sm font-semibold text-neutral-300 uppercase tracking-wider">Permission Group Overrides</h3>
</div>
<button
@click="addPermissionGroup"
class="flex items-center gap-1 px-3 py-1 bg-neutral-800 text-neutral-300 rounded-lg hover:bg-neutral-700 text-sm"
>
<Plus class="w-3 h-3" />
Add Group
</button>
</div>
<p class="text-xs text-neutral-500">Override the default delay for specific Oxide permission groups.</p>
<div v-if="getPermissionGroups().length === 0" class="text-sm text-neutral-500 text-center py-4"> <div v-if="getPermissionGroups().length === 0" class="adv__perm-empty">
No permission group overrides configured. No permission group overrides configured.
</div> </div>
<div v-else class="space-y-3"> <div v-else class="adv__perm-list">
<div <div
v-for="(group, index) in getPermissionGroups()" v-for="(group, index) in getPermissionGroups()"
:key="index" :key="index"
class="flex items-center gap-3" class="adv__perm-row"
> >
<input <input
:value="group.name" :value="group.name"
@input="updatePermissionGroupName(group.name, ($event.target as HTMLInputElement).value)" type="text"
class="cc-text-input adv__perm-name"
placeholder="Group name (e.g. vip)" placeholder="Group name (e.g. vip)"
class="flex-1 bg-neutral-800 border border-neutral-700 rounded-lg px-3 py-2 text-neutral-200 text-sm" @input="updatePermissionGroupName(group.name, ($event.target as HTMLInputElement).value)"
/> />
<input <input
type="number" type="number"
:value="group.delay" :value="group.delay"
@input="updatePermissionGroupDelay(group.name, Number(($event.target as HTMLInputElement).value))"
min="1" min="1"
max="60" max="60"
class="w-20 bg-neutral-800 border border-neutral-700 rounded-lg px-2 py-2 text-neutral-200 text-sm text-center" class="cc-num-input adv__perm-delay"
@input="updatePermissionGroupDelay(group.name, Number(($event.target as HTMLInputElement).value))"
/> />
<span class="text-xs text-neutral-500">sec</span> <span class="adv__unit">sec</span>
<button <button class="adv__del-btn" title="Remove group" @click="removePermissionGroup(group.name)">
@click="removePermissionGroup(group.name)" <Icon name="trash-2" :size="15" />
class="p-2 text-red-400 hover:text-red-300 hover:bg-red-500/10 rounded-lg transition-colors"
>
<Trash2 class="w-4 h-4" />
</button> </button>
</div> </div>
</div> </div>
</div> </Panel>
</div> </template>
<!-- Create Config Modal --> <!-- Create config modal -->
<div v-if="showCreateModal" class="fixed inset-0 bg-black/60 z-50 flex items-center justify-center p-4" @click.self="showCreateModal = false"> <div v-if="showCreateModal" class="adv__modal-backdrop" @click.self="showCreateModal = false">
<div class="bg-neutral-900 border border-neutral-800 rounded-xl p-6 w-full max-w-md"> <div class="adv__modal">
<h2 class="text-lg font-semibold text-neutral-100 mb-4">New AutoDoors Config</h2> <h2 class="adv__modal-title">New AutoDoors config</h2>
<div class="space-y-4"> <div class="adv__modal-body">
<div> <div class="adv__field">
<label class="block text-sm text-neutral-400 mb-1">Config Name</label> <label class="adv__field-label">Config name</label>
<input <input
v-model="newConfigName" v-model="newConfigName"
placeholder="e.g. 5 Second Close" type="text"
class="w-full bg-neutral-800 border border-neutral-700 rounded-lg px-3 py-2 text-neutral-200 text-sm" class="cc-text-input"
placeholder="e.g. 5 second close"
@keydown.enter="handleCreateConfig" @keydown.enter="handleCreateConfig"
/> />
</div> </div>
<div> <div class="adv__field">
<label class="block text-sm text-neutral-400 mb-1">Description (optional)</label> <label class="adv__field-label">Description (optional)</label>
<textarea <textarea
v-model="newConfigDesc" v-model="newConfigDesc"
rows="2" rows="2"
class="cc-textarea"
placeholder="What is this config for?" placeholder="What is this config for?"
class="w-full bg-neutral-800 border border-neutral-700 rounded-lg px-3 py-2 text-neutral-200 text-sm resize-none"
/> />
</div> </div>
<div class="flex justify-end gap-2"> </div>
<button @click="showCreateModal = false" class="px-4 py-2 text-sm text-neutral-400 hover:text-neutral-200">Cancel</button> <div class="adv__modal-footer">
<button <Button variant="ghost" @click="showCreateModal = false">Cancel</Button>
@click="handleCreateConfig" <Button :disabled="!newConfigName.trim()" @click="handleCreateConfig">Create</Button>
:disabled="!newConfigName.trim()"
class="px-4 py-2 bg-oxide-500 text-white rounded-lg hover:bg-oxide-600 disabled:opacity-50 text-sm"
>
Create
</button>
</div>
</div> </div>
</div> </div>
</div> </div>
<!-- Import from Server Modal --> <!-- Import from server modal -->
<div v-if="showImportModal" class="fixed inset-0 bg-black/60 z-50 flex items-center justify-center p-4" @click.self="showImportModal = false"> <div v-if="showImportModal" class="adv__modal-backdrop" @click.self="showImportModal = false">
<div class="bg-neutral-900 border border-neutral-800 rounded-xl p-6 w-full max-w-md"> <div class="adv__modal">
<h2 class="text-lg font-semibold text-neutral-100 mb-4">Import from Server</h2> <h2 class="adv__modal-title">Import from server</h2>
<p class="text-sm text-neutral-400 mb-4"> <p class="adv__modal-desc">Import the current AutoDoors config from your live server. This will create a new config profile.</p>
Import the current AutoDoors config from your live server. This will create a new config profile. <div class="adv__modal-body">
</p> <div class="adv__field">
<div class="space-y-4"> <label class="adv__field-label">Config name</label>
<div>
<label class="block text-sm text-neutral-400 mb-1">Config Name</label>
<input <input
v-model="importConfigName" v-model="importConfigName"
placeholder="e.g. Imported Server Config" type="text"
class="w-full bg-neutral-800 border border-neutral-700 rounded-lg px-3 py-2 text-neutral-200 text-sm" class="cc-text-input"
placeholder="e.g. Imported server config"
@keydown.enter="handleImport" @keydown.enter="handleImport"
/> />
</div> </div>
<div class="flex justify-end gap-2"> </div>
<button @click="showImportModal = false" class="px-4 py-2 text-sm text-neutral-400 hover:text-neutral-200">Cancel</button> <div class="adv__modal-footer">
<button <Button variant="ghost" @click="showImportModal = false">Cancel</Button>
@click="handleImport" <Button :disabled="!importConfigName.trim()" @click="handleImport">Import</Button>
:disabled="!importConfigName.trim()"
class="px-4 py-2 bg-oxide-500 text-white rounded-lg hover:bg-oxide-600 disabled:opacity-50 text-sm"
>
Import
</button>
</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</template> </template>
<style scoped>
.adv { max-width: 960px; margin: 0 auto; display: flex; flex-direction: column; gap: 16px; }
/* Page head */
.adv__head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
.adv__head-id { display: flex; align-items: center; gap: 12px; }
.adv__head-chip {
width: 40px; height: 40px; flex: none; border-radius: var(--radius-md);
display: flex; align-items: center; justify-content: center;
color: var(--accent); background: var(--accent-soft);
box-shadow: inset 0 0 0 1px var(--accent-border);
}
.adv__title {
font-size: var(--text-2xl); font-weight: 700; letter-spacing: -0.02em;
color: var(--text-primary); margin-top: 3px;
}
/* Config action bar */
.adv__bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.adv__config-select {
appearance: none; height: var(--control-h-md); padding: 0 11px;
background: var(--surface-inset); color: var(--text-primary); border: 0;
border-radius: var(--radius-md); box-shadow: var(--ring-default);
font-family: var(--font-sans); font-size: var(--text-sm); cursor: pointer;
min-width: 200px;
}
.adv__config-select:focus-visible { outline: none; box-shadow: inset 0 0 0 1px var(--accent), var(--glow-accent-sm); }
.adv__no-configs { font-size: var(--text-sm); color: var(--text-muted); }
.adv__bar-delete { margin-left: auto; }
/* Loading */
.adv__loading { display: flex; align-items: center; justify-content: center; padding: 60px; }
.adv__spinner {
width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--accent);
border-top-color: transparent; animation: adv-spin 0.6s linear infinite;
}
@keyframes adv-spin { to { transform: rotate(360deg); } }
/* Delay grid */
.adv__delay-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 700px) { .adv__delay-grid { grid-template-columns: 1fr; } }
.adv__slider-row { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.adv__slider { flex: 1; cursor: pointer; }
.adv__delay-num { width: 60px; flex: none; text-align: center; font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.adv__unit { font-size: var(--text-xs); color: var(--text-tertiary); flex: none; }
.adv__mt { margin-top: 20px; }
/* Fields */
.adv__field { display: flex; flex-direction: column; gap: 4px; }
.adv__field-label { font-size: var(--text-sm); font-weight: 500; color: var(--text-primary); }
.adv__field-hint { font-size: var(--text-xs); color: var(--text-tertiary); }
/* Toggle rows */
.adv__toggles { display: flex; flex-direction: column; }
.adv__toggle-row {
display: flex; align-items: center; justify-content: space-between;
gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--border-subtle);
}
.adv__toggle-row:last-child { border-bottom: 0; padding-bottom: 0; }
.adv__toggle-row:first-child { padding-top: 0; }
.adv__toggle-label { font-size: var(--text-sm); font-weight: 500; color: var(--text-primary); }
.adv__toggle-sub { font-size: var(--text-xs); color: var(--text-tertiary); margin-top: 2px; }
.adv__mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
/* Permission groups */
.adv__perm-empty { font-size: var(--text-sm); color: var(--text-tertiary); text-align: center; padding: 20px 0; }
.adv__perm-list { display: flex; flex-direction: column; gap: 8px; }
.adv__perm-row { display: flex; align-items: center; gap: 8px; }
.adv__perm-name { flex: 1; }
.adv__perm-delay { width: 72px; flex: none; text-align: center; font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.adv__del-btn {
width: 34px; height: 34px; border-radius: var(--radius-sm); border: none; background: transparent;
color: var(--danger); display: flex; align-items: center; justify-content: center;
cursor: pointer; transition: var(--transition-colors); flex: none;
}
.adv__del-btn:hover { background: var(--status-offline-soft); }
/* Shared token inputs */
.cc-textarea {
width: 100%; background: var(--surface-inset); color: var(--text-primary);
border: 0; border-radius: var(--radius-md); box-shadow: var(--ring-default);
padding: 9px 11px; font-family: var(--font-sans); font-size: var(--text-sm);
resize: none; outline: 0; line-height: 1.5;
}
.cc-textarea:focus-visible { box-shadow: inset 0 0 0 1px var(--accent), var(--glow-accent-sm); }
.cc-text-input {
width: 100%; height: var(--control-h-md); background: var(--surface-inset); color: var(--text-primary);
border: 0; border-radius: var(--radius-md); box-shadow: var(--ring-default);
padding: 0 11px; font-family: var(--font-sans); font-size: var(--text-sm); outline: 0;
}
.cc-text-input:focus-visible { box-shadow: inset 0 0 0 1px var(--accent), var(--glow-accent-sm); }
.cc-num-input {
width: 100%; height: var(--control-h-md); background: var(--surface-inset); color: var(--text-primary);
border: 0; border-radius: var(--radius-md); box-shadow: var(--ring-default);
padding: 0 11px; font-family: var(--font-sans); font-size: var(--text-sm); outline: 0;
}
.cc-num-input:focus-visible { box-shadow: inset 0 0 0 1px var(--accent), var(--glow-accent-sm); }
/* Modal */
.adv__modal-backdrop {
position: fixed; inset: 0; background: rgba(0,0,0,0.55); z-index: 50;
display: flex; align-items: center; justify-content: center; padding: 16px;
}
.adv__modal {
background: var(--surface-base); border-radius: var(--radius-lg); box-shadow: var(--ring-default);
width: 100%; max-width: 440px; padding: 24px; display: flex; flex-direction: column; gap: 16px;
}
.adv__modal-title { font-size: var(--text-lg); font-weight: 700; color: var(--text-primary); }
.adv__modal-desc { font-size: var(--text-sm); color: var(--text-tertiary); line-height: 1.5; }
.adv__modal-body { display: flex; flex-direction: column; gap: 12px; }
.adv__modal-footer { display: flex; justify-content: flex-end; gap: 8px; }
</style>

1094
frontend/src/views/admin/BetterChatView.vue
View File

File diff suppressed because it is too large Load Diff

451
frontend/src/views/admin/FurnaceSplitterView.vue
View File

@@ -1,15 +1,11 @@
<script setup lang="ts"> <script setup lang="ts">
import { ref, onMounted } from 'vue' import { ref, onMounted } from 'vue'
import { useFurnaceSplitterStore } from '@/stores/furnacesplitter' import { useFurnaceSplitterStore } from '@/stores/furnacesplitter'
import { import Panel from '@/components/ds/data/Panel.vue'
Save, import Button from '@/components/ds/core/Button.vue'
Play, import Icon from '@/components/ds/core/Icon.vue'
Download, import Switch from '@/components/ds/forms/Switch.vue'
Plus, import EmptyState from '@/components/ds/feedback/EmptyState.vue'
Trash2,
Flame,
Settings as SettingsIcon,
} from 'lucide-vue-next'
const store = useFurnaceSplitterStore() const store = useFurnaceSplitterStore()
@@ -57,13 +53,13 @@ function setConfigValue(path: string, value: any) {
// Furnace types with display names // Furnace types with display names
const furnaceTypes = [ const furnaceTypes = [
{ key: 'furnace', label: 'Small Furnace', description: 'Standard furnace for smelting ores' }, { key: 'furnace', label: 'Small furnace', description: 'Standard furnace for smelting ores' },
{ key: 'furnace.large', label: 'Large Furnace', description: 'Large furnace with more slots' }, { key: 'furnace.large', label: 'Large furnace', description: 'Large furnace with more slots' },
{ key: 'campfire', label: 'Campfire', description: 'Basic campfire for cooking' }, { key: 'campfire', label: 'Campfire', description: 'Basic campfire for cooking' },
{ key: 'refinery_small_deployed', label: 'Small Oil Refinery', description: 'Refines crude oil into low grade fuel' }, { key: 'refinery_small_deployed', label: 'Small oil refinery', description: 'Refines crude oil into low grade fuel' },
{ key: 'skull_fire_pit', label: 'Skull Fire Pit', description: 'Decorative fire pit for cooking' }, { key: 'skull_fire_pit', label: 'Skull fire pit', description: 'Decorative fire pit for cooking' },
{ key: 'hobobarrel_static', label: 'Hobo Barrel', description: 'Barrel fire for cooking' }, { key: 'hobobarrel_static', label: 'Hobo barrel', description: 'Barrel fire for cooking' },
{ key: 'electricfurnace.deployed', label: 'Electric Furnace', description: 'Electricity-powered furnace' }, { key: 'electricfurnace.deployed', label: 'Electric furnace', description: 'Electricity-powered furnace' },
] ]
// --- Action handlers --- // --- Action handlers ---
@@ -111,261 +107,334 @@ async function handleImport() {
importConfigName.value = '' importConfigName.value = ''
} }
} }
// Helper: coerce getConfigValue result to boolean for Switch
function getBool(path: string, def: boolean): boolean {
return !!getConfigValue(path, def)
}
</script> </script>
<template> <template>
<div class="p-6 space-y-6"> <div class="fsv">
<!-- Header --> <!-- Page head -->
<div class="flex items-center justify-between"> <div class="fsv__head">
<h1 class="text-2xl font-bold text-white">Furnace Splitter Config</h1> <div class="fsv__head-id">
<div class="flex items-center gap-3"> <div class="fsv__head-chip">
<button <Icon name="flame" :size="20" :stroke-width="2" />
@click="showCreateModal = true" </div>
class="flex items-center gap-2 px-3 py-2 bg-neutral-800 text-neutral-300 rounded-lg hover:bg-neutral-700 text-sm" <div>
> <div class="t-eyebrow">Plugin config</div>
<Plus class="w-4 h-4" /> <h1 class="fsv__title">Furnace splitter</h1>
New Config </div>
</button>
</div> </div>
<Button size="sm" icon="plus" @click="showCreateModal = true">New config</Button>
</div> </div>
<!-- Config Selector + Action Bar --> <!-- Config action bar -->
<div class="bg-neutral-900 border border-neutral-800 rounded-xl p-4"> <Panel>
<div class="flex items-center gap-3 flex-wrap"> <div class="fsv__bar">
<!-- Config Selector -->
<select <select
v-if="store.configs.length > 0" v-if="store.configs.length > 0"
:value="store.currentConfig?.id || ''" :value="store.currentConfig?.id ?? ''"
class="fsv__config-select"
@change="handleConfigChange(($event.target as HTMLSelectElement).value)" @change="handleConfigChange(($event.target as HTMLSelectElement).value)"
class="bg-neutral-800 border border-neutral-700 text-neutral-200 rounded-lg px-3 py-2 text-sm min-w-[200px]"
> >
<option v-for="c in store.configs" :key="c.id" :value="c.id"> <option v-for="c in store.configs" :key="c.id" :value="c.id">
{{ c.config_name }} {{ c.config_name }}{{ c.is_active ? ' (Active)' : '' }}
<template v-if="c.is_active"> (Active)</template>
</option> </option>
</select> </select>
<span v-else class="text-neutral-500 text-sm">No configs yet</span> <span v-else class="fsv__no-configs">No configs yet</span>
<!-- Save --> <Button
<button icon="save"
@click="store.saveCurrentConfig()" size="sm"
:disabled="!store.currentConfig || !store.isDirty || store.isSaving" :disabled="!store.currentConfig || !store.isDirty || store.isSaving"
class="flex items-center gap-2 px-3 py-2 bg-oxide-500 text-white rounded-lg hover:bg-oxide-600 disabled:opacity-50 disabled:cursor-not-allowed text-sm" :loading="store.isSaving"
> @click="store.saveCurrentConfig()"
<Save class="w-4 h-4" /> >{{ store.isSaving ? 'Saving…' : 'Save' }}</Button>
{{ store.isSaving ? 'Saving...' : 'Save' }}
</button>
<!-- Apply to Server --> <Button
<button variant="outline"
@click="handleApply" icon="play"
size="sm"
:disabled="!store.currentConfig || store.isApplying" :disabled="!store.currentConfig || store.isApplying"
class="flex items-center gap-2 px-3 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 disabled:opacity-50 disabled:cursor-not-allowed text-sm" :loading="store.isApplying"
> @click="handleApply"
<Play class="w-4 h-4" /> >{{ store.isApplying ? 'Applying…' : 'Apply to server' }}</Button>
{{ store.isApplying ? 'Applying...' : 'Apply to Server' }}
</button>
<!-- Import from Server --> <Button
<button variant="secondary"
icon="download"
size="sm"
@click="showImportModal = true" @click="showImportModal = true"
class="flex items-center gap-2 px-3 py-2 bg-neutral-800 text-neutral-300 rounded-lg hover:bg-neutral-700 text-sm" >Import from server</Button>
>
<Download class="w-4 h-4" />
Import from Server
</button>
<!-- Delete --> <Button
<button variant="danger-soft"
@click="handleDeleteConfig" icon="trash-2"
size="sm"
:disabled="!store.currentConfig" :disabled="!store.currentConfig"
class="flex items-center gap-2 px-3 py-2 bg-red-500/10 text-red-400 rounded-lg hover:bg-red-500/20 disabled:opacity-50 text-sm ml-auto" class="fsv__bar-delete"
> @click="handleDeleteConfig"
<Trash2 class="w-4 h-4" /> >Delete</Button>
Delete
</button>
</div> </div>
</Panel>
<!-- Loading -->
<div v-if="store.isLoading" class="fsv__loading">
<span class="fsv__spinner" />
</div> </div>
<!-- Loading State --> <!-- Empty state -->
<div v-if="store.isLoading" class="flex items-center justify-center py-20"> <Panel v-else-if="!store.currentConfig">
<div class="animate-spin w-8 h-8 border-2 border-oxide-500 border-t-transparent rounded-full" /> <EmptyState
</div> icon="flame"
title="No FurnaceSplitter config selected"
<!-- No Config Selected --> description="Create a new config, import from server, or select one from the dropdown above."
<div v-else-if="!store.currentConfig" class="bg-neutral-900 border border-neutral-800 rounded-xl p-12 text-center">
<Flame class="w-12 h-12 text-neutral-600 mx-auto mb-4" />
<h2 class="text-lg font-semibold text-neutral-300 mb-2">No FurnaceSplitter Config Selected</h2>
<p class="text-neutral-500 mb-4">Create a new config, import from server, or select one from the dropdown above.</p>
<button
@click="showCreateModal = true"
class="px-4 py-2 bg-oxide-500 text-white rounded-lg hover:bg-oxide-600"
> >
Create First Config <template #action>
</button> <Button icon="plus" @click="showCreateModal = true">Create first config</Button>
</div> </template>
</EmptyState>
</Panel>
<!-- Config Editor --> <!-- Config editor -->
<div v-else class="space-y-6"> <template v-else>
<!-- Furnace Splitter Settings --> <!-- Splitter settings -->
<div class="bg-neutral-900 border border-neutral-800 rounded-xl p-6 space-y-6"> <Panel title="Splitter settings">
<div class="flex items-center gap-2"> <div class="fsv__toggles">
<SettingsIcon class="w-5 h-5 text-neutral-400" /> <div class="fsv__toggle-row">
<h3 class="text-sm font-semibold text-neutral-300 uppercase tracking-wider">Splitter Settings</h3> <div>
</div> <div class="fsv__toggle-label">Enabled</div>
<div class="fsv__toggle-sub">Globally enable or disable furnace splitting</div>
<!-- Global enabled --> </div>
<div class="flex items-center justify-between"> <Switch
<div> :model-value="getBool('Enabled', true)"
<label class="text-sm text-neutral-200">Enabled</label> @update:model-value="v => setConfigValue('Enabled', v)"
<p class="text-xs text-neutral-500">Globally enable or disable furnace splitting</p>
</div>
<button
@click="setConfigValue('Enabled', !getConfigValue('Enabled', true))"
class="relative w-11 h-6 rounded-full transition-colors"
:class="getConfigValue('Enabled', true) ? 'bg-oxide-500' : 'bg-neutral-700'"
>
<span
class="absolute top-0.5 left-0.5 w-5 h-5 bg-white rounded-full transition-transform"
:class="getConfigValue('Enabled', true) ? 'translate-x-5' : 'translate-x-0'"
/> />
</button> </div>
</div> </div>
</div> </Panel>
<!-- Per-Furnace Type Settings --> <!-- Per-furnace type settings -->
<div class="bg-neutral-900 border border-neutral-800 rounded-xl p-6 space-y-6"> <Panel title="Furnace type settings">
<div class="flex items-center gap-2"> <div class="fsv__furnace-list">
<Flame class="w-5 h-5 text-neutral-400" />
<h3 class="text-sm font-semibold text-neutral-300 uppercase tracking-wider">Furnace Type Settings</h3>
</div>
<div class="space-y-4">
<div <div
v-for="furnace in furnaceTypes" v-for="furnace in furnaceTypes"
:key="furnace.key" :key="furnace.key"
class="bg-neutral-800/50 border border-neutral-700/50 rounded-lg p-4" class="fsv__furnace-card"
> >
<div class="flex items-center justify-between mb-3"> <div class="fsv__furnace-head">
<div> <div>
<h4 class="text-sm font-medium text-neutral-200">{{ furnace.label }}</h4> <div class="fsv__furnace-name">{{ furnace.label }}</div>
<p class="text-xs text-neutral-500">{{ furnace.description }}</p> <div class="fsv__furnace-desc">{{ furnace.description }}</div>
</div> </div>
<button <Switch
@click="setConfigValue(`Furnaces.${furnace.key}.Enabled`, !getConfigValue(`Furnaces.${furnace.key}.Enabled`, true))" :model-value="getBool(`Furnaces.${furnace.key}.Enabled`, true)"
class="relative w-11 h-6 rounded-full transition-colors" @update:model-value="v => setConfigValue(`Furnaces.${furnace.key}.Enabled`, v)"
:class="getConfigValue(`Furnaces.${furnace.key}.Enabled`, true) ? 'bg-oxide-500' : 'bg-neutral-700'" />
>
<span
class="absolute top-0.5 left-0.5 w-5 h-5 bg-white rounded-full transition-transform"
:class="getConfigValue(`Furnaces.${furnace.key}.Enabled`, true) ? 'translate-x-5' : 'translate-x-0'"
/>
</button>
</div> </div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4"> <div class="fsv__furnace-fields">
<div> <div class="fsv__field">
<label class="block text-xs text-neutral-500 mb-1">Default Split Stacks</label> <label class="fsv__field-label">Default split stacks</label>
<input <input
type="number" type="number"
class="cc-num-input"
:value="getConfigValue(`Furnaces.${furnace.key}.DefaultSplitCount`, 0)" :value="getConfigValue(`Furnaces.${furnace.key}.DefaultSplitCount`, 0)"
@input="setConfigValue(`Furnaces.${furnace.key}.DefaultSplitCount`, Number(($event.target as HTMLInputElement).value))"
min="0" min="0"
class="w-full bg-neutral-800 border border-neutral-700 rounded px-3 py-2 text-neutral-200 text-sm"
placeholder="0 = fill all slots" placeholder="0 = fill all slots"
@input="setConfigValue(`Furnaces.${furnace.key}.DefaultSplitCount`, Number(($event.target as HTMLInputElement).value))"
/> />
</div> </div>
<div> <div class="fsv__field">
<label class="block text-xs text-neutral-500 mb-1">Fuel Multiplier</label> <label class="fsv__field-label">Fuel multiplier</label>
<input <input
type="number" type="number"
step="0.1" step="0.1"
class="cc-num-input fsv__mono"
:value="getConfigValue(`Furnaces.${furnace.key}.FuelMultiplier`, 1.0)" :value="getConfigValue(`Furnaces.${furnace.key}.FuelMultiplier`, 1.0)"
@input="setConfigValue(`Furnaces.${furnace.key}.FuelMultiplier`, Number(($event.target as HTMLInputElement).value))"
min="0" min="0"
class="w-full bg-neutral-800 border border-neutral-700 rounded px-3 py-2 text-neutral-200 text-sm" @input="setConfigValue(`Furnaces.${furnace.key}.FuelMultiplier`, Number(($event.target as HTMLInputElement).value))"
/> />
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </Panel>
<!-- Permission Groups --> <!-- Permission -->
<div class="bg-neutral-900 border border-neutral-800 rounded-xl p-6 space-y-4"> <Panel title="Permission">
<h3 class="text-sm font-semibold text-neutral-300 uppercase tracking-wider">Permission</h3> <p class="fsv__perm-text">
<p class="text-xs text-neutral-500"> The permission <code class="fsv__code">furnacesplitter.use</code> controls which players can use the furnace splitting feature. Assign this permission via your Oxide permission system.
The permission <code class="text-neutral-300 bg-neutral-800 px-1 rounded">furnacesplitter.use</code> controls which players can use the furnace splitting feature. Assign this permission via your Oxide permission system.
</p> </p>
</div> </Panel>
</div> </template>
<!-- Create Config Modal --> <!-- Create config modal -->
<div v-if="showCreateModal" class="fixed inset-0 bg-black/60 z-50 flex items-center justify-center p-4" @click.self="showCreateModal = false"> <div v-if="showCreateModal" class="fsv__modal-backdrop" @click.self="showCreateModal = false">
<div class="bg-neutral-900 border border-neutral-800 rounded-xl p-6 w-full max-w-md"> <div class="fsv__modal">
<h2 class="text-lg font-semibold text-neutral-100 mb-4">New FurnaceSplitter Config</h2> <h2 class="fsv__modal-title">New FurnaceSplitter config</h2>
<div class="space-y-4"> <div class="fsv__modal-body">
<div> <div class="fsv__field">
<label class="block text-sm text-neutral-400 mb-1">Config Name</label> <label class="fsv__field-label">Config name</label>
<input <input
v-model="newConfigName" v-model="newConfigName"
placeholder="e.g. Default Furnace Settings" type="text"
class="w-full bg-neutral-800 border border-neutral-700 rounded-lg px-3 py-2 text-neutral-200 text-sm" class="cc-text-input"
placeholder="e.g. Default furnace settings"
@keydown.enter="handleCreateConfig" @keydown.enter="handleCreateConfig"
/> />
</div> </div>
<div> <div class="fsv__field">
<label class="block text-sm text-neutral-400 mb-1">Description (optional)</label> <label class="fsv__field-label">Description (optional)</label>
<textarea <textarea
v-model="newConfigDesc" v-model="newConfigDesc"
rows="2" rows="2"
class="cc-textarea"
placeholder="What is this config for?" placeholder="What is this config for?"
class="w-full bg-neutral-800 border border-neutral-700 rounded-lg px-3 py-2 text-neutral-200 text-sm resize-none"
/> />
</div> </div>
<div class="flex justify-end gap-2"> </div>
<button @click="showCreateModal = false" class="px-4 py-2 text-sm text-neutral-400 hover:text-neutral-200">Cancel</button> <div class="fsv__modal-footer">
<button <Button variant="ghost" @click="showCreateModal = false">Cancel</Button>
@click="handleCreateConfig" <Button :disabled="!newConfigName.trim()" @click="handleCreateConfig">Create</Button>
:disabled="!newConfigName.trim()"
class="px-4 py-2 bg-oxide-500 text-white rounded-lg hover:bg-oxide-600 disabled:opacity-50 text-sm"
>
Create
</button>
</div>
</div> </div>
</div> </div>
</div> </div>
<!-- Import from Server Modal --> <!-- Import from server modal -->
<div v-if="showImportModal" class="fixed inset-0 bg-black/60 z-50 flex items-center justify-center p-4" @click.self="showImportModal = false"> <div v-if="showImportModal" class="fsv__modal-backdrop" @click.self="showImportModal = false">
<div class="bg-neutral-900 border border-neutral-800 rounded-xl p-6 w-full max-w-md"> <div class="fsv__modal">
<h2 class="text-lg font-semibold text-neutral-100 mb-4">Import from Server</h2> <h2 class="fsv__modal-title">Import from server</h2>
<p class="text-sm text-neutral-400 mb-4"> <p class="fsv__modal-desc">Import the current FurnaceSplitter config from your live server. This will create a new config profile.</p>
Import the current FurnaceSplitter config from your live server. This will create a new config profile. <div class="fsv__modal-body">
</p> <div class="fsv__field">
<div class="space-y-4"> <label class="fsv__field-label">Config name</label>
<div>
<label class="block text-sm text-neutral-400 mb-1">Config Name</label>
<input <input
v-model="importConfigName" v-model="importConfigName"
placeholder="e.g. Imported Server Config" type="text"
class="w-full bg-neutral-800 border border-neutral-700 rounded-lg px-3 py-2 text-neutral-200 text-sm" class="cc-text-input"
placeholder="e.g. Imported server config"
@keydown.enter="handleImport" @keydown.enter="handleImport"
/> />
</div> </div>
<div class="flex justify-end gap-2"> </div>
<button @click="showImportModal = false" class="px-4 py-2 text-sm text-neutral-400 hover:text-neutral-200">Cancel</button> <div class="fsv__modal-footer">
<button <Button variant="ghost" @click="showImportModal = false">Cancel</Button>
@click="handleImport" <Button :disabled="!importConfigName.trim()" @click="handleImport">Import</Button>
:disabled="!importConfigName.trim()"
class="px-4 py-2 bg-oxide-500 text-white rounded-lg hover:bg-oxide-600 disabled:opacity-50 text-sm"
>
Import
</button>
</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</template> </template>
<style scoped>
.fsv { max-width: 960px; margin: 0 auto; display: flex; flex-direction: column; gap: 16px; }
/* Page head */
.fsv__head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
.fsv__head-id { display: flex; align-items: center; gap: 12px; }
.fsv__head-chip {
width: 40px; height: 40px; flex: none; border-radius: var(--radius-md);
display: flex; align-items: center; justify-content: center;
color: var(--accent); background: var(--accent-soft);
box-shadow: inset 0 0 0 1px var(--accent-border);
}
.fsv__title {
font-size: var(--text-2xl); font-weight: 700; letter-spacing: -0.02em;
color: var(--text-primary); margin-top: 3px;
}
/* Config action bar */
.fsv__bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.fsv__config-select {
appearance: none; height: var(--control-h-md); padding: 0 11px;
background: var(--surface-inset); color: var(--text-primary); border: 0;
border-radius: var(--radius-md); box-shadow: var(--ring-default);
font-family: var(--font-sans); font-size: var(--text-sm); cursor: pointer;
min-width: 200px;
}
.fsv__config-select:focus-visible { outline: none; box-shadow: inset 0 0 0 1px var(--accent), var(--glow-accent-sm); }
.fsv__no-configs { font-size: var(--text-sm); color: var(--text-muted); }
.fsv__bar-delete { margin-left: auto; }
/* Loading */
.fsv__loading { display: flex; align-items: center; justify-content: center; padding: 60px; }
.fsv__spinner {
width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--accent);
border-top-color: transparent; animation: fsv-spin 0.6s linear infinite;
}
@keyframes fsv-spin { to { transform: rotate(360deg); } }
/* Toggles */
.fsv__toggles { display: flex; flex-direction: column; }
.fsv__toggle-row {
display: flex; align-items: center; justify-content: space-between;
gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--border-subtle);
}
.fsv__toggle-row:last-child { border-bottom: 0; padding-bottom: 0; }
.fsv__toggle-row:first-child { padding-top: 0; }
.fsv__toggle-label { font-size: var(--text-sm); font-weight: 500; color: var(--text-primary); }
.fsv__toggle-sub { font-size: var(--text-xs); color: var(--text-tertiary); margin-top: 2px; }
/* Furnace cards */
.fsv__furnace-list { display: flex; flex-direction: column; gap: 12px; }
.fsv__furnace-card {
background: var(--surface-raised-2); border-radius: var(--radius-md);
box-shadow: var(--ring-default); padding: 14px; display: flex; flex-direction: column; gap: 12px;
}
.fsv__furnace-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.fsv__furnace-name { font-size: var(--text-sm); font-weight: 500; color: var(--text-primary); }
.fsv__furnace-desc { font-size: var(--text-xs); color: var(--text-tertiary); margin-top: 2px; }
.fsv__furnace-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 500px) { .fsv__furnace-fields { grid-template-columns: 1fr; } }
/* Fields */
.fsv__field { display: flex; flex-direction: column; gap: 6px; }
.fsv__field-label { font-size: var(--text-xs); font-weight: 600; color: var(--text-secondary); }
/* Permission text */
.fsv__perm-text { font-size: var(--text-sm); color: var(--text-secondary); line-height: 1.6; }
.fsv__code {
font-family: var(--font-mono); font-size: var(--text-xs); font-variant-numeric: tabular-nums;
background: var(--surface-raised-2); color: var(--text-primary); padding: 1px 6px;
border-radius: var(--radius-sm); box-shadow: var(--ring-default);
}
.fsv__mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
/* Shared token inputs */
.cc-textarea {
width: 100%; background: var(--surface-inset); color: var(--text-primary);
border: 0; border-radius: var(--radius-md); box-shadow: var(--ring-default);
padding: 9px 11px; font-family: var(--font-sans); font-size: var(--text-sm);
resize: none; outline: 0; line-height: 1.5;
}
.cc-textarea:focus-visible { box-shadow: inset 0 0 0 1px var(--accent), var(--glow-accent-sm); }
.cc-text-input {
width: 100%; height: var(--control-h-md); background: var(--surface-inset); color: var(--text-primary);
border: 0; border-radius: var(--radius-md); box-shadow: var(--ring-default);
padding: 0 11px; font-family: var(--font-sans); font-size: var(--text-sm); outline: 0;
}
.cc-text-input:focus-visible { box-shadow: inset 0 0 0 1px var(--accent), var(--glow-accent-sm); }
.cc-num-input {
width: 100%; height: var(--control-h-md); background: var(--surface-inset); color: var(--text-primary);
border: 0; border-radius: var(--radius-md); box-shadow: var(--ring-default);
padding: 0 11px; font-family: var(--font-sans); font-size: var(--text-sm); outline: 0;
}
.cc-num-input:focus-visible { box-shadow: inset 0 0 0 1px var(--accent), var(--glow-accent-sm); }
/* Modal */
.fsv__modal-backdrop {
position: fixed; inset: 0; background: rgba(0,0,0,0.55); z-index: 50;
display: flex; align-items: center; justify-content: center; padding: 16px;
}
.fsv__modal {
background: var(--surface-base); border-radius: var(--radius-lg); box-shadow: var(--ring-default);
width: 100%; max-width: 440px; padding: 24px; display: flex; flex-direction: column; gap: 16px;
}
.fsv__modal-title { font-size: var(--text-lg); font-weight: 700; color: var(--text-primary); }
.fsv__modal-desc { font-size: var(--text-sm); color: var(--text-tertiary); line-height: 1.5; }
.fsv__modal-body { display: flex; flex-direction: column; gap: 12px; }
.fsv__modal-footer { display: flex; justify-content: flex-end; gap: 8px; }
</style>

522
frontend/src/views/admin/GatherManagerView.vue
View File

@@ -1,15 +1,11 @@
<script setup lang="ts"> <script setup lang="ts">
import { ref, onMounted } from 'vue' import { ref, onMounted } from 'vue'
import { useGatherStore } from '@/stores/gather' import { useGatherStore } from '@/stores/gather'
import { import Panel from '@/components/ds/data/Panel.vue'
Save, import Button from '@/components/ds/core/Button.vue'
Play, import Icon from '@/components/ds/core/Icon.vue'
Download, import Tabs from '@/components/ds/navigation/Tabs.vue'
Plus, import EmptyState from '@/components/ds/feedback/EmptyState.vue'
Trash2,
Pickaxe,
Settings as SettingsIcon,
} from 'lucide-vue-next'
const store = useGatherStore() const store = useGatherStore()
@@ -20,51 +16,51 @@ const newConfigName = ref('')
const newConfigDesc = ref('') const newConfigDesc = ref('')
const importConfigName = ref('') const importConfigName = ref('')
const tabs = [ const tabItems = [
{ key: 'resources', label: 'Resource Rates', icon: Pickaxe }, { value: 'resources', label: 'Resource rates', icon: 'pickaxe' },
{ key: 'advanced', label: 'Advanced', icon: SettingsIcon }, { value: 'advanced', label: 'Advanced', icon: 'settings' },
] ]
// Resource definitions for the main gather tab // Resource definitions for the main gather tab
const gatherResources = [ const gatherResources = [
{ key: 'Wood', label: 'Wood' }, { key: 'Wood', label: 'Wood' },
{ key: 'Stones', label: 'Stones' }, { key: 'Stones', label: 'Stones' },
{ key: 'Metal Ore', label: 'Metal Ore' }, { key: 'Metal Ore', label: 'Metal ore' },
{ key: 'Sulfur Ore', label: 'Sulfur Ore' }, { key: 'Sulfur Ore', label: 'Sulfur ore' },
{ key: 'HQM Ore', label: 'HQM Ore' }, { key: 'HQM Ore', label: 'HQM ore' },
{ key: 'Cloth', label: 'Cloth' }, { key: 'Cloth', label: 'Cloth' },
{ key: 'Leather', label: 'Leather' }, { key: 'Leather', label: 'Leather' },
{ key: 'Animal Fat', label: 'Animal Fat' }, { key: 'Animal Fat', label: 'Animal fat' },
{ key: 'Bone Fragments', label: 'Bone Fragments' }, { key: 'Bone Fragments', label: 'Bone fragments' },
] ]
// Advanced resource categories // Advanced resource categories
const pickupResources = [ const pickupResources = [
{ key: 'Wood', label: 'Wood' }, { key: 'Wood', label: 'Wood' },
{ key: 'Stones', label: 'Stones' }, { key: 'Stones', label: 'Stones' },
{ key: 'Metal Ore', label: 'Metal Ore' }, { key: 'Metal Ore', label: 'Metal ore' },
{ key: 'Sulfur Ore', label: 'Sulfur Ore' }, { key: 'Sulfur Ore', label: 'Sulfur ore' },
] ]
const quarryResources = [ const quarryResources = [
{ key: 'HQM Ore', label: 'HQM Ore' }, { key: 'HQM Ore', label: 'HQM ore' },
{ key: 'Metal Ore', label: 'Metal Ore' }, { key: 'Metal Ore', label: 'Metal ore' },
{ key: 'Sulfur Ore', label: 'Sulfur Ore' }, { key: 'Sulfur Ore', label: 'Sulfur ore' },
{ key: 'Stones', label: 'Stones' }, { key: 'Stones', label: 'Stones' },
] ]
const excavatorResources = [ const excavatorResources = [
{ key: 'HQM Ore', label: 'HQM Ore' }, { key: 'HQM Ore', label: 'HQM ore' },
{ key: 'Metal Ore', label: 'Metal Ore' }, { key: 'Metal Ore', label: 'Metal ore' },
{ key: 'Sulfur Ore', label: 'Sulfur Ore' }, { key: 'Sulfur Ore', label: 'Sulfur ore' },
{ key: 'Stones', label: 'Stones' }, { key: 'Stones', label: 'Stones' },
] ]
const surveyResources = [ const surveyResources = [
{ key: 'Metal Ore', label: 'Metal Ore' }, { key: 'Metal Ore', label: 'Metal ore' },
{ key: 'Sulfur Ore', label: 'Sulfur Ore' }, { key: 'Sulfur Ore', label: 'Sulfur ore' },
{ key: 'Stones', label: 'Stones' }, { key: 'Stones', label: 'Stones' },
{ key: 'HQM Ore', label: 'HQM Ore' }, { key: 'HQM Ore', label: 'HQM ore' },
] ]
const presets = [ const presets = [
@@ -167,368 +163,428 @@ async function handleImport() {
</script> </script>
<template> <template>
<div class="p-6 space-y-6"> <div class="gv">
<!-- Header --> <!-- Page head -->
<div class="flex items-center justify-between"> <div class="gv__head">
<h1 class="text-2xl font-bold text-white">Gather Rates</h1> <div class="gv__head-id">
<div class="flex items-center gap-3"> <div class="gv__head-chip">
<button <Icon name="pickaxe" :size="20" :stroke-width="2" />
@click="showCreateModal = true" </div>
class="flex items-center gap-2 px-3 py-2 bg-neutral-800 text-neutral-300 rounded-lg hover:bg-neutral-700 text-sm" <div>
> <div class="t-eyebrow">Plugin config</div>
<Plus class="w-4 h-4" /> <h1 class="gv__title">Gather rates</h1>
New Config </div>
</button>
</div> </div>
<Button size="sm" icon="plus" @click="showCreateModal = true">New config</Button>
</div> </div>
<!-- Config Selector + Action Bar --> <!-- Config action bar -->
<div class="bg-neutral-900 border border-neutral-800 rounded-xl p-4"> <Panel>
<div class="flex items-center gap-3 flex-wrap"> <div class="gv__bar">
<!-- Config Selector -->
<select <select
v-if="store.configs.length > 0" v-if="store.configs.length > 0"
:value="store.currentConfig?.id || ''" :value="store.currentConfig?.id ?? ''"
class="gv__config-select"
@change="handleConfigChange(($event.target as HTMLSelectElement).value)" @change="handleConfigChange(($event.target as HTMLSelectElement).value)"
class="bg-neutral-800 border border-neutral-700 text-neutral-200 rounded-lg px-3 py-2 text-sm min-w-[200px]"
> >
<option v-for="c in store.configs" :key="c.id" :value="c.id"> <option v-for="c in store.configs" :key="c.id" :value="c.id">
{{ c.config_name }} {{ c.config_name }}{{ c.is_active ? ' (Active)' : '' }}
<template v-if="c.is_active"> (Active)</template>
</option> </option>
</select> </select>
<span v-else class="text-neutral-500 text-sm">No configs yet</span> <span v-else class="gv__no-configs">No configs yet</span>
<!-- Save --> <Button
<button icon="save"
@click="store.saveCurrentConfig()" size="sm"
:disabled="!store.currentConfig || !store.isDirty || store.isSaving" :disabled="!store.currentConfig || !store.isDirty || store.isSaving"
class="flex items-center gap-2 px-3 py-2 bg-oxide-500 text-white rounded-lg hover:bg-oxide-600 disabled:opacity-50 disabled:cursor-not-allowed text-sm" :loading="store.isSaving"
> @click="store.saveCurrentConfig()"
<Save class="w-4 h-4" /> >{{ store.isSaving ? 'Saving…' : 'Save' }}</Button>
{{ store.isSaving ? 'Saving...' : 'Save' }}
</button>
<!-- Apply to Server --> <Button
<button variant="outline"
@click="handleApply" icon="play"
size="sm"
:disabled="!store.currentConfig || store.isApplying" :disabled="!store.currentConfig || store.isApplying"
class="flex items-center gap-2 px-3 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 disabled:opacity-50 disabled:cursor-not-allowed text-sm" :loading="store.isApplying"
> @click="handleApply"
<Play class="w-4 h-4" /> >{{ store.isApplying ? 'Applying…' : 'Apply to server' }}</Button>
{{ store.isApplying ? 'Applying...' : 'Apply to Server' }}
</button>
<!-- Import from Server --> <Button
<button variant="secondary"
icon="download"
size="sm"
@click="showImportModal = true" @click="showImportModal = true"
class="flex items-center gap-2 px-3 py-2 bg-neutral-800 text-neutral-300 rounded-lg hover:bg-neutral-700 text-sm" >Import from server</Button>
>
<Download class="w-4 h-4" />
Import from Server
</button>
<!-- Delete --> <Button
<button variant="danger-soft"
@click="handleDeleteConfig" icon="trash-2"
size="sm"
:disabled="!store.currentConfig" :disabled="!store.currentConfig"
class="flex items-center gap-2 px-3 py-2 bg-red-500/10 text-red-400 rounded-lg hover:bg-red-500/20 disabled:opacity-50 text-sm ml-auto" class="gv__bar-delete"
> @click="handleDeleteConfig"
<Trash2 class="w-4 h-4" /> >Delete</Button>
Delete
</button>
</div> </div>
</Panel>
<!-- Loading -->
<div v-if="store.isLoading" class="gv__loading">
<span class="gv__spinner" />
</div> </div>
<!-- Loading State --> <!-- Empty state -->
<div v-if="store.isLoading" class="flex items-center justify-center py-20"> <Panel v-else-if="!store.currentConfig">
<div class="animate-spin w-8 h-8 border-2 border-oxide-500 border-t-transparent rounded-full" /> <EmptyState
</div> icon="pickaxe"
title="No gather config selected"
<!-- No Config Selected --> description="Create a new config, import from server, or select one from the dropdown above."
<div v-else-if="!store.currentConfig" class="bg-neutral-900 border border-neutral-800 rounded-xl p-12 text-center">
<Pickaxe class="w-12 h-12 text-neutral-600 mx-auto mb-4" />
<h2 class="text-lg font-semibold text-neutral-300 mb-2">No Gather Config Selected</h2>
<p class="text-neutral-500 mb-4">Create a new config, import from server, or select one from the dropdown above.</p>
<button
@click="showCreateModal = true"
class="px-4 py-2 bg-oxide-500 text-white rounded-lg hover:bg-oxide-600"
> >
Create First Config <template #action>
</button> <Button icon="plus" @click="showCreateModal = true">Create first config</Button>
</div> </template>
</EmptyState>
</Panel>
<!-- Config Editor --> <!-- Config editor -->
<div v-else class="space-y-6"> <template v-else>
<!-- Tab Bar --> <Tabs v-model="activeTab" :items="tabItems" variant="line" />
<div class="flex border-b border-neutral-800">
<button
v-for="tab in tabs"
:key="tab.key"
@click="activeTab = tab.key as typeof activeTab"
class="flex items-center gap-2 px-4 py-2 text-sm font-medium border-b-2 transition-colors"
:class="activeTab === tab.key
? 'border-oxide-500 text-oxide-400'
: 'border-transparent text-neutral-500 hover:text-neutral-300'"
>
<component :is="tab.icon" class="w-4 h-4" />
{{ tab.label }}
</button>
</div>
<!-- Resource Rates Tab --> <!-- Resource rates tab -->
<div v-if="activeTab === 'resources'" class="bg-neutral-900 border border-neutral-800 rounded-xl p-6 space-y-6"> <Panel v-if="activeTab === 'resources'" title="Gather resource modifiers">
<div class="flex items-center justify-between"> <template #actions>
<h3 class="text-sm font-semibold text-neutral-300 uppercase tracking-wider">Gather Resource Modifiers</h3> <div class="gv__presets">
<div class="flex items-center gap-2"> <span class="gv__presets-label">Presets:</span>
<span class="text-xs text-neutral-500 mr-2">Presets:</span>
<button <button
v-for="preset in presets" v-for="preset in presets"
:key="preset.value" :key="preset.value"
class="gv__preset-btn"
@click="applyPreset(preset.value)" @click="applyPreset(preset.value)"
class="px-3 py-1 text-xs bg-neutral-800 text-neutral-300 rounded-lg hover:bg-neutral-700 hover:text-white transition-colors" >{{ preset.label }}</button>
>
{{ preset.label }}
</button>
</div> </div>
</div> </template>
<div class="space-y-4"> <div class="gv__rate-list">
<div <div
v-for="resource in gatherResources" v-for="resource in gatherResources"
:key="resource.key" :key="resource.key"
class="flex items-center gap-4" class="gv__rate-row"
> >
<label class="text-sm text-neutral-200 w-32 flex-shrink-0">{{ resource.label }}</label> <label class="gv__rate-label">{{ resource.label }}</label>
<input <input
type="range" type="range"
:value="getConfigValue(`GatherResourceModifiers.${resource.key}`, 1)" :value="getConfigValue(`GatherResourceModifiers.${resource.key}`, 1)"
@input="setConfigValue(`GatherResourceModifiers.${resource.key}`, Number(($event.target as HTMLInputElement).value))"
min="0.1" min="0.1"
max="100" max="100"
step="0.1" step="0.1"
class="flex-1 accent-oxide-500" class="gv__slider"
style="accent-color: var(--accent)"
@input="setConfigValue(`GatherResourceModifiers.${resource.key}`, Number(($event.target as HTMLInputElement).value))"
/> />
<input <input
type="number" type="number"
:value="getConfigValue(`GatherResourceModifiers.${resource.key}`, 1)" :value="getConfigValue(`GatherResourceModifiers.${resource.key}`, 1)"
@input="setConfigValue(`GatherResourceModifiers.${resource.key}`, Number(($event.target as HTMLInputElement).value))"
min="0.1" min="0.1"
max="1000" max="1000"
step="0.1" step="0.1"
class="w-20 bg-neutral-800 border border-neutral-700 rounded-lg px-2 py-1 text-neutral-200 text-sm text-center" class="cc-num-input gv__rate-num"
@input="setConfigValue(`GatherResourceModifiers.${resource.key}`, Number(($event.target as HTMLInputElement).value))"
/> />
<span class="text-xs text-neutral-500 w-4">x</span> <span class="gv__rate-unit">x</span>
</div> </div>
</div> </div>
</div> </Panel>
<!-- Advanced Tab --> <!-- Advanced tab -->
<div v-else-if="activeTab === 'advanced'" class="space-y-6"> <template v-else-if="activeTab === 'advanced'">
<!-- Pickup Resource Modifiers --> <!-- Pickup -->
<div class="bg-neutral-900 border border-neutral-800 rounded-xl p-6 space-y-4"> <Panel title="Pickup resource modifiers" subtitle="Modify rates for resources picked up from the ground (small rocks, wood piles).">
<h3 class="text-sm font-semibold text-neutral-300 uppercase tracking-wider">Pickup Resource Modifiers</h3> <div class="gv__rate-list">
<p class="text-xs text-neutral-500">Modify rates for resources picked up from the ground (small rocks, wood piles).</p>
<div class="space-y-4">
<div <div
v-for="resource in pickupResources" v-for="resource in pickupResources"
:key="resource.key" :key="resource.key"
class="flex items-center gap-4" class="gv__rate-row"
> >
<label class="text-sm text-neutral-200 w-32 flex-shrink-0">{{ resource.label }}</label> <label class="gv__rate-label">{{ resource.label }}</label>
<input <input
type="range" type="range"
:value="getConfigValue(`PickupResourceModifiers.${resource.key}`, 1)" :value="getConfigValue(`PickupResourceModifiers.${resource.key}`, 1)"
@input="setConfigValue(`PickupResourceModifiers.${resource.key}`, Number(($event.target as HTMLInputElement).value))"
min="0.1" min="0.1"
max="100" max="100"
step="0.1" step="0.1"
class="flex-1 accent-oxide-500" class="gv__slider"
style="accent-color: var(--accent)"
@input="setConfigValue(`PickupResourceModifiers.${resource.key}`, Number(($event.target as HTMLInputElement).value))"
/> />
<input <input
type="number" type="number"
:value="getConfigValue(`PickupResourceModifiers.${resource.key}`, 1)" :value="getConfigValue(`PickupResourceModifiers.${resource.key}`, 1)"
@input="setConfigValue(`PickupResourceModifiers.${resource.key}`, Number(($event.target as HTMLInputElement).value))"
min="0.1" min="0.1"
max="1000" max="1000"
step="0.1" step="0.1"
class="w-20 bg-neutral-800 border border-neutral-700 rounded-lg px-2 py-1 text-neutral-200 text-sm text-center" class="cc-num-input gv__rate-num"
@input="setConfigValue(`PickupResourceModifiers.${resource.key}`, Number(($event.target as HTMLInputElement).value))"
/> />
<span class="text-xs text-neutral-500 w-4">x</span> <span class="gv__rate-unit">x</span>
</div> </div>
</div> </div>
</div> </Panel>
<!-- Quarry Resource Modifiers --> <!-- Quarry -->
<div class="bg-neutral-900 border border-neutral-800 rounded-xl p-6 space-y-4"> <Panel title="Quarry resource modifiers" subtitle="Scale resource output from mining quarries.">
<h3 class="text-sm font-semibold text-neutral-300 uppercase tracking-wider">Quarry Resource Modifiers</h3> <div class="gv__rate-list">
<p class="text-xs text-neutral-500">Scale resource output from Mining Quarries.</p>
<div class="space-y-4">
<div <div
v-for="resource in quarryResources" v-for="resource in quarryResources"
:key="resource.key" :key="resource.key"
class="flex items-center gap-4" class="gv__rate-row"
> >
<label class="text-sm text-neutral-200 w-32 flex-shrink-0">{{ resource.label }}</label> <label class="gv__rate-label">{{ resource.label }}</label>
<input <input
type="range" type="range"
:value="getConfigValue(`QuarryResourceModifiers.${resource.key}`, 1)" :value="getConfigValue(`QuarryResourceModifiers.${resource.key}`, 1)"
@input="setConfigValue(`QuarryResourceModifiers.${resource.key}`, Number(($event.target as HTMLInputElement).value))"
min="0.1" min="0.1"
max="100" max="100"
step="0.1" step="0.1"
class="flex-1 accent-oxide-500" class="gv__slider"
style="accent-color: var(--accent)"
@input="setConfigValue(`QuarryResourceModifiers.${resource.key}`, Number(($event.target as HTMLInputElement).value))"
/> />
<input <input
type="number" type="number"
:value="getConfigValue(`QuarryResourceModifiers.${resource.key}`, 1)" :value="getConfigValue(`QuarryResourceModifiers.${resource.key}`, 1)"
@input="setConfigValue(`QuarryResourceModifiers.${resource.key}`, Number(($event.target as HTMLInputElement).value))"
min="0.1" min="0.1"
max="1000" max="1000"
step="0.1" step="0.1"
class="w-20 bg-neutral-800 border border-neutral-700 rounded-lg px-2 py-1 text-neutral-200 text-sm text-center" class="cc-num-input gv__rate-num"
@input="setConfigValue(`QuarryResourceModifiers.${resource.key}`, Number(($event.target as HTMLInputElement).value))"
/> />
<span class="text-xs text-neutral-500 w-4">x</span> <span class="gv__rate-unit">x</span>
</div> </div>
</div> </div>
</div> </Panel>
<!-- Excavator Resource Modifiers --> <!-- Excavator -->
<div class="bg-neutral-900 border border-neutral-800 rounded-xl p-6 space-y-4"> <Panel title="Excavator resource modifiers" subtitle="Scale resource output from the giant excavator.">
<h3 class="text-sm font-semibold text-neutral-300 uppercase tracking-wider">Excavator Resource Modifiers</h3> <div class="gv__rate-list">
<p class="text-xs text-neutral-500">Scale resource output from the Giant Excavator.</p>
<div class="space-y-4">
<div <div
v-for="resource in excavatorResources" v-for="resource in excavatorResources"
:key="resource.key" :key="resource.key"
class="flex items-center gap-4" class="gv__rate-row"
> >
<label class="text-sm text-neutral-200 w-32 flex-shrink-0">{{ resource.label }}</label> <label class="gv__rate-label">{{ resource.label }}</label>
<input <input
type="range" type="range"
:value="getConfigValue(`ExcavatorResourceModifiers.${resource.key}`, 1)" :value="getConfigValue(`ExcavatorResourceModifiers.${resource.key}`, 1)"
@input="setConfigValue(`ExcavatorResourceModifiers.${resource.key}`, Number(($event.target as HTMLInputElement).value))"
min="0.1" min="0.1"
max="100" max="100"
step="0.1" step="0.1"
class="flex-1 accent-oxide-500" class="gv__slider"
style="accent-color: var(--accent)"
@input="setConfigValue(`ExcavatorResourceModifiers.${resource.key}`, Number(($event.target as HTMLInputElement).value))"
/> />
<input <input
type="number" type="number"
:value="getConfigValue(`ExcavatorResourceModifiers.${resource.key}`, 1)" :value="getConfigValue(`ExcavatorResourceModifiers.${resource.key}`, 1)"
@input="setConfigValue(`ExcavatorResourceModifiers.${resource.key}`, Number(($event.target as HTMLInputElement).value))"
min="0.1" min="0.1"
max="1000" max="1000"
step="0.1" step="0.1"
class="w-20 bg-neutral-800 border border-neutral-700 rounded-lg px-2 py-1 text-neutral-200 text-sm text-center" class="cc-num-input gv__rate-num"
@input="setConfigValue(`ExcavatorResourceModifiers.${resource.key}`, Number(($event.target as HTMLInputElement).value))"
/> />
<span class="text-xs text-neutral-500 w-4">x</span> <span class="gv__rate-unit">x</span>
</div> </div>
</div> </div>
</div> </Panel>
<!-- Survey Resource Modifiers --> <!-- Survey -->
<div class="bg-neutral-900 border border-neutral-800 rounded-xl p-6 space-y-4"> <Panel title="Survey charge resource modifiers" subtitle="Modify resource amounts from survey charge grenades.">
<h3 class="text-sm font-semibold text-neutral-300 uppercase tracking-wider">Survey Charge Resource Modifiers</h3> <div class="gv__rate-list">
<p class="text-xs text-neutral-500">Modify resource amounts from Survey Charge grenades.</p>
<div class="space-y-4">
<div <div
v-for="resource in surveyResources" v-for="resource in surveyResources"
:key="resource.key" :key="resource.key"
class="flex items-center gap-4" class="gv__rate-row"
> >
<label class="text-sm text-neutral-200 w-32 flex-shrink-0">{{ resource.label }}</label> <label class="gv__rate-label">{{ resource.label }}</label>
<input <input
type="range" type="range"
:value="getConfigValue(`SurveyResourceModifiers.${resource.key}`, 1)" :value="getConfigValue(`SurveyResourceModifiers.${resource.key}`, 1)"
@input="setConfigValue(`SurveyResourceModifiers.${resource.key}`, Number(($event.target as HTMLInputElement).value))"
min="0.1" min="0.1"
max="100" max="100"
step="0.1" step="0.1"
class="flex-1 accent-oxide-500" class="gv__slider"
style="accent-color: var(--accent)"
@input="setConfigValue(`SurveyResourceModifiers.${resource.key}`, Number(($event.target as HTMLInputElement).value))"
/> />
<input <input
type="number" type="number"
:value="getConfigValue(`SurveyResourceModifiers.${resource.key}`, 1)" :value="getConfigValue(`SurveyResourceModifiers.${resource.key}`, 1)"
@input="setConfigValue(`SurveyResourceModifiers.${resource.key}`, Number(($event.target as HTMLInputElement).value))"
min="0.1" min="0.1"
max="1000" max="1000"
step="0.1" step="0.1"
class="w-20 bg-neutral-800 border border-neutral-700 rounded-lg px-2 py-1 text-neutral-200 text-sm text-center" class="cc-num-input gv__rate-num"
@input="setConfigValue(`SurveyResourceModifiers.${resource.key}`, Number(($event.target as HTMLInputElement).value))"
/> />
<span class="text-xs text-neutral-500 w-4">x</span> <span class="gv__rate-unit">x</span>
</div> </div>
</div> </div>
</div> </Panel>
</div> </template>
</div> </template>
<!-- Create Config Modal --> <!-- Create config modal -->
<div v-if="showCreateModal" class="fixed inset-0 bg-black/60 z-50 flex items-center justify-center p-4" @click.self="showCreateModal = false"> <div v-if="showCreateModal" class="gv__modal-backdrop" @click.self="showCreateModal = false">
<div class="bg-neutral-900 border border-neutral-800 rounded-xl p-6 w-full max-w-md"> <div class="gv__modal">
<h2 class="text-lg font-semibold text-neutral-100 mb-4">New Gather Config</h2> <h2 class="gv__modal-title">New gather config</h2>
<div class="space-y-4"> <div class="gv__modal-body">
<div> <div class="gv__field">
<label class="block text-sm text-neutral-400 mb-1">Config Name</label> <label class="gv__field-label">Config name</label>
<input <input
v-model="newConfigName" v-model="newConfigName"
placeholder="e.g. 3x Gather Rates" type="text"
class="w-full bg-neutral-800 border border-neutral-700 rounded-lg px-3 py-2 text-neutral-200 text-sm" class="cc-text-input"
placeholder="e.g. 3x gather rates"
@keydown.enter="handleCreateConfig" @keydown.enter="handleCreateConfig"
/> />
</div> </div>
<div> <div class="gv__field">
<label class="block text-sm text-neutral-400 mb-1">Description (optional)</label> <label class="gv__field-label">Description (optional)</label>
<textarea <textarea
v-model="newConfigDesc" v-model="newConfigDesc"
rows="2" rows="2"
class="cc-textarea"
placeholder="What is this config for?" placeholder="What is this config for?"
class="w-full bg-neutral-800 border border-neutral-700 rounded-lg px-3 py-2 text-neutral-200 text-sm resize-none"
/> />
</div> </div>
<div class="flex justify-end gap-2"> </div>
<button @click="showCreateModal = false" class="px-4 py-2 text-sm text-neutral-400 hover:text-neutral-200">Cancel</button> <div class="gv__modal-footer">
<button <Button variant="ghost" @click="showCreateModal = false">Cancel</Button>
@click="handleCreateConfig" <Button :disabled="!newConfigName.trim()" @click="handleCreateConfig">Create</Button>
:disabled="!newConfigName.trim()"
class="px-4 py-2 bg-oxide-500 text-white rounded-lg hover:bg-oxide-600 disabled:opacity-50 text-sm"
>
Create
</button>
</div>
</div> </div>
</div> </div>
</div> </div>
<!-- Import from Server Modal --> <!-- Import from server modal -->
<div v-if="showImportModal" class="fixed inset-0 bg-black/60 z-50 flex items-center justify-center p-4" @click.self="showImportModal = false"> <div v-if="showImportModal" class="gv__modal-backdrop" @click.self="showImportModal = false">
<div class="bg-neutral-900 border border-neutral-800 rounded-xl p-6 w-full max-w-md"> <div class="gv__modal">
<h2 class="text-lg font-semibold text-neutral-100 mb-4">Import from Server</h2> <h2 class="gv__modal-title">Import from server</h2>
<p class="text-sm text-neutral-400 mb-4"> <p class="gv__modal-desc">Import the current GatherManager config from your live server. This will create a new config profile.</p>
Import the current GatherManager config from your live server. This will create a new config profile. <div class="gv__modal-body">
</p> <div class="gv__field">
<div class="space-y-4"> <label class="gv__field-label">Config name</label>
<div>
<label class="block text-sm text-neutral-400 mb-1">Config Name</label>
<input <input
v-model="importConfigName" v-model="importConfigName"
placeholder="e.g. Imported Server Config" type="text"
class="w-full bg-neutral-800 border border-neutral-700 rounded-lg px-3 py-2 text-neutral-200 text-sm" class="cc-text-input"
placeholder="e.g. Imported server config"
@keydown.enter="handleImport" @keydown.enter="handleImport"
/> />
</div> </div>
<div class="flex justify-end gap-2"> </div>
<button @click="showImportModal = false" class="px-4 py-2 text-sm text-neutral-400 hover:text-neutral-200">Cancel</button> <div class="gv__modal-footer">
<button <Button variant="ghost" @click="showImportModal = false">Cancel</Button>
@click="handleImport" <Button :disabled="!importConfigName.trim()" @click="handleImport">Import</Button>
:disabled="!importConfigName.trim()"
class="px-4 py-2 bg-oxide-500 text-white rounded-lg hover:bg-oxide-600 disabled:opacity-50 text-sm"
>
Import
</button>
</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</template> </template>
<style scoped>
.gv { max-width: 960px; margin: 0 auto; display: flex; flex-direction: column; gap: 16px; }
/* Page head */
.gv__head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
.gv__head-id { display: flex; align-items: center; gap: 12px; }
.gv__head-chip {
width: 40px; height: 40px; flex: none; border-radius: var(--radius-md);
display: flex; align-items: center; justify-content: center;
color: var(--accent); background: var(--accent-soft);
box-shadow: inset 0 0 0 1px var(--accent-border);
}
.gv__title {
font-size: var(--text-2xl); font-weight: 700; letter-spacing: -0.02em;
color: var(--text-primary); margin-top: 3px;
}
/* Config action bar */
.gv__bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.gv__config-select {
appearance: none; height: var(--control-h-md); padding: 0 11px;
background: var(--surface-inset); color: var(--text-primary); border: 0;
border-radius: var(--radius-md); box-shadow: var(--ring-default);
font-family: var(--font-sans); font-size: var(--text-sm); cursor: pointer;
min-width: 200px;
}
.gv__config-select:focus-visible { outline: none; box-shadow: inset 0 0 0 1px var(--accent), var(--glow-accent-sm); }
.gv__no-configs { font-size: var(--text-sm); color: var(--text-muted); }
.gv__bar-delete { margin-left: auto; }
/* Loading */
.gv__loading { display: flex; align-items: center; justify-content: center; padding: 60px; }
.gv__spinner {
width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--accent);
border-top-color: transparent; animation: gv-spin 0.6s linear infinite;
}
@keyframes gv-spin { to { transform: rotate(360deg); } }
/* Presets */
.gv__presets { display: flex; align-items: center; gap: 6px; }
.gv__presets-label { font-size: var(--text-xs); color: var(--text-tertiary); }
.gv__preset-btn {
height: 26px; padding: 0 10px; border: 0; border-radius: var(--radius-sm);
background: var(--surface-raised-2); color: var(--text-secondary);
font-size: var(--text-xs); font-weight: 600; cursor: pointer;
box-shadow: var(--ring-default); transition: var(--transition-colors);
}
.gv__preset-btn:hover { background: var(--surface-active); color: var(--text-primary); }
/* Rate rows */
.gv__rate-list { display: flex; flex-direction: column; gap: 12px; }
.gv__rate-row { display: flex; align-items: center; gap: 12px; }
.gv__rate-label { font-size: var(--text-sm); color: var(--text-primary); width: 120px; flex: none; }
.gv__slider { flex: 1; cursor: pointer; }
.gv__rate-num {
width: 72px; height: var(--control-h-sm); flex: none;
text-align: center; font-family: var(--font-mono); font-variant-numeric: tabular-nums;
}
.gv__rate-unit { font-size: var(--text-xs); color: var(--text-tertiary); width: 12px; flex: none; }
/* Shared token inputs */
.cc-textarea {
width: 100%; background: var(--surface-inset); color: var(--text-primary);
border: 0; border-radius: var(--radius-md); box-shadow: var(--ring-default);
padding: 9px 11px; font-family: var(--font-sans); font-size: var(--text-sm);
resize: none; outline: 0; line-height: 1.5;
}
.cc-textarea:focus-visible { box-shadow: inset 0 0 0 1px var(--accent), var(--glow-accent-sm); }
.cc-text-input {
width: 100%; height: var(--control-h-md); background: var(--surface-inset); color: var(--text-primary);
border: 0; border-radius: var(--radius-md); box-shadow: var(--ring-default);
padding: 0 11px; font-family: var(--font-sans); font-size: var(--text-sm); outline: 0;
}
.cc-text-input:focus-visible { box-shadow: inset 0 0 0 1px var(--accent), var(--glow-accent-sm); }
.cc-num-input {
width: 100%; height: var(--control-h-md); background: var(--surface-inset); color: var(--text-primary);
border: 0; border-radius: var(--radius-md); box-shadow: var(--ring-default);
padding: 0 11px; font-family: var(--font-sans); font-size: var(--text-sm); outline: 0;
}
.cc-num-input:focus-visible { box-shadow: inset 0 0 0 1px var(--accent), var(--glow-accent-sm); }
/* Fields */
.gv__field { display: flex; flex-direction: column; gap: 6px; }
.gv__field-label { font-size: var(--text-xs); font-weight: 600; color: var(--text-secondary); }
/* Modal */
.gv__modal-backdrop {
position: fixed; inset: 0; background: rgba(0,0,0,0.55); z-index: 50;
display: flex; align-items: center; justify-content: center; padding: 16px;
}
.gv__modal {
background: var(--surface-base); border-radius: var(--radius-lg); box-shadow: var(--ring-default);
width: 100%; max-width: 440px; padding: 24px; display: flex; flex-direction: column; gap: 16px;
}
.gv__modal-title { font-size: var(--text-lg); font-weight: 700; color: var(--text-primary); }
.gv__modal-desc { font-size: var(--text-sm); color: var(--text-tertiary); line-height: 1.5; }
.gv__modal-body { display: flex; flex-direction: column; gap: 12px; }
.gv__modal-footer { display: flex; justify-content: flex-end; gap: 8px; }
</style>

959
frontend/src/views/admin/KitsView.vue
View File

File diff suppressed because it is too large Load Diff

659
frontend/src/views/admin/LootBuilderView.vue
View File

@@ -1,12 +1,19 @@
<script setup lang="ts"> <script setup lang="ts">
import { ref, onMounted } from 'vue' import { ref, computed, onMounted } from 'vue'
import { useLootStore } from '@/stores/loot' import { useLootStore } from '@/stores/loot'
import { useToastStore } from '@/stores/toast' import { useToastStore } from '@/stores/toast'
import LootContainerSidebar from '@/components/loot/LootContainerSidebar.vue' import LootContainerSidebar from '@/components/loot/LootContainerSidebar.vue'
import LootItemEditor from '@/components/loot/LootItemEditor.vue' import LootItemEditor from '@/components/loot/LootItemEditor.vue'
import LootGroupEditor from '@/components/loot/LootGroupEditor.vue' import LootGroupEditor from '@/components/loot/LootGroupEditor.vue'
import LootItemPicker from '@/components/loot/LootItemPicker.vue' import LootItemPicker from '@/components/loot/LootItemPicker.vue'
import { Save, Upload, Download, Play, Copy, Trash2, Plus, Layers } 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 Icon from '@/components/ds/core/Icon.vue'
import EmptyState from '@/components/ds/feedback/EmptyState.vue'
import Tabs from '@/components/ds/navigation/Tabs.vue'
import DsSelect from '@/components/ds/forms/Select.vue'
import DsInput from '@/components/ds/forms/Input.vue'
const loot = useLootStore() const loot = useLootStore()
const toast = useToastStore() const toast = useToastStore()
@@ -24,6 +31,20 @@ const activeTab = ref<'items' | 'groups'>('items')
const multipliers = [1, 2, 5, 10] const multipliers = [1, 2, 5, 10]
const tabItems = [
{ value: 'items', label: 'Container items' },
{ value: 'groups', label: 'Loot groups', icon: 'layers' },
]
// Profile selector options for DS Select
const profileOptions = computed(() =>
loot.profiles.map(p => ({
value: p.id,
label: p.profile_name + (p.is_active ? ' (active)' : ''),
}))
)
const currentProfileId = computed(() => loot.currentProfile?.id ?? '')
onMounted(async () => { onMounted(async () => {
await loot.fetchProfiles() await loot.fetchProfiles()
if (loot.profiles.length > 0 && loot.profiles[0]) { if (loot.profiles.length > 0 && loot.profiles[0]) {
@@ -130,145 +151,139 @@ function handleAddItem(shortname: string) {
</script> </script>
<template> <template>
<div class="p-6 space-y-4"> <div class="lb-root">
<!-- Header --> <!-- Page header -->
<div class="flex items-center justify-between"> <div class="lb-header">
<h1 class="text-2xl font-bold text-neutral-100">Loot Builder</h1> <div class="lb-header__left">
<div class="flex items-center gap-2"> <h1 class="lb-title">Loot builder</h1>
<button <Badge v-if="loot.isDirty" tone="warn">Unsaved changes</Badge>
@click="showCreateModal = true"
class="flex items-center gap-2 px-3 py-2 bg-neutral-800 text-neutral-300 rounded-lg hover:bg-neutral-700 text-sm"
>
<Plus class="w-4 h-4" />
New Profile
</button>
</div> </div>
<Button size="sm" variant="secondary" icon="plus" @click="showCreateModal = true">
New profile
</Button>
</div> </div>
<!-- Profile Bar --> <!-- Profile toolbar -->
<div class="bg-neutral-900 border border-neutral-800 rounded-xl p-4"> <Panel>
<div class="flex items-center gap-3 flex-wrap"> <div class="lb-toolbar">
<!-- Profile Selector --> <!-- Profile selector -->
<select <div class="lb-toolbar__profile">
v-if="loot.profiles.length > 0" <DsSelect
:value="loot.currentProfile?.id || ''" v-if="loot.profiles.length > 0"
@change="handleProfileChange(($event.target as HTMLSelectElement).value)" :options="profileOptions"
class="bg-neutral-800 border border-neutral-700 text-neutral-200 rounded-lg px-3 py-2 text-sm min-w-[200px]" :model-value="currentProfileId"
> @update:model-value="(v: string | undefined) => { if (v) handleProfileChange(v) }"
<option v-for="p in loot.profiles" :key="p.id" :value="p.id"> />
{{ p.profile_name }} <span v-else class="lb-toolbar__empty">No profiles yet</span>
<template v-if="p.is_active"> (Active)</template>
</option>
</select>
<span v-else class="text-neutral-500 text-sm">No profiles yet</span>
<!-- Save -->
<button
@click="loot.saveCurrentProfile()"
:disabled="!loot.currentProfile || !loot.isDirty || loot.isSaving"
class="flex items-center gap-2 px-3 py-2 bg-oxide-500 text-white rounded-lg hover:bg-oxide-600 disabled:opacity-50 disabled:cursor-not-allowed text-sm"
>
<Save class="w-4 h-4" />
{{ loot.isSaving ? 'Saving...' : 'Save' }}
</button>
<!-- Apply Dropdown -->
<div class="relative">
<button
@click="showApplyDropdown = !showApplyDropdown"
:disabled="!loot.currentProfile || loot.isApplying"
class="flex items-center gap-2 px-3 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 disabled:opacity-50 disabled:cursor-not-allowed text-sm"
>
<Play class="w-4 h-4" />
{{ loot.isApplying ? 'Applying...' : 'Apply to Server' }}
</button>
<div
v-if="showApplyDropdown"
class="absolute top-full mt-1 right-0 bg-neutral-800 border border-neutral-700 rounded-lg shadow-xl z-10 py-1 min-w-[140px]"
>
<button
v-for="m in multipliers"
:key="m"
@click="handleApply(m)"
class="w-full text-left px-4 py-2 text-sm text-neutral-300 hover:bg-neutral-700"
>
{{ m }}x Multiplier
</button>
</div>
</div> </div>
<!-- Duplicate --> <div class="lb-toolbar__actions">
<button <!-- Save -->
@click="handleDuplicate" <Button
:disabled="!loot.currentProfile" size="sm"
class="flex items-center gap-2 px-3 py-2 bg-neutral-800 text-neutral-300 rounded-lg hover:bg-neutral-700 disabled:opacity-50 text-sm" variant="primary"
> icon="save"
<Copy class="w-4 h-4" /> :disabled="!loot.currentProfile || !loot.isDirty || loot.isSaving"
Duplicate :loading="loot.isSaving"
</button> @click="loot.saveCurrentProfile()"
>
{{ loot.isSaving ? 'Saving…' : 'Save' }}
</Button>
<!-- Import --> <!-- Apply to server with multiplier dropdown -->
<button <div class="lb-apply-wrap">
@click="showImportModal = true" <Button
class="flex items-center gap-2 px-3 py-2 bg-neutral-800 text-neutral-300 rounded-lg hover:bg-neutral-700 text-sm" size="sm"
> variant="outline"
<Upload class="w-4 h-4" /> icon="play"
Import :disabled="!loot.currentProfile || loot.isApplying"
</button> :loading="loot.isApplying"
@click="showApplyDropdown = !showApplyDropdown"
>
{{ loot.isApplying ? 'Applying…' : 'Apply to server' }}
</Button>
<div v-if="showApplyDropdown" class="lb-dropdown">
<button
v-for="m in multipliers"
:key="m"
class="lb-dropdown__item"
@click="handleApply(m)"
>
{{ m }}x multiplier
</button>
</div>
</div>
<!-- Export --> <!-- Duplicate -->
<button <Button
@click="handleExport" size="sm"
:disabled="!loot.currentProfile" variant="ghost"
class="flex items-center gap-2 px-3 py-2 bg-neutral-800 text-neutral-300 rounded-lg hover:bg-neutral-700 disabled:opacity-50 text-sm" icon="copy"
> :disabled="!loot.currentProfile"
<Download class="w-4 h-4" /> @click="handleDuplicate"
Export >
</button> Duplicate
</Button>
<!-- Delete --> <!-- Import -->
<button <Button
@click="handleDeleteProfile" size="sm"
:disabled="!loot.currentProfile" variant="ghost"
class="flex items-center gap-2 px-3 py-2 bg-red-500/10 text-red-400 rounded-lg hover:bg-red-500/20 disabled:opacity-50 text-sm ml-auto" icon="upload"
> @click="showImportModal = true"
<Trash2 class="w-4 h-4" /> >
Delete Import
</button> </Button>
<!-- Export -->
<Button
size="sm"
variant="ghost"
icon="download"
:disabled="!loot.currentProfile"
@click="handleExport"
>
Export
</Button>
<!-- Delete -->
<Button
size="sm"
variant="danger-soft"
icon="trash-2"
:disabled="!loot.currentProfile"
@click="handleDeleteProfile"
>
Delete
</Button>
</div>
</div> </div>
</Panel>
<!-- Loading -->
<div v-if="loot.isLoading" class="lb-loading">
<Icon name="loader" :size="28" class="lb-spin" />
</div> </div>
<!-- Main Content --> <!-- Main editor layout -->
<div v-if="loot.currentProfile" class="flex gap-4" style="height: calc(100vh - 250px)"> <div v-else-if="loot.currentProfile" class="lb-workspace">
<!-- Sidebar --> <!-- Container sidebar -->
<LootContainerSidebar <LootContainerSidebar
:loot-table="loot.currentProfile.loot_table" :loot-table="loot.currentProfile.loot_table"
:selected="loot.selectedContainer" :selected="loot.selectedContainer"
@select="loot.selectedContainer = $event" @select="loot.selectedContainer = $event"
/> />
<!-- Editor Area --> <!-- Editor area -->
<div class="flex-1 flex flex-col min-w-0"> <div class="lb-editor">
<!-- Tabs --> <Tabs
<div class="flex border-b border-neutral-800 mb-4"> v-model="activeTab"
<button :items="tabItems"
@click="activeTab = 'items'" variant="line"
class="px-4 py-2 text-sm font-medium border-b-2 transition-colors" class="lb-tabs"
:class="activeTab === 'items' ? 'border-oxide-500 text-oxide-400' : 'border-transparent text-neutral-500 hover:text-neutral-300'" />
>
Container Items
</button>
<button
@click="activeTab = 'groups'"
class="px-4 py-2 text-sm font-medium border-b-2 transition-colors flex items-center gap-2"
:class="activeTab === 'groups' ? 'border-oxide-500 text-oxide-400' : 'border-transparent text-neutral-500 hover:text-neutral-300'"
>
<Layers class="w-4 h-4" />
Loot Groups
</button>
</div>
<div class="flex-1 overflow-y-auto"> <div class="lb-editor__body">
<LootItemEditor <LootItemEditor
v-if="activeTab === 'items' && loot.selectedContainer" v-if="activeTab === 'items' && loot.selectedContainer"
:container-key="loot.selectedContainer" :container-key="loot.selectedContainer"
@@ -276,8 +291,12 @@ function handleAddItem(shortname: string) {
@dirty="loot.markDirty()" @dirty="loot.markDirty()"
@add-item="showItemPicker = true" @add-item="showItemPicker = true"
/> />
<div v-else-if="activeTab === 'items'" class="flex items-center justify-center h-full text-neutral-500"> <div v-else-if="activeTab === 'items'" class="lb-editor__placeholder">
Select a container from the sidebar <EmptyState
icon="box"
title="No container selected"
description="Select a container from the sidebar to configure its loot."
/>
</div> </div>
<LootGroupEditor <LootGroupEditor
@@ -289,98 +308,103 @@ function handleAddItem(shortname: string) {
</div> </div>
</div> </div>
<!-- Empty State --> <!-- Empty state — no profile -->
<div v-else-if="!loot.isLoading" class="bg-neutral-900 border border-neutral-800 rounded-xl p-12 text-center"> <div v-else class="lb-empty-wrap">
<Layers class="w-12 h-12 text-neutral-600 mx-auto mb-4" /> <Panel>
<h2 class="text-lg font-semibold text-neutral-300 mb-2">No Loot Profile Selected</h2> <EmptyState
<p class="text-neutral-500 mb-4">Create a new profile or select one from the dropdown above.</p> icon="layers"
<button title="No loot profile selected"
@click="showCreateModal = true" description="Create a new profile or select one above."
class="px-4 py-2 bg-oxide-500 text-white rounded-lg hover:bg-oxide-600" >
> <template #action>
Create First Profile <Button icon="plus" @click="showCreateModal = true">Create first profile</Button>
</button> </template>
</EmptyState>
</Panel>
</div> </div>
<!-- Loading --> <!-- Create profile modal -->
<div v-if="loot.isLoading" class="flex items-center justify-center py-20"> <Teleport to="body">
<div class="animate-spin w-8 h-8 border-2 border-oxide-500 border-t-transparent rounded-full" /> <div v-if="showCreateModal" class="lb-overlay" @click.self="showCreateModal = false">
</div> <div class="lb-modal">
<div class="lb-modal__head">
<!-- Create Modal --> <span class="lb-modal__title">New loot profile</span>
<div v-if="showCreateModal" class="fixed inset-0 bg-black/60 z-50 flex items-center justify-center p-4" @click.self="showCreateModal = false"> <button class="lb-modal__close" @click="showCreateModal = false" aria-label="Close">
<div class="bg-neutral-900 border border-neutral-800 rounded-xl p-6 w-full max-w-md"> <Icon name="x" :size="16" />
<h2 class="text-lg font-semibold text-neutral-100 mb-4">New Loot Profile</h2> </button>
<div class="space-y-4"> </div>
<div> <div class="lb-modal__body">
<label class="block text-sm text-neutral-400 mb-1">Profile Name</label> <DsInput
<input
v-model="newProfileName" v-model="newProfileName"
label="Profile name"
placeholder="e.g. Vanilla 2x" placeholder="e.g. Vanilla 2x"
class="w-full bg-neutral-800 border border-neutral-700 rounded-lg px-3 py-2 text-neutral-200 text-sm"
@keydown.enter="handleCreateProfile" @keydown.enter="handleCreateProfile"
/> />
<div class="lb-field">
<label class="lb-field__label">Description <span class="lb-field__opt">(optional)</span></label>
<textarea
v-model="newProfileDesc"
rows="2"
placeholder="What is this profile for?"
class="cc-textarea"
/>
</div>
</div> </div>
<div> <div class="lb-modal__foot">
<label class="block text-sm text-neutral-400 mb-1">Description (optional)</label> <Button variant="ghost" size="sm" @click="showCreateModal = false">Cancel</Button>
<textarea <Button
v-model="newProfileDesc" size="sm"
rows="2"
placeholder="What is this profile for?"
class="w-full bg-neutral-800 border border-neutral-700 rounded-lg px-3 py-2 text-neutral-200 text-sm resize-none"
/>
</div>
<div class="flex justify-end gap-2">
<button @click="showCreateModal = false" class="px-4 py-2 text-sm text-neutral-400 hover:text-neutral-200">Cancel</button>
<button
@click="handleCreateProfile"
:disabled="!newProfileName.trim()" :disabled="!newProfileName.trim()"
class="px-4 py-2 bg-oxide-500 text-white rounded-lg hover:bg-oxide-600 disabled:opacity-50 text-sm" @click="handleCreateProfile"
> >
Create Create
</button> </Button>
</div> </div>
</div> </div>
</div> </div>
</div> </Teleport>
<!-- Import Modal --> <!-- Import modal -->
<div v-if="showImportModal" class="fixed inset-0 bg-black/60 z-50 flex items-center justify-center p-4" @click.self="showImportModal = false"> <Teleport to="body">
<div class="bg-neutral-900 border border-neutral-800 rounded-xl p-6 w-full max-w-lg"> <div v-if="showImportModal" class="lb-overlay" @click.self="showImportModal = false">
<h2 class="text-lg font-semibold text-neutral-100 mb-4">Import Loot Profile</h2> <div class="lb-modal lb-modal--wide">
<div class="space-y-4"> <div class="lb-modal__head">
<div> <span class="lb-modal__title">Import loot profile</span>
<label class="block text-sm text-neutral-400 mb-1">Profile Name</label> <button class="lb-modal__close" @click="showImportModal = false" aria-label="Close">
<input <Icon name="x" :size="16" />
</button>
</div>
<div class="lb-modal__body">
<DsInput
v-model="importName" v-model="importName"
label="Profile name"
placeholder="Name for imported profile" placeholder="Name for imported profile"
class="w-full bg-neutral-800 border border-neutral-700 rounded-lg px-3 py-2 text-neutral-200 text-sm"
/> />
<div class="lb-field">
<label class="lb-field__label">BetterLoot JSON</label>
<textarea
v-model="importJson"
rows="10"
placeholder="Paste LootTables.json content here…"
class="cc-textarea cc-textarea--mono"
/>
</div>
</div> </div>
<div> <div class="lb-modal__foot">
<label class="block text-sm text-neutral-400 mb-1">BetterLoot JSON</label> <Button variant="ghost" size="sm" @click="showImportModal = false">Cancel</Button>
<textarea <Button
v-model="importJson" size="sm"
rows="10"
placeholder="Paste LootTables.json content here..."
class="w-full bg-neutral-800 border border-neutral-700 rounded-lg px-3 py-2 text-neutral-200 text-sm font-mono resize-none"
/>
</div>
<div class="flex justify-end gap-2">
<button @click="showImportModal = false" class="px-4 py-2 text-sm text-neutral-400 hover:text-neutral-200">Cancel</button>
<button
@click="handleImport"
:disabled="!importName.trim() || !importJson.trim()" :disabled="!importName.trim() || !importJson.trim()"
class="px-4 py-2 bg-oxide-500 text-white rounded-lg hover:bg-oxide-600 disabled:opacity-50 text-sm" @click="handleImport"
> >
Import Import
</button> </Button>
</div> </div>
</div> </div>
</div> </div>
</div> </Teleport>
<!-- Item Picker Modal --> <!-- Item picker modal -->
<LootItemPicker <LootItemPicker
v-if="showItemPicker" v-if="showItemPicker"
@select="handleAddItem" @select="handleAddItem"
@@ -388,6 +412,255 @@ function handleAddItem(shortname: string) {
/> />
<!-- Click-away for apply dropdown --> <!-- Click-away for apply dropdown -->
<div v-if="showApplyDropdown" class="fixed inset-0 z-0" @click="showApplyDropdown = false" /> <div v-if="showApplyDropdown" class="lb-clickaway" @click="showApplyDropdown = false" />
</div> </div>
</template> </template>
<style scoped>
.lb-root {
display: flex;
flex-direction: column;
gap: 16px;
padding: 24px;
min-height: 0;
}
/* Header */
.lb-header {
display: flex;
align-items: center;
justify-content: space-between;
}
.lb-header__left {
display: flex;
align-items: center;
gap: 10px;
}
.lb-title {
font-size: var(--text-lg);
font-weight: 700;
color: var(--text-primary);
}
/* Toolbar inside Panel */
.lb-toolbar {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
}
.lb-toolbar__profile {
min-width: 200px;
flex: none;
}
.lb-toolbar__empty {
font-size: var(--text-sm);
color: var(--text-tertiary);
}
.lb-toolbar__actions {
display: flex;
align-items: center;
gap: 6px;
flex-wrap: wrap;
margin-left: auto;
}
/* Apply dropdown */
.lb-apply-wrap {
position: relative;
}
.lb-dropdown {
position: absolute;
top: calc(100% + 4px);
right: 0;
z-index: 40;
background: var(--surface-raised);
border-radius: var(--radius-md);
box-shadow: var(--shadow-lg);
padding: 4px;
min-width: 150px;
display: flex;
flex-direction: column;
}
.lb-dropdown__item {
background: transparent;
border: 0;
padding: 8px 12px;
font-family: var(--font-sans);
font-size: var(--text-sm);
color: var(--text-primary);
cursor: pointer;
text-align: left;
border-radius: var(--radius-sm);
transition: var(--transition-colors);
}
.lb-dropdown__item:hover {
background: var(--surface-hover);
}
/* Loading */
.lb-loading {
display: flex;
align-items: center;
justify-content: center;
padding: 80px 0;
color: var(--accent);
}
.lb-spin {
animation: lb-spin 0.7s linear infinite;
}
@keyframes lb-spin { to { transform: rotate(360deg); } }
/* Workspace (sidebar + editor) */
.lb-workspace {
display: flex;
gap: 16px;
flex: 1;
min-height: 0;
height: calc(100vh - 260px);
}
/* Editor column */
.lb-editor {
flex: 1;
display: flex;
flex-direction: column;
min-width: 0;
}
.lb-tabs {
margin-bottom: 4px;
}
.lb-editor__body {
flex: 1;
overflow-y: auto;
padding-top: 12px;
}
.lb-editor__placeholder {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
}
/* Empty state wrapper */
.lb-empty-wrap {}
/* Click-away backdrop */
.lb-clickaway {
position: fixed;
inset: 0;
z-index: 0;
}
/* Modal overlay */
.lb-overlay {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.6);
z-index: 50;
display: flex;
align-items: center;
justify-content: center;
padding: 16px;
}
.lb-modal {
background: var(--surface-raised);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-xl);
width: 100%;
max-width: 420px;
display: flex;
flex-direction: column;
gap: 0;
}
.lb-modal--wide {
max-width: 560px;
}
.lb-modal__head {
display: flex;
align-items: center;
justify-content: space-between;
padding: 16px 20px 14px;
border-bottom: 1px solid var(--border-subtle);
}
.lb-modal__title {
font-size: var(--text-sm);
font-weight: 600;
color: var(--text-primary);
}
.lb-modal__close {
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
border: 0;
background: transparent;
border-radius: var(--radius-sm);
cursor: pointer;
color: var(--text-secondary);
transition: var(--transition-colors);
}
.lb-modal__close:hover {
background: var(--surface-hover);
color: var(--text-primary);
}
.lb-modal__body {
padding: 20px;
display: flex;
flex-direction: column;
gap: 16px;
}
.lb-modal__foot {
display: flex;
justify-content: flex-end;
gap: 8px;
padding: 14px 20px 16px;
border-top: 1px solid var(--border-subtle);
}
/* Field (textarea wrapper) */
.lb-field {
display: flex;
flex-direction: column;
gap: 6px;
}
.lb-field__label {
font-size: var(--text-xs);
font-weight: 600;
color: var(--text-secondary);
}
.lb-field__opt {
font-weight: 400;
color: var(--text-muted);
margin-left: 3px;
}
/* Bare textarea with token styling */
.cc-textarea {
width: 100%;
background: var(--surface-inset);
border: 0;
border-radius: var(--radius-md);
box-shadow: var(--ring-default);
padding: 9px 11px;
font-family: var(--font-sans);
font-size: var(--text-sm);
color: var(--text-primary);
resize: none;
outline: none;
transition: var(--transition-colors);
line-height: var(--leading-relaxed);
}
.cc-textarea::placeholder {
color: var(--text-muted);
}
.cc-textarea:focus-within,
.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>

220
frontend/src/views/admin/PluginConfigsView.vue
View File

@@ -11,19 +11,13 @@ import { useFurnaceSplitterStore } from '@/stores/furnacesplitter'
import { useBetterChatStore } from '@/stores/betterchat' import { useBetterChatStore } from '@/stores/betterchat'
import { useTimedExecuteStore } from '@/stores/timedexecute' import { useTimedExecuteStore } from '@/stores/timedexecute'
import { useRaidableBasesStore } from '@/stores/raidablebases' import { useRaidableBasesStore } from '@/stores/raidablebases'
import {
Crosshair, import Panel from '@/components/ds/data/Panel.vue'
Navigation2, import Button from '@/components/ds/core/Button.vue'
Pickaxe, import Icon from '@/components/ds/core/Icon.vue'
DoorOpen, import Badge from '@/components/ds/core/Badge.vue'
Gift, import Input from '@/components/ds/forms/Input.vue'
Flame, import EmptyState from '@/components/ds/feedback/EmptyState.vue'
MessageSquare,
Clock,
Swords,
Search,
ArrowRight,
} from 'lucide-vue-next'
const router = useRouter() const router = useRouter()
const auth = useAuthStore() const auth = useAuthStore()
@@ -45,7 +39,7 @@ interface PluginDef {
key: string key: string
name: string name: string
description: string description: string
icon: any icon: string
path: string path: string
permission: string permission: string
getConfigs: () => any[] getConfigs: () => any[]
@@ -53,15 +47,15 @@ interface PluginDef {
} }
const plugins: PluginDef[] = [ const plugins: PluginDef[] = [
{ key: 'loot', name: 'Loot Tables', description: 'Configure loot container drop tables and item probabilities', icon: Crosshair, path: '/loot-builder', permission: 'loot.view', getConfigs: () => lootStore.profiles, fetchFn: () => lootStore.fetchProfiles() }, { key: 'loot', name: 'Loot tables', description: 'Configure loot container drop tables and item probabilities', icon: 'crosshair', path: '/loot-builder', permission: 'loot.view', getConfigs: () => lootStore.profiles, fetchFn: () => lootStore.fetchProfiles() },
{ key: 'teleport', name: 'Teleport', description: 'Home locations, TPR cooldowns, and VIP teleport settings', icon: Navigation2, path: '/teleport-config', permission: 'teleport.view', getConfigs: () => teleportStore.configs, fetchFn: () => teleportStore.fetchConfigs() }, { key: 'teleport', name: 'Teleport', description: 'Home locations, TPR cooldowns, and VIP teleport settings', icon: 'navigation', path: '/teleport-config', permission: 'teleport.view', getConfigs: () => teleportStore.configs, fetchFn: () => teleportStore.fetchConfigs() },
{ key: 'gather', name: 'Gather Rates', description: 'Resource gathering multipliers and pickup rates', icon: Pickaxe, path: '/gather-manager', permission: 'gather.view', getConfigs: () => gatherStore.configs, fetchFn: () => gatherStore.fetchConfigs() }, { key: 'gather', name: 'Gather rates', description: 'Resource gathering multipliers and pickup rates', icon: 'pickaxe', path: '/gather-manager', permission: 'gather.view', getConfigs: () => gatherStore.configs, fetchFn: () => gatherStore.fetchConfigs() },
{ key: 'autodoors', name: 'Auto Doors', description: 'Automatic door closing delays and permissions', icon: DoorOpen, path: '/autodoors', permission: 'autodoors.view', getConfigs: () => autoDoorsStore.configs, fetchFn: () => autoDoorsStore.fetchConfigs() }, { key: 'autodoors', name: 'Auto doors', description: 'Automatic door closing delays and permissions', icon: 'door-open', path: '/autodoors', permission: 'autodoors.view', getConfigs: () => autoDoorsStore.configs, fetchFn: () => autoDoorsStore.fetchConfigs() },
{ key: 'kits', name: 'Kits', description: 'Player kits with items, cooldowns, and permissions', icon: Gift, path: '/kits', permission: 'kits.view', getConfigs: () => kitsStore.configs, fetchFn: () => kitsStore.fetchConfigs() }, { key: 'kits', name: 'Kits', description: 'Player kits with items, cooldowns, and permissions', icon: 'gift', path: '/kits', permission: 'kits.view', getConfigs: () => kitsStore.configs, fetchFn: () => kitsStore.fetchConfigs() },
{ key: 'furnacesplitter', name: 'Furnace Splitter', description: 'Automatic furnace ore splitting and smelting config', icon: Flame, path: '/furnace-splitter', permission: 'furnacesplitter.view', getConfigs: () => furnaceSplitterStore.configs, fetchFn: () => furnaceSplitterStore.fetchConfigs() }, { key: 'furnacesplitter', name: 'Furnace splitter', description: 'Automatic furnace ore splitting and smelting config', icon: 'flame', path: '/furnace-splitter', permission: 'furnacesplitter.view', getConfigs: () => furnaceSplitterStore.configs, fetchFn: () => furnaceSplitterStore.fetchConfigs() },
{ key: 'betterchat', name: 'Better Chat', description: 'Chat formatting, group colors, and title prefixes', icon: MessageSquare, path: '/better-chat', permission: 'betterchat.view', getConfigs: () => betterChatStore.configs, fetchFn: () => betterChatStore.fetchConfigs() }, { key: 'betterchat', name: 'Better Chat', description: 'Chat formatting, group colors, and title prefixes', icon: 'message-square', path: '/better-chat', permission: 'betterchat.view', getConfigs: () => betterChatStore.configs, fetchFn: () => betterChatStore.fetchConfigs() },
{ key: 'timedexecute', name: 'Timed Execute', description: 'Scheduled, real-time, and event-driven command execution', icon: Clock, path: '/timed-execute', permission: 'timedexecute.view', getConfigs: () => timedExecuteStore.configs, fetchFn: () => timedExecuteStore.fetchConfigs() }, { key: 'timedexecute', name: 'Timed Execute', description: 'Scheduled, real-time, and event-driven command execution', icon: 'clock', path: '/timed-execute', permission: 'timedexecute.view', getConfigs: () => timedExecuteStore.configs, fetchFn: () => timedExecuteStore.fetchConfigs() },
{ key: 'raidablebases', name: 'Raidable Bases', description: 'PVE raid events, difficulty, NPCs, and loot settings', icon: Swords, path: '/raidable-bases', permission: 'raidablebases.view', getConfigs: () => raidableBasesStore.configs, fetchFn: () => raidableBasesStore.fetchConfigs() }, { key: 'raidablebases', name: 'Raidable Bases', description: 'PVE raid events, difficulty, NPCs, and loot settings', icon: 'swords', path: '/raidable-bases', permission: 'raidablebases.view', getConfigs: () => raidableBasesStore.configs, fetchFn: () => raidableBasesStore.fetchConfigs() },
] ]
const visiblePlugins = computed(() => const visiblePlugins = computed(() =>
@@ -76,12 +70,12 @@ const filteredPlugins = computed(() => {
) )
}) })
function getStatus(plugin: PluginDef): { label: string; color: string } { function getStatus(plugin: PluginDef): { label: string; tone: 'online' | 'info' | 'neutral' } {
const configs = plugin.getConfigs() const configs = plugin.getConfigs()
if (!configs || configs.length === 0) return { label: 'Not Configured', color: 'neutral' } if (!configs || configs.length === 0) return { label: 'Not configured', tone: 'neutral' }
const hasActive = configs.some((c: any) => c.is_active) const hasActive = configs.some((c: any) => c.is_active)
if (hasActive) return { label: 'Active', color: 'green' } if (hasActive) return { label: 'Active', tone: 'online' }
return { label: 'Configured', color: 'blue' } return { label: 'Configured', tone: 'info' }
} }
function getConfigCount(plugin: PluginDef): string { function getConfigCount(plugin: PluginDef): string {
@@ -90,6 +84,12 @@ function getConfigCount(plugin: PluginDef): string {
return `${configs.length} profile${configs.length !== 1 ? 's' : ''}` return `${configs.length} profile${configs.length !== 1 ? 's' : ''}`
} }
// Search model — DS Input uses string v-model
const searchModel = computed<string>({
get: () => searchQuery.value,
set: (v: string | undefined) => { searchQuery.value = v ?? '' },
})
onMounted(async () => { onMounted(async () => {
const fetches = visiblePlugins.value.map(p => p.fetchFn().catch(() => {})) const fetches = visiblePlugins.value.map(p => p.fetchFn().catch(() => {}))
await Promise.all(fetches) await Promise.all(fetches)
@@ -98,88 +98,142 @@ onMounted(async () => {
</script> </script>
<template> <template>
<div class="p-6 max-w-7xl mx-auto"> <div class="pc">
<!-- Header --> <!-- Page head -->
<div class="mb-6"> <div class="pc__head">
<h1 class="text-2xl font-bold text-white">Plugin Configs</h1> <div class="pc__head-id">
<p class="text-neutral-400 mt-1">Configure and manage your server plugins</p> <div class="pc__head-chip">
<Icon name="puzzle" :size="20" :stroke-width="2" />
</div>
<div>
<div class="t-eyebrow">Plugin management</div>
<h1 class="pc__title">Plugin configs</h1>
</div>
</div>
</div> </div>
<!-- Search --> <!-- Search -->
<div class="relative mb-6"> <Input
<Search class="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-neutral-500" /> v-model="searchModel"
<input icon="search"
v-model="searchQuery" placeholder="Search plugins…"
type="text" />
placeholder="Search plugins..."
class="w-full pl-10 pr-4 py-2 bg-neutral-900 border border-neutral-800 rounded-lg text-sm text-neutral-200 placeholder-neutral-500 focus:outline-none focus:border-oxide-500 transition-colors"
/>
</div>
<!-- Loading --> <!-- Loading skeleton -->
<div v-if="loading" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4"> <div v-if="loading" class="pc__grid">
<div <div
v-for="i in visiblePlugins.length" v-for="i in visiblePlugins.length"
:key="i" :key="i"
class="bg-neutral-900 border border-neutral-800 rounded-lg p-5 animate-pulse" class="pc__skeleton"
> >
<div class="flex items-center gap-3 mb-3"> <div class="pc__skel-icon" />
<div class="w-10 h-10 bg-neutral-800 rounded-lg" /> <div class="pc__skel-lines">
<div class="flex-1"> <div class="pc__skel-line pc__skel-line--name" />
<div class="h-4 w-24 bg-neutral-800 rounded" /> <div class="pc__skel-line pc__skel-line--sub" />
<div class="h-3 w-16 bg-neutral-800 rounded mt-2" />
</div>
</div> </div>
<div class="h-3 w-full bg-neutral-800 rounded mt-3" />
<div class="h-3 w-2/3 bg-neutral-800 rounded mt-2" />
</div> </div>
</div> </div>
<!-- Cards --> <!-- Cards grid -->
<div v-else-if="filteredPlugins.length" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4"> <div v-else-if="filteredPlugins.length" class="pc__grid">
<div <div
v-for="plugin in filteredPlugins" v-for="plugin in filteredPlugins"
:key="plugin.key" :key="plugin.key"
class="bg-neutral-900 border border-neutral-800 rounded-lg p-5 hover:border-neutral-700 transition-colors group" class="pc__card"
> >
<div class="flex items-start justify-between mb-3"> <!-- Card head -->
<div class="flex items-center gap-3"> <div class="pc__card-head">
<div class="w-10 h-10 bg-neutral-800 rounded-lg flex items-center justify-center group-hover:bg-oxide-500/10 transition-colors"> <div class="pc__card-id">
<component :is="plugin.icon" class="w-5 h-5 text-neutral-400 group-hover:text-oxide-400 transition-colors" /> <div class="pc__card-icon">
<Icon :name="plugin.icon" :size="18" :stroke-width="2" />
</div> </div>
<div> <div>
<h3 class="text-sm font-semibold text-white">{{ plugin.name }}</h3> <div class="pc__card-name">{{ plugin.name }}</div>
<span class="text-xs text-neutral-500">{{ getConfigCount(plugin) }}</span> <div class="pc__card-count">{{ getConfigCount(plugin) }}</div>
</div> </div>
</div> </div>
<!-- Status badge --> <Badge :tone="getStatus(plugin).tone">{{ getStatus(plugin).label }}</Badge>
<span
class="text-[10px] font-medium px-2 py-0.5 rounded-full"
:class="{
'bg-green-500/10 text-green-400': getStatus(plugin).color === 'green',
'bg-blue-500/10 text-blue-400': getStatus(plugin).color === 'blue',
'bg-neutral-800 text-neutral-500': getStatus(plugin).color === 'neutral',
}"
>
{{ getStatus(plugin).label }}
</span>
</div> </div>
<p class="text-xs text-neutral-400 mb-4 line-clamp-2">{{ plugin.description }}</p> <!-- Description -->
<p class="pc__card-desc">{{ plugin.description }}</p>
<button <!-- Configure button -->
<Button
variant="secondary"
size="sm"
icon-right="chevron-right"
:block="true"
@click="router.push(plugin.path)" @click="router.push(plugin.path)"
class="w-full flex items-center justify-center gap-2 px-3 py-2 bg-neutral-800 hover:bg-oxide-500/10 text-neutral-300 hover:text-oxide-400 text-xs font-medium rounded-lg transition-colors" >Configure</Button>
>
Configure
<ArrowRight class="w-3 h-3" />
</button>
</div> </div>
</div> </div>
<!-- Empty state --> <!-- Empty state (search miss) -->
<div v-else class="text-center py-12"> <Panel v-else>
<p class="text-neutral-500">No plugins match your search.</p> <EmptyState
</div> icon="search"
title="No plugins match"
description="Try a different search term."
/>
</Panel>
</div> </div>
</template> </template>
<style scoped>
/* ---- Page shell ---- */
.pc { max-width: 1100px; margin: 0 auto; display: flex; flex-direction: column; gap: 16px; }
/* ---- Page head ---- */
.pc__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.pc__head-id { display: flex; align-items: center; gap: 12px; }
.pc__head-chip {
width: 40px; height: 40px; flex: none; border-radius: var(--radius-md);
display: flex; align-items: center; justify-content: center;
color: var(--accent); background: var(--accent-soft);
box-shadow: inset 0 0 0 1px var(--accent-border);
}
.pc__title {
font-size: var(--text-2xl); font-weight: 700; letter-spacing: -0.02em;
color: var(--text-primary); margin-top: 3px;
}
/* ---- Grid ---- */
.pc__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
@media (max-width: 900px) { .pc__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .pc__grid { grid-template-columns: 1fr; } }
/* ---- Card ---- */
.pc__card {
background: var(--surface-base); border-radius: var(--radius-lg); box-shadow: var(--ring-default);
padding: 16px; display: flex; flex-direction: column; gap: 12px; min-width: 0;
transition: var(--transition-colors);
}
.pc__card:hover { background: var(--surface-raised); }
.pc__card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.pc__card-id { display: flex; align-items: center; gap: 10px; min-width: 0; }
.pc__card-icon {
width: 36px; height: 36px; flex: none; border-radius: var(--radius-md);
display: flex; align-items: center; justify-content: center;
color: var(--text-tertiary); background: var(--surface-raised-2);
box-shadow: var(--ring-default); transition: var(--transition-colors);
}
.pc__card:hover .pc__card-icon { color: var(--accent-text); background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent-border); }
.pc__card-name { font-size: var(--text-sm); font-weight: 600; color: var(--text-primary); }
.pc__card-count { font-size: var(--text-xs); color: var(--text-muted); margin-top: 2px; font-variant-numeric: tabular-nums; }
.pc__card-desc { font-size: var(--text-xs); color: var(--text-tertiary); line-height: 1.5; flex: 1; }
/* ---- Skeleton ---- */
.pc__skeleton {
background: var(--surface-base); border-radius: var(--radius-lg); box-shadow: var(--ring-default);
padding: 16px; display: flex; align-items: flex-start; gap: 12px;
animation: pc-pulse 1.4s ease-in-out infinite;
}
@keyframes pc-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .5; } }
.pc__skel-icon { width: 36px; height: 36px; border-radius: var(--radius-md); background: var(--surface-raised-2); flex: none; }
.pc__skel-lines { flex: 1; display: flex; flex-direction: column; gap: 8px; padding-top: 4px; }
.pc__skel-line { height: 10px; border-radius: var(--radius-sm); background: var(--surface-raised-2); }
.pc__skel-line--name { width: 60%; }
.pc__skel-line--sub { width: 40%; }
</style>

1588
frontend/src/views/admin/RaidableBasesView.vue
View File

File diff suppressed because it is too large Load Diff

964
frontend/src/views/admin/TeleportConfigView.vue
View File

File diff suppressed because it is too large Load Diff

782
frontend/src/views/admin/TimedExecuteView.vue
View File

@@ -1,32 +1,30 @@
<script setup lang="ts"> <script setup lang="ts">
import { ref, onMounted, computed } from 'vue' import { ref, onMounted, computed } from 'vue'
import { useTimedExecuteStore } from '@/stores/timedexecute' import { useTimedExecuteStore } from '@/stores/timedexecute'
import {
Save, import Panel from '@/components/ds/data/Panel.vue'
Play, import Button from '@/components/ds/core/Button.vue'
Download, import Icon from '@/components/ds/core/Icon.vue'
Plus, import Tabs from '@/components/ds/navigation/Tabs.vue'
Trash2, import Input from '@/components/ds/forms/Input.vue'
Clock, import Select from '@/components/ds/forms/Select.vue'
Settings as SettingsIcon, import Switch from '@/components/ds/forms/Switch.vue'
UserPlus, import EmptyState from '@/components/ds/feedback/EmptyState.vue'
UserMinus,
} from 'lucide-vue-next'
const store = useTimedExecuteStore() const store = useTimedExecuteStore()
const activeTab = ref<'timed' | 'realtime' | 'connect' | 'disconnect'>('timed') const activeTab = ref<string>('timed')
const showCreateModal = ref(false) const showCreateModal = ref(false)
const showImportModal = ref(false) const showImportModal = ref(false)
const newConfigName = ref('') const newConfigName = ref('')
const newConfigDesc = ref('') const newConfigDesc = ref('')
const importConfigName = ref('') const importConfigName = ref('')
const tabs = [ const tabItems = [
{ key: 'timed', label: 'Timed Commands', icon: Clock }, { value: 'timed', label: 'Timed commands', icon: 'clock' },
{ key: 'realtime', label: 'Real-Time', icon: SettingsIcon }, { value: 'realtime', label: 'Real-time', icon: 'settings' },
{ key: 'connect', label: 'On Connect', icon: UserPlus }, { value: 'connect', label: 'On connect', icon: 'user' },
{ key: 'disconnect', label: 'On Disconnect', icon: UserMinus }, { value: 'disconnect', label: 'On disconnect', icon: 'user' },
] ]
onMounted(async () => { onMounted(async () => {
@@ -228,428 +226,438 @@ async function handleImport() {
importConfigName.value = '' importConfigName.value = ''
} }
} }
// DS Select model
const selectedConfigId = computed<string>({
get: () => store.currentConfig?.id ?? '',
set: (v: string | undefined) => { handleConfigChange(v ?? '') },
})
const configSelectOptions = computed(() =>
store.configs.map(c => ({
value: c.id,
label: c.config_name + (c.is_active ? ' (active)' : ''),
}))
)
// Switch wrappers
const enableTimerRepeat = computed<boolean>({
get: () => getConfigValue('EnableTimerRepeat', true) as boolean,
set: (v: boolean) => setConfigValue('EnableTimerRepeat', v),
})
const enableRealTimeTimer = computed<boolean>({
get: () => getConfigValue('EnableRealTime-Timer', false) as boolean,
set: (v: boolean) => setConfigValue('EnableRealTime-Timer', v),
})
// Modal bindings
const newConfigNameModel = computed<string>({
get: () => newConfigName.value,
set: (v: string | undefined) => { newConfigName.value = v ?? '' },
})
const importConfigNameModel = computed<string>({
get: () => importConfigName.value,
set: (v: string | undefined) => { importConfigName.value = v ?? '' },
})
</script> </script>
<template> <template>
<div class="p-6 space-y-6"> <div class="te">
<!-- Header --> <!-- Page head -->
<div class="flex items-center justify-between"> <div class="te__head">
<h1 class="text-2xl font-bold text-white">Timed Execute</h1> <div class="te__head-id">
<div class="flex items-center gap-3"> <div class="te__head-chip">
<button <Icon name="clock" :size="20" :stroke-width="2" />
@click="showCreateModal = true" </div>
class="flex items-center gap-2 px-3 py-2 bg-neutral-800 text-neutral-300 rounded-lg hover:bg-neutral-700 text-sm" <div>
> <div class="t-eyebrow">Plugin configuration</div>
<Plus class="w-4 h-4" /> <h1 class="te__title">Timed Execute</h1>
New Config </div>
</button> </div>
<div class="te__head-actions">
<Button size="sm" icon="plus" @click="showCreateModal = true">New config</Button>
</div> </div>
</div> </div>
<!-- Config Selector + Action Bar --> <!-- Toolbar panel -->
<div class="bg-neutral-900 border border-neutral-800 rounded-xl p-4"> <Panel>
<div class="flex items-center gap-3 flex-wrap"> <div class="te__toolbar">
<!-- Config Selector --> <Select
<select
v-if="store.configs.length > 0" v-if="store.configs.length > 0"
:value="store.currentConfig?.id || ''" v-model="selectedConfigId"
@change="handleConfigChange(($event.target as HTMLSelectElement).value)" :options="configSelectOptions"
class="bg-neutral-800 border border-neutral-700 text-neutral-200 rounded-lg px-3 py-2 text-sm min-w-[200px]" size="sm"
> style="min-width: 200px"
<option v-for="c in store.configs" :key="c.id" :value="c.id"> />
{{ c.config_name }} <span v-else class="te__no-configs">No configs yet</span>
<template v-if="c.is_active"> (Active)</template>
</option>
</select>
<span v-else class="text-neutral-500 text-sm">No configs yet</span>
<!-- Save --> <div class="te__toolbar-actions">
<button <Button
@click="store.saveCurrentConfig()" size="sm"
:disabled="!store.currentConfig || !store.isDirty || store.isSaving" icon="save"
class="flex items-center gap-2 px-3 py-2 bg-oxide-500 text-white rounded-lg hover:bg-oxide-600 disabled:opacity-50 disabled:cursor-not-allowed text-sm" :loading="store.isSaving"
> :disabled="!store.currentConfig || !store.isDirty || store.isSaving"
<Save class="w-4 h-4" /> @click="store.saveCurrentConfig()"
{{ store.isSaving ? 'Saving...' : 'Save' }} >{{ store.isSaving ? 'Saving…' : 'Save' }}</Button>
</button>
<!-- Apply to Server --> <Button
<button size="sm"
@click="handleApply" variant="outline"
:disabled="!store.currentConfig || store.isApplying" icon="play"
class="flex items-center gap-2 px-3 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 disabled:opacity-50 disabled:cursor-not-allowed text-sm" :loading="store.isApplying"
> :disabled="!store.currentConfig || store.isApplying"
<Play class="w-4 h-4" /> @click="handleApply"
{{ store.isApplying ? 'Applying...' : 'Apply to Server' }} >{{ store.isApplying ? 'Applying…' : 'Apply to server' }}</Button>
</button>
<!-- Import from Server --> <Button
<button size="sm"
@click="showImportModal = true" variant="secondary"
class="flex items-center gap-2 px-3 py-2 bg-neutral-800 text-neutral-300 rounded-lg hover:bg-neutral-700 text-sm" icon="download"
> @click="showImportModal = true"
<Download class="w-4 h-4" /> >Import from server</Button>
Import from Server
</button>
<!-- Delete --> <Button
<button size="sm"
@click="handleDeleteConfig" variant="danger-soft"
:disabled="!store.currentConfig" icon="trash-2"
class="flex items-center gap-2 px-3 py-2 bg-red-500/10 text-red-400 rounded-lg hover:bg-red-500/20 disabled:opacity-50 text-sm ml-auto" :disabled="!store.currentConfig"
> @click="handleDeleteConfig"
<Trash2 class="w-4 h-4" /> >Delete</Button>
Delete </div>
</button>
</div> </div>
</Panel>
<!-- Loading -->
<div v-if="store.isLoading" class="te__loading">
<span class="te__spinner" />
</div> </div>
<!-- Loading State --> <!-- Empty — no config -->
<div v-if="store.isLoading" class="flex items-center justify-center py-20"> <Panel v-else-if="!store.currentConfig">
<div class="animate-spin w-8 h-8 border-2 border-oxide-500 border-t-transparent rounded-full" /> <EmptyState
</div> icon="clock"
title="No TimedExecute config selected"
<!-- No Config Selected --> description="Create a new config, import from server, or select one from the dropdown above."
<div v-else-if="!store.currentConfig" class="bg-neutral-900 border border-neutral-800 rounded-xl p-12 text-center">
<Clock class="w-12 h-12 text-neutral-600 mx-auto mb-4" />
<h2 class="text-lg font-semibold text-neutral-300 mb-2">No TimedExecute Config Selected</h2>
<p class="text-neutral-500 mb-4">Create a new config, import from server, or select one from the dropdown above.</p>
<button
@click="showCreateModal = true"
class="px-4 py-2 bg-oxide-500 text-white rounded-lg hover:bg-oxide-600"
> >
Create First Config <template #action>
</button> <Button icon="plus" @click="showCreateModal = true">Create first config</Button>
</div> </template>
</EmptyState>
</Panel>
<!-- Config Editor --> <!-- Config editor -->
<div v-else class="space-y-6"> <template v-else>
<!-- Tab Bar --> <!-- Tab bar -->
<div class="flex border-b border-neutral-800"> <Tabs v-model="activeTab" :items="tabItems" variant="line" />
<button
v-for="tab in tabs"
:key="tab.key"
@click="activeTab = tab.key as typeof activeTab"
class="flex items-center gap-2 px-4 py-2 text-sm font-medium border-b-2 transition-colors"
:class="activeTab === tab.key
? 'border-oxide-500 text-oxide-400'
: 'border-transparent text-neutral-500 hover:text-neutral-300'"
>
<component :is="tab.icon" class="w-4 h-4" />
{{ tab.label }}
</button>
</div>
<!-- Timed Commands Tab --> <!-- Timed commands tab -->
<div v-if="activeTab === 'timed'" class="space-y-4"> <Panel v-if="activeTab === 'timed'" title="Timer repeat" subtitle="Commands executed repeatedly at set intervals (seconds)">
<div class="bg-neutral-900 border border-neutral-800 rounded-xl p-6 space-y-4"> <template #actions>
<div class="flex items-center justify-between"> <Switch v-model="enableTimerRepeat" label="Enabled" size="sm" />
<div> </template>
<h3 class="text-sm font-semibold text-neutral-300 uppercase tracking-wider">Timer Repeat</h3>
<p class="text-xs text-neutral-500 mt-1">Commands executed repeatedly at set intervals (seconds)</p>
</div>
<div class="flex items-center gap-2">
<!-- Enable toggle -->
<span class="text-xs text-neutral-400 mr-2">Enabled</span>
<button
@click="setConfigValue('EnableTimerRepeat', !getConfigValue('EnableTimerRepeat', true))"
class="relative w-11 h-6 rounded-full transition-colors"
:class="getConfigValue('EnableTimerRepeat', true) ? 'bg-oxide-500' : 'bg-neutral-700'"
>
<span
class="absolute top-0.5 left-0.5 w-5 h-5 bg-white rounded-full transition-transform"
:class="getConfigValue('EnableTimerRepeat', true) ? 'translate-x-5' : 'translate-x-0'"
/>
</button>
</div>
</div>
<!-- Preset Buttons --> <!-- Preset quick-add -->
<div class="flex items-center gap-2 flex-wrap"> <div class="te__presets">
<span class="text-xs text-neutral-500">Quick add:</span> <span class="te__presets-label">Quick add:</span>
<button <button class="te__preset" @click="addPresetTimer('server.save', 300)">server.save (5 min)</button>
@click="addPresetTimer('server.save', 300)" <button class="te__preset" @click="addPresetTimer('say Server restart warning!', 3600)">Restart warning (1 h)</button>
class="px-2 py-1 text-xs bg-neutral-800 text-neutral-300 rounded hover:bg-neutral-700" <button class="te__preset" @click="addPresetTimer('oxide.reload *', 7200)">Reload plugins (2 h)</button>
> </div>
server.save (5m)
</button>
<button
@click="addPresetTimer('say Server restart warning!', 3600)"
class="px-2 py-1 text-xs bg-neutral-800 text-neutral-300 rounded hover:bg-neutral-700"
>
Restart warning (1h)
</button>
<button
@click="addPresetTimer('oxide.reload *', 7200)"
class="px-2 py-1 text-xs bg-neutral-800 text-neutral-300 rounded hover:bg-neutral-700"
>
Reload plugins (2h)
</button>
</div>
<!-- Entries --> <EmptyState
<div v-if="timerRepeatEntries.length === 0" class="py-4 text-center text-neutral-500 text-sm"> v-if="timerRepeatEntries.length === 0"
No timed commands configured. Add a command or use a preset above. icon="clock"
</div> description="No timed commands configured. Add a command or use a preset above."
/>
<div v-else class="space-y-2"> <div v-else class="te__entries">
<div <div
v-for="(entry, index) in timerRepeatEntries" v-for="(entry, index) in timerRepeatEntries"
:key="index" :key="index"
class="flex items-center gap-3 bg-neutral-800/50 rounded-lg p-3" class="te__entry"
> >
<div class="te__entry-cmd">
<input <input
:value="entry.command" :value="entry.command"
@change="updateTimerRepeatCommand(entry.command, ($event.target as HTMLInputElement).value)" @change="updateTimerRepeatCommand(entry.command, ($event.target as HTMLInputElement).value)"
placeholder="console command" placeholder="console command"
class="flex-1 bg-neutral-800 border border-neutral-700 rounded-lg px-3 py-1.5 text-neutral-200 text-sm" class="cc-input-raw te__input-grow"
/> />
<div class="flex items-center gap-1">
<input
:value="entry.interval"
@input="updateTimerRepeatInterval(entry.command, Number(($event.target as HTMLInputElement).value))"
type="number"
min="1"
class="w-24 bg-neutral-800 border border-neutral-700 rounded-lg px-2 py-1.5 text-neutral-200 text-sm text-right"
/>
<span class="text-xs text-neutral-500">sec</span>
</div>
<button
@click="removeTimerRepeat(entry.command)"
class="p-1.5 text-red-400 hover:text-red-300 hover:bg-red-500/10 rounded"
>
<Trash2 class="w-4 h-4" />
</button>
</div> </div>
</div> <div class="te__entry-interval">
<button
@click="addTimerRepeat"
class="flex items-center gap-2 px-3 py-1.5 bg-neutral-800 text-neutral-300 rounded-lg hover:bg-neutral-700 text-sm"
>
<Plus class="w-4 h-4" />
Add Command
</button>
</div>
</div>
<!-- Real-Time Tab -->
<div v-else-if="activeTab === 'realtime'" class="space-y-4">
<div class="bg-neutral-900 border border-neutral-800 rounded-xl p-6 space-y-4">
<div class="flex items-center justify-between">
<div>
<h3 class="text-sm font-semibold text-neutral-300 uppercase tracking-wider">Real-Time Timer</h3>
<p class="text-xs text-neutral-500 mt-1">Commands executed at specific times of day (HH:MM:SS)</p>
</div>
<div class="flex items-center gap-2">
<span class="text-xs text-neutral-400 mr-2">Enabled</span>
<button
@click="setConfigValue('EnableRealTime-Timer', !getConfigValue('EnableRealTime-Timer', false))"
class="relative w-11 h-6 rounded-full transition-colors"
:class="getConfigValue('EnableRealTime-Timer', false) ? 'bg-oxide-500' : 'bg-neutral-700'"
>
<span
class="absolute top-0.5 left-0.5 w-5 h-5 bg-white rounded-full transition-transform"
:class="getConfigValue('EnableRealTime-Timer', false) ? 'translate-x-5' : 'translate-x-0'"
/>
</button>
</div>
</div>
<div v-if="realTimeEntries.length === 0" class="py-4 text-center text-neutral-500 text-sm">
No real-time commands configured. Add a time-based command below.
</div>
<div v-else class="space-y-2">
<div
v-for="(entry, index) in realTimeEntries"
:key="index"
class="flex items-center gap-3 bg-neutral-800/50 rounded-lg p-3"
>
<input <input
:value="entry.time" :value="entry.interval"
@change="updateRealTimeTime(entry.time, ($event.target as HTMLInputElement).value)" @input="updateTimerRepeatInterval(entry.command, Number(($event.target as HTMLInputElement).value))"
placeholder="HH:MM:SS" type="number"
class="w-32 bg-neutral-800 border border-neutral-700 rounded-lg px-3 py-1.5 text-neutral-200 text-sm" min="1"
class="cc-input-raw cc-input-raw--mono te__input-interval"
/> />
<input <span class="te__unit">sec</span>
:value="entry.command"
@change="updateRealTimeCommand(entry.time, ($event.target as HTMLInputElement).value)"
placeholder="console command"
class="flex-1 bg-neutral-800 border border-neutral-700 rounded-lg px-3 py-1.5 text-neutral-200 text-sm"
/>
<button
@click="removeRealTimeEntry(entry.time)"
class="p-1.5 text-red-400 hover:text-red-300 hover:bg-red-500/10 rounded"
>
<Trash2 class="w-4 h-4" />
</button>
</div> </div>
<Button variant="danger-soft" size="sm" icon="trash-2" @click="removeTimerRepeat(entry.command)" />
</div> </div>
<button
@click="addRealTimeEntry"
class="flex items-center gap-2 px-3 py-1.5 bg-neutral-800 text-neutral-300 rounded-lg hover:bg-neutral-700 text-sm"
>
<Plus class="w-4 h-4" />
Add Time Entry
</button>
</div> </div>
</div>
<!-- On Connect Tab --> <div class="te__add-row">
<div v-else-if="activeTab === 'connect'" class="space-y-4"> <Button variant="secondary" size="sm" icon="plus" @click="addTimerRepeat">Add command</Button>
<div class="bg-neutral-900 border border-neutral-800 rounded-xl p-6 space-y-4">
<div>
<h3 class="text-sm font-semibold text-neutral-300 uppercase tracking-wider">On Player Connect</h3>
<p class="text-xs text-neutral-500 mt-1">Commands executed when a player joins the server</p>
</div>
<div v-if="connectCommands.length === 0" class="py-4 text-center text-neutral-500 text-sm">
No connect commands configured. Add a command below.
</div>
<div v-else class="space-y-2">
<div
v-for="(cmd, index) in connectCommands"
:key="index"
class="flex items-center gap-3 bg-neutral-800/50 rounded-lg p-3"
>
<input
:value="cmd"
@change="updateConnectCommand(index, ($event.target as HTMLInputElement).value)"
placeholder='e.g. say Welcome {player.name}!'
class="flex-1 bg-neutral-800 border border-neutral-700 rounded-lg px-3 py-1.5 text-neutral-200 text-sm"
/>
<button
@click="removeConnectCommand(index)"
class="p-1.5 text-red-400 hover:text-red-300 hover:bg-red-500/10 rounded"
>
<Trash2 class="w-4 h-4" />
</button>
</div>
</div>
<button
@click="addConnectCommand"
class="flex items-center gap-2 px-3 py-1.5 bg-neutral-800 text-neutral-300 rounded-lg hover:bg-neutral-700 text-sm"
>
<Plus class="w-4 h-4" />
Add Command
</button>
</div> </div>
</div> </Panel>
<!-- On Disconnect Tab --> <!-- Real-time tab -->
<div v-else-if="activeTab === 'disconnect'" class="space-y-4"> <Panel v-else-if="activeTab === 'realtime'" title="Real-time timer" subtitle="Commands executed at specific times of day (HH:MM:SS)">
<div class="bg-neutral-900 border border-neutral-800 rounded-xl p-6 space-y-4"> <template #actions>
<div> <Switch v-model="enableRealTimeTimer" label="Enabled" size="sm" />
<h3 class="text-sm font-semibold text-neutral-300 uppercase tracking-wider">On Player Disconnect</h3> </template>
<p class="text-xs text-neutral-500 mt-1">Commands executed when a player leaves the server</p>
</div>
<div v-if="disconnectCommands.length === 0" class="py-4 text-center text-neutral-500 text-sm"> <EmptyState
No disconnect commands configured. Add a command below. v-if="realTimeEntries.length === 0"
</div> icon="clock"
description="No real-time commands configured. Add a time-based command below."
/>
<div v-else class="space-y-2"> <div v-else class="te__entries">
<div <div
v-for="(cmd, index) in disconnectCommands" v-for="(entry, index) in realTimeEntries"
:key="index" :key="index"
class="flex items-center gap-3 bg-neutral-800/50 rounded-lg p-3" class="te__entry"
>
<input
:value="cmd"
@change="updateDisconnectCommand(index, ($event.target as HTMLInputElement).value)"
placeholder='e.g. say {player.name} has left'
class="flex-1 bg-neutral-800 border border-neutral-700 rounded-lg px-3 py-1.5 text-neutral-200 text-sm"
/>
<button
@click="removeDisconnectCommand(index)"
class="p-1.5 text-red-400 hover:text-red-300 hover:bg-red-500/10 rounded"
>
<Trash2 class="w-4 h-4" />
</button>
</div>
</div>
<button
@click="addDisconnectCommand"
class="flex items-center gap-2 px-3 py-1.5 bg-neutral-800 text-neutral-300 rounded-lg hover:bg-neutral-700 text-sm"
> >
<Plus class="w-4 h-4" />
Add Command
</button>
</div>
</div>
</div>
<!-- Create Config Modal -->
<div v-if="showCreateModal" class="fixed inset-0 bg-black/60 z-50 flex items-center justify-center p-4" @click.self="showCreateModal = false">
<div class="bg-neutral-900 border border-neutral-800 rounded-xl p-6 w-full max-w-md">
<h2 class="text-lg font-semibold text-neutral-100 mb-4">New TimedExecute Config</h2>
<div class="space-y-4">
<div>
<label class="block text-sm text-neutral-400 mb-1">Config Name</label>
<input <input
v-model="newConfigName" :value="entry.time"
placeholder="e.g. Default Timer Settings" @change="updateRealTimeTime(entry.time, ($event.target as HTMLInputElement).value)"
class="w-full bg-neutral-800 border border-neutral-700 rounded-lg px-3 py-2 text-neutral-200 text-sm" placeholder="HH:MM:SS"
@keydown.enter="handleCreateConfig" class="cc-input-raw cc-input-raw--mono te__input-time"
/> />
<input
:value="entry.command"
@change="updateRealTimeCommand(entry.time, ($event.target as HTMLInputElement).value)"
placeholder="console command"
class="cc-input-raw te__input-grow"
/>
<Button variant="danger-soft" size="sm" icon="trash-2" @click="removeRealTimeEntry(entry.time)" />
</div> </div>
<div> </div>
<label class="block text-sm text-neutral-400 mb-1">Description (optional)</label>
<div class="te__add-row">
<Button variant="secondary" size="sm" icon="plus" @click="addRealTimeEntry">Add time entry</Button>
</div>
</Panel>
<!-- On connect tab -->
<Panel v-else-if="activeTab === 'connect'" title="On player connect" subtitle="Commands executed when a player joins the server">
<EmptyState
v-if="connectCommands.length === 0"
icon="user"
description="No connect commands configured. Add a command below."
/>
<div v-else class="te__entries">
<div
v-for="(cmd, index) in connectCommands"
:key="index"
class="te__entry"
>
<input
:value="cmd"
@change="updateConnectCommand(index, ($event.target as HTMLInputElement).value)"
placeholder="e.g. say Welcome {player.name}!"
class="cc-input-raw te__input-grow"
/>
<Button variant="danger-soft" size="sm" icon="trash-2" @click="removeConnectCommand(index)" />
</div>
</div>
<div class="te__add-row">
<Button variant="secondary" size="sm" icon="plus" @click="addConnectCommand">Add command</Button>
</div>
</Panel>
<!-- On disconnect tab -->
<Panel v-else-if="activeTab === 'disconnect'" title="On player disconnect" subtitle="Commands executed when a player leaves the server">
<EmptyState
v-if="disconnectCommands.length === 0"
icon="user"
description="No disconnect commands configured. Add a command below."
/>
<div v-else class="te__entries">
<div
v-for="(cmd, index) in disconnectCommands"
:key="index"
class="te__entry"
>
<input
:value="cmd"
@change="updateDisconnectCommand(index, ($event.target as HTMLInputElement).value)"
placeholder="e.g. say {player.name} has left"
class="cc-input-raw te__input-grow"
/>
<Button variant="danger-soft" size="sm" icon="trash-2" @click="removeDisconnectCommand(index)" />
</div>
</div>
<div class="te__add-row">
<Button variant="secondary" size="sm" icon="plus" @click="addDisconnectCommand">Add command</Button>
</div>
</Panel>
</template>
<!-- Create config modal -->
<div v-if="showCreateModal" class="te__modal-backdrop" @click.self="showCreateModal = false">
<div class="te__modal">
<div class="te__modal-head">
<h2 class="te__modal-title">New TimedExecute config</h2>
</div>
<div class="te__modal-body">
<Input
v-model="newConfigNameModel"
label="Config name"
placeholder="e.g. Default Timer Settings"
@keydown.enter="handleCreateConfig"
/>
<div class="te__field">
<span class="te__field-label">Description (optional)</span>
<textarea <textarea
v-model="newConfigDesc" v-model="newConfigDesc"
rows="2" rows="2"
placeholder="What is this config for?" placeholder="What is this config for?"
class="w-full bg-neutral-800 border border-neutral-700 rounded-lg px-3 py-2 text-neutral-200 text-sm resize-none" class="cc-textarea"
/> />
</div> </div>
<div class="flex justify-end gap-2"> </div>
<button @click="showCreateModal = false" class="px-4 py-2 text-sm text-neutral-400 hover:text-neutral-200">Cancel</button> <div class="te__modal-foot">
<button <Button variant="ghost" @click="showCreateModal = false">Cancel</Button>
@click="handleCreateConfig" <Button :disabled="!newConfigName.trim()" @click="handleCreateConfig">Create</Button>
:disabled="!newConfigName.trim()"
class="px-4 py-2 bg-oxide-500 text-white rounded-lg hover:bg-oxide-600 disabled:opacity-50 text-sm"
>
Create
</button>
</div>
</div> </div>
</div> </div>
</div> </div>
<!-- Import from Server Modal --> <!-- Import from server modal -->
<div v-if="showImportModal" class="fixed inset-0 bg-black/60 z-50 flex items-center justify-center p-4" @click.self="showImportModal = false"> <div v-if="showImportModal" class="te__modal-backdrop" @click.self="showImportModal = false">
<div class="bg-neutral-900 border border-neutral-800 rounded-xl p-6 w-full max-w-md"> <div class="te__modal">
<h2 class="text-lg font-semibold text-neutral-100 mb-4">Import from Server</h2> <div class="te__modal-head">
<p class="text-sm text-neutral-400 mb-4"> <h2 class="te__modal-title">Import from server</h2>
Import the current TimedExecute config from your live server. This will create a new config profile. </div>
</p> <div class="te__modal-body">
<div class="space-y-4"> <p class="te__modal-desc">Import the current TimedExecute config from your live server. This will create a new config profile.</p>
<div> <Input
<label class="block text-sm text-neutral-400 mb-1">Config Name</label> v-model="importConfigNameModel"
<input label="Config name"
v-model="importConfigName" placeholder="e.g. Imported server config"
placeholder="e.g. Imported Server Config" @keydown.enter="handleImport"
class="w-full bg-neutral-800 border border-neutral-700 rounded-lg px-3 py-2 text-neutral-200 text-sm" />
@keydown.enter="handleImport" </div>
/> <div class="te__modal-foot">
</div> <Button variant="ghost" @click="showImportModal = false">Cancel</Button>
<div class="flex justify-end gap-2"> <Button :disabled="!importConfigName.trim()" @click="handleImport">Import</Button>
<button @click="showImportModal = false" class="px-4 py-2 text-sm text-neutral-400 hover:text-neutral-200">Cancel</button>
<button
@click="handleImport"
:disabled="!importConfigName.trim()"
class="px-4 py-2 bg-oxide-500 text-white rounded-lg hover:bg-oxide-600 disabled:opacity-50 text-sm"
>
Import
</button>
</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</template> </template>
<style scoped>
/* ---- Page shell ---- */
.te { max-width: 900px; margin: 0 auto; display: flex; flex-direction: column; gap: 16px; }
/* ---- Page head ---- */
.te__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.te__head-id { display: flex; align-items: center; gap: 12px; }
.te__head-chip {
width: 40px; height: 40px; flex: none; border-radius: var(--radius-md);
display: flex; align-items: center; justify-content: center;
color: var(--accent); background: var(--accent-soft);
box-shadow: inset 0 0 0 1px var(--accent-border);
}
.te__title {
font-size: var(--text-2xl); font-weight: 700; letter-spacing: -0.02em;
color: var(--text-primary); margin-top: 3px;
}
.te__head-actions { display: flex; align-items: center; gap: 8px; }
/* ---- Toolbar ---- */
.te__toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.te__toolbar-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-left: auto; }
.te__no-configs { font-size: var(--text-sm); color: var(--text-muted); }
/* ---- Loading ---- */
.te__loading { display: flex; justify-content: center; padding: 48px 0; }
.te__spinner {
width: 28px; height: 28px; border-radius: 50%;
border: 2px solid var(--accent); border-top-color: transparent;
animation: te-spin 0.6s linear infinite;
}
@keyframes te-spin { to { transform: rotate(360deg); } }
/* ---- Presets ---- */
.te__presets { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.te__presets-label { font-size: var(--text-xs); color: var(--text-muted); }
.te__preset {
height: var(--control-h-sm); padding: 0 10px; border: 0; cursor: pointer;
border-radius: var(--radius-sm); font-size: var(--text-xs); font-family: var(--font-sans);
font-weight: 500; color: var(--text-secondary);
background: var(--surface-raised-2); box-shadow: var(--ring-default);
transition: var(--transition-colors);
}
.te__preset:hover { background: var(--surface-active); color: var(--text-primary); }
/* ---- Entry rows ---- */
.te__entries { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.te__entry {
display: flex; align-items: center; gap: 8px;
padding: 10px 12px; border-radius: var(--radius-md);
background: var(--surface-raised-2); box-shadow: var(--ring-default);
}
.te__entry-cmd { flex: 1; min-width: 0; }
.te__entry-interval { display: flex; align-items: center; gap: 6px; }
.te__unit { font-size: var(--text-xs); color: var(--text-muted); white-space: nowrap; }
/* ---- Inline raw inputs (entries) ---- */
.cc-input-raw {
height: var(--control-h-sm); padding: 0 9px;
background: var(--surface-inset); border: 0; border-radius: var(--radius-sm);
box-shadow: var(--ring-default); outline: 0;
font-family: var(--font-sans); font-size: var(--text-sm); color: var(--text-primary);
transition: var(--transition-colors);
}
.cc-input-raw::placeholder { color: var(--text-muted); }
.cc-input-raw:focus { box-shadow: inset 0 0 0 1px var(--accent), var(--glow-accent-sm); }
.cc-input-raw--mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.te__input-grow { width: 100%; }
.te__input-interval { width: 72px; text-align: right; }
.te__input-time { width: 90px; }
/* ---- Add row ---- */
.te__add-row { padding-top: 2px; }
/* ---- Modal ---- */
.te__modal-backdrop {
position: fixed; inset: 0; background: rgba(0,0,0,.6); z-index: 50;
display: flex; align-items: center; justify-content: center; padding: 16px;
}
.te__modal {
background: var(--surface-base); border-radius: var(--radius-lg); box-shadow: var(--ring-default);
width: 100%; max-width: 440px; display: flex; flex-direction: column;
}
.te__modal-head {
display: flex; align-items: center; justify-content: space-between;
padding: 16px 20px; border-bottom: 1px solid var(--border-subtle);
}
.te__modal-title { font-size: var(--text-base); font-weight: 600; color: var(--text-primary); }
.te__modal-body { padding: 20px; display: flex; flex-direction: column; gap: 14px; }
.te__modal-desc { font-size: var(--text-sm); color: var(--text-tertiary); line-height: 1.5; }
.te__modal-foot {
display: flex; justify-content: flex-end; gap: 8px;
padding: 14px 20px; border-top: 1px solid var(--border-subtle);
}
.te__field { display: flex; flex-direction: column; gap: 6px; }
.te__field-label { font-size: var(--text-xs); font-weight: 600; color: var(--text-secondary); }
/* ---- Textarea ---- */
.cc-textarea {
background: var(--surface-inset); border-radius: var(--radius-md); box-shadow: var(--ring-default);
border: 0; outline: 0; padding: 9px 11px; resize: none; width: 100%;
font-family: var(--font-sans); font-size: var(--text-sm); color: var(--text-primary);
transition: var(--transition-colors);
}
.cc-textarea::placeholder { color: var(--text-muted); }
.cc-textarea:focus { box-shadow: inset 0 0 0 1px var(--accent), var(--glow-accent-sm); }
</style>