Now you can navigate the schedule by selecting a date or by clicking the left/right arrows on the guide. I don't like the jqueryui theme, but it's good enough for now

This commit is contained in:
Jeff Lamb 2017-03-06 23:28:53 -05:00
parent ad24fcc8a3
commit 9ce3baaca5
8 changed files with 144 additions and 15 deletions

View File

@ -443,6 +443,10 @@ public class RcrdIt extends ResourceConfig implements AutoCloseable {
public GetScheduleResponse getSchedule(GetScheduleRequest scheduleRequest) {
List<Channel> channelList = new ArrayList<>();
try{
if(scheduleRequest.getEndTime().isAfter(GetScheduleRequest.getLastPossibleDateToDisplayOnSchedule(schedule.getLastEndTime()))){
//not going to work, need to set things back a bit
scheduleRequest.setStartAndEndTimeBasedOnLastDataAvailable(schedule.getLastEndTime());
}
int firstItemToLoad = ((scheduleRequest.getPageNum()-1) * scheduleRequest.getChannelsPerPage());
if(schedule.getChannels().size() > firstItemToLoad){
for(int i=firstItemToLoad; i<schedule.getChannels().size() && channelList.size() <scheduleRequest.getChannelsPerPage() ;i++){

View File

@ -7,6 +7,7 @@ package com.moparisthebest.rcrdit.requestbeans;
import java.time.Instant;
import java.time.LocalDateTime;
import java.time.ZoneId;
import java.time.ZoneOffset;
import java.time.format.DateTimeFormatter;
@ -25,12 +26,31 @@ public class GetScheduleRequest {
private final String dateTimeFormatPattern = "yyyy-MM-dd'T'HH:mm:ss.SSS'Z'";
public GetScheduleRequest() {
setStartAndEndTimeBasedOnCurrentType();
}
private void setStartAndEndTimeBasedOnCurrentType(){
LocalDateTime now = LocalDateTime.now();
LocalDateTime topOfHour = now.withMinute(0);
LocalDateTime topOfHour = now.withMinute(0).withSecond(0).withNano(0);
setStartTime(topOfHour.toInstant(ZoneOffset.systemDefault().getRules().getOffset(topOfHour)));
LocalDateTime endOfNextHour = now.plusHours(2).withMinute(59).withSecond(59);
LocalDateTime endOfNextHour = now.plusHours(2).withMinute(59).withSecond(59).withNano(0);
setEndTime(endOfNextHour.toInstant(ZoneOffset.systemDefault().getRules().getOffset(endOfNextHour)));
}
public void setStartAndEndTimeBasedOnLastDataAvailable(Instant lastDataAvailable){
LocalDateTime lastDataAvailableLdt = LocalDateTime.ofInstant(lastDataAvailable,ZoneId.systemDefault());
LocalDateTime newLastDate = lastDataAvailableLdt.minusHours(5).withMinute(59).withSecond(59).withNano(0);
LocalDateTime newStartTimeLdt = newLastDate.minusHours(2).withMinute(0).withSecond(0).withNano(0);
setStartTime(newStartTimeLdt.toInstant(ZoneOffset.systemDefault().getRules().getOffset(newStartTimeLdt)));
setEndTime(newLastDate.toInstant(ZoneOffset.systemDefault().getRules().getOffset(newLastDate)));
}
public static Instant getLastPossibleDateToDisplayOnSchedule(Instant lastDataAvailable){
LocalDateTime lastDataAvailableLdt = LocalDateTime.ofInstant(lastDataAvailable,ZoneId.systemDefault());
LocalDateTime newLastDate = lastDataAvailableLdt.minusHours(5).withMinute(59).withSecond(59).withNano(0);
return newLastDate.toInstant(ZoneOffset.systemDefault().getRules().getOffset(newLastDate));
}
@ -50,6 +70,12 @@ public class GetScheduleRequest {
this.startTimeString = startTimeString;
if(startTimeString != null){
startTime = Instant.parse(startTimeString);
LocalDateTime topOfHour = LocalDateTime.now().withMinute(0).withSecond(0).withNano(0);
Instant topOfHourInstant = topOfHour.toInstant(ZoneOffset.systemDefault().getRules().getOffset(topOfHour));
if(startTime.equals(topOfHourInstant) || startTime.isBefore(topOfHourInstant)){
setStartAndEndTimeBasedOnCurrentType();
}
}
}
@ -62,7 +88,12 @@ public class GetScheduleRequest {
this.endTimeString = endTime;
if(endTimeString != null){
DateTimeFormatter formatter = DateTimeFormatter.ofPattern(dateTimeFormatPattern).withZone( ZoneOffset.UTC );
startTime = Instant.parse(endTimeString);
this.endTime = Instant.parse(endTimeString);
LocalDateTime endOfNextHour = LocalDateTime.now().plusHours(2).withMinute(59).withSecond(59).withNano(0);
Instant endOfHourInstant = endOfNextHour.toInstant(ZoneOffset.systemDefault().getRules().getOffset(endOfNextHour));
if(this.endTime.equals(endOfHourInstant) || this.endTime.isBefore(endOfHourInstant)){
setStartAndEndTimeBasedOnCurrentType();
}
}
}

View File

@ -16,7 +16,7 @@ import java.util.List;
public class GetScheduleResponse {
protected GetScheduleRequest requestObject;
protected List<Channel> schedule;
public GetScheduleResponse(GetScheduleRequest requestObject, List<Channel> schedule) {
this.requestObject = requestObject;
this.schedule = schedule;

View File

@ -76,8 +76,9 @@ ul#channelGroups li ul li ul li.channel {
border-bottom: 1px solid #dbdbdc;
border-right: 1px solid #dbdbdc;
border-top: 0;
height: 40px;
height: 60px;
padding: 0;
padding-top: 20px;
position: relative;
text-align: center;
}
@ -87,7 +88,7 @@ ul#channelGroups li ul li ul li:first-child {
}
ul#channelGroups li ul>li {
height: 40px;
height: 60px;
margin: 0;
overflow: hidden;
padding: 0;
@ -98,10 +99,38 @@ ul#channelGroups li ul>li {
ul#channelGroups li ul li ul li.programs>div {
display: block;
height: 40px;
height: 60px;
position: absolute;
}
.frame {
height: 36px; /* equals max image height */
width: 50px;
white-space: nowrap;
text-align: center; margin: 1em 0;
}
.helper {
display: inline-block;
height: 100%;
vertical-align: middle;
}
.frame img {
vertical-align: middle;
max-height: 36px;
max-width: 50px;
}
.datePickerTextBox{
border-radius: 4px;
height: 30px;
font-size: 16pt;
}
ul#channelGroups li ul li ul li.programs>div {

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.0 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.0 KiB

View File

@ -23,6 +23,8 @@
<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>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/rcrdit.css">
</head>
<body>

View File

@ -47,9 +47,6 @@ function getSchedule2(requestObject){
var channelList = data.schedule;
var requestObject = data.requestObject;
var requestStartTimeEpochSeconds = requestObject.startTime.epochSecond;
var requestEndTimeEpochSeconds = requestObject.endTime.epochSecond;
$("#guideGoesHere").html("");
$("#guideGoesHere").append(getProgramsHeader(requestObject));
var channelUl = $("<ul></ul>").addClass("roundedBottom");
@ -61,6 +58,7 @@ function getSchedule2(requestObject){
var channelProgramUl = $("<ul></ul>").attr("channelNum",channel.displayName);
individualChannelLi.append(channelProgramUl);
var channelNameLi = $("<li class='channel'></li>");
channelNameLi.data("channelObj",channel);
channelNameLi.append("<span></span>").addClass("channelNumLabel").append(channel.displayName);
channelProgramUl.append(channelNameLi);
@ -74,6 +72,7 @@ function getSchedule2(requestObject){
channelUl.append(individualChannelLi);
}
$("#guideGoesHere").append(channelGroupsUl);
$("#guideGoesHere").data("lastSearchObject",requestObject);
},
error: function ( jqXHR, textStatus, errorThrown ){
alert(errorThrown);
@ -133,10 +132,54 @@ function formatTime(dateObj){
function getProgramsHeader(requestObject){
var d = new Date();
var heading = $("<h1></h1>").append("&nbsp;&nbsp;&nbsp;&nbsp;TV Schedule: ");
var dateDiv = $().append("THE DATE GOES HERE");
var heading = $("<div style='height: 60px'><div text-align:middle; style='position:fixed; width:300px; left: 35px;'><h1>TV Schedule:</h1></div></div>");
var datePickerTextBox = $("<input type='text' style='position: relative; z-index: 100000' class='datePickerTextBox'></input>").datepicker({
onSelect: function(){
var lastRequestObject = $("#guideGoesHere").data("lastSearchObject");
var startDate = new Date(lastRequestObject.startTime.epochSecond*1000);
var endDate = new Date(lastRequestObject.endTime.epochSecond*1000);
var selectedDate = $(this).datepicker( "getDate" )
startDate.setDate(selectedDate.getDate());
startDate.setMonth(selectedDate.getMonth());
startDate.setFullYear(selectedDate.getFullYear());
endDate.setDate(selectedDate.getDate());
endDate.setMonth(selectedDate.getMonth());
endDate.setFullYear(selectedDate.getFullYear());
if(endDate.getTime() < startDate.getTime()){
endDate.setDate(endDate.getDate()+1);
}
delete lastRequestObject.startTime;
delete lastRequestObject.endTime;
lastRequestObject.startTimeString = startDate.toISOString();
lastRequestObject.endTimeString = endDate.toISOString();
getSchedule2(lastRequestObject);
}
}).datepicker("setDate",new Date(requestObject.startTime.epochSecond*1000));
var dateDiv = $($("<div style='position: fixed; top: 25px; left: 250px;'></div>")).append(datePickerTextBox);
heading.append(dateDiv);
//heading.add(dateDiv);
var leftArrowLink = $("<a href='javascript:void(0)' id='backArrow'><span class='helper'></span><img style='height:20px; width:20px' style=' vertical-align: middle; margin-top: auto; margin-bottom:auto' src='images/left.png'></img></a>");
var goLeftDiv = $("<div class='frame' style='position:absolute; left:0px; line-height: 36px;'></div>").append(leftArrowLink);
leftArrowLink.click(function(){
var lastRequestObject = $("#guideGoesHere").data("lastSearchObject");
var startDate = new Date(lastRequestObject.startTime.epochSecond*1000);
var endDate = new Date(lastRequestObject.endTime.epochSecond*1000);
startDate.setHours(startDate.getHours()-2);
endDate.setHours(endDate.getHours()-2);
delete lastRequestObject.startTime;
delete lastRequestObject.endTime;
lastRequestObject.startTimeString = startDate.toISOString();
lastRequestObject.endTimeString = endDate.toISOString();
getSchedule2(lastRequestObject);
});
var emptrySpacerLi = $("<li></li>").addClass("navlspacer").append(goLeftDiv);
var emptrySpacerLi = $("<li></li>").addClass("navlspacer");
var numHoursDisplayed = Math.ceil((requestObject.endTime.epochSecond-requestObject.startTime.epochSecond)/60/60);
var hourBlockWidth = (100.0/numHoursDisplayed)+"%";
@ -150,6 +193,25 @@ function getProgramsHeader(requestObject){
listOfHoursDisplayed.append(hour);
firstHourDate.setHours(firstHourDate.getHours()+1);
}
var rightArrowLink = $("<a href='javascript:void(0)' id='forwardArrow'><span class='helper'></span><img style='height:20px; width:20px' style=' vertical-align: middle; margin-top: auto; margin-bottom:auto' src='images/right.png'></img></a>");
var goRightDiv = $("<div class='frame' style='position:absolute; right:0px'></div>").append(rightArrowLink);
rightArrowLink.click(function(){
var lastRequestObject = $("#guideGoesHere").data("lastSearchObject");
var startDate = new Date(lastRequestObject.startTime.epochSecond*1000);
var endDate = new Date(lastRequestObject.endTime.epochSecond*1000);
startDate.setHours(startDate.getHours()+2);
endDate.setHours(endDate.getHours()+2);
delete lastRequestObject.startTime;
delete lastRequestObject.endTime;
lastRequestObject.startTimeString = startDate.toISOString();
lastRequestObject.endTimeString = endDate.toISOString();
getSchedule2(lastRequestObject);
});
listOfHoursDisplayed.append(goRightDiv);
var timeUl = $("<ul></ul>").addClass("hours").append(emptrySpacerLi).append(listOfHoursDisplayed);
var innerLi = $("<li></li>").addClass("nav").addClass("first").append(timeUl);
@ -157,8 +219,8 @@ function getProgramsHeader(requestObject){
var timeDisplayDiv = $("<div></div>").attr("id","timeDisplayDiv").append(innerLi);
var guideHeader = $("<div></div>").addClass("guide-header").append(heading).append(dateDiv).append(timeDisplayDiv);
var guideHeaderContainer = $("<div class='guide-header-container'></div>").attr("style","height: 77px;").append(guideHeader);
var guideHeader = $("<div></div>").addClass("guide-header").append(heading).append(timeDisplayDiv);
var guideHeaderContainer = $("<div class='guide-header-container'></div>").attr("style","height: 96px;").append(guideHeader);
return guideHeaderContainer;
}
@ -166,6 +228,7 @@ function getProgramDiv(program, requestObject, startAtPercent){
var programDiv = $("<div></div>").addClass("channelProgram");
var titleInfoDiv = $("<div></div>").addClass("titleInfo");
var otherStuffDiv = $("<div></div>").addClass("otherProgramStuff");
programDiv.data("programObj",program);
titleInfoDiv.append(program.title);
if(!isNull(program.subTitle)){
titleInfoDiv.append($("<p>"+program.subTitle+"</p>").addClass("programSubtitle"));