Fixes problems with the DPP Demo Module

Author: aaronzi

aas-web-ui/public/wasm/web-ifc-mt.wasm

@@ -45,37 +45,10 @@
                             icon-color="background">
                             <template #opposite>
                                 <div
-                                    v-for="pcfLifeCyclePhase in pcfSMC.value
-                                        .find(
-                                            (sme: any) =>
-                                                checkIdShort(sme, 'LifeCyclePhases') ||
-                                                checkSemanticId(
-                                                    sme,
-                                                    'https://admin-shell.io/idta/CarbonFootprint/LifeCyclePhases/1/0'
-                                                )
-                                        )
-                                        .value.filter(
-                                            (sme: any) =>
-                                                checkIdShort(sme, 'LifeCyclePhase') ||
-                                                checkSemanticId(sme, '0173-1#02-ABG858#003')
-                                        )"
+                                    v-for="pcfLifeCyclePhase in getLifeCyclePhases(pcfSMC)"
                                     :key="pcfLifeCyclePhase.idShort"
                                     class="pr-6">
-                                    <p
-                                        v-if="
-                                            pcfLifeCyclePhase?.valueId?.keys &&
-                                            Array.isArray(pcfLifeCyclePhase?.valueId?.keys) &&
-                                            pcfLifeCyclePhase?.valueId?.keys.length > 0
-                                        ">
-                                        {{
-                                            getPcfLifeCyclePhaseFromId(
-                                                pcfLifeCyclePhase?.valueId?.keys[0]?.value
-                                            )?.value.replaceAll(', ', '\n')
-                                        }}
-                                    </p>
-                                    <p v-else>
-                                        {{ valueToDisplay(pcfLifeCyclePhase).replaceAll(', ', '\n') }}
-                                    </p>
+                                    <p>{{ formatLifeCyclePhaseLabel(pcfLifeCyclePhase) }}</p>
                                 </div>
                             </template>
                             <div class="pl-6">
@@ -457,4 +430,35 @@
 
         showPieChart.value = pieChartData.value.length > 0;
     }
+
+    function getLifeCyclePhases(pcfSMC: any): Array<any> {
+        if (!pcfSMC?.value || !Array.isArray(pcfSMC.value)) return [];
+
+        const lifeCyclePhasesSml = pcfSMC.value.find(
+            (sme: any) =>
+                checkIdShort(sme, 'LifeCyclePhases') ||
+                checkSemanticId(sme, 'https://admin-shell.io/idta/CarbonFootprint/LifeCyclePhases/1/0')
+        );
+
+        if (!lifeCyclePhasesSml?.value || !Array.isArray(lifeCyclePhasesSml.value)) return [];
+
+        return lifeCyclePhasesSml.value.filter(
+            (sme: any) => checkIdShort(sme, 'LifeCyclePhase') || checkSemanticId(sme, '0173-1#02-ABG858#003')
+        );
+    }
+
+    function formatLifeCyclePhaseLabel(pcfLifeCyclePhase: any): string {
+        const lifeCyclePhaseIdRaw = pcfLifeCyclePhase?.valueId?.keys?.[0]?.value;
+
+        if (typeof lifeCyclePhaseIdRaw === 'string' && lifeCyclePhaseIdRaw.trim() !== '') {
+            const normalizedLifeCyclePhaseId = lifeCyclePhaseIdRaw.trim();
+            const phaseInfo = getPcfLifeCyclePhaseFromId(normalizedLifeCyclePhaseId);
+            if (phaseInfo?.value && typeof phaseInfo.value === 'string' && phaseInfo.value.trim() !== '') {
+                return phaseInfo.value.replaceAll(', ', '\n');
+            }
+        }
+
+        const fallbackLabel = valueToDisplay(pcfLifeCyclePhase);
+        return typeof fallbackLabel === 'string' ? fallbackLabel.replaceAll(', ', '\n') : '';
+    }
 </script>

aas-web-ui/public/wasm/web-ifc-node.wasm

@@ -173,7 +173,8 @@
         for (const sme of nameplateSubmodel.value.submodelElements) {
             for (const idShort of productPropertyIdShorts) {
                 if (checkIdShort(sme, idShort) && hasValue(sme)) {
-                    let value = valueToDisplay(sme, '');
+                    const fallbackValue = firstLangStringSetText(sme);
+                    let value = valueToDisplay(sme, 'en', fallbackValue);
 
                     if (checkIdShort(sme, 'CountryOfOrigin')) {
                         value = getCountryName(value, value) || value;
@@ -190,10 +191,11 @@
 
             for (const idShort of manufacturerPropertyIdShorts) {
                 if (checkIdShort(sme, idShort) && hasValue(sme)) {
+                    const fallbackValue = firstLangStringSetText(sme);
                     generalRows.value.push({
                         idShort: idShort,
                         label: nameToDisplay(sme, 'en', idShort),
-                        value: idShort === 'CompanyLogo' ? 'Logo' : valueToDisplay(sme, ''),
+                        value: idShort === 'CompanyLogo' ? 'Logo' : valueToDisplay(sme, 'en', fallbackValue),
                         type: idShort === 'CompanyLogo' ? 'logo' : 'text',
                     });
                 }

aas-web-ui/public/wasm/web-ifc.wasm

@@ -15,8 +15,15 @@
                                     :aspect-ratio="productImageAspectRatio"
                                     class="w-100 mx-auto border rounded-lg"
                                     style="max-width: 300px"
-                                    cover />
-                                <v-icon v-else size="48" color="medium-emphasis">mdi-image-off-outline</v-icon>
+                                    cover
+                                    @error="onProductImageError" />
+                                <v-sheet
+                                    v-else
+                                    class="w-100 mx-auto border rounded-lg d-flex justify-center align-center"
+                                    style="max-width: 300px"
+                                    min-height="140">
+                                    <v-icon size="48" color="medium-emphasis">mdi-image-off-outline</v-icon>
+                                </v-sheet>
                             </v-sheet>
                         </v-col>
                         <v-col cols="12" md="6" class="pa-2">
@@ -148,19 +155,34 @@
                 String(defaultThumbnail.isExternal).toLowerCase() === 'true' ||
                 urlRegex.test(thumbnailPath);
 
-            productImageSrc.value = await getBlobUrl(thumbnailPath, isExternalThumbnail);
-            updateProductImageAspectRatio(productImageSrc.value);
+            try {
+                productImageSrc.value = await getBlobUrl(thumbnailPath, isExternalThumbnail);
+                updateProductImageAspectRatio(productImageSrc.value);
+            } catch {
+                productImageSrc.value = '';
+                productImageAspectRatio.value = 1;
+            }
             return;
         }
 
         const imageUrl = await getProductImageUrlByAasId(selectedAas.value.id);
 
         if (imageUrl && imageUrl.url && imageUrl.url.trim() !== '') {
-            productImageSrc.value = await getBlobUrl(imageUrl.url.trim(), imageUrl.isExternal);
-            updateProductImageAspectRatio(productImageSrc.value);
+            try {
+                productImageSrc.value = await getBlobUrl(imageUrl.url.trim(), imageUrl.isExternal);
+                updateProductImageAspectRatio(productImageSrc.value);
+            } catch {
+                productImageSrc.value = '';
+                productImageAspectRatio.value = 1;
+            }
         }
     }
 
+    function onProductImageError(): void {
+        productImageSrc.value = '';
+        productImageAspectRatio.value = 1;
+    }
+
     function updateProductImageAspectRatio(src: string): void {
         if (!src || src.trim() === '') {
             productImageAspectRatio.value = 1;