gronod/headphones
1
0
Fork 1
mirror of https://github.com/rembo10/headphones.git synced 2026-05-02 01:39:29 +01:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #3376 from uniquePWD/patch-8

Browse Source 
Update index.html
This commit is contained in:
AdeHub
2025-08-03 20:50:14 +12:00
committed by GitHub
parent 87dd0b156b 40b71cf6ed
commit 7b7acf9a42
1 changed files with 131 additions and 63 deletions
Download Patch File Download Diff File Expand all files Collapse all files

194
data/interfaces/default/index.html
View File

@@ -7,11 +7,11 @@
<table class="display" id="artist_table">
<thead>
<tr>
<th id="albumart"></th>
<th id="name">Artist Name</th>
<th id="status">Status</th>
<th id="album">Latest Release</th>
<th id="have">Have</th>
<th class="column-albumart"></th> <%-- Changed id to class --%>
<th class="column-name">Artist Name</th>
<th class="column-status">Status</th>
<th class="column-album">Latest Release</th>
<th class="column-have">Have</th>
</tr>
</thead>
<tbody>
@@ -20,14 +20,52 @@
</%def>
<%def name="headIncludes()">
${parent.headIncludes()} <%-- Ensure parent head includes are kept --%>
<link rel="stylesheet" href="interfaces/default/css/data_table.css">
<style>
/* Basic CSS for album art thumbnail */
.albumArt-thumb {
height: 50px;
width: 50px;
object-fit: cover; /* Ensures image covers the area without distortion */
vertical-align: middle;
}
/* Styling for the progress bar */
.progress-container {
background-color: #eee;
border-radius: 5px;
height: 15px; /* Adjust height as needed */
overflow: hidden;
position: relative;
width: 100%; /* Or a fixed width if preferred */
}
.progress-container > div {
background-color: #4CAF50; /* Green color for progress */
height: 100%;
border-radius: 5px;
text-align: center;
color: white;
font-size: 10px; /* Smaller font for percentage */
line-height: 15px; /* Vertically align text */
}
.havetracks {
padding: 0 5px; /* Add some padding around the text */
}
</style>
</%def>
<%def name="javascriptIncludes()">
<script src="js/libs/jquery.unveil.min.js"></script>
${parent.javascriptIncludes()} <%-- Ensure parent javascript includes are kept --%>
<script src="js/libs/jquery.unveil.min.js"></script> <%-- Keep if still using for lazy loading --%>
<script src="js/libs/jquery.dataTables.min.js"></script>
<script>
function initThisPage() {
// Encapsulate page-specific logic
var IndexPage = IndexPage || {};
IndexPage.initDataTable = function() {
$('#artist_table').dataTable({
"bDestroy": true,
"aoColumnDefs": [
@@ -36,14 +74,17 @@
"aTargets": [0],
"mData":"ArtistID",
"mRender": function ( data, type, full ) {
return '<div id="artistImg"><img class="albumArt" height="50" width="50" alt="" id="'+ data + '" data-src="artwork/thumbs/artist/' + data + '"/></div>';
// Using a class for the image, and data-src for lazy loading
// Added loading="lazy" for native lazy loading support where available
return '<div class="artistImg-container"><img class="albumArt-thumb" alt="Album art for ' + full['ArtistName'] + '" data-src="artwork/thumbs/artist/' + data + '" loading="lazy" /></div>';
}
},
{
"aTargets":[1],
"mDataProp":"ArtistSortName",
"mRender":function (data,type,full) {
return '<span title="' + full['ArtistID'] + '"></span><a href="artistPage?ArtistID=' + full['ArtistID'] + '">' + full['ArtistName'] + '</a>'
// Using a class for the span, not an ID
return '<span class="artist-sort-name" title="' + full['ArtistID'] + '"></span><a href="artistPage?ArtistID=' + full['ArtistID'] + '">' + full['ArtistName'] + '</a>'
}
},
{
@@ -53,52 +94,52 @@
"aTargets":[3],
"mDataProp":"LatestAlbum",
"mRender":function(data,type,full){
artist = full;
if (artist['ReleaseDate'] && artist['LatestAlbum'])
{
var artist = full; // Renamed to avoid confusion with outer scope
var releasedate = '';
var albumdisplay = '<i>None</i>';
var grade = 'gradeZ'; // Default grade
if (artist['ReleaseDate'] && artist['LatestAlbum']) {
releasedate = artist['ReleaseDate'];
albumdisplay = '<i>' + artist['LatestAlbum'] + '</i> (' + artist['ReleaseDate'] + ')';
}
else if(artist['LatestAlbum'])
{
releasedate = '';
} else if (artist['LatestAlbum']) {
albumdisplay = '<i>' + artist['LatestAlbum'] + '</i>';
}
else
{
releasedate = '';
albumdisplay = '<i>None</i>';
}
if (artist['ReleaseInFuture'] === 'True')
{
if (artist['ReleaseInFuture'] === 'True') {
grade = 'gradeA';
}
else
{
grade = 'gradeZ';
}
artist['Grade'] = grade;
return '<span title="' + releasedate + '"></span><a href="albumPage?AlbumID=' + full['AlbumID'] + '">' + albumdisplay + '</a>'
// artist['Grade'] is used in fnRowCallback, ensure it's set in the data.
// If this 'Grade' is only for client-side sorting/filtering, it's fine.
// If it affects server-side logic, it should be handled there.
full['Grade'] = grade; // Ensure grade is part of the row data for fnRowCallback
// Using a class for the span, not an ID
return '<span class="release-date-sort" title="' + releasedate + '"></span><a href="albumPage?AlbumID=' + full['AlbumID'] + '">' + albumdisplay + '</a>'
}
},
{
"aTargets":[4],
"mDataProp":"HaveTracks",
"mRender":function(data,type,full){
if(full['TotalTracks'] > 0)
{
percent = (full['HaveTracks']*100.0)/full['TotalTracks']
if(percent > 100){
var percent = 0;
var totalTracksDisplay = '?';
if (full['TotalTracks'] > 0) {
percent = (full['HaveTracks']*100.0)/full['TotalTracks'];
if (percent > 100) {
percent = 100;
}
}
else
{
full['TotalTracks'] = '?';
percent = 0;
totalTracksDisplay = full['TotalTracks'];
}
return '<span title="' + percent + '"></span><div class="progress-container"><div style="width:' + percent + '%"><div class="havetracks">' + full['HaveTracks'] + '/' + full['TotalTracks'] + '</div></div></div>';
// Added ARIA attributes for accessibility
return '<span class="have-tracks-sort" title="' + percent + '"></span>' +
'<div class="progress-container" role="progressbar" aria-valuenow="' + Math.round(percent) + '" aria-valuemin="0" aria-valuemax="100">' +
'<div style="width:' + percent + '%">' +
'<div class="havetracks">' + full['HaveTracks'] + '/' + totalTracksDisplay + '</div>' +
'</div>' +
'</div>';
}
},
],
@@ -110,46 +151,73 @@
"sInfoFiltered":"(filtered from _MAX_ total artists)",
"sEmptyTable": " ",
},
"bStateSave": true,
"bStateSave": true, // Retain table state across page loads
"iDisplayLength": 50,
"sPaginationType": "full_numbers",
"bProcessing": true,
"bServerSide": true,
"sAjaxSource": 'getArtists.json',
"bProcessing": true, // Show processing indicator
"bServerSide": true, // Enable server-side processing
"sAjaxSource": 'getArtists.json', // API endpoint for data
"fnRowCallback": function(nRow, aData, iDisplayIndex, iDisplayIndexFull) {
$('td', nRow).closest('tr').addClass(aData['Grade'])
nRow.children[0].id = 'albumart';
nRow.children[1].id = 'name';
nRow.children[2].id = 'status'
nRow.children[3].id = 'album'
nRow.children[4].id = 'have'
// Apply the 'Grade' class from aData to the table row
$(nRow).addClass(aData['Grade']);
// Removed setting duplicate IDs on child elements. Use classes if needed for styling.
// For example:
// $(nRow).find('td:eq(0)').addClass('albumart-cell');
// $(nRow).find('td:eq(1)').addClass('name-cell');
// etc.
return nRow;
},
"fnServerData": function ( sSource, aoData, fnCallback ) {
/* Add some extra data to the sender */
$.getJSON( sSource, aoData, function (json) { fnCallback(json) } )
},
"fnInitComplete": function(oSettings, json)
{
// Custom function for fetching data, using $.getJSON
$.getJSON( sSource, aoData, function (json) {
fnCallback(json);
}).fail(function(jqXHR, textStatus, errorThrown) {
console.error("Error fetching artist data:", textStatus, errorThrown);
// Provide user feedback if data loading fails
// e.g., show an error message in the table or a global notification
});
},
// Removed fnInitComplete as it was empty
"fnDrawCallback": function (o) {
// Jump to top of page
$('html,body').scrollTop(0);
// Re-unveil images after each draw for lazy loading
$("img.albumArt-thumb").unveil();
}
});
$('#artist_table').on("draw.dt", function () {
$("img").unveil();
});
// jQuery Unveil listener for new images added to the DOM after DataTables draw
// This is handled in fnDrawCallback now for better integration with DataTables.
// $('#artist_table').on("draw.dt", function () {
// $("img.albumArt-thumb").unveil();
// });
resetFilters("artist or album");
}
// Assuming resetFilters is a global function from common.js
if (typeof resetFilters === 'function') {
resetFilters("artist or album");
} else {
console.warn("resetFilters function is not defined.");
}
};
$(document).ready(function() {
initThisPage();
IndexPage.initDataTable();
});
$(window).load(function(){
initFancybox();
refreshLoadArtist();
$(window).on('load', function(){
// Ensure these functions exist and are necessary.
// If initFancybox or refreshLoadArtist are global, call them here.
// Otherwise, they should be encapsulated or refactored.
if (typeof initFancybox === 'function') {
initFancybox();
} else {
console.warn("initFancybox function is not defined.");
}
if (typeof refreshLoadArtist === 'function') {
refreshLoadArtist();
} else {
console.warn("refreshLoadArtist function is not defined.");
}
});
</script>
</%def>