marcel/zoraxy
1
0
Fork 0
mirror of https://github.com/tobychui/zoraxy.git synced 2025-06-26 17:31:45 +02:00
Code Issues Packages Projects Releases Wiki Activity

Added plugin context view

Browse Source 
- Added plugin context view
- Moved plugin type definition to separate file
- Added wip request forwarder
This commit is contained in:
Toby Chui
2025-02-28 22:05:14 +08:00
parent 214b69b0b8
commit 5abc4ac606
9 changed files with 229 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/web/components/gan.html
View File

@ -3,6 +3,10 @@
<h2>Global Area Network</h2>
<p>Virtual Network Hub that allows all networked devices to communicate as if they all reside in the same physical data center or cloud region</p>
</div>
<div class="ui yellow message">
<b>Deprecation Notice</b>
<p>Global Area Network will be deprecating in v3.2.x and moved to Plugin</p>
</div>
<div class="gansnetworks">
<div class="ganstats ui basic segment">
<div style="float: right; max-width: 300px; margin-top: 0.4em;">

52
src/web/components/plugincontext.html Normal file
View File

@ -0,0 +1,52 @@
<div class="">
<iframe id="pluginContextLoader" src="" style="width: 100%; border: none;">
</iframe>
</div>
<script>
function initPluginUIView(){
let pluginID = getPluginIDFromWindowHash();
console.log("Launching plugin UI for plugin with ID:", pluginID);
loadPluginContext(pluginID);
}
function loadPluginContext(pluginID){
let pluginContextURL = `/plugin.ui/${pluginID}/`;
$("#pluginContextLoader").attr("src", pluginContextURL);
}
function getPluginIDFromWindowHash(){
let tabID = window.location.hash.substr(1);
let pluginID = "";
if (tabID.startsWith("{")) {
tabID = decodeURIComponent(tabID);
try {
let parsedData = JSON.parse(tabID);
if (typeof(parsedData.pluginID) != "undefined"){
pluginID = parsedData.pluginID;
}
} catch (e) {
console.error("Invalid JSON data:", e);
}
}
return pluginID;
}
function resizeIframe() {
let iframe = document.getElementById('pluginContextLoader');
let mainMenuHeight = document.getElementById('mainmenu').offsetHeight;
iframe.style.height = mainMenuHeight + 'px';
}
$(window).on("resize", function(){
resizeIframe();
});
//Bind event to tab switch
tabSwitchEventBind["pluginContextWindow"] = function(){
//On switch over to this page, load info
resizeIframe();
}
initPluginUIView();
</script>

34
src/web/components/plugins.html
View File

