bike
/
BikeShed-1
mirror of https://github.com/fspc/BikeShed-1.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

BS3: removed bootstrap-timepicker in favor of universal bootstrap-datetimepicker.

master
Ilya Konanykhin 8 years ago
parent
3fc812bd7a
commit
1880f91c15
7 changed files with 119 additions and 1316 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 1
      app/assets/javascripts/application.js
  2. 1097
      app/assets/javascripts/bootstrap-timepicker.js
  3. 136
      app/assets/javascripts/time_entries.js
  4. 1
      app/assets/stylesheets/application.scss
  5. 146
      app/assets/stylesheets/bootstrap-timepicker.css
  6. 38
      app/assets/stylesheets/frontend.scss
  7. 16
      app/views/time_entries/new.haml

1
app/assets/javascripts/application.js
View File

@ -16,5 +16,4 @@
//= require utils //= require utils
//= require moment //= require moment
//= require bootstrap-datetimepicker //= require bootstrap-datetimepicker
//= require bootstrap-timepicker
//= require jquery-date-format //= require jquery-date-format

1097
app/assets/javascripts/bootstrap-timepicker.js
View File

File diff suppressed because it is too large

136
app/assets/javascripts/time_entries.js
View File

@ -1,77 +1,83 @@
$(document).ready(function(){ $(document).ready(function () {
$("#date_id").datetimepicker({format: 'MM/DD/YYYY'}) var $date_input = $("#date_id");
$date_input.datetimepicker({format: $date_input.data("format")});
$("#start_time_id").timepicker(); var $start_time_input = $("#start_time_id");
$("#end_time_id").timepicker(); var $end_time_input = $("#end_time_id");
[$start_time_input, $end_time_input].forEach(function($x) {
$x.datetimepicker({format: $x.data("format"), stepping: 15});
})
$("#add_time_entry_submit").click(function(){ $("#add_time_entry_submit").click(function () {
date = $("#date_id").val(); date = $date_input.val();
start_date = new Date(date + " " + $("#start_time_id").val()); start_date = new Date(date + " " + $start_time_input.val());
end_date = new Date(date + " " + $("#end_time_id").val()); end_date = new Date(date + " " + $end_time_input.val());
forward = $("#add_time_entry_submit").data("forward"); forward = $("#add_time_entry_submit").data("forward");
// If a bike is selected, forward to the bike // If a bike is selected, forward to the bike
// checklist. // checklist.
bike_id = parseInt($("#bike_id").val()); bike_id = parseInt($("#bike_id").val());
if( bike_id > 0 ){ if (bike_id > 0) {
forward = "/task_lists/" + bike_id + "/edit"; forward = "/task_lists/" + bike_id + "/edit";
} }
//FIXME: Ideally, we'd submit the dates as ISO, but I can't figure out //FIXME: Ideally, we'd submit the dates as ISO, but I can't figure out
// how to get Netzke to render UTC dates correctly (it calls to_json // how to get Netzke to render UTC dates correctly (it calls to_json
// somewhere and drops off the timezone). For the time being, save dates // somewhere and drops off the timezone). For the time being, save dates
// in locale like Netzke. // in locale like Netzke.
json_data = { time_entries: [{ json_data = {
start_date: $.format.date(start_date, "dd-MM-yyyy hh:mm a"), time_entries: [{
end_date: $.format.date(end_date, "dd-MM-yyyy hh:mm a"), start_date: $.format.date(start_date, "dd-MM-yyyy hh:mm a"),
log_action_id: parseInt($('input[name=action_id]:checked').val()), end_date: $.format.date(end_date, "dd-MM-yyyy hh:mm a"),
bike_id: bike_id, log_action_id: parseInt($('input[name=action_id]:checked').val()),
description: $("#description_id").val(), bike_id: bike_id,
}]}; description: $("#description_id").val(),
}]
};
$.ajax({ $.ajax({
url: $("#add_time_entry_submit").data("url"), url: $("#add_time_entry_submit").data("url"),
type: "POST", type: "POST",
data: JSON.stringify(json_data), data: JSON.stringify(json_data),
contentType: 'application/json', contentType: 'application/json',
dataType: "json", dataType: "json",
success: function(data, status, xhr){ success: function (data, status, xhr) {
window.location = forward; window.location = forward;
}, },
error: function(data, status ){ error: function (data, status) {
displayFormErrors(data.responseJSON); displayFormErrors(data.responseJSON);
} }
}); });
}); });
$(".work_entry-delete-btn").click(function(){ $(".work_entry-delete-btn").click(function () {
row = $(this).closest("tr"); row = $(this).closest("tr");
entry_id = row.data("id"); entry_id = row.data("id");
start_date = row.data("start_date"); start_date = row.data("start_date");
duration = row.data("duration"); duration = row.data("duration");
description = row.data("description"); description = row.data("description");
$("#work_entry_start_date").html(start_date); $("#work_entry_start_date").html(start_date);
$("#work_entry_duration").html(duration); $("#work_entry_duration").html(duration);
$("#work_entry_description").html(description); $("#work_entry_description").html(description);
$("#confirmation_delete").data("entry_id", entry_id); $("#confirmation_delete").data("entry_id", entry_id);
}); });
$("#confirmation_delete").click(function(){ $("#confirmation_delete").click(function () {
entry_id = $(this).data("entry_id"); entry_id = $(this).data("entry_id");
url = $("#confirmation_delete").data("url") + entry_id; url = $("#confirmation_delete").data("url") + entry_id;
$.ajax({ $.ajax({
url: url, url: url,
type: "delete", type: "delete",
contentType: 'application/json', contentType: 'application/json',
success: function(data, status, xhr){ success: function (data, status, xhr) {
location.reload(); location.reload();
}, },
error: function(data, status ){ error: function (data, status) {
displayFormErrors(data.responseJSON); displayFormErrors(data.responseJSON);
} }
});
}); });
});
}); });

