diff --git a/client/src/css/partials/_utility.scss b/client/src/css/partials/_utility.scss index eb7e802a0..93f7068a3 100644 --- a/client/src/css/partials/_utility.scss +++ b/client/src/css/partials/_utility.scss @@ -270,3 +270,44 @@ ul.ui-autocomplete { } } } + +.aic { + align-items: center; +} + +.gap2 { + gap: 2px; +} + +.toggle-input { + appearance: none; + -webkit-appearance: none; + width: 40px; + height: 22px; + background: #ccc; + border-radius: 20px; + position: relative; + cursor: pointer; + transition: background 0.3s; + outline: none; +} + +.toggle-input::before { + content: ""; + position: absolute; + width: 18px; + height: 18px; + border-radius: 50%; + top: 1px; + left: 1px; + background: white; + transition: transform 0.3s; +} + +.toggle-input:checked { + background: #4CAF50; +} + +.toggle-input:checked::before { + transform: translateX(18px); +} diff --git a/client/src/js/collections/datacollections.js b/client/src/js/collections/datacollections.js index e13e1d965..88072781d 100644 --- a/client/src/js/collections/datacollections.js +++ b/client/src/js/collections/datacollections.js @@ -1,8 +1,15 @@ -define(['underscore', 'backbone', 'backbone.paginator', 'models/datacollection'], function(_, Backbone, PageableCollection, dc) { +define(['underscore', 'backbone', 'backbone.paginator', 'utils', 'models/datacollection'], +function(_, Backbone, PageableCollection, utils, dc) { return PageableCollection.extend({ model: dc, mode: 'server', url: '/dc', + + queryParams: { + expandgroups: function () { + return utils.getLocalStorage('expandgroups') === '1' ? 1 : null + } + }, state: { pageSize: 15, @@ -67,4 +74,4 @@ define(['underscore', 'backbone', 'backbone.paginator', 'models/datacollection'] }) -}) \ No newline at end of file +}) diff --git a/client/src/js/modules/dc/datacollections.js b/client/src/js/modules/dc/datacollections.js index b062b08f9..b470d27a0 100644 --- a/client/src/js/modules/dc/datacollections.js +++ b/client/src/js/modules/dc/datacollections.js @@ -1,5 +1,6 @@ define(['marionette', 'views/pages', + 'utils', 'modules/dc/dclist', 'modules/dc/views/samplechanger', @@ -16,7 +17,7 @@ define(['marionette', 'templates/dc/dclist.html', ], -function(Marionette, Pages, DCListView, +function(Marionette, Pages, utils, DCListView, SampleChanger, StatusView, Search, Filter, DialogView, QueueBuilderView, UserView, DewarsView, ReprocessOverview, template) { @@ -42,6 +43,7 @@ function(Marionette, Pages, DCListView, ui: { ar: 'input[name=autorefresh]', + expand: 'input[name=expand]', }, events: { @@ -52,6 +54,7 @@ function(Marionette, Pages, DCListView, 'mouseout a.dewars': 'hideDewars', 'click a.refresh': 'refreshDCs', 'click @ui.ar': 'setAutoRefresh', + 'click @ui.expand': 'setExpandGroups', 'click a.rpo': 'showReprocess', }, @@ -60,6 +63,15 @@ function(Marionette, Pages, DCListView, else this.collection.stop() }, + setExpandGroups: function(e) { + if (this.ui.expand.is(':checked')) { + utils.setLocalStorage('expandgroups', '1') + } else { + utils.setLocalStorage('expandgroups', '0') + } + this.collection.fetch({ reset: true }) + }, + refreshDCs: function(e) { e.preventDefault() this.collection.fetch() @@ -141,6 +153,8 @@ function(Marionette, Pages, DCListView, }, onRender: function() { + const expandgroups = utils.getLocalStorage('expandgroups') === '1' + this.ui.expand.prop('checked', expandgroups) this.data_collections.show(this.dclist) this.pages.show(this.paginator) this.pages2.show(this.paginator2) diff --git a/client/src/js/templates/dc/dclist.html b/client/src/js/templates/dc/dclist.html index 3375820f4..fa0118642 100644 --- a/client/src/js/templates/dc/dclist.html +++ b/client/src/js/templates/dc/dclist.html @@ -49,6 +49,9 @@

+ <% if (!IS_DCG && !IS_PJ && !IS_SINGLE) { %> + + <% } %>
diff --git a/client/src/js/utils.js b/client/src/js/utils.js index 4a2994911..3e9d7fff7 100644 --- a/client/src/js/utils.js +++ b/client/src/js/utils.js @@ -221,6 +221,14 @@ define(['backbone', return array }, + setLocalStorage: function(key, value) { + localStorage.setItem(key, value); + }, + + getLocalStorage: function(key) { + const value = localStorage.getItem(key); + return value ? value : ""; + }, jsonError: function(model, xhr, status) { var json = {} diff --git a/client/src/js/views/cloudupload.js b/client/src/js/views/cloudupload.js index 8e0853e04..223ea770c 100644 --- a/client/src/js/views/cloudupload.js +++ b/client/src/js/views/cloudupload.js @@ -1,10 +1,12 @@ define([ 'backbone', 'views/dialog', + 'utils', 'templates/dc/cloudupload.html' ], function( Backbone, DialogView, + utils, template ) { @@ -23,32 +25,10 @@ define([ remember: 'input[name=remember]', }, - setCookie: function(cname, cvalue, exdays) { - const d = new Date(); - d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000)); - let expires = "expires="+d.toUTCString(); - document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/"; - }, - - getCookie: function(cname) { - let name = cname + "="; - let ca = document.cookie.split(';'); - for (let i = 0; i < ca.length; i++) { - let c = ca[i]; - while (c.charAt(0) == ' ') { - c = c.substring(1); - } - if (c.indexOf(name) == 0) { - return c.substring(name.length, c.length); - } - } - return ""; - }, - upload: function() { if (this.ui.remember.is(':checked')) { - this.setCookie('ccp4_username', this.ui.username.val(), 365) - this.setCookie('ccp4_cloudrunid', this.ui.cloudrunid.val(), 365) + utils.setLocalStorage('ccp4_username', this.ui.username.val()) + utils.setLocalStorage('ccp4_cloudrunid', this.ui.cloudrunid.val()) } let data = { cloudrunid: this.ui.cloudrunid.val(), username: this.ui.username.val() } if (this.model.get('AUTOPROCPROGRAMATTACHMENTID')) { @@ -78,8 +58,8 @@ define([ }, onRender: function() { - let ccp4_username = this.getCookie('ccp4_username') - let ccp4_cloudrunid = this.getCookie('ccp4_cloudrunid') + let ccp4_username = utils.getLocalStorage('ccp4_username') + let ccp4_cloudrunid = utils.getLocalStorage('ccp4_cloudrunid') if (ccp4_username) this.ui.username.val(ccp4_username) if (ccp4_cloudrunid) this.ui.cloudrunid.val(ccp4_cloudrunid) if (ccp4_username || ccp4_cloudrunid) this.ui.remember.prop('checked', true)