]> jfr.im git - irc/unrealircd/unrealircd-webpanel.git/commitdiff
settings/plugins: add install button and show plugin info when clicked
authorValerie Pond <redacted>
Sun, 9 Jul 2023 15:45:13 +0000 (16:45 +0100)
committerValerie Pond <redacted>
Sun, 9 Jul 2023 15:45:13 +0000 (16:45 +0100)
js/bs-modal.js
settings/add-plugin.php
settings/plugins.php

index 2fea1da7a44c1c43416149a70ad85fe42c8535c2..2a9466abc6495aa009b24786941d564566cffc54 100644 (file)
@@ -77,3 +77,184 @@ function bsModal(title, body, footer, size = null, static = false, show = false,
 
     return m1.id;
 }
+
+
+function create_plugin_info_modal(modname)
+{
+    let found = false;
+    fetch(BASE_URL + 'api/plugin.php')
+    .then(response => response.json()) // Parse the response as JSON
+    .then(data => {
+        for (let i = 0; data.list[i]; i++)
+        {
+            if (data.list[i].name == modname)
+            {
+                found = true;
+                const modal = bsModal(
+                    "<i>Information about " + data.list[i].title + "</i>", // title
+                    "<div class=\"" + data.list[i].name + "_screenshots\"><i class=\"fa fa-spinner\" aria-hidden=\"true\"></i></div><div class=\"" + data.list[i].name + "_description\"><i class=\"fa fa-spinner\" aria-hidden=\"true\"></i></div>",
+                    "<div id=\""+modname+"closebtn\" class=\"btn btn-danger\">Close</div>", null, true, true, true
+                );
+                let modalclose = document.getElementById(modal);
+                modalclose.addEventListener('click', (e) => {
+                    $("#"+modal).modal('hide');
+                });
+                boobs = document.getElementById(modal + '-body');
+                boobs.innerHTML = "";
+                if (data.list[i].screenshot.length)
+                {
+                    boobs.innerHTML += ` <div style="padding-left: 0px;  padding-right: 0px;">
+                                        <img src="` + (data.list[i].screenshot[0] ?? "") + `" class="screenshot img-fluid" alt="` + data.list[i].screenshot[1] + ` style="max-width: 100%; height:auto">
+                                    </div>`;
+                }
+                boobs.innerHTML += "<p class=\"alert alert-primary mt-2\"><i><b>Description:</i></b><br>" + atob(data.list[i].readme.replace(["\n",""],["<br>","<br>"])) + "</p>";
+                boobs.innerHTML +=  `<div class="alert alert-dark">
+                                    <table class="table">
+                                        <tr>
+                                                <th scope="row">Title</th>
+                                                <td>`+data.list[i].title+`</td>
+                                            </tr>
+                                            <tr>
+                                                <th scope="row">Description</th>
+                                                <td>`+data.list[i].description+`</td>
+                                            </tr>
+                                            <tr>
+                                                <th scope="row">Version</th>
+                                                <td>`+data.list[i].version+`</td>
+                                            </tr>
+                                            <tr>
+                                                <th scope="row">Author</th>
+                                                <td>`+data.list[i].author+`</td>
+                                            </tr>
+                                            <tr>
+                                                <th scope="row">Min Version Required</th>
+                                                <td>`+data.list[i].minver+`</td>
+                                            </tr>
+                                            <tr>
+                                                <th scope="row">Max Version</th>
+                                                <td>`+data.list[i].maxver+`</td>
+                                            </tr>
+                                            
+                                        </table></small>
+                                    </div>`;
+            }
+        }
+        if (!found)
+        {
+            bsModal("Hmmm. Something went wrong.", "It seems we can't find any information about that plugin! Maybe it's built-in? If not, please report this via <a href='https://github.com/unrealircd/unrealircd-webpanel'>GitHub</a> or <a href='mailto:v.a.pond@outlook.com'>email</a>. ", "", null, null, true, true);
+        }
+    })
+    .catch(error => {
+        // Handle any errors that occur during the request
+        bsModal("Hmmm. Something went wrong.", "It seems we can't query our own API! Please report this via <a href='https://github.com/unrealircd/unrealircd-webpanel'>GitHub</a> or <a href='mailto:v.a.pond@outlook.com'>email</a>. ", "", null, null, true, true);
+    });
+}
+
+
+function requestInstall(name, uninstall = false)
+{
+    let inst = (uninstall) ? "uninstall" : "install";
+    var xhr = new XMLHttpRequest();
+
+    xhr.onload = function() {
+        if (xhr.status === 200) {
+            var response = JSON.parse(xhr.responseText);
+            console.log(response.success);
+            let install_button = document.getElementById(name+'install');
+            if (response.success !== undefined)
+            {
+                if (install_button)
+                {
+                    install_button.innerHTML = (inst == "uninstall") ? "Install" : "Uninstall";
+                    install_button.classList.replace('btn-secondary', (inst == "uninstall") ? 'btn-primary' : 'btn-outline-danger');
+                    setTimeout(() => { location.reload() }, 500);
+                }
+            }
+            else
+            {
+                if (install_button)
+                {
+                    install_button.innerHTML = (inst == "uninstall") ? "Uninstall" : "Install";
+                    install_button.classList.replace('btn-secondary', (inst == "uninstall") ? 'btn-outline-danger' : 'btn-primary');
+                    setTimeout(() => { location.reload() }, 2000);
+                }
+            }
+        }
+    };
+
+    xhr.open('GET', BASE_URL + 'api/plugin.php?'+inst+'=' + name, true);
+    xhr.send();
+    return true;
+}
+
+
+function create_plugin_info_modal(modname)
+{
+    let found = false;
+    fetch(BASE_URL + 'api/plugin.php')
+    .then(response => response.json()) // Parse the response as JSON
+    .then(data => {
+        for (let i = 0; data.list[i]; i++)
+        {
+            if (data.list[i].name == modname)
+            {
+                found = true;
+                const modal = bsModal(
+                    "<i>Information about " + data.list[i].title + "</i>", // title
+                    "<div class=\"" + data.list[i].name + "_screenshots\"><i class=\"fa fa-spinner\" aria-hidden=\"true\"></i></div><div class=\"" + data.list[i].name + "_description\"><i class=\"fa fa-spinner\" aria-hidden=\"true\"></i></div>",
+                    "<div id=\""+modname+"closebtn\" class=\"btn btn-danger\">Close</div>", null, true, true, true
+                );
+                let modalclose = document.getElementById(modal);
+                modalclose.addEventListener('click', (e) => {
+                    $("#"+modal).modal('hide');
+                });
+                boobs = document.getElementById(modal + '-body');
+                boobs.innerHTML = "";
+                if (data.list[i].screenshot.length)
+                {
+                    boobs.innerHTML += ` <div style="padding-left: 0px;  padding-right: 0px;">
+                                        <img src="` + (data.list[i].screenshot[0] ?? "") + `" class="screenshot img-fluid" alt="` + data.list[i].screenshot[1] + ` style="max-width: 100%; height:auto">
+                                    </div>`;
+                }
+                boobs.innerHTML += "<p class=\"alert alert-primary mt-2\"><i><b>Description:</i></b><br>" + atob(data.list[i].readme.replace(["\n",""],["<br>","<br>"])) + "</p>";
+                boobs.innerHTML +=  `<div class="alert alert-dark">
+                                    <table class="table">
+                                        <tr>
+                                                <th scope="row">Title</th>
+                                                <td>`+data.list[i].title+`</td>
+                                            </tr>
+                                            <tr>
+                                                <th scope="row">Description</th>
+                                                <td>`+data.list[i].description+`</td>
+                                            </tr>
+                                            <tr>
+                                                <th scope="row">Version</th>
+                                                <td>`+data.list[i].version+`</td>
+                                            </tr>
+                                            <tr>
+                                                <th scope="row">Author</th>
+                                                <td>`+data.list[i].author+`</td>
+                                            </tr>
+                                            <tr>
+                                                <th scope="row">Min Version Required</th>
+                                                <td>`+data.list[i].minver+`</td>
+                                            </tr>
+                                            <tr>
+                                                <th scope="row">Max Version</th>
+                                                <td>`+data.list[i].maxver+`</td>
+                                            </tr>
+                                            
+                                        </table></small>
+                                    </div>`;
+            }
+        }
+        if (!found)
+        {
+            bsModal("Hmmm. Something went wrong.", "It seems we can't find any information about that plugin! Maybe it's built-in? If not, please report this via <a href='https://github.com/unrealircd/unrealircd-webpanel'>GitHub</a> or <a href='mailto:v.a.pond@outlook.com'>email</a>. ", "", null, null, true, true);
+        }
+    })
+    .catch(error => {
+        // Handle any errors that occur during the request
+        bsModal("Hmmm. Something went wrong.", "It seems we can't query our own API! Please report this via <a href='https://github.com/unrealircd/unrealircd-webpanel'>GitHub</a> or <a href='mailto:v.a.pond@outlook.com'>email</a>. ", "", null, null, true, true);
+    });
+}
index 9493f4b4c43e40c6e283e354399b577b378e72b1..1b38740f76b844f4968f3d065d856a41227f4fe0 100644 (file)
@@ -71,111 +71,12 @@ $p = new PluginRepo();
         btn.innerHTML = "Uninstall";
     });
 
