Adding required files to replace webview with stocks option. Added vi…

…ew, model, controller, new icon and some CSS. Also updated viewport and home view

client/default/app/controllers/Stocks.js

@@ -0,0 +1,35 @@
+app.controllers.stocks = new Ext.Controller({
+
+  getStocks: function() {
+    var companyName  = Ext.getCmp("companyName").getValue();
+
+    if (companyName.length == 0) {
+      Ext.Msg.alert('Error', 'You must enter a company name.', Ext.emptyFn);
+      return;
+    }
+    // Show loading spinner
+     mask.show();
+
+    // Call to the cloud
+    $fh.act({
+      act: 'getStockInfo',
+      req: {
+        name: companyName,
+      }
+    }, function(res) { 
+      //Adding res to store
+      app.stores.stocks.add({Name: res.stockInfo.Name, Symbol:res.stockInfo.Symbol, Last: res.stockInfo.Last, Change: res.stockInfo.Change, Date: res.stockInfo.Date, Open: res.stockInfo.Open, Time: res.stockInfo.Time});
+
+      // Hide loading spinner
+      mask.hide();
+
+      //Empty the company field
+      Ext.getCmp("companyName").setValue();
+
+    },function(err){
+      mask.hide();
+      Ext.Msg.alert('Error', 'An error has occurred with your request. Please try again.', Ext.emptyFn);
+    });
+  }
+
+});

client/default/app/css/home.css

@@ -66,6 +66,21 @@
   background-size: 100% 100%;
   background-image: url("../images/icons/payment_icon.png") !important;
 }
+
 .paymentIcon:active, .paymentIcon:hover {
 	opacity: 0.5;
+}
+
+#stockResults{
+	margin-top: 50px !important;
+}
+
+li {
+list-style: none;
+padding-bottom: 4px !important;
+padding-left: 15px !important;
+}
+
+ul{
+	padding-top: 15px !important;
 }

client/default/app/models/Stocks.js

@@ -0,0 +1,8 @@
+app.models.Stocks = Ext.regModel('app.models.Stocks', {
+    fields: ['Name', 'Symbol', 'Last', 'Change', 'Date', 'Time', 'Open'],
+});
+
+app.stores.stocks = new Ext.data.Store({
+  model: 'app.models.Stocks',
+    data : []
+});

client/default/app/views/Home.js

