Skip to content
This repository was archived by the owner on Nov 17, 2018. It is now read-only.

Commit 0f92a1c

Browse files
willtennienwilltennien
committed
UI: implemented Jon's suggestions.
1 parent d277d6c commit 0f92a1c

11 files changed

+67
-54
lines changed

‎app/assets/javascripts/oauth.js.coffee‎

Lines changed: 19 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -63,25 +63,31 @@ optionsScrollChart =
6363
textPosition: 'none'
6464
###
6565

66+
foo = (->
67+
i = 0
68+
69+
return (n) ->
70+
i += 1
71+
console.debug(i + ' >>> ' + n)
72+
console.debug($('#main-chart')[0])
73+
)()
6674

6775
this.createScrolledChart = (data, variable) ->
76+
debugger
6877
cols = data.cols
6978
rows = data.rows
70-
7179
createCheckin = (n, callback) -> () ->
7280
n -= 1
7381
callback() if n is 0
7482

7583
prettyTime = (t) -> "#{t.toLocaleTimeString()} #{t.getMonth()+1}/#{t.getDate()}"
7684

7785
scrollLabelDate = (t) -> t.toLocaleDateString()
78-
7986
dates = {}
8087
spawnDates = () ->
8188
dates.all = rows.map((r) -> r.c[0].v)
8289
dates.first = +dates.all[0]
8390
dates.span = dates.all[dates.all.length - 1] - dates.first
84-
8591
dateOnScroll = (x) ->
8692
return new Date(dates.first + dates.span * (x / elem.film.offsetParent().width()))
8793

@@ -91,11 +97,9 @@ this.createScrolledChart = (data, variable) ->
9197
google.visualization.events.addListener(chart, 'ready', layerFilm)
9298
chart.draw(dataTable, variable.optionsScrollChart)
9399
return chart
94-
95100
initMainChart = () ->
96101
chart = new google.visualization[variable.chartType]($('#main-chart')[0])
97102
return chart
98-
99103
redrawMainChart = (startDate, finishDate) ->
100104
start = Math.max(0, indexOfDateAfter(startDate) - 1)
101105
finish = indexOfDateAfter(finishDate) + 1
@@ -105,16 +109,13 @@ this.createScrolledChart = (data, variable) ->
105109
redrawMainChartFromScrolled = () ->
106110
redrawMainChart(dateOnScroll(elem.film.position().left),
107111
dateOnScroll(elem.film.position().left + elem.film.width()))
108-
109112
indexOfDateAfter = (date) ->
110113
for d, i in dates.all #optimize this by using a binary search
111114
if date < d
112115
return i
113116
return dates.all.length - 1
114117

115-
116118
drawCharts = createCheckin((if google.visualization then 1 else 2), () ->
117-
118119
spawnDates()
119120
elem.scrollChart = createScrollChart()
120121
elem.mainChart = initMainChart()
@@ -123,12 +124,10 @@ this.createScrolledChart = (data, variable) ->
123124
)
124125

125126

