ionic-firebase integration

.gitignore

@@ -21,6 +21,7 @@ npm-debug.log*
 coverage/
 dist/
 node_modules/
+src/environments
 tmp/
 temp/
 hooks/

package.json

@@ -17,22 +17,24 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/common": "7.1.3",
-    "@angular/core": "7.1.3",
-    "@angular/forms": "7.1.3",
+    "@angular/common": "~7.1.0",
+    "@angular/core": "~7.1.0",
+    "@angular/fire": "^5.1.1",
+    "@angular/forms": "~7.1.0",
     "@angular/http": "~7.1.0",
-    "@angular/platform-browser": "7.1.3",
-    "@angular/platform-browser-dynamic": "7.1.3",
+    "@angular/platform-browser": "7.1.0",
+    "@angular/platform-browser-dynamic": "7.1.0",
     "@angular/pwa": "0.11.0",
-    "@angular/router": "7.1.3",
+    "@angular/router": "7.1.0",
     "@angular/service-worker": "~7.1.0",
     "@ionic-native/core": "5.0.0-beta.15",
     "@ionic-native/in-app-browser": "5.0.0-beta.15",
     "@ionic-native/splash-screen": "5.0.0-beta.15",
     "@ionic-native/status-bar": "5.0.0-beta.15",
-    "@ionic/angular": "4.0.0-beta.19",
+    "@ionic/angular": "^4.0.0-beta.16",
     "@ionic/storage": "^2.1.3",
-    "cordova-android": "7.0.0",
+    "angularfire2": "^5.1.1",
+    "cordova-android": "^7.0.0",
     "cordova-ios": "^4.5.5",
     "cordova-plugin-device": "^2.0.2",
     "cordova-plugin-inappbrowser": "^3.0.0",
@@ -42,18 +44,19 @@
     "cordova-plugin-statusbar": "^2.4.2",
     "cordova-plugin-whitelist": "^1.3.2",
     "core-js": "^2.5.7",
+    "firebase": "^5.7.2",
     "rxjs": "6.3.3",
     "sw-toolbox": "3.6.0",
     "zone.js": "^0.8.26"
   },
   "devDependencies": {
     "@angular-devkit/architect": "0.11.0",
     "@angular-devkit/build-angular": "0.11.0",
-    "@angular-devkit/core": "7.1.2",
-    "@angular-devkit/schematics": "7.1.2",
+    "@angular-devkit/core": "7.1.0",
+    "@angular-devkit/schematics": "7.1.0",
     "@angular/cli": "7.1.0",
-    "@angular/compiler": "7.1.3",
-    "@angular/compiler-cli": "7.1.3",
+    "@angular/compiler": "7.1.0",
+    "@angular/compiler-cli": "7.1.0",
     "@angular/language-service": "~7.1.0",
     "@ionic/angular-toolkit": "1.2.0",
     "@ionic/lab": "^1.0.0",
@@ -90,4 +93,4 @@
       "cordova-plugin-ionic-keyboard": {}
     }
   }
-}
+}

src/app/app-routing.module.ts

