Add statistics

src/api/statistics.php

@@ -0,0 +1,53 @@
+<?php
+
+/**
+ * Various statistics
+ *
+ * @author Jay Trees <github.jay@grandel.anonaddy.me>
+ */
+
+$api      = true;
+$response = array(
+    'success' => false,
+);
+
+require '../../index.php';
+
+switch ($_SERVER['REQUEST_METHOD']) {
+    case 'GET':
+        if (isset($_GET['table'])) {
+            if ('all' === $_GET['table']) {
+                $tables = array(
+                    'products',
+                    'wishlists',
+                    'users',
+                );
+
+                $response['data'] = array();
+
+                foreach ($tables as $table) {
+                    $count = $database
+                             ->query('SELECT COUNT(`id`) AS "count"
+                                     FROM `' . $table . '`;')
+                             ->fetch();
+
+                    $response['data'][$table] = $count;
+                }
+
+                $response['success'] = true;
+            } else {
+                $count = $database
+                ->query('SELECT COUNT(`id`) AS "count"
+                           FROM `' . $_GET['table'] . '`;')
+                ->fetch();
+
+                $response['data']    = $count;
+                $response['success'] = true;
+            }
+        }
+        break;
+}
+
+header('Content-type: application/json; charset=utf-8');
+echo json_encode($response);
+die();

src/assets/js/home.js

@@ -0,0 +1,60 @@
+$(function() {
+    /**
+     * Statistics
+     */
+    fetch('/src/api/statistics.php?table=all', {
+        method: 'GET'
+    })
+    .then(response => response.json())
+    .then(response => {
+        console.log(response);
+
+        if (response.success) {
+            showStatistic(
+                $('#products .value'),
+                response.data.products.count,
+                0
+            );
+            showStatistic(
+                $('#wishlists .value'),
+                response.data.wishlists.count,
+                0
+            );
+            showStatistic(
+                $('#users .value'),
+                response.data.users.count,
+                0
+            );
+        }
+    });
+});
+
+function showStatistic(elementStatistic, amount, timeout) {
+    var interval    = 20;
+    var intervalEnd = 1000;
+
+    setTimeout(
+        function count() {
+            var value = $.isNumeric(elementStatistic.text())
+                      ? parseInt(elementStatistic.text())
+                      : -1;
+
+            if (value <= amount) {
+                elementStatistic.text(value + 1);
+
+                var remainingSlowDown    = 3;
+                var remainingInterations = amount - value;
+
+                if (remainingInterations < remainingSlowDown) {
+                    interval = (remainingSlowDown - remainingInterations) * (intervalEnd / remainingSlowDown);
+                } else {
+                    interval += interval * 0.1;
+                }
+
+                console.log(interval);
+                setTimeout(count, interval);
+            }
+        },
+        timeout
+    );
+}

src/pages/home.php

@@ -47,21 +47,27 @@ $page->navigation();
 
         <div class="ui segment">
             <h2 class="ui header">Statistics</h2>
+            <p>Join the others and get started now!</p>
 
-            <div class="ui statistics">
+            <div class="ui stackable statistics">
-                <div class="statistic">
+
-                    <div class="value">22</div>
+                <div class="statistic" id="products">
+                    <div class="value">N. A.</div>
                     <div class="label">Products</div>
                 </div>
-                <div class="statistic">
+
-                    <div class="value">31,200</div>
+                <div class="statistic" id="wishlists">
+                    <div class="value">N. A.</div>
                     <div class="label">Wishlists</div>
                 </div>
-                <div class="statistic">
+
-                    <div class="value">22</div>
+                <div class="statistic" id="users">
+                    <div class="value">N. A.</div>
                     <div class="label">Registered users</div>
                 </div>
+
             </div>
+
         </div>
     </div>
 </main>