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.

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

Showing name of AAS in submodel list component and autoscrolling to selected AAS #97

Merged
merged 6 commits into from
Nov 13, 2024
Merged
Show file tree
Hide file tree
Changes from 5 commits
Commits
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
20 changes: 16 additions & 4 deletions aas-web-ui/src/components/AASTreeview.vue
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,16 @@
<v-card color="rgba(0,0,0,0)" elevation="0">
<v-card-title style="padding: 15px 16px 16px">
<!-- TODO: Add Searchfield to filter the Treeview -->
AAS Treeview
<v-row align="center">
<v-col cols="auto">
<span>AAS Treeview</span>
</v-col>
<v-col v-if="nameToDisplay(SelectedAAS)" cols="auto" class="pl-1 pt-2">
<v-chip size="x-small" color="primary" label border>{{
'AAS: ' + nameToDisplay(SelectedAAS)
}}</v-chip>
</v-col>
</v-row>
</v-card-title>
<v-divider></v-divider>
<v-card-text style="overflow-y: auto; height: calc(100vh - 170px)">
Expand Down Expand Up @@ -160,16 +169,19 @@
this.submodelData = []; // reset Treeview Data
// retrieve AAS from endpoint
const shellHref = this.extractEndpointHref(this.selectedAAS, 'AAS-3.0');
let path = shellHref + '/submodel-refs';
let context = 'retrieving Submodel References';
let path = shellHref;
let context = 'retrieving AAS Data';
let disableMessage = false;
this.getRequest(path, context, disableMessage)
.then(async (response: any) => {
if (response.success) {
// execute if the Request was successful
try {
let AAS = response.data;
AAS.endpoints = this.SelectedAAS.endpoints;
this.aasStore.dispatchSelectedAAS(AAS); // dispatch the selected AAS to the Store
// request submodels from the retrieved AAS (top layer of the Treeview)
let submodelData = await this.requestSubmodels(response.data.result);
let submodelData = await this.requestSubmodels(AAS.submodels);
// set the isActive prop of the initialNode if it exists and the initialUpdate flag is set
if (this.initialUpdate && this.initialNode) {
let expandedSubmodelData = this.expandTree(submodelData, this.initialNode); // Update the Treeview to expand until the initially set node is reached
Expand Down
30 changes: 29 additions & 1 deletion aas-web-ui/src/components/AppNavigation/AASList.vue
Original file line number Diff line number Diff line change
Expand Up @@ -43,8 +43,9 @@
<!-- AAS List -->
<v-list nav class="bg-card card pa-0">
<v-virtual-scroll
ref="virtualScroll"
:items="AASData"
item-height="48"
:item-height="56"
:height="isMobile ? 'calc(100svh - 170px)' : 'calc(100vh - 218px)'"
class="pb-2 bg-card">
<template #default="{ item }">
Expand Down Expand Up @@ -266,6 +267,11 @@
return this.navigationStore.getTriggerAASListReload;
},

// get trigger signal for AAS List scroll from store
triggerAASListScroll() {
return this.navigationStore.getTriggerAASListScroll;
},

// Get the AAS Repository URL from the Store
aasRepoURL() {
return this.navigationStore.getAASRepoURL;
Expand Down Expand Up @@ -299,6 +305,11 @@
this.navigationStore.dispatchTriggerAASListReload(false);
}
},

// watch for changes in the trigger for AAS List scroll
triggerAASListScroll() {
this.scrollToSelectedAAS();
},
},

mounted() {
Expand Down Expand Up @@ -368,6 +379,7 @@
});
this.AASData = Object.freeze(sortedData); // store the sorted data in the AASData variable
this.unfilteredAASData = sortedData; // make a copy of the sorted data and store it in the unfilteredAASData variable
this.scrollToSelectedAAS(); // scroll to the selected AAS
if (this.statusCheck) {
this.checkAASStatus(); // check the AAS Status
}
Expand Down Expand Up @@ -646,6 +658,22 @@
this.deleteDialogShowing = true;
this.aasToDelete = AAS;
},

