Congegni/sintonia
7
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

CC-3360 : Timeline Css

Browse source 
adding Css to timeline.
This commit is contained in:
Naomi Aro 2012-03-22 18:04:22 +01:00
parent b4e9f9699c
commit 1fdb3cf163
17 changed files with 3182 additions and 2832 deletions
Download patch file Download diff file Expand all files Collapse all files

4
airtime_mvc/application/forms/ShowBuilder.php
View file

@ -76,7 +76,7 @@ class Application_Form_ShowBuilder extends Zend_Form_SubForm
// add a select to choose a show. // add a select to choose a show.
$showSelect = new Zend_Form_Element_Select("sb_show_filter"); $showSelect = new Zend_Form_Element_Select("sb_show_filter");
$showSelect->setLabel("Filter By Show:"); $showSelect->setLabel("Show:");
$showSelect->setMultiOptions($this->getShowNames()); $showSelect->setMultiOptions($this->getShowNames());
$showSelect->setValue(null); $showSelect->setValue(null);
$showSelect->setDecorators(array('ViewHelper')); $showSelect->setDecorators(array('ViewHelper'));
@ -84,7 +84,7 @@ class Application_Form_ShowBuilder extends Zend_Form_SubForm
if ($user->getType() === 'H') { if ($user->getType() === 'H') {
$myShows = new Zend_Form_Element_Checkbox('sb_my_shows'); $myShows = new Zend_Form_Element_Checkbox('sb_my_shows');
$myShows->setLabel('All My Shows') $myShows->setLabel('All My Shows:')
->setDecorators(array('ViewHelper')); ->setDecorators(array('ViewHelper'));
$this->addElement($myShows); $this->addElement($myShows);
} }

4
airtime_mvc/application/layouts/scripts/builder.phtml
View file

@ -25,8 +25,8 @@
</div> </div>
<div class="wrapper"> <div class="wrapper">
<div id="library_content" class="tabs ui-widget ui-widget-content block-shadow alpha-block padded" style="display:none"><?php echo $this->layout()->library ?></div> <div id="library_content" class="lib-content tabs ui-widget ui-widget-content block-shadow alpha-block padded" style="display:none"><?php echo $this->layout()->library ?></div>
<div id="show_builder" class="ui-widget ui-widget-content block-shadow omega-block padded"><?php echo $this->layout()->builder ?></div> <div id="show_builder" class="sb-content ui-widget ui-widget-content block-shadow omega-block padded"><?php echo $this->layout()->builder ?></div>
</div> </div>
<?php echo $this->layout()->dialog ?> <?php echo $this->layout()->dialog ?>

2
airtime_mvc/application/models/Schedule.php
View file

