Merge branch '94-let-users-assign-a-colour-to-preplot-lines' into 'devel'

Resolve "Let users assign a colour to preplot lines"

Closes #94

See merge request wgp/dougal/software!6

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];
   }
 
 }

lib/www/server/lib/db/line/list.js

@@ -45,7 +45,7 @@ async function list (projectId, opts = {}) {
 					AND UNBOUNDED FOLLOWING
 			)
 		)
-		SELECT s.*, incr, remarks, pl.ntba
+		SELECT s.*, incr, remarks, pl.ntba, pl.meta
 		FROM summary s
 		INNER JOIN preplot_lines pl ON pl.class = 'V' AND s.line = pl.line
 		ORDER BY ${sortKey} ${sortDir}

lib/www/server/spec/openapi.yaml

@@ -301,6 +301,9 @@ components:
                 ntba:
                     type: boolean
                     description: Not to be acquired flag. If `true`, all the points in this line are ignored in production statistics.
+                meta:
+                    type: object
+                    description: Arbitrary JSON data associated with this shotpoint.
 
 
         Shotpoint: