202 lines
9.8 KiB
HTML
202 lines
9.8 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>Frequencies - The Dark Elite</title>
|
|
<meta name="viewport" content="width=device-width,initial-scale=1">
|
|
<style>
|
|
:root { --bg:#060708; --border:rgba(80,90,100,0.2); --accent:#22d3ee; --text:#e5e7eb; --muted:#9ca3af; --danger:#dc2626; }
|
|
*{box-sizing:border-box}
|
|
body{margin:0;background:var(--bg);color:var(--text);font-family:system-ui,sans-serif;min-height:100vh}
|
|
.container{max-width:1300px;margin:0 auto;padding:2rem}
|
|
header{display:flex;justify-content:space-between;align-items:center;padding-bottom:1.5rem;border-bottom:1px solid var(--border);margin-bottom:2rem}
|
|
header h1{margin:0;font-size:1.5rem;letter-spacing:0.2em;text-transform:uppercase;color:var(--accent);text-shadow:0 0 12px rgba(34,211,238,0.4)}
|
|
header a{color:var(--muted);text-decoration:none;font-size:0.85rem}
|
|
header a:hover{color:var(--accent)}
|
|
.section-title{font-size:0.75rem;letter-spacing:0.25em;text-transform:uppercase;color:var(--accent);border-left:3px solid var(--accent);padding-left:0.75rem;margin:2rem 0 1rem 0;display:flex;justify-content:space-between;align-items:center}
|
|
.controls{display:flex;gap:0.5rem;flex-wrap:wrap}
|
|
.controls input,.controls select{background:rgba(10,11,13,0.6);border:1px solid var(--border);color:var(--text);padding:0.4rem 0.7rem;border-radius:4px;font-size:0.8rem;font-family:ui-monospace,monospace}
|
|
.controls input:focus,.controls select:focus{outline:none;border-color:var(--accent)}
|
|
.add-form{background:linear-gradient(135deg,rgba(18,20,24,0.7),rgba(10,11,13,0.85));border:1px solid var(--border);border-radius:8px;padding:1.25rem;display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:0.75rem;margin-bottom:2rem}
|
|
.add-form input,.add-form select{background:rgba(10,11,13,0.6);border:1px solid var(--border);color:var(--text);padding:0.55rem 0.7rem;border-radius:4px;font-size:0.85rem;font-family:ui-monospace,monospace}
|
|
.add-form input:focus,.add-form select:focus{outline:none;border-color:var(--accent)}
|
|
.add-form .full{grid-column:1/-1}
|
|
.add-form button{background:rgba(34,211,238,0.15);border:1px solid var(--accent);color:var(--accent);padding:0.55rem;border-radius:4px;font-size:0.8rem;cursor:pointer;letter-spacing:0.1em;text-transform:uppercase;font-family:ui-monospace,monospace}
|
|
.add-form button:hover{background:rgba(34,211,238,0.25)}
|
|
table{width:100%;border-collapse:collapse;font-size:0.85rem;font-family:ui-monospace,monospace}
|
|
th{text-align:left;color:var(--muted);font-weight:400;text-transform:uppercase;letter-spacing:0.1em;font-size:0.7rem;padding:0.7rem 0.5rem;border-bottom:1px solid var(--border);position:sticky;top:0;background:var(--bg);cursor:pointer;user-select:none}
|
|
th:hover{color:var(--accent)}
|
|
td{padding:0.7rem 0.5rem;border-bottom:1px solid rgba(80,90,100,0.1)}
|
|
tr:hover td{background:rgba(34,211,238,0.04)}
|
|
td.freq{color:var(--accent);font-weight:600}
|
|
td.editable{cursor:text}
|
|
td.editable:hover{background:rgba(34,211,238,0.08)}
|
|
td input{background:rgba(10,11,13,0.9);border:1px solid var(--accent);color:var(--accent);padding:0.2rem 0.4rem;border-radius:3px;font:inherit;width:100%;outline:none}
|
|
.del{color:var(--muted);cursor:pointer;font-size:0.7rem;text-transform:uppercase;letter-spacing:0.1em}
|
|
.del:hover{color:var(--danger)}
|
|
.empty{color:var(--muted);text-align:center;padding:2rem;font-style:italic}
|
|
.toast{position:fixed;bottom:2rem;right:2rem;background:rgba(18,20,24,0.95);border:1px solid var(--accent);color:var(--accent);padding:0.8rem 1.2rem;border-radius:4px;font-family:ui-monospace,monospace;font-size:0.85rem;z-index:100;display:none}
|
|
.tag-pill{display:inline-block;background:rgba(34,211,238,0.12);border:1px solid rgba(34,211,238,0.3);color:rgb(165,235,247);font-size:0.65rem;padding:0.1rem 0.4rem;border-radius:3px;text-transform:uppercase;letter-spacing:0.1em}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<header>
|
|
<div><h1>Frequencies</h1></div>
|
|
<a href="/" style="color:#9ca3af;text-decoration:none;font-size:0.85rem">← Hub</a>
|
|
</header>
|
|
|
|
<div class="section-title">Add Frequency</div>
|
|
<form class="add-form" id="addForm">
|
|
<input name="freq" placeholder="Freq (MHz)" required>
|
|
<input name="name" placeholder="Name / Callsign">
|
|
<select name="band">
|
|
<option value="">Band</option>
|
|
<option>HF-160m</option><option>HF-80m</option><option>HF-40m</option><option>HF-20m</option><option>HF-15m</option><option>HF-10m</option>
|
|
<option>VHF-6m</option><option>VHF-2m</option><option>UHF-70cm</option><option>UHF-33cm</option><option>UHF-23cm</option>
|
|
<option>GMRS</option><option>FRS</option><option>MURS</option><option>CB</option>
|
|
<option>NOAA</option><option>Marine</option><option>Aircraft</option>
|
|
<option>Public Safety</option><option>Business</option><option>Mil-Air</option>
|
|
<option>Mesh</option><option>Other</option>
|
|
</select>
|
|
<select name="mode">
|
|
<option value="">Mode</option>
|
|
<option>FM</option><option>AM</option><option>SSB-USB</option><option>SSB-LSB</option>
|
|
<option>CW</option><option>DMR</option><option>D-STAR</option><option>YSF</option>
|
|
<option>P25</option><option>NXDN</option><option>DSTAR</option><option>FT8</option>
|
|
<option>FT4</option><option>PSK31</option><option>RTTY</option><option>APRS</option>
|
|
<option>Packet</option><option>LoRa</option>
|
|
</select>
|
|
<input name="tone" placeholder="Tone (CTCSS/DCS)">
|
|
<input name="offset" placeholder="Offset (+/- MHz)">
|
|
<input name="tag" placeholder="Tag (repeater, simplex, net)">
|
|
<input name="description" class="full" placeholder="Description / notes">
|
|
<button type="submit" class="full">+ Add Frequency</button>
|
|
</form>
|
|
|
|
<div class="section-title">
|
|
Saved Frequencies
|
|
<div class="controls">
|
|
<select id="filterBand"><option value="">All Bands</option></select>
|
|
<input type="text" id="search" placeholder="Filter...">
|
|
</div>
|
|
</div>
|
|
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th data-sort="freq">Freq</th>
|
|
<th data-sort="name">Name</th>
|
|
<th data-sort="band">Band</th>
|
|
<th data-sort="mode">Mode</th>
|
|
<th data-sort="tone">Tone</th>
|
|
<th data-sort="offset">Offset</th>
|
|
<th data-sort="tag">Tag</th>
|
|
<th data-sort="description">Description</th>
|
|
<th></th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="rows"><tr><td colspan="9" class="empty">Loading...</td></tr></tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<div id="toast" class="toast"></div>
|
|
|
|
<script>
|
|
let all=[]; let sortKey="band"; let sortDir=1;
|
|
const FIELDS=["freq","name","band","mode","tone","offset","tag","description"];
|
|
|
|
function toast(m){const t=document.getElementById("toast");t.textContent=m;t.style.display="block";setTimeout(()=>t.style.display="none",2000);}
|
|
|
|
async function load(){
|
|
const r=await fetch("/freqs/api/list");
|
|
all=await r.json();
|
|
populateBands();
|
|
render();
|
|
}
|
|
|
|
function populateBands(){
|
|
const bands=[...new Set(all.map(x=>x.band).filter(Boolean))].sort();
|
|
const sel=document.getElementById("filterBand");
|
|
const cur=sel.value;
|
|
sel.innerHTML='<option value="">All Bands</option>'+bands.map(b=>'<option>'+b+'</option>').join("");
|
|
sel.value=cur;
|
|
}
|
|
|
|
function render(){
|
|
const q=document.getElementById("search").value.toLowerCase();
|
|
const band=document.getElementById("filterBand").value;
|
|
let items=all.filter(x=>{
|
|
if(band && x.band!==band)return false;
|
|
if(q){const s=FIELDS.map(f=>(x[f]||"")).join(" ").toLowerCase();if(!s.includes(q))return false;}
|
|
return true;
|
|
});
|
|
items.sort((a,b)=>{
|
|
const va=(a[sortKey]||""), vb=(b[sortKey]||"");
|
|
if(sortKey==="freq"){return ((parseFloat(va)||0)-(parseFloat(vb)||0))*sortDir;}
|
|
return String(va).localeCompare(String(vb))*sortDir;
|
|
});
|
|
const tbody=document.getElementById("rows");
|
|
if(!items.length){tbody.innerHTML='<tr><td colspan="9" class="empty">No frequencies yet. Add one above.</td></tr>';return;}
|
|
tbody.innerHTML=items.map(x=>'<tr data-id="'+x.id+'">'+
|
|
'<td class="freq editable" data-f="freq">'+(x.freq||"")+'</td>'+
|
|
'<td class="editable" data-f="name">'+(x.name||"")+'</td>'+
|
|
'<td class="editable" data-f="band">'+(x.band?'<span class="tag-pill">'+x.band+'</span>':"")+'</td>'+
|
|
'<td class="editable" data-f="mode">'+(x.mode||"")+'</td>'+
|
|
'<td class="editable" data-f="tone">'+(x.tone||"")+'</td>'+
|
|
'<td class="editable" data-f="offset">'+(x.offset||"")+'</td>'+
|
|
'<td class="editable" data-f="tag">'+(x.tag||"")+'</td>'+
|
|
'<td class="editable" data-f="description" style="max-width:280px">'+(x.description||"")+'</td>'+
|
|
'<td><span class="del" data-id="'+x.id+'">Del</span></td>'+
|
|
'</tr>').join("");
|
|
}
|
|
|
|
document.getElementById("addForm").addEventListener("submit",async e=>{
|
|
e.preventDefault();
|
|
const fd=new FormData(e.target);
|
|
const r=await fetch("/freqs/api/add",{method:"POST",body:fd});
|
|
if(r.ok){toast("Added");e.target.reset();load();}
|
|
else toast("Failed");
|
|
});
|
|
|
|
document.querySelectorAll("th[data-sort]").forEach(th=>{
|
|
th.addEventListener("click",()=>{
|
|
const k=th.dataset.sort;
|
|
if(sortKey===k)sortDir*=-1; else {sortKey=k;sortDir=1;}
|
|
render();
|
|
});
|
|
});
|
|
|
|
document.getElementById("search").addEventListener("input",render);
|
|
document.getElementById("filterBand").addEventListener("change",render);
|
|
|
|
document.getElementById("rows").addEventListener("click",async e=>{
|
|
if(e.target.classList.contains("del")){
|
|
const id=e.target.dataset.id;
|
|
if(!confirm("Delete this frequency?"))return;
|
|
await fetch("/freqs/api/delete/"+id,{method:"DELETE"});
|
|
toast("Deleted");load();
|
|
return;
|
|
}
|
|
const td=e.target.closest("td.editable");
|
|
if(!td || td.querySelector("input"))return;
|
|
const id=td.parentElement.dataset.id;
|
|
const field=td.dataset.f;
|
|
const cur=field==="band"?(td.textContent||"").trim():td.textContent;
|
|
td.innerHTML='<input type="text" value="'+cur.replace(/"/g,""")+'">';
|
|
const inp=td.querySelector("input"); inp.focus(); inp.select();
|
|
const save=async()=>{
|
|
const val=inp.value;
|
|
const fd=new FormData(); fd.append(field,val);
|
|
await fetch("/freqs/api/update/"+id,{method:"PATCH",body:fd});
|
|
toast("Updated");load();
|
|
};
|
|
inp.addEventListener("blur",save);
|
|
inp.addEventListener("keydown",ev=>{if(ev.key==="Enter")inp.blur();if(ev.key==="Escape"){td.textContent=cur;}});
|
|
});
|
|
|
|
load();
|
|
</script>
|
|
</body>
|
|
</html>
|