Code pulled from aws
This commit is contained in:
venbatechnologies@gmail.com
parent
f53c8c7291
commit
1e79988002
3513
ng8-seed/package-lock.json
generated
3513
ng8-seed/package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -12,22 +12,22 @@
|
||||
},
|
||||
"private": true,
|
||||
"dependencies": {
|
||||
"@agm/core": "^1.0.0-beta.5",
|
||||
"@angular/animations": "^8.2.2",
|
||||
"@agm/core": "^1.1.0",
|
||||
"@angular/animations": "^8.2.14",
|
||||
"@angular/cdk": "^7.3.7",
|
||||
"@angular/common": "^8.2.2",
|
||||
"@angular/compiler": "^8.2.2",
|
||||
"@angular/core": "^8.2.2",
|
||||
"@angular/common": "^8.2.14",
|
||||
"@angular/compiler": "^8.2.14",
|
||||
"@angular/core": "^8.2.14",
|
||||
"@angular/flex-layout": "7.0.0-beta.19",
|
||||
"@angular/forms": "^8.2.2",
|
||||
"@angular/forms": "^8.2.14",
|
||||
"@angular/material": "^7.0.3",
|
||||
"@angular/platform-browser": "^8.2.2",
|
||||
"@angular/platform-browser-dynamic": "^8.2.2",
|
||||
"@angular/router": "^8.2.2",
|
||||
"@angular/platform-browser": "^8.2.14",
|
||||
"@angular/platform-browser-dynamic": "^8.2.14",
|
||||
"@angular/router": "^8.2.14",
|
||||
"@fortawesome/angular-fontawesome": "^0.5.0",
|
||||
"@fortawesome/fontawesome-svg-core": "^1.2.25",
|
||||
"@fortawesome/free-brands-svg-icons": "^5.11.2",
|
||||
"@fortawesome/free-solid-svg-icons": "^5.11.2",
|
||||
"@fortawesome/fontawesome-svg-core": "^1.2.26",
|
||||
"@fortawesome/free-brands-svg-icons": "^5.12.0",
|
||||
"@fortawesome/free-solid-svg-icons": "^5.12.0",
|
||||
"@ngx-share/button": "^7.1.4",
|
||||
"@ngx-share/buttons": "^7.1.4",
|
||||
"@ngx-share/core": "^7.1.4",
|
||||
@ -38,9 +38,9 @@
|
||||
"angular-notifier": "^6.0.1",
|
||||
"angular-socialshare": "^2.3.11",
|
||||
"angular-sortablejs": "^2.6.0",
|
||||
"angular-tree-component": "^8.4.0",
|
||||
"chart.js": "^2.7.3",
|
||||
"core-js": "^2.5.7",
|
||||
"angular-tree-component": "^8.5.2",
|
||||
"chart.js": "^2.9.3",
|
||||
"core-js": "^2.6.11",
|
||||
"d3": "^4.9.1",
|
||||
"date-fns": "^1.29.0",
|
||||
"dragula": "^3.7.2",
|
||||
@ -49,54 +49,56 @@
|
||||
"html2canvas": "^1.0.0-rc.5",
|
||||
"jquery": "^3.4.1",
|
||||
"jspdf": "^1.5.3",
|
||||
"leaflet": "^1.3.4",
|
||||
"leaflet": "^1.6.0",
|
||||
"leaflet-map": "^0.2.1",
|
||||
"moment": "^2.22.2",
|
||||
"ng-pick-datetime": "^7.0.0",
|
||||
"ng-simple-slideshow": "^1.2.9",
|
||||
"ng2-charts": "^1.6.0",
|
||||
"ng2-dragula": "^2.1.1",
|
||||
"ng2-file-upload": "^1.3.0",
|
||||
"ng2-file-upload": "^1.4.0",
|
||||
"ng2-tree": "^2.0.0-alpha.10",
|
||||
"ng2-validation": "^4.2.0",
|
||||
"ngx-color-picker": "^7.0.2",
|
||||
"ngx-cookie-service": "^2.2.0",
|
||||
"ngx-cookie-service": "^2.3.0",
|
||||
"ngx-mat-select-search": "^2.1.0",
|
||||
"ngx-perfect-scrollbar": "5.0.0-7",
|
||||
"ngx-slick-carousel": "^0.4.6",
|
||||
"ngx-slick-carousel": "^0.4.7",
|
||||
"ngx-social-button": "^1.0.4",
|
||||
"ngx-spinner": "^8.1.0",
|
||||
"perfect-scrollbar": "^1.4.0",
|
||||
"quill": "^1.3.7",
|
||||
"rxjs": "^6.3.3",
|
||||
"rxjs-compat": "^6.3.3",
|
||||
"quill": "^1.3.6",
|
||||
"rxjs": "^6.5.4",
|
||||
"rxjs-compat": "^6.5.4",
|
||||
"screenfull": "^3.3.3",
|
||||
"simple-line-icons": "^2.4.1",
|
||||
"slick-carousel": "^1.8.1",
|
||||
"sortablejs": "^1.7.0",
|
||||
"sortablejs": "^1.10.2",
|
||||
"tether": "^1.4.0",
|
||||
"zone.js": "~0.9.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@angular-devkit/build-angular": "^0.803.22",
|
||||
"@angular-devkit/build-angular": "~0.802.2",
|
||||
"@angular/cli": "^8.3.20",
|
||||
"@angular/compiler-cli": "^8.2.2",
|
||||
"@angular/language-service": "^8.2.2",
|
||||
"@angular/compiler-cli": "^8.2.14",
|
||||
"@angular/language-service": "^8.2.14",
|
||||
"@types/d3": "^3.5.41",
|
||||
"@types/jasmine": "^2.8.11",
|
||||
"@types/jquery": "^3.3.22",
|
||||
"@types/node": "^10.12.6",
|
||||
"@types/node": "^10.17.13",
|
||||
"@types/nvd3": "^1.8.39",
|
||||
"codelyzer": "^5.0.1",
|
||||
"jasmine-core": "^3.3.0",
|
||||
"codelyzer": "^5.2.1",
|
||||
"jasmine-core": "^3.5.0",
|
||||
"jasmine-spec-reporter": "^4.2.1",
|
||||
"karma": "^4.2.0",
|
||||
"karma": "^4.4.1",
|
||||
"karma-chrome-launcher": "^2.2.0",
|
||||
"karma-cli": "^1.0.1",
|
||||
"karma-coverage-istanbul-reporter": "^2.0.4",
|
||||
"karma-coverage-istanbul-reporter": "^2.1.1",
|
||||
"karma-jasmine": "^1.1.2",
|
||||
"karma-jasmine-html-reporter": "^1.4.0",
|
||||
"karma-jasmine-html-reporter": "^1.5.1",
|
||||
"protractor": "^5.4.1",
|
||||
"ts-node": "^7.0.1",
|
||||
"tslint": "^5.11.0",
|
||||
"tslint": "^5.20.1",
|
||||
"typescript": "3.5.3"
|
||||
}
|
||||
}
|
||||
|
||||
@ -48,7 +48,7 @@ import { PaymentConfirmationComponent } from './components/payment-confirmation/
|
||||
import { MyAccountComponent } from './components/my-account/my-account.component';
|
||||
import { TokenInterceptorService } from './shared/guards/token-interceptor.service';
|
||||
import { AuthGuardService } from './shared/guards/auth-guard.service';
|
||||
import { MatTableDataSource, MatTableModule, MatSlideToggleModule, MatRadioModule, MatButtonModule, MatBottomSheetModule } from '@angular/material';
|
||||
import { MatTableDataSource, MatTableModule, MatSlideToggleModule, MatRadioModule, MatButtonModule, MatBottomSheetModule, MatDialogModule } from '@angular/material';
|
||||
import { SchoolDetailsService } from './shared/school-details.service';
|
||||
// import { AddEventModule } from './add-event.module';
|
||||
import {HashLocationStrategy,LocationStrategy,PathLocationStrategy} from '@angular/common';
|
||||
@ -74,6 +74,10 @@ import { EditUserDetailsComponent } from 'app/edit-user-details/edit-user-detail
|
||||
import { ConfirmationDialogComponent } from './common/confirmation-dialog/confirmation-dialog.component';
|
||||
import { VolunteerInfoComponent } from './components/user-profile/volunteer-info/volunteer-info.component';
|
||||
import { BottomSheetComponent } from './common/bottom-sheet/bottom-sheet.component';
|
||||
import { NgxMatSelectSearchModule } from 'ngx-mat-select-search'
|
||||
import { ContributeFundComponent } from './components/contribute/contribute-fund/contribute-fund.component';
|
||||
import { NgxSpinnerModule } from "ngx-spinner";
|
||||
import { ContactComponent } from './components/contact/contact.component';
|
||||
// import { ArticleShrinkComponent } from './knowledge-sharing/article-shrink/article-shrink.component';
|
||||
|
||||
export function HttpLoaderFactory(http: HttpClient) {
|
||||
@ -119,7 +123,9 @@ const DEFAULT_PERFECT_SCROLLBAR_CONFIG: PerfectScrollbarConfigInterface = {
|
||||
userCertificateDisplay,
|
||||
EditUserDetailsComponent,
|
||||
VolunteerInfoComponent,
|
||||
BottomSheetComponent
|
||||
BottomSheetComponent,
|
||||
ContributeFundComponent,
|
||||
ContactComponent
|
||||
|
||||
|
||||
// ProjectListComponent
|
||||
@ -147,6 +153,9 @@ const DEFAULT_PERFECT_SCROLLBAR_CONFIG: PerfectScrollbarConfigInterface = {
|
||||
MatTableModule,
|
||||
DemoMaterialModule,
|
||||
HttpClientModule,
|
||||
MatDialogModule,
|
||||
NgxMatSelectSearchModule,
|
||||
NgxSpinnerModule,
|
||||
TranslateModule.forRoot({
|
||||
loader: {
|
||||
provide: TranslateLoader,
|
||||
@ -189,7 +198,7 @@ const DEFAULT_PERFECT_SCROLLBAR_CONFIG: PerfectScrollbarConfigInterface = {
|
||||
useFactory: getAuthServiceConfigs
|
||||
},
|
||||
],
|
||||
entryComponents: [PasswordChangeComponent,UserCertificateComponent,EditUserDetailsComponent,BottomSheetComponent],
|
||||
entryComponents: [PasswordChangeComponent,ContributeFundComponent,UserCertificateComponent,EditUserDetailsComponent,BottomSheetComponent],
|
||||
bootstrap: [AppComponent]
|
||||
})
|
||||
export class AppModule { }
|
||||
|
||||
@ -17,6 +17,7 @@ import { SuccessComponent } from './components/payment-status/success/success.co
|
||||
import { FailureComponent } from './components/payment-status/failure/failure.component';
|
||||
import { UserCertificateComponent, userCertificateDisplay } from './components/user-certificate/user-certificate.component';
|
||||
import { PrivacyPolicyComponent } from './components/privacy-policy/privacy-policy.component';
|
||||
import { ContactComponent } from './components/contact/contact.component';
|
||||
export const AppRoutes: Routes = [{
|
||||
path: '',
|
||||
redirectTo: 'home',
|
||||
@ -82,6 +83,10 @@ export const AppRoutes: Routes = [{
|
||||
{
|
||||
path:'privacy-policy',
|
||||
component:PrivacyPolicyComponent
|
||||
},
|
||||
{
|
||||
path:'contact',
|
||||
component:ContactComponent
|
||||
},{
|
||||
path:'knowledge-sharing',
|
||||
loadChildren:'./knowledge-sharing/knowledge-sharing.module#KnowledgeSharingModule'
|
||||
|
||||
71
ng8-seed/src/app/components/contact/contact.component.html
Normal file
71
ng8-seed/src/app/components/contact/contact.component.html
Normal file
@ -0,0 +1,71 @@
|
||||
<div class="title-block about-w hero contact-w text-center">
|
||||
<div class="hero-overlay"></div>
|
||||
<div fxLayout="row wrap" fxLayoutAlign="center start" class="mb-3">
|
||||
<div fxFlex.gt-sm="100" fxFlex.gt-xs="100" fxFlex="100" class="m-gap p-gap relative">
|
||||
<h2 class="text-white">
|
||||
<span class="more-bold">Hey.</span>
|
||||
</h2>
|
||||
<h2 class="text-white">What can we help you with?</h2>
|
||||
</div>
|
||||
</div>
|
||||
<div fxLayout="row wrap" fxLayoutAlign="center end">
|
||||
<div fxFlex.gt-sm="50" fxFlex.gt-xs="100" fxFlex="100" fxLayoutAlign="center center" class="border-right">
|
||||
<div class="text-white relative contact-info">
|
||||
<!-- <h2 class="font-weight-bold text-white">Become a client.</h2> -->
|
||||
<p class="text-white">Phone : +91 – 44 - 28279758</p>
|
||||
</div>
|
||||
</div>
|
||||
<div fxFlex.gt-sm="50" fxFlex.gt-xs="100" fxFlex="100" fxLayoutAlign="center center">
|
||||
<div class="text-white relative contact-info">
|
||||
<!-- <h2 class="font-weight-bold text-white">Need Support.</h2> -->
|
||||
<p class="text-white">Email: tnpta.csr@gmail.com</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div fxLayout="row wrap" fxLayoutAlign="center end" class="mt-2">
|
||||
<div fxFlex.gt-sm="50" fxFlex.gt-xs="100" fxFlex="100" fxLayoutAlign="center center">
|
||||
<div class="text-white relative contact-info">
|
||||
<!-- <h2 class="font-weight-bold text-white">Become a client.</h2> -->
|
||||
<p class="text-white">The Secretary,</p>
|
||||
<p class="text-white">Tamil Nadu State Parent Teacher Association</p>
|
||||
<p class="text-white">DPI Campus, College Road,</p>
|
||||
<p class="text-white">Nungambakkam,</p>
|
||||
<p class="text-white">Chennai - 600006, India.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <mat-card class="p-2">
|
||||
<div class="mb-3">
|
||||
<mat-card class="p-3">
|
||||
<h2 class="font-weight-bold text-center mb-2">Drop us a Line</h2>
|
||||
<form #form="ngForm">
|
||||
<div fxLayout="column" fxLayoutAlign="start stretch">
|
||||
<mat-form-field style="width: 100%">
|
||||
<input matInput placeholder="Name" type="text" name="name" required>
|
||||
</mat-form-field>
|
||||
<mat-form-field style="width: 100%">
|
||||
<input matInput placeholder="Company Name" type="text" name="cname" required>
|
||||
</mat-form-field>
|
||||
<mat-form-field style="width: 100%">
|
||||
<input matInput placeholder="Country" type="text" name="ctry" required>
|
||||
</mat-form-field>
|
||||
<mat-form-field style="width: 100%">
|
||||
<input matInput placeholder="E Mail" type="email" name="email" required>
|
||||
</mat-form-field>
|
||||
<mat-form-field style="width: 100%" class="mb-2">
|
||||
<input matInput placeholder="Write Message" type="text" name="text1" required>
|
||||
</mat-form-field>
|
||||
<button style="width: 30%" class="mat-green" mat-raised-button>Send</button>
|
||||
</div>
|
||||
</form>
|
||||
</mat-card>
|
||||
|
||||
</div>
|
||||
<div>
|
||||
<mat-card class="p-3 text-center">
|
||||
<h2 class="mb-2">Follow Us On</h2>
|
||||
<a href="#" class="shared-icon mr-1 mb-1 mat-blue"><i class="fa fa-facebook fa-lg"></i></a><a href="#" class="mr-1 mb-1 shared-icon mat-red"><i class="fa fa-google fa-lg"></i></a>
|
||||
</mat-card>
|
||||
</div>
|
||||
</mat-card> -->
|
||||
@ -0,0 +1,7 @@
|
||||
.contact-w {
|
||||
background-image:url("assets/images/csr-img/contact.jpg");
|
||||
}
|
||||
.contact-w.about-w{
|
||||
height: auto;
|
||||
padding: 4rem 0;
|
||||
}
|
||||
@ -0,0 +1,25 @@
|
||||
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { ContactComponent } from './contact.component';
|
||||
|
||||
describe('ContactComponent', () => {
|
||||
let component: ContactComponent;
|
||||
let fixture: ComponentFixture<ContactComponent>;
|
||||
|
||||
beforeEach(async(() => {
|
||||
TestBed.configureTestingModule({
|
||||
declarations: [ ContactComponent ]
|
||||
})
|
||||
.compileComponents();
|
||||
}));
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(ContactComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
15
ng8-seed/src/app/components/contact/contact.component.ts
Normal file
15
ng8-seed/src/app/components/contact/contact.component.ts
Normal file
@ -0,0 +1,15 @@
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'app-contact',
|
||||
templateUrl: './contact.component.html',
|
||||
styleUrls: ['./contact.component.scss']
|
||||
})
|
||||
export class ContactComponent implements OnInit {
|
||||
|
||||
constructor() { }
|
||||
|
||||
ngOnInit() {
|
||||
}
|
||||
|
||||
}
|
||||
@ -0,0 +1,43 @@
|
||||
<div mat-dialog-content>
|
||||
<p class="quote" style="margin-top:4px;text-align: center">”Alone we can do so little,<br> together we can do so much” <br/>- Hellen Keller</p>
|
||||
<h5 class="text-center"> Contribute to<br> State School Development Fund</h5>
|
||||
<div fxLayout="column" fxLayoutAlign="start stretch">
|
||||
|
||||
<!-- <div fxLayout fxLayout="row" fxLayout.xs="column" fxLayoutGap.xs="0"> -->
|
||||
<div class="text-center" fxFlex="100%" fxFlex.xs="100" fxFlex.sm="100" fxFlex.md="40" fxFlex.lg="100" fxFlex.xl="100">
|
||||
<mat-form-field appearance="outline" style="width: 70%;text-align: center;">
|
||||
<input matInput type="tel" OnlyNumber="true" placeholder="Amount in Rs." [(ngModel)]="general_devlop_amt" maxlength="10" (change)="dev_fund_change($event.target.value)" onkeypress="return event.charCode >= 48 && event.charCode <= 57">
|
||||
</mat-form-field>
|
||||
<!-- </div> -->
|
||||
</div>
|
||||
<!-- <mat-radio-button name="group1" class="pb-1" checked>State School Development Fund</mat-radio-button> -->
|
||||
<!--<mat-radio-button name="group1">District School Development Fund</mat-radio-button>
|
||||
<mat-form-field style="width: 100%" class="pl-1">
|
||||
<mat-select placeholder="Select District" >
|
||||
<mat-option>
|
||||
|
||||
</mat-option>
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
<mat-radio-button name="group1">School Development Fund</mat-radio-button>
|
||||
<mat-form-field style="width: 100%" class="pl-1">
|
||||
<mat-select placeholder="Select District" >
|
||||
<mat-option >
|
||||
|
||||
</mat-option>
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
<mat-form-field style="width: 100%" class="pl-1">
|
||||
<mat-select placeholder="Select School">
|
||||
<mat-option >
|
||||
|
||||
</mat-option>
|
||||
</mat-select>
|
||||
</mat-form-field> -->
|
||||
<mat-form-field dividerColor="warn" class="ml-xs mr-xs" style="width: 100%;" appearance="outline">
|
||||
<textarea matInput placeholder="Comments" rows="5" [(ngModel)]="gen_dev_fund_remarks"></textarea>
|
||||
</mat-form-field>
|
||||
<button mat-raised-button style="background-color:rgb(69, 189, 189);color:white" (click)="onNoClick()">Proceed to Contribute</button>
|
||||
<p class="quote">”We make a living by what we get.<br> But we make a life by what we give” <br/>- Winston Churchill</p>
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,10 @@
|
||||
.quote{
|
||||
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
||||
font-size: 16px;
|
||||
color:gray;
|
||||
text-align: center;
|
||||
font-style: italic;
|
||||
}
|
||||
.mat-dialog-content{
|
||||
max-height: 80vh !important;
|
||||
}
|
||||
@ -0,0 +1,25 @@
|
||||
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { ContributeFundComponent } from './contribute-fund.component';
|
||||
|
||||
describe('ContributeFundComponent', () => {
|
||||
let component: ContributeFundComponent;
|
||||
let fixture: ComponentFixture<ContributeFundComponent>;
|
||||
|
||||
beforeEach(async(() => {
|
||||
TestBed.configureTestingModule({
|
||||
declarations: [ ContributeFundComponent ]
|
||||
})
|
||||
.compileComponents();
|
||||
}));
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(ContributeFundComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
@ -0,0 +1,72 @@
|
||||
import { Component, OnInit, Inject } from '@angular/core';
|
||||
import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material';
|
||||
import { Router } from '@angular/router';
|
||||
import { ApiService } from 'app/shared/api.service';
|
||||
|
||||
@Component({
|
||||
selector: 'app-contribute-fund',
|
||||
templateUrl: './contribute-fund.component.html',
|
||||
styleUrls: ['./contribute-fund.component.scss']
|
||||
})
|
||||
export class ContributeFundComponent implements OnInit {
|
||||
general_devlop_amt:string='';
|
||||
gen_dev_fund_remarks:string
|
||||
constructor(public dialogRef: MatDialogRef<ContributeFundComponent>,
|
||||
@Inject(MAT_DIALOG_DATA) public data: any,public router:Router,private apiService:ApiService) { }
|
||||
|
||||
ngOnInit() {
|
||||
}
|
||||
dev_fund_change(value){
|
||||
if(value != ''){
|
||||
if(value<=0){
|
||||
alert('Given value is Invalid');
|
||||
this.general_devlop_amt=''
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// storeData_session(){
|
||||
// sessionStorage.removeItem('contribute-selected-list')
|
||||
// if(!this.apiService.isToken()){
|
||||
// this.router.navigate(['payment'])
|
||||
// return
|
||||
// }
|
||||
// if(this.general_devlop_amt ==''){
|
||||
// alert("Please Fill the Amount");
|
||||
// return
|
||||
// }
|
||||
// let data = {'records':
|
||||
// {
|
||||
// 'id':'',
|
||||
// 'user_id':'',
|
||||
// "cont_type":1, //1-funds 2-materials
|
||||
// "cont_towards":"1", //1-State Fund
|
||||
// "amount":this.general_devlop_amt,
|
||||
// "payment_mode":"",
|
||||
// "payment_ref":"",
|
||||
// "gen_dev_fund_remarks":this.gen_dev_fund_remarks,
|
||||
// "contributions":[]
|
||||
// }};
|
||||
// console.log(data);
|
||||
// sessionStorage.setItem('contribute',JSON.stringify(data))
|
||||
// this.apiService.csrContribute(data).subscribe(result=>{
|
||||
// if(result['dataStatus']){
|
||||
// data.records.id=result['records']
|
||||
// data.records.contributions=[]
|
||||
|
||||
// sessionStorage.setItem('contribute-params',JSON.stringify(data))
|
||||
// sessionStorage.setItem('contribute_final_total',this.general_devlop_amt)
|
||||
// this.router.navigate(['payment'],{replaceUrl:true})
|
||||
// }
|
||||
// else{
|
||||
|
||||
// }
|
||||
// })
|
||||
|
||||
// }
|
||||
|
||||
onNoClick(): void {
|
||||
this.dialogRef.close({'fund_contribute':this.general_devlop_amt,'fund_remark':this.gen_dev_fund_remarks});
|
||||
}
|
||||
|
||||
}
|
||||
@ -1,52 +1,163 @@
|
||||
<div id="top"></div>
|
||||
<div id="top"></div>
|
||||
<div>
|
||||
<mat-card class="pt-1 pl-1 sidescroll" *ngIf="grandTotal !=0">
|
||||
<div fxLayout fxLayout="row" fxLayout.xs="column" fxLayoutAlign.md="center center">
|
||||
<div class="mb-1" fxFlex.lg="40%" fxFlex.xs="100" fxFlex.sm="100%" fxFlex.md="40%" fxFlex.xl="40%">
|
||||
<div *ngIf="dataStatus">
|
||||
<mat-label class="mobfont largefont">I am happy to contribute</mat-label>
|
||||
<mat-radio-group [(ngModel)]="contribute_type" >
|
||||
<mat-radio-button value="2" ><span class="mobfont largefont">Material</span></mat-radio-button>
|
||||
<mat-radio-button value="1"><span class="mobfont largefont">Funds</span></mat-radio-button>
|
||||
</mat-radio-group>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-1" fxFlex.lg="20%" fxFlex.xs="50" fxFlex.sm="50%" fxFlex.md="20%" fxFlex.xl="20%">
|
||||
<div *ngIf="dataStatus">
|
||||
<mat-label class="total_card_1 mobfont largefont">Total :</mat-label>
|
||||
<span class="total_card_2 mobfont largefont"> <strong><span class="amount"><span class="currency-symbol">₹</span> {{grandTotal}}</span></strong></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-1" fxFlex.lg="20%" fxFlex.xs="50" fxFlex.sm="50%" fxFlex.md="20%" fxFlex.xl="20%">
|
||||
<div *ngIf="dataStatus">
|
||||
<!-- <button mat-raised-button color="primary" (click)="finalSave(2)" class="mr-1 mb-1">I'd like to Contribute in Kind</button> -->
|
||||
<button class="text mob_submit" (click)="finalSave(contribute_type)" mat-raised-button style="background-color:rgb(69, 189, 189);color:white;font-weight: bold"><span>Submit</span></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</mat-card>
|
||||
</div>
|
||||
|
||||
<!--starts-->
|
||||
<div fxLayout fxLayout="row" fxLayout.xs="column" >
|
||||
<!-- <div fxFlex.xs="100" fxFlex.sm="100" fxFlex.md="40" fxFlex.lg="1000" fxFlex.xl="40"> -->
|
||||
<mat-card class="p-2" fxFlex.lg="72.5%" fxFlex.xs="100" fxFlex.sm="70%" fxFlex.md="68%" fxFlex.xl="70%">
|
||||
<mat-card-title class="mb-1"><h5 class="mt-0 text-center">Contribute to Specific Need </h5></mat-card-title>
|
||||
<hr>
|
||||
<form [formGroup]="Contribute">
|
||||
<div fxLayout="row" fxLayout.sm="column" fxLayoutAlign="start center" class="mb-2 pt-1" >
|
||||
<mat-form-field dividerColor="primary" class="ml-xs mr-xs" style="width: 40%;">
|
||||
<mat-select placeholder="Select District" formControlName="district_id" (selectionChange)="getFilterValue($event.value,'school')">
|
||||
<mat-option *ngFor="let item of district" [value]="item.district_id" >
|
||||
{{ item.district_name }}
|
||||
</mat-option>
|
||||
</mat-select>
|
||||
<div fxLayout fxLayout="row" fxLayout.xs="column" [ngClass]="{'large_view_top':grandTotal !=0}">
|
||||
<!-- <div fxFlex.xs="100" fxFlex.sm="100" fxFlex.md="40" fxFlex.lg="20" fxFlex.xl="40"> -->
|
||||
<mat-card class="support_mat" fxFlex="27%" fxFlex.xs="25%" fxFlex.sm="25%">
|
||||
|
||||
<!-- <mat-card-header style="padding: 0;margin: 0;"> -->
|
||||
<!-- <mat-card-title> -->
|
||||
|
||||
<!--</mat-card-title> -->
|
||||
<!-- </mat-card-header> -->
|
||||
<mat-card-content>
|
||||
<form [formGroup]="Contribute">
|
||||
<div fxLayout="column" fxLayoutAlign="start center" class="mb-2 pt-1" >
|
||||
<mat-form-field appearance="outline" dividerColor="primary" class="ml-xs mr-xs" style="width: 100%;">
|
||||
<mat-select formControlName="district_id" (selectionChange)="getFilterValue($event.value,'school')">
|
||||
<mat-option>
|
||||
<ngx-mat-select-search formControlName="districtSearch" (keyup)="searchFun(Contribute,'district')"
|
||||
[placeholderLabel]="'Search District...'"
|
||||
[noEntriesFoundLabel]="'no matching records found'"></ngx-mat-select-search>
|
||||
</mat-option>
|
||||
<mat-option *ngFor="let item of district" [value]="item.district_id" >
|
||||
{{ item.district_name }}
|
||||
</mat-option>
|
||||
</mat-select>
|
||||
<mat-label><mat-icon>search</mat-icon>Select District</mat-label>
|
||||
</mat-form-field>
|
||||
<mat-form-field dividerColor="accent" class="ml-xs mr-xs" style="width: 100%;" fxFlex.xs="50">
|
||||
<mat-select placeholder="Select School" formControlName="schoold_id">
|
||||
<mat-option *ngFor="let item of school" [value]="item.school_id" >
|
||||
{{ item.school_name }}
|
||||
</mat-option>
|
||||
</mat-select>
|
||||
<mat-form-field appearance="outline" dividerColor="accent" class="ml-xs mr-xs" style="width: 100%;" fxFlex.xs="50">
|
||||
<mat-select formControlName="schoold_id">
|
||||
<mat-option>
|
||||
<ngx-mat-select-search formControlName="schoolSearch" (keyup)="searchFun(Contribute,'school')"
|
||||
[placeholderLabel]="'Search School...'"
|
||||
[noEntriesFoundLabel]="'no matching records found'"></ngx-mat-select-search>
|
||||
</mat-option>
|
||||
<mat-option *ngFor="let item of school" [value]="item.school_id" >
|
||||
{{ item.school_name }}
|
||||
</mat-option>
|
||||
</mat-select>
|
||||
<mat-label><mat-icon>search</mat-icon>Select School</mat-label>
|
||||
</mat-form-field>
|
||||
<mat-form-field appearance="outline" dividerColor="warn" class="ml-xs mr-xs" style="width: 100%;">
|
||||
<mat-select formControlName="cad_id" (selectionChange)="getFilterValue($event.value,'material')">
|
||||
<mat-option>
|
||||
<ngx-mat-select-search formControlName="categorySearch" (keyup)="searchFun(Contribute,'category')"
|
||||
[placeholderLabel]="'Search Category...'"
|
||||
[noEntriesFoundLabel]="'no matching records found'"></ngx-mat-select-search>
|
||||
</mat-option>
|
||||
<mat-option *ngFor="let item of category" [value]="item.cat_id" >
|
||||
{{ item.cat_name }}
|
||||
</mat-option>
|
||||
</mat-select>
|
||||
<mat-label><mat-icon>search</mat-icon>Select Category</mat-label>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<div fxLayout="row" fxLayout.xs="column">
|
||||
<mat-form-field dividerColor="warn" class="ml-xs mr-xs" style="width: 100%;">
|
||||
<mat-select placeholder="Select Category" formControlName="cad_id" (selectionChange)="getFilterValue($event.value,'material')">
|
||||
<mat-option *ngFor="let item of category" [value]="item.cat_id" >
|
||||
{{ item.cat_name }}
|
||||
</mat-option>
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
<mat-form-field dividerColor="warn" class="ml-xs mr-xs" style="width: 100%;">
|
||||
<mat-select placeholder="Material Name" formControlName="mat_id">
|
||||
<mat-option *ngFor="let item of material_category.materials" [value]="item.mat_id" >
|
||||
{{ item.material_name }}
|
||||
</mat-option>
|
||||
</mat-select>
|
||||
<mat-form-field appearance="outline" dividerColor="warn" class="ml-xs mr-xs" style="width: 100%;">
|
||||
<mat-select formControlName="mat_id">
|
||||
<mat-option>
|
||||
<ngx-mat-select-search formControlName="materialsSearch" (keyup)="searchFun(Contribute,'material_category')"
|
||||
[placeholderLabel]="'Search Material Category...'"
|
||||
[noEntriesFoundLabel]="'no matching records found'"></ngx-mat-select-search>
|
||||
</mat-option>
|
||||
<mat-option *ngFor="let item of material_category.materials" [value]="item.mat_id" >
|
||||
{{ item.material_name }}
|
||||
</mat-option>
|
||||
</mat-select>
|
||||
<mat-label><mat-icon>search</mat-icon>Select Material</mat-label>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<div fxLayout fxLayout="row" style="text-align: right;" class="mb-2">
|
||||
<div class="" fxFlex="100%" fxFlex.xs="100" fxFlex.sm="100">
|
||||
<button mat-raised-button color="primary" (click)="refresh()">View All</button>
|
||||
<button class="ml-2" mat-raised-button color="primary" (click)="reset()">Clear</button>
|
||||
<button class="ml-2" mat-raised-button color="primary" (click)="getSchoolReqList()">Submit</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="" fxFlex="100%" fxFlex.xs="100" fxFlex.sm="100">
|
||||
<button mat-raised-button color="primary" (click)="refresh()">View All</button>
|
||||
<button class="ml-2" mat-raised-button color="primary" (click)="reset()">Clear</button>
|
||||
<button class="ml-2" mat-raised-button color="primary" (click)="getSchoolReqList()">Submit</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
<!-- </div> -->
|
||||
<!-- <div fxFlex.xs="100" fxFlex.sm="100" fxFlex.md="40" fxFlex.lg="1000" fxFlex.xl="40"> -->
|
||||
<mat-card class="p-2" fxFlex.lg="72.5%" fxFlex.xs="100" fxFlex.sm="70%" fxFlex.md="68%" fxFlex.xl="70%">
|
||||
<div fxLayout fxLayout="row" fxLayout.xs="column">
|
||||
<mat-card fxLayoutAlign="center center" class="box_card card_1" (click)="openDialog()" fxFlex.lg="25%" fxFlex.xs="50" fxFlex.sm="50%" fxFlex.md="25%" fxFlex.xl="25%">
|
||||
<div class="text-center">
|
||||
<i class="fa fa-university fa-3x"></i>
|
||||
<div class="d-inline-block mt-1">
|
||||
<h6 class="mt-0"><strong>Contribute to State School<br> Development Fund</strong></h6>
|
||||
</div>
|
||||
</div>
|
||||
</mat-card>
|
||||
<mat-card [routerLink]="['/knowledge-sharing']" fxLayoutAlign="center center" class="box_card card_2" fxFlex.lg="25%" fxFlex.xs="50" fxFlex.sm="50%" fxFlex.md="25%" fxFlex.xl="25%">
|
||||
<div class="text-center">
|
||||
<i class="fa fa-mobile fa-3x"></i>
|
||||
<div class="d-inline-block mt-1">
|
||||
<h6 class="mt-0"><strong>Contribute<br> Electronic Devices</strong></h6>
|
||||
</div>
|
||||
</div>
|
||||
</mat-card>
|
||||
<mat-card [routerLink]="['/knowledge-sharing']" fxLayoutAlign="center center" class="box_card card_3" fxFlex.lg="25%" fxFlex.xs="50" fxFlex.sm="50%" fxFlex.md="25%" fxFlex.xl="25%">
|
||||
<div class="text-center">
|
||||
<i class="fa fa-book fa-3x"></i>
|
||||
<div class="d-inline-block mt-1">
|
||||
<h6 class="mt-0"><strong>Contribute<br> Books</strong></h6>
|
||||
</div>
|
||||
</div>
|
||||
</mat-card>
|
||||
<mat-card [routerLink]="['/knowledge-sharing']" fxLayoutAlign="center center" class="box_card card_4" fxFlex.lg="25%" fxFlex.xs="50" fxFlex.sm="50%" fxFlex.md="25%" fxFlex.xl="25%">
|
||||
<div class="text-center">
|
||||
<i class="fa fa-child fa-3x"></i>
|
||||
<div class="d-inline-block mt-1">
|
||||
<h6 class="mt-0"><strong>Contribute<br> your Time</strong></h6>
|
||||
</div>
|
||||
</div>
|
||||
</mat-card>
|
||||
</div>
|
||||
|
||||
<!-- <div fxLayoutAlign="end">
|
||||
<button style="font-size: 13px;" mat-raised-button color="primary" (click)="openDialog()"></button>Contribute to
|
||||
State School Development Fund</button>
|
||||
</div> -->
|
||||
<!-- <div style="height: 60px;background-color: #4bb4cd;" *ngIf="dataStatus" fxLayoutAlign="start center">
|
||||
<mat-radio-group>
|
||||
<mat-radio-button value="2" (click)="openDialog()"><span style=" font-size: 1.25rem;">Contribute to
|
||||
State School Development Fund</span></mat-radio-button><br/>
|
||||
</mat-radio-group>
|
||||
</div> -->
|
||||
|
||||
<mat-card-title class="mb-1 mt-1">
|
||||
<div>
|
||||
|
||||
</div>
|
||||
<h5 class="mt-0 text-center">Contribute to Specific Need </h5></mat-card-title>
|
||||
<hr>
|
||||
<!--*********************-->
|
||||
<!-- [ngClass]="{'example-container mat-elevation-z8':clientWidth >= 500}" -->
|
||||
<div #table_element>
|
||||
@ -110,7 +221,7 @@
|
||||
<mat-row mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
|
||||
<!-- <tr mat-footer-row *matFooterRowDef="tableColumns"></tr> -->
|
||||
</mat-table>
|
||||
<div class="clearfix order-total" style="padding-bottom: 0px !important;">
|
||||
<!-- <div class="clearfix order-total" style="padding-bottom: 0px !important;">
|
||||
<div class="calculated-shipping" style="text-align: -webkit-right !important;">
|
||||
<table class="table-responsive" cellspacing="0" style="width: 50% !important;" *ngIf="dataStatus">
|
||||
<tr class="order-total" style="text-align: right;">
|
||||
@ -119,31 +230,29 @@
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div> -->
|
||||
<mat-paginator [pageSize]="pageSize" [pageSizeOptions]="[5, 10, 25, 50, 100]" showFirstLastButtons ></mat-paginator>
|
||||
<div style="text-align: center;" *ngIf="dataStatus" fxLayoutAlign="center">
|
||||
<!-- <div style="text-align: center;" *ngIf="dataStatus" fxLayoutAlign="center">
|
||||
<mat-label style=" font-size: 1.25rem;">I am happy to contribute</mat-label>
|
||||
<mat-radio-group [(ngModel)]="contribute_type" >
|
||||
<mat-radio-button value="2" ><span style=" font-size: 1.25rem;">Material</span></mat-radio-button><br/>
|
||||
<mat-radio-button value="1"><span style=" font-size: 1.25rem;">Funds</span></mat-radio-button>
|
||||
</mat-radio-group><br/>
|
||||
<!-- <mat-form-field appearance="outline" fxFlex="50" fxFlex.xs="100" class="select_cot_type">
|
||||
<mat-label style=" font-size: 1.25rem;">I am happy to contribute</mat-label>
|
||||
<mat-select color="secondary" placeholder="Select" [(ngModel)]="contribute_type" #username="ngModel">
|
||||
<mat-option value="2"><span style=" font-size: 1.25rem;">Materials</span></mat-option>
|
||||
<mat-option value="1"><span style=" font-size: 1.25rem;">Funds/Money</span></mat-option>
|
||||
</mat-select>
|
||||
<mat-error *ngIf="username.invalid && username.errors.required && (username.dirty || username.touched)">Contribute type is required</mat-error>
|
||||
</mat-form-field> -->
|
||||
</mat-radio-group><br/>
|
||||
</div>
|
||||
<div class="pt-1 pr-1" style="text-align: right;" *ngIf="dataStatus">
|
||||
|
||||
|
||||
<!-- <button mat-raised-button color="primary" (click)="finalSave(2)" class="mr-1 mb-1">I'd like to Contribute in Kind</button> -->
|
||||
<div class="pt-1 pr-1" style="text-align: right;" *ngIf="dataStatus">
|
||||
<button (click)="finalSave(contribute_type)" mat-raised-button style="background-color:rgb(69, 189, 189);color:white;font-weight: bold" >Submit</button>
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
<ng-template #status><h2>{{msg}}</h2></ng-template>
|
||||
<ngx-spinner
|
||||
bdOpacity = 0.9
|
||||
bdColor = "#fff"
|
||||
size = "medium"
|
||||
color = "#f44336ba"
|
||||
type = "square-jelly-box"
|
||||
[fullScreen] = "false">
|
||||
<p style="color: #111" > Fetching School Requirements... </p>
|
||||
</ngx-spinner>
|
||||
|
||||
<!--*********************-->
|
||||
<!-- <div class="clearfix order-total">
|
||||
@ -163,59 +272,7 @@
|
||||
</div> -->
|
||||
</mat-card>
|
||||
|
||||
<!-- <div fxFlex.xs="100" fxFlex.sm="100" fxFlex.md="40" fxFlex.lg="20" fxFlex.xl="40"> -->
|
||||
<mat-card class="support_mat sidescroll" fxFlex="27%" fxFlex.xs="25%" fxFlex.sm="25%">
|
||||
|
||||
<!-- <mat-card-header style="padding: 0;margin: 0;"> -->
|
||||
<!-- <mat-card-title> -->
|
||||
|
||||
<!--</mat-card-title> -->
|
||||
<!-- </mat-card-header> -->
|
||||
<mat-card-content>
|
||||
<p class="quote" style="margin-top:4px;text-align: center">”Alone we can do so little,<br> together we can do so much” <br/>- Hellen Keller</p>
|
||||
<h5 class="text-center"> Contribute to<br> State School Development Fund</h5>
|
||||
<div fxLayout="column" fxLayoutAlign="start stretch">
|
||||
|
||||
<!-- <div fxLayout fxLayout="row" fxLayout.xs="column" fxLayoutGap.xs="0"> -->
|
||||
<div class="text-center" fxFlex="100%" fxFlex.xs="100" fxFlex.sm="100" fxFlex.md="40" fxFlex.lg="100" fxFlex.xl="100">
|
||||
<mat-form-field appearance="outline" style="width: 70%;text-align: center;">
|
||||
<input matInput type="tel" OnlyNumber="true" placeholder="Amount in Rs." [(ngModel)]="general_devlop_amt" maxlength="10" (change)="dev_fund_change($event.target.value)" onkeypress="return event.charCode >= 48 && event.charCode <= 57">
|
||||
</mat-form-field>
|
||||
<!-- </div> -->
|
||||
</div>
|
||||
<!-- <mat-radio-button name="group1" class="pb-1" checked>State School Development Fund</mat-radio-button> -->
|
||||
<!--<mat-radio-button name="group1">District School Development Fund</mat-radio-button>
|
||||
<mat-form-field style="width: 100%" class="pl-1">
|
||||
<mat-select placeholder="Select District" >
|
||||
<mat-option>
|
||||
|
||||
</mat-option>
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
<mat-radio-button name="group1">School Development Fund</mat-radio-button>
|
||||
<mat-form-field style="width: 100%" class="pl-1">
|
||||
<mat-select placeholder="Select District" >
|
||||
<mat-option >
|
||||
|
||||
</mat-option>
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
<mat-form-field style="width: 100%" class="pl-1">
|
||||
<mat-select placeholder="Select School">
|
||||
<mat-option >
|
||||
|
||||
</mat-option>
|
||||
</mat-select>
|
||||
</mat-form-field> -->
|
||||
<mat-form-field dividerColor="warn" class="ml-xs mr-xs" style="width: 100%;" appearance="outline">
|
||||
<textarea matInput placeholder="Comments" rows="5" [(ngModel)]="gen_dev_fund_remarks"></textarea>
|
||||
</mat-form-field>
|
||||
<button mat-raised-button style="background-color:rgb(69, 189, 189);color:white" (click)="storeData_session()">Proceed to Contribute</button>
|
||||
<p class="quote">”We make a living by what we get.<br> But we make a life by what we give” <br/>- Winston Churchill</p>
|
||||
</div>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
<!-- </div> -->
|
||||
<!-- </div> -->
|
||||
</div>
|
||||
<footer class="footer">
|
||||
|
||||
@ -1,19 +1,125 @@
|
||||
.calculated-shipping[_ngcontent-gen-c13]{
|
||||
padding: 0px !important;
|
||||
}
|
||||
.large_view_top{
|
||||
margin-top:70px;
|
||||
}
|
||||
.largefont{
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
.text {
|
||||
width: 100px;
|
||||
transition: all 0.5s;
|
||||
cursor: pointer;
|
||||
}
|
||||
.text span {
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
transition: 0.5s;
|
||||
}
|
||||
|
||||
.text span:after {
|
||||
content: '\00bb';
|
||||
position: absolute;
|
||||
opacity: 0;
|
||||
top: 0;
|
||||
right: -20px;
|
||||
transition: 0.5s;
|
||||
}
|
||||
|
||||
.text:hover span {
|
||||
padding-right: 25px;
|
||||
}
|
||||
|
||||
.text:hover span:after {
|
||||
opacity: 1;
|
||||
right: 0;
|
||||
}
|
||||
.sidescroll{
|
||||
// right: 45px !important;
|
||||
height: fit-content;
|
||||
// height: fit-content;
|
||||
// position: fixed;
|
||||
z-index: 0;
|
||||
// z-index: 0;
|
||||
width: 97%;
|
||||
position: fixed;
|
||||
z-index: 2;
|
||||
top: 84px;
|
||||
bottom: auto;
|
||||
background-color: #f1605e3b;
|
||||
// box-shadow: 0 0 5px 1px rgba(0,0,0,.1);
|
||||
}
|
||||
@media(max-width:580px){
|
||||
.sidescroll{
|
||||
height: auto;
|
||||
position: unset;
|
||||
// right: -20px;
|
||||
|
||||
.total_card_1{
|
||||
background-color: #f1605e;
|
||||
padding: 10px 0px 10px 10px;
|
||||
border-radius: 10px 0px 0px 10px;
|
||||
}
|
||||
.total_card_2{
|
||||
background-color: #f1605e;
|
||||
padding: 10px 10px 10px 2px;
|
||||
border-radius: 0px 10px 10px 0px;
|
||||
}
|
||||
.box_card{
|
||||
height: 130px;
|
||||
color: #fff;
|
||||
border-radius: 10px;
|
||||
}
|
||||
.card_1{
|
||||
background-color:#4caf50bf;
|
||||
}
|
||||
.card_2{
|
||||
background-color:#ffa500d9;
|
||||
}
|
||||
.card_3{
|
||||
background-color:#f44336ba;
|
||||
}
|
||||
.card_4{
|
||||
background-color:#5ca6b0;
|
||||
}
|
||||
@media only screen and (min-width:960px){
|
||||
mat-header-row{
|
||||
|
||||
background-color: #f8f4f4;
|
||||
}
|
||||
mat-row{
|
||||
padding: 5px !important;
|
||||
// margin-bottom: 1rem !important;
|
||||
// height: 80px !important;
|
||||
// margin-top: 1rem !important;
|
||||
// border: 1px solid #d4bbbb !important;
|
||||
// background-color: #f8f4f4;
|
||||
// transition: transform 1.5s;
|
||||
}
|
||||
// mat-row:hover::after, mat-row:focus::after {
|
||||
// opacity: 1;
|
||||
// }
|
||||
// mat-row:hover, mat-row:focus {
|
||||
// // transform: scale3d(1.300, 1.300, 1);
|
||||
// border-radius: 5px;
|
||||
// box-shadow: 0 16px 38px -12px rgba(0, 0, 0, 0.56), 0 4px 25px 0 rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.2) !important;
|
||||
// }
|
||||
}
|
||||
@media only screen and(max-width:580px){
|
||||
// .mobileview{
|
||||
// margin-top: 106px;
|
||||
// }
|
||||
.mobfont{
|
||||
font-size: 12px;
|
||||
}
|
||||
.large_view_top{
|
||||
margin-top:130px;
|
||||
}
|
||||
|
||||
.mob_submit{
|
||||
line-height: 30px;
|
||||
padding: 0px;
|
||||
}
|
||||
// .sidescroll{
|
||||
// height: auto;
|
||||
// position: unset;
|
||||
// // right: -20px;
|
||||
|
||||
// }
|
||||
}
|
||||
a {
|
||||
text-decoration: underline;
|
||||
@ -76,7 +182,7 @@ a {
|
||||
.mat-table .mat-header-cell, mat-cell {
|
||||
border: none;
|
||||
// border-bottom: 1px solid #e9e9e9;
|
||||
padding: 12px 16px 12px 0;
|
||||
// padding: 12px 16px 12px 0;
|
||||
vertical-align: middle;
|
||||
|
||||
}
|
||||
@ -102,13 +208,13 @@ a {
|
||||
}
|
||||
|
||||
}
|
||||
@media(max-width:768px) {
|
||||
@media only screen and (max-width:768px) {
|
||||
.main-detail-product {
|
||||
padding: 0.3rem !important;
|
||||
}
|
||||
|
||||
}
|
||||
@media(max-width:580px){
|
||||
@media only screen and (max-width:580px){
|
||||
.product-thumbnail {
|
||||
display: none;
|
||||
}
|
||||
@ -167,7 +273,15 @@ a {
|
||||
text-align: center;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
@media (max-width: 992px) {
|
||||
.container {
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
height: 300px;
|
||||
overflow-x: auto;
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 960px) {
|
||||
.mat-table {
|
||||
border: 0;
|
||||
@ -259,7 +373,7 @@ a {
|
||||
width: 100% ;
|
||||
text-align: center;
|
||||
}
|
||||
@media(max-width:580px){
|
||||
@media only screen and (max-width:580px){
|
||||
.sponsor_input{
|
||||
width:30%;
|
||||
text-align: left;
|
||||
|
||||
@ -2,9 +2,13 @@ import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
|
||||
import { environment } from '../../../environments/environment';
|
||||
import { ApiService } from '../../shared/api.service';
|
||||
import { FormGroup, FormBuilder, FormControl, Validators, } from '@angular/forms';
|
||||
import { MatTableDataSource, MatPaginator, MatSort } from '@angular/material';
|
||||
import { MatTableDataSource, MatPaginator, MatSort, MatDialog, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material';
|
||||
import { Router } from '@angular/router';
|
||||
import { SchoolDetailsService } from 'app/shared/school-details.service';
|
||||
import { ContributeFundComponent } from './contribute-fund/contribute-fund.component';
|
||||
import { takeUntil } from 'rxjs/operators';
|
||||
import { Subject } from 'rxjs';
|
||||
import { NgxSpinnerService } from 'ngx-spinner';
|
||||
|
||||
|
||||
|
||||
@ -44,7 +48,12 @@ export class ContributeComponent implements OnInit {
|
||||
@ViewChild('table_element',{static:true}) table_element : ElementRef
|
||||
clientWidth: any;
|
||||
contribute_type:any='';
|
||||
constructor(public restApi:ApiService,public fb:FormBuilder,public router:Router,private apiService:ApiService,public schInfo:SchoolDetailsService) {
|
||||
districtData: any = [];
|
||||
protected _onDestroy = new Subject<void>();
|
||||
schoolData: any = [];
|
||||
categoryData: any = [];
|
||||
materialsData: any = [];
|
||||
constructor(private spinner: NgxSpinnerService,public dialog: MatDialog,public restApi:ApiService,public fb:FormBuilder,public router:Router,private apiService:ApiService,public schInfo:SchoolDetailsService) {
|
||||
// Create 100 users
|
||||
|
||||
}
|
||||
@ -90,7 +99,11 @@ export class ContributeComponent implements OnInit {
|
||||
schoold_id: new FormControl(''),
|
||||
district_id: new FormControl(''),
|
||||
cad_id: new FormControl(''),
|
||||
mat_id: new FormControl('')
|
||||
mat_id: new FormControl(''),
|
||||
districtSearch: new FormControl(''),
|
||||
schoolSearch: new FormControl(''),
|
||||
categorySearch: new FormControl(''),
|
||||
materialsSearch: new FormControl('')
|
||||
})
|
||||
}
|
||||
getFilterValue(value,option){
|
||||
@ -105,6 +118,7 @@ export class ContributeComponent implements OnInit {
|
||||
if(res['dataStatus'])
|
||||
{
|
||||
this.district = res['records'].filter(val=>val.district_name != null);
|
||||
this.districtData = this.district;
|
||||
}
|
||||
})
|
||||
break;
|
||||
@ -116,6 +130,7 @@ export class ContributeComponent implements OnInit {
|
||||
if(res['dataStatus'])
|
||||
{
|
||||
this.school = res['records'];
|
||||
this.schoolData = this.school;
|
||||
}
|
||||
})
|
||||
|
||||
@ -127,6 +142,7 @@ export class ContributeComponent implements OnInit {
|
||||
if(res['dataStatus'])
|
||||
{
|
||||
this.category = res['records'].filter(val=>val.cat_name != null);
|
||||
this.categoryData = this.category;
|
||||
}
|
||||
})
|
||||
break;
|
||||
@ -134,6 +150,7 @@ export class ContributeComponent implements OnInit {
|
||||
|
||||
this.material_category = this.category.filter(cate=>cate.cat_id==value)[0];
|
||||
console.log(this.material_category);
|
||||
this.materialsData = this.material_category.materials;
|
||||
break;
|
||||
}
|
||||
|
||||
@ -141,6 +158,8 @@ export class ContributeComponent implements OnInit {
|
||||
|
||||
getSchoolReqList()
|
||||
{
|
||||
this.spinner.show();
|
||||
|
||||
this.finalData=[]
|
||||
this.whole_contribute_list=[]
|
||||
this.Total=[]
|
||||
@ -194,6 +213,10 @@ export class ContributeComponent implements OnInit {
|
||||
this.pageSize = 0;
|
||||
this.msg = schDet.msg;
|
||||
}
|
||||
setTimeout(() => {
|
||||
/** spinner ends after 5 seconds */
|
||||
this.spinner.hide();
|
||||
});
|
||||
})
|
||||
}
|
||||
somethingChanged(e,i,item,mat_id,curr_data){
|
||||
@ -273,14 +296,14 @@ export class ContributeComponent implements OnInit {
|
||||
|
||||
|
||||
}
|
||||
dev_fund_change(value){
|
||||
if(value != ''){
|
||||
if(value<=0){
|
||||
alert('Given value is Invalid');
|
||||
this.general_devlop_amt=''
|
||||
}
|
||||
}
|
||||
}
|
||||
// dev_fund_change(value){
|
||||
// if(value != ''){
|
||||
// if(value<=0){
|
||||
// alert('Given value is Invalid');
|
||||
// this.general_devlop_amt=''
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
|
||||
getSchoolReqList2()
|
||||
{
|
||||
@ -457,5 +480,118 @@ export class ContributeComponent implements OnInit {
|
||||
window.location.reload();
|
||||
}
|
||||
|
||||
openDialog(): void {
|
||||
const dialogRef = this.dialog.open(ContributeFundComponent, {
|
||||
width: '600px',
|
||||
height: '600px',
|
||||
});
|
||||
dialogRef.afterClosed().subscribe(result => {
|
||||
console.log('The dialog was closed',result);
|
||||
this.gen_dev_fund_remarks=result.fund_remark;
|
||||
this.general_devlop_amt=result.fund_contribute;
|
||||
this.storeData_session();
|
||||
|
||||
});
|
||||
}
|
||||
|
||||
searchFun(control:any,option){
|
||||
console.log("control",control)
|
||||
if (option == 'district') {
|
||||
console.log(control)
|
||||
control.controls['districtSearch'].valueChanges
|
||||
.pipe(takeUntil(this._onDestroy))
|
||||
.subscribe(()=>{
|
||||
this.searchDistrict(control.controls['districtSearch'].value)
|
||||
})
|
||||
}
|
||||
if (option == 'school') {
|
||||
control.controls['schoolSearch'].valueChanges
|
||||
.pipe(takeUntil(this._onDestroy))
|
||||
.subscribe(() => {
|
||||
this.SearchSchool(control.controls['schoolSearch'].value);
|
||||
})
|
||||
}
|
||||
if (option == 'category') {
|
||||
// console.log("category")
|
||||
control.controls['categorySearch'].valueChanges
|
||||
.pipe(takeUntil(this._onDestroy))
|
||||
.subscribe(()=>{
|
||||
this.searchCategory(control.controls['categorySearch'].value)
|
||||
})
|
||||
}
|
||||
if (option == 'material_category') {
|
||||
// console.log("material_category")
|
||||
control.controls['materialsSearch'].valueChanges
|
||||
.pipe(takeUntil(this._onDestroy))
|
||||
.subscribe(()=>{
|
||||
this.searchmaterials(control.controls['materialsSearch'].value)
|
||||
})
|
||||
}
|
||||
}
|
||||
searchDistrict(val: any) {
|
||||
console.log("districtData")
|
||||
if (!this.districtData) {
|
||||
return
|
||||
}
|
||||
let searchVal = val
|
||||
if (!searchVal) {
|
||||
this.district=this.districtData.slice()
|
||||
return
|
||||
}
|
||||
else {
|
||||
searchVal = searchVal.toLowerCase()
|
||||
}
|
||||
this.district=this.districtData.filter(res => res.district_name.toLowerCase().indexOf(searchVal) > -1)
|
||||
|
||||
}
|
||||
SearchSchool(val: any) {
|
||||
console.log("schoolData")
|
||||
if (!this.schoolData) {
|
||||
return
|
||||
}
|
||||
let searchVal = val
|
||||
if (!searchVal) {
|
||||
this.school=this.schoolData.slice()
|
||||
return
|
||||
}
|
||||
else {
|
||||
searchVal = searchVal.toLowerCase()
|
||||
}
|
||||
this.school=this.schoolData.filter(res => res.school_name.toLowerCase().indexOf(searchVal) > -1)
|
||||
|
||||
}
|
||||
searchCategory(val: any) {
|
||||
console.log("categoryData")
|
||||
if (!this.categoryData) {
|
||||
return
|
||||
}
|
||||
let searchVal = val
|
||||
if (!searchVal) {
|
||||
this.category=this.categoryData.slice()
|
||||
return
|
||||
}
|
||||
else {
|
||||
searchVal = searchVal.toLowerCase()
|
||||
}
|
||||
this.category=this.categoryData.filter(res => res.cat_name.toLowerCase().indexOf(searchVal) > -1)
|
||||
|
||||
}
|
||||
searchmaterials(val: any) {
|
||||
console.log(this.materialsData)
|
||||
if (!this.materialsData) {
|
||||
return
|
||||
}
|
||||
let searchVal = val
|
||||
if (!searchVal) {
|
||||
this.material_category.materials=this.materialsData.slice()
|
||||
return
|
||||
}
|
||||
else {
|
||||
searchVal = searchVal.toLowerCase()
|
||||
}
|
||||
this.material_category.materials=this.materialsData.filter(res => res.material_name.toLowerCase().indexOf(searchVal) > -1)
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
@ -1,396 +1,485 @@
|
||||
<mat-card >
|
||||
<div fxLayout="row" fxLayout.xs="column" fxLayoutGap="20px" fxLayoutAlign.lg="center">
|
||||
<div fxFlex.xl="50" fxFlex.lg="45" fxFlex.md="50" fxFlex.sm="50" fxFlex.xs="100">
|
||||
<mat-card-header>
|
||||
<mat-card-title>
|
||||
<h4>About Knowledge Contribution</h4>
|
||||
</mat-card-title>
|
||||
</mat-card-header>
|
||||
<mat-card-content >
|
||||
<app-article-shrink>
|
||||
<article style="text-align: justify;">
|
||||
Knowledge is no longer a new concept to many businesses, partially due to the rise of the corporate portal as the latest must-have application. The portal has become synonymous with knowledge management. The problem is that technology by itself often doesn’t solve a company’s inherent problems with intellectual capital, knowledge and information management. Simply put, every solution takes people. Here, Pamela Holloway, a knowledge management practitioner and frequent speaker at KM events, suggests seven strategies for getting people to open up and share what they know
|
||||
|
||||
Is sharing a natural act? Traditional thinking holds that knowledge sharing is not a natural act. Many KM initiatives focus on how best to cajole unwilling participants into providing information. But how would it change things if we were to start from the premise that knowledge sharing really is a natural act? Just look around. People do it all the time - in the halls, over the phone, through e-mail, at the pub. How could anything that happens so frequently and easily not be a natural act? Perhaps it is our organizational structures that get in the way.
|
||||
|
||||
Take our school systems, for example. John Keeble, a colleague from Enterprise Oil in the UK, says, "Western society’s educational systems don’t condone knowledge sharing - they call it cheating." I think John is right. Most of us have been raised on the power of individual effort and encouraged to keep our mouths shut and our pens still. We have carried these values and belief systems into our businesses and incorporated them into our management styles.
|
||||
|
||||
Awareness is the first step to overcoming this reluctance. Understanding that we carry this baggage with us and recognizing the need to unlearn and rethink our models and paradigms is an essential skill.
|
||||
|
||||
Ultimately, it doesn’t matter whether knowledge sharing is natural or unnatural; it just matters that we do it. Resist the urge to overanalyze or overplan, and just get on with it. Perhaps the process of simply doing it (albeit with some regularity) ultimately makes it part of the culture.
|
||||
</article>
|
||||
</app-article-shrink>
|
||||
</mat-card-content>
|
||||
<mat-card>
|
||||
<div class="title-block about-w hero d-flex justify-content-center">
|
||||
<div class="hero-overlay"></div>
|
||||
<div class="relative d-flex justify-content-center h-100">
|
||||
<h3 class="quote align-self-center text-white text-center">
|
||||
”Every person has a longing to be significant;<br> to make a contribution;<br> to be a part of something noble and purposeful.”<br><br> - John C. Maxwell
|
||||
</h3>
|
||||
</div>
|
||||
</div>
|
||||
<div class="about-more pt-2 text-center">
|
||||
<div fxLayout="row wrap" fxLayoutAlign="center center">
|
||||
<div fxFlex.gt-sm="80" fxFlex.gt-xs="80" fxFlex="100" class="m-gap p-gap">
|
||||
<h5 class="quote_h align-self-center text-center">
|
||||
You can make a purposeful contribution to the improvement of Government Schools not only through monetary contribution, but also through contribution of Knowledge. As we are aware, knowledge can be provided through multiple means. Through this portal, you can choose one of the following three ways to contribute knowledge.
|
||||
</h5>
|
||||
<!-- <mat-card class="p-2 mb-2" style="background-color:#4bbdbd">
|
||||
<h2>About Knowledge Contribution</h2>
|
||||
</mat-card> -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pricing-table">
|
||||
<div fxLayout="row wrap" >
|
||||
<div fxFlex.xs="100" fxFlex.sm="50" fxFlex.md="50" fxFlex.lg="33.33" fxFlex.xl="33.33" class="m-gap p-gap">
|
||||
<div class="pricing-option p-2">
|
||||
<i class="fa fa-book fa-3x"></i>
|
||||
<h4>Contribute Books</h4>
|
||||
<hr />
|
||||
<p style="text-align: justify;">Since the invention of the written script, books have been a major way to store, to transmit and to preserve knowledge. You can use this option to contribute books to selected schools through which teachers can elucidate concepts to their students and through which students can develop their love for learning and reading. All you need to do is to list the Titles, Authors and the quantity of books you would like to contribute to open up the world of reading to the students of the selected school. The contact details of the school will be provided to you to deliver the books directly to the schools.</p>
|
||||
<!-- <hr />
|
||||
<div class="price">
|
||||
<div class="front">
|
||||
<span class="price">199 <b>$</b></span>
|
||||
</div>
|
||||
<div class="back">
|
||||
<a href="#" class="button">Purchase now</a>
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
</div>
|
||||
<div fxFlex.xs="100" fxFlex.sm="50" fxFlex.md="50" fxFlex.lg="33.33" fxFlex.xl="33.33" class="m-gap p-gap">
|
||||
<div class="pricing-option p-2">
|
||||
<i class="fa fa-mobile fa-3x"></i>
|
||||
<h4>Contribute Electronic Devices</h4>
|
||||
<hr />
|
||||
<p style="text-align: justify;">Computers, Tablets and Mobile phones have made the the acquisition of knowledge extremely accessible to anyone using it. As a student, learning through such devices is not only exciting and fun, but it is also an essential twenty first century skill to be able to work on electronic devices. If you would like to contribute electronic devices that can help bring the world to the fingertips of the students, please provide details of the devices by choosing this option. The contact details of the school will be provided to you to deliver the devices directly to the schools.</p>
|
||||
<!-- <hr />
|
||||
<div class="price">
|
||||
<div class="front">
|
||||
<span class="price">399 <b>$</b></span>
|
||||
</div>
|
||||
<div class="back">
|
||||
<a href="#" class="button">Purchase now</a>
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
</div>
|
||||
<div fxFlex.xs="100" fxFlex.sm="50" fxFlex.md="50" fxFlex.lg="33.33" fxFlex.xl="33.33" class="m-gap p-gap">
|
||||
<div class="pricing-option p-2">
|
||||
<i class="fa fa-child fa-3x"></i>
|
||||
<h4>Contribute your Time</h4>
|
||||
<hr />
|
||||
<p style="text-align: justify;">Do you have an expertise in a certain field that can help the students learn something new? Do you have a special skill or knowledge that you can teach to children? Do you want to support the school by filling in for a teacher who is unable to make it to class for emergency reasons? Choose to volunteer in a school of your choice. By providing the dates and times of your availability, you provide the School leader with an option to utilise your services for the chosen topic. The Headmaster / Headmistress of the school will get in touch with you once you have provided your details.</p>
|
||||
<!-- <hr />
|
||||
<div class="price">
|
||||
<div class="front">
|
||||
<span class="price">999 <b>$</b></span>
|
||||
</div>
|
||||
<div class="back">
|
||||
<a href="#" class="button">Purchase now</a>
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<mat-card class="p-2">
|
||||
<div fxLayout="row" fxLayout.xs="column" fxLayoutGap="20px" fxLayoutAlign.lg="center">
|
||||
<div fxFlex.xl="100" fxFlex.lg="100" fxFlex.md="100" fxFlex.sm="100" fxFlex.xs="100">
|
||||
<div class="title text-center">
|
||||
<h2 style="margin-top: 0px;">
|
||||
Knowledge Contribution
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<div fxFlex.xl="50" fxFlex.lg="50" fxFlex.md="50" fxFlex.sm="50" fxFlex.xs="100">
|
||||
<mat-card-header>
|
||||
<mat-card-title>
|
||||
<h4>Knowledge Contribution</h4>
|
||||
</mat-card-title>
|
||||
</mat-card-header>
|
||||
<mat-card-content padding >
|
||||
<form [formGroup]="KGForm">
|
||||
<div fxLayout="column" fxLayoutAlign="start stretch">
|
||||
<div fxLayout="row" fxLayoutAlign="center center" fxLayoutAlign="flex-start" fxLayoutGap="10px"
|
||||
fxLayout.xs="column">
|
||||
<mat-form-field fxFlex="50" fxFlex.sm="100" fxFlex.xs="100">
|
||||
<mat-select placeholder="Select District" formControlName="fk_district_id" (selectionChange)="getBlockByDistrict($event.value)">
|
||||
<mat-option *ngFor="let val of districtList" [value]="val.district_id">{{val.district_name}}
|
||||
</mat-option>
|
||||
</mat-select>
|
||||
<mat-error *ngIf="KGForm.controls['fk_district_id'].errors">District is Required</mat-error>
|
||||
</mat-form-field>
|
||||
<mat-form-field fxFlex="50" fxFlex.sm="100" fxFlex.xs="100" *ngIf="KGForm.value.fk_district_id != ''">
|
||||
<mat-select placeholder="Select Block" formControlName="fk_block_id" (selectionChange)="getSchoolsByBlock($event.value)">
|
||||
<mat-option *ngFor="let val of blockList" [value]="val.block_id">{{val.block_name}}
|
||||
</mat-option>
|
||||
</mat-select>
|
||||
<mat-error *ngIf="KGForm.controls['fk_block_id'].errors">Block is Required</mat-error>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<mat-form-field fxFlex="50" fxFlex.sm="100" fxFlex.xs="100" *ngIf="KGForm.value.fk_block_id != ''">
|
||||
<mat-select placeholder="Select School" formControlName="fk_school_id" (selectionChange)="getSchoolInfo($event.value)">
|
||||
<mat-option *ngFor="let val of schoolList" [value]="val.school_id">{{val.school_name}}
|
||||
</mat-option>
|
||||
</mat-select>
|
||||
<mat-error *ngIf="KGForm.controls['fk_school_id'].errors">School is Required</mat-error>
|
||||
</mat-form-field>
|
||||
<div *ngIf="schoolInfo.hasOwnProperty('teacher_name')" style="margin-bottom: 10px;">
|
||||
<mat-accordion>
|
||||
<mat-expansion-panel (opened)="true" [expanded]="true">
|
||||
<mat-expansion-panel-header>
|
||||
<mat-panel-title>
|
||||
School HM Contact Details
|
||||
</mat-panel-title>
|
||||
</mat-expansion-panel-header>
|
||||
<div fxLayout="row wrap" fxLayoutGap="20px grid" fxLayout.xs="column">
|
||||
<div fxLayout="row" fxLayoutGap="10px">
|
||||
<span >
|
||||
<mat-icon class="hm_icon">person_outline</mat-icon>
|
||||
</span>
|
||||
<span >
|
||||
<h6 class="hm_info">{{schoolInfo.teacher_name}}</h6>
|
||||
</span>
|
||||
</div>
|
||||
<div fxLayout="row" fxLayoutGap="10px">
|
||||
<span >
|
||||
<mat-icon class="hm_icon">local_post_office</mat-icon>
|
||||
</span>
|
||||
<span >
|
||||
<h6 class="hm_info">{{schoolInfo.email_id}}</h6>
|
||||
</span>
|
||||
</div>
|
||||
<div fxLayout="row" fxLayoutGap="10px">
|
||||
<span >
|
||||
<mat-icon class="hm_icon">phone_android</mat-icon>
|
||||
</span>
|
||||
<span >
|
||||
<h6 class="hm_info">{{schoolInfo.mbl_nmbr}}</h6>
|
||||
</span>
|
||||
</div>
|
||||
<div fxLayout="row" fxLayoutGap="10px">
|
||||
<!-- <mat-card-header>
|
||||
<mat-card-title>
|
||||
<h4>Knowledge Contribution</h4>
|
||||
</mat-card-title>
|
||||
</mat-card-header> -->
|
||||
<mat-card-content padding >
|
||||
<form [formGroup]="KGForm">
|
||||
<div fxLayout="column" fxLayoutAlign="start stretch">
|
||||
<div fxLayout="row" fxLayoutAlign="center center" fxLayoutAlign="flex-start" fxLayoutGap="10px"
|
||||
fxLayout.xs="column">
|
||||
<mat-form-field fxFlex="30" fxFlex.sm="100" fxFlex.xs="100">
|
||||
<mat-select placeholder="Select District" formControlName="fk_district_id" (selectionChange)="getBlockByDistrict($event.value)">
|
||||
<mat-option *ngFor="let val of districtList" [value]="val.district_id">{{val.district_name}}
|
||||
</mat-option>
|
||||
</mat-select>
|
||||
<mat-error *ngIf="KGForm.controls['fk_district_id'].errors">District is Required</mat-error>
|
||||
</mat-form-field>
|
||||
<mat-form-field fxFlex="30" fxFlex.sm="100" fxFlex.xs="100" *ngIf="KGForm.value.fk_district_id != ''">
|
||||
<mat-select placeholder="Select Block" formControlName="fk_block_id" (selectionChange)="getSchoolsByBlock($event.value)">
|
||||
<mat-option *ngFor="let val of blockList" [value]="val.block_id">{{val.block_name}}
|
||||
</mat-option>
|
||||
</mat-select>
|
||||
<mat-error *ngIf="KGForm.controls['fk_block_id'].errors">Block is Required</mat-error>
|
||||
</mat-form-field>
|
||||
<mat-form-field fxFlex="40" fxFlex.sm="100" fxFlex.xs="100" *ngIf="KGForm.value.fk_block_id != ''">
|
||||
<mat-select placeholder="Select School" formControlName="fk_school_id" (selectionChange)="getSchoolInfo($event.value)">
|
||||
<mat-option *ngFor="let val of schoolList" [value]="val.school_id">{{val.school_name}}
|
||||
</mat-option>
|
||||
</mat-select>
|
||||
<mat-error *ngIf="KGForm.controls['fk_school_id'].errors">School is Required</mat-error>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
|
||||
<div *ngIf="schoolInfo.hasOwnProperty('teacher_name')" style="margin-bottom: 10px;">
|
||||
<mat-accordion>
|
||||
<mat-expansion-panel (opened)="true" [expanded]="true">
|
||||
<mat-expansion-panel-header>
|
||||
<mat-panel-title>
|
||||
School HM Contact Details
|
||||
</mat-panel-title>
|
||||
</mat-expansion-panel-header>
|
||||
<div fxLayout="row wrap" fxLayoutGap="20px grid" fxLayout.xs="column">
|
||||
<div fxLayout="row" fxLayoutGap="10px">
|
||||
<span >
|
||||
<mat-icon class="hm_icon">my_location</mat-icon>
|
||||
<mat-icon class="hm_icon">person_outline</mat-icon>
|
||||
</span>
|
||||
<span >
|
||||
<h6 class="hm_info">{{schoolInfo.address}} - {{schoolInfo.pincode}}</h6>
|
||||
<h6 class="hm_info">{{schoolInfo.teacher_name}}</h6>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</mat-expansion-panel>
|
||||
</mat-accordion>
|
||||
</div>
|
||||
<div fxLayout="row" fxLayoutGap="10px">
|
||||
<span >
|
||||
<mat-icon class="hm_icon">local_post_office</mat-icon>
|
||||
</span>
|
||||
<span >
|
||||
<h6 class="hm_info">{{schoolInfo.email_id}}</h6>
|
||||
</span>
|
||||
</div>
|
||||
<div fxLayout="row" fxLayoutGap="10px">
|
||||
<span >
|
||||
<mat-icon class="hm_icon">phone_android</mat-icon>
|
||||
</span>
|
||||
<span >
|
||||
<h6 class="hm_info">{{schoolInfo.mbl_nmbr}}</h6>
|
||||
</span>
|
||||
</div>
|
||||
<div fxLayout="row" fxLayoutGap="10px">
|
||||
<span >
|
||||
<mat-icon class="hm_icon">my_location</mat-icon>
|
||||
</span>
|
||||
<span >
|
||||
<h6 class="hm_info">{{schoolInfo.address}} - {{schoolInfo.pincode}}</h6>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</mat-expansion-panel>
|
||||
</mat-accordion>
|
||||
</div>
|
||||
|
||||
<div fxLayout="row wrap" fxLayoutAlign="center center" fxLayoutAlign="flex-start" fxLayoutGap="10px"
|
||||
fxLayout.xs="column">
|
||||
|
||||
<div fxLayout="row wrap" fxLayoutAlign="center center" fxLayoutAlign="flex-start" fxLayoutGap="10px"
|
||||
fxLayout.xs="column">
|
||||
|
||||
<mat-form-field fxFlex="50" fxFlex.sm="40" fxFlex.xs="100">
|
||||
<input matInput placeholder="Name" type="text" name="name" formControlName="name" required>
|
||||
<mat-error *ngIf="KGForm.controls['name'].errors">Name is Required</mat-error>
|
||||
</mat-form-field>
|
||||
<mat-form-field fxFlex="40" fxFlex.sm="35" fxFlex.xs="100">
|
||||
<input matInput placeholder="E Mail" type="email" name="email" formControlName="email" required
|
||||
(change)="checkExists($event.target.value,'email')">
|
||||
<mat-error *ngIf="KGForm.controls['email'].hasError('required')">Email is required</mat-error>
|
||||
<mat-error *ngIf="KGForm.controls['email'].hasError('email')">Invalid Email</mat-error>
|
||||
<mat-error *ngIf="KGForm.controls['email'].hasError('email_compare')">Email & Confirm Email does not match</mat-error>
|
||||
</mat-form-field>
|
||||
<mat-form-field fxFlex="30" fxFlex.sm="40" fxFlex.xs="100">
|
||||
<input matInput placeholder="Name" type="text" name="name" formControlName="name" required>
|
||||
<mat-error *ngIf="KGForm.controls['name'].errors">Name is Required</mat-error>
|
||||
</mat-form-field>
|
||||
<mat-form-field fxFlex="30" fxFlex.sm="35" fxFlex.xs="100">
|
||||
<input matInput placeholder="E Mail" type="email" name="email" formControlName="email" required
|
||||
(change)="checkExists($event.target.value,'email')">
|
||||
<mat-error *ngIf="KGForm.controls['email'].hasError('required')">Email is required</mat-error>
|
||||
<mat-error *ngIf="KGForm.controls['email'].hasError('email')">Invalid Email</mat-error>
|
||||
<mat-error *ngIf="KGForm.controls['email'].hasError('email_compare')">Email & Confirm Email does not match</mat-error>
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field fxFlex="30" fxFlex.sm="40" fxFlex.xs="100">
|
||||
<input matInput placeholder="Confirm E Mail" type="email" name="email" formControlName="email_confirm" required>
|
||||
<mat-error *ngIf="KGForm.controls['email'].hasError('required')">Email is required</mat-error>
|
||||
<mat-error *ngIf="KGForm.controls['email'].hasError('email')">Invalid Email</mat-error>
|
||||
<mat-error *ngIf="KGForm.controls['email_confirm'].hasError('email_compare')">Email & Confirm Email does not match</mat-error>
|
||||
</mat-form-field>
|
||||
<mat-form-field fxFlex="30" fxFlex.sm="40" fxFlex.xs="100">
|
||||
<input matInput placeholder="Phone Number" type="number" name="mobile" inputmode="numeric" pattern="[0-9]*"
|
||||
OnlyNumber="true" formControlName="mobile" required min="10" max="12" minlength="10" maxlength="12" (change)="!is_newuser ? checkExists($event.target.value,'mobile') : updateCustomValidators()">
|
||||
<mat-error *ngIf="KGForm.controls['mobile'].hasError('required')">mobile number is required</mat-error>
|
||||
<mat-error *ngIf="KGForm.controls['mobile'].hasError('min')">minimum 10 digit required</mat-error>
|
||||
<mat-error *ngIf="KGForm.controls['mobile'].hasError('max')">maximum 12 digit is allowed</mat-error>
|
||||
</mat-form-field>
|
||||
<mat-form-field fxFlex="30" fxFlex.sm="40" fxFlex.xs="100">
|
||||
<input matInput placeholder="Confirm Phone Number" type="number" name="mobile" inputmode="numeric" pattern="[0-9]*"
|
||||
OnlyNumber="true" formControlName="mobile_confirm" required min="10" max="12" minlength="10" maxlength="12">
|
||||
<mat-error *ngIf="KGForm.controls['mobile_confirm'].hasError('required')">mobile number is required</mat-error>
|
||||
<mat-error *ngIf="KGForm.controls['mobile_confirm'].hasError('min')">minimum 10 digit required</mat-error>
|
||||
<mat-error *ngIf="KGForm.controls['mobile_confirm'].hasError('max')">maximum 12 digit is allowed</mat-error>
|
||||
<mat-error *ngIf="KGForm.controls['mobile_confirm'].hasError('mobile_compare')">Mobile & Confirm Mobile does not match</mat-error>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<div class="smallview">
|
||||
<br/>
|
||||
<mat-label>Contribution Type*</mat-label><br/>
|
||||
<mat-radio-group formControlName="con_type" (change)="onCont_typeChange($event.value)">
|
||||
<mat-radio-button *ngFor="let val of KG_contribute_types" [value]="val.id">{{val.name}}</mat-radio-button>
|
||||
</mat-radio-group>
|
||||
<br/>
|
||||
</div>
|
||||
<div fxLayout="row wrap" class="largeview">
|
||||
<h5>Contribution Type*</h5>
|
||||
<mat-radio-group formControlName="con_type" (change)="onCont_typeChange($event.value)">
|
||||
<div fxFlex.gt-xs="100" fxFlex.gt-sm="33.33" fxFlex="100" class="m-gap p-gap" class="relative overlay-w" style="margin: 5px;">
|
||||
<img src="assets/images/csr-img/book1.jpg" alt="">
|
||||
<div class="overlay-work absolute">
|
||||
<!-- <h2 class="mb-2">Omnis architecto sapiente</h2> -->
|
||||
<mat-radio-button class="link" [value]="1">Book</mat-radio-button>
|
||||
</div>
|
||||
</div>
|
||||
<div fxFlex.gt-sm="33.33" fxFlex.gt-xs="100" fxFlex="100" class="m-gap p-gap" class="relative overlay-w" style="margin: 5px;">
|
||||
<img src="assets/images/csr-img/book2.jpg" alt="">
|
||||
<div class="overlay-work absolute">
|
||||
<!-- <h2 class="mb-2">Omnis architecto sapiente</h2> -->
|
||||
<mat-radio-button class="link" [value]="2">Electronics</mat-radio-button>
|
||||
</div>
|
||||
</div>
|
||||
<div fxFlex.gt-sm="33.33" fxFlex.gt-xs="100" fxFlex="100" class="m-gap p-gap" class="relative overlay-w" style="margin: 5px;">
|
||||
<img src="assets/images/csr-img/book3.png" alt="">
|
||||
<div class="overlay-work absolute">
|
||||
<!-- <h2 class="mb-2">Omnis architecto sapiente</h2> -->
|
||||
<mat-radio-button class="link" [value]="3">Volunteer</mat-radio-button>
|
||||
</div>
|
||||
</div>
|
||||
</mat-radio-group>
|
||||
</div>
|
||||
<div *ngIf="KGForm.value.con_type == '2'">
|
||||
<br />
|
||||
<mat-label>Choose the Device Type*</mat-label><br />
|
||||
<mat-radio-group formControlName="con_sub_type">
|
||||
<mat-radio-button *ngFor="let val of KG_subCont_types" [value]="val.id">{{val.name}}</mat-radio-button>
|
||||
</mat-radio-group>
|
||||
<!-- <mat-error *ngIf="KGForm.controls['con_sub_type'].hasError('required')">Electronics type is Required</mat-error> -->
|
||||
<br /><br />
|
||||
<div fxLayout="row">
|
||||
<mat-form-field *ngIf="KGForm.value.con_sub_type == '3'" style="width:60%">
|
||||
<input matInput type="text" placeholder="Specify Electronic" formControlName="electric_other">
|
||||
<mat-error *ngIf="KGForm.controls['electric_other'].hasError('required')">Please Specify the Electronic</mat-error>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<div *ngIf="KGForm.value.con_sub_type != ''">
|
||||
<mat-card class="volunteer_info_class">
|
||||
<mat-card-header style="padding-top:0px;margin-top:0px">
|
||||
<mat-card-title style="padding-top:0px;margin-top:0px">
|
||||
<h5>Electronic Information</h5>
|
||||
</mat-card-title>
|
||||
<hr />
|
||||
</mat-card-header>
|
||||
|
||||
<div formArrayName="devices_info">
|
||||
<div *ngFor="let device of KGForm.controls.devices_info['controls'];let d_i=index,let d_l=last"
|
||||
[formGroupName]="d_i">
|
||||
<mat-card-subtitle style="padding-top:0;margin-top:0" ><h6 >Device Information {{d_i+1}}</h6></mat-card-subtitle>
|
||||
<hr/>
|
||||
<mat-card-content no-padding fxLayout="column">
|
||||
<div fxLayout="row" fxLayout.xs="column" fxLayoutGap="20px" fxLayoutGap.xs="0px">
|
||||
<mat-form-field fxFlex="50">
|
||||
<input matInput type="text" placeholder="Model" formControlName="model">
|
||||
<mat-error *ngIf="device.controls['model'].hasError('required')">Model is required</mat-error>
|
||||
</mat-form-field>
|
||||
<mat-form-field fxFlex="50">
|
||||
<input matInput type="text" placeholder="Serial No" formControlName="serial_no">
|
||||
<mat-error *ngIf="device.controls['serial_no'].hasError('required')">Serial No is required</mat-error>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<mat-form-field fxFlex="100">
|
||||
<input matInput type="text" placeholder="Accessories" formControlName="accessoris">
|
||||
<mat-error *ngIf="device.controls['accessoris'].hasError('required')">Accessories is required</mat-error>
|
||||
</mat-form-field>
|
||||
</mat-card-content>
|
||||
<mat-card-actions align="end">
|
||||
|
||||
<div fxLayout="row" fxLayoutGap="40px" >
|
||||
<div fxLayout="column" *ngIf="d_i > 0">
|
||||
<button mat-icon-button mat-mini-fab class="danger" color="red" aria-label="Add Device Info" (click)="removeDeviceInfo(d_i)">
|
||||
<mat-icon>delete</mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
<div fxLayout="column" *ngIf="d_l">
|
||||
<button matTooltip="Add Device Info" mat-icon-button mat-mini-fab style="background-color: rgb(39, 191, 211);" color="light" aria-label="Add Device Info" (click)="addMoreDeviceInfo(device,d_i)">
|
||||
<mat-icon>add</mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</mat-card-actions>
|
||||
</div>
|
||||
</div>
|
||||
</mat-card>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<mat-form-field fxFlex="30" fxFlex.sm="40" fxFlex.xs="100" *ngIf="is_newuser">
|
||||
<input matInput placeholder="Confirm E Mail" type="email" name="email" formControlName="email_confirm" required>
|
||||
<mat-error *ngIf="KGForm.controls['email'].hasError('required')">Email is required</mat-error>
|
||||
<mat-error *ngIf="KGForm.controls['email'].hasError('email')">Invalid Email</mat-error>
|
||||
<mat-error *ngIf="KGForm.controls['email_confirm'].hasError('email_compare')">Email & Confirm Email does not match</mat-error>
|
||||
</mat-form-field>
|
||||
<mat-form-field fxFlex="30" fxFlex.sm="40" fxFlex.xs="100">
|
||||
<input matInput placeholder="Phone Number" type="number" name="mobile" inputmode="numeric" pattern="[0-9]*"
|
||||
OnlyNumber="true" formControlName="mobile" required min="10" max="12" minlength="10" maxlength="12" (change)="!is_newuser ? checkExists($event.target.value,'mobile') : updateCustomValidators()">
|
||||
<mat-error *ngIf="KGForm.controls['mobile'].hasError('required')">mobile number is required</mat-error>
|
||||
<mat-error *ngIf="KGForm.controls['mobile'].hasError('min')">minimum 10 digit required</mat-error>
|
||||
<mat-error *ngIf="KGForm.controls['mobile'].hasError('max')">maximum 12 digit is allowed</mat-error>
|
||||
</mat-form-field>
|
||||
<mat-form-field fxFlex="30" fxFlex.sm="40" fxFlex.xs="100" *ngIf="is_newuser">
|
||||
<input matInput placeholder="Confirm Phone Number" type="number" name="mobile" inputmode="numeric" pattern="[0-9]*"
|
||||
OnlyNumber="true" formControlName="mobile_confirm" required min="10" max="12" minlength="10" maxlength="12">
|
||||
<mat-error *ngIf="KGForm.controls['mobile_confirm'].hasError('required')">mobile number is required</mat-error>
|
||||
<mat-error *ngIf="KGForm.controls['mobile_confirm'].hasError('min')">minimum 10 digit required</mat-error>
|
||||
<mat-error *ngIf="KGForm.controls['mobile_confirm'].hasError('max')">maximum 12 digit is allowed</mat-error>
|
||||
<mat-error *ngIf="KGForm.controls['mobile_confirm'].hasError('mobile_compare')">Mobile & Confirm Mobile does not match</mat-error>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<div>
|
||||
<br/>
|
||||
<mat-label>Contribution Type*</mat-label><br/>
|
||||
<mat-radio-group formControlName="con_type" (change)="onCont_typeChange($event.value)">
|
||||
<mat-radio-button *ngFor="let val of KG_contribute_types" [value]="val.id">{{val.name}}</mat-radio-button>
|
||||
</mat-radio-group>
|
||||
<!-- <mat-error *ngIf="KGForm.controls['con_type'].hasError('required')">Contribution type is Required</mat-error> -->
|
||||
<br/>
|
||||
</div>
|
||||
<div *ngIf="KGForm.value.con_type == '2'">
|
||||
<br />
|
||||
<mat-label>Choose the Device Type*</mat-label><br />
|
||||
<mat-radio-group formControlName="con_sub_type">
|
||||
<mat-radio-button *ngFor="let val of KG_subCont_types" [value]="val.id">{{val.name}}</mat-radio-button>
|
||||
</mat-radio-group>
|
||||
<!-- <mat-error *ngIf="KGForm.controls['con_sub_type'].hasError('required')">Electronics type is Required</mat-error> -->
|
||||
<br /><br />
|
||||
<div fxLayout="row">
|
||||
<mat-form-field *ngIf="KGForm.value.con_sub_type == '3'" style="width:60%">
|
||||
<input matInput type="text" placeholder="Specify Electronic" formControlName="electric_other">
|
||||
<mat-error *ngIf="KGForm.controls['electric_other'].hasError('required')">Please Specify the Electronic</mat-error>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<div *ngIf="KGForm.value.con_sub_type != ''">
|
||||
<mat-card class="volunteer_info_class">
|
||||
<mat-card-header style="padding-top:0px;margin-top:0px">
|
||||
<mat-card-title style="padding-top:0px;margin-top:0px">
|
||||
<h5>Electronic Information</h5>
|
||||
</mat-card-title>
|
||||
<hr />
|
||||
</mat-card-header>
|
||||
|
||||
<div formArrayName="devices_info">
|
||||
<div *ngFor="let device of KGForm.controls.devices_info['controls'];let d_i=index,let d_l=last"
|
||||
[formGroupName]="d_i">
|
||||
<mat-card-subtitle style="padding-top:0;margin-top:0" ><h6 >Device Information {{d_i+1}}</h6></mat-card-subtitle>
|
||||
<hr/>
|
||||
<mat-card-content no-padding fxLayout="column">
|
||||
<div fxLayout="row" fxLayout.xs="column" fxLayoutGap="20px" fxLayoutGap.xs="0px">
|
||||
<mat-form-field fxFlex="50">
|
||||
<input matInput type="text" placeholder="Model" formControlName="model">
|
||||
<mat-error *ngIf="device.controls['model'].hasError('required')">Model is required</mat-error>
|
||||
</mat-form-field>
|
||||
<mat-form-field fxFlex="50">
|
||||
<input matInput type="text" placeholder="Serial No" formControlName="serial_no">
|
||||
<mat-error *ngIf="device.controls['serial_no'].hasError('required')">Serial No is required</mat-error>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<mat-form-field fxFlex="100">
|
||||
<input matInput type="text" placeholder="Accessories" formControlName="accessoris">
|
||||
<mat-error *ngIf="device.controls['accessoris'].hasError('required')">Accessories is required</mat-error>
|
||||
</mat-form-field>
|
||||
</mat-card-content>
|
||||
<mat-card-actions align="end">
|
||||
|
||||
<div fxLayout="row" fxLayoutGap="40px" >
|
||||
<div fxLayout="column" *ngIf="d_i > 0">
|
||||
<button mat-icon-button mat-mini-fab class="danger" color="red" aria-label="Add Device Info" (click)="removeDeviceInfo(d_i)">
|
||||
<mat-icon>delete</mat-icon>
|
||||
</button>
|
||||
<div *ngIf="KGForm.value.con_type == '1' && KGForm.controls['books_info']">
|
||||
<mat-card class="volunteer_info_class">
|
||||
<mat-card-header style="padding-top:0px;margin-top:0px">
|
||||
<mat-card-title style="padding-top:0px;margin-top:0px">
|
||||
<h5>Books Information</h5>
|
||||
</mat-card-title>
|
||||
<hr />
|
||||
</mat-card-header>
|
||||
|
||||
<div formArrayName="books_info">
|
||||
<div *ngFor="let book_det of KGForm.controls.books_info['controls'];let b_i=index,let b_l=last"
|
||||
[formGroupName]="b_i">
|
||||
<mat-card-subtitle style="padding-top:0;margin-top:0">
|
||||
<h6>Book Information {{b_i+1}}</h6>
|
||||
</mat-card-subtitle>
|
||||
<hr />
|
||||
<mat-card-content no-padding fxLayout="column">
|
||||
<div fxLayout="row" fxLayout.xs="column" fxLayoutGap="20px" fxLayoutGap.xs="0px">
|
||||
<mat-form-field fxFlex="50">
|
||||
<input matInput type="text" placeholder="Book Name" formControlName="book">
|
||||
<mat-error *ngIf="book_det.controls['book'].hasError('required')">Book Name is required</mat-error>
|
||||
</mat-form-field>
|
||||
<mat-form-field fxFlex="50">
|
||||
<input matInput type="text" placeholder="Author" formControlName="author">
|
||||
<mat-error *ngIf="book_det.controls['author'].hasError('required')">Author is required</mat-error>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<div fxLayout="column" *ngIf="d_l">
|
||||
<button matTooltip="Add Device Info" mat-icon-button mat-mini-fab style="background-color: rgb(39, 191, 211);" color="light" aria-label="Add Device Info" (click)="addMoreDeviceInfo(device,d_i)">
|
||||
<mat-icon>add</mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</mat-card-actions>
|
||||
</div>
|
||||
</div>
|
||||
</mat-card>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div *ngIf="KGForm.value.con_type == '1' && KGForm.controls['books_info']">
|
||||
<mat-card class="volunteer_info_class">
|
||||
<mat-card-header style="padding-top:0px;margin-top:0px">
|
||||
<mat-card-title style="padding-top:0px;margin-top:0px">
|
||||
<h5>Books Information</h5>
|
||||
</mat-card-title>
|
||||
<hr />
|
||||
</mat-card-header>
|
||||
|
||||
<div formArrayName="books_info">
|
||||
<div *ngFor="let book_det of KGForm.controls.books_info['controls'];let b_i=index,let b_l=last"
|
||||
[formGroupName]="b_i">
|
||||
<mat-card-subtitle style="padding-top:0;margin-top:0">
|
||||
<h6>Book Information {{b_i+1}}</h6>
|
||||
</mat-card-subtitle>
|
||||
<hr />
|
||||
<mat-card-content no-padding fxLayout="column">
|
||||
<div fxLayout="row" fxLayout.xs="column" fxLayoutGap="20px" fxLayoutGap.xs="0px">
|
||||
<mat-form-field fxFlex="50">
|
||||
<input matInput type="text" placeholder="Book Name" formControlName="book">
|
||||
<mat-error *ngIf="book_det.controls['book'].hasError('required')">Book Name is required</mat-error>
|
||||
</mat-form-field>
|
||||
<mat-form-field fxFlex="50">
|
||||
<input matInput type="text" placeholder="Author" formControlName="author">
|
||||
<mat-error *ngIf="book_det.controls['author'].hasError('required')">Author is required</mat-error>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<mat-form-field fxLayout="row" fxLayout.xs="column" fxFlex="40">
|
||||
<input matInput type="tel" placeholder="Quantity" formControlName="qty">
|
||||
<mat-error *ngIf="book_det.controls['qty'].hasError('required')">Quantity is required</mat-error>
|
||||
<mat-error *ngIf="book_det.controls['qty'].hasError('pattern')">Invalid Quantity</mat-error>
|
||||
</mat-form-field>
|
||||
</mat-card-content>
|
||||
<mat-card-actions align="end">
|
||||
|
||||
<div fxLayout="row" fxLayoutGap="40px">
|
||||
<div fxLayout="column" *ngIf="b_i > 0">
|
||||
<button mat-icon-button mat-mini-fab class="danger" color="red" aria-label="Add Book Info"
|
||||
(click)="removeBookInfo(b_i)">
|
||||
<mat-icon>delete</mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
<div fxLayout="column" *ngIf="b_l">
|
||||
<button matTooltip="Add Book Info" mat-icon-button mat-mini-fab
|
||||
style="background-color: rgb(39, 191, 211);" color="light" aria-label="Add Book Info"
|
||||
(click)="addMoreBookInfo(book_det,b_i)">
|
||||
<mat-icon>add</mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</mat-card-actions>
|
||||
</div>
|
||||
</div>
|
||||
</mat-card>
|
||||
</div>
|
||||
|
||||
<div *ngIf="KGForm.value.con_type == '1' || KGForm.value.con_type == '2'">
|
||||
<mat-form-field style="width: 100%">
|
||||
<mat-label *ngIf="KGForm.value.con_type == '1'">Please share the details of the books you would like to contribute</mat-label>
|
||||
<mat-label *ngIf="KGForm.value.con_type == '2'">Kindly ensure the devices are in working condition with all needed accessories. Please share their details.</mat-label>
|
||||
<textarea matInput placeholder="Details" type="text" formControlName="description"></textarea>
|
||||
|
||||
</mat-form-field>
|
||||
</div>
|
||||
|
||||
<div *ngIf="KGForm.value.con_type == '3'">
|
||||
<mat-card class="volunteer_info_class">
|
||||
<mat-card-header style="padding-top:0px;margin-top:0px" >
|
||||
<mat-card-title style="padding-top:0px;margin-top:0px"><h5 >Volunteer Information</h5></mat-card-title>
|
||||
<hr/>
|
||||
</mat-card-header>
|
||||
|
||||
<div formArrayName="volunteer_info">
|
||||
<div *ngFor="let volunteer of KGForm.controls.volunteer_info['controls'];let v_i=index,let v_l=last" [formGroupName]="v_i">
|
||||
<!-- <mat-card-subtitle style="padding-top:0;margin-top:0" ><h6 >Volunteer Information {{v_i+1}}</h6></mat-card-subtitle> -->
|
||||
<!-- <hr/> -->
|
||||
<mat-card-content no-padding fxLayout="column">
|
||||
|
||||
<mat-label style="font-weight: bold">Availability Details</mat-label>
|
||||
<br/>
|
||||
<mat-label>Date</mat-label><br/>
|
||||
<div fxLayout="row" fxLayout.xs="column">
|
||||
<mat-form-field fxFlex="50" fxFlex.xs="50">
|
||||
<input matInput [matDatepicker]="picker" [min]="maxDate" placeholder="From" formControlName="date_from" readonly required>
|
||||
<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
|
||||
<mat-datepicker #picker></mat-datepicker>
|
||||
<mat-error *ngIf="volunteer.controls['date_from'].hasError('required')">From Date is Required</mat-error>
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field fxFlex="50" fxFlex.xs="50">
|
||||
<input matInput [matDatepicker]="date_to" [min]="volunteer.get('date_from').value" placeholder="To" formControlName="date_to" readonly (click)="date_to" required>
|
||||
<mat-datepicker-toggle matSuffix [for]="date_to"></mat-datepicker-toggle>
|
||||
<mat-datepicker #date_to></mat-datepicker>
|
||||
<mat-error *ngIf="volunteer.controls['date_from'].hasError('required')">To Date is Required</mat-error>
|
||||
</mat-form-field>
|
||||
</div><br/>
|
||||
<mat-label>Time</mat-label><br>
|
||||
<div fxLayout="row" fxLayout.xs="column">
|
||||
<mat-form-field fxFlex="50" fxFlex.xs="50">
|
||||
<input matInput [owlDateTime]="dt1" [owlDateTimeTrigger]="dt1" placeholder="From" formControlName="time_from" readonly required>
|
||||
<span style="
|
||||
justify-content: flex-end;
|
||||
position: absolute;
|
||||
cursor: pointer;
|
||||
right: 1px;" [owlDateTimeTrigger]="dt1"><mat-icon style="font-size: 18px;color: darkslategray;">access_time</mat-icon></span>
|
||||
<owl-date-time [pickerType]="'timer'" #dt1></owl-date-time>
|
||||
<mat-error *ngIf="volunteer.controls['time_from'].hasError('required')">From Time is Required</mat-error>
|
||||
</mat-form-field>
|
||||
<mat-form-field fxFlex="50" fxFlex.xs="50">
|
||||
<input matInput [owlDateTime]="dt2" [min]="volunteer.get('time_from').value" [owlDateTimeTrigger]="dt2" placeholder="To" formControlName="time_to" readonly required>
|
||||
<span style="
|
||||
justify-content: flex-end;
|
||||
position: absolute;
|
||||
cursor: pointer;
|
||||
right: 1px;" [owlDateTimeTrigger]="dt2"><mat-icon style="font-size: 18px;color: darkslategray;">access_time</mat-icon></span>
|
||||
<owl-date-time [pickerType]="'timer'" #dt2></owl-date-time>
|
||||
<mat-error *ngIf="volunteer.controls['time_from'].hasError('required')">To Time is Required</mat-error>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<div fxLayout="row" fxLayout.xs="column" fxLayoutGap.lg="20px">
|
||||
<mat-form-field [fxFlex]="(volunteer.value.subject).includes('0') ? '40' : '100' " fxFlex.xs="100">
|
||||
<mat-select placeholder="Subject" formControlName="subject" multiple>
|
||||
<mat-option *ngFor="let val of subjectList" [value]="val.id">{{val.subjects}}</mat-option>
|
||||
</mat-select>
|
||||
<mat-error *ngIf="volunteer.controls['subject'].hasError('required')">Subject is Required</mat-error>
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field fxFlex="55" *ngIf="(volunteer.value.subject).includes('0')">
|
||||
<input matInput type="text" placeholder="Specity the Subject" formControlName="subject_others">
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<mat-form-field style="width: 100%">
|
||||
<mat-label>Kindly give details about your expertise / areas of interest, experience and your availability for volunteering.</mat-label>
|
||||
<textarea matInput placeholder="Details" type="text" formControlName="kt_type_desc"></textarea>
|
||||
</mat-form-field>
|
||||
|
||||
<!-- <mat-form-field appearance="outline" style="width: 100%"> -->
|
||||
<!-- <input [ngxTimepicker]="picker">
|
||||
<ngx-material-timepicker #picker></ngx-material-timepicker> -->
|
||||
|
||||
<!-- </mat-form-field> -->
|
||||
<!-- <material-timepicker color="primary" label="Hour 4" appearance="outline" [userTime]="exportTime">
|
||||
|
||||
</material-timepicker> -->
|
||||
|
||||
|
||||
<mat-form-field fxLayout="row" fxLayout.xs="column" fxFlex="40">
|
||||
<input matInput type="tel" placeholder="Quantity" formControlName="qty">
|
||||
<mat-error *ngIf="book_det.controls['qty'].hasError('required')">Quantity is required</mat-error>
|
||||
<mat-error *ngIf="book_det.controls['qty'].hasError('pattern')">Invalid Quantity</mat-error>
|
||||
</mat-form-field>
|
||||
</mat-card-content>
|
||||
<!-- <mat-card-actions align="end">
|
||||
|
||||
<div fxLayout="row" fxLayoutGap="40px" >
|
||||
<div fxLayout="column" *ngIf="v_i > 0">
|
||||
<button mat-icon-button mat-mini-fab class="danger" color="red" aria-label="Add Volunteer Info" (click)="removeVolunteerInfo(v_i)">
|
||||
<mat-icon>delete</mat-icon>
|
||||
</button>
|
||||
<mat-card-actions align="end">
|
||||
|
||||
<div fxLayout="row" fxLayoutGap="40px">
|
||||
<div fxLayout="column" *ngIf="b_i > 0">
|
||||
<button mat-icon-button mat-mini-fab class="danger" color="red" aria-label="Add Book Info"
|
||||
(click)="removeBookInfo(b_i)">
|
||||
<mat-icon>delete</mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
<div fxLayout="column" *ngIf="b_l">
|
||||
<button matTooltip="Add Book Info" mat-icon-button mat-mini-fab
|
||||
style="background-color: rgb(39, 191, 211);" color="light" aria-label="Add Book Info"
|
||||
(click)="addMoreBookInfo(book_det,b_i)">
|
||||
<mat-icon>add</mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div fxLayout="column" *ngIf="v_l">
|
||||
<button matTooltip="Add Volunteer Info" mat-icon-button mat-mini-fab style="background-color: rgb(39, 191, 211);" color="light" aria-label="Add Volunteer Info" (click)="addmoreVolunteerInfo(volunteer,v_i)">
|
||||
<mat-icon>add</mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</mat-card-actions> -->
|
||||
</div>
|
||||
</mat-card-actions>
|
||||
</div>
|
||||
</div>
|
||||
</mat-card>
|
||||
</div>
|
||||
</mat-card>
|
||||
|
||||
<div *ngIf="KGForm.value.con_type == '1' || KGForm.value.con_type == '2'">
|
||||
<mat-form-field style="width: 100%">
|
||||
<mat-label *ngIf="KGForm.value.con_type == '1'">Please share the details of the books you would like to contribute</mat-label>
|
||||
<mat-label *ngIf="KGForm.value.con_type == '2'">Kindly ensure the devices are in working condition with all needed accessories. Please share their details.</mat-label>
|
||||
<textarea matInput placeholder="Details" type="text" formControlName="description"></textarea>
|
||||
|
||||
</mat-form-field>
|
||||
</div>
|
||||
|
||||
<div *ngIf="KGForm.value.con_type == '3'">
|
||||
<mat-card class="volunteer_info_class">
|
||||
<mat-card-header style="padding-top:0px;margin-top:0px" >
|
||||
<mat-card-title style="padding-top:0px;margin-top:0px"><h5 >Volunteer Information</h5></mat-card-title>
|
||||
<hr/>
|
||||
</mat-card-header>
|
||||
|
||||
<div formArrayName="volunteer_info">
|
||||
<div *ngFor="let volunteer of KGForm.controls.volunteer_info['controls'];let v_i=index,let v_l=last" [formGroupName]="v_i">
|
||||
<!-- <mat-card-subtitle style="padding-top:0;margin-top:0" ><h6 >Volunteer Information {{v_i+1}}</h6></mat-card-subtitle> -->
|
||||
<!-- <hr/> -->
|
||||
<mat-card-content no-padding fxLayout="column">
|
||||
|
||||
<mat-label style="font-weight: bold">Availability Details</mat-label>
|
||||
<br/>
|
||||
<mat-label>Date</mat-label><br/>
|
||||
<div fxLayout="row" fxLayout.xs="column">
|
||||
<mat-form-field fxFlex="50" fxFlex.xs="50">
|
||||
<input matInput [matDatepicker]="picker" [min]="maxDate" placeholder="From" formControlName="date_from" readonly required>
|
||||
<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
|
||||
<mat-datepicker #picker></mat-datepicker>
|
||||
<mat-error *ngIf="volunteer.controls['date_from'].hasError('required')">From Date is Required</mat-error>
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field fxFlex="50" fxFlex.xs="50">
|
||||
<input matInput [matDatepicker]="date_to" [min]="volunteer.get('date_from').value" placeholder="To" formControlName="date_to" readonly (click)="date_to" required>
|
||||
<mat-datepicker-toggle matSuffix [for]="date_to"></mat-datepicker-toggle>
|
||||
<mat-datepicker #date_to></mat-datepicker>
|
||||
<mat-error *ngIf="volunteer.controls['date_from'].hasError('required')">To Date is Required</mat-error>
|
||||
</mat-form-field>
|
||||
</div><br/>
|
||||
<mat-label>Time</mat-label><br>
|
||||
<div fxLayout="row" fxLayout.xs="column">
|
||||
<mat-form-field fxFlex="50" fxFlex.xs="50">
|
||||
<input matInput [owlDateTime]="dt1" [owlDateTimeTrigger]="dt1" placeholder="From" formControlName="time_from" readonly required>
|
||||
<span style="
|
||||
justify-content: flex-end;
|
||||
position: absolute;
|
||||
cursor: pointer;
|
||||
right: 1px;" [owlDateTimeTrigger]="dt1"><mat-icon style="font-size: 18px;color: darkslategray;">access_time</mat-icon></span>
|
||||
<owl-date-time [pickerType]="'timer'" #dt1></owl-date-time>
|
||||
<mat-error *ngIf="volunteer.controls['time_from'].hasError('required')">From Time is Required</mat-error>
|
||||
</mat-form-field>
|
||||
<mat-form-field fxFlex="50" fxFlex.xs="50">
|
||||
<input matInput [owlDateTime]="dt2" [min]="volunteer.get('time_from').value" [owlDateTimeTrigger]="dt2" placeholder="To" formControlName="time_to" readonly required>
|
||||
<span style="
|
||||
justify-content: flex-end;
|
||||
position: absolute;
|
||||
cursor: pointer;
|
||||
right: 1px;" [owlDateTimeTrigger]="dt2"><mat-icon style="font-size: 18px;color: darkslategray;">access_time</mat-icon></span>
|
||||
<owl-date-time [pickerType]="'timer'" #dt2></owl-date-time>
|
||||
<mat-error *ngIf="volunteer.controls['time_from'].hasError('required')">To Time is Required</mat-error>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<div fxLayout="row" fxLayout.xs="column" fxLayoutGap.lg="20px">
|
||||
<mat-form-field [fxFlex]="(volunteer.value.subject).includes('0') ? '40' : '100' " fxFlex.xs="100">
|
||||
<mat-select placeholder="Subject" formControlName="subject" multiple>
|
||||
<mat-option *ngFor="let val of subjectList" [value]="val.id">{{val.subjects}}</mat-option>
|
||||
</mat-select>
|
||||
<mat-error *ngIf="volunteer.controls['subject'].hasError('required')">Subject is Required</mat-error>
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field fxFlex="55" *ngIf="(volunteer.value.subject).includes('0')">
|
||||
<input matInput type="text" placeholder="Specity the Subject" formControlName="subject_others">
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<mat-form-field style="width: 100%">
|
||||
<mat-label>Kindly give details about your expertise / areas of interest, experience and your availability for volunteering.</mat-label>
|
||||
<textarea matInput placeholder="Details" type="text" formControlName="kt_type_desc"></textarea>
|
||||
</mat-form-field>
|
||||
|
||||
<!-- <mat-form-field appearance="outline" style="width: 100%"> -->
|
||||
<!-- <input [ngxTimepicker]="picker">
|
||||
<ngx-material-timepicker #picker></ngx-material-timepicker> -->
|
||||
|
||||
<!-- </mat-form-field> -->
|
||||
<!-- <material-timepicker color="primary" label="Hour 4" appearance="outline" [userTime]="exportTime">
|
||||
|
||||
</material-timepicker> -->
|
||||
|
||||
|
||||
</mat-card-content>
|
||||
<!-- <mat-card-actions align="end">
|
||||
|
||||
<div fxLayout="row" fxLayoutGap="40px" >
|
||||
<div fxLayout="column" *ngIf="v_i > 0">
|
||||
<button mat-icon-button mat-mini-fab class="danger" color="red" aria-label="Add Volunteer Info" (click)="removeVolunteerInfo(v_i)">
|
||||
<mat-icon>delete</mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
<div fxLayout="column" *ngIf="v_l">
|
||||
<button matTooltip="Add Volunteer Info" mat-icon-button mat-mini-fab style="background-color: rgb(39, 191, 211);" color="light" aria-label="Add Volunteer Info" (click)="addmoreVolunteerInfo(volunteer,v_i)">
|
||||
<mat-icon>add</mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</mat-card-actions> -->
|
||||
</div>
|
||||
</div>
|
||||
</mat-card>
|
||||
</div>
|
||||
<br/>
|
||||
<!-- </mat-form-field> -->
|
||||
<mat-card-actions style="justify-content: flex-end">
|
||||
<button align="end" fxFlex="20" mat-stroked-button color="light" class="button-cyan" (click)="onSubmit()">Submit</button>
|
||||
</mat-card-actions>
|
||||
</div>
|
||||
<br/>
|
||||
<!-- </mat-form-field> -->
|
||||
<mat-card-actions style="justify-content: flex-end">
|
||||
<button align="end" fxFlex="20" mat-stroked-button color="light" class="button-cyan" (click)="onSubmit()">Submit</button>
|
||||
</mat-card-actions>
|
||||
</div>
|
||||
</form>
|
||||
</mat-card-content>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</mat-card>
|
||||
</form>
|
||||
</mat-card-content>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</mat-card>
|
||||
</mat-card>
|
||||
<!--******************************************************************************************************************************************-->
|
||||
|
||||
|
||||
<footer class="footer">
|
||||
<h5>Ⓒ TN Schools, All rights reserved |<span class="footer-web"><a class="footer-privacy" href="#/privacy-policy" target="_blank">Privacy Policy</a></span></h5>
|
||||
</footer>
|
||||
|
||||
@ -5,6 +5,21 @@
|
||||
white-space: pre-line;
|
||||
border-radius: 10px;
|
||||
}
|
||||
.quote{
|
||||
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
||||
// font-size: 16px;
|
||||
// color:gray;
|
||||
text-align: center;
|
||||
font-style: italic;
|
||||
}
|
||||
.quote_h{
|
||||
text-align: justify;
|
||||
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
||||
// font-size: 16px;
|
||||
color:gray;
|
||||
text-align: center;
|
||||
font-style: italic;
|
||||
}
|
||||
.volunteer_info_class{
|
||||
// margin: 0px;
|
||||
box-shadow: 2px 2px 2px #888888;
|
||||
@ -67,5 +82,434 @@
|
||||
white-space: pre-wrap;
|
||||
word-wrap:break-word;
|
||||
// white-space: pre;
|
||||
}
|
||||
}
|
||||
.smallview{
|
||||
display: block;
|
||||
}
|
||||
.largeview{
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
@media(min-width:581px){
|
||||
.smallview{
|
||||
display: none;
|
||||
}
|
||||
.largeview{
|
||||
display: block !important;
|
||||
}
|
||||
}
|
||||
//************************************************************************************************8
|
||||
//colors
|
||||
$color_ship_gray_80_approx: rgba(60, 59, 63, 0.8);
|
||||
$color_gossamer_70_approx: rgba(0, 150, 136, 0.7);
|
||||
$white: #fff;
|
||||
$color_mountain_mist_approx: #999;
|
||||
$black_10: rgba(0, 0, 0, 0.1);
|
||||
$black_75: rgba(0, 0, 0, 0.75);
|
||||
$color_atlantis_approx: inherit;
|
||||
$color_hippie_green_approx: inherit;
|
||||
$color_monza_approx: #bc0213;
|
||||
$color_rice_cake_approx: #fffdf0;
|
||||
$color_matisse_approx: #155b9d;
|
||||
$color_curious_blue_approx: #1a9ec4;
|
||||
$color_alizarin_crimson_approx: #e11a30;
|
||||
$color_astral_approx: #3f7aa3;
|
||||
//urls
|
||||
$url_0: url(assets/images/csr-img/education_learning.jpg);
|
||||
.about-w {
|
||||
background-image: $url_0;
|
||||
height: 58vh;
|
||||
}
|
||||
|
||||
.hero {
|
||||
position: relative;
|
||||
.hero-overlay {
|
||||
background-color: $color_ship_gray_80_approx;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.mat-center {
|
||||
float: none;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
img {
|
||||
height: auto;
|
||||
max-width: 100%;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.about-more {
|
||||
h2 {
|
||||
line-height: 1.3;
|
||||
font-weight: 600;
|
||||
}
|
||||
p {
|
||||
line-height: 1.7;
|
||||
}
|
||||
}
|
||||
|
||||
.overlay-w {
|
||||
position: relative;
|
||||
&:hover .overlay-work {
|
||||
opacity: 1;
|
||||
//Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy)
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
.overlay-work {
|
||||
text-align: center;
|
||||
background-color: $color_gossamer_70_approx;
|
||||
bottom: 0;
|
||||
color: $white;
|
||||
left: 0;
|
||||
padding: 1rem;
|
||||
right: 0;
|
||||
position: absolute;
|
||||
//Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy)
|
||||
transform: scale(0);
|
||||
top: 0;
|
||||
opacity: 0;
|
||||
//Instead of the line below you could use @include transition($transition-1, $transition-2, $transition-3, $transition-4, $transition-5, $transition-6, $transition-7, $transition-8, $transition-9, $transition-10)
|
||||
transition: all 0.3s ease-in-out 0s;
|
||||
}
|
||||
|
||||
.team {
|
||||
padding: 75px 0;
|
||||
}
|
||||
|
||||
.profile-wrp {
|
||||
margin-top: 25px;
|
||||
background: $white;
|
||||
h1 {
|
||||
font-weight: normal;
|
||||
font-size: 20px;
|
||||
margin: 10px 0 0;
|
||||
}
|
||||
h2 {
|
||||
font-size: 14px;
|
||||
font-weight: lighter;
|
||||
margin-top: 5px;
|
||||
}
|
||||
.img-box {
|
||||
opacity: 1;
|
||||
display: block;
|
||||
position: relative;
|
||||
&:after {
|
||||
content: "";
|
||||
opacity: 0;
|
||||
background-color: $black_75;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
//Instead of the line below you could use @include transition($transition-1, $transition-2, $transition-3, $transition-4, $transition-5, $transition-6, $transition-7, $transition-8, $transition-9, $transition-10)
|
||||
transition: all 0.5s ease-in-out 0s;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.img-box {
|
||||
ul {
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
bottom: 20%;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
padding-left: 0;
|
||||
height: 0;
|
||||
margin: 0;
|
||||
opacity: 0;
|
||||
//Instead of the line below you could use @include transition($transition-1, $transition-2, $transition-3, $transition-4, $transition-5, $transition-6, $transition-7, $transition-8, $transition-9, $transition-10)
|
||||
transition: all 0.5s ease-in-out 0s;
|
||||
li {
|
||||
//Instead of the line below you could use @include transition($transition-1, $transition-2, $transition-3, $transition-4, $transition-5, $transition-6, $transition-7, $transition-8, $transition-9, $transition-10)
|
||||
transition: all 0.5s ease-in-out 0s;
|
||||
display: inline-block;
|
||||
}
|
||||
a {
|
||||
//Instead of the line below you could use @include transition($transition-1, $transition-2, $transition-3, $transition-4, $transition-5, $transition-6, $transition-7, $transition-8, $transition-9, $transition-10)
|
||||
transition: all 0.3s ease-in-out 0s;
|
||||
}
|
||||
}
|
||||
a {
|
||||
color: $white;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
text-align: center;
|
||||
border: 1px solid $white;
|
||||
margin: 3px;
|
||||
font-size: 1.3rem;
|
||||
display: inline-block;
|
||||
line-height: 40px;
|
||||
&:hover li {
|
||||
border-color: $white;
|
||||
color: $color_atlantis_approx;
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
&:after {
|
||||
opacity: 1;
|
||||
}
|
||||
ul {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
color: $color_atlantis_approx;
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
color: $color_hippie_green_approx;
|
||||
}
|
||||
}
|
||||
|
||||
.social {
|
||||
position: relative;
|
||||
height: 3em;
|
||||
width: 13.5em;
|
||||
margin: 90px 40%;
|
||||
li {
|
||||
display: block;
|
||||
height: 4em;
|
||||
line-height: 4em;
|
||||
margin: -2.2em;
|
||||
position: absolute;
|
||||
//Instead of the line below you could use @include transition($transition-1, $transition-2, $transition-3, $transition-4, $transition-5, $transition-6, $transition-7, $transition-8, $transition-9, $transition-10)
|
||||
transition: transform .7s;
|
||||
//Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy)
|
||||
transform: rotate(45deg);
|
||||
text-align: center;
|
||||
width: 4em;
|
||||
&:hover {
|
||||
//Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy)
|
||||
transform: scale(1.3, 1.3) rotate(45deg);
|
||||
}
|
||||
}
|
||||
a {
|
||||
color: $color_rice_cake_approx;
|
||||
display: block;
|
||||
height: 4em;
|
||||
line-height: 6em;
|
||||
text-align: center;
|
||||
//Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy)
|
||||
transform: rotate(-45deg);
|
||||
width: 4em;
|
||||
}
|
||||
}
|
||||
|
||||
.facebook {
|
||||
background: $color_matisse_approx;
|
||||
left: 0;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.twitter {
|
||||
background: $color_curious_blue_approx;
|
||||
bottom: 0;
|
||||
left: 25%;
|
||||
}
|
||||
|
||||
.facebook2 {
|
||||
background: $color_matisse_approx;
|
||||
left: 50%;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.twitter2 {
|
||||
background: $color_curious_blue_approx;
|
||||
bottom: 0;
|
||||
left: 25%;
|
||||
}
|
||||
|
||||
.pinterest {
|
||||
background: $color_alizarin_crimson_approx;
|
||||
left: 50%;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.behance {
|
||||
background: $color_astral_approx;
|
||||
bottom: 0;
|
||||
left: 75%;
|
||||
}
|
||||
|
||||
.behance2 {
|
||||
background: $color_astral_approx;
|
||||
top: 0;
|
||||
left: 50%;
|
||||
}
|
||||
|
||||
.behance3 {
|
||||
background: $color_astral_approx;
|
||||
bottom: 0;
|
||||
left: 75%;
|
||||
}
|
||||
|
||||
.link {
|
||||
background: transparent;
|
||||
color: $white;
|
||||
padding: 0.5rem 1rem;
|
||||
border: 1px solid $white;
|
||||
//Instead of the line below you could use @include transition($transition-1, $transition-2, $transition-3, $transition-4, $transition-5, $transition-6, $transition-7, $transition-8, $transition-9, $transition-10)
|
||||
transition: all 0.3s ease-in-out 0s;
|
||||
&:hover {
|
||||
background: #111;
|
||||
}
|
||||
}
|
||||
|
||||
.title h2 {
|
||||
line-height: 1.3;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
h6.description {
|
||||
font-weight: bold;
|
||||
letter-spacing: 2px;
|
||||
color: $color_mountain_mist_approx;
|
||||
border-bottom: 1px solid $black_10;
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
|
||||
i.red {
|
||||
color: $color_monza_approx;
|
||||
}
|
||||
|
||||
@media(max-width:767px) {
|
||||
.social a {
|
||||
color: #fffdf0;
|
||||
display: block;
|
||||
height: 4em;
|
||||
line-height: 6em;
|
||||
text-align: center;
|
||||
width: 4em;
|
||||
}
|
||||
}
|
||||
|
||||
/**************************PRICE TABLE************************/
|
||||
|
||||
|
||||
// variables
|
||||
$icon-size: 3rem;
|
||||
$icon-color: #D8D8D8;
|
||||
$main-color: #4bbdbd;
|
||||
|
||||
// Pricing table
|
||||
.pricing-table {
|
||||
display: table;
|
||||
width: 100%;
|
||||
.pricing-option {
|
||||
|
||||
background:white;
|
||||
|
||||
text-align: center;
|
||||
transition: all .3s ease-in-out;
|
||||
&:nth-child(even) {
|
||||
margin: 0 2%;
|
||||
}
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
box-shadow: 0px 2px 30px rgba(0,0,0,0.3);
|
||||
transform: scale(1.04);
|
||||
i, h1, span, b {
|
||||
color: $main-color;
|
||||
}
|
||||
.front {
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
}
|
||||
.back {
|
||||
opacity: 1 !important;
|
||||
visibility: visible !important;
|
||||
a.button {
|
||||
transform: translateY(0px) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
hr {
|
||||
border:none;
|
||||
border-bottom: 1px solid #F0F0F0;
|
||||
}
|
||||
i {
|
||||
font-size: $icon-size;
|
||||
color: $icon-color;
|
||||
transition: all .3s ease-in-out;
|
||||
}
|
||||
h1 {
|
||||
margin: 10px 0;
|
||||
color: #212121;
|
||||
transition: all .3s ease-in-out;
|
||||
}
|
||||
p {
|
||||
color: #999;
|
||||
padding: 0 10px;
|
||||
line-height: 1.3;
|
||||
}
|
||||
.price {
|
||||
position: relative;
|
||||
.front {
|
||||
span.price {
|
||||
font-size: 2rem;
|
||||
text-transform: uppercase;
|
||||
margin-top: 20px;
|
||||
display: block;
|
||||
font-weight: 700;
|
||||
position: relative;
|
||||
b {
|
||||
position: absolute;
|
||||
font-size: 1rem;
|
||||
margin-left: 2px;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
}
|
||||
.back {
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
transition: all .3s ease-in-out;
|
||||
a.button {
|
||||
background: $main-color;
|
||||
padding: 15px 20px;
|
||||
display: inline-block;
|
||||
text-decoration: none;
|
||||
color: white;
|
||||
position: absolute;
|
||||
font-size: 13px;
|
||||
top: -5px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
width: 150px;
|
||||
margin: auto;
|
||||
text-transform: uppercase;
|
||||
transform: translateY(20px);
|
||||
transition: all .3s ease-in-out;
|
||||
&:hover {
|
||||
background: darken($main-color, 10%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Responsive
|
||||
@media screen and (max-width: 600px) {
|
||||
.pricing-table {
|
||||
.pricing-option {
|
||||
padding: 5%;
|
||||
&:nth-child(even) {
|
||||
margin: 30px 0 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -55,6 +55,7 @@ private exportTime = { hour: 7, minute: 15, meriden: 'PM', format: 24 };
|
||||
con_type:['',Validators.compose([Validators.required])],
|
||||
|
||||
})
|
||||
this.updateCustomValidators()
|
||||
}
|
||||
getDistrictList(){
|
||||
this.apiService.getFilteredDistrict().subscribe(result=>{
|
||||
@ -288,13 +289,14 @@ private exportTime = { hour: 7, minute: 15, meriden: 'PM', format: 24 };
|
||||
this.restApi.checkExistCredentials(param).subscribe(res=>{
|
||||
if(!res['dataStatus']){
|
||||
this.is_newuser=false
|
||||
this.updateCustomValidators()
|
||||
// this.KGForm.controls['email'].clearValidators()
|
||||
// this.KGForm.controls['email'].updateValueAndValidity()
|
||||
// this.KGForm.controls['email'].setValidators(Validators.compose([Validators.required,Validators.email]))
|
||||
this.KGForm.controls['email_confirm'].clearValidators()
|
||||
this.KGForm.controls['email_confirm'].updateValueAndValidity()
|
||||
this.KGForm.controls['mobile_confirm'].clearValidators()
|
||||
this.KGForm.controls['mobile_confirm'].updateValueAndValidity()
|
||||
// this.KGForm.controls['email_confirm'].clearValidators()
|
||||
// this.KGForm.controls['email_confirm'].updateValueAndValidity()
|
||||
// this.KGForm.controls['mobile_confirm'].clearValidators()
|
||||
// this.KGForm.controls['mobile_confirm'].updateValueAndValidity()
|
||||
}
|
||||
else{
|
||||
this.is_newuser=true
|
||||
@ -309,7 +311,9 @@ private exportTime = { hour: 7, minute: 15, meriden: 'PM', format: 24 };
|
||||
updateCustomValidators(){
|
||||
this.KGForm.controls['mobile_confirm'].setValidators(Validators.compose([Validators.required, Validators.min(1000000000), Validators.max(999999999999),mobile_compare('mob',this.KGForm.value.mobile)]))
|
||||
this.KGForm.controls['mobile_confirm'].updateValueAndValidity()
|
||||
|
||||
this.KGForm.controls['email_confirm'].setValidators(Validators.compose([Validators.email,Validators.required,email_compare('email',this.KGForm.value.email)]))
|
||||
this.KGForm.controls['email_confirm'].updateValueAndValidity()
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -65,6 +65,12 @@ const HORIZONTALMENUITEMS = [
|
||||
type: 'link',
|
||||
icon: 'lock'
|
||||
},
|
||||
{
|
||||
state: 'contact',
|
||||
name: 'Contact',
|
||||
type: 'link',
|
||||
icon: 'lock'
|
||||
},
|
||||
{
|
||||
state: '',
|
||||
name: 'My Account',
|
||||
|
||||
@ -97,6 +97,12 @@ const MENUITEMS : Menu[] = [
|
||||
// type: 'link',
|
||||
// icon: 'error_outline'
|
||||
// },
|
||||
{
|
||||
state: 'contact',
|
||||
name: 'Contact',
|
||||
type: 'link',
|
||||
icon: 'lock'
|
||||
},
|
||||
{
|
||||
state: 'authentication',
|
||||
name: 'Login',
|
||||
|
||||
BIN
ng8-seed/src/assets/images/csr-img/book1.jpg
Normal file
BIN
ng8-seed/src/assets/images/csr-img/book1.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 118 KiB |
BIN
ng8-seed/src/assets/images/csr-img/book2.jpg
Normal file
BIN
ng8-seed/src/assets/images/csr-img/book2.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 39 KiB |
BIN
ng8-seed/src/assets/images/csr-img/book3.png
Normal file
BIN
ng8-seed/src/assets/images/csr-img/book3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 130 KiB |
BIN
ng8-seed/src/assets/images/csr-img/contact.jpg
Normal file
BIN
ng8-seed/src/assets/images/csr-img/contact.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 714 KiB |
BIN
ng8-seed/src/assets/images/csr-img/education_learning.jpg
Normal file
BIN
ng8-seed/src/assets/images/csr-img/education_learning.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 91 KiB |
Loading…
Reference in New Issue
Block a user