FuelVendors.html 21.2 KB
<style>
   .subnavbar .mainnav > li:nth-child(3) > a{
      color: #ff9900;
   }

   .button1 {
     display: inline-block;
     height: 35px;
     line-height: 35px;
     padding-right: 15px;
     padding-left: 50px;
     position: relative;
     background-color:rgb(41,127,184);
     color:rgb(255,255,255);
     text-decoration: none;
     text-transform: uppercase;
     letter-spacing: 1px;
     margin-bottom: 15px;
     border: 0;
     
     
        border-radius: 5px;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
        text-shadow:0px 1px 0px rgba(0,0,0,0.5);
      -ms-filter:"progid:DXImageTransform.Microsoft.dropshadow(OffX=0,OffY=1,Color=#ff123852,Positive=true)";zoom:1;
      filter:progid:DXImageTransform.Microsoft.dropshadow(OffX=0,OffY=1,Color=#ff123852,Positive=true);

        -moz-box-shadow:0px 2px 2px rgba(0,0,0,0.2);
        -webkit-box-shadow:0px 2px 2px rgba(0,0,0,0.2);
        box-shadow:0px 2px 2px rgba(0,0,0,0.2);
        -ms-filter:"progid:DXImageTransform.Microsoft.dropshadow(OffX=0,OffY=2,Color=#33000000,Positive=true)";
      filter:progid:DXImageTransform.Microsoft.dropshadow(OffX=0,OffY=2,Color=#33000000,Positive=true);
   }

   .button1 span {
     position: absolute;
     left: 0;
     top: 0;
     width: 35px;
     background-color:rgba(0,0,0,0.5);
     
     -webkit-border-top-left-radius: 5px;
   -webkit-border-bottom-left-radius: 5px;
   -moz-border-radius-topleft: 5px;
   -moz-border-radius-bottomleft: 5px;
   border-top-left-radius: 5px;
   border-bottom-left-radius: 5px;
   border-right: 1px solid  rgba(0,0,0,0.15);
   }

   .button1:hover span, .button1.active span {
     background-color:rgb(0,102,26);
     border-right: 1px solid  rgba(0,0,0,0.3);
   }

   .button1:active {
     margin-top: 2px;
     margin-bottom: 13px;

     -moz-box-shadow:0px 1px 0px rgba(255,255,255,0.5);
   -webkit-box-shadow:0px 1px 0px rgba(255,255,255,0.5);
   box-shadow:0px 1px 0px rgba(255,255,255,0.5);
   -ms-filter:"progid:DXImageTransform.Microsoft.dropshadow(OffX=0,OffY=1,Color=#ccffffff,Positive=true)";
   filter:progid:DXImageTransform.Microsoft.dropshadow(OffX=0,OffY=1,Color=#ccffffff,Positive=true);
   }

   .button1.turquoise {
     background: #449d44;
   }

</style>

<div class="myLoader" ng-show="showLoader">
  <img src="../img/hourglass.gif" width="50px;">
</div>

<div class="main">
   <div class="container">
      <div class="row">
         <div class="col-md-12">
            <div class="widget stacked ">
               <div class="widget-content">
                  <div class="tabbable">
                     <ul class="nav nav-tabs">
                        <li>
                           <a ui-sref="app.customers">Company View 
                              <i class="fa fa-caret-down" aria-hidden="true"></i>
                           </a>
                        </li>
                        <li>
                           <a ui-sref="app.ContactView">Contact View 
                              <i class="fa fa-caret-down" aria-hidden="true"></i>
                           </a>
                        </li>
                        <li class="active">
                           <a ui-sref="app.FuelVendors">Fuel Vendors 
                              <i class="fa fa-caret-down" aria-hidden="true"></i>
                           </a>
                        </li>
                        <li style="margin: 0px 10px 4px 40px;"><input type="text" style="height:31px;"class="form-control" ng-model="searchText" placeholder="Search In Table"></li>
                        <li><button type="button" class="btn btn-default btn-sm" ng-click="displayVendorList.filter({}); searchText=null">Clear Search And Filters</button></li>
                        <li style="float:right"><button type="submit" data-toggle="modal" data-target="#vendor-modal-3" class="btn btn-success btn-sm"><i class="fa fa-plus" aria-hidden="true"></i> Add Vendor</button></li>
                     </ul>
                     <br>  
                     <div class="tab-content customer-table" style="margin:0px">
                        <div class="tab-pane active" id="companyView">
                        	<table ng-table="displayVendorList" class="table table-striped table-condensed" show-filter="true">
	                           <tr ng-repeat="row in $data | filter:searchText" style="cursor: pointer;">
	                             <td data-title="'Vendor Name'" filter="{vendorName: 'text'}" sortable="'vendorName'" ui-sref="app.viewFuelVendor({id : row.id})">
	                              {{row.vendorName}}
	                             </td>
	                             <td data-title="'Main Phone'" filter="{newContactNumber: 'text'}" sortable="'newContactNumber'" ui-sref="app.viewFuelVendor({id : row.id})">
	                              {{row.newContactNumber}}
	                             </td>
	                             <td data-title="'Primary Contact'" filter="{primaryContactName: 'text'}" sortable="'primaryContactName'" ui-sref="app.viewFuelVendor({id : row.id})">
	                              {{row.primaryContactName}}
	                             </td>
	                             
	                             <td data-title="'Status'" filter="{activate: 'select'}" filter-data="statusFilter" sortable="'activate'" ui-sref="app.viewFuelVendor({id : row.id})">
	                              <button type="button" ng-if="row.activate == true" class="btn btn-success btn-xs">Active</button>
	                              <button type="button" ng-if="row.activate == false" class="btn btn-warning btn-xs">InActive</button>
	                             </td>
	                             <td data-title="'Source'" filter="{source: 'text'}" sortable="'source'" ui-sref="app.viewFuelVendor({id : row.id})">
	                              {{row.source}}
	                             </td>
	                             <td data-title="'Margin Setting'" filter="{masterMargin: 'select'}" filter-data="marginFilterOptions" sortable="'masterMargin'">
	                              <select class="form-control" ng-change="editMargin(row)" style="height:31px;" ng-model="row.masterMargin" ng-selected="" ng-options="margin.id as margin.marginName for margin in jetMarginList" required></select>
	                             </td>
	                             <td data-title="'All In'" filter="{marginAllIn: 'text'}" sortable="'marginAllIn'" ui-sref="app.viewFuelVendor({id : row.id})">
	                              {{row.marginAllIn}}
	                             </td>
	                           </tr>
	                         </table>
                        
                          <button type="button" ng-click="exportVendors()" class="btn btn-warning exportBtn">Export CSV</button>
                        
                           <!-- <table class="table table-striped">
                              <thead>
                                 <tr>
                                    <th>
                                       <input type="text" class="form-control" style="height:31px;" name="name" id="name">
                                       <label class="font-company">Vendor Name <i class="fa fa-sort" aria-hidden="true"></i></label>
                                    </th>
                                    
                                    <th>
                                       <input type="text" class="form-control" style="height:31px;" name="name" id="name">
                                       <label class="font-company">Main Phone <i class="fa fa-sort" aria-hidden="true"></i></label>
                                    </th>
                                    <th>
                                       <input type="text" class="form-control" style="height:31px;" name="name" id="name">
                                       <label class="font-company">Primary Contact <i class="fa fa-sort" aria-hidden="true"></i></label>
                                    </th>
                                    
                                    <th>
                                       <input type="text" class="form-control" style="height:31px;" name="name" id="name">
                                       <label class="font-company">Status <i class="fa fa-sort" aria-hidden="true"></i></label>
                                    <th>
                                       <input type="text" class="form-control" style="height:31px;" name="name" id="name">
                                       <label class="font-company">Source <i class="fa fa-sort" aria-hidden="true"></i></label>
                                    </th>
                                    <th>
                                       <input type="text" class="form-control" style="height:31px;" name="name" id="name">
                                       <label class="font-company">Margin Setting <i class="fa fa-sort" aria-hidden="true"></i></label>
                                    </th>
                                    <th>
                                       <input type="text" class="form-control" style="height:31px;" name="name" id="name">
                                       <label class="font-company">All In <i class="fa fa-sort" aria-hidden="true"></i></label>
                                    </th>
                                 </tr>
                              </thead>
                              <tbody>
                                 <tr ng-repeat="vendor in vendorList">
                                    <td class="font-company">
                                      <a style="color: #333; text-decoration: none;" href="#!/viewFuelVendor/{{vendor.id}}">{{vendor.vendorName}}</a>
                                    </td>
                                    <td class="font-company">{{vendor.phone}}</td>
                                    <td class="font-company">{{vendor.contact}}</td>
                                    <td class="font-company">
                                       <button type="button" ng-if="vendor.activate == true" class="btn btn-success btn-xs">Active</button>
                                       <button type="button" ng-if="vendor.activate == false" class="btn btn-warning btn-xs">InActive</button>
                                    </td>
                                    <td class="font-company">{{vendor.source}}</td>
                                    <td class="font-company">
                                      <select class="form-control" ng-blur="editMargin(vendor)" style="height:31px;" ng-model="vendor.masterMargin" ng-options="margin.id as margin.marginName for margin in marginList" required></select>

                                       <select class="form-control" style="height:31px;">
                                          <option>Margin1</option>
                                          <option>Margin2</option>
                                       </select>
                                    </td>
                                    <td class="font-company">{{vendor.allIn}}</td>
                                 </tr>
                              </tbody>
                           </table> -->
                        </div>
                     </div>
                  </div>
               </div>
               <!-- /widget-content -->
            </div>
            <!-- /widget -->
         </div>
         <!-- /span8 -->
      </div>
      <!-- /row -->
   </div>
   <!-- /container -->
</div>
<!-- /main -->

<form class="modal multi-step" id="vendor-modal-3" name="vendorForm">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-body step-1" data-step="1" style="padding: 0;">
               <div>
                  <div class="row" style="margin: 0;">
                     <div>
                        <div class="widget" style="margin-bottom: 0;">
                           <div class="widget-header">
                              <i class="icon-pencil"></i>
                              <i class="fa fa-tasks" aria-hidden="true"></i>
                              <h3>Add a New Vendor</h3>
                              <div class="pull-right my-toggle-switch" style="margin-right: 30px;">
                                 <div style="color: #ff9a01;">Activate &nbsp &nbsp
                                    <toggle ng-model="data.activate" size="customToogle"></toggle>
                                 </div>
                              </div>
                              <div class="clearfix"></div>
                           </div>
                           <div class="widget-content" style="padding-left: 0; padding-right: 0; border-bottom: 0;">
                              <div class="col-xs-12">
                                 <div class="col-md-8">
                                    <div class="pull-left">
                                       <label class="new-input-label"><b>Vendor Name</b></label>
                                    </div>
                                    <div class="pull-left" style="margin-left: 15px;">
                                       <input type="text" ng-model="data.vendorName" class="form-control companyNameInput" ng-keyup="removeValidation()" placeholder="" required>
                                       <label class="customErrorMessage" ng-show="showCompanyError">This field is required.</label>
                                    </div>
                                    <div class="clearfix"></div>
                                 </div>
                                 <div class="col-md-4">
                                 </div>
                              </div>
                              <div class="clearfix"></div><br>
                              <br/>
                              <div class="col-xs-12">
                                 <div class="col-md-6">
                                    <div class="pull-left" style="width: 110px;">
                                       <b>JET A Margin</b>
                                    </div>
                                    <div class="pull-left">
                                       <select class="form-control marginSelectBox" ng-model="data.masterMargin" ng-options="margin.id as margin.marginName for margin in jetMarginList" required ng-change="removeMarginValidation()">
                                        <option value="" disabled>Select...</option>
                                       </select>
                                       <label ng-show="showMarginError" class="customErrorMessage">This field is required.</label>
                                    </div>
                                    <div class="clearfix"></div>
                                 </div>
                                 
                                 <div class="col-md-3 Airport" style="text-align: right;">
                                    <b>AVGAS 100LL Margin</b>
                                 </div>
                                 <div class="col-md-3 Airport">
                                    <select class="form-control" ng-model="data.avgasMargin" ng-options="avgs.id as avgs.marginName for avgs in avgsMarginList">
                                    <option value="" disabled>Select...</option>
                                    </select>
                                 </div>
                                 <div class="clearfix"></div>
                              </div>
                              <div class="clearfix"></div>
                              <br/>
                              <div class="col-xs-12">
                                  <div class="col-md-12">
                                    <div class="pull-left" style="width: 110px;">
                                       <label class="new-input-label"><b>Address</b></label>
                                    </div>
                                    <div class="pull-left" style="width: calc(100% - 110px);">
                                       <input type="text" class="form-control" ng-model="data.addressOne" id="Address" placeholder="">
                                    </div>
                                    <div class="clearfix"></div>
                                 </div>
                              </div>
                              <div class="clearfix"></div>
                              <br/>
                              <div class="col-xs-12">
                                  <div class="col-md-12">
                                    <div class="pull-left" style="width: 110px;">
                                       <label class="new-input-label"><b>Address2</b></label>
                                    </div>
                                    <div class="pull-left" style="width: calc(100% - 110px);">
                                       <input type="text" ng-model="data.addressTwo" class="form-control" id="Address" placeholder="">
                                    </div>
                                    <div class="clearfix"></div>
                                 </div>
                              </div>
                              <div class="clearfix"></div>
                              <br/>
                              <div class="col-xs-12">

                                 <div class="col-md-6">
                                    <div class="pull-left" style="width: 110px;">
                                       <label class="new-input-label"><b>City</b></label>
                                    </div>
                                    <div class="pull-left" style="width: calc(100% - 110px);">
                                       <input type="text" ng-model="data.city" class="form-control" id="Address" placeholder="">
                                    </div>
                                    <div class="clearfix"></div>
                                 </div>
                                 <div class="col-md-3">
                                    <div class="pull-left" style="width: 40px;">
                                       <label class="new-input-label"><b>State</b></label>
                                    </div>
                                    <div class="pull-left" style="width: calc(100% - 110px);">
                                       <input type="text" ng-model="data.state" class="form-control" id="Address" placeholder="">
                                    </div>
                                    <div class="clearfix"></div>
                                 </div>
                                 <div class="col-md-3">
                                    <div class="pull-left">
                                       <label class="new-input-label"><b>Zip Code</b></label>
                                    </div>
                                    <div class="pull-right" style="width: calc(100% - 60px);">
                                       <input type="tel" ng-model="data.zipcode" class="form-control" id="Address" placeholder="">
                                    </div>
                                    <div class="clearfix"></div>
                                 </div>
                              </div>
                              <div class="clearfix"></div>
                              <br/>
                              <div class="col-xs-12">

                                 <div class="col-md-6">
                                    <div class="pull-left" style="width: 110px;">
                                       <label class="new-input-label"><b>Country</b></label>
                                    </div>
                                    <div class="pull-left" style="width: calc(100% - 110px);">
                                       <input type="text" ng-model="data.country" class="form-control" id="Address" placeholder="">
                                    </div>
                                    <div class="clearfix"></div>
                                 </div>
                                 <div class="col-md-6">
                                    <div class="pull-left" style="width: 110px;">
                                       <label class="new-input-label"><b>Internal Note</b></label>
                                    </div>
                                    <div class="pull-left" style="width: calc(100% - 110px);">
                                       <textarea  name="message" ng-model="data.internalNote" rows="4" cols="34"></textarea>
                                    </div>
                                    <div class="clearfix"></div>
                                 </div>
                              </div>
                              <div class="clearfix"></div>
                           </div>
                        </div>
                        <div class="clearfix"></div>
                     </div>
                  </div>
               </div>
            </div>
            <div class="modal-footer" style="border-top: 0;">
                <button type="button" class="btn btn-default" ng-click="reset()" data-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-primary step step-1" data-step="1" ng-click="addFirstData()">Save</button>
            </div>
        </div>
    </div>
</form>
<div class="myLoader" ng-show="showLoader">
   <img src="../img/hourglass.gif" width="50px;">
</div>
<script src="js/multi-step-modal.js"></script>
<script>
sendEvent = function(sel, step) {
    $(sel).trigger('next.m.' + step);
}
</script>