forked from snxraven/peardock
fix
This commit is contained in:
Raven Scott
parent
0a31b03601
commit
7728e5e5b7
43
app.js
43
app.js
@ -490,7 +490,7 @@ function renderContainers(containers) {
|
|||||||
|
|
||||||
// Add event listeners for action buttons
|
// Add event listeners for action buttons
|
||||||
addActionListeners(row, container);
|
addActionListeners(row, container);
|
||||||
// Add event listener for duplicate button
|
// Add event listener for duplicate button
|
||||||
const duplicateBtn = row.querySelector('.action-duplicate');
|
const duplicateBtn = row.querySelector('.action-duplicate');
|
||||||
duplicateBtn.addEventListener('click', () => openDuplicateModal(container));
|
duplicateBtn.addEventListener('click', () => openDuplicateModal(container));
|
||||||
|
|
||||||
@ -553,28 +553,28 @@ function addActionListeners(row, container) {
|
|||||||
|
|
||||||
|
|
||||||
// Restart Button
|
// Restart Button
|
||||||
restartBtn.addEventListener('click', async () => {
|
restartBtn.addEventListener('click', async () => {
|
||||||
showStatusIndicator(`Restarting container "${container.Names[0]}"...`);
|
showStatusIndicator(`Restarting container "${container.Names[0]}"...`);
|
||||||
sendCommand('restartContainer', { id: container.Id });
|
sendCommand('restartContainer', { id: container.Id });
|
||||||
|
|
||||||
const expectedMessageFragment = `Container ${container.Id} restarted`;
|
const expectedMessageFragment = `Container ${container.Id} restarted`;
|
||||||
|
|
||||||
try {
|
try {
|
||||||
const response = await waitForPeerResponse(expectedMessageFragment);
|
const response = await waitForPeerResponse(expectedMessageFragment);
|
||||||
console.log('[DEBUG] Restart container response:', response);
|
console.log('[DEBUG] Restart container response:', response);
|
||||||
|
|
||||||
showAlert('success', response.message);
|
showAlert('success', response.message);
|
||||||
|
|
||||||
// Refresh the container list to update states
|
// Refresh the container list to update states
|
||||||
sendCommand('listContainers');
|
sendCommand('listContainers');
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.error('[ERROR] Failed to restart container:', error.message);
|
console.error('[ERROR] Failed to restart container:', error.message);
|
||||||
showAlert('danger', error.message || 'Failed to restart container.');
|
showAlert('danger', error.message || 'Failed to restart container.');
|
||||||
} finally {
|
} finally {
|
||||||
console.log('[DEBUG] Hiding status indicator in restartBtn finally block');
|
console.log('[DEBUG] Hiding status indicator in restartBtn finally block');
|
||||||
hideStatusIndicator();
|
hideStatusIndicator();
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
||||||
// Remove Button
|
// Remove Button
|
||||||
@ -608,6 +608,11 @@ restartBtn.addEventListener('click', async () => {
|
|||||||
terminalModal.style.display = 'none';
|
terminalModal.style.display = 'none';
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
terminalModal.addEventListener('shown.bs.modal', () => {
|
||||||
|
terminal.focus();
|
||||||
|
});
|
||||||
|
|
||||||
sendCommand('removeContainer', { id: container.Id });
|
sendCommand('removeContainer', { id: container.Id });
|
||||||
|
|
||||||
const expectedMessageFragment = `Container ${container.Id} removed`;
|
const expectedMessageFragment = `Container ${container.Id} removed`;
|
||||||
|
|||||||
237
index.html
237
index.html
@ -22,10 +22,9 @@
|
|||||||
color: white;
|
color: white;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
.hidden {
|
.hidden {
|
||||||
display: none !important;
|
display: none !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
#titlebar {
|
#titlebar {
|
||||||
-webkit-app-region: drag;
|
-webkit-app-region: drag;
|
||||||
@ -79,18 +78,14 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
#content {
|
#content {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column; /* Keep vertical stacking for child elements */
|
||||||
/* Keep vertical stacking for child elements */
|
margin-left: 250px; /* Leave space for the sidebar */
|
||||||
margin-left: 250px;
|
flex: 1; /* Allow the content to grow */
|
||||||
/* Leave space for the sidebar */
|
padding: 30px;
|
||||||
flex: 1;
|
overflow-y: auto; /* Allow scrolling if content overflows */
|
||||||
/* Allow the content to grow */
|
position: relative;
|
||||||
padding: 30px;
|
}
|
||||||
overflow-y: auto;
|
|
||||||
/* Allow scrolling if content overflows */
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
#sidebar.collapsed~#content {
|
#sidebar.collapsed~#content {
|
||||||
margin-left: 50px;
|
margin-left: 50px;
|
||||||
@ -175,42 +170,18 @@
|
|||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
.table-responsive {
|
|
||||||
overflow-x: auto;
|
|
||||||
-webkit-overflow-scrolling: touch;
|
|
||||||
/* Enable smooth scrolling on touch devices */
|
|
||||||
}
|
|
||||||
|
|
||||||
.table th,
|
|
||||||
.table td {
|
|
||||||
white-space: nowrap;
|
|
||||||
/* Prevent table cells from wrapping text */
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 768px) {
|
|
||||||
|
|
||||||
.table th,
|
|
||||||
.table td {
|
|
||||||
font-size: 0.9rem;
|
|
||||||
/* Adjust font size for smaller screens */
|
|
||||||
padding: 0.5rem;
|
|
||||||
/* Reduce padding */
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
#status-indicator {
|
#status-indicator {
|
||||||
display: none;
|
display: none; /* Ensure it's hidden by default */
|
||||||
/* Ensure it's hidden by default */
|
position: fixed;
|
||||||
position: fixed;
|
top: 0;
|
||||||
top: 0;
|
left: 0;
|
||||||
left: 0;
|
width: 100%;
|
||||||
width: 100%;
|
height: 100%;
|
||||||
height: 100%;
|
align-items: center;
|
||||||
align-items: center;
|
justify-content: center;
|
||||||
justify-content: center;
|
background-color: rgba(0, 0, 0, 0.75);
|
||||||
background-color: rgba(0, 0, 0, 0.75);
|
z-index: 1050;
|
||||||
z-index: 1050;
|
}
|
||||||
}
|
|
||||||
|
|
||||||
#status-indicator .spinner-border {
|
#status-indicator .spinner-border {
|
||||||
width: 3rem;
|
width: 3rem;
|
||||||
@ -224,146 +195,40 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
#welcome-page {
|
#welcome-page {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column; /* Stack child elements vertically */
|
||||||
/* Stack child elements vertically */
|
justify-content: center; /* Center content vertically */
|
||||||
justify-content: center;
|
align-items: center; /* Center content horizontally */
|
||||||
/* Center content vertically */
|
text-align: center; /* Center-align text */
|
||||||
align-items: center;
|
position: absolute; /* Overlay it over the content area */
|
||||||
/* Center content horizontally */
|
top: 50%;
|
||||||
text-align: center;
|
left: 50%;
|
||||||
/* Center-align text */
|
transform: translate(-50%, -50%); /* Center it perfectly in the content */
|
||||||
position: absolute;
|
max-width: 800px; /* Restrict the width of the welcome page */
|
||||||
/* Overlay it over the content area */
|
width: 100%; /* Allow it to scale */
|
||||||
top: 50%;
|
padding: 20px;
|
||||||
left: 50%;
|
background-color: transparent; /* Match the theme */
|
||||||
transform: translate(-50%, -50%);
|
}
|
||||||
/* Center it perfectly in the content */
|
|
||||||
max-width: 800px;
|
|
||||||
/* Restrict the width of the welcome page */
|
|
||||||
width: 100%;
|
|
||||||
/* Allow it to scale */
|
|
||||||
padding: 20px;
|
|
||||||
background-color: transparent;
|
|
||||||
/* Match the theme */
|
|
||||||
}
|
|
||||||
|
|
||||||
#welcome-page.hidden {
|
#welcome-page.hidden {
|
||||||
display: none !important;
|
display: none !important; /* Completely hide when not needed */
|
||||||
/* Completely hide when not needed */
|
}
|
||||||
}
|
|
||||||
|
|
||||||
#dashboard {
|
#dashboard {
|
||||||
display: flex;
|
display: flex; /* Use flex layout for content within the dashboard */
|
||||||
/* Use flex layout for content within the dashboard */
|
flex-direction: column; /* Stack elements vertically */
|
||||||
flex-direction: column;
|
flex: 1; /* Ensure it uses all available space */
|
||||||
/* Stack elements vertically */
|
width: 100%; /* Take up the full width of the content area */
|
||||||
flex: 1;
|
padding: 0; /* Remove extra padding */
|
||||||
/* Ensure it uses all available space */
|
overflow-y: auto; /* Allow vertical scrolling if needed */
|
||||||
width: 100%;
|
position: relative; /* Prevent overlap with other elements */
|
||||||
/* Take up the full width of the content area */
|
}
|
||||||
padding: 0;
|
|
||||||
/* Remove extra padding */
|
|
||||||
overflow-y: auto;
|
|
||||||
/* Allow vertical scrolling if needed */
|
|
||||||
position: relative;
|
|
||||||
/* Prevent overlap with other elements */
|
|
||||||
}
|
|
||||||
|
|
||||||
#dashboard.hidden {
|
#dashboard.hidden {
|
||||||
display: none !important;
|
display: none !important; /* Hide the dashboard completely when not needed */
|
||||||
/* Hide the dashboard completely when not needed */
|
}
|
||||||
}
|
|
||||||
|
|
||||||
#alert-container {
|
|
||||||
position: fixed;
|
|
||||||
bottom: 20px;
|
|
||||||
right: 20px;
|
|
||||||
z-index: 1055;
|
|
||||||
/* Ensure it overlays other elements */
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column-reverse;
|
|
||||||
/* Stack alerts upwards */
|
|
||||||
gap: 10px;
|
|
||||||
/* Add space between alerts */
|
|
||||||
}
|
|
||||||
|
|
||||||
.alert {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: space-between;
|
|
||||||
max-width: 80%;
|
|
||||||
/* Ensure the alert doesn't stretch too wide */
|
|
||||||
padding: 12px 20px;
|
|
||||||
/* Adjust padding for a more balanced look */
|
|
||||||
background-color: #2b2b2b;
|
|
||||||
/* Slightly lighter background for better contrast */
|
|
||||||
color: #e0e0e0;
|
|
||||||
/* Softer white text for readability */
|
|
||||||
border-radius: 6px;
|
|
||||||
/* Round corners for a modern look */
|
|
||||||
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
|
|
||||||
/* Add subtle shadow for depth */
|
|
||||||
font-family: Arial, sans-serif;
|
|
||||||
font-size: 14px;
|
|
||||||
/* Adjust font size for readability */
|
|
||||||
animation: fadeIn 0.3s ease-out, fadeOut 4.5s ease-in forwards;
|
|
||||||
white-space: nowrap;
|
|
||||||
/* Prevent text wrapping */
|
|
||||||
overflow: hidden;
|
|
||||||
/* Hide overflow for long text */
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
/* Add ellipsis for overflowed text */
|
|
||||||
}
|
|
||||||
|
|
||||||
.alert.success {
|
|
||||||
border-left: 6px solid #28a745;
|
|
||||||
/* Green border for success */
|
|
||||||
}
|
|
||||||
|
|
||||||
.alert.danger {
|
|
||||||
border-left: 6px solid #dc3545;
|
|
||||||
/* Red border for danger */
|
|
||||||
}
|
|
||||||
|
|
||||||
.alert .close-btn {
|
|
||||||
background: none;
|
|
||||||
border: none;
|
|
||||||
color: #e0e0e0;
|
|
||||||
/* Use the same text color for consistency */
|
|
||||||
font-size: 16px;
|
|
||||||
cursor: pointer;
|
|
||||||
margin-left: 15px;
|
|
||||||
/* Space between text and close button */
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes fadeIn {
|
|
||||||
from {
|
|
||||||
opacity: 0;
|
|
||||||
transform: translateY(10px);
|
|
||||||
}
|
|
||||||
|
|
||||||
to {
|
|
||||||
opacity: 1;
|
|
||||||
transform: translateY(0);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes fadeOut {
|
|
||||||
0% {
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
90% {
|
|
||||||
opacity: 0.3;
|
|
||||||
}
|
|
||||||
|
|
||||||
100% {
|
|
||||||
opacity: 0;
|
|
||||||
transform: translateY(10px);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user