Skip to content

Instantly share code, notes, and snippets.

@shantanuhashtaag

shantanuhashtaag/gist:c71ebe224d6d9bd9d3c2ff345c6d85c0

Created March 21, 2018 08:32
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save shantanuhashtaag/c71ebe224d6d9bd9d3c2ff345c6d85c0 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save shantanuhashtaag/c71ebe224d6d9bd9d3c2ff345c6d85c0 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
gistfile1.txt
<div class="home customer-login container-fluid login-merchant toll-register toll-register-company toll-register-branch toll">
<nav class="navbar navbar-fixed-top">
<div class="container-fluid row">
<div class="col-xs-6 col-sm-4">
<h2 class="cursor doe-tag" [routerLink]="['/home']">
<img src="assets/images/toll/arrow.png">DOE</h2>
</div>
<div class="col-xs-6 col-sm-4">
</div>
<div class="col-xs-6 col-sm-4 p-r-0">
</div>
</div>
</nav>
<div class="row home-menu text-center">
<ul class="home-menu-tag toll-menu-js">
<li class=" section1">
<a data-target="#1">
<div class="text-center flow">
<img src="assets/images/toll/toll-forma.png">
<span>COMPANY</span>
</div>
<div class="text-center non-flow">
<img src="assets/images/toll/toll-forma-1.png">
<span>COMPANY</span>
</div>
</a>
</li>
<li class="active section2">
<a data-target="#2">
<div class="text-center flow">
<img src="assets/images/toll/toll-forma.png">
<span>BRANCH</span>
</div>
<div class="text-center non-flow">
<img src="assets/images/toll/toll-forma-1.png">
<span>BRANCH</span>
</div>
</a>
</li>
<li class=" section3">
<a data-target="#4">
<div class="text-center flow">
<img src="assets/images/toll/toll-forma.png">
<span>TOLLBOOTH</span>
</div>
<div class="text-center non-flow">
<img src="assets/images/toll/toll-forma-1.png">
<span>TOLLBOOTH</span>
</div>
</a>
</li>
<li class=" section3">
<a data-target="#4">
<div class="text-center flow">
<img src="assets/images/toll/toll-forma.png">
<span>READER</span>
</div>
<div class="text-center non-flow">
<img src="assets/images/toll/toll-forma-1.png">
<span>READER</span>
</div>
</a>
</li>
<li class=" section3">
<a data-target="#4">
<div class="text-center flow">
<img src="assets/images/toll/toll-forma.png">
<span>Handle Device</span>
</div>
<div class="text-center non-flow">
<img src="assets/images/toll/toll-forma-1.png">
<span>Handle Device</span>
</div>
</a>
</li>
</ul>
</div>
<div class="container branch-section">
<div id="accordion" role="tablist">
<div class="card">
<form [formGroup]="register_branch">
<div formArrayName="branches">
<div class="panel panel-default" *ngFor="let branch of register_branch['controls'].branches['controls']; let i=index">
<div class="panel-heading panel-collapse cursor">
<a id="{{ 'branchPannel' + i }}" class="panel-title" data-toggle="collapse" role="button" aria-expanded="true" data-parent="#accordion"
href="{{ '#collapse' + i}}" (click)="updateSelectedBranch(i)">
BRANCH {{i + 1}}
</a>
</div>
<!-- panel-heading -->
<div formGroupName="{{i}}">
<div id="{{ 'collapse' + i }}" class="panel-collapse collapse" role="tabpanel">
<div class="card-body">
<div class="panel-body">
<div class="form-container">
<div class="col-md-12 well-container">
<div class="well">
<p class="">
<span class="pull-right">
<input type="text" formControlName="branchname" class="input-box" maxlength="32">
</span>BRANCH NAME * </p>
</div>
<p class="form_error_message">{{formErrors.branches[i].branchname}}</p>
</div>
<div class="col-md-6 well-container">
<div class="well">
<p class="">
<span class="pull-right">
<input type="text" formControlName="managerName" class="input-box" maxlength="32">
</span>BANK MANAGER NAME *</p>
</div>
<p class="form_error_message">{{formErrors.branches[i].managerName}}</p>
</div>
<div class="col-md-6 well-container">
<div class="well">
<p class="">
<span class="pull-right">
<input type="text" formControlName="landlineNumber" class="input-box" maxlength="11">
</span>LANDLINE NUMBER *</p>
</div>
<p class="form_error_message">{{formErrors.branches[i].landlineNumber}}</p>
</div>
<div class="col-md-6 well-container">
<div class="well">
<p class="">
<span class="pull-right">
<input type="text" formControlName="mobilenumber" class="input-box" maxlength="10">
</span> MOBILE NUMBER *</p>
</div>
<p class="form_error_message">{{formErrors.branches[i].mobilenumber}}</p>
</div>
<div class="col-md-6 well-container">
<div class="well">
<p class="">
<span class="pull-right">
<input type="text" formControlName="email" class="input-box" maxlength="50">
</span>EMAIL ID *</p>
</div>
<p class="form_error_message">{{formErrors.branches[i].email}}</p>
</div>
<div class="col-md-6">
<div class="row">
<div class="col-md-10">
<div class="well-container">
<div class="well show-pic-div">
<!-- <p [style.display]="!proofs.pan ? 'block' : 'none'" class=""> -->
<p>
<span class="pull-right">
<input type="text" formControlName="pannumber" class="input-box" maxlength="10">
</span> PAN NUMBER * </p>
<img class="show-pic" [style.display]="proofs.pan ? 'block' : 'none'" [src]="proofs.pan">
</div>
<p class="form_error_message">{{formErrors.branches[i].pannumber}}</p>
</div>
</div>
<div class="col-md-2 upload-icon-container">
<div class="upld-icon" [ngStyle]="{'background-image': 'url(' + proofs.pan + ')'}">
<img class="upd-icn" src="assets/images/toll/upload-signup.png" onclick="document.getElementById('pan').click()" (click)="filetype = 'PAN'">
<input id="pan" accept="image/jpeg, image/png" type="file" class="hide" (change)="onChange($event)" />
<p class="upld-icn-txt">Upload Image</p>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="row">
<div class="col-md-10">
<div class="well show-pic-div">
<!-- <p [style.display]="!proofs.pan ? 'block' : 'none'" class=""> -->
<p>
<span class="pull-right">
<!-- <input type="text" formControlName="GST" class="input-box" maxlength="10"> -->
<p class="form_error_message">{{formErrors.branches[i].GST}}</p>
</span> GST * </p>
<img class="show-pic" [style.display]="proofs.pan ? 'block' : 'none'" [src]="proofs.pan">
</div>
</div>
<div class="col-md-2 upload-icon-container">
<div class="upld-icon" [ngStyle]="{'background-image':'url(' + proofs.primaryRegistration + ')'}">
<img class="upd-icn" src="assets/images/toll/upload-signup.png" onclick="document.getElementById('gst').click()" (click)="filetype = 'GST'">
<input type="file" id="gst" accept="image/jpeg, image/png" class="hide" (change)="onChange($event)">
<p class="upld-icn-txt">Upload Image</p>
</div>
</div>
</div>
</div>
<div class="col-md-6 well-container">
<div class="well">
<p class="">
<span class="pull-right">
<input type="text" formControlName="addressLine1">
</span> STREET 1 </p>
</div>
<p class="form_error_message">{{formErrors.branches[i].addressLine1}}</p>
</div>
<div class="col-md-6 well-container">
<div class="well">
<p class="">
<span class="pull-right">
<input type="text" formControlName="addressLine2">
</span> STREET 2 </p>
</div>
<p class="form_error_message">{{formErrors.branches[i].addressLine2}}</p>
</div>
<div class="col-md-6 well-container">
<div class="well">
<p class="">
<span class="pull-right">
<input type="text" formControlName="town" class="input-box">
</span> TOWN / CITY </p>
</div>
<p class="form_error_message">{{formErrors.branches[i].town}}</p>
</div>
<div class="col-md-6 well-container">
<div class="well">
<p class="">
<span class="pull-right">
<input type="text" formControlName="pincode" class="input-box" maxlength="6">
</span> PINCODE </p>
</div>
<p class="form_error_message">{{formErrors.branches[i].pincode}}</p>
</div>
<div class="col-md-6 well-container">
<div class="well">
<p class="">
<span class="pull-right">
<select class="form-control" formControlName="stateCode">
<option [ngValue]="i.code" *ngFor="let i of stateCodes">{{i.value}}</option>
</select>
</span> STATE / UT </p>
</div>
</div>
<div class="col-md-6 well-container">
<div class="well">
<p class="">
<span class="pull-right">
<input type="text" formControlName="countryCode">
</span> COUNTRY </p>
</div>
</div>
</div>
<!-- -->
<div class="form-container company-sect">
<div class="col-md-12">
<p class="entity-head">BRANCH BANK DETAILS</p>
</div>
<div class="col-md-12 highway-type">
<img class="no-hover" src="assets/images/toll/oval-5.png">
<img class="hover" src="assets/images/toll/circle-iocn.png"> SAME AS HEAD OFFICE DETAILS
</div>
<div class="col-md-6">
<!-- <div class="well">
<p class="">
<span class="pull-right">
<input type="text" required formControlName="accountnumber">
<p class="form_error_message">{{errorMsg[i].formErrors.accountnumber}}</p>
</span> ACCOUNT NUMBER *</p>
</div> -->
</div>
<div class="col-md-6">
<!-- <div class="well">
<p class="">
<span class="pull-right">
<input type="text" required formControlName="bankname">
<p class="form_error_message">{{errorMsg[i].formErrors.bankname}}</p>
</span> BANK NAME *</p>
</div> -->
</div>
<div class="col-md-6">
<!-- <div class="well">
<p class="">
<span class="pull-right">
<input type="text" required formControlName="ifsccode" maxlength="11">
<p class="form_error_message">{{errorMsg[i].formErrors.ifsccode}}</p>
</span> IFSC CODE *</p>
</div> -->
</div>
<!-- -->
</div>
<div class="form-container">
<div class="col-md-6 well-container">
<div class="well">
<p class="">
<span class="pull-right">
<input type="text" required formControlName="kilometer" maxlength="4">
</span> KILO METER</p>
</div>
<p class="form_error_message">{{formErrors.branches[i].kilometer}}</p>
</div>
<div class="col-md-6 well-container">
<div class="well">
<p class="">
<span class="pull-right">
<input type="text" required formControlName="highwaynumber">
</span> HIGHWAY NUMBER</p>
</div>
<p class="form_error_message">{{formErrors.branches[i].highwaynumber}}</p>
</div>
<div class="col-md-6 well-container">
<div class="well">
<p class="">
<span class="pull-right">
<input type="text" required formControlName="area">
</span> AREA *</p>
</div>
<p class="form_error_message">{{formErrors.branches[i].area}}</p>
</div>
<div class="col-md-6 well-container">
<div class="well">
<p class="">
<span class="pull-right">
<input type="text" required formControlName="stretch">
</span> STRETCH </p>
</div>
<p class="form_error_message">{{formErrors.branches[i].stretch}}</p>
</div>
<div class="col-md-6 well-container">
<div class="well">
<p class="">
<span class="pull-right">
<input type="text" required formControlName="tollboothlength" maxlength="4">
</span> TOLL BOOTH LENGTH </p>
</div>
<p class="form_error_message">{{formErrors.branches[i].tollboothlength}}</p>
</div>
<div class="col-md-6 well-container">
<div class="well">
<p class="">
<span class="pull-right">
<input type="text" formControlName="feeeffectivedate">
</span> FEE EFFECTIVE DATE </p>
</div>
</div>
<div class="col-md-12 well-container">
<div class="well">
<p class="">
<span class="pull-right">
<input type="text" formControlName="duedate">
</span> DUE DATE OF TOLL REVISION </p>
</div>
</div>
<!-- contact person section here -->
<div class="form-container">
<div formArrayName="contactpersons">
<div class="col-md-12" *ngFor="let contactperson of register_branch['controls'].branches['controls'][i]['controls'].contactpersons['controls']; let j = index;">
<div formGroupName="{{j}}">
<div class="col-md-6 well-container">
<div class="well">
<p class="">
<span class="pull-right">
<input type="text" formControlName="contactperson">
</span> CONTACT PERSON {{j + 1}}*</p>
</div>
<!-- <p>{{ formErrors[i].contactpersons[j].contactperson }}</p> -->
</div>
<div class="col-md-6 well-container">
<div class="well">
<p class="">
<span class="pull-right">
<input type="text" formControlName="mobilenumber" class="input-box" maxlength="10">
</span> MOBILE NUMBER {{j + 1}}*</p>
</div>
<!-- <p class="form_error_message">{{formErrors[i].contactpersons[j].mobilenumber}}</p> -->
</div>
</div>
</div>
<div class="text-center col-md-12" *ngIf="register_branch['controls'].branches['controls'][i]['controls'].contactpersons['controls'].length < 5">
<input type="button" class="submit-box add-person" value="ADD ANOTHER PERSON" (click)="addcontactperson(i)">
</div>
</div>
</div>
<!-- contact person section here -->
</div>
<div class="form-container company-sect">
<div class="col-md-12">
<p class="entity-head">DOE CARD DETAILS</p>
</div>
<div class="col-md-6 well-container">
<div class="well">
<p class="">
<span class="pull-right">
<input type="text" id="default1" list="amounts" placeholder="QUANTITY">
<!-- <input type="text" formControlName="cardsQuantity" id="default1" list="amounts" placeholder="QUANTITY"> -->
<datalist id="amounts">
<option value="100">100</option>
<option value="500">500</option>
<option value="1000">1000</option>
<option value="5000">5000</option>
<option value="10000">10000</option>
</datalist>
</span> QUANTITY </p>
</div>
<!-- <p class="form_error_message">{{formErrors..branches[i].cardsQuantity}}</p> -->
</div>
<div class="col-md-offset-2 col-md-3">
<input type="button" class="submit-box" value="REQUEST" (click)="requestCards()">
</div>
</div>
<div class="form-container">
<div class="login-credentials">
<div class="col-md-12">
<p class="entity-head">LOGIN CARD DETAILS</p>
</div>
<div class="col-md-6 well-container">
<div class="well">
<p class="">
<span class="pull-right">
<input type="text" formControlName="primaryCardNumber" class="input-box" maxlength="16">
</span> MASTER KEY CARD NUMBER * </p>
</div>
<p class="form_error_message">{{formErrors.branches[i].primaryCardNumber}}</p>
</div>
<div class="col-md-6 well-container">
<div class="well">
<p class="">
<span class="pull-right">
<input type="text" formControlName="secondaryCardNumber" class="input-box" maxlength="16">
</span> OTHER CARD NUMBER * </p>
</div>
<p class="form_error_message">{{formErrors.branches[i].secondaryCardNumber}}</p>
</div>
<div class="col-md-6 well-container">
<div class="well">
<p class="">
<span class="pull-right">
<input type="text" formControlName="username" class="input-box" (input)="suggestUsername(i)">
</span> USERNAME </p>
</div>
<p class="form_error_message">{{formErrors.branches[i].username}}</p>
</div>
<div class="col-md-6 well-container">
<div class="well">
<p class="">
<span class="pull-right">
<input type="text" formControlName="password" class="input-box">
</span> PASSWORD *</p>
</div>
<p class="form_error_message">{{formErrors.branches[i].password}}</p>
</div>
<div class="username-suggestions" *ngIf="(register_branch.controls['branches']['controls'][this.currentBranch].value.username.length > 3)">
<div class="col-md-6 well-container" *ngIf="!usernameapisuccess">
<div class="well" *ngIf="!usernameSuggestion.available">
<div class="suggestion-container">
<p>Username is already taken. Kindly see below.</p>
<p>SUGGESTIONS:</p>
<ul class="suggestions_list">
<li class="cursor" *ngFor="let suggestion of this.suggestionsObj[i]" (click)="changeUsername(suggestion)">{{suggestion}}</li>
</ul>
</div>
</div>
<div class="well" *ngIf="usernameSuggestion.available">
<div class="suggestion-container" *ngIf="usernameSuggestion.available">
<p class="suggestions_list">Username Available</p>
</div>
</div>
</div>
<div class="col-md-6 well-container" *ngIf="usernameapisuccess">
<p>Checking....</p>
</div>
</div>
<!-- <div class="username-suggestions" *ngIf="(register_branch.controls['branches']['controls'][this.currentBranch].value.username.length > 3)">
<div class="col-md-6" *ngIf="!usernameapisuccess"> -->
<!-- if not avaiable, display this -->
<!-- <div class="well" *ngIf="!usernameSuggestion.available">
<div class="suggestion-container">
<p>Username is already taken. Kindly see below.</p>
<p>SUGGESTIONS:</p>
<ul class="suggestions_list">
<li class="cursor" *ngFor="let suggestion of this.suggestionsObj[i]" (click)="changeUsername(suggestion, i)">{{suggestion}}</li>
</ul>
</div> -->
<!-- </div> -->
<!-- </div> -->
<!-- if avaiable, display this -->
<!-- <div class="well" *ngIf="usernameSuggestion.available">
<div class="suggestion-container" *ngIf="usernameSuggestion.available">
<p class="suggestions_list">Username Available</p>
</div>
</div>
</div>
<div class="col-md-6" *ngIf="usernameapisuccess">
<p>Checking....</p>
</div>
</div> -->
<div class="col-md-6 well-container">
<div class="well">
<p class="">
<span class="pull-right">
<input type="text" formControlName="repassword" class="input-box">
</span> RE-TYPE PASSWORD * </p>
</div>
<p class="form_error_message">{{formErrors.branches[i].repassword}}</p>
</div>
</div>
</div>
</div>
<!-- end of panel-body -->
</div>
</div>
</div>
<!-- [formGroupName]="i" -->
</div>
<!-- *ngFor -->
</div>
<!-- formArrayName="branches" -->
</form>
</div>
<!-- end of card -->
<div class="row">
<div class="col-md-6 text-center">
<input type="button" class="submit-box add-person" value="+ ADD NEW BRANCH" (click)="addBranch()">
<p *ngIf="(!register_branch.valid)">Please Recheck the form. You cannot add new branch till all the inputs for the previous branch(es) are
valid
</p>
</div>
<div class="col-md-6 text-center">
<input type="button" class="submit-box" (click)="onSubmit()" value="+ ADD READERS &amp; OPERATORS">
</div>
</div>
</div>
</div>
<div class="row">
<div class="row social-feed">
<div class="col-md-6">
<img class="social-icon cursor" src="assets/images/toll/lin-mer.png">
<img class="social-icon cursor" src="assets/images/toll/fb-mer.png">
<img class="social-icon cursor" src="assets/images/toll/twit-mer.png">
</div>
<div class="col-md-6 cursor">
<p>Follow us</p>
</div>
</div>
</div>
</div>
<modal></modal>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment