From 58a9b02cca41cf4bffd65084735857f952222437 Mon Sep 17 00:00:00 2001
From: Collin Heist <collinheist@gmail.com>
Date: Tue, 21 Mar 2023 23:32:07 -0600
Subject: [PATCH] Update sync page to use JSON instead of Form

Submit new syncs with application/json instead of form encoding. #311
---
 app/templates/series.html | 41 +++++++++++----------------------------
 app/templates/sync.html   | 15 +++++++++-----
 2 files changed, 21 insertions(+), 35 deletions(-)

diff --git a/app/templates/series.html b/app/templates/series.html
index d8987f40..399f0593 100755
--- a/app/templates/series.html
+++ b/app/templates/series.html
@@ -36,21 +36,6 @@
       overflow-wrap: break-word;
     }
 
-    /* Set width of text input fields to 300px */
-    /* .inline.field >* input[type="text"] {
-      width: 300px !important;
-    } */
-
-    /* .config-label {
-      flex: 0 0 150px;
-      display: flex;
-      margin-right: 10px;
-      justify-content: flex-end;
-      text-align: right;
-      font-weight: bold;
-      color: var(--font-color);
-    } */
-
     /* Add top padding above the delete button for each episode */
     .tab[data-tab="episode-data"] .negative.button {
       margin-top: 5px;
@@ -60,7 +45,7 @@
     #new-episode-modal {
       width: 500px !important;
     }
-
+    /* Use right-aligned inline labels */
     #new-episode-form label {
       flex: 0 0 125px;
       display: flex;
@@ -68,15 +53,6 @@
       justify-content: flex-end;
       text-align: right;
     }
-
-    /* .disabled.config-label {
-      color: var(--font-color-disabled);
-      font-weight: lighter;
-    }
-
-    div.dropdown {
-      min-width: 500px;
-    } */
   </style>
 
   <!-- Templates -->
@@ -257,7 +233,6 @@
 
     async function initAll() {
       getEpisodeDataSources();
-      // getImageSources();
       getLibraries();
       getEpisodeData();
     }
@@ -274,6 +249,7 @@
             class: 'error',
             title: 'Error Refreshing Data',
             message: response.responseJSON.detail,
+            displayTime: 0,
           });
         }
       });
@@ -283,11 +259,16 @@
       $.ajax({
         type: 'POST',
         url: '/api/series/{{series.id}}/create-cards',
-        success: function(response) {
-          $.toast({class: 'blue info', title: `Created Missing Cards`});
+        success: (response) => {
+          $.toast({class: 'blue info', title: `Created title cards`});
           getEpisodeData();
-        }, error: function(response) {
-          $.toast({class: 'error', title: 'Error Creating Cards'});
+        }, error: (response) => {
+          $.toast({
+            class: 'error',
+            title: 'Error creating title cards',
+            message: response.responseJSON.detail,
+            displayTime: 0,
+          });
         }
       });
     }
diff --git a/app/templates/sync.html b/app/templates/sync.html
index b86208fc..c771d290 100755
--- a/app/templates/sync.html
+++ b/app/templates/sync.html
@@ -672,17 +672,22 @@ <h4 class="ui horizontal divider header" title="Elements to Exclude from this sy
     syncData.forEach(({interface, formID, modalID}) => {
       $(`#${formID}`).on('submit', (event) => {
         event.preventDefault();
+        // Turn form into object, turning multi selects into arrays
         let form = new FormData(event.target);
+        let dataObj = {};
         for (let [name, value] of [...form.entries()]) {
-          if (value === '') { form.delete(name); }
+          if (name.includes('_tags') || name.includes('_libraries')) {
+            dataObj[name] = value.split(',');
+          } else if (value !== '') {
+            dataObj[name] = value;
+          }
         }
         // Submit API request to add this sync
         $.ajax({
           type: 'POST',
           url: `/api/sync/${interface}/new`,
-          data: form,
-          processData: false,
-          contentType: false,
+          data: JSON.stringify(dataObj),
+          contentType: "application/json",
           success: (response) => {
             $.toast({
               class: 'blue info',
@@ -694,7 +699,7 @@ <h4 class="ui horizontal divider header" title="Elements to Exclude from this sy
             $.toast({
               class: 'error',
               title: 'Error Creating Sync',
-              message: 'Ensure the sync name is valid',
+              message: response.responseJSON.detail,
             });
           }, complete: () => {}
         });