(Standalone) Submodel Viewer/Editor

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

@@ -311,7 +311,7 @@
         );
         return filteredAndOrderedModuleRoutes;
     });
-    const showAASList = computed(() => ['AASViewer', 'AASEditor', 'SubmodelViewer'].includes(route.name as string));
+    const showAASList = computed(() => ['AASViewer', 'AASEditor', 'AASSubmodelViewer'].includes(route.name as string));
     const drawerState = computed(() => navigationStore.getDrawerState);
     const LogoPath = computed(() => {
         if (isDark.value && envStore.getEnvLogoDarkPath.trim().length > 0) {
@@ -329,7 +329,7 @@
             'ComponentVisualization',
             'Visualization',
             'AASEditor',
-            'SubmodelViewer',
+            'AASSubmodelViewer',
         ].includes(route.name as string);
     });
 

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

@@ -40,17 +40,48 @@
                             class="mt-3 py-2"
                             nav
                             :active="false"
-                            :border="isActiveRoutePath('/submodelviewer')"
-                            subtitle="View Submodels"
-                            title="Submodel Viewer"
-                            :to="isActiveRoutePath('/submodelviewer') ? '' : '/submodelviewer'"
+                            :border="isActiveRoutePath('/aassmviewer')"
+                            subtitle="View Submodel Visualizations of Asset Administration Shells"
+                            title="AAS SM Visualizations"
+                            :to="isActiveRoutePath('/aassmviewer') ? '' : '/aassmviewer'"
                             @click="closeMenu">
                             <template #prepend>
                                 <v-avatar color="surface-light" icon="mdi-group" rounded>
                                     <v-icon color="medium-emphasis" />
                                 </v-avatar>
                             </template>
                         </v-list-item>
+                        <v-list-item
+                            class="mt-3 py-2"
+                            nav
+                            :active="false"
+                            :border="isActiveRoutePath('/smviewer')"
+                            subtitle="View Submodels"
+                            title="SM Viewer"
+                            :to="isActiveRoutePath('/smviewer') ? '' : '/smviewer'"
+                            @click="closeMenu">
+                            <template #prepend>
+                                <v-avatar color="surface-light" icon="mdi-ungroup" rounded>
+                                    <v-icon color="medium-emphasis" />
+                                </v-avatar>
+                            </template>
+                        </v-list-item>
+                        <v-list-item
+                            v-if="allowEditing"
+                            class="mt-3 py-2"
+                            :active="false"
+                            nav
+                            :border="isActiveRoutePath('/smeditor')"
+                            subtitle="Edit Submodels"
+                            title="SM Editor"
+                            :to="isActiveRoutePath('/smeditor') ? '' : '/smeditor'"
+                            @click="closeMenu">
+                            <template #prepend>
+                                <v-avatar color="surface-light" icon="mdi-pencil" rounded>
+                                    <v-icon color="medium-emphasis" />
+                                </v-avatar>
+                            </template>
+                        </v-list-item>
                         <v-list-item
                             v-if="selectedNode && Object.keys(selectedNode).length > 0"
                             class="mt-3 py-2"

aas-web-ui/src/components/ComponentVisualization.vue

@@ -33,7 +33,7 @@
                 :style="
                     isMobile
                         ? 'height: calc(100svh - 154px)'
-                        : submodelViewerMode || visualizationMode
+                        : aasSubmodelViewerMode || visualizationMode
                           ? 'height: calc(100svh - 105px)'
                           : 'height: calc(100svh - 170px)'
                 ">
@@ -76,7 +76,7 @@
     const isMobile = computed(() => navigationStore.getIsMobile);
     const singleAas = computed(() => envStore.getSingleAas);
     const visualizationMode = computed(() => routesToVisualization.includes(route.name));
