From 668371a690a5bd4fbfd6877bb83df5edc93363be Mon Sep 17 00:00:00 2001 From: Hippo Date: Tue, 11 Jan 2022 14:10:14 +0530 Subject: [PATCH] List recent pledges on home page And a new "pledges" page to list them all! --- server/index.js | 37 +++++++++++++++++++++++ src/index.htm.twig | 71 ++++++++++++++++++++++++++++++++++++++++++++ src/pledges.htm.twig | 45 ++++++++++++++++++++++++++++ src/style.css | 24 +++++++++++++++ 4 files changed, 177 insertions(+) create mode 100644 src/pledges.htm.twig diff --git a/server/index.js b/server/index.js index 5cb18ff..2014bce 100644 --- a/server/index.js +++ b/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! diff --git a/src/index.htm.twig b/src/index.htm.twig index f8ed0c7..f4e6824 100644 --- a/src/index.htm.twig +++ b/src/index.htm.twig @@ -69,6 +69,43 @@ Add your Pledge + {% if recent_pledges %} + + {% endif %}
@@ -192,6 +229,40 @@
+ {% if recent_pledges %} +
+

Recent Pledges

+ +
+ {% endif %} +

Donation options

 diff --git a/src/pledges.htm.twig b/src/pledges.htm.twig new file mode 100644 index 0000000..d707a62 --- /dev/null +++ b/src/pledges.htm.twig @@ -0,0 +1,45 @@ +{% extends "base.htm.twig" %} + +{% block title %}Snipette Crowdfunding: Pledges{% endblock %} + +{% block content %} +
+

Pledges so far

+

Here is the list of pledges we've received so far. Add yours, if you haven't yet! +

    + {% for pledge in recent_pledges %} +
  • +
    +
    + + {% if pledge.get('anonymous') %}?{% else %}{{ pledge.get('name')[:2] }}{% endif %} + +
    +
    +
    +

    {% if pledge.get('anonymous') %}Anonymous{% else %}{{ pledge.get('name') }}{% endif %}

    +

    ₹{{ pledge.get('amount') }}

    + {% if pledge.get('other_message') %} +

    {{ pledge.get('other_message')}}

    + {% endif %} +
    +
    • + {% endfor %} + +
  • +
    +
    + + +
    +
    +
    +

    Add yours

    +
    +
    • +     +
+

+ Return Home +

+
+{% endblock %} diff --git a/src/style.css b/src/style.css index 01aad88..4ad6c6f 100644 --- a/src/style.css +++ b/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; +}