Added working tag syste

web/components/httprp.html

@@ -25,7 +25,7 @@
             opacity: 0.8;
         }
     </style>
-    <div class="httpProxyListTools">
+    <div class="httpProxyListTools" style="margin-bottom: 1em;">
         <div id="tagFilterDropdown" class="ui floating basic dropdown labeled icon button" style="min-width: 150px;">
             <i class="filter icon"></i>
             <span class="text">Filter by tags</span>
@@ -47,7 +47,7 @@
                 </div>
             </div>
         </div>
-        <div class="ui small input" style="margin-bottom: 1em; width: 300px;">
+        <div class="ui small input" style="width: 300px; height: 38px;">
             <input type="text" id="searchInput" placeholder="Quick Search" onkeydown="handleSearchInput(event);" onchange="handleSearchInput(event);" onblur="handleSearchInput(event);">
         </div>
     </div>
@@ -59,7 +59,7 @@
                     <th>Host</th>
                     <th>Destination</th>
                     <th>Virtual Directory</th>
-                    <th>Tags</th> <!-- New column for tags -->
+                    <th>Tags</th>
                     <th style="max-width: 300px;">Advanced Settings</th>
                     <th class="no-sort" style="min-width:150px;">Actions</th>
                 </tr>
@@ -165,8 +165,10 @@
                             </div>
                         </td>
                         <td data-label="" editable="true" datatype="vdir">${vdList}</td>
-                        <td data-label="tags" datatype="tags">
-                            ${subd.Tags.map(tag => `<span class="ui tiny label tag-select" style="background-color: ${getTagColorByName(tag)}; color: ${getTagTextColor(tag)}">${tag}</span>`).join("")}
+                        <td data-label="tags" payload="${encodeURIComponent(JSON.stringify(subd.Tags))}" datatype="tags">
+                            <div class="tags-list">
+                            ${subd.Tags.length >0 ? subd.Tags.map(tag => `<span class="ui tiny label tag-select" style="background-color: ${getTagColorByName(tag)}; color: ${getTagTextColor(tag)}">${tag}</span>`).join(""):"<small style='opacity: 0.3; pointer-events: none; user-select: none;'>No Tags</small>"}
+                            </div>
                         </td>
                         <td data-label="" editable="true" datatype="advanced" style="width: 350px;">
                             ${subd.AuthenticationProvider.AuthMethod == 0x1?`<i class="ui grey key icon"></i> Basic Auth`:``}
@@ -506,8 +508,12 @@
         let requireRateLimit = $(row).find(".RequireRateLimit")[0].checked;
         let rateLimit = $(row).find(".RateLimit").val();
         let bypassGlobalTLS = $(row).find(".BypassGlobalTLS")[0].checked;
-        let tags = $("#proxyTags").val().trim();
-
+        let tags = getTagsArrayFromEndpoint(uuid);
+        if (tags.length > 0){
+            tags = tags.join(",");
+        }else{
+            tags = "";
+        }
         $.cjax({
             url: "/api/proxy/edit",
             method: "POST",
@@ -675,7 +681,9 @@
         let selectedTag = $("#tagFilterDropdown").dropdown('get value');
         $("#httpProxyList tr").each(function() {
             let host = $(this).find("td[data-label='']").text().toLowerCase();
-            let tags = $(this).find("td[data-label='tags']").text().toLowerCase();
+            let tagElements = $(this).find("td[data-label='tags']");
+            let tags = tagElements.attr("payload");
+            tags = JSON.parse(decodeURIComponent(tags));
             if ((host.includes(searchInput) || searchInput === "") && (tags.includes(selectedTag) || selectedTag === "")) {
                 $(this).show();
             } else {
@@ -716,7 +724,7 @@
         let dropdownMenu = $("#tagFilterDropdown .tagList");
         dropdownMenu.html(`<div class="item tag-select" data-value="">
             <div class="ui grey empty circular label"></div>
-            All tags
+            Show all
         </div>`);
         tags.forEach(tag => {
             let thisTagColor = getTagColorByName(tag);
@@ -736,6 +744,23 @@
         showSideWrapper("snippet/tagEditor.html?t=" + Date.now() + "#" + payload);
     }
 
+    // Render the tags preview from tag editing snippet
+    function renderTagsPreview(endpoint, tags){
+        let targetProxyRuleEle = $(".subdEntry[eptuuid='" + endpoint + "'] td[data-label='tags']");
+        //Update the tag DOM
+        let newTagDOM = tags.map(tag => `<span class="ui tiny label tag-select" style="background-color: ${getTagColorByName(tag)}; color: ${getTagTextColor(tag)}">${tag}</span>`).join("");
+        $(targetProxyRuleEle).find(".tags-list").html(newTagDOM);
+
+        //Update the tag payload
+        $(targetProxyRuleEle).attr("payload", encodeURIComponent(JSON.stringify(tags)));
+    }
+
+    function getTagsArrayFromEndpoint(endpoint){
+        let targetProxyRuleEle = $(".subdEntry[eptuuid='" + endpoint + "'] td[data-label='tags']");
+        let tags = $(targetProxyRuleEle).attr("payload");
+        return JSON.parse(decodeURIComponent(tags));
+    }
+
     // Initialize the proxy list on page load
     $(document).ready(function() {
         listProxyEndpoints();

web/darktheme.css

@@ -121,6 +121,9 @@ body.darkTheme .ui.basic.button:not(.red) {
 body.darkTheme .ui.basic.button:not(.red):hover {
     border: 1px solid var(--button_border_color) !important;
     background-color: var(--theme_bg) !important;
+}
+
+body.darkTheme .ui.basic.button:not(.red):not(.dropdown):hover {
     opacity: 0.8;
 }
 
@@ -549,6 +552,18 @@ body.darkTheme .RateLimit input {
     border-color: var(--theme_highlight) !important;
 }
 
+body.darkTheme .menu.transition{
+    background-color: var(--theme_bg) !important;
+    color: var(--text_color) !important;
+}
+
+body.darkTheme .ui.dropdown .menu{
+    background: var(--theme_bg_primary) !important;
+}
+
+body.darkTheme .ui.dropdown .menu .item{
+    color: var(--text_color) !important;
+}
 /* 
     Virtual Directorie Table
 */

web/snippet/tagEditor.html

@@ -9,6 +9,9 @@
         <script src="../script/utils.js"></script>
     </head>
     <body>
+        <link rel="stylesheet" href="../darktheme.css">
+        <script src="../script/darktheme.js"></script>
+        <br>
         <div class="ui container">
             <div class="ui header">
                 <div class="content">
@@ -67,7 +70,9 @@
                             parent.msgbox(data.error, false);
                         } else {
                             parent.msgbox("Tags updated");
-                            parent.hideSideWrapper();
+                            //Update the preview on parent page
+                            parent.renderTagsPreview(editingEndpoint.ep, tags);
+                            //parent.hideSideWrapper();
                         }
                     }
                 });