-    function requestInstall(name, uninstall = false)
-    {
-        let inst = (uninstall) ? "uninstall" : "install";
-        var xhr = new XMLHttpRequest();
 
-        xhr.onload = function() {
-            if (xhr.status === 200) {
-                var response = JSON.parse(xhr.responseText);
-                console.log(response.success);
-                let install_button = document.getElementById(name+'install');
-                if (response.success !== undefined)
-                {
-                    if (install_button)
-                    {
-                        install_button.innerHTML = (inst == "uninstall") ? "Install" : "Uninstall";
-                        install_button.classList.replace('btn-secondary', (inst == "uninstall") ? 'btn-primary' : 'btn-outline-danger');
-                        setTimeout(() => { location.reload() }, 500);
-                    }
-                }
-                else
-                {
-                    if (install_button)
-                    {
-                        install_button.innerHTML = (inst == "uninstall") ? "Uninstall" : "Install";
-                        install_button.classList.replace('btn-secondary', (inst == "uninstall") ? 'btn-outline-danger' : 'btn-primary');
-                        setTimeout(() => { location.reload() }, 500);
-                    }
-                }
-            }
-        };
-
-        xhr.open('GET', BASE_URL + 'api/plugin.php?'+inst+'=' + name, true);
-        xhr.send();
-        return true;
-    }
-
-    function create_info_modal(modname)
-    {
-        fetch(BASE_URL + 'api/plugin.php')
-        .then(response => response.json()) // Parse the response as JSON
-        .then(data => {
-            for (let i = 0; data.list[i]; i++)
-            {
-                if (data.list[i].name == modname)
-                {
-                    const modal = bsModal(
-                        "<i>Information about " + data.list[i].title + "</i>", // title
-                        "<div class=\"" + data.list[i].name + "_screenshots\"><i class=\"fa fa-spinner\" aria-hidden=\"true\"></i></div><div class=\"" + data.list[i].name + "_description\"><i class=\"fa fa-spinner\" aria-hidden=\"true\"></i></div>",
-                        "<div id=\""+modname+"closebtn\" class=\"btn btn-danger\">Close</div>", null, true, true, true
-                    );
-                    let modalclose = document.getElementById(modal);
-                    modalclose.addEventListener('click', (e) => {
-                        $("#"+modal).modal('hide');
-                    });
-                    boobs = document.getElementById(modal + '-body');
-                    boobs.innerHTML = "";
-                    if (data.list[i].screenshot.length)
-                    {
-                        boobs.innerHTML += ` <div style="padding-left: 0px;  padding-right: 0px;">
-                                            <img src="` + (data.list[i].screenshot[0] ?? "") + `" class="screenshot img-fluid" alt="` + data.list[i].screenshot[1] + ` style="max-width: 100%; height:auto">
-                                        </div>`;
-                    }
-                    boobs.innerHTML += "<p class=\"alert alert-primary mt-2\"><i><b>Description:</i></b><br>" + atob(data.list[i].readme.replace(["\n",""],["<br>","<br>"])) + "</p>";
-                    boobs.innerHTML +=  `<div class="alert alert-dark">
-                                        <table class="table">
-                                            <tr>
-                                                    <th scope="row">Title</th>
-                                                    <td>`+data.list[i].title+`</td>
-                                                </tr>
-                                                <tr>
-                                                    <th scope="row">Description</th>
-                                                    <td>`+data.list[i].description+`</td>
-                                                </tr>
-                                                <tr>
-                                                    <th scope="row">Version</th>
-                                                    <td>`+data.list[i].version+`</td>
-                                                </tr>
-                                                <tr>
-                                                    <th scope="row">Author</th>
-                                                    <td>`+data.list[i].author+`</td>
-                                                </tr>
-                                                <tr>
-                                                    <th scope="row">Min Version Required</th>
-                                                    <td>`+data.list[i].minver+`</td>
-                                                </tr>
-                                                <tr>
-                                                    <th scope="row">Max Version</th>
-                                                    <td>`+data.list[i].maxver+`</td>
-                                                </tr>
-                                                
-                                            </table></small>
-                                        </div>`;
-                }
-            }
-        })
-        .catch(error => {
-            // Handle any errors that occur during the request
-            console.error('Error:', error);
-        });
-    }
 
     const infoButtons = document.querySelectorAll('.more-info');
     infoButtons.forEach((el) => {
         el.addEventListener('click', (event) => {
-            create_info_modal(el.id);
+            create_plugin_info_modal(el.id);
             
         });
     });
