diff options
Diffstat (limited to 'www')
| -rw-r--r-- | www/index.html | 77 | ||||
| -rw-r--r-- | www/js/importer.js | 38 | ||||
| -rw-r--r-- | www/js/musicgrid.js | 1 | ||||
| -rw-r--r-- | www/js/shows.js | 2 | ||||
| -rw-r--r-- | www/styles/main-style.css | 26 |
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">×</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> Importieren</button> + <button class="uploadButton btn btn-primary"><span class="glyphicon glyphicon-plus-sign"></span> Importieren</button> </div> </div> @@ -371,7 +401,7 @@ <tfoot> </tfoot> </table> - <button class="uploadButton btn btn-primary"><span class="glyphicon glyphicon-upload"></span> Importieren</button> + <button class="uploadButton btn btn-primary"><span class="glyphicon glyphicon-plus-sign"></span> 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> Importieren</button>'); + var $uploadButton = $('<button class="uploadButton btn btn-primary btn-xs"><span class="glyphicon glyphicon-plus-sign"></span> 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; } |