List recent pledges on home page
And a new "pledges" page to list them all!
This commit is contained in:
Hippo
parent
921187a2aa
commit
668371a690
|
|
@ -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!
|
||||
|
|
|
|||
|
|
@ -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">★</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">★</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>
|
||||
|
|
|
|||
45
src/pledges.htm.twig
Normal file
45
src/pledges.htm.twig
Normal file
|
|
@ -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 %}
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue