replace apps with router

5 files changed, 117 insertions, 182 deletions

diff --git a/www/index.html b/www/index.html
index 9bc89ec..ec7ba8b 100644
--- a/www/index.html
+++ b/www/index.html
@@ -53,10 +53,10 @@
           <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/" onclick="event.preventDefault(); apps_select('shows')">Sendungen</a></li>
-                <li id="nav-btn-jingles"><a href="/jingles/" onclick="event.preventDefault(); apps_select('jingles')">Jingles</a></li>
-                <li id="nav-btn-musicpools"><a href="/musicpools/" onclick="event.preventDefault(); apps_select('musicpools')">Musikpools</a></li>
-                <li id="nav-btn-musicgrid"><a href="/musicgrid/" onclick="event.preventDefault(); apps_select('musicgrid')">Musikgrid</a></li>
+                <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>
 
@@ -114,7 +114,7 @@
         </div>
       </div>
 
-      <div id="app-shows" class="container-fluid">
+      <div id="app-shows" class="container-fluid app-tab">
         <div class="alertbox"></div>
         <div class="row">
           <div class="col-md-10">
@@ -180,7 +180,7 @@
         </div>
       </div>
 
-      <div id="app-jingles" class="container-fluid">
+      <div id="app-jingles" class="container-fluid app-tab">
         <div class="alertbox"></div>
 
         <div class="groups">
@@ -189,7 +189,7 @@
 
       </div>
 
-      <div id="app-musicpools" class="container-fluid">
+      <div id="app-musicpools" class="container-fluid app-tab">
         <div class="alertbox"></div>
         <div class="row">
           <form class="well form-inline">
@@ -206,7 +206,7 @@
         </div>
       </div>
 
-      <div id="app-musicgrid" class="container-fluid">
+      <div id="app-musicgrid" class="container-fluid app-tab">
         <div class="alertbox"></div>
         <h1>Musikgrid</h1>
         <table class="table table-striped">
@@ -425,7 +425,6 @@
   <script src="/js/clock.js"></script>
   <script src="/js/importer.js"></script>
   <script src="/js/auth.js"></script>
-  <script src="/js/apps.js"></script>
   <script src="/js/shows.js"></script>
   <script src="/js/jingles.js"></script>
   <script src="/js/musicpools.js"></script>
