<!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>'); } 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'; } 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); } function login() { $.ajax("/authtoken.json", { cache: false, username: $("#username").val(), password: $("#password").val(), dataType: "json", error: authError, success: authSuccess }); $("#password").val(''); } 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="select-dropbox"> <option>Democracy Now!</option> </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">Democracy Now!</h2> </div> </div> <div class="row-fluid" id="show-details"> <div class="span2"> </div> <div class="span2"> <strong>Tag:</strong> <span id="show-day">Dienstag</span> </div> <div class="span2"> <strong>Rythmus:</strong> <span id="show-rhythm">wöchentlich</span> </div> <div class="span2"> <strong>Startzeit:</strong> <span id="show-starttime">00:00</span> </div> <div class="span2"> <strong>Dauer:</strong> <span id="show-length">30 Minuten</span> </div> <div class="span2"> </div> </div> <div class="row-fluid"> <div class="span12"> <table class="table table-striped"> <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> </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>