Result view & pie chart generation

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

TODO: Organize JSON results.

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");

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;

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>

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>