integrated vue code into old js codebase;removed auto self-refreshing

src/buttonActions.js

@@ -9,7 +9,7 @@ const buttonHandler = (event, type) => {
     let row, data = {};
     let removeRow = true;
     if (row = element.closest('.table-row-search')) {
-        data['form_input_text'] = row.dataset.link;
+        data['text-input-value'] = row.dataset.link;
     } else {
         row = element.closest('.table-row')
         data = row.dataset;

src/css/dl_variables.scss

@@ -1,3 +1,5 @@
 $bg-color: #e5e5ee;
 $column-height: 45px;
 $upload-width:75px;
+$dl-btn-width: 85px;
+$checkbox-width: 90px;

src/css/style.scss

@@ -121,18 +121,18 @@ div .number {
 }
 
 .app-ncdownloader,
-#ncdownloader-content,
+#app-ncdownloader-wrapper,
-.ncdownloader-content-wrapper,
+.ncdownloader-body-wrapper,
 #ncdownloader-form-wrapper,
 #ncdownloader-table-content {
     width: 100%;
 }
 
-.ncdownloader-content-wrapper {
+.ncdownloader-body-wrapper {
     padding-top: 0.3em;
 }
 
-.app-ncdownloader #app-content #app-content-wrapper {
+.app-ncdownloader  #app-content-wrapper {
     flex-wrap: wrap;
 }
 
@@ -164,7 +164,7 @@ div .number {
     vertical-align: middle;
 }
 
-#ncdownloader-content>#app-navigation:not(.vue)>ul>li>a {
+#app-ncdownloader-wrapper>#app-navigation:not(.vue)>ul>li>a {
     padding: 0 12px 0 44px;
 }
 

src/helper.js

@@ -9,13 +9,20 @@ import nctable from './ncTable';
 import Http from './http'
 
 const helper = {
+    vue: {},
+    addVue(name, object) {
+        helper.vue[name] = object;
+    },
+    getVue(name) {
+        return helper.vue[name];
+    },
     generateUrl: generateUrl,
     loop(callback, delay, ...args) {
         callback(...args);
         clearTimeout(helper.timeoutID);
         this.polling(callback, delay, ...args);
     },
-    enabledPolling: 1,
+    enabledPolling: 0,
     trim(string, char) {
         return string.split(char).filter(Boolean).join(char)
     },
@@ -47,10 +54,10 @@ const helper = {
 
         return magnetURI.test(url.trim());
     },
-    message: function (message,duration = 3000) {
+    message: function (message, duration = 3000) {
         Toastify({
             text: message,
-            duration:duration,
+            duration: duration,
             newWindow: true,
             close: true,
             gravity: "top", // `top` or `bottom`
@@ -142,6 +149,34 @@ const helper = {
             data[key] = element.value
         }
         return data;
+    },
+    showElement(prop) {
+        let vm = helper.getVue('mainApp');
+        vm.$data.display[prop] = true;
+        //hide all other elements;
+        for (let key in vm.$data.display) {
+            if (key !== prop) {
+                vm.$data.display[key] = false;
+            }
+        }
+    },
+    hideElement(prop) {
+        let vm = helper.getVue('mainApp');
+        vm.$data.display[prop] = false;
+    },
+    showDownload() {
+        helper.showElement('download');
+        nctable.getInstance().clear();
+        helper.enabledPolling = 0;
+    },
+    hideDownload() {
+        helper.hideElement('download');
+    },
+    topleft(id) {
+        let container = typeof id === 'object' ? id : document.getElementById(id);
+        container.style.top = 0;
+        container.style.left = 0;
+        container.style.width = "100%";
     }
 }
 export default helper

src/index.js

@@ -1,14 +1,13 @@
 import helper from './helper'
 import $ from 'jquery'
 import Http from './http'
-//import actionLinks from './actionLinks'
 import { translate as t, translatePlural as n } from '@nextcloud/l10n'
-import inputAction from './inputAction'
 import updatePage from './updatePage'
 import buttonActions from './buttonActions'
-import inputBox from './inputBox'
 import './css/style.scss'
 import './css/table.scss'
+import { createApp } from 'vue'
+import App from './App';
 
 'use strict'
 const basePath = "/apps/ncdownloader";
@@ -21,11 +20,14 @@ $(document).on('ajaxSend', function (elm, xhr, settings) {
 })
 window.addEventListener('DOMContentLoaded', function () {
 
-    inputAction.run();
+    // inputAction.run();
     updatePage.run();
     buttonActions.run();
+    let container = 'ncdownloader-form-container';
+    let app = createApp(App);
+    let vm = app.mount('#' + container);
+    helper.addVue(vm.$options.name, vm);
 
-    $("#ncdownloader-form-wrapper").append(inputBox.getInstance(t("ncdownloader", 'New Download')).create());
     $("#start-aria2").on("click", function (e) {
         const path = basePath + "/aria2/start";
         let url = helper.generateUrl(path);
@@ -39,6 +41,10 @@ window.addEventListener('DOMContentLoaded', function () {
         window.location.href = link;
     })
 
+    $("#app-navigation").on("click", "#search-download", helper.showDownload);
+
 });
 
 
+
+

src/updatePage.js

@@ -8,6 +8,7 @@ export default {
 
         const clickHandler = (event, type) => {
             event.preventDefault();
+            helper.hideDownload();
             let path = basePath + type;
             if (type === "youtube-dl") {
                 path = "/apps/ncdownloader/youtube/get";
@@ -38,14 +39,6 @@ export default {
             let url = helper.generateUrl(path);
             Http.getInstance(url).setMethod('GET').send();
         });
-
-        helper.refresh(basePath + "waiting")
-        helper.refresh(basePath + "complete")
-        helper.refresh(basePath + "fail")
-        helper.refresh("/apps/ncdownloader/youtube/get")
-
-        helper.loop(helper.refresh, 1000, basePath + "active");
-
         helper.polling(function (url) {
             url = helper.generateUrl(url);
             Http.getInstance(url).setMethod('GET').send();