Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
  • Loading branch information
thebongy committed May 30, 2018
2 parents 9e6d7d2 + 2d6ce03 commit 1be6a6a
Show file tree
Hide file tree
Showing 6 changed files with 149 additions and 142 deletions.
4 changes: 2 additions & 2 deletions src/client/assets/scripts/libraries/fontawesome-all.min.js

Large diffs are not rendered by default.

79 changes: 69 additions & 10 deletions src/client/assets/scripts/present.ts
Original file line number Diff line number Diff line change
@@ -1,19 +1,78 @@
$(() => {
const carousel = $("results-carousel") as JQuery<HTMLElement> & {
carousel(arg: string | number ): void;
const carousel = $("#results-carousel") as JQuery<HTMLElement> & {
carousel(arg: string | number): void;
};

let paused = false;

$(document).keydown((keydown) => {
if (keydown.key === "32") {
carousel.carousel("pause");
if (keydown.which === 32) {
carousel.carousel(paused ? "cycle" : "pause");
paused = !paused;
}
});
/*
$("#playButton").click(() => {
carousel.carousel("cycle");

const candidateBlock = $(".candidates-block");

candidateBlock.each((_BLOCK_INDEX, blockElem) => {
const block = $(blockElem);

const cards = block.find(".candidate-card");
if (cards.length === 4) {
block.addClass("four-cards");
}
});

$("#pauseButton").click(() => {
carousel.carousel("pause");
})*/
function isCandidateSlide(to: number): boolean {
return to % 2 === 1;
}

carousel.on("slid.bs.carousel",
(slide: JQuery.Event<HTMLElement, null> & { from: number, to: number }) => {
if (isCandidateSlide(slide.to)) {
const pollID = (slide.to - 1) / 2;
const block = $(`#block-${pollID}`);

const cards = block.find(".candidate-card");
const winners = block.find(".winner");
const crowns = winners.find(".crown");
const notWinners = block.find(".not-winner");

cards.each((index, cardElem) => {
const card = $(cardElem);

const votes = { votes: 0 };
const numVotes = Number(card.attr("data-votes"));

const voteSpan = $(`#votes-${pollID}-${index}`);

$(votes).animate({ votes: numVotes }, {
duration: 2000,
easing: "swing",
step: () => {
voteSpan.text(Math.min(Math.ceil(votes.votes), numVotes));
}
});
});

window.setTimeout(() => {
winners.addClass("candidate-active");
notWinners.addClass("candidate-inactive");
crowns.fadeIn("slow");
}, 2500);
}

if (isCandidateSlide(slide.from)) {
const block = $(`#block-${(slide.from - 1) / 2}`);

const winners = block.find(".winner");
const notWinners = block.find(".not-winner");
const crowns = winners.find(".crown");

winners.removeClass("candidate-active");
notWinners.removeClass("candidate-inactive");
crowns.fadeOut("fast");
}
}
);
});
147 changes: 42 additions & 105 deletions src/client/assets/styles/present.css
Original file line number Diff line number Diff line change
@@ -1,142 +1,79 @@
#lock,
#confirm-page {
background-size: cover;
background-position: center;
background-color: black;
}

q {
font-style: italic;
opacity: 0.8;
}

.carousel-item {
height: 100vh;
}

.candidates-block {
max-width: 80%;
}

.candidates-vertical-align {
width: 100%;
.poll-detail-vertical-align, .candidates-vertical-align {
height: 100%;
width: 100%;
display: flex;
align-items: center;
}

.candidate-card {
min-width: 160px;
max-width: 20vw;
cursor: pointer;
position: relative;
transition: top 0.3s ease-out, opacity 0.3s ease-out;
-webkit-transition: top 0.3s ease-out, opacity 0.3s ease-out;
-moz-transition: top 0.3s ease-out, opacity 0.3s ease-out;
top: 0;
opacity: 0.7;
}

.candidate-active {
top: -1rem;
.poll-text {
width: 100%;
padding: 3rem 0;
background-color: #FFF;
}

.candidate-inactive {
q {
font-style: italic;
opacity: 0.7;
}

.thin-control {
width: 10%;
}

.winner {
top: -1rem !important;
opacity: 1;
border-color: black;
border-width: 5px;
animation: winners 3s 1 ease-out;
.candidates-block {
width: 80%;
display: flex;
justify-content: center;
margin-bottom: 1.5rem;
}

@-webkit-keyframes winners {
from {
transform: scale(0.75);
}
to {
transform: scale(1);
}
.candidates-block.four-cards {
width: 60%;
}

.card-text {
animation: test 3s 1 ease-out;
.card-deck .candidate-card {
position: relative;
top: 0px;
min-width: 10.75rem;
max-width: 11rem;
margin: 0.7rem;
transition: top 1s ease-out;
}

@-webkit-keyframes test {
from {
transform: scale(0.1);
}
to {
transform: scale(1);
}
.candidate-card.candidate-active {
top: -0.5rem;
}

img {
height: 50vh;
.candidate-card.candidate-inactive {
opacity: 0.5;
}

.h3,
.h4 {
color: black;
.candidate-card .card-body {
text-align: left;
}

#lock {
position: fixed;
z-index: 50;
width: 100vw;
height: 100vh;
display: flex;
align-items: center;
top: 0;
transition: top 0.3s ease-out;
.votes {
font-size: 1rem;
}

#lock-text-container {
.candidate-card table {
width: 100%;
display: flex;
flex-direction: column;
background-color: rgb(255, 255, 50);
padding: 3rem 0;
}

#left-arrow {}

#confirm-text-container {
width: 80%;
height: 100%;
background-color: #FFF;
padding: 1rem;
}

#submit-button {
display: none;
}

#notification {
z-index: 100;
background-color: #FFFF32;
position: fixed;
margin: 1rem auto;
padding: 1rem;
top: 0;
left: 50%;
transform: translateX(-50%);
display: none;
border-radius: 5px;
.candidate-card td {
padding: 0.5rem;
}

.carousel-indicators li {
background-color: rgba(200, 200, 200, 0.5);
.candidate-card .card-body {
padding: 0;
}

.carousel-indicators li.active {
background-color: rgba(200, 200, 200, 1);
.crown {
width: 100%;
position: absolute;
font-size: 3rem;
top: -2rem;
color: goldenrod;
display: none;
}
4 changes: 2 additions & 2 deletions src/client/views/forms/election-edit.html
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,8 @@
{% block mainContent %}
<div class="election-edit-container col-lg-10 mx-auto">
<div class="election-form-container card">
<div class="card-header bg-dark">
<div class="clearfix">
<div class="card-header bg-dark">
<div class="clearfix">
<h3 class="float-left">{{ pageTitle }}</h3>
{% if method === "PUT" %}
<button class="btn btn-danger btn-del-election float-right" data-action="/elections/{{ election.id }}" data-redirect="back" data-name="{{ election.name }}">
Expand Down
53 changes: 31 additions & 22 deletions src/client/views/present/carousel.html
Original file line number Diff line number Diff line change
@@ -1,43 +1,52 @@
<div id="carousel-container">
<div id="results-carousel" class="carousel slide" data-ride="carousel" data-interval="3000">
<div id="results-carousel" class="carousel slide" data-ride="false" data-interval="false">
<ol class="carousel-indicators">

{% for i in range(election.polls.length) %}
<li data-target="#results-carousel" data-slide-to="{{ i }}" class="{% if i === 0 %}active{% endif %}"></li>
{% for pollIndex in range(election.polls.length * 2) %}
<li data-target="#results-carousel" data-slide-to="{{ pollIndex }}" class="{% if pollIndex === 0 %}active{% endif %}"></li>
{% endfor %}

</ol>
<div class="carousel-inner" role="listbox">
{% for i in range(election.polls.length) %}
{% set poll = election.polls[i] %}
{% for pollIndex in range(election.polls.length) %}
{% set poll = election.polls[pollIndex] %}
<div class="carousel-item {% if pollIndex === 0 %}active{% endif %}"
style="background-color: {{ poll.color }}">
<div class="poll-detail-vertical-align">
<div class="poll-text text-center">
<h1>{{ poll.name }}</h1>
<h3><q>{{ poll.caption }}</q></h3>
</div>
</div>
</div>
<div
class="carousel-item {% if i === 0 %}active{% endif %}"
class="carousel-item"
style="background-color: {{ poll.color }}">

<div class="candidates-vertical-align">
<div class="candidates-block card-deck mx-auto">
<div class="candidates-block card-deck mx-auto" id="block-{{ pollIndex }}">

{% for candidate in poll.candidates %}
{% for cIndex in range(poll.candidates.length) -%}
{%- set candidate = poll.candidates[cIndex] -%}
<div
class="card candidate-card text-center {% if winnerIDs[poll.id].indexOf(candidate.id) !== -1 %}winner{% endif %}"
data-candidate-id="{{ candidate.id }}"
data-candidate-name="{{ candidate.name }}">
class="card candidate-card text-center
{% if winnerIDs[poll.id].indexOf(candidate.id) !== -1 %}winner{% else %}not-winner{% endif %}"
data-votes="{{ candidate.votes }}">

<img src="{{ candidate.image }}" alt="" class="card-img-top img-responsive">
<div class="crown"><i class="fas fa-crown"></i></div>
<div class="card-body">
<h5 class="card-title">{{ candidate.name }}</h5>
<h5 class="card-text">{{ candidate.votes }}</h5>
<table>
<tr>
<td>{{ candidate.name }}</td>
<td class="votes text-right">
<h5><span class="badge badge-secondary" id="votes-{{ pollIndex }}-{{ cIndex }}">0</span></h5>
</td>
</tr>
</table>
</div>
</div>
{% endfor %}
</div>
</div>
<div class="carousel-caption d-none d-md-block">
<div>
<span class="h3">{{ poll.name }} - </span>
<span class="h4">
<q>{{ poll.caption }}</q>
</span>
{%- endfor %}
</div>
</div>
</div>
Expand Down
4 changes: 3 additions & 1 deletion src/server/model/elections.ts
Original file line number Diff line number Diff line change
Expand Up @@ -174,7 +174,9 @@ class ElectionsDatastore {
try {
await unlinkPromise(path.join(config.database.images, image.id));
} catch (err) {
return;
if (!config.devMode) {
throw err;
}
}
return await dbRemove(this.db, { type: "image", id: image.id });
}
Expand Down

0 comments on commit 1be6a6a

Please sign in to comment.