upload: add datepicker

5 files changed, 114 insertions, 30 deletions

diff --git a/www/index.html b/www/index.html
index 933c72f..cde478f 100644
--- a/www/index.html
+++ b/www/index.html
@@ -9,6 +9,7 @@
 
   <link rel="shortcut icon" href="/img/favicon.ico" />
   <link href="/javascript/bootstrap/css/bootstrap.min.css" rel="stylesheet">
+   <link href="/javascript/twitter-bootstrap/css/datepicker3.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">
@@ -75,30 +76,59 @@
           <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>
+              <ul class="nav nav-tabs">
+                <li role="presentation" class="active">
+                  <a href="#local" data-tab-name="local">
+                    <span class="glyphicon glyphicon-upload"></span>
+                    Lokale Datei
+                  </a>
+                </li>
+                <li role="presentation">
+                  <a href="#archive" data-tab-name="archive">
+                    <span class="glyphicon glyphicon-hdd"></span>
+                    Programm Archiv
+                  </a>
+                </li>
+                <li role="presentation">
+                  <a href="#external" data-tab-name="external">
+                    <span class="glyphicon glyphicon-cloud-download"></span>
+                    Externe Quelle
+                  </a>
+                </li>
+              </ul>
             </div>
             <div class="modal-body">
-              <div class="drop">
-                <form>
-                  <input id="file" name="file" type="file" accept=".flac,.wav,.ogg,.mp3,.m4a,.mp4,.opus,.mkv" />
-                  <ul></ul>
-                </form>
+              <div class="upload-tabs">
+                <div class="tab-local">
+                  <div class="drop">
+                    <form>
+                      <input id="file" name="file" type="file" accept=".flac,.wav,.ogg,.mp3,.m4a,.mp4,.opus,.mkv" />
+                      <ul></ul>
+                    </form>
+                  </div>
+                </div>
+                <div class="tab-archive">
+                  coming ~soon~.
+                  <div class="datepicker"></div>
+                  <input class="spinner" name="spinner" value="" />
+                </div>
+                <div class="tab-external">
+                  <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>
-              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>
@@ -346,7 +376,7 @@
             <tfoot>
             </tfoot>
           </table>
-          <button class="uploadButton btn btn-primary"><span class="glyphicon glyphicon-upload"></span>&nbsp;&nbsp;Importieren</button>
+          <button class="uploadButton btn btn-primary"><span class="glyphicon glyphicon-plus-sign"></span>&nbsp;&nbsp;Importieren</button>
         </div>
       </div>
 
@@ -371,7 +401,7 @@
             <tfoot>
             </tfoot>
           </table>
-          <button class="uploadButton btn btn-primary"><span class="glyphicon glyphicon-upload"></span>&nbsp;&nbsp;Importieren</button>
+          <button class="uploadButton btn btn-primary"><span class="glyphicon glyphicon-plus-sign"></span>&nbsp;&nbsp;Importieren</button>
         </div>
       </div>
 
@@ -457,6 +487,7 @@
 
   <script src="/javascript/jquery/jquery.min.js"></script>
   <script src="/javascript/bootstrap/js/bootstrap.min.js"></script>
+  <script src="/javascript/twitter-bootstrap/js/bootstrap-datepicker.js"></script>
   <script src="/js/rdxport.js"></script>
   <script src="/js/rdxport.rh.js"></script>
   <script src="/js/utils.js"></script>