-    const submodelViewerMode = computed(() => route.name === 'SubmodelViewer');
+    const aasSubmodelViewerMode = computed(() => route.name === 'AASSubmodelViewer');
 
     // Watchers
     watch(

aas-web-ui/src/components/SubmodelElementView.vue

@@ -3,8 +3,8 @@
         <!-- Detailed View of the selected Submodel/SubmodelElement (e.g. Property, Operation, etc.) -->
         <template
             v-if="
-                selectedAAS &&
-                Object.keys(selectedAAS).length > 0 &&
+                ((selectedAAS && Object.keys(selectedAAS).length > 0) ||
+                    ['SMViewer', 'SMEditor'].includes(route.name as string)) &&
                 selectedNode &&
                 Object.keys(selectedNode).length > 0 &&
                 submodelElementData &&
@@ -101,27 +101,27 @@
                     <Property
                         v-else-if="submodelElementData.modelType === 'Property'"
                         :property-object="submodelElementData"
-                        :is-editable="aasEditorMode"></Property>
+                        :is-editable="editorMode"></Property>
                     <MultiLanguageProperty
                         v-else-if="submodelElementData.modelType === 'MultiLanguageProperty'"
                         :multi-language-property-object="submodelElementData"
-                        :is-editable="aasEditorMode"></MultiLanguageProperty>
+                        :is-editable="editorMode"></MultiLanguageProperty>
                     <Operation
                         v-else-if="submodelElementData.modelType === 'Operation'"
                         :operation-object="submodelElementData"
-                        :is-editable="aasEditorMode"></Operation>
+                        :is-editable="editorMode"></Operation>
                     <File
                         v-else-if="submodelElementData.modelType === 'File'"
                         :file-object="submodelElementData"
-                        :is-editable="aasEditorMode"></File>
+                        :is-editable="editorMode"></File>
                     <Blob
                         v-else-if="submodelElementData.modelType === 'Blob'"
                         :blob-object="submodelElementData"
-                        :is-editable="aasEditorMode"></Blob>
+                        :is-editable="editorMode"></Blob>
                     <ReferenceElement
                         v-else-if="submodelElementData.modelType === 'ReferenceElement'"
                         :reference-element-object="submodelElementData"
-                        :is-editable="aasEditorMode"></ReferenceElement>
+                        :is-editable="editorMode"></ReferenceElement>
                     <Range
                         v-else-if="submodelElementData.modelType === 'Range'"
                         :range-object="submodelElementData"></Range>
@@ -134,7 +134,7 @@
                     <AnnotatedRelationshipElement
                         v-else-if="submodelElementData.modelType === 'AnnotatedRelationshipElement'"
                         :annotated-relationship-element-object="submodelElementData"
-                        :is-editable="aasEditorMode"></AnnotatedRelationshipElement>
+                        :is-editable="editorMode"></AnnotatedRelationshipElement>
                     <InvalidElement v-else :invalid-element-object="submodelElementData"></InvalidElement>
                 </v-list>
                 <!-- Last Sync -->
@@ -180,6 +180,7 @@
     import { useSMEHandling } from '@/composables/AAS/SMEHandling';
     import { useAASStore } from '@/store/AASDataStore';
     import { useNavigationStore } from '@/store/NavigationStore';
+
     // Vue Router
     const route = useRoute();
 
@@ -204,7 +205,7 @@
     const selectedAAS = computed(() => aasStore.getSelectedAAS);
     const selectedNode = computed(() => aasStore.getSelectedNode);
     const autoSync = computed(() => navigationStore.getAutoSync);
-    const aasEditorMode = computed(() => route.name === 'AASEditor');
+    const editorMode = computed(() => ['AASEditor', 'SMEditor'].includes(route.name as string));
 
     // Watchers
     watch(

aas-web-ui/src/components/SubmodelElementViewAndVisualization.vue

@@ -31,8 +31,8 @@
             <v-card-text style="overflow-y: auto; height: calc(100svh - 170px)">
                 <template
                     v-if="
-                        selectedAAS &&
-                        Object.keys(selectedAAS).length > 0 &&
+                        ((selectedAAS && Object.keys(selectedAAS).length > 0) ||
+                            ['SMViewer', 'SMEditor'].includes(route.name as string)) &&
                         selectedNode &&
                         Object.keys(selectedNode).length > 0
                     ">
@@ -41,7 +41,10 @@
                     <SubmodelElementJSONView v-if="componentToShow === 'JSONView'" />
                 </template>
                 <v-empty-state
-                    v-else-if="!selectedAAS || Object.keys(selectedAAS).length === 0"
+                    v-else-if="
+                        !['SMViewer', 'SMEditor'].includes(route.name as string) &&
+                        (!selectedAAS || Object.keys(selectedAAS).length === 0)
+                    "
                     title="No selected AAS"
                     class="text-divider"></v-empty-state>
                 <v-empty-state
@@ -56,8 +59,12 @@
 
 <script lang="ts" setup>
     import { computed, ref } from 'vue';
+    import { useRoute } from 'vue-router';
     import { useAASStore } from '@/store/AASDataStore';
 
+    // Vue Router
+    const route = useRoute();
+
     //Stores
     const aasStore = useAASStore();
 

aas-web-ui/src/components/SubmodelElementVisualization.vue

@@ -2,8 +2,8 @@
     <v-container fluid class="pa-0">
         <template
             v-if="
-                selectedAAS &&
-                Object.keys(selectedAAS).length > 0 &&
+                ((selectedAAS && Object.keys(selectedAAS).length > 0) ||
+                    ['SMViewer', 'SMEditor'].includes(route.name as string)) &&
                 selectedNode &&
                 Object.keys(selectedNode).length > 0 &&
                 submodelElementData &&
@@ -62,7 +62,9 @@
                         v-else
                         fluid
                         class="pa-0 ma-0 d-flex justify-center align-center"
-                        :style="submodelViewerMode ? 'height: calc(100svh - 137px)' : 'height: calc(100svh - 202px)'">
+                        :style="
+                            aasSubmodelViewerMode ? 'height: calc(100svh - 137px)' : 'height: calc(100svh - 202px)'
+                        ">
                         <v-empty-state title="No available visualization" class="text-divider"></v-empty-state>
                     </v-container>
                 </template>
@@ -152,7 +154,7 @@
         return plugins;
     });
     const visualizationMode = computed(() => routesToVisualization.includes(route.name));
