diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts index 3f5cfc5..56f0fb4 100644 --- a/src/app/app-routing.module.ts +++ b/src/app/app-routing.module.ts @@ -10,6 +10,11 @@ const routes: Routes = [ loadChildren: (): any => import('./auth/auth.module').then((m: any) => m.AuthModule), }, + { + path: 'feedback', + loadChildren: (): any => import('./feedback/feedback.module').then((m: any) => m.FeedbackModule), + }, + { path: '', redirectTo: 'auth/login', diff --git a/src/app/auth/login/login.component.html b/src/app/auth/login/login.component.html index 8dc5db5..761679d 100644 --- a/src/app/auth/login/login.component.html +++ b/src/app/auth/login/login.component.html @@ -8,7 +8,10 @@ Sana Şifa - +

giris

diff --git a/src/app/auth/login/login.component.ts b/src/app/auth/login/login.component.ts index 9322376..0c1cacc 100644 --- a/src/app/auth/login/login.component.ts +++ b/src/app/auth/login/login.component.ts @@ -69,4 +69,8 @@ export class LoginComponent { } + navigateToFeedback() { + this.router.navigate(['/feedback']); + } + } diff --git a/src/app/feedback/display-feedback/display-feedback.component.css b/src/app/feedback/display-feedback/display-feedback.component.css new file mode 100644 index 0000000..6b7cb97 --- /dev/null +++ b/src/app/feedback/display-feedback/display-feedback.component.css @@ -0,0 +1,5 @@ +.background { + background: url('/assets/desen.jpg'); + background-size: cover; +} + diff --git a/src/app/feedback/display-feedback/display-feedback.component.html b/src/app/feedback/display-feedback/display-feedback.component.html new file mode 100644 index 0000000..0e6f7cc --- /dev/null +++ b/src/app/feedback/display-feedback/display-feedback.component.html @@ -0,0 +1,57 @@ +
+
+
+ + + +
+ + {{ item.name }} {{ item.surname }} + + + {{ item.email }} + + + 0{{ item.phoneNumber }} + +
+
+
+ +
+ +
+
+ +
+
+

NS

+
+ +
+ + +
+ +
+
+ +
+
+

PP

