Project

General

Profile

Forums » Development »

time tracking customization: added hours and minutes

Added by [ Desperados ] over 9 years ago

Hi to all
I need "start" and "end hours and minutes" in time tracking, so I added 2 custom fields. But I need some other feature:
- when create a new time_entry, I want "start time" filled
- I want a button to fill "end time" with current time
- I want a button to fill "hours" with difference between "start time" and "end time"

So, I edited /app/views/timelog/new.html.erb and add these lines at the end of the file:

<button type="button" onclick="javascript:document.getElementById('time_entry_custom_field_values_3').value=(new Date()).getHours()+':'+(new Date()).getMinutes()">Fill start time</button>
<button type="button" onclick="javascript:document.getElementById('time_entry_custom_field_values_4').value=(new Date()).getHours()+':'+(new Date()).getMinutes()">Fill end time</button>
<script>

        $(document).ready(function(){
                document.getElementById('time_entry_custom_field_values_3').value=(new Date()).getHours()+':'+(new Date()).getMinutes();
        });

</script>

I'll do other changes in future
Hope this can be useful to someone


Replies (3)

RE: time tracking customization: added hours and minutes - Added by [ Desperados ] over 9 years ago

I think this is better:

<button type="button" onclick="javascript:document.getElementById('time_entry_custom_field_values_3').value=tempo()">Fill start time</button>
<button type="button" onclick="javascript:document.getElementById('time_entry_custom_field_values_4').value=tempo()">Fill end time</button>
<script>

        $(document).ready(function(){
                document.getElementById('time_entry_custom_field_values_3').value=tempo();
        });

        function tempo() {
            h = (new Date()).getHours();
            m = (new Date()).getMinutes();
            if (h < 10) {
                h = "0" + h;
            }
            if (m < 10) {
                m = "0" + m;
            }
            return h + ":" + m;
        }

</script>

RE: time tracking customization: added hours and minutes - Added by [ Desperados ] over 9 years ago

much better, added /public/javascript/main.js and linked in /app/views/layouts/base.html.erb:

<script src="/javascripts/main.js" type="text/javascript"></script>

this is main.js:

//Calcola l'ora attuale
function getTime() {

    h = (new Date()).getHours();
    m = (new Date()).getMinutes();
    if (h < 10) {
        h = "0" + h;
    }
    if (m < 10) {
        m = "0" + m;
    }
    return h + ":" + m;

}

// calc time
function countTime() {

    var timeStart     = $("#time_entry_custom_field_values_3").val();
    var timeEnd     = $("#time_entry_custom_field_values_4").val();

    //split time
    var timeStartArr = timeStart.split(":");
    var timeEndArr = timeEnd.split(":");

    //tranform into minutes
    var nStartMin = (Number(timeStartArr[0]) * 60) + Number(timeStartArr[1]);
    var nEndMin = (Number(timeEndArr[0]) * 60) + Number(timeEndArr[1]);

    //calc diff
    var nDiff = 0;
    if (nStartMin > nEndMin) {
        nDiff = nStartMin - nEndMin;
    } else {
        nDiff = nEndMin - nStartMin;
    }

    return Math.ceil(nDiff/60*100) / 100;

}

// when load page
$(document).ready(function(){

    //now()
    $("#time_entry_custom_field_values_3").val(getTime());

    //update hour
    $("#setTime").click(function() {
        $("#time_entry_hours").val(countTime());
    })

    //update start time
    $("#setStartTime").click(function() {
        $("#time_entry_custom_field_values_3").val(getTime());
    })    

    //update end time
    $("#setEndTime").click(function() {
        $("#time_entry_custom_field_values_4").val(getTime());
        $("#setTime").click(); //Simula il click
    });    

});

in /app/views/issues/_edit.html.erb, /app/views/timelog/new.html.erb and /app/views/timelog/edit.html.erb add:

<button type="button" id="setTime">Calc hour</button>
<button type="button" id="setStartTime">Insert start time</button>
<button type="button" id="setEndTime">Insert end time</button>

and fix css:

input#time_entry_custom_field_values_3 { width: 100px }
input#time_entry_custom_field_values_4 { width: 100px }
input#time_entry_custom_field_values_5 { width: 100px }
button {
  vertical-align: middle;
  margin-top: 1px;
  margin-bottom: 1px;
}
    (1-3/3)