spell + filtering + urlParams

docs/.vuepress/theme/components/NavDrawer.vue

@@ -1,17 +1,5 @@
 <template>
   <v-navigation-drawer class="main-drawer" v-model="drawer" :clipped="$vuetify.breakpoint.lgAndUp" width="300" app>
-    <!-- <v-treeview
-        item-key="path"
-        item-text="title"
-        :items="items"
-        dense
-        open-all
-        hoverable
-        open-on-click
-        activatable
-        @update:active="updateActive"
-      >
-      </v-treeview> -->
     <v-list dense nav>
       <template v-for="item in items">
         <v-list-group v-if="item.children" :key="item.title" v-model="item.expanded" :color="$site.themeConfig.accentColor">
@@ -87,12 +75,6 @@ export default {
   },
 
   methods: {
-    updateActive (active) {
-      console.log(active)
-      if (active[0] == undefined) return
-      const path = active[0].replace('.html', '')
-      this.$router.push(path)
-    }
   }
 }
 </script>
@@ -123,11 +105,4 @@ export default {
     }
   }
 }
-
-
-
-// Case of treeview
-.v-treeview-node__level {
-  width: 12px;
-}
 </style>

docs/.vuepress/theme/components/Navbar.vue

@@ -1,5 +1,5 @@
 <template>
-  <v-app-bar :clipped-left="$vuetify.breakpoint.lgAndUp" app :color="$site.themeConfig.primaryColor" dark>
+  <v-app-bar :clipped-left="$vuetify.breakpoint.lgAndUp" :clipped-right="$vuetify.breakpoint.lgAndUp" app :color="$site.themeConfig.primaryColor" dark>
     <v-app-bar-nav-icon @click.stop="setDrawer" />
     <v-toolbar-title class="ml-0 mr-4 pl-4">
       <v-btn class="hidden-sm-and-down site-title" text link :to="{ path: '/' }">{{ $site.title }}</v-btn>
@@ -7,6 +7,9 @@
     <SRDSearchBox v-if="$site.themeConfig.search !== false && $page.frontmatter.search !== false" />
     <!-- <v-text-field flat solo-inverted hide-details prepend-inner-icon="mdi-magnify" label="Search" class="hidden-sm-and-down" /> -->
     <v-spacer />
+    <v-btn @click.stop="setRightDrawer" icon v-if="hasRightDrawer">
+      <v-icon>mdi-format-list-bulleted</v-icon>
+    </v-btn>
   </v-app-bar>
 </template>
 
@@ -30,12 +33,21 @@ export default {
   computed: {
     drawer() {
       return this.$store.state.drawer
+    },
+    rightDrawer() {
+      return this.$store.state.rightDrawer
+    },
+    hasRightDrawer() {
+      return this.$store.state.hasRightDrawer
     }
   },
 
   methods: {
     setDrawer () {
       this.$store.commit('setDrawer', !this.$store.state.drawer)
+    },
+    setRightDrawer () {
+      this.$store.commit('setRightDrawer', !this.$store.state.rightDrawer)
     }
   }
 }

docs/.vuepress/theme/components/RightDrawer.vue

@@ -0,0 +1,46 @@
+<template>
+  <v-navigation-drawer class="right-drawer" v-model="rightDrawer" :clipped="$vuetify.breakpoint.lgAndUp" width="300" app right>
+    <SpellFilters v-if="hasSpellFilters" />
+  </v-navigation-drawer>
+</template>
+
+<script>
+import SpellFilters from '@theme/components/SpellFilters.vue'
+
+export default {
+  name: 'RightDrawer',
+
+  components: {
+    SpellFilters
+  },
+
+  data () {
+    return {
+    }
+  },
+
+  computed: {
+    rightDrawer: {
+      get () {
+        return this.$store.state.rightDrawer
+      },
+      set (newValue) {
+        this.$store.commit('setRightDrawer', newValue)
+      }
+    },
+    hasSpellFilters () {
+      return this.$store.state.inRightDrawer == 'spellFilters'
+    }
+  },
+
+  mounted () {
+
+  },
+
+  methods: {
+  }
+}
+</script>
+
+<style lang="scss">
+</style>

