Mark incomplete features as under construction and implement v0.0.2 release
- Mark incomplete statistics charts with construction notices - Disable non-functional 3D radar controls - Implement collapsible Display Options menu (defaults to collapsed) - Add toast notifications for better error feedback - Update version to 0.0.2 across all files and packages - Improve Debian packaging with root-owner-group flag - Update repository URLs to Forgejo instance - Create comprehensive feature status documentation - Created 10 detailed issues for all incomplete features (#5-#14) 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
parent
064ba2de71
commit
67d0e0612a
14 changed files with 263 additions and 49 deletions
|
|
@ -417,6 +417,99 @@ body {
|
|||
color: #ffffff !important;
|
||||
}
|
||||
|
||||
/* Under Construction Styles */
|
||||
.under-construction {
|
||||
color: #ff8c00;
|
||||
font-size: 0.8em;
|
||||
font-weight: normal;
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
.construction-notice {
|
||||
background: rgba(255, 140, 0, 0.1);
|
||||
border: 1px solid #ff8c00;
|
||||
border-radius: 4px;
|
||||
padding: 8px;
|
||||
margin: 8px 0;
|
||||
font-size: 0.9em;
|
||||
color: #ff8c00;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* Toast Notifications */
|
||||
.toast-notification {
|
||||
position: fixed;
|
||||
top: 20px;
|
||||
right: 20px;
|
||||
background: rgba(40, 40, 40, 0.95);
|
||||
border: 1px solid #555;
|
||||
border-radius: 6px;
|
||||
padding: 12px 20px;
|
||||
color: #ffffff;
|
||||
font-size: 0.9em;
|
||||
max-width: 300px;
|
||||
z-index: 10000;
|
||||
transform: translateX(320px);
|
||||
transition: transform 0.3s ease-in-out;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.toast-notification.error {
|
||||
border-color: #ff8c00;
|
||||
background: rgba(255, 140, 0, 0.1);
|
||||
color: #ff8c00;
|
||||
}
|
||||
|
||||
.toast-notification.show {
|
||||
transform: translateX(0);
|
||||
}
|
||||
|
||||
/* Version Info */
|
||||
.version-info {
|
||||
font-size: 0.6em;
|
||||
color: #888;
|
||||
font-weight: normal;
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
/* Collapsible Sections */
|
||||
.collapsible-header {
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin: 0 0 8px 0;
|
||||
padding: 4px 0;
|
||||
border-bottom: 1px solid #444;
|
||||
}
|
||||
|
||||
.collapsible-header:hover {
|
||||
color: #4a9eff;
|
||||
}
|
||||
|
||||
.collapse-indicator {
|
||||
font-size: 0.8em;
|
||||
transition: transform 0.2s ease;
|
||||
color: #888;
|
||||
}
|
||||
|
||||
.collapsible-header.collapsed .collapse-indicator {
|
||||
transform: rotate(-90deg);
|
||||
}
|
||||
|
||||
.collapsible-content {
|
||||
overflow: hidden;
|
||||
transition: max-height 0.3s ease;
|
||||
max-height: 200px;
|
||||
}
|
||||
|
||||
.collapsible-content.collapsed {
|
||||
max-height: 0;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.leaflet-popup-tip {
|
||||
background: #2d2d2d !important;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -28,7 +28,7 @@
|
|||
<body>
|
||||
<div id="app">
|
||||
<header class="header">
|
||||
<h1>SkyView</h1>
|
||||
<h1>SkyView <span class="version-info">v0.0.2</span></h1>
|
||||
|
||||
<!-- Status indicators -->
|
||||
<div class="status-section">
|
||||
|
|
@ -83,8 +83,11 @@
|
|||
|
||||
<!-- Display options -->
|
||||
<div class="display-options">
|
||||
<h4>Display Options</h4>
|
||||
<div class="option-group">
|
||||
<h4 class="collapsible-header collapsed" id="display-options-header">
|
||||
<span>Display Options</span>
|
||||
<span class="collapse-indicator">▼</span>
|
||||
</h4>
|
||||
<div class="option-group collapsible-content collapsed" id="display-options-content">
|
||||
<label>
|
||||
<input type="checkbox" id="show-site-positions" checked>
|
||||
<span>Site Positions</span>
|
||||
|
|
@ -205,16 +208,19 @@
|
|||
<canvas id="aircraft-chart"></canvas>
|
||||
</div>
|
||||
<div class="chart-card">
|
||||
<h3>Message Rate by Source</h3>
|
||||
<h3>Message Rate by Source <span class="under-construction">🚧 Under Construction</span></h3>
|
||||
<canvas id="message-chart"></canvas>
|
||||
<div class="construction-notice">This chart is planned but not yet implemented</div>
|
||||
</div>
|
||||
<div class="chart-card">
|
||||
<h3>Signal Strength Distribution</h3>
|
||||
<h3>Signal Strength Distribution <span class="under-construction">🚧 Under Construction</span></h3>
|
||||
<canvas id="signal-chart"></canvas>
|
||||
<div class="construction-notice">This chart is planned but not yet implemented</div>
|
||||
</div>
|
||||
<div class="chart-card">
|
||||
<h3>Altitude Distribution</h3>
|
||||
<h3>Altitude Distribution <span class="under-construction">🚧 Under Construction</span></h3>
|
||||
<canvas id="altitude-chart"></canvas>
|
||||
<div class="construction-notice">This chart is planned but not yet implemented</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -233,10 +239,11 @@
|
|||
<!-- 3D Radar View -->
|
||||
<div id="radar3d-view" class="view">
|
||||
<div class="radar3d-controls">
|
||||
<button id="radar3d-reset">Reset View</button>
|
||||
<button id="radar3d-auto-rotate">Auto Rotate</button>
|
||||
<div class="construction-notice">🚧 3D Controls Under Construction</div>
|
||||
<button id="radar3d-reset" disabled>Reset View</button>
|
||||
<button id="radar3d-auto-rotate" disabled>Auto Rotate</button>
|
||||
<label>
|
||||
<input type="range" id="radar3d-range" min="10" max="500" value="100">
|
||||
<input type="range" id="radar3d-range" min="10" max="500" value="100" disabled>
|
||||
Range: <span id="radar3d-range-value">100</span> km
|
||||
</label>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -107,6 +107,9 @@ class SkyView {
|
|||
});
|
||||
}
|
||||
|
||||
// Setup collapsible sections
|
||||
this.setupCollapsibleSections();
|
||||
|
||||
const toggleDarkModeBtn = document.getElementById('toggle-dark-mode');
|
||||
if (toggleDarkModeBtn) {
|
||||
toggleDarkModeBtn.addEventListener('click', () => {
|
||||
|
|
@ -458,6 +461,43 @@ class SkyView {
|
|||
// Clean up old trail data, etc.
|
||||
}, 30000);
|
||||
}
|
||||
|
||||
setupCollapsibleSections() {
|
||||
// Setup Display Options collapsible
|
||||
const displayHeader = document.getElementById('display-options-header');
|
||||
const displayContent = document.getElementById('display-options-content');
|
||||
|
||||
if (displayHeader && displayContent) {
|
||||
displayHeader.addEventListener('click', () => {
|
||||
const isCollapsed = displayContent.classList.contains('collapsed');
|
||||
|
||||
if (isCollapsed) {
|
||||
// Expand
|
||||
displayContent.classList.remove('collapsed');
|
||||
displayHeader.classList.remove('collapsed');
|
||||
} else {
|
||||
// Collapse
|
||||
displayContent.classList.add('collapsed');
|
||||
displayHeader.classList.add('collapsed');
|
||||
}
|
||||
|
||||
// Save state to localStorage
|
||||
localStorage.setItem('displayOptionsCollapsed', !isCollapsed);
|
||||
});
|
||||
|
||||
// Restore saved state (default to collapsed)
|
||||
const savedState = localStorage.getItem('displayOptionsCollapsed');
|
||||
const shouldCollapse = savedState === null ? true : savedState === 'true';
|
||||
|
||||
if (shouldCollapse) {
|
||||
displayContent.classList.add('collapsed');
|
||||
displayHeader.classList.add('collapsed');
|
||||
} else {
|
||||
displayContent.classList.remove('collapsed');
|
||||
displayHeader.classList.remove('collapsed');
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Initialize application when DOM is ready
|
||||
|
|
|
|||
|
|
@ -352,8 +352,14 @@ export class MapManager {
|
|||
}
|
||||
|
||||
createHeatmapOverlay(data) {
|
||||
// Simplified heatmap implementation
|
||||
// In production, would use proper heatmap library like Leaflet.heat
|
||||
// 🚧 Under Construction: Heatmap visualization not yet implemented
|
||||
// Planned: Use Leaflet.heat library for proper heatmap rendering
|
||||
console.log('Heatmap overlay requested but not yet implemented');
|
||||
|
||||
// Show user-visible notice
|
||||
if (window.uiManager) {
|
||||
window.uiManager.showError('Heatmap visualization is under construction 🚧');
|
||||
}
|
||||
}
|
||||
|
||||
setSelectedSource(sourceId) {
|
||||
|
|
|
|||
|
|
@ -316,6 +316,22 @@ export class UIManager {
|
|||
|
||||
showError(message) {
|
||||
console.error(message);
|
||||
// Could implement toast notifications here
|
||||
|
||||
// Simple toast notification implementation
|
||||
const toast = document.createElement('div');
|
||||
toast.className = 'toast-notification error';
|
||||
toast.textContent = message;
|
||||
|
||||
// Add to page
|
||||
document.body.appendChild(toast);
|
||||
|
||||
// Show toast with animation
|
||||
setTimeout(() => toast.classList.add('show'), 100);
|
||||
|
||||
// Auto-remove after 5 seconds
|
||||
setTimeout(() => {
|
||||
toast.classList.remove('show');
|
||||
setTimeout(() => document.body.removeChild(toast), 300);
|
||||
}, 5000);
|
||||
}
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue