templates/template/template.html.twig line 1

  1. {% extends 'base.html.twig' %}
  3. {% block body %}
  5.     <div class="container">
  7.         {{ form_start(templateForm,{attr:{"id":"form-template"}}) }}
  8.         {% if template.id %}
  9.         <input type="hidden"  name="id" value="{{ template.id }}">
  10.         {% endif %}
  11.         <ul class="nav nav-tabs" role="tablist">
  12.             <li class="nav-item" role="presentation">
  13.                 <a class="nav-link active" data-bs-toggle="tab" href="#infos" aria-selected="true" role="tab">Informations</a>
  14.             </li>
  15.             <li class="nav-item" role="presentation">
  16.                 <a class="nav-link" data-bs-toggle="tab" href="#template" aria-selected="false" tabindex="-1" role="tab">Template</a>
  17.             </li>
  18.             {% if template.id %}
  19.             <li class="nav-item me-auto" role="presentation">
  20.                 <a class="nav-link" id="preview" data-bs-toggle="tab" target="_blank" href="{{ path('app_template_view', {id: template.id}) }}" aria-selected="false" tabindex="-1" role="tab">Preview</a>
  21.             </li>
  22.             {% endif %}
  23.         </ul>
  24.         <div id="tabTemplateContent" class="tab-content">
  25.             <div class="tab-pane fade show active" id="infos" role="tabpanel">
  26.                 {{ form_row(templateForm.titre) }}
  27.                 {{ form_row(templateForm.type) }}
  29.                 {{ include('form/_collection.html.twig',{  formFieldHolder:templateForm.parametres, nom:"parametres-fields-list",id:"addParam", libelle:"Ajouter un paramétre"}) }}
  31.             </div>
  32.             <div class="tab-pane fade" id="template" role="tabpanel">
  33.                 <div class="btn-group">
  34.                     <button class="btn btn-secondary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasEntities" aria-controls="offcanvasEntities">
  35.                         Afficher les entités disponible
  36.                     </button>
  37.                     <button class="btn btn-sm btn-info" type="button" onclick="addInput()">Input</button>
  38.                     <button class="btn btn-sm btn-primary" type="button" onclick="addText()">Texte</button>
  39.                     <div class="btn-group" role="group" aria-label="Button group with nested dropdown" >
  40.                         <button type="button" class="btn btn-sm btn-primary" onclick="addTitre()">Titre (h1)</button>
  41.                         <div class="btn-group" role="group">
  42.                             <button id="btnGroupTitre" type="button" class="btn btn-sm btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></button>
  43.                             <div class="dropdown-menu" aria-labelledby="btnGroupTitre">
  44.                                 <a class="dropdown-item" href="#?" onclick="addTitre(2)">H2</a>
  45.                                 <a class="dropdown-item" href="#?" onclick="addTitre(3)">H3</a>
  46.                                 <a class="dropdown-item" href="#?" onclick="addTitre(4)">H4</a>
  47.                                 <a class="dropdown-item" href="#?" onclick="addTitre(5)">H5</a>
  48.                                 <a class="dropdown-item" href="#?" onclick="addTitre(6)">H6</a>
  49.                             </div>
  50.                         </div>
  51.                     </div>
  52.                     <button class="btn btn-sm btn-warning" type="button" onclick="addButton()">Bouton</button>
  54.                     <button class="btn btn-sm btn-outline-primary" type="button" onclick="addBr()">Saut à la ligne</button>
  55.                     <div class="btn-group" role="group" aria-label="Button group with nested dropdown" >
  56.                         <button type="button" class="btn btn-sm btn-success" onclick="addTable()">Tableau</button>
  57.                         <div class="btn-group" role="group">
  58.                             <button id="btnGroupTitre" type="button" class="btn btn-sm btn-success dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></button>
  59.                             <div class="dropdown-menu" aria-labelledby="btnGroupTitre">
  60.                                 <a class="dropdown-item" href="#?" onclick="addDiv()">Div</a>
  61.                             </div>
  62.                         </div>
  63.                     </div>
  65.                 </div>
  66.                 <div class="template-view" ></div>
  67.             </div>
  68.         </div>
  71.             <button class="btn btn-success" type="submit" >Valider</button>
  72.         {{ form_end(templateForm) }}
  73.     </div>
  74.     <div class="off">
  75.         <div id="conditions"></div>
  76.         <div id="options"></div>
  77.         <div id="editors"></div>
  78.         <div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasEntities" aria-labelledby="offcanvasEntitiesLabel">
  79.             <div class="offcanvas-header">
  80.                 <h5 class="offcanvas-title" id="offcanvasEntitiesLabel">Entitées disponible</h5>
  81.                 <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  82.             </div>
  83.             <div class="offcanvas-body">
  84.                 <div class="accordion" id="accordionEntities">
  85.                     {% for entity, fields in entitiesData %}
  86.                         <div class="accordion-item">
  87.                            <h2 class="accordion-header" id="headingOne">
  88.                                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse{{ loop.index }}" aria-expanded="false" aria-controls="collapse{{ loop.index }}">
  89.                                   {{ entity }}
  90.                                </button>
  91.                            </h2>
  92.                            <div id="collapse{{ loop.index }}" class="accordion-collapse collapse" aria-labelledby="heading{{ loop.index }}" data-bs-parent="#accordionEntities">
  93.                                <div class="accordion-body">
  94.                                    <ul>
  95.                                        {% for f in fields %}
  96.                                         <li><a href="#?" onclick="addToTemplate('{{ entity }}','{{ f }}')">{{ f }}</a></li>
  97.                                        {% endfor %}
  98.                                    </ul>
  100.                                </div>
  101.                            </div>
  102.                         </div>
  104.                     {% endfor %}
  105.                 </div>
  106.             </div>
  107.         </div>
  108.         <div class="card border-primary hide editor" id="text-editor">
  109.             <h3 class="card-header">Edition de texte <button onclick="closeCard(this)" type="button" class="btn-close" data-bs-dismiss="text-editor1"></button></h3>
  110.             <div class="card-body">
  113.                 <h6 class="card-subtitle text-muted">Support card subtitle</h6>
  114.             </div>
  115.             <div class="card-body">
  117.                 <div id="text-edit"></div>
  118.                 <button class="btn btn-success valid" >Valider</button>
  119.             </div>
  120.         </div>
  122.         <div class="card border-primary hide editor" id="title-editor">
  123.             <h3 class="card-header">Edition de titre <button onclick="closeCard(this)" type="button" class="btn-close" data-bs-dismiss="title-editor"></button></h3>
  125.             <div class="card-body">
  126.                 <div id="title-edit"></div>
  127.                 <button class="btn btn-success valid" >Valider</button>
  128.             </div>
  129.         </div>
  131.         <div class="card border-info hide editor" id="input-editor">
  132.             <h3 class="card-header">Edition de champ <button onclick="closeCard(this)" type="button" class="btn-close" data-bs-dismiss="title-editor"></button></h3>
  134.             <div class="card-body">
  135.                 <div class="form-group">
  136.                     <label for="nom" class="form-label">Nom du champs</label>
  137.                     <input type="text" class="form-control dbspace" id="nom">
  138.                 </div>
  139.                 <h6>Label</h6>
  140.                 <div id="label-edit"></div>
  141.                 <div class="form-group">
  142.                     <label for="type" class="form-label">Type</label>
  143.                     <select class="form-select" id="type" onchange="updateTypeOptions(this)">
  144.                         <option value="text">Text</option>
  145.                         <option value="textarea">TextArea</option>
  146.                         <option value="select">Select</option>
  147.                         <option value="radio">Radio</option>
  149.                     </select>
  150.                 </div>
  152.                 <div class="type-options">
  153.                     <div class="option text textarea">
  154.                         <div class="form-group">
  155.                             <label class="form-label" for="placeholder">Placeholder</label>
  156.                             <input id="placeholder" type="text" class="form-control" >
  157.                         </div>
  159.                     </div>
  160.                     <div class="option select radio">
  161.                         <div class="form-group">
  162.                             <label class="form-label">Choix</label>
  164.                             <ul class="choix">
  165.                                 <li class="hide" id="template">
  166.                                     <div class="btn-group">
  167.                                         <input type="text" class="form-control" placeholder="Value">
  168.                                         <input type="text" class="form-control" placeholder="Display">
  169.                                         <button type="button" class="btn btn-sm btn-danger" onclick="removeChoix(this)">-</button>
  170.                                     </div>
  171.                                 </li>
  172.                             </ul>
  173.                             <button class="btn btn-success" type="button" onclick="addChoix(this)">+</button>
  174.                         </div>
  175.                     </div>
  176.                 </div>
  178.                 <button class="btn btn-success valid" >Valider</button>
  179.             </div>
  180.         </div>
  182.         <div class="card border-success hide editor" id="table-editor">
  183.             <h3 class="card-header">Edition de tableau <button onclick="closeCard(this)" type="button" class="btn-close" data-bs-dismiss="title-editor"></button></h3>
  185.             <div class="card-body">
  186.                 <div class="form-group">
  187.                     <label for="rows" class="form-label">Lignes</label>
  188.                     <input type="number" class="form-control" id="rows">
  189.                 </div>
  190.                 <div class="form-group">
  191.                     <label for="cols" class="form-label">Colones</label>
  192.                     <input type="number" class="form-control" id="cols">
  193.                 </div>
  194.                 <div class="form-group">
  195.                     <label for="couleur" class="form-label">Couleur</label>
  196.                     <select class="form-select" id="couleur">
  197.                         <option></option>
  198.                         {% for col in ["primary", "secondary", "success", "info", "warning", "danger", "dark", "light"] %}
  199.                         <option value="{{ col }}">{{ col|capitalize }}</option>
  200.                         {% endfor %}
  202.                     </select>
  203.                 </div>
  204.                 <div class="form-group">
  205.                     <label for="border" class="form-label">Bordure</label>
  206.                     <select class="form-select" id="border">
  207.                         <option value="Non">Non</option>
  208.                         <option value="Oui">Oui</option>
  209.                     </select>
  210.                 </div>
  211.                 <div class="form-group">
  212.                     <label for="striped" class="form-label">Rayé</label>
  213.                     <select class="form-select" id="striped">
  214.                         <option value="Non">Non</option>
  215.                         <option value="Oui">Oui</option>
  216.                     </select>
  217.                 </div>
  218.             </div>
  219.             <div class="card-body preview">
  220.                 <h6 class="card-subtitle text-muted">Preview</h6>
  221.                 <table class="table table-bordered table-striped " id="table-view"><tbody></tbody></table>
  222.             </div>
  223.             <div class="card-body">
  225.                 <button class="btn btn-success valid" >Valider</button>
  226.             </div>
  227.         </div>
  229.         <div class="card border-warning hide editor" id="button-editor">
  230.             <h3 class="card-header">Edition de bouton <button onclick="closeCard(this)" type="button" class="btn-close" data-bs-dismiss="title-editor"></button></h3>
  232.             <div class="card-body">
  233.                 <div id="button-edit"></div>
  235.                 <div class="form-group">
  236.                     <label for="size" class="form-label">Taille</label>
  237.                     <select class="form-select" id="size">
  238.                         {% for s,t in {"btn":"normal", "btn-sm":"petit", "btn-lg":"grand"} %}
  239.                             <option value="{{ s }}">{{ t }}</option>
  240.                         {% endfor %}
  242.                     </select>
  243.                 </div>
  244.                 <div class="form-group">
  245.                     <label for="couleur" class="form-label">Couleur</label>
  246.                     <select class="form-select" id="couleur">
  247.                         <option></option>
  248.                         {% for col in ["primary", "secondary", "success", "info", "warning", "danger", "dark", "light", "close"] %}
  249.                             <option value="{{ col }}">{{ col|capitalize }}</option>
  250.                         {% endfor %}
  252.                     </select>
  253.                 </div>
  254.                 <div class="form-group">
  255.                     <label for="type" class="form-label">Type</label>
  256.                     <select class="form-select" id="type">
  257.                         {% for t in ["submit", "reset", "button"] %}
  258.                             <option value="{{ t }}">{{ t }}</option>
  259.                         {% endfor %}
  261.                     </select>
  262.                 </div>
  263.                 <div class="form-group">
  264.                     <label for="action" class="form-label">Action</label>
  265.                     <select class="form-select" id="action">
  266.                         {% for name,acts  in actions|default([]) %}
  267.                             <optgroup label="{{ name }}">
  268.                             {% for a, t in acts %}
  269.                             <option value="{{ a }}">{{ t }}</option>
  270.                             {% endfor %}
  271.                             </optgroup>
  272.                         {% endfor %}
  274.                     </select>
  275.                 </div>
  276.                 <button class="btn btn-success valid" >Valider</button>
  277.             </div>
  278.         </div>
  280.         <div class="card border-success hide editor" id="div-editor">
  281.             <h3 class="card-header">Edition de div <button onclick="closeCard(this)" type="button" class="btn-close" data-bs-dismiss="title-editor"></button></h3>
  283.             <div class="card-body">
  284.                 <div class="form-group">
  285.                     <label for="cols" class="form-label">Colones</label>
  286.                     <input type="number" class="form-control" id="cols">
  287.                 </div>
  288.                 <div class="form-group">
  289.                     <label for="couleur" class="form-label">Couleur</label>
  290.                     <select class="form-select" id="couleur">
  291.                         <option></option>
  292.                         {% for col in ["primary", "secondary", "success", "info", "warning", "danger", "dark", "light"] %}
  293.                         <option value="{{ col }}">{{ col|capitalize }}</option>
  294.                         {% endfor %}
  296.                     </select>
  297.                 </div>
  299.             </div>
  300.             <div class="card-body preview">
  301.                 <h6 class="card-subtitle text-muted">Preview</h6>
  302.                 <div class="alert row" id="div-view"></div>
  303.             </div>
  304.             <div class="card-body">
  306.                 <button class="btn btn-success valid" >Valider</button>
  307.             </div>
  308.         </div>
  310.         <div class="card border-danger hide editor" id="conditions-editor">
  311.             <h3 class="card-header">Editions des conditions <button onclick="closeCard(this)" type="button" class="btn-close" data-bs-dismiss="title-editor"></button></h3>
  313.             <div class="card-body">
  314.                 <div class="option">
  315.                     <div class="form-group">
  316.                         <table class="choix table">
  317.                             <thead>
  318.                             <tr>
  319.                                 <th>Action</th>
  320.                                 <th>Champs</th>
  321.                                 <th colspan="3">Condition</th>
  322.                             </tr>
  323.                             </thead>
  324.                             <tbody>
  325.                                 <tr class="hide" id="template">
  326.                                     <td>
  327.                                         <select class="form-select" id="act" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-original-title="Tooltip on top">
  328.                                             <option value="show">Afficher</option>
  329.                                             <option value="hide">Cacher</option>
  330.                                             <option value="readOnly">Lecture seule</option>
  331.                                             <option value="disabled">Désactivé</option>
  332.                                         </select>
  333.                                     </td>
  334.                                     <td>
  336.                                         <select class="form-select" id="champs"  data-bs-toggle="tooltip" data-bs-placement="top" data-bs-original-title="Tooltip on top"></select>
  337.                                         <input type="text" class="form-control hide" placeholder="champ entité">
  338.                                     </td>
  339.                                     <td>
  340.                                         <select class="form-select">
  341.                                                 <option value="=">Egal</option>
  342.                                                 <option value=">">Sup</option>
  343.                                                 <option value=">=">Sup ou égal</option>
  344.                                                 <option value="<">Inférieur</option>
  345.                                                 <option value="<=">Inférieur ou égal</option>
  346.                                                 <option value="start">Commence par</option>
  347.                                                 <option value="end">Fini par</option>
  348.                                                 <option value="cont">Contient</option>
  349.                                             </select>
  350.                                     </td>
  351.                                     <td>
  352.                                         <input type="text" class="form-control" placeholder="condition">
  353.                                     </td>
  354.                                     <td>
  355.                                         <button type="button" class="btn btn-sm btn-danger" onclick="removeCondition(this)">-</button>
  356.                                     </td>
  357.                                 </tr>
  358.                             </tbody>
  361.                         </table>
  362.                         <button class="btn btn-success" type="button" onclick="addCondition(this)">+</button>
  363.                     </div>
  364.                 </div>
  367.                 <button class="btn btn-success valid" >Valider</button>
  368.             </div>
  369.         </div>
  370.         <div class="card border-dark hide editor" id="options-editor">
  371.             <h3 class="card-header">Editions des options <button onclick="closeCard(this)" type="button" class="btn-close" data-bs-dismiss="title-editor"></button></h3>
  373.             <div class="card-body">
  374.                 <div class="form-group">
  375.                     <label for="rows" class="form-label">Défaut</label>
  376.                     <select class="form-select" id="act">
  377.                         <option value="show">Afficher</option>
  378.                         <option value="hide">Cacher</option>
  379.                         <option value="readOnly">Lecture seule</option>
  380.                         <option value="disabled">Désactivé</option>
  381.                     </select>                </div>
  382.                 <div class="form-group">
  383.                     <label for="rows" class="form-label">Classes</label>
  384.                     <input type="text" class="form-control" id="classes">
  385.                 </div>
  386.                 <div class="form-group">
  387.                     <label for="css" class="form-label">CSS</label>
  388.                     <textarea  class="form-control" id="css"></textarea>
  389.                 </div>
  391.                 <button class="btn btn-success valid" >Valider</button>
  392.             </div>
  393.         </div>
  397.     </div>
  405. {% endblock %}
  407. {% block title %}
  408. Nouvelle template
  409. {% endblock %}
  410. {% block javascripts %}
  411.     <script>
  413.         let toolbarOptions = [
  414.             ['bold', 'italic', 'underline', 'strike'],        // toggled buttons
  415.             ['blockquote', 'code-block'],
  416.             ['link', 'image'],
  418.             [{ 'list': 'ordered'}, { 'list': 'bullet' }],
  419.             [{ 'script': 'sub'}, { 'script': 'super' }],      // superscript/subscript
  420.             [{ 'indent': '-1'}, { 'indent': '+1' }],          // outdent/indent
  421.             [{ 'direction': 'rtl' }],                         // text direction
  423.             [{ 'header': [1, 2, 3, 4, 5, 6, false] }],
  425.             [{ 'color': [] }, { 'background': [] }],          // dropdown with defaults from theme
  426.             [{ 'font': [] }],
  427.             [{ 'align': [] }],
  429.             ['clean']                                         // remove formatting button
  430.         ];
  432.         let curElement=null;
  433.         let curContainer=null;
  434.         let dropped = false;
  439.         //Editors
  440.         function openTextEditor(e) {
  441.             let type="text-editor"
  442.             let [editor, cid, target] = openEditor(type, e)
  443.             if(editor===null)
  444.                 return
  445.             let textEdit =editor.find("#text-edit")
  446.             textEdit.attr("id", "text-edit"+cid)
  447.             textEdit.html(target.html())
  448.             editor.find(".valid").click(validTextEditor)
  450.             editor.show()
  455.             var quill = addQuillEditor('#text-edit'+cid)
  456.         }
  457.         function openTitleEditor(e) {
  458.             let type="title-editor"
  459.             let [editor, cid, target] = openEditor(type, e)
  460.             if(editor===null)
  461.                 return
  462.             let textEdit =editor.find("#title-edit")
  463.             textEdit.attr("id", "title-edit"+cid)
  464.             textEdit.html(target.html())
  465.             editor.find(".valid").click(validTitleEditor)
  467.             editor.show()
  471.             var quill = addQuillEditor('#title-edit'+cid)
  472.         }
  473.         function openInputEditor(e) {
  474.             let type="input-editor"
  475.             let [editor, cid, target] = openEditor(type, e)
  476.             if(editor===null)
  477.                 return
  478.             let nomEdit =editor.find("#nom")
  479.             let nomTarget = target.find("input, select, textarea").attr("name")??""
  480.             nomEdit.val(nomTarget.replaceAll("_", " "))
  482.             let input= target.find("input, select, textarea")
  483.             let inputType = getInputType(input)
  484.             let typeEdit =editor.find("#type")
  485.             typeEdit.val(inputType)
  487.             updateTypeOptions(typeEdit)
  489.             let labelEdit =editor.find("#label-edit")
  490.             labelEdit.attr("id", "label-edit"+cid)
  491.             labelEdit.html(target.find("label").html())
  493.             setCustomData(editor, getCustomData(input))
  494.             editor.find(".valid").click(validInputEditor)
  496.             editor.show()
  498.             var quill = addQuillEditor('#label-edit'+cid)
  500.         }
  501.         function openTableEditor(e) {
  502.             let type="table-editor"
  503.             let [editor, cid, target] = openEditor(type, e)
  504.             if(editor===null)
  505.                 return
  507.             let couleur = target.getClassStartingWith('table-', ["table-bordered", "table-striped"])??"";
  508.             editor.find("#couleur").val(couleur.replace("table-", ""))
  510.             editor.on("input", updateTablePreview)
  513.             let border = target.hasClass("table-bordered")?"Oui":"Non";
  514.             editor.find("#border").val(border)
  516.             let striped = target.hasClass("table-striped")?"Oui":"Non";
  517.             editor.find("#striped").val(striped)
  519.             let rows = target.find("tr").length;
  520.             editor.find("#rows").val(rows)
  521.             let cols = target.find("tr:first td").length;
  522.             editor.find("#cols").val(cols)
  524.             let tableView =editor.find("#table-view")
  525.             $(target.html()).appendTo(tableView)
  526.             resetDrag(tableView.find(".updatable"))
  527.             editor.find(".valid").click(validTableEditor)
  529.             editor.show()
  530.             updateTablePreview({target:editor})
  533.         }
  534.         function openButtonEditor(e) {
  535.             let type="button-editor"
  536.             let [editor, cid, target] = openEditor(type, e)
  537.             if(editor.length===0)
  538.                 return
  539.             let button = $(target.find("button"))
  540.             console.log(button, target)
  542.             let couleur = button.getClassStartingWith('btn-',["btn-lg", "btn-sm"])??"";
  543.             editor.find("#couleur").val(couleur.replace("btn-", ""))
  545.             let size = button.hasClass("btn-lg")?"btn-lg":(button.hasClass("btn-sm")?"btn-sm":"btn")
  546.             editor.find("#size").val(size)
  548.             let typeBt = button.attr("type")??"submit"
  549.             editor.find("#type").val(typeBt)
  551.             let action = button.attr("action")??"submit"
  552.             editor.find("#action").val(action)
  556.             let buttonEdit =editor.find("#button-edit")
  557.             buttonEdit.attr("id", "button-edit"+cid)
  558.             buttonEdit.html(button.html())
  560.             editor.find(".valid").click(validButtonEditor)
  562.             var quill = addQuillEditor('#button-edit'+cid)
  564.             editor.show()
  567.         }
  568.         function openDivEditor(e) {
  569.             let type="div-editor"
  570.             let [editor, cid, target] = openEditor(type, e)
  571.             if(editor===null)
  572.                 return
  574.             let couleur = target.getClassStartingWith('alert-')??"";
  575.             editor.find("#couleur").val(couleur.replace("alert-", ""))
  577.             editor.on("input", updateDivPreview)
  579.             let cols = target.find(".col").length;
  580.             editor.find("#cols").val(cols)
  582.             let tableView =editor.find("#div-view")
  583.             $(target.html()).appendTo(tableView)
  584.             resetDrag(tableView.find(".updatable"))
  585.             editor.find(".valid").click(validDivEditor)
  587.             editor.show()
  588.             updateDivPreview({target:editor})
  591.         }
  592.         function openConditionsEditor(e) {
  594.             let type="conditions-editor"
  595.             let [editor, cid, target] = openEditor(type, e)
  596.             if(editor===null)
  597.                 return
  598.             let champs = editor.find("#template #champs")
  599.             $(".template-view").find("input, textarea, select").each(function () {
  600.                 let id = $(this).attr("id")
  601.                 champs.append(`<option value='${id}'>${id}</option>`)
  602.             })
  603.             champs.append(`<option value='entity'>Entité</option>`)
  604.             let conditions = $(".off #conditions")
  605.             let div = conditions.find("#"+cid)
  606.             if(div.length>0){
  607.                 div.find(".conds").each(function () {
  608.                     let values = $(this).text().split("%%")
  609.                     editor.find(".btn.btn-success").click()
  610.                     let tr =editor.find("table tr:last")
  611.                     tr.find("select:eq(0)").val(values[0])
  612.                     tr.find("select:eq(1)").val(values[1])
  613.                     tr.find("input:eq(0)").val(values[2])
  614.                     tr.find("input:eq(0)").toggle( values[1] === "entity")
  615.                     tr.find("select:eq(2)").val(values[3])
  616.                     tr.find("input:eq(1)").val(values[4])
  617.                 })
  618.             }
  619.             editor.find(".valid").click(validConditionEditor)
  624.             editor.show()
  627.         }
  628.         function openOptionsEditor(e) {
  630.             let type="options-editor"
  631.             let [editor, cid, target] = openEditor(type, e)
  632.             if(editor===null)
  633.                 return
  635.             let options = $(".off #options")
  636.             let div = options.find("#"+cid)
  637.             if(div.length>0){
  638.                 let values = div.text().split("%%")
  639.                 editor.find("select").val(values[0])
  640.                 editor.find("input").val(values[1])
  641.                 editor.find("textarea").val(values[2])
  642.             }
  644.             editor.find(".valid").click(validOptionsEditor)
  648.             editor.show()
  651.             //var quill = addQuillEditor('#text-edit'+cid)
  652.         }
  654.         function openEditor(type, e) {
  655.             let target = ["conditions-editor", "options-editor"].includes(type)?($(e.target).hasClass("updatable")? $(e.target):$(e.target).parents(".updatable"))  :($(e.target).hasClass("has-"+type)? $(e.target):$(e.target).parents(".has-"+type))
  656.             let cid= target.attr("cid")
  657.             if($("#new-"+type+cid).length>0)
  658.                 return [null, null, null]
  659.             let editor = $("#"+type).clone()
  660.             editor.attr("id","new-"+type+cid)
  661.             editor.appendTo("#editors")
  663.             let count = $(".editor:visible").length
  664.             let left =window.innerWidth/2 -editor.outerWidth()/2  + count *20
  665.             let top = window.innerHeight/2 - editor.outerHeight()/2+ count *20
  666.             editor.css({
  667.                 left:left,
  668.                 top:top
  669.             })
  670.             editor.draggable({
  671.                 handle: "h3.card-header",
  672.                 containment : "window",
  673.                 iframeFix: true,
  674.                 start:function () {
  675.                     let modal = $(this)
  676.                     modal.parent().append(modal)
  677.                     target.addClass("dragging")
  679.                 },
  680.                 drag:function () {
  682.                 },
  683.                 stop:function () {
  684.                     target.removeClass("dragging")
  685.                 }
  686.             });
  687.             return [editor, cid, target];
  688.         }
  689.         function openGoodEditor(event) {
  690.             let el = $(this)
  691.             let editorType= $(el).getClassStartingWith("has-")??""
  692.             switch (editorType){
  693.                 case "has-text-editor":
  694.                     openTextEditor(event)
  695.                     break;
  696.                 case "has-title-editor":
  697.                     openTitleEditor(event)
  698.                     break;
  699.                 case "has-input-editor":
  700.                     openInputEditor(event)
  701.                     break;
  702.                 case "has-table-editor":
  703.                     openTableEditor(event)
  704.                     break;
  705.                 case "has-div-editor":
  706.                     openDivEditor(event)
  707.                     break;
  708.                 case "has-button-editor":
  709.                     openButtonEditor(event)
  710.                     break;
  711.             }
  712.         }
  714.         //Editors option
  715.         function addQuillEditor(el) {
  716.             var quill = new Quill(el, {
  717.                 theme: 'snow',
  718.                 modules:{
  719.                     toolbar:toolbarOptions
  720.                 }
  721.             });
  722.         }
  724.         function addCondition(el) {
  725.             let div =$(el).parents(".option").find(".choix")
  726.             let template =div.find("#template").clone()
  727.             template = template.attr("id", "")
  728.             template = template.removeClass("hide")
  729.             div.append(template)
  730.         }
  731.         function removeCondition(el) {
  732.             $(el).parents("tr").slideUp("normal", function () {
  733.                 $(el).parents("tr").remove()
  734.             })
  735.         }
  737.         function addChoix(el) {
  738.             let div =$(el).parents(".option").find(".choix")
  739.             let template =div.find("#template").clone()
  740.             template = template.attr("id", "")
  741.             template = template.removeClass("hide")
  742.             div.append(template)
  743.         }
  744.         function removeChoix(el) {
  745.             $(el).parents("li").slideUp("normal", function () {
  746.                 $(el).parents("li").remove()
  747.             })
  748.         }
  752.         function updateTypeOptions(el) {
  753.             let val = $(el).val()
  754.             let options = $(el).parents(".editor").find(".type-options")
  755.             options.find(".option").hide()
  756.             options.find("."+val).show()
  757.         }
  759.         function getInputType(el) {
  760.             if ($(el).is("input")){
  761.                 if($(el).is(":text"))return "text";
  762.                 if($(el).is(":radio"))return "radio";
  763.             }
  764.             if ($(el).is("textarea") ) return "textarea";
  765.             if ($(el).is("select") )return "select";
  767.         }
  768.         function getCustomData(input) {
  769.             let custom ={}
  770.             let type = getInputType(input)
  771.             switch (type){
  772.                 case "text":
  773.                 case "textarea":
  774.                     custom["placeholder"]=input.attr("placeholder")
  775.                     break;
  776.                 case "select":
  777.                     custom["choix"]={}
  778.                     input.find("option").each(function () {
  779.                         custom["choix"][$(this).val()]=$(this).text()
  780.                     })
  781.                     break;
  782.             }
  783.             return custom
  785.         }
  786.         function setCustomData(editor, custom) {
  787.             if(custom["placeholder"]){
  788.                 editor.find("#placeholder").val(custom["placeholder"])
  789.             }
  790.             if(custom["choix"]){
  791.                 let choix = editor.find(".choix").parents(".option")
  793.                 for (const [key, value] of Object.entries(custom["choix"])) {
  794.                     if(key==="" && value==="")
  795.                         continue
  796.                     addChoix(choix.find(".btn.btn-success"))
  797.                     let li = choix.find("li:not(#tempalte):last")
  798.                     li.find("input:eq(0)").val(key)
  799.                     li.find("input:eq(1)").val(value)
  800.                 }
  801.             }
  802.         }
  804.         //Save editors
  805.         function validTextEditor(e) {
  806.             let editor =  $(e.target).parents(".editor")
  807.             let html =editor.find(".ql-editor").html()
  808.             let id = editor.attr("id").replace("new-text-editor", "")
  809.             $(".has-text-editor[cid='"+id+"']").html(html)
  811.             editor.slideUp("normal", ()=>{
  812.                 editor.remove()
  813.             })
  814.         }
  815.         function validTitleEditor(e) {
  816.             let editor =  $(e.target).parents(".editor")
  817.             let html =editor.find(".ql-editor").html()
  818.             let id = editor.attr("id").replace("new-title-editor", "")
  819.             $(".has-title-editor[cid='"+id+"']").html(html)
  822.             editor.slideUp("normal", ()=>{
  823.                 editor.remove()
  824.             })
  825.         }
  826.         function validInputEditor(e) {
  827.             let editor =  $(e.target).parents(".editor")
  828.             let html =editor.find(".ql-editor").html()
  829.             let id = editor.attr("id").replace("new-input-editor", "")
  830.             let type = editor.find("#type").val()
  831.             let nom = editor.find("#nom").val().replaceAll(" ", "_").trim()
  832.             let div = $(".has-input-editor[cid='"+id+"']")
  833.             let exnom=div.find("input, select, textarea").attr("id")
  835.             div.html("")
  837.             div.append("<label for='"+nom+"'>"+html+"</label>")
  838.             let input =""
  839.             switch (type) {
  840.                 case "text":
  841.                 case "textarea":
  842.                     let placeholder = editor.find("#placeholder").val()
  843.                     input=$(type==="text"?"<input readonly class='form-control'>":"<textarea readonly class='form-control'>")
  844.                     input.attr("placeholder", placeholder)
  845.                     break;
  846.                 case "select":
  847.                     input = $("<select readonly class='form-select'>")
  848.                     let choix = editor.find(".choix li:not(#tempalte)")
  849.                     choix.each(function () {
  850.                         let v =$(this).find("input:eq(0)").val()
  851.                         let d =$(this).find("input:eq(1)").val()
  852.                         $(input).append("<option value='"+v+"'>"+d+"</option>")
  853.                     })
  854.                     break;
  855.             }
  857.             if(exnom!==nom){
  858.                 $(".off #conditions .conds").each(function () {
  859.                     let val  = $(this).text()
  860.                     if(val.includes("%%"+exnom+"%%"))
  861.                         $(this).text( $(this).text().replace("%%"+exnom+"%%", "%%"+nom+"%%"))
  862.                 })
  864.             }
  865.             $(input).attr("name", nom)
  867.             $(input).attr("id", nom)
  868.             div.append(input)
  871.             editor.slideUp("normal", ()=>{
  872.                 editor.remove()
  873.             })
  874.         }
  875.         function validTableEditor(e) {
  876.             let editor =  $(e.target).parents(".editor")
  877.             let id = editor.attr("id").replace("new-table-editor", "")
  880.             let couleur = editor.find("#couleur").val()
  881.             let border = editor.find("#border").val()==="Oui"
  882.             let striped = editor.find("#striped").val()==="Oui"
  884.             let div = $(".has-table-editor[cid='"+id+"']")
  885.             div.removeClass("table-primary table-secondary table-success table-info table-warning table-danger table-light table-dark")
  886.             if(couleur!=="")
  887.                 div.addClass("table-"+couleur)
  888.             div.toggleClass( "table-bordered",border)
  889.             div.toggleClass( "table-striped",striped)
  890.             let preview = editor.find("#table-view")
  892.             div.html(preview.html())
  893.             div.find(".updatable").css({
  894.                 position: "",
  895.                 left: "",
  896.                 top: "",
  897.             })
  901.             editor.slideUp("normal", ()=>{
  902.                 editor.remove()
  903.             })
  904.         }
  905.         function validButtonEditor(e) {
  906.             let editor =  $(e.target).parents(".editor")
  907.             let id = editor.attr("id").replace("new-button-editor", "")
  909.             let couleur = editor.find("#couleur").val()
  910.             let type = editor.find("#type").val()
  911.             let size = editor.find("#size").val()
  912.             let action = editor.find("#action").val()
  914.             let div = $(".has-button-editor[cid='"+id+"']")
  915.             let button = $(div.find("button"))
  916.             button.removeClass()
  918.             button.addClass("btn")
  919.             button.addClass(size)
  920.             button.addClass("btn-"+couleur)
  921.             button.attr("type",type)
  922.             button.attr("action",action)
  923.             let html =editor.find(".ql-editor").html()
  924.             button.html(html)
  926.             div.find(".updatable").css({
  927.                 position: "",
  928.                 left: "",
  929.                 top: "",
  930.             })
  934.             editor.slideUp("normal", ()=>{
  935.                 editor.remove()
  936.             })
  937.         }
  938.         function validDivEditor(e) {
  939.             let editor =  $(e.target).parents(".editor")
  940.             let id = editor.attr("id").replace("new-div-editor", "")
  943.             let couleur = editor.find("#couleur").val()
  945.             let div = $(".has-div-editor[cid='"+id+"']")
  946.             div.removeClass("alert-primary alert-secondary alert-success alert-info alert-warning alert-danger alert-light alert-dark")
  947.             if(couleur!=="")
  948.                 div.addClass("alert-"+couleur)
  949.             let preview = editor.find("#div-view")
  951.             div.html(preview.html())
  952.             div.find(".updatable").css({
  953.                 position: "",
  954.                 left: "",
  955.                 top: "",
  956.             })
  960.             editor.slideUp("normal", ()=>{
  961.                 editor.remove()
  962.             })
  963.         }
  964.         function validConditionEditor(e) {
  965.             let editor =  $(e.target).parents(".editor")
  966.             let id = editor.attr("id").replace("new-conditions-editor", "")
  968.             let conditions = $(".off #conditions")
  969.             let div = $(conditions.find("#"+id)[0]?? "<div id='"+id+"'></div>")
  970.             div.html("")
  972.             editor.find("table tbody tr:visible").each(function () {
  973.                 let vals =[]
  974.                 $(this).find("select, input, textarea").each(function () {
  975.                     vals.push($(this).val())
  976.                 })
  977.                 div.append("<div class='conds'>"+vals.join("%%")+"</div")
  978.             })
  979.             div.appendTo(conditions)
  984.             editor.slideUp("normal", ()=>{
  985.                 editor.remove()
  986.             })
  987.         }
  989.         function validOptionsEditor(e) {
  990.             let editor =  $(e.target).parents(".editor")
  991.             let id = editor.attr("id").replace("new-options-editor", "")
  993.             let options = $(".off #options")
  994.             let div = $(options.find("#"+id)[0]?? "<div id='"+id+"'></div>")
  995.             div.html("")
  997.             let vals=[];
  998.             editor.find("select, input, textarea").each(function () {
  999.                 vals.push($(this).val())
  1000.             })
  1001.             div.append("<div class='options'>"+vals.join("%%")+"</div")
  1003.             div.appendTo(options)
  1008.             editor.slideUp("normal", ()=>{
  1009.                 editor.remove()
  1010.             })
  1011.         }
  1013.         //Parametres
  1014.         function addToParams(entity) {
  1016.             let params = $("#parametres-fields-list")
  1017.             let inputs = params.find("input")
  1018.             let [vals , input ]=getEmptyInputs(inputs)
  1020.             if (!vals.includes(entity)) {
  1021.                 if (input === null) {
  1023.                     $("#addParam").click()
  1024.                     inputs = params.find("input")
  1025.                     input = getEmptyInputs(inputs)[1]
  1026.                 }
  1027.                 input.val(entity)
  1029.             }
  1030.         }
  1031.         function getEmptyInputs(inputs ) {
  1032.             let vals =[]
  1033.             let input = null
  1034.             $(inputs).each(function () {
  1035.                 let val = $(this).val()
  1036.                 if (val === "") {
  1037.                     input = $(this)
  1038.                 }
  1039.                 vals.push(val)
  1041.             })
  1042.             return [ vals, input]
  1044.         }
  1045.         function addToTemplate(entity, field) {
  1046.             let value="<{"+entity.toLowerCase()+"."+field+"}>"
  1049.             let update=$(".template-view .updating")
  1051.             if(update.length===1){
  1052.                 addToParams(entity.toLowerCase())
  1053.                 addToElement(value, update)
  1054.             }
  1055.             $("#offcanvasEntities .offcanvas-header .btn-close").click()
  1056.         }
  1058.         //Add Elements
  1059.         function addInput(bool=false){
  1060.             let input = "<div class='form-group updatable has-input-editor'><label>Label</label><input readonly class='form-control'></div>"
  1061.             addElement(input, bool)
  1062.         }
  1063.         function addText(bool=false) {
  1064.             let txt= "<div class='has-text-editor'><p>Texte</p></div>"
  1065.             addElement(txt, bool)
  1066.         }
  1067.         function addBr(bool=false) {
  1068.             let txt= "<div class='br updatable'><br></div>"
  1069.             addElement(txt, false)
  1070.         }
  1071.         function addTable(bool=false) {
  1072.             let table= "<table class='updatable table has-table-editor'><tr><td>Case 1</td><td>Case 2</td></tr></table>"
  1073.             addElement(table, bool)
  1074.         }
  1075.         function addDiv(bool=false) {
  1076.             let div = '<div class="row alert updatable has-div-editor"><div class="col">col</div><div class="col">col</div>'
  1077.             addElement(div, bool)
  1078.         }
  1079.         function addTitre(h=1, bool=false) {
  1080.             let txt= "<div class='has-title-editor'><h"+h+">Texte</h"+h+"></div"
  1081.             addElement(txt, bool)
  1082.         }
  1083.         function addButton( bool=false) {
  1084.             let txt= "<div class='has-button-editor'><button>Texte</button></div>"
  1085.             addElement(txt, bool)
  1086.         }
  1087.         function addElement(el, local=false, addId=true) {
  1088.             let view = local?$(curContainer):$(".template-view")
  1089.             el = $(el).addClass("updatable")
  1090.             if (addId)
  1091.                 el.attr("cid", Date.now())
  1092.             view.append(el)
  1093.             resetDrag($(el))
  1095.         }
  1096.         function addToElement(value, to) {
  1097.             let txt = $(to).text()
  1098.             $(to).text(txt+(txt===""?"":" ")+value)
  1099.         }
  1101.         //Elements options
  1102.         function editElement(e) {
  1103.             let target = $(e.target)
  1104.             target = target.hasClass("updatable")?target:target.parents('.updatable')
  1105.             let bool = !target.hasClass("updating")
  1106.             $(".template-view *").removeClass("updating")
  1107.             target.toggleClass("updating",bool )
  1108.         }
  1109.         function updateTablePreview(e) {
  1110.             let editor =$(e.target).hasClass("editor")? $(e.target):$(e.target).parents(".editor")
  1111.             let preview = editor.find("#table-view")
  1112.             let rows = editor.find("#rows").val()
  1113.             let cols = editor.find("#cols").val()
  1114.             let border = editor.find("#border").val()==="Oui"
  1115.             let striped = editor.find("#striped").val()==="Oui"
  1116.             let couleur = editor.find("#couleur").val()
  1118.             preview.removeClass("table-primary table-secondary table-success table-info table-warning table-danger table-light table-dark")
  1119.             if(couleur!=="")
  1120.                 preview.addClass("table-"+couleur)
  1121.             preview.toggleClass( "table-bordered",border)
  1122.             preview.toggleClass( "table-striped",striped)
  1124.             let resRows= rows-preview.find("tr").length
  1125.             if(resRows<0){
  1126.                 for (let i = resRows; i <0 ; i++) {
  1127.                     preview.find("tr:last").remove()
  1128.                 }
  1129.             }
  1130.             else if (resRows>0) {
  1131.                 preview.append("<tr></tr>".repeat(resRows))
  1132.             }
  1134.             let resCols= cols-preview.find("tr:first td").length
  1135.             if(resCols<0){
  1136.                 for (let i = resCols; i <0 ; i++) {
  1137.                     preview.find("tr").find("td:last").remove()
  1138.                 }
  1139.             }
  1140.             preview.find("tr").each(function () {
  1141.                     if(cols > $(this).find("td").length)
  1142.                         $(this).append("<td>Case</td>".repeat(cols - $(this).find("td").length))
  1143.             })
  1144.             preview.find("td").droppable({
  1145.                 accept:".updatable",
  1146.                 tolerance: "pointer",
  1147.                 classes: {
  1148.                     "ui-droppable-hover": "ui-state-highlight"
  1149.                 },
  1150.                 over:function (event, ui) {
  1153.                 },
  1154.                 drop: function( event, ui ) {
  1156.                     dropped = $(this);
  1157.                     let id =editor.attr("id")
  1158.                     let matches = id.match(/(\d+)/);
  1160.                     if($(ui.draggable).attr("cid")===matches[0]??""){
  1161.                         $(ui.draggable).appendTo(".template-view")
  1162.                     }
  1163.                     else {
  1164.                         $(ui.draggable).appendTo($(this))
  1166.                     }
  1167.                     $(ui.draggable).css({
  1168.                         position: "",
  1169.                         left: "0",
  1170.                         top: "0",
  1171.                         "z-index": 1,
  1172.                     })
  1173.                 }
  1174.             })
  1175.             preview.on("dblclick", ".updatable",openGoodEditor);
  1176.             preview.on("contextmenu", "tbody>tr>td",openContextAddMenu);
  1177.             preview.on("contextmenu", ".updatable",openContextMenu);
  1181.         }
  1182.         function updateDivPreview(e) {
  1183.             let editor =$(e.target).hasClass("editor")? $(e.target):$(e.target).parents(".editor")
  1184.             let preview = editor.find("#div-view")
  1185.             let cols = editor.find("#cols").val()
  1186.             let couleur = editor.find("#couleur").val()
  1188.             preview.removeClass("alert-primary alert-secondary alert-success alert-info alert-warning alert-danger alert-light alert-dark")
  1189.             if(couleur!=="")
  1190.                 preview.addClass("alert-"+couleur)
  1193.             let resCols= cols-preview.find(".col").length
  1194.             if(resCols<0){
  1195.                 for (let i = resCols; i <0 ; i++) {
  1196.                     preview.find(".col:last").remove()
  1197.                 }
  1198.             }
  1199.             else if(resCols>0){
  1200.                 preview.append("<div class='col'>Col</div>".repeat(resCols))
  1201.             }
  1203.             preview.find("div.col").droppable({
  1204.                 accept:".updatable",
  1205.                 tolerance: "pointer",
  1206.                 greedy: true,
  1207.                 classes: {
  1208.                     "ui-droppable-hover": "ui-state-highlight"
  1209.                 },
  1210.                 over:function (event, ui) {
  1213.                 },
  1214.                 drop: function( event, ui ) {
  1216.                     dropped = $(this);
  1217.                     let id =editor.attr("id")
  1218.                     let matches = id.match(/(\d+)/);
  1220.                     if($(ui.draggable).attr("cid")===matches[0]??""){
  1221.                         $(ui.draggable).appendTo(".template-view")
  1222.                     }
  1223.                     else {
  1224.                         let res = $(ui.draggable).appendTo($(this))
  1225.                     }
  1226.                     $(ui.draggable).css({
  1227.                         position: "",
  1228.                         left: "0",
  1229.                         top: "0",
  1230.                         "z-index": 1,
  1232.                     })
  1233.                 }
  1234.             })
  1235.             preview.on("dblclick", ".updatable",openGoodEditor);
  1237.             preview.on("contextmenu", "div.col",openContextAddMenu);
  1238.             preview.on("contextmenu", ".updatable",openContextMenu);
  1241.         }
  1242.         function resetDrag(el) {
  1243.             el.draggable({
  1244.                 revert: "invalid",
  1245.                 connectToSortable: ".template-view",
  1246.                 cursorAt: { top: -5, left: -5 },
  1247.                 iframeFix: true,
  1248.                 stop: function() {
  1249.                    $(this).css({
  1250.                        position: "relative",
  1251.                        width:"",
  1252.                        height:""
  1253.                    })
  1254.                 }
  1255.             });
  1256.         }
  1257.         function setSortable(template) {
  1258.             template.sortable({
  1259.                 placeholder: "ui-state-highlight",
  1260.                 cursor: "move",
  1262.                 stop: function(event, ui) {
  1263.                     if (dropped!==false) {
  1264.                         $(this).sortable("cancel");
  1265.                         ui.item.appendTo($(dropped));
  1266.                         dropped = false;
  1267.                     }
  1268.                 },
  1269.                 /*stop: function(event, ui) {
  1270.                     console.log("stop", event)
  1272.                     if (ui.item.hasClass("has-text-editor"))
  1273.                         $(this).sortable("cancel");
  1274.                     $(this).sortable("enable");
  1276.                 },*/
  1277.                 receive: function(event, ui) {
  1278.                     console.log("receive")
  1279.                 }
  1281.             })
  1283.         }
  1286.         //Context Menu
  1287.         function openContextMenu(event) {
  1288.             event.preventDefault();
  1289.             event.stopPropagation();
  1290.             curElement=event.currentTarget
  1291.             contextMenu(event)
  1292.         }
  1293.         function openContextAddMenu(event) {
  1294.             event.preventDefault();
  1295.             event.stopPropagation();
  1296.             curContainer=event.currentTarget
  1297.             contextMenu(event, "custom-context-add-menu")
  1298.         }
  1300.         //Context Menu Action
  1301.         function supprimer() {
  1304.             if(curElement!=null){
  1305.                 let supp = $(curElement)
  1306.                 let clss = supp.getClassStartingWith("has-")??""
  1307.                 let cid = supp.attr("cid")
  1308.                 let name = clss.replace("has-", "new-")+cid
  1309.                 let editor = $("#"+name)
  1310.                 $(".off #conditions #"+cid).remove()
  1311.                 $(".off #options #"+cid).remove()
  1314.                 editor.fadeOut("normal", ()=>editor.remove())
  1315.                 supp.slideUp("normal", ()=>supp.remove())
  1317.             }
  1318.             curElement=null
  1319.         }
  1320.         function dupliquer() {
  1322.             if(curElement!=null){
  1323.                 let el = $(curElement)
  1324.                 let clone = $(el.clone())
  1325.                 let curCid = el.attr("cid")
  1327.                 resetDrag(clone)
  1328.                 clone.insertBefore(el)
  1330.                 let cid =Date.now()
  1331.                 el.attr("cid", cid)
  1333.                 let curConditions =$(".off #conditions #"+curCid)
  1334.                 let cloneConditions =curConditions.clone()
  1335.                 cloneConditions.attr("id", cid)
  1336.                 $(".off #conditions").append(cloneConditions)
  1338.                 let curOptions =$(".off #options #"+curCid)
  1339.                 let cloneOptions =curOptions.clone()
  1340.                 cloneOptions.attr("id", cid)
  1341.                 $(".off #options").append(cloneOptions)
  1348.             }
  1349.             curElement=null
  1350.         }
  1351.         function conditions(e) {
  1352.             if(curElement!=null){
  1353.                 openConditionsEditor({
  1354.                     target:curElement,
  1355.                     pageX:(window).event.pageX,
  1356.                     pageY:(window).event.pageY,
  1357.                 })
  1358.             }
  1359.             curElement=null
  1360.         }
  1361.         function options(e) {
  1362.             if(curElement!=null){
  1363.                 openOptionsEditor({
  1364.                     target:curElement,
  1365.                     pageX:(window).event.pageX,
  1366.                     pageY:(window).event.pageY,
  1367.                 })
  1368.             }
  1369.             curElement=null
  1370.         }
  1372.         //Save
  1373.         function saveTemplate(e) {
  1374.             e.preventDefault()
  1375.             let html =$(".template-view").html()
  1376.             let conditions = $(".off #conditions ").html()
  1377.             let options = $(".off #options ").html()
  1378.             let res = {}
  1379.             res["html"]=html
  1380.             res["conditions"]=conditions
  1381.             res["options"]=options
  1383.             res["conditions_array"]={}
  1384.             $(".off #conditions>div").each(function(){
  1385.                 let id = $(this).attr("id")
  1386.                 res["conditions_array"][id]=[]
  1387.                 $(this).find(".conds").each(function(){
  1388.                     res["conditions_array"][id].push($(this).html())
  1389.                 })
  1390.             })
  1391.             $("#template_data").val(JSON.stringify(res))
  1392.             $.ajax({
  1393.                 url:"{{ path('app_template_save') }}",
  1394.                 data:$("#form-template").serializeArray(),
  1395.                 method:"POST",
  1396.                 success:function () {
  1397.                     notify("Template", "La Template <i>"+$("#template_titre").val()+"</i> a été enregistré")
  1398.                 }
  1399.             })
  1400.             return false
  1401.         }
  1403.         $(document).ready(function() {
  1406.             addMenu( "custom-context-menu", {
  1407.                 "Supprimer":"supprimer()",
  1408.                 "Dupliquer":"dupliquer()",
  1409.                 "Options":"options(this)",
  1410.                 "Conditions":"conditions(this)",
  1411.                 "Option b":"",
  1412.             },".off")
  1415.             addMenu( "custom-context-add-menu", {
  1416.                 "Titre":"addTitre(1,true)",
  1417.                 "Texte":"addText(true)",
  1418.                 "Input":"addInput(true)",
  1419.                 "Bouton":"addButton(true)",
  1420.                 "Option a":"alert('OK')",
  1421.                 "Option b":"",
  1422.             },".off")
  1424.             let template = $(".template-view")
  1425.             template.on("contextmenu", ">.updatable",openContextMenu);
  1426.             template.on("click", ">.updatable",editElement)
  1427.             template.on("dblclick", ">.updatable",openGoodEditor);
  1431.             setSortable(template)
  1432.             let data = $("#template_data").val()
  1433.             let res = data!==""?JSON.parse(data):[]
  1434.             if(res["html"])
  1435.                 template.html(res["html"])
  1436.             if(res["conditions"])
  1437.                 $(".off #conditions").html(res["conditions"])
  1438.             if(res["options"])
  1439.                 $(".off #options").html(res["options"])
  1440.             resetDrag(template.find(".updatable"))
  1443.             $("#form-template").submit(saveTemplate)
  1445.             $("#preview").off("keydown onkeydown")
  1447.             $(".off #editors").on("input","#champs" , function () {
  1448.                 let val = $(this).val()
  1449.                 $(this).next("input").toggle( val === "entity")
  1450.             })
  1452.             $('[data-bs-toggle="tooltip"]').tooltip()
  1455.         });
  1457.     </script>
  1458.     <script src="//cdn.quilljs.com/1.3.6/quill.min.js"></script>
  1459. {% endblock %}
  1460. {% block stylesheets %}
  1461.     <link href="//cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">
  1462.     <style>
  1463.         .off #conditions, .off #options{
  1464.             display: none;
  1465.         }
  1466.         .off .editor{
  1467.             width: 40rem;
  1468.         }
  1470.         .updatable .updatable, .updatable .updatable:hover{
  1471.             border: 1px dashed black;
  1472.             cursor: pointer;
  1473.             background-color: white;
  1474.         }
  1476.         .updatable{
  1477.             border: 1px dashed rgba(128, 128, 128, 0.7);
  1478.             cursor: pointer;
  1479.             background-color: white;
  1480.             margin: 0;
  1481.         }
  1482.         .updatable:hover{
  1483.             border: 2px dashed blue;
  1484.         }
  1485.         .updating, .updating:hover{
  1486.             border: 1px solid red ;
  1487.         }
  1488.         .template-view{
  1489.             width: 100%;
  1490.             display:  inline-block;
  1491.             min-height: 20rem ;
  1492.             border: 1px solid gray;
  1495.         }
  1496.         .template-view input, .template-view textarea, .template-view select{
  1497.             cursor: pointer;
  1498.         }
  1499.         #parametres-fields-list>*{
  1500.             margin: 2px;
  1501.         }
  1503.         .type-options .option{
  1504.             display: none;
  1505.         }
  1508.         #table-view .updatable:not(.ui-draggable-dragging){
  1509.             position: initial !important;
  1510.             z-index: 1;
  1511.         }
  1512.         .template-view .updatable:not(.ui-draggable-dragging){
  1513.             z-index: 1 !important;
  1515.         }
  1516.         .updatable.ui-draggable-dragging{
  1517.             z-index: 3 !important;
  1518.             max-width:10rem ;
  1519.             max-height: 10rem;
  1520.             overflow: hidden;
  1521.         }
  1524.         .dragging{
  1525.             background-color: red;
  1526.         }
  1527.     </style>
  1528. {% endblock %}