Eerste goed werkende versie van een formulier in de chat input.

eveai_chat_client/static/js/components/MaterialIconManager.js

@@ -0,0 +1,65 @@
+// static/js/components/MaterialIconManager.js
+
+/**
+ * Een hulpklasse om Material Symbols Outlined iconen te beheren
+ * en dynamisch toe te voegen aan de pagina indien nodig.
+ */
+export const MaterialIconManager = {
+    name: 'MaterialIconManager',
+    data() {
+        return {
+            loadedIconSets: [],
+            defaultOptions: {
+                opsz: 24,   // Optimale grootte: 24px
+                wght: 400,  // Gewicht: normaal
+                FILL: 0,    // Vulling: niet gevuld
+                GRAD: 0     // Kleurverloop: geen
+            }
+        };
+    },
+    methods: {
+        /**
+         * Zorgt ervoor dat de Material Symbols Outlined stijlbladen zijn geladen
+         * @param {Object} options - Opties voor het icoon (opsz, wght, FILL, GRAD)
+         * @param {Array} iconNames - Optionele lijst met specifieke iconen om te laden
+         */
+        ensureIconsLoaded(options = {}, iconNames = []) {
+            const opts = { ...this.defaultOptions, ...options };
+            const styleUrl = this.buildStyleUrl(opts, iconNames);
+
+            // Controleer of deze specifieke set al is geladen
+            if (!this.loadedIconSets.includes(styleUrl)) {
+                this.loadStylesheet(styleUrl);
+                this.loadedIconSets.push(styleUrl);
+            }
+        },
+
+        /**
+         * Bouwt de URL voor het stijlblad
+         */
+        buildStyleUrl(options, iconNames = []) {
+            let url = `https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@${options.opsz},${options.wght},${options.FILL},${options.GRAD}`;
+
+            // Voeg specifieke iconNames toe als deze zijn opgegeven
+            if (iconNames.length > 0) {
+                url += `&icon_names=${iconNames.join(',')}`;
+            }
+
+            return url;
+        },
+
+        /**
+         * Laadt een stijlblad dynamisch
+         */
+        loadStylesheet(url) {
+            const link = document.createElement('link');
+            link.rel = 'stylesheet';
+            link.href = url;
+            document.head.appendChild(link);
+            console.log(`Material Symbols Outlined geladen: ${url}`);
+        }
+    }
+};
+
+// Singleton instantie om te gebruiken in de hele applicatie
+export const iconManager = new Vue(MaterialIconManager);