feat: split source and terminal library navigation
This commit is contained in:
渡口浪人
@@ -1,28 +1,36 @@
|
||||
'use strict';
|
||||
// Keep older assets and APIs accessible without interpreting frame products as sources.
|
||||
Object.assign(MESSAGES.zh,{'legacy-plans':'旧版小图方案',libraryOutputPartial:'部分终端输出失败，源画面与成功版本已保留，可单独重试失败目标。',libraryGenerateFirst:'请先按终端生成方案生成成品，源画面不能直接推送。',librarySourceMismatch:'方案不属于所选来源图库，请重新选择。',librarySizeMismatch:'方案尺寸与终端屏幕不匹配；相框使用设备屏幕尺寸，当前手表为 410×502。',libraryPlanBound:'此方案正在被终端使用，请先解除绑定或更换方案。',libraryBindFirst:'请先在终端图库中绑定此来源及其中的生成方案。',libraryBindingChanged:'终端绑定已改变，此版本不再匹配，已停止推送。'});Object.assign(MESSAGES.en,{'legacy-plans':'Legacy thumbnail plans',libraryOutputPartial:'Some outputs failed. Source pixels and successful versions are kept; retry failed targets individually.',libraryGenerateFirst:'Generate a terminal version before sending source pixels.',librarySourceMismatch:'The plan belongs to another source library.',librarySizeMismatch:'Plan dimensions must match the terminal screen. The current watch uses 410×502.',libraryPlanBound:'Unbind terminals or select another plan first.',libraryBindFirst:'Bind a terminal to this source and one of its plans first.',libraryBindingChanged:'The terminal binding changed; this version was not sent.'});
|
||||
Object.assign(MESSAGES.zh,{gallery:'来源图库','terminal-gallery':'终端图库','legacy-gallery':'历史图库'});
|
||||
Object.assign(MESSAGES.en,{gallery:'Source library','terminal-gallery':'Terminal library','legacy-gallery':'Legacy gallery'});
|
||||
icons['legacy-gallery']='▧';
|
||||
const legacyGalleryView=views.gallery;
|
||||
const legacyPlanView=views.thumbnails;
|
||||
delete icons.thumbnails;
|
||||
icons['legacy-plans']='▧';
|
||||
views['legacy-plans']=legacyPlanView;
|
||||
const libraryUI={kind:'source',source:null,plan:null,terminal:null,offset:0,legacy:false};
|
||||
const libraryUI={kind:'source',source:null,plan:null,terminal:null,offset:0};
|
||||
|
||||
function libraryStatus(status){return ({GENERATED:tr('已生成','Generated'),QUEUED:tr('待推送','Queued'),RENDERING:tr('准备推送','Preparing'),UPLOADING:tr('上传中','Uploading'),SYNCING:tr('等待设备确认','Awaiting confirmation'),COMPLETED:tr('已确认显示','Display confirmed'),FAILED:tr('推送失败','Failed'),UNKNOWN:tr('结果待核对','Outcome unknown')})[status]||status;}
|
||||
function terminalLabel(terminal){return terminal.id==='watch'?tr('手表','Watch'):deviceNameForId(terminal.id);}
|
||||
function librarySelectOptions(items,selected,label){return `<option value="">${label}</option>`+items.map(p=>`<option value="${esc(p.id)}" ${p.id===selected?'selected':''}>${esc(p.name)}</option>`).join('');}
|
||||
function libraryLegacy(tab){libraryUI.legacy=true;state.tab=tab;return navigate('gallery');}
|
||||
function libraryLegacy(tab){state.tab=tab;return navigate('legacy-gallery');}
|
||||
|
||||
views.gallery=async function(epoch){
|
||||
if(libraryUI.legacy){await legacyGalleryView(epoch);if(epoch!==state.epoch)return;const back=document.createElement('button');back.textContent=tr('返回新图库','Back to libraries');back.onclick=()=>{libraryUI.legacy=false;return navigate('gallery');};$('#main').prepend(back);return;}
|
||||
views['legacy-gallery']=async function(epoch){
|
||||
await legacyGalleryView(epoch);if(epoch!==state.epoch)return;
|
||||
const back=document.createElement('button');back.textContent=tr('返回来源图库','Back to source library');back.onclick=()=>navigate('gallery');$('#main').prepend(back);
|
||||
};
|
||||
views.gallery=epoch=>libraryPage(epoch,'source');
|
||||
views['terminal-gallery']=epoch=>libraryPage(epoch,'terminal');
|
||||
async function libraryPage(epoch,kind){
|
||||
if(libraryUI.kind!==kind)libraryUI.offset=0;
|
||||
libraryUI.kind=kind;
|
||||
const [sources,terminals]=await Promise.all([api('/api/v1/source-libraries'),api('/api/v1/library-terminals')]);
|
||||
if(epoch!==state.epoch)return;
|
||||
$('#main').innerHTML=`<div class="section-heading"><div class="tabs"><button id="library-source-tab" class="${libraryUI.kind==='source'?'active':''}">${tr('来源图库','Source libraries')}</button><button id="library-terminal-tab" class="${libraryUI.kind==='terminal'?'active':''}">${tr('终端图库','Terminal libraries')}</button></div><button id="library-refresh">${t('refresh')}</button></div><div id="library-content"></div>`;
|
||||
$('#main').innerHTML=`<div class="section-heading"><span></span><button id="library-refresh">${t('refresh')}</button></div><div id="library-content"></div>`;
|
||||
bind('library-refresh',()=>navigate());
|
||||
bind('library-source-tab',()=>{libraryUI.kind='source';libraryUI.offset=0;state.tab='local';return navigate();});
|
||||
bind('library-terminal-tab',()=>{libraryUI.kind='terminal';libraryUI.offset=0;return navigate();});
|
||||
if(libraryUI.kind==='source')await sourceLibraryPage(epoch,sources,terminals);else await terminalLibraryPage(epoch,sources,terminals);
|
||||
};
|
||||
if(kind==='source')await sourceLibraryPage(epoch,sources,terminals);else await terminalLibraryPage(epoch,sources,terminals);
|
||||
}
|
||||
|
||||
async function sourceLibraryPage(epoch,sources,terminals){
|
||||
const panel=$('#library-content');
|
||||
@@ -85,7 +93,7 @@ async function terminalLibraryPage(epoch,sources,terminals){
|
||||
$('#library-content').innerHTML=`<section class="card"><div class="field"><label for="library-terminal">${tr('终端','Terminal')}</label><select id="library-terminal">${terminals.map(t=>`<option value="${esc(t.id)}" ${t.id===terminal.id?'selected':''}>${esc(terminalLabel(t))}</option>`).join('')}</select></div><h2>${esc(terminalLabel(terminal))}</h2><p>${tr('来源图库：','Source library: ')}${esc(source?.name||tr('未绑定','Not bound'))} · ${tr('生成方案：','Generation plan: ')}${esc(plan?.name||tr('未选择','Not selected'))}</p><p class="hint">${terminal.transport_supported?tr('生成、上传和设备确认分别记录；已生成不等于已显示。','Generation, upload and device confirmation are tracked separately. Generated does not mean displayed.'):tr('当前手表屏幕 410×502，传输尚未接入；这里管理生成成品。','Current watch screen: 410×502. Transfer is not connected; this library manages generated versions.')}</p><div class="actions"><button id="library-binding" class="primary">${tr('设置来源与方案（各单选）','Bind one source and one plan')}</button>${terminal.binding?`<button id="library-unbind">${tr('解除绑定','Unbind')}</button><button id="library-to-source">${tr('查看来源与生成版本','View source and versions')}</button>`:''}<button id="library-old-terminal">${terminal.kind==='watch'?tr('旧版小图图库','Legacy watch gallery'):tr('设备已有云端图片','Existing device cloud images')}</button></div></section><div class="actions"><button id="terminal-prev" ${libraryUI.offset===0?'disabled':''}>${tr('上一页','Previous')}</button><button id="terminal-next" ${libraryUI.offset+30>=page.total?'disabled':''}>${tr('下一页','Next')}</button><span>${tr('共','Total')} ${page.total} ${tr('个成品版本','generated versions')}</span></div><div class="gallery">${page.items.map((v,i)=>`<article class="card image-card"><button class="image-preview" data-terminal-preview="${i}"><img class="thumb" alt="${esc(v.name)}" data-src="${esc(v.url)}" style="object-fit:contain;aspect-ratio:${v.plan.width}/${v.plan.height}"></button><h3>${esc(v.name)}</h3><small>${v.plan.width} × ${v.plan.height} · ${esc(v.plan.name)}</small><small>${esc(libraryStatus(v.delivery_status))} · ${esc(fmt(v.created_at))}</small><div class="actions"><button data-terminal-preview="${i}">${tr('预览','Preview')}</button><button data-terminal-download="${i}">${tr('下载图片','Download image')}</button><button data-terminal-settings="${i}">${tr('生成参数','Generation settings')}</button>${v.operation?`<button data-terminal-operation="${i}">${tr('推送记录','Delivery history')}</button>`:''}<button data-terminal-send="${i}" ${!terminal.transport_supported||!liveWriteAllowed()||['QUEUED','RENDERING','UPLOADING','SYNCING','UNKNOWN'].includes(v.delivery_status)?'disabled':''} title="${terminal.transport_supported?(liveWriteAllowed()?'':esc(t('readOnlyWarning'))):tr('手表传输尚未接入','Watch transfer is not connected')}">${tr('推送到终端','Send to terminal')}</button></div></article>`).join('')}</div>${page.items.length?'':`<section class="card empty">${tr('尚无对应成品。绑定来源与方案后，在来源图库选入照片并生成。','No matching versions. Bind a source and plan, then import and generate in the source library.')}</section>`}`;
|
||||
$('#library-terminal').onchange=()=>{libraryUI.terminal=$('#library-terminal').value;libraryUI.offset=0;state.tab=libraryUI.terminal==='watch'?'watch':'cloud';if(libraryUI.terminal!=='watch')state.device=libraryUI.terminal;return navigate();};
|
||||
bind('library-binding',()=>terminalBindingEditor(terminal,sources));bind('library-unbind',()=>confirmDialog(tr('解除终端绑定？已有图片保留，后续来源任务不再向此终端输出。','Unbind this terminal? Images are kept; future source tasks will not output to it.'),async()=>{await api('/api/v1/library-terminals/'+encodeURIComponent(terminal.id)+'/binding',{method:'DELETE'});await navigate();}));
|
||||
bind('library-to-source',()=>{libraryUI.source=terminal.binding.source_id;libraryUI.plan=terminal.binding.plan_id;libraryUI.kind='source';libraryUI.offset=0;state.tab='local';return navigate();});
|
||||
bind('library-to-source',()=>{libraryUI.source=terminal.binding.source_id;libraryUI.plan=terminal.binding.plan_id;libraryUI.offset=0;state.tab='local';return navigate('gallery');});
|
||||
bind('library-old-terminal',()=>{if(terminal.id!=='watch')state.device=terminal.id;return libraryLegacy(terminal.id==='watch'?'watch':'cloud');});
|
||||
bind('terminal-prev',()=>{libraryUI.offset=Math.max(0,libraryUI.offset-30);return navigate();});bind('terminal-next',()=>{libraryUI.offset+=30;return navigate();});
|
||||
document.querySelectorAll('[data-terminal-preview]').forEach(b=>b.onclick=busy(()=>{const v=page.items[b.dataset.terminalPreview];return openImageViewer(v.url,v.name);}));
|
||||
@@ -102,7 +110,7 @@ async function terminalBindingEditor(terminal,sources){
|
||||
$('#binding-source').onchange=busy(()=>load(null));$('#terminal-binding-form').onsubmit=busy(async e=>{e.preventDefault();await api('/api/v1/library-terminals/'+encodeURIComponent(terminal.id)+'/binding',{method:'PUT',body:{source_id:$('#binding-source').value,plan_id:$('#binding-plan').value}});$('#modal').close();await navigate();});await load(terminal.binding?.plan_id);
|
||||
}
|
||||
|
||||
$('#device').onchange=()=>{const id=$('#device').value;if(id==='@watch'||state.page==='gallery'){libraryUI.kind='terminal';libraryUI.terminal=id==='@watch'?'watch':id;libraryUI.offset=0;libraryUI.legacy=false;state.tab=id==='@watch'?'watch':'cloud';if(id!=='@watch')state.device=id;return navigate('gallery');}state.device=id;return navigate();};
|
||||
$('#device').onchange=()=>{const id=$('#device').value;if(id==='@watch'||['terminal-gallery','legacy-gallery'].includes(state.page)){libraryUI.kind='terminal';libraryUI.terminal=id==='@watch'?'watch':id;libraryUI.offset=0;state.tab=id==='@watch'?'watch':'cloud';if(id!=='@watch')state.device=id;return navigate('terminal-gallery');}state.device=id;return navigate();};
|
||||
|
||||
async function libraryJobFields(job,isNew){
|
||||
const box=document.createElement('section');box.innerHTML=`<label class="check-row"><input id="job-library-pipeline" type="checkbox" ${job.library_pipeline||(isNew&&job.source?.type==='photo_source')?'checked':''}>${tr('按来源图库统一生成并推送','Generate and send through source-library bindings')}</label><p class="hint">${tr('选一次照片并保存源画面，按来源内的终端绑定分别生成；同一方案共用成品。相框继续走上传和显示确认，手表仅生成。此模式不再单独选择“小图方案”。旧任务默认保留原模式，勾选后切换。','Select one photo, save source pixels and generate each bound plan. Terminals sharing a plan share its version. Frames upload and confirm display; watches generate only. Legacy tasks keep their old mode until enabled.')}</p>`;
|
||||
|
||||
Reference in New Issue
Block a user