Skip to content

Commit a589bb9

Browse files
author
Gena Maly
committed
Add js and css
1 parent 1074ff2 commit a589bb9

File tree

3 files changed

+249
-0
lines changed

3 files changed

+249
-0
lines changed

‎README.md‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,4 @@
11
# active_admin_date_range_preset
22
Preset links for ActiveAdmin date_range inputs
3+
4+
This is JS-CSS add-in over inputs filter_date_range in sidebar filters

‎app/assets/javascripts/includes/date_range_ext_plugin.coffee‎

Lines changed: 172 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,172 @@
1+
(($) ->
2+
# options:
3+
# inject_method: 'append' | 'append' how to insert new HTML into document
4+
# gteq_input: jQuery-selecotr for input date_from
5+
# lteq_input: jQuery-selecotr for input date_to
6+
# hours_offset: Int number - hours +/- to correct time
7+
$.fn.date_range_ext = (options)->
8+
9+
# settings
10+
options = options || {}
11+
inject_method = options.inject_method || 'wrap'
12+
hours_offset = options.hours_offset || 0
13+
show_time = options.show_time || false
14+
15+
# datetime object, uses local user timeset, with offset.
16+
datetime = new Date((new Date()).getTime() + hours_offset * 60 * 60 * 1000)
17+
18+
# formated date YYYY-MM-DD, with converting to UTC
19+
formatDate = (date, hh_mm_ss)->
20+
str = (date).toISOString().slice(0, 10)
21+
if show_time
22+
str += ' 00:00:00'
23+
return str
24+
25+
unbindClickEventBlockTimerange = ->
26+
$('.block_timerange').remove()
27+
$('body').off('click.CalendarRangeSet')
28+
29+
return this.each (i, el) ->
30+
# PLUGIN BEGIN
31+
32+
$this = $(el)
33+
34+
# helper variables
35+
if (options.lteq_input)
36+
lteq_input = $(options.lteq_input)
37+
else
38+
lteq_input = $this.find('input[id$=_lteq]')
39+
40+
if options.gteq_input
41+
gteq_input = $(options.gteq_input)
42+
else
43+
gteq_input = $this.find('input[id$=_gteq]')
44+
45+
fillInputs = (month_start, month_end)->
46+
gteq_input.val( formatDate(month_start) )
47+
lteq_input.val( formatDate(month_end, '23:59:59') )
48+
49+
# filter modifying
50+
if inject_method == 'append'
51+
$this.append('<a href="#" class="btn_timerange">Set range</a>')
52+
else
53+
$this.find('label').wrap("<div class='label_div'></div>")
54+
$this.find('div.label_div').append('<a href="#" class="btn_timerange">Set range</a>')
55+
56+
$this.on('click', '.btn_timerange', (e)->
57+
unbindClickEventBlockTimerange()
58+
e.stopPropagation()
59+
e.preventDefault()
60+
$('body').append('<div style="min-width: '+e.target.offsetWidth+'px; top: '+(e.target.offsetTop)+'px; left: '+(e.target.offsetLeft)+'px" class="block_timerange">' +
61+
'<div><span class="btn_today">Today</span></div>' +
62+
'<div><span class="btn_yesterday">Yesterday</span></div>' +
63+
'<div><span class="btn_week">This Week</span></div>' +
64+
'<div><span class="btn_month">This Month</span></div>' +
65+
'<div><span class="btn_last_week">Last Week</span></div>' +
66+
'<div><span class="btn_last_month">Last Month</span></div>' +
67+
'</div>'
68+
).ready(->
69+
container = $(this).find('.block_timerange')
70+
71+
# Today
72+
$(container).on('click.CalendarRangeSet', '.btn_today', (e)->
73+
unbindClickEventBlockTimerange()
74+
today_end = new Date(datetime)
75+
today_end.setDate( today_end.getDate() + 1 )
76+
fillInputs(datetime, today_end)
77+
)
78+
79+
# Yesterday
80+
$(container).on('click.CalendarRangeSet', '.btn_yesterday', (e)->
81+
unbindClickEventBlockTimerange()
82+
yesterday_start = new Date(datetime)
83+
yesterday_start.setDate( yesterday_start.getDate() - 1 )
84+
85+
fillInputs(yesterday_start, datetime)
86+
)
87+
88+
# Week
89+
$(container).on('click.CalendarRangeSet', '.btn_week', (e)->
90+
unbindClickEventBlockTimerange()
91+
week_start = new Date(datetime)
92+
week_start.setDate( week_start.getDate() - week_start.getDay() + 1 )
93+
week_end = new Date(datetime)
94+
week_end.setTime( week_start.getTime() )
95+
week_end.setDate( week_start.getDate() + 7 )
96+
97+
fillInputs(week_start, week_end)
98+
)
99+
100+
# Month
101+
$(container).on('click.CalendarRangeSet', '.btn_month', (e)->
102+
unbindClickEventBlockTimerange()
103+
month_start = new Date(datetime)
104+
month_start.setDate(1)
105+
106+
fillInputs(month_start, datetime)
107+
)
108+
109+
# Last Week
110+
$(container).on('click.CalendarRangeSet', '.btn_last_week', (e)->
111+
unbindClickEventBlockTimerange()
112+
end = new Date(datetime)
113+
end.setDate( end.getDate() - end.getDay() + 1 )
114+
start = new Date(end)
115+
start.setDate( start.getDate() - 7 )
116+
117+
fillInputs(start, end)
118+
)
119+
120+
# Last Month
121+
$(container).on('click.CalendarRangeSet', '.btn_last_month', (e)->
122+
unbindClickEventBlockTimerange()
123+
end = new Date(datetime)
124+
end.setDate(1)
125+
start = new Date(end)
126+
start.setMonth( start.getMonth() - 1 )
127+
128+
fillInputs(start, end)
129+
)
130+
131+
# Outer
132+
$('body').on('click.CalendarRangeSet', (e)->
133+
e.stopPropagation()
134+
if $(e.target).closest('.block_timerange').length == 0
135+
unbindClickEventBlockTimerange()
136+
)
137+
)
138+
)
139+
140+
) jQuery
141+
142+
143+
144+
145+
146+
147+
#
148+
# Example how to apply to different places with different options
149+
#
150+
#
151+
$(document).on 'ready', ->
152+
$('form.filter_form div.filter_date_range').date_range_ext()
153+
154+
$('form.filter_form div.filter_date_time_range').date_range_ext({
155+
show_time: true
156+
})
157+
158+
#
159+
# main selector is where to put links
160+
# gteq_input and lteq_input is target inputs
161+
#
162+
$('li#report_supplier_traffic_date_from_input label, ' +
163+
'li#report_profitability_date_from_input label, ' +
164+
'li#report_customer_traffic_date_from_input label, ' +
165+
'li#report_disconnect_reason_date_from_input label').date_range_ext(
166+
{
167+
inject_method: 'append',
168+
show_time: true,
169+
gteq_input: 'input[id$=date_from]',
170+
lteq_input: 'input[id$=date_to]'
171+
}
172+
)