+
+ +
+ + Comment: {{ + item.comment }} + + +
+
+
\ No newline at end of file diff --git a/src/app/feedback/display-feedback/display-feedback.component.spec.ts b/src/app/feedback/display-feedback/display-feedback.component.spec.ts new file mode 100644 index 0000000..fdd2e66 --- /dev/null +++ b/src/app/feedback/display-feedback/display-feedback.component.spec.ts @@ -0,0 +1,23 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { DisplayFeedbackComponent } from './display-feedback.component'; + +describe('DisplayFeedbackComponent', () => { + let component: DisplayFeedbackComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ DisplayFeedbackComponent ] + }) + .compileComponents(); + + fixture = TestBed.createComponent(DisplayFeedbackComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/feedback/display-feedback/display-feedback.component.ts b/src/app/feedback/display-feedback/display-feedback.component.ts new file mode 100644 index 0000000..aff940e --- /dev/null +++ b/src/app/feedback/display-feedback/display-feedback.component.ts @@ -0,0 +1,37 @@ +import { Component, OnInit } from '@angular/core'; +import { MatIconRegistry } from "@angular/material/icon"; +import { DomSanitizer } from "@angular/platform-browser"; + +@Component({ + selector: 'app-display-feedback', + templateUrl: './display-feedback.component.html', + styleUrls: ['./display-feedback.component.css'] +}) +export class DisplayFeedbackComponent implements OnInit { + + // Constructor'a svg'yi eklememe rağmen neden kullanılamadığını öğren + constructor(private matIconRegistry: MatIconRegistry, private domSanitizer: DomSanitizer) { + this.matIconRegistry.addSvgIcon( + 'male-icon', + this.domSanitizer.bypassSecurityTrustResourceUrl('assets\svgs\gender-male-svgrepo-com.svg') + ); + } + + ngOnInit(): void { + this.checkClick(); + } + + parsedFeedbackValues: any[] = []; + + checkClick() { + let valueKey: any; + for (let i = 1; i < 100; i++) { // for döngüsüyle localstorage'deki veriyi döndürebiliyorum fakat şimdilik döngü 100'e kadar dönüyor. storage'daki veri sayısına göre dönmeyi öğren!!! + valueKey = i.toString(); + const storedFeedbackValues = localStorage.getItem(valueKey) + if (storedFeedbackValues) { + const retrievedValue = JSON.parse(storedFeedbackValues); + this.parsedFeedbackValues.push(retrievedValue) + } + } + } +} diff --git a/src/app/feedback/feedback-routing.module.ts b/src/app/feedback/feedback-routing.module.ts new file mode 100644 index 0000000..57f987f --- /dev/null +++ b/src/app/feedback/feedback-routing.module.ts @@ -0,0 +1,15 @@ +import { NgModule } from '@angular/core'; +import { RouterModule, Routes } from '@angular/router'; +import { DisplayFeedbackComponent } from './display-feedback/display-feedback.component'; +import { SendFeedbackComponent } from './send-feedback/send-feedback.component'; + +const routes: Routes = [ + { path: '', component: SendFeedbackComponent }, + { path: 'display', component: DisplayFeedbackComponent } +]; + +@NgModule({ + imports: [RouterModule.forChild(routes)], + exports: [RouterModule] +}) +export class FeedbackRoutingModule { } diff --git a/src/app/feedback/feedback.module.ts b/src/app/feedback/feedback.module.ts new file mode 100644 index 0000000..411f9dd --- /dev/null +++ b/src/app/feedback/feedback.module.ts @@ -0,0 +1,32 @@ +import { NgModule } from '@angular/core'; +import { CommonModule } from '@angular/common'; +import { DisplayFeedbackComponent } from './display-feedback/display-feedback.component'; +import { SendFeedbackComponent } from './send-feedback/send-feedback.component'; +import { FormsModule, ReactiveFormsModule } from '@angular/forms'; +import { MaterialModule } from '../shared/material/material.module'; +import { SharedModule } from '../shared/shared.module'; +import { FeedbackRoutingModule } from './feedback-routing.module'; +import { RouterModule } from '@angular/router'; +import { FeedbackComponent } from './feedback/feedback.component'; +import { MatIconModule } from '@angular/material/icon'; + + + +@NgModule({ + declarations: [ + DisplayFeedbackComponent, + SendFeedbackComponent, + FeedbackComponent, + ], + imports: [ + CommonModule, + MaterialModule, + FormsModule, + ReactiveFormsModule, + SharedModule, + FeedbackRoutingModule, + RouterModule, + MatIconModule, + ] +}) +export class FeedbackModule { } diff --git a/src/app/feedback/feedback/feedback.component.css b/src/app/feedback/feedback/feedback.component.css new file mode 100644 index 0000000..e69de29 diff --git a/src/app/feedback/feedback/feedback.component.html b/src/app/feedback/feedback/feedback.component.html new file mode 100644 index 0000000..6a164d6 --- /dev/null +++ b/src/app/feedback/feedback/feedback.component.html @@ -0,0 +1,2 @@ + + diff --git a/src/app/feedback/feedback/feedback.component.spec.ts b/src/app/feedback/feedback/feedback.component.spec.ts new file mode 100644 index 0000000..3badc56 --- /dev/null +++ b/src/app/feedback/feedback/feedback.component.spec.ts @@ -0,0 +1,23 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { FeedbackComponent } from './feedback.component'; + +describe('FeedbackComponent', () => { + let component: FeedbackComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ FeedbackComponent ] + }) + .compileComponents(); + + fixture = TestBed.createComponent(FeedbackComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/feedback/feedback/feedback.component.ts b/src/app/feedback/feedback/feedback.component.ts new file mode 100644 index 0000000..f5471a1 --- /dev/null +++ b/src/app/feedback/feedback/feedback.component.ts @@ -0,0 +1,10 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-feedback', + templateUrl: './feedback.component.html', + styleUrls: ['./feedback.component.css'] +}) +export class FeedbackComponent { + +} diff --git a/src/app/feedback/send-feedback/send-feedback.component.css b/src/app/feedback/send-feedback/send-feedback.component.css new file mode 100644 index 0000000..0a88f87 --- /dev/null +++ b/src/app/feedback/send-feedback/send-feedback.component.css @@ -0,0 +1,4 @@ +.background { + background: url('/assets/desen.jpg'); + background-size: cover; +} \ No newline at end of file diff --git a/src/app/feedback/send-feedback/send-feedback.component.html b/src/app/feedback/send-feedback/send-feedback.component.html new file mode 100644 index 0000000..32054ab --- /dev/null +++ b/src/app/feedback/send-feedback/send-feedback.component.html @@ -0,0 +1,94 @@ +
+
+
+ + + +
+ + Name + + +

Name field can not be left + blank +

+ + + + + Surname + + +

Surame field can not + be left blank +

+ + +
+ +
+ + E-mail + + +

E-mail field can not be + left blank +

+

E-mail field must be in e-mail format +

+ + + + + + Phone number + +90 + + +
+ +
+

Select your gender

+
+ + Male + Female + I do not want to specify + +
+
+ + + Comment + + + +
+ + Where do you hear about us + + Social Media + Friend Suggestion + TV + Find Myself + Other + + + + +
+
+ + + +
+
+ diff --git a/src/app/feedback/send-feedback/send-feedback.component.spec.ts b/src/app/feedback/send-feedback/send-feedback.component.spec.ts new file mode 100644 index 0000000..e939add --- /dev/null +++ b/src/app/feedback/send-feedback/send-feedback.component.spec.ts @@ -0,0 +1,23 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { SendFeedbackComponent } from './send-feedback.component'; + +describe('SendFeedbackComponent', () => { + let component: SendFeedbackComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ SendFeedbackComponent ] + }) + .compileComponents(); + + fixture = TestBed.createComponent(SendFeedbackComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/feedback/send-feedback/send-feedback.component.ts b/src/app/feedback/send-feedback/send-feedback.component.ts new file mode 100644 index 0000000..e870e01 --- /dev/null +++ b/src/app/feedback/send-feedback/send-feedback.component.ts @@ -0,0 +1,44 @@ +import { Component } from '@angular/core'; +import { FormGroup, FormControl, Validators, AbstractControl } from '@angular/forms'; +import { Router } from '@angular/router'; + + +@Component({ + selector: 'app-send-feedback', + templateUrl: './send-feedback.component.html', + styleUrls: ['./send-feedback.component.css'] +}) +export class SendFeedbackComponent { + + public feedbackForm = new FormGroup({ + name: new FormControl('', Validators.required), + surname: new FormControl('', Validators.required), + comment: new FormControl(), + email: new FormControl('', [Validators.required, Validators.email]), + phoneNumber: new FormControl(), + gender: new FormControl('male', [Validators.required]), + reference: new FormControl('') + }) + + constructor( + public router: Router + ) {} + + valueKey: number = 1; // şimdilik geçici bir çözüm olarak bir değişkenle localstorage keylerini kontrol altına aldım. Daha verimli bir yolunu araştır + + get f(): { [key: string]: AbstractControl } { + return this.feedbackForm.controls + } + + submitfeedback() { // Kontrol amaçlı console.log ekledim. İşin bitince silmeyi unutma + const formValues = this.feedbackForm.value; + const key = this.valueKey.toString(); + window.localStorage.setItem(key, JSON.stringify(formValues)); + this.valueKey++; + this.feedbackForm.reset() + } + + navigateToFeedbackDisplay() { + this.router.navigate(['/feedback/display']); + } +} diff --git a/src/app/main/main.module.ts b/src/app/main/main.module.ts index 7b17e34..840dd9a 100644 --- a/src/app/main/main.module.ts +++ b/src/app/main/main.module.ts @@ -31,7 +31,6 @@ import { SharedModule } from '../shared/shared.module'; FormsModule, ReactiveFormsModule, MainFooterComponent, - SharedModule ] }) export class MainModule { } diff --git a/src/app/shared/directives/phone-number-format.directive.ts b/src/app/shared/directives/phone-number-format.directive.ts new file mode 100644 index 0000000..94d2459 --- /dev/null +++ b/src/app/shared/directives/phone-number-format.directive.ts @@ -0,0 +1,27 @@ +import { Directive, ElementRef, HostListener } from '@angular/core'; + +@Directive({ + selector: '[appPhoneNumberFormat]' +}) +export class PhoneNumberFormatDirective { + + constructor(private el: ElementRef) { } + + @HostListener('input', ['$event']) + onInput(event: KeyboardEvent) { + const input = event.target as HTMLInputElement; + const phoneNumber = this.formatPhoneNumber(input.value); + input.value = phoneNumber; + } + + private formatPhoneNumber(value: string): string { + const digitsOnly = value.replace(/[^\d\b]/g, ''); //regex pattern + const areaCode = digitsOnly.slice(0, 3); + const firstPart = digitsOnly.slice(3, 6); + const secondPart = digitsOnly.slice(6, 8); + const lastPart = digitsOnly.slice(8, 10); + + return `${areaCode} ${firstPart} ${secondPart} ${lastPart}`; + } + +} diff --git a/src/app/shared/shared.module.ts b/src/app/shared/shared.module.ts index 6441356..74233ea 100644 --- a/src/app/shared/shared.module.ts +++ b/src/app/shared/shared.module.ts @@ -10,6 +10,7 @@ import { TranslateHttpLoader } from '@ngx-translate/http-loader'; import { ReactiveFormsModule } from '@angular/forms'; import { CikisModalComponent } from './component/modals/cikis-modal/cikis-modal.component'; import { UrunEditModalComponent } from './component/modals/urun-edit-modal/urun-edit-modal.component'; +import { PhoneNumberFormatDirective } from './directives/phone-number-format.directive'; export function HttpLoaderFactory(http: HttpClient) { /// Eğer başka bir diiznde json tanımlamamk istersek return new TranslateHttpLoader(http); @@ -19,7 +20,8 @@ export function HttpLoaderFactory(http: HttpClient) { /// Eğer başka bir declarations: [ LanguageComponent, CikisModalComponent, - UrunEditModalComponent + UrunEditModalComponent, + PhoneNumberFormatDirective ], imports: [ CommonModule, @@ -38,7 +40,8 @@ export function HttpLoaderFactory(http: HttpClient) { /// Eğer başka bir exports: [ LanguageComponent, TranslateModule, - ReactiveFormsModule + ReactiveFormsModule, + PhoneNumberFormatDirective ], providers:[TranslateService] }) diff --git a/src/assets/svgs/gender-female-icon.svg b/src/assets/svgs/gender-female-icon.svg new file mode 100644 index 0000000..c0ffcbc --- /dev/null +++ b/src/assets/svgs/gender-female-icon.svg @@ -0,0 +1,6 @@ + + + + + + \ No newline at end of file diff --git a/src/assets/svgs/gender-female-svgrepo-com.svg b/src/assets/svgs/gender-female-svgrepo-com.svg new file mode 100644 index 0000000..0461760 --- /dev/null +++ b/src/assets/svgs/gender-female-svgrepo-com.svg @@ -0,0 +1,2 @@ + + \ No newline at end of file diff --git a/src/assets/svgs/gender-male-icon.svg b/src/assets/svgs/gender-male-icon.svg new file mode 100644 index 0000000..a82f5a3 --- /dev/null +++ b/src/assets/svgs/gender-male-icon.svg @@ -0,0 +1,6 @@ + + + + + + \ No newline at end of file diff --git a/src/assets/svgs/gender-male-svgrepo-com.svg b/src/assets/svgs/gender-male-svgrepo-com.svg new file mode 100644 index 0000000..d53539e --- /dev/null +++ b/src/assets/svgs/gender-male-svgrepo-com.svg @@ -0,0 +1,2 @@ + + \ No newline at end of file