diff --git a/src/web/components/httprp.html b/src/web/components/httprp.html index eea543f..890d8cf 100644 --- a/src/web/components/httprp.html +++ b/src/web/components/httprp.html @@ -46,7 +46,7 @@ left: 50%; transform: translate(-50%, -50%); width: 68vw; - height: 50vh; + height: 70vh; background-color: var(--theme_bg_primary); padding: 1.4em; border-radius: .6em; @@ -55,6 +55,44 @@ max-width: 840px; } + #httprpEditModal .rpconfig_content{ + height: 100%; + } + + #httprpEditModal .editor_side_wrapper{ + position: absolute; + top: 0; + right: 0; + height:100%; + width: 100%; + background-color: var(--theme_bg_primary); + } + + #httprpEditModal .wrapper_frame{ + width: 100%; + border: 1px solid var(--divider_color); + border-radius: 0.5em; + height: calc(100%); + } + + #httprpEditModal .editor_side_wrapper .wrapper_frame{ + height: calc(100% - 30px); + } + + #httprpEditModal .editor_back_button { + border: none; + background-color: transparent; + box-shadow: none; + color: var(--text_color); + font-size: 2.2em; + cursor: pointer; + padding-top: 20px; + } + + #httprpEditModal .editor_back_button:hover{ + opacity: 0.5; + } + @media screen and (max-width: 1024px) { #httprpEditModal { width: 85vw; @@ -63,9 +101,9 @@ @media screen and (max-width: 768px) { #httprpEditModal { - width: 95vw; height: 80vh; border-radius: 0; + overflow-y: scroll; } .httpProxyEditClosePC{ @@ -85,8 +123,6 @@ } } - - #httprpEditDarkenLayer { position: fixed; top: 0; @@ -95,6 +131,7 @@ height: 100%; background-color: rgba(0, 0, 0, 0.5); z-index: 8; + backdrop-filter: blur(3px); } #httprpEditModalWrapper { @@ -155,7 +192,7 @@
-
+
-
+
-

- -

-
+
+

+ +

+
-
-
-
-
- -
-
- - +
+
+
+ + +
+
+ + +
-
+
+
-
- -
-
- - -
-
-
-
- - Advanced Settings -
-
-
- - +
+ +
+
+ + +
+
+
+
+ + Advanced Settings
-
-
- - +
+
+ + +
+
+
+ + +
@@ -241,17 +282,21 @@
-
+
+
+
+
+
-
-
+
- Headers - +
@@ -303,17 +348,25 @@
SSL - +
- Tags - +
-

Note: All changes will be automatically saved.

-

