Merge branch 'master' into adarsh

src/app/feedback/feedback.page.html

 <div class="nav_header">
-    <button class="nav_btn nav_back floatLeft" (click)="goBack()">
-    <img src="../assets/Group17_2.png">
+  <button class="nav_btn nav_back floatLeft" (click)="goBack()">
+    <img src="../assets/Group17_2.png" />
   </button>
-    <div class="nav_title floatLeft">
-        <h4>Complaints & Feedback</h4>
-    </div>
-    <div class="clear"></div>
+  <div class="nav_title floatLeft">
+    <h4>Complaints & Feedback</h4>
+  </div>
+  <div class="clear"></div>
 </div>
 <ion-content>
-    <div class="feedback_wrapper">
-        <div class="form_div">
-            <div class="row">
-                <p>From</p>
-                <input class="form-control" type="text" placeholder="[email protected]">
-            </div>
-            <div class="row">
-                <p>To</p>
-                <input class="form-control" type="text" placeholder="[email protected]">
-            </div>
-            <div class="row">
-                <p>Comments</p>
-                <textarea class="form-control" rows="8" placeholder="Type here.."></textarea>
-            </div>
-            <div class="row">
-                <button class="login_btn">SENT</button>
-            </div>
-
+  <form
+    novalidate
+    #feedbackForm="ngForm"
+    class="feedback_wrapper"
+    *ngIf="userData && feedbackData"
+  >
+    <div class="form_div">
+      <div class="row">
+        <p>From</p>
+        <input
+          class="form-control"
+          type="text"
+          [(ngModel)]="userData.emailId"
+          name="from"
+          #from="ngModel"
+          readonly
+          [(value)]="userData.emailId"
+        />
+      </div>
+      <div class="row">
+        <p>To</p>
+        <input
+          name="to"
+          class="form-control"
+          #to="ngModel"
+          type="text"
+          readonly
+          [(ngModel)]="feedbackData.to"
+          [(value)]="feedbackData.to"
+        />
+      </div>
+      <div class="row">
+        <p>Comments</p>
+        <textarea
+          required
+          name="message"
+          [(ngModel)]="feedbackData.message"
+          #message="ngModel"
+          class="form-control"
+          rows="8"
+          placeholder="Type here.."
+        ></textarea>
+        <div
+          class="md-errors-spacer"
+          [hidden]="message.valid || submitted == false"
+          class="ion-padding-start"
+        >
+          This is required.
         </div>
+      </div>
+      <div class="row">
+        <button (click)="onFeedbackSubmit(feedbackForm)" class="login_btn">
+          SENT
+        </button>
+      </div>
     </div>
-</ion-content>
\ No newline at end of file
+  </form>
+</ion-content>

