Skip to content

Commit

Permalink
More annoyances.
Browse files Browse the repository at this point in the history
  • Loading branch information
@davepeck
davepeck committed Apr 17, 2024
1 parent 916a299 commit 15b3dab
Show file tree
Hide file tree
Showing 2 changed files with 80 additions and 59 deletions.
116 changes: 60 additions & 56 deletions server/vb/templates/components/countdown.dhtml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,9 +14,11 @@
}
</style>
<p>{{ contest.name }} ends in</p>
<div class="countdown" data-end-at="{{ contest.end_at|date:'c' }}"
data-number-color="{{ school.logo.action_text_color }}" data-number-bg-color="{{ school.logo.action_color }}"
data-colon-color="{{ school.logo.bg_text_color }}">
<div class="countdown"
data-end-at="{{ contest.end_at|date:'c' }}"
data-number-color="{{ school.logo.action_text_color }}"
data-number-bg-color="{{ school.logo.action_color }}"
data-colon-color="{{ school.logo.bg_text_color }}">
<style>
me {
--number-color: transparent;
Expand Down Expand Up @@ -53,67 +55,69 @@
}
</style>
<script>
/**
* Countdown to a deadline.
*
* @param {HTMLElement} self element containing the countdown.
* @returns {void}
*/
function countdown(self) {
// compute the deadline
const deadline = new Date(self.dataset.endAt);
const deadlineTime = deadline.getTime();
(function() {
/**
* Countdown to a deadline.
*
* @param {HTMLElement} self element containing the countdown.
* @returns {void}
*/
function countdown(self) {
// compute the deadline
const deadline = new Date(self.dataset.endAt);
const deadlineTime = deadline.getTime();

// set the number and colon colors
self.style.setProperty('--number-color', self.dataset.numberColor);
self.style.setProperty('--number-bg-color', self.dataset.numberBgColor);
self.style.setProperty('--colon-color', self.dataset.colonColor);
// set the number and colon colors
self.style.setProperty('--number-color', self.dataset.numberColor);
self.style.setProperty('--number-bg-color', self.dataset.numberBgColor);
self.style.setProperty('--colon-color', self.dataset.colonColor);

// get the number elements
const h0 = self.querySelector('[data-number=h0]');
const h1 = self.querySelector('[data-number=h1]');
const m0 = self.querySelector('[data-number=m0]');
const m1 = self.querySelector('[data-number=m1]');
const s0 = self.querySelector('[data-number=s0]');
const s1 = self.querySelector('[data-number=s1]');
const numbers = [h0, h1, m0, m1, s0, s1];
// get the number elements
const h0 = self.querySelector('[data-number=h0]');
const h1 = self.querySelector('[data-number=h1]');
const m0 = self.querySelector('[data-number=m0]');
const m1 = self.querySelector('[data-number=m1]');
const s0 = self.querySelector('[data-number=s0]');
const s1 = self.querySelector('[data-number=s1]');
const numbers = [h0, h1, m0, m1, s0, s1];

/** Update the countdown. */
function updateCountdown() {
const now = new Date().getTime();
const diff = deadlineTime - now;
/** Update the countdown. */
function updateCountdown() {
const now = new Date().getTime();
const diff = deadlineTime - now;

if (diff <= 0) {
clearInterval(interval);
numbers.forEach(number => number.textContent = '0');
return;
}
if (diff <= 0) {
clearInterval(interval);
numbers.forEach(number => number.textContent = '0');
return;
}

const hours = Math.floor(diff / (1000 * 60 * 60));
const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
const seconds = Math.floor((diff % (1000 * 60)) / 1000);
const hours = Math.floor(diff / (1000 * 60 * 60));
const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
const seconds = Math.floor((diff % (1000 * 60)) / 1000);

const h0digit = Math.floor(hours / 10);
const h1digit = hours % 10;
const m0digit = Math.floor(minutes / 10);
const m1digit = minutes % 10;
const s0digit = Math.floor(seconds / 10);
const s1digit = seconds % 10;
const h0digit = Math.floor(hours / 10);
const h1digit = hours % 10;
const m0digit = Math.floor(minutes / 10);
const m1digit = minutes % 10;
const s0digit = Math.floor(seconds / 10);
const s1digit = seconds % 10;

numbers[0].innerText = h0digit.toString();
numbers[1].innerText = h1digit.toString();
numbers[2].innerText = m0digit.toString();
numbers[3].innerText = m1digit.toString();
numbers[4].innerText = s0digit.toString();
numbers[5].innerText = s1digit.toString();
}
numbers[0].innerText = h0digit.toString();
numbers[1].innerText = h1digit.toString();
numbers[2].innerText = m0digit.toString();
numbers[3].innerText = m1digit.toString();
numbers[4].innerText = s0digit.toString();
numbers[5].innerText = s1digit.toString();
}

updateCountdown();
const interval = setInterval(updateCountdown, 1000);
}
updateCountdown();
const interval = setInterval(updateCountdown, 1000);
}

const self = me();
onloadAdd(() => countdown(self));
const self = me();
onloadAdd(() => countdown(self));
})();
</script>
<span class="number" data-number="h0">&nbsp;</span>
<span class="number" data-number="h1">&nbsp;</span>
Expand All @@ -124,4 +128,4 @@
<span class="number" data-number="s0">&nbsp;</span>
<span class="number" data-number="s1">&nbsp;</span>
</div>
</div>
</div>
23 changes: 20 additions & 3 deletions server/vb/templates/school.dhtml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -50,8 +50,25 @@
margin: 1.5rem 0;
}
</style>
<main style="background-color: {{ school.logo.bg_color }};
color: {{ school.logo.bg_text_color }}">
<main data-bg-color="{{ school.logo.bg_color }}"
data-color="{{ school.logo.bg_text_color }}">
<style>
me {
--main-color: transparent;
--main-bg-color: transparent;
color: var(--main-color);
background-color: var(--main-bg-color);
}
</style>
<script>
(function() {
const self = me();
onloadAdd(() => {
self.style.setProperty('--main-color', self.dataset.color);
self.style.setProperty('--main-bg-color', self.dataset.bgColor);
});
})();
</script>
<div class="container">
{% if current_contest %}
{% include "components/countdown.dhtml" with contest=current_contest %}
Expand All @@ -65,7 +82,7 @@
<p>There is no contest at this time. TODO: show something useful in this state?</p>
{% endif %}
<div class="button-holder">
{% include "components/button.dhtml" with text="Check my voter status" bg_color=school.logo.action_color color=school.logo.action_text_color %}
{% include "components/button.dhtml" with text="Check my voter status" href="./check/" bg_color=school.logo.action_color color=school.logo.action_text_color %}
</div>
</div>
</main>
Expand Down

0 comments on commit 15b3dab

Please sign in to comment.