From 23936b0cd54c245bcc872ed24b908432e9e50268 Mon Sep 17 00:00:00 2001
From: distributive <github@ameliewd.com>
Date: Mon, 26 Sep 2022 09:29:54 +0100
Subject: [PATCH 1/4] Update formats page to use local api module

---
 app/Resources/views/Formats/formats.html.twig | 11 ++---------
 1 file changed, 2 insertions(+), 9 deletions(-)

diff --git a/app/Resources/views/Formats/formats.html.twig b/app/Resources/views/Formats/formats.html.twig
index e5376595..49aa80d2 100644
--- 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,14 +23,6 @@
   </div>
 </div>
 <script>
-function makeIdMap(json) {
-  const out = new Map();
-  json.data.forEach(d => {
-    out.set(d.id, d);
-  });
-  return out;
-}
-
 async function buildFormatsView() {
   const desiredFormats = new Set(['eternal', 'standard', 'startup']);
 
@@ -104,7 +97,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>`);

From 455e292b96657648f37aa8cbdf6676a39d5082aa Mon Sep 17 00:00:00 2001
From: distributive <github@ameliewd.com>
Date: Mon, 26 Sep 2022 10:05:16 +0100
Subject: [PATCH 2/4] Condensed fetch commands with api module

---
 app/Resources/views/Formats/formats.html.twig | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/app/Resources/views/Formats/formats.html.twig b/app/Resources/views/Formats/formats.html.twig
index 49aa80d2..99c8653d 100644
--- a/app/Resources/views/Formats/formats.html.twig
+++ b/app/Resources/views/Formats/formats.html.twig
@@ -28,11 +28,11 @@ async function buildFormatsView() {
 
   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'),
     ]
   );
 

From 01442801634f861f7ddc4e03ab1bebd23e19e64e Mon Sep 17 00:00:00 2001
From: distributive <github@ameliewd.com>
Date: Mon, 26 Sep 2022 10:05:46 +0100
Subject: [PATCH 3/4] Added loading icon to formats page

---
 app/Resources/views/Formats/formats.html.twig | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/app/Resources/views/Formats/formats.html.twig b/app/Resources/views/Formats/formats.html.twig
index 99c8653d..64288ad9 100644
--- a/app/Resources/views/Formats/formats.html.twig
+++ b/app/Resources/views/Formats/formats.html.twig
@@ -24,6 +24,10 @@
 </div>
 <script>
 async function buildFormatsView() {
+  // Add a temporary loading indicator
+  $('#formats').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>');
+
+  // Load api data
   const desiredFormats = new Set(['eternal', 'standard', 'startup']);
 
   const [r1, r2, r3, r4, r5] = await Promise.all(
@@ -47,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)

From 2dbb5a2d093f8cd3aaf9236135b86cbf85610246 Mon Sep 17 00:00:00 2001
From: distributive <github@ameliewd.com>
Date: Mon, 26 Sep 2022 10:48:38 +0100
Subject: [PATCH 4/4] Moved loading indicator code to shared constant

---
 app/Resources/views/Banlists/banlists.html.twig | 2 +-
 app/Resources/views/Formats/formats.html.twig   | 2 +-
 app/Resources/views/layout.html.twig            | 3 ++-
 3 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/app/Resources/views/Banlists/banlists.html.twig b/app/Resources/views/Banlists/banlists.html.twig
index d55e687a..a0dd1de6 100644
--- 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
index 64288ad9..3cfed299 100644
--- a/app/Resources/views/Formats/formats.html.twig
+++ b/app/Resources/views/Formats/formats.html.twig
@@ -25,7 +25,7 @@
 <script>
 async function buildFormatsView() {
   // Add a temporary loading indicator
-  $('#formats').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>');
+  $('#formats').append(loading_icon);
 
   // Load api data
   const desiredFormats = new Set(['eternal', 'standard', 'startup']);
diff --git a/app/Resources/views/layout.html.twig b/app/Resources/views/layout.html.twig
index 201abbcb..b86bb705 100755
--- 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 -->