Hotfix/datetimepicker

Gemfile

@@ -38,12 +38,17 @@ group :development, :test do
 end
 
 # Jquery stuff
-gem 'better_datetimepicker', '~> 0.0.9', git: 'https://github.com/engaging-computing/better-datetimepicker'
+# gem 'better_datetimepicker', '~> 0.0.9', git: 'https://github.com/engaging-computing/better-datetimepicker'
+gem 'bootstrap-datepicker-rails'
 gem 'better_colorpicker', '~> 0.1.2', git: 'https://github.com/engaging-computing/better-colorpicker'
 gem 'jquery-rails'
 gem 'jquery-ui-rails'
 gem 'jqgrid-jquery-rails', '~> 4.6.001'
 
+# Moment gems for our timestamp needs
+gem 'momentjs-rails'
+gem 'moment_timezone-rails'
+
 gem 'dropzonejs-rails'
 
 # To use ActiveModel has_secure_password

Gemfile.lock

@@ -1,9 +1,3 @@
-GIT
-  remote: https://github.com/jetthoughts/yaml_db.git
-  revision: 5f73cbd14adee939adf08574ec3bf6e05ee55889
-  specs:
-    yaml_db (0.2.3)
-
 GIT
   remote: https://github.com/ambethia/recaptcha
   revision: 76c2f58ee906ed591662d552c6be383024af11d6
@@ -38,14 +32,10 @@ GIT
       sass
 
 GIT
-  remote: https://github.com/engaging-computing/better-datetimepicker
-  revision: a159fb6f3e0ad24712658f249d8dad22c514fc25
+  remote: https://github.com/jetthoughts/yaml_db
+  revision: 5f73cbd14adee939adf08574ec3bf6e05ee55889
   specs:
-    better_datetimepicker (0.0.9)
-      coffee-rails
-      coffee-rails-source-maps
-      rails (~> 4)
-      sass
+    yaml_db (0.2.3)
 
 GEM
   remote: https://rubygems.org/
@@ -90,6 +80,8 @@ GEM
     bcrypt-ruby (3.1.5)
       bcrypt (>= 3.1.3)
     benchmark-ips (2.7.2)
+    bootstrap-datepicker-rails (1.8.0.1)
+      railties (>= 3.0)
     bootstrap-sass (3.3.3)
       autoprefixer-rails (>= 5.0.0.1)
       sass (>= 3.2.19)
@@ -214,6 +206,9 @@ GEM
       minitest (>= 5.0)
       ruby-progressbar
     modernizr-rails (2.7.1)
+    moment_timezone-rails (0.5.0)
+    momentjs-rails (2.20.1)
+      railties (>= 3.1)
     multi_json (1.13.1)
     multi_xml (0.5.5)
     multipart-post (2.0.0)
@@ -319,7 +314,6 @@ GEM
       multi_json (~> 1.0)
       simplecov-html (~> 0.8.0)
     simplecov-html (0.8.0)
-    slop (3.6.0)
     spreadsheet (1.0.0)
       ruby-ole (>= 1.0)
     sprockets (2.12.5)
@@ -368,7 +362,7 @@ DEPENDENCIES
   bcrypt-ruby
   beaker (~> 1.3.0)!
   better_colorpicker (~> 0.1.2)!
-  better_datetimepicker (~> 0.0.9)!
+  bootstrap-datepicker-rails
   bootstrap-sass
   bootstrap-switch-rails
   browser
@@ -398,6 +392,8 @@ DEPENDENCIES
   minitest (~> 5.1)
   minitest-reporters
   modernizr-rails
+  moment_timezone-rails
+  momentjs-rails
   multi_json
   omniauth-google-oauth2
   pg

app/assets/javascripts/application.js

@@ -30,6 +30,8 @@
 //= require jquery.qrcode.min.js
 //= require jquery-ui/sortable
 //= require jquery.ui.touch-punch
