mirror of
https://gitlab.com/wgp/dougal/software.git
synced 2025-12-06 08:17:09 +00:00
Add 4D comparisons Vue component
This commit is contained in:
D. Berge
256
lib/www/client/source/src/views/Group.vue
Normal file
256
lib/www/client/source/src/views/Group.vue
Normal file
@@ -0,0 +1,256 @@
|
||||
<template>
|
||||
<v-container fluid fill-height class="ma-0 pa-0">
|
||||
<v-row no-gutters align="stretch" class="fill-height">
|
||||
<v-col cols="12" v-if="groupFound">
|
||||
|
||||
<v-data-table class="ma-1"
|
||||
:headers="projectHeaders"
|
||||
:items="projects"
|
||||
dense
|
||||
hide-default-footer
|
||||
>
|
||||
|
||||
<template v-slot:item.baseline="{item, value, index}">
|
||||
<v-simple-checkbox v-if="index+1 < projects.length"
|
||||
color="primary"
|
||||
:value="baseline === item"
|
||||
@input="setBaseline(item)"
|
||||
></v-simple-checkbox>
|
||||
</template>
|
||||
|
||||
<template v-slot:item.monitor="{item, value, index}">
|
||||
<v-simple-checkbox v-if="index > 0 && !(index <= baselineIndex)"
|
||||
color="primary"
|
||||
:value="monitor === item"
|
||||
@input="setMonitor(item)"
|
||||
></v-simple-checkbox>
|
||||
</template>
|
||||
|
||||
<template v-slot:item.pid="{item, value}">
|
||||
<v-chip label small outlined>{{ value }}</v-chip>
|
||||
</template>
|
||||
|
||||
<template v-slot:item.fsp="{item, value}">
|
||||
<span title="First production shot">{{value.tstamp.substr(0, 10)}}</span>
|
||||
</template>
|
||||
|
||||
<template v-slot:item.lsp="{item, value}">
|
||||
<span title="Last production shot">{{value.tstamp.substr(0, 10)}}</span>
|
||||
</template>
|
||||
|
||||
<template v-slot:item.prod_duration="{item, value}">
|
||||
<span v-if="value.days > 2" :title="`${value.days} d ${value.hours} h ${value.minutes} m ${(value.seconds + value.milliseconds/1000).toFixed(3)} s`">
|
||||
{{ value.days }} d
|
||||
</span>
|
||||
<span v-else>
|
||||
{{ value.days }} d {{ value.hours }} h {{ value.minutes }} m {{ (value.seconds + value.milliseconds/1000).toFixed(1) }} s
|
||||
</span>
|
||||
</template>
|
||||
|
||||
<template v-slot:item.prod_distance="{item, value}">
|
||||
{{ (value/1000).toFixed(1) }} km
|
||||
</template>
|
||||
|
||||
</v-data-table>
|
||||
|
||||
<!-- BEGIN TEST -->
|
||||
|
||||
<dougal-group-comparison-summary v-if="comparison"
|
||||
:baseline="baseline"
|
||||
:monitor="monitor"
|
||||
:comparison="comparison"
|
||||
></dougal-group-comparison-summary>
|
||||
|
||||
<dougal-group-repeatability-summary v-else-if="comparisons.length"
|
||||
:comparisons="comparisons"
|
||||
:projects="projects"
|
||||
@input="setComparison"
|
||||
></dougal-group-repeatability-summary>
|
||||
|
||||
<!-- END TEST -->
|
||||
|
||||
|
||||
</v-col>
|
||||
<v-col cols="12" v-else>
|
||||
<v-card>
|
||||
<v-card-text>
|
||||
Group does not exist.
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapActions, mapGetters } from 'vuex'
|
||||
import AccessMixin from '@/mixins/access';
|
||||
import DougalGroupRepeatabilitySummary from '@/components/group-repeatability-summary.vue';
|
||||
import DougalGroupComparisonSummary from '@/components/group-comparison-summary';
|
||||
|
||||
export default {
|
||||
name: 'Group',
|
||||
|
||||
mixins: [
|
||||
AccessMixin
|
||||
],
|
||||
|
||||
components: {
|
||||
DougalGroupRepeatabilitySummary,
|
||||
DougalGroupComparisonSummary,
|
||||
|
||||
},
|
||||
|
||||
data () {
|
||||
return {
|
||||
projectHeaders: [
|
||||
{
|
||||
value: "baseline",
|
||||
text: "Baseline"
|
||||
},
|
||||
{
|
||||
value: "monitor",
|
||||
text: "Monitor"
|
||||
},
|
||||
{
|
||||
value: "pid",
|
||||
text: "ID"
|
||||
},
|
||||
{
|
||||
value: "name",
|
||||
text: "Name"
|
||||
},
|
||||
{
|
||||
value: "fsp",
|
||||
text: "Start"
|
||||
},
|
||||
{
|
||||
value: "lsp",
|
||||
text: "Finish"
|
||||
},
|
||||
{
|
||||
value: "lines",
|
||||
text: "Preplot lines"
|
||||
},
|
||||
{
|
||||
value: "seq_final",
|
||||
text: "Num. of sequences"
|
||||
},
|
||||
{
|
||||
value: "prod_duration",
|
||||
text: "Duration"
|
||||
},
|
||||
{
|
||||
value: "prod_distance",
|
||||
text: "Distance"
|
||||
},
|
||||
],
|
||||
|
||||
baseline: null,
|
||||
monitor: null,
|
||||
comparisons: []
|
||||
}
|
||||
},
|
||||
|
||||
computed: {
|
||||
|
||||
groupName () {
|
||||
return this.$route.params.group;
|
||||
},
|
||||
|
||||
group () {
|
||||
return this.groups.find( i => i.group === this.groupName );
|
||||
},
|
||||
|
||||
groupFound () {
|
||||
return !!(this.loading || this.group);
|
||||
},
|
||||
|
||||
projects () {
|
||||
return this.group?.projects.toSorted((a, b) => a.pid.localeCompare(b.pid));
|
||||
},
|
||||
|
||||
baselineIndex () {
|
||||
return this.projects.indexOf(this.baseline);
|
||||
},
|
||||
|
||||
comparison () {
|
||||
return this.comparisons.find( row =>
|
||||
row.baseline_pid == this.baseline?.pid && row.monitor_pid == this.monitor?.pid
|
||||
)?.meta;
|
||||
},
|
||||
|
||||
...mapGetters(["loading", "groups"])
|
||||
},
|
||||
|
||||
methods: {
|
||||
|
||||
setBaseline (project) {
|
||||
if (project === this.baseline) {
|
||||
this.baseline = null;
|
||||
} else {
|
||||
this.baseline = project;
|
||||
if (this.monitor) {
|
||||
if (this.projects.indexOf(this.monitor) <= this.projects.indexOf(this.baseline)) {
|
||||
this.monitor = null;
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
setMonitor (project) {
|
||||
if (project === this.monitor) {
|
||||
this.monitor = null;
|
||||
} else {
|
||||
this.monitor = project;
|
||||
}
|
||||
},
|
||||
|
||||
setComparison (baseline, monitor) {
|
||||
this.setBaseline(baseline);
|
||||
this.setMonitor(monitor);
|
||||
},
|
||||
|
||||
async getComparisons () {
|
||||
const url = `/comparison/group/${this.$route.params.group}`;
|
||||
this.comparisons = await this.api([url]);
|
||||
},
|
||||
|
||||
/*
|
||||
async getComparison () {
|
||||
if (this.baseline && this.monitor) {
|
||||
const url = `/comparison/group/${this.$route.params.group}/baseline/${this.baseline.pid}/monitor/${this.monitor.pid}`;
|
||||
const comparison = await this.api([url]);
|
||||
if (comparison) {
|
||||
this.comparison = comparison;
|
||||
}
|
||||
}
|
||||
},
|
||||
*/
|
||||
|
||||
...mapActions(["api", "getGroups"])
|
||||
},
|
||||
|
||||
async mounted () {
|
||||
await this.getGroups();
|
||||
if (this.groupFound) {
|
||||
this.getComparisons();
|
||||
/*
|
||||
this.registerNotificationHandlers();
|
||||
|
||||
this.refreshLines();
|
||||
this.refreshSequences();
|
||||
this.refreshEvents();
|
||||
this.refreshLabels();
|
||||
this.refreshPlan();
|
||||
*/
|
||||
}
|
||||
},
|
||||
|
||||
beforeDestroy () {
|
||||
//this.unregisterNotificationHandlers();
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
</script>
|
||||
Reference in New Issue
Block a user