Merge pull request #213 from Kometa-Team/202-final-output-for-custom-…

…webhook-urls-is-broken-in-final-page-as-it-shows-custom-and-not-the-url
Kometa-Team · Jan 21, 2025 · cbf44e8 · cbf44e8
2 parents 3e3d39c + d3f0aa7
commit cbf44e8
Show file tree

Hide file tree

Showing 2 changed files with 45 additions and 4 deletions.
diff --git a/static/local-js/000-base.js b/static/local-js/000-base.js
@@ -1,3 +1,4 @@
+/* global $ */
 document.addEventListener('DOMContentLoaded', function () {
   // Prevent form submission on "Enter" key press, except for textarea
   document.addEventListener('keydown', function (event) {
@@ -52,6 +53,8 @@ function hideSpinner (webhookType) {
 
 // Function to handle jump to action
 function jumpTo (targetPage) {
+  console.log('JumpTo initiated for target page:', targetPage)
+
   const form = document.getElementById('configForm') || document.getElementById('final-form')
 
   if (!form) {
@@ -61,13 +64,35 @@ function jumpTo (targetPage) {
 
   // Check form validity
   if (!form.checkValidity()) {
+    console.warn('Form is invalid. Reporting validity.')
     form.reportValidity()
     return
   }
 
+  console.log('Form is valid. Preparing to submit.')
+
+  // Append custom webhook URLs to select elements if needed
+  $('select.form-select').each(function () {
+    if ($(this).val() === 'custom') {
+      const customInputId = $(this).attr('id') + '_custom'
+      const customUrl = $('#' + customInputId).find('input.custom-webhook-url').val()
+      if (customUrl) {
+        console.log(`Appending custom URL for ${$(this).attr('id')}:`, customUrl)
+        $(this).append('<option value="' + customUrl + '" selected="selected">' + customUrl + '</option>')
+        $(this).val(customUrl)
+      }
+    }
+  })
+
   // Create FormData object from the form
   const formData = new FormData(form)
 
+  // Debugging FormData content
+  console.log('FormData before fetch:')
+  formData.forEach((value, key) => {
+    console.log(`${key}: ${value}`)
+  })
+
   // Show loading spinner
   loading('jump')
 
@@ -76,7 +101,10 @@ function jumpTo (targetPage) {
     method: 'POST',
     body: formData
   }).then(response => {
+    console.log('Fetch response received:', response.status)
+
     if (response.ok) {
+      console.log('Redirecting to target page:', targetPage)
       // Redirect to the target page after successful form submission
       window.location.href = '/step/' + targetPage
     } else {
@@ -85,5 +113,4 @@ function jumpTo (targetPage) {
   }).catch(error => {
     console.error('Error during form submission:', error)
   })
-}
-/* eslint-enable no-unused-vars */
+}/* eslint-enable no-unused-vars */
diff --git a/static/local-js/090-webhooks.js b/static/local-js/090-webhooks.js
@@ -16,6 +16,7 @@ function setWebhookValidated (state, webhookType = null) {
 
 function showCustomInput (selectElement, isValidated) {
   const customInputId = selectElement.id + '_custom'
+  console.log(`showCustomInput called for: ${selectElement.id}, isValidated: ${isValidated}`)
   if (selectElement.value === 'custom') {
     document.getElementById(customInputId).style.display = 'block'
     if (isValidated === true) {
@@ -32,12 +33,13 @@ function showCustomInput (selectElement, isValidated) {
 
 function updateValidationState () {
   const allValid = Object.values(validatedWebhooks).every(state => state === true)
+  console.log('Validation State Updated:', validatedWebhooks, `All Valid: ${allValid}`)
   setWebhookValidated(allValid)
 }
 
 $(document).ready(function () {
   const isValidated = document.getElementById('webhooks_validated').value.toLowerCase() === 'true'
-  console.log('Validated: ' + isValidated)
+  console.log('Page Load - Is Validated:', isValidated)
 
   $('select.form-select').each(function () {
     const selectElement = this
@@ -48,6 +50,7 @@ $(document).ready(function () {
 
     if (selectElement.value === 'custom' && customUrl) {
       validatedWebhooks[selectElement.id] = isValidated
+      console.log(`Custom webhook found: ${selectElement.id}, URL: ${customUrl}`)
     } else {
       validatedWebhooks[selectElement.id] = true
     }
@@ -59,14 +62,21 @@ $(document).ready(function () {
     $('.validate-button').prop('disabled', false)
   }
 
+  // Debugging for navigation actions
   document.getElementById('configForm').addEventListener('submit', function (event) {
+    const actionType = event.submitter?.getAttribute('onclick')?.includes('loading') ? event.submitter.innerText.trim() : 'unknown'
+    console.log(`Form Submitted - Action: ${actionType}`)
+
     $('select.form-select').each(function () {
       if ($(this).val() === 'custom') {
         const customInputId = $(this).attr('id') + '_custom'
         const customUrl = $('#' + customInputId).find('input.custom-webhook-url').val()
         if (customUrl) {
+          console.log(`Serializing custom webhook for dropdown: ${$(this).attr('id')}, URL: ${customUrl}`)
           $(this).append('<option value="' + customUrl + '" selected="selected">' + customUrl + '</option>')
           $(this).val(customUrl)
+        } else {
+          console.log(`Custom webhook dropdown ${$(this).attr('id')} has no URL to serialize.`)
         }
       }
     })
@@ -81,6 +91,8 @@ function validateWebhook (webhookType) {
   const validateButton = inputGroup.find('.validate-button')
   const webhookTypeFormatted = webhookType.replace(/_/g, ' ').replace(/\b\w/g, function (l) { return l.toUpperCase() })
 
+  console.log(`Validating webhook: ${webhookType}, URL: ${webhookUrl}`)
+
   showSpinner(webhookType)
   validationMessage.html('<div class="alert alert-info" role="alert">Validating...</div>')
   validationMessage.show()
@@ -98,20 +110,22 @@ function validateWebhook (webhookType) {
     .then(response => response.json())
     .then(data => {
       if (data.success) {
+        console.log(`Webhook validation successful for: ${webhookType}`)
         hideSpinner(webhookType)
         validationMessage.html('<div class="alert alert-success" role="alert">' + data.success + '</div>')
         validateButton.prop('disabled', true)
         validatedWebhooks['webhooks_' + webhookType] = true
       } else {
+        console.error(`Webhook validation failed for: ${webhookType}, Error: ${data.error}`)
         hideSpinner(webhookType)
         validationMessage.html('<div class="alert alert-danger" role="alert">' + data.error + '</div>')
         validatedWebhooks['webhooks_' + webhookType] = false
       }
       updateValidationState()
     })
     .catch((error) => {
+      console.error(`Error during webhook validation for: ${webhookType}`, error)
       hideSpinner(webhookType)
-      console.error('Error:', error)
       validationMessage.html('<div class="alert alert-danger" role="alert">An error occurred. Please try again.</div>')
       validatedWebhooks['webhooks_' + webhookType] = false
       updateValidationState()