287 lines
23 KiB
HTML
287 lines
23 KiB
HTML
{% extends "base.html" %}
|
||
|
||
{% block content %}
|
||
<section id="ksp-location-board" aria-label="太阳系地点板">
|
||
<header class="location-toolbar">
|
||
<nav class="location-breadcrumbs" id="location-breadcrumbs" aria-label="地图层级"></nav>
|
||
<div class="location-summary">
|
||
<label class="transfer-toggle" for="transfer-toggle">
|
||
<input id="transfer-toggle" type="checkbox">
|
||
<span>全部转移轨迹</span>
|
||
</label>
|
||
<span id="scope-count">0 assets</span>
|
||
<span class="live-status"><i></i>实时星历</span>
|
||
<button class="location-reset" id="location-reset" type="button">重置</button>
|
||
</div>
|
||
</header>
|
||
|
||
<div class="location-layout">
|
||
<main class="location-map" id="location-map">
|
||
<svg id="space-map" viewBox="0 0 1000 620" preserveAspectRatio="xMidYMid meet" role="img" aria-labelledby="map-title map-desc">
|
||
<title id="map-title">太阳系资产位置地图</title>
|
||
<desc id="map-desc">从太阳系全局钻取到行星系统、行星和卫星，并查看实际转移航路。</desc>
|
||
<g id="orbit-layer"></g>
|
||
<g id="route-layer"></g>
|
||
<g id="asset-layer"></g>
|
||
</svg>
|
||
<div class="body-layer" id="body-layer"></div>
|
||
<div class="map-caption"><span id="view-mode">SOLAR SYSTEM</span><b id="map-caption">选择天体或转移资产</b></div>
|
||
<div class="map-legend" aria-label="图例">
|
||
<span><i class="asset-dot"></i>资产位置</span>
|
||
<span><i class="progress-line"></i>已完成航程</span>
|
||
<span><i class="remaining-line"></i>剩余航程</span>
|
||
</div>
|
||
</main>
|
||
|
||
<aside class="asset-panel">
|
||
<div class="asset-panel-head">
|
||
<div><span>ASSETS IN SCOPE</span><h2 id="scope-title">Solar System</h2></div>
|
||
<b id="panel-count">0</b>
|
||
</div>
|
||
<div class="asset-list" id="asset-list"></div>
|
||
</aside>
|
||
|
||
<aside class="asset-drawer" id="asset-drawer" aria-hidden="true">
|
||
<button class="drawer-close" id="drawer-close" type="button" aria-label="关闭详情">×</button>
|
||
<span class="drawer-eyebrow">ASSET DETAIL</span>
|
||
<h2 id="drawer-name"></h2>
|
||
<div class="drawer-fields" id="drawer-fields"></div>
|
||
<a class="drawer-link" id="drawer-link" href="#">打开资产详情页</a>
|
||
</aside>
|
||
</div>
|
||
</section>
|
||
|
||
<script id="location-assets-data" type="application/json">{{ asset_positions|tojson }}</script>
|
||
|
||
<style>
|
||
#ksp-location-board{position:absolute;inset:0;display:grid;grid-template-rows:auto minmax(0,1fr);overflow:hidden;background:var(--bg);color:var(--text);font-size:clamp(12px,.28vw + 8px,22px)}
|
||
#ksp-location-board button,#ksp-location-board a{font:inherit}
|
||
.location-toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:48px;padding:8px clamp(14px,1vw,30px);border-bottom:1px solid var(--border);background:var(--surface)}
|
||
.location-breadcrumbs,.location-summary{display:flex;align-items:center;gap:9px;min-width:0}
|
||
.location-breadcrumbs button{padding:0;border:0;background:transparent;color:var(--muted);cursor:pointer}
|
||
.location-breadcrumbs button.current{color:var(--text);font-weight:600}.location-breadcrumbs .sep{color:var(--muted)}
|
||
.location-summary{color:var(--muted);white-space:nowrap}.live-status{display:flex;align-items:center;gap:5px}.live-status i{width:7px;height:7px;border-radius:50%;background:var(--amber)}
|
||
.transfer-toggle{display:flex;align-items:center;gap:7px;cursor:pointer;color:var(--text)}.transfer-toggle input{accent-color:var(--accent)}
|
||
.location-reset{padding:4px 9px;border:1px solid var(--border);border-radius:4px;background:transparent;color:var(--muted);cursor:pointer}.location-reset:hover{color:var(--text);background:var(--surface2)}
|
||
.location-layout{position:relative;display:grid;grid-template-columns:minmax(0,1fr) clamp(270px,20vw,540px);min-width:0;min-height:0}
|
||
.location-map{position:relative;min-width:0;min-height:0;overflow:hidden;background:radial-gradient(circle at 50% 50%,rgba(59,130,246,.09),transparent 44%),var(--bg)}
|
||
#space-map{display:block;width:100%;height:100%}.body-layer{position:absolute;inset:0;pointer-events:none}
|
||
.asset-panel{display:grid;grid-template-rows:auto minmax(0,1fr);min-height:0;padding:clamp(14px,1vw,28px);border-left:1px solid var(--border);background:var(--surface)}
|
||
.asset-panel-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;padding-bottom:10px;border-bottom:1px solid var(--border)}
|
||
.asset-panel-head span,.drawer-eyebrow{color:var(--muted);font-family:var(--font-data);font-size:.7em;letter-spacing:.08em}.asset-panel-head h2{margin-top:4px;font-size:1.2em}.asset-panel-head b{padding:4px 8px;background:rgba(59,130,246,.12);color:var(--accent);font-family:var(--font-data)}
|
||
.asset-list{min-height:0;overflow-y:auto}.asset-button{display:flex;align-items:center;gap:9px;width:100%;padding:clamp(9px,.55vw,18px) 3px;border:0;border-bottom:1px solid var(--border);background:transparent;color:var(--text);text-align:left;cursor:pointer}.asset-button::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--amber);flex:0 0 auto}.asset-button.planned::before{background:var(--purple)}.asset-button:hover,.asset-button.selected{background:rgba(59,130,246,.08)}
|
||
.asset-empty{padding:18px 2px;color:var(--muted)}
|
||
.body-button{--planet-size:16px;position:absolute;transform:translate(-50%,-50%);display:block;width:var(--planet-size);height:var(--planet-size);padding:0;border:0;background:transparent;color:var(--text);pointer-events:auto;cursor:pointer;overflow:visible}
|
||
.planet-disc{display:block;width:100%;height:100%;border:1px solid var(--muted);border-radius:50%;background:var(--surface2)}.body-button.sun .planet-disc{border-color:var(--text);background:#74b4ec;box-shadow:0 0 26px rgba(116,180,236,.42)}.body-button.minor .planet-disc{border-style:dashed;background:rgba(148,163,184,.12)}.body-button:hover .planet-disc,.body-button:focus-visible .planet-disc{outline:2px solid var(--accent);outline-offset:3px}
|
||
.body-label{position:absolute;top:calc(100% + 5px);left:50%;transform:translateX(-50%);color:var(--muted);white-space:nowrap;pointer-events:none}
|
||
.map-caption{position:absolute;top:16px;left:18px;display:flex;align-items:center;gap:9px;max-width:70%;pointer-events:none}.map-caption span{padding:5px 8px;background:rgba(59,130,246,.12);color:#7ab8f6;font-family:var(--font-data)}.map-caption b{font-weight:500}
|
||
.map-legend{position:absolute;bottom:16px;left:18px;display:flex;gap:14px;padding:8px 10px;border:1px solid var(--border);background:rgba(19,19,24,.88);color:var(--text)}.map-legend span{display:flex;align-items:center;gap:6px}.asset-dot{width:7px;height:7px;border-radius:50%;background:var(--amber)}.progress-line,.remaining-line{display:inline-block;width:24px;border-top:2px solid #72b4f4}.remaining-line{border-top:1px dashed var(--muted)}
|
||
.orbit{fill:none;stroke:rgba(148,163,184,.18);stroke-width:1.1}.orbit.strong{stroke:rgba(248,250,252,.48);stroke-width:1.35}.orbit.minor{stroke-dasharray:3 7;opacity:.65}
|
||
.transfer-track{fill:none;stroke:rgba(148,163,184,.38);stroke-width:1.25;stroke-dasharray:4 8}.transfer-progress{fill:none;stroke:#72b4f4;stroke-width:2.25}.route-endpoint{fill:var(--bg);stroke:#72b4f4;stroke-width:1.6}.route-vessel-dot{fill:var(--bg);stroke:#72b4f4;stroke-width:2.5}.route-vessel-heading{stroke:#72b4f4;stroke-width:2;stroke-linecap:round}.route-label-leader{stroke:var(--muted);stroke-width:1;opacity:.7}.route-label-title,.route-label-meta{font-family:var(--font-ui);paint-order:stroke;stroke:var(--bg);stroke-linejoin:round}.route-label-title{fill:var(--text);font-size:12px;font-weight:600;stroke-width:3}.route-label-meta{fill:var(--muted);font-size:10px;stroke-width:3}.route-group.hidden{display:none}
|
||
.map-asset{fill:var(--amber);stroke:var(--bg);stroke-width:2}.map-asset-label{fill:var(--text);font-size:11px;font-family:var(--font-ui);paint-order:stroke;stroke:var(--bg);stroke-width:3;stroke-linejoin:round}
|
||
.asset-drawer{--panel-width:clamp(270px,20vw,540px);position:absolute;z-index:8;top:0;right:var(--panel-width);bottom:0;width:clamp(320px,23vw,620px);display:flex;flex-direction:column;gap:clamp(13px,.8vw,24px);padding:clamp(18px,1.2vw,36px);border-left:1px solid var(--border);background:var(--surface2);transform:translateX(calc(100% + var(--panel-width)));transition:transform .18s ease;pointer-events:none}.asset-drawer.open{transform:translateX(0);pointer-events:auto}.drawer-close{align-self:flex-end;width:30px;height:30px;border:1px solid var(--border);border-radius:4px;background:transparent;color:var(--muted);font-size:20px;cursor:pointer}.asset-drawer h2{font-size:1.4em}.drawer-fields{display:grid;gap:10px}.drawer-field{padding-top:9px;border-top:1px solid var(--border)}.drawer-field span,.drawer-field strong{display:block}.drawer-field span{margin-bottom:3px;color:var(--muted);font-size:.78em}.drawer-field strong{font-weight:500;overflow-wrap:anywhere}.drawer-link{margin-top:auto;padding:9px 12px;border-radius:4px;background:var(--accent);color:#fff;text-align:center}.drawer-link:hover{text-decoration:none;filter:brightness(1.08)}
|
||
@media(max-width:900px){.location-layout{grid-template-columns:minmax(0,1fr) 230px}.asset-drawer{--panel-width:230px;right:230px;width:300px}.live-status{display:none}.map-legend{display:none}}
|
||
@media(max-width:680px){.location-toolbar{align-items:flex-start;flex-direction:column}.location-summary{width:100%;overflow-x:auto}.location-layout{grid-template-columns:minmax(0,1fr) 180px}.asset-drawer{--panel-width:180px;right:180px;width:280px}.map-caption{max-width:90%}}
|
||
</style>
|
||
{% endblock %}
|
||
|
||
{% block scripts %}
|
||
<script>
|
||
(() => {
|
||
const root = document.getElementById('ksp-location-board');
|
||
const assets = JSON.parse(document.getElementById('location-assets-data').textContent);
|
||
const ns = 'http://www.w3.org/2000/svg';
|
||
const layers = {
|
||
orbit: root.querySelector('#orbit-layer'),
|
||
route: root.querySelector('#route-layer'),
|
||
asset: root.querySelector('#asset-layer')
|
||
};
|
||
const systems = {
|
||
mercury:{name:'Mercury',moons:[]}, venus:{name:'Venus',moons:[]}, earth:{name:'Earth',moons:['moon']},
|
||
mars:{name:'Mars',moons:['phobos','deimos']}, ceres:{name:'Ceres',moons:[]}, vesta:{name:'Vesta',moons:[]},
|
||
jupiter:{name:'Jupiter',moons:['io','europa','ganymede','callisto']},
|
||
saturn:{name:'Saturn',moons:['mimas','enceladus','tethys','dione','rhea','titan','iapetus']},
|
||
uranus:{name:'Uranus',moons:['miranda','ariel','umbriel','titania','oberon']},
|
||
neptune:{name:'Neptune',moons:['triton']}, pluto:{name:'Pluto',moons:['charon']}
|
||
};
|
||
const bodyNames = {sun:'Sun',mercury:'Mercury',venus:'Venus',earth:'Earth',moon:'Moon',mars:'Mars',phobos:'Phobos',deimos:'Deimos',ceres:'Ceres',vesta:'Vesta',jupiter:'Jupiter',io:'Io',europa:'Europa',ganymede:'Ganymede',callisto:'Callisto',saturn:'Saturn',mimas:'Mimas',enceladus:'Enceladus',tethys:'Tethys',dione:'Dione',rhea:'Rhea',titan:'Titan',iapetus:'Iapetus',uranus:'Uranus',miranda:'Miranda',ariel:'Ariel',umbriel:'Umbriel',titania:'Titania',oberon:'Oberon',neptune:'Neptune',triton:'Triton',pluto:'Pluto',charon:'Charon',unknown:'Unknown'};
|
||
const moonSystems = {moon:'earth',phobos:'mars',deimos:'mars',io:'jupiter',europa:'jupiter',ganymede:'jupiter',callisto:'jupiter',mimas:'saturn',enceladus:'saturn',tethys:'saturn',dione:'saturn',rhea:'saturn',titan:'saturn',iapetus:'saturn',miranda:'uranus',ariel:'uranus',umbriel:'uranus',titania:'uranus',oberon:'uranus',triton:'neptune',charon:'pluto'};
|
||
const planets = [
|
||
{id:'mercury',angle:-35,size:9,orbit:50},{id:'venus',angle:60,size:12,orbit:78},{id:'earth',angle:-22,size:13,orbit:110},{id:'mars',angle:125,size:11,orbit:140},
|
||
{id:'vesta',angle:-135,size:7,orbit:160,kind:'minor'},{id:'ceres',angle:150,size:8,orbit:176,kind:'minor'},{id:'jupiter',angle:32,size:25,orbit:215},
|
||
{id:'saturn',angle:210,size:22,orbit:260},{id:'uranus',angle:-28,size:17,orbit:310},{id:'neptune',angle:145,size:17,orbit:360},{id:'pluto',angle:210,size:10,orbit:420,kind:'minor'}
|
||
];
|
||
let view = {level:'solar',system:null,body:null};
|
||
let selectedRoute = null;
|
||
let showAllRoutes = false;
|
||
let bodyPoints = {};
|
||
|
||
function svgEl(tag, attrs, text) {
|
||
const node = document.createElementNS(ns, tag);
|
||
Object.entries(attrs || {}).forEach(([key, value]) => node.setAttribute(key, String(value)));
|
||
if (text !== undefined) node.textContent = text;
|
||
return node;
|
||
}
|
||
function clearMap() {
|
||
Object.values(layers).forEach(layer => layer.replaceChildren());
|
||
root.querySelector('#body-layer').replaceChildren();
|
||
bodyPoints = {};
|
||
}
|
||
function orbit(cx, cy, rx, ry, strong=false, kind='') {
|
||
layers.orbit.append(svgEl('ellipse', {cx,cy,rx,ry,class:'orbit '+(strong?'strong ':'')+(kind==='minor'?'minor':'')}));
|
||
}
|
||
function planetPoint(planet) {
|
||
const angle = planet.angle * Math.PI / 180;
|
||
return {x:500 + Math.cos(angle) * planet.orbit, y:310 + Math.sin(angle) * planet.orbit * .6};
|
||
}
|
||
function mapPoint(x,y) {
|
||
const stage = root.querySelector('#location-map');
|
||
const width = stage.clientWidth || 1000;
|
||
const height = stage.clientHeight || 620;
|
||
const scale = Math.min(width/1000,height/620);
|
||
return {x:(width-1000*scale)/2+x*scale,y:(height-620*scale)/2+y*scale};
|
||
}
|
||
function bodyButton(id, name, x, y, size, sun=false, kind='') {
|
||
bodyPoints[id] = {x,y};
|
||
const point = mapPoint(x,y);
|
||
const button = document.createElement('button');
|
||
button.type = 'button';
|
||
button.className = 'body-button '+(sun?'sun ':'')+(kind==='minor'?'minor':'');
|
||
button.style.left = point.x+'px';
|
||
button.style.top = point.y+'px';
|
||
button.style.setProperty('--planet-size','clamp('+size+'px,'+(size/10).toFixed(2)+'vw,'+(size*2)+'px)');
|
||
button.setAttribute('aria-label','打开 '+name);
|
||
const disc = document.createElement('span'); disc.className = 'planet-disc';
|
||
const label = document.createElement('span'); label.className = 'body-label'; label.textContent = name;
|
||
button.append(disc,label);
|
||
button.addEventListener('click',()=>openBody(id));
|
||
root.querySelector('#body-layer').append(button);
|
||
}
|
||
function systemForBody(body) { return moonSystems[body] || body; }
|
||
function visibleTransfer(asset) {
|
||
if (!asset.transfer) return false;
|
||
if (view.level === 'system') return asset.scope === view.system;
|
||
return view.level === 'solar' || view.system === 'sun' ? asset.scope === 'sun' : false;
|
||
}
|
||
function transferPoint(body) {
|
||
const system = systemForBody(body);
|
||
return bodyPoints[body] || bodyPoints[system] || null;
|
||
}
|
||
function drawTransfer(asset, index) {
|
||
if (!visibleTransfer(asset)) return;
|
||
const from = transferPoint(asset.transfer.from);
|
||
const to = transferPoint(asset.transfer.to);
|
||
if (!from || !to) return;
|
||
const bend = index % 2 ? -1 : 1;
|
||
const mx = (from.x + to.x) / 2;
|
||
const my = (from.y + to.y) / 2;
|
||
const dx = to.x-from.x, dy = to.y-from.y;
|
||
const length = Math.max(1,Math.hypot(dx,dy));
|
||
const offset = Math.min(85,length*.24)*bend;
|
||
const cx = mx-dy/length*offset, cy = my+dx/length*offset;
|
||
const d = `M${from.x} ${from.y} Q${cx} ${cy} ${to.x} ${to.y}`;
|
||
const group = svgEl('g',{class:'route-group'+((showAllRoutes||selectedRoute===asset.id)?'':' hidden')});
|
||
layers.route.append(group);
|
||
const track = svgEl('path',{d,class:'transfer-track',pathLength:100}); group.append(track);
|
||
group.append(svgEl('path',{d,class:'transfer-progress',pathLength:100,'stroke-dasharray':asset.transfer.progress+' '+(100-asset.transfer.progress)}));
|
||
const total = track.getTotalLength();
|
||
const start = track.getPointAtLength(0), end = track.getPointAtLength(total);
|
||
const point = track.getPointAtLength(total*asset.transfer.progress/100);
|
||
const before = track.getPointAtLength(Math.max(0,total*asset.transfer.progress/100-2));
|
||
const angle = Math.atan2(point.y-before.y,point.x-before.x)*180/Math.PI;
|
||
group.append(svgEl('circle',{cx:start.x,cy:start.y,r:4,class:'route-endpoint'}));
|
||
group.append(svgEl('circle',{cx:end.x,cy:end.y,r:4,class:'route-endpoint'}));
|
||
const vessel = svgEl('g',{transform:`translate(${point.x} ${point.y}) rotate(${angle})`});
|
||
vessel.append(svgEl('circle',{cx:0,cy:0,r:6,class:'route-vessel-dot'}));
|
||
vessel.append(svgEl('line',{x1:5,y1:0,x2:15,y2:0,class:'route-vessel-heading'}));
|
||
group.append(vessel);
|
||
const side = point.x > 760 ? -1 : 1;
|
||
const labelX = point.x+side*24, labelY = point.y>340?point.y-20:point.y+27;
|
||
const anchor = side<0?'end':'start';
|
||
group.append(svgEl('line',{x1:point.x+side*8,y1:point.y-2,x2:labelX-side*4,y2:labelY-5,class:'route-label-leader'}));
|
||
group.append(svgEl('text',{x:labelX,y:labelY,'text-anchor':anchor,class:'route-label-title'},asset.name));
|
||
group.append(svgEl('text',{x:labelX,y:labelY+14,'text-anchor':anchor,class:'route-label-meta'},`${bodyNames[asset.transfer.from]||asset.transfer.from} → ${bodyNames[asset.transfer.to]||asset.transfer.to} · ${asset.transfer.progress}%`));
|
||
}
|
||
function drawAsset(x,y,label) {
|
||
layers.asset.append(svgEl('circle',{cx:x,cy:y,r:5,class:'map-asset'}));
|
||
layers.asset.append(svgEl('text',{x:x+10,y:y+4,class:'map-asset-label'},label));
|
||
}
|
||
function drawSolar() {
|
||
planets.forEach(p=>orbit(500,310,p.orbit,p.orbit*.6,p.id==='earth'||p.id==='mars',p.kind));
|
||
bodyButton('sun','Sun',500,310,34,true);
|
||
planets.forEach(p=>{const point=planetPoint(p);bodyButton(p.id,systems[p.id].name,point.x,point.y,p.size,false,p.kind)});
|
||
currentAssets().filter(a=>!a.transfer&&a.scope==='sun').slice(0,12).forEach((a,i)=>{const angle=.55+i*1.15;const radius=48+(i%4)*28;drawAsset(500+Math.cos(angle)*radius,310+Math.sin(angle)*radius*.6,a.name)});
|
||
assets.filter(a=>a.transfer).forEach(drawTransfer);
|
||
}
|
||
function drawSystem(systemId) {
|
||
const system = systems[systemId]; if (!system) return;
|
||
bodyButton(systemId,system.name,500,310,48);
|
||
const step = system.moons.length>5?42:system.moons.length>3?48:58;
|
||
system.moons.forEach((moon,index)=>{const radius=105+index*step;orbit(500,310,radius,radius*.7,index===0);const angle=.7+index*1.45;bodyButton(moon,bodyNames[moon],500+Math.cos(angle)*radius,310+Math.sin(angle)*radius*.7,12+(index%3)*2)});
|
||
assets.filter(a=>a.transfer).forEach(drawTransfer);
|
||
}
|
||
function drawLocal(bodyId) {
|
||
bodyButton(bodyId,systems[bodyId]?.name||bodyNames[bodyId]||bodyId,500,310,68,bodyId==='sun');
|
||
orbit(500,310,115,72,true); orbit(500,310,180,112); orbit(500,310,255,158);
|
||
currentAssets().filter(a=>!a.transfer).slice(0,20).forEach((a,index)=>{const angle=.4+index*.78;const radius=115+(index%3)*65;drawAsset(500+Math.cos(angle)*radius,310+Math.sin(angle)*radius*.62,a.name)});
|
||
}
|
||
function openBody(id) {
|
||
selectedRoute = null;
|
||
if (view.level==='solar') view = id==='sun'?{level:'local',system:'sun',body:'sun'}:{level:'system',system:id,body:null};
|
||
else if (view.level==='system') view = {level:'local',system:view.system,body:id};
|
||
else if (view.system==='sun'&&id!=='sun') view = {level:'system',system:id,body:null};
|
||
render();
|
||
}
|
||
function currentAssets() {
|
||
if (view.level==='solar') return assets;
|
||
if (view.system==='sun') return assets.filter(a=>a.scope==='sun');
|
||
if (view.level==='system') return assets.filter(a=>a.scope===view.system);
|
||
return assets.filter(a=>a.body===view.body);
|
||
}
|
||
function scopeName() {
|
||
if (view.level==='solar') return 'Solar System';
|
||
if (view.system==='sun') return 'Heliocentric Assets';
|
||
if (view.level==='system') return systems[view.system].name+' System';
|
||
return systems[view.body]?.name||bodyNames[view.body]||view.body;
|
||
}
|
||
function renderBreadcrumbs() {
|
||
const wrap = root.querySelector('#location-breadcrumbs'); wrap.replaceChildren();
|
||
const items = [{label:'Solar System',action:()=>{view={level:'solar',system:null,body:null};selectedRoute=null;render()}}];
|
||
if (view.level!=='solar'&&view.system!=='sun') items.push({label:systems[view.system].name+' System',action:()=>{view={level:'system',system:view.system,body:null};selectedRoute=null;render()}});
|
||
if (view.system==='sun') items.push({label:'Heliocentric Assets'}); else if (view.level==='local') items.push({label:scopeName()});
|
||
items.forEach((item,index)=>{if(index){const sep=document.createElement('span');sep.className='sep';sep.textContent='›';wrap.append(sep)}const button=document.createElement('button');button.type='button';button.textContent=item.label;button.className=index===items.length-1?'current':'';if(item.action)button.addEventListener('click',item.action);wrap.append(button)});
|
||
}
|
||
function renderList() {
|
||
const rows = currentAssets();
|
||
root.querySelector('#scope-title').textContent=scopeName(); root.querySelector('#scope-count').textContent=rows.length+' assets'; root.querySelector('#panel-count').textContent=rows.length;
|
||
const list=root.querySelector('#asset-list'); list.replaceChildren();
|
||
if(!rows.length){const empty=document.createElement('div');empty.className='asset-empty';empty.textContent='当前范围内没有资产';list.append(empty);return}
|
||
rows.forEach(asset=>{const button=document.createElement('button');button.type='button';button.className='asset-button '+(String(asset.state).toLowerCase().includes('planned')?'planned ':'')+(selectedRoute===asset.id?'selected':'');button.textContent=asset.name;button.addEventListener('click',()=>{selectedRoute=visibleTransfer(asset)?asset.id:null;render();openDrawer(asset)});list.append(button)});
|
||
}
|
||
function openDrawer(asset) {
|
||
root.querySelector('#drawer-name').textContent=asset.name;
|
||
const fields=root.querySelector('#drawer-fields');fields.replaceChildren();
|
||
[['类型',asset.asset_type],['状态',asset.state],['位置',asset.location],['任务',asset.mission],['下一事件',asset.next_event]].forEach(([label,value])=>{const row=document.createElement('div');row.className='drawer-field';const key=document.createElement('span');key.textContent=label;const val=document.createElement('strong');val.textContent=value||'—';row.append(key,val);fields.append(row)});
|
||
root.querySelector('#drawer-link').href=asset.detail_url;
|
||
root.querySelector('#asset-drawer').classList.add('open'); root.querySelector('#asset-drawer').setAttribute('aria-hidden','false');
|
||
}
|
||
function closeDrawer(){root.querySelector('#asset-drawer').classList.remove('open');root.querySelector('#asset-drawer').setAttribute('aria-hidden','true')}
|
||
function render() {
|
||
closeDrawer(); clearMap();
|
||
if(view.level==='solar'||view.system==='sun')drawSolar();else if(view.level==='system')drawSystem(view.system);else drawLocal(view.body);
|
||
const hasRoutes=currentAssets().some(visibleTransfer);
|
||
const selected=assets.find(a=>a.id===selectedRoute);
|
||
root.querySelector('#view-mode').textContent=view.level==='solar'?'SOLAR SYSTEM':view.system==='sun'?'HELIOCENTRIC':view.level==='system'?'PLANETARY SYSTEM':'LOCAL ORBITS';
|
||
root.querySelector('#map-caption').textContent=selected?'已选择转移轨迹 · '+selected.name:showAllRoutes&&hasRoutes?'正在显示全部转移轨迹':view.level==='system'?'选择行星、卫星或转移资产':'选择天体或转移资产';
|
||
const toggle=root.querySelector('#transfer-toggle');toggle.checked=showAllRoutes&&hasRoutes;toggle.disabled=!hasRoutes;
|
||
renderBreadcrumbs();renderList();
|
||
}
|
||
root.querySelector('#drawer-close').addEventListener('click',closeDrawer);
|
||
root.querySelector('#transfer-toggle').addEventListener('change',event=>{showAllRoutes=event.target.checked;render()});
|
||
root.querySelector('#location-reset').addEventListener('click',()=>{view={level:'solar',system:null,body:null};selectedRoute=null;showAllRoutes=false;render()});
|
||
let resizeFrame=0;window.addEventListener('resize',()=>{cancelAnimationFrame(resizeFrame);resizeFrame=requestAnimationFrame(render)});
|
||
render();
|
||
})();
|
||
</script>
|
||
{% endblock %}
|