src/app/feedback/feedback.page.scss

 .feedback_wrapper {
-    width: 80%;
-    margin: 0 auto;
-    padding-top: 30px;
-    .form_div {
-        .row {
-            margin-bottom: 20px;
-            .form-control {
-                border: 1px solid rgba(215, 213, 228, 1);
-                background: transparent;
-                color: #333;
-                width: 100%;
-                border-radius: 8px;
-                font-size: 16px;
-                padding: 11px 15px;
-                resize: none;
-                &::placeholder {
-                    color: rgba(215, 213, 228, 1);
-                }
-            }
-            .login_btn {
-                width: 100%;
-                background-color: #29285b;
-                color: #fff;
-                border-radius: 8px;
-                height: 45px;
-                font-size: 16px;
-                margin-bottom: 50px;
-            }
-            P {
-                text-align: left;
-                color: rgba(59, 57, 77, 1);
-                margin: 0px;
-                font-weight: bolder;
-                padding-bottom: 10px;
-            }
+  width: 80%;
+  margin: 0 auto;
+  padding-top: 30px;
+  .form_div {
+    .row {
+      margin-bottom: 20px;
+      .form-control {
+        border: 1px solid rgba(215, 213, 228, 1);
+        background: transparent;
+        color: #333;
+        width: 100%;
+        border-radius: 8px;
+        font-size: 16px;
+        padding: 11px 15px;
+        resize: none;
+        &::placeholder {
+          color: rgba(215, 213, 228, 1);
         }
+      }
+      .login_btn {
+        width: 100%;
+        background-color: #29285b;
+        color: #fff;
+        border-radius: 8px;
+        height: 45px;
+        font-size: 16px;
+        margin-bottom: 50px;
+      }
+      p {
+        text-align: left;
+        color: rgba(59, 57, 77, 1);
+        margin: 0px;
+        font-weight: bolder;
+        padding-bottom: 10px;
+      }
     }
-}
\ No newline at end of file
+  }
+}

src/app/feedback/feedback.page.ts

 import { Component, OnInit } from '@angular/core';
 import { Location } from '@angular/common';
-
+import { SubjectService } from '../../config/subject.service';
+import { NgForm } from '@angular/forms';
+import { FeedbackData } from '../../config/services/feedback';
+import { FeedbackService } from '../../config/feedback.service';
+import { ToastController } from '@ionic/angular';
 @Component({
   selector: 'app-feedback',
   templateUrl: './feedback.page.html',
   styleUrls: ['./feedback.page.scss']
 })
 export class FeedbackPage implements OnInit {
-  constructor(private location: Location) {}
+  submitted = false;
+  userData: any;
+  feedbackData: FeedbackData = {
+    feedbackId: '',
+    from: '',
+    to: '[email protected]',
+    message: ''
+  };
+
+  constructor(
+    private location: Location,
+    public subjectService: SubjectService,
+    public feedService: FeedbackService,
+    public toastController: ToastController
+  ) {
+    // Gets userdata
+    this.subjectService.getUserData().subscribe(userData => {
+      if (userData) {
+        this.userData = JSON.parse(userData);
+        console.log(userData);
+      } else {
+        console.log(userData);
+      }
+    });
+  }
+
+  onFeedbackSubmit(form: NgForm) {
+    this.submitted = true;
+    if (form.valid) {
+      this.feedService.feedbackCreate(form.value);
+    }
+  }
 
   ngOnInit() {}
 

src/config/feedback.service.ts

+import { Injectable } from '@angular/core';
+import {
+  AngularFirestore,
+  AngularFirestoreCollection
+} from '@angular/fire/firestore';
+import { take } from 'rxjs/operators';
+import { FeedbackData } from './services/feedback';
+import { ToastController } from '@ionic/angular';
+import { Router, ActivatedRoute } from '@angular/router';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class FeedbackService {
+  constructor(
+    public afs: AngularFirestore,
+    public toastController: ToastController,
+    private router: Router
+  ) {}
+
+  feedbackCreate(data: FeedbackData) {
+    console.log(data);
+    this.afs
+      .collection('feedback')
+      .add({})
+      .then(docRef => {
+        data.feedbackId = docRef.id;
+        this.afs
+          .collection('feedback')
+          .doc(data.feedbackId)
+          .set(data)
+          .then(() => {
+            // SHows success toast
+            this.toastController
+              .create({
+                message: 'Thank you for your Feedback!',
+                duration: 2000,
+                position: 'top',
+                cssClass: 'my-toast'
+              })
+              .then(res => {
+                res.present();
+                setTimeout(() => {
+                  this.router.navigateByUrl('home');
+                }, 2100);
+              });
+          });
+      });
+  }
+}

src/config/services/feedback.ts

+export interface FeedbackData {
+  from: string;
+  to: string;
+  feedbackId: string;
+  message: string;
+}

src/global.scss

@@ -648,3 +648,16 @@ ion-header {
     }
   }
 }
+
+// .successToast {
+//   color: #29285b;
+// }
+
+// .toast-content {
+// }
+
+.my-toast {
+  --background: #29285b;
+  --border-radius: 4px;
+  --color: #fff;
+}

src/theme/variables.css

-/** Ionic CSS Variables **/
-:root {
-  /** primary **/
-  --ion-color-primary: #3880ff;
-  --ion-color-primary-rgb: 56, 128, 255;
-  --ion-color-primary-contrast: #ffffff;
-  --ion-color-primary-contrast-rgb: 255, 255, 255;
-  --ion-color-primary-shade: #3171e0;
-  --ion-color-primary-tint: #4c8dff;
-  /** secondary **/
-  --ion-color-secondary: #0cd1e8;
-  --ion-color-secondary-rgb: 12, 209, 232;
-  --ion-color-secondary-contrast: #ffffff;
-  --ion-color-secondary-contrast-rgb: 255, 255, 255;
-  --ion-color-secondary-shade: #0bb8cc;
-  --ion-color-secondary-tint: #24d6ea;
-  /** tertiary **/
-  --ion-color-tertiary: #7044ff;
-  --ion-color-tertiary-rgb: 112, 68, 255;
-  --ion-color-tertiary-contrast: #ffffff;
-  --ion-color-tertiary-contrast-rgb: 255, 255, 255;
-  --ion-color-tertiary-shade: #633ce0;
-  --ion-color-tertiary-tint: #7e57ff;
-  /** success **/
-  --ion-color-success: #10dc60;
-  --ion-color-success-rgb: 16, 220, 96;
-  --ion-color-success-contrast: #ffffff;
-  --ion-color-success-contrast-rgb: 255, 255, 255;
-  --ion-color-success-shade: #0ec254;
-  --ion-color-success-tint: #28e070;
-  /** warning **/
-  --ion-color-warning: #ffce00;
-  --ion-color-warning-rgb: 255, 206, 0;
-  --ion-color-warning-contrast: #ffffff;
-  --ion-color-warning-contrast-rgb: 255, 255, 255;
-  --ion-color-warning-shade: #e0b500;
-  --ion-color-warning-tint: #ffd31a;
-  /** danger **/
-  --ion-color-danger: #f04141;
-  --ion-color-danger-rgb: 245, 61, 61;
-  --ion-color-danger-contrast: #ffffff;
-  --ion-color-danger-contrast-rgb: 255, 255, 255;
-  --ion-color-danger-shade: #d33939;
-  --ion-color-danger-tint: #f25454;
-  /** dark **/
-  --ion-color-dark: #222428;
-  --ion-color-dark-rgb: 34, 34, 34;
-  --ion-color-dark-contrast: #ffffff;
-  --ion-color-dark-contrast-rgb: 255, 255, 255;
-  --ion-color-dark-shade: #1e2023;
-  --ion-color-dark-tint: #383a3e;
-  /** medium **/
-  --ion-color-medium: #989aa2;
-  --ion-color-medium-rgb: 152, 154, 162;
-  --ion-color-medium-contrast: #ffffff;
-  --ion-color-medium-contrast-rgb: 255, 255, 255;
-  --ion-color-medium-shade: #86888f;
-  --ion-color-medium-tint: #a2a4ab;
-  /** light **/
-  --ion-color-light: #f4f5f8;
-  --ion-color-light-rgb: 244, 244, 244;
-  --ion-color-light-contrast: #000000;
-  --ion-color-light-contrast-rgb: 0, 0, 0;
-  --ion-color-light-shade: #d7d8da;
-  --ion-color-light-tint: #f5f6f9;
-}
-/*# sourceMappingURL=variables.css.map */
\ No newline at end of file

