current community

your communities

more stack exchange communities

Stack Exchange
tour help
Take the 2-minute tour ×
Code Review Stack Exchange is a question and answer site for peer programmer code reviews. It's 100% free, no registration required.
up vote 2 down vote favorite

I'm developing on a web application where I have a start and a finish date and time and have to set the duration between it.

There are inputs for dates and times.

Then, I have this function which calculates the duration between the two of them, and they are working properly. The duration, though, needs to be dynamic. So, i made this piece of code, creating a "on" on each of then, so that when it changes, they mount an object with the four datetime values and then call it to the getDuration function.

$(document.body).on('change','.data-inicio > input',function () {
    var tr   = $(this).parent().parent();
    var time = {
        dstart:  dateDbToView($(this).val()),
        hstart:  tr.find('.hora-inicio').find('input').val(),
        dfinish: dateDbToView(tr.find('.data-final').find('input').val()),
        hfinish: tr.find('.hora-final').find('input').val()
    };
    var drc = getDuration(time.dstart, time.hstart, time.dfinish, time.hfinish);
    tr.find('.duracao').find('input').val(drc);
});

$(document.body).on('change','.hora-inicio > input',function () {
    var tr   = $(this).parent().parent();
    var time = {
        dstart:  dateDbToView(tr.find('.data-inicio').find('input').val()),
        hstart:  $(this).val(),
        dfinish: dateDbToView(tr.find('.data-final').find('input').val()),
        hfinish: tr.find('.hora-final').find('input').val()
    };
    var drc = getDuration(time.dstart, time.hstart, time.dfinish, time.hfinish);
    tr.find('.duracao').find('input').val(drc);
});

$(document.body).on('change','.data-final > input',function () {
    var tr   = $(this).parent().parent();
    var time = {
        dstart:  dateDbToView(tr.find('.data-inicio').find('input').val()),
        hstart:  tr.find('.hora-inicio').find('input').val(),
        dfinish: dateDbToView($(this).val()),
        hfinish: tr.find('.hora-final').find('input').val()
    };
    var drc = getDuration(time.dstart, time.hstart, time.dfinish, time.hfinish);
    tr.find('.duracao').find('input').val(drc);
});

$(document.body).on('change','.hora-final > input',function () {
    var tr   = $(this).parent().parent();
    var time = {
        dstart:  dateDbToView(tr.find('.data-inicio').find('input').val()),
        hstart:  tr.find('.hora-inicio').find('input').val(),
        dfinish: dateDbToView(tr.find('.data-final').find('input').val()),
        hfinish: $(this).val()
    };
    var drc = getDuration(time.dstart, time.hstart, time.dfinish, time.hfinish);
    tr.find('.duracao').find('input').val(drc);
});

My question is: this looks pretty confusing for anyone but me, which can be an bad point when it comes about maintenance. There must be a better way of making this work, so, I'm asking for suggestions.

share|improve this question

migrated from stackoverflow.com Feb 20 at 22:09

This question came from our site for professional and enthusiast programmers.

1 Answer 1

up vote 1 down vote

All of the change handlers are basically the same. You could roll them all into one by using smarter jQuery selectors.

Also, the time object is pointless. You can just use four separate variables. I've also moved the dateDbToView() calls to declutter the tr.find(…) lines so that the parallelism is more obvious.

$('.data-inicio, .hora-inicio, .data-final, .hora-final').on('change', 'input', function() {
    var tr = $(this).parent().parent();
    var dStart = tr.find('.data-inicio > input').val();
    var hStart = tr.find('.hora-inicio > input').val();
    var dFinish = tr.find('.data-final > input').val();
    var hFinish = tr.find('.hora-final > input').val();

    tr.find('.duracao > input').val(duration(
        dateDbToView(dStart),  hStart,
        dateDbToView(dFinish), hFinish
    ));
});

I suggest renaming getDuration(…) to duration(…), because it is performing a calculation, rather than retrieving information that already exists. (For the same reason, we say Math.sin(…) rather than Math.getSin(…)).

share|improve this answer
    
Wow, thanks! I really didn't realized i could pass the classes all together on one selector! For the duration function name, i just renamed it, makes a lot more of sense! –  guiguetz Feb 21 at 1:36

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.