+//= require moment.js
+//= require moment-timezone-with-data.js
 //= require titlebar.js.coffee
 //= require bootstrap
 //= require bootstrap-switch
@@ -50,8 +52,8 @@
 //= require markerclustererplus
 //= require numeric.min
 //= require oms
+//= require bootstrap-datepicker/core
 //= require better_colorpicker
-//= require better_datetimepicker
 //= require visualizations/highvis/index
 //
 //= require summernote

app/assets/javascripts/templates/visualizations/controls/set-axis-timeline.hbs

@@ -5,8 +5,7 @@
       <td style="padding-bottom:10px;">
         <label>X Axis Min:</label>
 				<div style="width:100%; display: flex;">
-          <input id="x-axis-min" class="form-control axis" style="width:200px;" value="{{xAxisMin}}" placeholder="eg: 5,10">
-          <i id="x-min-cal" class="editor-button fa fa-calendar"></i>
+          <input id="x-axis-min" class="form-control axis" style="width:200px;" data-provide="datepicker" value="{{xAxisMin}}" placeholder="eg: 5,10">
 				</div>
 				<div id="x-min"></div>
       </td>
@@ -15,8 +14,7 @@
       <td style="padding-bottom:10px;">
         <label>X Axis Max:</label>
 				<div style="width:100%; display: flex;">
-          <input id="x-axis-max" class="form-control axis" style="width:200px;" value="{{xAxisMax}}" placeholder="eg: 5,10">
-          <i id="x-max-cal" class="editor-button fa fa-calendar"></i>
+          <input id="x-axis-max" class="form-control axis" style="width:200px;" data-provide="datepicker" value="{{xAxisMax}}" placeholder="eg: 5,10">
 				</div>
 				<div id="x-max"></div>
       </td>

app/assets/javascripts/visualizations/highvis/scatter.coffee

@@ -573,35 +573,6 @@ $ ->
           calendarButtonMin = $('#x-min-cal')   # calendar button symbol
           formInputMin = $('#x-axis-min')       # textbox where the new axis min goes
 
-          # When you click the calendar button
-          # open the datetime picker and fix some font stuff
-          calendarButtonMin.click ->
-            dtPickerMin.open()
-            $('#dt-time-textbox').css("fontSize", "13px")
-
-          # Set some properties of the dtPicker
-          dtPickerMin = calendarButtonMin.datetimepicker
-            autoClose: false
-            keyPress: (e) ->
-              e.stopImmediatePropagation()
-              e.keyCode
-            onOpen: ->
-              formInputMin.focus()
-              formInputMin[0].value
-            onChange: (val) ->
-              formattedVal = val.format('M/D/YYYY h:mm:ss A')
-              formInputMin.val(formattedVal)
-            onKeys:
-              13: -> #enter
-                dtPickerMin.close()
-              27: -> #escape
-                dtPickerMin.close()
-            anchor: $('#x-min')
-            hPosition: ->
-              0
-            vPosition: ->
-              0
-
           # TODO: fix dtPicker so that it closes when you click outside of it
           # jQuery(document.body).on "click", ":not(#dt-picker, #dt-picker *)", (e) ->
           #   if !(e.target.id == 'x-min-cal'
@@ -617,36 +588,6 @@ $ ->
           calendarButtonMax = $('#x-max-cal')   # calendar button symbol
           formInputMax = $('#x-axis-max')       # textbox where the new axis max goes
 
