#72 implement tooltips

src/app/service/meme.service.ts

@@ -1,3 +1,4 @@
+import { AlertMessage } from './../shared/alert-message/alert-message.component';
 import { Injectable } from '@angular/core';
 import { Meme } from '../shared/model/meme';
 import { AngularFireStorage } from '@angular/fire/storage';
@@ -12,7 +13,7 @@ export class MemeService {
 
     private storageRef = this.afStore.storage;
 
-    constructor(private userService: UserService, private afStore: AngularFireStorage, private afDatabase: AngularFireDatabase) { }
+    constructor(private userService: UserService, private afStore: AngularFireStorage, private afDatabase: AngularFireDatabase, private alertMessage: AlertMessage) { }
 
     // Left as example - delete on refactoring
     public async getMemes(): Promise<Meme[]> {
@@ -97,8 +98,8 @@ export class MemeService {
         const uid = this.userService.getAuthenticatedUser().uid;
 
         this.afDatabase.list(`uploadedMemes/${uid}`).push(newIds)
-            .then(_ => console.log('UploadedMemes push successful'))
-            .catch(err => console.log(err, 'UploadedMemes push failed'));
+            .then(_ => this.alertMessage.presentAlert('Meme upload successful'))
+            .catch(err => this.alertMessage.presentAlert('Meme upload failed'));
     }
 
     public getUserLikedMemeReferences() {

src/app/service/user.service.ts

@@ -1,3 +1,4 @@
+import { AlertMessage } from './../shared/alert-message/alert-message.component';
 import { Injectable } from '@angular/core';
 import { Observable, BehaviorSubject } from 'rxjs';
 
@@ -22,7 +23,8 @@ export class UserService {
     private router: Router,
     private afAuth: AngularFireAuth,
     private afDatabase: AngularFireDatabase,
-    private afStore: AngularFireStorage) { }
+    private afStore: AngularFireStorage,
+    private alertMessage: AlertMessage) { }
 
 
   public register(email: string, password: string): Promise<any> {
@@ -53,7 +55,7 @@ export class UserService {
     await this.afAuth.signOut();
     this.authStatus.next(null);
     this.authenticatedUser = null;
-    console.log("Logout successful");
+    this.alertMessage.presentAlert("Logout successful");
     this.router.navigateByUrl("/authentication");
   }
 
@@ -62,8 +64,8 @@ export class UserService {
   }
 
   public updateProfile(updatedProfile: UserProfile) {
-    this.afDatabase.object(`users/${this.authenticatedUser.uid}`).update(updatedProfile).then(_ => console.log('Profile update successful'))
-      .catch(err => console.log(err, 'Profile update failed'));
+    this.afDatabase.object(`users/${this.authenticatedUser.uid}`).update(updatedProfile).then(_ => this.alertMessage.presentAlert("Update successful"))
+      .catch(err => this.alertMessage.presentAlert("Update failed"));
   }
 
   public uploadProfilePictureAndUpdateDatabaseEntry(file: File, activeProfile: UserProfile) {
@@ -73,7 +75,7 @@ export class UserService {
       .subscribe(
         uploadSnapshot => {
           if (this.checkIfUploadFinished(uploadSnapshot)) {
-            console.log("Profile picture upload successful");
+            this.alertMessage.presentAlert("Picture upload successful");
 
             this.afStore.ref(pathReference).getDownloadURL().subscribe(
               downloadUrl => {

src/app/shared/alert-message/alert-message.component.html

@@ -0,0 +1,9 @@
+<ion-header>
+  <ion-toolbar>
+    <ion-title>alert-message</ion-title>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content>
+
+</ion-content>

src/app/shared/alert-message/alert-message.component.scss

@@ -0,0 +1,3 @@
+.custom-alert {
+    background: #000;
+}

src/app/shared/alert-message/alert-message.component.spec.ts

@@ -0,0 +1,24 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { IonicModule } from '@ionic/angular';
+
+import { AlertMessage } from './alert-message.component';
+
+describe('AlertMessage', () => {
+  let component: AlertMessage;
+  let fixture: ComponentFixture<AlertMessage>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ AlertMessage ],
+      imports: [IonicModule.forRoot()]
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(AlertMessage);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  }));
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/shared/alert-message/alert-message.component.ts

@@ -0,0 +1,28 @@
+import { Component, OnInit, Injectable } from '@angular/core';
+import { AlertController } from '@ionic/angular';
+
+@Component({
+  selector: 'app-alert-message',
+  templateUrl: './alert-message.component.html',
+  styleUrls: ['./alert-message.component.scss'],
+})
+
+@Injectable({
+  providedIn: 'root'
+})
+
+export class AlertMessage {
+
+  constructor(public alertController: AlertController) { }
+
+  async presentAlert(message: string){
+    const alert = await this.alertController.create({
+      cssClass: 'custom-alert', // global css
+      message: message
+    });
+
+    await alert.present();
+    let result = await alert.onDidDismiss();
+    console.log(result);
+  }
+}

src/app/shared/alert-message/alert-message.module.ts

@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+
+import { IonicModule } from '@ionic/angular';
+
+import { AlertMessage } from './alert-message.component';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonicModule
+  ],
+  declarations: [AlertMessage]
+})
+export class AlertMessageModule {}

src/global.scss

@@ -28,4 +28,8 @@
 .bold-center{
     text-align: center;
     font-weight: bold;
+}
+
+.custom-alert .alert-wrapper {
+    background: #fff;
 }