mirror of
https://github.com/tobychui/zoraxy.git
synced 2025-06-21 06:53:04 +02:00
Added more wip UI elements
This commit is contained in:
Toby Chui
parent
1f8684481a
commit
c7b5e0994e
@ -46,7 +46,7 @@
|
|||||||
left: 50%;
|
left: 50%;
|
||||||
transform: translate(-50%, -50%);
|
transform: translate(-50%, -50%);
|
||||||
width: 68vw;
|
width: 68vw;
|
||||||
height: 50vh;
|
height: 70vh;
|
||||||
background-color: var(--theme_bg_primary);
|
background-color: var(--theme_bg_primary);
|
||||||
padding: 1.4em;
|
padding: 1.4em;
|
||||||
border-radius: .6em;
|
border-radius: .6em;
|
||||||
@ -55,6 +55,44 @@
|
|||||||
max-width: 840px;
|
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) {
|
@media screen and (max-width: 1024px) {
|
||||||
#httprpEditModal {
|
#httprpEditModal {
|
||||||
width: 85vw;
|
width: 85vw;
|
||||||
@ -63,9 +101,9 @@
|
|||||||
|
|
||||||
@media screen and (max-width: 768px) {
|
@media screen and (max-width: 768px) {
|
||||||
#httprpEditModal {
|
#httprpEditModal {
|
||||||
width: 95vw;
|
|
||||||
height: 80vh;
|
height: 80vh;
|
||||||
border-radius: 0;
|
border-radius: 0;
|
||||||
|
overflow-y: scroll;
|
||||||
}
|
}
|
||||||
|
|
||||||
.httpProxyEditClosePC{
|
.httpProxyEditClosePC{
|
||||||
@ -85,8 +123,6 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
#httprpEditDarkenLayer {
|
#httprpEditDarkenLayer {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
top: 0;
|
top: 0;
|
||||||
@ -95,6 +131,7 @@
|
|||||||
height: 100%;
|
height: 100%;
|
||||||
background-color: rgba(0, 0, 0, 0.5);
|
background-color: rgba(0, 0, 0, 0.5);
|
||||||
z-index: 8;
|
z-index: 8;
|
||||||
|
backdrop-filter: blur(3px);
|
||||||
}
|
}
|
||||||
|
|
||||||
#httprpEditModalWrapper {
|
#httprpEditModalWrapper {
|
||||||
@ -155,7 +192,7 @@
|
|||||||
<!-- Modal for editing a HTTP Proxy Rule -->
|
<!-- Modal for editing a HTTP Proxy Rule -->
|
||||||
<div id="httprpEditModalWrapper">
|
<div id="httprpEditModalWrapper">
|
||||||
<div id="httprpEditModal" editing-host="">
|
<div id="httprpEditModal" editing-host="">
|
||||||
<div class="ui stackable grid">
|
<div class="ui stackable grid" style="height:100%;">
|
||||||
<div class="four wide column">
|
<div class="four wide column">
|
||||||
<div class="ui secondary fluid vertical menu">
|
<div class="ui secondary fluid vertical menu">
|
||||||
<a class="active item hrpedit_menu_item" cfgpage="downstream">
|
<a class="active item hrpedit_menu_item" cfgpage="downstream">
|
||||||
@ -184,56 +221,60 @@
|
|||||||
<button class="ui basic fluid button httpProxyEditClosePC" onclick="closeHttpRuleEditor();">Close</button>
|
<button class="ui basic fluid button httpProxyEditClosePC" onclick="closeHttpRuleEditor();">Close</button>
|
||||||
</div>
|
</div>
|
||||||
<div class="twelve wide column">
|
<div class="twelve wide column">
|
||||||
<div class="ui segment">
|
<div style="height:100%;">
|
||||||
<!-- Downstream -->
|
<!-- Downstream -->
|
||||||
<div class="rpconfig_content" rpcfg="downstream">
|
<div class="rpconfig_content" rpcfg="downstream">
|
||||||
<h3 class="downstream_primary_hostname">
|
<div class="ui segment">
|
||||||
|
<h3 class="downstream_primary_hostname">
|
||||||
</h3>
|
|
||||||
<div class="downstream_alias_hostname">
|
</h3>
|
||||||
|
<div class="downstream_alias_hostname">
|
||||||
|
|
||||||
</div>
|
|
||||||
<div class="ui divider"></div>
|
|
||||||
<div class="downstream_action_list">
|
|
||||||
<div class="ui checkbox" style="margin-top: 0.4em;">
|
|
||||||
<input type="checkbox" class="BypassGlobalTLS" ${subd.BypassGlobalTLS?"checked":""}>
|
|
||||||
<label>Allow plain HTTP access<br>
|
|
||||||
<small>Allow inbound connections without TLS/SSL</small></label>
|
|
||||||
</div>
|
</div>
|
||||||
<br>
|
<div class="ui divider"></div>
|
||||||
<button class="ui basic compact tiny button editAliasHostnameBtn" style="margin-left: 0.4em; margin-top: 0.4em;"><i class="blue at icon"></i> Alias Hostnames</button>
|
<div class="downstream_action_list">
|
||||||
<button class="ui basic compact tiny button editAccessRuleBtn" style="margin-left: 0.4em; margin-top: 0.4em;"><i class="ui filter icon"></i> Access Rule</button>
|
<div class="ui checkbox" style="margin-top: 0.4em;">
|
||||||
|
<input type="checkbox" class="BypassGlobalTLS" ${subd.BypassGlobalTLS?"checked":""}>
|
||||||
|
<label>Allow plain HTTP access<br>
|
||||||
|
<small>Allow inbound connections without TLS/SSL</small></label>
|
||||||
|
</div>
|
||||||
|
<br>
|
||||||
|
<button class="ui basic compact tiny button editAliasHostnameBtn" style="margin-left: 0.4em; margin-top: 0.4em;"><i class="blue at icon"></i> Alias Hostnames</button>
|
||||||
|
<button class="ui basic compact tiny button editAccessRuleBtn" style="margin-left: 0.4em; margin-top: 0.4em;"><i class="ui filter icon"></i> Access Rule</button>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<!-- Upstream -->
|
<!-- Upstream -->
|
||||||
<div class="rpconfig_content" rpcfg="upstream">
|
<div class="rpconfig_content" rpcfg="upstream">
|
||||||
<div class="upstream_list">
|
<div class="ui segment">
|
||||||
|
<div class="upstream_list">
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
<button class="ui basic compact button editUpstreamButton" style="margin-left: 0.4em; margin-top: 1em;"><i class="grey server icon"></i> Edit Upstreams</button>
|
<button class="ui basic compact button editUpstreamButton" style="margin-left: 0.4em; margin-top: 1em;"><i class="grey server icon"></i> Edit Upstreams</button>
|
||||||
<div class="ui divider"></div>
|
<div class="ui divider"></div>
|
||||||
<div class="ui checkbox" style="margin-top: 0.4em;">
|
<div class="ui checkbox" style="margin-top: 0.4em;">
|
||||||
<input type="checkbox" class="EnableUptimeMonitor">
|
<input type="checkbox" class="EnableUptimeMonitor">
|
||||||
<label>Monitor Uptime<br>
|
<label>Monitor Uptime<br>
|
||||||
<small>Enable active uptime monitor and auto disable upstreams that are offline</small></label>
|
<small>Enable active uptime monitor and auto disable upstreams that are offline</small></label>
|
||||||
</div>
|
</div>
|
||||||
<div class="ui basic advance segment" style="padding: 0.4em !important; border-radius: 0.4em;">
|
<div class="ui basic advance segment" style="padding: 0.4em !important; border-radius: 0.4em;">
|
||||||
<div class="ui endpointAdvanceConfig accordion" style="padding-right: 0.6em;">
|
<div class="ui endpointAdvanceConfig accordion" style="padding-right: 0.6em;">
|
||||||
<div class="title">
|
<div class="title">
|
||||||
<i class="dropdown icon"></i>
|
<i class="dropdown icon"></i>
|
||||||
Advanced Settings
|
Advanced Settings
|
||||||
</div>
|
|
||||||
<div class="content">
|
|
||||||
<div class="ui checkbox" style="margin-top: 0.4em;">
|
|
||||||
<input type="checkbox" class="UseStickySession">
|
|
||||||
<label>Use Sticky Session<br>
|
|
||||||
<small>Enable stick session on load balancing</small></label>
|
|
||||||
</div>
|
</div>
|
||||||
<br>
|
<div class="content">
|
||||||
<div class="ui disabled checkbox" style="margin-top: 0.4em;">
|
<div class="ui checkbox" style="margin-top: 0.4em;">
|
||||||
<input type="checkbox" class="DisableChunkedTransferEncoding">
|
<input type="checkbox" class="UseStickySession">
|
||||||
<label>Disable Chunked Transfer Encoding<br>
|
<label>Use Sticky Session<br>
|
||||||
<small>Enable this option if your upstream uses a legacy HTTP server implementation</small></label>
|
<small>Enable stick session on load balancing</small></label>
|
||||||
|
</div>
|
||||||
|
<br>
|
||||||
|
<div class="ui disabled checkbox" style="margin-top: 0.4em;">
|
||||||
|
<input type="checkbox" class="DisableChunkedTransferEncoding">
|
||||||
|
<label>Disable Chunked Transfer Encoding<br>
|
||||||
|
<small>Enable this option if your upstream uses a legacy HTTP server implementation</small></label>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -241,17 +282,21 @@
|
|||||||
</div>
|
</div>
|
||||||
<!-- Virtual Directories-->
|
<!-- Virtual Directories-->
|
||||||
<div class="rpconfig_content" rpcfg="vdirs">
|
<div class="rpconfig_content" rpcfg="vdirs">
|
||||||
<div class="vdir_list">
|
<div class="ui segment">
|
||||||
|
<div class="vdir_list">
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div class="ui divider"></div>
|
||||||
|
<button class="ui basic tiny button editVdirBtn" style="margin-left: 0.4em; margin-top: 0.4em;">
|
||||||
|
<i class="ui yellow folder icon"></i> Edit Virtual Directories
|
||||||
|
</button>
|
||||||
</div>
|
</div>
|
||||||
<div class="ui divider"></div>
|
|
||||||
<button class="ui basic tiny button editVdirBtn" style="margin-left: 0.4em; margin-top: 0.4em;">
|
|
||||||
<i class="ui yellow folder icon"></i> Edit Virtual Directories
|
|
||||||
</button>
|
|
||||||
</div>
|
</div>
|
||||||
|
<!-- Custom Headers -->
|
||||||
<div class="rpconfig_content" rpcfg="headers">
|
<div class="rpconfig_content" rpcfg="headers">
|
||||||
Headers
|
<iframe src="" class="wrapper_frame">
|
||||||
<button class="ui basic compact tiny button editHeaderBtn" style="margin-left: 0.4em; margin-top: 0.4em;"><i class="heading icon"></i> Custom Headers</button>
|
|
||||||
|
</iframe>
|
||||||
</div>
|
</div>
|
||||||
<!-- Security -->
|
<!-- Security -->
|
||||||
<div class="rpconfig_content" rpcfg="security">
|
<div class="rpconfig_content" rpcfg="security">
|
||||||
@ -303,17 +348,25 @@
|
|||||||
<!-- TLS / SSL -->
|
<!-- TLS / SSL -->
|
||||||
<div class="rpconfig_content" rpcfg="ssl">
|
<div class="rpconfig_content" rpcfg="ssl">
|
||||||
SSL
|
SSL
|
||||||
<button class="ui basic compact small button getCertificateBtn" style="margin-left: 0.4em; margin-top: 0.4em;"><i class="green lock icon"></i> Get Certificate</button>
|
<button class="ui basic small button getCertificateBtn" style="margin-left: 0.4em; margin-top: 0.4em;"><i class="green lock icon"></i> Get Certificate</button>
|
||||||
</div>
|
</div>
|
||||||
<!-- Tags -->
|
<!-- Tags -->
|
||||||
<div class="rpconfig_content" rpcfg="tags">
|
<div class="rpconfig_content" rpcfg="tags">
|
||||||
Tags
|
<iframe src="" class="wrapper_frame">
|
||||||
<button class="ui basic compact small button editTagsBtn" style="margin-left: 0.4em; margin-top: 0.4em;"><i class="ui purple tag icon"></i> Edit tags</button>
|
|
||||||
|
</iframe>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<p><em>Note: All changes will be automatically saved.</em></p>
|
|
||||||
<br><br>
|
|
||||||
<button class="ui basic fluid button httpProxyEditCloseMobile" onclick="closeHttpRuleEditor();">Close</button>
|
<button class="ui basic fluid button httpProxyEditCloseMobile" onclick="closeHttpRuleEditor();">Close</button>
|
||||||
|
<!-- Editor Side Wrapper -->
|
||||||
|
<div class="editor_side_wrapper" style="display:none;">
|
||||||
|
<a class="editor_back_button">
|
||||||
|
<i class="chevron circle left icon" style="margin-top: 22px;"></i>
|
||||||
|
</a>
|
||||||
|
<iframe src="snippet/placeholder.html" class="wrapper_frame">
|
||||||
|
|
||||||
|
</iframe>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -366,6 +419,17 @@
|
|||||||
return vdList;
|
return vdList;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function renderTagList(subd){
|
||||||
|
let tagList = "";
|
||||||
|
if (subd.Tags.length > 0){
|
||||||
|
tagList = subd.Tags.map(tag => `<span class="ui tiny label tag-select" style="background-color: ${getTagColorByName(tag)}; color: ${getTagTextColor(tag)}">${tag}</span>`).join("");
|
||||||
|
}else{
|
||||||
|
tagList = "<small style='opacity: 0.3; pointer-events: none; user-select: none;'>No Tags</small>";
|
||||||
|
tagListEmpty = true;
|
||||||
|
}
|
||||||
|
return tagList;
|
||||||
|
}
|
||||||
|
|
||||||
/* List all proxy endpoints */
|
/* List all proxy endpoints */
|
||||||
function listProxyEndpoints(){
|
function listProxyEndpoints(){
|
||||||
$.get("/api/proxy/list?type=host", function(data){
|
$.get("/api/proxy/list?type=host", function(data){
|
||||||
@ -434,14 +498,8 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
//Build tag list
|
//Build tag list
|
||||||
let tagList = "";
|
let tagList = renderTagList(subd);
|
||||||
let tagListEmpty = false;
|
let tagListEmpty = (subd.Tags.length == 0);
|
||||||
if (subd.Tags.length > 0){
|
|
||||||
tagList = subd.Tags.map(tag => `<span class="ui tiny label tag-select" style="background-color: ${getTagColorByName(tag)}; color: ${getTagTextColor(tag)}">${tag}</span>`).join("");
|
|
||||||
}else{
|
|
||||||
tagList = "<small style='opacity: 0.3; pointer-events: none; user-select: none;'>No Tags</small>";
|
|
||||||
tagListEmpty = true;
|
|
||||||
}
|
|
||||||
|
|
||||||
$("#httpProxyList").append(`<tr eptuuid="${subd.RootOrMatchingDomain}" payload="${subdData}" class="subdEntry">
|
$("#httpProxyList").append(`<tr eptuuid="${subd.RootOrMatchingDomain}" payload="${subdData}" class="subdEntry">
|
||||||
<td class="collapsing ignoremw" datatype="enable">
|
<td class="collapsing ignoremw" datatype="enable">
|
||||||
@ -879,7 +937,7 @@
|
|||||||
ept: "host",
|
ept: "host",
|
||||||
ep: uuid
|
ep: uuid
|
||||||
}));
|
}));
|
||||||
showSideWrapper("snippet/basicAuthEditor.html?t=" + Date.now() + "#" + payload);
|
showEditorSideWrapper("snippet/basicAuthEditor.html?t=" + Date.now() + "#" + payload);
|
||||||
}
|
}
|
||||||
|
|
||||||
function editAccessRule(uuid){
|
function editAccessRule(uuid){
|
||||||
@ -887,7 +945,7 @@
|
|||||||
ept: "host",
|
ept: "host",
|
||||||
ep: uuid
|
ep: uuid
|
||||||
}));
|
}));
|
||||||
showSideWrapper("snippet/hostAccessEditor.html?t=" + Date.now() + "#" + payload);
|
showEditorSideWrapper("snippet/hostAccessEditor.html?t=" + Date.now() + "#" + payload);
|
||||||
}
|
}
|
||||||
|
|
||||||
function editAliasHostnames(uuid){
|
function editAliasHostnames(uuid){
|
||||||
@ -895,7 +953,7 @@
|
|||||||
ept: "host",
|
ept: "host",
|
||||||
ep: uuid
|
ep: uuid
|
||||||
}));
|
}));
|
||||||
showSideWrapper("snippet/aliasEditor.html?t=" + Date.now() + "#" + payload);
|
showEditorSideWrapper("snippet/aliasEditor.html?t=" + Date.now() + "#" + payload);
|
||||||
}
|
}
|
||||||
|
|
||||||
function quickEditVdir(uuid){
|
function quickEditVdir(uuid){
|
||||||
@ -903,22 +961,13 @@
|
|||||||
$("#vdirBaseRoutingRule").parent().dropdown("set selected", uuid);
|
$("#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
|
//Open the load balance option
|
||||||
function editUpstreams(uuid){
|
function editUpstreams(uuid){
|
||||||
let payload = encodeURIComponent(JSON.stringify({
|
let payload = encodeURIComponent(JSON.stringify({
|
||||||
ept: "host",
|
ept: "host",
|
||||||
ep: uuid
|
ep: uuid
|
||||||
}));
|
}));
|
||||||
showSideWrapper("snippet/upstreams.html?t=" + Date.now() + "#" + payload);
|
showEditorSideWrapper("snippet/upstreams.html?t=" + Date.now() + "#" + payload);
|
||||||
}
|
}
|
||||||
|
|
||||||
function handleProxyRuleToggle(object){
|
function handleProxyRuleToggle(object){
|
||||||
@ -1048,10 +1097,10 @@
|
|||||||
ept: "host",
|
ept: "host",
|
||||||
ep: uuid
|
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){
|
function renderTagsPreview(endpoint, tags){
|
||||||
let targetProxyRuleEle = $(".subdEntry[eptuuid='" + endpoint + "'] td[data-label='tags']");
|
let targetProxyRuleEle = $(".subdEntry[eptuuid='" + endpoint + "'] td[data-label='tags']");
|
||||||
//Update the tag DOM
|
//Update the tag DOM
|
||||||
@ -1062,9 +1111,8 @@
|
|||||||
$(targetProxyRuleEle).attr("payload", encodeURIComponent(JSON.stringify(tags)));
|
$(targetProxyRuleEle).attr("payload", encodeURIComponent(JSON.stringify(tags)));
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
function getTagsArrayFromEndpoint(endpoint){
|
function getTagsArrayFromEndpoint(endpoint){
|
||||||
console.log("wip");
|
|
||||||
return [];
|
|
||||||
let targetProxyRuleEle = $(".subdEntry[eptuuid='" + endpoint + "'] td[data-label='tags']");
|
let targetProxyRuleEle = $(".subdEntry[eptuuid='" + endpoint + "'] td[data-label='tags']");
|
||||||
let tags = $(targetProxyRuleEle).attr("payload");
|
let tags = $(targetProxyRuleEle).attr("payload");
|
||||||
return JSON.parse(decodeURIComponent(tags));
|
return JSON.parse(decodeURIComponent(tags));
|
||||||
@ -1076,8 +1124,12 @@
|
|||||||
});
|
});
|
||||||
|
|
||||||
function closeHttpRuleEditor(){
|
function closeHttpRuleEditor(){
|
||||||
$("#httprpEditModalWrapper").hide();
|
$(".ui.toggle.tiny.fitted.checkbox").css("z-index", 0);
|
||||||
exitProxyInlineEdit();
|
$("#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
|
//Get the current editing http hostname, return null if errors
|
||||||
@ -1093,7 +1145,7 @@
|
|||||||
//Initialize the http proxy rule editor
|
//Initialize the http proxy rule editor
|
||||||
function initHttpProxyRuleEditorModal(rulepayload){
|
function initHttpProxyRuleEditorModal(rulepayload){
|
||||||
let subd = JSON.parse(JSON.stringify(rulepayload));
|
let subd = JSON.parse(JSON.stringify(rulepayload));
|
||||||
|
|
||||||
//Populate all the information in the proxy editor
|
//Populate all the information in the proxy editor
|
||||||
populateAndBindEventsToHTTPProxyEditor(subd);
|
populateAndBindEventsToHTTPProxyEditor(subd);
|
||||||
|
|
||||||
@ -1102,7 +1154,13 @@
|
|||||||
$("#httprpEditModal .rpconfig_content[rpcfg='downstream']").show();
|
$("#httprpEditModal .rpconfig_content[rpcfg='downstream']").show();
|
||||||
$("#httprpEditModal .hrpedit_menu_item.active").removeClass("active");
|
$("#httprpEditModal .hrpedit_menu_item.active").removeClass("active");
|
||||||
$("#httprpEditModal .hrpedit_menu_item[cfgpage='downstream']").addClass("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
|
// This function populate the bind all the events required for the proxy editor
|
||||||
@ -1195,9 +1253,14 @@
|
|||||||
});
|
});
|
||||||
|
|
||||||
/* Headers */
|
/* 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 ------------ */
|
/* ------------ Security ------------ */
|
||||||
|
|
||||||
@ -1242,9 +1305,14 @@
|
|||||||
/* ------------ TLS ------------ */
|
/* ------------ TLS ------------ */
|
||||||
|
|
||||||
/* ------------ Tags ------------ */
|
/* ------------ 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);
|
console.log(subd);
|
||||||
}
|
}
|
||||||
@ -1273,8 +1341,30 @@
|
|||||||
let cfgPageId = $(this).attr("cfgpage");
|
let cfgPageId = $(this).attr("cfgpage");
|
||||||
$("#httprpEditModal .rpconfig_content").hide();
|
$("#httprpEditModal .rpconfig_content").hide();
|
||||||
$(`#httprpEditModal .rpconfig_content[rpcfg='${cfgPageId}']`).show();
|
$(`#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
|
// Initialize the proxy list on page load
|
||||||
$(document).ready(function() {
|
$(document).ready(function() {
|
||||||
listProxyEndpoints();
|
listProxyEndpoints();
|
||||||
|
|||||||
@ -334,6 +334,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
function toggleTheme(){
|
function toggleTheme(){
|
||||||
|
let editorSideWrapper = $("#httprpEditModal .wrapper_frame");
|
||||||
if ($("body").hasClass("darkTheme")){
|
if ($("body").hasClass("darkTheme")){
|
||||||
setDarkTheme(false);
|
setDarkTheme(false);
|
||||||
//Check if the snippet iframe is opened. If yes, set the dark theme to the iframe
|
//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);
|
$(".sideWrapper iframe")[0].contentWindow.setDarkTheme(false);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
if (editorSideWrapper.is(":visible")){
|
||||||
|
editorSideWrapper[0].contentWindow.setDarkTheme(false);
|
||||||
|
}
|
||||||
|
|
||||||
if ($("#pluginContextLoader").is(":visible")){
|
if ($("#pluginContextLoader").is(":visible")){
|
||||||
$("#pluginContextLoader")[0].contentWindow.setDarkTheme(false);
|
$("#pluginContextLoader")[0].contentWindow.setDarkTheme(false);
|
||||||
}
|
}
|
||||||
@ -350,6 +355,9 @@
|
|||||||
if ($(".sideWrapper").is(":visible")){
|
if ($(".sideWrapper").is(":visible")){
|
||||||
$(".sideWrapper iframe")[0].contentWindow.setDarkTheme(true);
|
$(".sideWrapper iframe")[0].contentWindow.setDarkTheme(true);
|
||||||
}
|
}
|
||||||
|
if (editorSideWrapper.is(":visible")){
|
||||||
|
editorSideWrapper[0].contentWindow.setDarkTheme(true);
|
||||||
|
}
|
||||||
if ($("#pluginContextLoader").is(":visible")){
|
if ($("#pluginContextLoader").is(":visible")){
|
||||||
$("#pluginContextLoader")[0].contentWindow.setDarkTheme(true);
|
$("#pluginContextLoader")[0].contentWindow.setDarkTheme(true);
|
||||||
}
|
}
|
||||||
@ -515,6 +523,12 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
function hideSideWrapper(discardFrameContent = false){
|
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){
|
if (discardFrameContent){
|
||||||
$(".sideWrapper iframe").attr("src", "snippet/placeholder.html");
|
$(".sideWrapper iframe").attr("src", "snippet/placeholder.html");
|
||||||
}
|
}
|
||||||
|
|||||||
@ -34,13 +34,6 @@
|
|||||||
<script src="../script/darktheme.js"></script>
|
<script src="../script/darktheme.js"></script>
|
||||||
<br>
|
<br>
|
||||||
<div class="ui container">
|
<div class="ui container">
|
||||||
<div class="ui header">
|
|
||||||
<div class="content">
|
|
||||||
Custom Headers
|
|
||||||
<div class="sub header" id="epname"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="ui divider"></div>
|
|
||||||
<div class="ui small pointing secondary menu">
|
<div class="ui small pointing secondary menu">
|
||||||
<a class="item active narrowpadding" data-tab="customheaders">Custom Headers</a>
|
<a class="item active narrowpadding" data-tab="customheaders">Custom Headers</a>
|
||||||
<a class="item narrowpadding" data-tab="security">Security Headers</a>
|
<a class="item narrowpadding" data-tab="security">Security Headers</a>
|
||||||
@ -171,10 +164,6 @@
|
|||||||
<br><br>
|
<br><br>
|
||||||
<button class="ui basic button" onclick="savePermissionPolicy();"><i class="green save icon"></i> Save</button>
|
<button class="ui basic button" onclick="savePermissionPolicy();"><i class="green save icon"></i> Save</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="field" >
|
|
||||||
<button class="ui basic button" style="float: right;" onclick="closeThisWrapper();">Close</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<br><br><br><br>
|
<br><br><br><br>
|
||||||
@ -189,7 +178,7 @@
|
|||||||
let payloadHash = window.location.hash.substr(1);
|
let payloadHash = window.location.hash.substr(1);
|
||||||
try{
|
try{
|
||||||
payloadHash = JSON.parse(decodeURIComponent(payloadHash));
|
payloadHash = JSON.parse(decodeURIComponent(payloadHash));
|
||||||
$("#epname").text(payloadHash.ep);
|
//$("#epname").text(payloadHash.ep);
|
||||||
editingEndpoint = payloadHash;
|
editingEndpoint = payloadHash;
|
||||||
}catch(ex){
|
}catch(ex){
|
||||||
console.log("Unable to load endpoint data from hash")
|
console.log("Unable to load endpoint data from hash")
|
||||||
|
|||||||
@ -67,8 +67,10 @@
|
|||||||
<div class="ui container">
|
<div class="ui container">
|
||||||
<div class="ui header">
|
<div class="ui header">
|
||||||
<div class="content">
|
<div class="content">
|
||||||
Host Access Settings
|
<div class="content">
|
||||||
<div class="sub header" id="epname"></div>
|
Host Access Settings
|
||||||
|
<div class="sub header" id="epname"></div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="ui divider"></div>
|
<div class="ui divider"></div>
|
||||||
|
|||||||
@ -21,13 +21,6 @@
|
|||||||
<script src="../script/darktheme.js"></script>
|
<script src="../script/darktheme.js"></script>
|
||||||
<br>
|
<br>
|
||||||
<div class="ui container">
|
<div class="ui container">
|
||||||
<div class="ui header">
|
|
||||||
<div class="content">
|
|
||||||
Edit Tags
|
|
||||||
<div class="sub header" id="epname"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="ui divider"></div>
|
|
||||||
<p>Tags currently applied to this host name / proxy rule</p>
|
<p>Tags currently applied to this host name / proxy rule</p>
|
||||||
<div style="max-height: 300px; overflow-y: scroll;">
|
<div style="max-height: 300px; overflow-y: scroll;">
|
||||||
<table class="ui compact basic unstackable celled table">
|
<table class="ui compact basic unstackable celled table">
|
||||||
@ -68,9 +61,7 @@
|
|||||||
</div>
|
</div>
|
||||||
<button class="ui basic button" onclick="joinSelectedTagGroups();"><i class="ui blue plus icon"></i> Join tag group(s)</button>
|
<button class="ui basic button" onclick="joinSelectedTagGroups();"><i class="ui blue plus icon"></i> Join tag group(s)</button>
|
||||||
</div>
|
</div>
|
||||||
<div class="ui divider"></div>
|
<br><br>
|
||||||
<!-- <button class="ui basic button" onclick="saveTags();"><i class="ui green save icon"></i> Save Changes</button> -->
|
|
||||||
<button class="ui basic button" style="float: right;" onclick="parent.hideSideWrapper();"><i class="remove icon"></i> Close</button>
|
|
||||||
</div>
|
</div>
|
||||||
<script>
|
<script>
|
||||||
let editingEndpoint = {};
|
let editingEndpoint = {};
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user