848 lines
21 KiB
Markdown
848 lines
21 KiB
Markdown
# RFCP - Iteration 1: Fixes & Features
|
||
## Comprehensive Task for Claude Code
|
||
|
||
Read RFCP-Fixes-Iteration1.md and RFCP-TechSpec-v3.0.md for context.
|
||
|
||
---
|
||
|
||
## CRITICAL FIXES (Priority: HIGH)
|
||
|
||
### 1. Heatmap Color Gradient - More Obvious
|
||
**Current:** Green → Yellow → Red (not very distinct)
|
||
**New:** Blue → Cyan → Green → Yellow → Orange → Red
|
||
|
||
**File:** `frontend/src/components/map/Heatmap.tsx`
|
||
|
||
```typescript
|
||
// Update gradient in HeatmapLayer component:
|
||
gradient={{
|
||
0.0: '#0d47a1', // Dark Blue (very weak, -120 dBm)
|
||
0.2: '#00bcd4', // Cyan (weak, -110 dBm)
|
||
0.4: '#4caf50', // Green (fair, -100 dBm)
|
||
0.6: '#ffeb3b', // Yellow (good, -85 dBm)
|
||
0.8: '#ff9800', // Orange (strong, -70 dBm)
|
||
1.0: '#f44336', // Red (excellent, > -70 dBm)
|
||
}}
|
||
```
|
||
|
||
**Reasoning:**
|
||
- Cold colors (blue/cyan) = weak signal
|
||
- Warm colors (yellow/orange/red) = strong signal
|
||
- More intuitive for RF planning
|
||
- Better contrast and visibility
|
||
|
||
---
|
||
|
||
### 2. Coverage Radius - Increase to 100km
|
||
**Current:** Max 20km
|
||
**New:** Max 100km with larger step
|
||
|
||
**File:** `frontend/src/components/panels/SiteForm.tsx` or wherever Coverage Settings panel is
|
||
|
||
```typescript
|
||
// Find the radius slider and update:
|
||
<Slider
|
||
label="Radius"
|
||
min={1}
|
||
max={100} // ← Changed from 20
|
||
step={5} // ← Changed from 1 (easier control)
|
||
value={coverageSettings.radius}
|
||
onChange={(value) => updateCoverageSettings({ radius: value })}
|
||
suffix="km"
|
||
help="Calculation area around each site"
|
||
/>
|
||
```
|
||
|
||
**Also update default value:**
|
||
|
||
**File:** `frontend/src/store/coverage.ts` (or wherever initial settings are)
|
||
|
||
```typescript
|
||
const defaultSettings: CoverageSettings = {
|
||
radius: 10, // Changed from 20 to 10 (better default)
|
||
resolution: 200, // 200m
|
||
rsrpThreshold: -120
|
||
};
|
||
```
|
||
|
||
---
|
||
|
||
### 3. "Save & Calculate" Button - Primary Action
|
||
**Current:** Separate "Save" and "Calculate" buttons
|
||
**New:** "Save & Calculate" as primary action + "Save Only" as secondary
|
||
|
||
**File:** `frontend/src/components/panels/SiteForm.tsx`
|
||
|
||
```typescript
|
||
// Replace button section:
|
||
<div className="flex gap-2">
|
||
<Button
|
||
onClick={handleSaveAndCalculate}
|
||
variant="primary"
|
||
className="flex-1"
|
||
>
|
||
💾 Save & Calculate
|
||
</Button>
|
||
|
||
<Button
|
||
onClick={handleSave}
|
||
variant="secondary"
|
||
>
|
||
💾 Save Only
|
||
</Button>
|
||
|
||
<Button
|
||
onClick={handleDelete}
|
||
variant="danger"
|
||
>
|
||
🗑️
|
||
</Button>
|
||
</div>
|
||
|
||
// Add handler function:
|
||
const handleSaveAndCalculate = async () => {
|
||
try {
|
||
// Save the site first
|
||
await handleSave();
|
||
|
||
// Get all sites from store
|
||
const sites = useSitesStore.getState().sites;
|
||
|
||
if (sites.length === 0) {
|
||
toast.info('Add at least one site to calculate coverage');
|
||
return;
|
||
}
|
||
|
||
// Trigger coverage calculation
|
||
const coverageStore = useCoverageStore.getState();
|
||
await coverageStore.calculateCoverage(sites);
|
||
|
||
// Success feedback
|
||
toast.success(`Coverage calculated for ${sites.length} site(s)!`);
|
||
} catch (error) {
|
||
toast.error(`Failed: ${error.message}`);
|
||
}
|
||
};
|
||
```
|
||
|
||
---
|
||
|
||
### 4. Legend Colors - Match New Gradient
|
||
**File:** `frontend/src/components/map/Legend.tsx`
|
||
|
||
```typescript
|
||
const signalRanges = [
|
||
{
|
||
label: 'Excellent',
|
||
range: '> -70 dBm',
|
||
color: '#f44336', // Red
|
||
description: 'Very strong signal'
|
||
},
|
||
{
|
||
label: 'Good',
|
||
range: '-70 to -85 dBm',
|
||
color: '#ff9800', // Orange
|
||
description: 'Strong signal'
|
||
},
|
||
{
|
||
label: 'Fair',
|
||
range: '-85 to -100 dBm',
|
||
color: '#ffeb3b', // Yellow
|
||
description: 'Acceptable signal'
|
||
},
|
||
{
|
||
label: 'Poor',
|
||
range: '-100 to -110 dBm',
|
||
color: '#4caf50', // Green
|
||
description: 'Weak signal'
|
||
},
|
||
{
|
||
label: 'Weak',
|
||
range: '-110 to -120 dBm',
|
||
color: '#00bcd4', // Cyan
|
||
description: 'Very weak signal'
|
||
},
|
||
{
|
||
label: 'No Service',
|
||
range: '< -120 dBm',
|
||
color: '#0d47a1', // Dark Blue
|
||
description: 'No coverage'
|
||
},
|
||
];
|
||
```
|
||
|
||
**Also update constants:**
|
||
|
||
**File:** `frontend/src/constants/rsrp-thresholds.ts`
|
||
|
||
```typescript
|
||
export const SIGNAL_COLORS = {
|
||
excellent: '#f44336', // Red
|
||
good: '#ff9800', // Orange
|
||
fair: '#ffeb3b', // Yellow
|
||
poor: '#4caf50', // Green
|
||
weak: '#00bcd4', // Cyan
|
||
'no-service': '#0d47a1' // Dark Blue
|
||
} as const;
|
||
```
|
||
|
||
---
|
||
|
||
## UI IMPROVEMENTS (Priority: HIGH)
|
||
|
||
### 5. Dark Theme Support 🌙
|
||
**Add complete dark mode with toggle**
|
||
|
||
**Files to create/update:**
|
||
- `frontend/src/store/settings.ts` - theme state
|
||
- `frontend/src/components/ui/ThemeToggle.tsx` - toggle button
|
||
- `frontend/tailwind.config.js` - dark mode config
|
||
- `frontend/src/index.css` - dark theme styles
|
||
|
||
**Implementation:**
|
||
|
||
**A) Tailwind Config:**
|
||
|
||
```javascript
|
||
// tailwind.config.js
|
||
export default {
|
||
darkMode: 'class', // Enable class-based dark mode
|
||
content: [
|
||
"./index.html",
|
||
"./src/**/*.{js,ts,jsx,tsx}",
|
||
],
|
||
theme: {
|
||
extend: {
|
||
colors: {
|
||
// Custom colors for dark mode
|
||
dark: {
|
||
bg: '#1a1a1a',
|
||
surface: '#2d2d2d',
|
||
border: '#404040',
|
||
text: '#e0e0e0',
|
||
}
|
||
}
|
||
},
|
||
},
|
||
plugins: [],
|
||
}
|
||
```
|
||
|
||
**B) Settings Store:**
|
||
|
||
```typescript
|
||
// src/store/settings.ts (create if doesn't exist)
|
||
import { create } from 'zustand';
|
||
import { persist } from 'zustand/middleware';
|
||
|
||
interface SettingsState {
|
||
theme: 'light' | 'dark' | 'system';
|
||
setTheme: (theme: 'light' | 'dark' | 'system') => void;
|
||
}
|
||
|
||
export const useSettingsStore = create<SettingsState>()(
|
||
persist(
|
||
(set) => ({
|
||
theme: 'system',
|
||
setTheme: (theme) => {
|
||
set({ theme });
|
||
applyTheme(theme);
|
||
},
|
||
}),
|
||
{
|
||
name: 'rfcp-settings',
|
||
}
|
||
)
|
||
);
|
||
|
||
function applyTheme(theme: 'light' | 'dark' | 'system') {
|
||
const root = window.document.documentElement;
|
||
|
||
if (theme === 'system') {
|
||
const systemTheme = window.matchMedia('(prefers-color-scheme: dark)').matches
|
||
? 'dark'
|
||
: 'light';
|
||
root.classList.toggle('dark', systemTheme === 'dark');
|
||
} else {
|
||
root.classList.toggle('dark', theme === 'dark');
|
||
}
|
||
}
|
||
|
||
// Apply theme on page load
|
||
if (typeof window !== 'undefined') {
|
||
const stored = localStorage.getItem('rfcp-settings');
|
||
if (stored) {
|
||
const { theme } = JSON.parse(stored);
|
||
applyTheme(theme);
|
||
}
|
||
}
|
||
```
|
||
|
||
**C) Theme Toggle Component:**
|
||
|
||
```typescript
|
||
// src/components/ui/ThemeToggle.tsx
|
||
import { useSettingsStore } from '@/store/settings';
|
||
|
||
export function ThemeToggle() {
|
||
const { theme, setTheme } = useSettingsStore();
|
||
|
||
const icons = {
|
||
light: '☀️',
|
||
dark: '🌙',
|
||
system: '💻'
|
||
};
|
||
|
||
return (
|
||
<div className="flex items-center gap-1 bg-gray-100 dark:bg-dark-surface rounded-lg p-1">
|
||
{(['light', 'dark', 'system'] as const).map((t) => (
|
||
<button
|
||
key={t}
|
||
onClick={() => setTheme(t)}
|
||
className={`
|
||
px-3 py-1.5 rounded text-sm transition-all
|
||
${theme === t
|
||
? 'bg-white dark:bg-dark-bg shadow-sm'
|
||
: 'hover:bg-gray-200 dark:hover:bg-dark-border'
|
||
}
|
||
`}
|
||
title={t.charAt(0).toUpperCase() + t.slice(1)}
|
||
>
|
||
{icons[t]}
|
||
</button>
|
||
))}
|
||
</div>
|
||
);
|
||
}
|
||
```
|
||
|
||
**D) Update App.tsx:**
|
||
|
||
```typescript
|
||
// Add ThemeToggle to header
|
||
import { ThemeToggle } from '@/components/ui/ThemeToggle';
|
||
|
||
function App() {
|
||
return (
|
||
<div className="h-screen flex flex-col bg-white dark:bg-dark-bg">
|
||
<header className="bg-slate-800 dark:bg-slate-900 text-white px-4 py-3 flex items-center justify-between">
|
||
<h1 className="text-xl font-bold">RFCP - RF Coverage Planner</h1>
|
||
<ThemeToggle />
|
||
</header>
|
||
{/* rest of app */}
|
||
</div>
|
||
);
|
||
}
|
||
```
|
||
|
||
**E) Dark Mode Styles for Components:**
|
||
|
||
Update all major components with dark mode classes:
|
||
|
||
```typescript
|
||
// Example pattern:
|
||
<div className="bg-white dark:bg-dark-surface text-gray-900 dark:text-dark-text">
|
||
{/* content */}
|
||
</div>
|
||
|
||
// Borders:
|
||
className="border border-gray-200 dark:border-dark-border"
|
||
|
||
// Inputs:
|
||
className="bg-white dark:bg-dark-bg border-gray-300 dark:border-dark-border"
|
||
|
||
// Buttons:
|
||
className="bg-blue-500 hover:bg-blue-600 dark:bg-blue-600 dark:hover:bg-blue-700"
|
||
```
|
||
|
||
**Apply dark mode to:**
|
||
- Map panels (SiteForm, SiteList, Coverage Settings)
|
||
- Legend component
|
||
- Toast notifications
|
||
- Modal overlays
|
||
- Input fields and sliders
|
||
|
||
---
|
||
|
||
### 6. Sites List - Show More Info
|
||
**Current:** Just site name
|
||
**New:** Show key parameters inline
|
||
|
||
**File:** `frontend/src/components/panels/SiteList.tsx`
|
||
|
||
```typescript
|
||
// Update site item rendering:
|
||
<div className="site-item p-3 border-b hover:bg-gray-50 dark:hover:bg-dark-surface">
|
||
<div className="flex items-center justify-between">
|
||
<div className="flex items-center gap-3">
|
||
{/* Color indicator */}
|
||
<div
|
||
className="w-4 h-4 rounded-full border-2 border-white shadow"
|
||
style={{ backgroundColor: site.color }}
|
||
/>
|
||
|
||
{/* Site info */}
|
||
<div>
|
||
<div className="font-medium text-gray-900 dark:text-dark-text">
|
||
{site.name}
|
||
</div>
|
||
<div className="text-sm text-gray-500 dark:text-gray-400">
|
||
📻 {site.frequency} MHz • ⚡ {site.power} dBm •
|
||
📡 {site.antennaType === 'omni' ? 'Omni' : `Sector ${site.azimuth}°`}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Actions */}
|
||
<div className="flex gap-1">
|
||
<Button onClick={() => onEdit(site.id)} size="sm" variant="ghost">
|
||
Edit
|
||
</Button>
|
||
<Button onClick={() => onDelete(site.id)} size="sm" variant="ghost">
|
||
×
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
```
|
||
|
||
---
|
||
|
||
### 7. Keyboard Shortcuts
|
||
**Add useful shortcuts for power users**
|
||
|
||
**File:** `frontend/src/App.tsx` or create `src/hooks/useKeyboardShortcuts.ts`
|
||
|
||
```typescript
|
||
// Create hook:
|
||
// src/hooks/useKeyboardShortcuts.ts
|
||
import { useEffect } from 'react';
|
||
import { useSitesStore } from '@/store/sites';
|
||
import { useCoverageStore } from '@/store/coverage';
|
||
import { toast } from '@/components/ui/Toast';
|
||
|
||
export function useKeyboardShortcuts() {
|
||
useEffect(() => {
|
||
const handleKeyPress = (e: KeyboardEvent) => {
|
||
// Ignore if typing in input
|
||
if (e.target instanceof HTMLInputElement ||
|
||
e.target instanceof HTMLTextAreaElement) {
|
||
return;
|
||
}
|
||
|
||
const isMac = navigator.platform.toLowerCase().includes('mac');
|
||
const modKey = isMac ? e.metaKey : e.ctrlKey;
|
||
|
||
if (modKey) {
|
||
switch(e.key.toLowerCase()) {
|
||
case 's': // Ctrl/Cmd+S: Save current site
|
||
e.preventDefault();
|
||
const selectedSite = useSitesStore.getState().selectedSite;
|
||
if (selectedSite) {
|
||
useSitesStore.getState().updateSite(selectedSite.id, selectedSite);
|
||
toast.success('Site saved');
|
||
}
|
||
break;
|
||
|
||
case 'enter': // Ctrl/Cmd+Enter: Calculate coverage
|
||
e.preventDefault();
|
||
const sites = useSitesStore.getState().sites;
|
||
if (sites.length > 0) {
|
||
useCoverageStore.getState().calculateCoverage(sites);
|
||
} else {
|
||
toast.info('Add sites first');
|
||
}
|
||
break;
|
||
|
||
case 'n': // Ctrl/Cmd+N: New site (enter placement mode)
|
||
e.preventDefault();
|
||
useSitesStore.getState().setPlacementMode(true);
|
||
toast.info('Click on map to place new site');
|
||
break;
|
||
}
|
||
}
|
||
|
||
// Non-modifier shortcuts
|
||
switch(e.key) {
|
||
case 'Escape': // Escape: Cancel/close
|
||
useSitesStore.getState().setSelectedSite(null);
|
||
useSitesStore.getState().setPlacementMode(false);
|
||
break;
|
||
|
||
case 'h': // H: Toggle heatmap
|
||
useCoverageStore.getState().toggleHeatmap();
|
||
break;
|
||
}
|
||
};
|
||
|
||
window.addEventListener('keydown', handleKeyPress);
|
||
return () => window.removeEventListener('keydown', handleKeyPress);
|
||
}, []);
|
||
}
|
||
|
||
// Use in App.tsx:
|
||
function App() {
|
||
useKeyboardShortcuts();
|
||
// ...
|
||
}
|
||
```
|
||
|
||
**Add keyboard shortcuts help:**
|
||
|
||
```typescript
|
||
// Add to header or settings:
|
||
<button
|
||
onClick={() => setShowShortcuts(true)}
|
||
className="text-sm text-gray-500 hover:text-gray-700"
|
||
title="Keyboard shortcuts"
|
||
>
|
||
⌨️
|
||
</button>
|
||
|
||
{showShortcuts && (
|
||
<div className="modal">
|
||
<h3>Keyboard Shortcuts</h3>
|
||
<ul>
|
||
<li><kbd>Ctrl/Cmd</kbd> + <kbd>S</kbd> - Save site</li>
|
||
<li><kbd>Ctrl/Cmd</kbd> + <kbd>Enter</kbd> - Calculate coverage</li>
|
||
<li><kbd>Ctrl/Cmd</kbd> + <kbd>N</kbd> - New site</li>
|
||
<li><kbd>Esc</kbd> - Cancel/Close</li>
|
||
<li><kbd>H</kbd> - Toggle heatmap</li>
|
||
</ul>
|
||
</div>
|
||
)}
|
||
```
|
||
|
||
---
|
||
|
||
### 8. Map Controls - Fit to Sites & Reset View
|
||
**Add helpful map navigation buttons**
|
||
|
||
**File:** `frontend/src/components/map/Map.tsx`
|
||
|
||
```typescript
|
||
// Add control buttons:
|
||
<div className="absolute top-4 right-4 z-[1000] flex flex-col gap-2">
|
||
{/* Fit to sites */}
|
||
<button
|
||
onClick={handleFitToSites}
|
||
className="
|
||
bg-white dark:bg-dark-surface shadow-lg rounded px-3 py-2
|
||
hover:bg-gray-50 dark:hover:bg-dark-border
|
||
transition-colors
|
||
"
|
||
title="Fit view to all sites"
|
||
disabled={sites.length === 0}
|
||
>
|
||
🎯 Fit
|
||
</button>
|
||
|
||
{/* Reset to Ukraine */}
|
||
<button
|
||
onClick={handleResetView}
|
||
className="
|
||
bg-white dark:bg-dark-surface shadow-lg rounded px-3 py-2
|
||
hover:bg-gray-50 dark:hover:bg-dark-border
|
||
transition-colors
|
||
"
|
||
title="Reset to Ukraine view"
|
||
>
|
||
🏠 Reset
|
||
</button>
|
||
</div>
|
||
|
||
// Handlers:
|
||
const handleFitToSites = () => {
|
||
if (sites.length === 0) return;
|
||
|
||
const bounds = sites.map(site => [site.lat, site.lon] as [number, number]);
|
||
mapRef.current?.fitBounds(bounds, { padding: [50, 50] });
|
||
};
|
||
|
||
const handleResetView = () => {
|
||
mapRef.current?.setView([48.4, 35.0], 6); // Ukraine center
|
||
};
|
||
```
|
||
|
||
---
|
||
|
||
### 9. Better Error Handling
|
||
**Add comprehensive error handling with helpful messages**
|
||
|
||
**File:** `frontend/src/store/coverage.ts`
|
||
|
||
```typescript
|
||
calculateCoverage: async (sites: Site[]) => {
|
||
if (sites.length === 0) {
|
||
toast.error('No sites to calculate');
|
||
return;
|
||
}
|
||
|
||
set({ isCalculating: true, error: null });
|
||
|
||
try {
|
||
const settings = get().settings;
|
||
|
||
// Validation
|
||
if (settings.radius > 100) {
|
||
throw new Error('Radius too large (max 100km)');
|
||
}
|
||
|
||
if (settings.resolution < 50) {
|
||
throw new Error('Resolution too fine (min 50m)');
|
||
}
|
||
|
||
// Calculate
|
||
const result = await calculator.calculateCoverage(sites, bounds, settings);
|
||
|
||
if (result.points.length === 0) {
|
||
toast.warning('No coverage points found. Try increasing radius or lowering threshold.');
|
||
} else {
|
||
toast.success(`Calculated ${result.points.length.toLocaleString()} points in ${(result.calculationTime / 1000).toFixed(1)}s`);
|
||
}
|
||
|
||
set({
|
||
coveragePoints: result.points,
|
||
isCalculating: false
|
||
});
|
||
|
||
} catch (error) {
|
||
console.error('Coverage calculation error:', error);
|
||
|
||
// User-friendly error messages
|
||
let message = 'Calculation failed';
|
||
|
||
if (error.message.includes('timeout')) {
|
||
message = 'Calculation timeout. Try reducing radius or increasing resolution.';
|
||
} else if (error.message.includes('worker')) {
|
||
message = 'Web Worker error. Please refresh the page.';
|
||
} else if (error.message.includes('memory')) {
|
||
message = 'Out of memory. Try smaller radius or coarser resolution.';
|
||
}
|
||
|
||
toast.error(message);
|
||
set({
|
||
error: error.message,
|
||
isCalculating: false
|
||
});
|
||
}
|
||
}
|
||
```
|
||
|
||
---
|
||
|
||
### 10. Mobile Responsiveness Improvements
|
||
**Ensure panels don't block map on mobile**
|
||
|
||
**Files:** `SiteForm.tsx`, `SiteList.tsx`, `Legend.tsx`
|
||
|
||
```typescript
|
||
// Pattern for mobile-friendly panels:
|
||
<div className="
|
||
fixed bottom-0 left-0 right-0 // Mobile: bottom sheet
|
||
md:static md:w-96 // Desktop: side panel
|
||
bg-white dark:bg-dark-surface
|
||
shadow-lg rounded-t-lg md:rounded-lg
|
||
z-[1000] md:z-auto
|
||
max-h-[70vh] md:max-h-none // Mobile: don't cover whole screen
|
||
overflow-y-auto
|
||
transform transition-transform
|
||
${isOpen ? 'translate-y-0' : 'translate-y-full md:translate-y-0'}
|
||
">
|
||
{/* Panel content */}
|
||
</div>
|
||
|
||
// Add drag handle for mobile:
|
||
<div className="md:hidden flex justify-center p-2">
|
||
<div className="w-12 h-1 bg-gray-300 rounded-full" />
|
||
</div>
|
||
```
|
||
|
||
**Touch-friendly buttons:**
|
||
```typescript
|
||
// Minimum 44x44px touch targets
|
||
<button className="
|
||
min-w-[44px] min-h-[44px]
|
||
px-4 py-2
|
||
text-base md:text-sm
|
||
">
|
||
{/* button content */}
|
||
</button>
|
||
```
|
||
|
||
---
|
||
|
||
## OPTIONAL ENHANCEMENTS (if time permits)
|
||
|
||
### 11. Calculation Stats Display
|
||
**Show useful statistics after calculation**
|
||
|
||
**File:** `frontend/src/components/map/Legend.tsx`
|
||
|
||
```typescript
|
||
{coveragePoints.length > 0 && (
|
||
<div className="mt-4 p-3 bg-blue-50 dark:bg-blue-900/20 rounded-lg text-sm">
|
||
<h4 className="font-semibold mb-2">📊 Coverage Statistics</h4>
|
||
<div className="space-y-1 text-gray-700 dark:text-gray-300">
|
||
<div>Points: {coveragePoints.length.toLocaleString()}</div>
|
||
<div>Calculation: {(calculationTime / 1000).toFixed(2)}s</div>
|
||
<div>Coverage area: ~{calculateArea()} km²</div>
|
||
<div>Sites: {sites.length}</div>
|
||
</div>
|
||
</div>
|
||
)}
|
||
```
|
||
|
||
---
|
||
|
||
### 12. Templates Verification
|
||
**Ensure quick templates work correctly**
|
||
|
||
**File:** `frontend/src/components/panels/SiteForm.tsx`
|
||
|
||
```typescript
|
||
const QUICK_TEMPLATES = {
|
||
limesdr: {
|
||
name: 'LimeSDR Mini',
|
||
power: 20,
|
||
gain: 2,
|
||
frequency: 1800,
|
||
height: 10,
|
||
antennaType: 'omni' as const
|
||
},
|
||
'low-bbu': {
|
||
name: 'Low Power BBU',
|
||
power: 40,
|
||
gain: 8,
|
||
frequency: 1800,
|
||
height: 20,
|
||
antennaType: 'omni' as const
|
||
},
|
||
'high-bbu': {
|
||
name: 'High Power BBU',
|
||
power: 43,
|
||
gain: 15,
|
||
frequency: 1800,
|
||
height: 30,
|
||
antennaType: 'sector' as const,
|
||
azimuth: 0,
|
||
beamwidth: 65
|
||
}
|
||
};
|
||
|
||
const applyTemplate = (templateId: keyof typeof QUICK_TEMPLATES) => {
|
||
const template = QUICK_TEMPLATES[templateId];
|
||
|
||
// Apply ALL fields
|
||
setFormData({
|
||
...formData,
|
||
power: template.power,
|
||
gain: template.gain,
|
||
frequency: template.frequency,
|
||
height: template.height,
|
||
antennaType: template.antennaType,
|
||
azimuth: template.azimuth || 0,
|
||
beamwidth: template.beamwidth || 65
|
||
});
|
||
|
||
toast.success(`Applied: ${template.name}`);
|
||
};
|
||
```
|
||
|
||
---
|
||
|
||
## TESTING CHECKLIST
|
||
|
||
After implementation, verify:
|
||
|
||
### Visual Tests:
|
||
- [ ] Dark theme looks good on all components
|
||
- [ ] New heatmap gradient is clearly visible (blue=weak, red=strong)
|
||
- [ ] Legend matches heatmap colors
|
||
- [ ] Sites list shows frequency, power, antenna type
|
||
- [ ] Mobile panels don't block map completely
|
||
|
||
### Functional Tests:
|
||
- [ ] "Save & Calculate" button works (saves + calculates)
|
||
- [ ] "Save Only" button still works
|
||
- [ ] Coverage radius slider goes to 100km
|
||
- [ ] Large radius (50-100km) calculates without errors
|
||
- [ ] Dark/Light/System theme toggle works
|
||
- [ ] Theme persists after page refresh
|
||
|
||
### Keyboard Shortcuts:
|
||
- [ ] Ctrl/Cmd+S saves current site
|
||
- [ ] Ctrl/Cmd+Enter calculates coverage
|
||
- [ ] Ctrl/Cmd+N enters placement mode
|
||
- [ ] Esc cancels/closes
|
||
- [ ] H toggles heatmap visibility
|
||
|
||
### Mobile Tests (if possible):
|
||
- [ ] Panels slide up from bottom on mobile
|
||
- [ ] Touch targets are large enough (44x44px)
|
||
- [ ] Sliders work with touch
|
||
- [ ] Map can be panned/zoomed on mobile
|
||
|
||
### Error Handling:
|
||
- [ ] Helpful error messages for calculation failures
|
||
- [ ] Toast notifications for all actions
|
||
- [ ] No console errors
|
||
|
||
---
|
||
|
||
## IMPLEMENTATION NOTES
|
||
|
||
1. **Start with visual changes** (colors, legend) - quick wins
|
||
2. **Then functional changes** (button, radius, dark theme)
|
||
3. **Then UX improvements** (shortcuts, mobile, errors)
|
||
4. **Test thoroughly** - especially dark theme across all components
|
||
|
||
**Performance Note:**
|
||
Current calculation is instant because it's only FSPL without terrain data.
|
||
When Phase 4 (30m terrain) is implemented, large radius will take longer.
|
||
Performance warnings can be added then.
|
||
|
||
---
|
||
|
||
## FILES TO CREATE/MODIFY
|
||
|
||
### New Files:
|
||
- `frontend/src/store/settings.ts` - theme management
|
||
- `frontend/src/components/ui/ThemeToggle.tsx` - theme switcher
|
||
- `frontend/src/hooks/useKeyboardShortcuts.ts` - keyboard shortcuts
|
||
|
||
### Modified Files:
|
||
- `frontend/tailwind.config.js` - dark mode config
|
||
- `frontend/src/index.css` - dark theme CSS variables
|
||
- `frontend/src/App.tsx` - add ThemeToggle, use shortcuts hook
|
||
- `frontend/src/components/map/Heatmap.tsx` - new gradient
|
||
- `frontend/src/components/map/Legend.tsx` - new colors + stats
|
||
- `frontend/src/components/map/Map.tsx` - Fit/Reset buttons
|
||
- `frontend/src/components/panels/SiteForm.tsx` - Save&Calculate, radius
|
||
- `frontend/src/components/panels/SiteList.tsx` - more info display
|
||
- `frontend/src/store/coverage.ts` - better error handling, defaults
|
||
- `frontend/src/constants/rsrp-thresholds.ts` - new color constants
|
||
- All UI components - add dark mode classes
|
||
|
||
---
|
||
|
||
## SUCCESS CRITERIA
|
||
|
||
✅ New heatmap gradient is clearly visible
|
||
✅ Dark theme works flawlessly
|
||
✅ Coverage radius goes to 100km
|
||
✅ "Save & Calculate" is primary action
|
||
✅ Keyboard shortcuts work
|
||
✅ Mobile responsive
|
||
✅ Better error messages
|
||
✅ No TypeScript errors
|
||
✅ All existing features still work
|
||
|
||
---
|
||
|
||
**Estimated Time:** 20-30 minutes for full implementation
|
||
**Complexity:** Medium (mostly UI updates + new theme system)
|
||
**Risk:** Low (additive changes, not breaking existing functionality)
|
||
|
||
Good luck! 🚀
|