Add catalogue loading

src/objectList.vue

 <template>
   <v-sheet>
+    <VcsFormSection heading="Objektbibliothek">
+      <template #help>
+        <p>Objektbibliothek:</p>
+        <span>Die Objektbibliothek.</span>
+      </template>
+      <v-container class="py-1 px-1">
+        <v-row no-gutters>
+          <vcs-list
+              :items="items"
+              :draggable="draggable"
+              :selectable="selectable"
+              :single-select="selectSingle"
+              :searchable="searchable"
+              :show-title="showTitle"
+              :icon="titleIconSrc"
+              :actions="titleActionsArray"
+              :title="title"
+              v-model="selected"
+              @item-moved="move"
+              @item-renamed="({ item, newTitle }) => (item.title = newTitle)"
+          />
+        </v-row>
+      </v-container>
+    </VcsFormSection>
     <VcsFormSection heading="Objektliste">
       <template #help>
           <p>Objektliste:</p>
@@ -68,30 +92,24 @@
 
 <script>
 import {
-    VcsList,
-    VcsFormButton,
-    VcsTextField,
-    Icons,
-    VcsFormSection,
-    NotificationType,
-  } from '@vcmap/ui';
-import {
-    VSwitch,
-    VSheet,
-    VDialog,
-    VCard,
-    VForm,
-    VContainer,
-    VRow,
-    VCol,
-  } from 'vuetify/components';
-import { computed, ref, inject } from 'vue';
-import { name } from '../package.json';
+  Icons,
+  NotificationType,
+  VcsFormButton,
+  VcsFormSection,
+  VcsList,
+  VcsTextField,
+  VcsTreeview,
+  VcsTreeviewTitle,
+} from '@vcmap/ui';
+import {VCard, VCol, VContainer, VDialog, VForm, VRow, VSheet, VSwitch,} from 'vuetify/components';
+import {computed, inject, ref} from 'vue';
+import {name} from '../package.json';
 import * as THREE from 'three';
-import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
-import { GLTFExporter } from 'three/addons/exporters/GLTFExporter.js';
-import { Cartesian2 } from '@vcmap-cesium/engine';
+import {GLTFLoader} from 'three/addons/loaders/GLTFLoader.js';
+import {GLTFExporter} from 'three/addons/exporters/GLTFExporter.js';
+import {Cartesian2} from '@vcmap-cesium/engine';
 
+const objLib = {};
 
 const defaultItems = [];
 const items = ref(defaultItems);
@@ -99,6 +117,68 @@ let setupModelFunction = undefined;
 let app = undefined;
 let projectStateObject = undefined;
 
+async function loadCataloguesFromConfig(config) {
+  const configJson = JSON.parse(JSON.stringify(config));
+  const catalogues = configJson.objectCatalogues;
+
+  for (let cat of catalogues) {
+    const catJson = await retrieveCatalogueJson(cat.url);
+    if (!catJson) continue;
+
+    const category = cat.category.toString();
+    const linkPrefix = cat.url.replace(/\/[^/]*catalog\.json$/, '/');
+    const entries = getCatalogueEntries(catJson, linkPrefix);
+
+    if (!objLib[category]) {
+      objLib[category] = [entries];
+    } else {
+      objLib[category].push(entries);
+    }
+  }
+
+
+}
+
+async function retrieveCatalogueJson(link) {
+  const controller = new AbortController();
+  const timeout = setTimeout(() => controller.abort(), 1000);
+
+  try {
+    const response = await fetch(link, { signal: controller.signal });
+    if (!response.ok) {
+      throw new Error(`HTTP error: ${response.status} for catalogue ${link}`);
+    }
+    return await response.json();
+  } catch (error) {
+    console.error(error);
+    return null;
+  } finally {
+    clearTimeout(timeout);
+  }
+}
+
+function getCatalogueEntries(json, linkPrefix) {
+  const part = {};
+
+  for (let item of json.items) {
+    const subCat = item.title;
+    const entries = [];
+
+    for (let entry of item.predefinedObjects) {
+      const info = {
+        title: entry.title,
+        icon: linkPrefix + entry.icon,
+        model: linkPrefix + entry.properties?.olcs_modelUrl,
+      };
+      entries.push(info);
+    }
+
+    part[subCat.toString()] = entries;
+  }
+
+  return part;
+}
+
 function uploadModel() {
   // Create an input element
   const inputElement = document.createElement("input");
@@ -206,6 +286,8 @@ function uploadModel() {
   export default {
     name: 'objectList',
     components: {
+      VcsTreeview,
+      VcsTreeviewTitle,
       VcsList,
       VcsFormButton,
       VcsTextField,
@@ -221,7 +303,7 @@ function uploadModel() {
     },
     setup() {
       app = inject('vcsApp');
-      const { pluginState, setupModel, saveObjects, loadObjects } = app.plugins.getByKey(name);
+      const { pluginState, setupModel, saveObjects, loadObjects, config } = app.plugins.getByKey(name);
       const draggable = ref(false);
       const selectable = ref(false);
       const searchable = ref(false);
@@ -245,7 +327,7 @@ function uploadModel() {
       const dialog = ref(false);
       setupModelFunction = setupModel;
       projectStateObject = pluginState;
-
+      loadCataloguesFromConfig(config).then(response => {console.log(objLib);});
       return {
         draggable,
         selectable,