Allow multiple semanticIds for UserPlugins

aas-web-ui/src/UserPlugins/HelloWorldPlugin.vue

@@ -3,14 +3,14 @@
         <!-- Plugin Title -->
         <v-card class="mb-3">
             <v-card-title>
-                <div class="text-subtitle-1">{{ 'Hello World Plugin:' }}</div>
+                <div class="text-subtitle-1">{{ nameToDisplay(submodelElementData) }}</div>
             </v-card-title>
         </v-card>
         <!-- Iterate over all SubmodelElements of the HelloWorld-Plugin -->
         <div v-for="SubmodelElement in pluginData" :key="SubmodelElement.idShort" class="mb-3">
             <!-- Display SubmodelElement -->
             <SubmodelElementWrapper
                 :SubmodelElementObject="SubmodelElement"
                 @update-value="updatePluginValue"></SubmodelElementWrapper>
         </div>
     </v-container>
@@ -25,13 +25,14 @@
     import { useAASStore } from '@/store/AASDataStore';
 
     export default defineComponent({
-        name: 'PluginJSONArray',
-        SemanticID: 'http://hello.world.de/plugin_submodel',
+        name: 'HelloWorldPlugin',
+        // semanticId: 'http://hello.world.de/plugin_submodel', // semanticId of the HelloWorld-Plugin as string
+        semanticId: ['http://hello.world.de/plugin_submodel', 'http://hello.world.de/plugin_property'], // semanticId of the HelloWorld-Plugin as array to use multiple semanticIds
         components: {
             SubmodelElementWrapper,
         },
-        mixins: [RequestHandling, SubmodelElementHandling], // SemanticID of the HelloWorld-Plugin
+        mixins: [RequestHandling, SubmodelElementHandling],
         props: ['submodelElementData'],
 
         setup() {
             const theme = useTheme();
@@ -45,7 +46,7 @@
 
         data() {
             return {
                 pluginData: {} as any, // Data of the HelloWorld-Plugin
             };
         },
 
@@ -80,8 +81,8 @@
             },
 
             // Function to prepare the Plugin Data
             preparePluginData(pluginSubmodelElements: Array<any>, path: string = ''): Array<any> {
                 pluginSubmodelElements.forEach((submodelElement: any) => {
                     submodelElement.id = this.UUID(); // add a unique id to the SubmodelElement
                     submodelElement.path = path + '/' + submodelElement.idShort; // add the path to the SubmodelElement
                     // the next Step is not needed for the HelloWorld-Plugin, but it is still displayed as an Example for more complex Situations using SubmodelElementCollections

aas-web-ui/src/components/SubmodelPlugins/_SubmodelEntrypoint.vue

@@ -161,8 +161,17 @@
             // Filtered Plugins
             filteredPlugins() {
                 return this.ImportedPlugins.filter((plugin: any) => {
-                    // console.log(plugin.SemanticID === this.submodelElementData.semanticId.keys[0].value ? 'Plugin found: ' + plugin.SemanticID : 'Plugin not found: ' + plugin.SemanticID);
-                    return plugin.SemanticID === this.submodelElementData.semanticId.keys[0].value;
+                    if (!plugin.semanticId) return false;
+
+                    if (typeof plugin.semanticId === 'string') {
+                        return this.checkSemanticId(this.submodelElementData, plugin.semanticId);
+                    } else if (plugin.semanticId.constructor === Array) {
+                        for (const pluginSemanticId of plugin.semanticId) {
+                            if (this.checkSemanticId(this.submodelElementData, pluginSemanticId)) return true;
+                        }
+                        return false;
+                    }
+                    return false;
                 });
             },
 

aas-web-ui/src/main.ts

@@ -7,7 +7,7 @@
 // Types
 interface PluginType {
     name: string;
-    SemanticID: string;
+    semanticId: string;
 }
 
 // Components
@@ -61,9 +61,9 @@
     await Promise.all(
         files.map(async (path) => {
             const componentName = path.replace('./UserPlugins/', '').replace('.vue', '');
             const component: any = await pluginFiles[path]();
             app.component(componentName, (component.default || component) as ReturnType<typeof defineComponent>);
-            plugins.push({ name: componentName, SemanticID: component.default.SemanticID });
+            plugins.push({ name: componentName, semanticId: component.default.semanticId });
         })
     );
 
@@ -111,7 +111,7 @@
                     setInterval(() => {
                         keycloak
                             .updateToken(70)
                             .then((refreshed) => {
                                 if (refreshed) {
                                     // console.log('Token refreshed');
                                     authStore.setToken(keycloak.token);
@@ -119,7 +119,7 @@
                                 }
                                 authStore.setAuthStatus(true);
                             })
                             .catch(() => {
                                 console.error('Failed to refresh token');
                                 authStore.setAuthStatus(false);
                             });

aas-web-ui/src/store/NavigationStore.ts

@@ -31,7 +31,7 @@ export interface PlatformType {
 
 export interface PluginType {
     name: string;
-    SemanticID: string;
+    semanticId: string;
 }
 
 import { defineStore } from 'pinia';