perf: leverage jsx for settings (#866)

components/modalDialogs/Filters/ComponentsFilter.jsx

@@ -0,0 +1,58 @@
+import { mapGetters } from 'vuex';
+import baseComponents from '@/static/json/components.json';
+
+export default {
+  computed: {
+    ...mapGetters('worldstate', {
+      rawCS: 'componentState',
+    }),
+    activeComponents: {
+      get() {
+        return Object.keys(this.rawCS)
+          .map((component) => this.rawCS[component])
+          .filter(
+            (component) =>
+              component.display && (!baseComponents[component.key] || baseComponents[component.key].displayable)
+          )
+          .map((component) => component.key);
+      },
+      set(enabledComponents) {
+        Object.keys(this.rawCS).forEach((component) => {
+          this.$store.commit('worldstate/commitComponentDisplayMode', [
+            component,
+            enabledComponents.includes(component),
+          ]);
+        });
+      },
+    },
+    componentStates() {
+      return Object.keys(this.rawCS)
+        .map((component) => {
+          if (!baseComponents[component] || !baseComponents[component].displayable) {
+            return false;
+          }
+          return {
+            text: this.rawCS[component].displayName,
+            value: this.rawCS[component].key,
+          };
+        })
+        .filter((c) => c);
+    },
+  },
+  render() {
+    return (
+      <b-tab title="Components">
+        <b-form-group label="Components">
+          <b-form-checkbox-group
+            id="components-checks"
+            v-model={this.activeComponents}
+            options={this.componentStates}
+            switches
+            stacked
+            class="settings-group"
+          ></b-form-checkbox-group>
+        </b-form-group>
+      </b-tab>
+    );
+  },
+};

components/modalDialogs/Filters/FissureFilters.jsx

@@ -0,0 +1,51 @@
+import { mapGetters } from 'vuex';
+
+export default {
+  name: 'FissureFilters',
+  data() {
+    return {};
+  },
+  computed: {
+    ...mapGetters('worldstate', {
+      fissureStates: 'fissurePlanetStates',
+    }),
+    activeFissures: {
+      get() {
+        const planets = Object.keys(this.fissureStates).map((planet) => this.fissureStates[planet]);
+
+        return planets.filter((planet) => planet.state).map((planet) => planet.value);
+      },
+      set() {},
+    },
+  },
+  methods: {
+    updateFissureStates(enabledFissures) {
+      Object.keys(this.fissureStates).forEach((planet) => {
+        this.$store.commit('worldstate/commitFissurePlanetState', [planet, enabledFissures.includes(planet)]);
+      });
+    },
+  },
+  render() {
+    return (
+      <b-tab title="Fissure Filters">
+        <div id="fissureTabBody">
+          Checking the checkbox next to a planet below will disable it from being shown in the fissures list.
+          <div class="tab-wrap fit-height pt-3">
+            <b-form-group label="Fissure Filters">
+              <b-form-checkbox-group
+                id="fissure-checks"
+                v-model={this.activeFissures}
+                name="Fissure Filters"
+                options={this.fissureStates}
+                switches
+                stacked
+                class="settings-group fissure-setting-group"
+                input={(vals) => this.updateFissureStates(vals)}
+              ></b-form-checkbox-group>
+            </b-form-group>
+          </div>
+        </div>
+      </b-tab>
+    );
+  },
+};

components/modalDialogs/Languages.vue → components/modalDialogs/Filters/Languages.jsx

@@ -1,21 +1,3 @@
-<template>
-  <b-form-group label="Language">
-    <b-form-radio-group
-      id="locale-radios"
-      v-model="lang"
-      stacked
-      name="language radios"
-      class="settings-group"
-      @change="saveLocale"
-    >
-      <b-form-radio v-for="locale in locales" :key="locale.key" :value="locale.key">
-        {{ locale.display }}
-      </b-form-radio>
-    </b-form-radio-group>
-  </b-form-group>
-</template>
-
-<script>
 import { mapGetters } from 'vuex';
 import locales from '@/static/json/locales.json';
 
@@ -31,7 +13,6 @@ export default {
       platformLabelStyle: {
         'flex-grow': 1,
       },
-      locales,
     };
   },
   computed: {
@@ -52,5 +33,28 @@ export default {
       this.$store.dispatch('worldstate/updateWorldstate');
     },
   },
