fix(vuejs): hook execution on route change caused by astilectron list…

…ener * fix: responsive issues with panels
hbollon · Jul 18, 2021 · 822554e · 822554e
1 parent ac3550b
commit 822554e
Show file tree

Hide file tree

Showing 8 changed files with 16 additions and 12 deletions.
diff --git a/resources/static/vue-igopher/.eslintrc.js b/resources/static/vue-igopher/.eslintrc.js
@@ -16,5 +16,5 @@ module.exports = {
     'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
     'no-undef': 0,
     "@typescript-eslint/no-this-alias": ["off"],
-  }
+  },
 }
diff --git a/resources/static/vue-igopher/src/App.vue b/resources/static/vue-igopher/src/App.vue
@@ -1,6 +1,6 @@
 <template>
   <LateralNav />
-  <div class="d-flex flex-column" id="content-wrapper">
+  <div class="d-flex flex-column w-100" id="content-wrapper">
     <div id="content">
       <NavBar />
       <router-view />

diff --git a/resources/static/vue-igopher/src/bootstrap/js/bootstrap.min.js b/resources/static/vue-igopher/src/bootstrap/js/bootstrap.min.js
diff --git a/resources/static/vue-igopher/src/components/Footer.vue b/resources/static/vue-igopher/src/components/Footer.vue
@@ -1,5 +1,5 @@
 <template>
-  <footer class="bg-white sticky-footer">
+  <footer class="bg-white sticky-footer mt-auto">
     <div class="container my-auto">
       <div class="text-center my-auto copyright">
         <span>Copyright © IGopher 2021</span>

diff --git a/resources/static/vue-igopher/src/components/LateralNav.vue b/resources/static/vue-igopher/src/components/LateralNav.vue
@@ -8,10 +8,10 @@
             <ul class="navbar-nav text-light" id="accordionSidebar">
                 <li class="nav-item"></li>
                 <li class="nav-item"></li>
-                <li class="nav-item"><a class="nav-link" href="index.html#/"><i class="fa fa-envelope"></i><span>DM Automation&nbsp;</span></a></li>
+                <li class="nav-item"><router-link class="nav-link" to="/"><i class="fa fa-envelope"></i><span>DM Automation&nbsp;</span></router-link></li>
                 <li class="nav-item"></li>
-                <li class="nav-item"><a class="nav-link" href="index.html#/settings"><i class="fa fa-gears"></i><span>Settings</span></a></li>
-                <li class="nav-item"><a class="nav-link" href="index.html#/logs"><i class="fa fa-list-alt"></i><span>Logs</span></a></li>
+                <li class="nav-item"><router-link class="nav-link" to="/settings"><i class="fa fa-gears"></i><span>Settings</span></router-link></li>
+                <li class="nav-item"><router-link class="nav-link" to="/logs"><i class="fa fa-list-alt"></i><span>Logs</span></router-link></li>
             </ul>
             <div class="text-center d-none d-md-inline"><button class="btn rounded-circle border-0" id="sidebarToggle" type="button"></button></div>
         </div>

diff --git a/resources/static/vue-igopher/src/components/SettingsPanel.vue b/resources/static/vue-igopher/src/components/SettingsPanel.vue
@@ -130,6 +130,6 @@ export default class SettingsPanel extends Vue {
 }
 </script>
 
-<style>
+<style lang="scss">
 
-</style>
+</style>
diff --git a/resources/static/vue-igopher/src/views/DmAutomation.vue b/resources/static/vue-igopher/src/views/DmAutomation.vue
@@ -4,7 +4,7 @@
 
 <script lang="ts">
 import { Options, Vue } from "vue-class-component";
-import { inject } from 'vue'
+import { inject, onActivated } from 'vue'
 import DmAutomationPanel from "@/components/DmAutomationPanel.vue";
 import * as config from "@/config"
 import { Astor } from "@/plugins/astilectron";
@@ -14,10 +14,11 @@ import { Astor } from "@/plugins/astilectron";
     DmAutomationPanel,
   },
   mounted() {
+    console.log("dmautomation")
     const astor: Astor = inject('astor');
-    console.log(window.location.href)
+    
     config.ready(() => {
-      document.addEventListener("astilectron-ready", function() {
+      astor.onIsReady(function() {
         config.getIgopherConfig(astor, fillInputs);
         const dmBotLaunchBtn = document.querySelector("#dmBotLaunchBtn");
         const dmBotLaunchIcon = document.querySelector("#dmBotLaunchIcon");

diff --git a/resources/static/vue-igopher/src/views/Settings.vue b/resources/static/vue-igopher/src/views/Settings.vue
@@ -14,10 +14,12 @@ import { Astor } from "@/plugins/astilectron";
     SettingsPanel,
   },
   mounted() {
+      console.log("settings")
     const astor: Astor = inject('astor');
 
     config.ready(() => {
-      document.addEventListener("astilectron-ready", function() {
+      astor.onIsReady(function() {
+        console.log("settings")
         config.getIgopherConfig(astor, fillInputs);
 
         /// Buttons