Add a Setings Page (#107)

* Add settings page placeholder

* WIP

* Add spoiler mutations

* Add computed props and wire them up

* Add spoilers

src/components/Settings.vue

@@ -0,0 +1,133 @@
+<template>
+  <div>
+    <section class="section">
+      <div class="container">
+        <h1 class="title">
+          Settings
+        </h1>
+      </div>
+    </section>
+    <section class="section">
+      <div class="container">
+        <h2 class="subtitle">
+          Displayed Items
+        </h2>
+        <div class="field">
+          <button-checkbox v-model="HideCompleted">
+            Hide Completed
+          </button-checkbox>
+          <p class="help">Hides items that have been turned in to the community center.</p>
+        </div>
+        <div class="field">
+          <button-checkbox v-model="HideSpoilers">
+            Hide Spoilers
+          </button-checkbox>
+          <p class="help">Hides things that are considered spoilers, as defined below.</p>
+        </div>
+        <div class="field is-grouped">
+          <div class="control">
+            <label class="label">
+              Spoilers
+            </label>
+          </div>
+          <div class="control">
+            <label class="checkbox">
+              <input type="checkbox" v-model="BundleRewardsSpoilers"/>
+                Bundle Rewards
+            </label>
+          </div>
+          <div class="control">
+            <label class="checkbox">
+              <input type="checkbox" v-model="ItemInfoSpoilers"/>
+              Item Source Information
+            </label>
+          </div>
+          <div class="control">
+            <label class="checkbox">
+            <input type="checkbox" v-model="SeasonsSpoilers"/>
+              Item Seasons
+            </label>
+          </div>
+          <div class="control">
+            <label class="checkbox">
+              <input type="checkbox" v-model="SkillsSpoilers"/>
+              Item Skills
+            </label>
+          </div>
+        </div>
+      </div>
+    </section>
+    <section class="section">
+      <div class="container">
+        <div class="buttons">
+          <button class="button is-info">Import Data</button>
+          <button class="button is-info">Export Data</button>
+        </div>
+      </div>
+    </section>
+  </div>
+</template>
+
+<script>
+import ButtonCheckbox from '@/components/ButtonCheckbox.vue'
+export default {
+  name: 'Settings',
+  components: {
+    ButtonCheckbox
+  },
+  computed: {
+    HideCompleted: {
+      get () {
+        return this.$store.state.HideCompleted
+      },
+      set (newValue) {
+        this.$store.commit('toggleCompleted')
+      }
+    },
+    HideSpoilers: {
+      get () {
+        return this.$store.state.HideSpoilers
+      },
+      set (newValue) {
+        this.$store.commit('toggleSpoilers')
+      }
+    },
+    BundleRewardsSpoilers: {
+      get () {
+        return this.$store.state.BundleRewardsSpoilers
+      },
+      set (newValue) {
+        this.$store.commit('toggleBundleRewards')
+      }
+    },
+    ItemInfoSpoilers: {
+      get () {
+        return this.$store.state.ItemInfoSpoilers
+      },
+      set (newValue) {
+        this.$store.commit('toggleItemInfo')
+      }
+    },
+    SeasonsSpoilers: {
+      get () {
+        return this.$store.state.SeasonsSpoilers
+      },
+      set (newValue) {
+        this.$store.commit('toggleSeasons')
+      }
+    },
+    SkillsSpoilers: {
+      get () {
+        return this.$store.state.SkillsSpoilers
+      },
+      set (newValue) {
+        this.$store.commit('toggleSkills')
+      }
+    }
+  }
+}
+</script>
+
+<style>
+
+</style>

src/components/bundles/BundleItems.vue

@@ -7,7 +7,7 @@
             {{bundle.name}}
             <span class="is-pulled-right">{{bundle.items_required}}</span>
           </h3>
-          <h5 class="subtitle bundle-reward">
+          <h5 class="subtitle bundle-reward" v-if="!hideBundleItems">
             {{bundle.reward}}
           </h5>
         </div>
@@ -16,7 +16,7 @@
             {{bundle.room.name}}
             <span class="is-pulled-right">{{bundle.room.items_required}}</span>
           </h3>
-          <h5 class="subtitle">
+          <h5 class="subtitle" v-if="!hideBundleItems">
             {{bundle.room.reward}}
           </h5>
         </div>
@@ -41,6 +41,9 @@ export default {
   computed: {
     bundle: function () {
       return this.$store.getters.GetBundleById(this.$route.params.id)
+    },
+    hideBundleItems: function () {
+      return this.$store.state.HideSpoilers && this.$store.state.BundleRewardsSpoilers
     }
   },
   components: {

src/components/item_card/ItemCard.vue

@@ -6,7 +6,7 @@
       </p>
     </header>
     <div class="card-content">
-      <div class="content item-source">
+      <div class="content item-source" v-if="showItemDesc">
         {{item.source}}
       </div>
       <div class="content">
@@ -14,10 +14,10 @@
       </div>
     </div>
     <footer class="card-footer">
-      <div class="card-footer-item item-seasons">
+      <div class="card-footer-item item-seasons" v-if="showSeasonList">
         <season-list :seasons="item.seasons"/>
       </div>
-      <div class="card-footer-item item-skills">
+      <div class="card-footer-item item-skills" v-if="showSkillList">
         <skill-list :skills="item.skills"/>
       </div>
     </footer>
@@ -36,6 +36,17 @@ export default {
     SeasonList
   },
   name: 'item-card',
+  computed: {
+    showItemDesc: function () {
+      return !(this.$store.state.HideSpoilers && this.$store.state.ItemInfoSpoilers)
+    },
+    showSeasonList: function () {
+      return !(this.$store.state.HideSpoilers && this.$store.state.SeasonsSpoilers)
+    },
+    showSkillList: function () {
+      return !(this.$store.state.HideSpoilers && this.$store.state.SkillsSpoilers)
+    }
+  },
   props: {
     item: {
       type: Object,

src/router/index.js

@@ -4,6 +4,7 @@ import Welcome from '@/components/Welcome'
 import Bundles from '@/components/bundles/Bundles'
 import BundleItems from '@/components/bundles/BundleItems'
 import Search from '@/components/search/Search'
+import Settings from '@/components/Settings'
 import Changelog from '@/components/changelog/Changelog'
 
 Vue.use(Router)
@@ -42,6 +43,11 @@ export default new Router({
       name: 'Inventory',
       path: '/inventory'
     },
+    {
+      name: 'Settings',
+      path: '/settings',
+      component: Settings
+    },
     {
       path: '/changelog',
       component: Changelog

src/store/index.js

@@ -21,7 +21,13 @@ prestate.items = loadItems(prestate.bundles, prestate.skills, prestate.seasons)
 
 export default new Vuex.Store({
   state: {
-    StoredItems: {}
+    StoredItems: {},
+    HideSpoilers: false,
+    HideCompleted: false,
+    BundleRewardsSpoilers: true,
+    ItemInfoSpoilers: true,
+    SeasonsSpoilers: true,
+    SkillsSpoilers: true
   },
   plugins: [
     createPersistedState({
@@ -46,6 +52,24 @@ export default new Vuex.Store({
     UndoRedeemItem (state, BundleItem) {
       Vue.delete(state.StoredItems, BundleItem.id)
     },
+    toggleSpoilers (state) {
+      state.HideSpoilers = !state.HideSpoilers
+    },
+    toggleCompleted (state) {
+      state.HideCompleted = !state.HideCompleted
+    },
+    toggleBundleRewards (state) {
+      state.BundleRewardsSpoilers = !state.BundleRewardsSpoilers
+    },
+    toggleItemInfo (state) {
+      state.ItemInfoSpoilers = !state.ItemInfoSpoilers
+    },
+    toggleSeasons (state) {
+      state.SeasonsSpoilers = !state.SeasonsSpoilers
+    },
+    toggleSkills (state) {
+      state.SkillsSpoilers = !state.SkillsSpoilers
+    },
     initState (state) {
       Vue.set(state, 'seasons', prestate.seasons)
       Vue.set(state, 'skills', prestate.skills)