126-
127127
filmHandleLeftDraggable = false
128128
filmHandleRightDraggable = false
129129
filmDraggable = false
130130
filmPressedAt = false
131-
132131
elem =
133132
filmBackdrop: $("<div id='film-backdrop'></div>"),
134133
film: $("<div id='film'></div>"),
@@ -138,32 +137,27 @@ this.createScrolledChart = (data, variable) ->
138137
filmLabelRight: $("<span class='film-label right'></span>")
139138
filmLabelContainerLeft: $("<span class='film-label-container left'></span>")
140139
filmLabelContainerRight: $("<span class='film-label-container right'></span>")
141-
142140
elem.filmBackdrop.append(elem.film.append(elem.filmHandleLeft.append(elem.filmLabelContainerLeft.append(elem.filmLabelLeft)))
143141
.append(elem.filmHandleRight.append(elem.filmLabelContainerRight.append(elem.filmLabelRight))))
144-
145142
elem.filmHandleLeft.mousedown((event) ->
146143
event.preventDefault()
147144
filmHandleLeftDraggable = true
148145
elem.filmLabelLeft.css('visibility', 'visible')
149146
$('body').css('cursor', 'col-resize')
150147
false
151148
)
152-
153149
elem.filmHandleRight.mousedown((event) ->
154150
event.preventDefault()
155151
filmHandleRightDraggable = true
156152
elem.filmLabelRight.css('visibility', 'visible')
157153
$('body').css('cursor', 'col-resize')
158154
false
159155
)
160-
161156
elem.film.mousedown((event) ->
162157
event.preventDefault()
163158
filmDraggable = true
164159
filmPressedAt = event.pageX - $(this).offset().left
165160
)
166-
167161
$(document).mouseup(() ->
168162
if filmHandleLeftDraggable or filmHandleRightDraggable or filmDraggable
169163
filmHandleLeftDraggable = false
@@ -174,14 +168,20 @@ this.createScrolledChart = (data, variable) ->
174168
$('body').css('cursor', 'default')
175169
redrawMainChartFromScrolled()
176170
)
177-
171+
178172
onMouseMove = (event) ->
179173
minHandleDistance = 10
180174
newX = event.pageX - elem.film.offsetParent().offset().left
181-
if filmHandleLeftDraggable and newX < -minHandleDistance + elem.film.position().left + elem.film.outerWidth() - elem.filmHandleLeft.width() - elem.filmHandleRight.width()
175+
if filmHandleLeftDraggable and minHandleDistance + elem.filmHandleRight.width() + elem.filmHandleLeft.width() < elem.film.width() - (newX - parseFloat(elem.film.css('left'), 10))
182176
newX = Math.max(newX, 0)
183-
elem.film.css('width', elem.film.outerWidth() - newX + parseInt(elem.film.css('left')), 10)
177+
elem.film.css('width', elem.film.width() - (newX - parseFloat(elem.film.css('left'), 10)))
184178
elem.film.css('left', newX)
179+
console.debug(elem.film.width())
180+
console.debug(newX)
181+
console.debug(parseFloat(elem.film.css('left'), 10))
182+
console.debug(newX - parseFloat(elem.film.css('left'), 10))
183+
console.debug(elem.film.width() - newX + parseFloat(elem.film.css('left'), 10))
184+
console.debug(elem.film.width() - (newX - parseFloat(elem.film.css('left'), 10)))
185185
elem.filmLabelLeft.html(scrollLabelDate(dateOnScroll(newX)))
186186
else if filmHandleRightDraggable and minHandleDistance + elem.film.position().left + elem.filmHandleLeft.width() + elem.filmHandleRight.width() < newX
187187
newX = Math.min(newX, elem.film.offsetParent().width())
@@ -192,7 +192,6 @@ this.createScrolledChart = (data, variable) ->
192192
newX = Math.min(Math.max(newX, 0),
193193
elem.film.offsetParent().width() - elem.film.width())
194194
elem.film.css('left', newX)
195-
196195
$(document).mousemove(onMouseMove)
197196

198197
layerFilm = () ->
@@ -203,11 +202,9 @@ this.createScrolledChart = (data, variable) ->
203202
elem.filmBackdrop.height(rect.attr('height'))
204203
$('#scroll-chart').append(elem.filmBackdrop)
205204

206-
207-
208205
google.setOnLoadCallback(drawCharts)
209206
unless google.visualization
210-
google.load('visualization', '1', {packages: ['corechart']})
207+
google.load('visualization', '1', {packages: ['corechart']}) unless google.visualization
211208

212209
###
213210
rows = undefined

‎app/assets/javascripts/oauth_balance.js.coffee‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ prettyTime = (t) -> "#{t.toLocaleTimeString()} #{t.getMonth()+1}/#{t.getDate()}"
77

88

99
options =
10-
chartType: 'AreaChart'
10+
chartType: 'LineChart'
1111

1212
optionsMainChart:
1313
colors: ['#0088CC']
@@ -18,9 +18,11 @@ options =
1818
hAxis:
1919
textStyle:
2020
fontName: 'Lato, Lucida Grande'
21+
slantedText: true
2122
vAxis:
2223
textStyle:
2324
fontName: 'Lato, Lucida Grande'
25+
format: '$###,###.##'
2426

