mirror of
https://github.com/grocy/grocy.git
synced 2025-04-29 01:32:38 +00:00
Modularize more components
This commit is contained in:
parent
642f95a3f8
commit
13566bc6fd
91
public/viewjs/components/datepicker.js
Normal file
91
public/viewjs/components/datepicker.js
Normal file
@ -0,0 +1,91 @@
|
||||
$(function()
|
||||
{
|
||||
$('.datepicker').datepicker(
|
||||
{
|
||||
format: 'yyyy-mm-dd',
|
||||
startDate: '+0d',
|
||||
todayHighlight: true,
|
||||
autoclose: true,
|
||||
calendarWeeks: true,
|
||||
orientation: 'bottom auto',
|
||||
weekStart: 1,
|
||||
showOnFocus: false
|
||||
});
|
||||
$('.datepicker').trigger('change');
|
||||
|
||||
EmptyElementWhenMatches('#datepicker-timeago', 'NaN years ago');
|
||||
});
|
||||
|
||||
$('.datepicker').on('keydown', function(e)
|
||||
{
|
||||
if (e.keyCode === 13) //Enter
|
||||
{
|
||||
$('.datepicker').trigger('change');
|
||||
}
|
||||
});
|
||||
|
||||
$('.datepicker').on('keypress', function(e)
|
||||
{
|
||||
var element = $(e.target);
|
||||
var value = element.val();
|
||||
var dateObj = moment(element.val(), 'YYYY-MM-DD', true);
|
||||
|
||||
$('.datepicker').datepicker('hide');
|
||||
|
||||
//If input is empty and any arrow key is pressed, set date to today
|
||||
if (value.length === 0 && (e.keyCode === 38 || e.keyCode === 40 || e.keyCode === 37 || e.keyCode === 39))
|
||||
{
|
||||
dateObj = moment(new Date(), 'YYYY-MM-DD', true);
|
||||
}
|
||||
|
||||
if (dateObj.isValid())
|
||||
{
|
||||
if (e.keyCode === 38) //Up
|
||||
{
|
||||
element.val(dateObj.add(-1, 'days').format('YYYY-MM-DD'));
|
||||
}
|
||||
else if (e.keyCode === 40) //Down
|
||||
{
|
||||
element.val(dateObj.add(1, 'days').format('YYYY-MM-DD'));
|
||||
}
|
||||
else if (e.keyCode === 37) //Left
|
||||
{
|
||||
element.val(dateObj.add(-1, 'weeks').format('YYYY-MM-DD'));
|
||||
}
|
||||
else if (e.keyCode === 39) //Right
|
||||
{
|
||||
element.val(dateObj.add(1, 'weeks').format('YYYY-MM-DD'));
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
$('.datepicker').on('change', function(e)
|
||||
{
|
||||
var value = $('.datepicker').val();
|
||||
var now = new Date();
|
||||
var centuryStart = Number.parseInt(now.getFullYear().toString().substring(0, 2) + '00');
|
||||
var centuryEnd = Number.parseInt(now.getFullYear().toString().substring(0, 2) + '99');
|
||||
|
||||
if (value === 'x' || value === 'X') {
|
||||
value = '29991231';
|
||||
}
|
||||
|
||||
if (value.length === 4 && !(Number.parseInt(value) > centuryStart && Number.parseInt(value) < centuryEnd))
|
||||
{
|
||||
value = (new Date()).getFullYear().toString() + value;
|
||||
}
|
||||
|
||||
if (value.length === 8 && $.isNumeric(value))
|
||||
{
|
||||
value = value.replace(/(\d{4})(\d{2})(\d{2})/, '$1-$2-$3');
|
||||
$('.datepicker').val(value);
|
||||
}
|
||||
|
||||
$('#datepicker-timeago').text($.timeago($('.datepicker').val()));
|
||||
EmptyElementWhenMatches('#datepicker-timeago', 'NaN years ago');
|
||||
});
|
||||
|
||||
$('#datepicker-button').on('click', function(e)
|
||||
{
|
||||
$('.datepicker').datepicker('show');
|
||||
});
|
10
public/viewjs/components/datetimepicker.js
Normal file
10
public/viewjs/components/datetimepicker.js
Normal file
@ -0,0 +1,10 @@
|
||||
$(function()
|
||||
{
|
||||
$('.datetimepicker').datetimepicker(
|
||||
{
|
||||
format: 'YYYY-MM-DD HH:mm:ss',
|
||||
showTodayButton: true,
|
||||
calendarWeeks: true,
|
||||
maxDate: moment()
|
||||
});
|
||||
});
|
@ -7,7 +7,7 @@
|
||||
Grocy.FetchJson('/api/habits/get-habit-details/' + jsonForm.habit_id,
|
||||
function (habitDetails)
|
||||
{
|
||||
Grocy.FetchJson('/api/habits/track-habit-exeuction/' + jsonForm.habit_id + '?tracked_time=' + $('#tracked_time').val(),
|
||||
Grocy.FetchJson('/api/habits/track-habit-execution/' + jsonForm.habit_id + '?tracked_time=' + $('#tracked_time').val(),
|
||||
function(result)
|
||||
{
|
||||
toastr.success('Tracked execution of habit ' + habitDetails.habit.name + ' on ' + $('#tracked_time').val());
|
||||
@ -46,14 +46,6 @@ $('#habit_id').on('change', function(e)
|
||||
|
||||
$(function()
|
||||
{
|
||||
$('.datetimepicker').datetimepicker(
|
||||
{
|
||||
format: 'YYYY-MM-DD HH:mm:ss',
|
||||
showTodayButton: true,
|
||||
calendarWeeks: true,
|
||||
maxDate: moment()
|
||||
});
|
||||
|
||||
$('#tracked_time').val(moment().format('YYYY-MM-DD HH:mm:ss'));
|
||||
$('#tracked_time').trigger('change');
|
||||
|
||||
@ -90,63 +82,7 @@ $(function()
|
||||
});
|
||||
});
|
||||
|
||||
$('#tracked_time').on('change', function(e)
|
||||
{
|
||||
var value = $('#tracked_time').val();
|
||||
var now = new Date();
|
||||
var centuryStart = Number.parseInt(now.getFullYear().toString().substring(0, 2) + '00');
|
||||
var centuryEnd = Number.parseInt(now.getFullYear().toString().substring(0, 2) + '99');
|
||||
|
||||
if (value === 'x' || value === 'X') {
|
||||
value = '29991231';
|
||||
}
|
||||
|
||||
if (value.length === 4 && !(Number.parseInt(value) > centuryStart && Number.parseInt(value) < centuryEnd))
|
||||
{
|
||||
value = (new Date()).getFullYear().toString() + value;
|
||||
}
|
||||
|
||||
if (value.length === 8 && $.isNumeric(value))
|
||||
{
|
||||
value = value.replace(/(\d{4})(\d{2})(\d{2})/, '$1-$2-$3');
|
||||
$('#tracked_time').val(value);
|
||||
$('#habittracking-form').validator('validate');
|
||||
}
|
||||
});
|
||||
|
||||
$('#tracked_time').on('keypress', function(e)
|
||||
{
|
||||
var element = $(e.target);
|
||||
var value = element.val();
|
||||
var dateObj = moment(element.val(), 'YYYY-MM-DD', true);
|
||||
|
||||
$('.datepicker').datepicker('hide');
|
||||
|
||||
//If input is empty and any arrow key is pressed, set date to today
|
||||
if (value.length === 0 && (e.keyCode === 38 || e.keyCode === 40 || e.keyCode === 37 || e.keyCode === 39))
|
||||
{
|
||||
dateObj = moment(new Date(), 'YYYY-MM-DD', true);
|
||||
}
|
||||
|
||||
if (dateObj.isValid())
|
||||
{
|
||||
if (e.keyCode === 38) //Up
|
||||
{
|
||||
element.val(dateObj.add(-1, 'days').format('YYYY-MM-DD'));
|
||||
}
|
||||
else if (e.keyCode === 40) //Down
|
||||
{
|
||||
element.val(dateObj.add(1, 'days').format('YYYY-MM-DD'));
|
||||
}
|
||||
else if (e.keyCode === 37) //Left
|
||||
{
|
||||
element.val(dateObj.add(-1, 'weeks').format('YYYY-MM-DD'));
|
||||
}
|
||||
else if (e.keyCode === 39) //Right
|
||||
{
|
||||
element.val(dateObj.add(1, 'weeks').format('YYYY-MM-DD'));
|
||||
}
|
||||
}
|
||||
|
||||
$('#habittracking-form').validator('validate');
|
||||
});
|
||||
|
@ -89,19 +89,6 @@ $('#product_id').on('change', function(e)
|
||||
|
||||
$(function()
|
||||
{
|
||||
$('.datepicker').datepicker(
|
||||
{
|
||||
format: 'yyyy-mm-dd',
|
||||
startDate: '+0d',
|
||||
todayHighlight: true,
|
||||
autoclose: true,
|
||||
calendarWeeks: true,
|
||||
orientation: 'bottom auto',
|
||||
weekStart: 1,
|
||||
showOnFocus: false
|
||||
});
|
||||
$('.datepicker').trigger('change');
|
||||
|
||||
$('.combobox').combobox({
|
||||
appendId: '_text_input'
|
||||
});
|
||||
@ -263,11 +250,6 @@ $(function()
|
||||
}
|
||||
});
|
||||
|
||||
$('#best_before_date-datepicker-button').on('click', function(e)
|
||||
{
|
||||
$('.datepicker').datepicker('show');
|
||||
});
|
||||
|
||||
$('#new_amount').on('keypress', function(e)
|
||||
{
|
||||
$('#new_amount').trigger('change');
|
||||
@ -275,63 +257,11 @@ $('#new_amount').on('keypress', function(e)
|
||||
|
||||
$('#best_before_date').on('change', function(e)
|
||||
{
|
||||
var value = $('#best_before_date').val();
|
||||
var now = new Date();
|
||||
var centuryStart = Number.parseInt(now.getFullYear().toString().substring(0, 2) + '00');
|
||||
var centuryEnd = Number.parseInt(now.getFullYear().toString().substring(0, 2) + '99');
|
||||
|
||||
if (value === 'x' || value === 'X')
|
||||
{
|
||||
value = '29991231';
|
||||
}
|
||||
|
||||
if (value.length === 4 && !(Number.parseInt(value) > centuryStart && Number.parseInt(value) < centuryEnd))
|
||||
{
|
||||
value = (new Date()).getFullYear().toString() + value;
|
||||
}
|
||||
|
||||
if (value.length === 8 && $.isNumeric(value))
|
||||
{
|
||||
value = value.replace(/(\d{4})(\d{2})(\d{2})/, '$1-$2-$3');
|
||||
$('#best_before_date').val(value);
|
||||
$('#inventory-form').validator('validate');
|
||||
}
|
||||
$('#inventory-form').validator('validate');
|
||||
});
|
||||
|
||||
$('#best_before_date').on('keypress', function(e)
|
||||
{
|
||||
var element = $(e.target);
|
||||
var value = element.val();
|
||||
var dateObj = moment(element.val(), 'YYYY-MM-DD', true);
|
||||
|
||||
$('.datepicker').datepicker('hide');
|
||||
|
||||
//If input is empty and any arrow key is pressed, set date to today
|
||||
if (value.length === 0 && (e.keyCode === 38 || e.keyCode === 40 || e.keyCode === 37 || e.keyCode === 39))
|
||||
{
|
||||
dateObj = moment(new Date(), 'YYYY-MM-DD', true);
|
||||
}
|
||||
|
||||
if (dateObj.isValid())
|
||||
{
|
||||
if (e.keyCode === 38) //Up
|
||||
{
|
||||
element.val(dateObj.add(-1, 'days').format('YYYY-MM-DD'));
|
||||
}
|
||||
else if (e.keyCode === 40) //Down
|
||||
{
|
||||
element.val(dateObj.add(1, 'days').format('YYYY-MM-DD'));
|
||||
}
|
||||
else if (e.keyCode === 37) //Left
|
||||
{
|
||||
element.val(dateObj.add(-1, 'weeks').format('YYYY-MM-DD'));
|
||||
}
|
||||
else if (e.keyCode === 39) //Right
|
||||
{
|
||||
element.val(dateObj.add(1, 'weeks').format('YYYY-MM-DD'));
|
||||
}
|
||||
}
|
||||
|
||||
$('#inventory-form').validator('validate');
|
||||
});
|
||||
|
||||
|
@ -98,19 +98,6 @@ $('#product_id').on('change', function(e)
|
||||
|
||||
$(function()
|
||||
{
|
||||
$('.datepicker').datepicker(
|
||||
{
|
||||
format: 'yyyy-mm-dd',
|
||||
startDate: '+0d',
|
||||
todayHighlight: true,
|
||||
autoclose: true,
|
||||
calendarWeeks: true,
|
||||
orientation: 'bottom auto',
|
||||
weekStart: 1,
|
||||
showOnFocus: false
|
||||
});
|
||||
$('.datepicker').trigger('change');
|
||||
|
||||
$('.combobox').combobox({
|
||||
appendId: '_text_input'
|
||||
});
|
||||
@ -271,83 +258,14 @@ $(function()
|
||||
$('#flow-info-addbarcodetoselection').removeClass('hide');
|
||||
$('#barcode-lookup-disabled-hint').removeClass('hide');
|
||||
}
|
||||
|
||||
EmptyElementWhenMatches('#best-before-timeago', 'NaN years ago');
|
||||
});
|
||||
|
||||
$('#best_before_date-datepicker-button').on('click', function(e)
|
||||
{
|
||||
$('.datepicker').datepicker('show');
|
||||
});
|
||||
|
||||
$('#best_before_date').on('change', function(e)
|
||||
{
|
||||
var value = $('#best_before_date').val();
|
||||
var now = new Date();
|
||||
var centuryStart = Number.parseInt(now.getFullYear().toString().substring(0, 2) + '00');
|
||||
var centuryEnd = Number.parseInt(now.getFullYear().toString().substring(0, 2) + '99');
|
||||
|
||||
if (value === 'x' || value === 'X') {
|
||||
value = '29991231';
|
||||
}
|
||||
|
||||
if (value.length === 4 && !(Number.parseInt(value) > centuryStart && Number.parseInt(value) < centuryEnd))
|
||||
{
|
||||
value = (new Date()).getFullYear().toString() + value;
|
||||
}
|
||||
|
||||
if (value.length === 8 && $.isNumeric(value))
|
||||
{
|
||||
value = value.replace(/(\d{4})(\d{2})(\d{2})/, '$1-$2-$3');
|
||||
$('#best_before_date').val(value);
|
||||
$('#purchase-form').validator('validate');
|
||||
}
|
||||
|
||||
$('#best-before-timeago').text($.timeago($('#best_before_date').val()));
|
||||
EmptyElementWhenMatches('#best-before-timeago', 'NaN years ago');
|
||||
$('#purchase-form').validator('validate');
|
||||
});
|
||||
|
||||
$('#best_before_date').on('keydown', function(e)
|
||||
{
|
||||
if (e.keyCode === 13) //Enter
|
||||
{
|
||||
$('#best_before_date').trigger('change');
|
||||
}
|
||||
});
|
||||
|
||||
$('#best_before_date').on('keypress', function(e)
|
||||
{
|
||||
var element = $(e.target);
|
||||
var value = element.val();
|
||||
var dateObj = moment(element.val(), 'YYYY-MM-DD', true);
|
||||
|
||||
$('.datepicker').datepicker('hide');
|
||||
|
||||
//If input is empty and any arrow key is pressed, set date to today
|
||||
if (value.length === 0 && (e.keyCode === 38 || e.keyCode === 40 || e.keyCode === 37 || e.keyCode === 39))
|
||||
{
|
||||
dateObj = moment(new Date(), 'YYYY-MM-DD', true);
|
||||
}
|
||||
|
||||
if (dateObj.isValid())
|
||||
{
|
||||
if (e.keyCode === 38) //Up
|
||||
{
|
||||
element.val(dateObj.add(-1, 'days').format('YYYY-MM-DD'));
|
||||
}
|
||||
else if (e.keyCode === 40) //Down
|
||||
{
|
||||
element.val(dateObj.add(1, 'days').format('YYYY-MM-DD'));
|
||||
}
|
||||
else if (e.keyCode === 37) //Left
|
||||
{
|
||||
element.val(dateObj.add(-1, 'weeks').format('YYYY-MM-DD'));
|
||||
}
|
||||
else if (e.keyCode === 39) //Right
|
||||
{
|
||||
element.val(dateObj.add(1, 'weeks').format('YYYY-MM-DD'));
|
||||
}
|
||||
}
|
||||
|
||||
$('#purchase-form').validator('validate');
|
||||
});
|
||||
|
@ -1,8 +1,7 @@
|
||||
@extends('layout.basecomponent')
|
||||
@push('componentScripts')
|
||||
<script src="/viewjs/components/batterycard.js"></script>
|
||||
@endpush
|
||||
|
||||
@section('componentJsName', 'batterycard')
|
||||
|
||||
@section('componentContent')
|
||||
<div class="main well">
|
||||
|
||||
<h3>Battery overview <strong><span id="batterycard-battery-name"></span></strong></h3>
|
||||
@ -13,4 +12,3 @@
|
||||
</p>
|
||||
|
||||
</div>
|
||||
@stop
|
||||
|
14
views/components/datepicker.blade.php
Normal file
14
views/components/datepicker.blade.php
Normal file
@ -0,0 +1,14 @@
|
||||
@push('componentScripts')
|
||||
<script src="/viewjs/components/datepicker.js"></script>
|
||||
@endpush
|
||||
|
||||
<div class="form-group">
|
||||
<label for="{{ $id }}">{!! $label !!} <span class="small text-muted"><time id="datepicker-timeago" class="timeago timeago-contextual"></time></span></label>
|
||||
<div class="input-group date">
|
||||
<input type="text" data-isodate="isodate" class="form-control datepicker" id="{{ $id }}" name="{{ $id }}" required autocomplete="off">
|
||||
<div id="datepicker-button" class="input-group-addon">
|
||||
<i class="fa fa-calendar"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="help-block with-errors"></div>
|
||||
</div>
|
14
views/components/datetimepicker.blade.php
Normal file
14
views/components/datetimepicker.blade.php
Normal file
@ -0,0 +1,14 @@
|
||||
@push('componentScripts')
|
||||
<script src="/viewjs/components/datetimepicker.js"></script>
|
||||
@endpush
|
||||
|
||||
<div class="form-group">
|
||||
<label for="{{ $id }}">{{ $label }}</label>
|
||||
<div class="input-group date datetimepicker">
|
||||
<input type="text" class="form-control" id="{{ $id }}" name="{{ $id }}" required>
|
||||
<span class="input-group-addon">
|
||||
<span class="fa fa-calendar"></span>
|
||||
</span>
|
||||
</div>
|
||||
<div class="help-block with-errors"></div>
|
||||
</div>
|
@ -1,8 +1,7 @@
|
||||
@extends('layout.basecomponent')
|
||||
@push('componentScripts')
|
||||
<script src="/viewjs/components/habitcard.js"></script>
|
||||
@endpush
|
||||
|
||||
@section('componentJsName', 'habitcard')
|
||||
|
||||
@section('componentContent')
|
||||
<div class="main well">
|
||||
|
||||
<h3>Habit overview <strong><span id="habitcard-habit-name"></span></strong></h3>
|
||||
@ -13,4 +12,3 @@
|
||||
</p>
|
||||
|
||||
</div>
|
||||
@stop
|
||||
|
@ -1,8 +1,7 @@
|
||||
@extends('layout.basecomponent')
|
||||
@push('componentScripts')
|
||||
<script src="/viewjs/components/productcard.js"></script>
|
||||
@endpush
|
||||
|
||||
@section('componentJsName', 'productcard')
|
||||
|
||||
@section('componentContent')
|
||||
<div class="main well">
|
||||
|
||||
<h3>Product overview <strong><span id="productcard-product-name"></span></strong></h3>
|
||||
@ -15,4 +14,3 @@
|
||||
</p>
|
||||
|
||||
</div>
|
||||
@stop
|
||||
|
@ -22,16 +22,10 @@
|
||||
<div id="product-error" class="help-block with-errors"></div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="tracked_time">Tracked time</label>
|
||||
<div class="input-group date datetimepicker">
|
||||
<input type="text" class="form-control" id="tracked_time" name="tracked_time" required >
|
||||
<span class="input-group-addon">
|
||||
<span class="fa fa-calendar"></span>
|
||||
</span>
|
||||
</div>
|
||||
<div class="help-block with-errors"></div>
|
||||
</div>
|
||||
@include('components.datetimepicker', array(
|
||||
'id' => 'tracked_time',
|
||||
'label' => 'Tracked time'
|
||||
))
|
||||
|
||||
<button id="save-habittracking-button" type="submit" class="btn btn-default">OK</button>
|
||||
|
||||
|
@ -30,16 +30,10 @@
|
||||
<div id="inventory-change-info" class="help-block text-muted"></div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="best_before_date">Best before <span class="small text-muted">This will apply to added products</span></label>
|
||||
<div class="input-group date">
|
||||
<input type="text" data-isodate="isodate" class="form-control datepicker" id="best_before_date" name="best_before_date" autocomplete="off">
|
||||
<div id="best_before_date-datepicker-button" class="input-group-addon">
|
||||
<i class="fa fa-calendar"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="help-block with-errors"></div>
|
||||
</div>
|
||||
@include('components.datepicker', array(
|
||||
'id' => 'best_before_date',
|
||||
'label' => 'Best before <span class="small text-muted">This will apply to added products</span>'
|
||||
))
|
||||
|
||||
<button id="save-inventory-button" type="submit" class="btn btn-default">OK</button>
|
||||
|
||||
|
@ -1,6 +0,0 @@
|
||||
@section('componentContent')
|
||||
@show
|
||||
|
||||
@push('componentScripts')
|
||||
<script src="/viewjs/components/@yield('componentJsName').js"></script>
|
||||
@endpush
|
@ -206,8 +206,7 @@
|
||||
|
||||
</div>
|
||||
|
||||
@section('content')
|
||||
@show
|
||||
@yield('content')
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
@ -23,16 +23,10 @@
|
||||
<div id="flow-info-addbarcodetoselection" class="text-muted small hide"><strong><span id="addbarcodetoselection"></span></strong> will be added to the list of barcodes for the selected product on submit.</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="best_before_date">Best before <span class="small text-muted"><time id="best-before-timeago" class="timeago timeago-contextual"></time></span></label>
|
||||
<div class="input-group date">
|
||||
<input type="text" data-isodate="isodate" class="form-control datepicker" id="best_before_date" name="best_before_date" required autocomplete="off">
|
||||
<div id="best_before_date-datepicker-button" class="input-group-addon">
|
||||
<i class="fa fa-calendar"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="help-block with-errors"></div>
|
||||
</div>
|
||||
@include('components.datepicker', array(
|
||||
'id' => 'best_before_date',
|
||||
'label' => 'Best before'
|
||||
))
|
||||
|
||||
<div class="form-group">
|
||||
<label for="amount">Amount <span id="amount_qu_unit" class="small text-muted"></span></label>
|
||||
|
Loading…
x
Reference in New Issue
Block a user