@@ -1,6 +1,6 @@
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
-import { CheckTutorial } from './providers/check-tutorial.service';
+// import { CheckTutorial } from './providers/check-tutorial.service';
 
 const routes: Routes = [
   {
@@ -31,7 +31,7 @@ const routes: Routes = [
   {
     path: 'tutorial',
     loadChildren: './pages/tutorial/tutorial.module#TutorialModule',
-    canLoad: [CheckTutorial]
+    // canLoad: [CheckTutorial]
   }
 ];
 

src/app/app.component.html

@@ -14,7 +14,7 @@
             Navigate
           </ion-list-header>
           <ion-menu-toggle auto-hide="false" *ngFor="let p of appPages; let i = index">
-            <ion-item [routerLink]="p.url">
+            <ion-item button (click)="navigate(p.url)" [disabled]="!loggedIn">
               <ion-icon slot="start" [name]="p.icon"></ion-icon>
               <ion-label>
                 {{p.title}}
@@ -73,7 +73,7 @@
           </ion-menu-toggle>
 
           <ion-menu-toggle auto-hide="false">
-            <ion-item routerLink="/support">
+            <ion-item button (click)="navigate('/support')" [disabled]='true'>
               <ion-icon slot="start" name="help"></ion-icon>
               <ion-label>
                 Support

src/app/app.component.ts

@@ -17,22 +17,22 @@ export class AppComponent implements OnInit {
   appPages = [
     {
       title: 'Schedule',
-      url: '/app/tabs/schedule',
+      url: '/app/tabs/(schedule:schedule)',
       icon: 'calendar'
     },
     {
       title: 'Speakers',
-      url: '/app/tabs/speakers',
+      url: '/app/tabs/(speakers:speakers)',
       icon: 'contacts'
     },
     {
       title: 'Map',
-      url: '/app/tabs/map',
+      url: '/app/tabs/(map:map)',
       icon: 'map'
     },
     {
       title: 'About',
-      url: '/app/tabs/about',
+      url: '/app/tabs/(about:about)',
       icon: 'information-circle'
     }
   ];
@@ -89,15 +89,19 @@ export class AppComponent implements OnInit {
     });
   }
 
+  navigate(url: string) {
+    return this.router.navigateByUrl(url);
+  }
+
   logout() {
     this.userData.logout().then(() => {
-      return this.router.navigateByUrl('/app/tabs/schedule');
+      return this.openTutorial();
     });
   }
 
   openTutorial() {
     this.menu.enable(false);
-    this.storage.set('ion_did_tutorial', false);
+    this.storage.set('ion_did_tutorial', 'false');
     this.router.navigateByUrl('/tutorial');
   }
 }

src/app/app.module.ts

@@ -7,10 +7,14 @@ import { StatusBar } from '@ionic-native/status-bar/ngx';
 import { IonicModule } from '@ionic/angular';
 import { IonicStorageModule } from '@ionic/storage';
 
+import { environment } from '../environments/environment';
+import { AngularFireModule } from 'angularfire2';
+import { AngularFirestoreModule } from 'angularfire2/firestore';
+import { AngularFireStorageModule } from 'angularfire2/storage';
+import { AngularFireAuthModule } from 'angularfire2/auth';
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
 import { ServiceWorkerModule } from '@angular/service-worker';
-import { environment } from '../environments/environment';
 
 @NgModule({
   imports: [
@@ -21,7 +25,11 @@ import { environment } from '../environments/environment';
     IonicStorageModule.forRoot(),
     ServiceWorkerModule.register('ngsw-worker.js', {
       enabled: environment.production
-    })
+    }),
+    AngularFireModule.initializeApp(environment.firebase, 'ionic-conference'),
+    AngularFireAuthModule,
+    AngularFirestoreModule,
+    AngularFireStorageModule
   ],
   declarations: [AppComponent],
   providers: [InAppBrowser, SplashScreen, StatusBar],

src/app/directive/drop-zone.directive.ts

@@ -0,0 +1,31 @@
+import { Directive, HostListener, Output, EventEmitter } from '@angular/core';
+
+@Directive({
+  selector: '[appDropZone]'
+})
+export class DropZoneDirective {
+
+  @Output() dropped =  new EventEmitter<FileList>();
+  @Output() hovered =  new EventEmitter<boolean>();
+
+  constructor() { }
+
+  @HostListener('drop', ['$event'])
+  onDrop($event) {
+    $event.preventDefault();
+    this.dropped.emit($event.dataTransfer.files);
+    this.hovered.emit(false);
+  }
+
+  @HostListener('dragover', ['$event'])
+  onDragOver($event) {
+    $event.preventDefault();
+    this.hovered.emit(true);
+  }
+
+  @HostListener('dragleave', ['$event'])
+  onDragLeave($event) {
+    $event.preventDefault();
+    this.hovered.emit(false);
+  }
+}

src/app/models.ts

