Generate connector form based on meta-data (#62)

* Ignore volumes and exe

* Export form meta-data

* use dynamic metaform for connectors

* fix populating form

webui/views/partials/metaform.html

@@ -0,0 +1,94 @@
+{{/* 
+    Metaform Partial Template
+    This template renders a form based on a Form struct from the metaform package.
+    
+    Usage:
+    {{template "partials/metaform.html" .}}
+    
+    Where . contains Form and Type fields
+*/}}
+
+<div class="metaform" data-connector-type="{{.Type}}">
+    {{range .Form.Fields}}
+        <div class="mb-4">
+            <label for="connector_{{.Name}}">{{.Label}}{{if .Required}} <span class="required">*</span>{{end}}</label>
+            
+            {{if eq .Kind "string"}}
+                <input type="text" 
+                       name="connector_field_{{.Name}}" 
+                       id="connector_{{.Name}}" 
+                       class="connector-field"
+                       data-field-name="{{.Name}}"
+                       data-field-type="string"
+                       {{if .Placeholder}}placeholder="{{.Placeholder}}"{{end}}
+                       {{if .Required}}required{{end}}>
+            
+            {{else if eq .Kind "number"}}
+                <input type="number" 
+                       name="connector_field_{{.Name}}" 
+                       id="connector_{{.Name}}" 
+                       class="connector-field"
+                       data-field-name="{{.Name}}"
+                       data-field-type="number"
+                       {{if .Placeholder}}placeholder="{{.Placeholder}}"{{end}}
+                       {{if .Required}}required{{end}}>
+            
+            {{else if eq .Kind "options"}}
+                <select name="connector_field_{{.Name}}" 
+                        id="connector_{{.Name}}"
+                        class="connector-field"
+                        data-field-name="{{.Name}}"
+                        data-field-type="options"
+                        {{if .Required}}required{{end}}>
+                    <option value="">Select an option</option>
+                    {{range .Options}}
+                        <option value="{{.Value}}">{{.Label}}</option>
+                    {{end}}
+                </select>
+            {{end}}
+        </div>
+    {{end}}
+</div>
+
+<style>
+    .metaform .required {
+        color: #ff5555;
+    }
+    
+    .metaform input[type="text"],
+    .metaform input[type="number"],
+    .metaform select {
+        width: 100%;
+        padding: 10px;
+        background-color: #1a1a1a;
+        border: 1px solid #333;
+        color: #f0f0f0;
+        border-radius: 4px;
+        margin-top: 5px;
+        transition: border-color 0.3s, box-shadow 0.3s;
+    }
+    
+    .metaform input[type="text"]:focus,
+    .metaform input[type="number"]:focus,
+    .metaform select:focus {
+        border-color: #00b3ff;
+        box-shadow: 0 0 5px rgba(0, 179, 255, 0.5);
+        outline: none;
+    }
+    
+    .metaform select {
+        appearance: none;
+        background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f0f0f0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
+        background-repeat: no-repeat;
+        background-position: right 10px center;
+        background-size: 16px;
+        padding-right: 30px;
+    }
+    
+    .metaform label {
+        display: block;
+        margin-bottom: 5px;
+        color: #f0f0f0;
+        font-weight: 500;
+    }
+</style>

webui/views/settings.html

@@ -190,10 +190,16 @@
                 updateButton.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Updating...';
                 updateButton.disabled = true;
                 
+                // Get the agent name from the hidden input field
+                const agentName = document.getElementById('name').value;
+                
                 // Build a structured data object
                 const formData = new FormData(form);
                 const jsonData = AgentFormUtils.processFormData(formData);
                 
+                // Ensure the name is set correctly
+                jsonData.name = agentName;
+                
                 // Process special fields
                 jsonData.connectors = AgentFormUtils.processConnectors(updateButton);
                 if (jsonData.connectors === null) return; // Validation failed
@@ -209,7 +215,7 @@
                 console.log('Sending data:', jsonData);
                 
                 // Send the structured data as JSON
-                fetch(`/api/agent/${jsonData.name}/config`, {
+                fetch(`/api/agent/${agentName}/config`, {
                     method: 'PUT',
                     headers: {
                         'Content-Type': 'application/json'
@@ -360,16 +366,13 @@
                     
                     // Find the added connector elements
                     const connectorType = document.getElementById(`connectorType${index}`);
-                    const connectorConfig = document.getElementById(`connectorConfig${index}`);
                     
-                    // Set values
+                    // Set connector type value
                     if (connectorType) {
                         AgentFormUtils.setSelectValue(connectorType, connector.type);
-                    }
-                    
-                    if (connectorConfig) {
-                        // Format the config value
-                        AgentFormUtils.formatConfigValue(connectorConfig, connector.config);
+                        
+                        // Load the connector form with the existing config data
+                        loadConnectorForm(index, connector.type, connector.config);
                     }
                 });
             }