Auto-compare kinks; Vue dev tools

electron/Index.vue

@@ -148,6 +148,13 @@
                 if(getKey(e) === Keys.Tab && e.ctrlKey && !e.altKey && !e.shiftKey)
                     parent.send('switch-tab', this.character);
             });
+
+            if (process.env.NODE_ENV !== 'production') {
+                const dt = require('@vue/devtools');
+
+                dt.connect();
+            }
+
         }
 
         async login(): Promise<void> {

package.json

@@ -10,6 +10,7 @@
     "@fortawesome/fontawesome-free": "^5.6.1",
     "@types/lodash": "^4.14.119",
     "@types/sortablejs": "^1.7.0",
+    "@vue/devtools": "^5.1.0",
     "axios": "^0.18.0",
     "bootstrap": "^4.1.3",
     "css-loader": "^2.0.1",

site/character_page/character_page.vue

@@ -158,6 +158,7 @@
                 this.character = await methods.characterData(this.name, this.characterid);
                 standardParser.allowInlines = true;
                 standardParser.inlines = this.character.character.inlines;
+
             } catch(e) {
                 this.error = Utils.isJSONError(e) ? <string>e.response.data.error : (<Error>e).message;
                 Utils.ajaxError(e, 'Failed to load character information.');

site/character_page/kinks.vue

@@ -65,7 +65,7 @@
 </template>
 
 <script lang="ts">
-    import {Component, Prop, Watch} from '@f-list/vue-ts';
+    import {Component, Prop, Watch, Hook} from '@f-list/vue-ts';
     import Vue from 'vue';
     import {Kink, KinkChoice} from '../../interfaces';
     import * as Utils from '../utils';
@@ -103,6 +103,7 @@
                 this.loading = true;
                 this.comparing = true;
                 const kinks = await methods.kinksGet(this.characterToCompare);
+
                 const toAssign: {[key: number]: KinkChoice} = {};
                 for(const kink of kinks)
                     toAssign[kink.id] = kink.choice;
@@ -128,6 +129,19 @@
             this.highlighting = toAssign;
         }
 
+
+        @Hook('mounted')
+        async mounted(): Promise<void> {
+            await this.compareKinks();
+        }
+
+
+        @Watch('character')
+        characterChanged(): void {
+            this.compareKinks();
+        }
+
+
         get kinkGroups(): {[key: string]: KinkGroup | undefined} {
             return this.shared.kinks.kink_groups;
         }

yarn.lock

@@ -5731,6 +5731,11 @@ vm-browserify@0.0.4:
   dependencies:
     indexof "0.0.1"
 
+vue-devtools@^5.0.0-beta.1:
+  version "5.0.0-beta.1"
+  resolved "https://registry.yarnpkg.com/vue-devtools/-/vue-devtools-5.0.0-beta.1.tgz#115e897eca19e750f3fd8021e19e7755e6002155"
+  integrity sha512-FInPXvhArKcy6wN7+f+XWRD8TE0i7PEEv9rEQxIrWbzMCmu2L1mfR7kD0MWAx+wMNaBQ5ZmXNiE7PzeZT8sedg==
+
 vue-hot-reload-api@^2.3.0:
   version "2.3.1"
   resolved "https://registry.yarnpkg.com/vue-hot-reload-api/-/vue-hot-reload-api-2.3.1.tgz#b2d3d95402a811602380783ea4f566eb875569a2"