<!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@helsinki.at>, Peter Grassberger <petertheone@gmail.com>">

  <link rel="shortcut icon" href="/img/favicon.ico" />
  <link href="/javascript/bootstrap/css/bootstrap.min.css" rel="stylesheet">
  <link href="/styles/main-style.css" rel="stylesheet">
  <link href="/styles/auth.css" rel="stylesheet">
  <link href="/styles/shows.css" rel="stylesheet">
  <link href="/styles/jingles.css" rel="stylesheet">
  <link href="/styles/musicpools.css" rel="stylesheet">
  <link href="/styles/musicgrid.css" rel="stylesheet">
 </head>
 <body>

  <div class="container">

    <div id="loginbox">

      <form id="loginform" class="form-auth" role="form">
        <img class="visible-xs-block" src="/img/helsinki-small.png" alt="radio helsinki logo" />
        <div class="loginspacer hidden-xs">&nbsp;</div>
        <div class="loginspacer hidden-xs hidden-sm">&nbsp;</div>
        <img class="hidden-xs" src="/img/helsinki.png" alt="radio helsinki logo" width="176" height="176" />
        <h1 class="form-auth-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 class="alertbox"></div>
        <button class="btn btn-primary btn-lg" type="submit"><span class="glyphicon glyphicon-log-in" aria-hidden="true"></span>&nbsp;&nbsp;Anmelden</button>
      </form>

    </div>

    <div id="mainwindow">

      <nav class="navbar navbar-inverse navbar-fixed-top">
        <div class="container-fluid">
          <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse-1" aria-expanded="false">
              <span class="sr-only">Toggle navigation</span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
            </button>
            <span class="navbar-brand">Radio Helsinki - Import</span>
          </div>

          <div class="collapse navbar-collapse" id="navbar-collapse-1">
            <div class="navbar-left">
              <ul class="nav navbar-nav">
                <li id="nav-btn-shows"><a href="/shows/">Sendungen</a></li>
                <li id="nav-btn-jingles"><a href="/jingles/">Jingles</a></li>
                <li id="nav-btn-musicpools"><a href="/musicpools/">Musikpools</a></li>
                <li id="nav-btn-musicgrid"><a href="/musicgrid/">Musikgrid</a></li>
              </ul>
            </div>

            <div class="navbar-right">
              <p class="navbar-text">angemeldet als <strong id="username-field">UNKNOWN</strong></p>
              <button type="button" class="btn btn-danger navbar-btn logout">
                <span class="glyphicon glyphicon-log-out" aria-hidden="true"></span>&nbsp;&nbsp;Abmelden
              </button>
            </div>
          </div>
        </div>
      </nav>

      <div class="modal fade" id="uploadModal" tabindex="-1" role="dialog">
        <div class="modal-dialog">
          <div class="modal-content">
            <div class="modal-header">
              <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
              <h4 class="modal-title">Datei auswählen...</h4>
            </div>
            <div class="modal-body">
              <div class="drop">
                <form>
                  <input id="file" name="file" type="file" accept=".flac,.wav,.ogg,.mp3" />
                </form>
              </div>
              oder<br />
              <form>
                <label for="sourceUri"></label>
                <input id="sourceUri" name="sourceUri" size="50" list="sampleSources"
                    placeholder="https://, ftps://, archiv://, ..." />
                <datalist id="sampleSources">
                  <option value="http://">
                  <option value="https://">
                  <option value="ftp://">
                  <option value="ftps://">
                  <option value="archiv://YYYY/MM/DD/hh/00">
                  <!--<option value="public://<username>/">-->
                  <!--<option value="cba://<cba-id>">-->
                </datalist>
              </form>
            </div>
            <div class="modal-footer">
              <button class="btn btn-default" id="uploadModal-cancel" data-dismiss="modal">Abbrechen</button>
              <button class="btn btn-primary" id="uploadModal-confirm" disabled="disabled">Importieren</button>
            </div>
          </div>
        </div>
      </div>

      <div class="modal fade" id="musicpoolModal" tabindex="-1" role="dialog">
        <div class="modal-dialog">
          <div class="modal-content">
            <div class="modal-header">
              <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
              <h4 class="modal-title">Musikpool auswählen...</h4>
            </div>
            <div class="modal-body">
              <table class="table table-striped">
                <thead>
                  <tr>
                    <th>Clock</th>
                    <th>Titel</th>
                    <th>Ausgewählt</th>
                  </tr>
                </thead>
                <tbody>
                </tbody>
              </table>
            </div>
            <div class="modal-footer">
              <button class="btn btn-default" data-dismiss="modal">Abbrechen</button>
            </div>
         </div>
        </div>
      </div>

      <div id="app-shows" class="container-fluid app-tab">
        <div class="alertbox"></div>
        <div class="row">
          <div class="col-md-10">
            <div class="row">
              <div class="col-md-12" id="show-header-spacer">
              </div>
            </div>
            <div class="row">
              <div class="col-md-3">
                <div class="dropdown">
                  <button type="button" class="btn btn-lg btn-primary" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    Sendung auswählen <span class="caret"></span>
                  </button>
                  <ul class="dropdown-menu" id="show-selector">
                  </ul>
                </div>
              </div>
              <div class="col-md-9">
                <h2 id="show-title"></h2>
              </div>
            </div>
          </div>
          <div class="col-md-2">
            <div id="clock">
              <span class="current-week"></span>
              <span class="clock-date"></span>
              <span class="clock-time"></span>
            </div>
          </div>
        </div>
        <div class="row" id="show-details">
          <div class="col-md-2">&nbsp;</div>
          <div class="col-md-2">
            <strong>Tag:</strong> <span id="show-dow"></span>
          </div>
          <div class="col-md-2">
            <strong>Rythmus:</strong> <span id="show-rhythm-w1" class="label label-default">1</span>
                                      <span id="show-rhythm-w2" class="label label-default">2</span>
                                      <span id="show-rhythm-w3" class="label label-default">3</span>
                                      <span id="show-rhythm-w4" class="label label-default">4</span>
          </div>
          <div class="col-md-2">
            <strong>Startzeit:</strong> <span id="show-starttime"></span>
          </div>
          <div class="col-md-2">
            <strong>Dauer:</strong> <span id="show-length"></span>
          </div>
          <div class="col-md-2">&nbsp;</div>
        </div>
        <div class="row">
          <div class="col-md-12">
            <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>
              </tbody>
            </table>
          </div>
        </div>
      </div>

      <div id="app-jingles" class="container-fluid app-tab">
        <div class="alertbox"></div>

        <div class="groups">

        </div>

      </div>

      <div id="app-musicpools" class="container-fluid app-tab">
        <div class="alertbox"></div>
        <div class="row">
          <div class="col-md-12" id="musicpool-header-spacer">
          </div>
        </div>
        <div class="row">
          <div class="col-md-3">
            <div class="dropdown">
              <button type="button" class="btn btn-lg btn-primary" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
              Musikpool auswählen <span class="caret"></span>
              </button>
              <ul class="dropdown-menu" id="musicpool-selector">
              </ul>
            </div>
          </div>
          <div class="col-md-9">
            <h2 id="musicpool-title"></h2>
          </div>
        </div>
        <div class="musicpoolContainer">

        </div>
      </div>

      <div id="app-musicgrid" class="container-fluid app-tab">
        <div class="alertbox"></div>
        <h2 id="musicgrid-title">Musikgrid</h2>
        <table class="table table-striped">
          <thead>
          <tr>
            <th></th>
            <th>00:00</th><th>01:00</th><th>02:00</th><th>03:00</th>
            <th>04:00</th><th>05:00</th><th>06:00</th><th>07:00</th>
            <th>08:00</th><th>09:00</th><th>10:00</th><th>11:00</th>
            <th>12:00</th><th>13:00</th><th>14:00</th><th>15:00</th>
            <th>16:00</th><th>17:00</th><th>18:00</th><th>19:00</th>
            <th>20:00</th><th>21:00</th><th>22:00</th><th>23:00</th>
          </tr>
          </thead>
          <tbody>
          <tr data-dow="1">
            <th>Montag</th>
            <td data-hour="0"></td><td data-hour="1"></td><td data-hour="2"></td><td data-hour="3"></td>
            <td data-hour="4"></td><td data-hour="5"></td><td data-hour="6"></td><td data-hour="7"></td>
            <td data-hour="8"></td><td data-hour="9"></td><td data-hour="10"></td><td data-hour="11"></td>
            <td data-hour="12"></td><td data-hour="13"></td><td data-hour="14"></td><td data-hour="15"></td>
            <td data-hour="16"></td><td data-hour="17"></td><td data-hour="18"></td><td data-hour="19"></td>
            <td data-hour="20"></td><td data-hour="21"></td><td data-hour="22"></td><td data-hour="23"></td>
          </tr>
          <tr data-dow="2">
            <th>Dienstag</th>
            <td data-hour="0"></td><td data-hour="1"></td><td data-hour="2"></td><td data-hour="3"></td>
            <td data-hour="4"></td><td data-hour="5"></td><td data-hour="6"></td><td data-hour="7"></td>
            <td data-hour="8"></td><td data-hour="9"></td><td data-hour="10"></td><td data-hour="11"></td>
            <td data-hour="12"></td><td data-hour="13"></td><td data-hour="14"></td><td data-hour="15"></td>
            <td data-hour="16"></td><td data-hour="17"></td><td data-hour="18"></td><td data-hour="19"></td>
            <td data-hour="20"></td><td data-hour="21"></td><td data-hour="22"></td><td data-hour="23"></td>
          </tr>
          <tr data-dow="3">
            <th>Mittwoch</th>
            <td data-hour="0"></td><td data-hour="1"></td><td data-hour="2"></td><td data-hour="3"></td>
            <td data-hour="4"></td><td data-hour="5"></td><td data-hour="6"></td><td data-hour="7"></td>
            <td data-hour="8"></td><td data-hour="9"></td><td data-hour="10"></td><td data-hour="11"></td>
            <td data-hour="12"></td><td data-hour="13"></td><td data-hour="14"></td><td data-hour="15"></td>
            <td data-hour="16"></td><td data-hour="17"></td><td data-hour="18"></td><td data-hour="19"></td>
            <td data-hour="20"></td><td data-hour="21"></td><td data-hour="22"></td><td data-hour="23"></td>
          </tr>
          <tr data-dow="4">
            <th>Donnerstag</th>
            <td data-hour="0"></td><td data-hour="1"></td><td data-hour="2"></td><td data-hour="3"></td>
            <td data-hour="4"></td><td data-hour="5"></td><td data-hour="6"></td><td data-hour="7"></td>
            <td data-hour="8"></td><td data-hour="9"></td><td data-hour="10"></td><td data-hour="11"></td>
            <td data-hour="12"></td><td data-hour="13"></td><td data-hour="14"></td><td data-hour="15"></td>
            <td data-hour="16"></td><td data-hour="17"></td><td data-hour="18"></td><td data-hour="19"></td>
            <td data-hour="20"></td><td data-hour="21"></td><td data-hour="22"></td><td data-hour="23"></td>
          </tr>
          <tr data-dow="5">
            <th>Freitag</th>
            <td data-hour="0"></td><td data-hour="1"></td><td data-hour="2"></td><td data-hour="3"></td>
            <td data-hour="4"></td><td data-hour="5"></td><td data-hour="6"></td><td data-hour="7"></td>
            <td data-hour="8"></td><td data-hour="9"></td><td data-hour="10"></td><td data-hour="11"></td>
            <td data-hour="12"></td><td data-hour="13"></td><td data-hour="14"></td><td data-hour="15"></td>
            <td data-hour="16"></td><td data-hour="17"></td><td data-hour="18"></td><td data-hour="19"></td>
            <td data-hour="20"></td><td data-hour="21"></td><td data-hour="22"></td><td data-hour="23"></td>
          </tr>
          <tr data-dow="6">
            <th>Samstag</th>
            <td data-hour="0"></td><td data-hour="1"></td><td data-hour="2"></td><td data-hour="3"></td>
            <td data-hour="4"></td><td data-hour="5"></td><td data-hour="6"></td><td data-hour="7"></td>
            <td data-hour="8"></td><td data-hour="9"></td><td data-hour="10"></td><td data-hour="11"></td>
            <td data-hour="12"></td><td data-hour="13"></td><td data-hour="14"></td><td data-hour="15"></td>
            <td data-hour="16"></td><td data-hour="17"></td><td data-hour="18"></td><td data-hour="19"></td>
            <td data-hour="20"></td><td data-hour="21"></td><td data-hour="22"></td><td data-hour="23"></td>
          </tr>
          <tr data-dow="0">
            <th>Sonntag</th>
            <td data-hour="0"></td><td data-hour="1"></td><td data-hour="2"></td><td data-hour="3"></td>
            <td data-hour="4"></td><td data-hour="5"></td><td data-hour="6"></td><td data-hour="7"></td>
            <td data-hour="8"></td><td data-hour="9"></td><td data-hour="10"></td><td data-hour="11"></td>
            <td data-hour="12"></td><td data-hour="13"></td><td data-hour="14"></td><td data-hour="15"></td>
            <td data-hour="16"></td><td data-hour="17"></td><td data-hour="18"></td><td data-hour="19"></td>
            <td data-hour="20"></td><td data-hour="21"></td><td data-hour="22"></td><td data-hour="23"></td>
          </tr>
          </tbody>
        </table>
      </div>

    </div>

    <div id="hiddenTemplates" class="hidden">

      <div class="row group jingleGroupTemplate">
        <div class="col-md-12">
          <h2 class="jingle-title"></h2>
          <table class="table table-striped">
            <thead>
            <tr>
              <th></th>
              <th>Cut #</th>
              <th>Titel</th>
              <th>Länge</th>
              <th>importiert</th>
              <th class="text-center">Aktionen</th>
            </tr>
            </thead>
            <tbody>
            </tbody>
            <tfoot>
            </tfoot>
          </table>
          <button class="uploadButton btn btn-primary"><span class="glyphicon glyphicon-upload"></span>&nbsp;&nbsp;Importieren</button>
        </div>
      </div>

      <div class="row musicpool musicpoolTemplate">
        <div class="col-md-12">
          <table class="table table-striped">
            <thead>
            <tr>
              <th>Cart #</th>
              <th>Titel</th>
              <th>Interpret</th>
              <th>Album</th>
              <th>Länge</th>
              <th>importiert</th>
              <th># gespielt</th>
              <th>zuletzt gespielt</th>
              <th class="text-center">Aktionen</th>
            </tr>
            </thead>
            <tbody>
            </tbody>
            <tfoot>
            </tfoot>
          </table>
          <button class="uploadButton btn btn-primary"><span class="glyphicon glyphicon-upload"></span>&nbsp;&nbsp;Importieren</button>
        </div>
      </div>

      <table>
        <tr class="progressBar progressBarTemplate shows">
          <td class="cart-number">
            ...
          </td>
          <td class="file-name">
            ...
          </td>
          <td class="file-bytes">
            beginne...
          </td>
          <td colspan="3">
            <div class="progress"><div class="progress-bar" style="width: 0%;"></div></div>
          </td>
          <td class="text-center">
            <button class="btn btn-danger btn-xs"><span class="glyphicon glyphicon-remove"></span>&nbsp;&nbsp;Abbrechen</button>
          </td>
        </tr>
      </table>

      <table>
        <tr class="progressBar progressBarTemplate jingles">
          <td><span class="label label-default"><span class="glyphicon glyphicon-transfer"></span></span></td>
          <td class="cut-number">
            ...
          </td>
          <td class="file-name">
            ...
          </td>
          <td class="file-bytes">
            beginne...
          </td>
          <td colspan="1">
            <div class="progress"><div class="progress-bar" style="width: 0%;"></div></div>
          </td>
          <td class="text-center">
            <button class="btn btn-danger btn-xs"><span class="glyphicon glyphicon-remove"></span>&nbsp;&nbsp;Abbrechen</button>
          </td>
        </tr>
      </table>

      <table>
        <tr class="progressBar progressBarTemplate musicpools">
          <td class="cart-number">
            ...
          </td>
          <td class="file-name">
            ...
          </td>
          <td class="file-bytes">
            beginne...
          </td>
          <td colspan="5">
            <div class="progress"><div class="progress-bar" style="width: 0%;"></div></div>
          </td>
          <td class="text-center">
            <button class="btn btn-danger btn-xs"><span class="glyphicon glyphicon-remove"></span>&nbsp;&nbsp;Abbrechen</button>
          </td>
        </tr>
      </table>

      <div class="sk-fading-circle spinnerTemplate">
        <div class="sk-circle1 sk-circle"></div>
        <div class="sk-circle2 sk-circle"></div>
        <div class="sk-circle3 sk-circle"></div>
        <div class="sk-circle4 sk-circle"></div>
        <div class="sk-circle5 sk-circle"></div>
        <div class="sk-circle6 sk-circle"></div>
        <div class="sk-circle7 sk-circle"></div>
        <div class="sk-circle8 sk-circle"></div>
        <div class="sk-circle9 sk-circle"></div>
        <div class="sk-circle10 sk-circle"></div>
        <div class="sk-circle11 sk-circle"></div>
        <div class="sk-circle12 sk-circle"></div>
      </div>

    </div>

  </div>

  <script src="/javascript/jquery/jquery.min.js"></script>
  <script src="/javascript/bootstrap/js/bootstrap.min.js"></script>
  <script src="/js/rdxport.js"></script>
  <script src="/js/rdxport.rh.js"></script>
  <script src="/js/utils.js"></script>
  <script src="/js/clock.js"></script>
  <script src="/js/importer.js"></script>
  <script src="/js/auth.js"></script>
  <script src="/js/shows.js"></script>
  <script src="/js/jingles.js"></script>
  <script src="/js/musicpools.js"></script>
  <script src="/js/musicgrid.js"></script>
  <script src="/js/router.js"></script>

 </body>
</html>