WIP: Plugin List

server/plugins-manager.js

@@ -43,6 +43,32 @@ class PluginsManager {
             }
         }
     }
+
+    /**
+     * Install a Plugin
+     * @param {string} tarGzFileURL The url of tar.gz file
+     * @param {number} userID User ID - Used for streaming installing progress
+     */
+    installPlugin(tarGzFileURL, userID = undefined) {
+
+    }
+
+    /**
+     * Remove a plugin
+     * @param pluginID
+     */
+    removePlugin(pluginID) {
+
+    }
+
+    /**
+     * Update a plugin
+     * Only available for plugins which were downloaded from the official list
+     * @param pluginID
+     */
+    updatePlugin(pluginID) {
+
+    }
 }
 
 class Plugin {

src/components/PluginItem.vue

@@ -2,7 +2,10 @@
     <div class="plugin-item pt-4 pb-2">
         <div>
             <h6>{{ plugin.name }}</h6>
-            <p class="description">{{ plugin.description }}</p>
+            <p class="description">
+                {{ plugin.description }}
+            </p>
+            <span class="version">{{ $t("Version") }}: {{ plugin.version }}</span>
         </div>
         <div class="buttons">
             <button class="btn btn-primary">Install</button>
@@ -35,5 +38,8 @@ export default {
         margin-bottom: 0;
     }
 
+    .version {
+        font-size: 13px;
+    }
 }
 </style>

src/components/settings/Plugins.vue

@@ -1,7 +1,7 @@
 <template>
     <div>
-        <div class="mt-3">{{ pluginListMsg }}</div>
+        <div class="mt-3">{{ remotePluginListMsg }}</div>
-        <PluginItem v-for="plugin in pluginList" :key="plugin.id" :plugin="plugin" />
+        <PluginItem v-for="plugin in remotePluginList" :key="plugin.id" :plugin="plugin" />
     </div>
 </template>
 
@@ -15,12 +15,15 @@ export default {
 
     data() {
         return {
-            pluginList: [],
+            remotePluginList: [],
-            pluginListMsg: "",
+            remotePluginListMsg: "",
         };
     },
 
     computed: {
+        pluginList() {
+            return this.$parent.$parent.$parent.pluginList;
+        },
         settings() {
             return this.$parent.$parent.$parent.settings;
         },
@@ -33,14 +36,14 @@ export default {
     },
 
     async mounted() {
-        this.pluginListMsg = this.$t("Loading") + "...";
+        this.remotePluginListMsg = this.$t("Loading") + "...";
 
         this.$root.getSocket().emit("getPluginList", (res) => {
             if (res.ok) {
-                this.pluginList = res.pluginList;
+                this.remotePluginList = res.pluginList;
-                this.pluginListMsg = "";
+                this.remotePluginListMsg = "";
             } else {
-                this.pluginListMsg = this.$t("loadingError") + " " + res.message;
+                this.remotePluginListMsg = this.$t("loadingError") + " " + res.message;
             }
         });
     },