Merge pull request #694 from distributive/update-formats-page

Update formats page
NetrunnerDB · Sep 28, 2022 · 121f8bd · 121f8bd
2 parents 99ec51b + 2dbb5a2
commit 121f8bd
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 16 deletions.
diff --git a/app/Resources/views/Banlists/banlists.html.twig b/app/Resources/views/Banlists/banlists.html.twig
@@ -66,7 +66,7 @@ async function buildBanlistsView() {
   $('#restrictions-root').show();
 
   // Add a temporary loading indicator
-  $('.tab-pane').append('<p class="temp-loading text-center"><span class="loading-icon"><span class="loading-icon-red"></span><span class="loading-icon-blue"></span><span class="loading-icon-overlap"></span></span>Loading...</p>');
+  $('.tab-pane').append(loading_icon);
 
   // Load data from API
   const desiredFormats = ['startup', 'standard', 'eternal'];

diff --git a/app/Resources/views/Formats/formats.html.twig b/app/Resources/views/Formats/formats.html.twig
@@ -3,6 +3,7 @@
 {% block title %}Play Formats{% endblock %}
 
 {% block body %}
+{% include '/Scripts/api.html.twig' %}
 <div class="container">
 
   <h1>{{ block('title') }}</h1>
@@ -22,24 +23,20 @@
   </div>
 </div>
 <script>
-function makeIdMap(json) {
-  const out = new Map();
-  json.data.forEach(d => {
-    out.set(d.id, d);
-  });
-  return out;
-}
-
 async function buildFormatsView() {
+  // Add a temporary loading indicator
+  $('#formats').append(loading_icon);
+
+  // Load api data
   const desiredFormats = new Set(['eternal', 'standard', 'startup']);
 
   const [r1, r2, r3, r4, r5] = await Promise.all(
     [
-      fetch('{{ v3_api_url }}/api/v3/public/snapshots?filter[active]=true').then(data => data.json()),
-      fetch('{{ v3_api_url }}/api/v3/public/restrictions').then(data => data.json()),
-      fetch('{{ v3_api_url }}/api/v3/public/card_cycles?sort=-date_release').then(data => data.json()),
-      fetch('{{ v3_api_url }}/api/v3/public/card_sets?sort=-date_release').then(data => data.json()),
-      fetch('{{ v3_api_url }}/api/v3/public/formats').then(data => data.json()),
+      fetchJson('{{ v3_api_url }}/api/v3/public/snapshots?filter[active]=true'),
+      fetchJson('{{ v3_api_url }}/api/v3/public/restrictions'),
+      fetchJson('{{ v3_api_url }}/api/v3/public/card_cycles?sort=-date_release'),
+      fetchJson('{{ v3_api_url }}/api/v3/public/card_sets?sort=-date_release'),
+      fetchJson('{{ v3_api_url }}/api/v3/public/formats'),
     ]
   );
 
@@ -54,6 +51,9 @@ async function buildFormatsView() {
       .filter(snapshot => desiredFormats.has(snapshot.attributes.format_id))
       .sort((a, b) => (a.attributes.format_id < b.attributes.format_id) ? 1 : -1);
 
+  // Remove the loading indicator
+  $('.temp-loading').remove();
+
   // Each Format is a column, with the following struction:
   //   - Name
   //   - Banlist (if any)
@@ -104,7 +104,7 @@ async function buildFormatsView() {
       $(`#${format.id}_runner_decklists`).append(`<li><a href="${Routing.generate('decklists_list', {type:'find', 'faction':'p', 'packs': packs})}"><span class="icon icon-apex influence-apex"></span> Apex</a></li>`);
       $(`#${format.id}_runner_decklists`).append(`<li><a href="${Routing.generate('decklists_list', {type:'find', 'faction':'u', 'packs': packs})}"><span class="icon icon-sunny-lebeau influence-sunny-lebeau"></span> Sunny Lebeau</a></li>`);
     }
-          
+
     $(`#${format.id}`).append(`<h4>Legal Card Cycles - <a href="${Routing.generate('cards_find', {q: 'e:' + packs.join('|') } )}">${format.attributes.num_cards} Unique Cards</a></h4>`);
 
     $(`#${format.id}`).append(`<ul id="${format.id}_cycles"></ul>`);

diff --git a/app/Resources/views/layout.html.twig b/app/Resources/views/layout.html.twig
@@ -75,7 +75,8 @@
         locale: '{{ app.request.locale }}'
       };
       moment.locale(window.navigator.language);
-      var v3_api_url = '{{ v3_api_url }}';
+      const v3_api_url = '{{ v3_api_url }}';
+      const loading_icon = '<p class="temp-loading text-center"><span class="loading-icon"><span class="loading-icon-red"></span><span class="loading-icon-blue"></span><span class="loading-icon-overlap"></span></span>Loading...</p>';
     </script>
     {% if app.environment == 'prod' %}
     <!-- Global site tag (gtag.js) - Google Analytics -->