digitaleagenturnc/timemanagement/templates/timemanagement/realtime_dropdown.html

<!-- TASK: Das Fenster soll nur einmal weggeklickt werden und dann nie wieder bis zum nächsten Login, wie bei der Erinnerung bzgl. der Vertretung -->


{% load counter_tag %}
<div class="mt-2 ml-2 text-center">

<div id="activeDay" style="display: none;">
	<span id="worktime">
		<h3>Heutiger Arbeitstag</h3>
		<h2 id="realtimeclock">00:00</h2>
		<hr>
	</span>
	<span id="breaktimeclock" style="display: none">
		<h3>Aktuelle Pause</h3>
		<h2 id="realtimeclock_break">00:00</h2>
		<hr>
	</span>	
	<span>
		<button onclick="javascript:endBreak()"  type="button" id="end_break" class="btn btn-success" style="display: none;"><i class="fas fa-play"></i></button>
		<button onclick="javascript:startBreak()"  type="button" id="start_break" class="btn btn-primary"><i class="fas fa-pause"></i></button>
		<button onclick="javascript:endDay()"  type="button" id="end_workday" class="btn btn-secondary">Arbeitstag beenden</button>
	</span>
	<hr>
</div>
<div>
	Arbeitsbeginn: <span id="starttime">00:00:00</span><br />	
	Arbeitsende: <span id="endtime">00:00:00</span><br />
	Pausenzeit: <span id="breaksum">00:00:00</span>	
</div>
<div id="start_workday">
<hr>
<button onclick="javascript:startDay()"  type="button" id="" class="btn btn-success">Arbeitstag starten</button>
</div>
<hr>
{% loadaccounttime user as actualaccounttime %}
Gleitzeitkonto: 
{% if actualaccounttime.1 == 0 %}
	<b><span style="color: green">+{{actualaccounttime.0}}&nbsp;Stunden</span></b>
{% else %}
	<b><span style="color: red">-{{actualaccounttime.0}}&nbsp;Stunden</span></b>
{% endif %}
</div>



