Reduced api calls to the minimal 3 and ran them concurrently

Author: distributive

app/Resources/views/Banlists/banlists.html.twig

@@ -70,27 +70,28 @@ async function buildBanlistsView() {
 
   // Load data from API
   const desiredFormats = ['startup', 'standard', 'eternal'];
-  const formats = await Promise.all(desiredFormats.map(f => fetch(`{{ v3_api_url }}/api/v3/public/formats/${f}`).then(data => data.json()).then(json => json.data)));
-  const cards = await fetchCards(`?include=card_subtypes&filter[search]=in_restriction:true`, 250).then(cards => splitBySide(cards));
-  const restrictions = await Promise.all(formats.map(f =>
-    fetchData(`{{ v3_api_url }}/api/v3/public/formats/${f.id}/restrictions?sort=-date_start`)
-  ));
+  const [formats, cards, restrictions] = await Promise.all([
+    fetchData(`{{ v3_api_url }}/api/v3/public/formats`).then(fs => fs.filter(f => desiredFormats.includes(f.id))),
+    fetchCards(`?include=card_subtypes&filter[search]=in_restriction:true`, 250).then(splitBySide),
+    fetchData(`{{ v3_api_url }}/api/v3/public/restrictions?sort=-date_start`)
+  ]);
 
   // Remove the loading indicator
   $('.temp-loading').remove();
 
   // Add each format to the page
   // Start by adding an empty text box for each restriction
-  for (const [i, f] of formats.entries()) {
+  formats.forEach(f => {
     $(`#tab-pane-${f.id}`).append(`<div class="list"><div class="row"><div id="${f.id}" class="col-sm-12"></div></div></div>`);
     const jqCol = $(`#${f.id}`);
-    if (restrictions[i].length == 0) {
+    const formatRestrictions = restrictions.filter(r => f.attributes.restriction_ids.includes(r.id));
+    if (formatRestrictions.length == 0) {
       jqCol.append(`<p>No cards are currently banned in ${f.attributes.name}. Have a blast!</p>`);
     } else {
       jqCol.append('<p><button class="show-all btn btn-secondary">Show all</button><button class="hide-all pull-right btn btn-secondary">Hide all</button></p>');
-      for (const r of restrictions[i]) {
+      formatRestrictions.forEach(r => {
         const active = r.id == f.attributes.active_restriction_id;
-        const visible = active || r.id == restrictions[i][0].id;
+        const visible = active || r.id == formatRestrictions[0].id;
         // Create panel
         jqCol.append(`<div id="restriction-${r.id}" class="panel panel-default"></div>`);
         const jqPanel = $(`#restriction-${r.id}`);
@@ -100,9 +101,9 @@ async function buildBanlistsView() {
                                       .append(`<button class="list-toggle btn btn-secondary" style="margin-left:auto; margin-top: auto; margin-bottom: auto;">${visible ? 'Hide' : 'Show'}</button>`);
         // Add subheader (search link hyphenated for legacy IDs)
         jqPanel.append(`<div class="panel-heading" ${visible ? '' : 'style="display: none;"'}><a href=${Routing.generate('cards_find', {type:'find', 'view':'list', 'q':`b!${r.id.replaceAll('_', '-')}`})}>${r.attributes.size} cards</a>. Start Date: ${r.attributes.date_start}.</div>`);
-      }
+      });
     }
-  }
+  });
 
   // Set up event handling
   $('.list-toggle').on('click', function (event) {
@@ -126,62 +127,60 @@ async function buildBanlistsView() {
   });
 
   // Add the restriction data to each text box
-  for (const format of restrictions) {
-    for (const r of format) {
-      const v = r.attributes.verdicts;
-
-      // Lists (bans, restricted cards, global penalty cards)
-      const [corpBan, runnerBan] = cards.map(cs => cs.filter(card => v.banned?.includes(card.id)));
-      const [corpRes, runnerRes] = cards.map(cs => cs.filter(card => v.restricted?.includes(card.id)));
-      const [corpPen, runnerPen] = cards.map(cs => cs.filter(card => v.global_penalty?.includes(card.id)));
-
-      // Mappings (points, universal faction costs)
-      const [corpUFC, runnerUFC] = cards.map(cs => makeCardMap(cs, v.universal_faction_cost));
-      const [corpPts, runnerPts] = cards.map(cs => makeCardMap(cs, v.points));
-
-      // Get the panel DOM object
-      const jqPanel = $(`#restriction-${r.id}`);
-
-      // Add body
-      jqPanel.append(`<div class="panel-body" ${jqPanel.find(`button`).html() == 'Show' ? 'style="display: none;"' : ''}><div class="container-fluid"><div class="row flex-fill">`);
-
-      // Generate corp restrictions
-      jqPanel.find(`.row`).append(`<div class="col-md-6"><h3>Corp Cards</h3><ul id="${r.id}-corp"></ul></div>`);
-      const jqCorp = $(`#${r.id}-corp`);
-      // Bans (banned subtypes (i.e. currents) are removed beforehand to reduce length)
-      if (corpBan.length > 0) {
-        if (r.attributes.banned_subtypes.length > 0) { // NOTE: currently hardcoded to only be currents
-          const pre = `All cards with the <strong><a href="${Routing.generate('cards_find', {type:'find', 'view':'list', 'q':'s:current d:corp'})}">Current</a></strong> subtype.`;
-          jqCorp.append(generateList('Banned', removeCurrents(corpBan), pre));
-        } else {
-          jqCorp.append(generateList('Banned', corpBan));
-        }
+  restrictions.forEach(r => {
+    const v = r.attributes.verdicts;
+
+    // Lists (bans, restricted cards, global penalty cards)
+    const [corpBan, runnerBan] = cards.map(cs => cs.filter(card => v.banned?.includes(card.id)));
+    const [corpRes, runnerRes] = cards.map(cs => cs.filter(card => v.restricted?.includes(card.id)));
+    const [corpPen, runnerPen] = cards.map(cs => cs.filter(card => v.global_penalty?.includes(card.id)));
+
+    // Mappings (points, universal faction costs)
+    const [corpUFC, runnerUFC] = cards.map(cs => makeCardMap(cs, v.universal_faction_cost));
+    const [corpPts, runnerPts] = cards.map(cs => makeCardMap(cs, v.points));
+
+    // Get the panel DOM object
+    const jqPanel = $(`#restriction-${r.id}`);
+
+    // Add body
+    jqPanel.append(`<div class="panel-body" ${jqPanel.find(`button`).html() == 'Show' ? 'style="display: none;"' : ''}><div class="container-fluid"><div class="row flex-fill">`);
+
+    // Generate corp restrictions
+    jqPanel.find(`.row`).append(`<div class="col-md-6"><h3>Corp Cards</h3><ul id="${r.id}-corp"></ul></div>`);
+    const jqCorp = $(`#${r.id}-corp`);
+    // Bans (banned subtypes (i.e. currents) are removed beforehand to reduce length)
+    if (corpBan.length > 0) {
+      if (r.attributes.banned_subtypes.length > 0) { // NOTE: currently hardcoded to only be currents
+        const pre = `All cards with the <strong><a href="${Routing.generate('cards_find', {type:'find', 'view':'list', 'q':'s:current d:corp'})}">Current</a></strong> subtype.`;
+        jqCorp.append(generateList('Banned', removeCurrents(corpBan), pre));
+      } else {
+        jqCorp.append(generateList('Banned', corpBan));
       }
-      // The others
-      if (corpRes.length > 0) { jqCorp.append(generateList('Restricted', corpRes)); }
-      Object.keys(corpUFC).sort().reverse().forEach(p => { jqCorp.append(generateList(`+${p} Universal Influence`, corpUFC[p])); });
-      if (corpPen.length > 0) { jqCorp.append(generateList('Identity Influence Reduction', corpPen)); }
-      Object.keys(corpPts).sort().reverse().forEach(p => { jqCorp.append(generateList(`${p} ${p == 1 ? 'Point' : 'Points'}`, corpPts[p])); });
-
-      // Generate runner restrictions
-      jqPanel.find('.row').append(`<div class="col-md-6"><h3>Runner Cards</h3><ul id="${r.id}-runner"></ul></div>`);
-      const jqRunner = $(`#${r.id}-runner`);
-      // Bans (banned subtypes (i.e. currents) are removed beforehand to reduce length)
-      if (runnerBan.length > 0) {
-        if (r.attributes.banned_subtypes.length > 0) { // NOTE: currently hardcoded to only be currents
-          const pre = `All cards with the <strong><a href="${Routing.generate('cards_find', {type:'find', 'view':'list', 'q':'s:current d:runner'})}">Current</a></strong> subtype.`;
-          jqRunner.append(generateList('Banned', removeCurrents(runnerBan), pre));
-        } else {
-          jqRunner.append(generateList('Banned', runnerBan));
-        }
+    }
+    // The others
+    if (corpRes.length > 0) { jqCorp.append(generateList('Restricted', corpRes)); }
+    Object.keys(corpUFC).sort().reverse().forEach(p => { jqCorp.append(generateList(`+${p} Universal Influence`, corpUFC[p])); });
+    if (corpPen.length > 0) { jqCorp.append(generateList('Identity Influence Reduction', corpPen)); }
+    Object.keys(corpPts).sort().reverse().forEach(p => { jqCorp.append(generateList(`${p} ${p == 1 ? 'Point' : 'Points'}`, corpPts[p])); });
+
+    // Generate runner restrictions
+    jqPanel.find('.row').append(`<div class="col-md-6"><h3>Runner Cards</h3><ul id="${r.id}-runner"></ul></div>`);
+    const jqRunner = $(`#${r.id}-runner`);
+    // Bans (banned subtypes (i.e. currents) are removed beforehand to reduce length)
+    if (runnerBan.length > 0) {
+      if (r.attributes.banned_subtypes.length > 0) { // NOTE: currently hardcoded to only be currents
+        const pre = `All cards with the <strong><a href="${Routing.generate('cards_find', {type:'find', 'view':'list', 'q':'s:current d:runner'})}">Current</a></strong> subtype.`;
+        jqRunner.append(generateList('Banned', removeCurrents(runnerBan), pre));
+      } else {
+        jqRunner.append(generateList('Banned', runnerBan));
       }
-      // The others
-      if (runnerRes.length > 0) { jqRunner.append(generateList('Restricted', runnerRes)); }
-      Object.keys(runnerUFC).sort().reverse().forEach(p => { jqRunner.append(generateList(`+${p} Universal Influence`, runnerUFC[p])); });
-      if (runnerPen.length > 0) { jqRunner.append(generateList('Identity Influence Reduction', runnerPen)); }
-      Object.keys(runnerPts).sort().reverse().forEach(p => { jqRunner.append(generateList(`${p} ${p == 1 ? 'Point' : 'Points'}`, runnerPts[p])); });
     }
-  }
+    // The others
+    if (runnerRes.length > 0) { jqRunner.append(generateList('Restricted', runnerRes)); }
+    Object.keys(runnerUFC).sort().reverse().forEach(p => { jqRunner.append(generateList(`+${p} Universal Influence`, runnerUFC[p])); });
+    if (runnerPen.length > 0) { jqRunner.append(generateList('Identity Influence Reduction', runnerPen)); }
+    Object.keys(runnerPts).sort().reverse().forEach(p => { jqRunner.append(generateList(`${p} ${p == 1 ? 'Point' : 'Points'}`, runnerPts[p])); });
+  });
 }
 
 // Create the banlists view on load