templates/higotrigo/ht_file/summary-htfile-pdf.html.twig line 1

Open in your IDE?
  1. <!DOCTYPE html>
  2. <html lang="es">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>Orden de Trabajo</title>
  7.     <style>
  8.         /* Reset de box-sizing */
  9.         *, *::before, *::after {
  10.             box-sizing: border-box;
  11.         }
  12.         body {
  13.             font-family: Arial, sans-serif;
  14.             font-size: 12px;
  15.             color: #333;
  16.             margin: 0;
  17.             padding: 0;
  18.         }
  19.         /* FIX WKHTMLTOPDF: Control estricto de imágenes */
  20.         img {
  21.             max-width: 100% !important;
  22.             height: auto !important;
  23.             page-break-inside: avoid !important;
  24.             page-break-before: auto !important;
  25.             page-break-after: auto !important;
  26.             display: block;
  27.             margin: 0 auto;
  28.         }
  29.         /* Contenedor */
  30.         .container {
  31.             width: 100%;
  32.             padding: 10px;
  33.             margin: 0 auto;
  34.         }
  35.         /* Clearfix para limpiar flotados */
  36.         .clearfix::after {
  37.             content: "";
  38.             display: table;
  39.             clear: both;
  40.         }
  41.         /* Columnas basadas en flotantes */
  42.         [class*="col-xs-"] {
  43.             float: left;
  44.             padding: 5px;
  45.         }
  46.         .col-xs-12 { width: 100%; }
  47.         .col-xs-6 { width: 50%; }
  48.         .col-xs-5 { width: 41.666667%; }
  49.         .col-xs-4 { width: 33.333333%; }
  50.         .col-xs-3 { width: 25%; }
  51.         .col-xs-2 { width: 16.666667%; }
  52.         .col-xs-1 { width: 8.333333%; }
  53.         /* Paneles */
  54.         .panel {
  55.             border: 1px solid #ccc;
  56.             border-radius: 3px;
  57.             margin-bottom: 10px;
  58.             background-color: #fff;
  59.             page-break-inside: avoid !important; /* Evita que el panel entero se corte */
  60.         }
  61.         .panel-heading {
  62.             padding: 5px 10px;
  63.             border-bottom: 1px solid #ccc;
  64.             background-color: #e9ecef;
  65.             font-weight: bold;
  66.             font-size: 16px;
  67.             position: relative;
  68.         }
  69.         .panel-title {
  70.             margin: 0;
  71.             font-size: 14px;
  72.         }
  73.         /* Tablas - FIX WKHTMLTOPDF: Evitar cortes de filas entre páginas */
  74.         table {
  75.             width: 100%;
  76.             border-collapse: collapse;
  77.             margin-bottom: 10px;
  78.             page-break-inside: auto;
  79.         }
  80.         tr {
  81.             page-break-inside: avoid;
  82.             page-break-after: auto;
  83.         }
  84.         thead {
  85.             display: table-header-group;
  86.         }
  87.         table th, table td {
  88.             border: 1px solid #ddd;
  89.             padding: 5px;
  90.             text-align: left;
  91.             vertical-align: top;
  92.             font-size: 12px;
  93.         }
  94.         table th {
  95.             background-color: #f2f2f2;
  96.             font-weight: bold;
  97.             font-size: 13px;
  98.         }
  99.         /* Tipografías y espaciados */
  100.         .mb-5 { margin-bottom: 5px; }
  101.         .mt-5 { margin-top: 5px; }
  102.         h3, h4, h5, h6 { margin: 5px 0; font-weight: bold; }
  103.         h3 { font-size: 16px; }
  104.         h4 { font-size: 14px; }
  105.         h5 { font-size: 13px; }
  106.         h6 { font-size: 12px; }
  107.         /* Evitar saltos de página dentro de un servicio */
  108.         .service {
  109.             page-break-inside: avoid !important;
  110.             break-inside: avoid;
  111.             margin-bottom: 10px;
  112.         }
  113.         .service + .service {
  114.             margin-top: 10px;
  115.         }
  116.         /* Observaciones y Leyendas */
  117.         .observations {
  118.             background-color: #fff;
  119.             font-size: 12px;
  120.             /* Las observaciones pueden contener imágenes WYSIWYG, protegemos el salto */
  121.             page-break-inside: avoid !important;
  122.         }
  123.         legend {
  124.             font-size: 13px;
  125.             margin-bottom: 5px;
  126.             font-weight: bold;
  127.         }
  128.         /* Ajustes de filas */
  129.         .row, .panel .panel-body .row {
  130.             margin-left: -5px;
  131.             margin-right: -5px;
  132.         }
  133.         .panel .panel-body .col-xs-12 {
  134.             padding-left: 5px;
  135.             padding-right: 5px;
  136.         }
  137.         /* Utilidades de texto */
  138.         .text-truncate {
  139.             white-space: nowrap;
  140.             overflow: hidden;
  141.             text-overflow: ellipsis;
  142.         }
  143.         .text-uppercase {
  144.             text-transform: uppercase;
  145.         }
  146.         /* Tablas específicas */
  147.         .escandallos-table, .observations-table {
  148.             width: 100%;
  149.         }
  150.         .escandallos-table td, .observations-table td {
  151.             width: 50%;
  152.         }
  153.     </style>
  154. </head>
  155. <body>
  156. <div class="container">
  157.     <div class="row clearfix">
  158.         <div class="col-xs-12">
  159.             {% if ht_file is not empty %}
  160.                 <div class="panel panel-default">
  161.                     <div class="panel-heading">
  162.                         RESUMEN
  163.                     </div>
  164.                     {% if ht_file.clientType is not empty %}
  165.                         <div class="panel-heading">
  166.                             Tipo de comensal: {{ ht_file.clientType }}
  167.                         </div>
  168.                     {% endif %}
  169.                     <div class="panel-body">
  170.                         <table>
  171.                             <thead>
  172.                             <tr>
  173.                                 <th>SERVICIO</th>
  174.                                 <th>HORARIO</th>
  175.                                 <th>PAX</th>
  176.                                 <th>ESPACIO/SALA</th>
  177.                             </tr>
  178.                             </thead>
  179.                             <tbody>
  180.                             {% for elem in arrayElem %}
  181.                                 <tr class="service">
  182.                                     <td>{{ loop.index }}: {{ elem.htItem.dateStart|date('l')|trans }} {{ elem.htItem.dateStart|date('j') }},
  183.                                         {% if elem.htItem.htMenus is not null %}
  184.                                             {% for menu in elem.htItem.htMenus %}
  185.                                                 {{ menu.name }}{% if not loop.last %}, {% endif %}
  186.                                             {% endfor %}
  187.                                         {% endif %}
  188.                                     </td>
  189.                                     <td>{{ elem.htItem.dateStart|date('H:i') }} a {{ elem.htItem.hourEnd|date('H:i') }}</td>
  190.                                     <td>{{ elem.htItem.pax }}</td>
  191.                                     <td>{% if elem.htItem.loungeGp is not null %} {{ elem.htItem.loungeGp.name }} {% else %} {{ elem.htItem.loungeOther }} {% endif %}</td>
  192.                                 </tr>
  193.                             {% endfor %}
  194.                             </tbody>
  195.                         </table>
  196.                         <div class="row clearfix">
  197.                             <div class="col-xs-12">
  198.                                 <h5>Observaciones Sala</h5>
  199.                             </div>
  200.                         </div>
  201.                         <div class="observations-room">
  202.                             <table class="observations-table">
  203.                                 <tbody>
  204.                                 <tr>
  205.                                     <td>
  206.                                         {% if ht_file.descriptionTwo is not empty %}
  207.                                             {{ ht_file.descriptionTwo|raw }}
  208.                                         {% else %}
  209.                                             No hay observaciones para la sala.
  210.                                         {% endif %}
  211.                                     </td>
  212.                                 </tr>
  213.                                 </tbody>
  214.                             </table>
  215.                         </div>
  216.                         <div class="row clearfix">
  217.                             <div class="col-xs-12">
  218.                                 <h5>Observaciones Cocina</h5>
  219.                             </div>
  220.                         </div>
  221.                         <div class="observations">
  222.                             <table class="observations-table">
  223.                                 <tbody>
  224.                                 {# Recopilar todas las observaciones en una lista usando loop.index para mantener el ID de servicio #}
  225.                                 {% set observations = [] %}
  226.                                 {% for elem in arrayElem %}
  227.                                     {% if elem.htItem.observation is not empty %}
  228.                                         {% set observations = observations|merge([{'service': loop.index, 'obs': elem.htItem.observation|raw}]) %}
  229.                                     {% endif %}
  230.                                 {% endfor %}
  231.                                 {# Agrupar observaciones en pares manualmente #}
  232.                                 {% for elem in observations %}
  233.                                     {% if loop.index0 is divisible by(2) %}
  234.                                         <tr>
  235.                                     {% endif %}
  236.                                     <td>
  237.                                         <strong>Servicio {{ elem.service }}:</strong> {{ elem.obs|raw }}
  238.                                     </td>
  239.                                     {% if loop.index is divisible by(2) %}
  240.                                         </tr>
  241.                                     {% endif %}
  242.                                 {% endfor %}
  243.                                 {# Si el número de observaciones es impar, cerrar la última fila #}
  244.                                 {% if observations|length is odd %}
  245.                                     <td></td>
  246.                                     </tr>
  247.                                 {% endif %}
  248.                                 </tbody>
  249.                             </table>
  250.                         </div>
  251.                     </div>
  252.                 </div>
  253.                 {% set dias_semana = ['Domingo', 'Lunes', 'Martes', 'Miércoles', 'Jueves', 'Viernes', 'Sábado'] %}
  254.                 {% set meses = ['enero', 'febrero', 'marzo', 'abril', 'mayo', 'junio', 'julio', 'agosto', 'septiembre', 'octubre', 'noviembre', 'diciembre'] %}
  255.                 {% set dia_semana = ht_file.updatedAt.format('w') %}
  256.                 {% set dia = ht_file.updatedAt.format('j') %}
  257.                 {% set mes = ht_file.updatedAt.format('n') %}
  258.                 {% set year = ht_file.updatedAt.format('Y') %}
  259.                 {% for elem in arrayElem %}
  260.                     <div class="panel service">
  261.                         <div class="panel-heading">
  262.                             SERV {{ loop.index }} ({{ elem.htItem.dateStart|date('d/m/Y') }})
  263.                             <span style="float: right; font-size: 10px; color: #777;">
  264.                             {{ ht_file.title }} - Última actualización: {{ dias_semana[dia_semana] }} {{ dia }}, de {{ meses[mes - 1] }} de {{ year }}
  265.                         </span>
  266.                         </div>
  267.                         <div class="panel-body">
  268.                             <table>
  269.                                 <tr>
  270.                                     <td><strong>Sala:</strong> {{ elem.lounge }}</td>
  271.                                     <td><h4 class="text-mint_cream">Inicio:{{ elem.htItem.dateStart|date('H:i') }}</h4></td>
  272.                                     <td><h4 class="text-mint_cream">Fin:{{ elem.htItem.hourEnd|date('H:i') }}</h4></td>
  273.                                     <td><strong>Pax:</strong> {{ elem.htItem.pax }}</td>
  274.                                 </tr>
  275.                             </table>
  276.                             {% if elem.htMenus is not null %}
  277.                                 {% for menu in elem.htMenus %}
  278.                                     <legend class="text-uppercase">Menú: {{ menu.htMenu.name }}</legend>
  279.                                     <table class="escandallos-table">
  280.                                         <tbody>
  281.                                         {% for escan in menu.arrayEscandallos %}
  282.                                             {% if loop.index0 is even %}
  283.                                                 <tr>
  284.                                             {% endif %}
  285.                                             <td>{{ escan.escandallo.nombre }}</td>
  286.                                             {% if loop.index0 is odd or loop.last %}
  287.                                                 </tr>
  288.                                             {% endif %}
  289.                                         {% endfor %}
  290.                                         </tbody>
  291.                                     </table>
  292.                                 {% endfor %}
  293.                             {% endif %}
  294.                         </div>
  295.                     </div>
  296.                 {% endfor %}
  297.             {% endif %}
  298.             {% if reserva is not null %}
  299.                 <div class="panel panel-default">
  300.                     <div class="panel-heading">
  301.                         Información General del Evento
  302.                     </div>
  303.                     <div class="panel-body">
  304.                         <table>
  305.                             <tr>
  306.                                 <td><strong>Inicio:</strong> {{ reserva.dateStart|date('l')|trans }} {{ reserva.dateStart|date('d/m/Y') }}, a las {{ reserva.dateStart|date('H:i') }}</td>
  307.                                 <td><strong>Fin:</strong> {{ reserva.dateEnd|date('l')|trans }} {{ reserva.dateEnd|date('d/m/Y') }}, a las {{ reserva.dateEnd|date('H:i') }}</td>
  308.                             </tr>
  309.                             {% if montaje is not null %}
  310.                                 <tr>
  311.                                     <td colspan="2"><strong>Montaje:</strong> {{ montaje.dateStart|date('l')|trans }} {{ montaje.dateStart|date('j') }}, desde las {{ montaje.dateStart|date('H:i') }} hasta {{ montaje.dateEnd|date('H:i') }}</td>
  312.                                 </tr>
  313.                             {% endif %}
  314.                             {% if desmontaje is not null %}
  315.                                 <tr>
  316.                                     <td colspan="2"><strong>Desmontaje:</strong> {{ desmontaje.dateStart|date('l')|trans }} {{ desmontaje.dateStart|date('j') }}, desde las {{ desmontaje.dateStart|date('H:i') }} hasta {{ desmontaje.dateEnd|date('H:i') }}</td>
  317.                                 </tr>
  318.                             {% endif %}
  319.                         </table>
  320.                     </div>
  321.                 </div>
  322.             {% endif %}
  323.         </div>
  324.     </div>
  325. </div>
  326. </body>
  327. </html>