<script type="text/javascript">

	

	window.setInterval(function(){
		if(starttime_view != false && isbreak == false){
			realTimeClock();
		}	  
		else if(isbreak == true){
			realTimeBreakClock();
		}
	}, 1000);

	function convertMS(ms) {
	    var d, h, m, s;
	    s = Math.floor(ms / 1000);
	    m = Math.floor(s / 60);
	    s = s % 60;
	    h = Math.floor(m / 60);
	    m = m % 60;
	    d = Math.floor(h / 24);
	    h = h % 24;
	    h += d * 24;

	    if(s < 10){
	    	s = "0" + s;
	    }
	    if(m < 10){
	    	m = "0" + m;
	    }
	    if(h < 10){
	    	h = "0" + h;
	    }

	    return h + ':' + m + ':' + s;
	}

	{% getactualworkingday request.user as starttime %}
	//No day info
	{% if starttime == 0 %}
		var starttime_view = false;
		var startbreaktime_view = false;
		var isbreak = false;
		var breaktime = 0;

		{% getformattetstarttime_last_start request.user as formattetstarttime_last_start %}
		{% getformattetstarttime_last_end request.user as formattetstarttime_last_end %}
		$("#starttime").html("{{formattetstarttime_last_start}}");
		$("#endtime").html("{{formattetstarttime_last_end}}");			
		$("#breaksum").html("00:00:00");	

		is_closed = localStorage.getItem("is_closed");
		if (is_closed == null) {
			$("#timemanagement_clock").toggle();	
		}
   		

	//day info
	{% else %}	

		{% getdailybreaktime request.user as actbreaktime %}
		$("#breaksum").html(convertMS({{actbreaktime}}));
		var breaktime = {{actbreaktime}};

		{% getformatedstarttime request.user as formattetstarttime %}
		{% getactualbreak request.user as breakcounter %}

		//BREAK CHECKEN!
		{% if breakcounter %}

			{% getactualbreakcounter request.user as breaktimer %}
			var isbreak = true;			
			var startbreaktime_view = {{breaktimer}};			
			var starttime_view = Date.parse("{{starttime}}");
			$("#start_workday").hide();
			$("#activeDay").show();
			$("#worktime").hide();
			$("#breaktimeclock").show();
			$("#end_break").show();
			$("#start_break").hide();
			$("#starttime").html("{{formattetstarttime}}");

		{% else %}				
			var isbreak = false;					
			var startbreaktime_view = 0;
			var starttime_view = parseDate("{{starttime}}");			
			$("#start_workday").hide();
			$("#activeDay").show();
			$("#starttime").html("{{formattetstarttime}}");
			
		{% endif %}		
		
	{% endif %}

	function parseDate(input) {
	  input_all = input.split(" ");
	  day = input_all[0].split(".")[0]
	  var today = new Date();
	  newdate = new Date(today.getFullYear(), today.getMonth(), today.getDate(), parseInt(input_all[3].split(":")[0]), parseInt(input_all[3].split(":")[1]));

	  return newdate;
	}

	start = false;

	function realTimeClock()
	{
		if(start != false){			
			startDate = Date.parse(start);			
			starttime_view = startDate;
			start = false;
			realTimeClock();			
		}
		else{
			now = new Date();
			viewtime = now - starttime_view - breaktime;
			$("#realtimeclock").html(convertMS(viewtime));
		}
	}

	function realTimeBreakClock(){
		breaktime = startbreaktime_view + 1000;
		startbreaktime_view = startbreaktime_view + 1000;		
		$("#realtimeclock_break").html(convertMS(startbreaktime_view));
	}

	function startBreak(){

		isbreak = true;
		$("#timemanagement_clock").click(function(e){
		   e.stopPropagation();
		})
		$("#breaktimeclock").show();
		$("#realtimeclock").hide();
		$("#end_break").show();
		$("#start_break").hide();
		$("#worktime").hide();
		$.ajax(
        {
            type: "GET",
            url: "{% url 'tm-ajax' %}",
            data:{
              action : "start_break",              
            },
            success: function( data ) 
            {   
            	startbreaktime_view = -1000;
            	realTimeBreakClock();
            }
         });
	}

	function endBreak()
	{
		isbreak = false;
		$("#timemanagement_clock").click(function(e){
		   e.stopPropagation();
		})
		$("#breaktimeclock").hide();
		$("#realtimeclock").show();
		$("#end_break").hide();
		$("#start_break").show();
		$("#worktime").show();
		$.ajax(
        {
            type: "GET",
            url: "{% url 'tm-ajax' %}",
            data:{
              action : "end_break",              
            },
            success: function( data ) 
            {
            	console.log("break end add " + data["actualbreaktime"]);
            	breaktime = data["actualbreaktime"];
            	$("#breaksum").html(convertMS(data["actualbreaktime"]));
            }
         });
	}	
	
	function startDay()
	{
		$("#timemanagement_clock").click(function(e){
		   e.stopPropagation();
		})

		$("#start_workday").hide();
		$("#activeDay").show();
		$("#breaktimeclock").hide();
		$.ajax(
        {
            type: "GET",
            url: "{% url 'tm-ajax' %}",
            data:{
              action : "start_day",              
            },
            success: function( data ) 
            {     
            	if(data["success"]){
            		$("#starttime").html(data["wd_starttime"])
            		$("#endtime").html("00:00:00");
            		$("#breaksum").html("00:00:00");
            	}
            	start = data["wd_starttime_complete"];
            	realTimeClock();
            	//location.href = location.href;
            }
         });

	}

	function endDay()
	{
		$("#timemanagement_clock").click(function(e){
		   e.stopPropagation();
		})

		$.ajax(
        {
            type: "GET",
            url: "{% url 'tm-ajax' %}",
            data:{
              action : "end_day",              
            },
            success: function( data ) 
            {     
            	if(data["success"]){
            		$("#breaktimeclock").hide();
					$("#realtimeclock").show();
					$("#end_break").hide();
					$("#start_break").show();
					$("#worktime").show();

            		$("#endtime").html(data["wd_endtime"]);
            		$("#activeDay").hide();
            		$("#start_workday").show();
            		$("#breaksum").html(convertMS(data["actualbreaktime"]));
            		starttime_view = false;
            		isbreak = false;
            		start = false;
            		breaktime = 0;

            	}
            	//start = data["wd_starttime_complete"]
            	realTimeClock();
            }
         });
	}
</script>