-    const submodelViewerMode = computed(() => route.name === 'SubmodelViewer');
+    const aasSubmodelViewerMode = computed(() => route.name === 'AASSubmodelViewer');
 
     // Watchers
     watch(

aas-web-ui/src/components/SubmodelTree.vue

@@ -70,13 +70,13 @@
                                     variant="plain"
                                     v-bind="props"
                                     class="ml-n3"
-                                    :class="editMode ? 'mr-n3' : ''"
+                                    :class="editorMode ? 'mr-n3' : ''"
                                     @click="collapseTree()">
                                 </v-btn>
                             </template>
                             <span>Collapse Submodel trees</span>
                         </v-tooltip>
-                        <v-menu v-if="editMode">
+                        <v-menu v-if="editorMode">
                             <template #activator="{ props }">
                                 <v-btn icon="mdi-dots-vertical" variant="plain" v-bind="props" class="mr-2"></v-btn>
                             </template>
@@ -118,7 +118,11 @@
                 </template>
                 <!-- Show the Submodel Tree -->
                 <template v-else>
-                    <template v-if="selectedAAS && Object.keys(selectedAAS).length > 0">
+                    <template
+                        v-if="
+                            (selectedAAS && Object.keys(selectedAAS).length > 0) ||
+                            ['SMViewer', 'SMEditor'].includes(route.name as string)
+                        ">
                         <template
                             v-if="
                                 submodelTreeUnfiltered &&
@@ -137,20 +141,24 @@
                                 @open-edit-dialog="openEditDialog(false, $event)"
                                 @show-delete-dialog="openDeleteDialog"></Treeview>
                         </template>
+                        <v-empty-state
+                            v-else-if="['SMViewer', 'SMEditor'].includes(route.name as string)"
+                            title="No existing Submodels"
+                            text="The specified Submodel Repository does not contain any Submodels"
+                            class="text-divider"></v-empty-state>
                         <v-empty-state
                             v-else
                             title="No existing Submodels"
                             text="The selected AAS does not contain any Submodels"
-                            :action-text="editMode ? 'Create Submodel' : undefined"
+                            :action-text="editorMode ? 'Create Submodel' : undefined"
                             class="text-divider"
                             @click:action="openEditDialog(true)"></v-empty-state>
                     </template>
-                    <template v-else>
-                        <v-empty-state
-                            title="No selected AAS"
-                            text="Select an AAS to view its Submodels and Submodel Elements"
-                            class="text-divider"></v-empty-state>
-                    </template>
+                    <v-empty-state
+                        v-else
+                        title="No selected AAS"
+                        text="Select an AAS to view its Submodels and Submodel Elements"
+                        class="text-divider"></v-empty-state>
                 </template>
             </v-card-text>
         </v-card>
@@ -219,6 +227,7 @@
     import { useRoute } from 'vue-router';
     import { useAASHandling } from '@/composables/AAS/AASHandling';
     import { useReferableUtils } from '@/composables/AAS/ReferableUtils';
+    import { useSMHandling } from '@/composables/AAS/SMHandling';
     import { useAASStore } from '@/store/AASDataStore';
     import { useEnvStore } from '@/store/EnvironmentStore';
     import { useNavigationStore } from '@/store/NavigationStore';
@@ -229,6 +238,7 @@
 
     // Composables
     const { fetchAasSmListById } = useAASHandling();
+    const { fetchSmList } = useSMHandling();
     const { nameToDisplay, descriptionToDisplay } = useReferableUtils();
 
     // Stores
@@ -272,14 +282,16 @@
     const submodelRegistryURL = computed(() => navigationStore.getSubmodelRegistryURL); // get Submodel Registry URL from Store
     const selectedNode = computed(() => aasStore.getSelectedNode); // get the updated Treeview Node from Store
     const singleAas = computed(() => envStore.getSingleAas); // Get the single AAS state from the Store
-    const editMode = computed(() => route.name === 'AASEditor'); // Check if the current Route is the AAS Editor
+    const editorMode = computed(() => ['AASEditor', 'SMEditor'].includes(route.name as string));
     const triggerTreeviewReload = computed(() => navigationStore.getTriggerTreeviewReload); // Reload the Treeview
 
     // Watchers
     watch(
         () => aasRegistryURL.value,
         () => {
-            submodelTree.value = [];
+            if (!['SMViewer', 'SMEditor'].includes(route.name as string)) {
+                submodelTree.value = [];
+            }
         }
     );
 
@@ -293,8 +305,10 @@
     watch(
         () => selectedAAS.value,
         () => {
-            submodelTree.value = [];
-            initialize();
+            if (!['SMViewer', 'SMEditor'].includes(route.name as string)) {
+                submodelTree.value = [];
+                initialize();
+            }
         }
     );
 
@@ -312,22 +326,36 @@
     });
 
     async function initialize(): Promise<void> {
-        if (!selectedAAS.value || Object.keys(selectedAAS.value).length === 0) {
+        // console.log(selectedNode.value);
+        if (
+            !['SMEditor', 'SMViewer'].includes(route.name as string) &&
+            (!selectedAAS.value || Object.keys(selectedAAS.value).length === 0)
+        ) {
             submodelTree.value = [];
             return;
         }
 
         treeLoading.value = true;
 
         try {
-            const submodels: Array<any> = await fetchAasSmListById(selectedAAS.value.id);
+            let submodels: Array<any> = [];
+
+            if (['SMEditor', 'SMViewer'].includes(route.name as string)) {
+                submodels = await fetchSmList();
+            } else {
+                submodels = await fetchAasSmListById(selectedAAS.value.id);
+            }
             const sortedSubmodels = submodels.sort((a, b) => a.id.localeCompare(b.id));
 
             let processedList = [] as Array<any>;
 
             processedList = sortedSubmodels.map((submodel: any) => {
                 // Assumes submodel.path is already set for top-level nodes
-                if (Array.isArray(submodel.submodelElements) && submodel.submodelElements.length) {
+                if (
+                    submodel.submodelElements &&
+                    Array.isArray(submodel.submodelElements) &&
+                    submodel.submodelElements.length > 0
+                ) {
                     submodel.children = prepareForTree(submodel.submodelElements, submodel);
                     submodel.showChildren = shouldExpandNode(submodel.path);
                     return submodel;