Added UI for plugin system and upnp example

- Added wip UI for plugin tag system
- Added upnp port forwarder plugin
- Added error and fatal printout for plugins
- Optimized UI flow for plugin context window
- Added dev web server for plugin development purpose

src/web/index.html

@@ -209,7 +209,20 @@
 
         <br><br>
         <script>
-            $(".year").text(new Date().getFullYear());
+           /* 
+                Plugin Manager State 
+           
+                As some initiation must be done before the plugin manager
+                loaded up the plugin list, this state here tells the plugin
+                manager to do some actions after the plugin list is initiated
+           */
+            var plugin_manager_state = {
+                initated: false, //Whether the plugin manager has been initiated
+                initCallback: undefined, //Callback to be called when the plugin manager is initiated
+                listUpdateCallback:  undefined //Callback to be called when the plugin list is updated
+            }
+
+
             /*
                 Loader function
 
@@ -258,13 +271,22 @@
                         try {
                             let parsedData = JSON.parse(tabID);
                             tabID = parsedData.tabID;
-                           
+                            
                             //Open the plugin context window
                             if (tabID == "pluginContextWindow"){
                                 let pluginID = parsedData.pluginID;
-                                let button = $("#pluginMenu").find(`[pluginid="${pluginID}"]`);
-                                openTabById(tabID, button);
-                                loadPluginUIContextIfAvailable();
+                                if (pluginID == undefined){
+                                    //Do not swap page
+                                    return;
+                                }
+                                if (!openPluginTabByID(pluginID)){
+                                    //Let the plugin manager to load the plugin list first
+                                    plugin_manager_state.initCallback = function(){
+                                        let pid = pluginID;
+                                        openPluginTabByID(pid);
+                                    }
+                                }
+                               
                             }
                         } catch (e) {
                             console.error("Invalid JSON data:", e);
@@ -290,6 +312,17 @@
                 $('table').tablesort();
             });
 
+            //Function to open a plugin tab by its plugin id
+            function openPluginTabByID(pluginID, tabID="pluginContextWindow"){
+                let button = $("#pluginMenu").find(`[pluginid="${pluginID}"]`);
+                if (button.length == 0){
+                    return false;
+                }
+                openTabById(tabID, button);
+                loadPluginUIContextIfAvailable();
+                return true;
+            }
+
             function logout() {
                 $.get("/api/auth/logout", function(response) {
                     if (response === "OK") {
@@ -495,6 +528,9 @@
                 });
                 $("body").css("overflow", "auto");
             }
+
+            /* Utilities */
+            $(".year").text(new Date().getFullYear());
         </script>
     </body>
 </html>