-          # When you click the calendar button,
-          # open the datetime picker and fix some font stuff
-          calendarButtonMax.click ->
-            dtPickerMax.open()
-            $('#dt-time-textbox').css('cssText', 'font-size: 13px !important;')
-            $('#dt-picker option').css('cssText', 'font-size: 13px !important;')
-
-          # Set some properties of the dtPicker
-          dtPickerMax = calendarButtonMax.datetimepicker
-            autoClose: false
-            keyPress: (e) ->
-              e.stopImmediatePropagation()
-              e.keyCode
-            onOpen: ->
-              formInputMax.focus()
-              formInputMax[0].value
-            onChange: (val) ->
-              formattedVal = val.format('M/D/YYYY h:mm:ss A')
-              formInputMax.val(formattedVal)
-            onKeys:
-              13: -> #enter
-                dtPickerMax.close()
-              27: -> #escape
-                dtPickerMax.close()
-            anchor: $('#x-max')
-            hPosition: ->
-              0
-            vPosition: ->
-              0
-
           # TODO: fix dtPicker so that it closes when you click outside of it
           # jQuery(document.body).on "click", ":not(#dt-picker, #dt-picker *)", (e) ->
           #   if !(e.target.id == 'x-max-cal'

app/assets/stylesheets/application.css.scss

@@ -9,7 +9,7 @@
  * compiled file, but it's generally better to create a new file per style scope.
  *
  *= require better_colorpicker
- *= require better_datetimepicker
+ *= require bootstrap-datepicker
  *= require font-awesome
  *= require summernote
  *= require jquery-ui

vendor/assets/javascripts/slickgrid-editors/slickgrid-time.coffee

@@ -10,49 +10,48 @@
   pickerOpen = false
 
   form = $('<div>
-    <input type="text" class="editor-text-with-button" />
-    <i class="editor-button fa fa-calendar"></i>
+    <input type="text" data-provide="datepicker" />
   </div>')
   form.appendTo args.container
 
   formInput = form.children 'input'
   formInput.focus()
 
-  formButton = form.children 'i'
-  formButton.click ->
-    unless pickerOpen
-      dtPicker.open()
+  # formButton = form.children 'i'
+  # formButton.click ->
+  #   unless pickerOpen
+  #     dtPicker.open()
 
-  dtPicker = formButton.datetimepicker
-    autoClose: false
-    keyEventOn: (e) ->
-      args.grid.onKeyDown.subscribe e
-    keyEventOff: (e) ->
-      args.grid.onKeyDown.unsubscribe e
-    keyPress: (e) ->
-      e.stopImmediatePropagation()
-      e.keyCode
-    onOpen: ->
-      pickerOpen = true
-      formInput.focus()
-      currValue
-    onChange: (val) ->
-      currValue = val.format('YYYY/MM/DD HH:mm:ss')
-      formInput.val currValue
-    onKeys:
-      13: -> #enter
-        dtPicker.close()
-      27: -> #escape
-        dtPicker.close()
-    onClose: (val) ->
-      pickerOpen = false
-    hPosition: (w, h) ->
-      args.position.left + 2
-    vPosition: (w, h) ->
-      args.position.bottom + 2
+  # dtPicker = formButton.datetimepicker
+  #   autoClose: false
+  #   keyEventOn: (e) ->
+  #     args.grid.onKeyDown.subscribe e
+  #   keyEventOff: (e) ->
+  #     args.grid.onKeyDown.unsubscribe e
+  #   keyPress: (e) ->
+  #     e.stopImmediatePropagation()
+  #     e.keyCode
+  #   onOpen: ->
+  #     pickerOpen = true
+  #     formInput.focus()
+  #     currValue
+  #   onChange: (val) ->
+  #     currValue = val.format('YYYY/MM/DD HH:mm:ss')
+  #     formInput.val currValue
+  #   onKeys:
+  #     13: -> #enter
+  #       dtPicker.close()
+  #     27: -> #escape
+  #       dtPicker.close()
+  #   onClose: (val) ->
+  #     pickerOpen = false
+  #   hPosition: (w, h) ->
+  #     args.position.left + 2
+  #   vPosition: (w, h) ->
+  #     args.position.bottom + 2
 
-  getInput: ->
-    formInput
+  # getInput: ->
+  #   formInput
 
   destroy: ->
     form.remove()