Add in Font Awesome Icons for Actions

This commit is contained in:
Raven Scott 2024-11-29 16:40:37 -05:00
parent 4753207c02
commit 76825acb15

48
app.js
View File

@ -145,9 +145,9 @@ function addConnection(topicHex) {
switchConnection(topicId); switchConnection(topicId);
} }
}); });
} }
function disconnectConnection(topicId, connectionItem) { function disconnectConnection(topicId, connectionItem) {
const connection = connections[topicId]; const connection = connections[topicId];
if (!connection) { if (!connection) {
console.error(`[ERROR] No connection found for topicId: ${topicId}`); console.error(`[ERROR] No connection found for topicId: ${topicId}`);
@ -205,15 +205,15 @@ function addConnection(topicHex) {
// Refresh the connections view // Refresh the connections view
resetConnectionsView(); resetConnectionsView();
} }
// Function to reset the container list // Function to reset the container list
function resetContainerList() { function resetContainerList() {
containerList.innerHTML = ''; // Clear the existing list containerList.innerHTML = ''; // Clear the existing list
console.log('[INFO] Container list cleared.'); console.log('[INFO] Container list cleared.');
} }
// Function to reset the connections view // Function to reset the connections view
function resetConnectionsView() { function resetConnectionsView() {
// Clear the connection list // Clear the connection list
connectionList.innerHTML = ''; connectionList.innerHTML = '';
@ -243,7 +243,7 @@ function addConnection(topicHex) {
}); });
console.log('[INFO] Connections view reset.'); console.log('[INFO] Connections view reset.');
} }
// Update connection status // Update connection status
function updateConnectionStatus(topicId, isConnected) { function updateConnectionStatus(topicId, isConnected) {
@ -274,7 +274,7 @@ function switchConnection(topicId) {
console.log('[INFO] Sending "listContainers" command'); console.log('[INFO] Sending "listContainers" command');
sendCommand('listContainers'); sendCommand('listContainers');
} }
// Attach switchConnection to the global window object // Attach switchConnection to the global window object
window.switchConnection = switchConnection; window.switchConnection = switchConnection;
@ -312,11 +312,21 @@ function renderContainers(containers) {
<td class="memory">0</td> <td class="memory">0</td>
<td class="ip-address">-</td> <td class="ip-address">-</td>
<td> <td>
<button class="btn btn-success btn-sm action-start" ${container.State === 'running' ? 'disabled' : ''}>Start</button> <button class="btn btn-success btn-sm action-start" ${container.State === 'running' ? 'disabled' : ''}>
<button class="btn btn-warning btn-sm action-stop" ${container.State !== 'running' ? 'disabled' : ''}>Stop</button> <i class="fas fa-play"></i>
<button class="btn btn-danger btn-sm action-remove">Remove</button> </button>
<button class="btn btn-primary btn-sm action-terminal" ${container.State !== 'running' ? 'disabled' : ''}>Terminal</button> <button class="btn btn-warning btn-sm action-stop" ${container.State !== 'running' ? 'disabled' : ''}>
<button class="btn btn-secondary btn-sm action-duplicate">Duplicate</button> <i class="fas fa-stop"></i>
</button>
<button class="btn btn-danger btn-sm action-remove">
<i class="fas fa-trash"></i>
</button>
<button class="btn btn-primary btn-sm action-terminal" ${container.State !== 'running' ? 'disabled' : ''}>
<i class="fas fa-terminal"></i>
</button>
<button class="btn btn-secondary btn-sm action-duplicate">
<i class="fas fa-clone"></i>
</button>
</td> </td>
`; `;
containerList.appendChild(row); containerList.appendChild(row);
@ -328,7 +338,7 @@ function renderContainers(containers) {
const duplicateBtn = row.querySelector('.action-duplicate'); const duplicateBtn = row.querySelector('.action-duplicate');
duplicateBtn.addEventListener('click', () => openDuplicateModal(container)); duplicateBtn.addEventListener('click', () => openDuplicateModal(container));
}); });
} }
// Add event listeners to action buttons // Add event listeners to action buttons
@ -380,7 +390,7 @@ function updateContainerStats(stats) {
row.querySelector('.cpu').textContent = stats.cpu.toFixed(2); row.querySelector('.cpu').textContent = stats.cpu.toFixed(2);
row.querySelector('.memory').textContent = (stats.memory / (1024 * 1024)).toFixed(2); row.querySelector('.memory').textContent = (stats.memory / (1024 * 1024)).toFixed(2);
row.querySelector('.ip-address').textContent = stats.ip || '-'; row.querySelector('.ip-address').textContent = stats.ip || '-';
} }
// Function to open the Duplicate Modal with container configurations // Function to open the Duplicate Modal with container configurations
function openDuplicateModal(container) { function openDuplicateModal(container) {
@ -411,7 +421,7 @@ function openDuplicateModal(container) {
// Show the modal // Show the modal
duplicateModal.show(); duplicateModal.show();
}; };
} }
// Handle the Duplicate Container Form Submission // Handle the Duplicate Container Form Submission
@ -447,7 +457,7 @@ duplicateContainerForm.addEventListener('submit', (e) => {
console.log('[INFO] Fetching updated container list after duplication'); console.log('[INFO] Fetching updated container list after duplication');
sendCommand('listContainers'); sendCommand('listContainers');
}, 2000); // Wait for duplication to complete }, 2000); // Wait for duplication to complete
}); });
// Attach startTerminal to the global window object // Attach startTerminal to the global window object