diff --git a/tronbyt_server/static/css/manager.css b/tronbyt_server/static/css/manager.css index 89a0da35..0fe7091e 100644 --- a/tronbyt_server/static/css/manager.css +++ b/tronbyt_server/static/css/manager.css @@ -1086,3 +1086,50 @@ button.action.w3-button { box-sizing: border-box; } } + +.device-info-toggle { + background-color: #f1f1f1; + color: #333; + cursor: pointer; + padding: 10px; + width: 100%; + border: none; + text-align: left; + font-size: 0.9375rem; + transition: 0.4s; +} + +.device-info-toggle:focus-visible { + box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.5); +} + +.device-info-toggle:hover { + background-color: #ddd; +} + +.device-info-content { + padding: 0 15px; + overflow: hidden; + transition: max-height 0.2s ease-out, padding-top 0.2s ease-out, padding-bottom 0.2s ease-out; + max-height: 0; +} + +.device-info-content.is-expanded { + padding-top: 5px; + padding-bottom: 5px; +} + +.device-info-table { + width: 100%; + border-collapse: collapse; +} + +.device-info-table td:first-child { + font-weight: bold; +} + +.device-info-table td { + padding: 4px; + text-align: left; + font-size: 0.9em; +} diff --git a/tronbyt_server/static/js/manager.js b/tronbyt_server/static/js/manager.js index e6a8cea5..9fcbc39d 100644 --- a/tronbyt_server/static/js/manager.js +++ b/tronbyt_server/static/js/manager.js @@ -403,6 +403,7 @@ let draggedIname = null; document.addEventListener('DOMContentLoaded', function() { initializeDragAndDrop(); initializeViewToggles(); + initializeDeviceInfoToggles(); const webpImages = document.querySelectorAll('[id^="currentWebp-"]'); webpImages.forEach(image => { @@ -426,6 +427,12 @@ function initializeViewToggles() { }); } +function initializeDeviceInfoToggles() { + document.querySelectorAll('.device-info-toggle').forEach(button => { + button.addEventListener('click', () => toggleDeviceInfo(button)); + }); +} + function restoreDevicePreferences(deviceId) { const prefs = loadDevicePreferences(deviceId); const appsList = document.getElementById(`appsList-${deviceId}`); @@ -903,3 +910,27 @@ function handleDropZoneDrop(e) { // Clean up zone.classList.remove('active'); } + +function toggleDeviceInfo(button) { + const content = document.getElementById(button.getAttribute('aria-controls')); + if (!content) { + return; + } + const icon = button.querySelector('i'); + const isExpanded = button.getAttribute('aria-expanded') === 'true'; + + button.setAttribute('aria-expanded', !isExpanded); + content.classList.toggle('is-expanded'); + + if (!isExpanded) { + content.style.maxHeight = content.scrollHeight + "px"; + if (icon) { + icon.classList.replace('fa-chevron-down', 'fa-chevron-up'); + } + } else { + content.style.maxHeight = '0px'; + if (icon) { + icon.classList.replace('fa-chevron-up', 'fa-chevron-down'); + } + } +} diff --git a/tronbyt_server/templates/partials/device_card.html b/tronbyt_server/templates/partials/device_card.html index ab18713f..cd407b06 100644 --- a/tronbyt_server/templates/partials/device_card.html +++ b/tronbyt_server/templates/partials/device_card.html @@ -30,24 +30,31 @@
| {{ _('Firmware Version:') }} | {{ device.info.firmware_version }} |
| {{ _('Firmware Type:') }} | {{ device.info.firmware_type }} |
| {{ _('Protocol Version:') }} | {{ device.info.protocol_version }} |
| {{ _('MAC Address:') }} | {{ device.info.mac_address }} |
| {{ _('Protocol Type:') }} | {{ device.info.protocol_type.value }} |
| {{ _('Last Seen:') }} | {{ device.last_seen.astimezone().strftime('%Y-%m-%d %H:%M:%S') }} |