From b249bb0dba2771bcaa0cd8a3997c5f9c56b3c3c0 Mon Sep 17 00:00:00 2001
From: Holger Trampe <htrampe@gmail.com>
Date: Sun, 5 Sep 2021 16:22:48 +0200
Subject: [PATCH] einiges

---
 .../realtime_dropdown_nc_iframe.html          | 336 ++++++++++++++++++
 timemanagement/urls.py                        |   4 +-
 timemanagement/views.py                       |   3 +
 users/static/users/js/nc_js.js                |  38 ++
 4 files changed, 379 insertions(+), 2 deletions(-)
 create mode 100644 timemanagement/templates/timemanagement/realtime_dropdown_nc_iframe.html
 create mode 100644 users/static/users/js/nc_js.js

diff --git a/timemanagement/templates/timemanagement/realtime_dropdown_nc_iframe.html b/timemanagement/templates/timemanagement/realtime_dropdown_nc_iframe.html
new file mode 100644
index 0000000..50d0150
--- /dev/null
+++ b/timemanagement/templates/timemanagement/realtime_dropdown_nc_iframe.html
@@ -0,0 +1,336 @@
+<!-- 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 %}
+{% load static %}
+<link rel="canonical" href="https://app.digitale-agentur.com">
+  <script src="{%static 'users/js/jquery.js' %}" type="text/javascript"></script>
+
+  <link href="{%static 'users/vendor/fontawesome-free/css/all.min.css' %}" rel="stylesheet" type="text/css">
+
+   <link href="{%static 'users/css/google_font.css' %}" rel="stylesheet" type="text/css">
+
+
+  <link href="{%static 'users/css/google_swap.css' %}" rel="stylesheet" type="text/css">
+  <script src="{%static 'users/js/jquery_ui_min.js' %}" type="text/javascript"></script>
+  <link href="{% static 'users/css/cropper.min.css' %}" type="text/css" rel="stylesheet">
+
+
+  <!-- DATATABLES -->
+  <link href="{% static 'users/css/jquery_datatables.css' %}" type="text/css" rel="stylesheet">
+  <link href="{% static 'users/css/datatables_bs4.css' %}" type="text/css" rel="stylesheet">
+
+  <!-- Custom styles for this template-->
+  <link href="{% static 'users/css/sb-admin-2.css' %}" type="text/css" rel="stylesheet">
+
+  <link href="{% static 'users/css/theme.css' %}" type="text/css" rel="stylesheet">
+
+
+  <script src="{%static 'users/js/bs4_summernote.js' %}" type="text/javascript"></script>
+  <link href="{% static 'users/css/bs4_summernote.css' %}" type="text/css" rel="stylesheet">
+  <script type="text/javascript"  src="{% static 'summernote/lang/summernote-de-DE.min.js' %}"></script>
+
+  <!-- Bootstrap core JavaScript-->
+  <script type="text/javascript"  src="{%static 'users/vendor/bootstrap/js/bootstrap.bundle.min.js' %}"></script>
+  <!-- Core plugin JavaScript-->
+  <script type="text/javascript"  src="{%static 'users/vendor/jquery-easing/jquery.easing.min.js' %}"></script>
+  <!-- DATABLES JS -->
+  <script type="text/javascript"  src="{%static 'users/js/jquery_dataTables.min.js' %}"></script>
+  <script type="text/javascript"  src="https://cdn.datatables.net/plug-ins/1.10.22/dataRender/datetime.js"></script>
+  
+  <script type="text/javascript"  src="{%static 'users/js/bs4_dt.js' %}"></script>
+
+  <!-- Custom scripts for all pages-->
+  <script type="text/javascript" src="{%static 'users/js/sb-admin-2.js' %}"></script>
+  
+  <link href="{% static 'users/css/custom.css' %}" type="text/css" rel="stylesheet">
+
+<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 request.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 ) 
+            {
+            	breaktime = data["actualbreaktime"];
+				startbreaktime_view = data["actualbreaktime"];	
+				starttime_view = Date.parse(data["wdtime"]);
+				$("#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>
+
diff --git a/timemanagement/urls.py b/timemanagement/urls.py
index efa88ae..41442ab 100644
--- a/timemanagement/urls.py
+++ b/timemanagement/urls.py
@@ -1,6 +1,6 @@
 from django.urls import path
 from django.contrib.auth.decorators import login_required, permission_required
-from .views import TimeManagement, TimeAjax, AbsenceManagmenet, AbsenceUpdate, TimeUpdate, AddBreak, TimeAdd, TimeManagementTeamSingle
+from .views import TimeManagement, TimeAjax, AbsenceManagmenet, AbsenceUpdate, TimeUpdate, AddBreak, TimeAdd, TimeManagementTeamSingle, GetRealtimeDropDown
 '''
 Permissions definiert in models.py bei USERS und dann hier vor die View geschrieben!
 '''
@@ -20,5 +20,5 @@ urlpatterns = [
 	path('abs/<int:activemonth>/<int:activeyear>', AbsenceManagmenet, name='tma-management'),
 	path('ajax/', TimeAjax, name='tm-ajax'),
 	path('abs/update/<int:pk>/', AbsenceUpdate, name='tma-update'),
-	
+	path('abs/getncdd/', GetRealtimeDropDown, name='tma-getrealtimedd'),
 ]
diff --git a/timemanagement/views.py b/timemanagement/views.py
index d717c5c..c4b21e5 100644
--- a/timemanagement/views.py
+++ b/timemanagement/views.py
@@ -24,6 +24,9 @@ from django.core.mail import send_mail
 from digitaleagentur.utils import *
 
 
+def GetRealtimeDropDown(request):
+	return render(request, 'timemanagement/realtime_dropdown_nc_iframe.html', {})
+
 # Load freedays
 def loadingFreeDays(plz):
 	# Getting land
diff --git a/users/static/users/js/nc_js.js b/users/static/users/js/nc_js.js
new file mode 100644
index 0000000..49325f1
--- /dev/null
+++ b/users/static/users/js/nc_js.js
@@ -0,0 +1,38 @@
+window.onload = function () {
+  var button = document.createElement("a");
+  button.innerHTML = '<image src="http://localhost:8080/svg/core/actions/user-admin?color=ebebec">';
+  
+  button.classList.add("header-menu");
+  
+  // 2. Append somewhere
+  var header = document.getElementsByClassName("header-right")[0];
+  header.prepend(button);
+  
+  button.style.padding = "20px";
+  
+  // DIV
+  realtimediv = document.createElement("div");
+  realtimediv.style.width = "300px";
+  realtimediv.style.height = "250px";
+  realtimediv.style.border = "solid black 1px";
+  realtimediv.style.top = "50px";
+  realtimediv.style.right = "50px";
+  realtimediv.style.position = "fixed";
+  realtimediv.style.overflow = "hidden";
+  realtimediv.style.display = "none";
+  realtimediv.innerHTML = '<iframe src="http://localhost:8000/tm/abs/getncdd/" title="Zeiterfassung" width="300" height="250" style="overflow:hidden" scrolling="no"></iframe>';
+  
+  
+  
+  header.appendChild(realtimediv);
+  
+  
+  button.addEventListener ("click", function() {
+    if(realtimediv.style.display == "none"){
+        realtimediv.style.display = "block";
+    }
+    else {
+      realtimediv.style.display = "none";
+    }
+  });
+  }
\ No newline at end of file