Fab_Blab/WikiLerni
Fab_Blab
/
WikiLerni
1
1
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Formulaire édition quizs : ajout champs groupe de quiz + autocomplétion

This commit is contained in:
Fabrice PENHOËT 2020-10-13 17:58:45 +02:00
parent d52be75633
commit 9a4c4aa122
3 changed files with 56 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
front/public/gestion-quizs.html
View File

@ -63,15 +63,23 @@
<option value="long">Long</option>
</select>
</fieldset>
<fieldset><label for="classification">Catégories de classement</label><input id="classification" type="text" name="classification" class="cardboard"><br><span class="info" id="helpClassification">Séparer les rubriques par des virgules</span></fieldset>
<fieldset><label for="classification">Catégories de classement</label><input id="classification" type="text" name="classification" class="cardboard"><br><span class="info" id="helpClassification">Séparer les rubriques par des virgules</span></fieldset>
<fieldset>
<label for="group">Groupe du quiz</label><input id="group" type="text" name="group" class="cardboard">
<br><span class="info" id="helpGroup">Laisser vide si non concerné.</span>
<input type="hidden" name="GroupId" id="GroupId" value="">
</fieldset>
<fieldset><label for="rankInGroup">Rang dans le groupe</label><input id="rankInGroup" type="number" name="rankInGroup" class="cardboard"><br><span class="info">Permet de fixer l'ordre de défilement/envoi de cet élément du quiz. Laisser vide si non concerné.</span></fieldset>
<ul class="checkbox_li">
<li class="checkbox_li">
<label for="deleteOk" class="check" id="deleteOkLabel"><input type="checkbox" id="deleteOk" name="deleteOk" value="true" /><div class="checkbox_override"></div> <span class="error">Je souhaite supprimer ce quiz.</span></label>
</li>
</ul>
</ul>
<input type="hidden" name="id" id="id" value="">
<div class="input_wrapper"><input type="submit" value="Valider." class="cardboard" id="submitDatas" /></div>
<div class="input_wrapper"><a href="#questionnaires" class="button cardboard" id="wantNewQuestionnaire">Nouveau questionnaire</a></div>
<div class="input_wrapper"><input type="submit" value="Valider" class="cardboard" id="submitDatas" /></div>
<div class="input_wrapper"><a href="#questionnaires" class="button cardboard" id="wantNewQuestionnaire">Vider</a></div>
<div class="input_wrapper"><a href="#questionnaires" class="button cardboard" id="previewQuestionnaire" target=="_blank">Voir le quiz</a></div>
<div id="response"></div>
@ -87,7 +95,7 @@
<input type="hidden" name="id" id="idLink" value="">
<input type="hidden" name="QuestionnaireId" id="QuestionnaireIdLink" value="">
<input type="hidden" name="deleteOk" id="deleteOkLink" value="">
<div class="input_wrapper"><input type="submit" value="Valider." class="cardboard" /></div>
<div class="input_wrapper"><input type="submit" value="Valider" class="cardboard" /></div>
<div id="responseLink"></div>
</form>
@ -100,7 +108,7 @@
<input type="hidden" name="id" id="idIllustration" value="">
<input type="hidden" name="QuestionnaireId" id="QuestionnaireIdIllustration" value="">
<input type="hidden" name="deleteOk" id="deleteOkIllustration" value="">
<div class="input_wrapper"><input type="submit" value="Valider." class="cardboard" /></div>
<div class="input_wrapper"><input type="submit" value="Valider" class="cardboard" /></div>
<div id="responseIllustration"></div>
</form>
@ -166,7 +174,7 @@
<input type="hidden" name="id" id="idQuestion" value="">
<input type="hidden" name="QuestionnaireId" id="QuestionnaireIdQuestion" value="">
<input type="hidden" name="deleteOk" id="deleteOkQuestion" value="">
<div class="input_wrapper"><input type="submit" value="Valider." class="cardboard" /></div>
<div class="input_wrapper"><input type="submit" value="Valider" class="cardboard" /></div>
<div id="responseQuestion"></div>
</form>
<div class="l-box-lrg pure-u-1" id="questionnairesList"></div>

2
front/public/themes/wikilerni/css/style.css
View File

@ -359,7 +359,7 @@ width:90%;
background-image: url("../img/background-texture.png");
}
#helpClassification a
#helpClassification a, #helpGroup a
{
font-size:1.2em;
padding: 0.2em 0.3em;

41
front/src/manageQuestionnaires.js
View File

@ -51,7 +51,7 @@ const formQuestion = document.getElementById("questions");
const formQuestionnaire = document.getElementById("questionnaires");
const formSearch = document.getElementById("search");
const helpClassification = document.getElementById("helpClassification");
const helpGroup = document.getElementById("helpClassification");
const helpGroup = document.getElementById("helpGroup");
const helpPublishingAt = document.getElementById("helpPublishingAt");
const inputClassification = document.getElementById("classification");
const inputGroup = document.getElementById("group");
@ -606,12 +606,51 @@ const initialise = async () =>
}
});
// Aide à la sélection d'un groupe pour le quiz
inputGroup.addEventListener("input", function(e)
{
formQuestionnaire["GroupId"].value="";
const groupInput=inputGroup.value.trim();
if(groupInput.length >= configQuestionnaires.searchGroups.minlength)
{
const xhrSearchGroups = new XMLHttpRequest();
xhrSearchGroups.open("POST", apiUrl+configQuestionnaires.groupRoutes+configQuestionnaires.searchGroupsRoute);
xhrSearchGroups.onreadystatechange = function()
{
if (this.readyState == XMLHttpRequest.DONE)
{
let response=JSON.parse(this.responseText);
if (this.status === 200 && Array.isArray(response))
{
helpGroup.innerHTML="";
for(let i in response)
{
addElement(helpGroup, "a", response[i].title, "#group"+response[i].id, ["info"], { href:"#group"+response[i].id }, false);
document.getElementById("#group"+response[i].id).addEventListener("click", function(e)
{
e.preventDefault();
let groupId=e.target.id.replace("#group", "");
inputGroup.value=e.target.innerHTML+" ("+groupId+")";
formQuestionnaire["GroupId"].value=groupId;
helpGroup.innerHTML="";
});
}
}
}
}
xhrSearchGroups.setRequestHeader("Content-Type", "application/json");
xhrSearchGroups.setRequestHeader("Authorization", "Bearer "+user.token);
xhrSearchGroups.send(JSON.stringify({searchGroups: groupInput}));
}
});
// Traitement de l'envoi du formulaire des infos de base du quiz
formQuestionnaire.addEventListener("submit", function(e)
{
e.preventDefault();
divResponse.innerHTML="";
let datas=getDatasFromInputs(formQuestionnaire);
console.log(datas);
const xhrQuestionnaireDatas = new XMLHttpRequest();
if(!isEmpty(datas.id) && (datas.deleteOk!==undefined))
xhrQuestionnaireDatas.open("DELETE", apiUrl+configQuestionnaires.questionnaireRoutes+"/"+datas.id);