add backgrounds

pages/characters/background.vue

@@ -7,6 +7,7 @@
 <script>
 import MdViewer from '~/components/MdViewer';
 import VueRouter from 'vue-router'
+import { mapMutations, mapActions } from 'vuex'
 
 export default {
   components: {
@@ -16,10 +17,28 @@ export default {
     return {
       file: this.$router.currentRoute.path
     }
+  },
+  mounted() {
+    this.$store.dispatch('LOAD_BACKGROUNDS')
+  },
+  methods: {
+    updateFilter: function(val) {
+      this.filter = val;
+    },
+  }, 
+  computed: {
+     ...mapActions({
+       LOAD_BACKGROUNDS: 'LOAD_BACKGROUNDS'
+     }),
+     backgroundsList () {
+      return this.$store.getters.allBackgrounds
+     },
   }
 }
 </script>
 
+
+
 <style>
 </style>
 

pages/sections/_id.vue

@@ -2,30 +2,60 @@
   <section class="container docs-container">
     <h1>{{section.name}}</h1>
     <md-viewer :text="section.desc"></md-viewer>
+    <h2 v-if="section.slug === 'backgrounds'">Character backgrounds</h2>
+    <article v-for="background in backgroundsList" v-bind:key="background.slug" v-if="section.slug === 'backgrounds'">
+      <h3>{{background.name}}</h3>
+      <p>{{background.desc}}</p>
+      <p v-if="background.languages"><b>Languages.</b> {{background.languages}}</p>
+      <p v-if="background.tool_proficiencies"><b>Tool proficiencies.</b> {{background.tool_proficiencies}}</p>
+      <p v-if="background.skill_proficiencies"><b>Skill proficiencies.</b> {{background.skill_proficiencies}}</p>
+      <p><b>Equipment.</b> {{background.equipment}}</p>
+      <h4>Special feature: {{background.feature}}</h4>
+      <p>{{background.feature_desc}}</p>
+    </article>
   </section>
 </template>
 
 <script>
 import axios from 'axios'
 import MdViewer from '~/components/MdViewer';
 
+import { mapMutations, mapActions } from 'vuex'
+
 export default {
-  components:{
+  components: {
     MdViewer
   },
-  mounted () {
-    return axios.get(`${process.env.apiUrl}/sections/${this.$route.params.id}`) //you will need to enable CORS to make this work
-    .then(response => {
-      this.section = response.data
-    })
-  },
-  data () {
+  data: function () {
     return {
+      file: this.$router.currentRoute.path,
       posts: [],
       errors: [],
       section: [],
     }
   },
+  beforeCreate() {
+    this.$store.dispatch('LOAD_BACKGROUNDS')
+  },
+  methods: {
+    updateFilter: function(val) {
+      this.filter = val;
+    },
+  }, 
+  computed: {
+     ...mapActions({
+       LOAD_BACKGROUNDS: 'LOAD_BACKGROUNDS'
+     }),
+     backgroundsList () {
+      return this.$store.getters.allBackgrounds
+     },
+  },
+  mounted () {
+    return axios.get(`${process.env.apiUrl}/sections/${this.$route.params.id}`) //you will need to enable CORS to make this work
+    .then(response => {
+      this.section = response.data
+    })
+  },
 }
 </script>
 

store/index.js

@@ -9,6 +9,7 @@ export const state = () => ({
   classes: [],
   races: [],
   sections: [],
+  backgrounds: [],
 })
 
 export const getters = {
@@ -30,11 +31,14 @@ export const getters = {
   allSections: state => {
     return state.sections
   },
+  allBackgrounds: state => {
+    return state.backgrounds
+  },
 }
 
 export const actions = {
   LOAD_MONSTERS_LIST (context) {
-    axios.get(`${process.env.apiUrl}/monsters/?fields=slug,name,challenge_rating,type,size,hit_points,document__slug, document__title&limit=1000&ordering=slug`)
+    axios.get(`${process.env.apiUrl}/monsters/?fields=slug,name,challenge_rating,type,size,hit_points,document__slug, document__title&limit=2000&ordering=slug`)
     .then(
       (response) => { context.commit('setMonstersList', response.data.results)}
     )
@@ -61,6 +65,12 @@ export const actions = {
       response => { context.commit( 'setMagicItemsList', response.data.results )
     })
   },
+  LOAD_BACKGROUNDS( context ) {
+    axios.get(`${process.env.apiUrl}/backgrounds/?limit=1000`)
+    .then(
+      response => { context.commit( 'setBackgrounds', response.data.results )
+    })
+  },
   LOAD_CLASSES( context ) {
     axios.get(`${process.env.apiUrl}/classes/`) //you will need to enable CORS to make this work
     .then(
@@ -96,6 +106,9 @@ export const mutations = {
   setMagicItemsList (state, magicItems) {
     state.magicItemsList = magicItems;
   },
+  setBackgrounds (state, backgrounds) {
+    state.backgrounds = backgrounds;
+  },
   setClasses (state, classes ) {
     state.classes = classes
   },