1
app/assets/stylesheets/application.scss
View File

@ -1,4 +1,3 @@
@import "bootstrap"; @import "bootstrap";
@import "bootstrap-datetimepicker"; @import "bootstrap-datetimepicker";
@import "bootstrap-timepicker";
@import "frontend"; @import "frontend";

146
app/assets/stylesheets/bootstrap-timepicker.css
View File

@ -1,146 +0,0 @@
/*!
* Timepicker Component for Twitter Bootstrap
*
* Copyright 2013 Joris de Wit
*
* Contributors https://github.com/jdewit/bootstrap-timepicker/graphs/contributors
*
* For the full copyright and license information, please view the LICENSE
* file that was distributed with this source code.
*/
.bootstrap-timepicker {
position: relative;
}
.bootstrap-timepicker.pull-right .bootstrap-timepicker-widget.dropdown-menu {
left: auto;
right: 0;
}
.bootstrap-timepicker.pull-right .bootstrap-timepicker-widget.dropdown-menu:before {
left: auto;
right: 12px;
}
.bootstrap-timepicker.pull-right .bootstrap-timepicker-widget.dropdown-menu:after {
left: auto;
right: 13px;
}
.bootstrap-timepicker .add-on {
cursor: pointer;
}
.bootstrap-timepicker .add-on i {
display: inline-block;
width: 16px;
height: 16px;
}
.bootstrap-timepicker-widget.dropdown-menu {
padding: 4px;
}
.bootstrap-timepicker-widget.dropdown-menu.open {
display: inline-block;
}
.bootstrap-timepicker-widget.dropdown-menu:before {
border-bottom: 7px solid rgba(0, 0, 0, 0.2);
border-left: 7px solid transparent;
border-right: 7px solid transparent;
content: "";
display: inline-block;
position: absolute;
}
.bootstrap-timepicker-widget.dropdown-menu:after {
border-bottom: 6px solid #FFFFFF;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
content: "";
display: inline-block;
position: absolute;
}
.bootstrap-timepicker-widget.timepicker-orient-left:before {
left: 6px;
}
.bootstrap-timepicker-widget.timepicker-orient-left:after {
left: 7px;
}
.bootstrap-timepicker-widget.timepicker-orient-right:before {
right: 6px;
}
.bootstrap-timepicker-widget.timepicker-orient-right:after {
right: 7px;
}
.bootstrap-timepicker-widget.timepicker-orient-top:before {
top: -7px;
}
.bootstrap-timepicker-widget.timepicker-orient-top:after {
top: -6px;
}
.bootstrap-timepicker-widget.timepicker-orient-bottom:before {
bottom: -7px;
border-bottom: 0;
border-top: 7px solid #999;
}
.bootstrap-timepicker-widget.timepicker-orient-bottom:after {
bottom: -6px;
border-bottom: 0;
border-top: 6px solid #ffffff;
}
.bootstrap-timepicker-widget a.btn,
.bootstrap-timepicker-widget input {
border-radius: 4px;
}
.bootstrap-timepicker-widget table {
width: 100%;
margin: 0;
}
.bootstrap-timepicker-widget table td {
text-align: center;
height: 30px;
margin: 0;
padding: 2px;
}
.bootstrap-timepicker-widget table td:not(.separator) {
min-width: 30px;
}
.bootstrap-timepicker-widget table td span {
width: 100%;
}
.bootstrap-timepicker-widget table td a {
border: 1px transparent solid;
width: 100%;
display: inline-block;
margin: 0;
padding: 8px 0;
outline: 0;
color: #333;
}
.bootstrap-timepicker-widget table td a:hover {
text-decoration: none;
background-color: #eee;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
border-color: #ddd;
}
.bootstrap-timepicker-widget table td a i {
margin-top: 2px;
font-size: 18px;
}
.bootstrap-timepicker-widget table td input {
width: 25px;
margin: 0;
text-align: center;
}
.bootstrap-timepicker-widget .modal-content {
padding: 4px;
}
@media (min-width: 767px) {
.bootstrap-timepicker-widget.modal {
width: 200px;
margin-left: -100px;
}
}
@media (max-width: 767px) {
.bootstrap-timepicker {
width: 100%;
}
.bootstrap-timepicker .dropdown-menu {
width: 100%;
}
}

