Skip to content

Commit

Permalink
TechnicalData Plugin: Table view (#83)
Browse files Browse the repository at this point in the history 
* TechnicalData Plugin: Add switch for table view of technical properties

* Table header background color

* Background color for SubmodelElementCollection/SubmodelElementList

* Add table (row) hover

Changed table header background color again

* Adjustments

* Replaces semantics with definition

---------

Co-authored-by: aaron Zielstorff <[email protected]>
  • Loading branch information
@seicke @aaronzi
seicke and aaronzi authored Nov 12, 2024
1 parent 85bf2db commit 54fc021
Show file tree
Hide file tree
Showing 5 changed files with 219 additions and 7 deletions.
41 changes: 39 additions & 2 deletions aas-web-ui/src/components/SubmodelPlugins/TechnicalData.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -139,17 +139,51 @@
</v-expansion-panel>
<!-- Technical Properties -->
<v-expansion-panel>
<v-expansion-panel-title>
<v-expansion-panel-title v-slot="{ expanded }">
<v-list-item class="pa-0">
<template #prepend>
<v-icon size="small">mdi-cog-outline</v-icon>
</template>
<v-list-item-title>{{ 'Technical Properties' }}</v-list-item-title>
<template #append>
<v-switch
v-if="expanded"
v-model="tableView"
color="primary"
label="Table view"
hide-details
density="compact"
class="ml-5"
@click.stop></v-switch>
</template>
</v-list-item>
</v-expansion-panel-title>
<v-divider v-if="panel.includes(2)"></v-divider>
<v-expansion-panel-text>
<GenericDataVisu class="mt-3" :submodel-element-data="technicalProperties"></GenericDataVisu>
<GenericDataVisu
v-if="!tableView"
class="mt-3"
:submodel-element-data="technicalProperties"></GenericDataVisu>
<template v-else>
<v-card border class="mt-3">
<v-table density="comfortable" hover>
<thead class="bg-tableHeader">
<tr>
<th class="text-titleText">SubmodelElement</th>
<th class="text-titleText">Description</th>
<th class="text-titleText">Definition</th>
<th class="text-titleText">Value</th>
</tr>
</thead>
<tbody>
<GenericDataTableView
class="mt-3"
:submodel-element-data="technicalProperties"
:level="0"></GenericDataTableView>
</tbody>
</v-table>
</v-card>
</template>
</v-expansion-panel-text>
</v-expansion-panel>
<!-- Further Information -->
Expand Down Expand Up @@ -214,6 +248,7 @@
<script lang="ts">
import { defineComponent } from 'vue';
import { useTheme } from 'vuetify';
import GenericDataTableView from '@/components/UIComponents/GenericDataTableView.vue';
import GenericDataVisu from '@/components/UIComponents/GenericDataVisu.vue';
import RequestHandling from '@/mixins/RequestHandling';
import SubmodelElementHandling from '@/mixins/SubmodelElementHandling';
Expand All @@ -223,6 +258,7 @@
name: 'TechnicalData',
components: {
GenericDataVisu,
GenericDataTableView,
},
mixins: [RequestHandling, SubmodelElementHandling],
props: ['submodelElementData'],
Expand All @@ -248,6 +284,7 @@
ManufacturerLogoUrl: '',
ProductImageUrl: '',
loading: false,
tableView: true,
};
},
Expand Down
86 changes: 86 additions & 0 deletions aas-web-ui/src/components/UIComponents/GenericDataTableView.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,86 @@
<template>
<template v-if="submodelElementData && Array.isArray(submodelElementData) && submodelElementData.length > 0">
<template v-for="(submodelElement, index) in submodelElementData" :key="index">
<template v-if="['SubmodelElementCollection', 'SubmodelElementList'].includes(submodelElement.modelType)">
<tr class="bg-tableOdd">
<td colspan="4">
<p class="text-subtitle-2 py-4" :class="'pl-' + level * 3">
<v-icon class="mr-2" size="small" color="icon">mdi-folder</v-icon>
<span class="text-titleText">{{ nameToDisplay(submodelElement) }}</span>
</p>
</td>
</tr>
<GenericDataTableView
:submodel-element-data="submodelElement.value"
:level="Number(level) + 1"></GenericDataTableView>
</template>
<template v-else-if="['Property', 'MultiLanguageProperty'].includes(submodelElement.modelType)">
<tr>
<td>
<p>
<v-tooltip
location="bottom start"
open-delay="250"
:text="descriptionToDisplay(submodelElement)">
<template #activator="{ props }">
<span v-bind="props" class="text-caption">
{{ nameToDisplay(submodelElement) }}
</span>
</template>
</v-tooltip>
</p>
</td>
<td>
<p class="text-caption" style="min-width: 100px">{{ descriptionToDisplay(submodelElement) }}</p>
</td>
<td>
<p class="text-caption" style="min-width: 200px">{{ cdDefinition(submodelElement) }}</p>
</td>
<td>
<p class="text-caption">
{{ valueToDisplay(submodelElement) }}
</p>
</td>
</tr>
</template>
</template>
</template>
<template v-else>
<tr style="border: 0 !important'">
<td colspan="4" style="border: 0 !important">-</td>
</tr>
</template>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import { useTheme } from 'vuetify';
import SubmodelElementHandling from '@/mixins/SubmodelElementHandling';
export default defineComponent({
name: 'GenericDataTableView',
mixins: [SubmodelElementHandling],
inheritAttrs: false,
props: {
submodelElementData: {
type: Object,
default() {
return {};
},
required: true,
},
level: {
type: Number,
default: 0,
},
},
setup() {
const theme = useTheme();
return {
theme, // Theme Object
};
},
});
</script>
10 changes: 5 additions & 5 deletions aas-web-ui/src/components/UIComponents/SemanticID.vue
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<template>
<v-container fluid class="pa-0">
<v-list-item>
<v-list-item :class="semanticTitle && semanticTitle.trim().length > 0 ? '' : 'pa-0'">
<!-- Tooltip with SemanticId -->
<v-tooltip activator="parent" open-delay="600" transition="slide-x-transition">
<div v-for="(semanticId, i) in semanticIdObject.keys" :key="i" class="text-caption">
Expand All @@ -9,14 +9,14 @@
</div>
</v-tooltip>
<!-- SemanticIId Title -->
<template #title>
<div class="text-subtitle-2 mt-2" v-html="semanticTitle + ':'"></div>
<template v-if="semanticTitle && semanticTitle.trim().length > 0" #title>
<div class="text-subtitle-2 mt-2">{{ semanticTitle + ':' }}</div>
</template>
<!-- SemanticId List -->
<v-list-item-subtitle v-for="(semanticId, i) in semanticIdObject.keys" :key="i">
<div class="pt-2">
<div :class="semanticTitle && semanticTitle.trim().length > 0 ? 'pt-2' : ''">
<v-chip label size="x-small" border class="mr-2">{{ semanticId.type }}</v-chip>
<span v-html="semanticId.value"></span>
<span>{{ semanticId.value }}</span>
</div>
</v-list-item-subtitle>
</v-list-item>
Expand Down
83 changes: 83 additions & 0 deletions aas-web-ui/src/mixins/SubmodelElementHandling.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -626,6 +626,41 @@ export default defineComponent({
return '';
},

// Get the Definition from the EmbeddedDataSpecification of the ConceptDescription of the Property (if available)
cdDefinition(prop: any) {
if (!prop.conceptDescriptions) {
this.getConceptDescriptions(prop).then((conceptDescriptions) => {
prop.conceptDescriptions = conceptDescriptions;
});
}
if (!prop.conceptDescriptions || prop.conceptDescriptions.length == 0) {
return '';
}
for (const conceptDescription of prop.conceptDescriptions) {
if (!conceptDescription.embeddedDataSpecifications) {
continue;
}
for (const embeddedDataSpecification of conceptDescription.embeddedDataSpecifications) {
if (
embeddedDataSpecification.dataSpecificationContent &&
embeddedDataSpecification.dataSpecificationContent.definition
) {
const definitionEn = embeddedDataSpecification.dataSpecificationContent.definition.find(
(definition: any) => {
return definition.language === 'en' && definition.text !== '';
}
);
if (definitionEn && definitionEn.text) {
return definitionEn.text;
}
} else {
return '';
}
}
}
return '';
},

// Name to be displayed
nameToDisplay(sme: any) {
if (sme.displayName) {
Expand All @@ -637,6 +672,54 @@ export default defineComponent({
return sme.idShort ? sme.idShort : '';
},

descriptionToDisplay(referable: any) {
if (referable && referable?.description) {
const descriptionEn = referable.description.find(
(description: any) => description && description.language === 'en' && description.text !== ''
);
if (descriptionEn && descriptionEn.text) return descriptionEn.text;
}
return '';
},

valueToDisplay(submodelElement: any) {
if (submodelElement && submodelElement.modelType) {
switch (submodelElement.modelType) {
case 'Property':
if (!submodelElement.value) return '';
return (
submodelElement.value +
(this.unitSuffix(submodelElement) ? ' ' + this.unitSuffix(submodelElement) : '')
);
case 'MultiLanguageProperty': {
const valueEn = submodelElement.value.find((value: any) => {
return value && value.language === 'en' && value.text !== '';
});
const valueDe = submodelElement.value.find((value: any) => {
return value && value.language === 'de' && value.text !== '';
});
if (valueEn && valueEn.text) return valueEn.text;
if (valueDe && valueDe.text) return valueDe.text;
return '';
}
case 'File':
case 'Blob':
if (submodelElement.value.startsWith('http')) return submodelElement.value;
return submodelElement.path + '/attachment';
case 'Operation': // TODO
case 'ReferenceElement': // TODO
case 'Range': // TODO
case 'Entity': // TODO
case 'RelationshipElement': // TODO
case 'AnnotatedRelationshipElement': // TODO
return '';
default:
return '';
}
}
return '';
},

// Extract the right endpoints href from a descriptor
extractEndpointHref(descriptor: any, interfaceShortName: string): string {
const interfaceShortNames = [
Expand Down
6 changes: 6 additions & 0 deletions aas-web-ui/src/plugins/vuetify.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,10 +45,13 @@ export function initializeVuetify(primaryLightColor: string, primaryDarkColor: s
subtitleText: '#626262',
normalText: '#000000',
lamp: '#7A7A7A',
tableHeader: '#EBEBEB',
tableOdd: '#F5F5F5',
tableEven: '#FAFAFA',
invertedButton: '#121212',
lightButton: '#5E5E5E',
icon: '#7A7A7A',
titleText: '#212121',
},
},
dark: {
Expand All @@ -73,10 +76,13 @@ export function initializeVuetify(primaryLightColor: string, primaryDarkColor: s
subtitleText: '#A5A5A5',
normalText: '#FFFFFF',
lamp: '#959595',
tableHeader: '#313131',
tableOdd: '#272727',
tableEven: '#212121',
invertedButton: '#F0F0F0',
lightButton: '#AFAFAF',
icon: '#BDBDBD',
titleText: '#FFFFFF',
},
},
},
Expand Down

0 comments on commit 54fc021

Please sign in to comment.