ADM Useransicht Überarbeitet

adm/templates/adm/adm_user_single.html

@@ -3,8 +3,12 @@
 {% load adm_tags %}
 <!-- Mitarbeier ist immer der angemeledete!!! -->
 <div class="content-section col-12">
+	<div class="row">
+		<div class="col-2">
+			<img class="img-profile" width="100%"  src="{{ userdata.profile.get_photo_url }}" >
+		</div>
+		<div class="col-8">
 			<h4>{{userdata.get_full_name}} aus {{userdata.profile.agency.name}}</h4>
-<hr>
 			<table>
 				<tr>
 					<td style="min-width: 120px;">Name</td>
@@ -19,7 +23,22 @@
 					<td>{{userdata.last_login|default:"-"}}</td>
 				</tr>
 			</table>
+		</div>
+	</div>
 <hr>
+<nav>
+  <div class="nav nav-tabs" id="usersingleelements" role="tablist">
+    <a class="nav-link active" id="nav-groups-tab" data-bs-toggle="tab" href="#nav-groups" role="tab" aria-controls="nav-groups" aria-selected="true">Gruppen</a>
+    <a class="nav-link" id="nav-contractdata-tab" data-bs-toggle="tab" href="#nav-contractdata" role="tab" aria-controls="nav-contractdata" aria-selected="false">Vertragsdaten</a>
+    <a class="nav-link" id="nav-contract-tab" data-bs-toggle="tab" href="#nav-contract" role="tab" aria-controls="nav-contract" aria-selected="false">Arbeitstage</a>
+    <a class="nav-link" id="nav-absence-tab" data-bs-toggle="tab" href="#nav-absence" role="tab" aria-controls="nav-absence" aria-selected="false">Abwesenheiten</a>
+    <a class="nav-link" id="nav-year-tab" data-bs-toggle="tab" href="#nav-year" role="tab" aria-controls="nav-year" aria-selected="false">Jahresübersicht</a>
+     <a class="nav-link" id="nav-logins-tab" data-bs-toggle="tab" href="#nav-logins" role="tab" aria-controls="nav-logins" aria-selected="false">Logins</a>
+  </div>
+</nav>
+<div class="tab-content" id="nav-tabContent">
+  <div class="tab-pane fade show active" id="nav-groups" role="tabpanel" aria-labelledby="nav-groups-tab">
+  	<br />
   	<h5>Gruppenübersicht</h5>
   		<small>Tabelle zeigt alle Gruppen, in denen der Nutzer ist.</small>
 		<table class="table table-hover" id="users_groups" >
@@ -67,9 +86,64 @@
 			    }); 	
 			})
 		</script>
-<hr>
+  </div>
+
+  <div class="tab-pane fade" id="nav-contractdata" role="tabpanel" aria-labelledby="nav-contractdata-tab">
+	<br />
+	<h5>Vertragsdaten</h5>
+	Arbeitszeit
+	<table>
+		<thead>
+			<tr>
+				<td>Montag</td>
+				<td>Dienstag</td>
+				<td>Mittwoch</td>
+				<td>Donnerstag</td>
+				<td>Freitag</td>
+				<td>Samstag</td>
+				<td>Sonntag</td>
+			</tr>
+		</thead>
+		<tbody>
+			<tr>
+				<td>{{usertimedata.wd_mo}}</td>
+				<td>{{usertimedata.wd_tu}}</td>
+				<td>{{usertimedata.wd_we}}</td>
+				<td>{{usertimedata.wd_th}}</td>
+				<td>{{usertimedata.wd_fr}}</td>
+				<td>{{usertimedata.wd_sa}}</td>
+				<td>{{usertimedata.wd_so}}</td>
+			</tr>
+		</tbody>
+	</table>
+	<br />
+	<table>
+		<tr>
+			<td>Urlaub verfällt am</td>
+			<td><b>{{usertimedata.loose_holidedate}}</b></td>
+		</tr>
+		<tr>
+			<td>Einstellungsdatum</td>
+			<td><b>{{usertimedata.startdate|date:"d.m.Y"}}</b></td>
+		</tr>
+		<tr>
+			<td>Zeiterfassung Startwert</td>
+			<td><b>{{usertimedata.startcount}}</b></td>
+		</tr>
+		<tr>
+			<td>Zeiterfassung Nutzen</td>
+			<td><b>{{usertimedata.usetime}}</b></td>
+		</tr>
+		<tr>
+			<td>Zeiterfassung ab dem</td>
+			<td><b>{{usertimedata.usetime_start|date:"d.m.Y"}}</b></td>
+		</tr>
+	</table>
+  </div>
+
+  <div class="tab-pane fade" id="nav-contract" role="tabpanel" aria-labelledby="nav-contract-tab">
+  	<br />
 		<h5>Arbeitstage</h5>
-Beginn der Zeiterfassung: {{usertimedata.startdate|date:"d.m.Y"}}
 		<table class="table table-hover" id="user_workdays" >
 		  <thead>
 		  	<tr>
@@ -120,7 +194,11 @@ Beginn der Zeiterfassung: {{usertimedata.startdate|date:"d.m.Y"}}
 			    }); 	
 			})
 		</script>
-<hr>
+
+  </div>
+
+  <div class="tab-pane fade" id="nav-absence" role="tabpanel" aria-labelledby="nav-absence-tab">
+  	<br />
 		<h5>Abwesenheiten</h5>
 		<table class="table table-hover" id="user_absences" >
 		  <thead>
@@ -188,8 +266,13 @@ Beginn der Zeiterfassung: {{usertimedata.startdate|date:"d.m.Y"}}
 			    }); 	
 			})
 		</script>	
-<hr>
+
+  </div>
+
+  <div class="tab-pane fade" id="nav-year" role="tabpanel" aria-labelledby="nav-year-tab">
+  	<br />
 		<h5>Jahresübersicht</h5>
+		
 		<table class="table table-hover" id="user_absence_year" >
 		  <thead>
 		  	<tr>
@@ -235,10 +318,27 @@ Beginn der Zeiterfassung: {{usertimedata.startdate|date:"d.m.Y"}}
 			    }); 	
 			})
 		</script>
-<hr>
+  </div>
+
+  <div class="tab-pane fade" id="nav-logins" role="tabpanel" aria-labelledby="nav-logins-tab">
+  	<br />
 	<h5>Logins (letzten 50)</h5>
 {% for ele in logdata reversed %}
 	{{forloop.revcounter}}. {{ele|date:"d.m.Y, H:i"}}<br />
 {% endfor %}
+
+
   </div>
+</div>
+
+</div>
+<script type="text/javascript">
+
+ $('#usersingleelements a').on('click', function (e) {
+      e.preventDefault();
+      $(this).tab('show');
+    });
+
+</script>
+
 {% endblock content %}