phlaym/dragonpolls
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Poll voting

Browse Source
This commit is contained in:
aymm 2021-03-28 21:19:04 +02:00
parent 21f7623859
commit a064eae86b
Signed by: phlaym
GPG Key ID: A06651BAB6777237
5 changed files with 83 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
globals.php
View File

@ -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>');
}

29
scripts/poll.js
View File

@ -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() {
@ -36,4 +37,32 @@ function updateVotesRemaining() {
const voteButton = document.querySelector('button[name=submit_vote]'); const voteButton = document.querySelector('button[name=submit_vote]');
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];
}
}
} }

22
styles/style.css
View File

@ -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;
}

13
view_poll.php
View File

@ -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
View 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');