CC-3482: Live Stream: UI Design for Source Stream panel on dashboard

- master panel UI integration
This commit is contained in:
James 2012-03-29 20:49:00 -04:00 committed by James
parent d2d45dcae6
commit a49a3a1d2e
4 changed files with 85 additions and 48 deletions

View File

@ -61,6 +61,7 @@ class Bootstrap extends Zend_Application_Bootstrap_Bootstrap
$view->headLink()->appendStylesheet($baseUrl.'/css/redmond/jquery-ui-1.8.8.custom.css?'.$CC_CONFIG['airtime_version']);
$view->headLink()->appendStylesheet($baseUrl.'/css/pro_dropdown_3.css?'.$CC_CONFIG['airtime_version']);
$view->headLink()->appendStylesheet($baseUrl.'/css/qtip/jquery.qtip.min.css?'.$CC_CONFIG['airtime_version']);
$view->headLink()->appendStylesheet($baseUrl.'/css/masterpanel.css?'.$CC_CONFIG['airtime_version']);
$view->headLink()->appendStylesheet($baseUrl.'/css/styles.css?'.$CC_CONFIG['airtime_version']);
}

View File

@ -21,48 +21,47 @@
</div>
</div>
<div class="source-info-block">
<h3>Source Streams</h3>
<ul>
<li>Source Streams</li>
<li>
<div id="scheduled_play_div">
Scheduled Play
<div class="line-to-on-air off"></div>
<a href="#" id="scheduled_play" class="source-switch-button" onclick="setSwitchListener(this);"><span><?php echo $this->scheduled_play_switch?></span></a>
<div class="line-to-switch off"></div>
</div>
<div id="scheduled_play_div" class="source-label"> Scheduled Play</div>
<div class="line-to-switch"></div>
<a href="#" id="scheduled_play" class="source-switch-button" onclick="setSwitchListener(this);"><span><?php echo $this->scheduled_play_switch?></span></a>
<div class="line-to-on-air"></div>
</li>
<li>
<div id="live_dj_div">
<a id="live_dj" class="source-kick-button" onclick="kickSource(this)"></a>
<div id="live_dj_div" class="source-label">
<a id="live_dj" class="source-kick-button" onclick="kickSource(this)"></a>
Show Source
<div class="line-to-on-air off"></div>
<a href="#" id="live_dj" class="source-switch-button" onclick="setSwitchListener(this);"><span><?php echo $this->live_dj_switch?></span></a>
<div class="line-to-switch off"></div>
</div>
<div class="line-to-switch"></div>
<a href="#" id="live_dj" class="source-switch-button" onclick="setSwitchListener(this);"><span><?php echo $this->live_dj_switch?></span></a>
<div class="line-to-on-air"></div>
</li>
<li>
<div id="master_dj_div">
<div id="master_dj_div" class="source-label">
<a id="master_dj" class="source-kick-button" onclick="kickSource(this)"></a>
Master Source
<div class="line-to-on-air off"></div>
<a href="#" id="master_dj" class="source-switch-button" onclick="setSwitchListener(this);"><span><?php echo $this->master_dj_switch?></span></a>
<div class="line-to-switch off"></div>
</div>
</div>
<div class="line-to-switch"></div>
<a href="#" id="master_dj" class="source-switch-button" onclick="setSwitchListener(this);"><span><?php echo $this->master_dj_switch?></span></a>
<div class="line-to-on-air"></div>
</li>
</ul>
</div>
<div class="on-air-block">
<h3>&nbsp;</h3>
<div class="on-air-info off" id="on-air-info">ON AIR</div>
<a href="#" class="listen-control-button"><span>Listen</span></a>
</div>
<div class="time-info-block">
<div class="time-info-block pull-right">
<ul>
<li>Station time</li>
<li class="time" id="time"></li>
<li class="time-zone"><span id="time-zone"></span></li>
</ul>
</div>
<div class="personal-block">
<div class="personal-block solo">
<ul>
<li><span class="name"><?php echo $this->user ?></span> | <a href="/Login/logout">Logout</a></li>
</ul>

View File

@ -1,6 +1,6 @@
#Note: project.home is automatically generated by the propel-install script.
#Any manual changes to this value will be overwritten.
project.home = /home/naomiaro/airtime/airtime_mvc
project.home = /home/james/src/airtime/airtime_mvc
project.build = ${project.home}/build
#Database driver

View File

