WIP: Plugin List

server/server.js

@@ -127,6 +127,7 @@ const StatusPage = require("./model/status_page");
 const { cloudflaredSocketHandler, autoStart: cloudflaredAutoStart, stop: cloudflaredStop } = require("./socket-handlers/cloudflared-socket-handler");
 const { proxySocketHandler } = require("./socket-handlers/proxy-socket-handler");
 const { dockerSocketHandler } = require("./socket-handlers/docker-socket-handler");
+const { pluginsHandler } = require("./socket-handlers/plugins-handler");
 
 app.use(express.json());
 
@@ -1452,6 +1453,7 @@ let needSetup = false;
         databaseSocketHandler(socket);
         proxySocketHandler(socket);
         dockerSocketHandler(socket);
+        pluginsHandler(socket);
 
         log.debug("server", "added all socket handlers");
 

server/socket-handlers/plugins-handler.js

@@ -0,0 +1,25 @@
+const { checkLogin } = require("../util-server");
+const axios = require("axios");
+
+/**
+ * Handlers for plugins
+ * @param {Socket} socket Socket.io instance
+ */
+module.exports.pluginsHandler = (socket) => {
+
+    // Get Plugin List
+    socket.on("getPluginList", async (callback) => {
+        try {
+            checkLogin(socket);
+            const res = await axios.get("https://uptime.kuma.pet/c/plugins.json");
+            callback(res.data);
+        } catch (error) {
+            console.log(error);
+            callback({
+                ok: false,
+                msg: error.message,
+            });
+        }
+    });
+
+};

src/components/PluginItem.vue

@@ -0,0 +1,39 @@
+<template>
+    <div class="plugin-item pt-4 pb-2">
+        <div>
+            <h6>{{ plugin.name }}</h6>
+            <p class="description">{{ plugin.description }}</p>
+        </div>
+        <div class="buttons">
+            <button class="btn btn-primary">Install</button>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    props: {
+        plugin: {
+            type: Object,
+            required: true,
+        },
+    }
+};
+</script>
+
+<style lang="scss" scoped>
+@import "../assets/vars.scss";
+
+.plugin-item {
+    display: flex;
+    justify-content: space-between;
+    align-content: center;
+    align-items: center;
+
+    .description {
+        font-size: 13px;
+        margin-bottom: 0;
+    }
+
+}
+</style>

src/components/settings/Plugins.vue

@@ -0,0 +1,56 @@
+<template>
+    <div>
+        <div class="mt-3">{{ pluginListMsg }}</div>
+        <PluginItem v-for="plugin in pluginList" :key="plugin.id" :plugin="plugin" />
+    </div>
+</template>
+
+<script>
+import PluginItem from "../PluginItem.vue";
+
+export default {
+    components: {
+        PluginItem
+    },
+
+    data() {
+        return {
+            pluginList: [],
+            pluginListMsg: "",
+        };
+    },
+
+    computed: {
+        settings() {
+            return this.$parent.$parent.$parent.settings;
+        },
+        saveSettings() {
+            return this.$parent.$parent.$parent.saveSettings;
+        },
+        settingsLoaded() {
+            return this.$parent.$parent.$parent.settingsLoaded;
+        },
+    },
+
+    async mounted() {
+        this.pluginListMsg = this.$t("Loading") + "...";
+
+        this.$root.getSocket().emit("getPluginList", (res) => {
+            if (res.ok) {
+                this.pluginList = res.pluginList;
+                this.pluginListMsg = "";
+            } else {
+                this.pluginListMsg = this.$t("loadingError") + " " + res.message;
+            }
+        });
+    },
+
+    methods: {
+
+    },
+};
+</script>
+
+<style lang="scss" scoped>
+
+</style>

src/languages/en.js

@@ -582,4 +582,5 @@ export default {
     goAlert: "GoAlert",
     backupOutdatedWarning: "Deprecated: Since a lot of features added and this backup feature is a bit unmaintained, it cannot generate or restore a complete backup.",
     backupRecommend: "Please backup the volume or the data folder (./data/) directly instead.",
+    loadingError: "Cannot fetch the data, please try again later.",
 };

src/pages/Settings.vue

@@ -101,6 +101,9 @@ export default {
                 backup: {
                     title: this.$t("Backup"),
                 },
+                plugins: {
+                    title: this.$t("Plugins"),
+                },
                 about: {
                     title: this.$t("About"),
                 },

src/router.js

@@ -26,6 +26,7 @@ import Proxies from "./components/settings/Proxies.vue";
 import Backup from "./components/settings/Backup.vue";
 import About from "./components/settings/About.vue";
 import DockerHosts from "./components/settings/Docker.vue";
+import Plugins from "./components/settings/Plugins.vue";
 
 const routes = [
     {
@@ -112,6 +113,10 @@ const routes = [
                                 path: "backup",
                                 component: Backup,
                             },
+                            {
+                                path: "plugins",
+                                component: Plugins,
+                            },
                             {
                                 path: "about",
                                 component: About,