mirror of
https://github.com/fspc/BikeShed-1.git
synced 2025-10-31 08:55:36 -04:00
BS3: removed bootstrap-timepicker in favor of universal bootstrap-datetimepicker.
This commit is contained in:
Ilya Konanykhin
parent
3fc812bd7a
commit
1880f91c15
@ -16,5 +16,4 @@
|
||||
//= require utils
|
||||
//= require moment
|
||||
//= require bootstrap-datetimepicker
|
||||
//= require bootstrap-timepicker
|
||||
//= require jquery-date-format
|
||||
|
||||
1097
app/assets/javascripts/bootstrap-timepicker.js
vendored
1097
app/assets/javascripts/bootstrap-timepicker.js
vendored
File diff suppressed because it is too large
Load Diff
@ -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();
|
||||
$("#end_time_id").timepicker();
|
||||
var $start_time_input = $("#start_time_id");
|
||||
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(){
|
||||
date = $("#date_id").val();
|
||||
start_date = new Date(date + " " + $("#start_time_id").val());
|
||||
end_date = new Date(date + " " + $("#end_time_id").val());
|
||||
$("#add_time_entry_submit").click(function () {
|
||||
date = $date_input.val();
|
||||
start_date = new Date(date + " " + $start_time_input.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
|
||||
// checklist.
|
||||
bike_id = parseInt($("#bike_id").val());
|
||||
if( bike_id > 0 ){
|
||||
forward = "/task_lists/" + bike_id + "/edit";
|
||||
}
|
||||
// If a bike is selected, forward to the bike
|
||||
// checklist.
|
||||
bike_id = parseInt($("#bike_id").val());
|
||||
if (bike_id > 0) {
|
||||
forward = "/task_lists/" + bike_id + "/edit";
|
||||
}
|
||||
|
||||
//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
|
||||
// somewhere and drops off the timezone). For the time being, save dates
|
||||
// in locale like Netzke.
|
||||
json_data = { time_entries: [{
|
||||
start_date: $.format.date(start_date, "dd-MM-yyyy hh:mm a"),
|
||||
end_date: $.format.date(end_date, "dd-MM-yyyy hh:mm a"),
|
||||
log_action_id: parseInt($('input[name=action_id]:checked').val()),
|
||||
bike_id: bike_id,
|
||||
description: $("#description_id").val(),
|
||||
}]};
|
||||
//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
|
||||
// somewhere and drops off the timezone). For the time being, save dates
|
||||
// in locale like Netzke.
|
||||
json_data = {
|
||||
time_entries: [{
|
||||
start_date: $.format.date(start_date, "dd-MM-yyyy hh:mm a"),
|
||||
end_date: $.format.date(end_date, "dd-MM-yyyy hh:mm a"),
|
||||
log_action_id: parseInt($('input[name=action_id]:checked').val()),
|
||||
bike_id: bike_id,
|
||||
description: $("#description_id").val(),
|
||||
}]
|
||||
};
|
||||
|
||||
$.ajax({
|
||||
url: $("#add_time_entry_submit").data("url"),
|
||||
type: "POST",
|
||||
data: JSON.stringify(json_data),
|
||||
contentType: 'application/json',
|
||||
dataType: "json",
|
||||
success: function (data, status, xhr) {
|
||||
window.location = forward;
|
||||
},
|
||||
error: function (data, status) {
|
||||
displayFormErrors(data.responseJSON);
|
||||
}
|
||||
});
|
||||
|
||||
$.ajax({
|
||||
url: $("#add_time_entry_submit").data("url"),
|
||||
type: "POST",
|
||||
data: JSON.stringify(json_data),
|
||||
contentType: 'application/json',
|
||||
dataType: "json",
|
||||
success: function(data, status, xhr){
|
||||
window.location = forward;
|
||||
},
|
||||
error: function(data, status ){
|
||||
displayFormErrors(data.responseJSON);
|
||||
}
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
$(".work_entry-delete-btn").click(function(){
|
||||
row = $(this).closest("tr");
|
||||
entry_id = row.data("id");
|
||||
start_date = row.data("start_date");
|
||||
duration = row.data("duration");
|
||||
description = row.data("description");
|
||||
$("#work_entry_start_date").html(start_date);
|
||||
$("#work_entry_duration").html(duration);
|
||||
$("#work_entry_description").html(description);
|
||||
$("#confirmation_delete").data("entry_id", entry_id);
|
||||
});
|
||||
|
||||
$("#confirmation_delete").click(function(){
|
||||
entry_id = $(this).data("entry_id");
|
||||
url = $("#confirmation_delete").data("url") + entry_id;
|
||||
$.ajax({
|
||||
url: url,
|
||||
type: "delete",
|
||||
contentType: 'application/json',
|
||||
success: function(data, status, xhr){
|
||||
location.reload();
|
||||
},
|
||||
error: function(data, status ){
|
||||
displayFormErrors(data.responseJSON);
|
||||
}
|
||||
$(".work_entry-delete-btn").click(function () {
|
||||
row = $(this).closest("tr");
|
||||
entry_id = row.data("id");
|
||||
start_date = row.data("start_date");
|
||||
duration = row.data("duration");
|
||||
description = row.data("description");
|
||||
$("#work_entry_start_date").html(start_date);
|
||||
$("#work_entry_duration").html(duration);
|
||||
$("#work_entry_description").html(description);
|
||||
$("#confirmation_delete").data("entry_id", entry_id);
|
||||
});
|
||||
|
||||
$("#confirmation_delete").click(function () {
|
||||
entry_id = $(this).data("entry_id");
|
||||
url = $("#confirmation_delete").data("url") + entry_id;
|
||||
$.ajax({
|
||||
url: url,
|
||||
type: "delete",
|
||||
contentType: 'application/json',
|
||||
success: function (data, status, xhr) {
|
||||
location.reload();
|
||||
},
|
||||
error: function (data, status) {
|
||||
displayFormErrors(data.responseJSON);
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
@ -1,4 +1,3 @@
|
||||
@import "bootstrap";
|
||||
@import "bootstrap-datetimepicker";
|
||||
@import "bootstrap-timepicker";
|
||||
@import "frontend";
|
||||
|
||||
146
app/assets/stylesheets/bootstrap-timepicker.css
vendored
146
app/assets/stylesheets/bootstrap-timepicker.css
vendored
@ -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%;
|
||||
}
|
||||
}
|
||||
@ -11,9 +11,45 @@ fieldset, .fieldset {
|
||||
margin-bottom: $line-height-computed;
|
||||
}
|
||||
|
||||
.bootstrap-timepicker {
|
||||
.timepickers {
|
||||
.form-group {
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -1,27 +1,33 @@
|
||||
= top_menu link_to_dashboard
|
||||
|
||||
%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
|
||||
.col-xs-12.col-sm-6.col-lg-4
|
||||
%fieldset
|
||||
.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
|
||||
|
||||
.form-group.bootstrap-timepicker.form-inline
|
||||
.form-group.timepickers.form-inline
|
||||
.form-group
|
||||
%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
|
||||
.help-block
|
||||
|
||||
.form-group.hidden-xs
|
||||
.form-group.dash.hidden-xs
|
||||
—
|
||||
|
||||
.form-group
|
||||
%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
|
||||
.help-block
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user