Yasins

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',

src/app/auth/login/login.component.html

@@ -8,7 +8,10 @@
                 <img class="img-fluid" width="300px" style="background-color:	#7DCEA0" src="assets/logo.png"
                     alt="Sana Şifa">
 
-
+                <button
+                    style="position: relative; left: -280px; top: -370px; border-radius: 5px; background-color:#7DCEA0; "
+                    (click)="navigateToFeedback()">feedback
+                </button>
 
                 <!--  <div class="d-flex flex-column align-items-center " style="border-radius: 3px;border: 1px solid  rgb(255, 255, 255); padding: 10px; background-color: rgb(164, 199, 180);"> -->
                 <h2 class="mb-3" ><strong><b translate>giris</b></strong></h2>

src/app/auth/login/login.component.ts

@@ -69,4 +69,8 @@ export class LoginComponent {
 
   }
 
+  navigateToFeedback() {
+    this.router.navigate(['/feedback']);
+  }
+
 }

src/app/feedback/display-feedback/display-feedback.component.css

@@ -0,0 +1,5 @@
+.background {
+    background: url('/assets/desen.jpg');
+    background-size: cover;
+}
+

src/app/feedback/display-feedback/display-feedback.component.html

@@ -0,0 +1,57 @@
+<div class="background">
+    <div class="container">
+        <div style="display: flex; flex-wrap: wrap; min-height: 100vh;">
+            <mat-card style="width: calc(50% - 4px); margin: 2px; opacity: 0.90; background-color: #7DCEA0;"
+                *ngFor="let item of parsedFeedbackValues">
+                <!-- mat-card-header için justify-content: space-between olmasına rağmen en baştaki element kapsayıcının başlangıç noktasına yaslanmıyor. Sebebini öğren -->
+                <mat-card-header style="padding-left: 0; display: flex; justify-content: space-between;">
+                    <div style="margin-left: 0; display: flex; flex-direction: column;">
+                        <span class="py-1">
+                            <strong>{{ item.name }} {{ item.surname }}</strong>
+                        </span>
+                        <span class="py-1">
+                            {{ item.email }}
+                        </span>
+                        <span class="py-1">
+                            0{{ item.phoneNumber }}
+                        </span>
+                    </div>
+                    <div style="display: flex; justify-content: flex-end; align-items: center;">
+                        <div style="margin-right: 25px; align-self: baseline;">
+                            <ng-container [ngSwitch]="item.gender">
+                                <div *ngSwitchCase="'male'" style="width: 35px; height: 35px; margin-bottom: 5px;">
+                                    <img src="assets\svgs\gender-male-icon.svg" width="35px" height="35px">
+                                </div>
+                                <div *ngSwitchCase="'female'" style="width: 35px; height: 35px; margin-bottom: 5px;">
+                                    <img src="assets\svgs\gender-female-icon.svg" width="35px" height="35px">
+                                </div>
+                                <div *ngSwitchDefault
+                                    style="display: flex; width: 35px; height: 35px; margin-bottom: 5px; border-radius: 50%; border: 2px solid black; justify-content: center; align-items: center;">
+                                    <p style="font-size: 15px; margin: 0;"><strong>NS</strong></p>
+                                </div>
+                            </ng-container>
+                        </div>
+                        <!-- Görselleri svg olarak kullanmanın avantajları nedir? Neden svg türünde dosyalara ihtiyaç duyarız? Araştır!! -->
+                        <ng-container [ngSwitch]="item.gender">
+                            <div *ngSwitchCase="'male'"
+                                style="display: flex; width: 75px; height: 75px; border-radius: 50%;">
+                                <img src="assets\svgs\gender-male-svgrepo-com.svg" width="75px" height="75px">
+                            </div>
+                            <div *ngSwitchCase="'female'"
+                                style="display: flex; width: 75px; height: 75px; border-radius: 50%;">
+                                <img src="assets\svgs\gender-female-svgrepo-com.svg" width="75px" height="75px">
+                            </div>
+                            <div *ngSwitchDefault
+                                style="display: flex; width: 75px; height: 75px; border-radius: 50%; border: 2px solid black; justify-content: center; align-items: center;">
+                                <p style="font-size: 45px; margin: 0;"><strong>PP</strong></p>
+                            </div>
+                        </ng-container>
+                    </div>
+                </mat-card-header>
+                <mat-card-content class="mt-3 py-2 d-flex flex-column"><span><strong>Comment:</strong></span> <span>{{
+                        item.comment }}</span> </mat-card-content>
+                <mat-card-footer></mat-card-footer>
+            </mat-card>
+        </div>
+    </div>
+</div>

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<DisplayFeedbackComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ DisplayFeedbackComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(DisplayFeedbackComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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)
+      }
+    }
+  }
+}

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 { }

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 { }

src/app/feedback/feedback/feedback.component.html