docs/.vuepress/theme/components/Spell.vue

@@ -2,8 +2,26 @@
   <main class="page">
     <div class="theme-default-content">
       <h1>{{ $page.title }}</h1>
+      <div class="spell-details">
+        <div class="spell-school-level">
+          <template v-if="$page.frontmatter.level != 0">{{ $page.frontmatter.school }} de niveau {{ $page.frontmatter.level }}</template>
+          <template v-else>{{ $page.frontmatter.school }}, Tour de magie</template>
+          <template v-if="$page.frontmatter.ritual"> (rituel)</template>
+        </div>
+        <div class="spell-casting-time"><strong>Temps d'incantation</strong> : {{ $page.frontmatter.casting_time }}</div>
+        <div class="spell-range"><strong>Portée</strong> : {{ $page.frontmatter.range }}</div>
+        <div class="spell-components"><strong>Composantes</strong> :
+          <template v-if="$page.frontmatter.components.verbal">V</template><template v-if="$page.frontmatter.components.somatic || $page.frontmatter.components.material">,</template>
+          <template v-if="$page.frontmatter.components.somatic">S</template><template v-if="$page.frontmatter.components.material">,</template>
+          <template v-if="$page.frontmatter.components.material">M</template>
+          <template v-if="$page.frontmatter.components.materials">({{$page.frontmatter.components.materials}})</template>
+        </div>
+        <div class="spell-duration"><strong>Durée</strong> : <span v-if="$page.frontmatter.concentration">concentration, </span>{{ $page.frontmatter.duration }}</div>
+        <div class="spell-classes"><strong>Classe</strong> : <span v-for="(c, idx) in $page.frontmatter.classes" :key="idx">{{c}}<template v-if="idx != $page.frontmatter.classes.length-1">, </template></span></div>
+      </div>
     </div>
-    <Content />
+
+    <Content class="mt-4" />
 
   </main>
 </template>

docs/.vuepress/theme/components/SpellFilters.vue

