44 lines
1.3 KiB
HTML
44 lines
1.3 KiB
HTML
{% extends "users/base.html" %}
|
|
{% load crispy_forms_tags %}
|
|
{% block content %}
|
|
<div class="content-section col-6">
|
|
<h3>Neuen Bereich anlegen</h3>
|
|
<hr>
|
|
<form method="POST">
|
|
{% csrf_token %}
|
|
{{ form|crispy }}
|
|
<div class="form-group mb-2 mb-3">
|
|
<span>Farbe</span><input type="color" id="color-picker" name="areacolor " />
|
|
</div>
|
|
<p>Nachdem Erstellen eines Bereichs können Mitarbeiter zugewiesen werden.</p>
|
|
<hr>
|
|
<button type="submit" class="btn btn-success" href="{% url 'areas-addarea' %} ">Bereich anlegen</button>
|
|
<a class="btn" href="{% url 'areas-management' %} ">Abbrechen</a>
|
|
</form>
|
|
</div>
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@simonwep/pickr/dist/themes/classic.min.css"/> <!-- 'classic' theme -->
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/@simonwep/pickr/dist/pickr.es5.min.js"></script>
|
|
<script type="text/javascript">
|
|
|
|
$(document).ready(function(){
|
|
$("#div_id_color").hide();
|
|
})
|
|
|
|
const pickr1 = new Pickr({
|
|
el: '#color-picker',
|
|
default: "#000000",
|
|
components: {
|
|
preview: false,
|
|
hue: true
|
|
}
|
|
});
|
|
|
|
pickr1.on('changestop', function(){
|
|
var col = pickr1.getColor().toHEXA().toString();
|
|
pickr1.setColor(col);
|
|
$("#id_color").val(col);
|
|
});
|
|
</script>
|
|
{% endblock content %}
|