298 lines
11 KiB
Twig
298 lines
11 KiB
Twig
{% extends "base.html.twig" %}
|
|
|
|
{% block localstyle %}
|
|
table { width:100% }
|
|
th, td {
|
|
border: 1px solid var(--colorbgbodylight);
|
|
width:33.333333%;
|
|
padding:5px;
|
|
text-align:center;
|
|
font-size: 10px;
|
|
}
|
|
|
|
|
|
.clock {
|
|
background-color: var(--dark);
|
|
color: #fff;
|
|
padding: 0px 20px 20px 20px;
|
|
font-size: 40px;
|
|
text-align: center;
|
|
line-height:30px;
|
|
width:300px;
|
|
border-radius: 0.25rem;
|
|
}
|
|
.clock small {
|
|
font-size: 30%;
|
|
margin-top:-15px;
|
|
}
|
|
|
|
.alert {
|
|
width:300px;
|
|
}
|
|
|
|
.tallydaydetail {
|
|
width:300px;
|
|
text-align: left;
|
|
margin-top: 20px;
|
|
}
|
|
|
|
@media (max-width: 991px) {
|
|
.zoomed {
|
|
zoom: 240%;
|
|
}
|
|
}
|
|
{% endblock %}
|
|
{% block body %}
|
|
<center class="zoomed">
|
|
<div class="clock mb-3" id="clock"> </div>
|
|
{% if message is defined and not message is empty %}
|
|
<div class='alert alert-danger' style='margin: 5px 0px'>
|
|
<strong>Erreur</strong><br>
|
|
{{ message|raw }}<br>
|
|
</div>
|
|
{% endif %}
|
|
|
|
{% set isvalideuser=false %}
|
|
{% set isvalidemaster=false %}
|
|
{% for tallyday in tallydays %}
|
|
{% set isvalideuser=tallyday.validateuser %}
|
|
{% set isvalidemaster=tallyday.validatemaster %}
|
|
{% endfor %}
|
|
|
|
{% if not tallydays or not tallydays|last.dateend is null %}
|
|
{% if not isvalideuser and not isvalidemaster %}
|
|
<bouton id="btnstart" class="btn btn-success" style="font-size:220%; width:300px;">Début Pointage</bouton>
|
|
{% endif %}
|
|
{% elseif not isvalideuser and not isvalidemaster %}
|
|
<bouton id="btnend" class="btn btn-success" style="font-size:220%; width:300px;">Fin Pointage</bouton>
|
|
{% endif %}
|
|
|
|
<div class="tallydaydetail">
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>Début</th>
|
|
<th>Fin</th>
|
|
<th>Temps</th>
|
|
<th></th>
|
|
</tr>
|
|
</thead>
|
|
|
|
<tbody>
|
|
{% set isvalideuser=false %}
|
|
{% set isvalidemaster=false %}
|
|
{% set istelework=false %}
|
|
{% set ispenaltypassive=false %}
|
|
{% set ispenaltyactive=false %}
|
|
|
|
{% for tallyday in tallydays %}
|
|
{% set isvalideuser=tallyday.validateuser %}
|
|
{% set isvalidemaster=tallyday.validatemaster %}
|
|
{% set istelework=tallyday.istelework %}
|
|
{% set ispenaltypassive=tallyday.ispenaltypassive %}
|
|
{% set ispenaltyactive=tallyday.ispenaltyactive %}
|
|
|
|
{% if tallyday.datestart %}
|
|
<tr>
|
|
{% if tallyday.isbreakday %}
|
|
<td colspan=2>{{tallyday.name}}</td>
|
|
{% else %}
|
|
<td>{{tallyday.datestart|date("H:i")}}</td>
|
|
<td>
|
|
{% if tallyday.dateend %}
|
|
{{tallyday.dateend|date("H:i")}}
|
|
{% else %}
|
|
{% set isrunning=true %}
|
|
{% set timedayrunning=tallyday.timeday %}
|
|
{% set datestart=tallyday.datestart %}
|
|
{%endif%}
|
|
</td>
|
|
{% endif %}
|
|
<td>{{tallyday.timedayformatted}}</td>
|
|
<td>
|
|
{% if tallyday.istelework %}
|
|
<i class="fas fa-home" title="Télétravail"></i>
|
|
{% endif %}
|
|
{% if tallyday.ispenaltypassive %}
|
|
<i class="fas fa-glasses" title="Astreinte Passive"></i>
|
|
{% endif %}
|
|
{% if tallyday.ispenaltyactive %}
|
|
<i class="fas fa-fire" title="Astreinte Active"></i>
|
|
{% endif %}
|
|
</td>
|
|
</tr>
|
|
{% endif %}
|
|
{% endfor %}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<div class="mt-3 mb-3" style="width:250px">
|
|
Temps de travail
|
|
<div style="font-size:150%">{{timeday}}</div>
|
|
<div id="ifstoptimeday" style="font-size:10px; margin-top: -5px"></div>
|
|
</div>
|
|
<div class="mt-3 mb-3" style="width:250px">
|
|
Capital Temps
|
|
<div style="font-size:150%">{{capitaltime}}</div>
|
|
<div id="ifstopcapitaltime" style="font-size:10px; margin-top: -5px"></div>
|
|
</div>
|
|
|
|
{% if not isvalideuser and not isvalidemaster %}
|
|
<div style="width:300px; text-align:left">
|
|
<div class="custom-control custom-switch" style="zoom:130%">
|
|
<input type="checkbox" class="custom-control-input" id="istelework" {%if istelework%}checked{%endif%}>
|
|
<label class="custom-control-label" for="istelework">Télétravail</label>
|
|
</div>
|
|
|
|
<div class="custom-control custom-switch" style="zoom:130%">
|
|
<input type="checkbox" class="custom-control-input" id="ispenaltypassive" {%if ispenaltypassive%}checked{%endif%}>
|
|
<label class="custom-control-label" for="ispenaltypassive">Astreinte Passive</label>
|
|
</div>
|
|
|
|
<div class="custom-control custom-switch" style="zoom:130%">
|
|
<input type="checkbox" class="custom-control-input" id="ispenaltyactive" {%if ispenaltyactive%}checked{%endif%}>
|
|
<label class="custom-control-label" for="ispenaltyactive">Astreinte Active</label>
|
|
</div>
|
|
</div>
|
|
|
|
<a href="{{path("app_tallyday_uservalidate",{dateof:"now"|date("Y-m-d")})}}" class="btn btn-danger mt-3" style="width:300px" data-method="confirm" data-confirm="Êtes-vous sûr de vouloir valider votre journée ?">Valider ma journée</a>
|
|
<br>
|
|
{% endif %}
|
|
|
|
<a href="{{path("app_tallyday_userlist")}}" class="btn btn-secondary mt-3" style="width:300px">Gérer mes Pointages</a>
|
|
|
|
{% if isvalideuser and not isvalidemaster %}
|
|
<br><a href="{{path("app_tallyday_userdevalidate",{dateof:"now"|date("Y-m-d")})}}" class="btn btn-warning mt-3" style="width:300px">Dévalider ma journée</a>
|
|
{% endif %}
|
|
|
|
{% if is_granted('ROLE_MASTER') %}
|
|
<hr class="mt-5" style="width: 300px; background-color:var(--colorbgbodylight);">
|
|
<h3>GESTION</h3>
|
|
<a href="{{path("app_tallyday_masterlist")}}" class="btn btn-success mt-3 mb-3" style="width:300px">Gestion des Pointages</a>
|
|
{% endif %}
|
|
|
|
|
|
|
|
</center>
|
|
{% endblock %}
|
|
|
|
{% block localjavascript %}
|
|
|
|
var now=new Date();
|
|
var nextrecalcul=new Date();
|
|
var firstrecalcul=true;
|
|
|
|
$('#istelework').change(function() {
|
|
if($("#istelework").is(":checked")) {
|
|
$("#ispenaltyactive").prop("checked",false);
|
|
$("#ispenaltypassive").prop("checked",false);
|
|
}
|
|
});
|
|
|
|
$('#ispenaltypassive').change(function() {
|
|
if($("#ispenaltypassive").is(":checked")) {
|
|
$("#istelework").prop("checked",false);
|
|
$("#ispenaltyactive").prop("checked",false);
|
|
}
|
|
});
|
|
|
|
$('#ispenaltyactive').change(function() {
|
|
if($("#ispenaltyactive").is(":checked")) {
|
|
$("#istelework").prop("checked",false);
|
|
$("#ispenaltypassive").prop("checked",false);
|
|
}
|
|
});
|
|
|
|
$("#btnstart").click(function() {
|
|
istelework=0;
|
|
ispenaltypassive=0;
|
|
ispenaltyactive=0;
|
|
|
|
if($("#istelework").is(":checked")) istelework=1;
|
|
if($("#ispenaltypassive").is(":checked")) ispenaltypassive=1;
|
|
if($("#ispenaltyactive").is(":checked")) ispenaltyactive=1;
|
|
|
|
url="{{ path("app_tallyday_start",{istelework:'xxx',ispenaltypassive:'yyy',ispenaltyactive:'zzz'}) }}";
|
|
url=url.replace('xxx',istelework);
|
|
url=url.replace('yyy',ispenaltypassive);
|
|
url=url.replace('zzz',ispenaltyactive);
|
|
document.location.href=url;
|
|
});
|
|
|
|
$("#btnend").click(function() {
|
|
istelework=0;
|
|
ispenaltypassive=0;
|
|
ispenaltyactive=0;
|
|
|
|
if($("#istelework").is(":checked")) istelework=1;
|
|
if($("#ispenaltypassive").is(":checked")) ispenaltypassive=1;
|
|
if($("#ispenaltyactive").is(":checked")) ispenaltyactive=1;
|
|
|
|
url="{{ path("app_tallyday_end",{istelework:'xxx',ispenaltypassive:'yyy',ispenaltyactive:'zzz'}) }}";
|
|
url=url.replace('xxx',istelework);
|
|
url=url.replace('yyy',ispenaltypassive);
|
|
url=url.replace('zzz',ispenaltyactive);
|
|
document.location.href=url;
|
|
});
|
|
|
|
function showTime(){
|
|
// to get current time/ date.
|
|
var date = new Date();
|
|
moment(date).set({second:0,millisecond:0});
|
|
|
|
// Recalcul du temps de travail si running
|
|
|
|
if(firstrecalcul||moment(date).diff(moment(nextrecalcul), "minutes")!=0) {
|
|
$.ajax({
|
|
method: "POST",
|
|
url: "{{path("app_tallyday_userrecalcul")}}",
|
|
success: function(data, dataType)
|
|
{
|
|
$("#ifstoptimeday").html("");
|
|
$("#ifstopcapitaltime").html("");
|
|
|
|
if(data.success) {
|
|
if(data.tosimulatetime) $("#ifstoptimeday").html("Si fin de journée<br> >> "+data.timeday+" << ");
|
|
if(data.tosimulatecapital) $("#ifstopcapitaltime").html("Si journée validée<br> >> "+data.capital+" << ");
|
|
}
|
|
},
|
|
});
|
|
|
|
nextrecalcul=new Date();
|
|
moment(nextrecalcul).set({second:0,millisecond:0});
|
|
firstrecalcul=false;
|
|
}
|
|
|
|
// Recharger la page au cas où on change de jour
|
|
if(moment(date).diff(moment(now), "days")!=0) location.reload();
|
|
|
|
// Masquer les alerte au bout 30s
|
|
if(moment(date).diff(moment(now), "seconds")>5 && $(".alert").length) window.location.replace("{{path("app_tallyday")}}");
|
|
|
|
var dm = date.toLocaleDateString('fr-FR', { weekday: 'long' });
|
|
|
|
// to get the current hour
|
|
var h = date.getHours();
|
|
|
|
// to get the current minutes
|
|
var m = date.getMinutes();
|
|
|
|
//to get the current second
|
|
var s = date.getSeconds();
|
|
|
|
m = ( m < 10 ) ? m = "0" + m : m;
|
|
s = ( s < 10 ) ? s = "0" + s : s;
|
|
|
|
// putting time in one variable
|
|
var time = "<small>" + dm + " " + date.toLocaleDateString("fr") + "</small><br>" + h + ":" + m + ":" + s;
|
|
|
|
// putting time in our div
|
|
$('#clock').html(time);
|
|
|
|
//to change time in every seconds
|
|
setTimeout( showTime, 1000 );
|
|
}
|
|
showTime();
|
|
|
|
{% endblock %} |