index 45fe9a259ed548ba92a3b7bb34ef13fc114ecdfe..eedb1a4defabb5e8848351f9d25f6beaa5ab0147 100644 (file)
@@ -13,12 +13,13 @@ Your installed plugins:
 <table class="container-xxl table table-sm table-responsive caption-top table-striped">
        <thead class="table-primary">
        <form method="post">
+    <th scope="col"><input type="checkbox" label='selectall' onClick="toggle_tkl(this)" /></th>
        <th scope="col">Plugin Name</th>
-       <th scope="col">Handle</th>
        <th scope="col">Version</th>
        <th scope="col">Description</th>
        <th scope="col">Author</th>
     <th scope="col">Contact</th>
+    <th scope="col">Uninstall</th>
     
        </thead>
        <tbody>
@@ -26,16 +27,61 @@ Your installed plugins:
             foreach(Plugins::$list as $plugin)
             {
                 echo "<tr>";
-                echo "<td scope=\"col\">".$plugin->name."</td>";
-                echo "<td scope=\"col\"><code>".$plugin->handle."</code></td>";
+                echo "<th scope=\"col\"><input type=\"checkbox\" label='selectall' onClick=\"toggle_tkl(this)\" /></th>";
+                echo "<td scope=\"col\" onClick=\"create_plugin_info_modal('".$plugin->handle."')\">".$plugin->name."</td>";
                 echo "<td scope=\"col\"><code>".$plugin->version."</code></td>";
                 echo "<td scope=\"col\">".$plugin->description."</td>";
                 echo "<td scope=\"col\">".$plugin->author."</td>";
                 echo "<td scope=\"col\"><a href='mailto:$plugin->email'>".$plugin->email."</a></td>";
+                echo "<td width=\"110\" scope=\"col\"><div id=\"".$plugin->handle."install\" class='text-center btn-sm btn-danger btn-install-plugin'>Uninstall</div></td>";
                 echo "</tr>";
             }
         ?>
     </tbody>
 </table>
