From ec3a86cc338ae34fa2155fcc48c415520b9a29de Mon Sep 17 00:00:00 2001
From: Madeorsk <madeorsk@protonmail.com>
Date: Mon, 13 Aug 2018 17:02:06 +0200
Subject: [PATCH] Result view & pie chart generation

+ Result view;
+ Pie chart generation (TODO: Add values for each color).

TODO: Organize JSON results.
---
 index.php             | 17 +++++++++++++++++
 static/css/main.css   | 35 +++++++++++++++++++++++++++++++++++
 views/results.php     | 22 ++++++++++++++++++++++
 views/svg/results.php | 39 +++++++++++++++++++++++++++++++++++++++
 4 files changed, 113 insertions(+)
 create mode 100644 views/results.php
 create mode 100644 views/svg/results.php

diff --git a/index.php b/index.php
index 2d86700..6784763 100644
--- a/index.php
+++ b/index.php
@@ -86,6 +86,23 @@ Flight::route("POST /polls/@id:[a-fA-F0-9]+/vote", function ($id) {
 		Flight::notFound();
 });
 
+Flight::route("GET /polls/@id:[a-fA-F0-9]+/results", function ($id) {
+	$poll = Poll::load_poll($id);
+	if ($poll)
+	{
+		if (Flight::request()->type === "application/json")
+			Flight::json(format_poll($poll)); //TODO Add a svg for results?
+		else
+		{
+			Flight::render("svg/results", ["poll" => $poll], "results_chart");
+			Flight::render("results", ["poll" => $poll], "body_content");
+			Flight::render("layout");
+		}
+	}
+	else
+		Flight::notFound();
+});
+
 Flight::route("/", function () {
 	global $VERLAINE;
 	Flight::render("home", ["app_url" => $VERLAINE["app_url"]], "body_content");
diff --git a/static/css/main.css b/static/css/main.css
index fbc31f5..23a983e 100644
--- a/static/css/main.css
+++ b/static/css/main.css
@@ -176,6 +176,41 @@ h1.poll
   cursor: pointer;
 }
 
+/*
+ * JHFNDSJH
+ */
+
+main.results
+{
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+}
+main.results > *
+{ flex: 1; }
+
+main.results .chart
+{ flex: 2; max-height: 70vh; }
+main.results .chart > svg
+{ display: block; margin: auto; height: 100%; }
+
+main.results .options table
+{
+  margin: 0;
+  padding: 0 3em;
+  box-sizing: border-box;
+  width: 100%;
+  height: 100%;
+  font-size: 1.5em;
+}
+main.results .options table td
+{ text-align: right; }
+main.results .options .number
+{
+  font-family: "PT Serif", serif;
+  font-size: 2em;
+}
+
 footer
 {
   display: block;
diff --git a/views/results.php b/views/results.php
new file mode 100644
index 0000000..e73d30e
--- /dev/null
+++ b/views/results.php
@@ -0,0 +1,22 @@
+<?php
+$total_votes = 0;
+foreach ($poll->options as $option)
+  $total_votes += $option->votes;
+?>
+<h1 class="poll"><?= $poll->title ?></h1>
+<main class="results">
+  <div class="options">
+    <table>
+      <?php foreach ($poll->options as $option): ?>
+      <tr>
+        <td class="number"><?= $option->votes ?></td>
+        <td><?= $option->label ?></td>
+        <td><?= round($option->votes / $total_votes, 3)*100 ?>%</td>
+      </tr>
+      <?php endforeach; ?>
+    </table>
+  </div>
+  <div class="chart">
+	  <?= $results_chart ?>
+  </div>
+</main>
\ No newline at end of file
diff --git a/views/svg/results.php b/views/svg/results.php
new file mode 100644
index 0000000..47a18f4
--- /dev/null
+++ b/views/svg/results.php
@@ -0,0 +1,39 @@
+<?php
+
+define("CIRCLE_R", 50);
+
+$COLORS = [
+	"#FF4B44", // Red.
+	"#FFD149", // Yellow.
+	"#56B3FF", // Dark blue.
+	"#FF9535", // Orange.
+	"#7DFF59", // Green.
+	"#FFAFEC", // Pink.
+	"#82FFE8", // Light blue.
+];
+
+$total_votes = 0;
+foreach ($poll->options as $option)
+	$total_votes += $option->votes;
+
+$options_percentages = [];
+foreach ($poll->options as $option)
+	$options_percentages[] = $option->votes / $total_votes;
+
+function percentage_pos_x($r, $percentage)
+{ return round($r * sin(2 * M_PI * $percentage), 2); }
+function percentage_pos_y($r, $percentage)
+{ return -1*round($r * cos(2 * M_PI * $percentage), 2); }
+
+//TODO Improve by showing values in the colors.
+
+?>
+
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="-<?= CIRCLE_R ?> -<?= CIRCLE_R ?> <?= CIRCLE_R*2 ?> <?= CIRCLE_R*2 ?>">
+	<circle cx="0" cy="0" r="<?= CIRCLE_R ?>" fill="black" fill-opacity="0.2"></circle>
+	<?php
+	$used_percentage = 0;
+	foreach ($poll->options as $index => $option): ?>
+	<path d="M<?= percentage_pos_x(CIRCLE_R, $used_percentage) ?> <?= percentage_pos_y(CIRCLE_R, $used_percentage) ?> A<?= CIRCLE_R." ".CIRCLE_R ?> 0 <?= ($options_percentages[$index] > 0.5 ? 1 : 0) ?> 1 <?= percentage_pos_x(CIRCLE_R, $used_percentage + $options_percentages[$index]) ?> <?= percentage_pos_y(CIRCLE_R, $used_percentage + $options_percentages[$index]) ?> L0 0" fill="<?= $COLORS[$index%7] ?>"></path>
+	<?php $used_percentage += $options_percentages[$index]; endforeach; ?>
+</svg>
\ No newline at end of file