@@ -0,0 +1,73 @@
+// These are the categories for filtering stuff
+export interface Track {
+  id?: string;
+  name: string;
+}
+
+export interface Speaker {
+  id?: string;
+  name: string;
+  profilePic?: string;
+  twitter?: string;
+  github?: string;
+  instagram?: string;
+  about?: string;
+  location?: string;
+  email: string;
+  phone?: string;
+  sessions?: { id: string, name: string }[];   // session id & name
+}
+
+export interface Session {
+  id?: string;
+  name: string;
+  date: string;         // 2018-12-06
+  timeStart: string;    // 15:30 for 3:30pm
+  timeEnd?: string;
+  location?: string;
+  description?: string;
+  speakerIDs: string[];   // speaker's id
+  tracks: string[];     //  name of track
+  hide?: boolean;
+}
+
+export interface Map {
+  id?: string;
+  name: string;
+  lat: number;
+  lng: number;
+  center?: boolean;
+}
+
+export interface User {
+  id?: string;
+  avatar?: string;
+  username: string;
+  password: string;
+  email: string;
+  favorites: { id: string, name: string }[];       // session's id and name.
+  trackFilter: { name: string, isChecked: boolean }[];
+}
+
+export interface Support {
+  id?: string;
+  userId: string;
+  date: string;             // 2018-12-19
+  support: string;
+}
+
+export interface PartOfDay {
+  indexKey?: number;
+  name: string;    // morning, afternoon, evening, overnight
+  timeFrom: string;
+  timeTo: string;
+}
+
+export interface Schedule {
+  date: string; // 2018-12-06
+  groups: {
+    indexKey: number
+    partOfDay: string,
+    sessions: any[]
+  }[];
+}

src/app/pages/about/about.html

@@ -1,5 +1,5 @@
 <ion-header>
-  <ion-toolbar>
+  <ion-toolbar color="primary">
     <ion-buttons slot="start">
       <ion-menu-button></ion-menu-button>
     </ion-buttons>

src/app/pages/about/about.ts

@@ -8,6 +8,7 @@ import { PopoverPage } from '../about-popover/about-popover';
   selector: 'page-about',
   templateUrl: 'about.html',
   styleUrls: ['./about.scss'],
+  encapsulation: ViewEncapsulation.None
 })
 export class AboutPage {
   conferenceDate = '2047-05-17';

src/app/pages/account/account.html

@@ -1,5 +1,5 @@
 <ion-header>
-  <ion-toolbar>
+  <ion-toolbar color="primary">
     <ion-buttons slot="start">
       <ion-menu-button></ion-menu-button>
     </ion-buttons>
@@ -8,16 +8,25 @@
 </ion-header>
 
 <ion-content class="outer-content">
-  <div padding-top text-center *ngIf="username">
-    <img src="https://www.gravatar.com/avatar?d=mm&s=140" alt="avatar">
-    <h2>{{username}}</h2>
+  <div padding-top text-center *ngIf="user && !loadImage">
+    <img *ngIf="user.avatar" [src]="user.avatar" alt="avatar">
+    <img *ngIf="!user.avatar" src="https://www.gravatar.com/avatar?d=mm&s=140" alt="avatar">
+    <h2>{{user.username}}</h2>
 
     <ion-list inset>
-      <ion-item (click)="updatePicture()">Update Picture</ion-item>
+      <ion-item (click)="loadImage=true">Update Picture</ion-item>
       <ion-item (click)="changeUsername()">Change Username</ion-item>
+      <ion-item (click)="changeEmail()">Change Email</ion-item>
       <ion-item (click)="changePassword()">Change Password</ion-item>
       <ion-item (click)="support()">Support</ion-item>
       <ion-item (click)="logout()">Logout</ion-item>
     </ion-list>
+    <p *ngIf="succeed">{{ jobDescription }}</p>
   </div>
+
+  <upload-image *ngIf="user && loadImage"
+        [username]="user.username"
+        (updateUser)="updatePicture($event)"
+        (exit)="onExit()">
+  </upload-image>
 </ion-content>

src/app/pages/account/account.module.ts

@@ -4,6 +4,9 @@ import { IonicModule } from '@ionic/angular';
 
 import { AccountPage } from './account';
 import { AccountPageRoutingModule } from './account-routing.module';
+import { UploadImageComponent } from '../upload-image/upload-image.component';
+import { FileSizePipe } from '../../pipe/file-size.pipe';
+import { DropZoneDirective } from '../../directive/drop-zone.directive';
 
 @NgModule({
   imports: [
@@ -13,6 +16,9 @@ import { AccountPageRoutingModule } from './account-routing.module';
   ],
   declarations: [
     AccountPage,
+    UploadImageComponent,
+    FileSizePipe,
+    DropZoneDirective
   ]
 })
 export class AccountModule { }