templates/calculator/business_card_calculator.html.twig line 1

Open in your IDE?
  1. {% extends 'admin.html.twig' %}
  2. {% block stylesheets %}
  3.     {{ parent() }}
  4.     {{ encore_entry_link_tags('business_card_calculator') }}
  5. {% endblock %}
  6. {% block title %}Calculators{% endblock %}
  7. {% block body %}
  8.         <div class="row">
  9.             <div class="col">
  10.                 {{ include('calculator/nav.html.twig') }}
  11.                 <h1>{{ calculator.name }}</h1>
  12.                 <form id="calculatorForm" method="post" action="{{ path('calculate', {'id':calculator.id }) }}">
  13.                     <div class="row">
  14.                         <div class="col">
  15.                             <div class="row">
  16.                                 <div class="col">
  17.                                     <h5>Options</h5>
  18.                                 </div>
  19.                             </div>
  20.                             <div class="row mb-1">
  21.                                 <label class="col-sm-2 col-form-label">Printing Type</label>
  22.                                 <div class="col-sm-10">
  23.                                     <label for="printingTypeSelect" class="visually-hidden">Printing Type</label>
  24.                                     <select id="printingTypeSelect" class="form-select form-select-sm" name="printing_type[id]" >
  25.                                         <!-- Testing -->
  26.                                         <option value="4" >[SF] Sheet Fed</option>
  27.                                     </select>
  28.                                 </div>
  29.                             </div>
  30.                             <div class="row mb-1">
  31.                                 <label class="col-sm-2 col-form-label">Machine</label>
  32.                                 <div class="col-sm-10">
  33.                                     <label for="machineSelect" class="visually-hidden">Machine</label>
  34.                                     <select id="machineSelect" class="form-select form-select-sm" name="machine[id]">
  35.                                         <!-- Testing -->
  36.                                         <option value="2" >[rc] Richo</option>
  37.                                     </select>
  38.                                 </div>
  39.                             </div>
  40.                             <div class="row mb-1">
  41.                                 <label class="col-sm-2  col-form-label">Paper Size</label>
  42.                                 <div class="col-sm-10">
  43.                                     <label for="paperSizeSelect" class="visually-hidden">Paper Size</label>
  44.                                     <select id="paperSizeSelect" class="form-select form-select-sm" name="paper_size[id]">
  45.                                         <!-- Testing -->
  46.                                         <option value="1" data-select2-id="select2-data-41-4y1m">[SRA3] SRA3</option>
  47.                                     </select>
  48.                                 </div>
  49.                             </div>
  50.                             <div class="row mb-1">
  51.                                 <label class="col-sm-2 col-form-label">Finished Size</label>
  52.                                 <div class="col-sm-10">
  53.                                     <div class="row mb-1">
  54.                                         <div class="col">
  55.                                             <div class="input-group">
  56.                                                 <label for="finishedSizeX" class="visually-hidden">X</label>
  57.                                                 <input name="finished_size[x]" type="number" id="finishedSizeX" class="form-control form-control-sm text-end finishedSize" aria-describedby="finishedSizeX" value="90">
  58.                                                 <span class="input-group-text" id="finishedSizeX-addon1">X</span>
  59.                                             </div>
  60.                                         </div>
  61.                                         <div class="col">
  62.                                             <div class="input-group">
  63.                                                 <label for="finishedSizeY" class="visually-hidden">Y</label>
  64.                                                 <input name="finished_size[y]" type="number" id="finishedSizeY" class="form-control form-control-sm text-end finishedSize" aria-describedby="finishedSizeY" value="55">
  65.                                                 <span class="input-group-text" id="finishedSizeY-addon1">Y</span>
  66.                                             </div>
  67.                                         </div>
  68.                                     </div>
  69.                                 </div>
  70.                             </div>
  71.                             <div class="row mb-1">
  72.                                 <label class="col-sm-2 col-form-label">Imposition</label>
  73.                                 <div class="col-sm-10">
  74.                                     <label for="impositionSelect" class="visually-hidden">Paper Size</label>
  75.                                     <select type="text" name="imposition[id]" id="impositionSelect" class="form-select form-select-sm" >
  76.                                         <option value="1" >90x50 business card 21 up</option>
  77.                                     </select>
  78.                                 </div>
  79.                             </div>
  80.                             <div class="row mb-1">
  81.                                 <label class="col-sm-2 col-form-label">Paper Type</label>
  82.                                 <div class="col-sm-10">
  83.                                     <label for="paperTypeSelect" class="visually-hidden">Paper Type</label>
  84.                                     <select name="paper_type[id]" id="paperTypeSelect" class="form-select form-select-sm" >
  85.                                         <option value="4245" >350gsm COATED BOARD SILK MATT WHITE</option>
  86.                                     </select>
  87.                                 </div>
  88.                             </div>
  89.                             <div class="row mb-1">
  90.                                 <label class="col-sm-2 col-form-label">Side 1</label>
  91.                                 <div class="col-sm-4">
  92.                                     <label for="sidesSelect" class="visually-hidden">Sides</label>
  93.                                     <select name="sides[0]" id="sidesSelect" class="form-select form-select-sm" >
  94.                                         <option value="colour">Colour</option>
  95.                                         <option value="black_only">Black Only</option>
  96.                                     </select>
  97.                                 </div>
  98.                                 <label class="col-sm-2 col-form-label">Side 2</label>
  99.                                 <div class="col-sm-4">
  100.                                     <label for="sidesSelect" class="visually-hidden">Sides</label>
  101.                                     <select name="sides[1]" id="sidesSelect" class="form-select form-select-sm" >
  102.                                         <option value="none">None</option>
  103.                                         <option value="colour">Colour</option>
  104.                                         <option value="black_only">Black Only</option>
  105.                                     </select>
  106.                                 </div>
  107.                             </div>
  108.                             <div class="row mb-1">
  109.                             </div>
  110.                         </div>
  111.                         <div class="col tasks">
  112.                             <div class="row ">
  113.                                 <div class="col-auto align-middle">
  114.                                     <h5 class="">Tasks</h5>
  115.                                 </div>
  116.                             </div>
  117.                             <div class="row">
  118.                                 <div class="col">
  119.                                     <div class="row mb-1">
  120.                                         <label class="col-form-label visually-hidden">Select Task</label>
  121.                                         <div class="col">
  122.                                             <label for="taskSelect" class="visually-hidden">Search Code or Name</label>
  123.                                             <select type="text" id="taskSelect" class="form-select form-select-sm" ></select>
  124.                                         </div>
  125.                                     </div>
  126.                                 </div>
  127.                             </div>
  128.                             <div class="row mb-1 py-1">
  129.                                 <div class="col">
  130.                                     <div class="added-tasks" data-index="0">
  131.                                         <div class="task-panel panel-warning mb-2 border border-2 p-2 ">
  132.                                             <div class="task-panel-heading mb-2 p-2">
  133.                                                 <div class="row">
  134.                                                     <div class="col">Name</div>
  135.                                                     <div class="col">Code</div>
  136.                                                     <div class="col">Remove</div>
  137.                                                 </div>
  138.                                             </div>
  139.                                         </div>
  140.                                     </div>
  141.                                 </div>
  142.                             </div>
  143.                         </div>
  144.                     </div>
  145.                     <div class="row mt-3">
  146.                         <div class="col d-grid">
  147.                             <button class="btn btn-primary" type="submit">Calculate</button>
  148.                         </div>
  149.                     </div>
  150.                 </form>
  151.                 <div class="modal fade" data-bs-backdrop="static" id="calculatorModal" tabindex="-1">
  152.                     <div class="modal-dialog modal-xl modal-dialog-centered modal-dialog-scrollable">
  153.                         <div class="modal-content">
  154.                             <div class="modal-header">
  155.                                 <h5 class="modal-title">Business Card</h5>
  156.                                 <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
  157.                             </div>
  158.                             <div class="modal-body">
  159.                                 <div class="spinner d-flex justify-content-center">
  160.                                     <div class="spinner-border" role="status">
  161.                                         <span class="visually-hidden">Loading...</span>
  162.                                     </div>
  163.                                 </div>
  164.                             </div>
  165.                             <div class="modal-footer">
  166.                                 <button type="button" id="modal-calculate-btn" class="btn btn-primary">Calculate</button>
  167.                                 <button class="text-end btn-primary btn" id="modal-show-cost-btn">Show Cost</button>
  168.                                 <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
  169.                             </div>
  170.                         </div>
  171.                     </div>
  172.                 </div>
  173.             </div>
  174.         </div>
  175. {% endblock %}
  176. {% block javascripts %}
  177.     {{ parent() }}
  178.     {{ encore_entry_script_tags('business_card_calculator') }}
  179. {% endblock %}