102 lines
2.8 KiB
CoffeeScript
102 lines
2.8 KiB
CoffeeScript
|
|
||
|
|
window.duration_to_string = (dur) ->
|
||
|
|
pad = (x) ->
|
||
|
|
x = Math.floor x
|
||
|
|
if 10 > x
|
||
|
|
"0#{x}"
|
||
|
|
else
|
||
|
|
x
|
||
|
|
pad3 = (x) ->
|
||
|
|
x = Math.floor x
|
||
|
|
if 10 > x
|
||
|
|
"00#{x}"
|
||
|
|
else if 100 > x
|
||
|
|
"0#{x}"
|
||
|
|
else
|
||
|
|
x
|
||
|
|
"#{pad dur/3600000}:#{pad (dur/60000) % 60}:#{pad dur / 1000 % 60}.#{pad3 dur % 1000}"
|
||
|
|
|
||
|
|
class Clock
|
||
|
|
constructor: (el) ->
|
||
|
|
@element = el
|
||
|
|
@controls = el.querySelector ':scope .controls'
|
||
|
|
@startbtn = el.querySelector ':scope .start'
|
||
|
|
@splitbtn = el.querySelector ':scope .split'
|
||
|
|
@stopbtn = el.querySelector ':scope .stop'
|
||
|
|
@clock = el.querySelector ':scope .duration'
|
||
|
|
@starttime = null
|
||
|
|
@clock_interval = null
|
||
|
|
|
||
|
|
new_event = (name, opts) ->
|
||
|
|
ev = new Event name
|
||
|
|
ev[k] = v for k, v of opts
|
||
|
|
ev
|
||
|
|
|
||
|
|
activate: ->
|
||
|
|
@startbtn.addEventListener 'click', (e) =>
|
||
|
|
e.preventDefault()
|
||
|
|
@starttime = new Date
|
||
|
|
clearInterval @clock_interval if @clock_interval
|
||
|
|
@clock_interval = setInterval( (=> @update_clock()), 47)
|
||
|
|
@controls.setAttribute 'data-state', 'started'
|
||
|
|
@element.dispatchEvent new_event( 'clock_started', clock: @, duration: 0, starttime: @starttime)
|
||
|
|
false
|
||
|
|
@stopbtn.addEventListener 'click', (e) =>
|
||
|
|
e.preventDefault()
|
||
|
|
dur = @duration
|
||
|
|
@starttime = null
|
||
|
|
clearInterval @clock_interval if @clock_interval
|
||
|
|
@controls.setAttribute 'data-state', 'stopped'
|
||
|
|
@element.dispatchEvent new_event( 'clock_stopped', clock: @, duration: @duration, starttime: @starttime)
|
||
|
|
false
|
||
|
|
@splitbtn.addEventListener 'click', (e) =>
|
||
|
|
e.preventDefault()
|
||
|
|
@element.dispatchEvent new_event( 'clock_splitted', clock: @, duration: @duration, starttime: @starttime)
|
||
|
|
false
|
||
|
|
|
||
|
|
Object.defineProperty @::, 'duration',
|
||
|
|
enumerable: true
|
||
|
|
get: ->
|
||
|
|
if @starttime?
|
||
|
|
new Date - @starttime
|
||
|
|
else
|
||
|
|
null
|
||
|
|
|
||
|
|
update_clock: ->
|
||
|
|
@clock.textContent = duration_to_string @duration
|
||
|
|
|
||
|
|
window.addEventListener 'load', ->
|
||
|
|
window.clock = new Clock document.querySelector( '#clock')
|
||
|
|
clock.activate()
|
||
|
|
|
||
|
|
window.timelist = document.querySelector( '#timelist')
|
||
|
|
window.list = []
|
||
|
|
counter = 0
|
||
|
|
clock.element.addEventListener 'clock_splitted', (e) ->
|
||
|
|
counter++
|
||
|
|
dur = duration_to_string e.duration
|
||
|
|
tr = document.createElement 'tr'
|
||
|
|
td = document.createElement 'td'
|
||
|
|
td.textContent = "#{++counter}"
|
||
|
|
tr.appendChild td
|
||
|
|
td = document.createElement 'td'
|
||
|
|
td.textContent = dur
|
||
|
|
tr.appendChild td
|
||
|
|
td = document.createElement 'td'
|
||
|
|
iu = document.createElement('input')
|
||
|
|
iu.setAttribute 'type', 'text'
|
||
|
|
td.appendChild iu
|
||
|
|
tr.appendChild td
|
||
|
|
window.timelist.appendChild tr
|
||
|
|
window.list.push [counter, dur, iu]
|
||
|
|
true
|
||
|
|
|
||
|
|
download = clock.element.querySelector ':scope .export'
|
||
|
|
exporthelper = clock.element.querySelector ':scope .exporthelper'
|
||
|
|
download.addEventListener 'click', (e) ->
|
||
|
|
t = ''
|
||
|
|
for en in window.list
|
||
|
|
t += "#{en[0]}\t#{en[1]}\t#{en[2].value}\n"
|
||
|
|
exporthelper.href = "data:text/csv;name=schplitted.csv,#{encodeURIComponent t}"
|
||
|
|
exporthelper.click()
|