Add Counters

_data/counters.yml

@@ -0,0 +1,15 @@
+- name: المستخدمون
+  id: users
+  endpoint: "/users-count"
+
+- name: الدخل
+  id: income
+  endpoint: "/users-count"
+
+- name: الحافلات
+  id: buses
+  endpoint: "/buses-count"
+
+- name: المفتشون
+  id: collectors
+  endpoint: "/buses-count"

_includes/charts.html

@@ -0,0 +1,37 @@
+<div class="card-deck mt-4">
+
+  <div class="card border border-success">
+    <div class="card-body">
+      <h5 class="card-title">{{ site.data.usage-charts.title }}</h5>
+
+      <nav>
+        <div class="nav nav-pills mb-3" role="tablist">
+          {% for interval in site.data.usage-charts.intervals %}
+          <a class="nav-item nav-link {% if forloop.index == 1 %} active {% endif %}" id="nav-{{ interval.id }}-tab"
+            data-toggle="tab" href="#nav-{{ interval.id }}" role="tab" aria-controls="nav-{{ interval.id }}"
+            aria-selected="true">{{ interval.name }}</a>
+          {% endfor %}
+        </div>
+      </nav>
+
+      <div class="tab-content">
+        {% for interval in site.data.usage-charts.intervals %}
+        <div class="tab-pane fade {% if forloop.index == 1 %} show active {% endif %}" id="nav-{{ interval.id }}"
+          role="tabpanel" aria-labelledby="nav-{{ interval.id }}-tab">
+          <canvas id="{{ interval.id }}-chart"></canvas>
+        </div>
+        {% endfor %}
+      </div>
+
+    </div>
+  </div>
+
+  <div class="card border border-success">
+    <div class="card-body">
+      <h5 class="card-title">{{ site.data.buses-charts.title }}</h5>
+      <p class="card-text">رسم بياني يوضح عدد الركاب لكل خط و عدد الحافلات المتوفرة في الوقت الحالي</p>
+      <canvas id="{{ site.data.buses-charts.id }}-chart"></canvas>
+    </div>
+  </div>
+
+</div>

_includes/counters.html

@@ -0,0 +1,12 @@
+<div class="card-deck mt-3">
+
+  {% for counter in site.data.counters %}
+  <div class="card border border-success">
+    <div class="card-body">
+      <h5 class="card-title">{{ counter.name }}</h5>
+      <h2 id="{{ counter.id }}-counter" class="card-text text-success font-weight-bold">...</h2>
+    </div>
+  </div>
+  {% endfor %}
+
+</div>

_includes/scripts.html

@@ -1,7 +1,14 @@
+<!-- Core JS -->
 <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
 <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
-<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js"></script>
 <script src="/assets/js/sidebar.js"></script>
+
+<!-- Charts -->
+<script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>
 <script src="/assets/js/usage-charts.js"></script>
-<script src="/assets/js/buses-charts.js"></script>
+<script src="/assets/js/buses-charts.js"></script>
+
+<!-- Plugins -->
+<script src="https://cdn.jsdelivr.net/npm/countup@1.8.2/dist/countUp.min.js"></script>
+<script src="/assets/js/counters.js"></script>

_layouts/default.html

@@ -11,7 +11,7 @@
   <div id="wrapper">
     {% include sidebar.html %}
     <div class="content">
-      <div class="container-fluid py-3 px-5">
+      <div class="container-fluid py-3 px-lg-5">
         {{ content }}
       </div>
     </div>

assets/js/counters.js

@@ -0,0 +1,14 @@
+---
+---
+
+{% for counter in site.data.counters %}
+fetchCounterData("{{ counter.endpoint }}").then(data => {
+  new CountUp("{{ counter.id }}-counter", 0, data.value, 0, 1).start();
+});
+{% endfor %}
+
+async function fetchCounterData(counter) {
+  const root = "{{ site.root-endpoint }}";
+  const response = await fetch(`${root}${counter}`);
+  return await response.json();
+}

index.html

@@ -2,21 +2,5 @@
 layout: default
 ---
 
-<div class="card-deck mt-3">
-
-  <div class="card border border-success">
-    <div class="card-body">
-      <h5 class="card-title">{{ site.data.usage-charts.title }}</h5>
-      {% include usage-charts.html %}
-    </div>
-  </div>
-
-  <div class="card border border-success">
-    <div class="card-body">
-      <h5 class="card-title">{{ site.data.buses-charts.title }}</h5>
-      <p class="card-text">رسم بياني يوضح عدد الركاب لكل خط و عدد الحافلات المتوفرة في الوقت الحالي</p>
-      <canvas id="{{ site.data.buses-charts.id }}-chart"></canvas>
-    </div>
-  </div>
-
-</div>
+{% include counters.html %}
+{% include charts.html %}