LIMS-2077: Individual grid scans show boxes for group of grid scans (#1041)

Co-authored-by: Mark Williams <mark.williams@diamond.ac.uk>

Author: ndg63276

client/src/js/modules/dc/views/dcbase.js

@@ -87,6 +87,7 @@ define(['marionette',
             console.log('updateDCC', this.ui.dcglink, this.model)
             if (this.model.get('DCC') > 1) {
                 this.$el.find('li.group').show()
+                this.$el.find('.gridsize2').show()
                 this.$el.find('.dcglink').show()
                 this.$el.find('.dclink').hide()
                 this.$el.find('.reprocess').hide()
@@ -95,6 +96,7 @@ define(['marionette',
                 }
             } else {
                 this.$el.find('li.group').hide()
+                this.$el.find('.gridsize2').hide()
                 this.$el.find('.dcglink').hide()
                 this.$el.find('.dclink').show()
                 this.$el.find('.reprocess').show()

client/src/js/modules/dc/views/grid.js

@@ -46,6 +46,7 @@ define(['marionette',
       xrcholder: '.holder h1.xrc',
       apholder: '.holder h1.ap',
       gridsize: '.gridsize',
+      gridsize2: '.gridsize2',
     },
 
     toggleZoom: function(e) {
@@ -126,9 +127,8 @@ define(['marionette',
         if (this.ui.bx.text) this.ui.by.text((gi.get('DY_MM')*1000).toFixed(0))
 
         if (gi.get('STEPS_Y') > 10 && this.ui.zoom.show) this.ui.zoom.show()
-        var gridsize = gi.get('STEPS_X') + ' x ' + gi.get('STEPS_Y')
-        if (gi.get('STEPS_Z')) { gridsize += ' x ' + gi.get('STEPS_Z') }
-        this.ui.gridsize.html(gridsize)
+        this.ui.gridsize.html(gi.get('STEPS_X') + ' x ' + gi.get('STEPS_Y'))
+        if (gi.get('STEPS_Z')) { this.ui.gridsize2.html(' x ' + gi.get('STEPS_Z')) }
     },
 
     checkXRCandAP: function() {

client/src/js/templates/dc/grid.html

@@ -13,7 +13,7 @@ <h1 class="title"></h1>
         <li>Transmission: <%-TRANSMISSION%>%</li>
         <li>Beamsize: <%-BSX%>x<%-BSY%>&mu;m</li>
         <li>Boxsize: <span class="boxx"></span>x<span class="boxy"></span>&mu;m</li>
-        <li>Grid scan size: <span class="gridsize"></span></li>
+        <li>Grid scan size: <span class="gridsize"></span><span class="gridsize2"></span></li>
         <li class="comment">Comment: <span class="COMMENTS"><%-COMMENTS%></span></li>
         <% if (!STATE) { %><li>Status: <span class="b">Stopped</span></li><% } %>