Skip to content

Commit

Permalink
v-empty-state for no existing submodels in selected aas
Browse files Browse the repository at this point in the history
  • Loading branch information
@seicke
seicke committed Dec 11, 2024
1 parent e8ea073 commit 6225944
Show file tree
Hide file tree
Showing 2 changed files with 87 additions and 81 deletions.
59 changes: 30 additions & 29 deletions aas-web-ui/src/components/AASTreeview.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,14 +29,19 @@
</template>
</v-list-item>
</div>
<!-- TODO: Replace with Vuetify Treeview Component when it get's released in Q1 2023 -->
<VTreeview
v-for="item in submodelData"
v-else
:key="item.id"
class="root"
:item="item"
:depth="0"></VTreeview>
<template v-else>
<v-empty-state
v-if="Object.keys(SelectedAAS).length > 0 && submodelData.length === 0"
title="No existing Submodels"
text="The selected AAS does not contain any Submodels"></v-empty-state>
<!-- TODO: Replace with Vuetify Treeview Component when it get's released in Q1 2023 -->
<VTreeview
v-for="item in submodelData"
:key="item.id"
class="root"
:item="item"
:depth="0"></VTreeview>
</template>
</v-card-text>
</v-card>
</v-container>
Expand Down Expand Up @@ -85,11 +90,6 @@
return this.aasStore.getSelectedAAS;
},
// get the trigger for AAS selection from Store
triggerAAS() {
return this.navigationStore.getTriggerAASSelected;
},
// gets loading State from Store
loading() {
return this.aasStore.getLoadingState;
Expand Down Expand Up @@ -117,7 +117,7 @@
watch: {
// initialize Treeview when AAS gets selected
triggerAAS() {
SelectedAAS() {
this.initializeTree();
},
Expand Down Expand Up @@ -156,7 +156,7 @@
methods: {
// Function to get the Submodels from the selected AAS (retrieved from the AAS with the provided endpoint)
initializeTree() {
// console.log('Initialize Treeview', this.initialUpdate, this.initialNode);
// console.log('Initialize Treeview', this.SelectedAAS, this.initialUpdate, this.initialNode);
// return if no endpoints are available
if (!this.SelectedAAS || !this.SelectedAAS.endpoints || this.SelectedAAS.endpoints.length === 0) {
// TODO: this seems to get executed on reload with a selected AAS
Expand All @@ -179,22 +179,23 @@
try {
let AAS = response.data;
AAS.endpoints = this.SelectedAAS.endpoints;
this.aasStore.dispatchSelectedAAS(AAS); // dispatch the selected AAS to the Store
if (!AAS.submodels) {
throw new Error('No Submodels found in AAS!');
}
// 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(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
// this.updateNode(this.initialNode); // set the isActive prop of the initialNode to true
this.initialUpdate = false;
this.initialNode = {};
// console.log('Expanded Treeview Data: ', expandedSubmodelData)
this.submodelData = expandedSubmodelData; // set the Treeview Data
if (AAS.submodels) {
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
// this.updateNode(this.initialNode); // set the isActive prop of the initialNode to true
this.initialUpdate = false;
this.initialNode = {};
// console.log('Expanded Treeview Data: ', expandedSubmodelData)
this.submodelData = expandedSubmodelData; // set the Treeview Data
} else {
this.submodelData = submodelData;
}
} else {
this.submodelData = submodelData; // set the Treeview Data
this.submodelData = []; // set the Treeview Data
// console.log('Treeview Data: ', this.submodelData)
}
} catch (error: any) {
Expand Down
109 changes: 57 additions & 52 deletions aas-web-ui/src/components/SubmodelList.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,36 +21,41 @@
<div v-if="loading">
<v-skeleton-loader type="list-item@6"></v-skeleton-loader>
</div>
<!-- List of Submodels -->
<v-list-item
v-for="submodel in submodelData"
v-else
:key="submodel.id"
color="primary"
nav
class="bg-listItem mb-2"
style="border-width: 1px"
:style="{
'border-color': submodel.isActive
? primaryColor + ' !important'
: isDark
? '#686868 !important'
: '#ABABAB !important',
}"
@click="toggleNode(submodel)">
<template #prepend>
<v-chip label border color="primary" size="x-small" class="mr-3">SM</v-chip>
</template>
<v-list-item-title :class="submodel.isActive ? 'text-primary' : ''">{{
submodel.idShort
}}</v-list-item-title>
<v-overlay
:model-value="submodel.isActive"
scrim="primary"
style="opacity: 0.2"
contained
persistent></v-overlay>
</v-list-item>
<template v-else>
<v-empty-state
v-if="Object.keys(SelectedAAS).length > 0 && submodelData.length === 0"
title="No existing Submodels"
text="The selected AAS does not contain any Submodels"></v-empty-state>
<!-- List of Submodels -->
<v-list-item
v-for="submodel in submodelData"
:key="submodel.id"
color="primary"
nav
class="bg-listItem mb-2"
style="border-width: 1px"
:style="{
'border-color': submodel.isActive
? primaryColor + ' !important'
: isDark
? '#686868 !important'
: '#ABABAB !important',
}"
@click="toggleNode(submodel)">
<template #prepend>
<v-chip label border color="primary" size="x-small" class="mr-3">SM</v-chip>
</template>
<v-list-item-title :class="submodel.isActive ? 'text-primary' : ''">{{
submodel.idShort
}}</v-list-item-title>
<v-overlay
:model-value="submodel.isActive"
scrim="primary"
style="opacity: 0.2"
contained
persistent></v-overlay>
</v-list-item>
</template>
</v-card-text>
</v-card>
</v-container>
Expand Down Expand Up @@ -139,11 +144,8 @@
watch: {
// initialize Submodel List when AAS gets selected or changes
SelectedAAS: {
deep: true,
handler() {
this.initSubmodelList();
},
SelectedAAS() {
this.initSubmodelList();
},
// Resets the Submodel List when the AAS Registry changes
Expand All @@ -167,14 +169,14 @@
methods: {
initSubmodelList() {
// console.log("initialize Submodel List: ", this.SelectedAAS);
// console.log('Initialize SubmodelList', this.SelectedAAS, this.initialUpdate, this.initialNode);
// return if no endpoints are available
if (!this.SelectedAAS || !this.SelectedAAS.endpoints || this.SelectedAAS.endpoints.length === 0) {
// this.navigationStore.dispatchSnackbar({ status: true, timeout: 4000, color: 'error', btnColor: 'buttonText', text: 'AAS with no (valid) Endpoint selected!' });
this.submodelData = [];
return;
}
if (this.loading) return; // return if loading state is true -> prevents multiple requests
if (this.loading && !this.initialUpdate) return; // return if loading state is true -> prevents multiple requests
this.aasStore.dispatchLoadingState(true); // set loading state to true
this.submodelData = []; // reset Submdoel List Data
// retrieve AAS from endpoint
Expand All @@ -189,23 +191,26 @@
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(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) => {
if (submodel.path === this.initialNode.path) {
submodel.isActive = true;
this.aasStore.dispatchNode(submodel);
this.aasStore.dispatchRealTimeObject(submodel);
}
});
this.initialUpdate = false;
this.initialNode = {};
this.submodelData = submodelData; // set the Submodel Data
if (AAS.submodels) {
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) => {
if (submodel.path === this.initialNode.path) {
submodel.isActive = true;
this.aasStore.dispatchNode(submodel);
this.aasStore.dispatchRealTimeObject(submodel);
}
});
this.initialUpdate = false;
this.initialNode = {};
this.submodelData = submodelData; // set the Submodel Data
} else {
this.submodelData = submodelData;
}
} else {
this.submodelData = submodelData; // set the Submodel Data
this.submodelData = []; // set the Submodel Data
}
} catch (error: any) {
// console.error('Error while parsing the Submodel References: ', error);
Expand Down

0 comments on commit 6225944

Please sign in to comment.