+  render() {
+    return (
+      <b-tab title={'Language'}>
+        <b-form-group label="Language">
+          <b-form-radio-group
+            id="locale-radios"
+            v-model={this.lang}
+            stacked
+            name="language radios"
+            class="settings-group"
+            change={this.saveLocale}
+          >
+            {Object.values(locales).map((locale) => {
+              return (
+                <b-form-radio key={locale.key} value={locale.key}>
+                  {locale.display}
+                </b-form-radio>
+              );
+            })}
+          </b-form-radio-group>
+        </b-form-group>
+      </b-tab>
+    );
+  },
 };
-</script>

components/modalDialogs/NotificationFilters.vue → components/modalDialogs/Filters/NotificationFilters.jsx

@@ -1,120 +1,49 @@
-<template>
-  <div id="notificationsTabBody">
-    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"
-    />
-    <hr />
-    <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"
-    />
-    <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"
-    />
-    <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"
-    />
-  </div>
-</template>
-
-<style src="vue-multiselect/dist/vue-multiselect.min.css"></style>
-
-<script>
 import Multiselect from 'vue-multiselect';
 import { mapGetters } from 'vuex';
 
+import '../../../node_modules/vue-multiselect/dist/vue-multiselect.min.css';
+
 export default {
   name: 'NotificationFilters',
-  components: {
-    Multiselect,
-  },
   computed: {
     ...mapGetters('worldstate', ['trackableState']),
     activeRewards: {
-      get: function () {
+      get() {
         return Object.keys(this.trackableState.rewardTypes)
           .map((component) => this.trackableState.rewardTypes[component])
           .filter((component) => component.state);
       },
-      set: function () {},
+      set() {},
     },
     rewardStates() {
       return Object.keys(this.trackableState.rewardTypes).map((reward) => this.trackableState.rewardTypes[reward]);
     },
     activeEvents: {
-      get: function () {
+      get() {
         return Object.keys(this.trackableState.eventTypes)
           .filter((k) => !k.includes('fissures') && !k.includes('arbitration'))
           .map((component) => this.trackableState.eventTypes[component])
           .filter((component) => component.state);
       },
-      set: function () {},
+      set() {},
     },
     activeFissures: {
-      get: function () {
+      get() {
         return Object.keys(this.trackableState.eventTypes)
           .filter((k) => k.includes('fissures'))
           .map((component) => this.trackableState.eventTypes[component])
           .filter((component) => component.state);
       },
-      set: function () {},
+      set() {},
     },
     activeArbis: {
-      get: function () {
+      get() {
         return Object.keys(this.trackableState.eventTypes)
           .filter((k) => k.includes('arbitration'))
           .map((component) => this.trackableState.eventTypes[component])
           .filter((component) => component.state);
       },
-      set: function () {},
+      set() {},
     },
     eventStates() {
       return Object.keys(this.trackableState.eventTypes)
@@ -150,5 +79,74 @@ export default {
       });
     },
   },
+  render() {
+    return (
+      <b-tab title="Notifications">
+        <div id="notificationsTabBody">
+          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={this.activeRewards}
+            options={this.rewardStates}
+            placeholder="Select Rewards"
+            label="text"
+            track-by="text"
+            close-on-select={false}
+            clear-on-select={false}
+            preserve-search={true}
+            hide-selected={true}
+            multiple={true}
+            select={this.toggleRewardState}
+            remove={this.toggleRewardState}
+          />
+          <hr />
+          <Multiselect
+            value={this.activeEvents}
+            options={this.eventStates}
+            placeholder="Select Events"
+            label="text"
+            track-by="text"
+            close-on-select={false}
+            clear-on-select={false}
+            preserve-search={true}
+            hide-selected={true}
+            multiple={true}
+            select={this.toggleEventState}
+            remove={this.toggleEventState}
+          />
+          <hr />
+          <Multiselect
+            value={this.activeFissures}
+            options={this.fissureStates}
+            placeholder="Select Fissures"
+            label="text"
+            track-by="text"
+            close-on-select={false}
+            clear-on-select={false}
+            preserve-search={true}
+            hide-selected={true}
+            multiple={true}
+            select={this.toggleEventState}
+            remove={this.toggleEventState}
+          />
+          <hr />
+          <Multiselect
+            value={this.activeArbis}
+            options={this.arbiStates}
+            placeholder="Select Arbitrations"
+            label="text"
+            track-by="text"
+            close-on-select={false}
+            clear-on-select={false}
+            preserve-search={true}
+            hide-selected={true}
+            multiple={true}
+            select={this.toggleEventState}
+            remove={this.toggleEventState}
+          />
+        </div>
+      </b-tab>
+    );
+  },
 };
-</script>