Added:

- ContentSource handling in message
- ContentSource list, add/update ui
- nextPageSelector and imageSelector can be null
- cleanup

assets/controllers/scrapper_configure_controller.js

@@ -0,0 +1,78 @@
+import { Controller } from '@hotwired/stimulus';
+
+export default class extends Controller {
+  static targets = ['form', 'testForm', 'imageSelector', 'nextPageSelector', 'testResults', 'scrapingType']
+
+  connect() {
+  }
+
+  async saveConfiguration(event) {
+    console.log('saveConfiguration called');
+    event.preventDefault();
+    this.formTarget.submit();
+  }
+
+  async testConfiguration(event) {
+    console.log('testConfiguration called');
+    event.preventDefault();
+    const formData = new FormData(this.formTarget);
+    const testFormData = new FormData(this.testFormTarget);
+
+    for (let [key, value] of formData.entries()) {
+      const cleanKey = key.replace(/^content_source\[(.+)]$/, '$1');
+      testFormData.append(`content_source[${cleanKey}]`, value);
+    }
+
+    try {
+      const response = await fetch(this.testFormTarget.action, {
+        method: 'POST',
+        body: testFormData
+      });
+
+      const result = await response.json();
+
+      if (result.success) {
+        this.displayTestResults(result.data);
+      } else {
+        this.displayError(result.message, result.errors);
+      }
+    } catch (error) {
+      console.log(error)
+      this.displayError('An error occurred while testing the configuration');
+    }
+  }
+
+  displayTestResults(data) {
+    let html = '<h3 class="text-xl font-semibold mb-4">Test Results</h3>';
+    html += '<div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">';
+    data.forEach(page => {
+      html += `
+        <div class="border rounded-lg p-2 flex flex-col items-center">
+          <img src="${page.image_url}" alt="Page ${page.page_number}" class="w-full h-48 object-cover mb-2">
+          <p class="text-sm font-medium">Page ${page.page_number}</p>
+        </div>
+      `;
+    });
+    html += '</div>';
+    this.testResultsTarget.innerHTML = html;
+  }
+
+  displayError(message, errors = []) {
+    let errorHtml = `
+      <div class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded relative" role="alert">
+        <strong class="font-bold">Error:</strong>
+        <span class="block sm:inline">${message}</span>
+    `;
+
+    if (errors.length > 0) {
+      errorHtml += '<ul class="list-disc list-inside mt-2">';
+      errors.forEach(error => {
+        errorHtml += `<li>${error}</li>`;
+      });
+      errorHtml += '</ul>';
+    }
+
+    errorHtml += '</div>';
+    this.testResultsTarget.innerHTML = errorHtml;
+  }
+}