diff --git a/www/js/apps.js b/www/js/apps.js
deleted file mode 100644
index dd5b337..0000000
--- a/www/js/apps.js
+++ /dev/null
@@ -1,154 +0,0 @@
-/*
- *  rhwebimport
- *
- *  Copyright (C) 2014-2016 Christian Pointner <equinox@helsinki.at>
- *  Copyright (C) 2015-2016 Peter Grassberger <petertheone@gmail.com>
- *
- *  This file is part of rhwebimport.
- *
- *  rhwebimport is free software: you can redistribute it and/or modify
- *  it under the terms of the GNU Affero General Public License as published by
- *  the Free Software Foundation, either version 3 of the License, or
- *  any later version.
- *
- *  rhwebimport is distributed in the hope that it will be useful,
- *  but WITHOUT ANY WARRANTY; without even the implied warranty of
- *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
- *  GNU Affero General Public License for more details.
- *
- *  You should have received a copy of the GNU Affero General Public License
- *  along with rhwebimport. If not, see <http://www.gnu.org/licenses/>.
- */
-
-'use strict';
-
-var Rdxport = Rdxport || {};
-
-var apps_current = null;
-var rdxport = null;
-var importer = null;
-
-function apps_select(app) {
-  if (importer && importer.isUploading()) {
-    alert('Achtung: Es laufen noch imports.');
-    return;
-  }
-
-  $('.container').removeClass('fullWidth');
-
-  shows_cleanup();
-  jingles_cleanup();
-  musicpools_cleanup();
-  musicgrid_cleanup();
-
-  switch(app) {
-    case "musicgrid":
-      $('#app-shows').hide();
-      $('#nav-btn-shows').removeClass('active');
-      $('#app-jingles').hide();
-      $('#nav-btn-jingles').removeClass('active');
-      $('#app-musicpools').hide();
-      $('#nav-btn-musicpools').removeClass('active');
-
-      $('.container').addClass('fullWidth');
-      $('#app-musicgrid').show();
-      $('#nav-btn-musicgrid').addClass('active');
-
-      apps_current = app;
-      musicgrid_init();
-      break;
-    case "musicpools":
-      $('#app-shows').hide();
-      $('#nav-btn-shows').removeClass('active');
-      $('#app-jingles').hide();
-      $('#nav-btn-jingles').removeClass('active');
-      $('#app-musicgrid').hide();
-      $('#nav-btn-musicgrid').removeClass('active');
-
-      $('#app-musicpools').show();
-      $('#nav-btn-musicpools').addClass('active');
-
-      apps_current = app;
-      musicpools_init();
-      break;
-    case "jingles":
-      $('#app-shows').hide();
-      $('#nav-btn-shows').removeClass('active');
-      $('#app-musicpools').hide();
-      $('#nav-btn-musicpools').removeClass('active');
-      $('#app-musicgrid').hide();
-      $('#nav-btn-musicgrid').removeClass('active');
-
-      $('#app-jingles').show();
-      $('#nav-btn-jingles').addClass('active');
-
-      apps_current = app;
-      jingles_init();
-      break;
-    default:
-      $('#app-jingles').hide();
-      $('#nav-btn-jingles').removeClass('active');
-      $('#app-musicpools').hide();
-      $('#nav-btn-musicpools').removeClass('active');
-      $('#app-musicgrid').hide();
-      $('#nav-btn-musicgrid').removeClass('active');
-
-      $('#app-shows').show();
-      $('#nav-btn-shows').addClass('active');
-
-      apps_current = app = 'shows';
-      shows_init();
-  }
-  if (locationHrefValue() !== app) {
-    history.pushState(null, null, '/' + app + '/');
-  }
-}
-
-function apps_init() {
-  importer = new Rdxport.Importer();
-
-  apps_current = locationHrefValue();
-
-  if(auth_token && auth_username) {
-    // todo: do this at a central place
-    rdxport = new Rdxport.Rdxport(auth_username, auth_token, '/rd-bin/rdxport.cgi');
-    rdxport.setListDropboxesEndpoint('/rh-bin/listdropboxes.cgi');
-    rdxport.setMusicgridEndpoint('/rh-bin/musicgrid.cgi');
-
-    apps_select(apps_current);
-  }
-
-  $(window).on('popstate', function(event) {
-    if(auth_token && auth_username) {
-      // todo: do this at a central place
-      rdxport = new Rdxport.Rdxport(auth_username, auth_token, '/rd-bin/rdxport.cgi');
-      rdxport.setListDropboxesEndpoint('/rh-bin/listdropboxes.cgi');
-      rdxport.setMusicgridEndpoint('/rh-bin/musicgrid.cgi');
-
-      apps_select(locationHrefValue());
-    }
-  });
-
-  $(document).ajaxError(function(event, jqXHR, settings, thrownError) {
-    //todo: add errors
-  });
-
-  window.onbeforeunload = function(e) {
-    if (importer && importer.isUploading()) {
-      return 'Achtung: Es laufen noch imports.';
-    }
-  };
-}
-
-function apps_cleanup() {
-  shows_cleanup();
-  jingles_cleanup();
-  musicpools_cleanup();
-  musicgrid_cleanup();
-
-  $(window).off('popstate');
-  
-  importer = null;
-  rdxport = null;
-  apps_current = null;
-}
diff --git a/www/js/auth.js b/www/js/auth.js
index c533219..3931022 100644
--- a/www/js/auth.js
+++ b/www/js/auth.js
@@ -25,19 +25,16 @@
 var Rdxport = Rdxport || {};
 
 Rdxport.Auth = function() {
-  console.log('auth');
   this.username = sessionStorage.getItem('auth_username');
   this.fullname = sessionStorage.getItem('auth_fullname');
   this.token = sessionStorage.getItem('auth_token');
 };
 
 Rdxport.Auth.prototype.isLoggedIn = function() {
-  console.log('isLoggedIn');
   return this.username && this.fullname && this.token;
 };
 
 Rdxport.Auth.prototype.set = function(username, fullname, token) {
-  console.log('set');
   this.username = username;
   this.fullname = fullname;
   this.token = token;
@@ -48,7 +45,6 @@ Rdxport.Auth.prototype.set = function(username, fullname, token) {
 };
 
 Rdxport.Auth.prototype.cleanup = function() {
-  console.log('cleanup');
   sessionStorage.removeItem('auth_username');
   sessionStorage.removeItem('auth_fullname');
   sessionStorage.removeItem('auth_token');
@@ -59,7 +55,6 @@ Rdxport.Auth.prototype.cleanup = function() {
 };
 
 Rdxport.AuthView = function(model) {
-  console.log('AuthView');
   this.model = model;
 };
 
@@ -69,7 +64,7 @@ Rdxport.AuthView.prototype.renderLoggedIn = function() {
   $('#username-field').html(this.model.fullname + ' (' + this.model.username + ')');
 
   $('button.logout').off().on('click', function() {
-    router.logout();
+    router.route('logout');
   });
 };
 
diff --git a/www/js/importer.js b/www/js/importer.js
index 4ea55b3..08a49fb 100644
--- a/www/js/importer.js
+++ b/www/js/importer.js
@@ -258,8 +258,8 @@ Rdxport.Upload.prototype.addCut = function(file) {
       file.cutNumber = cutNumberLeading;
 
       formData.append('COMMAND', 2);
-      formData.append('LOGIN_NAME', auth_username);
-      formData.append('PASSWORD', auth_token);
+      formData.append('LOGIN_NAME', auth.username);
+      formData.append('PASSWORD', auth.token);
       formData.append('CART_NUMBER', self.cart.number);
       formData.append('CUT_NUMBER', cutNumber);
       formData.append('CHANNELS', 2);
diff --git a/www/js/router.js b/www/js/router.js
index ce84950..e3ab4e5 100644
--- a/www/js/router.js
+++ b/www/js/router.js
@@ -24,6 +24,8 @@
 
 var auth = null;
 var router = null;
+var importer = null;
+var rdxport = null;
 
 $(document).ready(function() {
   auth = new Rdxport.Auth();
@@ -32,43 +34,136 @@ $(document).ready(function() {
 });
 
 Rdxport.Router = function(auth) {
-  console.log('Router');
   this.auth = auth;
   this.authView = new Rdxport.AuthView(this.auth);
 };
 
 Rdxport.Router.prototype.route = function(page, subpage) {
-  console.log('route');
   if (!this.auth.isLoggedIn()) {
     this.login();
     return;
   }
+  if (importer && importer.isUploading()) {
+    alert('Achtung: Es laufen noch imports.');
+    return;
+  }
+
+  if (!importer) {
+    importer = new Rdxport.Importer();
+    window.onbeforeunload = function(event) {
+      if (importer.isUploading()) {
+        return 'Achtung: Es laufen noch imports.';
+      }
+    };
+  }
+  if (!rdxport) {
+    rdxport = new Rdxport.Rdxport(this.auth.username, this.auth.token, '/rd-bin/rdxport.cgi');
+    rdxport.setListDropboxesEndpoint('/rh-bin/listdropboxes.cgi');
+    rdxport.setMusicgridEndpoint('/rh-bin/musicgrid.cgi');
+  }
+
+  /*$(document).ajaxError(function(event, jqXHR, settings, thrownError) {
+    //todo: add errors
+  });*/
+
+  if (!page && !subpage) {
+    page = locationHrefValue();
+    subpage = '';
+  }
+
+  shows_cleanup();
+  jingles_cleanup();
+  musicpools_cleanup();
+  musicgrid_cleanup();
 
   this.authView.renderLoggedIn();
+  $('.navbar-nav li').removeClass('active');
+  $('.app-tab').hide();
+  $('.container').removeClass('fullWidth');
 
-  // todo: if previously login form
-  //$('#username-field').html(auth_fullname + ' (' + auth_username + ')');
-  //$('#loginbox').slideUp();
-  //$('#mainwindow').fadeIn();
+  var self = this;
+  $('.navbar-nav li a').off().on('click', function(event) {
+    event.preventDefault();
+    var href = $(this).attr('href').split('/');
+    self.route(href[1], href[2]);
+  });
+  $(window).on('popstate', function(event) {
+    self.route(locationHrefValue(), '');
+  });
 
-  // todo: route..
+  switch (page) {
+    default :
+      page = 'shows';
+      // fallthrough
+    case 'shows':
+      this.shows(subpage);
+      break;
+    case 'jingles':
+      this.jingles();
+      break;
+    case 'musicpools':
+      this.musicpools(subpage);
+      break;
+    case 'musicgrid':
+      this.musicgrid();
+      break;
+    case 'logout':
+      this.logout();
+      break;
+  }
+
+  if (locationHrefValue() !== page && page !== 'logout') {
+    var url = '/' + page + '/';
+    if (subpage) {
+      url +=+ subpage + '/';
+    }
+    history.pushState(null, null, url);
+  }
 };
 
 Rdxport.Router.prototype.login = function() {
-  console.log('login');
   this.authView.renderLoginForm();
 };
 
 Rdxport.Router.prototype.logout = function() {
-  console.log('logout');
   if (importer && importer.isUploading()) {
     alert('Achtung: Es laufen noch imports.');
     return;
   }
 
+  shows_cleanup();
+  jingles_cleanup();
+  musicpools_cleanup();
+  musicgrid_cleanup();
   this.auth.cleanup();
-  // todo: more cleanup?
-  //apps_cleanup();
+
+  importer = null;
+  rdxport = null;
 
   this.login();
 };
+
+Rdxport.Router.prototype.shows = function(subpage) {
+  $('#app-shows').show();
+  $('#nav-btn-shows').addClass('active');
+  shows_init();
+};
+
+Rdxport.Router.prototype.jingles = function() {
+  $('#app-jingles').show();
+  $('#nav-btn-jingles').addClass('active');
+  jingles_init();
+};
+
+Rdxport.Router.prototype.musicpools = function(subpage) {
+  $('#app-musicpools').show();
+  $('#nav-btn-musicpools').addClass('active');
+  musicpools_init();
+};
+
+Rdxport.Router.prototype.musicgrid = function() {
+  $('.container').addClass('fullWidth');
+  $('#app-musicgrid').show();
+  $('#nav-btn-musicgrid').addClass('active');
+  musicgrid_init();
+};