Flattened HTTP proxy rule edit menu

This commit is contained in:
Toby Chui
2025-06-10 22:04:04 +08:00
parent c7b5e0994e
commit 809e1fa815
7 changed files with 194 additions and 124 deletions

View File

@@ -264,7 +264,6 @@
}
}
document.getElementById('accessRuleSelector').addEventListener('change', handleSelectEditingAccessRule);
document.getElementById('accessRuleForm').addEventListener('submit', handleCreateNewAccessRule);

View File

@@ -14,13 +14,14 @@
<script src="../script/darktheme.js"></script>
<br>
<div class="ui container">
<!--
<div class="ui header">
<div class="content">
Alias Hostname
<div class="sub header epname"></div>
</div>
</div>
<div class="ui divider"></div>
<div class="ui divider"></div>-->
<div class="scrolling content ui form">
<div id="inlineEditBasicAuthCredentials" class="field">
<p>Enter alias hostname or wildcard matching keywords for <code class="epname"></code></p>
@@ -50,10 +51,6 @@
</div>
</div>
</div>
<div class="ui divider"></div>
<div class="field" >
<button class="ui basic button" style="float: right;" onclick="closeThisWrapper();">Close</button>
</div>
</div>
<br><br><br><br>

View File

@@ -27,6 +27,11 @@
body.darkTheme #permissionPolicyEditor .experimental{
background-color: rgb(41, 41, 41);
}
.advanceoptions{
background: var(--theme_advance) !important;
border-radius: 0.4em !important;
}
</style>
</head>
<body>

View File

@@ -35,7 +35,7 @@
#accessRuleList{
padding: 0.6em;
border: 1px solid rgb(228, 228, 228);
/* border: 1px solid rgb(228, 228, 228); */
border-radius: 0.4em !important;
max-height: calc(100vh - 15em);
min-height: 300px;
@@ -65,15 +65,6 @@
<script src="../script/darktheme.js"></script>
<br>
<div class="ui container">
<div class="ui header">
<div class="content">
<div class="content">
Host Access Settings
<div class="sub header" id="epname"></div>
</div>
</div>
</div>
<div class="ui divider"></div>
<p>Select an access rule to apply blacklist / whitelist filtering</p>
<div id="accessRuleList">
<div class="ui segment accessRule">
@@ -87,9 +78,7 @@
</div>
</div>
<br>
<button class="ui basic button" onclick="applyChangeAndClose()"><i class="ui green check icon"></i> Apply Change</button>
<button class="ui basic button" style="float: right;" onclick="parent.hideSideWrapper();"><i class="remove icon"></i> Close</button>
<!-- <button class="ui basic button" onclick="applyChange()"><i class="ui green check icon"></i> Apply Change</button> -->
<br><br><br>
</div>
@@ -176,6 +165,35 @@
let accessRuleID = $(accessRuleObject).attr("ruleid");
$(".accessRule").removeClass('active');
$(accessRuleObject).addClass('active');
//Updates 2025-06-10: Added auto save on change feature
applyChange();
}
function applyChange(){
let newAccessRuleID = $(".accessRule.active").attr("ruleid");
let targetEndpoint = editingEndpoint.ep;
$.cjax({
url: "/api/access/attach",
method: "POST",
data: {
id: newAccessRuleID,
host: targetEndpoint
},
success: function(data){
if (data.error != undefined){
parent.msgbox(data.error, false);
}else{
parent.msgbox("Access Rule Updated");
//Modify the parent list if exists
if (parent != undefined && parent.updateAccessRuleNameUnderHost){
parent.updateAccessRuleNameUnderHost(targetEndpoint, newAccessRuleID);
}
}
}
});
}
function applyChangeAndClose(){

View File

@@ -75,13 +75,6 @@
<script src="../script/darktheme.js"></script>
<br>
<div class="ui container">
<div class="ui header">
<div class="content">
Upstreams / Load Balance
<div class="sub header epname"></div>
</div>
</div>
<div class="ui divider"></div>
<div class="ui small pointing secondary menu">
<a class="item active narrowpadding" data-tab="upstreamlist">Upstreams</a>
<a class="item narrowpadding" data-tab="newupstream">Add Upstream</a>
@@ -159,10 +152,6 @@
<br><br>
<button class="ui basic button" onclick="addNewUpstream();"><i class="ui green circle add icon"></i> Create</button>
</div>
<div class="ui divider"></div>
<div class="field" >
<button class="ui basic button" style="float: right;" onclick="closeThisWrapper();">Close</button>
</div>
</div>
<br><br><br><br>