Advertisement
Guest User

Untitled

a guest
Feb 19th, 2020
104
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 16.13 KB | None | 0 0
  1. <!-- Content Header (Page header) -->
  2. <section class="content-header">
  3.     <h1>
  4.     Éditer une page
  5.     </h1>
  6. </section>
  7. <!-- Main content -->
  8. <section class="content">
  9.     <div class="nav-tabs-custom">
  10.         <ul class="nav nav-tabs">
  11.             <?php if ($superadmin):?>
  12.             <li class="active"><a href="#module" data-toggle="tab">Module</a></li>
  13.             <li><a href="#elements" data-toggle="tab">Éléments</a></li>
  14.             <?php else:?>
  15.             <li class="active"><a href="#elements" data-toggle="tab">Éléments</a></li>
  16.             <?php endif?>
  17.         </ul>
  18.         <div class="tab-content">
  19.             <?php if ($superadmin):?>
  20.             <div class="active tab-pane" id="module">
  21.                 <div>
  22.                     <?php
  23.                        echo $this->Form->create($page);
  24.                         echo $this->Form->control('module[ordre]', ['value' => $page->ordre, 'label' => 'Ordre']);
  25.                         echo $this->Form->control('module[name]', ['value' => $page->name, 'label' => 'Nom']);
  26.                         echo $this->Form->control('module[slug]', ['value' => $page->slug, 'label' => 'Lien']);
  27.                         echo $this->Form->control('module[template]', [
  28.                             'value' => $page->template,
  29.                             'type' => 'textarea',
  30.                             'style' => 'width: 80%; height: 50vh',
  31.                             'label' => 'Contenu'
  32.                         ]);
  33.                     ?>
  34.                 </div>
  35.                 <div>
  36.                     <?php
  37.                        echo $this->Form->button(__('Sauvegarder le module'), ['class' => 'btn btn-primary']);
  38.                         echo $this->Form->end();
  39.                         echo $this->Form->postLink(
  40.                         'Supprimer la page',
  41.                         ['action' => 'deletePage', 'page_id' => $page->id],
  42.                         ['confirm' => 'Êtes-vous sûr ?', 'class' => 'btn btn-danger', 'style' => 'margin-left: 3px'])
  43.                     ?>
  44.                 </div>
  45.             </div>
  46.             <div class="tab-pane" id="elements">
  47.             <?php else:?>
  48.             <div class="active tab-pane" id="elements">
  49.             <?php endif?>
  50.                 <?= $this->Form->create($elements);?>
  51.                 <table style="width: 100%;">
  52.                     <thead>
  53.                         <tr>
  54.                             <th style="width: 15%">nom</th>
  55.                             <?php if ($superadmin):?>
  56.                             <th style="width: 10%">type</th>
  57.                             <?php endif;?>
  58.                             <th>contenu</th>
  59.                             <?php if ($superadmin):?>
  60.                             <th style="min-width:100px;width:10%;">actions</th>
  61.                             <?php endif;?>
  62.                         </tr>
  63.                     </thead>
  64.                     <tbody>
  65.                         <?php
  66.                        $i = 0;
  67.                        foreach($elements as $element):
  68.                        $i++;
  69.                        ?>
  70.                         <?= $this->Form->hidden('elements['.$i.'][id]', ['value' => $element->id]);?>
  71.                         <tr value="<?= $element->id?>" id="tr-element-<?=$i?>">
  72.                             <td>
  73.                                 <?= $this->Form->control('elements['.$i.'][name]', [
  74.                                         'value' => $element->name,
  75.                                         'class' => 'elementInput',
  76.                                         'label' => false,
  77.                                         'placeholder' => 'vide'
  78.                                     ]);?>
  79.                             </td>
  80.                             <td <?= !$superadmin ? "style=\"display:none\"" : ""?>>
  81.                                 <?= $this->Form->select('elements['.$i.'][type]', [ 'text' => 'text', 'image' => 'image'], [
  82.                                         'value' => $element->type,
  83.                                         'label' => false,
  84.                                         'id' => 'custom-select-'.$i,
  85.                                         'onchange' => 'selectChange('.$i.')'
  86.                                     ])?>
  87.                             </td>
  88.                             <td style="height:50px;">
  89.                                 <div id="textForm-<?= $i?>" style="display:none">
  90.                                 <?= $this->Form->control('elements['.$i.'][content]', [
  91.                                         'type' => 'textarea',
  92.                                         'value' => $element->content,
  93.                                         'class' => 'elementTextarea',
  94.                                         'label' => false,
  95.                                         'placeholder' => 'vide',
  96.                                         'onchange' => 'updateModal('.$i.')'
  97.                                     ]);?>
  98.                                 </div>
  99.                                 <div id="imageForm-<?= $i?>" style="display:none">
  100.                                     <!-- Button trigger modal -->
  101.                                     <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#imageModal-<?= $i?>" style="padding:0;border:none;background-color:transparent">
  102.                                         <img class="apercuImg" src="/img/upload/<?= $element->content?>" alt="<?= $i?>" onerror="this.src='/img/no-image.png'">
  103.                                     </button>
  104.                                 </div>
  105.                             </td>
  106.                             <?php if ($superadmin):?>
  107.                             <td>
  108.                                 <button class="btn btn-danger" type="button" onclick="deleteElement(<?= $i?>);">Supprimer</button>
  109.                             </td>
  110.                             <?php endif;?>
  111.                         </tr>
  112.                         <?php endforeach;?>
  113.                     </tbody>
  114.                     <!-- /.box-body -->
  115.                 </table>
  116.                 <div style="margin-top: 15px">
  117.                     <div class="hidden" id="deleted-elements"></div>
  118.                     <?= $this->Form->button(__('Sauvegarder les élements'), ['class' => 'btn btn-primary']);?>
  119.                     <?php if ($superadmin):?>
  120.                     <button class="btn btn-primary" id="addElementButton" type="button">Ajouter un élément</button>
  121.                     <?php endif?>
  122.                 </div>
  123.                 <!-- /.box -->
  124.                 <?= $this->Form->end();?>
  125.                 <!-- Modals -->
  126.                 <div id="modalsDiv">
  127.                     <?php
  128.                    $i = 0;
  129.                    foreach($elements as $element):
  130.                    $i++;
  131.                    ?>
  132.                     <!-- Modal -->
  133.                     <div class="modal fade" id="imageModal-<?= $i?>" tabindex="-1" role="dialog" aria-labelledby="imageModalTitle-<?= $i?>" aria-hidden="true">
  134.                         <div class="modal-dialog modal-dialog-centered" role="document">
  135.                             <div class="modal-content">
  136.                                 <div class="modal-header">
  137.                                     <h5 class="modal-title" id="imageModalTitle-<?= $i?>"><?= $element->content?></h5>
  138.                                     <button type="button" class="close" data-dismiss="modal" aria-label="Close">
  139.                                         <span aria-hidden="true">&times;</span>
  140.                                     </button>
  141.                                 </div>
  142.                                 <div id="modal-body-<?= $i?>" class="modal-body" style="text-align:center;">  
  143.                                     <img src="/img/upload/<?= $element->content?>" alt="<?= $i?>" onerror="this.src='/img/no-image.png'" style="margin-bottom:20px;">
  144.                                     <div>
  145.                                         <?= $this->Form->create(null, ['type' => 'file']); ?>
  146.                                         <?= $this->Form->hidden('elements['.$i.'][id]', ['value' => $element->id]);?>
  147.                                         <?= $this->Form->hidden('elements['.$i.'][content]', ['class' => 'elementTextarea', 'value' => '']);?>
  148.                                         <div class="imgForm" style="justify-content:center;border:none;">
  149.                                             <?= $this->Form->file('submittedImage', ['class' => 'fileInput', 'onchange' => 'updateImage('.$i.')', 'required' => 'required']);?>
  150.                                             <?= $this->Form->button('Uploader', ['class' => 'btn btn-primary', 'style' => 'margin-left: 20px;']);?>
  151.                                         </div>
  152.                                         <?= $this->Form->end();?>
  153.                                     </div>
  154.                                 </div>
  155.                                 <div id="modal-footer-<?= $i?>" class="modal-footer">
  156.                                     <?= $this->form->create(null)?>
  157.                                     <?= $this->Form->hidden('elements['.$i.'][id]', ['value' => $element->id]);?>
  158.                                     <?= $this->Form->hidden('elements['.$i.'][content]', ['value' => '']);?>
  159.                                     <input type="hidden" name="deletedImg[]" value="<?= $element->content?>">
  160.                                     <button style="float:left" class="btn btn-danger">Supprimer</button>
  161.                                     <?= $this->form->end()?>
  162.                                     <button type="button" class="btn btn-secondary" data-dismiss="modal">Fermer</button>
  163.                                 </div>
  164.                             </div>
  165.                         </div>
  166.                     </div>
  167.                     <?php endforeach?>
  168.                 </div>
  169.             </div>
  170.         </div>
  171.     </div>
  172.     <!-- /.nav-tabs-custom -->
  173. </section>
  174. <!-- /.content -->
  175.  
  176. <script src="/plugins/jQuery/jquery-2.2.3.min.js"></script>
  177.  
  178. <script type="application/javascript">
  179.     //bouton "ajouter un élément"
  180.     var i = <?= $i + 1?>;
  181.     var superadmin = <?= json_encode($superadmin)?>;
  182.     $('#addElementButton').on('click', function() {
  183.         let element =
  184.         '<tr value="" id="tr-element-'+i+'">'+
  185.             '<td>'+
  186.                 '<div class="input text"><input class="elementInput" placeholder="vide" type="text" name="elements['+i+'][name]" style="width: 100%;"></div>'+
  187.             '</td>'+
  188.             '<td>'+
  189.                 '<select id="custom-select-'+i+'" name="elements['+i+'][type]" onchange="selectChange('+i+')">'+
  190.                     '<option value="text" selected="selected">text</option>'+
  191.                     '<option value="image">image</option>'+
  192.                 '</select>'+
  193.             '</td>'+
  194.             '<td style="height:50px;">'+
  195.                 '<div id="textForm-'+i+'" style="display: block;">'+
  196.                     '<div class="input textarea">'+
  197.                         '<textarea name="elements['+i+'][content]" class="elementTextarea" placeholder="vide" onchange="updateModal('+i+')" id="elements-'+i+'-content" rows="5"></textarea>'+
  198.                     '</div>'+
  199.                 '</div>'+
  200.                 '<div id="imageForm-'+i+'" style="display: none;">'+
  201.                     '<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#imageModal-'+i+'" style="padding:0;border:none;background-color:transparent">'+
  202.                         '<img src="" alt="'+i+'" onerror="this.src=\'/img/no-image.png\'" class="apercuImg">'+
  203.                     '</button>'+
  204.                 '</div>'+
  205.             '</td>'+
  206.             '<td>'+
  207.                 '<button class="btn btn-danger" type="button" onclick="deleteElement('+i+');">Supprimer</button>'+
  208.             '</td>'+
  209.         '</tr>';
  210.         $('tbody').append(element);
  211.         let modalelement =
  212.         '<div class="modal fade" id="imageModal-'+i+'" tabindex="-'+i+'" role="dialog" aria-labelledby="imageModalTitle-'+i+'" aria-hidden="true">'+
  213.             '<div class="modal-dialog modal-dialog-centered" role="document">'+
  214.                 '<div class="modal-content">'+
  215.                     '<div class="modal-header">'+
  216.                         '<h5 class="modal-title" id="imageModalTitle-'+i+'"></h5>'+
  217.                         '<button type="button" class="close" data-dismiss="modal" aria-label="Close">'+
  218.                             '<span aria-hidden="true">×</span>'+
  219.                         '</button>'+
  220.                     '</div>'+
  221.                     '<div id="modal-body-'+i+'" class="modal-body" style="text-align:center;">'+
  222.                         '<img src="/img/no-image.png" alt="'+i+'" style="margin-bottom:20px;" onerror="this.src=\'/img/no-image.png\'">'+
  223.                         '<div>'+
  224.                             '<form enctype="multipart/form-data" method="post" accept-charset="utf-8" action="/admin/editPage/8">'+
  225.                                 '<div style="display:none;"><input type="hidden" name="_method" value="POST"></div>'+
  226.                                 '<input type="hidden" name="elements['+i+'][name]" value="">'+
  227.                                 '<input type="hidden" name="elements['+i+'][type]" value="image">'+
  228.                                 '<input type="hidden" name="elements['+i+'][content]" class="elementTextarea" id="elements-'+i+'-content" value="">'+
  229.                                 '<div class="imgForm" style="justify-content:center;border:none;">'+
  230.                                     '<input type="file" name="submittedImage" class="fileInput" onchange="updateImage('+i+')" required="required">'+
  231.                                     '<button class="btn btn-primary" style="margin-left: 20px;" type="submit">Uploader</button>'+
  232.                                 '</div>'+
  233.                             '</form>'+
  234.                         '</div>'+
  235.                     '</div>'+
  236.                     '<div id="modal-footer-'+i+'" class="modal-footer">'+
  237.                         '<form method="post" accept-charset="utf-8" action="/admin/editPage/8"><div style="display:none;"><input type="hidden" name="_method" value="POST"></div>'+
  238.                         '<input type="hidden" name="deletedImg[]" value="">'+
  239.                         '<button style="float:left" class="btn btn-danger">Supprimer</button>'+
  240.                         '</form>'+
  241.                         '<button type="button" class="btn btn-secondary" data-dismiss="modal">Fermer</button>'+
  242.                     '</div>'+
  243.                 '</div>'+
  244.             '</div>'+
  245.         '</div>';
  246.         $('#modalsDiv').append(modalelement);
  247.         i++;
  248.     });
  249.     //bouton "supprimer" élement
  250.     function deleteElement(i) {
  251.         if ($('#tr-element-'+i).attr('value')) {
  252.             $('#deleted-elements').append('<input name="deletedElements[]" value="'+ $('#tr-element-'+i).attr('value') +'">');
  253.         }
  254.         $('#tr-element-'+i).remove();
  255.     }
  256.     //changement de type
  257.     function selectChange(irow) {
  258.         if ($('#custom-select-'+irow).val() === 'text') {
  259.             $('#textForm-'+irow).css('display', 'block');
  260.             $('#imageForm-'+irow).css('display', 'none');
  261.         }
  262.         else {
  263.             $('#textForm-'+irow).css('display', 'none');
  264.             $('#imageForm-'+irow).css('display', 'block');
  265.         }
  266.     }
  267.     //initialisation du type
  268.     for (var j = 1; j != i; j++) {
  269.         selectChange(j)
  270.     }
  271.     //update des modals quand le textarea change
  272.     function updateModal(irow) {
  273.         newval = $('#textForm-'+irow).find('textarea').val();
  274.         $('#modal-body-'+irow+' img').attr('src', '/img/upload/'+newval);
  275.         $('#modal-body-'+irow+' .elementTextarea').val(newval);
  276.         $('#modal-footer-'+irow+' input').val(newval);
  277.         $('#imageForm-'+irow+' button .apercuImg').attr('src', '/img/upload/'+newval);
  278.         $('#imageModalTitle-'+irow).html(newval);
  279.     }
  280.     function updateImage(irow) {
  281.         newval = $('#modal-body-'+irow+' .fileInput').val();
  282.         newvaltab = newval.split('\\');
  283.         newval = newvaltab[2];
  284.         $('#modal-body-'+irow+' .elementTextarea').val(newval);
  285.     }
  286. </script>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement