templates/themes/ottcomputer/wicam/index.html.twig line 1

Open in your IDE?
  1. {% extends 'content.cad2cut.html.twig' %}
  2. {% block body_classes %}{% spaceless %}
  3.     is-ctl-product is-act-detail is-calculation custom-bg
  4. {% endspaceless %}{% endblock %}
  5. {% block container_inner %}
  6.     {{ include('includes/modal-confirm-offer.html.twig') }}
  7.     <script>
  8.         const MSG_UPLOAD_ERROR = '{{ "One or more files cannot be read."|trans }}';
  9.         const MSG_MAX_UPLOAD_FILES = '{{ "You cannot send more than %maxUploadFiles% files at the same time."|trans({'%maxUploadFiles%':maxUploadFiles}) }}'
  10.         const MSG_MAX_UPLOAD_FILES_NOT_LOGIN = '{{ "For further calculation please register in our webshop or log in to your existing account."|trans }}'
  11.         const REMOVE_FILE = '{{ 'Remove File'|trans }}'
  12.         const MSG_DELETE_NOTE = '{{ 'Are you sure to delete this note?'|trans }}'
  13.         const MSG_DELETE_OPTION = '{{ 'Are you sure to delete this option?'|trans }}'
  14.     </script>
  16.     {% if toEdit %}
  17.         <style>
  18.             header,footer{
  19.                 display:none;
  20.             }
  21.         </style>
  22.     {% endif %}
  23.     {% set header_id = "" %}
  24.     {% set wicam_header_id = "" %}
  25.     {% set date_surcharge = "" %}
  26.     {% if WH is not empty %}
  27.         {% set header_id = WH.wicamHeaderId %}
  28.         {% set wicam_header_id = WH.wicamHeaderId %}
  29.         {% set guid = WH.guid %}
  30.         {% set date_surcharge = WH.dateSurcharge | date('Y-m-d') %}
  31.     {% endif %}
  35. <div class="grid-x grid-margin-x">
  36.     <input type="hidden" id="guid" name="guid" value="{{ guid }}">
  37.     <input type="hidden" id="header_id" name="header_id" value="{{ header_id }}">
  38.     <input type="hidden" id="wicam_header_id" name="wicam_header_id" value="{{ wicam_header_id }}">
  39.     <input type="hidden" id="urlheader" value="{{ path('wi_cam_set_header') }}">
  40.     <input type="hidden" id="date_surcharge" value="{{ date_surcharge }}">
  41.     <input type="hidden" id="url_calculate" value="{{ path('wi_cam_calculate') }}">
  42.     <input type="hidden" id="url_multiple_surcharges" value="{{ path('multiple_surcharges') }}">
  43.     <input type="hidden" id="url_add_item" value="{{ path('calculation_addItem') }}">
  44.     <input type="hidden" id="messageMissingFields" value="{{ "Please enter/select the missing values!"|trans }}">
  45.     <input type="hidden" id="maxUploadFiles" value="{{ maxUploadFiles }}">
  46.     <input type="hidden" id="isLoggedIn" value="{{ isLoggedIn }}">
  48.     <span id="editModal"></span>
  50.     <div class="cell medium-9" id="detail-content">
  51.         <div class="grid-x grid-margin-x">
  52.             <div class="cell small-12 medium-6">
  53.                 <form action="{{ path('wi_cam_upload') }}" id="WiCamFiles" style="height: 100%">
  54.                     <h3><b>{{ "CAD Datei hochladen"|trans }}</b></h3>
  55.                     <div class="dz-message needsclick">
  56.                         {{ "Drop %maxUploadFiles% files here or click to upload."|trans({'%maxUploadFiles%':maxUploadFiles}) }}
  57.                         <br>
  58.                         <div id="messageLimitFiles" class="hide" style="color: red">
  59.                             {{ "For further calculation please register in our webshop or log in to your existing account."|trans }}
  60.                         </div><button type="button" class="button margin-top-1">{{ "CAD Datei hochladen"|trans }}</button>
  61.                     </div>
  62.                 </form>
  63.             </div>
  64.             <div class="cell small-12 medium-6">
  65.                 <form class="custom-form" action="{{ path('wi_cam_send') }}" data-generate="{{ path('wi_cam_generate') }}" id="WiCamSend">
  66.                     <h3 class="text-left"><b>{{ "Choose Shape"|trans }}</b></h3>
  67.                     <div class="owl-carousel owl-carousel-custom-form owl-theme">
  69.                         {% for sh in shapes %}
  70.                             <div class="item" data-id="{{ sh.id }}">
  71.                                 <img src="{{ sh.smallImage }}" style="height: 90px;width: auto;" title="{{ sh.description|trans }}" alt="{{ sh.description|trans }}">
  72.                             </div>
  73.                         {% endfor %}
  74.                     </div>
  75.                     <button type="button" id="btChooseShape" name="btChooseShape"  class="button">{{ "Choose Shape"|trans }}</button>
  76.                 </form>
  77.             </div>
  78.         </div>
  80.         <form action="{{ path('wi_cam_send') }}" data-generate="{{ path('wi_cam_generate') }}" id="WiCamSend" style="margin-top:10px;">
  81.             <button type="button" id="btSend" class="button secondary disabled">{{ "Send Files" | trans }}</button>
  82.             <!--<button type="button" id="btChooseShape" name="btChooseShape"  class="button secondary">{{ "Choose Shape"|trans }}</button>-->
  83.         </form>
  85.         <ul id="files" style="display:none;">
  86.             <!-- <input type="hidden" id="a20efaea-3369-4fb9-a3ba-ff3be7179cf1" data-name="Ronde_Lochblech_002.dxf" value="6109b05cc84cb.dxf"> -->
  87.         </ul>
  89.         {% set general_setting_box_show = general_setting_box  ? '' : 'hide' %}
  91.         <div class="listing-header callout {{ general_setting_box_show }}">
  92.             <div class="header-options">
  93.                {% if toEdit %}
  94.                    {% if is_granted('ROLE_ADMIN') %}
  95.                        <input type="hidden" id="action-load-customers" value="{{ path('wi_cam_load_customer') }}">
  96.                        <div class="grid-x align-spaced align-middle grid-margin-x">
  97.                            <div class="cell small-12 medium-12">
  98.                                <label>{{ "Representative" | trans }}:</label>
  99.                                <select id="representative" name="representative">
  100.                                    {% if representatives is not empty %}
  101.                                        <option></option>
  102.                                        {% for representative in representatives %}
  103.                                            {% set selected = ' ' %}
  104.                                            {% if WH is not empty %}
  105.                                                {% if WH.representativeId|default(0) == representative.id %}
  106.                                                    {% set selected = 'selected' %}
  107.                                                {% endif %}
  108.                                            {% endif %}
  109.                                            <option value="{{ representative.id }}" {{ selected }} >{{ representative.firstName }} {{ representative.lastName }}</option>
  110.                                        {% endfor %}
  111.                                    {% endif %}
  112.                                </select>
  113.                            </div>
  114.                        </div>
  115.                    {% endif %}
  116.                {% endif %}
  117.                 {% if isRepresentativeOrAdmin %}
  118.                     <div class="grid-x align-spaced align-middle grid-margin-x">
  119.                         <div class="cell small-12 medium-12">
  120.                             <label>{{ "Customer" | trans }}:</label>
  121.                             <select id="customer" name="customer">
  122.                                 {% if customers is not empty %}
  123.                                     <option></option>
  124.                                     {% for customer in customers %}
  125.                                         {% set selected = ' ' %}
  126.                                         {% if WH is not empty %}
  127.                                             {% if WH.customerId|default(0) == customer.id %}
  128.                                                 {% set selected = 'selected' %}
  129.                                             {% endif %}
  130.                                         {% endif %}
  131.                                         <option value="{{ customer.id }}" {{ selected }} >{{ customer.name }} {{ customer.lastName }}</option>
  132.                                     {% endfor %}
  133.                                 {% endif %}
  134.                             </select>
  135.                         </div>
  136.                     </div>
  137.                 {% endif %}
  138.                 <div class="grid-x align-spaced align-middle grid-margin-x">
  139.                     <div class="cell small-4 medium-2" data-url="{{ path('wi_cam_postcodes') }}">
  140.                         <label>{{ "PLZ (Pflichtfeld)" | trans }}</label>
  141.                         <input readonly="readonly" type="text" name="plz" id="plz" value="{{ WH is not empty ? WH.plz : "" }}">
  142.                         <input type="hidden" name="plz_value" id="plz_value" value="">
  143.                     </div>
  144.                     <div class="cell small-8 medium-10">
  145.                         <label>&nbsp;</label>
  146.                         <input type="text" readonly name="plz_ex" id="plz_ex" value="{{ plz is not empty ? (plz.ort ~ ' - ' ~ plz.bundesland) : (WH is not empty ? WH.city ~ ' - ' ~ WH.country ~ ' - ' ~ WH.street : '')}}">
  147.                     </div>
  148.                 </div>
  149.                 <hr>
  150.                 <div class="grid-x align-spaced align-middle grid-margin-x">
  151.                     <div class="cell small-12 medium-4">
  152.                         <label>{{"Material Grades" | trans}}</label>
  153.                         <select id="materialgrade_filter" class="materialgrade_filter">
  154.                             <option value="0">{{"Choose one" | trans}}</option>
  155.                             {%  for mg in materialgrades %}
  156.                                 {% set selected = ' ' %}
  157.                                 {% if materialgrades|length == 1 %}
  158.                                     {% set selected = ' selected ' %}
  159.                                 {% endif %}
  160.                                 <option value="{{ mg.id }}" {{ selected }} >{{ mg.description }}</option>
  161.                             {% endfor %}
  162.                         </select>
  163.                     </div>
  164.                     <div class="cell small-12 medium-4">
  165.                         <label>{{"Dicke"|trans}}</label>
  166.                         <select id="thickness_filter" class="thickness_filter">
  167.                             <option value="0">{{"Choose one" | trans}}</option>
  168.                             {%  for th in thickness %}
  169.                                 <option value="{{ th.id }}">{{ th.value }} mm</option>
  170.                             {% endfor %}
  171.                         </select>
  172.                     </div>
  173.                     <div class=" cell small-12 medium-4">
  174.                         <label>{{"Stück"|trans}}</label>
  175.                         <div class="input-group expanded amount" style="margin-bottom:1rem;">
  176.                             <button class="button minus" type="button" disabled>-</button>
  177.                             <input name="amount_filter"
  178.                                    id="amount_filter"
  179.                                    type="number" value="0"
  180.                                    oninput="javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);"
  181.                                    maxlength="6"
  182.                                    max="9999"
  183.                                    pattern="number"
  184.                                    class="amount amount_value_filter" style="padding:0px;"/>
  185.                             <button class="button plus" type="button">+</button>
  186.                         </div>
  187.                     </div>
  190.                 </div>
  192.                  <div class="grid-x align-spaced align-middle grid-margin-x">
  193.                     <div class="cell small-12 medium-8">
  194.                         <label>{{"Surcharges" | trans}}</label>
  195.                         {%  for mg in surcharges_items %}
  196.                             <label class="container_surcharge" >
  197.                                 <input type="checkbox" class="surcharges_chk_filter" name="surcharges_chk_filter" value="{{ mg.id }}">
  198.                                 <span class="">{{ mg.descriptions[app.request.locale] }}</span>
  199.                             </label>
  200.                         {% endfor %}
  201.                     </div>
  202.                      <div class="cell small-12 medium-2">
  203.                          <label>&nbsp;</label>
  204.                          <span>
  205.                             <button type="button" id="btApplyFilter" class="button secondary expand top tooltip-detail" data-tooltip aria-haspopup="true"
  206.                                     data-disable-hover="false" data-allow-html="true"
  207.                                     tabindex="2"
  208.                                     title="{{ "Die folgenden Einstellungen auf alle Bauteile des aktuellen Angebots anwenden" | trans }}">{{ "Apply for all" | trans }}</button>
  209.                         </span>
  210.                      </div>
  211.                      <div class="cell small-12 medium-2">
  212.                          <label>&nbsp;</label>
  213.                          <span>
  214.                             <button type="button" id="btDeleteInvalid" data-open="ShowInvalidData" class="button expand top tooltip-detail" data-tooltip aria-haspopup="true"
  215.                                     data-disable-hover="false" data-allow-html="true"
  216.                                     tabindex="2"
  217.                                     title="{{ "Sie haben ungültige Dateien, wollen Sie diese löschen?" | trans }}" style="display:none;">
  218.                                 <i class="fas fa-exclamation-triangle" style="
  219.                                     position: absolute;
  220.                                     top: 3px;
  221.                                     right: 3px;
  222.                                     font-size: 1.1em;
  223.                                     color:#cc4b37;
  224.                                 "></i>
  225.                                 <span class="invalid_amount"></span>&nbsp;
  226.                                 <span class="single_invalid_text" style="display: none;">{{ "ungültige Datei"|trans }}</span>
  227.                                 <span class="multiple_invalid_text">{{ "ungültige Dateien"|trans }}</span>
  228.                             </button>
  229.                         </span>
  230.                      </div>
  231.                      <span id="calculate"></span>
  232.                  </div>
  233.             </div>
  234.         </div>
  236.         <div id="fileResponse" data-total="{{ path('wi_cam_total') }}">
  237.             {% if WH is not empty %}
  238.                 {{ files|raw }}
  239.             {% endif %}
  240.         </div>
  242.         <DIV id="preview-template" style="display: none;">
  243.             <DIV class="dz-preview dz-file-preview">
  244.                 <DIV class="dz-image"><IMG data-dz-thumbnail=""></DIV>
  245.                 <DIV class="dz-details">
  246.                     <DIV class="dz-size"><SPAN data-dz-size=""></SPAN></DIV>
  247.                     <DIV class="dz-filename"><SPAN data-dz-name=""></SPAN></DIV>
  248.                 </DIV>
  249.                 <DIV class="dz-progress"><SPAN class="dz-upload"
  250.                                                data-dz-uploadprogress=""></SPAN></DIV>
  251.                 <div class="dz-error-message" style="top:95px"><span data-dz-errormessage="">{{ "Error"|trans }}</span></div>
  252.                 <div class="dz-success-mark">
  254.                 </div>
  255.                 <div class="dz-error-mark">
  257.                 </div>
  258.             </DIV>
  259.         </DIV>
  261.     </div>
  262.     <div class="cell medium-3" data-sticky-container>
  263.         <div class="sticky" data-sticky data-margin-top="2" data-sticky-on="medium"
  264.              data-check-every="0"
  265.              data-anchor="detail-content">
  266.             <div id="buyboxLoading" class="modal-loading"><div class="loader"></div></div>
  267.             <input type="text" id="price_general_surcharge" class="hide" value="{{ WH is not empty ? WH.priceSurchargeId|default(0) }}">
  268.             <div class="show-for-medium" id="buybox-large">
  269.                 {{ include('includes/buybox-wicam.html.twig') }}
  270.             </div>
  271.             <div>
  272.                 {{ include('includes/wicam-calendar.html.twig',{'notes':notes}) }}
  273.             </div>
  274.         </div>
  275.     </div>
  276. </div>
  278. <div class="hide-for-medium">
  279.     {{ include('includes/buybox-wicam-mobile.html.twig') }}
  280. </div>
  283. <div class="reveal" id="LoadingModal" data-reveal data-close-on-click="false" data-close-on-esc="false">
  284.     <h3>{{ "Sending Files" | trans }} <img src="{{ asset('build/unionstahl/images/loading.gif','unionstahl') }}" width="50" class="loading-modal-img"/></h3>
  285.     <hr>
  286.     <p>{{ "We process your files... it won't take much longer." | trans }}</p>
  287.     <div id="list_files">
  288.     </div>
  289.     <button type="button" class="button custom-close-reveal-modal hide" disabled id="closeLoadingModal">Close</button>
  290. </div>
  291. <div class="reveal" id="LoadingDetail" data-reveal data-close-on-click="false" data-close-on-esc="false">
  292.     <h3>{{ "Loading Details" | trans }} <img src="{{ asset('build/unionstahl/images/loading.gif','unionstahl') }}" width="50" /></h3>
  293.     <hr>
  294.     <p>{{ "We process your data... it won't take much longer." | trans }}</p>
  295. </div>
  296.     <div class="reveal" id="ShowInvalidData" data-reveal data-close-on-click="false" data-close-on-esc="false">
  297.         <h3>{{ "Ungültige Dateien" | trans }} </h3>
  298.         <hr>
  299.         <span class="single-invalid">{{ "Sie haben 1 ungültige Datei, wollen Sie diese löschen?"|trans }}</span>
  300.         <span class="multiple-invalids_str" style="display: none;">{{ "Sie haben #fileNumber ungültige Dateien, wollen Sie diese löschen?"|trans }}</span>
  301.         <span class="multiple-invalids"></span>
  302.         <div class="article-listing-header  callout hide-for-small-only" style="    border: 0px;/* padding: 1rem; */margin-bottom: 0.5rem;">
  303.             <div class="grid-x align-justify align-middle grid-margin-x">
  304.                 <div class="cell small-1 font-bold">
  305.                     {{"Pos"|trans}}
  306.                 </div>
  307.                 <div class="cell small-5 font-bold">
  308.                     {{"Dateiname"|trans}}
  309.                 </div>
  310.                 <div class="cell small-6 font-bold">
  311.                     {{"Hinweis"|trans}}
  312.                 </div>
  313.             </div>
  314.         </div>
  315.         <div id="invalid_list_files"></div>
  316.         <button class="close-button" data-close aria-label="Close modal" type="button">
  317.             <span aria-hidden="true">&times;</span>
  318.         </button>
  319.         <hr>
  320.         <button type="button" class="button" id="btDeleteAllInvalidFiles">
  321.             {{ "Ungültige Dateien aus Bestellung entfernen"|trans }}
  322.         </button>
  323.     </div>
  325.     <div class="reveal" id="DeleteConfirmation" data-reveal data-close-on-click="false" data-close-on-esc="false">
  326.         <h3>{{ "Bestätigung erforderlich" | trans }}</h3>
  327.         <input type="hidden" id="row_identification">
  328.         <hr>
  329.         <span id="delete_str" style="display: none">{{ "Möchten Sie die Position (#POS-Number - #NAME_OF_THE_FILE) wirklich aus Ihrer Bestellung entfernen?"|trans }}</span>
  330.         <p id="delete_str_show">{{ "Are you sure to delete this position?" | trans }}</p>
  331.         <hr>
  332.         <button type="button" id="btDeleteRow" class="button secondary">{{ "Ja, Position entfernen"|trans }}</button>
  333.         <button type="button" class="button primary white-borders" style="vertical-align: top;" data-close>{{ "Nein, Position beibehalten"|trans }}</button>
  334.     </div>
  336.     <div class="large reveal" id="ShapeModal" data-reveal>
  338.         <input type="hidden" id="url_properties" value="{{ path('shape_properties') }}">
  339.         <input type="hidden" id="url_results" value="{{ path('calculation_results') }}">
  340.         <input type="hidden" name="shapeId" id="shapeId" value="">
  341.         <input type="hidden" name="WiCamIdentify" id="WCamIdentify" value="">
  342.         <div class="grid-container" id="ShapeList">
  343.             <h3>{{ "Choose a shape"|trans }}</h3>
  344.             <ul class="tabs" data-tabs id="deeplinked-tabs">
  345.                 <li class="tabs-title is-active"><a href="#panel1d" aria-selected="true">{{ "Form"|trans }}</a></li>
  346. {#                <li class="tabs-title"><a href="#panel2d">{{ "Most Frequently"|trans }}</a></li>#}
  347.             </ul>
  348.             <div class="tabs-content" data-tabs-content="deeplinked-tabs">
  349.                 <div class="tabs-panel is-active" id="panel1d">
  350.                     <div class="grid-x shapeContainer">
  351.                         {% for sh in shapes %}
  352.                             <div class="cell small-6 medium-2 large-2">
  353.                                 <div class="card shape" data-id="{{ sh.id }}">
  354.                                     <div class="card-section">
  355.                                         <img src="{{ sh.image }}" style="height: 100px;">
  356.                                         <h5>{{ sh.description|trans }}</h5>
  357.                                     </div>
  358.                                 </div>
  359.                             </div>
  360.                         {% endfor %}
  361.                     </div>
  362.                  </div>
  363.                 <div class="tabs-panel" id="panel2d">
  364.                     <div class="grid-x shapeContainer">
  365.                         {% for sh in shapesFrequently %}
  366.                             <div class="cell small-6 medium-2 large-2">
  367.                                 <div class="card shape" data-id="{{ sh.id }}">
  368.                                     <div class="card-section">
  369.                                         <img src="{{ sh.image }}" style="height: 100px;">
  370.                                         <h5>{{ sh.description }}</h5>
  371.                                     </div>
  372.                                 </div>
  373.                             </div>
  374.                         {% endfor %}
  375.                     </div>
  376.                 </div>
  377.             </div>
  378.         </div>
  379.         <div class="grid-container" id="CalculationInfo">
  380.             <div class="info">Loading...</div>
  381.             <button class="button primary white-borders" id="btBack">{{ "Back"|trans }}</button>
  382.             <button class="button secondary" id="btAddToOverview" disabled>{{ "Add"|trans }}</button>
  383.         </div>
  385.         <button class="close-button" data-close aria-label="Close modal" type="button">
  386.             <span aria-hidden="true">&times;</span>
  387.         </button>
  388.     </div>
  391.     <div class="large reveal" id="calculationModal" data-reveal>
  392.         <h3>{{"Calculation Form"|trans}} - <span class="title"></span></h3>
  396.     </div>
  398. {% endblock %}
  399. {% block javascripts_extend %}
  400. <style>
  401.     @media (max-width: 767px) {
  402.         .sticky {
  403.             padding-top: 0 !important;
  404.             position: initial !important;
  405.         }
  406.     }
  408.     #btAddToOverview {
  409.         float: right;
  410.     }
  411.     .dropzone{
  412.         max-height: 365px;
  413.         overflow: auto;
  414.     }
  415.     .dropzone .dz-preview{
  416.         margin: 11px;
  417.     }
  418.     .dropzone .dz-message{
  419.         margin: 0;
  420.     }
  421.     .required{
  422.         border: 1px solid #cc4b37;
  423.     }
  424.     .lb_circle{
  425.         display: inline-block;
  426.     }
  427.     #list_files .row{
  428.         width: 90%;
  429.     }
  430.     #list_files{
  431.         max-height: 270px;
  432.         overflow: auto;
  433.     }
  434.     .label.alert{
  435.         background: #FF8716;
  436.     }
  438.     .select2-container--default .select2-selection--single{
  439.         padding-top: 5px;
  440.         padding-bottom: 5px;
  441.         height: 38px;
  442.     }
  443.     .select2-container--default .select2-selection--single .select2-selection__arrow{
  444.         height: 36px;
  445.     }
  446. </style>
  447. <link rel="stylesheet" href="{{ asset('assets/jquery/mobiscroll.custom/css/mobiscroll.jquery.min.css?v=1.3') }}">
  448. <script src="{{ asset('assets/jquery/mobiscroll.custom/js/mobiscroll.jquery.min.js') }}"></script>
  451. <script>
  453.     var labels = [];
  454.     try{
  455.         mobiscroll.setOptions({
  456.             locale: mobiscroll.localeEn,                 // Specify language like: locale: mobiscroll.localePl or omit setting to use default
  457.             theme: 'ios',                                // Specify theme like: theme: 'ios' or omit setting to use default
  458.             themeVariant: 'light'                    // More info about themeVariant: https://docs.mobiscroll.com/5-3-0/calendar#opt-themeVariant
  459.         });
  460.     }catch (e) {
  462.     }
  465.     $(function () {
  467.         //createCalendar();
  469.         $('#fileResponse').sortable({
  470.             connectWith: "#fileResponse",
  471.             handle: ".position",
  472.             stop: function() {
  473.                 setPositionsRows();
  474.             }
  475.         });
  477.     });
  479.     function DestroyCalendar(){
  480.         $('.headerCalendar').html('');
  481.         $('#mobiscroll').mobiscroll('destroy');
  482.         $('#calendar-legend').html('');
  483.     }
  485.     var recreated = false;
  486.     var currentVal = "";
  487.     var PriceSurchargeGlobal = 0;
  488.     function createCalendar(){
  489.         try{
  490.             if (typeof $('#mobiscroll').mobiscroll('getVal') === 'string') {
  491.                 currentVal = $('#mobiscroll').mobiscroll('getVal');
  492.             }
  493.             $('#mobiscroll').mobiscroll('destroy');
  494.         }catch(ex){
  496.         }
  497.        // console.log('currentVal',currentVal);
  499.         recreated = true;
  500.         var now = new Date(),
  501.             currYear = now.getFullYear(),
  502.             currMonth = now.getMonth(),
  503.             currDay = now.getDate(),
  504.             min = new Date(currYear, currMonth, currDay),
  505.             max = new Date(currYear, currMonth + 6, currDay);
  507.         // Mobiscroll Calendar initialization
  508.         $('#mobiscroll').mobiscroll().datepicker({
  509.             locale: 'de',
  510.             monthNames: ['{{"January"|trans}}', '{{"February"|trans}}', '{{"March"|trans}}', '{{"April"|trans}}', '{{"May"|trans}}', '{{"June"|trans}}', '{{"July"|trans}}', '{{"August"|trans}}', '{{"September"|trans}}', '{{"October"|trans}}', '{{"November"|trans}}', '{{"December"|trans}}'],
  511.             monthNamesShort: ['{{"Jan"|trans}}', '{{"Feb"|trans}}', '{{"Mar"|trans}}', '{{"Apr"|trans}}', '{{"May"|trans}}', '{{"Jun"|trans}}', '{{"Jul"|trans}}', '{{"Aug"|trans}}', '{{"Sep"|trans}}', '{{"Oct"|trans}}', '{{"Nov"|trans}}', '{{"Dec"|trans}}'],
  512.             dayNames: ['{{"Sunday"|trans}}', '{{"Monday"|trans}}', '{{"Tuesday"|trans}}', '{{"Wednesday"|trans}}', '{{"Thursday"|trans}}', '{{"Friday"|trans}}', '{{"Saturday"|trans}}'],
  513.             dayNamesMin: ['{{"S"|trans}}', '{{"M"|trans}}', '{{"T"|trans}}', '{{"W"|trans}}', '{{"T"|trans}}', '{{"F"|trans}}', '{{"S"|trans}}'],
  514.             dayNamesShort: ['{{"Sun"|trans}}', '{{"Mon"|trans}}', '{{"Tue"|trans}}', '{{"Wed"|trans}}', '{{"Thu"|trans}}', '{{"Fri"|trans}}', '{{"Sat"|trans}}'],
  515.             display: 'inline',                       // Specify display mode like: display: 'bottom' or omit setting to use default
  516.             controls: ['calendar'],                  // More info about controls: https://docs.mobiscroll.com/5-3-0/calendar#opt-controls
  517.             select : 'date',
  518.             returnFormat : 'iso8601',
  519.             {% if WH is not empty %}
  520.             defaultSelection : new Date('{{ WH.dateSurcharge|date('Y-m-d') }}T00:00:00'),
  521.             {% endif %}
  522.             //returnFormat : 'locale',
  523.             //lang : 'de',
  524.             /*min: min,                                // More info about min: https://docs.mobiscroll.com/5-3-0/calendar#opt-min
  525.             max: max,   */                             // More info about max: https://docs.mobiscroll.com/5-3-0/calendar#opt-max
  526.             showWeekNumbers: true,
  527.             firstDay: 1,
  528.             //headerText: 'Sie haben den {value} als Lieferdatum gewählt.',
  529.             pages: 'auto',
  530.             onPageLoading: function (event, inst) {  // More info about onPageLoading: https://docs.mobiscroll.com/5-3-0/calendar#event-onPageLoading
  531.                 console.log('Page loading');
  532.                 getPrices(event.firstDay, function callback(bookings) {
  533.                   //  console.log('bookings',bookings);
  534.                     inst.setOptions({
  535.                         //labels: bookings.labels,     // More info about labels: https://docs.mobiscroll.com/5-3-0/calendar#opt-labels
  536.                         invalid: bookings.invalid,    // More info about invalid: https://docs.mobiscroll.com/5-3-0/calendar#opt-invalid
  537.                         colors : bookings.colors,
  538.                         max : bookings.max,
  539.                         min : bookings.min
  540.                     });
  541.                     labels = bookings.labels_index;
  543.                     var html = '';
  545.                     $.each(bookings.legends_colors,function(v,i){
  546.                         html += '<div class="row grid-x"><div class="cell small-6"><span class="circle" style="background:'+i[0]+'">'+i[2]+'</span></div><div class="cell small-6" style="text-align: right;line-height: 32px;">'+ i[1]+'&nbsp;&nbsp;</div></div>';
  547.                     });
  548.                     $('#calendar-legend').html(html);
  550.                 //    console.log('valor general',$('#price_general_surcharge').val());
  551.                     //var first_price_surcharge = $('.price_surcharge')[0];
  552.                     if ($('#price_general_surcharge').val() == ""){
  553.                         SetHeaderCustomer(bookings.min,bookings.first_price_surcharge);
  554.                         $('.price_surcharge').each(function(){
  555.                       //      console.log('loading calendar');
  556.                             $(this).val(bookings.first_price_surcharge);
  558.                         });
  559.                         $('#price_general_surcharge').val(bookings.first_price_surcharge);
  560.                     }
  564.                 });
  565.             },
  566.             onPageLoaded: function (event, inst) {
  567.                 console.log('Page loaded');
  568.                 SetCurrentDate();
  569.                /* console.log('currentVal Loaded',String(currentVal));
  570.                 console.log('labels Loaded',labels);
  571.                 console.log('recreated',recreated);
  572.                 console.log('entra',recreated && currentVal != '');*/
  573.                 if (recreated && currentVal != ''){
  574.                     //console.log(currentVal);
  575.                     inst.setVal(currentVal);
  576.                     recreated = false;
  578.                     var ps = labels[String(currentVal)];
  579.                     //currentVal = '';
  580.                    // var ps = undefined;
  582.                     var error = '';
  583.                     if (ps === undefined){
  584.                         try{
  585.                             if (typeof $('#mobiscroll').mobiscroll('getVal') === 'string') {
  586.                                 currentVal = $('#mobiscroll').mobiscroll('getVal');
  587.                                 ps = labels[currentVal];
  588.                                 $('.price_surcharge').val(ps);
  589.                                // console.log('loaded',ps);
  590.                                 $('#price_general_surcharge').val(ps);
  591.                                 if (ps != undefined){
  592.                                     SetHeaderCustomer(currentVal,ps);
  593.                                 }
  594.                                 //$('#calculate').click();
  595.                             }
  596.                         }catch(ex){
  597.                             console.log('error',ex);
  598.                         }
  601.                         //alert('Error to select date, please select again');
  602.                         error = 'error';
  603.                     }else{
  604.                         SetHeaderCustomer(currentVal,ps);
  605.                         $('.price_surcharge').val(ps);
  606.                         $('#price_general_surcharge').val(ps);
  607.                         $('#calculate').click();
  608.                     }
  609.                 }
  610.             },
  611.             onCellClick: function (event, inst) {
  612.                 var date = new Date(event.date);
  613.                // console.log('select date', date);
  614.                 var date_key = inst.value;
  616.                 const offset = date.getTimezoneOffset()
  617.                 var yourDate = new Date(date.getTime() - (offset*60*1000))
  618.                // console.log('date9', yourDate.toISOString().split('T')[0]);
  619.                 date_key = yourDate.toISOString().split('T')[0];
  621.                 var ps = labels[date_key];
  622.                /* console.log('date_key',date_key);
  623.                 console.log('ps',ps);*/
  624.                 SetCurrentDate(date_key);
  625.                 var error = '';
  626.                 if (ps === undefined){
  627.                     //alert('Error to select date, please select again');
  628.                     error = 'error';
  629.                 }else{
  630.                     SetHeaderCustomer(date_key,ps);
  631.                     $('#date_surcharge').val(date_key);
  632.                     $('.price_surcharge').val(ps);
  633.                     $('#price_general_surcharge').val(ps);
  634.                    // console.log('tiene ps',ps);
  635.                     $('#calculate').click();
  636.                 }
  637.                 //console.log(event,date_key,ps,error);
  639.             }
  640.         });
  641.     }
  643.     function SetHeaderCustomer(date_surcharge,ps){
  644.         const url = $('#urlheader').val();
  645.         const header_id = $('#header_id').val();
  647.         $.ajax({
  648.             type: 'post',
  649.             url: url,
  650.             data: {'header_id':header_id,'date_surcharge': date_surcharge, 'ps': ps},
  651.             success: function (response) {
  652.                 //console.log( $(obj).find('.diameters' + $(obj).data('id')),$(obj).data('id'));
  653.              //   console.log(response);
  654.             }
  655.         });
  656.     }
  658.     function SetCurrentDate(d){
  659.         d = d == undefined ? $('#mobiscroll').mobiscroll('getVal') : d;
  660.         //var mydate = new Date($('#mobiscroll').mobiscroll('getVal'));
  661.         var date =  d;
  662.         var arr = date.split('-');
  663.         var new_date = arr[2]+'.'+arr[1]+'.'+arr[0];
  664.         $('.headerCalendar').html("{{ 'Sie haben den'|trans }} " + new_date + " {{ 'als Lieferdatum gewählt.'|trans }}");
  665.     }
  666.     function getPrices(d, callback) {
  668.         var invalid = [],
  669.             labels = [],
  670.             colors = [];
  672.         //console.log('price_surcharge',$('.price_surcharge').val());
  673.        // console.log('price_surchargeT', PriceSurchargeGlobal);
  674.         var url_c = '{{ path('wi_cam_calendar_days',{'id':'idV'}) }}';
  675.         $.ajax({
  676.             type: 'get',
  677.             url: url_c.replace('idV',$('#header_id').val()),
  678.             //url: '?id='+$('#header_id').val(),
  679.             success: function (response) {
  680.                 callback(response);
  681.             }
  682.         })
  683.     }
  685.     function getLegend(){
  686.         var url_c = '{{ path('wi_cam_calendar_days',{'id':'idV'}) }}';
  687.         $.ajax({
  688.             type: 'get',
  689.             url: url_c.replace('idV',$('#header_id').val()),
  690.             //url: '?id='+$('#header_id').val(),
  691.             success: function (response) {
  692.                 var html = '';
  693.                 $.each(response.legends_colors,function(v,i){
  694.                     //html += '<span class="circle" style="background:'+i[0]+'">'+i[2]+'</span>'+ i[1]+'&nbsp;&nbsp;<br>';
  695.                     html += '<div class="row grid-x"><div class="cell small-6"><span class="circle" style="background:'+i[0]+';color: '+i[3]+';">'+i[2]+'</span></div><div class="cell small-6" style="text-align: right;line-height: 32px;">'+ i[1]+'&nbsp;&nbsp;</div></div>';
  696.                 });
  697.                 $('#calendar-legend').html(html);
  698.             }
  699.         })
  700.     }
  702.     function setPositionsRows(send_request){
  703.         send_request = send_request == undefined ? true : send_request;
  704.         var ln = 0;
  705.         var positions = [];
  706.         $('.fileRow').each(function(){
  707.             ln++;
  708.             $(this).find('.position').html(ln);
  709.             var id = $(this).data('id');
  710.             var lp = {'identify':id,'order':ln};
  711.             positions.push(lp);
  712.             //console.log(lp);
  714.             if ($(this).hasClass('invalid')){
  716.                 console.log('#row'+id,$('#row'+id).find('.pos_invalid'));
  717.                 $('#row'+id).find('.pos_invalid').html(ln);
  719.             }
  720.         });
  722.         if (send_request){
  723.             $.ajax({
  724.                 type: 'post',
  725.                 url: '/de/upload/update_positions',
  726.                 data: {'positions': positions},
  727.                 success: function (response) {
  728.                     console.log('update_positions');
  729.                 }
  730.             });
  731.         }
  732.     }
  734.     $(document).ready(function(){
  735.        // $('#btSend').click();
  736.     });
  739. </script>
  740. <input type="hidden" value=" {{"Minimum purchase" |  trans}}">
  742. {% endblock %}