384 lines
48 KiB
JavaScript
384 lines
48 KiB
JavaScript
const $=(s,r=document)=>r.querySelector(s), $$=(s,r=document)=>[...r.querySelectorAll(s)];
|
||
const LIBRARY_SORTS=['recent','title','author','time','progress'],LIBRARY_FILTERS=['all','unread','progress','completed'];
|
||
const storedChoice=(key,choices,fallback)=>{const value=localStorage.getItem(key);return choices.includes(value)?value:fallback};
|
||
const state={books:[],dashboard:null,csrf:null,pairPoll:null,currentBook:null,status:null,rangeKey:'year',calendar:null,calendarMonth:null,calendarSelectedDay:null,coverChooserBookId:null,librarySort:storedChoice('kovi-library-sort',LIBRARY_SORTS,'recent'),libraryFilter:storedChoice('kovi-library-filter',LIBRARY_FILTERS,'all'),libraryQuery:''};
|
||
const VIEW_PATHS={home:'/',library:'/library',calendar:'/calendar',devices:'/devices',status:'/status'};
|
||
const RANGE_LABELS={week:'Last week',month:'Last month','three-months':'Last three months','six-months':'Last six months',year:'Last year',custom:'Custom dates'};
|
||
const RANGE_DAYS={week:7,month:30,'three-months':90,'six-months':180,year:365};
|
||
const HEATMAP_REFERENCE_WEEKS=53;
|
||
const fmtSeconds=s=>{s=Math.max(0,Number(s||0));const h=Math.floor(s/3600),m=Math.floor((s%3600)/60);return h?`${h}h ${m}m`:`${m}m`};
|
||
const fmtCompactSeconds=s=>{s=Math.max(0,Number(s||0));const m=Math.max(1,Math.round(s/60));return m>=60?`${(m/60).toFixed(m%60?1:0)}h`:`${m}m`};
|
||
const esc=s=>String(s??'').replace(/[&<>'"]/g,c=>({'&':'&','<':'<','>':'>',"'":''','"':'"'}[c]));
|
||
const progress=b=>{const page=Number(b.last_page||0),total=Number(b.last_total_pages||b.pages||0);return total>0?Math.min(100,Math.round(page/total*100)):0};
|
||
const bookIsRead=b=>b.is_read==null?progress(b)===100:Boolean(Number(b.is_read));
|
||
const localDateKey=d=>`${d.getFullYear()}-${String(d.getMonth()+1).padStart(2,'0')}-${String(d.getDate()).padStart(2,'0')}`;
|
||
const parseLocalDateKey=key=>{const m=/^(\d{4})-(\d{2})-(\d{2})$/.exec(String(key||''));if(!m)return null;const d=new Date(Number(m[1]),Number(m[2])-1,Number(m[3]),12,0,0,0);return d.getFullYear()===Number(m[1])&&d.getMonth()===Number(m[2])-1&&d.getDate()===Number(m[3])?d:null};
|
||
const formatDate=(key,opts={month:'short',day:'numeric',year:'numeric'})=>parseLocalDateKey(key)?.toLocaleDateString(undefined,opts)||key;
|
||
function toast(msg){const el=$('#toast');el.textContent=msg;el.classList.add('show');setTimeout(()=>el.classList.remove('show'),3200)}
|
||
|
||
async function api(url,opts={},retryCsrf=true){
|
||
const method=(opts.method||'GET').toUpperCase();
|
||
const request={...opts,headers:{...(opts.headers||{})}};
|
||
if(method!=='GET'&&!state.csrf){const session=await api('/api/session',{},false);state.csrf=session.csrf}
|
||
if(method!=='GET'&&state.csrf)request.headers['X-Kovi-CSRF']=state.csrf;
|
||
const r=await fetch(url,request);const data=await r.json().catch(()=>({}));
|
||
if(!r.ok&&r.status===403&&retryCsrf&&method!=='GET'&&data.error==='Missing browser request token.'){const session=await api('/api/session',{},false);state.csrf=session.csrf;return api(url,opts,false)}
|
||
if(!r.ok)throw new Error(data.error||`Request failed (${r.status})`);return data;
|
||
}
|
||
|
||
function coverImageSrc(b){if(!b.cover_path)return '';const version=b.updated_at||b.cover_checked_at||'';return version?`${b.cover_path}${b.cover_path.includes('?')?'&':'?'}v=${encodeURIComponent(version)}`:b.cover_path}
|
||
function coverMarkup(b){return b.cover_path?`<img src="${esc(coverImageSrc(b))}" alt="Cover of ${esc(b.title)}" loading="lazy">`:`<div class="cover-placeholder"><b>${esc(b.title)}</b><span>${esc(b.authors||'Unknown author')}</span></div>`}
|
||
function bookCard(b){const p=progress(b),read=bookIsRead(b);return `<a class="book-card" href="/books/${encodeURIComponent(b.id)}" data-book-id="${esc(b.id)}" data-search="${esc(`${b.title} ${b.authors||''}`.toLowerCase())}"><div class="cover">${coverMarkup(b)}${read?'<span class="book-read-badge">Read</span>':''}</div><h3 title="${esc(b.title)}">${esc(b.title)}</h3><p>${esc(b.authors||'Unknown author')}</p><progress class="book-progress" value="${p}" max="100" title="Approx. ${p}% document progress">${p}%</progress></a>`}
|
||
|
||
function bookReadingState(book){if(bookIsRead(book))return 'completed';if(book.read_override!=null&&Number(book.read_override)===0)return 'unread';return progress(book)===0?'unread':'progress'}
|
||
function renderLibrary(){
|
||
const collator=new Intl.Collator(undefined,{sensitivity:'base',numeric:true}),title=(a,b)=>collator.compare(a.title||'',b.title||'');
|
||
const comparators={recent:(a,b)=>Number(b.recent_read||b.last_open||0)-Number(a.recent_read||a.last_open||0)||title(a,b),title,author:(a,b)=>collator.compare(a.authors||'Unknown author',b.authors||'Unknown author')||title(a,b),time:(a,b)=>Number(b.total_read_time||0)-Number(a.total_read_time||0)||title(a,b),progress:(a,b)=>progress(b)-progress(a)||title(a,b)};
|
||
const query=state.libraryQuery.trim().toLowerCase();
|
||
const books=state.books.filter(book=>(state.libraryFilter==='all'||bookReadingState(book)===state.libraryFilter)&&(!query||`${book.title} ${book.authors||''}`.toLowerCase().includes(query))).sort(comparators[state.librarySort]);
|
||
$('#bookSort').value=state.librarySort;$('#bookFilter').value=state.libraryFilter;
|
||
$('#librarySummary').textContent=books.length===state.books.length?`${books.length} book${books.length===1?'':'s'}`:`Showing ${books.length} of ${state.books.length} books`;
|
||
$('#bookGrid').innerHTML=books.map(bookCard).join('')||`<p class="muted">${state.books.length?'No books match these filters.':'No books yet.'}</p>`;
|
||
}
|
||
|
||
function rangeLabel(){return RANGE_LABELS[state.rangeKey]||'Custom dates'}
|
||
function rangeDescription(range){return `${formatDate(range.from)} – ${formatDate(range.to)}`}
|
||
function buildRangeSeries(days,range){
|
||
const by=new Map((days||[]).map(x=>[x.day,Number(x.seconds||0)]));
|
||
const start=parseLocalDateKey(range?.from),end=parseLocalDateKey(range?.to);if(!start||!end)return [];
|
||
const out=[];for(const d=new Date(start);d<=end;d.setDate(d.getDate()+1)){const day=localDateKey(d);out.push({day,seconds:by.get(day)||0})}return out;
|
||
}
|
||
|
||
function render(){
|
||
const d=state.dashboard,b=state.books;const empty=!b.length;
|
||
$('#emptyState').classList.toggle('hidden',!empty);$('#dashboardContent').classList.toggle('hidden',empty);
|
||
if(!empty&&d){
|
||
$('#metrics').innerHTML=[
|
||
['Books',d.books,'in your reading history'],
|
||
['Books read',Number(d.range?.read_books||0).toLocaleString(),`started and completed · ${rangeLabel()}`],
|
||
['Reading time',fmtSeconds(d.all_time_reading_seconds??d.total_read_time??d.session_seconds),'all-time KOReader total'],
|
||
['Pages',Number(d.total_read_pages||0).toLocaleString(),'pages turned'],
|
||
['Highlights',Number(d.highlights||0).toLocaleString(),'ideas kept'],
|
||
].map(x=>`<article class="metric"><span>${x[0]}</span><strong>${x[1]}</strong><small>${x[2]}</small></article>`).join('');
|
||
renderRangeUi(d.range);renderHeatmap(d.days||[],d.range);renderLineChart(d.days||[],d.range,d);
|
||
}
|
||
renderLibrary();
|
||
}
|
||
|
||
function renderRangeUi(range){
|
||
if(!range)return;
|
||
const label=rangeLabel();
|
||
$('#rangeSummary').textContent=state.rangeKey==='custom'?rangeDescription(range):label;
|
||
$('#rhythmRangeLabel').textContent=label;$('#trendRangeLabel').textContent=label;
|
||
$$('.range-button').forEach(button=>button.classList.toggle('active',button.dataset.range===state.rangeKey));
|
||
$('#customFrom').value=range.from;$('#customTo').value=range.to;
|
||
const today=localDateKey(new Date());$('#customFrom').max=today;$('#customTo').max=today;
|
||
}
|
||
|
||
function heatLevel(sec,active){
|
||
if(!sec)return 0;if(!active.length)return 1;
|
||
const sorted=[...active].sort((a,b)=>a-b),q=p=>sorted[Math.min(sorted.length-1,Math.floor((sorted.length-1)*p))];
|
||
if(sec<=q(.25))return 1;if(sec<=q(.5))return 2;if(sec<=q(.75))return 3;return 4;
|
||
}
|
||
function renderHeatmap(days,range){
|
||
const from=parseLocalDateKey(range?.from),to=parseLocalDateKey(range?.to);if(!from||!to)return;
|
||
const by=new Map(days.map(x=>[x.day,Number(x.seconds||0)])),active=[...by.values()].filter(Boolean);
|
||
const start=new Date(from);start.setDate(start.getDate()-start.getDay());
|
||
const end=new Date(to);end.setDate(end.getDate()+(6-end.getDay()));
|
||
const cellCount=Math.round((end-start)/86400000)+1,weeks=Math.ceil(cellCount/7);
|
||
let html='',activeDays=0,total=0;
|
||
for(let i=0;i<cellCount;i++){
|
||
const dt=new Date(start);dt.setDate(start.getDate()+i);const outside=dt<from||dt>to;const key=localDateKey(dt),sec=outside?0:(by.get(key)||0);
|
||
if(sec){activeDays++;total+=sec}const level=heatLevel(sec,active);
|
||
html+=`<span class="day ${outside?'outside':level?'l'+level:''}" title="${outside?'':`${key}: ${fmtSeconds(sec)}`}"></span>`;
|
||
}
|
||
const heatmap=$('#heatmap'),months=$('#heatmapMonths'),canvas=heatmap.closest('.heatmap-scroll'),layout=heatmap.closest('.heatmap-layout');heatmap.innerHTML=html;
|
||
const monthCells=[];let prior='';
|
||
for(let week=0;week<weeks;week++){
|
||
const weekDate=new Date(start);weekDate.setDate(start.getDate()+week*7);
|
||
const mid=new Date(weekDate);mid.setDate(mid.getDate()+3);const monthKey=`${mid.getFullYear()}-${mid.getMonth()}`;
|
||
const changed=week===0||monthKey!==prior;
|
||
const sparse=weeks>180 ? mid.getMonth()===0 : weeks>90 ? (mid.getMonth()===0||mid.getMonth()===6) : true;
|
||
monthCells.push(`<span>${changed&&sparse?esc(mid.toLocaleDateString(undefined,{month:weeks>90?'short':'short'})):''}</span>`);prior=monthKey;
|
||
}
|
||
months.innerHTML=monthCells.join('');
|
||
// Keep the visual scale stable across filters: shorter ranges should reveal fewer
|
||
// GitHub-style columns, not stretch those columns to fill the whole panel.
|
||
// The selected range therefore uses the same cell size a full 53-week year
|
||
// would use at the current viewport. On narrow screens that reference size
|
||
// naturally shrinks, so even the full year still fits without scrolling.
|
||
const available=Math.max(1,canvas?.clientWidth||0),gap=available<480?1.5:3;
|
||
const referenceCell=Math.max(.25,(available-gap*(HEATMAP_REFERENCE_WEEKS-1))/HEATMAP_REFERENCE_WEEKS);
|
||
const cell=Math.min(referenceCell,(available-gap*Math.max(0,weeks-1))/Math.max(1,weeks));
|
||
[canvas,layout].filter(Boolean).forEach(el=>{el.style.setProperty('--heat-weeks',String(weeks));el.style.setProperty('--heat-gap',`${gap}px`);el.style.setProperty('--heat-cell',`${cell}px`)});
|
||
$('#heatmapCaption').textContent=activeDays?`${activeDays} reading day${activeDays===1?'':'s'} · ${fmtSeconds(total)} tracked from ${formatDate(range.from)} to ${formatDate(range.to)}.`:`No dated reading sessions in ${rangeDescription(range)}.`;
|
||
}
|
||
|
||
function niceStep(value){
|
||
if(value<=0)return 15;const power=10**Math.floor(Math.log10(value));const scaled=value/power;
|
||
const factor=scaled<=1?1:scaled<=2?2:scaled<=5?5:10;return factor*power;
|
||
}
|
||
function axisMinutes(minutes){if(minutes>=60){const hours=minutes/60;return Number.isInteger(hours)?`${hours}h`:`${hours.toFixed(1)}h`}return `${Math.round(minutes)}m`}
|
||
function chartDateLabel(key,span){const d=parseLocalDateKey(key);if(!d)return key;if(span<=14)return d.toLocaleDateString(undefined,{weekday:'short'});if(span<=120)return d.toLocaleDateString(undefined,{month:'short',day:'numeric'});return d.toLocaleDateString(undefined,{month:'short',year:'2-digit'})}
|
||
function chartKeyPointIndices(series){
|
||
const active=series.map((item,index)=>({index,seconds:item.seconds})).filter(x=>x.seconds>0);
|
||
if(!active.length)return new Set();
|
||
if(series.length<=45)return new Set(active.map(x=>x.index));
|
||
const values=active.map(x=>x.seconds).sort((a,b)=>a-b),threshold=values[Math.max(0,Math.floor(values.length*.75)-1)]||0;
|
||
const keys=new Set();let max=active[0];
|
||
for(const point of active){
|
||
if(point.seconds>max.seconds)max=point;
|
||
const prev=series[point.index-1]?.seconds||0,next=series[point.index+1]?.seconds||0;
|
||
if(point.seconds>=threshold&&point.seconds>=prev&&point.seconds>=next)keys.add(point.index);
|
||
}
|
||
keys.add(max.index);return keys;
|
||
}
|
||
function renderLineChart(days,range,dashboard){
|
||
const series=buildRangeSeries(days,range),total=series.reduce((sum,x)=>sum+x.seconds,0),readingDays=series.filter(x=>x.seconds>0).length;
|
||
$('#trendTotal').textContent=fmtSeconds(total);$('#trendDays').textContent=String(readingDays);
|
||
const chart=$('#lineChart');
|
||
if(!series.length||!series.some(x=>x.seconds>0)){
|
||
chart.innerHTML='<div class="chart-empty">No reading sessions in this range.</div>';
|
||
chart.setAttribute('aria-label',`No dated reading sessions from ${formatDate(range.from)} to ${formatDate(range.to)}.`);
|
||
}else{
|
||
const width=Math.max(320,Math.round(chart.clientWidth||900)),height=270,left=54,right=18,top=18,bottom=42,plotW=width-left-right,plotH=height-top-bottom;
|
||
const maxMinutes=Math.max(...series.map(x=>x.seconds/60)),step=niceStep(maxMinutes/4),yMax=Math.max(step*4,Math.ceil(maxMinutes/step)*step);
|
||
const x=i=>left+(series.length===1?plotW/2:(i/(series.length-1))*plotW),y=seconds=>top+plotH-(seconds/60/yMax)*plotH;
|
||
const grid=[];for(let i=0;i<=4;i++){const min=(yMax/4)*i,yy=top+plotH-(i/4)*plotH;grid.push(`<line x1="${left}" y1="${yy}" x2="${width-right}" y2="${yy}" class="chart-grid"/><text x="${left-10}" y="${yy+4}" text-anchor="end" class="chart-axis">${axisMinutes(min)}</text>`)}
|
||
const points=series.map((item,i)=>`${x(i).toFixed(2)},${y(item.seconds).toFixed(2)}`).join(' ');
|
||
const tickIndices=[0,.25,.5,.75,1].map(p=>Math.round((series.length-1)*p)).filter((v,i,a)=>a.indexOf(v)===i);
|
||
const ticks=tickIndices.map(i=>`<text x="${x(i)}" y="${height-12}" text-anchor="${i===0?'start':i===series.length-1?'end':'middle'}" class="chart-axis">${esc(chartDateLabel(series[i].day,series.length))}</text>`).join('');
|
||
const keyPoints=chartKeyPointIndices(series);
|
||
const dots=[...keyPoints].sort((a,b)=>a-b).map(i=>`<circle cx="${x(i)}" cy="${y(series[i].seconds)}" r="3.75" class="chart-dot key" tabindex="0" role="button" data-chart-index="${i}" aria-label="${esc(`${formatDate(series[i].day)}: ${fmtSeconds(series[i].seconds)}`)}"><title>${esc(`${formatDate(series[i].day)}: ${fmtSeconds(series[i].seconds)}`)}</title></circle>`).join('');
|
||
chart.innerHTML=`<svg viewBox="0 0 ${width} ${height}" aria-label="Interactive daily reading time chart"><g aria-hidden="true">${grid.join('')}<polyline points="${points}" class="chart-line" vector-effect="non-scaling-stroke"/>${ticks}<line x1="${left}" x2="${left}" y1="${top}" y2="${top+plotH}" class="chart-hover-guide hidden"/><circle cx="${left}" cy="${top+plotH}" r="5" class="chart-hover-dot hidden"/></g>${dots}<rect x="${left}" y="${top}" width="${plotW}" height="${plotH}" class="chart-hit-area" aria-hidden="true"/></svg><div class="chart-tooltip hidden" aria-hidden="true"><strong></strong><span></span></div>`;
|
||
const svg=$('svg',chart),tooltip=$('.chart-tooltip',chart),guide=$('.chart-hover-guide',chart),hoverDot=$('.chart-hover-dot',chart);let pinnedIndex=null;
|
||
const showAt=index=>{
|
||
index=Math.max(0,Math.min(series.length-1,index));const item=series[index],xx=x(index),yy=y(item.seconds),rect=svg.getBoundingClientRect();
|
||
guide.setAttribute('x1',xx);guide.setAttribute('x2',xx);guide.classList.remove('hidden');hoverDot.setAttribute('cx',xx);hoverDot.setAttribute('cy',yy);hoverDot.classList.remove('hidden');
|
||
$('strong',tooltip).textContent=formatDate(item.day,{weekday:'short',month:'short',day:'numeric',year:'numeric'});$('span',tooltip).textContent=item.seconds?fmtSeconds(item.seconds):'No reading';tooltip.classList.remove('hidden');
|
||
const cssX=(xx/width)*rect.width,cssY=(yy/height)*rect.height;tooltip.style.left=`${Math.max(70,Math.min(rect.width-70,cssX))}px`;tooltip.style.top=`${Math.max(20,cssY-8)}px`;
|
||
};
|
||
const hide=()=>{if(pinnedIndex!==null)return;tooltip.classList.add('hidden');guide.classList.add('hidden');hoverDot.classList.add('hidden')};
|
||
svg.addEventListener('pointermove',event=>{if(pinnedIndex!==null)return;const rect=svg.getBoundingClientRect(),px=(event.clientX-rect.left)*(width/Math.max(1,rect.width)),ratio=(px-left)/Math.max(1,plotW),index=Math.round(Math.max(0,Math.min(1,ratio))*(series.length-1));showAt(index)});
|
||
svg.addEventListener('pointerleave',hide);
|
||
svg.addEventListener('click',event=>{const rect=svg.getBoundingClientRect(),px=(event.clientX-rect.left)*(width/Math.max(1,rect.width)),ratio=(px-left)/Math.max(1,plotW),index=Math.round(Math.max(0,Math.min(1,ratio))*(series.length-1));if(pinnedIndex===index){pinnedIndex=null;hide()}else{pinnedIndex=index;showAt(index)}});
|
||
svg.addEventListener('focusin',event=>{const dot=event.target.closest?.('[data-chart-index]');if(dot){pinnedIndex=Number(dot.dataset.chartIndex);showAt(pinnedIndex)}});
|
||
svg.addEventListener('focusout',()=>{pinnedIndex=null;hide()});
|
||
chart.setAttribute('aria-label',`Daily reading time from ${formatDate(range.from)} to ${formatDate(range.to)}. Hover or tap the chart to inspect a day. ${fmtSeconds(total)} across ${readingDays} reading days.`);
|
||
}
|
||
const allTime=Number(dashboard.all_time_reading_seconds||0),sessionAll=Number(dashboard.session_seconds||0),gap=Math.abs(allTime-sessionAll);
|
||
let caption=`Daily session history for ${rangeDescription(range)}. Hover or tap the graph to inspect individual days.`;
|
||
if(gap>=60)caption+=` The all-time Reading time card uses KOReader’s per-book total (${fmtSeconds(allTime)}), while dated session rows add up to ${fmtSeconds(sessionAll)} across all dates; this is why the figures can differ.`;
|
||
else caption+=' The Reading time card is all-time; this graph is limited to the selected dates.';
|
||
$('#trendCaption').textContent=caption;
|
||
}
|
||
|
||
function presetRange(key){const days=RANGE_DAYS[key];if(!days)return null;const to=new Date();to.setHours(12,0,0,0);const from=new Date(to);from.setDate(from.getDate()-(days-1));return {from:localDateKey(from),to:localDateKey(to)}}
|
||
async function applyDashboardRange(key,range){
|
||
if(!range)return;state.rangeKey=key;
|
||
const params=new URLSearchParams({from:range.from,to:range.to});
|
||
try{state.dashboard=await api(`/api/dashboard?${params}`);render()}catch(e){toast(e.message)}
|
||
}
|
||
|
||
let coverPoll=null;
|
||
async function refresh(){
|
||
const dashboardUrl=state.dashboard?.range?`/api/dashboard?${new URLSearchParams({from:state.dashboard.range.from,to:state.dashboard.range.to})}`:'/api/dashboard';
|
||
const [books,dashboard]=await Promise.all([api('/api/books'),api(dashboardUrl)]);
|
||
state.books=books.books;state.dashboard=dashboard;render();
|
||
if(coverPoll){clearTimeout(coverPoll);coverPoll=null}
|
||
if(state.books.some(b=>b.cover_status==='pending'))coverPoll=setTimeout(()=>refresh().catch(()=>{}),5000);
|
||
}
|
||
|
||
function monthAnchor(value=new Date()){const d=value instanceof Date?new Date(value):parseLocalDateKey(value)||new Date();return new Date(d.getFullYear(),d.getMonth(),1,12,0,0,0)}
|
||
function calendarMonthRange(value){const first=monthAnchor(value),last=new Date(first.getFullYear(),first.getMonth()+1,0,12,0,0,0);return {from:localDateKey(first),to:localDateKey(last)}}
|
||
function calendarLevel(seconds,active){return heatLevel(seconds,active)}
|
||
function renderCalendarDetail(dayKey){
|
||
const detail=$('#calendarDetail'),data=state.calendar,day=(data?.days||[]).find(x=>x.day===dayKey);state.calendarSelectedDay=dayKey;
|
||
const dateInput=$('#calendarDateInput');if(dateInput)dateInput.value=dayKey;
|
||
$$('.calendar-day').forEach(el=>el.classList.toggle('selected',el.dataset.day===dayKey));
|
||
const date=formatDate(dayKey,{weekday:'long',month:'long',day:'numeric',year:'numeric'});
|
||
if(!day){detail.innerHTML=`<p class="eyebrow">${esc(date)}</p><h3>No reading logged.</h3><p class="muted">There are no dated KOReader sessions for this day.</p>`;return}
|
||
const books=(day.books||[]).map(book=>`<button type="button" class="calendar-book-row" data-calendar-book-id="${esc(book.id)}"><span class="calendar-book-cover">${book.cover_path?`<img src="${esc(coverImageSrc(book))}" alt="">`:`<b>${esc((book.title||'?').slice(0,1))}</b>`}</span><span class="calendar-book-copy"><strong>${esc(book.title)}</strong><small>${esc(book.authors||'Unknown author')}</small></span><span class="calendar-book-time">${fmtSeconds(book.seconds)}</span></button>`).join('');
|
||
detail.innerHTML=`<p class="eyebrow">${esc(date)}</p><div class="calendar-detail-summary"><div><span>Reading time</span><strong>${fmtSeconds(day.seconds)}</strong></div><div><span>Books</span><strong>${day.books.length}</strong></div></div><div class="calendar-book-list">${books}</div>`;
|
||
}
|
||
function renderCalendar(){
|
||
const data=state.calendar;if(!data)return;const range=data.range,from=parseLocalDateKey(range.from),to=parseLocalDateKey(range.to);if(!from||!to)return;
|
||
$('#calendarMonthTitle').textContent=from.toLocaleDateString(undefined,{month:'long',year:'numeric'});
|
||
const total=(data.days||[]).reduce((sum,day)=>sum+Number(day.seconds||0),0),readingDays=(data.days||[]).filter(day=>Number(day.seconds||0)>0).length;
|
||
$('#calendarMonthSummary').textContent=readingDays?`${readingDays} reading day${readingDays===1?'':'s'} · ${fmtSeconds(total)}`:'No reading sessions this month';
|
||
const by=new Map((data.days||[]).map(day=>[day.day,day])),active=(data.days||[]).map(day=>Number(day.seconds||0)).filter(Boolean);
|
||
const gridStart=new Date(from);gridStart.setDate(gridStart.getDate()-gridStart.getDay());const gridEnd=new Date(to);gridEnd.setDate(gridEnd.getDate()+(6-gridEnd.getDay()));
|
||
const today=localDateKey(new Date());let html='';
|
||
for(const d=new Date(gridStart);d<=gridEnd;d.setDate(d.getDate()+1)){
|
||
const key=localDateKey(d),item=by.get(key),outside=d.getMonth()!==from.getMonth(),seconds=Number(item?.seconds||0),level=calendarLevel(seconds,active),books=item?.books?.length||0;
|
||
const label=`${formatDate(key,{weekday:'long',month:'long',day:'numeric',year:'numeric'})}${seconds?`, ${fmtSeconds(seconds)}, ${books} book${books===1?'':'s'}`:', no reading logged'}`;
|
||
html+=`<button type="button" class="calendar-day ${outside?'outside':''} ${seconds?'has-reading l'+level:''} ${key===today?'today':''}" data-day="${key}" aria-label="${esc(label)}"><span class="calendar-day-number">${d.getDate()}</span>${seconds?`<strong class="calendar-day-time">${fmtCompactSeconds(seconds)}</strong><span class="calendar-day-books">${books} book${books===1?'':'s'}</span>`:'<span class="calendar-day-empty">·</span>'}</button>`;
|
||
}
|
||
const grid=$('#calendarGrid');grid.innerHTML=html;grid.setAttribute('aria-label',`Reading calendar for ${from.toLocaleDateString(undefined,{month:'long',year:'numeric'})}`);
|
||
let selected=state.calendarSelectedDay;if(!selected||selected<range.from||selected>range.to)selected=(data.days||[]).find(day=>day.day===today)?.day||(data.days||[])[0]?.day||range.from;
|
||
renderCalendarDetail(selected);
|
||
}
|
||
async function loadCalendar(value=state.calendarMonth||new Date(),selectDay=null){
|
||
const month=monthAnchor(value),range=calendarMonthRange(month);state.calendarMonth=month;if(selectDay)state.calendarSelectedDay=selectDay;
|
||
$('#calendarGrid').innerHTML='<div class="calendar-loading muted">Loading reading days…</div>';
|
||
try{state.calendar=await api(`/api/calendar?${new URLSearchParams(range)}`);renderCalendar()}catch(e){toast(e.message);$('#calendarGrid').innerHTML='<div class="calendar-loading muted">Could not load this month.</div>'}
|
||
}
|
||
function moveCalendarMonth(delta){const base=state.calendarMonth||monthAnchor();const next=new Date(base.getFullYear(),base.getMonth()+delta,1,12,0,0,0);state.calendarSelectedDay=null;loadCalendar(next)}
|
||
function jumpToCalendarDate(dayKey){const date=parseLocalDateKey(dayKey);if(!date)return toast('Choose a valid date.');loadCalendar(date,dayKey)}
|
||
|
||
function setView(name){
|
||
$$('.view').forEach(v=>v.classList.remove('active'));
|
||
$$('.nav-item').forEach(v=>v.classList.toggle('active',v.dataset.view===name));
|
||
const target=$(`#${name}View`);if(target)target.classList.add('active');
|
||
$('#pageTitle').textContent=name==='home'?'Good to see you.':name==='library'?'Your library.':name==='calendar'?'Your calendar.':name==='devices'?'Your devices.':name==='status'?'kovi status.':'Book details.';
|
||
if(name==='home'&&state.dashboard?.range)requestAnimationFrame(()=>{renderHeatmap(state.dashboard.days||[],state.dashboard.range);renderLineChart(state.dashboard.days||[],state.dashboard.range,state.dashboard)});
|
||
if(name==='calendar')loadCalendar();
|
||
if(name==='devices')loadDevices();
|
||
if(name==='status')loadStatus();
|
||
}
|
||
function switchView(name,{push=true}={}){setView(name);if(push&&VIEW_PATHS[name]&&location.pathname!==VIEW_PATHS[name])history.pushState({view:name},'',VIEW_PATHS[name]);window.scrollTo(0,0)}
|
||
|
||
async function openBook(id,{push=true}={}){
|
||
try{
|
||
const b=await api(`/api/books/${encodeURIComponent(id)}`);if(state.coverChooserBookId&&state.coverChooserBookId!==b.id)state.coverChooserBookId=null;state.currentBook=b;renderBookPage(b);setView('book');
|
||
if(push&&location.pathname!==`/books/${encodeURIComponent(id)}`)history.pushState({bookId:id},'',`/books/${encodeURIComponent(id)}`);
|
||
window.scrollTo(0,0);
|
||
}catch(error){toast(error.message);switchView('library',{push})}
|
||
}
|
||
function annotationMarkup(a){
|
||
const text=a.text||'',note=a.note||'',location=[a.chapter,a.pageno?`page ${a.pageno}`:a.page?`page ${a.page}`:''].filter(Boolean).join(' · ');
|
||
return `<article class="annotation-card"><div class="annotation-top"><span class="annotation-kind">${a.annotation_type==='note'?'Note':'Highlight'}</span>${a.annotation_datetime?`<time>${esc(a.annotation_datetime)}</time>`:''}</div>${text?`<blockquote>${esc(text)}</blockquote>`:''}${note?`<p class="annotation-note">${esc(note)}</p>`:''}${location?`<p class="annotation-location">${esc(location)}</p>`:''}</article>`;
|
||
}
|
||
let bookCoverPoll=null;
|
||
function stopBookCoverPoll(){if(bookCoverPoll){clearTimeout(bookCoverPoll);bookCoverPoll=null}}
|
||
function coverSourceLabel(source){return ({'koreader-embedded':'KOReader embedded','manual-upload':'Manual upload',openlibrary:'Open Library',googlebooks:'Google Books','openlibrary-via-googlebooks':'Open Library via Google Books','googlebooks-via-calibre-id':'Google Books via Calibre',calibre:'Calibre'}[source]||source||'No cover')}
|
||
function coverJobLabel(job){if(!job)return '';if(job.state==='queued')return 'Queued for online lookup…';if(job.state==='running')return 'Looking for an online cover…';if(job.state==='error')return `Lookup failed${job.last_error?`: ${job.last_error}`:''}`;if(job.state==='done'&&job.result_status==='none-kept')return 'No better cover found — kept the existing cover.';if(job.state==='done'&&job.result_status==='matched')return `Online cover updated${job.result_source?` via ${coverSourceLabel(job.result_source)}`:''}.`;return ''}
|
||
function coverOption(c,{history=false}={}){const selected=history&&Number(c.selected)===1;return `<article class="cover-option ${selected?'selected':''}"><div class="cover option-cover"><img src="${esc(c.path)}" alt="${history?'Previous':'Candidate'} cover" loading="lazy"></div><div class="cover-option-copy"><strong>${esc(history?coverSourceLabel(c.source):(c.title||coverSourceLabel(c.source)))}</strong><small>${esc(history?(c.strategy||new Date(c.created_at).toLocaleString()):([c.authors,coverSourceLabel(c.source),Number(c.score||0)?`${Math.round(Number(c.score)*100)}% match`:null].filter(Boolean).join(' · ')))}</small></div>${selected?'<span class="status-badge">Current</span>':`<button type="button" class="secondary-action" ${history?`data-cover-history="${esc(c.id)}"`:`data-cover-candidate="${esc(c.id)}"`}>Use this</button>`}</article>`}
|
||
async function pollBookCoverJob(bookId,attempt=0){
|
||
stopBookCoverPoll();
|
||
try{
|
||
const b=await api(`/api/books/${encodeURIComponent(bookId)}`);state.currentBook=b;renderBookPage(b);
|
||
if(b.cover_job&&['queued','running'].includes(b.cover_job.state)&&attempt<90){bookCoverPoll=setTimeout(()=>pollBookCoverJob(bookId,attempt+1),1000);return}
|
||
await refresh();
|
||
}catch{if(attempt<20)bookCoverPoll=setTimeout(()=>pollBookCoverJob(bookId,attempt+1),1500)}
|
||
}
|
||
function renderBookPage(b){
|
||
const p=progress(b),read=bookIsRead(b),annotations=b.annotations||[];let highlights='';
|
||
if(annotations.length)highlights=`<div class="annotation-list">${annotations.map(annotationMarkup).join('')}</div>`;
|
||
else if(Number(b.highlights||0)>0)highlights=`<article class="panel annotation-empty"><strong>${Number(b.highlights)} highlight${Number(b.highlights)===1?'':'s'} counted by KOReader</strong><p class="muted">The statistics database stores only the count. Sync the kovi plugin to import the actual highlight text from KOReader’s book sidecars.</p></article>`;
|
||
else highlights='<article class="panel annotation-empty"><p class="muted">No highlights have been synced for this book.</p></article>';
|
||
const jobText=coverJobLabel(b.cover_job),jobBusy=b.cover_job&&['queued','running'].includes(b.cover_job.state);
|
||
const candidates=b.cover_candidates||[],history=b.cover_history||[],showCoverChoices=state.coverChooserBookId===b.id;
|
||
const statusLabel=read?'Read':b.read_override!=null&&Number(b.read_override)===0?'Unread':p>0?'Reading':'Unread';
|
||
const statusDetail=b.read_override!=null?`Manually marked ${Number(b.read_override)?'read':'unread'} in kovi.`:b.read_source==='koreader'?'Marked read by KOReader.':b.read_source==='progress'?'Completed from document progress.':'Completion is tracked separately from document progress.';
|
||
const readControl=`<section class="reading-status"><div><span class="status-badge read-state ${read?'complete':''}">${statusLabel}</span><p>${esc(statusDetail)}</p></div><div class="reading-status-actions"><button class="secondary-action" id="toggleBookRead" type="button">Mark as ${read?'unread':'read'}</button>${b.read_override!=null?'<button class="text-button" id="clearBookRead" type="button">Use synced status</button>':''}</div></section>`;
|
||
const coverManager=`<section class="book-cover-manager"><div class="section-heading compact"><div><p class="eyebrow">Cover manager</p><h3>Choose the edition you want to see</h3></div><span class="muted">${esc(coverSourceLabel(b.cover_source))}</span></div>${jobText?`<div class="cover-job ${b.cover_job?.state==='error'?'error':''}">${jobBusy?'<span class="job-spinner" aria-hidden="true"></span>':''}${esc(jobText)}</div>`:''}<div class="cover-manager-actions"><button class="secondary-action" id="findCoverCandidates" type="button">Find alternatives</button></div>${showCoverChoices&&candidates.length?`<div class="cover-choice-section"><h4>Online candidates</h4><div class="cover-option-grid">${candidates.map(c=>coverOption(c)).join('')}</div></div>`:''}${showCoverChoices&&history.length>1?`<div class="cover-choice-section"><h4>Cover history</h4><div class="cover-option-grid history">${history.map(c=>coverOption(c,{history:true})).join('')}</div></div>`:''}</section>`;
|
||
$('#bookPage').innerHTML=`<article class="book-page"><aside><div class="cover book-page-cover">${coverMarkup(b)}</div><div class="cover-actions"><button class="secondary-action full" id="retryBookCover" ${jobBusy?'disabled':''}>${jobBusy?'Looking online…':'Find online replacement'}</button><button class="secondary-action full" id="uploadBookCover">Upload cover</button><input id="manualCoverInput" class="visually-hidden" type="file" accept="image/jpeg,image/png,image/webp,image/gif"></div></aside><div class="book-page-content"><p class="eyebrow">Book</p><h2>${esc(b.title)}</h2><p class="book-byline">${esc(b.authors||'Unknown author')}${b.series?' · '+esc(b.series):''}</p>${readControl}<div class="book-meta"><div><span>Document progress</span><strong>${p}%</strong></div><div><span>Reading time</span><strong>${fmtSeconds(b.total_read_time)}</strong></div><div><span>Highlights</span><strong>${Number(b.highlights||0)}</strong></div><div><span>Pages</span><strong>${Number(b.pages||0)}</strong></div><div><span>Language</span><strong>${esc(b.language||'—')}</strong></div><div><span>Cover</span><strong>${esc(coverSourceLabel(b.cover_source))}</strong></div></div>${coverManager}<section class="book-highlights"><div class="section-heading compact"><div><p class="eyebrow">Highlights</p><h3>Passages worth keeping</h3></div><span class="muted">${annotations.length?`${annotations.length} synced`:''}</span></div>${highlights}</section></div></article>`;
|
||
const setRead=async value=>{try{await api(`/api/books/${encodeURIComponent(b.id)}/read`,{method:'PUT',headers:{'Content-Type':'application/json'},body:JSON.stringify({read:value})});toast(value===null?'Using synced reading status.':value?'Book marked as read.':'Book marked as unread.');await refresh();await openBook(b.id,{push:false})}catch(e){toast(e.message)}};
|
||
$('#toggleBookRead')?.addEventListener('click',()=>setRead(!read));
|
||
$('#clearBookRead')?.addEventListener('click',()=>setRead(null));
|
||
$('#retryBookCover')?.addEventListener('click',async()=>{try{state.coverChooserBookId=null;await api(`/api/books/${encodeURIComponent(b.id)}/cover/retry`,{method:'POST'});toast('Online cover lookup queued.');pollBookCoverJob(b.id)}catch(e){toast(e.message)}});
|
||
$('#findCoverCandidates')?.addEventListener('click',async e=>{const button=e.currentTarget;button.disabled=true;button.textContent='Searching catalogues…';try{const d=await api(`/api/books/${encodeURIComponent(b.id)}/cover/candidates`,{method:'POST'});state.coverChooserBookId=b.id;toast(d.candidates?.length?`Found ${d.candidates.length} cover option${d.candidates.length===1?'':'s'}.`:'No useful alternatives found.');await openBook(b.id,{push:false})}catch(error){toast(error.message);button.disabled=false;button.textContent='Find alternatives'}});
|
||
$$('[data-cover-candidate]').forEach(button=>button.addEventListener('click',async()=>{try{await api(`/api/books/${encodeURIComponent(b.id)}/cover/candidates/${encodeURIComponent(button.dataset.coverCandidate)}`,{method:'PUT'});state.coverChooserBookId=null;toast('Cover selected.');await refresh();await openBook(b.id,{push:false})}catch(error){toast(error.message)}}));
|
||
$$('[data-cover-history]').forEach(button=>button.addEventListener('click',async()=>{try{await api(`/api/books/${encodeURIComponent(b.id)}/cover/history/${encodeURIComponent(button.dataset.coverHistory)}`,{method:'PUT'});state.coverChooserBookId=null;toast('Previous cover restored.');await refresh();await openBook(b.id,{push:false})}catch(error){toast(error.message)}}));
|
||
const coverInput=$('#manualCoverInput');
|
||
$('#uploadBookCover')?.addEventListener('click',()=>coverInput?.click());
|
||
coverInput?.addEventListener('change',async()=>{
|
||
const file=coverInput.files?.[0];if(!file)return;
|
||
if(file.size>4*1024*1024){coverInput.value='';return toast('Cover images must be 4 MB or smaller.')}
|
||
try{await api(`/api/books/${encodeURIComponent(b.id)}/cover`,{method:'PUT',headers:{'Content-Type':file.type||'application/octet-stream','X-Kovi-Filename':file.name},body:file});state.coverChooserBookId=null;stopBookCoverPoll();toast('Cover uploaded.');await refresh();await openBook(b.id,{push:false})}catch(e){toast(e.message)}finally{coverInput.value=''}
|
||
});
|
||
}
|
||
|
||
function routeFromLocation(){
|
||
const book=/^\/books\/([^/]+)$/.exec(location.pathname);if(book)return openBook(decodeURIComponent(book[1]),{push:false});
|
||
if(location.pathname==='/library')return switchView('library',{push:false});
|
||
if(location.pathname==='/calendar')return switchView('calendar',{push:false});
|
||
if(location.pathname==='/devices')return switchView('devices',{push:false});
|
||
if(location.pathname==='/status')return switchView('status',{push:false});
|
||
return switchView('home',{push:false});
|
||
}
|
||
|
||
$$('[data-view]').forEach(b=>b.addEventListener('click',()=>switchView(b.dataset.view)));
|
||
$$('[data-view-jump]').forEach(b=>b.addEventListener('click',()=>switchView(b.dataset.viewJump)));
|
||
$('[data-route-view]')?.addEventListener('click',e=>{e.preventDefault();switchView(e.currentTarget.dataset.routeView)});
|
||
$('#bookBack').addEventListener('click',()=>switchView('library'));
|
||
$('#calendarPrev').addEventListener('click',()=>moveCalendarMonth(-1));$('#calendarNext').addEventListener('click',()=>moveCalendarMonth(1));$('#calendarToday').addEventListener('click',()=>{state.calendarSelectedDay=localDateKey(new Date());loadCalendar(new Date(),state.calendarSelectedDay)});
|
||
$('#calendarDateForm').addEventListener('submit',e=>{e.preventDefault();const day=$('#calendarDateInput').value;if(!day)return toast('Choose a date to jump to.');jumpToCalendarDate(day)});
|
||
window.addEventListener('popstate',routeFromLocation);
|
||
let chartResizeTimer=null;window.addEventListener('resize',()=>{clearTimeout(chartResizeTimer);chartResizeTimer=setTimeout(()=>{if(state.dashboard?.range&&state.books.length&&$('#homeView').classList.contains('active')){renderHeatmap(state.dashboard.days||[],state.dashboard.range);renderLineChart(state.dashboard.days||[],state.dashboard.range,state.dashboard)}},120)});
|
||
document.addEventListener('click',e=>{
|
||
const day=e.target.closest('.calendar-day');if(day){const key=day.dataset.day;if(state.calendar?.range&&(key<state.calendar.range.from||key>state.calendar.range.to))loadCalendar(parseLocalDateKey(key),key);else renderCalendarDetail(key);return}
|
||
const calendarBook=e.target.closest('[data-calendar-book-id]');if(calendarBook){openBook(calendarBook.dataset.calendarBookId);return}
|
||
const card=e.target.closest('.book-card');if(!card||!card.dataset.bookId)return;e.preventDefault();openBook(card.dataset.bookId)
|
||
});
|
||
|
||
$$('.range-button').forEach(button=>button.addEventListener('click',()=>{
|
||
const key=button.dataset.range;
|
||
if(key==='custom'){
|
||
state.rangeKey='custom';$('#customRange').classList.remove('hidden');renderRangeUi(state.dashboard?.range||presetRange('year'));$('#customFrom').focus();return;
|
||
}
|
||
$('#customRange').classList.add('hidden');applyDashboardRange(key,presetRange(key));
|
||
}));
|
||
$('#customRange').addEventListener('submit',e=>{
|
||
e.preventDefault();const from=$('#customFrom').value,to=$('#customTo').value;
|
||
if(!from||!to)return toast('Choose both custom dates.');
|
||
if(from>to)return toast('The start date must be before the end date.');
|
||
applyDashboardRange('custom',{from,to});
|
||
});
|
||
|
||
const importDialog=$('#importDialog'),fileInput=$('#fileInput');
|
||
function openImport(){importDialog.showModal();$('#importResult').classList.add('hidden');$('#importProgress').classList.add('hidden')}
|
||
$('#importButton').addEventListener('click',openImport);$$('[data-open-import]').forEach(b=>b.addEventListener('click',openImport));fileInput.addEventListener('change',()=>fileInput.files[0]&&uploadFile(fileInput.files[0]));
|
||
const dz=$('#dropZone');['dragenter','dragover'].forEach(e=>dz.addEventListener(e,x=>{x.preventDefault();dz.classList.add('drag')}));['dragleave','drop'].forEach(e=>dz.addEventListener(e,x=>{x.preventDefault();dz.classList.remove('drag')}));dz.addEventListener('drop',e=>{const f=e.dataTransfer.files[0];if(f)uploadFile(f)});
|
||
async function ensureCsrf(force=false){if(state.csrf&&!force)return state.csrf;const session=await api('/api/session',{},false);state.csrf=session.csrf;return state.csrf}
|
||
async function uploadFile(file){
|
||
const p=$('#importProgress'),bar=$('#progressBar'),txt=$('#progressText'),result=$('#importResult');p.classList.remove('hidden');result.classList.add('hidden');bar.style.width='8%';txt.textContent=`Preparing ${file.name}…`;
|
||
const send=async(csrf,retried=false)=>{txt.textContent=`Uploading ${file.name}…`;const xhr=new XMLHttpRequest();xhr.open('PUT','/api/import/sqlite');xhr.setRequestHeader('Content-Type','application/vnd.sqlite3');xhr.setRequestHeader('X-Kovi-Filename',file.name);xhr.setRequestHeader('X-Kovi-CSRF',csrf);xhr.upload.onprogress=e=>{if(e.lengthComputable)bar.style.width=`${Math.max(8,Math.round(e.loaded/e.total*82))}%`};xhr.onload=async()=>{bar.style.width='100%';let data={};try{data=JSON.parse(xhr.responseText)}catch{};if(xhr.status===403&&!retried&&data.error==='Missing browser request token.'){try{bar.style.width='8%';const fresh=await ensureCsrf(true);return send(fresh,true)}catch(error){txt.textContent='Upload failed';result.classList.remove('hidden');result.textContent=error.message||'Could not refresh the browser session.';return}}if(xhr.status>=200&&xhr.status<300){txt.textContent='Import complete';result.classList.remove('hidden');result.innerHTML=`<strong>${esc(data.message||'Import complete.')}</strong><br>${data.booksSeen||0} books found · ${data.newBooks||0} new${data.excludedBooks?` · ${data.excludedBooks} KOReader manual excluded`:''}<br>${data.sessionsSeen||0} reading rows · ${data.newSessions||0} new${data.newBooks?'<br><span class="muted">Covers are being matched automatically.</span>':''}`;await refresh();setTimeout(refresh,3000)}else{txt.textContent='Import failed';result.classList.remove('hidden');result.textContent=data.error||'Upload failed.'}};xhr.onerror=()=>{txt.textContent='Upload failed';result.classList.remove('hidden');result.textContent='Could not reach kovi.'};xhr.send(file)};
|
||
try{const csrf=await ensureCsrf(true);await send(csrf)}catch(error){txt.textContent='Upload failed';result.classList.remove('hidden');result.textContent=error.message||'Could not prepare the upload.'}
|
||
}
|
||
|
||
$('#bookSearch').addEventListener('input',e=>{state.libraryQuery=e.target.value;renderLibrary()});
|
||
$('#bookSort').addEventListener('change',e=>{state.librarySort=LIBRARY_SORTS.includes(e.target.value)?e.target.value:'recent';localStorage.setItem('kovi-library-sort',state.librarySort);renderLibrary()});
|
||
$('#bookFilter').addEventListener('change',e=>{state.libraryFilter=LIBRARY_FILTERS.includes(e.target.value)?e.target.value:'all';localStorage.setItem('kovi-library-filter',state.libraryFilter);renderLibrary()});
|
||
const pairOriginHint=$('#pairOriginHint');if(pairOriginHint){const h=location.hostname;pairOriginHint.textContent=(h==='localhost'||h==='127.0.0.1'||h==='0.0.0.0')?'You opened kovi locally, so use this computer’s LAN IP instead (for example http://192.168.1.23:3000).':`This page is at ${location.origin}; if your KOReader can reach that hostname/address, use it.`}
|
||
const pairDialog=$('#pairDialog');
|
||
function stopPairPoll(){if(state.pairPoll){clearTimeout(state.pairPoll);state.pairPoll=null}}
|
||
async function pollPairing(requestId){
|
||
try{
|
||
const status=await api(`/api/pairing-codes/${encodeURIComponent(requestId)}`);
|
||
if(status.status==='paired'){stopPairPoll();$('#pairStatusText').textContent='Paired successfully.';await loadDevices();pairDialog.close();toast(`Paired ${status.device?.name||status.device?.model||'KOReader'} successfully.`);return}
|
||
if(status.status==='expired'){stopPairPoll();$('#pairStatusText').textContent='This code expired. Generate another one.';return}
|
||
state.pairPoll=setTimeout(()=>pollPairing(requestId),1500);
|
||
}catch{state.pairPoll=setTimeout(()=>pollPairing(requestId),2500)}
|
||
}
|
||
$('#pairButton').addEventListener('click',()=>{stopPairPoll();pairDialog.showModal();$('#pairCodeBox').classList.add('hidden')});
|
||
pairDialog.addEventListener('close',stopPairPoll);
|
||
$('#generatePair').addEventListener('click',async()=>{try{stopPairPoll();const d=await api('/api/pairing-codes',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({label:$('#pairLabel').value})});$('#pairCode').textContent=d.code;$('#pairExpiry').textContent='Expires in 10 minutes · one use only';$('#pairStatusText').textContent='Waiting for your KOReader…';$('#pairCodeBox').classList.remove('hidden');pollPairing(d.requestId)}catch(e){toast(e.message)}});
|
||
async function loadDevices(){try{const d=await api('/api/devices');$('#deviceList').innerHTML=d.devices.map(x=>`<div class="device-row"><div class="device-id"><span class="device-icon">▤</span><div><div class="device-title-line"><strong>${esc(x.name||x.model||'KOReader')}</strong>${x.needs_update&&!x.revoked_at?'<span class="status-badge warning">Plugin update needed</span>':''}</div><div class="muted">${esc(x.model||x.id)} · plugin ${esc(x.plugin_version||'unknown')} · ${x.last_seen_at?'last synced '+new Date(x.last_seen_at).toLocaleString():'paired, not synced yet'}${x.revoked_at?' · revoked':''}</div>${x.needs_update&&!x.revoked_at?`<div class="device-warning">${x.supports_cover_sync?'':'Embedded covers and ISBN enrichment require plugin '+esc(x.min_cover_plugin_version)+'. '}${x.supports_incremental_sync?'':'Incremental statistics and annotation sync require plugin '+esc(x.min_incremental_plugin_version)+'. '}${x.plugin_version&&x.plugin_version!==x.latest_plugin_version?'Update to the current plugin for the latest sync improvements.':''} <a href="/kovi-plugin.zip">Download current plugin ${esc(x.latest_plugin_version)}</a>.</div>`:''}</div></div>${x.revoked_at?'':`<button class="danger" data-revoke="${esc(x.id)}">Revoke</button>`}</div>`).join('')||'<article class="panel"><p class="muted">No KOReader devices paired yet.</p></article>';$$('[data-revoke]').forEach(b=>b.addEventListener('click',async()=>{await api(`/api/devices/${encodeURIComponent(b.dataset.revoke)}/revoke`,{method:'POST'});toast('Device access revoked.');loadDevices()}))}catch(e){toast(e.message)}}
|
||
|
||
const fmtBytes=value=>{let n=Math.max(0,Number(value||0));const units=['B','KB','MB','GB'];let i=0;while(n>=1024&&i<units.length-1){n/=1024;i++}return `${n.toFixed(i?1:0)} ${units[i]}`};
|
||
function renderStatus(){
|
||
const d=state.status;if(!d)return;const lib=d.library||{},storage=d.storage||{};
|
||
$('#statusMetrics').innerHTML=[['Books',Number(lib.books||0).toLocaleString(),'in the local library'],['Sessions',Number(lib.sessions||0).toLocaleString(),'stored reading events'],['Highlights',Number(lib.annotations||0).toLocaleString(),'synced highlight/note records'],['Storage',fmtBytes(storage.total_bytes),'database + cover cache'],['Time zone',esc(d.time_zone||'UTC'),'dashboard and calendar dates']].map(x=>`<article class="metric"><span>${x[0]}</span><strong>${x[1]}</strong><small>${x[2]}</small></article>`).join('');
|
||
$('#statusSyncs').innerHTML=(d.recentSyncs||[]).slice(0,3).map(x=>`<div class="status-row"><div><strong>${esc(x.device_name||x.device_model||'KOReader')}</strong><small>${new Date(x.created_at).toLocaleString()} · ${esc(x.mode)} sync · cursor ${Number(x.cursor_after||0).toLocaleString()}</small></div><span>${Number(x.new_sessions||0)} new / ${Number(x.sessions_seen||0)} sent<br><small>${Number(x.annotation_sets||0)} changed annotation book${Number(x.annotation_sets||0)===1?'':'s'}</small></span></div>`).join('')||'<p class="muted">No plugin syncs recorded yet.</p>';
|
||
$('#statusImports').innerHTML=(d.recentImports||[]).slice(0,3).map(x=>`<div class="status-row"><div><strong>${esc(x.filename||x.kind||'Import')}</strong><small>${new Date(x.created_at).toLocaleString()} · ${fmtBytes(x.file_size)}</small></div><span>${Number(x.new_books||0)} new books<br><small>${Number(x.new_sessions||0)} new sessions${x.warnings?.length?` · ${x.warnings.length} warning${x.warnings.length===1?'':'s'}`:''}</small></span></div>`).join('')||'<p class="muted">No manual imports recorded yet.</p>';
|
||
}
|
||
async function loadStatus({feedback=false}={}){
|
||
const button=$('#refreshStatus');const original=button?.textContent||'Refresh';
|
||
if(button){button.disabled=true;button.textContent='Refreshing…'}
|
||
try{
|
||
state.status=await api(`/api/status?fresh=${Date.now()}`,{cache:'no-store'});renderStatus();
|
||
if(feedback)toast(`Status refreshed at ${new Date().toLocaleTimeString([], {hour:'2-digit',minute:'2-digit',second:'2-digit'})}.`);
|
||
}catch(e){toast(e.message)}
|
||
finally{if(button){button.disabled=false;button.textContent=original}}
|
||
}
|
||
$('#refreshStatus')?.addEventListener('click',()=>loadStatus({feedback:true}));
|
||
|
||
$('#retryCovers').addEventListener('click',async()=>{try{const d=await api('/api/covers/retry',{method:'POST'});toast(d.queued?`${d.queued} cover${d.queued===1?'':'s'} queued.`:'No missing covers to retry.');state.books.forEach(b=>{if(b.cover_status==='none'||b.cover_status==='error')b.cover_status='pending'});coverPoll=setTimeout(()=>refresh().catch(()=>{}),3000)}catch(e){toast(e.message)}});
|
||
function setTheme(dark){document.documentElement.classList.toggle('dark',dark);localStorage.setItem('kovi-theme',dark?'dark':'light');const meta=$('#themeColor');if(meta)meta.setAttribute('content',dark?'#0c1320':'#f6f3ec');const button=$('#themeButton');button.textContent=dark?'☀':'◐';button.setAttribute('aria-label',dark?'Switch to light theme':'Switch to dark theme');button.setAttribute('aria-pressed',String(dark))}
|
||
const savedTheme=localStorage.getItem('kovi-theme');setTheme(savedTheme==='dark'||(!savedTheme&&matchMedia('(prefers-color-scheme: dark)').matches));
|
||
$('#themeButton').addEventListener('click',()=>setTheme(!document.documentElement.classList.contains('dark')));
|
||
|
||
api('/api/session').then(s=>{state.csrf=s.csrf;return refresh()}).then(routeFromLocation).catch(e=>toast(e.message));
|