From a90b3d5139810a42662e0d390002ad3de5dc9183 Mon Sep 17 00:00:00 2001 From: cat Date: Fri, 28 Dec 2012 10:51:15 +0100 Subject: [PATCH] LSP: + added status to protocol tab + added ID to streams tab + added sorting to streams tab * minor bugfixes --- lsp/functions.js | 291 +++++----- lsp/graphics/sort.png | Bin 0 -> 317 bytes lsp/graphics/sort_asc.png | Bin 0 -> 292 bytes lsp/graphics/sort_desc.png | Bin 0 -> 308 bytes lsp/main.js | 1102 ++++++++++++++++++------------------ lsp/server.html | 1 + lsp/style.css | 17 +- lsp/tablesort.js | 216 +++++++ 8 files changed, 935 insertions(+), 692 deletions(-) create mode 100644 lsp/graphics/sort.png create mode 100644 lsp/graphics/sort_asc.png create mode 100644 lsp/graphics/sort_desc.png create mode 100644 lsp/tablesort.js diff --git a/lsp/functions.js b/lsp/functions.js index 81993f1d..30ba1a0f 100644 --- a/lsp/functions.js +++ b/lsp/functions.js @@ -1,18 +1,18 @@ - /** - * Show a confirm dialog - * @param question the question displayed - */ + /** + * Show a confirm dialog + * @param question the question displayed + */ function confirmDelete(question) { return confirm(question); } - /** - * Format a date to mm/dd/yyyy hh:mm:ss format - * @param date the date to format (timestamp) - */ + /** + * Format a date to mm/dd/yyyy hh:mm:ss format + * @param date the date to format (timestamp) + */ function formatDate(date) { var d = new Date(date * 1000); @@ -29,10 +29,10 @@ } - /** - * Find out what kind of resource an URI is - * @param uri the URI to check. If it start with a protocol (ebut not file://) return 'Live', else 'Recorded' - */ + /** + * Find out what kind of resource an URI is + * @param uri the URI to check. If it start with a protocol (ebut not file://) return 'Live', else 'Recorded' + */ function TypeofResource(uri) { var protocol = /([a-zA-Z]+):\/\//.exec(uri); @@ -46,10 +46,10 @@ } - /** - * convert a short limit name to a long one using the table above - * @param name the short name of a limit - */ + /** + * convert a short limit name to a long one using the table above + * @param name the short name of a limit + */ function shortToLongLimit(name) { var i; @@ -66,13 +66,13 @@ } - /** - * forse the server to save to the config file - * @param callback function to call after the command is send - */ + /** + * forse the server to save to the config file + * @param callback function to call after the command is send + */ function forceJSONSave(callback) { - // build the object to send to the server + // build the object to send to the server var data = { 'authorize': @@ -83,7 +83,7 @@ 'save': 1 }; - // make the XHR call + // make the XHR call $.ajax( { 'url': settings.server, @@ -99,11 +99,11 @@ } - /** - * retrieves data from the server ;) - * note: does not authenticate first. Assumes user is logged in. - * @param callback the function to call when the data has been retrieved. This callback has 1 parameter, the data retrieved. - */ + /** + * retrieves data from the server ;) + * note: does not authenticate first. Assumes user is logged in. + * @param callback the function to call when the data has been retrieved. This callback has 1 parameter, the data retrieved. + */ function getData(callback) { var data = @@ -113,7 +113,7 @@ 'username': settings.credentials.username, 'password': (settings.credentials.authstring != "" ? MD5(MD5(settings.credentials.password) + settings.credentials.authstring) : "" ) }, - 'capabilities': {} + 'capabilities': {} }; $.ajax( @@ -132,11 +132,12 @@ var ret = $.extend(true, { "streams": {}, - "capabilities": {}, + "capabilities": {}, "statistics": {} }, d); - - console.log('[651] RECV', ret); + + //IE breaks if the console isn't opened, so keep commented when committing + //console.log('[651] RECV', ret); if(callback) { @@ -147,113 +148,113 @@ } - /** - * retrieved the status and number of viewers from all streams - * @param callback function that is called when the data is collected. Has one parameter, the data retrieved - */ - function getStreamsData(callback) - { + /** + * retrieved the status and number of viewers from all streams + * @param callback function that is called when the data is collected. Has one parameter, the data retrieved + */ + function getStreamsData(callback) + { - getData(function(data) - { - var streams = {}; // streamID: [status, numViewers]; - var cnt = 0; + getData(function(data) + { + var streams = {}; // streamID: [status, numViewers]; + var cnt = 0; - for(var stream in data.streams) - { - streams[stream] = [data.streams[stream].online, 0]; - cnt++; - } + for(var stream in data.streams) + { + streams[stream] = [data.streams[stream].online, 0]; + cnt++; + } - if(cnt === 0) - { - return; // if there are no streams, don't collect data and just return - } + if(cnt === 0) + { + return; // if there are no streams, don't collect data and just return + } - for(stream in data.statistics) - { - if(data.statistics[stream].curr) - { - for(var viewer in data.statistics[stream].curr) - { - streams[stream][1]++; - } - } - } + for(stream in data.statistics) + { + if(data.statistics[stream].curr) + { + for(var viewer in data.statistics[stream].curr) + { + streams[stream][1]++; + } + } + } - callback(streams); - }); - } + callback(streams); + }); + } - /** - * parses an url and returns the parts of it. - * @return object containing the parts of the URL: protocol, host and port. - */ + /** + * parses an url and returns the parts of it. + * @return object containing the parts of the URL: protocol, host and port. + */ function parseURL(url) - { - var pattern = /(https?)\:\/\/([^:\/]+)\:(\d+)?/i; - - var retobj = {protocol: '', host: '', port: ''}; - var results = url.match(pattern); + { + var pattern = /(https?)\:\/\/([^:\/]+)\:(\d+)?/i; + + var retobj = {protocol: '', host: '', port: ''}; + var results = url.match(pattern); - if(results != null) - { - retobj.protocol = results[1]; - retobj.host = results[2]; - retobj.port = results[3]; - } + if(results != null) + { + retobj.protocol = results[1]; + retobj.host = results[2]; + retobj.port = results[3]; + } - return retobj; - } + return retobj; + } - /** - * go figure. - * @return true if there is a HTTP connector... and false if there isn't. - */ - function isThereAHTTPConnector() - { + /** + * go figure. + * @return true if there is a HTTP connector... and false if there isn't. + */ + function isThereAHTTPConnector() + { var i, len = (settings.settings.config.protocols ? settings.settings.config.protocols.length : 0); - for(i = 0; i < len; i++) - { - if(settings.settings.config.protocols[i].connector == 'HTTP') - { - return true; - } - } + for(i = 0; i < len; i++) + { + if(settings.settings.config.protocols[i].connector == 'HTTP') + { + return true; + } + } - return false; - } + return false; + } - /** - * retrieve port of the http connector - * @return the port number - */ - function getHTTPControllerPort() - { + /** + * retrieve port of the http connector + * @return the port number + */ + function getHTTPControllerPort() + { var i, len = (settings.settings.config.protocols ? settings.settings.config.protocols.length : 0); - for(i = 0; i < len; i++) - { - if(settings.settings.config.protocols[i].connector == 'HTTP') - { - return settings.settings.config.protocols[i].port; - } - } + for(i = 0; i < len; i++) + { + if(settings.settings.config.protocols[i].connector == 'HTTP') + { + return settings.settings.config.protocols[i].port; + } + } - return 0; - } + return 0; + } - /** - * retrieves the stream status (online and total number of streams) and viewer info (total number of viewers). - * @param callback function that is called when data is retrieved. Has one parameter, the retrieved data. - */ + /** + * retrieves the stream status (online and total number of streams) and viewer info (total number of viewers). + * @param callback function that is called when data is retrieved. Has one parameter, the retrieved data. + */ function getStatData(callback) { getData(function(data) @@ -290,14 +291,14 @@ } - /** - * Connect to the server and retrieve the data - * @param callback the function to call when connected. Has one parameter, an optional error string. - */ + /** + * Connect to the server and retrieve the data + * @param callback the function to call when connected. Has one parameter, an optional error string. + */ function loadSettings(callback) { - // display 'loading, please wait' while retrieving data - $('body').append( $('
').attr('id', 'shield').text('Loading, please wait...') ); + // display 'loading, please wait' while retrieving data + $('body').append( $('
').attr('id', 'shield').text('Loading, please wait...') ); var errorstr = '', data = $.extend(settings.settings, @@ -311,8 +312,9 @@ delete data.log; // don't send the logs back to the server delete data.statistics; // same goes for the stats - - console.log('[763] SEND', data); + + //IE breaks if the console isn't opened, so keep commented when committing + //console.log('[763] SEND', data); $.ajax( { @@ -328,13 +330,14 @@ 'error': function() { showTab('disconnect'); - $('#shield').remove(); // remove loading display + $('#shield').remove(); // remove loading display }, 'success': function(d) { - $('#shield').remove(); // remove loading display + $('#shield').remove(); // remove loading display - console.log('[785] RECV', d); + //IE breaks if the console isn't opened, so keep commented when committing + //console.log('[785] RECV', d); if(d && d['authorize'] && d['authorize']['challenge']) { @@ -358,7 +361,7 @@ "version": "" }, "streams": {}, - "capabilities": {}, + "capabilities": {}, "log": {}, "statistics": {} }, d); @@ -372,10 +375,10 @@ } - /** - * Sets the page's header text (loging in, connected, disconnected), title and pretty colors (!) - * @param state the state of the header. Possible are 'logingin', 'disconnected' or 'connected'. - */ + /** + * Sets the page's header text (loging in, connected, disconnected), title and pretty colors (!) + * @param state the state of the header. Possible are 'logingin', 'disconnected' or 'connected'. + */ function setHeaderState(state) { var text, cname, title; @@ -396,22 +399,22 @@ - /** - * Formats the status property to a string (with colors!) - * @param status, the status property of a stream - */ + /** + * Formats the status property to a string (with colors!) + * @param status, the status property of a stream + */ function formatStatus(status) { - if(status == undefined) - { - return "Unknown, checking..."; - } + if(status == undefined) + { + return "Unknown, checking..."; + } - switch(status) - { - case 1: return "Running"; break; - case 0: return "Offline"; break; - default: return "" + status + ""; break; - } + switch(status) + { + case 1: return "Running"; break; + case 0: return "Offline"; break; + default: return "" + status + ""; break; + } } diff --git a/lsp/graphics/sort.png b/lsp/graphics/sort.png new file mode 100644 index 0000000000000000000000000000000000000000..b0802bd3a617921693b0627f7022f4c3361aa152 GIT binary patch literal 317 zcmeAS@N?(olHy`uVBq!ia0vp^0wB!60wlNoGJgf67>k44ofy`glX(f`FeQ1ryDGx_O&dZyP3a5v+?N3w0pSx1qyK% zctjR6FvuMQVaCImA;CaFmUKs7M+SzC{oH>NS%Lh`o-U3d6}OTT7FZ^<7>3pT`1o#L z?%~TynJ*9fIJGhv6sk!)zHI8~`ttD7W1HGtMeoNr&p5!8yywfGow1jKKC?)lUi-M; zW@E&`0|BZ_K24ea_-Oy;OWgM!76dpRdD8DGXd$!n#o_7Y+jI8s`=`CCV20}ouDcU+ z|HQBN)L12xcKxb_&f*^*rNo4zey}$5{rSQEa5v+?LDtWdY80t#^! zctjR6FvuMQVaCImA;CaFmUKs7M+SzC{oH>NS%Lh+o-U3d6}OTT6nL*}TG(x%Tr4Fa z@?XnX#y#*rOM;o9fr~*+N{5GY-~o>0Ee3ytgKAEl{`l#5 zBO??o@xyRU#$)k&dZ|DE{Il#%|1PStbX)Sqq>JtP@AGcf)&30+d1%lbFqI+9U(Chl z-wcsPtz#VtVVo-&WPdWfIKldUL&fIS_$+Sw%V`&x8H5<&yBw?eo@J=O@o=C@Qj^}jAzzcpm!KNUHx3vIVCg!010Jw A{{R30 literal 0 HcmV?d00001 diff --git a/lsp/main.js b/lsp/main.js index 7360859f..a5f1b5f5 100644 --- a/lsp/main.js +++ b/lsp/main.js @@ -1,15 +1,15 @@ - /** - * Local settings page - * DDVTECH - * for more information, see http://mistserver.org/index.php?title=Stand-alone_Configuration_Page - */ - - - /** - * Store a local copy of the data send by the server. - * server is the URL, credentials hold the username, password and authstring and settings is the local copy. - */ + /** + * Local settings page + * DDVTECH + * for more information, see http://mistserver.org/index.php?title=Stand-alone_Configuration_Page + */ + + + /** + * Store a local copy of the data send by the server. + * server is the URL, credentials hold the username, password and authstring and settings is the local copy. + */ var settings = { server: '', @@ -21,11 +21,11 @@ }, settings: {} }; - - - /** - * Table for long/short limit names - */ + + + /** + * Table for long/short limit names + */ var ltypes = [ ['kb_total', 'Total bandwidth'], @@ -39,11 +39,11 @@ ['str_kbps_min', 'Minimum bitrate'], ['str_kbps_max', 'Maximum bitrate'] ]; - - - /** - * When the page loads, fix the menu and show the correct tab - */ + + + /** + * When the page loads, fix the menu and show the correct tab + */ $(document).ready(function() { $('#nav').children().each(function() @@ -55,71 +55,73 @@ { $(this).attr('class', ''); }); - + // select this one $(this).attr('class', 'selected'); - + // show correct tab showTab($(this).text()); }); }); - + // show login 'tab' and hide menu showTab('login'); $('#nav').css('visibility', 'hidden'); }); - - - + + // used on the overview and streams page. cleared when switching to another 'tab'. var sinterval = null; - + + // and this one is used on the protocols page. + var pinterval = null; + // what kind of streams should be displayed? Format is [recorded, live]; var streamsdisplay = [true, true]; - - - - /** - * Display a certain page. It contains a (giant) switch-statement, that builds a page depending on the tab requested - * @param name the name of the tab - * @param streamname only used when editing streams, the name of the edited (or new) stream. Also used with the 'embed' tab - */ + + + /** + * Display a certain page. It contains a (giant) switch-statement, that builds a page depending on the tab requested + * @param name the name of the tab + * @param streamname only used when editing streams, the name of the edited (or new) stream. Also used with the 'embed' tab + */ function showTab(name, streamname) { // clear page and refresh interval $('#page').html(''); clearInterval(sinterval); - + clearInterval(pinterval); + switch(name) { case 'login': - + var host = $('').attr('type', 'text').attr('placeholder', 'HTTP://' + (location.host == '' ? 'localhost:4242' : location.host) + '/api'); var user = $('').attr('type', 'text').attr('placeholder', 'USERNAME'); var pass = $('').attr('type', 'password').attr('placeholder', 'PASSWORD'); - var conn = $('