Add date filter bar to stats page

This commit is contained in:
cole m alban 2017-03-31 16:09:16 -04:00
parent 129eff3821
commit 0ffa44897a
9 changed files with 36 additions and 12 deletions

View File

@ -21,7 +21,7 @@ gem 'coffee-rails', '~> 4.2'
# See https://github.com/rails/execjs#readme for more supported runtimes # See https://github.com/rails/execjs#readme for more supported runtimes
# gem 'therubyracer', platforms: :ruby # gem 'therubyracer', platforms: :ruby
gem 'chart-js-rails' gem 'chart-js-rails'
gem 'jquery-ui-rails'
# Use jquery as the JavaScript library # Use jquery as the JavaScript library
gem 'jquery-rails' gem 'jquery-rails'
# Turbolinks makes navigating your web application faster. Read more: https://github.com/turbolinks/turbolinks # Turbolinks makes navigating your web application faster. Read more: https://github.com/turbolinks/turbolinks

View File

@ -88,6 +88,8 @@ GEM
rails-dom-testing (>= 1, < 3) rails-dom-testing (>= 1, < 3)
railties (>= 4.2.0) railties (>= 4.2.0)
thor (>= 0.14, < 2.0) thor (>= 0.14, < 2.0)
jquery-ui-rails (6.0.1)
railties (>= 3.2.16)
kaminari (1.0.1) kaminari (1.0.1)
activesupport (>= 4.1.0) activesupport (>= 4.1.0)
kaminari-actionview (= 1.0.1) kaminari-actionview (= 1.0.1)
@ -222,6 +224,7 @@ DEPENDENCIES
hirb-unicode hirb-unicode
jbuilder (~> 2.5) jbuilder (~> 2.5)
jquery-rails jquery-rails
jquery-ui-rails
kaminari kaminari
listen (~> 3.0.5) listen (~> 3.0.5)
mysql2 (>= 0.3.18, < 0.5) mysql2 (>= 0.3.18, < 0.5)

View File

@ -16,3 +16,4 @@
//= require bootstrap/bootstrap-rails-tooltip //= require bootstrap/bootstrap-rails-tooltip
//= require bootstrap/bootstrap-rails-popover //= require bootstrap/bootstrap-rails-popover
//= require Chart //= require Chart
//= require jquery-ui

View File

@ -1,3 +0,0 @@
# Place all the behaviors and hooks related to the matching controller here.
# All this logic will automatically be available in application.js.
# You can use CoffeeScript in this file: http://coffeescript.org/

View File

@ -1,3 +1,8 @@
$('#from_datepicker').datepicker()
$('#to_datepicker').datepicker()
/*
*This is code for the grades chart.
*/
var ctx = document.getElementById("gradesChart"); var ctx = document.getElementById("gradesChart");
var myChart = new Chart(ctx, { var myChart = new Chart(ctx, {
type: 'bar', type: 'bar',
@ -35,3 +40,4 @@ var myChart = new Chart(ctx, {
} }
} }
}); });

View File

@ -14,4 +14,5 @@
*= require_self *= require_self
*= require bootstrap/bootstrap-rails-tooltip *= require bootstrap/bootstrap-rails-tooltip
*= require bootstrap/bootstrap-rails-popover *= require bootstrap/bootstrap-rails-popover
*= require jquery-ui
*/ */

View File

@ -1,2 +1,6 @@
class StatisticsController < ApplicationController class StatisticsController < ApplicationController
def index
puts params.inspect
end
end end

View File

@ -40,23 +40,35 @@
<% if current_user.admin? %> <% if current_user.admin? %>
<li><a href="companies#index">Companies</a></li> <li><a href="companies#index">Companies</a></li>
<% else %> <% else %>
<li class"active"><a href="statistics#index">Statistics</a></li> <li class="active"><a href="statistics#index">Statistics</a></li>
<li><a href="grades#index">Grades <span class="sr-only">(current)</span></a></li> <li><a href="grades#index">Grades <span class="sr-only">(current)</span></a></li>
<% end %> <% end %>
</ul> </ul>
</div> </div>
</div> </div>
</div> </div>
<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main"> <div class="row">
<div class="col-md-4"> <form action="/statistics?name=cole">
<canvas id="gradesChart"></canvas> <%= csrf_meta_tag %>
<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
<div class="col-md-2">
<p>From: <input type="text" id="from_datepicker" name="from_date"></p>
</div> </div>
<div class="col-md-4"> <div class="col-md-2">
<canvas id="secondChart"></canvas> <p>To: <input type="text" id="to_datepicker" name="to_date"></p>
</div> </div>
<div class="col-md-4"> <div class="col-md-2">
<canvas id="thirdChart"></canvas> <button class="btn btn-primary" type="submit">Filter</button>
</div> </div>
</div>
</form>
</div>
<div class="row">
<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
<div class="col-lg-12">
<canvas id="gradesChart"></canvas>
</div>
</div>
</div> </div>
<%= javascript_include_tag "statistics.js" %> <%= javascript_include_tag "statistics.js" %>
<%= javascript_include_tag "bootstrap.min" %>_ <%= javascript_include_tag "bootstrap.min" %>_