@@ -0,0 +1,290 @@
+<template>
+  <div class="spell-filters pa-1">
+
+    <v-text-field
+      class="mb-1"
+      v-model="search"
+      label="Filtrer"
+      single-line
+      hide-details
+      :color="$site.themeConfig.accentColor"
+      ></v-text-field>
+
+    <v-expansion-panels multiple flat hover v-model="panels">
+
+      <v-expansion-panel>
+        <v-expansion-panel-header>Classes</v-expansion-panel-header>
+        <v-expansion-panel-content>
+          <v-btn class="mb-2 mt-2" small :color="$site.themeConfig.primaryColor" @click="resetClasses" dark>Réinitialiser</v-btn>
+          <v-switch v-for="(c, idx) in classes" v-model="c.value" :label="c.label" dense class="ma-0" @change="switchClass" :color="$site.themeConfig.accentColor"></v-switch>
+        </v-expansion-panel-content>
+      </v-expansion-panel>
+
+      <v-expansion-panel>
+        <v-expansion-panel-header>Niveaux de sorts</v-expansion-panel-header>
+        <v-expansion-panel-content>
+          <v-btn class="mb-2 mt-2" small :color="$site.themeConfig.primaryColor" @click="resetLevels" dark>Réinitialiser</v-btn>
+          <v-switch v-for="level in levels" v-model="level.value" dense class="ma-0" @change="switchLevel" :color="$site.themeConfig.accentColor">
+            <template v-slot:label>
+              <span v-html="levelDisplay(level)"></span>
+            </template>
+          </v-switch>
+        </v-expansion-panel-content>
+      </v-expansion-panel>
+
+      <v-expansion-panel>
+        <v-expansion-panel-header>Écoles de magie</v-expansion-panel-header>
+        <v-expansion-panel-content>
+          <v-btn class="mb-2 mt-2" small :color="$site.themeConfig.primaryColor" @click="resetSchools" dark>Réinitialiser</v-btn>
+          <v-switch v-for="school in schools" v-model="school.value" :label="school.label" dense class="ma-0" @change="switchSchool" :color="$site.themeConfig.accentColor"></v-switch>
+        </v-expansion-panel-content>
+      </v-expansion-panel>
+
+      <v-expansion-panel>
+        <v-expansion-panel-header>Composantes d'incantation</v-expansion-panel-header>
+        <v-expansion-panel-content>
+          <div class="d-flex mt-2 mb-4">
+            <v-btn-toggle v-model="componentVerbal" dark>
+              <v-btn :value="true" small :color="setColor(componentVerbal, true, 'green')">
+                <v-icon>mdi-check</v-icon>
+              </v-btn>
+              <v-btn :value="false" small :color="setColor(componentVerbal, false, 'red')">
+                <v-icon>mdi-close</v-icon>
+              </v-btn>
+            </v-btn-toggle>
+
+            <p class="mt-0 mb-0 ml-2">Verbale</p>
+          </div>
+
+          <div class="d-flex mb-4">
+            <v-btn-toggle v-model="componentSomatic" dark>
+              <v-btn :value="true" small :color="setColor(componentSomatic, true, 'green')">
+                <v-icon>mdi-check</v-icon>
+              </v-btn>
+              <v-btn :value="false" small :color="setColor(componentSomatic, false, 'red')">
+                <v-icon>mdi-close</v-icon>
+              </v-btn>
+            </v-btn-toggle>
+
+            <p class="mt-0 mb-0 ml-2">Somatique</p>
+          </div>
+
+          <div class="d-flex">
+            <v-btn-toggle v-model="componentMaterial" dark>
+              <v-btn :value="true" small :color="setColor(componentMaterial, true, 'green')">
+                <v-icon>mdi-check</v-icon>
+              </v-btn>
+              <v-btn :value="false" small :color="setColor(componentMaterial, false, 'red')">
+                <v-icon>mdi-close</v-icon>
+              </v-btn>
+            </v-btn-toggle>
+
+            <p class="mt-0 mb-0 ml-2">Matérielle</p>
+          </div>
+        </v-expansion-panel-content>
+      </v-expansion-panel>
+
+      <v-expansion-panel>
+        <v-expansion-panel-header>Concentration et Rituel</v-expansion-panel-header>
+        <v-expansion-panel-content>
+          <div class="d-flex mt-2 mb-4">
+            <v-btn-toggle v-model="mustBeConcentration" dark>
+              <v-btn :value="true" small :color="setColor(mustBeConcentration, true, 'green')">
+                <v-icon>mdi-check</v-icon>
+              </v-btn>
+              <v-btn :value="false" small :color="setColor(mustBeConcentration, false, 'red')">
+                <v-icon>mdi-close</v-icon>
+              </v-btn>
+            </v-btn-toggle>
+
+            <p class="mt-0 mb-0 ml-2">Concentration</p>
+          </div>
+
+          <div class="d-flex">
+            <v-btn-toggle v-model="mustBeRitual" dark>
+              <v-btn :value="true" small :color="setColor(mustBeRitual, true, 'green')">
+                <v-icon>mdi-check</v-icon>
+              </v-btn>
+              <v-btn :value="false" small :color="setColor(mustBeRitual, false, 'red')">
+                <v-icon>mdi-close</v-icon>
+              </v-btn>
+            </v-btn-toggle>
+
+            <p class="mt-0 mb-0 ml-2">Rituel</p>
+          </div>
+        </v-expansion-panel-content>
+      </v-expansion-panel>
+
+    </v-expansion-panels>
+
+  </div>
+</template>
+
+<script>
+// import { mapMutations } from 'vuex'
+import { setUrlParams } from '@theme/util/filterHelpers'
+
+export default {
+  name: 'SpellFilters',
+
+  data () {
+    return {
+      panels: [],
+    }
+  },
+
+  computed: {
+    search: {
+      get () {
+        return this.$store.state.spellFilters.search
+      },
+      set (newValue) {
+        this.$store.commit('spellFilters/setSearch', newValue)
+      }
+    },
+
+    classes: {
+      get () {
+        return this.$store.state.spellFilters.classes
+      },
+      set (newValue) {
+        this.$store.commit('spellFilters/setClasses', newValue)
+      }
+    },
+
+    levels: {
+      get () {
+        return this.$store.state.spellFilters.levels
+      },
+      set (newValue) {
+        this.$store.commit('spellFilters/setLevels', newValue)
+      }
+    },
+
+    schools: {
+      get () {
+        return this.$store.state.spellFilters.schools
+      },
+      set (newValue) {
+        this.$store.commit('spellFilters/setSchools', newValue)
+      }
+    },
+
+    componentVerbal: {
+      get () {
+        return this.$store.state.spellFilters.componentVerbal
+      },
+      set (newValue) {
+        this.$store.commit('spellFilters/setComponentVerbal', newValue)
+      }
+    },
+
+    componentSomatic: {
+      get () {
+        return this.$store.state.spellFilters.componentSomatic
+      },
+      set (newValue) {
+        this.$store.commit('spellFilters/setComponentSomatic', newValue)
+      }
+    },
+
+    componentMaterial: {
+      get () {
+        return this.$store.state.spellFilters.componentMaterial
+      },
+      set (newValue) {
+        this.$store.commit('spellFilters/setComponentMaterial', newValue)
+      }
+    },
+
+    mustBeConcentration: {
+      get () {
+        return this.$store.state.spellFilters.mustBeConcentration
+      },
+      set (newValue) {
+        this.$store.commit('spellFilters/setMustBeConcentration', newValue)
+      }
+    },
+
+    mustBeRitual: {
+      get () {
+        return this.$store.state.spellFilters.mustBeRitual
+      },
+      set (newValue) {
+        this.$store.commit('spellFilters/setMustBeRitual', newValue)
+      }
+    }
+  },
+
+  methods: {
+
+    switchClass () {
+      let list = []
+      for (var i = 0; i < this.classes.length; i++) {
+        if (this.classes[i].value) {
+          list.push(this.classes[i].label)
+        }
+      }
+      setUrlParams('classes', list)
+    },
+
+    switchSchool () {
+      let list = []
+      for (var i = 0; i < this.schools.length; i++) {
+        if (this.schools[i].value) {
+          list.push(this.schools[i].label)
+        }
+      }
+      setUrlParams('ecoles', list)
+    },
+
+    switchLevel () {
+      let list = []
+      for (var i = 0; i < this.levels.length; i++) {
+        if (this.levels[i].value) {
+          list.push(this.levels[i].level)
+        }
+      }
+      setUrlParams('niveaux', list)
+    },
+
+    isSchool (school) {
+      return this.schools.indexOf(school) > -1
+    },
+
+    setColor (value, compare, color) {
+      if (value === compare) {
+        return color
+      }
+      return this.$site.themeConfig.primaryColor
+    },
+
+    levelDisplay (level) {
+      if (level.level == 0) {
+        return 'Tour de magie'
+      } else if (level.level == 1) {
+        return level.level.toString() + '<sup>er</sup>'
+      }
+      return level.level.toString() + '<sup>ème</sup>'
+    },
+
+    resetClasses () {
+      this.$store.commit('spellFilters/resetClasses')
+      this.switchClass()
+    },
+
+    resetLevels () {
+      this.$store.commit('spellFilters/resetLevels')
+      this.switchLevel()
+    },
+
+    resetSchools () {
+      this.$store.commit('spellFilters/resetSchools')
+      this.switchSchool()
+    },
+  },
+}
+</script>
+
+<style lang="scss">
+</style>