recruitment/app/views/admin/recruitments/index.html.erb

171 lines
4.9 KiB
Plaintext
Raw Normal View History

2018-01-17 18:22:24 +00:00
<%= javascript_include_tag "//www.google.com/jsapi", "chartkick"%>
<style type="text/css">
.all-stats{
list-style: none;
display: inline-block;
text-align: center;
font-size: 16px;
}
.all-stats li{
display: inline-block;
width: 150px;
height: 100px;
background-color: #ff8700;
padding-top: 40px;
color: #fff;
border-radius: 5px;
margin-right: 20px;
border: 2px solid yellow;
}
.all-stats li:hover{
background-color: #ff8700cc;
}
.all-stats li .heading{
margin-bottom: 5px;
height: 20px;
}
.all-stats li .count{
margin-top: 30px;
font-size: 20px;
}
.loading-area{
margin-top: 25px;
}
.start-chart{
margin-bottom: 30px;
}
</style>
<div id="all-stats">
<h3>Summary</h3>
<ul class="all-stats">
<li>
<div class="heading">Total Job Postings</div>
<div class="count"><%= @job_postings %></div>
</li>
<li>
<div class="heading">Total Internship Postings</div>
<div class="count"><%= @internship_postings %></div>
</li>
<li>
<div class="heading">Total Exchange Postings</div>
<div class="count"><%= @exchange_postings %></div>
</li>
<li>
<div class="heading">Total Employees</div>
<div class="count"><%= @total_employees %></div>
</li>
<li>
<div class="heading">Total Employers</div>
<div class="count"><%= @total_employers %></div>
</li>
<li>
<div class="heading">Total Positions Filled</div>
<div class="count"><%= @total_position_filled %></div>
</li>
</ul>
</div>
<hr>
<div id="posting-chart" class="stat-chart">
<div class="form pull-right">
<form class="form-inline" id="posting-chart-form">
<select name="year" class="input-small">
<option><%= t("recruitment.select_year") %></option>
<% (2017..Time.now.year).each do |year| %>
<option value="<%= year %>"><%= year %></option>
<% end %>
</select>
<select name="month" class="input-small">
<option><%= t("recruitment.select_month") %></option>
<% (01..12).each do |month| %>
<option value="<%= month %>"><%= month %></option>
<% end %>
</select>
<button type="submit" class="btn">Load</button>
</form>
</div>
<div class="loading-area">
<div style="text-align: center;"><img src="/assets/preloader.gif" width="75px"></div>
</div>
</div>
<div id="registration-chart" class="stat-chart">
<div class="form pull-right">
<form class="form-inline" id="registration-chart-form">
<select name="year" class="input-small">
<option><%= t("recruitment.select_year") %></option>
<% (2017..Time.now.year).each do |year| %>
<option value="<%= year %>"><%= year %></option>
<% end %>
</select>
<select name="month" class="input-small">
<option><%= t("recruitment.select_month") %></option>
<% (1..12).each do |month| %>
<option value="<%= month %>"><%= month %></option>
<% end %>
</select>
<button type="submit" class="btn">Load</button>
</form>
</div>
<div class="loading-area">
<div style="text-align: center;"><img src="/assets/preloader.gif" width="75px"></div>
</div>
</div>
<div id="filled-chart" class="stat-chart">
<div class="form pull-right">
<form class="form-inline" id="filled-chart-form">
<select name="year" class="input-small">
<option><%= t("recruitment.select_year") %></option>
<% (2017..Time.now.year).each do |year| %>
<option value="<%= year %>"><%= year %></option>
<% end %>
</select>
<select name="month" class="input-small">
<option><%= t("recruitment.select_month") %></option>
<% (1..12).each do |month| %>
<option value="<%= month %>"><%= month %></option>
<% end %>
</select>
<button type="submit" class="btn">Load</button>
</form>
</div>
<div class="loading-area">
<div style="text-align: center;"><img src="/assets/preloader.gif" width="75px"></div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function(){
loadChart("posting");
loadChart("registration");
loadChart("filled");
})
var loadChart = function(type, month, year){
$.ajax({
url : "<%= load_chart_admin_recruitments_path %>",
data : {"type" : type, "month" : month, "year" : year},
dataType : "html",
type : "get"
}).done(function(html){
console.log($("#" + type + "-chart .loading-area"));
$("#" + type + "-chart .loading-area").html(html);
})
}
$("#posting-chart-form").on("submit",function(){
var month = $(this).find("select[name=month]").val(),
year = $(this).find("select[name=year]").val();
loadChart("posting", month, year);
return false;
})
$("#registration-chart-form").on("submit",function(){
var month = $(this).find("select[name=month]").val(),
year = $(this).find("select[name=year]").val();
loadChart("registration", month, year);
return false;
})
$("#filled-chart-form").on("submit",function(){
var month = $(this).find("select[name=month]").val(),
year = $(this).find("select[name=year]").val();
loadChart("filled", month, year);
return false;
})
</script>