Add option to assign colours to preplot lines.

A ‘Set colour…’ option is available from the context menu;
it presents a dialogue allowing the user to choose a colour
that will be assigned to that preplot line and used as the
background colour for the corresponding row on the table
(may also be used for other things).

Because there is a good chance that the user may decide to
colour a large number of lines and it is cumbersome to do
it one at a time, a multiple selection option has also been
added. The context menu then shows options which will apply
to all selected rows. At this time only the change colour
option is available, but it can be extended easily.

lib/www/client/source/src/views/LineList.vue

@@ -24,6 +24,7 @@
           offset-y
         >
           <v-list dense v-if="contextMenuItem">
+            <template v-if="!selectOn">
               <v-list-item @click="setNTBA">
                 <v-list-item-title v-if="contextMenuItem.ntba">Unset NTBA</v-list-item-title>
                 <v-list-item-title v-else>Set NTBA</v-list-item-title>
@@ -34,18 +35,74 @@
               <v-list-item @click="removeFromPlan" v-if="isPlanned(contextMenuItem)">
                 <v-list-item-title>Remove from plan</v-list-item-title>
               </v-list-item>
+              <v-list-item @click="showLineColourDialog">
+                <v-list-item-title>Set colour…</v-list-item-title>
+              </v-list-item>
+            </template>
+            <template v-else>
+              <v-list-item @click="showLineColourDialog">
+                <v-list-item-title>Set colour…</v-list-item-title>
+              </v-list-item>
+            </template>
+            <v-divider></v-divider>
+            <v-list-item>
+              <v-list-item-action-text>Multi-select</v-list-item-action-text>
+              <v-list-item-action><v-checkbox v-model="selectOn"></v-checkbox></v-list-item-action>
+            </v-list-item>
           </v-list>
         </v-menu>
         
+        <v-dialog
+          v-model="colourPickerShow"
+          max-width="300"
+        >
+          <v-card>
+            <v-card-title>Choose line colour</v-card-title>
+            <v-card-text>
+              <v-color-picker
+                v-model="selectedColour"
+                show-swatches
+                hide-canvas
+                hide-inputs
+                hide-mode-switch
+                @update:color="selectedColour.alpha = 0.5"
+              >
+              </v-color-picker>
+            </v-card-text>
+            <v-card-actions>
+              <v-btn small
+                @click="selectedColour=null; setLineColour()"
+              >
+                Clear
+              </v-btn>
+              <v-spacer></v-spacer>
+              <v-btn small
+                @click="setLineColour"
+              >
+                Set
+              </v-btn>
+              <v-spacer></v-spacer>
+              <v-btn small
+                @click="colourPickerShow=false"
+              >
+                Cancel
+              </v-btn>
+            </v-card-actions>
+          </v-card>
+        </v-dialog>
+
         <v-data-table
         :headers="headers"
         :items="items"
+        item-key="line"
         :items-per-page.sync="itemsPerPage"
         :search="filter"
         :loading="loading"
         :fixed-header="true"
         :footer-props='{itemsPerPageOptions: [ 10, 25, 50, 100, 500, -1 ]}'
-        :item-class="(item) => (activeItem == item && !edit) ? 'blue accent-1 elevation-3' : ''"
+        :item-class="itemClass"
+        :show-select="selectOn"
+        v-model="selectedRows"
         @click:row="setActiveItem"
         @contextmenu:row="contextMenu"
         >
@@ -117,7 +174,6 @@
 import { mapActions, mapGetters } from 'vuex';
 import DougalLineStatus from '@/components/line-status';
 
-
 export default {
   name: "LineList",
   
@@ -167,6 +223,8 @@ export default {
         }
       ],
       items: [],
+      selectOn: false,
+      selectedRows: [],
       filter: null,
       num_lines: null,
       sequences: [],
@@ -179,7 +237,12 @@ export default {
       contextMenuShow: false,
       contextMenuX: 0,
       contextMenuY: 0,
-      contextMenuItem: null
+      contextMenuItem: null,
+      
+      // Colour picker stuff
+      colourPickerShow: false,
+      selectedColour: null,
+      styles: null
     }
   },
 
@@ -255,6 +318,20 @@ export default {
 
   methods: {
     
+    itemClass (item) {
+      
+      const colourClass = item.meta.colour ? "bg-clr-"+item.meta.colour.slice(1) : null;
+      if (colourClass && ![...this.styles.cssRules].some(i => i.selectorText == "."+colourClass)) {
+        const rule = `.${colourClass} { background-color: ${item.meta.colour}; }`;
+        this.styles.insertRule(rule);
+      }
+      
+      return [
+        item.meta.colour ? colourClass : "",
+        (this.activeItem == item && !this.edit) ? 'blue accent-1 elevation-3' : ''
+      ];
+    },
+    
     isPlanned(item) {
       return this.sequences.find(i => i.line == item.line && i.status == 'planned');
     },
@@ -304,6 +381,31 @@ export default {
       }
     },
     
+    showLineColourDialog () {
+      this.selectedColour = this.contextMenuItem.meta.colour
+        ? {hexa: this.contextMenuItem.meta.colour}
+        : null;
+      this.colourPickerShow = true;
+    },
+    
+    setLineColour () {
+      const items = this.selectOn ? this.selectedRows : [ this.contextMenuItem ];
+      const colour = this.selectedColour ? this.selectedColour.hex+"80" : null;
+      
+      this.selectedRows = [];
+      this.selectOn = false;
+      
+      for (const item of items) {
+        if (colour) {
+          item.meta.colour = colour;
+        } else {
+          delete item.meta.colour;
+        }
+        this.saveItem({line: item.line, key: "meta", value: item.meta});
+        this.colourPickerShow = false;
+      }
+    },
+    
     editItem (item, key) {
       this.edit = {
         line: item.line,
@@ -369,6 +471,11 @@ export default {
     this.getLines();
     this.getNumLines();
     this.getSequences();
+    
+    // Initialise stylesheet
+    const el = document.createElement("style");
+    document.head.appendChild(el);
+    this.styles = document.styleSheets[document.styleSheets.length-1];
   }
 
 }