6.4 fixes (#55)

* updated default il filters to 6.4 values also automated it so it will never have to be manually changed again * bump xivapi * changed il filtering to use a slider * fixed proxy character error displays * bump
SavageAim · Jun 1, 2023 · 76bbb2d · 76bbb2d
1 parent 5e567f6
commit 76bbb2d
Show file tree

Hide file tree

Showing 10 changed files with 253 additions and 236 deletions.
diff --git a/backend/backend/settings_live.py b/backend/backend/settings_live.py
@@ -178,7 +178,7 @@ def sampler(context):
     # If you wish to associate users to errors (assuming you are using
     # django.contrib.auth) you may enable sending PII data.
     send_default_pii=True,
-    release='savageaim@20230523',
+    release='savageaim@20230601',
 )
 
 # Channels

diff --git a/frontend/.env b/frontend/.env
@@ -1 +1 @@
-VUE_APP_VERSION="20230523"
+VUE_APP_VERSION="20230601"
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -11,11 +11,12 @@
     "@creativebulma/bulma-badge": "^1.0.1",
     "@sentry/tracing": "^7.16.0",
     "@sentry/vue": "^7.16.0",
-    "@xivapi/js": "^0.3.3",
+    "@xivapi/js": "^0.4.2",
     "bulma": "^0.9.3",
     "dayjs": "^1.10.7",
     "microtip": "^0.2.2",
-    "range-inclusive": "^1.0.2",
+    "multi-range-slider-vue": "^1.1.4",
+    "nouislider": "^15.7.0",
     "vue": "^2.6.11",
     "vue-class-component": "^7.2.3",
     "vue-cookies": "^1.7.4",

diff --git a/frontend/src/components/bis_list/filters.vue b/frontend/src/components/bis_list/filters.vue
@@ -1,34 +1,11 @@
 <template>
-  <div class="card-content">
-    <div class="field is-horizontal">
-      <div class="field-label is-normal">
-        <label class="label">Min ILvl</label>
-      </div>
-      <div class="field-body">
-        <div class="field">
-          <div class="control">
-            <div class="select is-fullwidth">
-              <select ref="minIlPicker" @change="updateMin" :value="minIl">
-                <option v-for="val in ilChoices" :key="val" :value="val">{{ val }}</option>
-              </select>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-
-    <div class="field is-horizontal">
-      <div class="field-label is-normal">
-        <label class="label">Max ILvl</label>
-      </div>
+  <div class="card-content filter-card">
+    <div class="field">
+      <label class="label">Item Level</label>
       <div class="field-body">
         <div class="field">
           <div class="control">
-            <div class="select is-fullwidth">
-              <select ref="maxIlPicker" @change="updateMax" :value="maxIl">
-                <option v-for="val in ilChoices" :key="val" :value="val">{{ val }}</option>
-              </select>
-            </div>
+            <div ref="iLevelSlider"></div>
           </div>
         </div>
       </div>
@@ -37,8 +14,8 @@
 </template>
 
 <script lang="ts">
+import noUiSlider, { PipsMode } from 'nouislider'
 import { Component, Prop, Vue } from 'vue-property-decorator'
