use bootstrap-datepicker
This also validates transaction date and description upon form submission. As noted in the issue, this removes hledger-web's "smart date" functionality. This functionality can be restored giving the demand but should be tracked in another issue. Previous iterations used input[type=date], but it isn't easily crossbrowser and the polyfill I found had some quirks.
This commit is contained in:
parent
aa06d0f9bd
commit
d12d7e2228
@ -125,6 +125,7 @@ instance Yesod App where
|
|||||||
|
|
||||||
pc <- widgetToPageContent $ do
|
pc <- widgetToPageContent $ do
|
||||||
addStylesheet $ StaticR css_bootstrap_min_css
|
addStylesheet $ StaticR css_bootstrap_min_css
|
||||||
|
addStylesheet $ StaticR css_bootstrap_datepicker_standalone_min_css
|
||||||
-- load these things early, in HEAD:
|
-- load these things early, in HEAD:
|
||||||
toWidgetHead [hamlet|
|
toWidgetHead [hamlet|
|
||||||
<script type="text/javascript" src="@{StaticR js_jquery_min_js}">
|
<script type="text/javascript" src="@{StaticR js_jquery_min_js}">
|
||||||
@ -132,6 +133,7 @@ instance Yesod App where
|
|||||||
|]
|
|]
|
||||||
addScript $ StaticR js_bootstrap_min_js
|
addScript $ StaticR js_bootstrap_min_js
|
||||||
-- addScript $ StaticR js_typeahead_bundle_min_js
|
-- addScript $ StaticR js_typeahead_bundle_min_js
|
||||||
|
addScript $ StaticR js_bootstrap_datepicker_min_js
|
||||||
addScript $ StaticR js_jquery_url_js
|
addScript $ StaticR js_jquery_url_js
|
||||||
addScript $ StaticR js_jquery_cookie_js
|
addScript $ StaticR js_jquery_cookie_js
|
||||||
addScript $ StaticR js_jquery_hotkeys_js
|
addScript $ StaticR js_jquery_hotkeys_js
|
||||||
@ -297,19 +299,11 @@ getLastMessage = cached getMessage
|
|||||||
addform :: Text -> ViewData -> HtmlUrl AppRoute
|
addform :: Text -> ViewData -> HtmlUrl AppRoute
|
||||||
addform _ vd@VD{..} = [hamlet|
|
addform _ vd@VD{..} = [hamlet|
|
||||||
|
|
||||||
<script language="javascript">
|
<script>
|
||||||
jQuery(document).ready(function() {
|
jQuery(document).ready(function() {
|
||||||
|
|
||||||
/* set up typeahead fields */
|
/* set up typeahead fields */
|
||||||
|
|
||||||
datesSuggester = new Bloodhound({
|
|
||||||
local:#{listToJsonValueObjArrayStr dates},
|
|
||||||
limit:100,
|
|
||||||
datumTokenizer: function(d) { return [d.value]; },
|
|
||||||
queryTokenizer: function(q) { return [q]; }
|
|
||||||
});
|
|
||||||
datesSuggester.initialize();
|
|
||||||
|
|
||||||
descriptionsSuggester = new Bloodhound({
|
descriptionsSuggester = new Bloodhound({
|
||||||
local:#{listToJsonValueObjArrayStr descriptions},
|
local:#{listToJsonValueObjArrayStr descriptions},
|
||||||
limit:100,
|
limit:100,
|
||||||
@ -331,7 +325,6 @@ addform _ vd@VD{..} = [hamlet|
|
|||||||
});
|
});
|
||||||
accountsSuggester.initialize();
|
accountsSuggester.initialize();
|
||||||
|
|
||||||
enableTypeahead(jQuery('input#date'), datesSuggester);
|
|
||||||
enableTypeahead(jQuery('input#description'), descriptionsSuggester);
|
enableTypeahead(jQuery('input#description'), descriptionsSuggester);
|
||||||
enableTypeahead(jQuery('input#account1, input#account2, input#account3, input#account4'), accountsSuggester);
|
enableTypeahead(jQuery('input#account1, input#account2, input#account3, input#account4'), accountsSuggester);
|
||||||
|
|
||||||
@ -340,10 +333,13 @@ addform _ vd@VD{..} = [hamlet|
|
|||||||
<form#addform method=POST .form>
|
<form#addform method=POST .form>
|
||||||
<div .form-group>
|
<div .form-group>
|
||||||
<div .row>
|
<div .row>
|
||||||
<div .col-md-2 .col-xs-6 .col-sm-6>
|
<div .col-md-3 .col-xs-6 .col-sm-6>
|
||||||
<input #date .typeahead .form-control .input-lg type=text size=15 name=date placeholder="Date" value="#{defdate}">
|
<div #dateWrap .input-group .date>
|
||||||
<div .col-md-10 .col-xs-6 .col-sm-6>
|
<input #date required lang=en name=date .form-control .input-lg placeholder="Date" >
|
||||||
<input #description .typeahead .form-control .input-lg type=text size=40 name=description placeholder="Description">
|
<div .input-group-addon>
|
||||||
|
<span .glyphicon .glyphicon-th>
|
||||||
|
<div .col-md-9 .col-xs-6 .col-sm-6>
|
||||||
|
<input #description required .typeahead .form-control .input-lg type=text size=40 name=description placeholder="Description">
|
||||||
<div .account-postings>
|
<div .account-postings>
|
||||||
$forall n <- postingnums
|
$forall n <- postingnums
|
||||||
^{postingfields vd n}
|
^{postingfields vd n}
|
||||||
@ -361,8 +357,6 @@ addform _ vd@VD{..} = [hamlet|
|
|||||||
(or ctrl +, ctrl -)
|
(or ctrl +, ctrl -)
|
||||||
|]
|
|]
|
||||||
where
|
where
|
||||||
defdate = "" :: String -- #322 don't set a default, typeahead(?) clears it on tab. See also hledger.js
|
|
||||||
dates = ["today","yesterday","tomorrow"] :: [String]
|
|
||||||
descriptions = sort $ nub $ map tdescription $ jtxns j
|
descriptions = sort $ nub $ map tdescription $ jtxns j
|
||||||
accts = journalAccountNamesDeclaredOrImplied j
|
accts = journalAccountNamesDeclaredOrImplied j
|
||||||
escapeJSSpecialChars = regexReplaceCI "</script>" "<\\/script>" -- #236
|
escapeJSSpecialChars = regexReplaceCI "</script>" "<\\/script>" -- #236
|
||||||
|
|||||||
@ -2,7 +2,7 @@
|
|||||||
--
|
--
|
||||||
-- see: https://github.com/sol/hpack
|
-- see: https://github.com/sol/hpack
|
||||||
--
|
--
|
||||||
-- hash: 8b909b66ed99a760e973a9a36822f85ab879fb9823aab1521214d41b237abd45
|
-- hash: e44d6ce1b41bd59cebb67a6f567178cd7fdef2396dd1debf0c5c1e9635233736
|
||||||
|
|
||||||
name: hledger-web
|
name: hledger-web
|
||||||
version: 1.4.99
|
version: 1.4.99
|
||||||
@ -38,6 +38,7 @@ extra-source-files:
|
|||||||
config/settings.yml
|
config/settings.yml
|
||||||
messages/en.msg
|
messages/en.msg
|
||||||
README
|
README
|
||||||
|
static/css/bootstrap-datepicker.standalone.min.css
|
||||||
static/css/bootstrap-theme.css
|
static/css/bootstrap-theme.css
|
||||||
static/css/bootstrap-theme.css.map
|
static/css/bootstrap-theme.css.map
|
||||||
static/css/bootstrap-theme.min.css
|
static/css/bootstrap-theme.min.css
|
||||||
@ -50,6 +51,7 @@ extra-source-files:
|
|||||||
static/fonts/glyphicons-halflings-regular.woff
|
static/fonts/glyphicons-halflings-regular.woff
|
||||||
static/hledger.css
|
static/hledger.css
|
||||||
static/hledger.js
|
static/hledger.js
|
||||||
|
static/js/bootstrap-datepicker.min.js
|
||||||
static/js/bootstrap.js
|
static/js/bootstrap.js
|
||||||
static/js/bootstrap.min.js
|
static/js/bootstrap.min.js
|
||||||
static/js/excanvas.js
|
static/js/excanvas.js
|
||||||
|
|||||||
7
hledger-web/static/css/bootstrap-datepicker.standalone.min.css
vendored
Normal file
7
hledger-web/static/css/bootstrap-datepicker.standalone.min.css
vendored
Normal file
File diff suppressed because one or more lines are too long
@ -14,6 +14,14 @@ $(document).ready(function() {
|
|||||||
// show add form if ?add=1
|
// show add form if ?add=1
|
||||||
if ($.url.param('add')) { addformShow(true); }
|
if ($.url.param('add')) { addformShow(true); }
|
||||||
|
|
||||||
|
// date picker
|
||||||
|
// http://bootstrap-datepicker.readthedocs.io/en/latest/options.html
|
||||||
|
$('#dateWrap').datepicker({
|
||||||
|
showOnFocus: false,
|
||||||
|
autoclose: true,
|
||||||
|
format: 'yyyy-mm-dd'
|
||||||
|
});
|
||||||
|
|
||||||
// sidebar account hover handlers
|
// sidebar account hover handlers
|
||||||
$('#sidebar td a').mouseenter(function(){ $(this).parent().addClass('mouseover'); });
|
$('#sidebar td a').mouseenter(function(){ $(this).parent().addClass('mouseover'); });
|
||||||
$('#sidebar td').mouseleave(function(){ $(this).removeClass('mouseover'); });
|
$('#sidebar td').mouseleave(function(){ $(this).removeClass('mouseover'); });
|
||||||
@ -141,7 +149,6 @@ function addformReset(showmsg) {
|
|||||||
// reset typehead state (though not fetched completions)
|
// reset typehead state (though not fetched completions)
|
||||||
$('.typeahead').typeahead('val', '');
|
$('.typeahead').typeahead('val', '');
|
||||||
$('.tt-dropdown-menu').hide();
|
$('.tt-dropdown-menu').hide();
|
||||||
$('input#date').val(''); // #322 don't set a default, typeahead(?) clears it on tab. See also Foundation.hs
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
8
hledger-web/static/js/bootstrap-datepicker.min.js
vendored
Normal file
8
hledger-web/static/js/bootstrap-datepicker.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
Loading…
Reference in New Issue
Block a user