mirror of
https://github.com/bartvdbraak/SlayerWeightCalculator.git
synced 2025-04-27 09:41:19 +00:00
init parsing items in tables and filtering
This commit is contained in:
parent
226454f3c7
commit
6baca18adb
6 changed files with 93 additions and 12 deletions
|
|
@ -8,7 +8,7 @@
|
|||
"lint": "vue-cli-service lint"
|
||||
},
|
||||
"dependencies": {
|
||||
"bootstrap": "4.4.1",
|
||||
"bootstrap": "^4.4.1",
|
||||
"bootstrap-vue": "^2.3.0",
|
||||
"core-js": "^3.4.4",
|
||||
"vue": "^2.6.10"
|
||||
|
|
@ -19,7 +19,7 @@
|
|||
"@vue/cli-plugin-eslint": "^4.1.0",
|
||||
"@vue/cli-service": "^4.1.0",
|
||||
"babel-eslint": "^10.0.3",
|
||||
"bootstrap": "^4.3.1",
|
||||
"bootstrap": "^4.4.1",
|
||||
"eslint": "^5.16.0",
|
||||
"eslint-plugin-vue": "^5.0.0",
|
||||
"mutationobserver-shim": "^0.3.3",
|
||||
|
|
|
|||
10
src/App.vue
10
src/App.vue
|
|
@ -2,8 +2,8 @@
|
|||
<div id="app">
|
||||
<top-nav></top-nav>
|
||||
<div class="container-fluid">
|
||||
<div class="row">
|
||||
<left-nav></left-nav>
|
||||
<div class="d-flex">
|
||||
<left-nav class="flox-grow-1"></left-nav>
|
||||
<main-content></main-content>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -11,9 +11,9 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import MainContent from './components/MainContent.vue';
|
||||
import LeftNav from './components/LeftNav.vue';
|
||||
import TopNav from './components/TopNav.vue';
|
||||
import MainContent from './components/MainContent';
|
||||
import LeftNav from './components/LeftNav';
|
||||
import TopNav from './components/TopNav';
|
||||
|
||||
export default {
|
||||
name: 'app',
|
||||
|
|
|
|||
|
|
@ -1,6 +1,9 @@
|
|||
<template >
|
||||
<nav class="col-md-2 d-none d-md-block bg-light sidebar">
|
||||
<nav class="bg-light sidebar">
|
||||
<div class="sidebar-sticky">
|
||||
<ul class="nav flex-column mb-2">
|
||||
<NavItem v-for="link in links" :key="link.id" :title="link.title" :id="link.id" :icon_url="link.icon"/>
|
||||
</ul>
|
||||
<h6 class="sidebar-heading d-flex justify-content-between align-items-center px-3 mt-4 mb-1 text-muted">
|
||||
<span>Slayer Masters</span>
|
||||
</h6>
|
||||
|
|
@ -28,13 +31,16 @@ export default {
|
|||
},
|
||||
data() {
|
||||
return {
|
||||
masters: master_json.masters,
|
||||
extraLinks: [
|
||||
links: [
|
||||
{
|
||||
id: 100,
|
||||
icon: 'hiscores.png',
|
||||
title: 'Account settings',
|
||||
},
|
||||
],
|
||||
masters: master_json.masters,
|
||||
extraLinks: [
|
||||
|
||||
{
|
||||
id: 101,
|
||||
icon: 'osrswiki.png',
|
||||
|
|
|
|||
|
|
@ -1,11 +1,16 @@
|
|||
<template>
|
||||
<main class="col-md-9 ml-sm-auto col-lg-10 px-4">
|
||||
<main role="main" class="ml-sm-auto col-lg-10 px-4">
|
||||
<section-content></section-content>
|
||||
</main>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import SectionContent from "./TableSection";
|
||||
export default {
|
||||
name: 'MainContent',
|
||||
components: {
|
||||
SectionContent,
|
||||
},
|
||||
props: {
|
||||
headerText: String
|
||||
}
|
||||
|
|
@ -13,5 +18,13 @@ export default {
|
|||
</script>
|
||||
|
||||
<style scoped>
|
||||
[role="main"] {
|
||||
padding-top: 133px; /* Space for fixed navbar */
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
[role="main"] {
|
||||
padding-top: 48px; /* Space for fixed navbar */
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
62
src/components/TableSection.vue
Normal file
62
src/components/TableSection.vue
Normal file
|
|
@ -0,0 +1,62 @@
|
|||
<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">Dashboard</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 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>
|
||||
This week
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="table-responsive">
|
||||
<b-table striped hover :items="filtered_items"></b-table>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
export default {
|
||||
name: "TableSection",
|
||||
props: {
|
||||
tableData: Object,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
total_weight: 100,
|
||||
items: [
|
||||
{ age_requirement: 40, first_name: 'Dickerson', last_name: 'Macdonald', combat_requirement: 10 },
|
||||
{ age_requirement: 21, first_name: 'Larsen', last_name: 'Shaw', combat_requirement: 0 },
|
||||
{ age_requirement: 89, first_name: 'Geneva', last_name: 'Wilson', combat_requirement: 50 },
|
||||
{ age_requirement: 38, first_name: 'Jami', last_name: 'Carney', combat_requirement: 0 }
|
||||
],
|
||||
filters: {
|
||||
age: 35,
|
||||
combat_level: 49,
|
||||
},
|
||||
filtered_items: [],
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
filterData() {
|
||||
// this.filtered_items = this.items.filter(item => item.last_name.includes('Carney'));
|
||||
|
||||
this.filtered_items = this.items.filter(item => item.combat_requirement < this.filters.combat_level);
|
||||
console.log(this.filtered_items)
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.filterData();
|
||||
},
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
Loading…
Reference in a new issue