From f53c479262b71bc6ae28e85f52f39cd7e8728606 Mon Sep 17 00:00:00 2001
From: "D. Berge" <dberge@aaltronav.eu>
Date: Mon, 10 May 2021 00:22:57 +0200
Subject: [PATCH] Add option to assign colours to preplot lines.
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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 | 133 +++++++++++++++++--
 1 file changed, 120 insertions(+), 13 deletions(-)

diff --git a/lib/www/client/source/src/views/LineList.vue b/lib/www/client/source/src/views/LineList.vue
index cdd953c..b0ccc35 100644
--- a/lib/www/client/source/src/views/LineList.vue
+++ b/lib/www/client/source/src/views/LineList.vue
@@ -24,28 +24,85 @@
           offset-y
         >
           <v-list dense v-if="contextMenuItem">
-            <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>
-            </v-list-item>
-            <v-list-item @click="addToPlan" v-if="!contextMenuItem.ntba && !isPlanned(contextMenuItem)">
-              <v-list-item-title>Add to plan</v-list-item-title>
-            </v-list-item>
-            <v-list-item @click="removeFromPlan" v-if="isPlanned(contextMenuItem)">
-              <v-list-item-title>Remove from plan</v-list-item-title>
+            <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>
+              </v-list-item>
+              <v-list-item @click="addToPlan" v-if="!contextMenuItem.ntba && !isPlanned(contextMenuItem)">
+                <v-list-item-title>Add to plan</v-list-item-title>
+              </v-list-item>
+              <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');
     },
@@ -303,7 +380,32 @@ export default {
         await this.api([url, init]);
       }
     },
-
+    
+    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];
   }
 
 }