38
app/assets/stylesheets/frontend.scss
View File

@ -11,9 +11,45 @@ fieldset, .fieldset {
margin-bottom: $line-height-computed; margin-bottom: $line-height-computed;
} }
.bootstrap-timepicker { .timepickers {
.form-group { .form-group {
vertical-align: top; vertical-align: top;
&.dash {
line-height: 2.4em;
}
}
.bootstrap-datetimepicker-widget.dropdown-menu {
width: auto;
}
.bootstrap-datetimepicker-widget .timepicker-hour,
.bootstrap-datetimepicker-widget .timepicker-minute,
.bootstrap-datetimepicker-widget .timepicker-second {
width: 40px;
}
.bootstrap-datetimepicker-widget table td {
height: 40px;
line-height: 40px;
width: 40px;
padding: 0 !important;
}
.bootstrap-datetimepicker-widget table td.separator {
width: 10px;
}
.bootstrap-datetimepicker-widget table td span {
width: 40px;
height: 40px;
line-height: 40px;
margin: 0;
}
.bootstrap-datetimepicker-widget a[data-action] {
padding: 0;
color: #000;
} }
} }

16
app/views/time_entries/new.haml
View File

@ -1,27 +1,33 @@
= top_menu link_to_dashboard = top_menu link_to_dashboard
%h1 Add Time Entry %h1 Add Time Entry
- time = Time.now
- date_format, time_format = '%m/%d/%Y', '%l:%M %p'
- mjs_date_format, mjs_time_format = 'MM/DD/YYYY', 'h:mm A'
.row .row
.col-xs-12.col-sm-6.col-lg-4 .col-xs-12.col-sm-6.col-lg-4
%fieldset %fieldset
.form-group.form-inline .form-group.form-inline
= text_field_tag '', Date.today.strftime('%m/%d/%Y'), id: 'date_id', placeholder: 'Date', class: 'form-control', size: 12 = text_field_tag nil, time.strftime(date_format), id: 'date_id', placeholder: 'Date', class: 'form-control',
size: 12, data: {format: mjs_date_format}
.help-block .help-block
.form-group.bootstrap-timepicker.form-inline .form-group.timepickers.form-inline
.form-group .form-group
%label.visible-xs Start time %label.visible-xs Start time
= text_field_tag nil, nil, id: 'start_time_id', placeholder: 'Start time', class: 'form-control', size: 8 = text_field_tag nil, time.strftime(time_format), id: 'start_time_id', placeholder: 'Start time',
class: 'form-control', size: 8, data: {format: mjs_time_format}
.hidden#start_date .hidden#start_date
.help-block .help-block
.form-group.hidden-xs .form-group.dash.hidden-xs
— —
.form-group .form-group
%label.visible-xs End time %label.visible-xs End time
= text_field_tag nil, nil, id: 'end_time_id', placeholder: 'End time', class: 'form-control', size: 8 = text_field_tag nil, time.strftime(time_format), id: 'end_time_id', placeholder: 'End time',
class: 'form-control', size: 8, data: {format: mjs_time_format}
.hidden#end_date .hidden#end_date
.help-block .help-block

Write Preview
Loading…
Cancel
Save