Usage of english DisplayName (if available) instead of idShort in SM …

…Plugins
eclipse-basyx · Jul 23, 2024 · 0df4465 · 0df4465
1 parent cbbac59
commit 0df4465
Show file tree

Hide file tree

Showing 4 changed files with 40 additions and 8 deletions.
diff --git a/aas-gui/Frontend/aas-web-gui/src/components/SubmodelPlugins/ContactInformation.vue b/aas-gui/Frontend/aas-web-gui/src/components/SubmodelPlugins/ContactInformation.vue
@@ -14,7 +14,7 @@
                         <template v-slot:prepend>
                             <v-icon size="small">mdi-card-account-phone</v-icon>
                         </template>
-                        <v-list-item-title>{{ contact.idShort }}</v-list-item-title>
+                        <v-list-item-title>{{ nameToDisplay(contact) }}</v-list-item-title>
                     </v-list-item>
                 </v-expansion-panel-title>
                 <v-divider v-if="panel === index"></v-divider>
@@ -25,7 +25,7 @@
                             <tr v-for="(generalProperty, index) in contact.generalProperties" :key="generalProperty.idShort" :class="index % 2 === 0 ? 'tableEven' : 'bg-tableOdd'">
                                 <td>
                                     <div class="text-subtitleText text-caption">
-                                        <span>{{ generalProperty.idShort }}</span>
+                                        <span>{{ nameToDisplay(generalProperty) }}</span>
                                         <v-tooltip v-if="generalProperty.description && generalProperty.description.length > 0" activator="parent" open-delay="600" transition="slide-y-transition" max-width="360px" location="bottom">
                                             <div v-for="(description, i) in generalProperty.description" :key="i" class="text-caption"><span class="font-weight-bold">{{ description.language + ': ' }}</span>{{ description.text }}</div>
                                         </v-tooltip>
@@ -341,6 +341,14 @@ export default defineComponent({
             }
             return translatedRole;
         },
+
+        nameToDisplay(sme: any) {
+            if (sme.displayName) {
+                let displayNameEn = sme.displayName.find((displayName: any) => { return (displayName.language === 'en' && displayName.text !== ''); });
+                if (displayNameEn && displayNameEn.text) return displayNameEn.text;
+            }
+            return (sme.idShort ? sme.idShort : '');
+        },
     },
 });
 </script>
diff --git a/aas-gui/Frontend/aas-web-gui/src/components/SubmodelPlugins/DigitalNameplate.vue b/aas-gui/Frontend/aas-web-gui/src/components/SubmodelPlugins/DigitalNameplate.vue
@@ -17,7 +17,7 @@
                         <tr v-for="(productProperty, index) in productProperties" :key="productProperty.idShort" :class="index % 2 === 0 ? 'tableEven' : 'bg-tableOdd'">
                             <td>
                                 <div class="text-subtitleText text-caption">
-                                    <span>{{ productProperty.idShort }}</span>
+                                    <span>{{ nameToDisplay(productProperty) }}</span>
                                     <v-tooltip v-if="productProperty.description && productProperty.description.length > 0" activator="parent" open-delay="600" transition="slide-y-transition" max-width="360px" location="bottom">
                                         <div v-for="(description, i) in productProperty.description" :key="i" class="text-caption"><span class="font-weight-bold">{{ description.language + ': ' }}</span>{{ description.text }}</div>
                                     </v-tooltip>
@@ -58,7 +58,7 @@
                         <tr v-for="(manufacturerProperty, index) in manufacturerProperties" :key="manufacturerProperty.idShort" :class="index % 2 === 0 ? 'tableEven' : 'bg-tableOdd'">
                             <td>
                                 <div class="text-subtitleText text-caption">
-                                    <span>{{ manufacturerProperty.idShort }}</span>
+                                    <span>{{ nameToDisplay(manufacturerProperty) }}</span>
                                     <v-tooltip v-if="manufacturerProperty.description && manufacturerProperty.description.length > 0" activator="parent" open-delay="600" transition="slide-y-transition" max-width="360px" location="bottom">
                                         <div v-for="(description, i) in manufacturerProperty.description" :key="i" class="text-caption"><span class="font-weight-bold">{{ description.language + ': ' }}</span>{{ description.text }}</div>
                                     </v-tooltip>
@@ -501,6 +501,14 @@ export default defineComponent({
                 });
             }
         },
