Merge remote-tracking branch 'refs/remotes/erikhaddad/master'

src/app-header/app-header.component.html

@@ -18,6 +18,9 @@
 
     <!-- USER IS SIGNED IN -->
     <div class="user-active" *ngSwitchCase="true" fxLayout="row" fxLayoutAlign="end center">
+      <a md-icon-button href="/gallery" mdTooltip="Gallery">
+        <md-icon>apps</md-icon>
+      </a>
       <img class="user-image" [src]="userInfo.photoURL" [mdTooltip]="userInfo.displayName" mdTooltipPosition="below" />
       <button class="user-action" md-button (click)="triggerSignOut($event)">Sign Out</button>
     </div>

src/app/app.component.ts

@@ -40,12 +40,9 @@ export class AppComponent {
         iconRegistry.addSvgIcon(
             'avatar_anonymous',
             sanitizer.bypassSecurityTrustResourceUrl('assets/icons/avatar_anonymous.svg'));
-
-        console.log('current userInfo: ', auth.userInfo);
     }
 
     signOut(message: string): void {
-        console.log('output data', message);
         this.auth.signOut();
         this.router.navigate(['/landing']);
 

src/app/app.module.ts

@@ -17,7 +17,6 @@ import {SignInModule} from '../sign-in/sign-in.module';
 
 import {AppComponent} from './app.component';
 import {AppHeaderComponent} from '../app-header/app-header.component';
-import {AvatarComponent} from "../avatar/avatar.component";
 import {AvatarModule} from "../avatar/avatar.module";
 
 @NgModule({

src/avatar/avatar.component.ts

@@ -16,6 +16,7 @@ export class AvatarComponent implements OnInit, OnChanges {
     @Input() model: Avatar;
     @Output() image: EventEmitter<any> = new EventEmitter();
 
+    useCanvas: boolean;
     imageData: string;
 
     setsKeys: string[];
@@ -24,6 +25,7 @@ export class AvatarComponent implements OnInit, OnChanges {
     constructor(private assetService:AssetService) {
         this.setsKeys = this.assetService.assetKeys;
 
+        this.useCanvas = false;
         this.intervalPromise = null;
         this.imageData = "#";
     }
@@ -37,9 +39,9 @@ export class AvatarComponent implements OnInit, OnChanges {
     }
 
     updateImageData(): void {
-        console.log('state of avatar', this.model);
+        //console.log('state of avatar', this.model);
 
-        if (typeof html2canvas !== 'undefined') {
+        if (this.useCanvas && typeof html2canvas !== 'undefined') {
             let that = this;
             setTimeout(function () {
                 html2canvas(document.getElementById('avatar'))

src/common/avatar.model.ts

@@ -1,8 +1,9 @@
 export interface IAvatar {
     $key?: string;
 
-    createdAt: number;
+    createdAt: number|Object;
     author: string;
+    name: string;
     image?: string;
 
     gender: string;
@@ -18,8 +19,9 @@ export interface IAvatar {
 }
 
 export class Avatar implements IAvatar {
-    createdAt: number;
+    createdAt: number|Object;
     author: string;
+    name: string;
     image: string;
 
     gender: string;
@@ -33,8 +35,5 @@ export class Avatar implements IAvatar {
     neck: string;
     ears: string;
 
-    constructor() {
-        //this._createdAt = firebase.database()['ServerValue']['TIMESTAMP'];
-        this.createdAt = +new Date();
-    }
+    constructor() {}
 }

src/common/avatar.service.ts

@@ -2,7 +2,7 @@ import 'rxjs/add/observable/merge';
 import 'rxjs/add/operator/switchMap';
 
 import {Injectable} from '@angular/core';
-import {AngularFire, FirebaseListObservable} from 'angularfire2';
+import {AngularFire, FirebaseListObservable, FirebaseObjectObservable} from 'angularfire2';
 import {AuthService} from '../auth/auth.service';
 import {IAvatar, Avatar} from './avatar.model';
 
@@ -11,12 +11,23 @@ export class AvatarService {
     private _publicAvatars$: FirebaseListObservable<IAvatar[]>;
     private _userAvatars$: FirebaseListObservable<IAvatar[]>;
 
-    constructor(af: AngularFire, auth: AuthService) {
-        const publicAvatarsPath = `/avatars`;
-        this._publicAvatars$ = af.database.list(publicAvatarsPath);
+    private publicAvatarsPath;
+    private userAvatarsPath;
 
-        const userAvatarsPath = `/users/${auth.id}/avatars`;
-        this._userAvatars$ = af.database.list(userAvatarsPath);
+    constructor(private af: AngularFire, auth: AuthService) {
+        this.publicAvatarsPath = `/avatars`;
+        this._publicAvatars$ = this.af.database.list(this.publicAvatarsPath, {
+            query: {
+                orderByChild: 'createdAt'
+            }
+        });
+
+        this.userAvatarsPath = `/users/${auth.id}/avatars`;
+        this._userAvatars$ = this.af.database.list(this.userAvatarsPath, {
+            query: {
+                orderByChild: 'createdAt'
+            }
+        });
     }
 
 
@@ -32,11 +43,12 @@ export class AvatarService {
     createPublicAvatar(avatar:Avatar): firebase.Promise<any> {
         return this._publicAvatars$.push(avatar);
     }
-
+    getPublicAvatar(id: string): FirebaseObjectObservable<any> {
+        return this.af.database.object(this.publicAvatarsPath+'/'+id);
+    }
     removePublicAvatar(avatar: IAvatar): firebase.Promise<any> {
         return this._publicAvatars$.remove(avatar.$key);
     }
-
     updatePublicAvatar(avatar: IAvatar, changes: any): firebase.Promise<any> {
         return this._publicAvatars$.update(avatar.$key, changes);
     }
@@ -45,11 +57,12 @@ export class AvatarService {
     createUserAvatar(avatar:Avatar): firebase.Promise<any> {
         return this._userAvatars$.push(avatar);
     }
-
+    getUserAvatar(id: string): FirebaseObjectObservable<any> {
+        return this.af.database.object(this.userAvatarsPath+'/'+id);
+    }
     removeUserAvatar(avatar: IAvatar): firebase.Promise<any> {
         return this._userAvatars$.remove(avatar.$key);
     }
-
     updateUserAvatar(avatar: IAvatar, changes: any): firebase.Promise<any> {
         return this._userAvatars$.update(avatar.$key, changes);
     }

src/create/create.component.scss

@@ -63,6 +63,7 @@
                 height: 100%;
                 width: 100%;
               }
+
               &.asset-icon-none {
                 height: 24px;
                 width: 24px;
@@ -83,31 +84,13 @@
   .output {
     background-color: rgba(0,0,0,.1);
 
-    /*
-    #avatar {
-      width: 60vh;
-      height: 60vh;
-      position: relative;
-
-      div.avatar-color,
-      div.avatar-asset {
-        width: 60vh;
-        height: 60vh;
-        border-radius: 30vh;
-      }
-
-      img.avatar-image {
-        position: absolute;
-        top: 0;
-        left: 0;
-        width: 60vh;
-        height: 60vh;
-      }
-    }
-    */
     .avatar-component {
       height: 512px;
       width: 512px;
+
+      div.avatar-color {
+        border-radius: 256px;
+      }
     }
 
     #avatar-actions {

src/create/create.component.ts

@@ -7,6 +7,10 @@ import 'rxjs/add/observable/throw';
 import {Avatar} from "../common/avatar.model";
 import {AssetService, IColor} from "../common/asset.service";
 import {AvatarService} from "../common/avatar.service";
+import {ActivatedRoute, Router, Params} from "@angular/router";
+import {AuthService} from "../auth/auth.service";
+
+import * as firebase from 'firebase';
 
 @Component({
     selector: 'create-root',
@@ -31,7 +35,10 @@ export class CreateComponent implements OnInit {
     colors: IColor[];
 
     constructor(iconRegistry: MdIconRegistry,
+                private route: ActivatedRoute,
+                private router: Router,
                 private sanitizer: DomSanitizer,
+                private authService: AuthService,
                 private assetService: AssetService,
                 private avatarService: AvatarService) {
         this.currentAvatar = new Avatar();
@@ -53,18 +60,17 @@ export class CreateComponent implements OnInit {
     }
 
     ngOnInit() {
-        /*
-        // SETS defaults
-        for (let k = 0; k < this.setsKeys.length; k++) {
-            let key = this.setsKeys[k];
-            let value = this.sets[key][this.selectedGender][0];
-
-            this.setConfigValue(key, value);
-        }
-        */
-
-        // SETS random values
-        this.renderRandom();
+        //console.log('attempting to load avatar id', this.route.params);
+        this.route.params
+            .switchMap((params: Params) => this.avatarService.getPublicAvatar(params['id']))
+            .subscribe((avatar: Avatar) => {
+                if (typeof avatar.createdAt !== 'undefined') {
+                    this.currentAvatar = avatar;
+                } else {
+                    // SETS random values
+                    this.renderRandom();
+                }
+            });
     }
 
     setConfigValue(key:string, val:string|null) {
@@ -85,25 +91,59 @@ export class CreateComponent implements OnInit {
     }
 
     updateImageData(): void {
-        console.log('state of currentAvatar', this.currentAvatar);
-
         if (typeof html2canvas !== 'undefined') {
             let that = this;
             setTimeout(function () {
                 html2canvas(document.getElementById('avatar'))
                     .then(function (canvas) {
                         (document.getElementById('save') as HTMLAnchorElement).href = that.imageData = canvas.toDataURL('image/png');
-
-                        //console.log('new image data', that.image);
                     });
             }, 2000);
         }
     }
 
     uploadAvatar(): void {
+        this.currentAvatar.author = this.authService.userInfo.uid;
+        this.currentAvatar.name = this.authService.userInfo.displayName;
+        this.currentAvatar.createdAt = firebase.database.ServerValue.TIMESTAMP;
+
         // For demo, upload all to public, user-specific, and Firebase storage
         this.avatarService.createPublicAvatar(this.currentAvatar);
         this.avatarService.createUserAvatar(this.currentAvatar);
+
+        /*
+        let randomName = this.randomString();
+        let storage = firebase.storage();
+        let storageRef = storage.ref();
+        let userImagesRef = storageRef.child('users/'+this.authService.userInfo.uid+'/'+randomName);
+
+        var image = new Image();
+        image.name = randomName;
+        image.src = this.imageData;
+        let uploadTask = userImagesRef.put(this.imageData);
+
+        uploadTask.on(firebase.storage.TaskEvent.STATE_CHANGED, // or 'state_changed'
+            function (snapshot) {
+                // Get task progress, including the number of bytes
+                // uploaded and the total number of bytes to be uploaded
+                let progress = (snapshot.bytesTransferred / snapshot.totalBytes) * 100;
+                console.log('Upload is ' + progress + '% done');
+                switch (snapshot.state) {
+                    case firebase.storage.TaskState.PAUSED: // or 'paused'
+                        console.info('Upload is paused');
+                        break;
+                    case firebase.storage.TaskState.RUNNING: // or 'running'
+                        console.info('Upload is running');
+                        break;
+                }
+            }, function (error) {
+                // Upload failed
+                console.error(error);
+            }, function () {
+                // Upload completed successfully
+                console.log('Upload was successful');
+            });
+        */
     }
 
     addAssetRandom(key, list): void {
@@ -132,4 +172,27 @@ export class CreateComponent implements OnInit {
             this.renderRandom();
         }
     }
+    /**
+     * RANDOM STRING GENERATOR
+     *
+     * Info:      http://stackoverflow.com/a/27872144/383904
+     * Use:       randomString(length [,"A"] [,"N"] );
+     * Default:   return a random alpha-numeric string
+     * Arguments: If you use the optional "A", "N" flags:
+     *            "A" (Alpha flag)   return random a-Z string
+     *            "N" (Numeric flag) return random 0-9 string
+     */
+    private randomString(len?:number, an?:string) {
+        if (typeof len === 'undefined') {
+            len = 17;
+        }
+
+        an = an&&an.toLowerCase();
+        let str="", i=0, min=an=="a"?10:0, max=an=="n"?10:62;
+        for(;i++<len;){
+            let r = Math.random()*(max-min)+min <<0;
+            str += String.fromCharCode(r+=r>9?r<36?55:61:48);
+        }
+        return str;
+    }
 }

src/create/create.module.ts

@@ -13,7 +13,8 @@ import {AvatarService} from '../common/avatar.service';
 import {AvatarModule} from "../avatar/avatar.module";
 
 const routes: Routes = [
-    {path: 'create', component: CreateComponent, canActivate: [AuthGuard]}
+    {path: 'create', component: CreateComponent, canActivate: [AuthGuard]},
+    {path: 'create/:id', component: CreateComponent, canActivate: [AuthGuard]}
 ];
 
 @NgModule({

src/gallery/gallery.component.html

@@ -1,14 +1,18 @@
 <div class="gallery-container">
   <div class="gallery">
-    <!--<h1>Gallery of Avatars</h1>-->
-    <div class="avatars-grid" *ngIf="publicAvatars">
+    <h1>Gallery of Avatars</h1>
+
+    <div class="avatars-grid" *ngIf="publicAvatars && publicAvatars.length > 0">
       <md-grid-list cols="3" rowHeight="240px" gutterSize="12px">
-        <md-grid-tile *ngFor="let avatar of publicAvatars | async" colspan="1" rowspan="1">
-          <avatar [model]="avatar"></avatar>
+        <md-grid-tile *ngFor="let avatar of publicAvatars" colspan="1" rowspan="1">
+          <a [href]="'create/'+avatar.$key" [mdTooltip]="avatar.name">
+            <avatar [model]="avatar"></avatar>
+          </a>
         </md-grid-tile>
       </md-grid-list>
     </div>
-    <div class="avatars-empty" *ngIf="!publicAvatars" fxLayout="column" fxLayoutAlign="center center">
+
+    <div class="avatars-empty" *ngIf="!publicAvatars || publicAvatars.length == 0" fxLayout="column" fxLayoutAlign="center center">
       <img class="placeholder" src="/assets/images/gallery-placeholder.gif" />
     </div>
   </div>

src/gallery/gallery.component.scss

@@ -5,12 +5,12 @@
 
 .gallery {
   width: 960px;
-  margin: 0 auto;
+  margin: 0 auto 64px;
   padding: 64px 0;
 
   h1 {
     margin: 0;
-    padding: 12px 0;
+    padding: 12px 0 36px;
     text-align: center;
     font-weight: 300;
   }