2527
optionsScrollChart:
2628
colors: ['#0088CC']

‎app/assets/javascripts/oauth_balances_over_time_with_friends.coffee‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ prettyTime = (t) -> "#{t.toLocaleTimeString()} #{t.getMonth()+1}/#{t.getDate()}"
55
prettyFriendName = (f) -> "#{f.first_name} #{f.last_name}"
66

77
options =
8-
chartType: 'AreaChart'
8+
chartType: 'LineChart'
99

1010
optionsMainChart:
1111
legend:
@@ -14,9 +14,11 @@ options =
1414
hAxis:
1515
textStyle:
1616
fontName: 'Lato, Lucida Grande'
17+
slantedText: true
1718
vAxis:
1819
textStyle:
1920
fontName: 'Lato, Lucida Grande'
21+
format: '$###,###.##'
2022

2123
optionsScrollChart:
2224
backgroundColor: '#F5F5F5'

‎app/assets/javascripts/oauth_expenses.js.coffee‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ prettyTime = (t) -> "#{t.toLocaleTimeString()} #{t.getMonth()+1}/#{t.getDate()}"
77

88

99
options =
10-
chartType: 'AreaChart'
10+
chartType: 'ColumnChart'
1111

1212
optionsMainChart:
1313
colors: ['#0088CC']
@@ -18,9 +18,11 @@ options =
1818
hAxis:
1919
textStyle:
2020
fontName: 'Lato, Lucida Grande'
21+
slantedText: true
2122
vAxis:
2223
textStyle:
2324
fontName: 'Lato, Lucida Grande'
25+
format: '$###,###.##'
2426

2527
optionsScrollChart:
2628
colors: ['#0088CC']

‎app/assets/javascripts/oauth_expenses_by_category_over_time.js.coffee‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ prettyTime = (t) -> "#{t.toLocaleTimeString()} #{t.getMonth()+1}/#{t.getDate()}"
88
prettyFriendName = (f) -> "#{f.first_name} #{f.last_name}"
99

1010
options =
11-
chartType: 'AreaChart'
11+
chartType: 'LineChart'
1212

1313
optionsMainChart:
1414
legend:
@@ -17,9 +17,11 @@ options =
1717
hAxis:
1818
textStyle:
1919
fontName: 'Lato, Lucida Grande'
20+
slantedText: true
2021
vAxis:
2122
textStyle:
2223
fontName: 'Lato, Lucida Grande'
24+
format: '$###,###.##'
2325

2426
optionsScrollChart:
2527
backgroundColor: '#F5F5F5'

‎app/assets/javascripts/oauth_expenses_matching.js.coffee‎

Lines changed: 24 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@ prettyTime = (t) -> "#{t.toLocaleTimeString()} #{t.getMonth()+1}/#{t.getDate()}"
2828

2929

3030
options =
31-
chartType: 'AreaChart'
31+
chartType: 'LineChart'
3232

3333
optionsMainChart:
3434
legend:
@@ -37,9 +37,11 @@ options =
3737
hAxis:
3838
textStyle:
3939
fontName: 'Lato, Lucida Grande'
40+
slantedText: true
4041
vAxis:
4142
textStyle:
4243
fontName: 'Lato, Lucida Grande'
44+
format: '$###,###.##'
4345

4446
optionsScrollChart:
4547
backgroundColor: '#F5F5F5'
@@ -151,22 +153,24 @@ chartData = () ->
151153
cols = aggregatedCols()
152154
return {cols: cols, rows: rows}
153155

154-
156+
google.load('visualization', '1', {packages: ['corechart']}) unless google.visualization
155157

156158
elem = {}
157159