+
+        nameToDisplay(sme: any) {
+            if (sme.displayName) {
+                let displayNameEn = sme.displayName.find((displayName: any) => { return (displayName.language === 'en' && displayName.text !== ''); });
+                if (displayNameEn && displayNameEn.text) return displayNameEn.text;
+            }
+            return (sme.idShort ? sme.idShort : '');
+        },
     },
 });
 </script>
diff --git a/aas-gui/Frontend/aas-web-gui/src/components/SubmodelPlugins/TechnicalData.vue b/aas-gui/Frontend/aas-web-gui/src/components/SubmodelPlugins/TechnicalData.vue
@@ -25,7 +25,7 @@
                             <tr v-for="(generalProperty, index) in generalProperties" :key="generalProperty.idShort" :class="index % 2 === 0 ? 'tableEven' : 'bg-tableOdd'">
                                 <td>
                                     <div class="text-subtitleText text-caption">
-                                        <span>{{ generalProperty.idShort }}</span>
+                                        <span>{{ nameToDisplay(generalProperty) }}</span>
                                         <v-tooltip v-if="generalProperty.description && generalProperty.description.length > 0" activator="parent" open-delay="600" transition="slide-y-transition" max-width="360px" location="bottom">
                                             <div v-for="(description, i) in generalProperty.description" :key="i" class="text-caption"><span class="font-weight-bold">{{ description.language + ': ' }}</span>{{ description.text }}</div>
                                         </v-tooltip>
@@ -67,7 +67,7 @@
                                 <tr v-if="productClassifications.length > 0">
                                     <th v-for="classificationProperty in productClassifications[0].value" :key="classificationProperty.idShort">
                                         <v-list-item class="pl-0">
-                                            <v-list-item-title class="text-caption">{{ classificationProperty.idShort }}</v-list-item-title>
+                                            <v-list-item-title class="text-caption">{{ nameToDisplay(classificationProperty) }}</v-list-item-title>
                                         </v-list-item>
                                     </th>
                                 </tr>
@@ -122,7 +122,7 @@
                             <tr v-for="(furtherInfo, index) in furtherInformation" :key="furtherInfo.idShort" :class="index % 2 === 0 ? 'tableEven' : 'bg-tableOdd'">
                                 <td>
                                     <div class="text-subtitleText text-caption">
-                                        <span>{{ furtherInfo.idShort }}</span>
+                                        <span>{{ nameToDisplay(furtherInfo) }}</span>
                                         <v-tooltip v-if="furtherInfo.description && furtherInfo.description.length > 0" activator="parent" open-delay="600" transition="slide-y-transition" max-width="360px" location="bottom">
                                             <div v-for="(description, i) in furtherInfo.description" :key="i" class="text-caption"><span class="font-weight-bold">{{ description.language + ': ' }}</span>{{ description.text }}</div>
                                         </v-tooltip>
@@ -278,6 +278,14 @@ export default defineComponent({
                 });
             }
         },
+
+        nameToDisplay(sme: any) {
+            if (sme.displayName) {
+                let displayNameEn = sme.displayName.find((displayName: any) => { return (displayName.language === 'en' && displayName.text !== ''); });
+                if (displayNameEn && displayNameEn.text) return displayNameEn.text;
+            }
+            return (sme.idShort ? sme.idShort : '');
+        },
     },
 });
 </script>
diff --git a/aas-gui/Frontend/aas-web-gui/src/components/UIComponents/GenericDataVisu.vue b/aas-gui/Frontend/aas-web-gui/src/components/UIComponents/GenericDataVisu.vue
@@ -3,7 +3,7 @@
         <v-expansion-panels multiple class="mt-3">
             <v-expansion-panel v-for="(submodelElement, index) in localSubmodelElementData" :key="submodelElement.id">
                 <v-expansion-panel-title color="elevatedCard">
-                    <span v-if="submodelElement.idShort">{{ submodelElement.idShort }}</span>
+                    <span v-if="submodelElement.idShort">{{ nameToDisplay(submodelElement) }}</span>
                     <span v-else>{{ 'Element ' + (index + 1) }}</span>
                 </v-expansion-panel-title>
                 <v-expansion-panel-text>
@@ -121,6 +121,14 @@ export default defineComponent({
             // console.log('SubmodelElementData: ', submodelElementData);
             this.localSubmodelElementData = submodelElementData;
         },
+
+        nameToDisplay(sme: any) {
+            if (sme.displayName) {
+                let displayNameEn = sme.displayName.find((displayName: any) => { return (displayName.language === 'en' && displayName.text !== ''); });
+                if (displayNameEn && displayNameEn.text) return displayNameEn.text;
+            }
+            return (sme.idShort ? sme.idShort : '');
+        },
         
     },
 });