mirror of
https://github.com/bartvdbraak/SlayerWeightCalculator.git
synced 2025-04-27 09:41:19 +00:00
change dflex to col, vuex, routing, router-view, currectMaster
This commit is contained in:
parent
5e47841ff6
commit
3c424f5b9d
9 changed files with 76 additions and 30 deletions
|
|
@ -11,7 +11,9 @@
|
|||
"bootstrap": "^4.4.1",
|
||||
"bootstrap-vue": "^2.3.0",
|
||||
"core-js": "^3.4.4",
|
||||
"vue": "^2.6.10"
|
||||
"vue": "^2.6.10",
|
||||
"vue-router": "^3.1.5",
|
||||
"vuex": "^3.1.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/polyfill": "^7.7.0",
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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/',
|
||||
},
|
||||
]
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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',
|
||||
},
|
||||
},
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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')
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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
20
src/main.js
|
|
@ -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');
|
||||
|
|
|
|||
12
yarn.lock
12
yarn.lock
|
|
@ -1708,7 +1708,7 @@ bootstrap-vue@^2.3.0:
|
|||
portal-vue "^2.1.7"
|
||||
vue-functional-data-merge "^3.1.0"
|
||||
|
||||
bootstrap@4.4.1, "bootstrap@>=4.4.1 <5.0.0":
|
||||
"bootstrap@>=4.4.1 <5.0.0", bootstrap@^4.4.1:
|
||||
version "4.4.1"
|
||||
resolved "https://registry.yarnpkg.com/bootstrap/-/bootstrap-4.4.1.tgz#8582960eea0c5cd2bede84d8b0baf3789c3e8b01"
|
||||
integrity sha512-tbx5cHubwE6e2ZG7nqM3g/FZ5PQEDMWmMGNrCUBVRPHXTJaH7CBDdsLeu3eCh3B1tzAxTnAbtmrzvWEvT2NNEA==
|
||||
|
|
@ -7941,6 +7941,11 @@ vue-loader@^15.7.2:
|
|||
vue-hot-reload-api "^2.3.0"
|
||||
vue-style-loader "^4.1.0"
|
||||
|
||||
vue-router@^3.1.5:
|
||||
version "3.1.5"
|
||||
resolved "https://registry.yarnpkg.com/vue-router/-/vue-router-3.1.5.tgz#ff29b8a1e1306c526b52d4dc0532109f16c41231"
|
||||
integrity sha512-BszkPvhl7I9h334GjckCh7sVFyjTPMMJFJ4Bsrem/Ik+B/9gt5tgrk8k4gGLO4ZpdvciVdg7O41gW4DisQWurg==
|
||||
|
||||
vue-style-loader@^4.1.0:
|
||||
version "4.1.2"
|
||||
resolved "https://registry.npm.taobao.org/vue-style-loader/download/vue-style-loader-4.1.2.tgz#dedf349806f25ceb4e64f3ad7c0a44fba735fcf8"
|
||||
|
|
@ -7967,6 +7972,11 @@ vue@^2.6.10:
|
|||
resolved "https://registry.npm.taobao.org/vue/download/vue-2.6.11.tgz?cache=0&sync_timestamp=1580160165548&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fvue%2Fdownload%2Fvue-2.6.11.tgz#76594d877d4b12234406e84e35275c6d514125c5"
|
||||
integrity sha1-dllNh31LEiNEBuhONSdcbVFBJcU=
|
||||
|
||||
vuex@^3.1.2:
|
||||
version "3.1.2"
|
||||
resolved "https://registry.yarnpkg.com/vuex/-/vuex-3.1.2.tgz#a2863f4005aa73f2587e55c3fadf3f01f69c7d4d"
|
||||
integrity sha512-ha3jNLJqNhhrAemDXcmMJMKf1Zu4sybMPr9KxJIuOpVcsDQlTBYLLladav2U+g1AvdYDG5Gs0xBTb0M5pXXYFQ==
|
||||
|
||||
watchpack@^1.6.0:
|
||||
version "1.6.0"
|
||||
resolved "https://registry.npm.taobao.org/watchpack/download/watchpack-1.6.0.tgz?cache=0&sync_timestamp=1579095974142&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fwatchpack%2Fdownload%2Fwatchpack-1.6.0.tgz#4bc12c2ebe8aa277a71f1d3f14d685c7b446cd00"
|
||||
|
|
|
|||
Loading…
Reference in a new issue