Cyber/peartainer
1
0
Fork 0
forked from snxraven/peardock
Code Pull Requests Activity

make the terminal resize by drag

Browse Source
This commit is contained in:
Raven Scott 2024-11-29 20:00:29 -05:00
parent 4f31d0657c
commit b0a1446ce0
2 changed files with 92 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

67
index.html
View File

@ -1,17 +1,18 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<title>Docker P2P Manager</title> <title>Docker P2P Manager</title>
<!-- Bootstrap CSS --> <!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" rel="stylesheet"> <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" rel="stylesheet">
<!-- xterm.css for Terminal --> <!-- xterm.css for Terminal -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/xterm/css/xterm.css"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/xterm/css/xterm.css">
<style> <style>
body { body {
margin: 0; margin: 0;
@ -21,6 +22,7 @@
color: white; color: white;
overflow: hidden; overflow: hidden;
} }
#titlebar { #titlebar {
-webkit-app-region: drag; -webkit-app-region: drag;
height: 30px; height: 30px;
@ -30,11 +32,13 @@
background-color: #2c2c2c; background-color: #2c2c2c;
z-index: 1000; z-index: 1000;
} }
pear-ctrl[data-platform="darwin"] {
float: left; pear-ctrl[data-platform="darwin"] {
margin-top: 5px; float: left;
margin-top: 5px;
margin-left: 10px; margin-left: 10px;
} }
#sidebar { #sidebar {
position: fixed; position: fixed;
top: 30px; top: 30px;
@ -45,12 +49,15 @@
overflow-y: auto; overflow-y: auto;
transition: width 0.3s ease-in-out; transition: width 0.3s ease-in-out;
} }
#sidebar.collapsed { #sidebar.collapsed {
width: 50px; width: 50px;
} }
#sidebar.collapsed .content { #sidebar.collapsed .content {
display: none; display: none;
} }
#collapse-sidebar-btn { #collapse-sidebar-btn {
position: absolute; position: absolute;
top: 10px; top: 10px;
@ -66,6 +73,7 @@
text-align: center; text-align: center;
cursor: pointer; cursor: pointer;
} }
#content { #content {
margin-left: 250px; margin-left: 250px;
flex: 1; flex: 1;
@ -73,9 +81,11 @@
overflow-y: auto; overflow-y: auto;
transition: margin-left 0.3s ease-in-out; transition: margin-left 0.3s ease-in-out;
} }
#sidebar.collapsed ~ #content {
#sidebar.collapsed~#content {
margin-left: 50px; margin-left: 50px;
} }
.connection-status { .connection-status {
border-radius: 50%; border-radius: 50%;
width: 10px; width: 10px;
@ -83,38 +93,57 @@
display: inline-block; display: inline-block;
margin-right: 8px; margin-right: 8px;
} }
.status-connected { .status-connected {
background-color: green; background-color: green;
} }
.status-disconnected { .status-disconnected {
background-color: red; background-color: red;
} }
#terminal-modal { #terminal-modal {
position: fixed; position: fixed;
bottom: 0; bottom: 0;
left: 0; left: 0;
width: 100%; width: 100%;
max-height: 400px; max-height: 90vh;
height: 300px; height: 300px;
background-color: #1a1a1a; background-color: #1a1a1a;
border-top: 2px solid #444; border-top: 2px solid #444;
display: none; display: none;
flex-direction: column; flex-direction: column;
z-index: 1000; z-index: 1000;
overflow: hidden;
} }
#terminal-modal .header { #terminal-modal .header {
background-color: #444; background-color: #444;
cursor: move;
/* Change cursor to indicate drag is possible */
padding: 10px; padding: 10px;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
} }
#terminal-resize-handle {
width: 100%;
height: 10px;
cursor: ns-resize;
background-color: #444;
position: absolute;
bottom: 0;
left: 0;
}
#terminal-container { #terminal-container {
flex: 1; flex: 1;
overflow: hidden; overflow: hidden;
background-color: black; background-color: black;
color: white; color: white;
} }
#tray { #tray {
position: fixed; position: fixed;
bottom: 0; bottom: 0;
@ -128,6 +157,7 @@
white-space: nowrap; white-space: nowrap;
z-index: 999; z-index: 999;
} }
#tray .tray-item { #tray .tray-item {
background-color: #555; background-color: #555;
color: white; color: white;
@ -136,25 +166,26 @@
cursor: pointer; cursor: pointer;
} }
</style> </style>
</head> </head>
<body> <body>
<div id="titlebar"> <div id="titlebar">
<pear-ctrl></pear-ctrl> <pear-ctrl></pear-ctrl>
</div> </div>
<div id="sidebar"> <div id="sidebar">
<button id="collapse-sidebar-btn">&lt;</button> <button id="collapse-sidebar-btn">&lt;</button>
<div class="content"> <div class="content">
<h4 class="text-center mt-3">Connections</h4> <h4 class="text-center mt-3">Connections</h4>
<ul id="connection-list" class="list-group mb-3"></ul> <ul id="connection-list" class="list-group mb-3"></ul>
<form id="add-connection-form" class="px-3"> <form id="add-connection-form" class="px-3">
<input type="text" id="new-connection-topic" class="form-control mb-2" placeholder="Enter server topic" required> <input type="text" id="new-connection-topic" class="form-control mb-2" placeholder="Enter server topic"
required>
<button type="submit" class="btn btn-primary w-100">Add Connection</button> <button type="submit" class="btn btn-primary w-100">Add Connection</button>
</form> </form>
</div> </div>
</div> </div>
<div id="content"> <div id="content">
<h1 id="connection-title">Add a Connection</h1> <h1 id="connection-title">Add a Connection</h1>
<div id="dashboard" class="hidden"> <div id="dashboard" class="hidden">
@ -175,7 +206,7 @@
</table> </table>
</div> </div>
</div> </div>
<!-- Duplicate Container Modal --> <!-- Duplicate Container Modal -->
<div class="modal fade" id="duplicateModal" tabindex="-1" aria-labelledby="duplicateModalLabel" aria-hidden="true"> <div class="modal fade" id="duplicateModal" tabindex="-1" aria-labelledby="duplicateModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg"> <div class="modal-dialog modal-lg">
@ -221,7 +252,7 @@
</div> </div>
</div> </div>
</div> </div>
<!-- Terminal Modal --> <!-- Terminal Modal -->
<div id="terminal-modal"> <div id="terminal-modal">
<div class="header"> <div class="header">
@ -231,18 +262,20 @@
</div> </div>
</div> </div>
<div id="terminal-container"></div> <div id="terminal-container"></div>
<div id="terminal-resize-handle"></div> <!-- Resize handle -->
</div> </div>
<div id="tray"></div> <div id="tray"></div>
<!-- xterm.js --> <!-- xterm.js -->
<script src="https://cdn.jsdelivr.net/npm/xterm/lib/xterm.js"></script> <script src="https://cdn.jsdelivr.net/npm/xterm/lib/xterm.js"></script>
<!-- Bootstrap JS for Modal Functionality --> <!-- Bootstrap JS for Modal Functionality -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
<!-- Your App JS --> <!-- Your App JS -->
<script type="module" src="app.js"></script> <script type="module" src="app.js"></script>
</body> </body>
</html> </html>

