Init code

README.md

@@ -0,0 +1,10 @@
+DreamHouse Web App
+------------------
+
+This application is a mobile web app for DreamHouse Realty. It will run on Heroku and use Heroku Connect to get data from Salesforce.
+
+This application is designed for the Trailhead Project [Develop a Heroku App That Integrates with Salesforce](https://trailhead.salesforce.com/content/learn/projects/develop-heroku-applications).
+
+<!-- a href="https://heroku.com/deploy">
+  <img src="https://www.herokucdn.com/deploy/button.svg" alt="Deploy">
+</a -->

app.json

@@ -0,0 +1,11 @@
+{
+  "name": "dreamhouse-web-app",
+  "description": "DreamHouse Web App",
+  "keywords": [
+    "app-cloud"
+  ],
+  "repository": "https://github.com/YOUR_USERNAME/intro-to-heroku",
+  "addons": [
+    "heroku-postgresql"
+  ]
+}

app/app.html

@@ -0,0 +1,35 @@
+<ion-menu [content]="content">
+
+  <img src="images/logo.png" style="width: 100px;margin-left:84px"/>
+
+  <ion-content>
+    <ion-list>
+      <ion-list-header>Home Search</ion-list-header>
+      <button menuClose ion-item *ngFor="let p of pages" (click)="openPage(p)">
+        <ion-icon item-left name="{{p.icon}}"></ion-icon>
+        {{p.title}}
+      </button>
+      <ion-list-header>Mortgage</ion-list-header>
+      <button menuClose ion-item >
+        <ion-icon item-left name="checkbox"></ion-icon>
+        Get Pre-Approved
+      </button>
+      <button menuClose ion-item >
+        <ion-icon item-left name="cart"></ion-icon>
+        Shop Rates
+      </button>
+      <ion-list-header>Account</ion-list-header>
+      <button menuClose ion-item >
+        <ion-icon item-left name="person"></ion-icon>
+        Profile
+      </button>
+      <button menuClose ion-item >
+        <ion-icon item-left name="settings"></ion-icon>
+        Settings
+      </button>
+    </ion-list>
+  </ion-content>
+
+</ion-menu>
+
+<ion-nav id="nav" [root]="rootPage" #content swipeBackEnabled="false"></ion-nav>

app/app.js

@@ -0,0 +1,51 @@
+import {ViewChild} from '@angular/core';
+import {HTTP_PROVIDERS} from '@angular/http';
+import {App, Platform} from 'ionic-angular';
+
+import {WelcomePage} from './pages/welcome/welcome';
+import {PropertyListPage} from './pages/property-list/property-list';
+import {BrokerListPage} from './pages/broker-list/broker-list';
+import {FavoriteListPage} from './pages/favorite-list/favorite-list';
+import {PropertyService} from './services/property-service';
+import {BrokerService} from './services/broker-service';
+
+@App({
+    templateUrl: 'build/app.html',
+    config: {
+        mode: "ios"
+    },
+    queries: {
+        nav: new ViewChild('content')
+    },
+    providers: [HTTP_PROVIDERS, PropertyService, BrokerService]
+})
+class MyApp {
+
+    static get parameters() {
+        return [[Platform]];
+    }
+
+    constructor(platform) {
+
+        this.platform = platform;
+
+        this.pages = [
+            {title: 'Welcome', component: WelcomePage, icon: "bookmark"},
+            {title: 'Properties', component: PropertyListPage, icon: "home"},
+            {title: 'Brokers', component: BrokerListPage, icon: "people"},
+            {title: 'Favorites', component: FavoriteListPage, icon: "star"}
+        ];
+
+        this.rootPage = WelcomePage;
+        this.initializeApp();
+    }
+
+    initializeApp() {
+
+    }
+
+    openPage(page) {
+        this.nav.setRoot(page.component);
+    }
+
+}

app/pages/broker-details/broker-details.html

@@ -0,0 +1,42 @@
+<ion-navbar primary *navbar>
+    <button menuToggle>
+        <ion-icon name="menu"></ion-icon>
+    </button>
+    <ion-title>Broker</ion-title>
+</ion-navbar>
+
+<ion-content class="broker">
+    <div *ngIf="broker" class="selection">
+        <ion-card>
+            <ion-card-content>
+                <img src="{{broker.picture}}"/>
+                <h2>{{broker.name}}</h2>
+                <h3>{{broker.title}}</h3>
+            </ion-card-content>
+
+            <ion-list>
+                <a href="tel:{{broker.Phone__c}}" ion-item>
+                    <ion-icon name="call" item-left></ion-icon>
+                    <p>Call Office</p>
+                    <h2>{{broker.phone}}</h2>
+                </a>
+                <a href="tel:{{broker.phone}}" ion-item>
+                    <ion-icon name="call" item-left></ion-icon>
+                    <p>Call Mobile</p>
+                    <h2>{{broker.mobilePhone}}</h2>
+                </a>
+                <a href="tel:{{broker.phone}}" ion-item>
+                    <ion-icon name="text" item-left></ion-icon>
+                    <p>Text</p>
+                    <h2>{{broker.mobilePhone}}</h2>
+                </a>
+                <a href="mailto:{{broker.email}}" ion-item>
+                    <ion-icon name="mail" item-left></ion-icon>
+                    <p>Email</p>
+                    <h2>{{broker.email}}</h2>
+                </a>
+            </ion-list>
+
+        </ion-card>
+    </div>
+</ion-content>

app/pages/broker-details/broker-details.js

@@ -0,0 +1,23 @@
+import {OnInit} from '@angular/core';
+import {Page, NavController, NavParams} from 'ionic-angular';
+import {BrokerService} from '../../services/broker-service';
+
+@Page({
+    templateUrl: 'build/pages/broker-details/broker-details.html'
+})
+export class BrokerDetailsPage {
+
+    static get parameters() {
+        return [[NavController], [NavParams], [BrokerService]];
+    }
+
+    constructor(nav, navParams, brokerService) {
+        this.brokerService = brokerService;
+        this.broker = navParams.get('broker');
+    }
+
+    ngOnInit() {
+        this.brokerService.findById(this.broker.id).subscribe(broker => this.broker = broker);
+    }
+
+}

app/pages/broker-details/broker-details.scss

@@ -0,0 +1,39 @@
+.broker {
+
+  ion-card {
+
+    margin-top: 100px;
+    overflow: visible;
+
+    ion-card-content {
+
+      background-color: map-get($colors, primary);
+      color: #FFFFFF;
+      text-align: center;
+      padding-bottom: 28px;
+
+      img {
+        height: 160px;
+        width: 160px;
+        border-radius: 50%;
+        margin-top: -100px;
+        border: solid 4px #FFFFFF;
+        display: inline;
+      }
+
+      h2 {
+        font-size: 2.5rem;
+        margin-top: .5rem;
+        color: white;
+      }
+
+      h3 {
+        font-size: 1.8rem;
+        color: white;
+      }
+
+    }
+
+  }
+
+}

app/pages/broker-list/broker-list.html

@@ -0,0 +1,18 @@
+<ion-navbar primary *navbar>
+    <button menuToggle>
+        <ion-icon name="menu"></ion-icon>
+    </button>
+    <ion-title>Brokers</ion-title>
+</ion-navbar>
+
+<ion-content>
+    <ion-list>
+        <button ion-item *ngFor="let broker of brokers" (click)="itemTapped($event, broker)">
+            <ion-avatar item-left>
+                <img src="{{broker.picture}}"/>
+            </ion-avatar>
+            <h2>{{broker.name}}</h2>
+            <p>{{broker.title}}</p>
+        </button>
+    </ion-list>
+</ion-content>

app/pages/broker-list/broker-list.js

@@ -0,0 +1,30 @@
+import {OnInit} from '@angular/core';
+import {Page, NavController} from 'ionic-angular';
+import {BrokerDetailsPage} from '../broker-details/broker-details';
+import {BrokerService} from '../../services/broker-service';
+
+@Page({
+    templateUrl: 'build/pages/broker-list/broker-list.html'
+})
+export class BrokerListPage {
+
+    static get parameters() {
+        return [[NavController], [BrokerService]];
+    }
+
+    constructor(nav, brokerService) {
+        this.nav = nav;
+        this.brokerService = brokerService;
+    }
+
+    ngOnInit() {
+        this.brokerService.findAll().subscribe(brokers => this.brokers = brokers);
+    }
+
+    itemTapped(event, broker) {
+        this.nav.push(BrokerDetailsPage, {
+            broker: broker
+        });
+    }
+
+}

app/pages/favorite-list/favorite-list.html

@@ -0,0 +1,23 @@
+<ion-navbar primary *navbar>
+    <button menuToggle>
+        <ion-icon name="menu"></ion-icon>
+    </button>
+    <ion-title>Favorites</ion-title>
+</ion-navbar>
+
+<ion-content>
+    <ion-list>
+        <ion-item-sliding *ngFor="let favorite of favorites">
+            <button ion-item (click)="itemTapped($event, favorite)">
+                <ion-thumbnail item-left>
+                    <img src="{{favorite.property.thumbnail}}"/>
+                </ion-thumbnail>
+                <h2>{{favorite.property.title}}</h2>
+                <p>{{favorite.property.city}}, {{favorite.property.state}} ∙ {{favorite.property.priceFormatted}}</p>
+            </button>
+            <ion-item-options>
+                <button danger (click)="deleteItem($event, favorite)">Delete</button>
+            </ion-item-options>
+        </ion-item-sliding>
+    </ion-list>
+</ion-content>

app/pages/favorite-list/favorite-list.js

@@ -0,0 +1,38 @@
+import {OnInit} from '@angular/core';
+import {Page, NavController} from 'ionic-angular';
+import {PropertyDetailsPage} from '../property-details/property-details';
+import {PropertyService} from '../../services/property-service';
+
+@Page({
+    templateUrl: 'build/pages/favorite-list/favorite-list.html'
+})
+export class FavoriteListPage {
+
+    static get parameters() {
+        return [[NavController], [PropertyService]];
+    }
+
+    constructor(nav, propertyService) {
+        this.nav = nav;
+        this.propertyService = propertyService;
+    }
+
+    ngOnInit() {
+        this.loadFavorites();
+    }
+
+    loadFavorites() {
+        this.propertyService.getFavorites().subscribe(favorites => this.favorites = favorites);
+    }
+
+    itemTapped(event, favorite) {
+        this.nav.push(PropertyDetailsPage, {
+            property: favorite.property
+        });
+    }
+
+    deleteItem(event, favorite) {
+        this.propertyService.unfavorite(favorite).subscribe(() => this.loadFavorites());
+    }
+
+}