new mass filtering function, edit column button init

src/components/TableSection.vue

@@ -8,13 +8,12 @@
                     <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 xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-calendar"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg>
+                    <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
-                    This week
                 </button>
             </div>
         </div>
         <div class="table-responsive">
-            <b-table striped hover :items="monstersData" :fields="fields"></b-table>
+            <b-table striped hover :items="filtered_items" :fields="fields"></b-table>
         </div>
     </section>
 </template>
@@ -32,15 +31,46 @@ export default {
 			monstersData: monster_json,
 			total_weight: 0,
 			fields: [
+				{
+					key: 'id',
+					label: 'Monster name',
+					sortable: true,
+					isActive: false,
+				},
 				{
 					key: 'monster',
 					label: 'Monster name',
 					sortable: true,
+					isActive: true,
+				},
+				{
+					key: 'combat_req',
+					label: 'Combat Requirement',
+					sortable: true,
+					isActive: false,
+				},
+				{
+					key: 'slayer_req',
+					label: 'Slayer Requirement',
+					sortable: true,
+					isActive: false,
+				},
+				{
+					key: 'defence_req',
+					label: 'Defence Requirement',
+					sortable: true,
+					isActive: false,
 				},
 			],
-			filters: {
+			config: {
-				combat_level: 49,
+				combat_level: 100,
 				slayer_level: 75,
+				defence_level: 60,
+			},
+			filters: {
+				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: [],
 		}
@@ -51,10 +81,21 @@ export default {
 		    this.filterData();
 		},
 	    filterData() {
-			// this.filtered_items = this.items.filter(item => item.last_name.includes('Carney'));
-			this.filtered_items = this.monstersData.filter(item => item.combat_req < this.filters.combat_level);
 
+			//filter based on account
+			this.filtered_items = this.filterArray(this.monstersData, this.filters)
 		},
+		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]);
+				});
+			});
+		}
 	},
 	mounted() {
 		this.reload();

src/components/TopNav.vue

@@ -12,7 +12,6 @@
             <li class="nav-item text-nowrap">
                 <a class="nav-link" href="https://github.com/bartvdbraak/slayweightcalc">
                     <svg xmlns="http://www.w3.org/2000/svg" height="28" class="m-1" viewBox="0 0 512 499.36" role="img" focusable="false"><title>GitHub</title><path fill="currentColor" fill-rule="evenodd" d="M256 0C114.64 0 0 114.61 0 256c0 113.09 73.34 209 175.08 242.9 12.8 2.35 17.47-5.56 17.47-12.34 0-6.08-.22-22.18-.35-43.54-71.2 15.49-86.2-34.34-86.2-34.34-11.64-29.57-28.42-37.45-28.42-37.45-23.27-15.84 1.73-15.55 1.73-15.55 25.69 1.81 39.21 26.38 39.21 26.38 22.84 39.12 59.92 27.82 74.5 21.27 2.33-16.54 8.94-27.82 16.25-34.22-56.84-6.43-116.6-28.43-116.6-126.49 0-27.95 10-50.8 26.35-68.69-2.63-6.48-11.42-32.5 2.51-67.75 0 0 21.49-6.88 70.4 26.24a242.65 242.65 0 0 1 128.18 0c48.87-33.13 70.33-26.24 70.33-26.24 14 35.25 5.18 61.27 2.55 67.75 16.41 17.9 26.31 40.75 26.31 68.69 0 98.35-59.85 120-116.88 126.32 9.19 7.9 17.38 23.53 17.38 47.41 0 34.22-.31 61.83-.31 70.23 0 6.85 4.61 14.81 17.6 12.31C438.72 464.97 512 369.08 512 256.02 512 114.62 397.37 0 256 0z"></path></svg>
-                    Github
                 </a>
             </li>
         </ul>
@@ -24,7 +23,6 @@ export default {
 	name: "Navbar",
 	methods: {
 		emitMenu() {
-			console.log('test')
 			this.$emit('clicked');
 		}
 	}