Poll voting
This commit is contained in:
parent
21f7623859
commit
a064eae86b
@ -47,3 +47,10 @@ function get_page_header(
|
|||||||
. $logout_link
|
. $logout_link
|
||||||
. '</header>';
|
. '</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]')) {
|
for (const el of document.querySelectorAll('.option input[type=checkbox]')) {
|
||||||
el.onclick = updateVotesRemaining;
|
el.onclick = updateVotesRemaining;
|
||||||
}
|
}
|
||||||
|
document.querySelector('.success-banner').onclick = hideBanner;
|
||||||
});
|
});
|
||||||
|
|
||||||
function displayLocalTimestamps() {
|
function displayLocalTimestamps() {
|
||||||
@ -37,3 +38,31 @@ function updateVotesRemaining() {
|
|||||||
const canVoteInitial = voteButton.dataset.canVote === 'true';
|
const canVoteInitial = voteButton.dataset.canVote === 'true';
|
||||||
voteButton.disabled = !canVoteInitial || (total - numChecked) < 0 || numChecked === 0;
|
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-fg-color: white;
|
||||||
--main-accent-color: rgb(253, 122, 0);
|
--main-accent-color: rgb(253, 122, 0);
|
||||||
--disabled-color: gray;
|
--disabled-color: gray;
|
||||||
|
--green: green;
|
||||||
}
|
}
|
||||||
@supports (color: color(display-p3 1 1 1)) {
|
@supports (color: color(display-p3 1 1 1)) {
|
||||||
:root {
|
:root {
|
||||||
@ -49,7 +50,7 @@ button:disabled {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.hidden {
|
.hidden {
|
||||||
display: none;
|
display: none !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Header */
|
/* Header */
|
||||||
@ -100,6 +101,7 @@ header {
|
|||||||
.datewrapper {
|
.datewrapper {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-column-gap: 8px;
|
grid-column-gap: 8px;
|
||||||
|
margin-left: 8px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.created_at {
|
.created_at {
|
||||||
@ -121,3 +123,21 @@ datewrapper time {
|
|||||||
.votes-remaining {
|
.votes-remaining {
|
||||||
font-size: small;
|
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';
|
$data_can_vote = $poll->canVote() ? 'true' : 'false';
|
||||||
$disabled_button = ($poll->canVote() && count($user_votes) > 0) ? '' : 'disabled';
|
$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="poll">
|
||||||
<div class="header">
|
<div class="header">
|
||||||
<div class="user">
|
<div class="user">
|
||||||
@ -82,7 +85,9 @@ $disabled_button = ($poll->canVote() && count($user_votes) > 0) ? '' : 'disabled
|
|||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="options">
|
<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
|
<?php
|
||||||
$row = 1;
|
$row = 1;
|
||||||
$user_args = [
|
$user_args = [
|
||||||
@ -92,7 +97,7 @@ $disabled_button = ($poll->canVote() && count($user_votes) > 0) ? '' : 'disabled
|
|||||||
foreach ($poll->options as $option) {
|
foreach ($poll->options as $option) {
|
||||||
$checked = $option->is_your_response ? 'checked' : ''; ?>
|
$checked = $option->is_your_response ? 'checked' : ''; ?>
|
||||||
<div class="option" style="grid-row: <?= $row ?>;">
|
<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>
|
<span class="option-text"><?= $option->text . ' (' . $option->respondents . ')'?></span>
|
||||||
</div>
|
</div>
|
||||||
<div class="option-responses" style="grid-row: <?= $row++ ?>;grid-column: 2;">
|
<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