update predict output

Author: rohithravin

env.sample

@@ -7,3 +7,9 @@ DB_PORT=50000
 DB_UID=<username>
 DB_PWD=<password>
 DB_SCHEMA=<schema name>
+WML_SERVICEPATH=<service url name>
+WML_UID=<wml service user name>
+WML_PWD=<wml service password name>
+WML_INSTANCEID=<service instance id >
+WML_MODELID=<model id>
+WML_DEPLOYMENTID=<deployment id>

server.js

@@ -28,13 +28,14 @@ var features = ['LOTAREA', 'BLDGTYPE', 'HOUSESTYLE', 'OVERALLCOND', 'YEARBUILT',
        'FIREPLACES', 'FIREPLACEQU', 'GARAGETYPE', 'GARAGEFINISH', 'GARAGECARS',
        'GARAGECOND', 'POOLAREA', 'POOLQC', 'FENCE', 'MOSOLD', 'YRSOLD' ];
 
+
 let endpoint = new WatsonMLScoringEndpoint(features, {
-         servicePath: 'https://ibm-watson-ml.mybluemix.net',
-         username: '04c75888-357b-4548-9a3d-824b0fdf4355',
-         password: '1626bb66-81f2-4d17-962d-b750eedce230',
-         instanceId: 'ee215244-7c33-4ffb-ae7f-e2aac55d92f4',
-         modelId: 'fbb8ab9f-4600-470b-95f0-55dd30925d6e',
-         deploymentId: 'c3cf73a6-4cbb-493f-879d-e60d30c3f26f'
+         servicePath: process.env.WML_SERVICEPATH,
+         username: process.env.WML_UID,
+         password: process.env.WML_PWD,
+         instanceId: process.env.WML_INSTANCEID,
+         modelId: process.env.WML_MODELID,
+         deploymentId: process.env.WML_DEPLOYMENTID
  });
 
 var NodeGeocoder = require('node-geocoder');

src/app/http.service.ts

