iot/spore-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: make upload stuff more compact

Browse Source
This commit is contained in:
0x1d
2025-08-26 13:19:46 +02:00
parent 423d052ccf
commit b23025a6f8
3 changed files with 461 additions and 257 deletions
Download Patch File Download Diff File Expand all files Collapse all files

55
public/index.html
View File

@@ -82,28 +82,41 @@
<div class="firmware-actions">
<div class="action-group">
<h3>📁 Upload New Firmware</h3>
<div class="upload-area-large">
<input type="file" id="global-firmware-file" accept=".bin,.hex" style="display: none;">
<button class="upload-btn-large" onclick="document.getElementById('global-firmware-file').click()">
📁 Choose Firmware File
<h3>🚀 Firmware Update</h3>
<div class="firmware-upload-compact">
<div class="upload-target-row">
<div class="upload-section">
<div class="file-input-wrapper">
<input type="file" id="global-firmware-file" accept=".bin,.hex" style="display: none;">
<button class="upload-btn-compact" onclick="document.getElementById('global-firmware-file').click()">
📁 Choose File
</button>
<span class="file-info" id="file-info">No file selected</span>
</div>
</div>
<div class="target-section">
<div class="target-options">
<label class="target-option">
<input type="radio" name="target-type" value="all" checked>
<span class="radio-custom"></span>
<span class="target-label">All Nodes</span>
</label>
<label class="target-option">
<input type="radio" name="target-type" value="specific">
<span class="radio-custom"></span>
<span class="target-label">Specific Node</span>
</label>
</div>
<select id="specific-node-select" class="node-select" style="display: none;">
<option value="">Select a node...</option>
</select>
</div>
</div>
<button class="deploy-btn" id="deploy-btn" disabled>
🚀 Deploy Firmware
</button>
<div class="upload-info-large">Select a .bin or .hex file to upload to all nodes</div>
</div>
</div>
<div class="action-group">
<h3>🎯 Target Selection</h3>
<div class="target-selection">
<label>
<input type="radio" name="target-type" value="all" checked> All Nodes
</label>
<label>
<input type="radio" name="target-type" value="specific"> Specific Node
</label>
<select id="specific-node-select" style="display: none;">
<option value="">Select a node...</option>
</select>
</div>
</div>
</div>

87
public/script.js
View File

