Skip to content
Extraits de code Groupes Projets
Valider 29c18242 rédigé par Juliana's avatar Juliana
Parcourir les fichiers

[ADD] Add input number range slider

parent 3dccaba1
Branches
Aucune étiquette associée trouvée
Aucune requête de fusion associée trouvée
...@@ -50,6 +50,8 @@ class SurveyQuestion(models.Model): ...@@ -50,6 +50,8 @@ class SurveyQuestion(models.Model):
page_sequence = fields.Integer('Séquence de la page associée', related='page_id.sequence', store=True) page_sequence = fields.Integer('Séquence de la page associée', related='page_id.sequence', store=True)
criteria = fields.Char("Critère") criteria = fields.Char("Critère")
num_question = fields.Char("Numéro de question") num_question = fields.Char("Numéro de question")
min_value = fields.Integer("Valeur min.")
max_value = fields.Integer("Valeur max.")
class SurveyLabel(models.Model): class SurveyLabel(models.Model):
......
...@@ -176,3 +176,77 @@ ...@@ -176,3 +176,77 @@
background-color: #e15360; background-color: #e15360;
border-color: #e15360; border-color: #e15360;
} }
input[type=range] {
-webkit-appearance: none;
margin: 20px 0;
width: 100%;
}
input[type=range]:focus {
outline: none;
}
input[type=range]::-webkit-slider-runnable-track {
width: 100%;
height: 4px;
cursor: pointer;
animate: 0.2s;
background: #61C4E1;
border-radius: 25px;
}
input[type=range]::-webkit-slider-thumb {
height: 20px;
width: 20px;
border-radius: 50%;
background: #fff;
box-shadow: 0 0 4px 0 rgba(0,0,0, 1);
cursor: pointer;
-webkit-appearance: none;
margin-top: -8px;
}
input[type=range]:focus::-webkit-slider-runnable-track {
background: #61C4E1;
}
.range-wrap{
position: relative;
}
.range-value{
position: absolute;
top: -70%;
}
.range-value span{
width: 40px;
height: 30px;
line-height: 30px;
text-align: center;
background: #61C4E1;
color: #fff;
font-size: 12px;
display: block;
position: absolute;
left: 50%;
transform: translate(-50%, 0);
border-radius: 6px;
}
.range-value span:before{
content: "";
position: absolute;
width: 0;
height: 0;
border-top: 10px solid #61C4E1;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
top: 100%;
left: 50%;
margin-left: -5px;
margin-top: -1px;
}
.form-control:focus {
border-color: transparent;
box-shadow: 0 0 0 0.2rem rgba(0, 160, 157, 0);
}
.form-control {
background-color: transparent !important;
border: 0px solid #ced4da !important;
}
...@@ -236,9 +236,36 @@ ...@@ -236,9 +236,36 @@
</template> </template>
<template id="numerical_box" inherit_id="survey.numerical_box"> <template id="numerical_box" inherit_id="survey.numerical_box">
<!-- <input type="number" step="any" class="form-control" t-att-name="prefix"/>-->
<xpath expr="//input" position="replace"> <xpath expr="//input" position="replace">
<input type="range" min="1" max="100" class="form-control slider" t-att-name="prefix"/> <div class="row align-items-center text-center">
<div class="col-1">
<span t-field="question.min_value"/>
</div>
<div class="col-10">
<div class="range-wrap">
<div class="range-value" id="rangeV"></div>
<input id="range" type="range" t-att-min="question.min_value" t-att-max="question.max_value" class="form-control slider" t-att-name="prefix"/>
</div>
</div>
<div class="col-1">
<span t-field="question.max_value"/>
</div>
</div>
<script>
const
range = document.getElementById('range'),
rangeV = document.getElementById('rangeV'),
setValue = ()=>{
const
newValue = Number( (range.value - range.min) * 100 / (range.max - range.min) ),
newPosition = 10 - (newValue * 0.2);
rangeV.innerHTML = `<span>${range.value}</span>`;
rangeV.style.left = `calc(${newValue}% + (${newPosition}px))`;
};
document.addEventListener("DOMContentLoaded", setValue);
range.addEventListener('input', setValue);
</script>
</xpath> </xpath>
</template> </template>
......
...@@ -13,6 +13,10 @@ ...@@ -13,6 +13,10 @@
<field name="criteria"/> <field name="criteria"/>
<field name="num_question"/> <field name="num_question"/>
</field> </field>
<xpath expr="//notebook//page//group//group//field[@name='constr_mandatory']" position="before">
<field name="min_value" attrs="{'invisible': [('type', '!=', 'numerical_box')]}"/>
<field name="max_value" attrs="{'invisible': [('type', '!=', 'numerical_box')]}"/>
</xpath>
<xpath expr="//notebook//page//field[@name='labels_ids_2']//tree//field[@name='value']" position="after"> <xpath expr="//notebook//page//field[@name='labels_ids_2']//tree//field[@name='value']" position="after">
<field name="criteria"/> <field name="criteria"/>
<field name="num_question"/> <field name="num_question"/>
......
0% Chargement en cours ou .
You are about to add 0 people to the discussion. Proceed with caution.
Veuillez vous inscrire ou vous pour commenter