Bardioc26
95f0fc0b7a
* every user has a right of a username and a display name and has the right to change it * System information page now shows information about database user count, char count, and database schema version * more maintenance lists * show the right values in columns and fields * move similar from inside of frontend component functions to utility js when used multiple times * display help on mouse over * add more than one believe to character * make char name editable with better char info in headline * GiT Gifttoleranz value not calculated correctly * Bump backend to 0.2.3, frontend to 0.2.2
525 lines
20 KiB
Vue
525 lines
20 KiB
Vue
<template>
|
|
<div class="header-section">
|
|
<h2>{{ $t('maintenance') }}</h2>
|
|
<!-- Add search input -->
|
|
<div class="search-box">
|
|
<input
|
|
type="text"
|
|
v-model="searchTerm"
|
|
:placeholder="`${$t('search')} ${$t('Weapons')}...`"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="cd-view">
|
|
<div class="cd-list">
|
|
<!-- Filter Row -->
|
|
<div class="filter-row">
|
|
<div class="filter-item">
|
|
<label>{{ $t('weapon.skillrequired') }}:</label>
|
|
<select v-model="filterSkillRequired">
|
|
<option value="">{{ $t('all') || 'All' }}</option>
|
|
<option v-for="skill in availableSkillsRequired" :key="skill" :value="skill">{{ skill }}</option>
|
|
</select>
|
|
</div>
|
|
<div class="filter-item">
|
|
<label>{{ $t('weapon.damage') }}:</label>
|
|
<select v-model="filterDamage">
|
|
<option value="">{{ $t('all') || 'All' }}</option>
|
|
<option v-for="dmg in availableDamages" :key="dmg" :value="dmg">{{ dmg }}</option>
|
|
</select>
|
|
</div>
|
|
<div class="filter-item">
|
|
<label>{{ $t('weapon.rangenear') }}:</label>
|
|
<select v-model="filterRangeNear">
|
|
<option value="">{{ $t('all') || 'All' }}</option>
|
|
<option v-for="range in availableRangesNear" :key="range" :value="range">{{ range }}</option>
|
|
</select>
|
|
</div>
|
|
<div class="filter-item">
|
|
<label>{{ $t('weapon.rangemiddle') }}:</label>
|
|
<select v-model="filterRangeMiddle">
|
|
<option value="">{{ $t('all') || 'All' }}</option>
|
|
<option v-for="range in availableRangesMiddle" :key="range" :value="range">{{ range }}</option>
|
|
</select>
|
|
</div>
|
|
<div class="filter-item">
|
|
<label>{{ $t('weapon.rangefar') }}:</label>
|
|
<select v-model="filterRangeFar">
|
|
<option value="">{{ $t('all') || 'All' }}</option>
|
|
<option v-for="range in availableRangesFar" :key="range" :value="range">{{ range }}</option>
|
|
</select>
|
|
</div>
|
|
<div class="filter-item">
|
|
<label>{{ $t('weapon.quelle') }}:</label>
|
|
<select v-model="filterQuelle">
|
|
<option value="">{{ $t('all') || 'All' }}</option>
|
|
<option v-for="quelle in availableQuellen" :key="quelle" :value="quelle">{{ quelle }}</option>
|
|
</select>
|
|
</div>
|
|
<button @click="clearFilters" class="btn-clear-filters">{{ $t('clearFilters') || 'Clear Filters' }}</button>
|
|
</div>
|
|
|
|
<div class="tables-container">
|
|
<table class="cd-table">
|
|
<thead>
|
|
<tr>
|
|
<th class="cd-table-header">{{ $t('weapon.id') }}</th>
|
|
<!-- <th class="cd-table-header">{{ $t('weapon.category') }}<button @click="sortBy('category')">-{{ sortField === 'category' ? (sortAsc ? '↑' : '↓') : '' }}</button></th> -->
|
|
<th class="cd-table-header">{{ $t('weapon.name') }} <button @click="sortBy('name')">-{{ sortField === 'name' ? (sortAsc ? '↑' : '↓') : '' }}</button></th>
|
|
<th class="cd-table-header">{{ $t('weapon.skillrequired') || 'Skill Required' }}</th>
|
|
<th class="cd-table-header">{{ $t('weapon.weight') }}</th>
|
|
<th class="cd-table-header">{{ $t('weapon.value') }}</th>
|
|
<th class="cd-table-header">{{ $t('weapon.damage') }}</th>
|
|
<th class="cd-table-header">{{ $t('weapon.rangenear') || 'Range Near' }}</th>
|
|
<th class="cd-table-header">{{ $t('weapon.rangemiddle') || 'Range Middle' }}</th>
|
|
<th class="cd-table-header">{{ $t('weapon.rangefar') || 'Range Far' }}</th>
|
|
<th class="cd-table-header">{{ $t('weapon.description') }}</th>
|
|
<th class="cd-table-header">{{ $t('weapon.quelle') }}</th>
|
|
<th class="cd-table-header">{{ $t('weapon.personal_item') }}</th>
|
|
<th class="cd-table-header">{{ $t('weapon.system') }}</th>
|
|
<th class="cd-table-header"> </th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<template v-for="(dtaItem, index) in filteredAndSortedWeaponss" :key="dtaItem.id">
|
|
<tr v-if="editingIndex !== index">
|
|
<td>{{ dtaItem.id || '' }}</td>
|
|
<td>{{ dtaItem.name || '-' }}</td>
|
|
<td>{{ dtaItem.skill_required || '-' }}</td>
|
|
<td>{{ dtaItem.gewicht || '-' }}</td>
|
|
<td>{{ dtaItem.wert || '-' }}</td>
|
|
<td>{{ dtaItem.damage || '-' }}</td>
|
|
<td>{{ dtaItem.range_near || '-' }}</td>
|
|
<td>{{ dtaItem.range_middle || '-' }}</td>
|
|
<td>{{ dtaItem.range_far || '-' }}</td>
|
|
<td>{{ dtaItem.beschreibung || '-' }}</td>
|
|
<td>{{ formatQuelle(dtaItem) }}</td>
|
|
<td><input type="checkbox" :checked="dtaItem.personal_item" disabled /></td>
|
|
<td>{{ getSystemCodeById(dtaItem.game_system_id, dtaItem.system || 'midgard') }}</td>
|
|
<td>
|
|
<button @click="startEdit(index)">Edit</button>
|
|
</td>
|
|
</tr>
|
|
<!-- Edit Mode -->
|
|
<tr v-else>
|
|
<td><input v-model="editedItem.id" style="width:20px;" disabled /></td>
|
|
<td colspan="11">
|
|
<!-- Expanded edit form -->
|
|
<div class="edit-form">
|
|
<div class="edit-row">
|
|
<div class="edit-field">
|
|
<label>{{ $t('weapon.name') }}:</label>
|
|
<input v-model="editedItem.name" />
|
|
</div>
|
|
<div class="edit-field">
|
|
<label>{{ $t('weapon.skillrequired') || 'Skill Required' }}:</label>
|
|
<input v-model="editedItem.skill_required" style="width:150px;" />
|
|
</div>
|
|
<div class="edit-field">
|
|
<label>{{ $t('weapon.weight') }}:</label>
|
|
<input v-model.number="editedItem.gewicht" type="number" style="width:80px;" />
|
|
</div>
|
|
<div class="edit-field">
|
|
<label>{{ $t('weapon.value') }}:</label>
|
|
<input v-model="editedItem.wert" style="width:100px;" />
|
|
</div>
|
|
</div>
|
|
|
|
<div class="edit-row">
|
|
<div class="edit-field">
|
|
<label>{{ $t('weapon.damage') }}:</label>
|
|
<input v-model="editedItem.damage" style="width:100px;" />
|
|
</div>
|
|
<div class="edit-field">
|
|
<label>{{ $t('weapon.rangenear') || 'Range Near' }}:</label>
|
|
<input v-model.number="editedItem.range_near" type="number" style="width:80px;" />
|
|
</div>
|
|
<div class="edit-field">
|
|
<label>{{ $t('weapon.rangemiddle') || 'Range Middle' }}:</label>
|
|
<input v-model.number="editedItem.range_middle" type="number" style="width:80px;" />
|
|
</div>
|
|
<div class="edit-field">
|
|
<label>{{ $t('weapon.rangefar') || 'Range Far' }}:</label>
|
|
<input v-model.number="editedItem.range_far" type="number" style="width:80px;" />
|
|
</div>
|
|
</div>
|
|
|
|
<div class="edit-row">
|
|
<div class="edit-field">
|
|
<label>{{ $t('weapon.bonusskill') || 'Bonus' }}:</label>
|
|
<select v-model="editedItem.bonuseigenschaft" style="width:80px;">
|
|
<option value="">-</option>
|
|
<option value="St">St</option>
|
|
<option value="Gs">Gs</option>
|
|
<option value="Gw">Gw</option>
|
|
<option value="Ko">Ko</option>
|
|
<option value="In">In</option>
|
|
<option value="Zt">Zt</option>
|
|
<option value="Au">Au</option>
|
|
<option value="pA">pA</option>
|
|
<option value="Wk">Wk</option>
|
|
<option value="B">B</option>
|
|
</select>
|
|
</div>
|
|
<div class="edit-field">
|
|
<label>{{ $t('weapon.personal_item') }}:</label>
|
|
<input type="checkbox" v-model="editedItem.personal_item" />
|
|
</div>
|
|
</div>
|
|
|
|
<div class="edit-row">
|
|
<div class="edit-field full-width">
|
|
<label>{{ $t('weapon.description') }}:</label>
|
|
<input v-model="editedItem.beschreibung" />
|
|
</div>
|
|
</div>
|
|
|
|
<div class="edit-row">
|
|
<div class="edit-field">
|
|
<label>{{ $t('weapon.quelle') }}:</label>
|
|
<select v-model="editedItem.sourceCode" style="width:100px;">
|
|
<option value="">-</option>
|
|
<option v-for="source in availableSources" :key="source.code" :value="source.code">
|
|
{{ source.code }}
|
|
</option>
|
|
</select>
|
|
</div>
|
|
<div class="edit-field">
|
|
<label>{{ $t('weapon.page') || 'Page' }}:</label>
|
|
<input v-model.number="editedItem.page_number" type="number" style="width:60px;" />
|
|
</div>
|
|
<div class="edit-field">
|
|
<label>{{ $t('weapon.system') }}:</label>
|
|
<select v-model.number="selectedSystemId" style="width:140px;">
|
|
<option value="">-</option>
|
|
<option v-for="system in systemOptions" :key="system.id" :value="system.id">
|
|
{{ system.label }}
|
|
</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="edit-actions">
|
|
<button @click="saveEdit(index)" class="btn-save">Save</button>
|
|
<button @click="cancelEdit" class="btn-cancel">Cancel</button>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
</template>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div> <!--- end cd-list-->
|
|
</div> <!--- end character -datasheet-->
|
|
</template>
|
|
|
|
<!-- <style scoped> -->
|
|
<style>
|
|
.header-section {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 0.3rem;
|
|
height: fit-content;
|
|
padding: 0.5rem;
|
|
}
|
|
.search-box {
|
|
margin-bottom: 1rem;
|
|
}
|
|
.search-box input {
|
|
padding: 0.2rem;
|
|
width: 200px;
|
|
border: 1px solid #ddd;
|
|
border-radius: 4px;
|
|
}
|
|
.tables-container {
|
|
display: flex;
|
|
gap: 1rem;
|
|
width: 100%;
|
|
}
|
|
|
|
.table-wrapper-left {
|
|
flex: 6;
|
|
min-width: 0; /* Prevent table from overflowing */
|
|
}
|
|
.table-wrapper-right {
|
|
flex: 4;
|
|
min-width: 0; /* Prevent table from overflowing */
|
|
}
|
|
|
|
.cd-table {
|
|
width: 100%;
|
|
}
|
|
.cd-table-header {
|
|
background-color: #1da766;
|
|
font-weight: bold;
|
|
}
|
|
</style>
|
|
|
|
|
|
<script>
|
|
import API from '../../utils/api'
|
|
import {
|
|
findSystemIdByCode,
|
|
getSourceCode,
|
|
getSystemCodeById,
|
|
loadGameSystems as fetchGameSystems,
|
|
buildSystemOptions,
|
|
} from '../../utils/maintenanceGameSystems'
|
|
export default {
|
|
name: "WeaponView",
|
|
props: {
|
|
mdata: {
|
|
type: Object,
|
|
required: true,
|
|
default: () => ({
|
|
weaponss: [],
|
|
weaponscategories: []
|
|
})
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
searchTerm: '',
|
|
sortField: 'name',
|
|
sortAsc: true,
|
|
editingIndex: -1,
|
|
editedItem: null,
|
|
filterSkillRequired: '',
|
|
filterDamage: '',
|
|
filterRangeNear: '',
|
|
filterRangeMiddle: '',
|
|
filterRangeFar: '',
|
|
filterQuelle: '',
|
|
enhancedWeapons: [],
|
|
availableSources: [],
|
|
gameSystems: [],
|
|
selectedSystemId: null
|
|
}
|
|
},
|
|
async created() {
|
|
await Promise.all([
|
|
this.loadGameSystems(),
|
|
this.loadEnhancedWeapons()
|
|
])
|
|
},
|
|
computed: {
|
|
availableSkillsRequired() {
|
|
const skills = new Set()
|
|
this.enhancedWeapons.forEach(w => {
|
|
if (w.skill_required) skills.add(w.skill_required)
|
|
})
|
|
return Array.from(skills).sort()
|
|
},
|
|
availableDamages() {
|
|
const damages = new Set()
|
|
this.enhancedWeapons.forEach(w => {
|
|
if (w.damage) damages.add(w.damage)
|
|
})
|
|
return Array.from(damages).sort()
|
|
},
|
|
availableRangesNear() {
|
|
const ranges = new Set()
|
|
this.enhancedWeapons.forEach(w => {
|
|
if (w.range_near !== null && w.range_near !== undefined) ranges.add(w.range_near)
|
|
})
|
|
return Array.from(ranges).sort((a, b) => a - b)
|
|
},
|
|
availableRangesMiddle() {
|
|
const ranges = new Set()
|
|
this.enhancedWeapons.forEach(w => {
|
|
if (w.range_middle !== null && w.range_middle !== undefined) ranges.add(w.range_middle)
|
|
})
|
|
return Array.from(ranges).sort((a, b) => a - b)
|
|
},
|
|
availableRangesFar() {
|
|
const ranges = new Set()
|
|
this.enhancedWeapons.forEach(w => {
|
|
if (w.range_far !== null && w.range_far !== undefined) ranges.add(w.range_far)
|
|
})
|
|
return Array.from(ranges).sort((a, b) => a - b)
|
|
},
|
|
availableQuellen() {
|
|
const quellen = new Set()
|
|
this.enhancedWeapons.forEach(w => {
|
|
if (w.source_id && this.availableSources.length > 0) {
|
|
const source = this.availableSources.find(s => s.id === w.source_id)
|
|
if (source) {
|
|
quellen.add(source.code)
|
|
}
|
|
}
|
|
})
|
|
return Array.from(quellen).sort()
|
|
},
|
|
filteredAndSortedWeaponss() {
|
|
let filtered = [...this.enhancedWeapons]
|
|
|
|
// Apply search filter
|
|
if (this.searchTerm) {
|
|
const searchLower = this.searchTerm.toLowerCase()
|
|
filtered = filtered.filter(w =>
|
|
w.name?.toLowerCase().includes(searchLower) ||
|
|
w.skill_required?.toLowerCase().includes(searchLower)
|
|
)
|
|
}
|
|
|
|
// Apply skill_required filter
|
|
if (this.filterSkillRequired) {
|
|
filtered = filtered.filter(w => w.skill_required === this.filterSkillRequired)
|
|
}
|
|
|
|
// Apply damage filter
|
|
if (this.filterDamage) {
|
|
filtered = filtered.filter(w => w.damage === this.filterDamage)
|
|
}
|
|
|
|
// Apply range_near filter
|
|
if (this.filterRangeNear !== '') {
|
|
filtered = filtered.filter(w => w.range_near === this.filterRangeNear)
|
|
}
|
|
|
|
// Apply range_middle filter
|
|
if (this.filterRangeMiddle !== '') {
|
|
filtered = filtered.filter(w => w.range_middle === this.filterRangeMiddle)
|
|
}
|
|
|
|
// Apply range_far filter
|
|
if (this.filterRangeFar !== '') {
|
|
filtered = filtered.filter(w => w.range_far === this.filterRangeFar)
|
|
}
|
|
|
|
// Apply Quelle filter (only by source code, ignoring page number)
|
|
if (this.filterQuelle) {
|
|
filtered = filtered.filter(w => {
|
|
if (w.source_id && this.availableSources.length > 0) {
|
|
const source = this.availableSources.find(s => s.id === w.source_id)
|
|
return source && source.code === this.filterQuelle
|
|
}
|
|
return false
|
|
})
|
|
}
|
|
|
|
// Apply sorting
|
|
filtered.sort((a, b) => {
|
|
const aValue = (a[this.sortField] || '').toString().toLowerCase()
|
|
const bValue = (b[this.sortField] || '').toString().toLowerCase()
|
|
return this.sortAsc ? aValue.localeCompare(bValue) : bValue.localeCompare(aValue)
|
|
})
|
|
|
|
return filtered
|
|
},
|
|
systemOptions() {
|
|
return buildSystemOptions(this.gameSystems)
|
|
}
|
|
},
|
|
methods: {
|
|
async loadGameSystems() {
|
|
try {
|
|
this.gameSystems = await fetchGameSystems()
|
|
} catch (error) {
|
|
console.error('Failed to load game systems:', error)
|
|
}
|
|
},
|
|
async loadEnhancedWeapons() {
|
|
try {
|
|
const response = await API.get('/api/maintenance/weapons-enhanced')
|
|
this.enhancedWeapons = response.data.weapons || []
|
|
this.availableSources = response.data.sources || []
|
|
} catch (error) {
|
|
console.error('Failed to load enhanced weapons:', error)
|
|
}
|
|
},
|
|
startEdit(index) {
|
|
const weapon = this.filteredAndSortedWeaponss[index]
|
|
this.editedItem = {
|
|
...weapon,
|
|
sourceCode: this.getSourceCode(weapon.source_id)
|
|
}
|
|
this.selectedSystemId = weapon.game_system_id ?? this.findSystemIdByCode(weapon.system)
|
|
this.editingIndex = index
|
|
},
|
|
async saveEdit(index) {
|
|
try {
|
|
// Find source ID from code
|
|
const source = this.availableSources.find(s => s.code === this.editedItem.sourceCode)
|
|
const selectedSystem = this.gameSystems.find(gs => gs.id === this.selectedSystemId)
|
|
|
|
const updateData = {
|
|
...this.editedItem,
|
|
source_id: source ? source.id : null,
|
|
page_number: this.editedItem.page_number || 0,
|
|
system: selectedSystem ? selectedSystem.code : (this.editedItem.system || ''),
|
|
game_system_id: selectedSystem ? selectedSystem.id : (this.editedItem.game_system_id ?? null)
|
|
}
|
|
|
|
const response = await API.put(
|
|
`/api/maintenance/weapons-enhanced/${this.editedItem.id}`,
|
|
updateData
|
|
)
|
|
|
|
// Update the weapon in the list using splice for proper reactivity
|
|
const weaponIndex = this.enhancedWeapons.findIndex(w => w.id === this.editedItem.id)
|
|
if (weaponIndex !== -1) {
|
|
this.enhancedWeapons.splice(weaponIndex, 1, response.data)
|
|
}
|
|
|
|
this.editingIndex = -1
|
|
this.editedItem = null
|
|
this.selectedSystemId = null
|
|
} catch (error) {
|
|
console.error('Failed to save weapon:', error)
|
|
alert('Failed to save weapon: ' + (error.response?.data?.error || error.message))
|
|
}
|
|
},
|
|
cancelEdit() {
|
|
this.editingIndex = -1
|
|
this.editedItem = null
|
|
this.selectedSystemId = null
|
|
},
|
|
findSystemIdByCode(code) {
|
|
return findSystemIdByCode(this.gameSystems, code)
|
|
},
|
|
sortBy(field) {
|
|
if (this.sortField === field) {
|
|
this.sortAsc = !this.sortAsc
|
|
} else {
|
|
this.sortField = field
|
|
this.sortAsc = true
|
|
}
|
|
},
|
|
formatQuelle(weapon) {
|
|
if (weapon.source_id && this.availableSources.length > 0) {
|
|
const source = this.availableSources.find(s => s.id === weapon.source_id)
|
|
if (source) {
|
|
if (weapon.page_number) {
|
|
return `${source.code}:${weapon.page_number}`
|
|
} else {
|
|
// No page number - show code and quelle if available
|
|
const quelle = weapon.quelle ? ` (${weapon.quelle})` : ''
|
|
return `${source.code}${quelle}`
|
|
}
|
|
}
|
|
}
|
|
return weapon.quelle || '-'
|
|
},
|
|
getSourceCode(sourceId) {
|
|
return getSourceCode(this.availableSources, sourceId)
|
|
},
|
|
getSystemCodeById(systemId, fallback = '') {
|
|
return getSystemCodeById(this.gameSystems, systemId, fallback)
|
|
},
|
|
clearFilters() {
|
|
this.searchTerm = ''
|
|
this.filterSkillRequired = ''
|
|
this.filterDamage = ''
|
|
this.filterRangeNear = ''
|
|
this.filterRangeMiddle = ''
|
|
this.filterRangeFar = ''
|
|
this.filterQuelle = ''
|
|
}
|
|
}
|
|
};
|
|
</script>
|