158-
$(() ->
159-
elem.prototypeOfSearchStackItem = $($('.search-stack-item')[0]).clone() #jQuery should find only one search-stack-item.
160-
)
160+
elem.prototypeOfSearchStackItem = $("<li class='search-stack-item'>
161+
<div class='search-stack-item-content'>
162+
<span class='search-name'></span>
163+
<span class='delete-search'>x</span>
164+
</div>
165+
</li>")
161166

162-
this.primeCharts = (data) ->
163-
164-
165-
searches.push({search: urlParams.query, rows: data})
166167

168+
this.primeCharts = (data) ->
167169

170+
#I removed this when limiting the search interface to one matchbox.
171+
#searches.push({search: urlParams.query, rows: data})
168172

169-
createScrolledChart(chartData(), options)
173+
#createScrolledChart(chartData(), options)
170174

171175

172176
chartLoading = (() ->
@@ -203,13 +207,13 @@ addSearchItem = () ->
203207
search = $('#search-stack .matchbox .input').val()
204208
if search isnt ''
205209
$('#search-stack .matchbox .input').val('')
206-
207210
chartLoading.start()
208211
slideInSearchStackItem(SearchStackItem(search))
209212
$.ajax({url: "/user/get_expenses_matching?query=#{search}"}).done((data) ->
210213
searches.push({search: search, rows: JSON.parse(data)})
211214
$('#main-chart').empty()
212215
$('#scroll-chart').empty()
216+
console.debug(createScrolledChart);
213217
createScrolledChart(chartData(), options)
214218
chartLoading.stop()
215219
)
@@ -234,12 +238,14 @@ removeSearchItem = (item) ->
234238

235239
$(() ->
236240
first = $('.search-stack-item:first-child')
237-
first.find('.search-name').html(urlParams.query)
241+
#first.find('.search-name').html(urlParams.query)
238242
sliding.searchItemHeight = $('.search-stack-item').outerHeight()
243+
###
239244
$('.search-stack-item:first-child').find('.delete-search').click(() ->
240245
if searches.length > 1
241246
removeSearchItem($(this).closest('.search-stack-item'))
242247
)
248+
###
243249
$('#search-stack .matchbox .submit').click(addSearchItem)
244250
$('#search-stack .matchbox .input').keypress((event) ->
245251
if event.which is 13
@@ -280,7 +286,7 @@ slideInSearchStackItem = (newItem) ->
280286
newItemInner.css('display', 'none')
281287
console.log($('#search-stack').offset())
282288
if not $('.search-stack-item:nth-last-child(2)')[0]
283-
newItem.css('top', $('#search-stack').offset().top + 'px')
289+
newItem.css('top', '0px')
284290
newItem.insertBefore($('.search-stack-item:last-child'))
285291

286292
afterFadeIn = () ->
@@ -289,14 +295,18 @@ slideInSearchStackItem = (newItem) ->
289295
newItem.css('position', 'static')
290296
newItem.css('z-index', '1')
291297

298+
newItemInner.fadeIn(sliding.insertDuration, afterFadeIn)
299+
300+
sliding.searchItemHeight = $('.search-stack-item:first-child').outerHeight()
301+
292302
moveLastItem = setInterval((() ->
293303
start = new Date()
294304
return () ->
295305
lastItem.css('margin-top',
296306
lastItemHeightFunc((new Date() - start) / sliding.insertDuration))
297307
)(), sliding.insertDuration / sliding.searchItemHeight / sliding.framesPerHeight)
298308

299-
newItemInner.fadeIn(sliding.insertDuration, afterFadeIn)
309+
300310

301311

302312
slideOutSearchStackItem = (item) ->

‎app/assets/stylesheets/oauth.css.scss‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -335,16 +335,20 @@ div#film {
335335
z-index: 100;
336336

337337
.input {
338-
width: 9em;
338+
width: 5em;
339+
font-size: 1em;
339340

340341
}
341342

342343
.submit {
343344
float: right;
345+
margin-top: 3px;
344346
padding: 0.05em 0.5em;
345347
border-radius: 1em;
346348
background-color: #fff;
347349
color: #000;
350+
font-size: 1em;
351+
height: 21px; /* for safari */
348352

349353
}
350354
}

‎app/controllers/user_controller.rb‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -77,7 +77,7 @@ def expenses_by_category_over_time
7777

7878
def expenses_matching
7979
@title = "Search an expense"
80-
@data = JSON.unparse(current_user.get_expenses_matching_cumulative(params[:query]))
80+
#@data = JSON.unparse(current_user.get_expenses_matching_cumulative(params[:query]))
8181
end
8282

8383
def get_expenses_matching

0 commit comments

Comments
 (0)