Add metadata for set lists

lannonbr · Aug 11, 2024 · 5935cf9 · 5935cf9
1 parent dfbe7d7
commit 5935cf9
Show file tree

Hide file tree

Showing 3 changed files with 56 additions and 3 deletions.
diff --git a/mvc/controllers/setListing.js b/mvc/controllers/setListing.js
@@ -45,7 +45,7 @@ module.exports = (router, app) => {
     res.render("setListing", model);
   });
 
-  router.route("/new/:id").get((req, res) => {
+  router.route("/new/:id").get(async (req, res) => {
     const setId = req.params.id;
 
     let model = require("../models/global")(req, res);
@@ -56,7 +56,17 @@ module.exports = (router, app) => {
       )
     );
 
-    model.content.pageTitle = `Set Listing: ${setId}`;
+    const set = await pokemon.set.find(setId);
+
+    model.set = {
+      name: set.name,
+      image: set.images.logo,
+      releaseDate: set.releaseDate,
+      total: set.printedTotal,
+      secretRares: set.total - set.printedTotal,
+    };
+
+    model.content.pageTitle = `Set Listing: ${set.name}`;
     res.render("setList", model);
   });
 

diff --git a/mvc/views/setList.html b/mvc/views/setList.html
@@ -1,7 +1,20 @@
 <include src="layouts/main">
   <arg pageContent>
     <article id="homepage">
-      <a href="/new">Back to Set Listing</a>
+      <a class="back-to-set-listing" href="/new">&laquo; Back to Set Listing</a>
+      <h2>Set Information</h2>
+      <div id="set-list-header">
+        <div>
+          <img class="set-logo" src="{set.image}" alt="Logo for {set.name}" />
+        </div>
+        <div>
+          <p>Release Date: {set.releaseDate}</p>
+          <p>
+            Card Count: {set.total} cards (+{set.secretRares} secret rare cards)
+          </p>
+        </div>
+      </div>
+      <h2>Cards:</h2>
       <ul class="setList">
         <loop through="setList" val="card">
           <li>

diff --git a/statics/css/styles.less b/statics/css/styles.less
@@ -106,6 +106,36 @@ ul.setList {
   gap: 1em;
 }
 
+.set-logo {
+  width: 250px;
+}
+
+#set-list-header {
+  display: flex;
+  margin-top: 32px;
+}
+
+#set-list-header div:first-child {
+  padding-right: 48px;
+}
+
+#set-list-header div:last-child {
+  font-size: 20px;
+}
+
+a.back-to-set-listing {
+  padding: 8px;
+  border-radius: 4px;
+  color: white;
+  background-color: rgb(22 163 74);
+  text-decoration: none;
+}
+
+a.back-to-set-listing:hover {
+  box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1),
+    0 8px 10px -6px rgb(0 0 0 / 0.1);
+}
+
 main {
   display: flex;
   flex-direction: column;