- Hooked up profile submission

- Fixed swipe actions (between profiles / detail toggle)

package.json

@@ -1,8 +1,8 @@
 {
-  "name": "urge",
+  "name": "looking",
-  "version": "0.0.1",
+  "version": "2.0.0",
-  "author": "Ionic Framework",
+  "author": "Mike Fitzpatrick",
-  "homepage": "http://ionicframework.com/",
+  "homepage": "http://fitz.guru/",
   "private": true,
   "scripts": {
     "clean": "ionic-app-scripts clean",

src/pages/grid/grid.ts

@@ -43,6 +43,7 @@ export class GridPage {
   profileTapped(event, profile) {
     this.navCtrl.push(ProfilePage, {
       profile: profile,
+      profileService: this.profileService
     });
   }
 }

src/pages/profile/profile.html

@@ -1,4 +1,4 @@
-<ion-content no-padding [style.backgroundImage]="getBackground(profile.details.pic)" (press)="showLightbox($event, profile.details.pic.detail)" on-swipe-left="nextProfile($event)" on-swipe-right="previousProfile($event)">
+<ion-content no-padding swipeAll [style.backgroundImage]="getBackground(profile.details.pic)" (press)="showLightbox($event, profile.details.pic.detail)" (swipeleft)="nextProfile($event)" (swiperight)="previousProfile($event)">
   <ion-toolbar class="profile-toolbar">
     <ion-buttons left>
       <button ion-button icon-only (tap)="closeProfile($event)">
@@ -8,6 +8,14 @@
     <ion-title>{{this.profile.details.name}}</ion-title>
   </ion-toolbar>
 
+  <button ion-button icon-only clear large (tap)="previousProfile($event)" class="profile-nav profile-previous">
+    <ion-icon name="arrow-back"></ion-icon>
+  </button>
+
+  <button ion-button icon-only clear large (tap)="nextProfile($event)" class="profile-nav profile-next">
+    <ion-icon name="arrow-forward"></ion-icon>
+  </button>
+
   <button ion-button icon-only clear large (tap)="openChat($event, this.profile)" class="button-chat">
     <ion-icon name="ios-chatboxes"></ion-icon>
   </button>
@@ -15,7 +23,7 @@
   <div id="detail-overlay" class="details">
     <ion-grid>
       <ion-row nowrap align-items-center justify-content-between>
-        <ion-col col-12 text-center (click)="toggleProfileDetails($event)" class="detail-toggle">
+        <ion-col col-12 text-center swipeAll (click)="toggleProfileDetails($event)" (swipeup)="toggleProfileDetails($event)" (swipedown)="toggleProfileDetails($event)" class="detail-toggle">
           <ion-icon name="arrow-down"></ion-icon>
         </ion-col>
       </ion-row>

src/pages/profile/profile.scss

@@ -32,6 +32,31 @@ page-profile {
     }
   }
 
+  .profile-nav {
+    color: #ffffff;
+    display: none;
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    z-index: 100;
+
+    @media screen and (min-width: 769px) {
+      display: block;
+
+      &.hidden {
+        display: none;
+      }
+    }
+
+    &.profile-next {
+      right: 0;
+    }
+
+    &.profile-previous {
+      left: 0;
+    }
+  }
+
   .button-chat {
     background-color: #050505;
     border-radius: 50%;

src/pages/profile/profile.ts

@@ -4,22 +4,24 @@ import { NavController, NavParams } from 'ionic-angular';
 
 import { ChatPage } from '../chat/chat';
 import { LightboxPage } from '../lightbox/lightbox';
-import { ProfileService } from '../../services/profiles';
 
 @Component({
   selector: 'page-profile',
-  templateUrl: 'profile.html',
+  templateUrl: 'profile.html'
-  providers: [ ProfileService ]
 })
 
 export class ProfilePage {
 
   detailsOpen: boolean = false;
   profile: any;
+  profileService: any;
+  profileType: string = 'all';
   tabNavEl: any;
 
-  constructor(public navCtrl: NavController, public navParams: NavParams, public profileService: ProfileService, private _sanitizer: DomSanitizer) {
+  constructor(public navCtrl: NavController, public navParams: NavParams, private _sanitizer: DomSanitizer) {
     this.profile = navParams.get('profile');
+    this.profileType = this.profile.submitted ? 'submitted' : 'verified';
+    this.profileService = navParams.get('profileService');
     this.tabNavEl = document.querySelector('#tab-nav .tabbar');
   }
 
@@ -34,6 +36,8 @@ export class ProfilePage {
   closeProfileDetails(event) {
     if (this.detailsOpen) {
       this.detailsOpen = false;
+      document.querySelector('.profile-nav.profile-next').classList.remove('hidden');
+      document.querySelector('.profile-nav.profile-previous').classList.remove('hidden');
       document.querySelector('.profile-toolbar').classList.remove('hidden');
       document.getElementById('detail-overlay').classList.remove('open');
     }
@@ -48,8 +52,7 @@ export class ProfilePage {
   }
 
   nextProfile(event) {
-    this.profile = this.profileService.getNextProfile(this.profile._id);
+    this.profile = this.profileService.getNextProfile(this.profile._id, this.profileType);
-    this.navCtrl.setRoot(this.navCtrl.getActive().component);
   }
 
   openChat(event, profile) {
@@ -61,14 +64,15 @@ export class ProfilePage {
   openProfileDetails(event) {
     if (!this.detailsOpen) {
       this.detailsOpen = true;
+      document.querySelector('.profile-nav.profile-next').classList.add('hidden');
+      document.querySelector('.profile-nav.profile-previous').classList.add('hidden');
       document.querySelector('.profile-toolbar').classList.add('hidden');
       document.getElementById('detail-overlay').classList.add('open');
     }
   }
 
   previousProfile(event) {
-    this.profile = this.profileService.getPreviousProfile(this.profile._id);
+    this.profile = this.profileService.getPreviousProfile(this.profile._id, this.profileType);
-    this.navCtrl.setRoot(this.navCtrl.getActive().component);
   }
 
   showLightbox(event, image) {

src/pages/tell/tell.html

@@ -15,11 +15,11 @@
     <div class="item item-block item-input item-label-stacked file-upload-wrapper">
       <div class="input-wrapper">
         <label class="label">Upload a photo</label>
-        <label class="upload-trigger" for="pic-upload">
+        <label class="upload-trigger" for="pic-upload" class="file-label">
           <ion-icon name="person"></ion-icon>
         </label>
         <div class="input">
-          <input type="file" id="pic-upload" formControlName="pic" name="pic" class="file-input" />
+          <input type="file" id="pic-upload" name="pic" class="file-input" />
         </div>
       </div>
     </div>
@@ -27,6 +27,10 @@
       <ion-label stacked>Display name</ion-label>
       <ion-input type="text" formControlName="name" name="name" placeholder="Please enter text here"></ion-input>
     </ion-item>
+    <ion-item>
+      <ion-label stacked>Email Address</ion-label>
+      <ion-input type="email" formControlName="email" name="email" placeholder="Please enter text here"></ion-input>
+    </ion-item>
     <ion-item>
       <ion-label stacked>About you</ion-label>
       <ion-textarea formControlName="about" name="about" placeholder="Please enter text here"></ion-textarea>
@@ -36,7 +40,7 @@
       <ion-textarea formControlName="messages" name="messages" placeholder="Please enter text here"></ion-textarea>
     </ion-item>
     <div padding>
-      <button ion-button type="submit" block (click)="saveUserSubmission()">Submit</button>
+      <button ion-button type="submit" block (click)="saveUserSubmission($event)">Submit</button>
     </div>
   </form>
 </ion-content>

src/pages/tell/tell.ts

@@ -12,28 +12,75 @@ import { ProfileService } from '../../services/profiles';
 export class TellYourStoryPage {
 
   tabNavEl: any;
+  fileInput: any;
+  fileLabel: any;
   userSubmissionForm: FormGroup;
 
-  constructor(public navCtrl: NavController, private formBuilder: FormBuilder) {
+  constructor(public navCtrl: NavController, public profileService: ProfileService, private formBuilder: FormBuilder) {
     this.tabNavEl = document.querySelector('#tab-nav .tabbar');
 
     this.userSubmissionForm = this.formBuilder.group({
       name: [''],
       about: [''],
-      pic: [''],
+      email: [''],
       messages: ['']
     });
   }
 
   ionViewWillEnter() {
     this.tabNavEl.style.display = 'none';
+    this.fileInput = document.querySelector('.file-input');
+    this.fileLabel = document.querySelector('.file-label');
+
+    this.fileInput.addEventListener('change', this.handleFileChange.bind(this), false);
   }
 
   close(event) {
     this.navCtrl.pop();
   }
 
-  saveUserSubmission() {
+  handleFileChange(event) {
+    this.fileLabel.style.backgroundImage = this.fileInput.files[0];
+    //this.fileLabel.querySelector('ion-icon').style.display = none;
+  }
 
+  saveUserSubmission(event) {
+    var fileInput = document.querySelector('.file-input');
+
+    // Setup submission for insert
+    var submission = {
+      profile: {
+        details: {
+          name: this.userSubmissionForm.value.name,
+          email: this.userSubmissionForm.value.email,
+          about: this.userSubmissionForm.value.about,
+          location: this.userSubmissionForm.value.location
+        },
+        messages: [
+          {
+            text: "What is your your experience dating in the LGBT community?",
+            isUser: false,
+            timestamp: (Date.now() - 900000)
+          },
+          {
+            text: this.userSubmissionForm.value.messages,
+            isUser: true,
+            timestamp: Date.now()
+          }
+        ],
+        submitted: true
+      },
+      image: this.fileInput.files[0],
+    };
+
+    submission.profile = JSON.stringify(submission.profile);
+
+    this.profileService.doProfileSubmission(submission,
+      function (data) {
+        console.debug('saveUserSubmission Success', data);
+      },
+      function (data, status) {
+        console.error('saveUserSubmission Error', data, status);
+      });
   }
 }

src/services/profiles.ts

@@ -7,6 +7,7 @@ export class ProfileService {
 
   endpoint: string = 'https://api.fitz.guru/urnings/profiles';
   fallback: string = 'assets/data/profiles.json';
+  epSubmission: string = '/submission';
   epSubmitted: string = '/submitted';
   epVerified: string = '/verified';
   idMap: any;
@@ -19,8 +20,8 @@ export class ProfileService {
   }
 
   load() {
-    if (this.profiles) {
+    if (this.profiles && this.profiles.all) {
-      return Promise.resolve(this.profiles);
+      return Promise.resolve(this.profiles.all);
     }
 
     return new Promise(resolve => {
@@ -64,7 +65,36 @@ export class ProfileService {
         error => {
           this.doGetRequest(this.fallback, resolve, type);
         }
-      )
+      );
+  }
+
+  doProfileSubmission(submission, success = false, failure = false) {
+    success = success || function (data) {
+        console.debug('doProfileSubmission Success', data);
+      };
+
+    failure = failure || function (data, status) {
+        console.error('doProfileSubmission Error', data, status);
+      };
+
+    var httpOptions = {
+      headers: {
+        'Content-Type': 'multipart/form-data'
+      }
+    };
+
+    var formData = new FormData();
+    for (let property in submission) {
+      formData.append(property, submission[property]);
+    }
+
+    this.http
+      .post(this.endpoint + this.epSubmission, formData, httpOptions)
+      .subscribe(data => {
+        success(data);
+      }, error => {
+        failure(error, false);
+      });
   }
 
   getNextProfile(id, type = 'all') {
@@ -83,8 +113,8 @@ export class ProfileService {
     return this.profiles.all;
   }
 
-  getProfileById(id) {
+  getProfileById(id, type = 'all') {
-    return this.profiles[this.idMap[id]];
+    return this.profiles[type][this.idMap[type][id]];
   }
 
   getSubmittedProfiles() {