Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

TechnicalData Plugin: Table view #83

Merged
merged 6 commits into from
Nov 12, 2024
Merged

TechnicalData Plugin: Table view #83

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
d921ca5
TechnicalData Plugin: Add switch for table view of technical properties
seicke Nov 5, 2024
2645134
Table header background color
seicke Nov 12, 2024
b6a0725
Background color for SubmodelElementCollection/SubmodelElementList
seicke Nov 12, 2024
e21349c
Add table (row) hover
seicke Nov 12, 2024
558922a
Adjustments
seicke Nov 12, 2024
eece7db
Replaces semantics with definition
aaronzi Nov 12, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
41 changes: 39 additions & 2 deletions aas-web-ui/src/components/SubmodelPlugins/TechnicalData.vue
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -604,6 +604,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 @@ -615,6 +650,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
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,10 +42,13 @@ export function initializeVuetify(primaryColor: string) {
subtitleText: '#626262',
normalText: '#000000',
lamp: '#7A7A7A',
tableHeader: '#EBEBEB',
tableOdd: '#F5F5F5',
tableEven: '#FAFAFA',
invertedButton: '#121212',
lightButton: '#5E5E5E',
icon: '#7A7A7A',
titleText: '#212121',
},
},
dark: {
Expand All @@ -70,10 +73,13 @@ export function initializeVuetify(primaryColor: string) {
subtitleText: '#A5A5A5',
normalText: '#FFFFFF',
lamp: '#959595',
tableHeader: '#313131',
tableOdd: '#272727',
tableEven: '#212121',
invertedButton: '#F0F0F0',
lightButton: '#AFAFAF',
icon: '#BDBDBD',
titleText: '#FFFFFF',
},
},
},
Expand Down