-import range from 'range-inclusive'
 
 @Component
 export default class Filters extends Vue {
@@ -48,29 +25,51 @@ export default class Filters extends Vue {
   @Prop()
   minIl!: number
 
-  // Get an array of item level choices based on the total min and max values
-  get ilChoices(): number[] {
-    return range(this.$store.state.maxItemLevel, this.$store.state.minItemLevel, -5)
-  }
+  mounted(): void {
+    const container = this.$refs.iLevelSlider as HTMLElement
+    const step = 5
 
-  // Ref converters
-  get minIlPicker(): HTMLSelectElement {
-    return this.$refs.minIlPicker as HTMLSelectElement
-  }
-
-  get maxIlPicker(): HTMLSelectElement {
-    return this.$refs.maxIlPicker as HTMLSelectElement
-  }
+    const slider = noUiSlider.create(container, {
+      range: {
+        min: this.$store.state.minItemLevel,
+        max: this.$store.state.maxItemLevel,
+      },
+      step,
+      start: [this.minIl, this.maxIl],
+      margin: step,
+      connect: true,
+      behaviour: 'tap-drag',
+      tooltips: true,
+      format: {
+        to: (value: number) => value,
+        from: (value: string) => Number(value),
+      },
+      pips: {
+        mode: PipsMode.Count,
+        values: 6,
+        stepped: true,
+        density: 100,
+      },
+    })
 
-  updateMin(): void {
-    this.$emit('update-min', this.minIlPicker.value)
+    slider.on('change', this.handleUpdate)
   }
 
-  updateMax(): void {
-    this.$emit('update-max', this.maxIlPicker.value)
+  handleUpdate(values: (number | string)[]): void {
+    this.$emit('update-ilevels', values)
   }
 }
 </script>
 
 <style lang="scss">
+@import '~nouislider/dist/nouislider.css';
+@import '../../assets/variables.scss';
+
+.noUi-connect {
+  background-color: $main-colour;
+}
+
+.filter-card {
+  padding-bottom: 3.5rem;
+}
 </style>
diff --git a/frontend/src/components/bis_list/form.vue b/frontend/src/components/bis_list/form.vue
@@ -11,8 +11,7 @@
       :method="method"
       :url="url"
       v-on:job-change="jobChange"
-      v-on:update-min="updateMinIl"
-      v-on:update-max="updateMaxIl"
+      v-on:update-ilevels="updateItemLevels"
       v-on:error-code="emitErrorCode"
       v-on:errors="handleErrors"
       v-on:save="$emit('save')"
@@ -35,8 +34,7 @@
       :url="url"
       :simpleActions="!renderDesktop"
       v-on:job-change="jobChange"
-      v-on:update-min="updateMinIl"
-      v-on:update-max="updateMaxIl"
+      v-on:update-ilevels="updateItemLevels"
       v-on:error-code="emitErrorCode"
       v-on:errors="handleErrors"
       v-on:save="$emit('save')"
@@ -91,9 +89,9 @@ export default class BISListForm extends Vue {
   url!: string
 
   // Set up default values for min and max IL, will change as new tiers are released
-  maxIl = 635
+  maxIl = this.$store.state.maxItemLevel
 
-  minIl = 610
+  minIl = this.maxIl - 25
 
   get errors(): BISListErrors {
     return {
@@ -106,12 +104,9 @@ export default class BISListForm extends Vue {
     this.displayOffhand = selectedJob === 'PLD'
   }
 
-  updateMinIl(minIl: number): void {
-    this.minIl = minIl
-  }
-
-  updateMaxIl(maxIl: number): void {
-    this.maxIl = maxIl
+  updateItemLevels(values: number[]): void {
+    // Always comes in as [min, max]
+    [this.minIl, this.maxIl] = values
   }
 
   emitErrorCode(errorCode: number): void {

diff --git a/frontend/src/components/modals/changelog.vue b/frontend/src/components/modals/changelog.vue
@@ -13,22 +13,15 @@
     <div class="card-content content">
       <h2 class="has-text-primary subtitle">{{ version }}</h2>
 
-      <div class="divider"><i class="material-icons icon">expand_more</i> FFXIV Patch 6.4 <i class="material-icons icon">expand_more</i></div>
-      <p>Added new tier: <span class="has-text-primary">Pandæmonium: Anabaseios</span>. Team Leaders be sure to update your Team for proper BIS tracking!</p>
+      <div class="divider"><i class="material-icons icon">expand_more</i> Minor Updates <i class="material-icons icon">expand_more</i></div>
+      <p>Item Level filtering in BIS pages now uses a slider instead of two large dropdowns.</p>
+      <p class="has-text-info">The dropdowns had 21 entries in them as of 6.4's release, so it felt like it was a good time to move it to something more manageable.</p>
+      <p class="has-text-info">If there are any alternative suggestions, please consider leaving them in the Discord!</p>
+
+      <div class="divider"><i class="material-icons icon">expand_more</i> Fixes <i class="material-icons icon">expand_more</i></div>
+      <p>Set the default Item Level filters on BIS pages to be the item level range for Anabaseios.</p>
+      <p>Fixed issue where error messages were not correctly appearing on the New Proxy Character page.</p>
 
-      <p>
-        Added the following gear;
-        <ul>
-          <li>Diadochos Weapons, Armour, and Accessories; Item Level 640</li>
-          <li>Anabaseios Armour, and Accessories; Item Level 640</li>
-          <li>Voidcast Weapons; Item Level 645</li>
-          <li>Credendum Weapons, Armour, and Accessories; Item Level 650</li>
-          <li>Augmented Credendum Weapons, Armour, and Accessories; Item Level 660</li>
-          <li>Ascension Armour, and Accessories; Item Level 660</li>
-          <li>Ascension Weapons; Item Level 665</li>
-        </ul>
-      </p>
-      <p>While the Tome weapons have their own names, they are considered Credendum for ease.</p>
     </div>
   </div>
 </template>

diff --git a/frontend/src/main.ts b/frontend/src/main.ts
@@ -27,7 +27,7 @@ Sentry.init({
   Vue,
   dsn: 'https://[email protected]/6180221',
   logErrors: true,
-  release: 'savageaim@20230523',
+  release: 'savageaim@20230601',
 })
 
 new Vue({

diff --git a/frontend/src/shims-modules.d.ts b/frontend/src/shims-modules.d.ts
@@ -1,2 +1,2 @@
 declare module 'range-inclusive'
-declare module '@xivapi/js'
+declare module '@xivapi/js'
diff --git a/frontend/src/views/team/new_proxy.vue b/frontend/src/views/team/new_proxy.vue
@@ -22,12 +22,13 @@
             </div>
             <div class="field has-addons">
               <div class="control is-expanded">
-                <button class="button is-danger is-fullwidth" @click="() => { this.character = null }">Change Character</button>
+                <button class="button is-danger is-fullwidth" @click="changeCharacter">Change Character</button>
               </div>
               <div class="control is-expanded">
                 <button class="button is-success is-fullwidth" @click="createProxy">Create Proxy</button>
               </div>
             </div>
+            <p v-for="(error, i) in characterApiErrors" :key="i" class="help is-danger">{{ error }}</p>
           </template>
         </div>
       </div>
@@ -82,6 +83,11 @@ export default class NewProxy extends TeamViewMixin {
     return `/backend/api/team/${this.teamId}/proxies/`
   }
 
+  changeCharacter(): void {
+    this.character = null
+    this.characterApiErrors = []
+  }
+
   checkPermissions(): void {
     // Ensure that the person on this page is the team leader and not anybody else
     if (!this.userHasProxyManagerPermission) {
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		VUE_APP_VERSION="20230523"
		VUE_APP_VERSION="20230601"