@ -75,27 +75,33 @@ function updateProgressBarValue(){
$('#progress-show').attr("style", "width:"+showPercentDone+"%");
var songPercentDone = 0;
var scheduled_play_div = $("#scheduled_play_div")
var scheduled_play_line_to_switch = scheduled_play_div.parent().find(".line-to-switch")
if (currentSong !== null){
songPercentDone = (estimatedSchedulePosixTime - currentSong.songStartPosixTime)/currentSong.songLengthMs*100;
if (songPercentDone < 0 || songPercentDone > 100){
songPercentDone = 0;
currentSong = null;
} else {
var scheduled_play_line_to_switch = $("#scheduled_play_div").find(".line-to-switch")
} else {
if (currentSong.media_item_played == "t" && currentShow.length > 0){
scheduled_play_line_to_switch.attr("class", "line-to-switch on");
scheduled_play_div.addClass("ready")
scheduled_play_source = true;
}
else{
scheduled_play_source = false;
scheduled_play_line_to_switch.attr("class", "line-to-switch off");
scheduled_play_div.removeClass("ready")
}
$('#progress-show').attr("class", "progress-show");
}
} else {
scheduled_play_source = false;
$("#scheduled_play_div").find(".line-to-switch").attr("class", "line-to-switch off");
scheduled_play_line_to_switch.attr("class", "line-to-switch off");
scheduled_play_div.removeClass("ready")
$('#progress-show').attr("class", "progress-show-error");
}
$('#progress-bar').attr("style", "width:"+songPercentDone+"%");
@ -232,19 +238,25 @@ function parseItems(obj){
}
function parseSourceStatus(obj){
var live_div = $("#live_dj_div").find(".line-to-switch")
var master_div = $("#master_dj_div").find(".line-to-switch")
var live_div = $("#live_dj_div")
var master_div = $("#master_dj_div")
var live_li = live_div.parent()
var master_li = master_div.parent()
if(obj.live_dj_source == false){
live_div.attr("class", "line-to-switch off")
live_li.find(".line-to-switch").attr("class", "line-to-switch off")
live_div.removeClass("ready")
}else{
live_div.attr("class", "line-to-switch on")
live_li.find(".line-to-switch").attr("class", "line-to-switch on")
live_div.addClass("ready")
}
if(obj.master_dj_source == false){
master_div.attr("class", "line-to-switch off")
master_li.find(".line-to-switch").attr("class", "line-to-switch off")
master_div.removeClass("ready")
}else{
master_div.attr("class", "line-to-switch on")
master_li.find(".line-to-switch").attr("class", "line-to-switch on")
master_div.addClass("ready")
}
}
@ -268,9 +280,30 @@ function parseSwitchStatus(obj){
scheduled_play_on_air = false;
}
$("#scheduled_play.source-switch-button").find("span").html(obj.scheduled_play)
$("#live_dj.source-switch-button").find("span").html(obj.live_dj_source)
$("#master_dj.source-switch-button").find("span").html(obj.master_dj_source)
var scheduled_play_switch = $("#scheduled_play.source-switch-button")
var live_dj_switch = $("#live_dj.source-switch-button")
var master_dj_switch = $("#master_dj.source-switch-button")
scheduled_play_switch.find("span").html(obj.scheduled_play)
if(scheduled_play_on_air){
scheduled_play_switch.addClass("active")
}else{
scheduled_play_switch.removeClass("active")
}
live_dj_switch.find("span").html(obj.live_dj_source)
if(live_dj_on_air){
live_dj_switch.addClass("active")
}else{
live_dj_switch.removeClass("active")
}
master_dj_switch.find("span").html(obj.master_dj_source)
if(master_dj_on_air){
master_dj_switch.addClass("active")
}else{
master_dj_switch.removeClass("active")
}
}
function controlOnAirLight(){
@ -282,26 +315,26 @@ function controlOnAirLight(){
}
function controlSwitchLight(){
var live_div = $("#live_dj_div")
var master_div = $("#master_dj_div")
var scheduled_play_div = $("#scheduled_play_div")
var live_li= $("#live_dj_div").parent()
var master_li = $("#master_dj_div").parent()
var scheduled_play_li = $("#scheduled_play_div").parent()
if((scheduled_play_on_air && scheduled_play_source) && !live_dj_on_air && !master_dj_on_air){
scheduled_play_div.find(".line-to-on-air").attr("class", "line-to-on-air on")
live_div.find(".line-to-on-air").attr("class", "line-to-on-air off")
master_div.find(".line-to-on-air").attr("class", "line-to-on-air off")
scheduled_play_li.find(".line-to-on-air").attr("class", "line-to-on-air on")
live_li.find(".line-to-on-air").attr("class", "line-to-on-air off")
master_li.find(".line-to-on-air").attr("class", "line-to-on-air off")
}else if(live_dj_on_air && !master_dj_on_air){
scheduled_play_div.find(".line-to-on-air").attr("class", "line-to-on-air off")
live_div.find(".line-to-on-air").attr("class", "line-to-on-air on")
master_div.find(".line-to-on-air").attr("class", "line-to-on-air off")
scheduled_play_li.find(".line-to-on-air").attr("class", "line-to-on-air off")
live_li.find(".line-to-on-air").attr("class", "line-to-on-air on")
master_li.find(".line-to-on-air").attr("class", "line-to-on-air off")
}else if(master_dj_on_air){
scheduled_play_div.find(".line-to-on-air").attr("class", "line-to-on-air off")
live_div.find(".line-to-on-air").attr("class", "line-to-on-air off")
master_div.find(".line-to-on-air").attr("class", "line-to-on-air on")
scheduled_play_li.find(".line-to-on-air").attr("class", "line-to-on-air off")
live_li.find(".line-to-on-air").attr("class", "line-to-on-air off")
master_li.find(".line-to-on-air").attr("class", "line-to-on-air on")
}else{
scheduled_play_div.find(".line-to-on-air").attr("class", "line-to-on-air off")
live_div.find(".line-to-on-air").attr("class", "line-to-on-air off")
master_div.find(".line-to-on-air").attr("class", "line-to-on-air off")
scheduled_play_li.find(".line-to-on-air").attr("class", "line-to-on-air off")
live_li.find(".line-to-on-air").attr("class", "line-to-on-air off")
master_li.find(".line-to-on-air").attr("class", "line-to-on-air off")
}
}
@ -343,12 +376,16 @@ function setSwitchListener(ele){
var sourcename = $(ele).attr('id')
var status_span = $(ele).find("span")
var status = status_span.html()
var source_connection_status = false
$.get("/Dashboard/switch-source/format/json/sourcename/"+sourcename+"/status/"+status, function(data){
if(data.error){
alert(data.error);
}else{
if(data.status == "ON"){
$(ele).addClass("active");
}else{
$(ele).removeClass("active");
}
status_span.html(data.status)
}
});