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

Open in your IDE?
  1. <!DOCTYPE html>
  2. <html lang="es">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Orden de Trabajo</title>
  8.     <style>
  9.         /* Reset de box-sizing */
  10.         *, *::before, *::after {
  11.             box-sizing: border-box;
  12.         }
  14.         body {
  15.             font-family: Arial, sans-serif;
  16.             font-size: 12px;
  17.             color: #333;
  18.             margin: 0;
  19.             padding: 0;
  20.         }
  22.         /* Contenedor */
  23.         .container {
  24.             width: 100%;
  25.             padding: 10px;
  26.             margin: 0 auto;
  27.         }
  29.         /* Clearfix para limpiar flotados */
  30.         .clearfix::after {
  31.             content: "";
  32.             display: table;
  33.             clear: both;
  34.         }
  36.         /* Columnas basadas en flotantes */
  37.         [class*="col-xs-"] {
  38.             float: left;
  39.             padding: 5px;
  40.         }
  42.         .col-xs-12 {
  43.             width: 100%;
  44.         }
  46.         .col-xs-6 {
  47.             width: 50%;
  48.         }
  50.         .col-xs-5 {
  51.             width: 41.666667%;
  52.         }
  54.         .col-xs-4 {
  55.             width: 33.333333%;
  56.         }
  58.         .col-xs-3 {
  59.             width: 25%;
  60.         }
  62.         .col-xs-2 {
  63.             width: 16.666667%;
  64.         }
  66.         .col-xs-1 {
  67.             width: 8.333333%;
  68.         }
  70.         /* Paneles */
  71.         .panel {
  72.             border: 1px solid #ccc;
  73.             border-radius: 3px;
  74.             margin-bottom: 10px;
  75.             background-color: #fff;
  76.         }
  78.         .panel-heading {
  79.             padding: 5px 10px;
  80.             border-bottom: 1px solid #ccc;
  81.             background-color: #e9ecef;
  82.             font-weight: bold;
  83.             font-size: 16px;
  84.             position: relative;
  85.         }
  87.         .panel-title {
  88.             margin: 0;
  89.             font-size: 14px;
  90.         }
  92.         /* Tablas */
  93.         table {
  94.             width: 100%;
  95.             border-collapse: collapse;
  96.             margin-bottom: 10px;
  97.         }
  99.         table th, table td {
  100.             border: 1px solid #ddd;
  101.             padding: 5px;
  102.             text-align: left;
  103.             vertical-align: top;
  104.             font-size: 12px;
  105.         }
  107.         table th {
  108.             background-color: #f2f2f2;
  109.             font-weight: bold;
  110.             font-size: 13px;
  111.         }
  113.         /* Utilidades de espaciado */
  114.         .mb-5 {
  115.             margin-bottom: 5px;
  116.         }
  118.         .mt-5 {
  119.             margin-top: 5px;
  120.         }
  122.         /* Tipografías */
  123.         h3, h4, h5, h6 {
  124.             margin: 5px 0;
  125.             font-weight: bold;
  126.         }
  128.         h3 {
  129.             font-size: 16px;
  130.         }
  132.         h4 {
  133.             font-size: 14px;
  134.         }
  136.         h5 {
  137.             font-size: 13px;
  138.         }
  140.         h6 {
  141.             font-size: 12px;
  142.         }
  144.         /* Evitar saltos de página dentro de un servicio */
  145.         .service {
  146.             page-break-inside: avoid;
  147.             break-inside: avoid;
  148.             margin-bottom: 10px;
  149.         }
  151.         /* Espaciado entre servicios */
  152.         .service + .service {
  153.             margin-top: 10px;
  154.         }
  156.         /* Observaciones */
  157.         .observations {
  158.             background-color: #fff;
  159.             font-size: 12px;
  160.         }
  162.         /* Leyendas */
  163.         legend {
  164.             font-size: 13px;
  165.             margin-bottom: 5px;
  166.             font-weight: bold;
  167.         }
  169.         /* Ajustes para el contenido dentro de paneles */
  170.         .panel .panel-body .row {
  171.             margin-left: -5px;
  172.             margin-right: -5px;
  173.         }
  175.         .panel .panel-body .col-xs-12 {
  176.             padding-left: 5px;
  177.             padding-right: 5px;
  178.         }
  180.         /* Limpiar flotados en filas */
  181.         .row {
  182.             margin-left: -5px;
  183.             margin-right: -5px;
  184.         }
  186.         /* Texto truncado */
  187.         .text-truncate {
  188.             white-space: nowrap;
  189.             overflow: hidden;
  190.             text-overflow: ellipsis;
  191.         }
  193.         /* Texto en mayúsculas */
  194.         .text-uppercase {
  195.             text-transform: uppercase;
  196.         }
  198.         /* Tabla de Escandallos en dos columnas */
  199.         .escandallos-table {
  200.             width: 100%;
  201.         }
  203.         .escandallos-table td {
  204.             width: 50%;
  205.         }
  207.         /* Tabla de Observaciones en dos columnas */
  208.         .observations-table {
  209.             width: 100%;
  210.         }
  212.         .observations-table td {
  213.             width: 50%;
  214.         }
  215.     </style>
  216. </head>
  218. <body>
  219.     <div class="container">
  220.         <div class="row clearfix">
  221.             <div class="col-xs-12">
  223.                 {% if ht_file is not empty %}
  225.                 <!-- Resumen -->
  226.                 <div class="panel">
  227.                     <div class="panel-heading">
  228.                         RESUMEN
  229.                     </div>
  230.                     {% if ht_file.clientType is not empty %}
  231.                     <div class="panel-heading">
  232.                         Tipo de comensal: {{ ht_file.clientType }}
  233.                     </div>
  234.                     {% endif %}
  235.                     <div class="panel-body">
  236.                         <table>
  237.                             <thead>
  238.                                 <tr>
  239.                                     <th>SERVICIO</th>
  240.                                     <th>HORARIO</th>
  241.                                     <th>PAX</th>
  242.                                     <th>ESPACIO/SALA</th>
  243.                                 </tr>
  244.                             </thead>
  245.                             <tbody>
  246.                                 {% set i = 1 %}
  247.                                 {% for elem in arrayElem %}
  248.                                 <tr class="service">
  249.                                     <td>{{ i }}: {{ elem.htItem.dateStart|date('l')|trans }} {{ elem.htItem.dateStart|date('j') }}, 
  250.                                     {% if elem.htItem.htMenus is not null %}
  251.                                         {% for menu in elem.htItem.htMenus %}
  252.                                             {{ menu.name }}{% if not loop.last %}, {% endif %}
  253.                                         {% endfor %}
  254.                                     {% endif %} 
  255.                                     </td>
  256.                                     <td>{{ elem.htItem.dateStart|date('H:i') }} a {{ elem.htItem.hourEnd|date('H:i') }}</td>
  257.                                     <td>{{ elem.htItem.pax }}</td>
  258.                                     <td>{% if elem.htItem.loungeGp is not null %} {{ elem.htItem.loungeGp.name }} {% else %} {{ elem.htItem.loungeOther }} {% endif %}</td>
  259.                                 </tr>
  260.                                 {% set i = i + 1 %}
  261.                                 {% endfor %}
  262.                             </tbody>
  263.                         </table>
  265.                         <!-- Observaciones -->
  266.                         <div class="row clearfix">
  267.                             <div class="col-xs-12">
  268.                                 <h5>Observaciones</h5>
  269.                             </div>
  270.                         </div>
  271.                         <div class="observations">
  272.                             <table class="observations-table">
  273.                                 <tbody>
  274.                                     {# Recopilar todas las observaciones en una lista #}
  275.                                     {% set observations = [] %}
  276.                                     {% set i = 1 %}
  277.                                     {% for elem in arrayElem %}
  278.                                         {% if elem.htItem.observation is not empty %}
  279.                                             {% set observations = observations|merge([{'service': i, 'obs': elem.htItem.observation|raw}]) %}
  280.                                             {% set i = i + 1 %}
  281.                                         {% endif %}
  282.                                     {% endfor %}
  284.                                     {# Agrupar observaciones en pares manualmente #}
  285.                                     {% for elem in observations %}
  286.                                         {% if loop.index0 is divisible by(2) %}
  287.                                             <tr>
  288.                                         {% endif %}
  289.                                         <td>
  290.                                             <strong>Servicio {{ elem.service }}:</strong> {{ elem.obs|raw }}
  291.                                         </td>
  292.                                         {% if loop.index is divisible by(2) %}
  293.                                             </tr>
  294.                                         {% endif %}
  295.                                     {% endfor %}
  297.                                     {# Si el número de observaciones es impar, cerrar la última fila #}
  298.                                     {% if observations|length is odd %}
  299.                                         <td></td>
  300.                                         </tr>
  301.                                     {% endif %}
  302.                                 </tbody>
  303.                             </table>
  304.                         </div>
  305.                     </div>
  306.                 </div>
  308.                 <!-- Detalles de Servicios -->
  309.                 {% set dias_semana = ['Domingo', 'Lunes', 'Martes', 'Miércoles', 'Jueves', 'Viernes', 'Sábado'] %}
  310.                 {% set meses = ['enero', 'febrero', 'marzo', 'abril', 'mayo', 'junio', 'julio', 'agosto',
  311.                 'septiembre', 'octubre', 'noviembre', 'diciembre'] %}
  312.                 {% set dia_semana = ht_file.updatedAt.format('w') %}
  313.                 {% set dia = ht_file.updatedAt.format('j') %}
  314.                 {% set mes = ht_file.updatedAt.format('n') %}
  315.                 {% set year = ht_file.updatedAt.format('Y') %}
  316.                 {% set i = 1 %}
  317.                 {% for elem in arrayElem %}
  318.                 <div class="panel service">
  319.                     <div class="panel-heading">
  320.                         SERV {{ i }} ({{ elem.htItem.dateStart|date('d/m/Y') }})
  321.                         <span style="float: right; font-size: 10px; color: #777;">
  322.                             {{ ht_file.title }} - Última actualización: {{ dias_semana[dia_semana] }} {{ dia }}, de {{ meses[mes - 1] }} de {{ year }}
  323.                         </span>
  324.                     </div>
  325.                     <div class="panel-body">
  326.                         <table>
  327.                             <tr>
  328.                                 <td><strong>Sala:</strong> {{ elem.lounge }}</td>
  329.                                 <td><h4>Inicio:{{ elem.htItem.dateStart|date('H:i') }}</h4></td>
  330.                                 <td><h4>Fin:{{ elem.htItem.hourEnd|date('H:i') }}</h4></td>
  331.                                 <td><strong>Pax:</strong> {{ elem.htItem.pax }}</td>
  332.                             </tr>
  333.                         </table>
  335.                         {% if elem.htMenus is not null %}
  336.                         {% for menu in elem.htMenus %}
  337.                             <legend class="text-uppercase">Menú: {{ menu.htMenu.name }}</legend>
  338.                             <table class="escandallos-table">
  339.                                 <tbody>
  340.                                     {% for escan in menu.arrayEscandallos %}
  341.                                         {% if loop.index0 is even %}
  342.                                             <tr>
  343.                                         {% endif %}
  344.                                         <td>{{ escan.escandallo.nombre }}</td>
  345.                                         {% if loop.index0 is odd or loop.last %}
  346.                                             </tr>
  347.                                         {% endif %}
  348.                                     {% endfor %}
  349.                                 </tbody>
  350.                             </table>
  351.                         {% endfor %}
  352.                         {% endif %}
  353.                     </div>
  354.                 </div>
  355.                 {% set i = i + 1 %}
  356.                 {% endfor %} 
  357.                 {% endif %}
  359.                 {% if reserva is not null %}
  360.                 <!-- Información General del Evento -->
  361.                 <div class="panel">
  362.                     <div class="panel-heading">
  363.                         Información General del Evento
  364.                     </div>
  365.                     <div class="panel-body">
  366.                         <table>
  367.                             <tr>
  368.                                 <td><strong>Inicio:</strong> {{ reserva.dateStart|date('l')|trans }} {{ reserva.dateStart|date('d/m/Y') }}, a las {{ reserva.dateStart|date('H:i') }}</td>
  369.                                 <td><strong>Fin:</strong> {{ reserva.dateEnd|date('l')|trans }} {{ reserva.dateEnd|date('d/m/Y') }}, a las {{ reserva.dateEnd|date('H:i') }}</td>
  370.                             </tr>
  371.                             {% if montaje is not null %}
  372.                             <tr>
  373.                                 <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>
  374.                             </tr>
  375.                             {% endif %}
  376.                             {% if desmontaje is not null %}
  377.                             <tr>
  378.                                 <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>
  379.                             </tr>
  380.                             {% endif %}
  381.                         </table>
  382.                     </div>
  383.                 </div>
  384.                 {% endif %}
  386.             </div>
  387.         </div>
  388.     </div>
  389. </body>
  391. </html>