@ -1,7 +1,11 @@
<div class="standardContainer">
<div class="ui basic segment">
<h2>Plugins</h2>
<p>Custom features on Zoraxy</p>
<p>Add custom features to your Zoraxy!</p>
</div>
<div class="ui yellow message">
<div class="header">Experimental Feature</div>
<p>This feature is experimental and may not work as expected. Use with caution.</p>
</div>
<table class="ui basic celled table">
<thead>
@ -19,6 +23,29 @@
<script>
function initPluginSideMenu(){
$("#pluginMenu").html("");
$.get(`/api/plugins/list`, function(data){
data.forEach(plugin => {
$("#pluginMenu").append(`
<a class="item" tag="pluginContextWindow" pluginid="${plugin.Spec.id}" onclick="loadPluginUIContextIfAvailable();">
<img style="width: 20px;" class="ui mini right spaced image" src="/api/plugins/icon?plugin_id=${plugin.Spec.id}"> ${plugin.Spec.name}
</a>
`);
});
});
}
initPluginSideMenu();
function loadPluginUIContextIfAvailable(){
if(typeof(initPluginUIView) != "undefined"){
initPluginUIView();
}
}
function initiatePluginList(){
$.get(`/api/plugins/list`, function(data){
const tbody = $("#pluginTable");
@ -49,7 +76,6 @@ function initiatePluginList(){
<div class="ui toggle checkbox">
<input type="checkbox" name="enable" ${plugin.Enabled ? 'checked' : ''}>
</div>
<button class="ui basic small circular icon button" onclick="openPluginUI('${plugin.Spec.id}');"><i class="ui edit icon"></i></button>
</td>
</tr>
`;
@ -59,10 +85,6 @@ function initiatePluginList(){
});
}
function openPluginUI(pluginid){
showSideWrapper(`/plugin.ui/${pluginid}/`, true);
}
initiatePluginList();
</script>

71
src/web/index.html
View File

@ -78,9 +78,6 @@
<i class="simplistic user circle icon"></i> SSO / Oauth
</a>
<div class="ui divider menudivider">Others</div>
<a class="item" tag="plugins">
<i class="simplistic puzzle piece icon"></i> Plugins
</a>
<a class="item" tag="webserv">
<i class="simplistic globe icon"></i> Static Web Server
</a>
@ -96,6 +93,15 @@
<a class="item" tag="utils">
<i class="simplistic paperclip icon"></i> Utilities
</a>
<a class="item" tag="plugins">
<i class="simplistic puzzle piece icon"></i> Plugins Manager
</a>
<div class="ui divider menudivider">Plugins</div>
<cx id="pluginMenu"></container>
<a class="item" style="pointer-events: none; user-select: none; opacity: 0.6;">
<i class="green circle check icon"></i> No Installed Plugins
</a>
</cx>
<!-- Add more components here -->
</div>
</div>
@ -155,6 +161,12 @@
<!-- Utilities -->
<div id="utils" class="functiontab" target="utils.html"></div>
<!-- Plugin Context Menu -->
<div id="pluginContextWindow" class="functiontab" target="plugincontext.html"></div>
</div>
</div>
</div>
</div>
@ -246,7 +258,26 @@
if (window.location.hash.length > 1){
let tabID = window.location.hash.substr(1);
openTabById(tabID);
if (tabID.startsWith("{")) {
tabID = decodeURIComponent(tabID);
//Zoraxy v3.2.x plugin context window
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();
}
} catch (e) {
console.error("Invalid JSON data:", e);
}
}else{
openTabById(tabID);
}
}else{
openTabById("status");
}
@ -257,7 +288,7 @@
$("#mainmenu").find(".item").each(function(){
$(this).on("click", function(event){
let tabid = $(this).attr("tag");
openTabById(tabid);
openTabById(tabid, $(this));
});
});
@ -282,13 +313,19 @@
if ($(".sideWrapper").is(":visible")){
$(".sideWrapper iframe")[0].contentWindow.setDarkTheme(false);
}
if ($("#pluginContextLoader").is(":visible")){
$("#pluginContextLoader")[0].contentWindow.setDarkTheme(false);
}
}else{
setDarkTheme(true);
//Check if the snippet iframe is opened. If yes, set the dark theme to the iframe
if ($(".sideWrapper").is(":visible")){
$(".sideWrapper iframe")[0].contentWindow.setDarkTheme(true);
}
if ($("#pluginContextLoader").is(":visible")){
$("#pluginContextLoader")[0].contentWindow.setDarkTheme(true);
}
}
}
@ -307,8 +344,12 @@
//Select and open a tab by its tag id
let tabSwitchEventBind = {}; //Bind event to tab switch by tabid
function openTabById(tabID){
let targetBtn = getTabButtonById(tabID);
function openTabById(tabID, object=undefined){
let targetBtn = object;
if (object == undefined){
//Search tab by its tap id
targetBtn = getTabButtonById(tabID);
}
if (targetBtn == undefined){
alert("Invalid tabid given");
return;
@ -329,7 +370,19 @@
},100)
});
$('html,body').animate({scrollTop: 0}, 'fast');
window.location.hash = tabID;
if (tabID == "pluginContextWindow"){
let statePayload = {
tabID: tabID,
pluginID: $(targetBtn).attr("pluginid")
}
window.location.hash = JSON.stringify(statePayload);
loadPluginUIContextIfAvailable();
}else{
window.location.hash = tabID;
}
}
$(window).on("resize", function(){