feat: improve riven data and synthesis displays (#523)

* feat: improve riven data and synthesis displays * chore: menu style fixes * chore: adjust pagination on filtering * feat: add support for notification multi-selects
WFCD · Jul 26, 2021 · dc36ed2 · dc36ed2 · vercel · Jul 26, 2021
1 parent 26bb5a9
commit dc36ed2
Show file tree

Hide file tree

Showing 15 changed files with 482 additions and 219 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -52,6 +52,7 @@
     "vue-i18n": "^8.25.0",
     "vue-matomo": "^4.1.0",
     "vue-mobile-detection": "^1.0.0",
+    "vue-multiselect": "^2.1.6",
     "vue-native-notification": "^1.1.1",
     "vue-notification": "^1.3.20",
     "vue-router": "^3.5.2",

diff --git a/src/assets/json/platforms.json b/src/assets/json/platforms.json
@@ -5,17 +5,17 @@
     "icon": "fab fa-windows"
   },
   "ps4": {
-    "display": "PS4",
+    "display": "Playstation Network",
     "key": "ps4",
     "icon": "fab fa-playstation"
   },
   "xb1": {
-    "display": "XB1",
+    "display": "XBox Live",
     "key": "xb1",
     "icon": "fab fa-xbox"
   },
   "swi": {
-    "display": "Switch",
+    "display": "Nintendo Switch",
     "key": "swi",
     "icon": "fab fa-nintendo-switch"
   }