+ +
@@ -366,6 +419,17 @@ return vdList; } + function renderTagList(subd){ + let tagList = ""; + if (subd.Tags.length > 0){ + tagList = subd.Tags.map(tag => `${tag}`).join(""); + }else{ + tagList = "No Tags"; + tagListEmpty = true; + } + return tagList; + } + /* List all proxy endpoints */ function listProxyEndpoints(){ $.get("/api/proxy/list?type=host", function(data){ @@ -434,14 +498,8 @@ } //Build tag list - let tagList = ""; - let tagListEmpty = false; - if (subd.Tags.length > 0){ - tagList = subd.Tags.map(tag => `${tag}`).join(""); - }else{ - tagList = "No Tags"; - tagListEmpty = true; - } + let tagList = renderTagList(subd); + let tagListEmpty = (subd.Tags.length == 0); $("#httpProxyList").append(` @@ -879,7 +937,7 @@ ept: "host", ep: uuid })); - showSideWrapper("snippet/basicAuthEditor.html?t=" + Date.now() + "#" + payload); + showEditorSideWrapper("snippet/basicAuthEditor.html?t=" + Date.now() + "#" + payload); } function editAccessRule(uuid){ @@ -887,7 +945,7 @@ ept: "host", ep: uuid })); - showSideWrapper("snippet/hostAccessEditor.html?t=" + Date.now() + "#" + payload); + showEditorSideWrapper("snippet/hostAccessEditor.html?t=" + Date.now() + "#" + payload); } function editAliasHostnames(uuid){ @@ -895,7 +953,7 @@ ept: "host", ep: uuid })); - showSideWrapper("snippet/aliasEditor.html?t=" + Date.now() + "#" + payload); + showEditorSideWrapper("snippet/aliasEditor.html?t=" + Date.now() + "#" + payload); } function quickEditVdir(uuid){ @@ -903,22 +961,13 @@ $("#vdirBaseRoutingRule").parent().dropdown("set selected", uuid); } - //Open the custom header editor - function editCustomHeaders(uuid){ - let payload = encodeURIComponent(JSON.stringify({ - ept: "host", - ep: uuid - })); - showSideWrapper("snippet/customHeaders.html?t=" + Date.now() + "#" + payload); - } - //Open the load balance option function editUpstreams(uuid){ let payload = encodeURIComponent(JSON.stringify({ ept: "host", ep: uuid })); - showSideWrapper("snippet/upstreams.html?t=" + Date.now() + "#" + payload); + showEditorSideWrapper("snippet/upstreams.html?t=" + Date.now() + "#" + payload); } function handleProxyRuleToggle(object){ @@ -1048,10 +1097,10 @@ ept: "host", ep: uuid })); - showSideWrapper("snippet/tagEditor.html?t=" + Date.now() + "#" + payload); + showEditorSideWrapper("snippet/tagEditor.html?t=" + Date.now() + "#" + payload); } - // Render the tags preview from tag editing snippet + // Render the tags preview from tag editing snippet, callback from tags editor function renderTagsPreview(endpoint, tags){ let targetProxyRuleEle = $(".subdEntry[eptuuid='" + endpoint + "'] td[data-label='tags']"); //Update the tag DOM @@ -1062,9 +1111,8 @@ $(targetProxyRuleEle).attr("payload", encodeURIComponent(JSON.stringify(tags))); } + function getTagsArrayFromEndpoint(endpoint){ - console.log("wip"); - return []; let targetProxyRuleEle = $(".subdEntry[eptuuid='" + endpoint + "'] td[data-label='tags']"); let tags = $(targetProxyRuleEle).attr("payload"); return JSON.parse(decodeURIComponent(tags)); @@ -1076,8 +1124,12 @@ }); function closeHttpRuleEditor(){ - $("#httprpEditModalWrapper").hide(); - exitProxyInlineEdit(); + $(".ui.toggle.tiny.fitted.checkbox").css("z-index", 0); + $("#httprpEditModalWrapper").fadeOut("fast", function(){ + $(".ui.toggle.tiny.fitted.checkbox").css("z-index", "auto"); + $("body").css("overflow", "auto"); + exitProxyInlineEdit(); + }); } //Get the current editing http hostname, return null if errors @@ -1093,7 +1145,7 @@ //Initialize the http proxy rule editor function initHttpProxyRuleEditorModal(rulepayload){ let subd = JSON.parse(JSON.stringify(rulepayload)); - + //Populate all the information in the proxy editor populateAndBindEventsToHTTPProxyEditor(subd); @@ -1102,7 +1154,13 @@ $("#httprpEditModal .rpconfig_content[rpcfg='downstream']").show(); $("#httprpEditModal .hrpedit_menu_item.active").removeClass("active"); $("#httprpEditModal .hrpedit_menu_item[cfgpage='downstream']").addClass("active"); - $("#httprpEditModalWrapper").show(); + $("body").css("overflow", "hidden"); + // Fixing a bug in semantic ui that when an element fade in/out on top of checkbox + // the checkbox suddently flash on top of the fading element + $(".ui.toggle.tiny.fitted.checkbox").css("z-index", 0); + $("#httprpEditModalWrapper").fadeIn("fast", function(){ + $(".ui.toggle.tiny.fitted.checkbox").css("z-index", "auto"); + }); } // This function populate the bind all the events required for the proxy editor @@ -1195,9 +1253,14 @@ }); /* Headers */ - editor.find(".editHeaderBtn").off("click").on("click", function(){ - editCustomHeaders(uuid); - }); + (() => { + let payload = encodeURIComponent(JSON.stringify({ + ept: "host", + ep: uuid + })); + let frameURL = "snippet/customHeaders.html?t=" + Date.now() + "#" + payload; + editor.find(".rpconfig_content[rpcfg='headers'] .wrapper_frame").attr('src', frameURL); + })(); /* ------------ Security ------------ */ @@ -1242,9 +1305,14 @@ /* ------------ TLS ------------ */ /* ------------ Tags ------------ */ - editor.find(".editTagsBtn").off("click").on("click", function(){ - editTags(uuid); - }); + (()=>{ + let payload = encodeURIComponent(JSON.stringify({ + ept: "host", + ep: uuid + })); + let frameURL = "snippet/tagEditor.html?t=" + Date.now() + "#" + payload; + editor.find(".rpconfig_content[rpcfg='tags'] .wrapper_frame").attr('src', frameURL); + })(); console.log(subd); } @@ -1273,8 +1341,30 @@ let cfgPageId = $(this).attr("cfgpage"); $("#httprpEditModal .rpconfig_content").hide(); $(`#httprpEditModal .rpconfig_content[rpcfg='${cfgPageId}']`).show(); + hideEditorSideWrapper(); //Always close the side wrapper on tab change }); + $("#httprpEditModal .editor_back_button").on("click", function(event) { + // Prevent click event from propagating to the modal background + event.stopPropagation(); + hideEditorSideWrapper(); + }); + + function showEditorSideWrapper(url){ + $("#httprpEditModal .editor_side_wrapper .wrapper_frame").attr('src', url); + $("#httprpEditModal .editor_side_wrapper").fadeIn("fast"); + } + + function hideEditorSideWrapper(){ + $("#httprpEditModal .editor_side_wrapper").fadeOut("fast"); + $("#httprpEditModal .editor_side_wrapper .wrapper_frame").attr('src', "snippet/placeholder.html"); + } + + + /* + Page Initialization Functions + */ + // Initialize the proxy list on page load $(document).ready(function() { listProxyEndpoints(); diff --git a/src/web/index.html b/src/web/index.html index fb8df92..ac3480a 100644 --- a/src/web/index.html +++ b/src/web/index.html @@ -334,6 +334,7 @@ } function toggleTheme(){ + let editorSideWrapper = $("#httprpEditModal .wrapper_frame"); if ($("body").hasClass("darkTheme")){ setDarkTheme(false); //Check if the snippet iframe is opened. If yes, set the dark theme to the iframe @@ -341,6 +342,10 @@ $(".sideWrapper iframe")[0].contentWindow.setDarkTheme(false); } + if (editorSideWrapper.is(":visible")){ + editorSideWrapper[0].contentWindow.setDarkTheme(false); + } + if ($("#pluginContextLoader").is(":visible")){ $("#pluginContextLoader")[0].contentWindow.setDarkTheme(false); } @@ -350,6 +355,9 @@ if ($(".sideWrapper").is(":visible")){ $(".sideWrapper iframe")[0].contentWindow.setDarkTheme(true); } + if (editorSideWrapper.is(":visible")){ + editorSideWrapper[0].contentWindow.setDarkTheme(true); + } if ($("#pluginContextLoader").is(":visible")){ $("#pluginContextLoader")[0].contentWindow.setDarkTheme(true); } @@ -515,6 +523,12 @@ } function hideSideWrapper(discardFrameContent = false){ + if ($("#httprpEditModal").length && $("#httprpEditModal").is(":visible")) { + //HTTP Proxy Rule editor side wrapper implementation + $("#httprpEditModal .editor_side_wrapper").hide(); + } + + //Original side wrapper implementation if (discardFrameContent){ $(".sideWrapper iframe").attr("src", "snippet/placeholder.html"); } diff --git a/src/web/snippet/customHeaders.html b/src/web/snippet/customHeaders.html index e7fcd4b..4944da9 100644 --- a/src/web/snippet/customHeaders.html +++ b/src/web/snippet/customHeaders.html @@ -34,13 +34,6 @@
-
-
- Custom Headers -
-
-
-
- -
- -




@@ -189,7 +178,7 @@ let payloadHash = window.location.hash.substr(1); try{ payloadHash = JSON.parse(decodeURIComponent(payloadHash)); - $("#epname").text(payloadHash.ep); + //$("#epname").text(payloadHash.ep); editingEndpoint = payloadHash; }catch(ex){ console.log("Unable to load endpoint data from hash") diff --git a/src/web/snippet/hostAccessEditor.html b/src/web/snippet/hostAccessEditor.html index 474775e..329e848 100644 --- a/src/web/snippet/hostAccessEditor.html +++ b/src/web/snippet/hostAccessEditor.html @@ -67,8 +67,10 @@
- Host Access Settings -
+
+ Host Access Settings +
+
diff --git a/src/web/snippet/tagEditor.html b/src/web/snippet/tagEditor.html index 853207d..d5801fb 100644 --- a/src/web/snippet/tagEditor.html +++ b/src/web/snippet/tagEditor.html @@ -21,13 +21,6 @@
-
-
- Edit Tags -
-
-
-

Tags currently applied to this host name / proxy rule

@@ -68,9 +61,7 @@ -
- - +