Shows destinations

templates/index.html

@@ -79,6 +79,40 @@
         `;
       }
 
+      function createFinishCard(artist, title, status, art, destinations) {
+        let dstList = ""
+        for (destination of destinations) {
+          dstList += `<li>${destination}</li>`;
+        }
+
+        let extraClasses = ""
+        if (status !== "Finished sucessfully") {
+          extraClasses = "border-danger"
+        }
+
+        return `
+          <div class="card mb-3 ${extraClasses}" style="max-width: 540px;">
+            <div class="row g-0">
+              <div class="col-md-4">
+                <img src="${art}" class="img-fluid rounded-start">
+              </div>
+              <div class="col-md-8">
+                <div class="card-body">
+                  <h5 class="card-title">${title}</h5>
+                  <p class="card-text">${artist}</p>
+
+                  <ol>
+                    ${dstList}
+                  </ol>
+
+                  <p class="card-text"><small class="text-body-secondary">${status}</small></p>
+                </div>
+              </div>
+            </div>
+          </div>
+        `;
+      }
+
       const ripFormInput = document.getElementById("urlInput");
 
       document
@@ -124,7 +158,7 @@
 
         finishTableBody.innerHTML = "";
         for (const q of statusJson.finishedQueue) {
-          finishTableBody.innerHTML += createCard(q.artist, q.title, q.status, q.art_url);
+          finishTableBody.innerHTML += createFinishCard(q.artist, q.title, q.status, q.art_url, q.destinations);
         }
       }