@@ -0,0 +1,2 @@
+<router-outlet></router-outlet>
+

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<FeedbackComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ FeedbackComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(FeedbackComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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 {
+
+}

src/app/feedback/send-feedback/send-feedback.component.css

@@ -0,0 +1,4 @@
+.background {
+    background: url('/assets/desen.jpg');
+    background-size: cover;
+}

src/app/feedback/send-feedback/send-feedback.component.html

@@ -0,0 +1,94 @@
+<div class="background">
+    <form [formGroup]="feedbackForm" (ngSubmit)="submitfeedback()" class="d-flex justify-content-center">
+        <div style="padding-top: 50px; width: 50%; height: 100vh;background-color:#7DCEA0; opacity: 0.95;box-shadow: 10px 10px 50px 5px rgb(255, 255, 255),-10px 10px 50px 5px rgb(255, 255, 255); border-radius: 10px;"
+            class="d-flex flex-column justify-content-start align-items-center ">
+
+            <!-- Hemen alttaki div için justify-content-evenly yapılmasına rağmen neden elementlerin buna göre ayarlanmadığını sor -->
+            <!-- Bu div yerine table kullanımı daha mantıklı olabilir -->
+            <div class="d-flex justify-content-evenly">
+                <mat-form-field style="width: 300px; padding-right: 5px;" appearance="outline">
+                    <mat-label>Name</mat-label>
+                    <input formControlName="name" matInput placeholder="">
+                    <mat-error style="margin-top: -22px;">
+                        <p *ngIf="f['name'].errors && f['name'].errors['required']" translate>Name field can not be left
+                            blank
+                        </p>
+                    </mat-error>
+                </mat-form-field>
+
+                <mat-form-field style="width: 300px; padding-left: 5px" appearance="outline">
+                    <mat-label>Surname</mat-label>
+                    <input formControlName="surname" matInput placeholder="">
+                    <mat-error style="margin-top: -22px;">
+                        <p *ngIf="f['surname'].errors && f['surname'].errors['required']" translate>Surame field can not
+                            be left blank
+                        </p>
+                    </mat-error>
+                </mat-form-field>
+            </div>
+
+            <div class="d-flex justify-content-evenly">
+                <mat-form-field style="width: 300px; padding-right: 5px;" appearance="outline">
+                    <mat-label>E-mail</mat-label>
+                    <input formControlName="email" matInput placeholder="">
+                    <mat-error style="margin-top: -22px;">
+                        <p *ngIf="f['email'].errors && f['email'].errors['required']" translate>E-mail field can not be
+                            left blank
+                        </p>
+                        <p *ngIf="f['email'].errors && f['email'].errors['email']">E-mail field must be in e-mail format
+                        </p>
+                    </mat-error>
+                </mat-form-field>
+
+                <!-- Telefon numarası yazıldıktan sonra bacspace'e basılınca son 2 rakam hariç hiçbir rakamı silmiyor. ChatGPT yardımıyla backspace'i diğer tuşlaran ayıran kodu yazdım fakat bu sefer rakam sildikçe yerine parantez ekledi ayrıca ekranda telefon numarası olması gerektiği hanede görünmesine rağmen eğer fazladan tuşa basılırsa bir tane daha rakam ekliyor. Localstorage'den veriyi alınca anlaşılıyor -->
+                <mat-form-field style="width: 300px; padding-left: 5px" appearance="outline">
+                    <mat-label>Phone number</mat-label>
+                    <span style="margin-left: 7px;" matPrefix>+90 <!-- &nbsp; ->  +90'dan sonra boşluk bırakmak için kullanılıyor --></span>
+                    <input type="tel" formControlName="phoneNumber" matInput placeholder="" appPhoneNumberFormat>
+                </mat-form-field>
+            </div>
+            <!-- section'ı mat-form-field içinde kullanamadığım için border özelliklerini style olarak ekledim fakat mat-form-field'ları altındaki elemanlardan ayıran marginin nereden geldiğini bulamadım -->
+            <section
+                style="color: rgba(0, 0, 0, 0.60); width: 600px; border: 1px solid rgba(0, 0, 0, 0.33); border-radius: 4px; padding: 8px; display: inline-block; margin-bottom: 20px;">
+                <h4>Select your gender</h4>
+                <div class="d-flex justify-content-start">
+                    <mat-radio-group formControlName="gender">
+                        <mat-radio-button value="male">Male</mat-radio-button>
+                        <mat-radio-button value="female">Female</mat-radio-button>
+                        <mat-radio-button value="dontWanttoSpecify">I do not want to specify</mat-radio-button>
+                    </mat-radio-group>
+                </div>
+            </section>
+
+            <mat-form-field style="width: 600px;" appearance="outline">
+                <mat-label>Comment</mat-label>
+                <textarea rows="8" formControlName="comment" matInput
+                    placeholder="Share your opinions with us"></textarea>
+            </mat-form-field>
+
+            <div style="width: 600px;" class="d-flex">
+                <mat-form-field style="width: 300px;" appearance="outline">
+                    <mat-label>Where do you hear about us</mat-label>
+                    <mat-select disableRipple formControlName="reference">
+                        <mat-option value="1">Social Media</mat-option>
+                        <mat-option value="2">Friend Suggestion</mat-option>
+                        <mat-option value="3">TV</mat-option>
+                        <mat-option value="4">Find Myself</mat-option>
+                        <mat-option value="5">Other</mat-option>
+                    </mat-select>
+                </mat-form-field>
+
+                <button
+                    style="border: 3px solid rgba(0, 0, 0, 0.33); border-radius: 50%; width: 150px; margin-left: 150px; height: 56px; background-color:#7DCEA0; opacity: 1;"
+                    mat-stroked-button color="primary" type="submit" [disabled]="feedbackForm.invalid">send</button>
+            </div>
+        </div>
+
+        <button
+                    style="height: 25px; position: relative; left: -124px; top: 700px; border-radius: 5px; background-color:#7DCEA0; "
+                    (click)="navigateToFeedbackDisplay()">show feedbacks
+        </button>
+
+    </form>
+</div>
+

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<SendFeedbackComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ SendFeedbackComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(SendFeedbackComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});