List recent pledges on home page

And a new "pledges" page to list them all!

server/index.js

@@ -166,6 +166,16 @@ router.get('/', async (req, res) => {
     .count('* as total_people'))[0]
 
 
+  // get latest pledges
+  let recentPledges = (
+    await Pledge
+    .forge()
+    .orderBy('created_at', 'DESC')
+    .fetchPage({ limit: 5 })
+  ).models
+
+  if (DEBUG) console.log(`Listing ${recentPledges.length} pledges`)
+
   twing.render('index.htm.twig', {
     'goal_rupees': Number(goalRupees).toLocaleString('en-IN'),
     'goal_people': Number(goalPeople).toLocaleString('en-IN'),
@@ -173,6 +183,7 @@ router.get('/', async (req, res) => {
     'progress_people': Number(total_people).toLocaleString('en-IN'),
     'percent_rupees': `style="width: ${total_rupees/goalRupees*100}%"`,
     'percent_people': `style="width: ${total_people/goalPeople*100}%"`,
+    'recent_pledges': recentPledges,
   }).then((output) => {
     res.end(output)
   })
@@ -473,6 +484,32 @@ router.get('/thanks', async (req, res) => {
   return
 })
 
+router.get('/pledges', async (req, res) => {
+  if (DEBUG) console.debug('Returning pledges list')
+
+  // count people
+  let { total_people, total_rupees } = (await knex('pledges')
+    .sum('amount as total_rupees')
+    .count('* as total_people'))[0]
+
+
+  // get latest pledges
+  let recentPledges = (
+    await Pledge
+    .forge()
+    .orderBy('created_at', 'DESC')
+    .fetchPage({ limit: 5 })
+  ).models
+
+  if (DEBUG) console.log(`Listing ${recentPledges.length} pledges`)
+
+  twing.render('pledges.htm.twig', {
+    'recent_pledges': recentPledges,
+  }).then((output) => {
+    res.end(output)
+  })
+})
+
 router.use(express.static('src/assets'))
 
 // start the listener!

src/index.htm.twig

@@ -69,6 +69,43 @@
             <a href="#pledge-form" class="font-sans text-base mt-4 p-2 border-2 border-solid border-orange-700 text-orange-700 hover:border-orange-500 hover:text-orange-500 uppercase rounded w-full inline-block text-center">Add your Pledge</a>
           </div>
         </div>
+        {% if recent_pledges %}
+        <div class="h-0 md:h-auto bg-white w-full p-0 md:p-3 md:rounded-md mt-5 hidden md:block d:drop-shadow-md">
+          <h4 class="font-sans text-center text-black">Recent Pledges</h4>
+          <ul>
+            {% for pledge in recent_pledges %}
+            <li class="recent-pledge">
+              <div class="avatar-container">
+                <div class="avatar">
+                  <span class="m-auto">
+                  {% if pledge.get('anonymous') %}?{% else %}{{ pledge.get('name')[:2] }}{% endif %}
+                  </span>
+                </div>
+              </div>
+              <div class="pl-2">
+                <p class="pledger-name">{% if pledge.get('anonymous') %}Anonymous{% else %}{{ pledge.get('name') }}{% endif %}</p>
+                <p class="font-bold">₹{{ pledge.get('amount') }}</p>
+                {% if pledge.get('other_message') %}
+                <p class="italic">{{ pledge.get('other_message')}}</p>
+                {% endif %}
+              </div>
+            </li>
+            {% endfor %}
+            <a href="/pledges" class="no-underline">
+              <li class="recent-pledge">
+                <div class="avatar-container">
+                  <div class="avatar">
+                    <span class="m-auto">&#9733;</span>
+                  </div>
+                </div>
+                <div class="pl-0 md:pl-2">
+                  <p class="pt-2">See all pledges</p>
+                </div>
+              </li>
+            </a>
+          </ul>
+        </div>
+        {% endif %}
       </div>
 
       <div class="w-full md:w-3/5 lg:w-3/4">
@@ -192,6 +229,40 @@
     </div>
     <!-- Here, the floating donation box ceases to float -->
 
+    {% if recent_pledges %}
+    <div class="w-full mt-12 md:hidden">
+      <h4 class="font-sans text-center text-black text-2xl mb-4">Recent Pledges</h4>
+      <ul class="font-sans overflow-x-scroll grid grid-flow-col auto-cols-max gap-3 mx-3">
+        {% for pledge in recent_pledges %}
+        <li class="bg-white rounded-md p-4">
+          <div class="avatar">
+            <span class="m-auto">
+            {% if pledge.get('anonymous') %}?{% else %}{{ pledge.get('name')[:2] }}{% endif %}
+            </span>
+          </div>
+          <div class="pl-0 md:pl-2 text-center">
+            <p class="pledger-name py-1">{% if pledge.get('anonymous') %}Anonymous{% else %}{{ pledge.get('name') }}{% endif %}</p>
+            <p class="font-bold">₹{{ pledge.get('amount') }}</p>
+            {% if pledge.get('other_message') %}
+            <p class="italic">{{ pledge.get('other_message')}}</p>
+            {% endif %}
+          </div>
+        </li>
+        {% endfor %}
+        <a href="/pledges" class="no-underline bg-white rounded-md p-4">
+          <li>
+            <div class="avatar">
+              <span class="m-auto">&#9733;</span>
+            </div>
+            <div class="pl-0 md:pl-2 pt-2">
+              See all pledges
+            </div>
+          </li>
+        </a>
+      </ul>
+    </div>
+    {% endif %}
+
     <div class="w-full mt-12">
       <form action="/pledge" method="post" class="max-w-4xl mx-auto p-10">
         <a id="pledge-form"><h1 class="text-center text-2xl font-sans">Donation options</h1></a>

src/pledges.htm.twig

@@ -0,0 +1,45 @@
+{% extends "base.htm.twig" %}
+
+{% block title %}Snipette Crowdfunding: Pledges{% endblock %}
+
+{% block content %}
+<div class="max-w-md m-auto grow-0 text-left font-sans bg-white p-4 sm:rounded-lg">
+  <h1 class="text-4xl font-heading font-extrabold lowercase mb-4 text-center">Pledges so far</h1>
+  <p class="text-lg">Here is the list of pledges we've received so far. <a href="/#pledge-form">Add yours, if you haven't yet!</a>
+  <ul>
+    {% for pledge in recent_pledges %}
+    <li class="recent-pledge">
+      <div class="avatar-container">
+        <div class="avatar">
+          <span class="m-auto">
+          {% if pledge.get('anonymous') %}?{% else %}{{ pledge.get('name')[:2] }}{% endif %}
+          </span>
+        </div>
+      </div>
+      <div class="pl-2">
+        <p class="pledger-name">{% if pledge.get('anonymous') %}Anonymous{% else %}{{ pledge.get('name') }}{% endif %}</p>
+        <p class="font-bold">₹{{ pledge.get('amount') }}</p>
+        {% if pledge.get('other_message') %}
+        <p class="italic">{{ pledge.get('other_message')}}</p>
+        {% endif %}
+      </div>
+    </li>
+    {% endfor %}
+    <a href="/#pledge-form" class="no-underline">
+      <li class="recent-pledge">
+        <div class="avatar-container">
+          <div class="avatar">
+            <span class="m-auto">+</span>
+          </div>
+        </div>
+        <div class="pl-2">
+          <p class="pt-2">Add yours</p>
+        </div>
+      </li>
+    </a>
+  </ul>
+  <p class="text-center">
+    <a href="/" class="font-sans text-base mt-4 p-2 border-2 border-solid border-orange-700 text-orange-700 hover:border-orange-500 hover:text-orange-500 uppercase rounded w-full inline-block text-center no-underline">Return Home</a>
+  </p>
+</div>
+{% endblock %}

src/style.css

@@ -33,3 +33,27 @@ a {
 .donate-option > input:checked + li .input-custom + span {
   @apply hidden;
 }
+
+.recent-pledge {
+  @apply my-4 font-sans flex hover:text-orange-900;
+}
+
+.avatar-container {
+  @apply shrink-0 flex;
+}
+
+.avatar {
+  @apply text-2xl rounded-full bg-gray-600 text-white h-12 w-12 flex m-auto;
+}
+
+.recent-pledge:hover .avatar {
+  @apply bg-orange-600
+}
+
+.pledger-name {
+  @apply text-gray-600;
+}
+
+.recent-pledge:hover .pledger-name {
+  @apply text-orange-600;
+}