@@ -16,7 +16,7 @@ app.views.Home = Ext.extend(Ext.Panel, {
   		height: 20
   	},
 
-  	/* Video & Google Maps Buttons */
+  	/* Twitter & Google Maps Buttons */
   	new Ext.Panel({
   		height: 100,
 
@@ -60,7 +60,7 @@ app.views.Home = Ext.extend(Ext.Panel, {
   		height: 20
   	},
 
-  	/* Camera and Twitter Buttons */
+  	/* Camera and Payment Buttons */
   	new Ext.Panel({
   		height: 100,
 
@@ -107,7 +107,7 @@ app.views.Home = Ext.extend(Ext.Panel, {
   		height: 20
   	},
 
-  	/* Webview & Settings Buttons  */
+  	/* Stocks & Settings Buttons  */
   	new Ext.Panel({
   		height: 100,
 
@@ -125,10 +125,7 @@ app.views.Home = Ext.extend(Ext.Panel, {
 		  		width:  100,
 		  		height: 100,
 		  		handler: function() {
-		  			$fh.webview({
-		  				title: 'FeedHenry',
-		  				url: 'http://www.feedhenry.com/'
-		  			});
+		  			app.views.viewport.setActiveItem(app.views.stocks, {type: 'slide', direction: 'left'});
 		  		}
 		  	},
 		  	{

client/default/app/views/Stocks.js

@@ -0,0 +1,81 @@
+app.views.Stocks = Ext.extend(Ext.Panel, {
+  title: 'Stocks',
+  iconCls: 'home',
+  scroll: 'vertical',
+  height: '100%',
+  layout: 'fit',
+
+  listeners: {
+    beforeshow: function() {
+    },
+  },
+
+  dockedItems: [
+  	{
+  		dock: 'top',
+  		xtype: 'toolbar',
+      title: '<img class="logo logoOffset" src="app/images/logo.png" />',
+  		items: [
+  			{
+  				text: 'Back',
+          ui: 'back',
+          hidden: app.hideBack || false,
+  				handler: function() {
+  					app.views.viewport.setActiveItem(app.views.home, {type: 'slide', direction: 'right'});
+            app.stores.stocks.removeAll();
+  				}
+  			}
+  		]
+  	}
+  ],
+
+  items: [{
+    xtype: 'panel',
+    layout:{
+    type:'vbox',
+    align: 'strech'
+
+   },
+   defaults:{flex:'1'},
+   items: [{
+      xtype: 'form',
+      items: [
+        {
+          xtype: 'fieldset',
+          title: 'Search Stock Info',
+          instructions: 'Enter company name above to perform a mash-up.',
+          defaults: {
+            labelAlign: 'left',
+            labelWidth: '50%'
+          },
+          items: [
+            {
+              xtype: 'textfield',
+              id: 'companyName',
+              name: 'Company Name'
+            },
+          ]
+        },
+        {
+          xtype: 'button',
+          text: 'Submit',
+          handler: function() {
+            Ext.dispatch({
+              controller: app.controllers.stocks,
+              action: 'getStocks'
+            });
+          }
+        }
+      ]
+    },{
+      id:"stockResults",
+      xtype: 'list',
+      width: '100%',
+      disableSelection: true,
+      scroll: "vertical",
+      store: app.stores.stocks,
+      itemTpl:'<h2>Stock: {Symbol}</h2><ul><li>Change:  {Change}</li><li>Date:  {Date}</li><li>Last:  {Last}</li><li>Name:  {Name}</li><li>Symbol:  {Symbol}</li><li>Time:  {Time}</li></ul>',
+      flex: 1
+    }]
+  }]
+});

client/default/app/views/Viewport.js

@@ -15,6 +15,7 @@ app.views.Viewport = Ext.extend(Ext.Panel, {
       map:      new app.views.MapView(),
       twitter:  new app.views.Twitter(),        
       payment:  new app.views.Payment(),
+      stocks:   new app.views.Stocks(),
       settings: new app.views.Settings(),
       camera:   new app.views.Camera()
     });
@@ -23,6 +24,7 @@ app.views.Viewport = Ext.extend(Ext.Panel, {
       items: [
         app.views.home,
         app.views.payment,
+        app.views.stocks,
         app.views.twitter,
         app.views.map,
         app.views.settings,

client/default/index.html

@@ -21,18 +21,21 @@
 
 <!-- Models -->
 <script type="text/javascript" src="app/models/Twitter.js"></script>
+<script type="text/javascript" src="app/models/Stocks.js"></script>
 
 <!-- Views -->
 <script type="text/javascript" src="app/views/Viewport.js"></script>
 <script type="text/javascript" src="app/views/Home.js"></script>
 <script type="text/javascript" src="app/views/Camera.js"></script>
 <script type="text/javascript" src="app/views/Map.js"></script>
 <script type="text/javascript" src="app/views/Payment.js"></script>
+<script type="text/javascript" src="app/views/Stocks.js"></script>
 <script type="text/javascript" src="app/views/Settings.js"></script>
 <script type="text/javascript" src="app/views/Twitter.js"></script>
 
 <!-- Controllers -->
 <script type="text/javascript" src="app/controllers/Camera.js"></script>
 <script type="text/javascript" src="app/controllers/Map.js"></script>
 <script type="text/javascript" src="app/controllers/Payment.js"></script>
+<script type="text/javascript" src="app/controllers/Stocks.js"></script>
 <script type="text/javascript" src="app/controllers/Settings.js"></script>

cloud/main.js

@@ -1,3 +1,10 @@
+/*
+ * Stocks
+ */
+function getStockInfo(param) {
+  return stock.getStockInfo(param.name);
+}
+
 /*
  * Twitter
  */

cloud/stock.js

@@ -0,0 +1,94 @@
+/**
+ * Mash multiple business apis returned data.
+ * Stock Symble lookup: Using YAHOO API. JSONP
+ * Stock Info lookup: Using WebServiceX API . SOAP
+ *
+ */
+
+var stock = {
+	//YAHOO finance api for looking up stock symbol with a company name. It is a JSONP service.
+	yahooApi : "http://d.yimg.com/autoc.finance.yahoo.com/autoc?query={0}&callback=YAHOO.Finance.SymbolSuggest.ssCallback",
+	//WebServiceX API (Open API). It returns stock details with specific stock symbol.
+	webServiceXApi : "http://www.webservicex.net/stockquote.asmx",
+	/**
+	 * The function will look for stock symbol based on "name" param, and return stock info from WebServiceX
+	 *
+	 * Return stock information.
+	 */
+	getStockInfo : function(name) {
+		//Compose request url using user input.
+		var yahooApiUrl = this.yahooApi.replace("{0}", name);
+		/*
+		 * Perform Webcall
+		 * Raw response from YAHOO JSONP api which contains stock symbol as well as other information we do not want.
+		 *
+		 */
+		var symbolRes = $fh.web({
+			url : yahooApiUrl,
+			method : "GET",
+			charset : "UTF-8",
+			period : 3600
+		});
+
+		//Clear up YAHOO response and only keep the information "stock symbol" we need.
+		var stockSymbol = this.processSymbolRes(symbolRes);
+
+		// construct SOAP envelop. We could do this manually or just use a Javascript Library.
+		var soapEnvolope = '<?xml version="1.0" encoding="utf-8"?>' + '<soap:Envelope xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns:soap="http://schemas.xmlsoap.org/soap/envelope/">' + '<soap:Body>' + '<GetQuote xmlns="http://www.webserviceX.NET/">' + '<symbol>' + stockSymbol + '</symbol>' + '</GetQuote>' + '</soap:Body>' + '</soap:Envelope>';
+
+		//Retrieve SOAP url
+		var stockInfoUrl = this.webServiceXApi;
+
+		//Prepare webcall parameters
+		var opt = {
+			url : stockInfoUrl,
+			method : "POST",
+			charset : "UTF-8",
+			contentType : "text/xml",
+			body : soapEnvolope,
+			period : 3600
+		}
+
+		//Perform webcall
+		var stockInfoSoapRes = $fh.web(opt);
+
+		//getSOAPElement will retrieve specific XML object within SOAP response
+    	var body=stockInfoSoapRes.body.replace(/&lt;/g,"<").replace(/&gt;/g,">");
+		var xmlData = getSOAPElement("GetQuoteResult", body);
+
+    	var xmlObj=xml(xmlData);
+
+   		//Create Object
+    	var stockInfo={
+	      Symbol:xmlObj.find("Symbol").text(),
+	      Last:xmlObj.find("Last").text(),
+	      Open:xmlObj.find("Open").text(),
+	      "Date":xmlObj.find("Date").text(),
+	      Time:xmlObj.find("Time").text(),
+	      Change:xmlObj.find("Change").text(),
+	      Name:xmlObj.find("Name").text()
+    	}
+
+		//mash up the data and return to client.
+		return {
+			stockSymbol : stockSymbol,
+			stockInfo :stockInfo
+    };
+
+	},
+	/**
+	 * Process Response from YAHOO stock symbol api.
+	 * It will clear up the response and only return stock symbol as string.
+	 */
+	processSymbolRes : function(res) {
+		var resBody = res.body;
+		var removedHeadRes = resBody.replace("YAHOO.Finance.SymbolSuggest.ssCallback(", "");
+		//remove jsonp callback header
+		var removedTailRes = removedHeadRes.substr(0, removedHeadRes.length - 1);
+		//remove jsonp callback bracket
+		var resObj = $fh.parse(removedTailRes);
+		//parse result to JSON object
+		return resObj.ResultSet.Result[0].symbol;
+		//return the first matched stock symbol
+	}
+}

cloud/util.js

@@ -0,0 +1,15 @@
+function log (str){
+  $fh.log({message:str});
+
+}
+
+/**
+* Retrieve a XML object that is in SOAP response.
+*/
+function getSOAPElement(eleTagWithNS, SOAPRes) {
+var start_index = SOAPRes.indexOf("<" + eleTagWithNS + ">");
+var end_tag = "</" + eleTagWithNS + ">";
+var end_index = SOAPRes.indexOf(end_tag) + end_tag.length;
+var xmlData = new XML(SOAPRes.substring(start_index, end_index));
+return xmlData;
+}