bartvdbraak/SlayerWeightCalculator
1
0
Fork 0
mirror of https://github.com/bartvdbraak/SlayerWeightCalculator.git synced 2025-06-28 23:39:12 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

change dflex to col, vuex, routing, router-view, currectMaster

Browse source
This commit is contained in:
Bart van der Braak 2020-01-31 21:22:21 +01:00
parent 50dffb273f
commit 506db21776
9 changed files with 76 additions and 30 deletions
Download patch file Download diff file Expand all files Collapse all files

4
src/App.vue
View file

@ -2,8 +2,8 @@
<div id="app">
<top-nav></top-nav>
<div class="container-fluid">
<div class="d-flex">
<left-nav class="flox-grow-1"></left-nav>
<div class="row">
<left-nav></left-nav>
<main-content></main-content>
</div>
</div>

2
src/components/ConfigSection.vue
View file

@ -1,7 +1,7 @@
<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">{{ }}</h1>
<h1 class="h3 text-uppercase">Account Settings</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>

10
src/components/LeftNav.vue
View file

@ -1,20 +1,20 @@
<template >
<nav class="bg-light sidebar">
<nav class="col-md-2 d-none d-md-block 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" :component="'config-section'"/>
<NavItem v-for="link in links" :key="link.id" :title="link.title" :id="link.id" :icon_url="link.icon" :to="link.to"/>
</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>
<ul class="nav flex-column mb-2">
<NavItem v-for="master in masters" :key="master.id" :title="master.name" :id="master.id" :icon_url="master.image" :component="'table-section'"/>
<NavItem v-for="master in masters" :key="master.id" :title="master.name" :id="master.id" :icon_url="master.image" :to="'master'"/>
</ul>
<h6 class="sidebar-heading d-flex justify-content-between align-items-center px-3 mt-4 mb-1 text-muted">
<span>Other Links</span>
</h6>
<ul class="nav flex-column mb-2">
<NavItem v-for="link in extraLinks" :key="link.id" :title="link.title" :id="link.id" :icon_url="link.icon"/>
<NavItem v-for="link in extraLinks" :key="link.id" :title="link.title" :id="link.id" :icon_url="link.icon" :url="link.url"/>
</ul>
</div>
</nav>
@ -36,6 +36,7 @@ export default {
id: 100,
icon: 'hiscores.png',
title: 'Account settings',
to: 'config',
},
],
masters: master_json.masters,
@ -44,6 +45,7 @@ export default {
id: 101,
icon: 'osrswiki.png',
title: 'OSRS Wiki',
url: 'https://osrs.wiki/',
},
]
}

10
src/components/MainContent.vue
View file

@ -1,22 +1,18 @@
<template>
<main role="main" class="ml-sm-auto col-lg-10 px-4">
<component :is="currentComponent"></component>
<main role="main" class="col-md-9 ml-sm-auto col-lg-10 px-4">
<router-view></router-view>
</main>
</template>
<script>
import TableSection from "./TableSection";
import ConfigSection from "./ConfigSection";
export default {
name: 'MainContent',
components: {
TableSection,
},
props: {
headerText: String,
currentComponent: {
default: 'table-section',
default: 'config-section',
},
},
}

15
src/components/NavItem.vue
View file

@ -1,8 +1,14 @@
<template>
<li class="nav-item" @click="contentSwitch">
<a class="nav-link active" v-bind:class="{ active: isActive }" href="#">
<img class="mx-2" v-if="icon_url" :src="require(`../assets/${icon_url}`)" width="42" height="42">
<span class="h6">{{ title }}</span>
<router-link class="nav-link" v-bind:class="{ active: isActive }" v-if="to" :to="{ name: to, params: { id: id }}">
<img class="mx-2 rounded-circle shadow" v-if="icon_url" :src="require(`../assets/${icon_url}`)" width="42" height="42">
<span class="h6">{{ title }} {{to}}</span>
</router-link>
<a class="nav-link" v-bind:class="{ active: isActive }" v-if="url" :href="url" >
<img class="mx-2 rounded-circle shadow" v-if="icon_url" :src="require(`../assets/${icon_url}`)" width="42" height="42">
<span class="h6">{{ title }} {{to}}</span>
</a>
</li>
</template>
@ -20,11 +26,12 @@ export default {
icon_url: String,
title: String,
component: String,
url: String,
to: String,
},
methods: {
contentSwitch() {
this.$emit('contentSwitch', this.component);
console.log('test')
}
}
}

29
src/components/TableSection.vue
View file

@ -1,7 +1,7 @@
<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>
<h1 class="h3 text-uppercase">{{currentMaster.name}}</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>
@ -20,15 +20,15 @@
</template>
<script>
import master_json from "../data/masters";
export default {
name: "TableSection",
props: {
tableData: Object,
},
data() {
return {
fields: [
mastersData: master_json,
currentMaster: null,
fields: [
{
key: 'last_name',
sortable: true
@ -53,17 +53,30 @@ export default {
}
},
methods: {
reload() {
this.currentMaster = this.getMasterById(this.mastersData.masters,this.$route.params.id);
this.filterData();
},
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);
},
getMasterById(jsonObject, id) {
return jsonObject.filter(item => item.id === id)[0];
},
},
mounted() {
this.filterData();
created() {
console.log(this.currentMaster)
this.reload();
},
watch: {
$route(to, from) {
this.reload();
}
}
}
</script>

20
src/main.js
View file

@ -2,10 +2,26 @@ import '@babel/polyfill'
import 'mutationobserver-shim'
import Vue from 'vue'
import './plugins/bootstrap-vue'
import VueRouter from 'vue-router'
import App from './App.vue'
Vue.config.productionTip = false
import ConfigSection from "./components/ConfigSection";
import TableSection from "./components/TableSection";
Vue.config.productionTip = false;
Vue.use(VueRouter);
const routes = [
{ path: '/', name: 'config', component: ConfigSection },
{ path: '/master/:id', name: 'master', component: TableSection }
];
const router = new VueRouter({
mode: 'history',
routes
});
new Vue({
router,
render: h => h(App),
}).$mount('#app')
}).$mount('#app');