Skip to content

Commit

Permalink
Fix list details heights and improve style
Browse files Browse the repository at this point in the history
  • Loading branch information
@aaronzi
aaronzi committed Dec 19, 2024
1 parent 77b0553 commit 707fc3c
Show file tree
Hide file tree
Showing 2 changed files with 87 additions and 43 deletions.
37 changes: 26 additions & 11 deletions aas-web-ui/src/components/AppNavigation/AASList.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
<v-card color="card" elevation="0">
<!-- Title Bar in the AAS List -->
<v-card-title v-if="singleAas && !isMobile" style="padding: 16px 16px 16px"> Asset & AAS </v-card-title>
<v-card-title v-else-if="!isMobile">
<v-card-title v-if="!singleAas">
<v-row align="center">
<v-col cols="auto" class="px-0">
<v-tooltip open-delay="600" location="bottom" :disabled="isMobile">
Expand Down Expand Up @@ -38,7 +38,7 @@
</v-col>
</v-row>
</v-card-title>
<v-divider></v-divider>
<v-divider v-if="!singleAas"></v-divider>
<!-- AAS List -->
<v-list
v-if="!singleAas"
Expand All @@ -47,13 +47,7 @@
:style="{
display: 'flex',
'flex-direction': 'column',
height: isMobile
? selectedAAS && Object.keys(selectedAAS).length > 0
? '176px' // 3x AAS items
: 'calc(100vh - 64px - 64px - 40px - 2px)' // Full height - header - title - footer - 2x divider
: selectedAAS && Object.keys(selectedAAS).length > 0
? 'calc(50vh - 64px - 40px - 2px - 1px)' // Half height - header - footer - 2x divider - border
: 'calc(100vh - 64px - 64px - 48px - 40px - 2px)', // Full height - header - title - collapse button - footer - 2x divider
height: listHeight,
}">
<v-virtual-scroll ref="virtualScrollRef" :items="AASData" :item-height="56" class="pb-2 bg-card">
<template #default="{ item }">
Expand Down Expand Up @@ -128,7 +122,7 @@
</v-virtual-scroll>
</v-list>
<!-- AAS Details (only visible if the Information Button is pressed on an AAS) -->
<AASListDetails v-if="selectedAAS && Object.keys(selectedAAS).length > 0" />
<AASListDetails v-if="selectedAAS && Object.keys(selectedAAS).length > 0" :status="AASStatus" />
<!-- Collapse/extend Sidebar Button -->
<v-list v-if="!isMobile" nav style="width: 100%; z-index: 9000" class="bg-detailsCard pa-0">
<v-divider style="margin-left: -8px; margin-right: -8px"></v-divider>
Expand Down Expand Up @@ -208,6 +202,7 @@
const aasToDelete = ref({}); // Variable to store the AAS to be deleted
const deleteLoading = ref(false); // Variable to store if the AAS is being deleted
const virtualScrollRef: Ref<VirtualScrollInstance | null> = ref(null); // Reference to the Virtual Scroll Component
const AASStatus = ref(''); // Variable to store the AAS Status
// Computed Properties
const isMobile = computed(() => navigationStore.getIsMobile); // Check if the current Device is a Mobile Device
Expand All @@ -223,6 +218,21 @@
const triggerAASListReload = computed(() => navigationStore.getTriggerAASListReload); // Get the trigger signal for AAS List reload from store
const triggerAASListScroll = computed(() => navigationStore.getTriggerAASListScroll); // Get the trigger signal for AAS List scroll from store
const singleAas = computed(() => envStore.getSingleAas); // Get the single AAS state from the Store
const listHeight = computed(() => {
if (isMobile.value) {
if (selectedAAS.value && Object.keys(selectedAAS.value).length > 0) {
return '231px'; // 4x AAS items
} else {
return 'calc(100vh - 64px - 40px - 64px - 2px)'; // Full height - header - footer - Searchbar - 2x divider
}
} else {
if (selectedAAS.value && Object.keys(selectedAAS.value).length > 0) {
return 'calc(50vh - 64px - 64px - 2px - 1px)'; // Half height - header - title - 2x divider - border
} else {
return 'calc(100vh - 64px - 64px - 48px - 40px - 2px)'; // Full height - header - title - collapse button - footer - 2x divider
}
}
});
// Watchers
// Watch the AAS Registry URL for changes and reload the AAS List if the URL changes
Expand Down Expand Up @@ -343,7 +353,7 @@
// Function to check the AAS Status
function checkAASStatus() {
// console.log('Check AAS Status: ', AAS);
// console.log('Check AAS Status');
// iterate over all AAS in the AAS List
AASData.value.forEach((AAS: any) => {
const aasEndpopint = extractEndpointHref(AAS, 'AAS-3.0');
Expand Down Expand Up @@ -393,6 +403,7 @@
}
if (selectedAAS.value && Object.keys(selectedAAS.value).length > 0 && selectedAAS.value.id === AAS.id) {
// Deselect AAS
AASStatus.value = '';
router.push({ query: {} });
aasStore.dispatchSelectedAAS({});
} else {
Expand All @@ -401,6 +412,7 @@
scrollToAasAfterDispatch = true;
}
// Select AAS
AASStatus.value = AAS.status;
const aasEndpoint = extractEndpointHref(AAS, 'AAS-3.0');
// Add AAS Endpoint as Query to the Router
router.push({ query: { aas: aasEndpoint } });
Expand All @@ -422,6 +434,9 @@
const aasEndpointFromList = extractEndpointHref(AAS, 'AAS-3.0');
const aasEndpointSelected = extractEndpointHref(selectedAAS.value, 'AAS-3.0');
let isSelected = aasEndpointFromList === aasEndpointSelected;
if (isSelected) {
AASStatus.value = AAS.status;
}
return isSelected;
}
Expand Down
93 changes: 61 additions & 32 deletions aas-web-ui/src/components/AppNavigation/AASListDetails.vue
View file
Original file line number Diff line number Diff line change
@@ -1,21 +1,30 @@
<template>
<v-container class="pa-0" fluid>
<v-divider v-if="!singleAas"></v-divider>
<!-- AAS Details Card (only visible if the Information Button is pressed on an AAS) -->
<v-expand-transition>
<v-card-text
class="bg-detailsCard pa-0"
:class="isMobile ? 'v-card--reveal-mobile' : 'v-card--reveal-desktop'"
style="overflow-y: auto"
:style="{
height: isMobile
? singleAas
? ''
: 'calc(100vh - 176px - 40px - 64px)' // Full height - 3x AAS items - footer - header
: singleAas
? 'calc(100vh - 64px - 64px - 48px - 40px - 2px)' // Full height - header - title - collapse button - footer - 2x divider
: 'calc(50vh - 64px - 48px)', // Half height - header - collapse button
}">
<v-sheet>
<v-divider v-if="!singleAas || !isMobile"></v-divider>
<v-card-title class="bg-detailsHeader pl-3">
<v-row align="center" class="pl-4" style="height: 40px">
<!-- AAS Status -->
<div class="text-caption">{{ 'Status: ' }}</div>
<div class="text-caption ml-1" :class="statusColor">
{{ status }}
</div>
<!-- Jump to Submodel List on mobile -->
<v-spacer v-if="isMobile"></v-spacer>
<v-btn
v-if="isMobile"
color="primary"
density="compact"
variant="tonal"
border
append-icon="mdi-chevron-right"
class="text-none"
text="Submodels"
@click="gotoSubmodelList()" />
</v-row>
</v-card-title>
<v-divider></v-divider>
<v-card-text class="bg-detailsCard pa-0" style="overflow-y: auto" :style="{ height: detailsListHeight }">
<!-- Asset Information -->
<!-- 1) AssetInformation is mandatory for an AssetAdministrationShell -->
<!-- 2) Minimal (empty) AssetInformation (generated with aas4j) will be { assetKind: null } -->
Expand Down Expand Up @@ -58,24 +67,9 @@
:description-object="selectedAAS.description"
:description-title="'Description'"
:small="false"></DescriptionElement>
<template v-if="isMobile">
<v-divider class="mt-2"></v-divider>
<v-list-item>
<template #title>
<div class="mt-2 text-subtitle-2">
{{ 'Submodel List' }}
<v-btn
class="ml-2"
variant="plain"
icon="mdi-chevron-right"
@click="gotoSubmodelList()"></v-btn>
</div>
</template>
</v-list-item>
</template>
</v-list>
</v-card-text>
</v-expand-transition>
</v-sheet>
</v-container>
</template>

Expand Down Expand Up @@ -104,6 +98,13 @@
},
mixins: [RequestHandling, SubmodelElementHandling],
props: {
status: {
type: String,
default: 'online',
},
},
setup() {
const navigationStore = useNavigationStore();
const aasStore = useAASStore();
Expand Down Expand Up @@ -140,6 +141,33 @@
singleAas() {
return this.envStore.getSingleAas;
},
detailsListHeight() {
if (this.isMobile) {
if (this.singleAas) {
return 'calc(100vh - 40px - 64px - 34px)'; // Full height - footer - header - details header (divider)
} else {
return 'calc(100vh - 231px - 40px - 64px - 36px - 64px)'; // Full height - 4x AAS items - footer - header - details header (divider) - Searchbar
}
} else {
if (this.singleAas) {
return 'calc(100vh - 64px - 64px - 48px - 40px - 35px)'; // Full height - header - title - collapse button - footer - details header (divider)
} else {
return 'calc(50vh - 40px - 48px - 33px)'; // Half height - footer - collapse button - details header (divider)
}
}
},
statusColor() {
// console.log('status: ', this.status);
if (this.status === 'online') {
return 'text-success';
} else if (this.status === 'check disabled') {
return 'text-warning';
} else {
return 'text-error';
}
},
},
watch: {
Expand Down Expand Up @@ -183,6 +211,7 @@
gotoSubmodelList() {
this.router.push({
path: '/submodellist',
query: { aas: this.route.query.aas },
});
},
},
Expand Down

0 comments on commit 707fc3c

Please sign in to comment.