async scrollToSelectedAAS() {
// Find the index of the selected item
const index = this.AASData.findIndex((item: any) => this.isSelected(item));
const virtualScrollRef = this.$refs.virtualScroll as any;

if (index !== -1 && virtualScrollRef) {
const intervalId = setInterval(() => {
if (virtualScrollRef.$el.querySelector('.v-virtual-scroll__container').children.length > 0) {
// Access the scrollable container
virtualScrollRef.scrollToIndex(index);
clearInterval(intervalId);
}
}, 50);
}
},
},
});
</script>
Expand Down
4 changes: 2 additions & 2 deletions aas-web-ui/src/components/ComponentVisualization.vue
Original file line number Diff line number Diff line change
Expand Up @@ -14,9 +14,9 @@
<v-col cols="auto">
<span>Visualization</span>
</v-col>
<v-col v-if="SelectedAAS?.idShort" cols="auto" class="pl-1">
<v-col v-if="nameToDisplay(SelectedAAS)" cols="auto" class="pl-1">
<v-chip size="x-small" color="primary" label border>{{
'AAS: ' + SelectedAAS?.idShort
'AAS: ' + nameToDisplay(SelectedAAS)
}}</v-chip>
</v-col>
</v-row>
Expand Down
4 changes: 2 additions & 2 deletions aas-web-ui/src/components/Dashboard/DashboardElement.vue
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,8 @@
<v-col cols="auto" class="pr-0">
<v-card-title>{{ localDashboardData.title }}</v-card-title>
</v-col>
<v-col v-if="AASData?.idShort" cols="auto" class="pl-0">
<v-chip size="x-small" color="primary" label border>{{ 'AAS: ' + AASData?.idShort }}</v-chip>
<v-col v-if="nameToDisplay(AASData)" cols="auto" class="pl-0">
<v-chip size="x-small" color="primary" label border>{{ 'AAS: ' + nameToDisplay(AASData) }}</v-chip>
</v-col>
<v-spacer></v-spacer>
<v-col cols="auto" density="compact" justify="end" class="py-0">
Expand Down
18 changes: 10 additions & 8 deletions aas-web-ui/src/components/SubmodelList.vue
Original file line number Diff line number Diff line change
@@ -1,18 +1,17 @@
<template>
<v-container fluid class="pa-0">
<v-card color="card" elevation="0">
<v-card-title v-if="!isMobile" style="padding: 15px 16px 16px"> Submodel List </v-card-title>
<v-card-title v-else style="padding: 15px 16px 16px">
<v-card-title style="padding: 15px 16px 16px">
<v-row align="center">
<v-col cols="auto" class="pa-0">
<v-col v-if="isMobile" cols="auto" class="pa-0">
<v-btn class="ml-2" variant="plain" icon="mdi-chevron-left" @click="backToAASList()"></v-btn>
</v-col>
<v-col cols="auto">
<span>Submodel List</span>
</v-col>
<v-col v-if="SelectedAAS?.idShort" cols="auto" class="pl-1">
<v-col v-if="nameToDisplay(SelectedAAS)" cols="auto" class="pl-1 pt-2">
<v-chip size="x-small" color="primary" label border>{{
'AAS: ' + SelectedAAS?.idShort
'AAS: ' + nameToDisplay(SelectedAAS)
}}</v-chip>
</v-col>
</v-row>
Expand Down Expand Up @@ -176,16 +175,19 @@
this.submodelData = []; // reset Submdoel List Data
// retrieve AAS from endpoint
const shellHref = this.extractEndpointHref(this.SelectedAAS, 'AAS-3.0');
let path = shellHref + '/submodel-refs';
let context = 'retrieving Submodel References';
let path = shellHref;
let context = 'retrieving AAS Data';
let disableMessage = false;
this.getRequest(path, context, disableMessage)
.then(async (response: any) => {
if (response.success) {
// execute if the Request was successful
try {
let AAS = response.data;
AAS.endpoints = this.SelectedAAS.endpoints;
this.aasStore.dispatchSelectedAAS(AAS); // dispatch the selected AAS to the Store
// request submodels from the retrieved AAS
let submodelData = await this.requestSubmodels(response.data.result);
let submodelData = await this.requestSubmodels(AAS.submodels);
if (this.initialUpdate && this.initialNode) {
// set the isActive Property of the initial Node to true and dispatch it to the store
submodelData.forEach((submodel: any) => {
Expand Down
2 changes: 2 additions & 0 deletions aas-web-ui/src/mixins/SubmodelElementHandling.ts
Original file line number Diff line number Diff line change
Expand Up @@ -371,6 +371,7 @@ export default defineComponent({
// dispatch the AAS set by the ReferenceElement to the store
this.aasStore.dispatchSelectedAAS(referencedAAS);
this.navigationStore.dispatchTriggerAASSelected();
this.navigationStore.dispatchTriggerAASListScroll();
// Request the referenced SubmodelElement
const elementPath = path;
const context = 'retrieving SubmodelElement';
Expand Down Expand Up @@ -419,6 +420,7 @@ export default defineComponent({
// console.log('AAS:', aas, 'Endpoint:', endpoint);
this.aasStore.dispatchSelectedAAS(aas);
this.navigationStore.dispatchTriggerAASSelected();
this.navigationStore.dispatchTriggerAASListScroll();
this.aasStore.dispatchNode({});
},

Expand Down
5 changes: 5 additions & 0 deletions aas-web-ui/src/store/NavigationStore.ts
Original file line number Diff line number Diff line change
Expand Up @@ -55,6 +55,7 @@ export const useNavigationStore = defineStore({
platform: {} as PlatformType,
plugins: [] as PluginType[],
triggerAASListReload: false as boolean,
triggerAASListScroll: false as boolean,
triggerAASSelected: false as boolean,
}),

Expand All @@ -73,6 +74,7 @@ export const useNavigationStore = defineStore({
getPlatform: (state) => state.platform,
getPlugins: (state) => state.plugins,
getTriggerAASListReload: (state) => state.triggerAASListReload,
getTriggerAASListScroll: (state) => state.triggerAASListScroll,
getTriggerAASSelected: (state) => state.triggerAASSelected,
},

Expand Down Expand Up @@ -125,6 +127,9 @@ export const useNavigationStore = defineStore({
dispatchTriggerAASListReload(triggerAASListReload: boolean) {
this.triggerAASListReload = triggerAASListReload;
},
dispatchTriggerAASListScroll() {
this.triggerAASListScroll = !this.triggerAASListScroll;
},
dispatchTriggerAASSelected() {
this.triggerAASSelected = !this.triggerAASSelected;
},
Expand Down