devshort

commit 6922cd484f0e7c750402aee4506910f7f59292d2
parent d9af099a36bd492c15069f615c852a7b62748729
Author: Florian <flokX@users.noreply.github.com>
Date:   Mon, 13 Jan 2020 12:56:11 +0100

Add more details

* Add direct counter for two timecycles
* Add information about the shortlink destination

Diffstat:
M
admin.php
 | 
25
++++++++++++++++++-------
M
assets/main.js
 | 
17
+++++++++++------

2 files changed, 29 insertions(+), 13 deletions(-)
diff --git a/admin.php b/admin.php
@@ -15,9 +15,10 @@ if (!isset($_SESSION["user_authenticated"])) {
 }
 
 // Deliver stats.json content for the program (make AJAX calls and charts reloading possible)
-if (isset($_GET["get_stats"])) {
+if (isset($_GET["get_data"])) {
     header("Content-Type: application/json");
-    readfile($stats_path);
+    $content = array("shortlinks" => $config_content["shortlinks"], "stats" => $stats_content);
+    echo json_encode($content);
     exit;
 }
 
@@ -135,7 +136,7 @@ if ($config_content["settings"]["custom_links"]) {
                             <span class="sr-only">Loading...</span>
                         </div>
                     </div>
-                    <chart v-if="loaded" v-for="(stats, name) in shortlinks" v-bind:key="name" v-bind:name="name" v-bind:stats="stats"></chart>
+                    <chart v-if="loaded" v-for="(stats, name) in dataObject.stats" v-bind:key="name" v-bind:name="name" v-bind:stats="stats"></chart>
                 </div>
             </div>
             <p class="text-center d-md-none mt-1 mb-5" id="version-2">powered by <a href="https://github.com/flokX/devShort">devShort</a></p>
@@ -159,19 +160,29 @@ if ($config_content["settings"]["custom_links"]) {
                         <h3 class="card-title mb-0">{{ name }}</h3>
                     </div>
                     <div class="col-lg-6 d-flex align-items-center">
-                        <span>ToDo</span>
+                        <span>{{ accessCount.sevenDays }} <small class="text-muted">Accesses last 7 days</small> | {{ accessCount.total }} <small class="text-muted">Accesses in total</small></span>
                     </div>
                 </div>
                 <hr>
-                <canvas :id="chartId" role="img" :aria-label="chartAriaLabel"></canvas>
+                <canvas :id="chartId" role="img" :aria-label="'Access statistics for ' + this.name"></canvas>
                 <div class="text-center">
                     <a class="badge badge-secondary" v-on:click="viewOne" href="#14days">Show last 14 days</a>
                     <a class="badge badge-secondary" v-on:click="viewTwo" href="#month">Show last month</a>
                 </div>
                 <hr>
-                <div class="row">
+                <p class="text-center text-muted mb-0" v-if="this.name === 'Index'">Index is an internal entry. It counts the number of front page accesses.</p>
+                <p class="text-center text-muted mb-0" v-else-if="this.name === '404-redirect'">404-redirect is an internal entry. It counts the number of 404 errors .</p>
+                <div class="row" v-else>
                     <div class="col-lg-9">
-                        <span>ToDo</span>
+                        <label class="sr-only" :for="'destination-' + this.identifier">URL (destination)</label>
+                        <div class="input-group">
+                            <input class="form-control" :id="'destination-' + this.identifier" type="url" :value="shortlinkUrl" readonly>
+                            <div class="input-group-append">
+                                <div class="input-group-text">
+                                    <a :href="shortlinkUrl" target="_blank" rel="noopener">open</a>
+                                </div>
+                            </div>
+                        </div>
                     </div>
                     <div class="col-lg-3 mt-2 mt-lg-0 text-center">
                         <button type="button" class="btn btn-outline-danger" v-on:click="remove">Delete shortlink</button>
diff --git a/assets/main.js b/assets/main.js
@@ -25,7 +25,8 @@ Vue.component('chart', {
     data: function () {
         return {
             identifier: Math.floor(Math.random() * 10000),
-            chart: null
+            chart: null,
+            accessCount: { sevenDays: 0, total: 0 }
         }
     },
     template: document.getElementById('chart-template'),
@@ -34,8 +35,12 @@ Vue.component('chart', {
         let dataset = [];
         for (let [unixTimestamp, count] of Object.entries(this.stats)) {
             let timestamp = new Date(unixTimestamp * 1000);
+            if (((currentDate - timestamp) / (60 * 60 * 24 * 1000)) <= 7) {
+                this.accessCount.sevenDays += count;
+            }
             dataset.push({ x: timestamp, y: count });
         }
+        this.accessCount.total = dataset.length;
         this.chart = new Chart(ctx, {
             type: 'bar',
             data: {
@@ -126,8 +131,8 @@ Vue.component('chart', {
         chartId: function () {
             return 'chart-' + this.identifier;
         },
-        chartAriaLabel: function () {
-            return 'Access statistics for ' + this.name;
+        shortlinkUrl: function () {
+            return this.$parent.dataObject.shortlinks[this.name];
         }
     }
 });
@@ -136,7 +141,7 @@ Vue.component('chart', {
 var vm = new Vue({
     el: '#app',
     data: {
-        shortlinks: [],
+        dataObject: [],
         loaded: false
     },
     methods: {
@@ -147,12 +152,12 @@ var vm = new Vue({
             }
             this.loaded = false;
             var vm = this;
-            fetch('admin.php?get_stats')
+            fetch('admin.php?get_data')
                 .then(function (response) {
                     return response.json()
                 })
                 .then(function (data) {
-                    vm.shortlinks = data
+                    vm.dataObject = data
                 });
             this.loaded = true;
         }