‎app/assets/stylesheets/includes/date_range_ext.css.scss‎

Lines changed: 75 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
form.filter_form {
2+
3+
.filter_form_field.filter_date_time_range input.date-time-picker {
4+
width: 102px;
5+
padding: 8px 3px 7px;
6+
}
7+
8+
.filter_form_field.filter_date_time_range,
9+
.filter_form_field.filter_date_range {
10+
11+
div.label_div {
12+
13+
label {
14+
display: inline-block;
15+
}
16+
17+
.btn_timerange {
18+
float: right;
19+
margin: -2px 8px 0 0;
20+
text-decoration: none;
21+
border-bottom: 1px dashed;
22+
line-height: 1.4em;
23+
&:hover {
24+
border-bottom: 0 none;
25+
}
26+
}
27+
28+
} // div.label_div
29+
30+
}
31+
}
32+
33+
34+
body.new, body.edit {
35+
.date-time-picker {
36+
width: 218px;
37+
}
38+
}
39+
40+
.date_time_picker {
41+
42+
.btn_timerange {
43+
text-decoration: none;
44+
border-bottom: 1px dashed;
45+
&:hover {
46+
border-bottom: 0 none;
47+
}
48+
}
49+
50+
}
51+
52+
.block_timerange {
53+
position: absolute;
54+
display: block;
55+
border: 1px solid #000;
56+
padding: 5px 10px 5px 10px;
57+
text-align: center;
58+
background-color: #f4f4f4;
59+
>div {
60+
margin-top: 10px;
61+
&:last-child {
62+
margin-bottom: 10px;
63+
}
64+
span {
65+
color: #2e86cc;
66+
cursor: pointer;
67+
text-decoration: none;
68+
69+
border-bottom: 1px dashed;
70+
&:hover {
71+
border-bottom: 0 none;
72+
}
73+
}
74+
}
75+
}

0 commit comments

Comments
 (0)