Skip to content

Panel Redesign, scrollbar fix #610

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Panel Redesign, scrollbar fix #610

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 4 additions & 1 deletion src/main/resources/static/css/main.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -164,6 +164,9 @@ form .progress {
animation: fadein 0.3s ease, fadeout 0.3s ease 2.5s; /* Show for 2.5 seconds */
}

[id*="code-embed"] {
overflow-y: hidden !important; /* Completely removes vertical scroll */
}

.bare-window {
padding:0;
Expand Down Expand Up @@ -424,7 +427,7 @@ form .progress {
background-color: #cbd5e0;
cursor: ew-resize;
height: 100%;
width: 2px;
width: 8px !important;
}

.fullscreen {
Expand Down
164 changes: 113 additions & 51 deletions src/main/resources/static/js/gw.host.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -165,6 +165,12 @@ GW.host = {
content,
"Host Password",
);
//automatic focus to input password
setTimeout(() => {
requestAnimationFrame(() => {
document.getElementById("inputpswd")?.focus();
});
}, 100);

$("#inputpswd").on("keypress", function (e) {
if (e.which == 13) {
Expand Down Expand Up @@ -1074,18 +1080,37 @@ GW.host = {
if (GW.host.checkIfHostPanelActive()) {
console.log("Turn on/off the fields");

$(".host-value-field").prop("disabled", GW.process.editOn);
$(".host-value-field").prop("disabled", false);

GW.process.editOn = !GW.process.editOn;
// Remove any existing Save Changes button to prevent duplicates
$("#save-changes-btn").remove();
// Add "Save Changes" button dynamically
$("#edit-tab").append(`
<button id="save-changes-btn" type="button" class="btn btn-success" onclick="GW.host.saveChanges()" style="margin-top: 10px;">Save Changes</button>
`);

if (!GW.process.editOn) {
console.log("Save the changes if any");

this.edit();
}
// Set edit mode to true
GW.process.editOn = true;
}
},

saveChanges: function () {
console.log("Saving the changes if any");

// Disable input fields after saving
$(".host-value-field").prop("disabled", true);

// Call the edit function to update the host details
GW.host.edit(); // Saves the changes

// Remove the "Save Changes" button after saving
$("#save-changes-btn").remove();

// Reset the edit mode
GW.process.editOn = false;

console.log("Changes saved successfully!");
},
openJupyter: function (hostid) {
window.open("/Geoweaver/jupyter-proxy/" + hostid + "/", "_blank");
},
Expand All @@ -1095,52 +1120,89 @@ GW.host = {
},

getToolbar: function (hostid, hosttype) {
var content =
'<i class="fa fa-edit subalignicon" onclick="GW.host.editSwitch()" data-toggle="tooltip" title="Edit"></i>';

if (hosttype == "ssh" || hosttype == null || hosttype == "null") {
// "<i class=\"fas fa-external-link-alt subalignicon\" onclick=\"GW.host.openssh('"+
return `
<div class="tab-container" style="width: 100%; display: flex; flex-direction: column; align-items: center; margin-bottom: 10px;">
<!-- Tabs Navigation -->
<ul class="tab-list" style="display: flex; list-style-type: none; padding: 0; margin: 0; border-bottom: 2px solid #ccc; width: 100%; justify-content: space-evenly; background: #f9f9f9;">
<li class="tab-item active" onclick="GW.host.switchTab(event, 'edit-tab', 'GW.host.editSwitch()')" style="padding: 10px 20px; cursor: pointer; border: 1px solid #ccc; border-bottom: none; background: #f1f1f1; flex-grow: 1; text-align: center;">Edit</li>
${hosttype === "ssh" || hosttype === "null" || hosttype === null ? `
<li class="tab-item" onclick="GW.host.switchTab(event, 'python-env-tab', 'GW.host.readEnvironment(${hostid})')" style="padding: 10px 20px; cursor: pointer; border: 1px solid #ccc; border-bottom: none; background: #f1f1f1; flex-grow: 1; text-align: center;">Python Env</li>
<li class="tab-item" onclick="GW.host.switchTab(event, 'upload-tab', 'GW.fileupload.uploadfile(${hostid})')" style="padding: 10px 20px; cursor: pointer; border: 1px solid #ccc; border-bottom: none; background: #f1f1f1; flex-grow: 1; text-align: center;">Upload</li>
<li class="tab-item" onclick="GW.host.switchTab(event, 'browse-tab', 'GW.filebrowser.start(${hostid})')" style="padding: 10px 20px; cursor: pointer; border: 1px solid #ccc; border-bottom: none; background: #f1f1f1; flex-grow: 1; text-align: center;">Browse</li>
` : ""}
${hosttype === "jupyter" || hosttype === "jupyterhub" || hosttype === "jupyterlab" ? `
<li class="tab-item" onclick="GW.host.switchTab(event, 'history-tab', 'GW.host.recent(${hostid})')" style="padding: 10px 20px; cursor: pointer; border: 1px solid #ccc; border-bottom: none; background: #f1f1f1; flex-grow: 1; text-align: center;">History</li>
<li class="tab-item" onclick="GW.host.switchTab(event, 'jupyter-tab', 'GW.host.openJupyter(${hostid})')" style="padding: 10px 20px; cursor: pointer; border: 1px solid #ccc; border-bottom: none; background: #f1f1f1; flex-grow: 1; text-align: center;">Open Jupyter</li>
` : ""}
${hosttype === "gee" ? `
<li class="tab-item" onclick="GW.host.switchTab(event, 'history-tab', 'GW.host.recent(${hostid})')" style="padding: 10px 20px; cursor: pointer; border: 1px solid #ccc; border-bottom: none; background: #f1f1f1; flex-grow: 1; text-align: center;">History</li>
<li class="tab-item" onclick="GW.host.switchTab(event, 'google-earth-tab', 'GW.host.openGoogleEarth(${hostid})')" style="padding: 10px 20px; cursor: pointer; border: 1px solid #ccc; border-bottom: none; background: #f1f1f1; flex-grow: 1; text-align: center;">Google Earth</li>
` : ""}
</ul>
<!-- Tabs Content -->
<div class="tab-content" style="display: flex; flex-direction: column; align-items: center; width: 100%; padding: 15px; background: #fff;">
<div id="edit-tab" class="tab-pane active" style="display: block; width: 100%; text-align: center;"></div>
<div id="python-env-tab" class="tab-pane" style="display: none; width: 100%; text-align: center;"></div>
<div id="upload-tab" class="tab-pane" style="display: none; width: 100%; text-align: center;"></div>
<div id="browse-tab" class="tab-pane" style="display: none; width: 100%; text-align: center;"></div>
<div id="history-tab" class="tab-pane" style="display: none; width: 100%; text-align: center;"></div>
<div id="jupyter-tab" class="tab-pane" style="display: none; width: 100%; text-align: center;"></div>
<div id="google-earth-tab" class="tab-pane" style="display: none; width: 100%; text-align: center;"></div>
</div>
</div>
`;
},
switchTab: function (event, tabId, action) {
let tabItems = document.querySelectorAll(".tab-item");
let tabPanes = document.querySelectorAll(".tab-pane");

// Remove active state from all tabs
tabItems.forEach(tab => tab.classList.remove("active"));

// Hide all tab panes and remove previous content
tabPanes.forEach(pane => {
pane.style.display = "none";
pane.innerHTML = ""; // Clear previous tab content
});

// Activate the clicked tab
event.currentTarget.classList.add("active");

// Show the selected tab
let activePane = document.getElementById(tabId);
activePane.style.display = "block";

// If there's an action, execute it
if (action) {
setTimeout(() => {
eval(action); // Execute the function dynamically
}, 100);
}

// Close any existing modals/popups to ensure a clean switch
if (GW.host.ssh_password_frame) {
try {
GW.host.ssh_password_frame.closeFrame();
GW.host.ssh_password_frame = null;
} catch (e) {
console.error("Error closing SSH password popup:", e);

// hostid + "')\" data-toggle=\"tooltip\" title=\"Connect SSH\"></i>"+ //this is a problematic function

// "<i class=\"fa fa-line-chart subalignicon\" onclick=\"GW.host.recent('"+
//
// hostid + "')\" data-toggle=\"tooltip\" title=\"History\"></i>"+

content +=
'<i class="fab fa-python subalignicon" onclick="GW.host.readEnvironment(\'' +
hostid +
'\')" data-toggle="tooltip" title="Read Python Environment"></i>' +
'<i class="fa fa-upload subalignicon" onclick="GW.fileupload.uploadfile(\'' +
hostid +
'\')" data-toggle="tooltip" title="Upload File"></i>' +
' <i class="fa fa-sitemap subalignicon" onclick="GW.filebrowser.start(\'' +
hostid +
'\')" data-toggle="tooltip" title="Browser File Hierarchy"></i>';
} else if (
hosttype == "jupyter" ||
hosttype == "jupyterhub" ||
hosttype == "jupyterlab"
) {
content +=
'<i class="fas fa-chart-line subalignicon" onclick="GW.host.recent(\'' +
hostid +
'\')" data-toggle="tooltip" title="History"></i>' +
'<i class="fas fa-external-link-alt subalignicon" onclick="GW.host.openJupyter(\'' +
hostid +
'\')" data-toggle="tooltip" title="Open Jupyter"></i>';
} else if (hosttype == "gee") {
content +=
'<i class="fa fa-line-chart subalignicon" onclick="GW.host.recent(\'' +
hostid +
'\')" data-toggle="tooltip" title="History"></i>' +
'<i class="fas fa-external-link-alt subalignicon" onclick="GW.host.openGoogleEarth(\'' +
hostid +
'\')" data-toggle="tooltip" title="Open Google Earth"></i>';
}

return content;
},
}
if (GW.host.password_frame) {
try {
GW.host.password_frame.closeFrame();
GW.host.password_frame = null;
} catch (e) {
console.error("Error closing password popup:", e);
}
}
// Remove environment list or other content if it exists
document.getElementById("environment-iframe").innerHTML = "";
document.getElementById("host-file-uploader").innerHTML = "";
document.getElementById("host-file-browser").innerHTML = "";
},


showEnvironmentTable: function (msg) {
var content =
Expand Down
Loading