@ -358,7 +358,7 @@ class Application_Model_Schedule {
$sql = "SELECT DISTINCT $sql = "SELECT DISTINCT
showt.name AS show_name, showt.color AS show_color, showt.name AS show_name, showt.color AS show_color,
showt.background_color AS show_background_colour, showt.id AS show_id, showt.background_color AS show_background_color, showt.id AS show_id,
si.starts AS si_starts, si.ends AS si_ends, si.time_filled AS si_time_filled, si.starts AS si_starts, si.ends AS si_ends, si.time_filled AS si_time_filled,
si.record AS si_record, si.rebroadcast AS si_rebroadcast, si.id AS si_id, si.last_scheduled AS si_last_scheduled, si.record AS si_record, si.rebroadcast AS si_rebroadcast, si.id AS si_id, si.last_scheduled AS si_last_scheduled,

94
airtime_mvc/application/models/ShowBuilder.php
View file

@ -17,9 +17,7 @@ class Application_Model_ShowBuilder {
private $contentDT; private $contentDT;
private $epoch_now; private $epoch_now;
private $hasCurrent;
private $defaultRowArray = array( private $defaultRowArray = array(
"header" => false, "header" => false,
"footer" => false, "footer" => false,
@ -38,7 +36,8 @@ class Application_Model_ShowBuilder {
"cueout" => "", "cueout" => "",
"fadein" => "", "fadein" => "",
"fadeout" => "", "fadeout" => "",
"current" => false, "color" => "", //in hex without the '#' sign.
"backgroundColor"=> "", //in hex without the '#' sign.
); );
/* /*
@ -53,8 +52,6 @@ class Application_Model_ShowBuilder {
$this->user = Application_Model_User::GetCurrentUser(); $this->user = Application_Model_User::GetCurrentUser();
$this->opts = $p_opts; $this->opts = $p_opts;
$this->epoch_now = time(); $this->epoch_now = time();
$this->hasCurrent = false;
} }
//check to see if this row should be editable. //check to see if this row should be editable.
@ -77,6 +74,23 @@ class Application_Model_ShowBuilder {
$row["allowed"] = true; $row["allowed"] = true;
} }
} }
private function getItemColor($p_item, &$row) {
$defaultColor = "ffffff";
$defaultBackground = "3366cc";
$color = $p_item["show_color"];
if ($color === '') {
$color = $defaultColor;
}
$backgroundColor = $p_item["show_background_color"];
if ($backgroundColor === '') {
$backgroundColor = $defaultBackground;
}
$row["color"] = $color;
$row["backgroundColor"] = $backgroundColor;
}
//information about whether a track is inside|boundary|outside a show. //information about whether a track is inside|boundary|outside a show.
private function getItemStatus($p_item, &$row) { private function getItemStatus($p_item, &$row) {
@ -95,29 +109,59 @@ class Application_Model_ShowBuilder {
} }
$row["timestamp"] = $ts; $row["timestamp"] = $ts;
} }
private function isCurrent($p_epochItemStart, $p_epochItemEnd, &$row) { /*
* marks a row's status.
if ($this->epoch_now >= $p_epochItemStart && $this->epoch_now < $p_epochItemEnd) { * 0 = past
$row["current"] = true; * 1 = current
//how many seconds the view should wait to redraw itself. * 2 = future
$row["refresh"] = $p_epochItemEnd - $this->epoch_now; */
private function getScheduledStatus($p_epochItemStart, $p_epochItemEnd, &$row) {
$this->hasCurrent = true;
if ($row["footer"] === true && $this->epoch_now > $p_epochItemStart && $this->epoch_now > $p_epochItemEnd) {
$row["scheduled"] = 0;
} }
else if ($row["footer"] === true && $this->epoch_now < $p_epochItemEnd) {
$row["scheduled"] = 2;
}
else if ($row["header"] === true && $this->epoch_now > $p_epochItemStart) {
$row["scheduled"] = 0;
}
else if ($row["header"] === true && $this->epoch_now < $p_epochItemEnd) {
$row["scheduled"] = 2;
}
//item is in the past.
else if ($this->epoch_now > $p_epochItemEnd) {
$row["scheduled"] = 0;
}
//item is the currently scheduled item.
else if ($this->epoch_now >= $p_epochItemStart && $this->epoch_now < $p_epochItemEnd) {
$row["scheduled"] = 1;
//how many seconds the view should wait to redraw itself.
$row["refresh"] = $p_epochItemEnd - $this->epoch_now;
}
//item is in the future.
else if ($this->epoch_now < $p_epochItemStart) {
$row["scheduled"] = 2;
}
} }
private function makeHeaderRow($p_item) { private function makeHeaderRow($p_item) {
$row = $this->defaultRowArray; $row = $this->defaultRowArray;
$this->isAllowed($p_item, $row); $this->isAllowed($p_item, $row);
Logging::log("making header for show id ".$p_item["show_id"]);
$this->getRowTimestamp($p_item, $row); $this->getRowTimestamp($p_item, $row);
$this->getItemColor($p_item, &$row);
$showStartDT = new DateTime($p_item["si_starts"], new DateTimeZone("UTC")); $showStartDT = new DateTime($p_item["si_starts"], new DateTimeZone("UTC"));
$showStartDT->setTimezone(new DateTimeZone($this->timezone)); $showStartDT->setTimezone(new DateTimeZone($this->timezone));
$startsEpoch = intval($showStartDT->format("U"));
$showEndDT = new DateTime($p_item["si_ends"], new DateTimeZone("UTC")); $showEndDT = new DateTime($p_item["si_ends"], new DateTimeZone("UTC"));
$showEndDT->setTimezone(new DateTimeZone($this->timezone)); $showEndDT->setTimezone(new DateTimeZone($this->timezone));
$endsEpoch = intval($showEndDT->format("U"));
$row["header"] = true; $row["header"] = true;
$row["starts"] = $showStartDT->format("Y-m-d H:i"); $row["starts"] = $showStartDT->format("Y-m-d H:i");
@ -127,6 +171,8 @@ class Application_Model_ShowBuilder {
$row["title"] = $p_item["show_name"]; $row["title"] = $p_item["show_name"];
$row["instance"] = intval($p_item["si_id"]); $row["instance"] = intval($p_item["si_id"]);
$row["image"] = ''; $row["image"] = '';
$this->getScheduledStatus($startsEpoch, $endsEpoch, $row);
$this->contentDT = $showStartDT; $this->contentDT = $showStartDT;
@ -136,6 +182,7 @@ class Application_Model_ShowBuilder {
private function makeScheduledItemRow($p_item) { private function makeScheduledItemRow($p_item) {
$row = $this->defaultRowArray; $row = $this->defaultRowArray;
$this->getItemColor($p_item, &$row);
$this->getRowTimestamp($p_item, $row); $this->getRowTimestamp($p_item, $row);
$this->isAllowed($p_item, $row); $this->isAllowed($p_item, $row);
@ -154,7 +201,7 @@ class Application_Model_ShowBuilder {
$showEndEpoch = intval($showEndDT->format("U")); $showEndEpoch = intval($showEndDT->format("U"));
//don't want an overbooked item to stay marked as current. //don't want an overbooked item to stay marked as current.
$this->isCurrent($startsEpoch, min($endsEpoch, $showEndEpoch), $row); $this->getScheduledStatus($startsEpoch, min($endsEpoch, $showEndEpoch), $row);
$row["id"] = intval($p_item["sched_id"]); $row["id"] = intval($p_item["sched_id"]);
$row["image"] = '<img src="/css/images/icon_audioclip.png">'; $row["image"] = '<img src="/css/images/icon_audioclip.png">';
@ -208,6 +255,16 @@ class Application_Model_ShowBuilder {
$timeFilled = new TimeFilledFormatter($runtime); $timeFilled = new TimeFilledFormatter($runtime);
$row["fRuntime"] = $timeFilled->format(); $row["fRuntime"] = $timeFilled->format();
$row["image"] = ''; $row["image"] = '';
$showStartDT = new DateTime($p_item["si_starts"], new DateTimeZone("UTC"));
$showStartDT->setTimezone(new DateTimeZone($this->timezone));
$startsEpoch = intval($showStartDT->format("U"));
$showEndDT = new DateTime($p_item["si_ends"], new DateTimeZone("UTC"));
$showEndDT->setTimezone(new DateTimeZone($this->timezone));
$endsEpoch = intval($showEndDT->format("U"));
$this->getScheduledStatus($startsEpoch, $endsEpoch, $row);
return $row; return $row;
} }
@ -298,9 +355,6 @@ class Application_Model_ShowBuilder {
$display_items[] = $this->makeFooterRow($scheduled_items[count($scheduled_items)-1]); $display_items[] = $this->makeFooterRow($scheduled_items[count($scheduled_items)-1]);
} }
if (!$this->hasCurrent) {
}
return $display_items; return $display_items;
} }
} }

23
airtime_mvc/application/views/scripts/form/showbuilder.phtml
View file

@ -8,11 +8,20 @@
<input type="button" id="sb_edit" class="ui-button ui-state-default sb-edit" value="Add Files"></input> <input type="button" id="sb_edit" class="ui-button ui-state-default sb-edit" value="Add Files"></input>
</div> </div>
<div class="sb-advanced-options"> <div class="sb-advanced-options">
<label><?php echo $this->element->getElement('sb_show_filter')->getLabel() ?></label> <fieldset class="padded display_field toggle push-down-8 closed">
<?php echo $this->element->getElement('sb_show_filter') ?> <legend style="cursor: pointer;">
<span class="ui-icon ui-icon-triangle-2-n-s"></span>
<?php if ($this->element->getElement('sb_my_shows')):?> Filter By Show:
<label><?php echo $this->element->getElement('sb_my_shows')->getLabel(); ?></label> </legend>
<?php echo $this->element->getElement('sb_my_shows'); ?>
<?php endif;?> <div class="sb-options-form">
<label><?php echo $this->element->getElement('sb_show_filter')->getLabel() ?></label>
<?php echo $this->element->getElement('sb_show_filter') ?>
<?php if ($this->element->getElement('sb_my_shows')):?>
<label><?php echo $this->element->getElement('sb_my_shows')->getLabel(); ?></label>
<?php echo $this->element->getElement('sb_my_shows'); ?>
<?php endif;?>
</div>
</fieldset>
</div> </div>

4
airtime_mvc/application/views/scripts/showbuilder/builderDialog.phtml
View file

@ -1,9 +1,9 @@
<div class="wrapper"> <div class="wrapper">
<div id="library_content" class="tabs ui-widget ui-widget-content block-shadow alpha-block padded"> <div id="library_content" class="lib-content tabs ui-widget ui-widget-content block-shadow alpha-block padded">
<div id="import_status" style="display:none">File import in progress...</div> <div id="import_status" style="display:none">File import in progress...</div>
<table id="library_display" cellpadding="0" cellspacing="0" class="datatable"></table> <table id="library_display" cellpadding="0" cellspacing="0" class="datatable"></table>
</div> </div>
<div id="show_builder" class="ui-widget ui-widget-content block-shadow omega-block padded"> <div id="show_builder" class="sb-content ui-widget ui-widget-content block-shadow omega-block padded">
<table id="show_builder_table" cellpadding="0" cellspacing="0" class="datatable"></table> <table id="show_builder_table" cellpadding="0" cellspacing="0" class="datatable"></table>
</div> </div>
</div> </div>

BIN
airtime_mvc/public/css/images/filetype_icons.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 3.4 KiB

BIN
airtime_mvc/public/css/images/round_delete.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 1.4 KiB

BIN
airtime_mvc/public/css/images/tl-arrow.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1,019 B

After

Width:  |  Height:  |  Size: 2.8 KiB

Before After
Before After

BIN
airtime_mvc/public/css/images/warning-icon.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 1 KiB

29
airtime_mvc/public/css/media_library.css
View file

@ -9,6 +9,10 @@
table-layout:fixed; table-layout:fixed;
} }
#library_display th {
text-align: left;
}
#library_content #library_display { #library_content #library_display {
width:100%; width:100%;
} }
@ -89,4 +93,27 @@ td.library_bitrate {
.library_import img { .library_import img {
vertical-align: middle; vertical-align: middle;
padding-left: 5px; padding-left: 5px;
} }
.file_type {
width:16px;
height:13px;
display:block;
background-image: url(images/filetype_icons.png);
background-repeat:no-repeat;
}
.file_type.audioclip {
background-position: 0 0;
}
a.file_type.audioclip:hover {
background-position: 0 -15px;
}
.file_type.playlist {
background-position: -20px 0;
}
a.file_type.playlist:hover {
background-position: -20px -15px;
}

5
airtime_mvc/public/css/playlist_builder.css
View file

@ -93,9 +93,6 @@
.ui-state-active .spl_artist, .ui-state-active .spl_offset { .ui-state-active .spl_artist, .ui-state-active .spl_offset {
color: #606060 !important; color: #606060 !important;
} }
/*#spl_editor {
height: 50px;
}*/
#spl_editor > div > span { #spl_editor > div > span {
/* display: inline-block; /* display: inline-block;
@ -422,7 +419,7 @@
margin: 0 0 8px 0; margin: 0 0 8px 0;
padding: 8px; padding: 8px;
} }
#side_playlist fieldset.closed .zend_form{ #side_playlist fieldset.closed .zend_form {
display:none; display:none;
} }
#side_playlist fieldset.closed { #side_playlist fieldset.closed {

280
airtime_mvc/public/css/showbuilder.css
View file

@ -1,71 +1,211 @@
@CHARSET "UTF-8"; @CHARSET "UTF-8";
#show_builder { .sb-content {
width:95%; overflow: hidden;
overflow: auto; }
}
.sb-content .dataTables_scrolling {
#show_builder_table th { overflow: auto;
text-align: left; }
}
.sb-content .dataTables_wrapper {
#show_builder input.input_text { margin-left: -16px;
width:100px; }
}
.sb-padded {
table.datatable tr.cursor-selected-row td, table.datatable tr.cursor-selected-row th { /*
border-bottom: 2px solid #db0000 !important; the padding is needed here so that the cursor arrows with a negative margin are displayable.
} */
.innerWrapper { padding-left: 16px;
position:relative; }
width:100%;
} .sb-content fieldset legend {
.marker { font-size: 13px;
position:absolute; white-space: nowrap;
bottom:-10px; width: 110px;
left:-14px; }
width:9px;
height:9px; .sb-content fieldset label {
background:url(images/tl-arrow.png) no-repeat 0 0; padding: 2px;
display:block; font-size: 12px;
} }
tr.cursor-selected-row .marker {
background-position: 0 -15px; .sb-content fieldset select {
} margin-right: 10px;
}
.sb-boundry {
background-color:#e66a31; .sb-content input[type="checkbox"] {
} position: relative;
top: 3px;
.sb-over { }
background-color:#ff3030;
} .sb-content fieldset.closed {
border-width: 1px 0 0;
.sb-now-playing { margin-bottom: -16px;
background-color:#17eb25 !important; margin-left:1px;
} }
.ui-dialog .wrapper { .sb-content fieldset.closed .sb-options-form {
margin: 0; display: none;
padding: 10px 0 0 0; }
overflow: hidden;
} .sb-content th {
text-align: left;
.ui-dialog #library_content { }
margin: 0 10px 10px 0;
overflow: auto; .sb-content input.input_text {
min-height: 0; width:100px;
} }
.ui-dialog #show_builder { table.datatable tr.cursor-selected-row td, table.datatable tr.cursor-selected-row th {
margin: 0 0 10px 0; border-bottom: 1px solid rgba(215, 0, 0, 1) !important;
overflow: auto; }
} .innerWrapper {
position:relative;
.ui-dialog .padded { width:100%;
padding: 5px 10px 5px 8px; }
} .marker {
background: url(images/tl-arrow.png) no-repeat scroll 3px 4px;
.ui-dialog .ui-buttonset { bottom: -14px;
margin-right: 0 !important; display: block;
height: 9px;
left: -17px;
padding: 4px 0 4px 3px;
position: absolute;
width: 9px;
background-color: rgba(70, 70, 70, 0.35);
border-radius: 2px 0 0 2px;
cursor:pointer;
}
.marker:hover {
background-color: rgba(70, 70, 70, 0.95);
border-radius: 2px 0 0 2px;
}
tr.cursor-selected-row .marker {
background-color: rgba(215, 0, 0, 1);
}
.sb-content .sb-past {
opacity: .6;
}
.sb-boundry td.sb-image,
.sb-boundry td.sb-starts,
.sb-boundry td.sb-ends,
.sb-boundry td.sb-length,
.sb-boundry td.sb-title,
.sb-boundry td.sb-creator,
.sb-boundry td.sb-album,
.sb-boundry td.sb-cue-in,
.sb-boundry td.sb-cue-out,
.sb-boundry td.sb-fade-in,
.sb-boundry td.sb-fade-out {
background-color: rgba(230, 106, 49, 0.5);
}
.sb-over td.sb-image,
.sb-over td.sb-starts,
.sb-over td.sb-ends,
.sb-over td.sb-length,
.sb-over td.sb-title,
.sb-over td.sb-creator,
.sb-over td.sb-album,
.sb-over td.sb-cue-in,
.sb-over td.sb-cue-out,
.sb-over td.sb-fade-in,
.sb-over td.sb-fade-out {
background-color: rgba(255, 0, 0, 0.5);
}
.sb-now-playing td {
background-color: rgba(23, 235, 37, 1) !important;
}
.sb-content.padded {
padding: 8px 8px 8px 16px;
}
table.datatable tr.sb-header.odd td, table.datatable tr.sb-header.even td,
table.datatable tr.sb-header.odd:hover td, table.datatable tr.sb-header.even:hover td{
background: -moz-linear-gradient(top, #a4a4a4 0, #bcbcbc 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #a4a4a4), color-stop(100%, #bcbcbc));
background: linear-gradient(top, #a4a4a4 0, #bcbcbc 100%);
border-top-color:#6b6a6a !important;
}
.sb-content tr:last-child td {
border-bottom-width: 1px !important;
border-bottom-color:#6b6a6a !important;
}
.sb-content table th.ui-state-default {
background: -moz-linear-gradient(top, #b2b2b2 0, #a2a2a2 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #b2b2b2), color-stop(100%, #a2a2a2));
background: linear-gradient(top, #b2b2b2 0, #a2a2a2 100%);
border: 1px solid #8F8F8F;
color: #363636;
}
.sb-content input.ui-button {
padding: 3px 1em;
}
.color-box {
position:absolute;
top:-5px;
bottom:-5px;
left:-5px;
width:27px;
background: rgba(140, 2, 140, 1);
}
.show-title, .show-time {
display:inline-block;
font-size:13px;
}
.show-title {
font-weight: bold;
margin: 0 8px;
}
.show-time {
font-size:12px;
color: #363636;
margin: 0 5px;
}
.push-right {
float:right;
margin-right:5px;
}
/*
* keep the dialog css at the bottom so it can override previous rules if needed.
*/
.ui-dialog .wrapper {
margin: 0;
padding: 10px 0 0 0;
overflow: hidden;
}
.ui-dialog .lib_content {
margin: 0 10px 10px 0;
overflow: auto;
min-height: 0;
}
.ui-dialog .sb-content {
margin: 0 0 10px 0;
overflow: auto;
}
.ui-dialog .lib_content .padded {
padding: 5px 10px 5px 8px;
}
.ui-dialog .sb_content .padded {
padding: 5px 10px 5px 16px;
}
.ui-dialog .ui-buttonset {
margin-right: 0 !important;
} }

5345
airtime_mvc/public/css/styles.css
View file

File diff suppressed because it is too large Load diff

12
airtime_mvc/public/js/airtime/schedule/schedule.js
View file

@ -104,7 +104,7 @@ function buildScheduleDialog (json) {
width = Math.floor(viewport.width * 0.96), width = Math.floor(viewport.width * 0.96),
fnServer = AIRTIME.showbuilder.fnServerData, fnServer = AIRTIME.showbuilder.fnServerData,
//subtract padding in pixels //subtract padding in pixels
widgetWidth = width - 50, widgetWidth = width - 60,
libWidth = Math.floor(widgetWidth * 0.5), libWidth = Math.floor(widgetWidth * 0.5),
builderWidth = Math.floor(widgetWidth * 0.5), builderWidth = Math.floor(widgetWidth * 0.5),
libLength, libLength,
@ -112,11 +112,11 @@ function buildScheduleDialog (json) {
libFilter; libFilter;
dialog.find("#library_content") dialog.find("#library_content")
.height(height - 110) .height(height - 115)
.width(libWidth); .width(libWidth);
dialog.find("#show_builder") dialog.find("#show_builder")
.height(height - 110) .height(height - 115)
.width(builderWidth); .width(builderWidth);
dialog.dialog({ dialog.dialog({
@ -141,9 +141,13 @@ function buildScheduleDialog (json) {
AIRTIME.library.libraryInit(); AIRTIME.library.libraryInit();
AIRTIME.showbuilder.builderDataTable(); AIRTIME.showbuilder.builderDataTable();
dialog.find(".dataTables_scrolling") //set max heights of datatables.
dialog.find(".lib-content .dataTables_scrolling")
.css("max-height", height - 110 - 155); .css("max-height", height - 110 - 155);
dialog.find(".sb-content .dataTables_scrolling")
.css("max-height", height - 110 - 60);
dialog.dialog('open'); dialog.dialog('open');
//calculate dynamically width for the library search input. //calculate dynamically width for the library search input.

76
airtime_mvc/public/js/airtime/showbuilder/builder.js
View file

@ -128,18 +128,18 @@ var AIRTIME = (function(AIRTIME){
oTable = tableDiv.dataTable( { oTable = tableDiv.dataTable( {
"aoColumns": [ "aoColumns": [
/* checkbox */ {"mDataProp": "allowed", "sTitle": "<input type='checkbox' name='sb_cb_all'>", "sWidth": "15px", "sClass": "sb_checkbox"}, /* checkbox */ {"mDataProp": "allowed", "sTitle": "<input type='checkbox' name='sb_cb_all'>", "sWidth": "15px", "sClass": "sb-checkbox"},
/* Type */ {"mDataProp": "image", "sTitle": "", "sClass": "library_image", "sWidth": "25px", "bVisible": true}, /* Type */ {"mDataProp": "image", "sTitle": "", "sClass": "library_image sb-image", "sWidth": "25px", "bVisible": true},
/* starts */{"mDataProp": "starts", "sTitle": "Start"}, /* starts */{"mDataProp": "starts", "sTitle": "Start", "sClass": "sb-starts"},
/* ends */{"mDataProp": "ends", "sTitle": "End"}, /* ends */{"mDataProp": "ends", "sTitle": "End", "sClass": "sb-ends"},
/* runtime */{"mDataProp": "runtime", "sTitle": "Duration", "sClass": "library_length"}, /* runtime */{"mDataProp": "runtime", "sTitle": "Duration", "sClass": "library_length sb-length"},
/* title */{"mDataProp": "title", "sTitle": "Title"}, /* title */{"mDataProp": "title", "sTitle": "Title", "sClass": "sb-title"},
/* creator */{"mDataProp": "creator", "sTitle": "Creator"}, /* creator */{"mDataProp": "creator", "sTitle": "Creator", "sClass": "sb-creator"},
/* album */{"mDataProp": "album", "sTitle": "Album"}, /* album */{"mDataProp": "album", "sTitle": "Album", "sClass": "sb-album"},
/* cue in */{"mDataProp": "cuein", "sTitle": "Cue In", "bVisible": false}, /* cue in */{"mDataProp": "cuein", "sTitle": "Cue In", "bVisible": false, "sClass": "sb-cue-in"},
/* cue out */{"mDataProp": "cueout", "sTitle": "Cue Out", "bVisible": false}, /* cue out */{"mDataProp": "cueout", "sTitle": "Cue Out", "bVisible": false, "sClass": "sb-cue-out"},
/* fade in */{"mDataProp": "fadein", "sTitle": "Fade In", "bVisible": false}, /* fade in */{"mDataProp": "fadein", "sTitle": "Fade In", "bVisible": false, "sClass": "sb-fade-in"},
/* fade out */{"mDataProp": "fadeout", "sTitle": "Fade Out", "bVisible": false} /* fade out */{"mDataProp": "fadeout", "sTitle": "Fade Out", "bVisible": false, "sClass": "sb-fade-out"}
], ],
"bJQueryUI": true, "bJQueryUI": true,
@ -213,10 +213,13 @@ var AIRTIME = (function(AIRTIME){
sSeparatorHTML, sSeparatorHTML,
fnPrepareSeparatorRow, fnPrepareSeparatorRow,
node, node,
cl=""; cl="",
//background-color to imitate calendar color.
r,g,b,a,
$nRow = $(nRow);
//call the context menu so we can prevent the event from propagating. //call the context menu so we can prevent the event from propagating.
$(nRow).find('td:not(.sb_checkbox)').click(function(e){ $(nRow).find('td:not(.sb-checkbox)').click(function(e){
$(this).contextMenu({x: e.pageX, y: e.pageY}); $(this).contextMenu({x: e.pageX, y: e.pageY});
@ -226,9 +229,12 @@ var AIRTIME = (function(AIRTIME){
//save some info for reordering purposes. //save some info for reordering purposes.
$(nRow).data({"aData": aData}); $(nRow).data({"aData": aData});
if (aData.current === true) { if (aData.scheduled === 1) {
$(nRow).addClass("sb-now-playing"); $(nRow).addClass("sb-now-playing");
} }
else if (aData.scheduled === 0) {
$(nRow).addClass("sb-past");
}
if (aData.allowed !== true) { if (aData.allowed !== true) {
$(nRow).addClass("sb-not-allowed"); $(nRow).addClass("sb-not-allowed");
@ -266,10 +272,13 @@ var AIRTIME = (function(AIRTIME){
}); });
if (aData.header === true) { if (aData.header === true) {
node = nRow.children[0];
node.innerHTML = '';
cl = 'sb-header'; cl = 'sb-header';
sSeparatorHTML = '<span>'+aData.title+'</span><span>'+aData.starts+'</span><span>'+aData.ends+'</span>'; sSeparatorHTML = '<span class="show-title">'+aData.title+'</span>';
fnPrepareSeparatorRow(sSeparatorHTML, cl, 0); sSeparatorHTML += '<span class="push-right"><span class="show-time">'+aData.starts+'</span>-<span class="show-time">'+aData.ends+'</span></span>';
fnPrepareSeparatorRow(sSeparatorHTML, cl, 1);
} }
else if (aData.footer === true) { else if (aData.footer === true) {
node = nRow.children[0]; node = nRow.children[0];
@ -289,18 +298,22 @@ var AIRTIME = (function(AIRTIME){
fnPrepareSeparatorRow(sSeparatorHTML, cl, 1); fnPrepareSeparatorRow(sSeparatorHTML, cl, 1);
} }
else if (aData.empty === true) { else if (aData.empty === true) {
node = nRow.children[0];
node.innerHTML = '';
sSeparatorHTML = '<span>Show Empty</span>'; sSeparatorHTML = '<span>Show Empty</span>';
cl = cl + " sb-empty odd"; cl = cl + " sb-empty odd";
fnPrepareSeparatorRow(sSeparatorHTML, cl, 0); fnPrepareSeparatorRow(sSeparatorHTML, cl, 1);
} }
else if (aData.record === true) { else if (aData.record === true) {
node = nRow.children[0];
node.innerHTML = '';
sSeparatorHTML = '<span>Recording From Line In</span>'; sSeparatorHTML = '<span>Recording From Line In</span>';
cl = cl + " sb-record odd"; cl = cl + " sb-record odd";
fnPrepareSeparatorRow(sSeparatorHTML, cl, 0); fnPrepareSeparatorRow(sSeparatorHTML, cl, 1);
} }
else { else {
@ -312,6 +325,27 @@ var AIRTIME = (function(AIRTIME){
node.innerHTML = ''; node.innerHTML = '';
} }
} }
//add the show colour to the leftmost td
if (aData.footer !== true) {
if ($nRow.hasClass('sb-header')) {
a = 1;
}
else if ($nRow.hasClass('odd')) {
a = 0.3;
}
else if ($nRow.hasClass('even')) {
a = 0.4;
}
//convert from hex to rgb.
r = parseInt((aData.backgroundColor).substring(0,2), 16);
g = parseInt((aData.backgroundColor).substring(2,4), 16);
b = parseInt((aData.backgroundColor).substring(4,6), 16);
$nRow.find('td.sb-checkbox').css('background', 'rgba('+r+', '+g+', '+b+', '+a+')');
}
}, },
"fnDrawCallback": function(oSettings, json) { "fnDrawCallback": function(oSettings, json) {
var wrapperDiv, var wrapperDiv,
@ -440,7 +474,7 @@ var AIRTIME = (function(AIRTIME){
}, },
// R = ColReorderResize, C = ColVis, T = TableTools // R = ColReorderResize, C = ColVis, T = TableTools
"sDom": 'Rr<"H"CT>t', "sDom": 'Rr<"sb-padded"<"H"CT>><"dataTables_scrolling sb-padded"t>',
"sAjaxDataProp": "schedule", "sAjaxDataProp": "schedule",
"sAjaxSource": "/showbuilder/builder-feed" "sAjaxSource": "/showbuilder/builder-feed"
@ -641,7 +675,7 @@ var AIRTIME = (function(AIRTIME){
//begin context menu initialization. //begin context menu initialization.
$.contextMenu({ $.contextMenu({
selector: '#show_builder_table td:not(.sb_checkbox)', selector: '#show_builder_table td:not(.sb-checkbox)',
trigger: "left", trigger: "left",
ignoreRightClick: true, ignoreRightClick: true,

136
airtime_mvc/public/js/airtime/showbuilder/main_builder.js
View file

@ -1,23 +1,36 @@
$(document).ready(function(){ $(document).ready(function(){
var viewport = AIRTIME.utilities.findViewportDimensions(), var viewport = AIRTIME.utilities.findViewportDimensions(),
lib = $("#library_content"), $lib = $("#library_content"),
builder = $("#show_builder"), $libWrapper,
$builder = $("#show_builder"),
widgetHeight = viewport.height - 185, widgetHeight = viewport.height - 185,
screenWidth = Math.floor(viewport.width - 110), screenWidth = Math.floor(viewport.width - 120),
oBaseDatePickerSettings, oBaseDatePickerSettings,
oBaseTimePickerSettings, oBaseTimePickerSettings,
oRange, oRange,
dateStartId = "#sb_date_start", dateStartId = "#sb_date_start",
timeStartId = "#sb_time_start", timeStartId = "#sb_time_start",
dateEndId = "#sb_date_end", dateEndId = "#sb_date_end",
timeEndId = "#sb_time_end"; timeEndId = "#sb_time_end",
$toggleLib = $('<input />', {
"class": "ui-button ui-state-default sb-edit",
"id": "sb_edit",
"type": "button",
"value": "Add Files"
}),
$libClose = $('<a />', {
"class": "close-round",
"href": "#",
"id": "sb_lib_close"
});
//set the heights of the main widgets. //set the heights of the main widgets.
lib.height(widgetHeight); $lib.height(widgetHeight);
//builder takes all the screen on first load //builder takes all the screen on first load
builder.height(widgetHeight) $builder
.height(widgetHeight)
.width(screenWidth); .width(screenWidth);
oBaseDatePickerSettings = { oBaseDatePickerSettings = {
@ -34,12 +47,24 @@ $(document).ready(function(){
defaultTime: '0:00' defaultTime: '0:00'
}; };
builder.find(dateStartId).datepicker(oBaseDatePickerSettings); $builder.find(dateStartId).datepicker(oBaseDatePickerSettings);
builder.find(timeStartId).timepicker(oBaseTimePickerSettings); $builder.find(timeStartId).timepicker(oBaseTimePickerSettings);
builder.find(dateEndId).datepicker(oBaseDatePickerSettings); $builder.find(dateEndId).datepicker(oBaseDatePickerSettings);
builder.find(timeEndId).timepicker(oBaseTimePickerSettings); $builder.find(timeEndId).timepicker(oBaseTimePickerSettings);
$("#sb_submit").click(function(ev){ oRange = AIRTIME.utilities.fnGetScheduleRange(dateStartId, timeStartId, dateEndId, timeEndId);
AIRTIME.showbuilder.fnServerData.start = oRange.start;
AIRTIME.showbuilder.fnServerData.end = oRange.end;
AIRTIME.library.libraryInit();
AIRTIME.showbuilder.builderDataTable();
$libWrapper = $lib.find("#library_display_wrapper");
$libWrapper.prepend($libClose);
$builder.find('.dataTables_scrolling').css("max-height", widgetHeight - 110);
$builder.on("click", "#sb_submit", function(ev){
var fn, var fn,
oRange, oRange,
op, op,
@ -67,44 +92,69 @@ $(document).ready(function(){
oTable.fnDraw(); oTable.fnDraw();
}); });
$("#sb_edit").click(function(ev){ $builder.on("click","#sb_edit", function(ev){
var $button = $(this), var schedTable = $("#show_builder_table").dataTable();
$lib = $("#library_content"),
$builder = $("#show_builder"),
schedTable = $("#show_builder_table").dataTable();
if ($button.hasClass("sb-edit")) { //reset timestamp to redraw the cursors.
AIRTIME.showbuilder.resetTimestamp();
//reset timestamp to redraw the cursors.
AIRTIME.showbuilder.resetTimestamp(); $lib.show()
.width(Math.floor(screenWidth * 0.5));
$lib.show();
$lib.width(Math.floor(screenWidth * 0.5)); $builder.width(Math.floor(screenWidth * 0.5))
$builder.width(Math.floor(screenWidth * 0.5)); .find("#sb_edit")
.remove()
$button.removeClass("sb-edit"); .end();
$button.addClass("sb-finish-edit");
$button.val("Close Library");
}
else if ($button.hasClass("sb-finish-edit")) {
$lib.hide();
$builder.width(screenWidth);
$button.removeClass("sb-finish-edit");
$button.addClass("sb-edit");
$button.val("Add Files");
}
schedTable.fnDraw(); schedTable.fnDraw();
}); });
oRange = AIRTIME.utilities.fnGetScheduleRange(dateStartId, timeStartId, dateEndId, timeEndId); $lib.on("click", "#sb_lib_close", function(ev) {
AIRTIME.showbuilder.fnServerData.start = oRange.start; var schedTable = $("#show_builder_table").dataTable();
AIRTIME.showbuilder.fnServerData.end = oRange.end;
$lib.hide();
$builder.width(screenWidth)
.find(".sb-timerange")
.append($toggleLib)
.end();
schedTable.fnDraw();
});
AIRTIME.library.libraryInit(); $builder.find('legend').click(function(ev, item){
AIRTIME.showbuilder.builderDataTable();
$fs = $(this).parents('fieldset');
if ($fs.hasClass("closed")) {
$fs.removeClass("closed");
$builder.find('.dataTables_scrolling').css("max-height", widgetHeight - 150);
}
else {
$fs.addClass("closed");
//set defaults for the options.
$fs.find('select').val(0);
$fs.find('input[type="checkbox"]').attr("checked", false);
$builder.find('.dataTables_scrolling').css("max-height", widgetHeight - 110);
}
});
//set click event for all my shows checkbox.
$builder.on("click", "#sb_my_shows", function(ev) {
if ($(this).is(':checked')) {
$(ev.delegateTarget).find('#sb_show_filter').val(0);
}
});
//set select event for choosing a show.
$builder.on("change", '#sb_show_filter', function(ev) {
if ($(this).val() !== 0) {
$(ev.delegateTarget).find('#sb_my_shows').attr("checked", false);
}
});
//check if the timeline viewed needs updating. //check if the timeline viewed needs updating.
setInterval(function(){ setInterval(function(){