added frontend for
Equipment, Weapons, Weaponskills
This commit is contained in:
@@ -31,10 +31,9 @@
|
||||
import API from '../utils/api'
|
||||
import SkillView from "./maintenance/SkillView.vue"; // Component for character history
|
||||
import SpellView from "./maintenance/SpellView.vue"; // Component for character history
|
||||
/*import WeaponSkillView from "./maintenance/WeaponSkillView.vue"; // Component for character equipment
|
||||
import EquipmentView from "./maintenance/EquipmentView.vue"; // Component for character equipment
|
||||
import WeaponView from "./maintenance/WeaponView.vue"; // Component for character history
|
||||
*/
|
||||
import WeaponSkillView from "./maintenance/WeaponSkillView.vue"; // Component for character equipment
|
||||
|
||||
|
||||
export default {
|
||||
@@ -43,9 +42,9 @@ export default {
|
||||
components: {
|
||||
SkillView,
|
||||
SpellView,
|
||||
/*WeaponSkillView,
|
||||
EquipmentView,
|
||||
WeaponView,
|
||||
EquipmentView,*/
|
||||
WeaponSkillView,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
@@ -55,23 +54,20 @@ export default {
|
||||
weaponskills: [],
|
||||
spells: [],
|
||||
spellcategories: [],
|
||||
equipment:[],
|
||||
weapons: [],
|
||||
weaponskills: [],
|
||||
},
|
||||
loading: true,
|
||||
/*
|
||||
skills: {},
|
||||
weaponskills: {},
|
||||
spells: {},
|
||||
equipment: {},
|
||||
weapons: {},*/
|
||||
currentView: "SkillView", // Default view
|
||||
lastView: "SkillView",
|
||||
menus: [
|
||||
{ id: 0, name: "skill", component: "SkillView" },
|
||||
{ id: 2, name: "spell", component: "SpellView" },
|
||||
/*{ id: 1, name: "weaponskill", component: "WeaponSkillView" },
|
||||
{ id: 3, name: "equipment", component: "EquipmentView" },
|
||||
{ id: 1, name: "weapon", component: "WeaponView" },
|
||||
*/
|
||||
{ id: 1, name: "weaponskill", component: "WeaponSkillView" },
|
||||
|
||||
],
|
||||
};
|
||||
},
|
||||
|
||||
@@ -1,43 +1,70 @@
|
||||
<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('Equipment')}...`"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="cd-view">
|
||||
<div class="cd-list">
|
||||
<div class="tables-container">
|
||||
<h2 style="line-height: 1.5; margin-top: 5px;"><!-- {{ character.name }}'s -->Fertigkeiten</h2>
|
||||
<table class="cd-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="cd-table-header" width="60%">{{ $t('skill.name') }}</th>
|
||||
<th class="cd-table-header" width="35">{{ $t('skill.value') }}</th>
|
||||
<th class="cd-table-header" width="35">{{ $t('skill.bonus') }}</th>
|
||||
<th class="cd-table-header" width="35">{{ $t('skill.pp') }}</th>
|
||||
<!-- <th class="cd-table-header">{{ $t('skill.description') }}</th>-->
|
||||
<th class="cd-table-header" width="30%">{{ $t('skill.note') }}</th>
|
||||
<th class="cd-table-header">{{ $t('equipment.id') }}</th>
|
||||
<!-- <th class="cd-table-header">{{ $t('equipment.category') }}<button @click="sortBy('category')">-{{ sortField === 'category' ? (sortAsc ? '↑' : '↓') : '' }}</button></th> -->
|
||||
<th class="cd-table-header">{{ $t('equipment.name') }} <button @click="sortBy('name')">-{{ sortField === 'name' ? (sortAsc ? '↑' : '↓') : '' }}</button></th>
|
||||
<th class="cd-table-header">{{ $t('equipment.gewicht') }}</th>
|
||||
<th class="cd-table-header">{{ $t('equipment.wert') }}</th>
|
||||
<th class="cd-table-header">{{ $t('equipment.description') }}</th>
|
||||
<th class="cd-table-header">{{ $t('equipment.quelle') }}</th>
|
||||
<th class="cd-table-header">{{ $t('equipment.personal_item') }}</th>
|
||||
<th class="cd-table-header">{{ $t('equipment.system') }}</th>
|
||||
<th class="cd-table-header"> </th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<template v-for="skills,categorie in character.categorizedskills">
|
||||
<tr>
|
||||
<td colspan="6">{{ categorie || '-' }}</td>
|
||||
</tr>
|
||||
<template v-for="skill in skills">
|
||||
<tr>
|
||||
<td>{{ skill.name || '-' }}</td>
|
||||
<td>{{ skill.fertigkeitswert || '-' }}</td>
|
||||
<td>{{ skill.bonus || '0' }}</td>
|
||||
<td>{{ skill.pp || '0' }}</td>
|
||||
<!-- <td>{{ skill.beschreibung || '-' }}</td>-->
|
||||
<td>{{ skill.bemerkung || '-' }}</td>
|
||||
<template v-for="(dtaItem, index) in filteredAndSortedEquipments" :key="dtaItem.id">
|
||||
<tr v-if="editingIndex !== index">
|
||||
<td>{{ dtaItem.id || '' }}</td>
|
||||
<!-- <td>{{ dtaItem.category|| '-' }}</td> -->
|
||||
<td>{{ dtaItem.name || '-' }}</td>
|
||||
<td>{{ dtaItem.gewicht || '-' }}</td>
|
||||
<td>{{ dtaItem.wert || '-' }}</td>
|
||||
<td>{{ dtaItem.beschreibung || '-' }}</td>
|
||||
<td>{{ dtaItem.quelle || '-' }}</td>
|
||||
<td>{{ dtaItem.personal_item || '0' }}</td>
|
||||
<td>{{ dtaItem.system || 'midgard' }}</td>
|
||||
<td>
|
||||
<button @click="startEdit(index)">Edit</button>
|
||||
</td>
|
||||
</tr>
|
||||
</template>
|
||||
</template>
|
||||
<template v-for="skill in character.waffenfertigkeiten">
|
||||
<tr>
|
||||
<td>{{ skill.name || '-' }}</td>
|
||||
<td>{{ skill.fertigkeitswert || '-' }}</td>
|
||||
<td>{{ skill.bonus || '0' }}</td>
|
||||
<td>{{ skill.pp || '0' }}</td>
|
||||
<!-- <td>{{ skill.beschreibung || '-' }}</td> -->
|
||||
<td>{{ skill.bemerkung || '-' }}</td>
|
||||
<tr v-else>
|
||||
<td><input v-model="editedItem.id" style="width:20px;"/></td>
|
||||
<!-- <td><select v-model="editedItem.category" style="width:80px;">
|
||||
<option v-for="category in mdata['equipmentcategories']"
|
||||
:key="category"
|
||||
:value="category">
|
||||
{{ category }}
|
||||
</option>
|
||||
</select></td> -->
|
||||
<td><input v-model="editedItem.name"/></td>
|
||||
<td><input v-model.number="editedItem.gewicht" type="number" style="width:40px;"/></td>
|
||||
<td><input v-model="editedItem.wert" /></td>
|
||||
<td><input v-model="editedItem.beschreibung" /></td>
|
||||
<td><input v-model="editedItem.quelle" style="width:80px;"/></td>
|
||||
<td><input type="checkbox" :checked="true" v-model="editedItem.personal_item" style="width:50px;"/></td>
|
||||
<td><input v-model="editedItem.system" style="width:80px;"/></td>
|
||||
<td>
|
||||
<button @click="saveEdit(index)">Save</button>
|
||||
<button @click="cancelEdit">Cancel</button>
|
||||
</td>
|
||||
</tr>
|
||||
</template>
|
||||
</tbody>
|
||||
@@ -47,7 +74,25 @@
|
||||
</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;
|
||||
@@ -74,13 +119,101 @@
|
||||
|
||||
|
||||
<script>
|
||||
import API from '../../utils/api'
|
||||
export default {
|
||||
name: "EquipmentView",
|
||||
props: {
|
||||
character: {
|
||||
mdata: {
|
||||
type: Object,
|
||||
required: true
|
||||
required: true,
|
||||
default: () => ({
|
||||
equipments: [],
|
||||
equipmentcategories: []
|
||||
})
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
searchTerm: '',
|
||||
sortField: 'name',
|
||||
sortAsc: true,
|
||||
editingIndex: -1,
|
||||
editedItem: null
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
filteredAndSortedEquipments() {
|
||||
if (!this.mdata?.equipment) return [];
|
||||
|
||||
return [...this.mdata.equipment]
|
||||
.filter(equipment => {
|
||||
const searchLower = this.searchTerm.toLowerCase();
|
||||
return !this.searchTerm ||
|
||||
equipment.name?.toLowerCase().includes(searchLower)
|
||||
//|| equipment.category?.toLowerCase().includes(searchLower);
|
||||
})
|
||||
.sort((a, b) => {
|
||||
const aValue = (a[this.sortField] || '').toLowerCase();
|
||||
const bValue = (b[this.sortField] || '').toLowerCase();
|
||||
return this.sortAsc
|
||||
? aValue.localeCompare(bValue)
|
||||
: bValue.localeCompare(aValue);
|
||||
});
|
||||
},
|
||||
sortedEquipments() {
|
||||
return [...this.mdata.equipment].sort((a, b) => {
|
||||
const aValue = (a[this.sortField] || '').toLowerCase();
|
||||
const bValue = (b[this.sortField] || '').toLowerCase();
|
||||
return this.sortAsc
|
||||
? aValue.localeCompare(bValue)
|
||||
: bValue.localeCompare(aValue);
|
||||
});
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
startEdit(index) {
|
||||
this.editingIndex = index;
|
||||
this.editedItem = { ...this.filteredAndSortedEquipments[index] };
|
||||
},
|
||||
saveEdit(index) {
|
||||
//this.$emit('update-equipment', { index, equipment: this.editedItem });
|
||||
this.handleEquipmentUpdate( { index, equipment: this.editedItem });
|
||||
this.editingIndex = -1;
|
||||
this.editedItem = null;
|
||||
},
|
||||
cancelEdit() {
|
||||
this.editingIndex = -1;
|
||||
this.editedItem = null;
|
||||
},
|
||||
sortBy(field) {
|
||||
if (this.sortField === field) {
|
||||
this.sortAsc = !this.sortAsc;
|
||||
} else {
|
||||
this.sortField = field;
|
||||
this.sortAsc = true;
|
||||
}
|
||||
},
|
||||
async handleEquipmentUpdate({ index, equipment }) {
|
||||
try {
|
||||
const response = await API.put(
|
||||
`/api/maintenance/equipment/${equipment.id}`, equipment,
|
||||
{
|
||||
headers: {
|
||||
Authorization: `Bearer ${localStorage.getItem('token')}` ,
|
||||
'Content-Type': 'application/json'
|
||||
}
|
||||
}
|
||||
)
|
||||
if (!response.statusText== "OK") throw new Error('Update failed');
|
||||
const updatedSkill = response.data;
|
||||
// Update the equipment in mdata
|
||||
this.mdata.equipment = this.mdata.equipment.map(s =>
|
||||
s.id === updatedSkill.id ? updatedSkill : s
|
||||
);
|
||||
} catch (error) {
|
||||
console.error('Failed to update equipment:', error);
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
@@ -1,43 +1,73 @@
|
||||
<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('WaeponSkill')}...`"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="cd-view">
|
||||
<div class="cd-list">
|
||||
<div class="tables-container">
|
||||
<h2 style="line-height: 1.5; margin-top: 5px;"><!-- {{ character.name }}'s -->Fertigkeiten</h2>
|
||||
<table class="cd-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="cd-table-header" width="60%">{{ $t('skill.name') }}</th>
|
||||
<th class="cd-table-header" width="35">{{ $t('skill.value') }}</th>
|
||||
<th class="cd-table-header" width="35">{{ $t('skill.bonus') }}</th>
|
||||
<th class="cd-table-header" width="35">{{ $t('skill.pp') }}</th>
|
||||
<!-- <th class="cd-table-header">{{ $t('skill.description') }}</th>-->
|
||||
<th class="cd-table-header" width="30%">{{ $t('skill.note') }}</th>
|
||||
<th class="cd-table-header">{{ $t('weaponskill.id') }}</th>
|
||||
<th class="cd-table-header">{{ $t('weaponskill.category') }}<button @click="sortBy('category')">-{{ sortField === 'category' ? (sortAsc ? '↑' : '↓') : '' }}</button></th>
|
||||
<th class="cd-table-header">{{ $t('weaponskill.name') }} <button @click="sortBy('name')">-{{ sortField === 'name' ? (sortAsc ? '↑' : '↓') : '' }}</button></th>
|
||||
<th class="cd-table-header">{{ $t('weaponskill.initialwert') }}</th>
|
||||
<th class="cd-table-header">{{ $t('weaponskill.improvable') }}</th>
|
||||
<th class="cd-table-header">{{ $t('weaponskill.innateskill') }}</th>
|
||||
<th class="cd-table-header">{{ $t('weaponskill.description') }}</th>
|
||||
<th class="cd-table-header">{{ $t('weaponskill.bonusskill') }}</th>
|
||||
<th class="cd-table-header">{{ $t('weaponskill.quelle') }}</th>
|
||||
<th class="cd-table-header">{{ $t('weaponskill.system') }}</th>
|
||||
<th class="cd-table-header"> </th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<template v-for="skills,categorie in character.categorizedskills">
|
||||
<tr>
|
||||
<td colspan="6">{{ categorie || '-' }}</td>
|
||||
</tr>
|
||||
<template v-for="skill in skills">
|
||||
<tr>
|
||||
<td>{{ skill.name || '-' }}</td>
|
||||
<td>{{ skill.fertigkeitswert || '-' }}</td>
|
||||
<td>{{ skill.bonus || '0' }}</td>
|
||||
<td>{{ skill.pp || '0' }}</td>
|
||||
<!-- <td>{{ skill.beschreibung || '-' }}</td>-->
|
||||
<td>{{ skill.bemerkung || '-' }}</td>
|
||||
<template v-for="(dtaItem, index) in filteredAndSortedWaeponSkills" :key="dtaItem.id">
|
||||
<tr v-if="editingIndex !== index">
|
||||
<td>{{ dtaItem.id || '' }}</td>
|
||||
<td>{{ dtaItem.category|| '-' }}</td>
|
||||
<td>{{ dtaItem.name || '-' }}</td>
|
||||
<td>{{ dtaItem.initialwert || '0' }}</td>
|
||||
<td>{{ dtaItem.improvable || '0' }}</td>
|
||||
<td>{{ dtaItem.innateskill || '0' }}</td>
|
||||
<td>{{ dtaItem.beschreibung || '-' }}</td>
|
||||
<td>{{ dtaItem.bonuseigenschaft || '-' }}</td>
|
||||
<td>{{ dtaItem.quelle || '-' }}</td>
|
||||
<td>{{ dtaItem.system || 'midgard' }}</td>
|
||||
<td>
|
||||
<button @click="startEdit(index)">Edit</button>
|
||||
</td>
|
||||
</tr>
|
||||
</template>
|
||||
</template>
|
||||
<template v-for="skill in character.waffenfertigkeiten">
|
||||
<tr>
|
||||
<td>{{ skill.name || '-' }}</td>
|
||||
<td>{{ skill.fertigkeitswert || '-' }}</td>
|
||||
<td>{{ skill.bonus || '0' }}</td>
|
||||
<td>{{ skill.pp || '0' }}</td>
|
||||
<!-- <td>{{ skill.beschreibung || '-' }}</td> -->
|
||||
<td>{{ skill.bemerkung || '-' }}</td>
|
||||
<tr v-else>
|
||||
<td><input v-model="editedItem.id" style="width:20px;"/></td>
|
||||
<td><select v-model="editedItem.category" style="width:80px;">
|
||||
<option v-for="category in mdata['skillcategories']"
|
||||
:key="category"
|
||||
:value="category">
|
||||
{{ category }}
|
||||
</option>
|
||||
</select></td>
|
||||
<td><input v-model="editedItem.name"/></td>
|
||||
<td><input v-model.number="editedItem.initialwert" type="number" style="width:40px;"/></td>
|
||||
<td><input type="checkbox" :checked="true" v-model="editedItem.improvable" style="width:50px;"/></td>
|
||||
<td><input type="checkbox" :checked="true" v-model="editedItem.innateskill" style="width:50px;"/></td>
|
||||
<td><input v-model="editedItem.beschreibung" /></td>
|
||||
<td><input v-model="editedItem.bonuseigenschaft" style="width:80px;" ></td>
|
||||
<td><input v-model="editedItem.quelle" style="width:80px;"/></td>
|
||||
<td><input v-model="editedItem.system" style="width:80px;"/></td>
|
||||
<td>
|
||||
<button @click="saveEdit(index)">Save</button>
|
||||
<button @click="cancelEdit">Cancel</button>
|
||||
</td>
|
||||
</tr>
|
||||
</template>
|
||||
</tbody>
|
||||
@@ -47,7 +77,25 @@
|
||||
</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;
|
||||
@@ -74,12 +122,100 @@
|
||||
|
||||
|
||||
<script>
|
||||
import API from '../../utils/api'
|
||||
export default {
|
||||
name: "WeaponSkillView",
|
||||
name: "WaeponSkillView",
|
||||
props: {
|
||||
character: {
|
||||
mdata: {
|
||||
type: Object,
|
||||
required: true
|
||||
required: true,
|
||||
default: () => ({
|
||||
skills: [],
|
||||
skillcategories: []
|
||||
})
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
searchTerm: '',
|
||||
sortField: 'name',
|
||||
sortAsc: true,
|
||||
editingIndex: -1,
|
||||
editedItem: null
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
filteredAndSortedWaeponSkills() {
|
||||
if (!this.mdata?.weaponskills) return [];
|
||||
|
||||
return [...this.mdata.weaponskills]
|
||||
.filter(skill => {
|
||||
const searchLower = this.searchTerm.toLowerCase();
|
||||
return !this.searchTerm ||
|
||||
skill.name?.toLowerCase().includes(searchLower) ||
|
||||
skill.category?.toLowerCase().includes(searchLower);
|
||||
})
|
||||
.sort((a, b) => {
|
||||
const aValue = (a[this.sortField] || '').toLowerCase();
|
||||
const bValue = (b[this.sortField] || '').toLowerCase();
|
||||
return this.sortAsc
|
||||
? aValue.localeCompare(bValue)
|
||||
: bValue.localeCompare(aValue);
|
||||
});
|
||||
},
|
||||
sortedWaeponSkills() {
|
||||
return [...this.mdata.weaponskills].sort((a, b) => {
|
||||
const aValue = (a[this.sortField] || '').toLowerCase();
|
||||
const bValue = (b[this.sortField] || '').toLowerCase();
|
||||
return this.sortAsc
|
||||
? aValue.localeCompare(bValue)
|
||||
: bValue.localeCompare(aValue);
|
||||
});
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
startEdit(index) {
|
||||
this.editingIndex = index;
|
||||
this.editedItem = { ...this.filteredAndSortedWaeponSkills[index] };
|
||||
},
|
||||
saveEdit(index) {
|
||||
//this.$emit('update-skill', { index, skill: this.editedItem });
|
||||
this.handleWaeponSkillUpdate({ index, skill: this.editedItem });
|
||||
this.editingIndex = -1;
|
||||
this.editedItem = null;
|
||||
},
|
||||
cancelEdit() {
|
||||
this.editingIndex = -1;
|
||||
this.editedItem = null;
|
||||
},
|
||||
sortBy(field) {
|
||||
if (this.sortField === field) {
|
||||
this.sortAsc = !this.sortAsc;
|
||||
} else {
|
||||
this.sortField = field;
|
||||
this.sortAsc = true;
|
||||
}
|
||||
},
|
||||
async handleWaeponSkillUpdate({ index, skill }) {
|
||||
try {
|
||||
const response = await API.put(
|
||||
`/api/maintenance/skills/${skill.id}`, skill,
|
||||
{
|
||||
headers: {
|
||||
Authorization: `Bearer ${localStorage.getItem('token')}` ,
|
||||
'Content-Type': 'application/json'
|
||||
}
|
||||
}
|
||||
)
|
||||
if (!response.statusText== "OK") throw new Error('Update failed');
|
||||
const updatedWaeponSkill = response.data;
|
||||
// Update the skill in mdata
|
||||
this.mdata.weaponskills = this.mdata.weaponskills.map(s =>
|
||||
s.id === updatedWaeponSkill.id ? updatedWaeponSkill : s
|
||||
);
|
||||
} catch (error) {
|
||||
console.error('Failed to update skill:', error);
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
@@ -1,43 +1,73 @@
|
||||
<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">
|
||||
<div class="tables-container">
|
||||
<h2 style="line-height: 1.5; margin-top: 5px;"><!-- {{ character.name }}'s -->Fertigkeiten</h2>
|
||||
<table class="cd-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="cd-table-header" width="60%">{{ $t('skill.name') }}</th>
|
||||
<th class="cd-table-header" width="35">{{ $t('skill.value') }}</th>
|
||||
<th class="cd-table-header" width="35">{{ $t('skill.bonus') }}</th>
|
||||
<th class="cd-table-header" width="35">{{ $t('skill.pp') }}</th>
|
||||
<!-- <th class="cd-table-header">{{ $t('skill.description') }}</th>-->
|
||||
<th class="cd-table-header" width="30%">{{ $t('skill.note') }}</th>
|
||||
<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.gewicht') }}</th>
|
||||
<th class="cd-table-header">{{ $t('weapon.wert') }}</th>
|
||||
<th class="cd-table-header">{{ $t('weapon.damage') }}</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="skills,categorie in character.categorizedskills">
|
||||
<tr>
|
||||
<td colspan="6">{{ categorie || '-' }}</td>
|
||||
</tr>
|
||||
<template v-for="skill in skills">
|
||||
<tr>
|
||||
<td>{{ skill.name || '-' }}</td>
|
||||
<td>{{ skill.fertigkeitswert || '-' }}</td>
|
||||
<td>{{ skill.bonus || '0' }}</td>
|
||||
<td>{{ skill.pp || '0' }}</td>
|
||||
<!-- <td>{{ skill.beschreibung || '-' }}</td>-->
|
||||
<td>{{ skill.bemerkung || '-' }}</td>
|
||||
<template v-for="(dtaItem, index) in filteredAndSortedWeaponss" :key="dtaItem.id">
|
||||
<tr v-if="editingIndex !== index">
|
||||
<td>{{ dtaItem.id || '' }}</td>
|
||||
<!-- <td>{{ dtaItem.category|| '-' }}</td> -->
|
||||
<td>{{ dtaItem.name || '-' }}</td>
|
||||
<td>{{ dtaItem.gewicht || '-' }}</td>
|
||||
<td>{{ dtaItem.wert || '-' }}</td>
|
||||
<td>{{ dtaItem.damage || '-' }}</td>
|
||||
<td>{{ dtaItem.beschreibung || '-' }}</td>
|
||||
<td>{{ dtaItem.quelle || '-' }}</td>
|
||||
<td>{{ dtaItem.personal_item || '0' }}</td>
|
||||
<td>{{ dtaItem.system || 'midgard' }}</td>
|
||||
<td>
|
||||
<button @click="startEdit(index)">Edit</button>
|
||||
</td>
|
||||
</tr>
|
||||
</template>
|
||||
</template>
|
||||
<template v-for="skill in character.waffenfertigkeiten">
|
||||
<tr>
|
||||
<td>{{ skill.name || '-' }}</td>
|
||||
<td>{{ skill.fertigkeitswert || '-' }}</td>
|
||||
<td>{{ skill.bonus || '0' }}</td>
|
||||
<td>{{ skill.pp || '0' }}</td>
|
||||
<!-- <td>{{ skill.beschreibung || '-' }}</td> -->
|
||||
<td>{{ skill.bemerkung || '-' }}</td>
|
||||
<tr v-else>
|
||||
<td><input v-model="editedItem.id" style="width:20px;"/></td>
|
||||
<!-- <td><select v-model="editedItem.category" style="width:80px;">
|
||||
<option v-for="category in mdata['weaponscategories']"
|
||||
:key="category"
|
||||
:value="category">
|
||||
{{ category }}
|
||||
</option>
|
||||
</select></td> -->
|
||||
<td><input v-model="editedItem.name"/></td>
|
||||
<td><input v-model.number="editedItem.gewicht" type="number" style="width:40px;"/></td>
|
||||
<td><input v-model="editedItem.wert" /></td>
|
||||
<td><input v-model="editedItem.damage" /></td>
|
||||
<td><input v-model="editedItem.beschreibung" /></td>
|
||||
<td><input v-model="editedItem.quelle" style="width:80px;"/></td>
|
||||
<td><input type="checkbox" :checked="true" v-model="editedItem.personal_item" style="width:50px;"/></td>
|
||||
<td><input v-model="editedItem.system" style="width:80px;"/></td>
|
||||
<td>
|
||||
<button @click="saveEdit(index)">Save</button>
|
||||
<button @click="cancelEdit">Cancel</button>
|
||||
</td>
|
||||
</tr>
|
||||
</template>
|
||||
</tbody>
|
||||
@@ -47,7 +77,25 @@
|
||||
</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;
|
||||
@@ -74,13 +122,101 @@
|
||||
|
||||
|
||||
<script>
|
||||
import API from '../../utils/api'
|
||||
export default {
|
||||
name: "WeaponView",
|
||||
props: {
|
||||
character: {
|
||||
mdata: {
|
||||
type: Object,
|
||||
required: true
|
||||
required: true,
|
||||
default: () => ({
|
||||
weaponss: [],
|
||||
weaponscategories: []
|
||||
})
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
searchTerm: '',
|
||||
sortField: 'name',
|
||||
sortAsc: true,
|
||||
editingIndex: -1,
|
||||
editedItem: null
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
filteredAndSortedWeaponss() {
|
||||
if (!this.mdata?.weapons) return [];
|
||||
|
||||
return [...this.mdata.weapons]
|
||||
.filter(weapons => {
|
||||
const searchLower = this.searchTerm.toLowerCase();
|
||||
return !this.searchTerm ||
|
||||
weapons.name?.toLowerCase().includes(searchLower)
|
||||
//|| weapons.category?.toLowerCase().includes(searchLower);
|
||||
})
|
||||
.sort((a, b) => {
|
||||
const aValue = (a[this.sortField] || '').toLowerCase();
|
||||
const bValue = (b[this.sortField] || '').toLowerCase();
|
||||
return this.sortAsc
|
||||
? aValue.localeCompare(bValue)
|
||||
: bValue.localeCompare(aValue);
|
||||
});
|
||||
},
|
||||
sortedWeaponss() {
|
||||
return [...this.mdata.weapons].sort((a, b) => {
|
||||
const aValue = (a[this.sortField] || '').toLowerCase();
|
||||
const bValue = (b[this.sortField] || '').toLowerCase();
|
||||
return this.sortAsc
|
||||
? aValue.localeCompare(bValue)
|
||||
: bValue.localeCompare(aValue);
|
||||
});
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
startEdit(index) {
|
||||
this.editingIndex = index;
|
||||
this.editedItem = { ...this.filteredAndSortedWeaponss[index] };
|
||||
},
|
||||
saveEdit(index) {
|
||||
//this.$emit('update-weapons', { index, weapons: this.editedItem });
|
||||
this.handleWeaponsUpdate( { index, weapons: this.editedItem });
|
||||
this.editingIndex = -1;
|
||||
this.editedItem = null;
|
||||
},
|
||||
cancelEdit() {
|
||||
this.editingIndex = -1;
|
||||
this.editedItem = null;
|
||||
},
|
||||
sortBy(field) {
|
||||
if (this.sortField === field) {
|
||||
this.sortAsc = !this.sortAsc;
|
||||
} else {
|
||||
this.sortField = field;
|
||||
this.sortAsc = true;
|
||||
}
|
||||
},
|
||||
async handleWeaponsUpdate({ index, weapons }) {
|
||||
try {
|
||||
const response = await API.put(
|
||||
`/api/maintenance/weapons/${weapons.id}`, weapons,
|
||||
{
|
||||
headers: {
|
||||
Authorization: `Bearer ${localStorage.getItem('token')}` ,
|
||||
'Content-Type': 'application/json'
|
||||
}
|
||||
}
|
||||
)
|
||||
if (!response.statusText== "OK") throw new Error('Update failed');
|
||||
const updatedSkill = response.data;
|
||||
// Update the weapons in mdata
|
||||
this.mdata.weapons = this.mdata.weapons.map(s =>
|
||||
s.id === updatedSkill.id ? updatedSkill : s
|
||||
);
|
||||
} catch (error) {
|
||||
console.error('Failed to update weapons:', error);
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
@@ -31,7 +31,9 @@ export default {
|
||||
DeleteChar:'Figur löschen',
|
||||
//Character:'Charakter',
|
||||
},
|
||||
Equipment:'Ausrüstung',
|
||||
equipment:{
|
||||
id:'ID',
|
||||
name:'Name',
|
||||
description:'Beschreibung',
|
||||
weight:'Gewicht',
|
||||
@@ -40,6 +42,11 @@ export default {
|
||||
notes:'Notizen',
|
||||
bonus:'Bonus',
|
||||
contained_in:'Enthalten in',
|
||||
gewicht:'Gewicht',
|
||||
wert:'Wert',
|
||||
quelle:'Quelle',
|
||||
system:'System',
|
||||
personal_item:'Pers',
|
||||
},
|
||||
skill:{
|
||||
id:'ID',
|
||||
@@ -78,14 +85,39 @@ export default {
|
||||
},
|
||||
Spell:'Zauber',
|
||||
weapon:{
|
||||
id:'ID',
|
||||
name:'Name',
|
||||
description:'Beschreibung',
|
||||
weight:'Gewicht',
|
||||
gewicht:'Gewicht',
|
||||
amount:'Anzahl',
|
||||
value:'Wert',
|
||||
wert:'Wert',
|
||||
damage:'Schaden',
|
||||
bonus:'Bonus',
|
||||
contained_in:'Enthalten in',
|
||||
personal_item:'Pers',
|
||||
quelle:'Quelle',
|
||||
system:'System',
|
||||
},
|
||||
Weapons:'Waffen',
|
||||
weaponskill:{
|
||||
id:'ID',
|
||||
name:'Name',
|
||||
description:'Beschreibung',
|
||||
value:'EW',
|
||||
note:'Bemerkung',
|
||||
bonus:'Bonus',
|
||||
pp:'PP',
|
||||
quelle:'Quelle',
|
||||
system:'System',
|
||||
bonusskill:'Bonuseigenschaft',
|
||||
innateskill:'angeboren',
|
||||
improvable:'verbesserbar',
|
||||
category:'Kategorie',
|
||||
initialwert:'Startwert',
|
||||
},
|
||||
WaeponSkill:'Waffenfertigkeiten',
|
||||
maintenance:'Wartung',
|
||||
maintmenu:{
|
||||
skill:'Fertigkeiten',
|
||||
|
||||
@@ -1,7 +1,8 @@
|
||||
import axios from 'axios'
|
||||
|
||||
const API = axios.create({
|
||||
baseURL: 'http://192.168.0.48:8180', // Replace with your backend URL
|
||||
//baseURL: 'http://192.168.0.48:8180', // Replace with your backend URL
|
||||
baseURL: 'http://localhost:8180', // Replace with your backend URL
|
||||
})
|
||||
|
||||
export default API
|
||||
|
||||
Reference in New Issue
Block a user