mirror of
https://github.com/jellyfin/jellyfin-web
synced 2025-03-30 19:56:21 +00:00
update sync process
This commit is contained in:
Luke Pulverenti
parent
cc428aac1d
commit
504384e83d
109 changed files with 553 additions and 289 deletions
|
|
@ -48,7 +48,7 @@
|
|||
}
|
||||
|
||||
var html = '';
|
||||
html += '<div class="syncStatusBanner" data-status="' + job.Status + '" style="background-color:' + background + ';position:absolute;top:0;right:0;padding:.5em .5em; text-align:left;color: #fff; font-weight: 500; text-transform:uppercase; border-bottom-left-radius: 3px;">';
|
||||
html += '<div class="syncStatus" secondary data-status="' + job.Status + '" style="color:' + background + ';">';
|
||||
html += text;
|
||||
html += '</div>';
|
||||
|
||||
|
|
@ -59,59 +59,23 @@
|
|||
|
||||
var html = '';
|
||||
|
||||
html += "<div class='card squareCard' data-id='" + job.Id + "' data-status='" + job.Status + "'>";
|
||||
|
||||
html += '<div class="' + cardBoxCssClass + '">';
|
||||
html += '<div class="cardScalable">';
|
||||
|
||||
html += '<div class="cardPadder"></div>';
|
||||
|
||||
syncJobPage += '?id=' + job.Id;
|
||||
|
||||
html += '<a class="cardContent" href="' + syncJobPage + '">';
|
||||
|
||||
var imgUrl;
|
||||
var style = '';
|
||||
html += '<paper-icon-item class="syncJobItem" data-id="' + job.Id + '" data-status="' + job.Status + '">';
|
||||
|
||||
if (job.PrimaryImageItemId) {
|
||||
imgUrl = ApiClient.getScaledImageUrl(job.PrimaryImageItemId, {
|
||||
var imgUrl = ApiClient.getScaledImageUrl(job.PrimaryImageItemId, {
|
||||
type: "Primary",
|
||||
width: 400,
|
||||
tag: job.PrimaryImageTag
|
||||
width: 40,
|
||||
tag: job.PrimaryImageTag,
|
||||
minScale: 3
|
||||
});
|
||||
style = "background-position:center center;";
|
||||
html += '<paper-fab class="listAvatar blue" style="background-image:url(\'' + imgUrl + '\');background-repeat:no-repeat;background-position:center center;background-size: cover;" item-icon></paper-fab>';
|
||||
} else {
|
||||
style = "background-color:#38c;background-position:center center;";
|
||||
imgUrl = "css/images/items/detail/video.png";
|
||||
html += '<paper-fab class="listAvatar blue" icon="sync" item-icon></paper-fab>';
|
||||
}
|
||||
|
||||
html += '<div class="cardImage coveredCardImage lazy" data-src="' + imgUrl + '" style="' + style + '">';
|
||||
|
||||
var progress = job.Progress || 0;
|
||||
|
||||
var footerClass = 'cardFooter fullCardFooter lightCardFooter';
|
||||
|
||||
if (progress == 0 || progress >= 100) {
|
||||
footerClass += ' hide';
|
||||
}
|
||||
|
||||
html += '<div class="' + footerClass + '">';
|
||||
html += "<div class='cardText cardProgress'>";
|
||||
html += '<progress class="itemProgressBar" min="0" max="100" value="' + progress + '"></progress>';
|
||||
html += "</div>";
|
||||
html += "</div>";
|
||||
|
||||
html += "</div>";
|
||||
|
||||
html += getSyncStatusBanner(job);
|
||||
|
||||
// cardContent
|
||||
html += "</a>";
|
||||
|
||||
// cardScalable
|
||||
html += "</div>";
|
||||
|
||||
html += '<div class="cardFooter outerCardFooter">';
|
||||
html += '<paper-item-body three-line style="min-height:120px;">';
|
||||
syncJobPage += '?id=' + job.Id;
|
||||
html += '<a class="clearLink" href="' + syncJobPage + '">';
|
||||
|
||||
var textLines = [];
|
||||
|
||||
|
|
@ -131,24 +95,80 @@
|
|||
textLines.push(' ');
|
||||
}
|
||||
|
||||
html += '<div class="cardText" style="text-align:right; float:right;padding:0;">';
|
||||
html += '<paper-icon-button icon="' + AppInfo.moreIcon + '" class="btnJobMenu"></paper-icon-button>';
|
||||
html += "</div>";
|
||||
|
||||
for (var i = 0, length = textLines.length; i < length; i++) {
|
||||
html += "<div class='cardText' style='margin-right:30px;'>";
|
||||
|
||||
if (i == 0) {
|
||||
html += "<div>";
|
||||
} else {
|
||||
html += "<div secondary>";
|
||||
}
|
||||
html += textLines[i];
|
||||
html += "</div>";
|
||||
}
|
||||
|
||||
// cardFooter
|
||||
html += "</div>";
|
||||
html += getSyncStatusBanner(job);
|
||||
|
||||
// cardBox
|
||||
html += "</div>";
|
||||
html += '<div secondary class="syncProgresContainer" style="padding-top:5px;">';
|
||||
html += '<paper-progress class="mini" style="width:100%;" value="' + (job.Progress || 0) + '"></paper-progress>';
|
||||
html += '</div>';
|
||||
|
||||
// card
|
||||
html += "</div>";
|
||||
html += '</a>';
|
||||
html += '</paper-item-body>';
|
||||
|
||||
html += '<paper-icon-button icon="' + AppInfo.moreIcon + '" class="btnJobMenu"></paper-icon-button>';
|
||||
|
||||
html += '</paper-icon-item>';
|
||||
|
||||
//html += "<div class='card squareCard'>";
|
||||
|
||||
//html += '<div class="' + cardBoxCssClass + '">';
|
||||
//html += '<div class="cardScalable">';
|
||||
|
||||
//html += '<div class="cardPadder"></div>';
|
||||
|
||||
//html += '<a class="cardContent" href="' + syncJobPage + '">';
|
||||
|
||||
//var imgUrl;
|
||||
//var style = '';
|
||||
|
||||
//html += '<div class="cardImage coveredCardImage lazy" data-src="' + imgUrl + '" style="' + style + '">';
|
||||
|
||||
//var progress = job.Progress || 0;
|
||||
|
||||
//var footerClass = 'cardFooter fullCardFooter lightCardFooter';
|
||||
|
||||
//if (progress == 0 || progress >= 100) {
|
||||
// footerClass += ' hide';
|
||||
//}
|
||||
|
||||
//html += '<div class="' + footerClass + '">';
|
||||
//html += "<div class='cardText cardProgress'>";
|
||||
//html += '<progress class="itemProgressBar" min="0" max="100" value="' + progress + '"></progress>';
|
||||
//html += "</div>";
|
||||
//html += "</div>";
|
||||
|
||||
//html += "</div>";
|
||||
|
||||
//// cardContent
|
||||
//html += "</a>";
|
||||
|
||||
//// cardScalable
|
||||
//html += "</div>";
|
||||
|
||||
//html += '<div class="cardFooter outerCardFooter">';
|
||||
|
||||
//html += '<div class="cardText" style="text-align:right; float:right;padding:0;">';
|
||||
//html += '<paper-icon-button icon="' + AppInfo.moreIcon + '" class="btnJobMenu"></paper-icon-button>';
|
||||
//html += "</div>";
|
||||
|
||||
//// cardFooter
|
||||
//html += "</div>";
|
||||
|
||||
//// cardBox
|
||||
//html += "</div>";
|
||||
|
||||
//// card
|
||||
//html += "</div>";
|
||||
|
||||
return html;
|
||||
}
|
||||
|
|
@ -187,24 +207,26 @@
|
|||
if (targetName != lastTargetName) {
|
||||
|
||||
if (lastTargetName) {
|
||||
html += '<br/>';
|
||||
html += '<br/>';
|
||||
html += '<br/>';
|
||||
html += '</div>';
|
||||
html += '</div>';
|
||||
}
|
||||
|
||||
lastTargetName = targetName;
|
||||
|
||||
html += '<div class="detailSectionHeader">';
|
||||
|
||||
html += '<div>' + targetName + '</div>';
|
||||
|
||||
html += '</div>';
|
||||
html += '<div class="syncActivityForTarget">';
|
||||
html += '<h1>' + targetName + '</h1>';
|
||||
html += '<div class="paperList">';
|
||||
}
|
||||
}
|
||||
|
||||
html += getSyncJobHtml(page, job, cardBoxCssClass, syncJobPage);
|
||||
}
|
||||
|
||||
if (jobs.length) {
|
||||
html += '</div>';
|
||||
html += '</div>';
|
||||
}
|
||||
|
||||
var elem = $('.syncActivity', page).html(html).lazyChildren();
|
||||
Events.trigger(elem[0], 'create');
|
||||
|
||||
|
|
@ -229,38 +251,32 @@
|
|||
|
||||
function refreshJob(page, job) {
|
||||
|
||||
var card = page.querySelector('.card[data-id=\'' + job.Id + '\']');
|
||||
var card = page.querySelector('.syncJobItem[data-id=\'' + job.Id + '\']');
|
||||
|
||||
if (!card) {
|
||||
return;
|
||||
}
|
||||
|
||||
var banner = card.querySelector('.syncStatusBanner');
|
||||
var banner = card.querySelector('.syncStatus');
|
||||
|
||||
if (banner.getAttribute('data-status') == job.Status) {
|
||||
var elem = document.createElement('div');
|
||||
elem.innerHTML = getSyncStatusBanner(job);
|
||||
elem = elem.querySelector('.syncStatusBanner');
|
||||
elem = elem.querySelector('.syncStatus');
|
||||
elem.parentNode.removeChild(elem);
|
||||
|
||||
banner.parentNode.replaceChild(elem, banner);
|
||||
}
|
||||
|
||||
var progress = job.Progress || 0;
|
||||
var cardFooter = card.querySelector('.cardFooter');
|
||||
var syncProgresContainer = card.querySelector('.syncProgresContainer');
|
||||
|
||||
if (progress == 0 || progress >= 100) {
|
||||
cardFooter.classList.add('hide');
|
||||
}
|
||||
else {
|
||||
cardFooter.classList.remove('hide');
|
||||
cardFooter.querySelector('.itemProgressBar').value = progress;
|
||||
}
|
||||
syncProgresContainer.querySelector('paper-progress').value = progress;
|
||||
}
|
||||
|
||||
function showJobMenu(page, elem) {
|
||||
|
||||
var card = $(elem).parents('.card');
|
||||
var card = $(elem).parents('.syncJobItem');
|
||||
var jobId = card.attr('data-id');
|
||||
var status = card.attr('data-status');
|
||||
|
||||
|
|
@ -377,7 +393,7 @@
|
|||
|
||||
}
|
||||
|
||||
$(document).on('pageshowready', ".syncActivityPage", function () {
|
||||
$(document).on('pageshow', ".syncActivityPage", function () {
|
||||
|
||||
var page = this;
|
||||
lastDataLoad = 0;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue