Switch getSongList()/listsongs to return json only and generate html in javascript
This commit is contained in:
		
							parent
							
								
									8f23b77ace
								
							
						
					
					
						commit
						70886bacba
					
				| 
						 | 
					@ -31,9 +31,9 @@ system("HOME=" . WEBUSERHOMEDIR . " && ../scripts/homeaudio_togglemute.pl -show"
 | 
				
			||||||
$data['muted'] = ($retval == 0) ? false : true;
 | 
					$data['muted'] = ($retval == 0) ? false : true;
 | 
				
			||||||
$data['currentsong'] = array("art"=>"", "title"=>"", "artist"=>"", "album"=>"", "year"=>"");
 | 
					$data['currentsong'] = array("art"=>"", "title"=>"", "artist"=>"", "album"=>"", "year"=>"");
 | 
				
			||||||
$data['songhistory'] = array();
 | 
					$data['songhistory'] = array();
 | 
				
			||||||
$data['songlist'] = "";
 | 
					 | 
				
			||||||
if ( $row = $sth->fetch(PDO::FETCH_ASSOC) ) {
 | 
					if ( $row = $sth->fetch(PDO::FETCH_ASSOC) ) {
 | 
				
			||||||
   $song = new Song($row['songid']);
 | 
					   $song = new Song($row['songid']);
 | 
				
			||||||
 | 
					   $data['currentsong']["id"] = $song->getID();
 | 
				
			||||||
   $data['currentsong']["arturl"] = $song->getArtFile(ARTURL);
 | 
					   $data['currentsong']["arturl"] = $song->getArtFile(ARTURL);
 | 
				
			||||||
   $data['currentsong']["title"] = $song->getTitle(HTMLSAFE);
 | 
					   $data['currentsong']["title"] = $song->getTitle(HTMLSAFE);
 | 
				
			||||||
   $data['currentsong']["artist"] = $song->getArtist(HTMLSAFE);
 | 
					   $data['currentsong']["artist"] = $song->getArtist(HTMLSAFE);
 | 
				
			||||||
| 
						 | 
					@ -43,21 +43,13 @@ if ( $row = $sth->fetch(PDO::FETCH_ASSOC) ) {
 | 
				
			||||||
while ( $row = $sth->fetch() ) {
 | 
					while ( $row = $sth->fetch() ) {
 | 
				
			||||||
   $song = new Song($row['songid']);
 | 
					   $song = new Song($row['songid']);
 | 
				
			||||||
   $curdata = array();
 | 
					   $curdata = array();
 | 
				
			||||||
 | 
					   $curdata["id"] = $song->getID();
 | 
				
			||||||
   $curdata["arturl"] = $song->getArtFile(ARTURL);
 | 
					   $curdata["arturl"] = $song->getArtFile(ARTURL);
 | 
				
			||||||
   $curdata["title"] = $song->getTitle(HTMLSAFE);
 | 
					   $curdata["title"] = $song->getTitle(HTMLSAFE);
 | 
				
			||||||
   $curdata["artist"] = $song->getArtist(HTMLSAFE);
 | 
					   $curdata["artist"] = $song->getArtist(HTMLSAFE);
 | 
				
			||||||
   $curdata["album"] = $song->getAlbum(HTMLSAFE);
 | 
					   $curdata["album"] = $song->getAlbum(HTMLSAFE);
 | 
				
			||||||
   $curdata["year"] = $song->getYear(HTMLSAFE);
 | 
					   $curdata["year"] = $song->getYear(HTMLSAFE);
 | 
				
			||||||
   $data['songhistory'][] = $curdata;
 | 
					   $data['songhistory'][] = $curdata;
 | 
				
			||||||
   $data['songlist'] .= "<div class='songlist_song_container'>\n";
 | 
					 | 
				
			||||||
   $data['songlist'] .= "  <div class='songlist_img_container'><img class='songlist_img' src='{$song->getArtFile(ARTURL)}'></div>\n";
 | 
					 | 
				
			||||||
   $data['songlist'] .= "  <div class='songlist_details_container'>\n";
 | 
					 | 
				
			||||||
   $data['songlist'] .= "    <p class='nomargin'><span class='playing_label'>Title:</span> {$song->getTitle(HTMLSAFE)}</p>\n";
 | 
					 | 
				
			||||||
   $data['songlist'] .= "    <p class='nomargin'><span class='playing_label'>Artist:</span> {$song->getArtist(HTMLSAFE)}</p>\n";
 | 
					 | 
				
			||||||
   $data['songlist'] .= "    <p class='nomargin'><span class='playing_label'>Album:</span> {$song->getAlbum(HTMLSAFE)}</p>\n";
 | 
					 | 
				
			||||||
   $data['songlist'] .= "  </div>\n";
 | 
					 | 
				
			||||||
   $data['songlist'] .= "</div>\n";
 | 
					 | 
				
			||||||
   $data['songlist'] .= "<hr class='songlist'>\n";
 | 
					 | 
				
			||||||
}
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
header('Content-Type: application/json');
 | 
					header('Content-Type: application/json');
 | 
				
			||||||
| 
						 | 
					
 | 
				
			||||||
| 
						 | 
					@ -228,6 +228,12 @@ div.songlist_details_container {
 | 
				
			||||||
   margin-left: 0.25em;
 | 
					   margin-left: 0.25em;
 | 
				
			||||||
   float: left;
 | 
					   float: left;
 | 
				
			||||||
}
 | 
					}
 | 
				
			||||||
 | 
					div.songlist_details_container p {
 | 
				
			||||||
 | 
					   margin: 0px;
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					div.songlist_details_container span {
 | 
				
			||||||
 | 
					   font-weight: bold;
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
hr.songlist {
 | 
					hr.songlist {
 | 
				
			||||||
   width: 65%;
 | 
					   width: 65%;
 | 
				
			||||||
}
 | 
					}
 | 
				
			||||||
| 
						 | 
					
 | 
				
			||||||
| 
						 | 
					@ -7,6 +7,7 @@ var gettingSongList = false;
 | 
				
			||||||
var gettingJukeboxList = false;
 | 
					var gettingJukeboxList = false;
 | 
				
			||||||
var searchTimeout = null;
 | 
					var searchTimeout = null;
 | 
				
			||||||
var queueTarget = 0;
 | 
					var queueTarget = 0;
 | 
				
			||||||
 | 
					var paused = true;
 | 
				
			||||||
 | 
					
 | 
				
			||||||
$(document).ready(function() {
 | 
					$(document).ready(function() {
 | 
				
			||||||
   $('#tabs').tabs({
 | 
					   $('#tabs').tabs({
 | 
				
			||||||
| 
						 | 
					@ -57,7 +58,7 @@ $(document).ready(function() {
 | 
				
			||||||
   toggleMute($(this), 'show');
 | 
					   toggleMute($(this), 'show');
 | 
				
			||||||
   getSongList();
 | 
					   getSongList();
 | 
				
			||||||
   getQueueTarget();
 | 
					   getQueueTarget();
 | 
				
			||||||
   refreshTimerObj = setInterval('getSongList()', 10000);
 | 
					   refreshTimerObj = setInterval('doIntervalQuery()', 10000);
 | 
				
			||||||
   //document.documentElement.requestFullscreen();
 | 
					   //document.documentElement.requestFullscreen();
 | 
				
			||||||
});
 | 
					});
 | 
				
			||||||
 | 
					
 | 
				
			||||||
| 
						 | 
					@ -180,6 +181,32 @@ function updateChristmasButton(active) {
 | 
				
			||||||
   }
 | 
					   }
 | 
				
			||||||
}
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					function doIntervalQuery() {
 | 
				
			||||||
 | 
					   if ( paused ) return;
 | 
				
			||||||
 | 
					   getSongList();
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					function togglePause() {
 | 
				
			||||||
 | 
					   paused = !paused;
 | 
				
			||||||
 | 
					   console.log("Paused: " + (paused) ? "True" : "False");
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					function generateSongListHTML(type, songs) {
 | 
				
			||||||
 | 
					   var body = "";
 | 
				
			||||||
 | 
					   songs.forEach(function(item, index, arr) {
 | 
				
			||||||
 | 
					      body += "<div id='" + type + "_" + item.id + "' class='songlist_song_container'>";
 | 
				
			||||||
 | 
					      body += "<div class='songlist_img_container'><img class='songlist_img' src='" + item.arturl + "' /></div>";
 | 
				
			||||||
 | 
					      body +=   "<div class='songlist_details_container'>";
 | 
				
			||||||
 | 
					      body +=     "<p><span>Title:</span> " + item.title + "</p>";
 | 
				
			||||||
 | 
					      body +=     "<p><span>Artist:</span> " + item.artist + "</p>";
 | 
				
			||||||
 | 
					      body +=     "<p><span>Album:</span> " + item.album + "</p>";
 | 
				
			||||||
 | 
					      body +=   "</div>";
 | 
				
			||||||
 | 
					      body += "</div>";
 | 
				
			||||||
 | 
					      body += "<hr class='songlist'>";
 | 
				
			||||||
 | 
					   });
 | 
				
			||||||
 | 
					   return body;
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
function getSongList() {
 | 
					function getSongList() {
 | 
				
			||||||
   gettingSongList = true;
 | 
					   gettingSongList = true;
 | 
				
			||||||
   $.ajax({
 | 
					   $.ajax({
 | 
				
			||||||
| 
						 | 
					@ -195,7 +222,7 @@ function getSongList() {
 | 
				
			||||||
         $('#playing_artist').html(data.currentsong.artist);
 | 
					         $('#playing_artist').html(data.currentsong.artist);
 | 
				
			||||||
         $('#playing_album').html(data.currentsong.album);
 | 
					         $('#playing_album').html(data.currentsong.album);
 | 
				
			||||||
         $('#playing_year').html(data.currentsong.year);
 | 
					         $('#playing_year').html(data.currentsong.year);
 | 
				
			||||||
         $('#history_contents').html(data.songlist);
 | 
					         $('#history_contents').html(generateSongListHTML("hist", data.songhistory));
 | 
				
			||||||
         updateChristmasButton(data.christmas);
 | 
					         updateChristmasButton(data.christmas);
 | 
				
			||||||
         updateMuteButton(data.muted);
 | 
					         updateMuteButton(data.muted);
 | 
				
			||||||
         $('#christmas_freq').val(data.christmasfreq);
 | 
					         $('#christmas_freq').val(data.christmasfreq);
 | 
				
			||||||
| 
						 | 
					
 | 
				
			||||||
		Loading…
	
		Reference in New Issue
	
	Block a user