@@ -705,7 +705,7 @@ function setupFirmwareView() {
// Setup global firmware file input
const globalFirmwareFile = document.getElementById('global-firmware-file');
if (globalFirmwareFile) {
globalFirmwareFile.addEventListener('change', handleGlobalFirmwareUpload);
globalFirmwareFile.addEventListener('change', handleGlobalFirmwareFileSelect);
}
// Setup target selection
@@ -720,36 +720,105 @@ function setupFirmwareView() {
} else {
specificNodeSelect.style.display = 'none';
}
updateDeployButton();
});
});
// Setup specific node select change handler
if (specificNodeSelect) {
specificNodeSelect.addEventListener('change', updateDeployButton);
}
// Setup deploy button
const deployBtn = document.getElementById('deploy-btn');
if (deployBtn) {
deployBtn.addEventListener('click', handleDeployFirmware);
}
// Initial button state
updateDeployButton();
}
// Handle global firmware upload
async function handleGlobalFirmwareUpload(event) {
// Handle file selection for the compact interface
function handleGlobalFirmwareFileSelect(event) {
const file = event.target.files[0];
if (!file) return;
const fileInfo = document.getElementById('file-info');
const deployBtn = document.getElementById('deploy-btn');
if (file) {
fileInfo.textContent = `${file.name} (${(file.size / 1024).toFixed(1)}KB)`;
fileInfo.classList.add('has-file');
deployBtn.disabled = false;
} else {
fileInfo.textContent = 'No file selected';
fileInfo.classList.remove('has-file');
deployBtn.disabled = true;
}
}
// Update deploy button state
function updateDeployButton() {
const deployBtn = document.getElementById('deploy-btn');
const fileInput = document.getElementById('global-firmware-file');
const targetType = document.querySelector('input[name="target-type"]:checked');
const specificNodeSelect = document.getElementById('specific-node-select');
if (!deployBtn || !fileInput) return;
const hasFile = fileInput.files && fileInput.files.length > 0;
const isValidTarget = targetType.value === 'all' ||
(targetType.value === 'specific' && specificNodeSelect.value);
deployBtn.disabled = !hasFile || !isValidTarget;
}
// Handle deploy firmware button click
async function handleDeployFirmware() {
const fileInput = document.getElementById('global-firmware-file');
const targetType = document.querySelector('input[name="target-type"]:checked').value;
const specificNode = document.getElementById('specific-node-select').value;
if (!fileInput.files || !fileInput.files[0]) {
alert('Please select a firmware file first.');
return;
}
const file = fileInput.files[0];
if (targetType === 'specific' && !specificNode) {
alert('Please select a specific node to update.');
return;
}
try {
// Disable deploy button during upload
const deployBtn = document.getElementById('deploy-btn');
deployBtn.disabled = true;
deployBtn.classList.add('loading');
deployBtn.textContent = '⏳ Deploying...';
if (targetType === 'all') {
await uploadFirmwareToAllNodes(file);
} else {
await uploadFirmwareToSpecificNode(file, specificNode);
}
// Reset interface after successful upload
fileInput.value = '';
document.getElementById('file-info').textContent = 'No file selected';
document.getElementById('file-info').classList.remove('has-file');
} catch (error) {
console.error('Global firmware upload failed:', error);
alert(`Upload failed: ${error.message}`);
console.error('Firmware deployment failed:', error);
alert(`Deployment failed: ${error.message}`);
} finally {
// Re-enable deploy button
const deployBtn = document.getElementById('deploy-btn');
deployBtn.disabled = false;
deployBtn.classList.remove('loading');
deployBtn.textContent = '🚀 Deploy Firmware';
updateDeployButton();
}
// Clear file input
event.target.value = '';
}
// Upload firmware to all nodes

576
public/styles.css
View File

@@ -791,15 +791,15 @@ p {
/* Firmware Actions */
.firmware-actions {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: 2.5rem;
margin-bottom: 3rem;
grid-template-columns: 1fr;
gap: 1.5rem;
margin-bottom: 2.5rem;
}
.action-group {
background: rgba(0, 0, 0, 0.2);
border-radius: 20px;
padding: 2rem;
border-radius: 16px;
padding: 1.5rem;
border: 1px solid rgba(255, 255, 255, 0.06);
position: relative;
overflow: hidden;
@@ -817,42 +817,261 @@ p {
.action-group h3 {
color: #ffffff;
margin-bottom: 1.5rem;
font-size: 1.2rem;
margin-bottom: 1.25rem;
font-size: 1.1rem;
font-weight: 600;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}
.upload-area-large {
text-align: center;
padding: 2.5rem;
border: 2px dashed rgba(255, 255, 255, 0.15);
border-radius: 16px;
background: linear-gradient(135deg, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.01) 100%);
/* Compact Firmware Upload Interface */
.firmware-upload-compact {
display: flex;
flex-direction: column;
gap: 1.25rem;
}
.upload-target-row {
display: flex;
gap: 1.5rem;
align-items: stretch;
position: relative;
}
.upload-target-row::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 1px;
height: 60%;
background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.1), transparent);
pointer-events: none;
}
.upload-section {
flex: 1;
display: flex;
align-items: center;
gap: 0.75rem;
padding: 1.25rem;
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 10px;
transition: all 0.3s ease;
min-height: 100px;
}
.upload-area-large:hover {
border-color: rgba(255, 255, 255, 0.25);
background: linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.02) 100%);
.upload-section:hover {
background: rgba(255, 255, 255, 0.05);
border-color: rgba(255, 255, 255, 0.15);
}
.upload-btn-large {
.target-section {
flex: 1;
display: flex;
flex-direction: column;
gap: 0.75rem;
padding: 1.25rem;
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 10px;
transition: all 0.3s ease;
min-height: 100px;
justify-content: center;
}
.target-section:hover {
background: rgba(255, 255, 255, 0.05);
border-color: rgba(255, 255, 255, 0.15);
}
.file-input-wrapper {
display: flex;
align-items: center;
gap: 1rem;
flex: 1;
}
.upload-btn-compact {
background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.08) 100%);
border: 1px solid rgba(255, 255, 255, 0.2);
color: #ffffff;
padding: 1.25rem 2.5rem;
border-radius: 12px;
padding: 0.6rem 1.25rem;
border-radius: 8px;
cursor: pointer;
font-size: 1.1rem;
font-size: 0.9rem;
font-weight: 500;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
white-space: nowrap;
}
.upload-btn-compact:hover {
background: linear-gradient(135deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.12) 100%);
transform: translateY(-2px);
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}
.file-info {
color: rgba(255, 255, 255, 0.7);
font-size: 0.85rem;
font-style: italic;
transition: all 0.3s ease;
padding: 0.4rem 0.6rem;
background: rgba(255, 255, 255, 0.05);
border-radius: 6px;
border: 1px solid transparent;
}
.file-info.has-file {
color: #4ade80;
background: rgba(74, 222, 128, 0.1);
border-color: rgba(74, 222, 128, 0.2);
font-weight: 500;
font-style: normal;
}
.target-options {
display: flex;
gap: 1.25rem;
}
.target-option {
display: flex;
align-items: center;
gap: 0.4rem;
cursor: pointer;
padding: 0.4rem;
border-radius: 6px;
transition: all 0.2s ease;
}
.target-option:hover {
background: rgba(255, 255, 255, 0.05);
}
.target-option input[type="radio"] {
display: none;
}
.radio-custom {
width: 16px;
height: 16px;
border: 2px solid rgba(255, 255, 255, 0.3);
border-radius: 50%;
position: relative;
transition: all 0.2s ease;
background: rgba(255, 255, 255, 0.05);
}
.target-option input[type="radio"]:checked + .radio-custom {
border-color: #667eea;
background: #667eea;
box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.2);
}
.target-option input[type="radio"]:checked + .radio-custom::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 6px;
height: 6px;
background: white;
border-radius: 50%;
animation: radioPop 0.2s ease-out;
}
@keyframes radioPop {
0% {
transform: translate(-50%, -50%) scale(0);
opacity: 0;
}
100% {
transform: translate(-50%, -50%) scale(1);
opacity: 1;
}
}
.target-label {
color: rgba(255, 255, 255, 0.9);
font-size: 0.9rem;
font-weight: 500;
}
.node-select {
background: linear-gradient(135deg, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.7) 100%);
border: 1px solid rgba(255, 255, 255, 0.3);
color: #ffffff;
padding: 0.6rem 0.9rem;
border-radius: 8px;
font-size: 0.9rem;
transition: all 0.2s ease;
cursor: pointer;
min-width: 180px;
font-weight: 500;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}
.node-select:hover {
border-color: rgba(255, 255, 255, 0.4);
background: linear-gradient(135deg, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.8) 100%);
}
.node-select:focus {
outline: none;
border-color: #667eea;
box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.2);
background: linear-gradient(135deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.9) 100%);
}
/* Style the dropdown options */
.node-select option {
background: #1a202c;
color: #ffffff;
padding: 0.75rem 1rem;
font-size: 0.9rem;
font-weight: 500;
border: none;
}
.node-select option:hover {
background: #2d3748;
}
.node-select option:checked {
background: #667eea;
color: #ffffff;
font-weight: 600;
}
/* Ensure the select field text is always visible */
.node-select:invalid {
color: rgba(255, 255, 255, 0.8);
}
.node-select:valid {
color: #ffffff;
}
.deploy-btn {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
border: none;
color: #ffffff;
padding: 0.875rem 1.75rem;
border-radius: 10px;
cursor: pointer;
font-size: 0.95rem;
font-weight: 600;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
margin-bottom: 1.5rem;
align-self: center;
min-width: 180px;
position: relative;
overflow: hidden;
}
.upload-btn-large::before {
.deploy-btn::before {
content: '';
position: absolute;
top: 0;
@@ -863,245 +1082,148 @@ p {
transition: left 0.5s ease;
}
.upload-btn-large:hover {
background: linear-gradient(135deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.12) 100%);
transform: translateY(-3px);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
}
.upload-btn-large:hover::before {
.deploy-btn:hover:not(:disabled)::before {
left: 100%;
}
.upload-info-large {
font-size: 0.9rem;
color: rgba(255, 255, 255, 0.7);
line-height: 1.5;
.deploy-btn:hover:not(:disabled) {
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(102, 126, 234, 0.3);
}
/* Target Selection */
.target-selection {
display: flex;
flex-direction: column;
gap: 1.25rem;
.deploy-btn:disabled {
background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
color: rgba(255, 255, 255, 0.4);
cursor: not-allowed;
transform: none;
box-shadow: none;
}
.target-selection label {
display: flex;
align-items: center;
gap: 0.75rem;
color: rgba(255, 255, 255, 0.9);
cursor: pointer;
padding: 0.75rem;
border-radius: 10px;
transition: all 0.2s ease;
border: 1px solid transparent;
.deploy-btn.loading {
background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
color: #1f2937;
cursor: not-allowed;
}
.target-selection label:hover {
background: rgba(255, 255, 255, 0.05);
border-color: rgba(255, 255, 255, 0.1);
}
.target-selection input[type="radio"] {
margin: 0;
width: 18px;
height: 18px;
accent-color: #667eea;
}
.target-selection select {
background: linear-gradient(135deg, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.5) 100%);
border: 1px solid rgba(255, 255, 255, 0.2);
color: #ffffff;
padding: 0.75rem 1rem;
border-radius: 10px;
margin-top: 0.75rem;
font-size: 0.95rem;
transition: all 0.2s ease;
cursor: pointer;
font-weight: 500;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}
.target-selection select:hover {
border-color: rgba(255, 255, 255, 0.3);
background: linear-gradient(135deg, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.6) 100%);
}
.target-selection select:focus {
outline: none;
border-color: #667eea;
box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
background: linear-gradient(135deg, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.7) 100%);
}
/* Style the dropdown options */
.target-selection select option {
background: #2c3e50;
color: #ffffff;
padding: 0.5rem;
font-size: 0.9rem;
}
.target-selection select option:hover {
background: #34495e;
}
.target-selection select option:checked {
background: #667eea;
color: #ffffff;
}
/* Ensure the select field text is always visible */
.target-selection select:invalid {
color: rgba(255, 255, 255, 0.7);
}
.target-selection select:valid {
color: #ffffff;
}
/* Text shadow already added to main select rule above */
/* Responsive design for smaller screens */
@media (max-width: 768px) {
.header {
flex-direction: column;
gap: 1rem;
text-align: center;
}
h1 {
font-size: 2rem;
}
.status {
padding: 0.5rem 1rem;
font-size: 0.9rem;
}
/* Mobile navigation */
.main-navigation {
flex-direction: column;
gap: 1rem;
padding: 1rem;
}
.nav-left {
flex-direction: column;
gap: 0.25rem;
}
.nav-tab {
padding: 0.75rem 1rem;
font-size: 0.9rem;
border-radius: 10px;
text-align: center;
}
.cluster-status {
padding: 0.5rem 1rem;
font-size: 0.85rem;
}
/* Mobile firmware stats */
.firmware-stats {
grid-template-columns: 1fr;
gap: 1rem;
}
.stat-card {
padding: 1.5rem 1rem;
}
.stat-value {
font-size: 2rem;
}
.firmware-actions {
grid-template-columns: 1fr;
gap: 2rem;
gap: 1rem;
}
.action-group {
padding: 1.5rem;
padding: 1rem;
}
.upload-area-large {
padding: 2rem 1.5rem;
.upload-target-row {
flex-direction: column;
gap: 1rem;
}
.upload-btn-large {
padding: 1rem 2rem;
.upload-target-row::after {
display: none;
}
.upload-section {
flex: none;
flex-direction: column;
align-items: stretch;
gap: 0.75rem;
padding: 1rem;
min-height: auto;
}
.file-input-wrapper {
flex-direction: column;
align-items: stretch;
gap: 0.5rem;
}
.upload-btn-compact {
width: 100%;
padding: 0.75rem;
font-size: 0.9rem;
}
.target-section {
flex: none;
padding: 1rem;
min-height: auto;
}
.target-options {
justify-content: center;
gap: 0.75rem;
}
.node-select {
min-width: auto;
width: 100%;
padding: 0.5rem 0.75rem;
font-size: 0.9rem;
}
.deploy-btn {
min-width: auto;
width: 100%;
padding: 1rem 1.5rem;
font-size: 1rem;
}
/* Mobile tab responsiveness */
.tabs-header {
flex-wrap: wrap;
gap: 0.25rem;
padding-bottom: 0.5rem;
.file-info {
text-align: center;
padding: 0.5rem;
font-size: 0.85rem;
}
.tab-button {
flex: 1 1 auto;
min-width: 0;
padding: 0.4rem 0.75rem;
font-size: 0.8rem;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
.target-label {
font-size: 0.9rem;
}
.tabs-container {
padding: 0.25rem;
margin-top: 0.75rem;
.radio-custom {
width: 16px;
height: 16px;
}
.tab-content {
padding: 0.75rem 0;
}
/* Mobile member card improvements */
.member-card {
padding: 1rem;
margin-bottom: 0.75rem;
}
.member-info {
gap: 0.25rem;
}
.member-name {
font-size: 1.1rem;
}
.member-ip {
font-size: 0.8rem;
}
.member-latency {
margin-top: 0.4rem;
font-size: 0.8rem;
}
}
}
/* Extra small screens */
@media (max-width: 480px) {
.tabs-header {
gap: 0.2rem;
.action-group {
padding: 0.75rem;
}
.tab-button {
padding: 0.35rem 0.6rem;
font-size: 0.75rem;
border-radius: 6px 6px 0 0;
.upload-section,
.target-section {
padding: 0.75rem;
}
.tabs-container {
padding: 0.2rem;
margin-top: 0.5rem;
.upload-btn-compact {
padding: 0.6rem;
font-size: 0.85rem;
}
.deploy-btn {
padding: 0.75rem 1.25rem;
font-size: 0.95rem;
}
.file-info {
padding: 0.4rem;
font-size: 0.8rem;
}
.target-label {
font-size: 0.85rem;
}
.radio-custom {
width: 14px;
height: 14px;
}
.node-select {
padding: 0.4rem 0.6rem;
font-size: 0.85rem;
}
}