diff --git a/src/app/app.component.ts b/src/app/app.component.ts index bb3adbf..b55aba1 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -8,7 +8,7 @@ import { TabsPage } from '../pages/tabs/tabs'; @Component({ templateUrl: 'app.html' }) -export class Groundr { +export class Urge { rootPage:any = TabsPage; constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen) { diff --git a/src/app/app.module.ts b/src/app/app.module.ts index e7a6512..7cb6823 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -3,9 +3,11 @@ import { BrowserModule } from '@angular/platform-browser'; import { HttpModule } from '@angular/http'; import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular'; import { IonicSwipeAllModule } from 'ionic-swipe-all'; -import { Groundr } from './app.component'; +import { Urge } from './app.component'; import { ChatPage } from '../pages/chat/chat'; +import { CruisePage } from '../pages/cruise/cruise'; +import { CruisesPage } from '../pages/cruises/cruises'; import { GridPage } from '../pages/grid/grid'; import { LightboxPage } from '../pages/lightbox/lightbox'; import { MessagesPage } from '../pages/messages/messages'; @@ -17,8 +19,10 @@ import { SplashScreen } from '@ionic-native/splash-screen'; @NgModule({ declarations: [ - Groundr, + Urge, ChatPage, + CruisePage, + CruisesPage, GridPage, LightboxPage, MessagesPage, @@ -29,7 +33,7 @@ import { SplashScreen } from '@ionic-native/splash-screen'; BrowserModule, HttpModule, IonicSwipeAllModule, - IonicModule.forRoot(Groundr, { + IonicModule.forRoot(Urge, { iconMode: 'ios', modalEnter: 'modal-slide-in', modalLeave: 'modal-slide-out', @@ -39,8 +43,10 @@ import { SplashScreen } from '@ionic-native/splash-screen'; ], bootstrap: [IonicApp], entryComponents: [ - Groundr, + Urge, ChatPage, + CruisePage, + CruisesPage, GridPage, LightboxPage, MessagesPage, diff --git a/src/assets/data/cruises.cje/StoreContent/persistentStore b/src/assets/data/cruises.cje/StoreContent/persistentStore new file mode 100644 index 0000000..7b92382 Binary files /dev/null and b/src/assets/data/cruises.cje/StoreContent/persistentStore differ diff --git a/src/assets/data/cruises.json b/src/assets/data/cruises.json new file mode 100644 index 0000000..07d78e7 --- /dev/null +++ b/src/assets/data/cruises.json @@ -0,0 +1,52 @@ +[{ + "order" : 0, + "location" : { + "address" : { + "street1" : "123 Boylston St", + "street2" : "12th Floor", + "locality" : "Boston", + "region" : "MA", + "postal" : "02110", + "country" : "United States" + }, + "loc" : { + "type" : "Point", + "coordinates" : [ + 0, + 0 + ] + } + }, + "name" : "Dummy1", + "pic" : { + "detail" : "https://placehold.it/1920x1280", + "thumb" : "https://placehold.it/1920x1280" + }, + "text" : "Some text, Some text, Some text, Some text, Some text, Some text, Some text, Some text, Some text, Some text, Some text, Some text, Some text, Some text, Some text, Some text!" +}, +{ + "order" : 1, + "location" : { + "address" : { + "street1" : "", + "street2" : "", + "locality" : "Abu Dhabi", + "region" : "", + "postal" : "", + "country" : "UAE" + }, + "loc" : { + "type" : "Point", + "coordinates" : [ + 0, + 0 + ] + } + }, + "name" : "Dummy2", + "pic" : { + "detail" : "https://placehold.it/1920x1280", + "thumb" : "https://placehold.it/1920x1280" + }, + "text" : "Some text, Some text, Some text, Some text, Some text, Some text, Some text, Some text, Some text, Some text, Some text, Some text, Some text, Some text, Some text, Some text!" +}] diff --git a/src/pages/cruise/cruise.html b/src/pages/cruise/cruise.html new file mode 100644 index 0000000..0063a48 --- /dev/null +++ b/src/pages/cruise/cruise.html @@ -0,0 +1,26 @@ + + + + + + + +
+ + + +

{{this.cruise.name}}

+ + + + Location + + + + {{this.cruise.text}} + + +
+ diff --git a/src/pages/cruise/cruise.scss b/src/pages/cruise/cruise.scss new file mode 100644 index 0000000..02c9aea --- /dev/null +++ b/src/pages/cruise/cruise.scss @@ -0,0 +1,47 @@ +page-cruise { + + ion-content { + background-position: center; + background-repeat: no-repeat; + background-size: contain; + } + + .scroll-content { + overflow-y: hidden; + } + + ion-toolbar { + + .toolbar-background { + background-color: transparent; + } + + .bar-button { + color: #ffffff; + } + } + + .details { + background: rgba(0, 0, 0, 0.8); + bottom: 0; + height: 60px; + left: 0; + position: absolute; + right: 0; + transition: all 250ms 125ms ease-in-out; + + h2 { + margin: 0; + } + + .location { + margin-top: 1.5rem; + } + + &.open { + height: 100%; + overflow-y: scroll; + padding-top: 35px; + } + } +} diff --git a/src/pages/cruise/cruise.ts b/src/pages/cruise/cruise.ts new file mode 100644 index 0000000..a1d7757 --- /dev/null +++ b/src/pages/cruise/cruise.ts @@ -0,0 +1,81 @@ +import { Component } from '@angular/core'; +import { DomSanitizer } from '@angular/platform-browser'; +import { NavController, NavParams } from 'ionic-angular'; + +import { LightboxPage } from '../lightbox/lightbox'; + +@Component({ + selector: 'page-cruise', + templateUrl: 'cruise.html' +}) +export class CruisePage { + + detailsOpen: boolean = false; + cruise: any; + tabNavEl: any; + + constructor(public navCtrl: NavController, public navParams: NavParams, private _sanitizer: DomSanitizer) { + this.cruise = navParams.get('cruise'); + this.tabNavEl = document.querySelector('#tab-nav .tabbar'); + } + + ionViewWillEnter() { + this.tabNavEl.style.display = 'none'; + } + + closeCruise(event) { + this.navCtrl.pop(); + } + + closeCruiseDetails(event) { + if (this.detailsOpen) { + this.detailsOpen = false; + document.getElementById('detail-overlay').classList.remove('open'); + } + } + + getBackground(images) { + // PROD: return this._sanitizer.bypassSecurityTrustStyle('url(https://appsby.fitz.guru/urge/' + images.detail + ')'); + return this._sanitizer.bypassSecurityTrustStyle('url(' + images.detail + ')'); + } + + getFormattedCruiseAddress(location) { + var address = ''; + if (location && location.address) { + address += location.address.street1 ? location.address.street1 + '
' : ''; + address += location.address.street2 ? location.address.street2 + '
' : ''; + address += location.address.locality ? location.address.locality + ', ' : ''; + address += location.address.region ? location.address.region + ' ' : ''; + address += location.address.postal ? location.address.postal + '
' : ''; + address += location.address.country ? location.address.country : ''; + } + return address; + } + + markFavorite(event, cruise) { + console.debug('favorite cruise', { event: event, profile: cruise }); + } + + openCruiseDetails(event) { + if (!this.detailsOpen) { + this.detailsOpen = true; + document.getElementById('detail-overlay').classList.add('open'); + } + } + + showLightbox(event, image) { + if (event.target.classList.contains('scroll-content')) { + this.navCtrl.push(LightboxPage, { + image: image + }); + } + } + + toggleCruiseDetails(event) { + if (!this.detailsOpen) { + this.openCruiseDetails(event); + } else { + this.closeCruiseDetails(event); + } + } +} diff --git a/src/pages/cruises/cruises.html b/src/pages/cruises/cruises.html new file mode 100644 index 0000000..538ee80 --- /dev/null +++ b/src/pages/cruises/cruises.html @@ -0,0 +1,9 @@ + + + + + {{current.name}} + + + + diff --git a/src/pages/cruises/cruises.scss b/src/pages/cruises/cruises.scss new file mode 100644 index 0000000..b722f7f --- /dev/null +++ b/src/pages/cruises/cruises.scss @@ -0,0 +1,27 @@ +page-cruises { + + ion-col { + + &.cruise { + background-size: cover; + border: 1px solid #000000; + box-sizing: border-box; + padding: 0 0 37.5% !important; + position: relative; + + .placename { + bottom: 0.25rem; + box-sizing: border-box; + color: #acacac; + display: inline-block; + left: 0.5rem; + overflow: hidden; + position: absolute; + right: 0.25rem; + text-overflow: ellipsis; + text-shadow: rgba(0, 0, 0, 1); + white-space: nowrap; + } + } + } +} diff --git a/src/pages/cruises/cruises.ts b/src/pages/cruises/cruises.ts new file mode 100644 index 0000000..44e6b85 --- /dev/null +++ b/src/pages/cruises/cruises.ts @@ -0,0 +1,39 @@ +import { Component } from '@angular/core'; +import { DomSanitizer } from '@angular/platform-browser'; +import { NavController } from 'ionic-angular'; + +import { CruiseService } from '../../services/cruises'; +import { CruisePage } from '../cruise/cruise'; + +@Component({ + selector: 'page-cruises', + templateUrl: 'cruises.html', + providers: [ CruiseService ] +}) +export class CruisesPage { + + cruises: any; + tabNavEl: any; + + constructor(public navCtrl: NavController, public cruiseService: CruiseService, private _sanitizer: DomSanitizer) { + cruiseService.load().then((data) => { + this.cruises = data; + }); + this.tabNavEl = document.querySelector('#tab-nav .tabbar'); + } + + ionViewWillEnter() { + this.tabNavEl.style.display = 'flex'; + } + + getBackgroundThumbnail(images) { + // PROD: return this._sanitizer.bypassSecurityTrustStyle('url(https://appsby.fitz.guru/urge/' + images.thumb + ')'); + return this._sanitizer.bypassSecurityTrustStyle('url(' + images.thumb + ')'); + } + + profileTapped(event, cruise) { + this.navCtrl.push(CruisePage, { + cruise: cruise + }); + } +} diff --git a/src/pages/grid/grid.html b/src/pages/grid/grid.html index 4da1d79..19c0fcb 100644 --- a/src/pages/grid/grid.html +++ b/src/pages/grid/grid.html @@ -1,7 +1,7 @@ - + {{current.details.name}} diff --git a/src/pages/grid/grid.ts b/src/pages/grid/grid.ts index 9b9b186..b7fb9a7 100644 --- a/src/pages/grid/grid.ts +++ b/src/pages/grid/grid.ts @@ -2,6 +2,7 @@ import { Component } from '@angular/core'; import { DomSanitizer } from '@angular/platform-browser'; import { NavController } from 'ionic-angular'; +import { ChatPage } from '../chat/chat'; import { ProfileService } from '../../services/profiles'; import { ProfilePage } from '../profile/profile'; @@ -30,6 +31,14 @@ export class GridPage { return this._sanitizer.bypassSecurityTrustStyle('url(https://appsby.fitz.guru/urge/' + pics.thumb + ')'); } + profilePressed(event, profile) { + if (profile.messages && profile.messages.length) { + this.navCtrl.push(ChatPage, { + profile: profile + }); + } + } + profileTapped(event, profile) { this.navCtrl.push(ProfilePage, { profile: profile diff --git a/src/pages/profile/profile.html b/src/pages/profile/profile.html index 44e49f2..b7fc523 100644 --- a/src/pages/profile/profile.html +++ b/src/pages/profile/profile.html @@ -1,4 +1,4 @@ - +