[51] Add missing logos to the missing page in the UI

CollinHeist · Sep 8, 2024 · 43b3fe6 · 43b3fe6
1 parent dfc2582
commit 43b3fe6
Show file tree

Hide file tree

Showing 3 changed files with 83 additions and 8 deletions.
diff --git a/app/templates/js/missing.js b/app/templates/js/missing.js
@@ -1,13 +1,21 @@
 {% if False %}
-import {Episode, EpisodePage} from './.types.js';
+import {
+  Episode, EpisodePage, Series
+} from './.types.js';
 {% endif %}
 
 
-function initAll() {
+/**
+ * Query all Episodes which are missing a Card and display them all on the page.
+ */
+function queryMissingCards() {
   $.ajax({
     type: 'GET',
-    url: '/api/cards/missing',
-    /** @param {EpisodePage} episodeData */
+    url: '/api/missing/cards',
+    /**
+     * Missing Episodes queried, populate table.
+     * @param {EpisodePage} episodeData - Episodes missing Cards.
+     */
     success: episodeData => {
       /** @type {Object.<number, Episode>} Group Episodes by Series*/
       const groupedEpisodes = {};
@@ -21,13 +29,13 @@ function initAll() {
       // Templates
       const template = document.getElementById('missing-card-template');
       const table = document.getElementById('missing-cards');
-      const rowTemplate = document.getElementById('row-template');
+      const rowTemplate = document.getElementById('missing-card-row-template');
 
       // Add rows to the table
       for (const [series_id, episodes] of Object.entries(groupedEpisodes)) {
         // Link name cell to Series page
         const row = template.content.cloneNode(true);
-        row.querySelector('td[data-row="series"]').onclick = () => window.location.href = `/series/${series_id}`;
+        row.querySelector('td[data-row="series"]').onclick = () => window.location.href = `/series/${series_id}#files`;
         row.querySelector('td[data-row="series"] [data-value="name"]').innerText = episodes[0].series.name;
         row.querySelector('td[data-row="series"] img').src = episodes[0].series.small_poster_url;
         row.querySelector('td[data-row="series"]').rowSpan = episodes.length;
@@ -48,5 +56,45 @@ function initAll() {
 
       refreshTheme();
     },
+    error: response => showErrorToast({title: 'Error Querying Missing Cards', response}),
+  });
+}
+
+/**
+ * Query all Series which are missing logos and display them on the page.
+ */
+function queryMissingLogos() {
+  $.ajax({
+    url: '/api/missing/logos',
+    /**
+     * Missing logos queried, populate the table.
+     * @param {Series[]} allSeries - List of Series which are missing logos.
+     */
+    success: allSeries => {
+      // Templates
+      const template = document.getElementById('missing-logo-template');
+      const table = document.getElementById('missing-logos');
+
+      allSeries.forEach(series => {
+        const row = template.content.cloneNode(true);
+
+        row.querySelector('td[data-row="series"]').onclick = () => window.location.href = `/series/${series.id}#files`;
+        row.querySelector('td[data-row="series"] [data-value="name"]').innerText = series.name;
+        row.querySelector('td[data-row="series"] img').src = series.small_poster_url;
+
+        row.querySelector('td[data-row="filename"]').innerText = 'logo.png';
+
+        table.appendChild(row);
+      });
+
+      refreshTheme();
+    },
+    error: response => showErrorToast({title: 'Error Querying Missing Logos', response}),
   });
 }
+
+
+function initAll() {
+  queryMissingCards();
+  queryMissingLogos();
+}
diff --git a/app/templates/missing.html b/app/templates/missing.html
@@ -27,13 +27,28 @@ <h4 class="ui image header">
     </tr>
   </template>
 
-  <template id="row-template">
+  <template id="missing-card-row-template">
     <tr>
       <td class="center aligned" data-row="season"></td>
       <td class="center aligned" data-row="episode"></td>
       <td data-row="title"></td>
     </tr>
   </template>
+
+  <template id="missing-logo-template">
+    <tr>
+      <td data-row="series" class="collapsing selectable">
+        <a>
+          <h4 class="ui image header">
+            <img class="ui tiny rounded image">
+            <div class="content" data-value="name">{SERIES}</div>
+          </h4>
+        </a>
+      </td>
+      <td data-row="filename"></td>
+    </tr>
+  </template>
+
 </head>
 
 <body onload="initAll();">
@@ -59,6 +74,18 @@ <h1 class="ui header">Missing Title Cards</h1>
         </thead>
         <tbody></tbody>
       </table>
+
+      <h1 class="ui header">Missing Logos</h1>
+      <table class="ui celled compact unstackable structured striped table" id="missing-logos">
+        <thead>
+          <tr>
+            <th>Series</th>
+            <th>File</th>
+          </tr>
+        </thead>
+        <tbody></tbody>
+      </table>
+
     </div>
   </div>
 </body>

diff --git a/modules/ref/version_webui b/modules/ref/version_webui
@@ -1 +1 @@
-v2.0-alpha.12.0-webui50
+v2.0-alpha.12.0-webui51