<!DOCTYPE HTML>
<html>
<head>
<title>Radio Helsinki - Automation Import</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Importtool for Radio Helsinki">
<meta name="author" content="Christian Pointner <equinox@ffgraz.net>">
<link href="/javascript/twitter-bootstrap/css/bootstrap.css" rel="stylesheet">
<link href="/styles/signin.css" rel="stylesheet">
<link href="/styles/shows.css" rel="stylesheet">
<link href="/styles/musicpools.css" rel="stylesheet">
<style type="text/css">
body {
background-color: #eee;
padding-top: 60px;
padding-bottom: 40px;
}
.btn i[class*='icon-'] {
vertical-align: middle;
}
</style>
<link href="/javascript/twitter-bootstrap/css/bootstrap-responsive.css" rel="stylesheet">
<script src="/javascript/jquery/jquery.min.js"></script>
<script src="/javascript/twitter-bootstrap/js/bootstrap.min.js"></script>
<script src="/javascript/twitter-bootstrap/js/bootstrap-alert.min.js"></script>
<script type="text/javascript">
var username = sessionStorage.getItem("username");
var token = sessionStorage.getItem("token");
var app = sessionStorage.getItem("app");
alertbox = function() {}
alertbox.warning = function (heading, message) {
$('#alertbox').html('<div class="alert"><a class="close" data-dismiss="alert" href="#">×</a><h4 class="alert-heading">' + heading + '</h4>' + message + '</div>');
}
alertbox.error = function (heading, message) {
$('#alertbox').html('<div class="alert alert-error"><a class="close" data-dismiss="alert" href="#">×</a><h4 class="alert-heading">' + heading + '</h4>' + message + '</div>');
}
alertbox.info = function (heading, message) {
$('#alertbox').html('<div class="alert alert-info"><a class="close" data-dismiss="alert" href="#">×</a><h4 class="alert-heading">' + heading + '</h4>' + message + '</div>');
}
var weekday = new Array(7);
weekday[0] = "Sonntag";
weekday[1] = "Montag";
weekday[2] = "Dienstag";
weekday[3] = "Mittwoch";
weekday[4] = "Donnerstag";
weekday[5] = "Freitag";
weekday[6] = "Samstag";
var shows_list = [];
var current_show;
var group_carts = [];
var log_carts = [];
function updateShowListing() {
$('#show-carts tbody').find('tr').remove();
$('#show-info-dumper').text(
'Current Show:\n' + JSON.stringify(current_show, null, ' ') +
'\n\nGroup Carts:\n' + JSON.stringify(group_carts, null, ' ') +
'\n\nLog Carts:\n' + JSON.stringify(log_carts, null, ' ')
);
}
function updateGroupCartList(data, status, req) {
group_carts = [];
$('#show-carts').find('tr:gt(0)').remove();
var cartlist = $(data).find("cartList");
var carts = cartlist.children();
carts.each(function() {
var cut = $(this).find("cutList").get(0);
cart = {
number: $(this).find('number').text(),
title: $(this).find('title').text(),
length: $(cut).find('length').text(),
imported: new Date($(cut).find('originDatetime').text()),
playcnt: new Date($(cut).find('playCounter').text()),
lastplayed: new Date($(cut).find('lastPlayDatetime').text()),
};
group_carts.push(cart);
}
);
}
function updateLogCartList(data, status, req) {
log_carts = [];
var loglist = $(data).find("logList");
var loglines = loglist.children();
loglines.each(function() {
var number = $(this).find('cartNumber').text();
if(number >= current_show.group.lowcart && number <= current_show.group.highcart) {
log_carts.push(number);
}
}
);
}
function showSelectedShow() {
var id = $('#show-selector option:selected').attr('value');
current_show = $.grep(shows_list, function(elem) { return elem.id == id; })[0];
$('#show-title').text(current_show.title);
$('#show-dow').text(weekday[current_show.dow]);
$('#show-rhythm').text(current_show.rhythm);
$('#show-starttime').text(current_show.starttime);
$('#show-length').text(current_show.length + ' Min.');
log_carts = [];
data = { COMMAND: 22, LOGIN_NAME: username, PASSWORD: token, NAME: current_show.log };
lcd = $.post("/rd-bin/rdxport.cgi", data, updateLogCartList, "xml");
group_carts = [];
data = { COMMAND: 6, LOGIN_NAME: username, PASSWORD: token, GROUP_NAME: current_show.group.name, INCLUDE_CUTS: 1 };
gcd = $.post("/rd-bin/rdxport.cgi", data, updateGroupCartList, "xml");
$.when(lcd, gcd).done(
function(lcres, gcres) {
if(lcres[1] == 'success' && gcres[1] == 'success') {
updateShowListing();
}
}
);
}
function updateShowsList(data, status, req) {
shows_list = [];
$('#show-selector').find('option').remove();
var dblist = $(data).find("dropboxList");
var dbs = dblist.children();
dbs.each(function() {
type = $(this).find('type').text();
if(type == 'show') {
var show = {
id: $(this).find('showid').text(),
title: $(this).find('show-title').text(),
dow: $(this).find('show-dayofweek').text(),
rhythm: $(this).find('show-rhythm').text(),
starttime: $(this).find('show-starttime').text(),
length: $(this).find('show-length').text(),
group: {
name: $(this).find('group').text(),
lowcart: $(this).find('group-low-cart').text(),
highcart: $(this).find('group-high-cart').text(),
},
log: $(this).find('log').text(),
normlevel: $(this).find('normalization-level').text(),
trimlevel: $(this).find('autotrim-level').text(),
}
var name = show.title + ' (' + show.rhythm + ', ' + weekday[show.dow] + ', ' + show.starttime + ', ' + show.length + ' Min.)';
$('#show-selector').append($('<option>').attr('value',show.id).text(name));
shows_list.push(show);
}
}
);
showSelectedShow();
}
function app_shows_init() {
shows_list = [];
data = { LOGIN_NAME: username, PASSWORD: token };
$.post("/listdropboxes.cgi", data, updateShowsList, "xml")
}
function selectApp(app) {
switch(app) {
case "musicpools":
$('#app-shows').hide();
$('#nav-btn-shows').removeClass('active');
$('#app-musicpools').show();
$('#nav-btn-musicpools').addClass('active');
break;
default:
$('#app-shows').show();
$('#nav-btn-shows').addClass('active');
$('#app-musicpools').hide();
$('#nav-btn-musicpools').removeClass('active');
app = 'shows';
app_shows_init();
}
sessionStorage.setItem("app", app);
}
function authSuccess(data) {
if (data.status == 'OK') {
username = data.username;
sessionStorage.setItem("username", username);
token = data.token;
sessionStorage.setItem("token", token);
selectApp('shows');
$('#username-field').html(username);
$('#loginbox').slideUp();
$('#mainwindow').fadeIn();
} else {
alertbox.error("Fehler beim Login", data.errorstring);
sessionStorage.removeItem("username");
delete username;
$("#username").val('').focus();
sessionStorage.removeItem("token");
delete token;
$("#password").val('');
sessionStorage.removeItem("app");
delete app;
}
}
function authError(req, status, error) {
message = req.status + ': ' + error;
if(req.status == 401) {
message = "Benutzer und/oder Passwort sind falsch!";
}
alertbox.error("Fehler beim Login", message);
$("#password").val('');
}
function login()
{
$.ajax("/authtoken.json",
{ cache: false,
username: $("#username").val(),
password: $("#password").val(),
dataType: "json",
error: authError,
success: authSuccess
});
}
function logout()
{
sessionStorage.removeItem("username");
delete username;
sessionStorage.removeItem("token");
delete token;
sessionStorage.removeItem("app");
delete app;
$(".alert").alert('close');
$("#username").val('');
$("#password").val('');
$("#mainwindow").fadeOut();
$('#username-field').html('');
$('#loginbox').slideDown();
}
</script>
</head>
<body>
<div class="container">
<div id="loginbox">
<form id="loginform" class="form-signin" role="form">
<img src="/img/helsinki.png" />
<h1 class="form-signin-heading">Radio Helsinki - Import</h1>
<input id="username" type="text" class="form-control" placeholder="Benutzername" required autofocus>
<input id="password" type="password" class="form-control" placeholder="Passwort" required>
<div id="alertbox"></div>
<button class="btn btn-primary btn-large" type="submit"><i class="icon-user icon-white"></i> Anmelden</button>
</form>
</div>
<div id="mainwindow">
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container-fluid">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<span class="brand">Radio Helsinki - Import</span>
<div class="nav-collapse">
<ul class="nav">
<li id="nav-btn-shows"><a href="#" onclick="selectApp('shows')">Sendungen</a></li>
<li id="nav-btn-musicpools"><a href="#" onclick="selectApp('musicpools')">Musikpools</a></li>
</ul>
<form id="logoutform" class="navbar-form pull-right">
<span class="navbar-text">angmeldet als <strong id="username-field">UNKNOWN</strong></span>
<button style="margin-top: 0;" type="button" class="btn btn-danger btn-small" onclick="logout()">
<i class="icon-off icon-white"></i> Abmelden
</button>
</form>
</div>
</div>
</div>
</div>
<div id="app-shows" class="container-fluid">
<div class="row-fluid">
<div class="span10">
<form class="well form-inline">
<label class="control-label" for="select-dropbox"><h3>Sendung auswählen</h3></label>
<select id="show-selector" onchange="showSelectedShow()">
</select>
</form>
</div>
<div class="span2">
<center>
<h4>Aktuelle Woche</h4>
<span id="current-week" class="label label-success">Woche 1</span>
</center>
</div>
</div>
<div class="row-fluid">
<div class="span12">
<h2 id="show-title"></h2>
</div>
</div>
<div class="row-fluid" id="show-details">
<div class="span2"> </div>
<div class="span2">
<strong>Tag:</strong> <span id="show-dow"></span>
</div>
<div class="span2">
<strong>Rythmus:</strong> <span id="show-rhythm"></span>
</div>
<div class="span2">
<strong>Startzeit:</strong> <span id="show-starttime"></span>
</div>
<div class="span2">
<strong>Dauer:</strong> <span id="show-length"></span>
</div>
<div class="span2"> </div>
</div>
<div class="row-fluid">
<div class="span12">
<table class="table table-striped" id="show-carts">
<thead>
<tr>
<th>Cart #</th>
<th>Titel</th>
<th>Länge</th>
<th>importiert</th>
<th># gespielt</th>
<th>zuletzt gespielt</th>
<th>Aktionen</th>
</tr>
</thead>
<tbody>
<tr>
<td>1234</td>
<td>Das ist ein Cart Titel</td>
<td>57:14.120</td>
<td>Mit, 17 Sep 2014 15:12:29</td>
<td>1</td>
<td>Fre, 19 Sep 2014 17:58:12</td>
<td>
<button class="btn btn-info btn-mini disabled"><i class="icon-arrow-up icon-white"></i></button>
<button class="btn btn-info btn-mini"><i class="icon-arrow-down icon-white"></i></button>
<button class="btn btn-danger btn-mini"><i class="icon-trash icon-white"></i> Löschen</button>
</td>
</tr>
<tr>
<td>1235</td>
<td>-</td>
<td>-</td>
<td>-</td>
<td>-</td>
<td>-</td>
<td>
<button class="btn btn-info btn-mini"><i class="icon-arrow-up icon-white"></i></button>
<button class="btn btn-info btn-mini disabled"><i class="icon-arrow-down icon-white"></i></button>
<button class="btn btn-success btn-mini"><i class="icon-upload icon-white"></i> Importieren</button>
</tr>
</tbody>
</table>
<pre id='show-info-dumper'>
</pre>
</div>
</div>
</div>
<div id="app-musicpools" class="container-fluid">
<div class="span12">
<h1>Musikpools</h1>
<p>
coming soon!
</p>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$("#loginform").submit(function(event) { login(); event.preventDefault(); });
$('#username-field').html(username);
selectApp(app);
if(token && username) {
$("#loginbox").hide();
} else {
$("#mainwindow").hide();
}
</script>
</body>
</html>