DGNum/demarches-normaliennes
13
1
Fork 0
Code Issues 1 Pull requests Projects Releases Packages Wiki Activity

Revrite with unobtrusive js

Browse source
This commit is contained in:
Paul Chavard 2019-02-21 17:50:18 +01:00
parent 62d7e328c9
commit 146e8ba2aa
4 changed files with 47 additions and 45 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
app/javascript/new_design/support.js Normal file
View file

@ -0,0 +1,18 @@
import { show, hide, delegate } from '@utils';
delegate('change', '#contact-form #type', event => {
const type = event.target.value;
const answer = document.querySelector(`[data-answer="${type}"]`);
const card = document.querySelector('.support.card');
for (let element of document.querySelectorAll('.card-content')) {
hide(element);
}
if (answer) {
show(card);
show(answer);
} else {
hide(card);
}
});

5
app/javascript/packs/application.js
View file

@ -14,11 +14,12 @@ import '../shared/remote-input';
import '../shared/franceconnect'; import '../shared/franceconnect';
import '../shared/toggle-target'; import '../shared/toggle-target';
import '../new_design/spinner'; import '../new_design/carto';
import '../new_design/dropdown'; import '../new_design/dropdown';
import '../new_design/form-validation'; import '../new_design/form-validation';
import '../new_design/carto';
import '../new_design/select2'; import '../new_design/select2';
import '../new_design/spinner';
import '../new_design/support';
import '../new_design/champs/carte'; import '../new_design/champs/carte';
import '../new_design/champs/linked-drop-down-list'; import '../new_design/champs/linked-drop-down-list';

67
app/views/support/index.html.haml
View file

@ -20,10 +20,33 @@
= label_tag :type do = label_tag :type do
Votre problème Votre problème
%span.mandatory * %span.mandatory *
= select_tag :type, options_for_select(@options, params[:type]),include_blank:"Choisir un problème",onchange:"show()", required: true = select_tag :type, options_for_select(@options, params[:type]), include_blank: "Choisir un problème", required: true
.support.card.featured.hidden
.card-title
👉 Notre réponse
.card-content.hidden{ data: { answer: "info demarche" } }
%p Avez-vous bien vérifié que tous les champs obligatoires (*) sont bien remplis ?
%p Si vous avez des questions sur les informations à saisir, contactez les services en charge de la démarche.
%p
%a{ href: 'https://faq.demarches-simplifiees.fr/article/12-contacter-le-service-en-charge-de-ma-demarche' }
En savoir plus
#aidesupport .card-content.hidden{ data: { answer: "usager perdu" } }
%p Nous vous invitons à contacter l’administration en charge de votre démarche pour qu’elle vous indique le lien à suivre. Celui-ci devrait ressembler à cela : https://www.demarches-simplifiees.fr/commencer/NOM_DE_LA_DEMARCHE .
%br
%p Vous pouvez aussi consulter ici la liste de nos démarches les plus frequentes (permis, detr etc) :
%p
%a{ href: 'https://doc.demarches-simplifiees.fr/listes-des-demarches' }
https://doc.demarches-simplifiees.fr/listes-des-demarches
.card-content.hidden{ data: { answer: "info instruction" } }
%p Si vous avez des questions sur l’instruction de votre dossier (par exemple sur les délais), nous vous invitons à contacter directement les services qui instruisent votre dossier par votre messagerie
%p
%a{ href: 'https://faq.demarches-simplifiees.fr/article/11-je-veux-savoir-ou-en-est-linstruction-de-ma-demarche' }
En savoir plus
%br
%p Si vous souhaitez poser une question pour un problème technique sur le site, utilisez le formulaire ci-dessous. Nous ne pourrons pas vous renseigner sur l'instruction de votre dossier.
.contact-champ .contact-champ
= label_tag :dossier_id, 'Numéro du dossier concerné' = label_tag :dossier_id, 'Numéro du dossier concerné'
@ -49,43 +72,3 @@
.send-wrapper .send-wrapper
= button_tag 'Envoyer le message', type: :submit, class: 'button send primary' = button_tag 'Envoyer le message', type: :submit, class: 'button send primary'
:javascript
function show(){
var e = document.getElementById ("type");
var choix = e.options [e.selectedIndex] .value;
var divid = choix.replace(' ','_');
var div_info_demarche = document.getElementById("info_demarche");
var div_usager_perdu_ = document.getElementById("usager_perdu");
var div_info_instruction = document.getElementById("info_instruction");
switch (divid) {
case 'info_demarche':
console.log('info_demarche');
document.getElementById("aidesupport").innerHTML = "<div id='support' class='card featured'><div id='' class='card-title'>👉 Notre réponse </div> Avez-vous bien vérifié que tous les champs obligatoires (*) sont bien remplis ?<br/>Si vous avez des questions sur les informations à saisir, contactez les services en charge de la démarche.<br/> <br/><a href='https://faq.demarches-simplifiees.fr/article/12-contacter-le-service-en-charge-de-ma-demarche'>En savoir plus</a><br/><br/></div>";
break;
case 'usager_perdu':
console.log('usager_perdu');
document.getElementById("aidesupport").innerHTML = "<div id='support' class='card featured'><div id='' class='card-title'>👉 Notre réponse </div><br>Nous vous invitons à contacter l’administration en charge de votre démarche pour qu’elle vous indique le lien à suivre. Celui-ci devrait ressembler à cela : https://www.demarches-simplifiees.fr/commencer/NOM_DE_LA_DEMARCHE .<br/><br/>Vous pouvez aussi consulter ici la liste de nos démarches les plus frequentes (permis, detr etc) : <a href='https://doc.demarches-simplifiees.fr/listes-des-demarches' >https://doc.demarches-simplifiees.fr/listes-des-demarches</a> <br/><br></div>";
break;
case 'info_instruction':
console.log('info_instruction');
document.getElementById("aidesupport").innerHTML = "<div id='support' class='card featured'><div id='' class='card-title'>👉 Notre réponse </div><br>Si vous avez des questions sur l’instruction de votre dossier (par exemple sur les délais), nous vous invitons à contacter directement les services qui instruisent votre dossier par votre messagerie <br/><br/><a href='https://faq.demarches-simplifiees.fr/article/11-je-veux-savoir-ou-en-est-linstruction-de-ma-demarche'>En savoir plus </a><br/><br/>Si vous souhaitez poser une question pour un problème technique sur le site, utilisez le formulaire ci-dessous. Nous ne pourrons pas vous renseigner sur l'instruction de votre dossier.</div>";
break;
default:
console.log('defaut');
document.getElementById("aidesupport").innerHTML = "";
}
}