42
libs/terminal.js
View File

@ -6,11 +6,17 @@ const terminalModal = document.getElementById('terminal-modal');
const terminalTitle = document.getElementById('terminal-title'); const terminalTitle = document.getElementById('terminal-title');
const terminalContainer = document.getElementById('terminal-container'); const terminalContainer = document.getElementById('terminal-container');
const tray = document.getElementById('tray'); const tray = document.getElementById('tray');
const terminalHeader = document.querySelector('#terminal-modal .header');
// Terminal variables // Terminal variables
let terminalSessions = {}; // Track terminal sessions per containerId let terminalSessions = {}; // Track terminal sessions per containerId
let activeContainerId = null; // Currently displayed containerId let activeContainerId = null; // Currently displayed containerId
// Variables for resizing
let isResizing = false;
let startY = 0;
let startHeight = 0;
// Kill Terminal button functionality // Kill Terminal button functionality
document.getElementById('kill-terminal-btn').onclick = () => { document.getElementById('kill-terminal-btn').onclick = () => {
killActiveTerminal(); killActiveTerminal();
@ -39,6 +45,42 @@ function killActiveTerminal() {
} }
} }
// Start resizing when the mouse is down on the header
terminalHeader.addEventListener('mousedown', (e) => {
isResizing = true;
startY = e.clientY; // Track the initial Y position
startHeight = terminalModal.offsetHeight; // Track the initial height
document.body.style.cursor = 'ns-resize'; // Change cursor to indicate resizing
e.preventDefault(); // Prevent text selection
});
// Resize the modal while dragging
document.addEventListener('mousemove', (e) => {
if (isResizing) {
const deltaY = startY - e.clientY; // Calculate how much the mouse moved
const newHeight = Math.min(
Math.max(startHeight + deltaY, 150), // Minimum height: 150px
window.innerHeight * 0.9 // Maximum height: 90% of viewport height
);
terminalModal.style.height = `${newHeight}px`; // Set new height
terminalContainer.style.height = `${newHeight - 40}px`; // Adjust terminal container height
const activeSession = terminalSessions[activeContainerId];
if (activeSession) {
setTimeout(() => activeSession.fitAddon.fit(), 10); // Adjust terminal content
}
}
});
// Stop resizing when the mouse is released
document.addEventListener('mouseup', () => {
if (isResizing) {
isResizing = false;
document.body.style.cursor = 'default'; // Reset cursor
}
});
// Start terminal session // Start terminal session
function startTerminal(containerId, containerName) { function startTerminal(containerId, containerName) {
if (!window.activePeer) { if (!window.activePeer) {