Added plugin context view

- Added plugin context view
- Moved plugin type definition to separate file
- Added wip request forwarder

src/web/components/gan.html

@@ -3,6 +3,10 @@
         <h2>Global Area Network</h2>
         <p>Virtual Network Hub that allows all networked devices to communicate as if they all reside in the same physical data center or cloud region</p>
     </div>
+    <div class="ui yellow message">
+        <b>Deprecation Notice</b>
+        <p>Global Area Network will be deprecating in v3.2.x and moved to Plugin</p>
+    </div>
     <div class="gansnetworks">
         <div class="ganstats ui basic segment">
             <div style="float: right; max-width: 300px; margin-top: 0.4em;">

src/web/components/plugincontext.html

@@ -0,0 +1,52 @@
+<div class="">
+    <iframe id="pluginContextLoader" src="" style="width: 100%; border: none;">
+
+    </iframe>
+</div>
+<script>
+    function initPluginUIView(){
+        let pluginID = getPluginIDFromWindowHash();
+        console.log("Launching plugin UI for plugin with ID:", pluginID);
+        loadPluginContext(pluginID);
+    }
+
+    function loadPluginContext(pluginID){
+        let pluginContextURL = `/plugin.ui/${pluginID}/`;
+        $("#pluginContextLoader").attr("src", pluginContextURL);
+    }
+
+    function getPluginIDFromWindowHash(){
+        let tabID = window.location.hash.substr(1);
+        let pluginID = "";
+        if (tabID.startsWith("{")) {
+            tabID = decodeURIComponent(tabID);
+            try {
+                let parsedData = JSON.parse(tabID);
+                if (typeof(parsedData.pluginID) != "undefined"){
+                    pluginID = parsedData.pluginID;
+                }
+            } catch (e) {
+                console.error("Invalid JSON data:", e);
+            }
+        }
+        return pluginID;
+    }
+
+    function resizeIframe() {
+        let iframe = document.getElementById('pluginContextLoader');
+        let mainMenuHeight = document.getElementById('mainmenu').offsetHeight;
+        iframe.style.height = mainMenuHeight + 'px';
+    }
+
+    $(window).on("resize", function(){
+        resizeIframe();
+    });
+
+    //Bind event to tab switch
+    tabSwitchEventBind["pluginContextWindow"] = function(){
+        //On switch over to this page, load info
+        resizeIframe();
+    }
+
+    initPluginUIView();
+</script>

src/web/components/plugins.html

@@ -1,7 +1,11 @@
 <div class="standardContainer">
     <div class="ui basic segment">
         <h2>Plugins</h2>
-        <p>Custom features on Zoraxy</p>
+        <p>Add custom features to your Zoraxy!</p>
+    </div>
+    <div class="ui yellow message">
+      <div class="header">Experimental Feature</div>
+      <p>This feature is experimental and may not work as expected. Use with caution.</p>
     </div>
     <table class="ui basic celled table">
         <thead>
@@ -19,6 +23,29 @@
 
 <script>
 
+function initPluginSideMenu(){
+  $("#pluginMenu").html("");
+  $.get(`/api/plugins/list`, function(data){
+    data.forEach(plugin => {
+      $("#pluginMenu").append(`
+        <a class="item" tag="pluginContextWindow" pluginid="${plugin.Spec.id}" onclick="loadPluginUIContextIfAvailable();">
+            <img style="width: 20px;" class="ui mini right spaced image" src="/api/plugins/icon?plugin_id=${plugin.Spec.id}"> ${plugin.Spec.name}
+        </a>
+      `);
+      
+    });
+  });
+}
+initPluginSideMenu();
+
+function loadPluginUIContextIfAvailable(){
+  if(typeof(initPluginUIView) != "undefined"){
+    initPluginUIView();
+  }
+}
+
+
+
 function initiatePluginList(){
   $.get(`/api/plugins/list`, function(data){
     const tbody = $("#pluginTable");
@@ -49,7 +76,6 @@ function initiatePluginList(){
             <div class="ui toggle checkbox">
               <input type="checkbox" name="enable" ${plugin.Enabled ? 'checked' : ''}>
             </div>
-            <button class="ui basic small circular icon button" onclick="openPluginUI('${plugin.Spec.id}');"><i class="ui edit icon"></i></button>
           </td>
         </tr>
       `;
@@ -59,10 +85,6 @@ function initiatePluginList(){
   });
 }
 
-function openPluginUI(pluginid){
-  showSideWrapper(`/plugin.ui/${pluginid}/`, true);
-}
-
 initiatePluginList();
 
 </script>