From 94b5e247299f03cfde0de1e5c4f224214441af0a Mon Sep 17 00:00:00 2001 From: Nikolai R Kristiansen Date: Sun, 23 Nov 2014 22:51:41 +0100 Subject: [PATCH] Adds loading indicator, mobile select box --- mailadmin/static/app/scripts/main.js | 138 ++++++++++-------- mailadmin/static/app/styles/_animations.scss | 8 + mailadmin/static/app/styles/main.scss | 9 ++ .../static/app/templates/orgunits_select.html | 6 + mailadmin/static/dist/scripts/main.js | 138 ++++++++++-------- mailadmin/static/dist/scripts/templates.js | 41 ++++++ mailadmin/static/dist/styles/main.css | 36 +++++ mailadmin/templates/home.html | 3 +- 8 files changed, 258 insertions(+), 121 deletions(-) create mode 100644 mailadmin/static/app/styles/_animations.scss create mode 100644 mailadmin/static/app/templates/orgunits_select.html diff --git a/mailadmin/static/app/scripts/main.js b/mailadmin/static/app/scripts/main.js index 4cffa2a..ec79eb5 100644 --- a/mailadmin/static/app/scripts/main.js +++ b/mailadmin/static/app/scripts/main.js @@ -50,12 +50,11 @@ /* Home view (lists) */ if( $('body.home').length ) { $.getJSON(api_urls.ou_list, function(data) { - var ou_html = nunjucks.render('orgunits.html', { - orgunits: data, - api_urls: api_urls - }); - + /* orgunit list */ + var ou_html = nunjucks.render('orgunits.html', { orgunits: data }); $(".orgunit-list").append(ou_html); + var ous_html = nunjucks.render('orgunits_select.html', { orgunits: data }); + $(".orgunit-select-container").html(ous_html); /* New list */ var new_list_html = nunjucks.render('new_list.html', { @@ -135,7 +134,7 @@ }); - /* Add list filter listeners */ + /* Add list filter by orgunit */ $(".orgunit-list a").on('click', function(e) { var prefix = $(this).attr('data-prefix'); var querystring = $(this).attr('href'); @@ -144,6 +143,29 @@ /* Toggle selection */ $(".orgunit-list li").removeClass('active'); $(this).parent().toggleClass('active'); + $('.orgunits-select').val(prefix); + + /* Update query string */ + window.history.pushState(null, null, querystring); + + /* Filter lists */ + var re_prefix = new RegExp('^'+prefix); + $(".fwdlist").each(function(el) { + var cur_name = $(this).attr('data-list-name'); + if(re_prefix.test(cur_name)) { + $(this).removeClass('hidden'); + } else { + $(this).addClass('hidden'); + } + }); + }); + $(".orgunits-select").on('change', function(e) { + var prefix = $(this).val(); + var querystring = '/lists/?q='+prefix; + + /* Toggle selection */ + $(".orgunit-list li").removeClass('active'); + $(".orgunit-list li a[data-prefix="+prefix+"]").parent().toggleClass('active'); /* Update query string */ window.history.pushState(null, null, querystring); @@ -161,10 +183,14 @@ }); }); - /* Load lists */ + /* Load forwards from API and write to container */ $.getJSON(api_urls.fwd_list, function(data) { if( !data.cpanelresult ) { - $(".forwards-container").html("No results."); + $(".forwards-container").html(renderAlert("No results.", 'info')); + return; + } + if( 'error' in data.cpanelresult ) { + $(".forwards-container").html(renderAlert("Klarte ikke hente epostlister fra APIet: "+data.cpanelresult.error, 'danger')); return; } @@ -176,63 +202,55 @@ }); $(".forwards-container").html(fw_html); - - /* Toggle delete state */ - $("input[name=fwd-delete]").click(function() { - $(this).parent().parent().parent().toggleClass('danger'); - }); }); - $(".forwards-container").on('click', function(e) { - /* Add to delete selection */ - var target = $(e.target); - if( target.attr('name') == 'fwd-delete' ) { - var tbody = target.closest('tbody'); - var num_selected = tbody.find("[name=fwd-delete]:checked").length; - if(num_selected > 0) { - tbody.find('.link-del').addClass('visible'); - } else { - tbody.find('.link-del').removeClass('visible'); - } - } - /* Delete selected */ - else if( target.hasClass('js-del-selected') ) { - var list_name = target.attr('data-delete-list-name'); - var checked = $('[data-list-name="'+list_name+'"] [name="fwd-delete"]:checked'); - var delete_these = _.map(checked, function(el) { - return $(el).val(); - }); - var deferreds = []; - $.each(delete_these, function(i, el) { - var data = { - type: 'DELETE', - headers: {'X-CSRFToken': csrf_token}, - url: api_urls.fwd_delete + el + '/', - dataType: 'json' - }; - deferreds.push($.ajax(data)); - }); - $.when.apply($, deferreds).then(function(){ - // Success - checked.closest('tr').remove(); - // TODO remove list if no more rows - }).fail(function(err){ - $('[data-list-name="'+list_name+'"] .result-alert').html(renderAlert('Kunne ikke fjerne epostaliaser', 'danger')); - }); - } - else if( target.hasClass('js-toggle-email-textarea')) { - e.preventDefault(); - var row = target.closest('tbody').find('.textarea-row'); - row.toggleClass('visible'); - } - /* Add new */ - else if( target.hasClass('js-new-email') ) { - e.preventDefault(); - // TODO refactor logic from new list and add here + /* Mark row red for deletion and show delete button if applicable */ + $(".forwards-container").on('click', '[name=fwd-delete]', function(e) { + $(this).parent().parent().parent().toggleClass('danger'); + var tbody = $(this).closest('tbody'); + var num_selected = tbody.find("[name=fwd-delete]:checked").length; + if(num_selected > 0) { + tbody.find('.link-del').addClass('visible'); } else { - //console.log(target); + tbody.find('.link-del').removeClass('visible'); } }); + /* Delete selected */ + $(".forwards-container").on('click', '.js-del-selected', function(e) { + $(this).attr('data-delete-list-name'); + var checked = $('[data-list-name="'+list_name+'"] [name="fwd-delete"]:checked'); + var delete_these = _.map(checked, function(el) { + return $(el).val(); + }); + var deferreds = []; + $.each(delete_these, function(i, el) { + var data = { + type: 'DELETE', + headers: {'X-CSRFToken': csrf_token}, + url: api_urls.fwd_delete + el + '/', + dataType: 'json' + }; + deferreds.push($.ajax(data)); + }); + $.when.apply($, deferreds).then(function(){ + // Success + checked.closest('tr').remove(); + // TODO remove list if no more rows + }).fail(function(err){ + $('[data-list-name="'+list_name+'"] .result-alert').html(renderAlert('Kunne ikke fjerne epostaliaser', 'danger')); + }); + }); + /* Toggles emails textarea */ + $(".forwards-container").on('click', '.js-toggle-email-textarea', function(e) { + e.preventDefault(); + var row = $(this).closest('tbody').find('.textarea-row'); + row.toggleClass('visible'); + }); + /* Add emails to current list */ + $(".forwards-container").on('click', '.js-new-email', function(e) { + e.preventDefault(); + // TODO refactor logic from new list and add here + }); /* New list toggle display */ $('.new-list-btn').on('click', function() { $('.new-list').toggleClass('visible'); diff --git a/mailadmin/static/app/styles/_animations.scss b/mailadmin/static/app/styles/_animations.scss new file mode 100644 index 0000000..bcb4b24 --- /dev/null +++ b/mailadmin/static/app/styles/_animations.scss @@ -0,0 +1,8 @@ +.spin { + animation: spin .8s infinite linear; +} + +@keyframes spin { + from { transform: rotate(0deg);} + to { transform: rotate(360deg);} +} \ No newline at end of file diff --git a/mailadmin/static/app/styles/main.scss b/mailadmin/static/app/styles/main.scss index 9a040bd..d23b9ff 100644 --- a/mailadmin/static/app/styles/main.scss +++ b/mailadmin/static/app/styles/main.scss @@ -1,6 +1,7 @@ $icon-font-path: "../fonts/"; @import "../../bower_components/bootstrap-sass-official/vendor/assets/stylesheets/bootstrap"; +@import "animations"; .login-form { margin: 0 auto; @@ -21,6 +22,14 @@ $icon-font-path: "../fonts/"; .orgunit-list { margin-bottom: 40px; } +.orgunit-select-container { + display: block; + margin-bottom: 20px; + + @media (min-width: 768px) { + display: none; + } +} /* Sidebar navigation */ .nav-sidebar > .active > a, diff --git a/mailadmin/static/app/templates/orgunits_select.html b/mailadmin/static/app/templates/orgunits_select.html new file mode 100644 index 0000000..d557ef5 --- /dev/null +++ b/mailadmin/static/app/templates/orgunits_select.html @@ -0,0 +1,6 @@ + \ No newline at end of file diff --git a/mailadmin/static/dist/scripts/main.js b/mailadmin/static/dist/scripts/main.js index 4cffa2a..32aa3a0 100644 --- a/mailadmin/static/dist/scripts/main.js +++ b/mailadmin/static/dist/scripts/main.js @@ -50,12 +50,11 @@ /* Home view (lists) */ if( $('body.home').length ) { $.getJSON(api_urls.ou_list, function(data) { - var ou_html = nunjucks.render('orgunits.html', { - orgunits: data, - api_urls: api_urls - }); - + /* OrgUnit list */ + var ou_html = nunjucks.render('orgunits.html', { orgunits: data }); $(".orgunit-list").append(ou_html); + var ous_html = nunjucks.render('orgunits_select.html', { orgunits: data }); + $(".orgunit-select-container").html(ous_html); /* New list */ var new_list_html = nunjucks.render('new_list.html', { @@ -135,7 +134,7 @@ }); - /* Add list filter listeners */ + /* Add list filter by orgunit */ $(".orgunit-list a").on('click', function(e) { var prefix = $(this).attr('data-prefix'); var querystring = $(this).attr('href'); @@ -144,6 +143,29 @@ /* Toggle selection */ $(".orgunit-list li").removeClass('active'); $(this).parent().toggleClass('active'); + $('.orgunits-select').val(prefix); + + /* Update query string */ + window.history.pushState(null, null, querystring); + + /* Filter lists */ + var re_prefix = new RegExp('^'+prefix); + $(".fwdlist").each(function(el) { + var cur_name = $(this).attr('data-list-name'); + if(re_prefix.test(cur_name)) { + $(this).removeClass('hidden'); + } else { + $(this).addClass('hidden'); + } + }); + }); + $(".orgunits-select").on('change', function(e) { + var prefix = $(this).val(); + var querystring = '/lists/?q='+prefix; + + /* Toggle selection */ + $(".orgunit-list li").removeClass('active'); + $(".orgunit-list li a[data-prefix="+prefix+"]").parent().toggleClass('active'); /* Update query string */ window.history.pushState(null, null, querystring); @@ -161,10 +183,14 @@ }); }); - /* Load lists */ + /* Load forwards from API and write to container */ $.getJSON(api_urls.fwd_list, function(data) { if( !data.cpanelresult ) { - $(".forwards-container").html("No results."); + $(".forwards-container").html(renderAlert("No results.", 'info')); + return; + } + if( 'error' in data.cpanelresult ) { + $(".forwards-container").html(renderAlert("Klarte ikke hente epostlister fra APIet: "+data.cpanelresult.error, 'danger')); return; } @@ -176,63 +202,55 @@ }); $(".forwards-container").html(fw_html); - - /* Toggle delete state */ - $("input[name=fwd-delete]").click(function() { - $(this).parent().parent().parent().toggleClass('danger'); - }); }); - $(".forwards-container").on('click', function(e) { - /* Add to delete selection */ - var target = $(e.target); - if( target.attr('name') == 'fwd-delete' ) { - var tbody = target.closest('tbody'); - var num_selected = tbody.find("[name=fwd-delete]:checked").length; - if(num_selected > 0) { - tbody.find('.link-del').addClass('visible'); - } else { - tbody.find('.link-del').removeClass('visible'); - } - } - /* Delete selected */ - else if( target.hasClass('js-del-selected') ) { - var list_name = target.attr('data-delete-list-name'); - var checked = $('[data-list-name="'+list_name+'"] [name="fwd-delete"]:checked'); - var delete_these = _.map(checked, function(el) { - return $(el).val(); - }); - var deferreds = []; - $.each(delete_these, function(i, el) { - var data = { - type: 'DELETE', - headers: {'X-CSRFToken': csrf_token}, - url: api_urls.fwd_delete + el + '/', - dataType: 'json' - }; - deferreds.push($.ajax(data)); - }); - $.when.apply($, deferreds).then(function(){ - // Success - checked.closest('tr').remove(); - // TODO remove list if no more rows - }).fail(function(err){ - $('[data-list-name="'+list_name+'"] .result-alert').html(renderAlert('Kunne ikke fjerne epostaliaser', 'danger')); - }); - } - else if( target.hasClass('js-toggle-email-textarea')) { - e.preventDefault(); - var row = target.closest('tbody').find('.textarea-row'); - row.toggleClass('visible'); - } - /* Add new */ - else if( target.hasClass('js-new-email') ) { - e.preventDefault(); - // TODO refactor logic from new list and add here + /* Mark row red for deletion and show delete button if applicable */ + $(".forwards-container").on('click', '[name=fwd-delete]', function(e) { + $(this).parent().parent().parent().toggleClass('danger'); + var tbody = $(this).closest('tbody'); + var num_selected = tbody.find("[name=fwd-delete]:checked").length; + if(num_selected > 0) { + tbody.find('.link-del').addClass('visible'); } else { - //console.log(target); + tbody.find('.link-del').removeClass('visible'); } }); + /* Delete selected */ + $(".forwards-container").on('click', '.js-del-selected', function(e) { + $(this).attr('data-delete-list-name'); + var checked = $('[data-list-name="'+list_name+'"] [name="fwd-delete"]:checked'); + var delete_these = _.map(checked, function(el) { + return $(el).val(); + }); + var deferreds = []; + $.each(delete_these, function(i, el) { + var data = { + type: 'DELETE', + headers: {'X-CSRFToken': csrf_token}, + url: api_urls.fwd_delete + el + '/', + dataType: 'json' + }; + deferreds.push($.ajax(data)); + }); + $.when.apply($, deferreds).then(function(){ + // Success + checked.closest('tr').remove(); + // TODO remove list if no more rows + }).fail(function(err){ + $('[data-list-name="'+list_name+'"] .result-alert').html(renderAlert('Kunne ikke fjerne epostaliaser', 'danger')); + }); + }); + /* Toggles emails textarea */ + $(".forwards-container").on('click', '.js-toggle-email-textarea', function(e) { + e.preventDefault(); + var row = $(this).closest('tbody').find('.textarea-row'); + row.toggleClass('visible'); + }); + /* Add emails to current list */ + $(".forwards-container").on('click', '.js-new-email', function(e) { + e.preventDefault(); + // TODO refactor logic from new list and add here + }); /* New list toggle display */ $('.new-list-btn').on('click', function() { $('.new-list').toggleClass('visible'); diff --git a/mailadmin/static/dist/scripts/templates.js b/mailadmin/static/dist/scripts/templates.js index 88cdd9c..b8ca4a0 100644 --- a/mailadmin/static/dist/scripts/templates.js +++ b/mailadmin/static/dist/scripts/templates.js @@ -258,3 +258,44 @@ root: root }; })(); })(); + +(function() {(window.nunjucksPrecompiled = window.nunjucksPrecompiled || {})["orgunits_select.html"] = (function() {function root(env, context, frame, runtime, cb) { +var lineno = null; +var colno = null; +var output = ""; +try { +output += ""; +cb(null, output); +; +} catch (e) { + cb(runtime.handleError(e, lineno, colno)); +} +} +return { +root: root +}; +})(); +})(); diff --git a/mailadmin/static/dist/styles/main.css b/mailadmin/static/dist/styles/main.css index 0331abc..71ac672 100644 --- a/mailadmin/static/dist/styles/main.css +++ b/mailadmin/static/dist/styles/main.css @@ -6515,6 +6515,32 @@ button.close { display: none !important; } } +.spin { + -webkit-animation: spin .8s infinite linear; + animation: spin .8s infinite linear; +} + +@-webkit-keyframes spin { + from { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); + } + to { + -webkit-transform: rotate(360deg); + transform: rotate(360deg); + } +} + +@keyframes spin { + from { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); + } + to { + -webkit-transform: rotate(360deg); + transform: rotate(360deg); + } +} .login-form { margin: 0 auto; max-width: 300px; @@ -6538,6 +6564,16 @@ button.close { margin-bottom: 40px; } +.orgunit-select-container { + display: block; + margin-bottom: 20px; +} +@media (min-width: 768px) { + .orgunit-select-container { + display: none; + } +} + /* Sidebar navigation */ .nav-sidebar > .active > a, .nav-sidebar > .active > a:hover, diff --git a/mailadmin/templates/home.html b/mailadmin/templates/home.html index a81f9a7..c79c4c1 100644 --- a/mailadmin/templates/home.html +++ b/mailadmin/templates/home.html @@ -9,11 +9,12 @@
+
-
+
Laster...