src/theme/variables.css.map

-{
-    "version": 3,
-    "mappings": "AAGA,2BAA2B;AAC3B,AAAA,KAAK,CAAC;EACJ,eAAe;EACf,mBAAmB,CAAA,QAAC;EACpB,uBAAuB,CAAA,aAAC;EACxB,4BAA4B,CAAA,QAAC;EAC7B,gCAAgC,CAAA,cAAC;EACjC,yBAAyB,CAAA,QAAC;EAC1B,wBAAwB,CAAA,QAAC;EAEzB,iBAAiB;EACjB,qBAAqB,CAAA,QAAC;EACtB,yBAAyB,CAAA,aAAC;EAC1B,8BAA8B,CAAA,QAAC;EAC/B,kCAAkC,CAAA,cAAC;EACnC,2BAA2B,CAAA,QAAC;EAC5B,0BAA0B,CAAA,QAAC;EAE3B,gBAAgB;EAChB,oBAAoB,CAAA,QAAC;EACrB,wBAAwB,CAAA,aAAC;EACzB,6BAA6B,CAAA,QAAC;EAC9B,iCAAiC,CAAA,cAAC;EAClC,0BAA0B,CAAA,QAAC;EAC3B,yBAAyB,CAAA,QAAC;EAE1B,eAAe;EACf,mBAAmB,CAAA,QAAC;EACpB,uBAAuB,CAAA,YAAC;EACxB,4BAA4B,CAAA,QAAC;EAC7B,gCAAgC,CAAA,cAAC;EACjC,yBAAyB,CAAA,QAAC;EAC1B,wBAAwB,CAAA,QAAC;EAEzB,eAAe;EACf,mBAAmB,CAAA,QAAC;EACpB,uBAAuB,CAAA,YAAC;EACxB,4BAA4B,CAAA,QAAC;EAC7B,gCAAgC,CAAA,cAAC;EACjC,yBAAyB,CAAA,QAAC;EAC1B,wBAAwB,CAAA,QAAC;EAEzB,cAAc;EACd,kBAAkB,CAAA,QAAC;EACnB,sBAAsB,CAAA,YAAC;EACvB,2BAA2B,CAAA,QAAC;EAC5B,+BAA+B,CAAA,cAAC;EAChC,wBAAwB,CAAA,QAAC;EACzB,uBAAuB,CAAA,QAAC;EAExB,YAAY;EACZ,gBAAgB,CAAA,QAAC;EACjB,oBAAoB,CAAA,WAAC;EACrB,yBAAyB,CAAA,QAAC;EAC1B,6BAA6B,CAAA,cAAC;EAC9B,sBAAsB,CAAA,QAAC;EACvB,qBAAqB,CAAA,QAAC;EAEtB,cAAc;EACd,kBAAkB,CAAA,QAAC;EACnB,sBAAsB,CAAA,cAAC;EACvB,2BAA2B,CAAA,QAAC;EAC5B,+BAA+B,CAAA,cAAC;EAChC,wBAAwB,CAAA,QAAC;EACzB,uBAAuB,CAAA,QAAC;EAExB,aAAa;EACb,iBAAiB,CAAA,QAAC;EAClB,qBAAqB,CAAA,cAAC;EACtB,0BAA0B,CAAA,QAAC;EAC3B,8BAA8B,CAAA,QAAC;EAC/B,uBAAuB,CAAA,QAAC;EACxB,sBAAsB,CAAA,QAAC;CACxB",
-    "sources": [
-        "variables.scss"
-    ],
-    "names": [],
-    "file": "variables.css"
-}
\ No newline at end of file