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
+
+
+ Unset NTBA
+ Set NTBA
+
+
+ Add to plan
+
+
+ Remove from plan
+
+
+ Set colour…
+
+
+
+
+ Set colour…
+
+
+
+
+ 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];
}
}