moparisthebest/rcrdit
1
0
Fork 0
mirror of https://github.com/moparisthebest/rcrdit synced 2024-12-22 07:18:56 -05:00
Code Issues Releases Wiki Activity

Switch to lists and divs for schedule, not as pretty yet and not done.. baby steps

Browse Source
This commit is contained in:
Jeff Lamb 2017-03-04 23:33:39 -05:00
parent 534f0996b2
commit abb7f5ff2a
2 changed files with 179 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

101
src/main/webapp/index.html
View File

@ -23,9 +23,108 @@
<title>Rcrdit</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="js/rcrdit.js"></script>
<style>
* {
box-sizing: border-box;
}
ul {
list-style: none;
padding-left: 0;
overflow: hidden;
display: block;
}
ul, ol {
margin-top: 0;
margin-bottom: 10px;
}
ul ul, ol ul, ul ol, ol ol {
margin-bottom: 0;
}
.verticalTimeLine {
width: 0;
border-left: 1px dashed rgba(51,118,178,0.4);
position: absolute;
display: block;
z-index: 1;
}
ul#channelGroups li ul>li {
border-bottom: 1px solid #dbdbdc;
}
p{
margin : 2px;
}
ul#channelGroups li ul li ul li.channel {
background: #fff;
border-bottom: 1px solid #dbdbdc;
border-right: 1px solid #dbdbdc;
border-top: 0;
height: 40px;
padding: 0;
position: relative;
text-align: center;
}
ul#channelGroups li ul li ul li:first-child {
float: left;
}
ul#channelGroups li ul>li {
height: 40px;
margin: 0;
overflow: hidden;
padding: 0;
position: relative;
}
ul#channelGroups li ul li ul li.programs>div {
display: block;
height: 40px;
position: absolute;
}
ul#channelGroups li ul li ul li.programs>div {
background: none #fff;
border-left: 1px solid #dbdbdc;
border-right: 2px solid white;
padding: 5px;
}
ul#channelGroups li ul li ul li.programs {
background: url(../images/tvguide/grid_bg.png) repeat #fff;
display: block;
height: 40px;
overflow: hidden;
position: relative;
width: initial;
}
ul#channelGroups li ul li ul li.channel {
width: 97px;
}
.programSubtitle{
font-size: 8pt;
}
</style>
</head>
<body>
<div id="guideGoesHere">
<div id="guideGoesHere" style='width: 100%'>
</div>

80
src/main/webapp/js/rcrdit.js
View File

@ -5,7 +5,7 @@
*/
$( document ).ready(function() {
getSchedule(null);
getSchedule2(null);
});
function padToTwoDigits(ss){
@ -17,6 +17,84 @@ function padToTwoDigits(ss){
}
function getSchedule2(requestObject){
if(isNull(requestObject)){
requestObject = {"channelsPerPage" : "4000", "pageNum" : "1"};
}
$.ajax({
url: 'rest/getSchedule',
type: 'post',
dataType: 'json',
contentType: "application/json",
data: JSON.stringify(requestObject),
success: function (data) {
var channelList = data.schedule;
var requestObject = data.requestObject;
var requestStartTimeEpochSeconds = requestObject.startTime.epochSecond;
var requestEndTimeEpochSeconds = requestObject.endTime.epochSecond;
$("#guideGoesHere").html("");
var channelUl = $("<ul></ul>");
var channelGroupsUl = $("<ul></ul>").attr("id","channelGroups").append($("<li></li>").append(channelUl));
for(var idx in channelList){
var individualChannelLi = $("<li></li>");
var channel = channelList[idx];
var currentPercentOver = 0;
var channelProgramUl = $("<ul></ul>").attr("channelNum",channel.displayName);
individualChannelLi.append(channelProgramUl);
var channelNameLi = $("<li class='channel'></li>");
channelNameLi.append("<span></span>").addClass("channelNumLabel").append(channel.displayName);
channelProgramUl.append(channelNameLi);
var programsLi = $("<li></li>").addClass("programs");
for(var idx2 in channel.programs){
var program = channel.programs[idx2];
programsLi.append(getProgramDiv(program,requestObject,currentPercentOver));
currentPercentOver += program.widthPercent;
}
channelProgramUl.append(programsLi);
channelUl.append(individualChannelLi);
}
$("#guideGoesHere").append(channelGroupsUl);
},
error: function ( jqXHR, textStatus, errorThrown ){
alert(errorThrown);
}
});
}
function getProgramDiv(program, requestObject, startAtPercent){
var programDiv = $("<div></div>").addClass("channelProgram");
var titleInfoDiv = $("<div></div>").addClass("titleInfo");
var otherStuffDiv = $("<div></div>").addClass("otherProgramStuff");
titleInfoDiv.append(program.title);
if(!isNull(program.subTitle)){
titleInfoDiv.append($("<p>"+program.subTitle+"</p>").addClass("programSubtitle"));
}
programDiv.append(titleInfoDiv);
programDiv.append(otherStuffDiv);
var requestStartTimeEpochSeconds = requestObject.startTime.epochSecond;
var requestEndTimeEpochSeconds = requestObject.endTime.epochSecond;
var showingMinutes = (requestEndTimeEpochSeconds-requestStartTimeEpochSeconds)/60;
var durationSeconds = program.stop.epochSecond-program.start.epochSecond;
var displayDurationSeconds = durationSeconds;
if(program.start.epochSecond < requestStartTimeEpochSeconds){
displayDurationSeconds = displayDurationSeconds-(requestStartTimeEpochSeconds-program.start.epochSecond);
}
if(program.stop.epochSecond > requestEndTimeEpochSeconds){
displayDurationSeconds = displayDurationSeconds-(program.stop.epochSecond-requestEndTimeEpochSeconds);
}
var displayDurationMinutes = displayDurationSeconds/60;
var widthPercent = (displayDurationMinutes/showingMinutes)*100;
programDiv.attr("style","left: "+startAtPercent+"%; width: "+widthPercent+"%");
program.widthPercent = widthPercent;
return programDiv;
}
function getSchedule(requestObject){
if(isNull(requestObject)){
requestObject = {"channelsPerPage" : "100", "pageNum" : "1"};