digitaleagentur/dasettings/templates/dasettings/absencereason_update.html

80 lines
2.4 KiB
HTML

{% extends "users/base.html" %}
{% load crispy_forms_tags %}
{% load static %}
{% block content %}
{% if request.user.profile.agency.module_timemanagement %}
<script src="{% static 'users/js/colorPick.min.js' %}"></script>
<link rel="stylesheet" href="{% static 'users/css/colorPick.min.css' %}">
<style>
.colorPickSelector {
border-radius: 5px;
width: 36px;
height: 36px;
cursor: pointer;
-webkit-transition: all linear .2s;
-moz-transition: all linear .2s;
-ms-transition: all linear .2s;
-o-transition: all linear .2s;
transition: all linear .2s;
}
noclickeffect:active { border-style: outset !important;}
.colorPickSelector:hover { transform: scale(1.1); }
</style>
<div class="content-section col-6">
<h3>Abwesenheitskategorie aktualisieren</h3>
<hr>
<form method="POST" enctype="multipart/form-data">
{% csrf_token %}
{{form|crispy}}
<div class="form-group">
<label for="abcolor_cal">Farbe im Teamkalender:</label>
<div id="abcolor_cal" class="colorPickSelector"></div>
</div>
<hr>
<button type="submit" class="btn btn-primary">Abwesenheitskategorie aktualisieren</button>&nbsp;
<a class="btn" href="{% url 'dasettings' %} ">Abbrechen</a>
</form>
</div>
<script type="text/javascript">
//Prevent is_time AND is_holiday
$(document).click(function(event) {
if($(event.target)[0]['id'] == "id_is_time"){
if($("#id_is_time").prop("checked")){
$("#id_is_holiday").prop("checked", false)
}
}
if($(event.target)[0]['id'] == "id_is_holiday"){
if($("#id_is_holiday").prop("checked")){
$("#id_is_time").prop("checked", false)
}
}
});
default_colorpickerinit = "{{object.color}}";
abcolor_final= "#3498db";
$(".colorPickSelector").colorPick(
{
'initialColor': default_colorpickerinit,
'allowRecent': true,
'recentMax': 5,
'allowCustomColor': false,
'palette': ["#1abc9c", "#16a085", "#2ecc71", "#27ae60", "#3498db", "#2980b9", "#9b59b6", "#8e44ad", "#34495e", "#2c3e50", "#f1c40f", "#f39c12", "#e67e22", "#d35400", "#e74c3c", "#c0392b", "#ecf0f1", "#bdc3c7", "#95a5a6", "#7f8c8d"],
'onColorSelected': function() {
this.element.css({'backgroundColor': this.color, 'color': this.color});
abcolor_final = this.color;
$("#id_rgb_color").val(abcolor_final);
}
});
</script>
{% else %}
<h3>Das Modul Abwesenheitsplanung wurden in ihrer Agentur deaktiviert.</h3>
{% endif %}
{% endblock content %}