templates/fos/parcels/new_parcel.html.twig line 1

Open in your IDE?
  1. {% extends 'fos/base.html.twig' %}
  5. {% block firstnav %}
  6.     {{ render(controller('App\\Parcels\\DefaultController::nav')) }}
  7. {% endblock %}
  9. {% block secondnav %}
  10.     <style>
  11.          .cash, .print, .payment .mpesa {
  12.             width: 220px;
  13.             border-radius: 30px;
  14.         }
  16.          .cash {
  17.             /*float: right;*/
  18.         }
  20.          .active, payment .focus{
  21.             background: white;
  22.             color: black;
  23.         }
  25.          .cash img {
  26.             height: 18px;
  27.         }
  28.     </style>
  29.     <!-- Second Nav -->
  30.     <nav class="navbar-second navbar navbar-default navbar-static-top" role="navigation">
  31.         <div class="container-fluid">
  32.             <div class="navbar-header">
  33.                 <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
  34.                         data-target="#bs-example-navbar-collapse-1">
  35.                     <span class="sr-only">Toggle navigation</span>
  36.                     <span class="icon-bar"></span>
  37.                     <span class="icon-bar"></span>
  38.                     <span class="icon-bar"></span>
  39.                 </button>
  40.                 <!-- Brand -->
  41.                 {% block current %}
  42.                     <span class="navbar-brand" href="#"><i class="fa fa-gears"></i> NEW PARCEL
  44.                         {% if user_station  %}
  45.                             FROM {{ user_station.station.stationName }}
  46.                         {% endif %}
  48.                     </span>
  49.                 {% endblock %}
  50.             </div>
  51.             <div class="collapse navbar-collapse animated fadeIn" id="bs-example-navbar-collapse-1">
  52.                 <ul class="nav navbar-nav animated fadeIn">
  54.                     {% block  secondarylinkblock %}
  55.                         <li class="active"><a href="{{ path('new-parcel') }}"><i class="fa fa-plus-circle"></i> Register Parcel</a></li>
  56.                         <li class=""><a href="{{ path('my_daily_parcel_transactions') }}"><i class="fa fa-th-list"></i> Todays Transactions</a></li>
  57.                         <li class=""><a href="{{ path('close_daily_account') }}"><i class="fa fa-window-close"></i> close & open Daily account</a></li>
  58.                      {% endblock %}
  59.                 </ul>
  60.                 <ul class="nav navbar-nav navbar-right">
  61.                     <li class=""><a></a></li>
  62.                     {#<li><p class="navbar-text"></p></li>#}
  63.                 </ul>
  64.             </div><!-- /.navbar-collapse -->
  65.         </div><!-- /.container-fluid -->
  66.     </nav>
  68. {% endblock %}
  71. {% block main %}
  72.     <div class="row">
  73.         <div class="col">
  74.             {{ form_start(form, {'attr':{'id':'student_form'}}) }}
  76.             <fieldset>
  77.                 <legend>Receiver</legend>
  78.                 <div class="row">
  79.                     <div class="col-lg-3 col-md-3">
  80.                         <label for="receiver_name">Receiver Name</label>
  81.                         {{ form_widget(form.receiverName,{'attr':{'class':'form-control','placeholder':'ie: George Muriuki Mukuria','autocomplete':'false'  }} ) }}
  82.                         <div class="invalid-feedback">
  83.                             {{ form_errors(form.receiverName) }}
  84.                         </div>
  85.                     </div>
  86.                     <div class="col-lg-3 col-md-3">
  87.                         <label for="sender_name">Receiver Phone Number</label>
  88.                         {{ form_widget(form.receiverPhoneNumber,{'attr':{'class':'form-control receiver_phone','placeholder':'ie: 0714 000 000','autocomplete':'false' }} ) }}
  89.                         <div class="invalid-feedback">
  90.                             {{ form_errors(form.receiverPhoneNumber) }}
  91.                         </div>
  92.                     </div>
  93.                 </div>
  94.             </fieldset>
  96.             <fieldset>
  97.                 <legend>Sender</legend>
  98.                 <div class="row">
  99.                     <div class="col-lg-3 col-md-3">
  100.                         <label for="sender_name">Sender Name</label>
  101.                         {{ form_widget(form.senderName,{'attr':{'class':'form-control','placeholder':'ie: Kelvin Njiru Ngari','autocomplete':'false'  }} ) }}
  102.                         <div class="invalid-feedback">
  103.                             {{ form_errors(form.senderName) }}
  104.                         </div>
  105.                     </div>
  107.                     <div class="col-lg-3 col-md-3">
  108.                         <label for="sender_phoneNumber">Sender Phone Number</label>
  109.                         {{ form_widget(form.senderPhoneNumber,{'attr':{'class':'form-control sender_phone','placeholder':'ie 0734 000 000','autocomplete':'false'  }} ) }}
  110.                         <div class="invalid-feedback">
  111.                             {{ form_errors(form.senderPhoneNumber) }}
  112.                         </div>
  113.                     </div>
  114.                     <div class="col-lg-3 col-md-3">
  115.                         <label for="sender_phoneNumber">Parcel Value</label>
  116.                         {{ form_widget(form.parcelValue,{'attr':{'class':'form-control','placeholder':'ie 1000','autocomplete':'false'  }} ) }}
  117.                         <div class="invalid-feedback">
  118.                             {{ form_errors(form.parcelValue) }}
  119.                         </div>
  120.                     </div>
  121.                     <div class="col-lg-3 col-md-3">
  122.                         <label for="sender_phoneNumber">Pin Number</label>
  123.                         {{ form_widget(form.transaction.pinNumber,{'attr':{'class':'form-control pin_number','placeholder':'ie P015023523E','autocomplete':'false'  }} ) }}
  124.                         <div class="invalid-feedback">
  125.                             {{ form_errors(form.transaction.pinNumber) }}
  126.                         </div>
  127.                     </div>
  128.                 </div>
  129.             </fieldset>
  133.             <fieldset>
  134.                 <legend>Destination</legend>
  135.                 <div class="row">
  136.                     <div class="col-lg-3 col-md-3">
  137.                         <label for="receiver_name">To </label>
  138.                         {{ form_widget(form.toStation,{'attr':{'class':'form-control' }} ) }}
  139.                         <div class="invalid-feedback">
  140.                             {{ form_errors(form.toStation) }}
  141.                         </div>
  142.                     </div>
  144.                     <div class="col-lg-2 col-md-2">
  145.                         <label for="amount">Amount</label>
  146.                         {{ form_widget(form.transaction.amount,{'attr':{'class':'form-control' }} ) }}
  147.                         <div class="invalid-feedback">
  148.                             {{ form_errors(form.transaction.amount) }}
  149.                         </div>
  150.                     </div>
  152.                 </div>
  153.             </fieldset>
  156.             <fieldset>
  157.                 <legend>Parcel Unit</legend>
  158.                 <div class="row">
  159.                     <div class="col-lg-12 col-md-12">
  161.                             {# store the prototype on the data-prototype attribute #}
  162.                             <div class="parcels" id="parcel-fields-list"
  163.                              data-prototype="{{ form_widget(form.parcels.vars.prototype.description,{'attr':{'class':'form-control', 'cols':'5', 'rows':'5'}})|e('html_attr')}}"
  164.                              {#data-widget-tags="{{ '<div class="row" style="margin-bottom: 10px;"></div>'|e }}"#}>
  166.                                 {# iterate over each existing tag and render its only field: name #}
  167.                                 {% for parcel in form.parcels %}
  168.                                     <div class="col-lg-4 col-md-4" style="margin-bottom: 20px;">
  169.                                         <div class="col-lg-8 col-md-8">Parcel #{{ loop.index }}
  170.                                             {{ form_widget(parcel.description,{'attr':{'class':'form-control', 'cols':'5', 'rows':'5' }}) }}
  171.                                         </div>
  172.                                         <div class="col-lg-4 col-md-4">
  173.                                             <a href="#" class="btn btn-danger btn-sm remove-tag" style="margin-top: 80px;"><i class="fas fa-trash"></i></a>
  174.                                         </div>
  175.                                     </div>
  177.                                 {% endfor %}
  178.                             </div>
  180.                             {#<button type="button"#}
  181.                                     {#class="add-another-collection-widget"#}
  182.                                     {#data-list="#parcel-fields-list">Add parcel</button>#}
  184.                     </div>
  185.                 </div>
  187.             </fieldset>
  190.             <div class="invalid-feedback">
  191.                 {{ form_errors(form) }}
  192.             </div>
  194.             <fieldset style="text-align: center;">
  195.                 <legend>Complete</legend>
  196.                  <button type="submit" id="save_button" class="btn btn-success  cash" formnovalidate>Complete Registration <i class="fa fa-arrow-circle-o-right"></i></button>
  197.             </fieldset>
  198.         {{ form_end(form) }}
  200.         </div>
  201.     </div>
  202. {% endblock %}
  205. {% block javascript %}
  206. <script type="text/javascript" src="{{ asset('fos/scripts/parcel_collection_form.js?1.0.1') }}"></script>
  207. <script type="text/javascript" src="{{ asset('assets/plugins/jquery.mask.min.js') }}"></script>
  209. <script >
  210.   $('.sender_phone').mask('0000 000 000');
  211.   $('.receiver_phone').mask('0000 000 000');
  212.   $('.pin_number').mask('A000000000A', {
  213.       'translation':{
  214.           A: { pattern: /[A-Z]/}
  215.       }
  216.   });
  218. </script>
  220. {% endblock %}