@@ -52,7 +52,7 @@ export class HttpService {
     let api = '';
     if (predictOption.toLowerCase() === 'db2') {
         api = environment.GO_DB2_API;
-        return this.http.post(api, payload, this.httpOptions);
+      //  return this.http.get(environment.NODE_HOST + 'predict', payload, this.httpOptions);
     } else {
         return this.http.post(environment.NODE_HOST + 'WML_Predict', { values:  [Number(houseInfo['lotArea']), houseInfo['bldgType'], houseInfo['houseStyle'], Number(houseInfo['overallCond']), Number(houseInfo['yearBuilt']), houseInfo['roofStyle'], houseInfo['exterCond'], houseInfo['foundation'], houseInfo['bsmtCond'],
        houseInfo['heating'], houseInfo['heatingQC'], houseInfo['centralAir'], houseInfo['electrical'], Number(houseInfo['fullBath']), Number(houseInfo['halfBath']), Number(houseInfo['bedroomAbvGr']), Number(houseInfo['kitchenAbvGr']), houseInfo['kitchenQual'], Number(houseInfo['totalRmsAbvGrd']),  Number(houseInfo['fireplaces']), houseInfo['fireplaceQu'], houseInfo['garageType'],

src/app/predict-data/predict-data.component.html

@@ -37,19 +37,19 @@ <h3 class="text-dark mb-4">House Information</h3>
                     </div>
                     <div class="card shadow mb-3">
                         <div class="card-header py-3">
-                            <p class="text-primary m-0 font-weight-bold">address Information</p>
+                            <p class="text-primary m-0 font-weight-bold">Address Information</p>
                         </div>
                         <div class="card-body">
                             <div class="form-row" style="margin-bottom:0px;">
                                 <div class="col-md-2 mb-3">
-                                    <label for="address1">address 1</label>
+                                    <label for="address1">Address 1</label>
                                     <input type="text" class="form-control" id="address1" placeholder="1234 abc st."
                                         required [(ngModel)]="addressModel.address1" #address1="ngModel"
                                         name="address1">
                                     <small class="text-danger" *ngIf=errAddress1>Please enter a valid address</small>
                                 </div>
                                 <div class="col-md-2 mb-3">
-                                    <label for="address2">address2</label>
+                                    <label for="address2">Address2</label>
                                     <input type="text" class="form-control" id="address2" placeholder="Apt 4" required
                                         [(ngModel)]="addressModel.address2" #address2="ngModel" name="address2">
                                     <small class="text-danger" *ngIf=errAddress2>Please enter a valid address</small>
@@ -386,7 +386,7 @@ <h3 class="text-dark mb-4">House Information</h3>
                                         <option>2Types</option>
                                         <option>Attchd</option>
                                         <option>Basment</option>
-                                        
+
                                         <option>CarPort</option>
                                         <option>Detchd</option>
                                         <option>NA</option>

src/app/predict-data/predict-data.component.ts

@@ -63,7 +63,7 @@ export class PredictDataComponent implements OnInit {
   validateInputFields: boolean;
 
 
-  constructor(private router: Router, private httpService: HttpService) {
+  constructor(private _router: Router, private httpService: HttpService) {
 
     this.validateInputFields = true;
 
@@ -141,17 +141,11 @@ export class PredictDataComponent implements OnInit {
         (predictions) => {
           console.log('Predictions Result');
           console.log(predictions);
-          
-
-
-
-
-
-
-
-
-
-
+          localStorage.setItem('prediction_data', JSON.stringify(this.model));
+          localStorage.setItem('predicted_value', JSON.stringify(predictions));
+          localStorage.setItem('address', JSON.stringify(this.addressModel));
+          localStorage.setItem('ml-model',this.predictOption);
+          this._router.navigate(['/predictOutput']);
         });
     }
   }

src/app/predict-output/predict-output.component.html

@@ -23,8 +23,8 @@ <h3 class="text-dark mb-0">Predicted House Value</h3>
                                   <agm-map  [zoom]="13" [latitude]="lat" [longitude]="lng">
                                     <agm-marker [latitude]="lat" [longitude]="lng"></agm-marker>
                                   </agm-map>
-                                  <p style="font-size: 15px;margin-bottom: 0px;margin-top: 10px;">Address:&nbsp;{{model['address1']}} {{model['address2']}}, {{model['city']}}, {{model['state']}}, {{model['zipcode']}} {{model['country']}}</p>
-                                    <p style="font-size: 20px;color: rgb(78,115,223);">Est. Sale Price:&nbsp;${{model['salePrice']}}</p>
+                                  <p style="font-size: 15px;margin-bottom: 0px;margin-top: 10px;">Address:&nbsp;{{addressModel['address1']}} {{addressModel['address2']}}, {{addressModel['city']}}, {{addressModel['state']}}, {{model['zipcode']}} {{model['country']}}</p>
+                                    <p style="font-size: 20px;color: rgb(78,115,223);">Est. Sale Price:&nbsp;${{salePrice}}</p>
                                 </div>
                             </div>
                         </div>

src/app/predict-output/predict-output.component.ts

@@ -4,6 +4,7 @@ import { Component, OnInit } from '@angular/core';
 import {Router} from '@angular/router';
 import { HttpService }  from '../http.service';
 import { PredictHouseInfo } from '../models/predict-house-info';
+import { AddressInfo } from '../models/address-info';
 import { library } from '@fortawesome/fontawesome-svg-core';
 import {  MapsAPILoader }  from '@agm/core';
 import { faImage, faClock, faBed, faCar, faBuilding, faDoorOpen, faFire, faHome, faSwimmer, faBath } from '@fortawesome/free-solid-svg-icons';
@@ -32,7 +33,9 @@ export class PredictOutputComponent implements OnInit {
   averageSalePrice:string;
   showData:boolean;
   showMessage:boolean;
-  model:any;
+
+  model: PredictHouseInfo;
+  addressModel: AddressInfo;
 
   constructor(private _router:Router, private _httpService:HttpService) {
     this.showData = false;
@@ -45,21 +48,34 @@ export class PredictOutputComponent implements OnInit {
     this.fireplace = '';
     this.garage = '';
     this.bath = '';
-    this.model = [];
     this.salePrice = '';
     this.averageSalePrice = '';
+
+    this.model = new PredictHouseInfo('', 'Select BldgType', 'Select HouseStyle', '', '', '', '', '', '', 'Select KitchenQual', '', 'Select Heating', 'Select HeatingQC', 'Select CentralAir', 'Select Electrical', 'Select RoofStyle', 'Select ExterCond', 'Select Foundation', 'Select BsmtCond', '', 'Select PoolQC', '', 'Select FireplaceQu', 'Select GarageType', 'Select GarageFinish', '', 'Select GarageCond', 'Select Fence', '', '');
+
+    this.addressModel = new AddressInfo('', ' ', '', '', '', '');
+
   }
 
 
   ngOnInit() {
     this.showData = false;
     this.showMessage = true;
-    this.model = JSON.parse(localStorage.getItem("predictOutput"));
+
+    this.model = (JSON.parse(localStorage.getItem('prediction_data')));
+
+    if (localStorage.getItem('ml-model') === 'db2') {
+        this.salePrice = (JSON.parse(localStorage.getItem('predicted_value'))['salePrice']);
+    } else {
+        this.salePrice = (JSON.parse(localStorage.getItem('predicted_value'))['value']);
+    }
+
+    this.addressModel = (JSON.parse(localStorage.getItem('address')));
     this.getGeoCode();
   }
 
   getGeoCode(){
-    var geo = this._httpService.getCoordinates(this.model['address1'], this.model['city'],this.model['state'],this.model['zipcode']);
+    var geo = this._httpService.getCoordinates(this.addressModel['address1'], this.addressModel['city'],this.addressModel['state'],this.addressModel['zipcode']);
     geo.subscribe(data => {
       console.log(data);
       if (data['success'] != 1){