Merge pull request #323 from cydrobolt/feature/date_bound_adj_fe_stats

Allow modification of date bounds in link stats page

app/Http/Controllers/StatsController.php

@@ -13,9 +13,22 @@ class StatsController extends Controller {
     const DAYS_TO_FETCH = 30;
 
     public function displayStats(Request $request, $short_url) {
+        $validator = \Validator::make($request->all(), [
+            'left_bound' => 'date',
+            'right_bound' => 'date'
+        ]);
+
+        if ($validator->fails() && !session('error')) {
+            // Do not flash error if there is already an error flashed
+            return redirect()->back()->with('error', 'Invalid date bounds.');
+        }
+
+        $user_left_bound = $request->input('left_bound');
+        $user_right_bound = $request->input('right_bound');
+
         // Carbon bounds for StatHelper
-        $left_bound = Carbon::now()->subDays(self::DAYS_TO_FETCH);
-        $right_bound = Carbon::now();
+        $left_bound = $user_left_bound ?: Carbon::now()->subDays(self::DAYS_TO_FETCH);
+        $right_bound = $user_right_bound ?: Carbon::now();
 
         if (!$this->isLoggedIn()) {
             return redirect(route('login'))->with('error', 'Please login to view link stats.');
@@ -38,8 +51,17 @@ class StatsController extends Controller {
             return redirect(route('admin'))->with('error', 'You do not have permission to view stats for this link.');
         }
 
-        // Fetch base rows for StatHelper
-        $stats = new StatsHelper($link_id, $left_bound, $right_bound);
+        try {
+            // Initialize StatHelper
+            $stats = new StatsHelper($link_id, $left_bound, $right_bound);
+        }
+        catch (\Exception $e) {
+            if (!session('error')) {
+                // Do not flash error if there is already an error flashed
+                return redirect()->back()->with('error', 'Invalid date bounds.
+                    The right date bound must be more recent than the left bound.');
+            }
+        }
 
         $day_stats = $stats->getDayStats();
         $country_stats = $stats->getCountryStats();
@@ -51,6 +73,9 @@ class StatsController extends Controller {
             'country_stats' => $country_stats,
             'referer_stats' => $referer_stats,
 
+            'left_bound' => ($user_left_bound ?: $left_bound->toDateTimeString()),
+            'right_bound' => ($user_right_bound ?: $right_bound->toDateTimeString()),
+
             'no_div_padding' => true
         ]);
     }

public/css/stats.css

@@ -1,4 +1,4 @@
-.stats-header {
+.stats-header h3 {
     text-align: center;
 }
 

public/js/StatsCtrl.js

@@ -1,3 +1,7 @@
+var parseInputDate = function (inputDate) {
+    return moment(inputDate);
+};
+
 polr.controller('StatsCtrl', function($scope, $compile) {
     $scope.dayChart = null;
     $scope.refererChart = null;
@@ -97,10 +101,25 @@ polr.controller('StatsCtrl', function($scope, $compile) {
 
     };
 
+    $scope.initDatePickers = function () {
+        var $leftPicker = $('#left-bound-picker');
+        var $rightPicker = $('#right-bound-picker');
+
+        $leftPicker.datetimepicker();
+        $rightPicker.datetimepicker();
+
+        $leftPicker.data("DateTimePicker").parseInputDate(parseInputDate);
+        $rightPicker.data("DateTimePicker").parseInputDate(parseInputDate);
+
+        $leftPicker.data("DateTimePicker").date(datePickerLeftBound, Date, moment, null);
+        $rightPicker.data("DateTimePicker").date(datePickerRightBound, Date, moment, null);
+    }
+
     $scope.init = function () {
         $scope.initDayChart();
         $scope.initRefererChart();
         $scope.initCountryChart();
+        $scope.initDatePickers();
     };
 
     $scope.init();

resources/views/link_stats.blade.php

@@ -4,23 +4,49 @@
 <link rel='stylesheet' href='/css/datatables.min.css'>
 <link rel='stylesheet' href='/css/stats.css'>
 <link rel='stylesheet' href='/css/jquery-jvectormap.css'>
-
+<link rel='stylesheet' href='/css/bootstrap-datetimepicker.min.css'>
 @endsection
 
 @section('content')
 <div ng-controller="StatsCtrl" class="ng-root">
-    <div class="stats-header">
+    <div class="stats-header bottom-padding">
         <h3>Stats</h3>
-        <p>
-            <b>Short Link: </b>
-            <a target="_blank" href="{{ env('APP_PROTOCOL') }}/{{ env('APP_ADDRESS') }}/{{ $link->short_url }}">
-                {{ env('APP_ADDRESS') }}/{{ $link->short_url }}
-            </a>
-        </p>
-        <p>
-            <b>Long Link: </b>
-            <a target="_blank" href="{{ $link->long_url }}">{{ $link->long_url }}</a>
-        </p>
+        <div class="row">
+            <div class="col-md-3 col-md-offset-3">
+                <p>
+                    <b>Short Link: </b>
+                    <a target="_blank" href="{{ env('APP_PROTOCOL') }}/{{ env('APP_ADDRESS') }}/{{ $link->short_url }}">
+                        {{ env('APP_ADDRESS') }}/{{ $link->short_url }}
+                    </a>
+                </p>
+                <p>
+                    <b>Long Link: </b>
+                    <a target="_blank" href="{{ $link->long_url }}">{{ str_limit($link->long_url, 50) }}</a>
+                </p>
+            </div>
+            <div class="col-md-3">
+                <form action="" method="GET">
+                    <div class="form-group">
+                        <div class='input-group date' id='left-bound-picker'>
+                            <input type="text" class="form-control" name="left_bound">
+                            <span class="input-group-addon">
+                                <span class="glyphicon glyphicon-calendar"></span>
+                            </span>
+                        </div>
+                    </div>
+                    <div class="form-group">
+                        <div class='input-group date' id='right-bound-picker'>
+                            <input type="text" class="form-control" name="right_bound">
+                            <span class="input-group-addon">
+                                <span class="glyphicon glyphicon-calendar"></span>
+                            </span>
+                        </div>
+                    </div>
+
+                    <input type="submit" value="Refresh" class="form-control">
+                </form>
+            </div>
+        </div>
     </div>
 
     <div class="row bottom-padding">
@@ -58,9 +84,6 @@
                 </tbody>
             </table>
 
-        </div>
-        <div class="col-md-6">
-
         </div>
     </div>
 </div>
@@ -70,9 +93,14 @@
 @section('js')
 {{-- Load data --}}
 <script>
+// Load data
 var dayData = JSON.parse('{!! json_encode($day_stats) !!}');
 var refererData = JSON.parse('{!! json_encode($referer_stats) !!}');
 var countryData = JSON.parse('{!! json_encode($country_stats) !!}');
+
+// Load datepicker dates
+var datePickerLeftBound = '{{ $left_bound }}';
+var datePickerRightBound = '{{ $right_bound }}';
 </script>
 
 {{-- Include extra JS --}}
@@ -81,6 +109,7 @@ var countryData = JSON.parse('{!! json_encode($country_stats) !!}');
 <script src='/js/datatables.min.js'></script>
 <script src='/js/jquery-jvectormap.min.js'></script>
 <script src='/js/jquery-jvectormap-world-mill.js'></script>
+<script src='/js/moment.min.js'></script>
+<script src='/js/bootstrap-datetimepicker.min.js'></script>
 <script src='/js/StatsCtrl.js'></script>
-
 @endsection