Fix for issue #94

aas-web-ui/public/config.json

@@ -14,6 +14,6 @@
   "influxdbToken": "",
   "keycloakUrl": "",
   "keycloakRealm": "",
-  "keycloakClientId": ""
+  "keycloakClientId": "",
   "endpointConfigAvailable": true
 }

aas-web-ui/src/components/AppNavigation/AASList.vue

@@ -310,6 +310,13 @@
                 }
             },
 
+            // watch for changes in the selected AAS
+            selectedAAS() {
+                if (this.selectedAAS && Object.keys(this.selectedAAS).length > 0) {
+                    this.showDetailsCard = false;
+                }
+            },
+
             // watch for changes in the trigger for AAS List scroll
             triggerAASListScroll() {
                 this.scrollToSelectedAAS();
@@ -538,18 +545,21 @@
                 const shellHrefAASfromList = this.extractEndpointHref(AAS, 'AAS-3.0');
                 const shellHrefSelectedAAS = this.extractEndpointHref(this.selectedAAS, 'AAS-3.0');
                 let isSelected = shellHrefAASfromList === shellHrefSelectedAAS;
-                if (isSelected && this.showDetailsCard) {
-                    // update data of detailsCard
-                    this.detailsObject = AAS;
-                }
                 return isSelected;
             },
 
             // Function to display the AAS Details
             showAASDetails(AAS: any) {
                 // console.log('Show Details: ', AAS);
                 this.detailsObject = AAS;
-                if (AAS) this.showDetailsCard = true;
+                if (this.showDetailsCard) {
+                    this.showDetailsCard = false;
+                    this.$nextTick(() => {
+                        this.showDetailsCard = true;
+                    });
+                } else {
+                    if (AAS) this.showDetailsCard = true;
+                }
             },
 
             // Function to remove the AAS from the AAS Registry

aas-web-ui/src/components/AppNavigation/AASListDetails.vue

@@ -2,11 +2,18 @@
     <v-container class="pa-0" fluid>
         <!-- AAS Details Card (only visible if the Information Button is pressed on an AAS) -->
         <v-expand-transition>
-            <div
+            <v-card
                 v-if="showDetailsCard"
-                class="transition-fast-in-fast-out"
-                :class="isMobile ? 'v-card--reveal-mobile' : 'v-card--reveal-desktop'"
-                style="z-index: 9000">
+                flat
+                tile
+                color="detailsCard"
+                :style="{
+                    display: 'flex',
+                    'flex-direction': 'column',
+                    height: isMobile ? 'calc(100vh - 104px)' : '',
+                    'max-height': isMobile ? '' : '50vh',
+                }"
+                :class="isMobile ? 'v-card--reveal-mobile' : 'v-card--reveal-desktop'">
                 <v-divider></v-divider>
                 <v-card-title class="bg-detailsHeader pl-3">
                     <v-row align="center" class="pl-4">
@@ -28,29 +35,42 @@
                     </v-row>
                 </v-card-title>
                 <v-divider></v-divider>
-                <!-- AAS Details -->
-                <v-list v-if="detailsObject" lines="one" nav class="bg-detailsCard">
-                    <!-- AAS Identification -->
-                    <IdentificationElement
-                        class="mb-2"
-                        :identification-object="detailsObject"
-                        :model-type="'AAS'"
-                        :id-type="'Identification (ID)'"
-                        :name-type="'idShort'"></IdentificationElement>
-                    <v-divider v-if="detailsObject.description && detailsObject.description.length > 0"></v-divider>
-                    <!-- AAS Description -->
-                    <DescriptionElement
-                        v-if="detailsObject.description && detailsObject.description.length > 0"
-                        :description-object="detailsObject.description"
-                        :description-title="'Description'"
-                        :small="false"></DescriptionElement>
-                </v-list>
-                <v-divider v-if="assetInformation"></v-divider>
-                <!-- Asset Information -->
-                <AssetInformation
-                    v-if="assetInformation && Object.keys(assetInformation).length > 0"
-                    :asset-object="assetInformation"></AssetInformation>
-            </div>
+                <v-card-text class="pa-0" style="overflow-y: auto">
+                    <!-- Asset Information -->
+                    <AssetInformation
+                        v-if="assetInformation && Object.keys(assetInformation).length > 0"
+                        :asset-object="assetInformation"></AssetInformation>
+                    <v-divider v-if="assetInformation"></v-divider>
+                    <!-- AAS Details -->
+                    <v-list v-if="detailsObject" lines="one" nav class="bg-detailsCard">
+                        <!-- AAS Identification -->
+                        <IdentificationElement
+                            class="mb-2"
+                            :identification-object="detailsObject"
+                            :model-type="'AAS'"
+                            :id-type="'Identification (ID)'"
+                            :name-type="'idShort'"></IdentificationElement>
+                        <v-divider
+                            v-if="detailsObject.displayName && detailsObject.displayName.length > 0"
+                            class="mt-2"></v-divider>
+                        <!-- SubmodelELement DisplayName -->
+                        <DisplayNameElement
+                            v-if="detailsObject.displayName && detailsObject.displayName.length > 0"
+                            :display-name-object="detailsObject.displayName"
+                            :display-name-title="'DisplayName'"
+                            :small="false"></DisplayNameElement>
+                        <v-divider
+                            v-if="detailsObject.description && detailsObject.description.length > 0"
+                            class="mt-2"></v-divider>
+                        <!-- AAS Description -->
+                        <DescriptionElement
+                            v-if="detailsObject.description && detailsObject.description.length > 0"
+                            :description-object="detailsObject.description"
+                            :description-title="'Description'"
+                            :small="false"></DescriptionElement>
+                    </v-list>
+                </v-card-text>
+            </v-card>
         </v-expand-transition>
     </v-container>
 </template>