diff --git a/www/js/importer.js b/www/js/importer.js
index 3776aad..d43c4b2 100644
--- a/www/js/importer.js
+++ b/www/js/importer.js
@@ -105,7 +105,7 @@ Rdxport.Importer.prototype.checkListWebSocket = function() {
   if(!this.listWebSocket || this.listWebSocket.readyState == 3) {
     this.initListWebSocket();
   }
-}
+};
 
 Rdxport.Importer.prototype.syncUploads = function(route, groupView, done) {
   var sessions = this.sessions.filter(function(session) {
@@ -132,17 +132,49 @@ Rdxport.Importer.prototype.syncUploads = function(route, groupView, done) {
 };
 
 Rdxport.Importer.prototype.resetModal = function() {
-  $('div.modal-header h4', this.$el).text("Datei auswählen...");
   $('.modal-body .drop', this.$el).css("background-image", "url('/img/dz-backdrop.png')");
   $('.modal-body .drop form input[type="file"]', this.$el).val('');
   $('.modal-body #sourceUri', this.$el).val('');
   $('#uploadModal-confirm', this.$el).attr('disabled','disabled').off('click');
   $('form input[type="file"]', this.$el).removeAttr('multiple');
   $('form ul', self.$el).empty();
+
+  // tab menu
+  $('.nav-tabs li', this.$el).removeClass('active');
+  $('.nav-tabs li:first', this.$el).addClass('active');
+  $('.upload-tabs > div', self.$el).hide();
+  $('.upload-tabs div:first', self.$el).show();
 };
 
 Rdxport.Importer.prototype.openModal = function(group, groupView, cartNumber, useMetadata, multifiles) {
   this.resetModal();
+
+  var $datepicker = $('.datepicker', this.$el).datepicker({
+    format: "dd.mm.yyyy",
+    language: "de",
+    startDate: '01/01/2014',
+    endDate: new Date()
+  });
+  var $spinner = $('.spinner', this.$el);
+
+  // tab menu
+  var self = this;
+  $('.nav-tabs li a', this.$el).off().on('click', function(event) {
+    event.preventDefault();
+    $('.nav-tabs li', self.$el).removeClass('active');
+    $(this).parent().addClass('active');
+    var tabName = $(this).data('tab-name');
+    $('.upload-tabs > div', self.$el).hide();
+    $('.upload-tabs .tab-' + tabName, self.$el).show();
+    $('#uploadModal-confirm', this.$el).attr('disabled','disabled').off('click');
+    if (tabName === 'archive') {
+      /*$('#uploadModal-confirm', this.$el).removeAttr('disabled').on('click', function() {
+        var date = $datepicker.datepicker('getDate')
+
+      });*/
+    }
+  });
+
   var $drop = $('.modal-body .drop', this.$el);
   var $form = $('form', $drop);
   var $fileInput = $('input[type="file"]', $form);
@@ -182,13 +214,11 @@ Rdxport.Importer.prototype.openModal = function(group, groupView, cartNumber, us
     }*/
 
     if (multifiles && files.length > 1) {
-      $('div.modal-header h4', self.$el).text(files.length + ' files.');
       var $formUl = $('form ul', self.$el).empty();
       $.each(files, function(index, file) {
         //$formUl.append($('<li>').text(file.name));
       });
     } else {
-      $('div.modal-header h4', self.$el).text(files[0].name);
       $('form ul', self.$el).empty();
     }
     $('div.modal-body .drop', self.$el).css("background-image", "url('/img/audio_file.png')");
diff --git a/www/js/musicgrid.js b/www/js/musicgrid.js
index a0a0c10..80b8735 100644
--- a/www/js/musicgrid.js
+++ b/www/js/musicgrid.js
@@ -102,7 +102,6 @@ Rdxport.MusicpoolModal = function(model) {
 Rdxport.MusicpoolModal.prototype.selectClock = function(dow, hour, clockName) {
   $('#musicpoolModal').modal({keyboard: true});
 
-  var $modalHeader = $('#musicpoolModal .modal-header');
   var $modalBody = $('#musicpoolModal .modal-body');
 
   $('h4', $modalHeader).text('Musikpool auswählen für Tag: ' + dow + ' Stunde: ' + hour + '.');
diff --git a/www/js/shows.js b/www/js/shows.js
index 8e1d17e..d58aa66 100644
--- a/www/js/shows.js
+++ b/www/js/shows.js
@@ -386,7 +386,7 @@ Rdxport.ShowCartView.renderUploading = function(upload) {
 };
 
 Rdxport.ShowCartView.renderEmpty = function(group, groupView, cartNumber) {
-  var $uploadButton = $('<button class="uploadButton btn btn-primary btn-xs"><span class="glyphicon glyphicon-upload"></span>&nbsp;&nbsp;Importieren</button>');
+  var $uploadButton = $('<button class="uploadButton btn btn-primary btn-xs"><span class="glyphicon glyphicon-plus-sign"></span>&nbsp;&nbsp;Importieren</button>');
 
   $uploadButton.off('click').on('click', function() {
     importer.openModal(group, groupView, cartNumber, true, false);
diff --git a/www/styles/main-style.css b/www/styles/main-style.css
index af38c79..c01e238 100644
--- a/www/styles/main-style.css
+++ b/www/styles/main-style.css
@@ -88,20 +88,44 @@ body {
     font-size: 1.8em;
 }
 
+#uploadModal div.modal-header {
+    border-bottom: none;
+    padding: 15px 0;
+}
+
+#uploadModal div.modal-header .nav-tabs > li:first-child {
+    margin-left: 10px;
+}
+
+#uploadModal div.modal-header .close {
+    margin-right: 15px;
+}
+
 #uploadModal div.modal-body {
     text-align: center;
 }
 
+#uploadModal div.modal-body .upload-tabs .tab-archive,
+#uploadModal div.modal-body .upload-tabs .tab-external {
+    display: none;
+}
+
 #uploadModal div.modal-body .drop {
     padding-left: 0;
     padding-right: 0;
-    width: 100%;
+    margin: 0 auto;
+    width: 250px;
     height: 250px;
+    cursor: pointer;
     background-image: url('../img/dz-backdrop.png');
     background-repeat: no-repeat;
     background-position: center center;
 }
 
+#uploadModal div.modal-body .datepicker {
+    margin: 0 auto;
+}
+
 #uploadModal div.modal-body .drop form input {
     display: none;
 }