+
+<script>
+const ibtns = document.querySelectorAll(".btn-install-plugin");
+    ibtns.forEach((ib) => {
+        ib.addEventListener('click', (e) => {
+            console.log(ib.id);
+            if (ib.innerHTML !== "Install" && ib.innerHTML !== "Uninstall") // some point between, don't do anything
+            {}
+            else if (ib.innerHTML == "Install") // install button pressed!
+            {
+                let req = requestInstall(ib.id.slice(0,-7))
+                if (req == true)
+                {
+                    ib.classList.replace("btn-primary", "btn-secondary");
+                    ib.innerHTML = "Installing...";
+                }
+                else
+                {
+                    let uhoh = new bsModal("Error", "Could not install: "+req, "", null, false, true);
+                }
+            }
+            else if (ib.innerHTML == "Uninstall")
+            {
+                let req = requestInstall(ib.id.slice(0,-7), true); // true = uninstall
+                if (req == true)
+                {
+                    ib.classList.replace("btn-outline-danger", "btn-secondary");
+                    ib.innerHTML = "Uninstalling...";
+                }
+                else
+                {
+                    let uhoh = new bsModal("Error", "Could not uninstall: "+req, "", null, false, true);
+                }
+            }
+        });
+    })
+    const installed = document.querySelectorAll(".installed");
+    installed.forEach((el) => {
+        let btn = document.getElementById(el.id + 'install');
+        btn.classList.replace("btn-primary", "btn-outline-danger");
+        btn.innerHTML = "Uninstall";
+    });
+</script>
+
 <?php
 require_once "../inc/footer.php";