part of streams and layout fixes (#17, 2h)

This commit is contained in:
That-Guy 2012-04-03 21:56:35 +02:00
parent 776ffcb296
commit e201b544ce
2 changed files with 190 additions and 35 deletions

11
jquery.placeholder.min.js vendored Normal file
View file

@ -0,0 +1,11 @@
/*
* Placeholder plugin for jQuery
* ---
* Copyright 2010, Daniel Stocks (http://webcloud.se)
* Released under the MIT, BSD, and GPL Licenses.
*/
(function(b){function d(a){this.input=a;a.attr("type")=="password"&&this.handlePassword();b(a[0].form).submit(function(){if(a.hasClass("placeholder")&&a[0].value==a.attr("placeholder"))a[0].value=""})}d.prototype={show:function(a){if(this.input[0].value===""||a&&this.valueIsPlaceholder()){if(this.isPassword)try{this.input[0].setAttribute("type","text")}catch(b){this.input.before(this.fakePassword.show()).hide()}this.input.addClass("placeholder");this.input[0].value=this.input.attr("placeholder")}},
hide:function(){if(this.valueIsPlaceholder()&&this.input.hasClass("placeholder")&&(this.input.removeClass("placeholder"),this.input[0].value="",this.isPassword)){try{this.input[0].setAttribute("type","password")}catch(a){}this.input.show();this.input[0].focus()}},valueIsPlaceholder:function(){return this.input[0].value==this.input.attr("placeholder")},handlePassword:function(){var a=this.input;a.attr("realType","password");this.isPassword=!0;if(b.browser.msie&&a[0].outerHTML){var c=b(a[0].outerHTML.replace(/type=(['"])?password\1/gi,
"type=$1text$1"));this.fakePassword=c.val(a.attr("placeholder")).addClass("placeholder").focus(function(){a.trigger("focus");b(this).hide()});b(a[0].form).submit(function(){c.remove();a.show()})}}};var e=!!("placeholder"in document.createElement("input"));b.fn.placeholder=function(){return e?this:this.each(function(){var a=b(this),c=new d(a);c.show(!0);a.focus(function(){c.hide()});a.blur(function(){c.show(!1)});b.browser.msie&&(b(window).load(function(){a.val()&&a.removeClass("placeholder");c.show(!0)}),
a.focus(function(){if(this.value==""){var a=this.createTextRange();a.collapse(!0);a.moveStart("character",0);a.select()}}))})}})(jQuery);

View file

@ -6,9 +6,10 @@
<meta charset='utf-8' />
<title>Server Manager - not connected</title>
<title>Mistserver Manager - not connected</title>
<script src='jquery.js'></script><!-- TODO inline -->
<script src='jquery.placeholder.min.js'></script> <!-- TODO inline -->
<script>var MD5=function(j){function RotateLeft(a,b){return(a<<b)|(a>>>(32-b))}function AddUnsigned(a,b){var c,lY4,lX8,lY8,lResult;lX8=(a&0x80000000);lY8=(b&0x80000000);c=(a&0x40000000);lY4=(b&0x40000000);lResult=(a&0x3FFFFFFF)+(b&0x3FFFFFFF);if(c&lY4){return(lResult^0x80000000^lX8^lY8)}if(c|lY4){if(lResult&0x40000000){return(lResult^0xC0000000^lX8^lY8)}else{return(lResult^0x40000000^lX8^lY8)}}else{return(lResult^lX8^lY8)}}function F(x,y,z){return(x&y)|((~x)&z)}function G(x,y,z){return(x&z)|(y&(~z))}function H(x,y,z){return(x^y^z)}function I(x,y,z){return(y^(x|(~z)))}function FF(a,b,c,d,x,s,e){a=AddUnsigned(a,AddUnsigned(AddUnsigned(F(b,c,d),x),e));return AddUnsigned(RotateLeft(a,s),b)};function GG(a,b,c,d,x,s,e){a=AddUnsigned(a,AddUnsigned(AddUnsigned(G(b,c,d),x),e));return AddUnsigned(RotateLeft(a,s),b)};function HH(a,b,c,d,x,s,e){a=AddUnsigned(a,AddUnsigned(AddUnsigned(H(b,c,d),x),e));return AddUnsigned(RotateLeft(a,s),b)};function II(a,b,c,d,x,s,e){a=AddUnsigned(a,AddUnsigned(AddUnsigned(I(b,c,d),x),e));return AddUnsigned(RotateLeft(a,s),b)};function ConvertToWordArray(a){var b;var c=a.length;var d=c+8;var e=(d-(d%64))/64;var f=(e+1)*16;var g=Array(f-1);var h=0;var i=0;while(i<c){b=(i-(i%4))/4;h=(i%4)*8;g[b]=(g[b]|(a.charCodeAt(i)<<h));i++}b=(i-(i%4))/4;h=(i%4)*8;g[b]=g[b]|(0x80<<h);g[f-2]=c<<3;g[f-1]=c>>>29;return g};function WordToHex(a){var b="",WordToHexValue_temp="",lByte,lCount;for(lCount=0;lCount<=3;lCount++){lByte=(a>>>(lCount*8))&255;WordToHexValue_temp="0"+lByte.toString(16);b=b+WordToHexValue_temp.substr(WordToHexValue_temp.length-2,2)}return b};function Utf8Encode(a){a=a.replace(/\r\n/g,"\n");var b="";for(var n=0;n<a.length;n++){var c=a.charCodeAt(n);if(c<128){b+=String.fromCharCode(c)}else if((c>127)&&(c<2048)){b+=String.fromCharCode((c>>6)|192);b+=String.fromCharCode((c&63)|128)}else{b+=String.fromCharCode((c>>12)|224);b+=String.fromCharCode(((c>>6)&63)|128);b+=String.fromCharCode((c&63)|128)}}return b};var x=Array();var k,AA,BB,CC,DD,a,b,c,d;var l=7,S12=12,S13=17,S14=22;var m=5,S22=9,S23=14,S24=20;var o=4,S32=11,S33=16,S34=23;var p=6,S42=10,S43=15,S44=21;j=Utf8Encode(j);x=ConvertToWordArray(j);a=0x67452301;b=0xEFCDAB89;c=0x98BADCFE;d=0x10325476;for(k=0;k<x.length;k+=16){AA=a;BB=b;CC=c;DD=d;a=FF(a,b,c,d,x[k+0],l,0xD76AA478);d=FF(d,a,b,c,x[k+1],S12,0xE8C7B756);c=FF(c,d,a,b,x[k+2],S13,0x242070DB);b=FF(b,c,d,a,x[k+3],S14,0xC1BDCEEE);a=FF(a,b,c,d,x[k+4],l,0xF57C0FAF);d=FF(d,a,b,c,x[k+5],S12,0x4787C62A);c=FF(c,d,a,b,x[k+6],S13,0xA8304613);b=FF(b,c,d,a,x[k+7],S14,0xFD469501);a=FF(a,b,c,d,x[k+8],l,0x698098D8);d=FF(d,a,b,c,x[k+9],S12,0x8B44F7AF);c=FF(c,d,a,b,x[k+10],S13,0xFFFF5BB1);b=FF(b,c,d,a,x[k+11],S14,0x895CD7BE);a=FF(a,b,c,d,x[k+12],l,0x6B901122);d=FF(d,a,b,c,x[k+13],S12,0xFD987193);c=FF(c,d,a,b,x[k+14],S13,0xA679438E);b=FF(b,c,d,a,x[k+15],S14,0x49B40821);a=GG(a,b,c,d,x[k+1],m,0xF61E2562);d=GG(d,a,b,c,x[k+6],S22,0xC040B340);c=GG(c,d,a,b,x[k+11],S23,0x265E5A51);b=GG(b,c,d,a,x[k+0],S24,0xE9B6C7AA);a=GG(a,b,c,d,x[k+5],m,0xD62F105D);d=GG(d,a,b,c,x[k+10],S22,0x2441453);c=GG(c,d,a,b,x[k+15],S23,0xD8A1E681);b=GG(b,c,d,a,x[k+4],S24,0xE7D3FBC8);a=GG(a,b,c,d,x[k+9],m,0x21E1CDE6);d=GG(d,a,b,c,x[k+14],S22,0xC33707D6);c=GG(c,d,a,b,x[k+3],S23,0xF4D50D87);b=GG(b,c,d,a,x[k+8],S24,0x455A14ED);a=GG(a,b,c,d,x[k+13],m,0xA9E3E905);d=GG(d,a,b,c,x[k+2],S22,0xFCEFA3F8);c=GG(c,d,a,b,x[k+7],S23,0x676F02D9);b=GG(b,c,d,a,x[k+12],S24,0x8D2A4C8A);a=HH(a,b,c,d,x[k+5],o,0xFFFA3942);d=HH(d,a,b,c,x[k+8],S32,0x8771F681);c=HH(c,d,a,b,x[k+11],S33,0x6D9D6122);b=HH(b,c,d,a,x[k+14],S34,0xFDE5380C);a=HH(a,b,c,d,x[k+1],o,0xA4BEEA44);d=HH(d,a,b,c,x[k+4],S32,0x4BDECFA9);c=HH(c,d,a,b,x[k+7],S33,0xF6BB4B60);b=HH(b,c,d,a,x[k+10],S34,0xBEBFBC70);a=HH(a,b,c,d,x[k+13],o,0x289B7EC6);d=HH(d,a,b,c,x[k+0],S32,0xEAA127FA);c=HH(c,d,a,b,x[k+3],S33,0xD4EF3085);b=HH(b,c,d,a,x[k+6],S34,0x4881D05);a=HH(a,b,c,d,x[k+9],o,0xD9D4D039);d=HH(d,a,b,c,x[k+12],S32,0xE6DB99E5);c=HH(c,d,a,b,x[k+15],S33,0x1FA27CF8);b=HH(b,c,d,a,x[k+2],S34,0xC4AC5665);a=II(a,b,c,d,x[k+0],p,0xF4292244);d=II(d,a,b,c,x[k+7],S42,0x432AFF97);c=II(c,d,a,b,x[k+14],S43,0xAB9423A7);b=II(b,c,d,a,x[k+5],S44,0xFC93A039);a=II(a,b,c,d,x[k+12],p,0x655B59C3);d=II(d,a,b,c,x[k+3],S42,0x8F0CCC92);c=II(c,d,a,b,x[k+10],S43,0xFFEFF47D);b=II(b,c,d,a,x[k+1],S44,0x85845DD1);a=II(a,b,c,d,x[k+8],p,0x6FA87E4F);d=II(d,a,b,c,x[k+15],S42,0xFE2CE6E0);c=II(c,d,a,b,x[k+6],S43,0xA3014314);b=II(b,c,d,a,x[k+13],S44,0x4E0811A1);a=II(a,b,c,d,x[k+4],p,0xF7537E82);d=II(d,a,b,c,x[k+11],S42,0xBD3AF235);c=II(c,d,a,b,x[k+2],S43,0x2AD7D2BB);b=II(b,c,d,a,x[k+9],S44,0xEB86D391);a=AddUnsigned(a,AA);b=AddUnsigned(b,BB);c=AddUnsigned(c,CC);d=AddUnsigned(d,DD)}var q=WordToHex(a)+WordToHex(b)+WordToHex(c)+WordToHex(d);return q.toLowerCase()};</script>
<style>
@ -130,15 +131,15 @@ tbody button,
tbody select,
tbody input
{
padding: 2px;
height: 22px;
padding: 2px;
}
tbody td button
{
padding: 2px 7px 2px 7px;
text-transform: uppercase;
font-weight: bold;
padding: 2px 7px 2px 7px;
}
tbody td.center
@ -147,13 +148,18 @@ tbody td.center
}
#page > button
{
margin: 12px 0 6px 0;
}
/*
.outsidetable td
{
padding-top: 30px;
background-color: #fafafa;
}
*/
@ -233,12 +239,43 @@ tbody td.center
background-color: #c8c8c8;
}
#nav #logoutbutton
li#logoutbutton
{
color: #cc3333;
}
p, label
{
color: #505050;
}
p
{
margin-top: 8px;
}
label
{
display: block;
margin: 6px 0 9px 0;
padding: 8px 0 0 0;
width: 400px;
}
label input
{
float: right;
margin: -8px 0 0 0;
width: 225px;
}
#editserver
{
width: 400px;
}
/* fonts */
@ -248,12 +285,21 @@ tbody td.center
th,
#login > button,
p,
label
label,
#page label input,
#page > button,
#editserver > button
{
font: normal bold 11pt Arial, sans-serif;
text-transform: uppercase;
}
#editserver label input
{
text-transform: none;
font-weight: normal;
}
#login > input
{
font: normal bold 11pt Arial, sans-serif;
@ -470,11 +516,11 @@ td
case 'connected': text = 'connected'; cname = 'connected'; title = 'connected to ' + settings.server; break;
}
document.title = 'Server Manager - ' + title;
document.title = 'Mistserver Manager - ' + title;
$('#header-connection').attr('class', cname);
$('#header-connection').text(text);
$('#header-host').text(settings.server.replace('http://', ''));
$('#header-host').text(settings.server.replace('HTTP://', ''));
}
@ -482,7 +528,7 @@ td
// show tab
function showTab(name)
function showTab(name, streamname)
{
// clear page
$('#page').html('');
@ -492,7 +538,7 @@ td
case 'login':
//TODO fixme login creds
var host = $('<input>').attr('type', 'text').attr('placeholder', 'http://localhost:4242');
var host = $('<input>').attr('type', 'text').attr('placeholder', 'HTTP://LOCALHOST:4242');
var user = $('<input>').attr('type', 'text').attr('placeholder', 'USERNAME').attr('value', 'testaccount');
var pass = $('<input>').attr('type', 'password').attr('placeholder', 'PASSWORD').attr('value', 'pisvlek');
var conn = $('<button>').click(function()
@ -582,7 +628,7 @@ td
}
// add new limit!
// add new protocol!
$nprot = $('<tr>').attr('class', 'outsidetable');
// protocol select
$pname = $('<select>').attr('id', 'new-protocol-name');
@ -597,6 +643,12 @@ td
$('<td>').attr('class', 'center').append(
$('<button>').click(function()
{
if($('#new-protocol-val').val() == '')
{
$('#new-protocol-val').focus();
return;
}
settings.settings.config.protocols[$('#new-protocol-name :selected').val()] =
{
port: $('#new-protocol-val').val()
@ -624,38 +676,51 @@ td
case 'streams':
$table = $('<table>');
$table.html("<thead><th>Type</th><th></th><th>Name</th><th>Status</th><th># V</th><th></th></thead>");
$tbody = $('<tbody>');
$streamselector = $('<select>').attr('id', 'streams-selector');
var stream, cstr, $tr;
$streamselector.append( $('<option>').attr('disabled', 'disabled').text('Select a stream...') );
$tbody.html('');
for(stream in settings.settings.streams)
{
$streamselector.append( $('<option>').attr('value', stream).text(settings.settings.streams[stream].name) );
var cstr = settings.settings.streams[stream];
$tr = $('<tr>').attr('id', 'stream-' + stream);
$tr.append( $('<td>').text('?') );
$tr.append( $('<td>').append( $('<button>').text('embed') ) );
$tr.append( $('<td>').text(cstr.name) );
$tr.append( $('<td>').text(cstr.status) );
$tr.append( $('<td>').text(cstr.online) );
$tr.append( $('<td>').append( $('<button>').text('edit').click(function()
{
var sname = $(this).parent().parent().attr('id').replace('stream-', '');
showTab('editstream', sname);
}) ) );
$tbody.append($tr);
}
$streamselector.change(function()
{
var sname = $('#streams-selector :selected').val();
var stream = settings.settings.streams[sname];
$table.append($tbody);
$('#page').append($table);
$('#page').append( $('<p>').text('TODO stream settings: ' + sname + ' / ' + stream) );
/* // TODO
$('#page').append( $('<label>').attr('for', 'stream-name').text('Name').append( $('<input>').attr('id', 'stream-name').attr('value', stream.name) ) );
$('#page').append( $('<label>').attr('for', 'stream-group').text('Group').append( $('<input>').attr('id', 'stream-group').attr('value', stream.group) ) );
$('#page').append(
$('<div>').text('Channel').append(
$('<label>').attr('for', 'stream-channel-url').text('URL').append( $('<input>').attr('id', 'stream-channel-url').attr('value', stream.channel.URL) )
).append(
$('<label>').attr('for', 'stream-channel-account').text('Account').append( $('<input>').attr('id', 'stream-channel-account').attr('value', stream.channel.account) )
)
);
*/
});
$('#page').append( $streamselector );
$('#page').append(
$('<button>').attr('class', 'floatright').click(function()
{
showTab('editstream', 'new');
}).text('add new')
);
break;
@ -665,6 +730,80 @@ $('#page').append( $('<p>').text('TODO stream settings: ' + sname + ' / ' + stre
case 'editstream':
var sdata, title;
if(streamname == 'new')
{
sdata =
{
name: '',
channel:
{
URL: ''
},
limits: {},
preset:
{
cmd: '',
desc:''
}
};
title = 'add new stream';
}else{
sdata = settings.settings.streams[streamname];
title = 'edit stream "' + sdata.name + '"';
}
$('#page').append( $('<p>').text(title) );
$('#page').append(
$('<div>').attr('id', 'editserver').append(
$('<label>').attr('for', 'stream-edit-name').text('name').append(
$('<input>').attr('type', 'text').attr('placeholder', 'NAME').attr('id', 'stream-edit-name').attr('value', sdata.name)
)
).append(
$('<label>').attr('for', 'stream-edit-source').text('source').append(
$('<input>').attr('type', 'text').attr('placeholder', 'SOURCE').attr('id', 'stream-edit-source').attr('value', sdata.channel.URL)
)
).append(
$('<label>').attr('for', 'stream-edit-preset').text('preset').append(
$('<input>').attr('type', 'text').attr('placeholder', 'PRESET').attr('id', 'stream-edit-preset').attr('value', sdata.preset.cmd)
)
).append(
$('<label>').attr('for', 'stream-edit-preset-descr').text('preset descr').append(
$('<input>').attr('type', 'text').attr('placeholder', 'PRESET DESCRIPTION').attr('id', 'stream-edit-preset-descr').attr('value', sdata.preset.desc)
)
)
);
$('#editserver').append(
$('<button>').attr('class', 'floatright').click(function()
{
if(streamname == 'new')
{
showTab('streams');
}else{
delete settings.settings.streams[streamname];
loadSettings(function()
{
showTab('streams');
});
}
}).text( streamname == 'new' ? 'cancel' : 'delete' )
);
$('#editserver').append(
$('<button>').attr('class', 'floatright').click(function()
{
/// TODO settings.settings.streams[streamname] = sdata?????
}).text('save')
);
break;
@ -813,7 +952,12 @@ $('#page').append( $('<p>').text('TODO stream settings: ' + sname + ' / ' + stre
settings: {}
};
break;
}
} // end switch
//placeholder for older browsers T_T
$('input[placeholder]').placeholder();
}
</script>