Aaltronav/dougal-software
1
0
Fork 0
mirror of https://gitlab.com/wgp/dougal/software.git synced 2025-12-06 06:37:07 +00:00
Code Issues Packages Projects Releases Activity

Add option to assign colours to preplot lines.

Browse Source 
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.
This commit is contained in:
D. Berge
2021-05-10 00:22:57 +02:00
parent 73a415a038
commit f53c479262
1 changed files with 120 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

133
lib/www/client/source/src/views/LineList.vue
View File

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