Poll voting
This commit is contained in:
parent
21f7623859
commit
a064eae86b
@ -47,3 +47,10 @@ function get_page_header(
|
||||
. $logout_link
|
||||
. '</header>';
|
||||
}
|
||||
|
||||
function redirect($to)
|
||||
{
|
||||
header('Location: '.$to);
|
||||
die('<html><meta http-equiv="refresh" content="0;url='.$to.'">'
|
||||
.'<script>window.location.replace("'.$to.'");</script></html>');
|
||||
}
|
||||
|
@ -3,6 +3,7 @@ window.addEventListener('DOMContentLoaded', () => {
|
||||
for (const el of document.querySelectorAll('.option input[type=checkbox]')) {
|
||||
el.onclick = updateVotesRemaining;
|
||||
}
|
||||
document.querySelector('.success-banner').onclick = hideBanner;
|
||||
});
|
||||
|
||||
function displayLocalTimestamps() {
|
||||
@ -37,3 +38,31 @@ function updateVotesRemaining() {
|
||||
const canVoteInitial = voteButton.dataset.canVote === 'true';
|
||||
voteButton.disabled = !canVoteInitial || (total - numChecked) < 0 || numChecked === 0;
|
||||
}
|
||||
|
||||
function hideBanner() {
|
||||
const banner = document.querySelector('.success-banner');
|
||||
const animationEnd = findTransitionEnd();
|
||||
banner.addEventListener(animationEnd, animationEnded);
|
||||
banner.classList.add('hiding');
|
||||
}
|
||||
|
||||
function animationEnded(event) {
|
||||
event.target.removeEventListener(findTransitionEnd(), animationEnded);
|
||||
event.target.classList.add('hidden');
|
||||
event.target.classList.remove('hiding');
|
||||
}
|
||||
|
||||
function findTransitionEnd() {
|
||||
const e = document.createElement('div');
|
||||
const animations = {
|
||||
'transition': 'transitionend',
|
||||
'OTransition': 'oTransitionEnd',
|
||||
'MozTransition': 'transitionend',
|
||||
'WebkitTransition': 'webkitTransitionEnd'
|
||||
};
|
||||
for (const a in animations) {
|
||||
if (e.style[a] !== undefined) {
|
||||
return animations[a];
|
||||
}
|
||||
}
|
||||
}
|
@ -5,6 +5,7 @@
|
||||
--main-fg-color: white;
|
||||
--main-accent-color: rgb(253, 122, 0);
|
||||
--disabled-color: gray;
|
||||
--green: green;
|
||||
}
|
||||
@supports (color: color(display-p3 1 1 1)) {
|
||||
:root {
|
||||
@ -49,7 +50,7 @@ button:disabled {
|
||||
}
|
||||
|
||||
.hidden {
|
||||
display: none;
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
/* Header */
|
||||
@ -100,6 +101,7 @@ header {
|
||||
.datewrapper {
|
||||
display: grid;
|
||||
grid-column-gap: 8px;
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
.created_at {
|
||||
@ -121,3 +123,21 @@ datewrapper time {
|
||||
.votes-remaining {
|
||||
font-size: small;
|
||||
}
|
||||
|
||||
/* Success banner */
|
||||
.success-banner {
|
||||
background-color: var(--green);
|
||||
padding: 8px;
|
||||
display: inline-block;
|
||||
margin-bottom: 8px;
|
||||
cursor: pointer;
|
||||
transition: all 0.5s ease-in;
|
||||
}
|
||||
|
||||
.success-banner.hiding {
|
||||
transform: translateX(-150%);
|
||||
}
|
||||
|
||||
.success-banner span {
|
||||
font-size: x-large;
|
||||
}
|
@ -51,8 +51,11 @@ $votes_remaining_hidden = $poll->canVote() ? '' : ' hidden';
|
||||
$data_can_vote = $poll->canVote() ? 'true' : 'false';
|
||||
$disabled_button = ($poll->canVote() && count($user_votes) > 0) ? '' : 'disabled';
|
||||
|
||||
|
||||
?>
|
||||
if (array_key_exists('success', $_GET) && $_GET['success'] == 1) { ?>
|
||||
<div>
|
||||
<div class="success-banner"><span>✔</span> Your vote has been saved, thank you!</div>
|
||||
</div>
|
||||
<?php } ?>
|
||||
<div class="poll">
|
||||
<div class="header">
|
||||
<div class="user">
|
||||
@ -82,7 +85,9 @@ $disabled_button = ($poll->canVote() && count($user_votes) > 0) ? '' : 'disabled
|
||||
</span>
|
||||
</div>
|
||||
<div class="options">
|
||||
<form>
|
||||
<form method="POST" action="vote_poll.php">
|
||||
<input type="hidden" name="pollid" value="<?= $poll->id ?>"/>
|
||||
<input type="hidden" name="polltoken" value="<?= $poll->token ?>"/>
|
||||
<?php
|
||||
$row = 1;
|
||||
$user_args = [
|
||||
@ -92,7 +97,7 @@ $disabled_button = ($poll->canVote() && count($user_votes) > 0) ? '' : 'disabled
|
||||
foreach ($poll->options as $option) {
|
||||
$checked = $option->is_your_response ? 'checked' : ''; ?>
|
||||
<div class="option" style="grid-row: <?= $row ?>;">
|
||||
<input type="checkbox" <?= $checked.' '.$disabled ?>/>
|
||||
<input type="checkbox" <?= $checked.' '.$disabled ?> value="<?= $option->position ?>" name="options[]"/>
|
||||
<span class="option-text"><?= $option->text . ' (' . $option->respondents . ')'?></span>
|
||||
</div>
|
||||
<div class="option-responses" style="grid-row: <?= $row++ ?>;grid-column: 2;">
|
||||
|
17
vote_poll.php
Normal file
17
vote_poll.php
Normal file
@ -0,0 +1,17 @@
|
||||
<?php
|
||||
require_once __DIR__ . '/bootstrap.php';
|
||||
|
||||
$voted_options = [];
|
||||
foreach ($_POST['options'] as $option) {
|
||||
$voted_options[] = (int)$option;
|
||||
}
|
||||
try {
|
||||
$res = $api->voteInPoll((int)$_POST['pollid'], $voted_options, $_POST['polltoken']);
|
||||
} catch (\Exception $e) {
|
||||
get_page_header('Voting error');
|
||||
$str = 'Sorry, something went wrong while voting!'
|
||||
. 'Please yell at <a href="https://pnut.io/@hutattedonmyarm">@hutattedonmyarm></a><br>'
|
||||
. '<a href="view_poll.php?id="'.$_POST['pollid'].'>Go back to the poll</a>';
|
||||
die($str);
|
||||
}
|
||||
redirect('view_poll.php?id='.$_POST['pollid'].'&success=1');
|
Loading…
Reference in New Issue
Block a user