Skip to content

Instantly share code, notes, and snippets.

@TheLarkInn

TheLarkInn/AppController.coffee

Created October 4, 2013 13:00
Show Gist options
  • Save TheLarkInn/6825537 to your computer and use it in GitHub Desktop.
Save TheLarkInn/6825537 to your computer and use it in GitHub Desktop.
Download ZIP
.erb file contains scripts and templates no style don't judge!
Raw
AppController.coffee
#View -------------------------
class ReportResults.View.ReportResultsView extends Backbone.View
template: _.template($("#ReportViewTemplate").html())
className: "report_view"
tagName: "tr"
#Model -------------------------
class ReportResults.Model.ReportResultsModel extends Backbone.Model
urlRoot: '/reports'
idAttribute: 'ticket_id'
defaults:
'user_id' : null
'short_desc' : null
'email' : null
'created_at' : null
#Collection -------------------------
class ReportResults.Collection.ReportResultsCollection extends Backbone.Collection
model: ReportResults.Model.ReportResultsModel
initialize: (options) ->
@url = "/reports/#{options.start_date}/#{options.end_date}"
#AppController -------------------------
class ReportResults.View.AppController extends Backbone.View
id: 'report-results-controller'
el: $('#content')
reportResultsCollectionArray: []
events:
'click .submit' : 'runReport'
initialize: ->
console.log("INTIALIZED")
@render()
render: ->
console.log("RENDERED")
$('div#content').append(@$el)
runReport: =>
console.log("REPORT RAN")
@start_date = $( "#start_date" ).val()
console.log("START_DATE", @start_date)
@end_date = $( "#end_date" ).val()
console.log("END_DATE", @end_date)
@reportResultsCollection = new ReportResults.Collection.ReportResultsCollection({start_date: @start_date, end_date: @end_date})
@fetchReportResults()
fetchReportResults: =>
@reportResultsCollection.fetch {
success:(collection) =>
_.each collection.models, (model) =>
reportResultView = new ReportResults.View.ReportResultsView({model: model})
@reportResultsCollectionArray.push reportResultView
}
Raw
reports.erb
<head>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var reportApp = new window.ReportResults.View.AppController({});
var $startDate = new Date();
var $endDate = new Date();
$("#start_date").val($startDate.toISOString().substring(0,10));
$("#end_date").val($startDate.toISOString().substring(0,10));
$( "#date_range" ).change(function() {
if ($(this).val() === "today") {
var startDate = new Date();
var endDate = new Date();
$("#start_date").val( startDate.toISOString().substring(0,10));
$("#end_date").val( startDate.toISOString().substring(0,10));
}
if ($(this).val() === "yesterday") {
var startDate = new Date();
var endDate = new Date();
startDate.setDate(startDate.getDate() - 1);
var yesterday = new Date(startDate).toISOString().substring(0,10);
$("#start_date").val(yesterday);
$("#end_date").val(yesterday);
}
//This is when I realized Blain was using Date.JS lol
if ($(this).val() === "thisWeek") {
var startDate = new Date.monday().toString("yyyy-MM-dd");
var endDate = new Date.friday().toString("yyyy-MM-dd");
$("#start_date").val(startDate);
$("#end_date").val(endDate);
}
if ($(this).val() === "lastWeek") {
var startDate = new Date.monday().add({days: -7}).toString("yyyy-MM-dd");
var endDate = new Date.friday().add({days: -7}).toString("yyyy-MM-dd");
$("#start_date").val(startDate);
$("#end_date").val(endDate);
}
if ($(this).val() === "thisMonth") {
var startDate = new Date.today().moveToFirstDayOfMonth().toString("yyyy-MM-dd");
var endDate = new Date.today().moveToLastDayOfMonth().toString("yyyy-MM-dd");
$("#start_date").val(startDate);
$("#end_date").val(endDate);
}
if ($(this).val() === "lastMonth") {
var startDate = new Date.today().last().month().moveToFirstDayOfMonth().toString("yyyy-MM-dd");
var endDate = new Date.today().last().month().moveToLastDayOfMonth().toString("yyyy-MM-dd");
$("#start_date").val(startDate);
$("#end_date").val(endDate);
}
if ($(this).val() === "thisYear") {
var startDate = new Date.today().set({day:1, month:0}).toString("yyyy-MM-dd");
var endDate = new Date.today().set({month:11}).moveToLastDayOfMonth().toString("yyyy-MM-dd")
$("#start_date").val(startDate);
$("#end_date").val(endDate);
}
if ($(this).val() === "lastYear") {
var startDate = new Date.today().set({day:1, month:0}).last().year().toString("yyyy-MM-dd");
var endDate = new Date.today().set({month:11}).moveToLastDayOfMonth().last().year().toString("yyyy-MM-dd")
$("#start_date").val(startDate);
$("#end_date").val(endDate);
}
if ($(this).val() === "other") {}
});
});
</script>
<script>
$(function() {
$( "#start_date, #end_date" ).datepicker({ dateFormat: "yy-mm-dd"});
});
</script>
<script type="text/html" id="ReportViewTemplate">
<td><%%= this.model.attributes.ticket_id %></td>
<td><%%= this.model.attributes.short_desc %></td>
</script>
<script src="/js/Reports/libs/app.js"></script>
<script src="libs/date.js"></script>
</head>
<div id="content">
<p>
<select id="date_range">
<option value="today">Today</option>
<option value="yesterday">Yesterday</option>
<option value="thisWeek">This Week</option>
<option value="lastWeek">Last Week</option>
<option value="thisMonth">This Month</option>
<option value="lastMonth">Last Month</option>
<option value="thisYear">This Year</option>
<option value="lastYear">Last Year</option>
<option value="other">Other</option>
</select>
</p>
<div id="report_content">
<input type="button" class="submit" value="Apply" />
<span>Start Date: <input type="text" id="start_date" /></span><span>End Date: <input type="text" id="end_date" /></span>
</div>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment