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 > - - Unset NTBA - Set NTBA - - - Add to plan - - - Remove from plan + + + + + Multi-select + + + + + Choose line colour + + + + + + + Clear + + + + Set + + + + Cancel + + + + @@ -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]; } }