<template>
<section>
<div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 my-2">
<h1 class="h3 text-uppercase font-weight-bolder"><span v-if="currentMaster">{{currentMaster.name}}</span></h1>
<div class="btn-toolbar mb-2 mb-md-0">
<div class="btn-group mr-2">
<button type="button" class="btn btn-sm btn-outline-secondary">Share</button>
<button type="button" class="btn btn-sm btn-outline-secondary">Export</button>
</div>
<button type="button" class="btn btn-sm btn-outline-secondary dropdown-toggle">
<svg height="20" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path d="m184.296875 512c-4.199219 0-8.277344-1.644531-11.304687-4.691406-3.925782-3.925782-5.527344-9.582032-4.265626-14.976563l23.253907-98.667969c.679687-2.902343 2.152343-5.546874 4.265625-7.636718l203.648437-203.648438c18.109375-18.132812 49.75-18.15625 67.882813 0l30.164062 30.164063c9.066406 9.046875 14.058594 21.121093 14.058594 33.921875 0 12.820312-4.992188 24.894531-14.058594 33.941406l-203.648437 203.625c-2.113281 2.113281-4.757813 3.585938-7.636719 4.265625l-98.667969 23.253906c-1.234375.320313-2.472656.449219-3.691406.449219zm37.78125-106.582031-16.277344 69.078125 69.078125-16.277344 200.429688-200.425781c3.027344-3.03125 4.691406-7.039063 4.691406-11.308594 0-4.265625-1.664062-8.296875-4.691406-11.304687l-30.167969-30.167969c-6.25-6.226563-16.382813-6.25-22.632813 0zm60.910156 67.328125h.210938zm0 0"/><path d="m433.835938 337.898438c-4.097657 0-8.191407-1.558594-11.308594-4.691407l-75.433594-75.4375c-6.25-6.25-6.25-16.382812 0-22.632812s16.382812-6.25 22.632812 0l75.4375 75.433593c6.25 6.25 6.25 16.382813 0 22.636719-3.136718 3.132813-7.234374 4.691407-11.328124 4.691407zm0 0"/><path d="m145.921875 448h-97.921875c-26.476562 0-48-21.523438-48-48v-352c0-26.476562 21.523438-48 48-48h309.332031c26.476563 0 48 21.523438 48 48v98.773438c0 8.832031-7.167969 16-16 16s-16-7.167969-16-16v-98.773438c0-8.832031-7.167969-16-16-16h-309.332031c-8.832031 0-16 7.167969-16 16v352c0 8.832031 7.167969 16 16 16h97.921875c8.832031 0 16 7.167969 16 16s-7.167969 16-16 16zm0 0"/><path d="m389.332031 138.667969h-373.332031c-8.832031 0-16-7.167969-16-16s7.167969-16 16-16h373.332031c8.832031 0 16 7.167969 16 16s-7.167969 16-16 16zm0 0"/><path d="m310.828125 245.332031h-294.828125c-8.832031 0-16-7.167969-16-16s7.167969-16 16-16h294.828125c8.832031 0 16 7.167969 16 16s-7.167969 16-16 16zm0 0"/><path d="m202.667969 352h-186.667969c-8.832031 0-16-7.167969-16-16s7.167969-16 16-16h186.667969c8.832031 0 16 7.167969 16 16s-7.167969 16-16 16zm0 0"/><path d="m202.667969 352c-8.832031 0-16-7.167969-16-16v-213.332031c0-8.832031 7.167969-16 16-16s16 7.167969 16 16v213.332031c0 8.832031-7.167969 16-16 16zm0 0"/></svg> Edit columns
</button>
</div>
</div>
<div class="table-responsive">
<b-table striped hover
:items="filtered_items"
:fields="fields"
:sort-by.sync="sortBy"
:sort-desc.sync="sortDesc"
:sort-direction="sortDirection">
<template v-slot:cell(task_percentage)="data">
<span class="text-monospace">{{ data.value.toFixed(2) }}%</span>
</template>
</b-table>
</div>
</section>
</template>
<script>
import master_json from "../data/masters";
export default {
name: "TableSection",
data() {
return {
mastersData: master_json,
currentMaster: null,
monstersData: null,
total_weight: 0,
sortDirection: 'desc',
sortDesc: true,
sortBy: 'task_percentage',
fields: [
{
key: 'id',
label: 'Monster ID',
sortable: true,
class: 'd-none',
},
{
key: 'monster',
label: 'Monster name',
sortable: true,
},
{
key: 'combat_req',
label: 'Combat Requirement',
sortable: true,
class: 'd-none',
},
{
key: 'slayer_req',
label: 'Slayer Requirement',
sortable: true,
class: 'd-none',
},
{
key: 'defence_req',
label: 'Defence Requirement',
sortable: true,
class: 'd-none',
},
{
key: 'defence_req',
label: 'Defence Requirement',
sortable: true,
class: 'd-none',
},
{
key: 'task_percentage',
label: 'Task chance',
sortable: true,
},
],
config: {
combat_level: 60,
slayer_level: 50,
defence_level: 1,
},
accountFilters: {
combat_req: combat_req => combat_req <= this.config.combat_level,
slayer_req: slayer_req => slayer_req <= this.config.slayer_level,
defence_req: defence_req => defence_req <= this.config.defence_level,
},
filtered_items: [],
}
},
methods: {
reload() {
//set current Slayer Master
this.currentMaster = this.mastersData[this.$route.params.id];
this.monstersData = this.currentMaster.assignments;
//filter the list of Monsters
this.filterData();
this.generateTaskWeights();
},
filterData() {
//filter based on Account Settings
this.filtered_items = this.filterArray(this.monstersData, this.accountFilters);
},
filterArray(array, filters) {
const filterKeys = Object.keys(filters);
return array.filter(item => {
// validates all filter criteria
return filterKeys.every(key => {
// ignores non-function predicates
if (typeof filters[key] !== 'function') return true;
return filters[key](item[key]);
});
});
},
generateTaskWeights() {
//calculate total weight
this.total_weight = this.filtered_items.reduce(function(prev, cur) {
return prev + parseInt(cur.taskweight);
}, 0);
//add new entry with calculated task change
this.filtered_items.forEach(item => {
item.task_percentage = item.taskweight / this.total_weight * 100;
})
},
},
created() {
this.reload();
},
watch: {
$route(to, from) {
this.reload();
}
}
}
</script>
<style scoped>
</style>