templates/api/kelsync/device.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  3. {% block body %}
  4.     <div class="container mt-4">
  5.         <div class="d-flex justify-content-between align-items-center mb-4">
  6.             <div>
  7.                 <h2>
  8.                     <span id="deviceName">{{ device.name }}</span>
  9.                     <button class="btn btn-sm btn-outline-secondary ml-2" id="editDeviceNameBtn" title="Renommer">
  10.                         <i class="fa fa-pencil"></i>
  11.                     </button>
  12.                 </h2>
  13.                 <small class="text-muted">ID : {{ device.deviceId }}{% if device.ip %} - IP : {{ device.ip }}{% endif %} - {{ device.updateDate|date("d/m/Y H:i") }}</small>
  14.             </div>
  15.             <div>
  16.                 <button class="btn btn-primary" data-toggle="modal" data-target="#addLinkModal">
  17.                     <i class="fa fa-plus"></i> Ajouter un lien
  18.                 </button>
  19.                 {% if device.linkItems|length == 0 %}
  20.                     <button class="btn btn-danger ml-2" id="deleteDeviceBtn">
  21.                         <i class="fa fa-trash"></i> Supprimer le device
  22.                     </button>
  23.                 {% endif %}
  24.             </div>
  25.         </div>
  27.         <div id="linksList" class="list-group" style="gap: 0;">
  28.             {% for link in links %}
  29.                 <div class="list-group-item sortable-item {{ link.enabled ? '' : 'disabled-link' }}"
  30.                      data-link-id="{{ link.id }}"
  31.                      data-order="{{ link.sortOrder }}"
  32.                      data-enabled="{{ link.enabled ? '1' : '0' }}"
  33.                      style="cursor: move;user-select: none; margin-bottom: 8px;padding: 5px 15px;">
  34.                     <div class="d-flex align-items-center">
  35.                         <!-- Icône SVG -->
  36.                         {% if link.svgIcon %}
  37.                             <div class="mr-3" style="width: 35px; height: 35px; flex-shrink: 0;">
  38.                                 {{ link.svgIcon|raw }}
  39.                             </div>
  40.                         {% endif %}
  42.                         <!-- Contenu principal -->
  43.                         <div class="flex-grow-1">
  44.                             <h6>
  45.                                 {{ link.title }}
  46.                                 {% if not link.enabled %}
  47.                                     <span class="badge badge-secondary ml-2">Désactivé</span>
  48.                                 {% endif %}
  49.                             </h6>
  50.                             <small class="text-muted">
  51.                                 {{ link.link|slice(0, 30) }}
  52.                             </small>
  53.                         </div>
  55.                         <!-- Actions -->
  56.                         <div class="ml-3">
  57.                             <div class="btn-group">
  58.                                 <button class="btn btn-sm btn-outline-{{ link.enabled ? 'warning' : 'success' }} btn-toggle-enabled"
  59.                                         data-link-id="{{ link.id }}"
  60.                                         data-enabled="{{ link.enabled ? '1' : '0' }}"
  61.                                         title="{{ link.enabled ? 'Désactiver' : 'Activer' }}">
  62.                                     <i class="fa fa-{{ link.enabled ? 'eye-slash' : 'eye' }}" aria-hidden="true"></i>
  63.                                 </button>&nbsp;
  64.                                 <button class="btn btn-sm btn-outline-primary btn-edit"
  65.                                         data-link-id="{{ link.id }}"
  66.                                         data-title="{{ link.title }}"
  67.                                         data-link="{{ link.link }}"
  68.                                         data-svg="{{ link.svgIcon }}"
  69.                                         title="Modifier">
  70.                                     <i class="fa fa-pencil" aria-hidden="true"></i>
  71.                                 </button>&nbsp;
  72.                                 <button class="btn btn-sm btn-outline-danger btn-delete"
  73.                                         data-link-id="{{ link.id }}"
  74.                                         title="Supprimer">
  75.                                     <i class="fa fa-trash" aria-hidden="true"></i>
  76.                                 </button>
  77.                             </div>
  78.                         </div>
  79.                     </div>
  80.                 </div>
  81.             {% else %}
  82.                 <div class="alert alert-info">
  83.                     Aucun lien pour le moment. Cliquez sur "Ajouter un lien" pour commencer.
  84.                 </div>
  85.             {% endfor %}
  86.         </div>
  87.     </div>
  89.     <!-- Modal Ajouter/Éditer Lien -->
  90.     <div class="modal fade" id="addLinkModal" tabindex="-1" role="dialog" aria-labelledby="modalTitle" aria-hidden="true">
  91.         <div class="modal-dialog modal-lg" role="document">
  92.             <div class="modal-content">
  93.                 <div class="modal-header">
  94.                     <h5 class="modal-title" id="modalTitle">Ajouter un lien</h5>
  95.                     <button type="button" class="close" data-dismiss="modal" aria-label="Close">
  96.                         <span aria-hidden="true">&times;</span>
  97.                     </button>
  98.                 </div>
  99.                 <div class="modal-body">
  100.                     <form id="linkForm">
  101.                         <input type="hidden" id="linkId" value="">
  103.                         <div class="form-group">
  104.                             <label for="linkTitle">Titre *</label>
  105.                             <input type="text" class="form-control" id="linkTitle" required>
  106.                         </div>
  108.                         <div class="form-group">
  109.                             <label for="linkUrl">URL *</label>
  110.                             <input type="url" class="form-control" id="linkUrl" required>
  111.                         </div>
  113.                         <div class="form-group">
  114.                             <label for="linkSvg">Code SVG</label>
  115.                             <textarea class="form-control" id="linkSvg" rows="4"></textarea>
  116.                         </div>
  117.                     </form>
  118.                 </div>
  119.                 <div class="modal-footer">
  120.                     <button type="button" class="btn btn-secondary" data-dismiss="modal">Annuler</button>
  121.                     <button type="button" class="btn btn-primary" id="saveLinkBtn">Enregistrer</button>
  122.                 </div>
  123.             </div>
  124.         </div>
  125.     </div>
  127.     <!-- Modal Renommer Device -->
  128.     <div class="modal fade" id="editDeviceModal" tabindex="-1" role="dialog" aria-labelledby="editDeviceModalTitle" aria-hidden="true">
  129.         <div class="modal-dialog" role="document">
  130.             <div class="modal-content">
  131.                 <div class="modal-header">
  132.                     <h5 class="modal-title" id="editDeviceModalTitle">Renommer le device</h5>
  133.                     <button type="button" class="close" data-dismiss="modal" aria-label="Close">
  134.                         <span aria-hidden="true">&times;</span>
  135.                     </button>
  136.                 </div>
  137.                 <div class="modal-body">
  138.                     <form id="deviceNameForm">
  139.                         <div class="form-group">
  140.                             <label for="deviceNameInput">Nouveau nom *</label>
  141.                             <input type="text" class="form-control" id="deviceNameInput" required value="{{ device.name }}">
  142.                         </div>
  143.                     </form>
  144.                 </div>
  145.                 <div class="modal-footer">
  146.                     <button type="button" class="btn btn-secondary" data-dismiss="modal">Annuler</button>
  147.                     <button type="button" class="btn btn-primary" id="saveDeviceNameBtn">Enregistrer</button>
  148.                 </div>
  149.             </div>
  150.         </div>
  151.     </div>
  153.     <style>
  154.         .list-group-item {
  155.             transition: all 0.2s ease;
  156.         }
  158.         .list-group-item:hover {
  159.             background-color: #555555;
  160.             box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  161.         }
  163.         .list-group-item.disabled-link {
  164.             opacity: .5;
  165.         }
  167.         .list-group-item.disabled-link:hover {
  168.             background-color: #e9ecef;
  169.         }
  171.         .sortable-ghost {
  172.             opacity: 0.3 !important;
  173.             background: #e3f2fd !important;
  174.             border: 2px dashed #007bff !important;
  175.         }
  177.         .sortable-chosen {
  178.             background-color: #f8f9fa;
  179.         }
  181.         .sortable-drag {
  182.             opacity: 0.8 !important;
  183.             cursor: grabbing !important;
  184.         }
  186.         .drag-handle:hover {
  187.             color: #007bff !important;
  188.         }
  190.         .sortable-item {
  191.             position: relative;
  192.         }
  194.         #linksList {
  195.             min-height: 100px;
  196.         }
  197.     </style>
  198. {% endblock %}
  200. {% block javascripts %}
  201.     {{ parent() }}
  202.     <script src="https://cdn.jsdelivr.net/npm/sortablejs@latest/Sortable.min.js"></script>
  203.     <script>
  204.         const deviceId = {{ device.id }};
  205.         let editingLinkId = null;
  207.         // SVG par défaut
  208.         const defaultSvg = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  209.     <path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path>
  210.     <path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path>
  211. </svg>`;
  213.         // Initialiser Sortable pour le drag & drop
  214.         const linksList = document.getElementById('linksList');
  216.         if (linksList) {
  217.             const sortable = new Sortable(linksList, {
  218.                 animation: 200,
  219.                 ghostClass: 'sortable-ghost',
  220.                 chosenClass: 'sortable-chosen',
  221.                 dragClass: 'sortable-drag',
  222.                 forceFallback: false,
  223.                 fallbackOnBody: true,
  224.                 swapThreshold: 0.65,
  225.                 draggable: '.sortable-item',
  226.                 filter: '.btn, a, input, textarea, select',
  227.                 preventOnFilter: true,
  228.                 onStart: function(evt) {
  229.                     evt.item.style.opacity = '0.5';
  230.                 },
  231.                 onEnd: function(evt) {
  232.                     evt.item.style.opacity = '1';
  233.                     if (evt.oldIndex !== evt.newIndex) {
  234.                         saveOrder();
  235.                     }
  236.                 }
  237.             });
  238.         }
  240.         // Fonction pour sauvegarder l'ordre
  241.         function saveOrder() {
  242.             const orders = {};
  243.             document.querySelectorAll('[data-link-id]').forEach((el, index) => {
  244.                 orders[el.dataset.linkId] = index;
  245.             });
  247.             fetch(`/kelsync/device/${deviceId}/link/reorder`, {
  248.                 method: 'POST',
  249.                 headers: { 'Content-Type': 'application/json' },
  250.                 body: JSON.stringify({ orders })
  251.             })
  252.                 .then(response => response.json())
  253.                 .then(data => {
  254.                     if (data.success) {
  255.                         console.log('Ordre sauvegardé');
  256.                     }
  257.                 })
  258.                 .catch(error => {
  259.                     console.error('Erreur lors de la sauvegarde:', error);
  260.                     alert('Erreur lors de la sauvegarde de l\'ordre');
  261.                 });
  262.         }
  264.         // Fonction pour fermer la modal
  265.         function closeModal(modalId) {
  266.             var modal = document.getElementById(modalId);
  267.             modal.classList.remove('show');
  268.             modal.style.display = 'none';
  269.             modal.setAttribute('aria-hidden', 'true');
  270.             modal.removeAttribute('aria-modal');
  272.             var backdrop = document.querySelector('.modal-backdrop');
  273.             if (backdrop) {
  274.                 backdrop.remove();
  275.             }
  276.             document.body.classList.remove('modal-open');
  277.         }
  279.         // Fonction pour ouvrir la modal
  280.         function openModal(modalId) {
  281.             var modal = document.getElementById(modalId);
  282.             modal.classList.add('show');
  283.             modal.style.display = 'block';
  284.             modal.setAttribute('aria-modal', 'true');
  285.             modal.removeAttribute('aria-hidden');
  287.             var backdrop = document.createElement('div');
  288.             backdrop.className = 'modal-backdrop fade show';
  289.             document.body.appendChild(backdrop);
  290.             document.body.classList.add('modal-open');
  291.         }
  293.         // Gérer les boutons de fermeture
  294.         document.querySelectorAll('[data-dismiss="modal"]').forEach(function(btn) {
  295.             btn.addEventListener('click', function() {
  296.                 const modal = btn.closest('.modal');
  297.                 closeModal(modal.id);
  298.             });
  299.         });
  301.         // Fermer en cliquant sur le backdrop
  302.         document.addEventListener('click', function(e) {
  303.             if (e.target.classList.contains('modal-backdrop')) {
  304.                 const openModal = document.querySelector('.modal.show');
  305.                 if (openModal) {
  306.                     closeModal(openModal.id);
  307.                 }
  308.             }
  309.         });
  311.         // Ouvrir modal pour ajouter un lien
  312.         document.querySelector('[data-target="#addLinkModal"]').addEventListener('click', function() {
  313.             editingLinkId = null;
  314.             document.getElementById('modalTitle').textContent = 'Ajouter un lien';
  315.             document.getElementById('linkForm').reset();
  316.             document.getElementById('linkId').value = '';
  317.             document.getElementById('linkSvg').value = defaultSvg;
  318.             openModal('addLinkModal');
  319.         });
  321.         // Ouvrir modal pour éditer un lien
  322.         document.addEventListener('click', function(e) {
  323.             if (e.target.closest('.btn-edit')) {
  324.                 const btn = e.target.closest('.btn-edit');
  325.                 const linkId = btn.dataset.linkId;
  326.                 editingLinkId = linkId;
  328.                 document.getElementById('modalTitle').textContent = 'Modifier le lien';
  329.                 document.getElementById('linkId').value = linkId;
  330.                 document.getElementById('linkTitle').value = btn.dataset.title || '';
  331.                 document.getElementById('linkUrl').value = btn.dataset.link || '';
  332.                 document.getElementById('linkSvg').value = btn.dataset.svg || '';
  334.                 openModal('addLinkModal');
  335.             }
  336.         });
  338.         // Activer/Désactiver un lien
  339.         document.addEventListener('click', function(e) {
  340.             if (e.target.closest('.btn-toggle-enabled')) {
  341.                 const btn = e.target.closest('.btn-toggle-enabled');
  342.                 const linkId = btn.dataset.linkId;
  343.                 const currentEnabled = btn.dataset.enabled === '1';
  344.                 const newEnabled = !currentEnabled;
  346.                 fetch(`/kelsync/link/${linkId}/toggle`, {
  347.                     method: 'POST',
  348.                     headers: { 'Content-Type': 'application/json' },
  349.                     body: JSON.stringify({ enabled: newEnabled })
  350.                 })
  351.                     .then(response => response.json())
  352.                     .then(data => {
  353.                         if (data.success) {
  354.                             location.reload();
  355.                         }
  356.                     })
  357.                     .catch(error => {
  358.                         console.error('Erreur:', error);
  359.                         alert('Erreur lors de la modification du statut');
  360.                     });
  361.             }
  362.         });
  364.         // Supprimer un lien
  365.         document.addEventListener('click', function(e) {
  366.             if (e.target.closest('.btn-delete')) {
  367.                 if (confirm('Voulez-vous vraiment supprimer ce lien ?')) {
  368.                     const linkId = e.target.closest('.btn-delete').dataset.linkId;
  370.                     fetch(`/kelsync/link/${linkId}/delete`, {
  371.                         method: 'DELETE'
  372.                     })
  373.                         .then(response => response.json())
  374.                         .then(data => {
  375.                             if (data.success) {
  376.                                 location.reload();
  377.                             }
  378.                         })
  379.                         .catch(error => {
  380.                             console.error('Erreur:', error);
  381.                             alert('Erreur lors de la suppression');
  382.                         });
  383.                 }
  384.             }
  385.         });
  387.         // Enregistrer le lien
  388.         document.getElementById('saveLinkBtn').addEventListener('click', function() {
  389.             const form = document.getElementById('linkForm');
  390.             if (!form.checkValidity()) {
  391.                 form.reportValidity();
  392.                 return;
  393.             }
  395.             const linkId = document.getElementById('linkId').value;
  396.             const data = {
  397.                 title: document.getElementById('linkTitle').value,
  398.                 link: document.getElementById('linkUrl').value,
  399.                 svgIcon: document.getElementById('linkSvg').value
  400.             };
  402.             const url = linkId
  403.                 ? `/kelsync/link/${linkId}/edit`
  404.                 : `/kelsync/device/${deviceId}/link/add`;
  406.             fetch(url, {
  407.                 method: 'POST',
  408.                 headers: { 'Content-Type': 'application/json' },
  409.                 body: JSON.stringify(data)
  410.             })
  411.                 .then(response => response.json())
  412.                 .then(data => {
  413.                     if (data.success) {
  414.                         closeModal('addLinkModal');
  415.                         location.reload();
  416.                     }
  417.                 })
  418.                 .catch(error => {
  419.                     alert('Erreur lors de l\'enregistrement');
  420.                 });
  421.         });
  423.         // ========== GESTION DU DEVICE ==========
  425.         // Ouvrir modal pour renommer le device
  426.         document.getElementById('editDeviceNameBtn').addEventListener('click', function() {
  427.             openModal('editDeviceModal');
  428.         });
  430.         // Enregistrer le nouveau nom du device
  431.         document.getElementById('saveDeviceNameBtn').addEventListener('click', function() {
  432.             const form = document.getElementById('deviceNameForm');
  433.             if (!form.checkValidity()) {
  434.                 form.reportValidity();
  435.                 return;
  436.             }
  438.             const newName = document.getElementById('deviceNameInput').value.trim();
  440.             if (!newName) {
  441.                 alert('Le nom ne peut pas être vide');
  442.                 return;
  443.             }
  445.             fetch(`/kelsync/device/${deviceId}/edit`, {
  446.                 method: 'POST',
  447.                 headers: { 'Content-Type': 'application/json' },
  448.                 body: JSON.stringify({ name: newName })
  449.             })
  450.                 .then(response => response.json())
  451.                 .then(data => {
  452.                     if (data.success) {
  453.                         document.getElementById('deviceName').textContent = data.device.name;
  454.                         closeModal('editDeviceModal');
  455.                     } else {
  456.                         alert(data.message || 'Erreur lors de la modification');
  457.                     }
  458.                 })
  459.                 .catch(error => {
  460.                     console.error('Erreur:', error);
  461.                     alert('Erreur lors de la modification du nom');
  462.                 });
  463.         });
  465.         // Supprimer le device
  466.         const deleteBtn = document.getElementById('deleteDeviceBtn');
  467.         if (deleteBtn) {
  468.             deleteBtn.addEventListener('click', function() {
  469.                 if (confirm('Voulez-vous vraiment supprimer ce device ?\n\nNote : Le device ne peut être supprimé que s\'il ne contient aucun lien.')) {
  470.                     fetch(`/kelsync/device/${deviceId}/delete`, {
  471.                         method: 'DELETE'
  472.                     })
  473.                         .then(response => response.json())
  474.                         .then(data => {
  475.                             if (data.success) {
  476.                                 window.location.href = '/kelsync/';
  477.                             } else {
  478.                                 alert(data.message || 'Erreur lors de la suppression');
  479.                             }
  480.                         })
  481.                         .catch(error => {
  482.                             console.error('Erreur:', error);
  483.                             alert('Erreur lors de la suppression du device');
  484.                         });
  485.                 }
  486.             });
  487.         }
  488.     </script>
  489. {% endblock %}