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 1 commit
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
55 changes: 51 additions & 4 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 @@ -2,17 +2,36 @@
<v-container fluid class="pa-0">
<!-- Header -->
<v-card class="mb-4">
<v-card-title>
<div class="text-subtitle-1">{{ 'Technical Data:' }}</div>
<v-card-title class="pb-0 d-flex justify-space-between align-center">
<span>{{ nameToDisplay(submodelElementData) }}</span>
<v-switch
v-model="tableView"
color="primary"
label="Table View"
hide-details
density="compact"
class="pa-0"></v-switch>
aaronzi marked this conversation as resolved.
Show resolved Hide resolved
</v-card-title>
<v-card-subtitle>
<SemanticID
v-if="
submodelElementData.semanticId &&
submodelElementData.semanticId.keys &&
submodelElementData.semanticId.keys.length > 0
"
:semantic-id-object="submodelElementData.semanticId"></SemanticID>
</v-card-subtitle>
<v-card-text class="pt-0">
{{ descriptionToDisplay(submodelElementData) }}
</v-card-text>
</v-card>
<!-- Technical Data Collections -->
<v-card v-if="loading">
<v-skeleton-loader
type="list-item-avatar, divider, list-item-avatar, divider, list-item-avatar, divider, list-item-avatar"
:height="288"></v-skeleton-loader>
</v-card>
<v-expansion-panels v-else v-model="panel" multiple>
<v-expansion-panels v-model="panel" multiple>
<!-- General Information -->
<v-expansion-panel>
<v-expansion-panel-title>
Expand Down Expand Up @@ -149,7 +168,30 @@
</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 variant="outlined" class="mt-3">
<v-table density="comfortable">
seicke marked this conversation as resolved.
Show resolved Hide resolved
<thead>
<tr>
<th>SubmodelElement</th>
<th>Description</th>
<th>Semantics</th>
<th>Value</th>
</tr>
</thead>
seicke marked this conversation as resolved.
Show resolved Hide resolved
<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,15 +256,19 @@
<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 SemanticID from '@/components/UIComponents/SemanticID.vue';
import RequestHandling from '@/mixins/RequestHandling';
import SubmodelElementHandling from '@/mixins/SubmodelElementHandling';
import { useAASStore } from '@/store/AASDataStore';

export default defineComponent({
name: 'TechnicalData',
components: {
SemanticID,
GenericDataVisu,
GenericDataTableView,
},
mixins: [RequestHandling, SubmodelElementHandling],
props: ['submodelElementData'],
Expand All @@ -248,6 +294,7 @@
ManufacturerLogoUrl: '',
ProductImageUrl: '',
loading: false,
tableView: false,
};
},

Expand Down
94 changes: 94 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,94 @@
<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>
<td colspan="4">
<p class="font-weight-bold py-4" :class="'pl-' + level * 3">
<v-icon class="mr-2" size="small">mdi-folder</v-icon>
<span>{{ nameToDisplay(submodelElement) }}</span>
</p>
</td>
</tr>
seicke marked this conversation as resolved.
Show resolved Hide resolved
<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">
{{ nameToDisplay(submodelElement) }}
</span>
</template>
</v-tooltip>
</p>
</td>
<td>
<p>{{ descriptionToDisplay(submodelElement) }}</p>
</td>
<td>
<SemanticID
v-if="
submodelElement.semanticId &&
submodelElement.semanticId.keys &&
submodelElement.semanticId.keys.length > 0
"
:semantic-id-object="submodelElement.semanticId"></SemanticID>
</td>
<td>
<p>
{{ 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 SemanticID from '@/components/UIComponents/SemanticID.vue';
import SubmodelElementHandling from '@/mixins/SubmodelElementHandling';

export default defineComponent({
name: 'GenericDataTableView',
components: { SemanticID },
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
48 changes: 48 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 @@ -615,6 +615,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