diff --git a/src/assets/json/trackables.json b/src/assets/json/trackables.json
@@ -1,10 +1,5 @@
 {
   "rewardTypes": {
-    "vauban": {
-      "state": false,
-      "value": "vauban",
-      "text": "Vauban Parts"
-    },
     "vandal": {
       "state": false,
       "value": "vandal",
@@ -25,11 +20,6 @@
       "value": "helmet",
       "text": "Helmet Blueprint"
     },
-    "nitain": {
-      "state": false,
-      "value": "nitain",
-      "text": "Nitain Extract"
-    },
     "mutalist": {
       "state": false,
       "value": "mutalist",
@@ -43,17 +33,17 @@
     "fieldron": {
       "state": false,
       "value": "fieldron",
-      "text": "Fieldron Sample"
+      "text": "Fieldron /Sample"
     },
     "detonite": {
       "state": false,
       "value": "detonite",
-      "text": "Detonite Ampule"
+      "text": "Detonite Ampule or Injector"
     },
     "mutagen": {
       "state": false,
       "value": "mutagen",
-      "text": "Mutagen Samples"
+      "text": "Mutagen Samples or Masses"
     },
     "aura": {
       "state": false,

diff --git a/src/assets/less/coloration.less b/src/assets/less/coloration.less
@@ -163,6 +163,27 @@ li.nav-item.b-nav-dropdown:has(.active) {
   background-color: @check-color;
 }
 
+
+/********  Forms... ish *******/
+.pagination {
+  & .page-item.active .page-link {
+    background-color: @check-color;
+    border-color: @check-color;
+    color: @badge-color;
+  }
+  & .page-item .page-link {
+    background-color: @secondary-bg;
+    border-color: @secondary-bg;
+    color: @badge-color;
+  }
+}
+
+.form-control {
+  border-color: @secondary-bg-border;
+  background-color: @secondary-bg;
+  color: @text-color;
+}
+
 /******** Modal Dialogs *******/
 .modal-content, .modal-header {
   background-color: @bg-darker;
@@ -234,3 +255,21 @@ span.day:before, span.warm:before {
     }
   }
 }
+
+
+/******** Multiselect Overrides ********/
+.multiselect__tags, .multiselect__single, .multiselect__content-wrapper {
+  border: 1px solid @secondary-bg-border;
+}
+
+.multiselect__content-wrapper,
+.multiselect__tags,
+.multiselect__input,
+.multiselect__single {
+  background: @bg;
+  color: @text-color;
+}
+
+.multiselect__option--highlight, .multiselect__option--highlight:after, .multiselect__tag {
+  background: @success-bg;
+}
diff --git a/src/assets/less/common.less b/src/assets/less/common.less
@@ -76,7 +76,24 @@ img {
   border-style: solid;
 }
 
+.dropdown-menu {
+  .form-group {
+    padding-left: 10px;
+  }
+}
 
+.custom-control-label {
+  font-size: 12px;
+
+  .custom-switch &::after {
+    top: 2px;
+  }
+
+  &::before, &::after {
+    top: 0;
+  }
+
+}
 
 @media only screen and (min-width: 700px) {
   .navbar.fixed-top {

diff --git a/src/assets/less/night.less b/src/assets/less/night.less
@@ -8,7 +8,7 @@
   @border-color:      #444;
   @modal-border:      @border-color;
   @dh-color:          #888;
-  @dm-color:          #212529;
+  @dm-color:          #eee;
   @active-page:       rgb(0, 188, 140);
 
   /* Bootstrap theme colors */

diff --git a/src/components/modalDialogs/NotificationFilters.vue b/src/components/modalDialogs/NotificationFilters.vue
@@ -1,81 +1,153 @@
 <template>
   <div id="notificationsTabBody">
-    Check the checkbox for entries you want notifications for:
-    <div class="tab-wrap pt-3">
-      <b-form-group label="Reward Filters">
-        <b-form-checkbox-group
-          id="reward-checks"
-          name="Reward Filters"
-          :options="rewardStates"
-          v-model="activeRewards"
-          v-on:input="(vals) => updateRewardStates(vals)"
-          switches
-          stacked
-          class="settings-group fissure-setting-group notification-group"
-        >
-        </b-form-checkbox-group>
-      </b-form-group>
-    </div>
+    Add the tags for entries you want notifications for.
+    <br />
+    You can search and use "Enter" to select, as well as "Backspace" to remove the last in the list.
+    <Multiselect
+      :value="activeRewards"
+      :options="this.rewardStates"
+      placeholder="Select Rewards"
+      label="text"
+      track-by="text"
+      @select="this.toggleRewardState"
+      @remove="this.toggleRewardState"
+      :close-on-select="false"
+      :clear-on-select="false"
+      :preserve-search="true"
+      :hide-selected="true"
+      :multiple="true"
+      :reset-after="true"
+    />
     <hr />
-    <div class="tab-wrap">
-      <b-form-group label="Event Filters">
-        <b-form-checkbox-group
-          id="event-checks"
-          name="Event Filters"
-          :options="eventStates"
-          v-model="activeEvents"
-          v-on:input="(vals) => updateEventStates(vals)"
-          switches
-          stacked
-          class="settings-group fissure-setting-group notification-group"
-        >
-        </b-form-checkbox-group>
-      </b-form-group>
-    </div>
+    <Multiselect
+      :value="activeEvents"
+      :options="this.eventStates"
+      placeholder="Select Events"
+      label="text"
+      track-by="text"
+      @select="this.toggleEventState"
+      @remove="this.toggleEventState"
+      :close-on-select="false"
+      :clear-on-select="false"
+      :preserve-search="true"
+      :hide-selected="true"
+      :multiple="true"
+      :reset-after="true"
+    />
+    <hr />
+    <Multiselect
+      :value="activeFissures"
+      :options="this.fissureStates"
+      placeholder="Select Fissures"
+      label="text"
+      track-by="text"
+      @select="this.toggleEventState"
+      @remove="this.toggleEventState"
+      :close-on-select="false"
+      :clear-on-select="false"
+      :preserve-search="true"
+      :hide-selected="true"
+      :multiple="true"
+      :reset-after="true"
+    />
+    <hr />
+    <Multiselect
+      :value="activeArbis"
+      :options="this.arbiStates"
+      placeholder="Select Arbitrations"
+      label="text"
+      track-by="text"
+      @select="this.toggleEventState"
+      @remove="this.toggleEventState"
+      :close-on-select="false"
+      :clear-on-select="false"
+      :preserve-search="true"
+      :hide-selected="true"
+      :multiple="true"
+      :reset-after="true"
+    />
   </div>
 </template>
 
+<style src="vue-multiselect/dist/vue-multiselect.min.css"></style>
+
 <script>
+import Multiselect from 'vue-multiselect';
+
 export default {
   name: 'NotificationFilters',
-  components: {},
-  data() {
-    return {};
+  components: {
+    Multiselect,
   },
   computed: {
     activeRewards: {
       get: function () {
-        const components = Object.keys(this.$store.getters.trackableState.rewardTypes).map(
-          (component) => this.$store.getters.trackableState.rewardTypes[component]
-        );
-
-        return components.filter((component) => component.state).map((component) => component.value);
+        return Object.keys(this.$store.getters.trackableState.rewardTypes)
+          .map((component) => this.$store.getters.trackableState.rewardTypes[component])
+          .filter((component) => component.state);
       },
       set: function () {},
     },
     rewardStates() {
-      return this.$store.getters.trackableState.rewardTypes;
+      return Object.keys(this.$store.getters.trackableState.rewardTypes).map(
+        (reward) => this.$store.getters.trackableState.rewardTypes[reward]
+      );
     },
     activeEvents: {
       get: function () {
-        const components = Object.keys(this.$store.getters.trackableState.eventTypes).map(
-          (component) => this.$store.getters.trackableState.eventTypes[component]
-        );
-
-        return components.filter((component) => component.state).map((component) => component.value);
+        return Object.keys(this.$store.getters.trackableState.eventTypes)
+          .filter((k) => !k.includes('fissures') && !k.includes('arbitration'))
+          .map((component) => this.$store.getters.trackableState.eventTypes[component])
+          .filter((component) => component.state);
+      },
+      set: function () {},
+    },
+    activeFissures: {
+      get: function () {
+        return Object.keys(this.$store.getters.trackableState.eventTypes)
+          .filter((k) => k.includes('fissures'))
+          .map((component) => this.$store.getters.trackableState.eventTypes[component])
+          .filter((component) => component.state);
+      },
+      set: function () {},
+    },
+    activeArbis: {
+      get: function () {
+        return Object.keys(this.$store.getters.trackableState.eventTypes)
+          .filter((k) => k.includes('arbitration'))
+          .map((component) => this.$store.getters.trackableState.eventTypes[component])
+          .filter((component) => component.state);
       },
       set: function () {},
     },
     eventStates() {
-      return this.$store.getters.trackableState.eventTypes;
+      return Object.keys(this.$store.getters.trackableState.eventTypes)
+        .filter((k) => !k.includes('fissures') && !k.includes('arbitration'))
+        .map((k) => this.$store.getters.trackableState.eventTypes[k]);
+    },
+    fissureStates() {
+      return Object.keys(this.$store.getters.trackableState.eventTypes)
+        .filter((k) => k.includes('fissures'))
+        .map((k) => this.$store.getters.trackableState.eventTypes[k]);
+    },
+    arbiStates() {
+      return Object.keys(this.$store.getters.trackableState.eventTypes)
+        .filter((k) => k.includes('arbitration'))
+        .map((k) => this.$store.getters.trackableState.eventTypes[k]);
     },
   },
   methods: {
+    toggleRewardState({ value, state }) {
+      this.$store.commit('commitRewardState', [value, !state]);
+    },
     updateRewardStates(enabledRewards) {
       Object.keys(this.$store.getters.trackableState.rewardTypes).forEach((reward) => {
         this.$store.commit('commitRewardState', [reward, enabledRewards.includes(reward)]);
       });
     },
+    toggleEventState({ value, state }) {
+      this.$store.commit('commitEventState', [value, !state]);
+    },
     updateEventStates(enabledEvents) {
       Object.keys(this.$store.getters.trackableState.eventTypes).forEach((event) => {
         this.$store.commit('commitEventState', [event, enabledEvents.includes(event)]);

diff --git a/src/components/modalDialogs/Platforms.vue b/src/components/modalDialogs/Platforms.vue
@@ -38,6 +38,7 @@ export default {
     savePlatform(platform) {
       this.$store.commit('commitPlatform', platform);
       this.$store.dispatch('updateWorldstate');
+      this.$store.dispatch('updateRivens');
     },
   },
 };

diff --git a/src/lang/en.json b/src/lang/en.json
@@ -34,7 +34,7 @@
     "docs": "API Docs",
     "old": "Old Hub",
     "status": "Status",
-    "riven": "Riven Data (Alpha)",
+    "riven": "Riven Data (Beta)",
     "synth": "Synthesis Targets",
     "map": "Map",
     "fish": "Fishing Data",