templates/template/view.html.twig line 1

  1. {% extends 'base.html.twig' %}
  3. {% block body %}
  5.     <div id="view" class="container">{{ html|default(template.data["html"])|raw }} </div>
  7.     <script>
  8.         $(document).ready(function () {
  9.             let elements =$("#view *")
  10.             elements.removeAllClassStartBy("has-")
  11.             elements.removeAllClassStartBy("ui-drag")
  12.             elements.removeClass("updatable updating")
  13.                 .attr("contenteditable", false)
  14.                 .attr("readonly",false)
  15.             setupOptions()
  16.             setupConditions()
  17.             setupForm()
  18.             setupValues()
  19.             setupButtons()
  21.         })
  22.         let conditions={}
  23.         function setupOptions() {
  24.             let optionsTemplate = $({{ (template.data["options"]|default([]))  | json_encode | raw  }})
  26.             optionsTemplate.each(function () {
  27.                 let res =$(this).find(".options").html().split("%%")
  28.                 let id =$(this).attr("id")
  29.                 let element = $("*[cid="+id+"]")
  30.                 if(res.length === 3){
  31.                     doAction( res[0],element,true)
  32.                     element.addClass(res[1])
  33.                 }
  35.             })
  37.         }
  38.         function setupConditions(){
  39.             let conditionsTemplate = $({{ (template.data["conditions"]|default([]))  | json_encode | raw  }})
  40.             let formatedConditions = {{ formatedConditions|default([])  | json_encode | raw  }}
  41.             conditionsTemplate.each(function () {
  42.                 let id =$(this).attr("id")
  43.                 let element = $("*[cid="+id+"]")
  44.                 let conds= $(this).find(".conds")
  45.                 conds.each(function () {
  46.                     let res =$(this).html().split("%%")
  47.                     if(res.length === 5){
  50.                         if(res[1] !== "entity"){
  51.                             if(conditions[id]===undefined){
  52.                                 conditions[id]=[]
  53.                             }
  54.                             if(conditions[id][res[1]]===undefined){
  55.                                 conditions[id][res[1]]=[]
  56.                             }
  57.                             element.addClass("condition-"+res[1])
  58.                             let cond = $("#view #"+res[1])
  59.                             cond.addClass("update-conditions")
  60.                             cond.on("input", updateConditions)
  61.                             conditions[id][res[1]].push({
  62.                                 action:res[0],
  63.                                 cond:res[3],
  64.                                 value:res[4],
  65.                             })
  67.                         }
  68.                         else {
  69.                             if(formatedConditions[res[2]+res[3]+res[4]] ===true){
  70.                                 doAction(res[0], element, true)
  71.                             }
  73.                         }
  75.                     }
  77.                 })
  79.             })
  80.             $(".update-conditions").trigger("input")
  81.         }
  82.         function setupForm() {
  83.             let view =$("#view")
  84.             if(view.find("input, select, textarea").length===0)
  85.                 return
  86.             view.wrap("<form id='form-view' method='post'></form>")
  87.             if(view.find("button[type=submit]").length>0)
  88.                 return;
  89.             view.append("<button class='btn btn-success' type='submit'>Valider</button>")
  91.             let form =view.parents("#form-view")
  92.             form.on("submit", function (e) {
  93.                 e.preventDefault()
  94.                 $.ajax({
  95.                     method:"post",
  96.                     data: form.serializeArray(),
  97.                     success:function () {
  98.                         notify("Parcours", "Le Parcours <i>"+$("#template_titre").val()+"</i> a été enregistré")
  99.                     }
  100.                 })
  101.                 return false
  103.             })
  104.         }
  105.         function setupValues() {
  106.             let view =$("#view")
  108.             let savedData ={{ (savedData|default([]))  | json_encode | raw  }};
  110.             for (const [key, value] of Object.entries(savedData)) {
  111.                 view.find("#"+key).val(value)
  112.             }
  115.         }
  116.         function setupButtons() {
  117.             let buttons = $("#view button[type=button]")
  118.             buttons.each(function () {
  119.                 let act = $(this).attr("action")??""
  120.                 if(act!==""){
  121.                     $(this).click(doActionButton)
  122.                 }
  124.             })
  125.         }
  126.         function doActionButton(event) {
  127.             let method =$(event.currentTarget).attr("action")
  128.             let url = "{{ path('app_template_action')}}"
  129.             if(method.includes("::")){
  130.                 $.ajax({
  131.                     url:url,
  132.                     data:{
  133.                         "method":method,
  134.                         "id":{{ mainId|default(0) }}
  135.                     },
  136.                     method:"post",
  137.                     success: function(response, textStatus, xhr) {
  138.                         let contentType = xhr.getResponseHeader('content-type') || '';
  140.                         if (contentType.indexOf('json') > -1) {
  141.                             // Response is JSON
  142.                             if(response.url!==undefined)
  143.                                 window.location.href= response.url
  144.                             else
  145.                                 notify("action", "action a été effectué")
  146.                         } else if (contentType.indexOf('html') > -1) {
  147.                             // Response is HTML
  148.                             $("#view").html(response.find("#view").html())
  149.                         } else {
  150.                             // Unknown response type
  151.                         }
  152.                     }
  153.                 })
  154.             }
  155.             else {
  156.                 switch (method){
  157.                     case "close":
  158.                         history.back();
  159.                         break;
  160.                 }
  161.             }
  163.         }
  165.         function updateConditions(e){
  166.             let id= $(e.target).attr("id")
  167.             let val= $(e.target).val()
  168.             let elements =$(".condition-"+id)
  169.             elements.each(function () {
  171.                 let cid = $(this).attr("cid")
  172.                 if(conditions[cid][id]!==undefined)
  173.                     testConditions(conditions[cid][id], val, $(this))
  176.             })
  177.         }
  178.         function testConditions(conditions, val, el) {
  179.             let repartition={}
  180.             for(const cond of Object.values(conditions)){
  181.                 if(repartition[cond["action"]]===undefined)
  182.                     repartition[cond["action"]] =[]
  183.                 repartition[cond["action"]].push(cond)
  184.             }
  186.             for(const [action, conds] of Object.entries(repartition)){
  187.                 let bool = false;
  188.                 for(const cond of Object.values(conds)){
  189.                     if(checkValue(cond, val)){
  190.                         bool=true;
  191.                         break;
  192.                     }
  193.                 }
  194.                 doAction((bool?"":"!")+action, el)
  196.             }
  197.             return false
  200.         }
  201.         function checkValue(cond, val) {
  202.             switch (cond["cond"]){
  203.                 case "=":
  204.                     return val === cond["value"]
  205.                 case ">":
  206.                     return val > cond["value"]
  207.                 case ">=":
  208.                     return val >= cond["value"]
  209.                 case "<":
  210.                     return val < cond["value"]
  211.                 case "<=":
  212.                     return val <= cond["value"]
  213.                 case "start":
  214.                     return val.startsWith(cond["value"])
  215.                 case "end":
  216.                     return val.endsWith(cond["value"])
  217.                 case "cont":
  218.                     return val.includes(cond["value"])
  219.                 case "in":
  220.                     return cond["value"].split(",").includes(val)
  223.             }
  226.         }
  227.         function doAction(action, el, setup=false) {
  228.             switch (action){
  229.                 case "show":
  230.                 case "!hide":
  231.                     if(setup)
  232.                         el.show()
  233.                     else
  234.                         el.slideDown()
  235.                     break
  236.                 case "hide":
  237.                 case "!show":
  238.                     if(setup)
  239.                         el.hide()
  240.                     else
  241.                         el.slideUp()
  242.                     break
  243.                 case "readOnly":
  244.                     el.prop("readonly", true)
  245.                     break
  246.                 case "!readOnly":
  247.                     el.prop("readonly", false)
  248.                     break
  249.                 case "disabled":
  250.                 case "!disabled":
  251.                     el.find("input, select, textare").prop("disabled", action==="disabled")
  252.                     break
  253.             }
  255.         }
  257.     </script>
  258. {% endblock %}
  260. {% block title %}
  261. {{ template.titre }}
  262. {% endblock %}