441 lines
12 KiB
HTML
441 lines
12 KiB
HTML
<!DOCTYPE HTML>
|
|
<html>
|
|
<head>
|
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
|
<title>OctopusNet</title>
|
|
<link rel="stylesheet" type="text/css" href="/style.css">
|
|
<script type="text/javascript" src="/menu.js"></script>
|
|
<!-- Add included scripts here -->
|
|
|
|
<!-- Add page scripts here -->
|
|
<style>
|
|
.event_scroll {
|
|
text-align:right;
|
|
margin-left: auto;
|
|
margin-right: 2px;
|
|
width: 650px;
|
|
}
|
|
|
|
.event {
|
|
color:#000000;
|
|
background-color:#FFC0FF;
|
|
text-align:left;
|
|
margin-top: 3px;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
width: 650px;
|
|
border-radius: 15px;
|
|
padding: 10px;
|
|
}
|
|
|
|
.event_date {
|
|
display: inline-block;
|
|
font-weight: bold;
|
|
width: 330px;
|
|
text-align:left;
|
|
}
|
|
.event_duration {
|
|
display: inline-block;
|
|
width: 100px;
|
|
text-align:left;
|
|
}
|
|
.event_channel {
|
|
display: inline-block;
|
|
width: 200px;
|
|
text-align:left;
|
|
}
|
|
.event_name {
|
|
display: block;
|
|
font-size: 1em;
|
|
font-weight: bold;
|
|
text-align:left;
|
|
}
|
|
.event_text {
|
|
display: block;
|
|
margin-left: 20px;
|
|
text-align:left;
|
|
}
|
|
|
|
.message {
|
|
color:#FF0000;
|
|
font-size: 1.5em;
|
|
font-weight: bold;
|
|
text-align:center;
|
|
margin-top: 3px;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
width: 650px;
|
|
}
|
|
</style>
|
|
|
|
<script type="text/javascript">
|
|
|
|
var reqChannelList = new XMLHttpRequest();
|
|
reqChannelList.onreadystatechange=function()
|
|
{
|
|
if (reqChannelList.readyState == 4 )
|
|
{
|
|
if( reqChannelList.status == 200 )
|
|
ChannelListResponse(reqChannelList.responseText);
|
|
else if( reqChannelList.status == 404 )
|
|
document.getElementById("message").firstChild.nodeValue = "Error loading channellist";
|
|
}
|
|
}
|
|
|
|
var reqEPG = new XMLHttpRequest();
|
|
reqEPG.onreadystatechange=function()
|
|
{
|
|
if (reqEPG.readyState == 4 )
|
|
{
|
|
if( reqEPG.status == 200 )
|
|
EPGResponse(reqEPG.responseText);
|
|
else if ( reqEPG.status == 404 )
|
|
document.getElementById("message").firstChild.nodeValue = "EPG not available";
|
|
}
|
|
}
|
|
|
|
var EPG = null;
|
|
var ChannelList = null;
|
|
var ChannelLookup = null;
|
|
|
|
function LoadEPG()
|
|
{
|
|
reqEPG.open("GET", "/epg.lua", true);
|
|
reqEPG.send();
|
|
}
|
|
|
|
function ChannelListResponse(response)
|
|
{
|
|
var Valid = false;
|
|
try
|
|
{
|
|
ChannelList = JSON.parse(response);
|
|
if( ChannelList.GroupList[0].ChannelList )
|
|
{
|
|
ChannelLookup = new Object();
|
|
for(var i = 0; i < ChannelList.GroupList.length; i += 1)
|
|
{
|
|
var Group = ChannelList.GroupList[i];
|
|
for(var j = 0; j < Group.ChannelList.length; j += 1)
|
|
{
|
|
if( Group.ChannelList[j].ID )
|
|
{
|
|
Valid = true;
|
|
ChannelLookup[Group.ChannelList[j].ID] = Group.ChannelList[j];
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
catch(e)
|
|
{
|
|
Valid = false;
|
|
}
|
|
if( Valid )
|
|
{
|
|
LoadEPG();
|
|
}
|
|
else
|
|
{
|
|
document.getElementById("message").firstChild.nodeValue = "EPG not available";
|
|
}
|
|
}
|
|
|
|
function CompareTime(a,b)
|
|
{
|
|
//~ if( a.Time > b.Time ) return 1;
|
|
//~ if( a.Time < b.Time ) return -1;
|
|
return ( a.Time > b.Time ) ? 1 : -1;
|
|
}
|
|
|
|
var Position = 2000;
|
|
|
|
function EPGResponse(response)
|
|
{
|
|
try
|
|
{
|
|
EPG = JSON.parse(response);
|
|
document.getElementById("message").firstChild.nodeValue = "Sorting...";
|
|
|
|
EPG.EventList.sort(CompareTime);
|
|
|
|
document.getElementById("message").firstChild.nodeValue = EPG.EventList.length + " Events";
|
|
|
|
document.getElementById("message").style.display = "none";
|
|
document.getElementById("events").style.display = "block";
|
|
Current();
|
|
}
|
|
catch(e)
|
|
{
|
|
document.getElementById("message").firstChild.nodeValue = e.message;
|
|
}
|
|
}
|
|
|
|
var hasTimeInput = false;
|
|
var hasIntl = false;
|
|
var DateOptions = {
|
|
weekday:"long",
|
|
day:"numeric",
|
|
month:"long",
|
|
year:"numeric"
|
|
};
|
|
|
|
var TimeOptions = {
|
|
hour:"2-digit",
|
|
minute:"2-digit",
|
|
hour12:false
|
|
};
|
|
|
|
var Locale;
|
|
|
|
function OnLoad()
|
|
{
|
|
var input = document.getElementById("datetime");
|
|
hasTimeInput = input.type == "datetime-local";
|
|
if( !hasTimeInput )
|
|
{
|
|
input.form.style.display = "none";
|
|
}
|
|
|
|
if( window.Intl && typeof window.Intl === "object" )
|
|
{
|
|
hasIntl = true;
|
|
var Region = new Intl.DateTimeFormat();
|
|
var o = Region.resolvedOptions();
|
|
Locale = o.locale;
|
|
// document.getElementById("searchtext").value = Locale;
|
|
}
|
|
|
|
document.getElementById("events").style.display = "none";
|
|
EPG = null;
|
|
var msg = document.getElementById("message");
|
|
msg.firstChild.nodeValue = "Loading...";
|
|
msg.style.display = "block";
|
|
|
|
reqChannelList.open("GET", "/channellist.lua?select=json", true);
|
|
reqChannelList.send();
|
|
}
|
|
|
|
function Current() {
|
|
var d = new Date();
|
|
var input = document.getElementById("datetime");
|
|
if( input.type == "datetime-local" )
|
|
{
|
|
var d1 = new Date(d.getTime() - d.getTimezoneOffset() * 60000);
|
|
input.value = d1.toISOString().substr(0,16);
|
|
}
|
|
// else
|
|
// {
|
|
// input.value = d.toLocaleString();
|
|
// }
|
|
Position = Search(d)
|
|
Scroll(0);
|
|
}
|
|
|
|
function Scroll(amount)
|
|
{
|
|
Position += amount;
|
|
if( Position < 0 )
|
|
Position = 0;
|
|
else if( Position + 1 >= EPG.EventList.length )
|
|
Position = EPG.EventList.length - 5;
|
|
for( var i = 0; i < 5; i += 1 )
|
|
{
|
|
ShowEvent(EPG.EventList[Position+i],i);
|
|
}
|
|
}
|
|
|
|
function Search(d)
|
|
{
|
|
var a = 0;
|
|
var b = EPG.EventList.length - 1;
|
|
var i;
|
|
|
|
while((b - a) > 1)
|
|
{
|
|
i = Math.floor(a + (b - a)/2);
|
|
d1 = new Date(EPG.EventList[i].Time);
|
|
if( d1 >= d )
|
|
b = i;
|
|
else
|
|
a = i;
|
|
}
|
|
return b;
|
|
}
|
|
|
|
function ShowEvent(event,index)
|
|
{
|
|
var box = document.getElementById("event" + index);
|
|
|
|
var d = new Date(event.Time);
|
|
var id = event.ID.match(/[A-Z0-9]+:\d+:\d+:\d+/);
|
|
var ch = ChannelLookup[id[0]];
|
|
var Channel = "\u00A0";
|
|
var Text = "";
|
|
var Name = "";
|
|
if( ch ) Channel = ch.Title;
|
|
if( event.Text ) Text = event.Text;
|
|
if( event.Name ) Name = event.Name;
|
|
box.getElementsByClassName("event_date")[0].firstChild.nodeValue =
|
|
d.toLocaleDateString(Locale,DateOptions) + " - " + d.toLocaleTimeString(Locale,TimeOptions);
|
|
box.getElementsByClassName("event_duration")[0].firstChild.nodeValue = event.Duration;
|
|
box.getElementsByClassName("event_channel")[0].firstChild.nodeValue = Channel;
|
|
box.getElementsByClassName("event_name")[0].firstChild.nodeValue = Name;
|
|
box.getElementsByClassName("event_text")[0].firstChild.nodeValue = Text;
|
|
}
|
|
|
|
function ClearEvent(index)
|
|
{
|
|
var box = document.getElementById("event" + index);
|
|
box.getElementsByClassName("event_date")[0].firstChild.nodeValue = "";
|
|
box.getElementsByClassName("event_duration")[0].firstChild.nodeValue = "";
|
|
box.getElementsByClassName("event_channel")[0].firstChild.nodeValue = "";
|
|
box.getElementsByClassName("event_name")[0].firstChild.nodeValue = "";
|
|
box.getElementsByClassName("event_text")[0].firstChild.nodeValue = "";
|
|
}
|
|
|
|
|
|
function ScrollTo()
|
|
{
|
|
var d = new Date();
|
|
var Text = "?;";
|
|
var input = document.getElementById("datetime");
|
|
if( input.value == "" )
|
|
{
|
|
Current();
|
|
}
|
|
else
|
|
{
|
|
if( input.type == "datetime-local" )
|
|
{
|
|
// document.getElementById("searchtext").value = input.value;
|
|
d = new Date(Date.parse(input.value) + d.getTimezoneOffset() * 60000);
|
|
}
|
|
Position = Search(d)
|
|
Scroll(0);
|
|
}
|
|
}
|
|
|
|
function SearchText()
|
|
{
|
|
var j = 0;
|
|
var SearchText = document.getElementById("searchtext").value.toLowerCase();
|
|
if( SearchText.length > 0 )
|
|
{
|
|
for(var i = Position; i < EPG.EventList.length && j < 5; i += 1)
|
|
{
|
|
var event = EPG.EventList[i];
|
|
var id = event.ID.match(/[A-Z0-9]+:\d+:\d+:\d+/);
|
|
var ch = ChannelLookup[id[0]];
|
|
var Compare = "";
|
|
if( ch ) Compare = Compare = ch.Title;
|
|
if( event.Text ) Compare = Compare + "\u00A0" + event.Text;
|
|
if( event.Name ) Compare = Compare + "\u00A0" + event.Name;
|
|
Compare = Compare.toLowerCase();
|
|
if( Compare.indexOf(SearchText) >= 0 )
|
|
{
|
|
ShowEvent(event,j);
|
|
j = j + 1;
|
|
Position = i + 1;
|
|
}
|
|
}
|
|
if( j == 0 )
|
|
Position = 0;
|
|
for( j = j; j < 5; j += 1)
|
|
{
|
|
ClearEvent(j);
|
|
}
|
|
}
|
|
else
|
|
Current();
|
|
}
|
|
|
|
</script>
|
|
|
|
</head>
|
|
<body onload="OnLoad()">
|
|
|
|
<table class="maintable">
|
|
<colgroup>
|
|
<col style="width: 182px"/>
|
|
<col style="width: 728px"/>
|
|
</colgroup>
|
|
<tr><td class="maintd" colspan="2">
|
|
<a href="http://www.digitaldevices.de"><img src="/BannerDD.jpg" alt="DD" width="910" height="130" /></a>
|
|
</td></tr>
|
|
<tr><td class="maintd" colspan="2"> </td></tr>
|
|
<tr>
|
|
<td class="maintd"><script type="text/javascript">CreateMenu();</script></td>
|
|
<td class="content">
|
|
<div>
|
|
<!-- Begin Content -->
|
|
<div id="message" class="message"> </div>
|
|
<div id="events">
|
|
<div class="event_scroll">
|
|
|
|
Search:
|
|
<form action="javascript:SearchText()" style="display:inline-block">
|
|
<input id="searchtext" style="width: 200px" type="search" value="" onchange="SearchText()">
|
|
</form>
|
|
|
|
<form action="javascript:void()" style="display:inline-block">
|
|
<input id="datetime" type="datetime-local" value="" onchange="ScrollTo()" >
|
|
</form>
|
|
<form action="">
|
|
<input type="Button" value="|<" onclick="Scroll(-9999999)" >
|
|
<input type="Button" value="<<<" onclick="Scroll(-500)" >
|
|
<input type="Button" value="<<" onclick="Scroll(-50)" >
|
|
<input type="Button" value="<" onclick="Scroll(-5)" >
|
|
<input type="Button" value="[]" onclick="Current()" >
|
|
<input type="Button" value=">" onclick="Scroll(+5)" >
|
|
<input type="Button" value=">> " onclick="Scroll(+50)" >
|
|
<input type="Button" value=">>>" onclick="Scroll(+500)" >
|
|
<input type="Button" value=">|" onclick="Scroll(+9999999)" >
|
|
</form>
|
|
</div>
|
|
<div id="event0" class="event">
|
|
<div class="event_date"> </div>
|
|
<div class="event_duration"> </div>
|
|
<div class="event_channel"> </div>
|
|
<div class="event_name"> </div>
|
|
<div class="event_text"> </div>
|
|
</div>
|
|
<div id="event1" class="event">
|
|
<div class="event_date"> </div>
|
|
<div class="event_duration"> </div>
|
|
<div class="event_channel"> </div>
|
|
<div class="event_name"> </div>
|
|
<div class="event_text"> </div>
|
|
</div>
|
|
<div id="event2" class="event">
|
|
<div class="event_date"> </div>
|
|
<div class="event_duration"> </div>
|
|
<div class="event_channel"> </div>
|
|
<div class="event_name"> </div>
|
|
<div class="event_text"> </div>
|
|
</div>
|
|
<div id="event3" class="event">
|
|
<div class="event_date"> </div>
|
|
<div class="event_duration"> </div>
|
|
<div class="event_channel"> </div>
|
|
<div class="event_name"> </div>
|
|
<div class="event_text"> </div>
|
|
</div>
|
|
<div id="event4" class="event">
|
|
<div class="event_date"> </div>
|
|
<div class="event_duration"> </div>
|
|
<div class="event_channel"> </div>
|
|
<div class="event_name"> </div>
|
|
<div class="event_text"> </div>
|
|
</div>
|
|
</div>
|
|
<!-- End Content -->
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<tr><td colspan="2"> </td></tr>
|
|
</table>
|
|
|
|
</body>
|
|
</html>
|