@@ -59,6 +79,7 @@
     import { defineComponent } from 'vue';
     import AssetInformation from '@/components/UIComponents/AssetInformation.vue';
     import DescriptionElement from '@/components/UIComponents/DescriptionElement.vue';
+    import DisplayNameElement from '@/components/UIComponents/DisplayNameElement.vue';
     import IdentificationElement from '@/components/UIComponents/IdentificationElement.vue';
     import RequestHandling from '@/mixins/RequestHandling';
     import SubmodelElementHandling from '@/mixins/SubmodelElementHandling';
@@ -68,11 +89,18 @@
         name: 'AASListDetails',
         components: {
             IdentificationElement,
+            DisplayNameElement,
             DescriptionElement,
             AssetInformation,
         },
         mixins: [RequestHandling, SubmodelElementHandling],
-        props: ['detailsObject', 'showDetailsCard'], // Props from the parent component with the AAS Details Object and the boolean to show the AAS Details Card
+        props: {
+            detailsObject: {
+                type: Object,
+                default: () => ({}), // Object with the AAS Details
+            },
+            showDetailsCard: Boolean, // Boolean to show the AAS Details Card
+        },
 
         setup() {
             const navigationStore = useNavigationStore();
@@ -96,7 +124,7 @@
         },
 
         watch: {
-            detailsObject() {
+            showDetailsCard() {
                 // If the AAS Details Card is opened, request asset-information
                 if (this.showDetailsCard) {
                     this.fetchAssetDetails();
@@ -140,17 +168,17 @@
     });
 </script>
 
-<style>
+<style lang="css" scoped>
     .v-card--reveal-mobile {
         bottom: 0px;
-        opacity: 0.96;
         position: absolute;
         width: 100%;
+        z-index: 9000;
     }
     .v-card--reveal-desktop {
         bottom: 48px;
-        opacity: 0.96;
         position: absolute;
         width: 100%;
+        z-index: 9000;
     }
 </style>

aas-web-ui/src/components/UIComponents/AssetInformation.vue

@@ -2,6 +2,7 @@
     <v-container class="pa-0" fluid>
         <v-list lines="one" nav class="bg-detailsCard">
             <IdentificationElement
+                id="assetInformationIdentification"
                 class="mb-2"
                 :identification-object="assetInfo"
                 :model-type="assetObject.assetKind"
@@ -11,7 +12,7 @@
                 v-if="assetObject.defaultThumbnail"
                 :src="assetObject.defaultThumbnail.path"
                 max-width="100%"
-                max-height="100%"
+                :max-height="thumbnailMaxHeight"
                 contain
                 style="border-radius: 4px"></v-img>
         </v-list>
@@ -29,6 +30,12 @@
         },
         props: ['assetObject'],
 
+        data() {
+            return {
+                thumbnailMaxHeight: 0,
+            };
+        },
+
         computed: {
             assetInfo() {
                 let assetInfo = {
@@ -37,8 +44,52 @@
                 };
                 return assetInfo;
             },
+
+            screenHeight() {
+                return document.documentElement.clientHeight;
+            },
+        },
+
+        mounted() {
+            window.addEventListener('resize', this.handleResize);
+            this.handleResize();
+        },
+
+        beforeUnmount() {
+            window.removeEventListener('resize', this.handleResize);
         },
 
-        methods: {},
+        methods: {
+            handleResize() {
+                this.calcThumbnailMaxHeight();
+            },
+
+            calcThumbnailMaxHeight() {
+                const toolbarHeight = document.getElementsByClassName('v-toolbar')[0]?.clientHeight as number;
+                const footerHeight = document.getElementsByClassName('v-footer')[0]?.clientHeight as number;
+                const closeSidebarHeight = document.getElementById('closeAasList')?.clientHeight as number;
+                const titleAasListHeight = document.getElementById('titleAasList')?.clientHeight as number;
+                const assetInformationIdentificationHeight = document.getElementById('assetInformationIdentification')
+                    ?.clientHeight as number;
+
+                const availableHeight = (this.screenHeight -
+                    (toolbarHeight ? toolbarHeight : 0) -
+                    (titleAasListHeight ? titleAasListHeight : 0) -
+                    (assetInformationIdentificationHeight ? assetInformationIdentificationHeight : 0) -
+                    (closeSidebarHeight ? closeSidebarHeight : 0) -
+                    (footerHeight ? footerHeight : 0)) as number;
+
+                if (this.screenHeight < 600) {
+                    // xs display
+                    this.thumbnailMaxHeight = 1 * availableHeight;
+                } else if (this.screenHeight >= 600 && this.screenHeight < 1280) {
+                    // sm & md display
+                    this.thumbnailMaxHeight = 0.5 * availableHeight;
+                } else if (this.screenHeight >= 1280) {
+                    // lg & xl & xxl display
+                    this.thumbnailMaxHeight = 0.4 * availableHeight;
+                }
+            },
+        },
     });
 </script>