Update the code

Signed-off-by: Wenwei Cai <stanley.w.cai@gmail.com>

.gitignore

@@ -0,0 +1,3 @@
+node_modules
+*~
+*.bak

app/controllers/stocks.coffee

@@ -0,0 +1,112 @@
+Spine = require('spine')
+{Panel} = require('spine.mobile')
+$ = Spine.$
+Stock = require('models/stock')
+
+class StockAdd extends Panel
+  title: 'Stock Add'
+
+  elements:
+    'form': 'form'
+
+  events:
+    'submit form': 'submit'
+
+  constructor: ->
+    super
+
+    @log 'StockAdd instantiated!'
+
+    @addButton('Cancel', @back)
+    @addButton('Add', @submit).addClass('right')
+
+    @active @render
+
+  render: ->
+    @log 'StockAdd renderred!'
+    @html require('views/stocks/add')()
+
+  back: ->
+    @navigate('/stocks', trans: 'left')
+
+  submit: (e) ->
+    e.preventDefault()
+    stock = Stock.fromForm(@form)
+    console.log stock
+    if stock.save()
+      @navigate('/stocks', trans: 'left')
+
+  deactive: ->
+    super
+    @form.blur()
+
+
+class StockDetails extends Panel
+  title: 'Stock Details'
+
+  constructor: ->
+    super
+
+    @log 'StockDetails instantiated!'
+    Stock.bind('change', @render)
+    @active (params) -> @change(params.id)
+    @addButton('back', @back)
+
+  render: =>
+    return unless @item
+    @html require('views/stocks/details')(@item)
+
+  back: ->
+    @navigate('/stocks', trans: 'left')
+
+  change: (id) ->
+    @item = Stock.find(id)
+    @render
+
+
+class StockList extends Panel
+  events:
+    'tap .item': 'click'
+
+  title: 'Stocks'
+
+  constructor: ->
+    super
+
+    @log 'StockList instantiated!'
+    Stock.bind('refresh change', @render)
+    @addButton('Add', @add).addClass('right')
+
+  click: (e) ->
+    console.log 'click'
+    console.log $(e.target).html()
+    item = $(e.target).item()
+    @navigate('/stocks', item.id, trans: 'right')
+
+  add: ->
+    @navigate('/stocks/add', trans:  'right')
+
+  render: =>
+    console.log "render"
+    items = Stock.all()
+    @html require('views/stocks/item')(items)
+
+
+class Stocks extends Spine.Controller
+  constructor: ->
+    super
+
+    @log 'Stocks instantiated!'
+    @list = new StockList
+    @detail = new StockDetails
+    @add = new StockAdd
+
+    Stock.fetch()
+
+    @routes
+      '/stocks/add':    (params) -> @add.active(params)
+      '/stocks/:id':    (params) -> @detail.active(params)
+      '/stocks':        (params) -> @list.active(params)
+
+
+module.exports = Stocks

app/index.coffee

@@ -1,10 +1,17 @@
 require('lib/setup')
 
-Spine   = require('spine')
+Spine = require('spine')
 {Stage} = require('spine.mobile')
+Stocks = require('controllers/stocks')
 
 class App extends Stage.Global
   constructor: ->
     super
+    @log 'StockApp instantiated!'
+    @stocks = new Stocks
 
-module.exports = App
+    Spine.Route.setup(shim: true) 
+    @log 'go StockList'
+    @navigate '/stocks'
+
+module.exports = App

app/lib/local.coffee

@@ -0,0 +1,16 @@
+Spine = require('spine')
+
+Spine.Model.Local =
+  extended: ->
+    this.change(this.saveLocal)
+    this.fetch(this.loadLocal)
+
+  saveLocal: ->
+    result = JSON.stringify(this)
+    localStorage[@className] = result
+
+  loadLocal: ->
+    result = localStorage[@className]
+    this.refresh(result or [], clear: true)
+
+module.exports = Spine.Model.Local

app/lib/setup.coffee

@@ -1,7 +1,7 @@
 require('json2ify')
 require('es5-shimify')
 require('jqueryify')
-require('gfx')
+require('jquery.tmpl')
 
 require('spine')
 require('spine/lib/local')

app/models/stock.coffee

@@ -0,0 +1,42 @@
+Spine   = require('spine')
+$ = jQuery
+
+class Stock extends Spine.Model
+  @configure 'Stock', 'name', 'code', 'currentPrice'
+
+  @extend Spine.Model.Local
+
+  constructor: ->
+    super
+    Spine.Model.host = 'http://hq.sinajs.cn'
+
+  # @default: -> new @(name: 'GREE Electronics', code: '000651', 'currentPrice': 0.0)
+  @endpoint: 'http://hq.sinajs.cn/list='
+
+  @fetch: ->
+    super
+    console.log 'aaa'
+    @fetchPriceFromSite item for item in @all()
+    @saveLocal()
+
+  @fetchPriceFromSite: (item) ->
+    return unless item
+    console.log item
+    ###
+    if code.charAt(0) == '6'
+      url = @endpoint + 'sh' + code
+    else
+      url = @endpoint + 'sz' + code
+    ###
+    console.log Spine.Model.host
+    url = "#{@endpoint}sh601006"
+    console.log url
+    $.get url, (data) =>
+        left = data.indexOf '"'
+        right = data.lastIndexOf '"'
+        items = (data.substring left + 1, right).split(",")
+        item.name = items[0]
+        item.currentPrice = items[3]
+        console.log item
+
+module.exports = Stock

app/views/stocks/add.eco

@@ -0,0 +1,6 @@
+<form>
+  <label>
+    <span>Code</span>
+    <input type="text" name="code">
+  </label>
+</form>

app/views/stocks/details.eco

@@ -0,0 +1,10 @@
+<% if @name: %>
+  <p><%= @name %></p>
+<% end %>
+
+<% if @code: %>
+  <p><%= @code %></p>
+
+<% if @currentPrice: %>
+  <p><%= @currentPrice %></p>
+<% end %>

app/views/stocks/item.jeco

@@ -0,0 +1,9 @@
+<div class="item">
+  <table>
+    <tr>
+      <td><%= @name %></td>
+      <td><%= @code %></td>
+      <td><%= @currentPrice %></td>
+    </tr>
+  </table>
+</div>

css/index.styl

@@ -45,4 +45,5 @@ body.stage
     overflow: auto
     -webkit-overflow-scrolling: touch
 
-@import './theme'
+@import './theme'
+@import './views/stocks'

css/theme.styl

@@ -59,3 +59,58 @@ body.stage
       &:active
         -webkit-box-shadow: inset 0 -1px 1px rgba(0, 0, 0, 0.3), inset 0 1px 1px 0 rgba(0, 0, 0, 0.6), 0 1px 0 rgba(255, 255, 255, 0.4), inset 0 0 20px rgba(255, 255, 255, 0.2)
 
+      &.right
+        left: auto
+        right: 0
+
+.list
+  // overflow: auto
+  // -webkit-overflow-scrolling: touch
+
+.list .item
+  padding: 0 15px
+  height: 50px
+  line-height: 50px
+
+  border-bottom: 1px solid rgba(0, 0, 0, 0.1)
+  color: #292D39
+  text-shadow: 0 1px 0 white
+  background: #F6F6F7
+  background: -webkit-gradient(linear, left top, left bottom, from(white), color-stop(0.5, rgba(255, 255, 255, 0.4)), color-stop(0.5, rgba(255, 255, 255, 0))), #F6F6F7
+
+  img
+    float: right
+    max-width: 30px
+    max-height: 30px
+    display: inline-block
+    margin: 10px 0
+
+  &:active
+    background: #F6F6F7
+    inset-box-shadow(0, 1px, 3px, rgba(0, 0, 0, 0.1))
+
+form
+  margin: 10px
+  background: #FFF
+  border: 1px solid #aeaeae
+  border-radius(10px)
+  box-shadow(0, 1px 1px, rgba(0, 0, 0, 0.1))
+
+label
+  display: block
+  border-bottom: 1px solid #aeaeae
+  font-size: 13px
+  padding: 15px
+
+  &:last-child
+    border-bottom: none
+
+  span::after
+    content: ':'
+
+select, input
+  display: block
+  width: 100%
+  font-size: 15px
+  margin: 5px 0 0 0
+  border-box()

css/views/stocks.styl

@@ -0,0 +1,14 @@
+
+.contacts.listView > article
+  &:empty::after
+    display: block
+    text-align: center
+    margin: 10% 0
+    content: "No contacts"
+
+.contacts.showView > article
+  padding: 20px
+
+  img
+    max-width: 150px
+    max-height: 150px

package.json

@@ -1,14 +1,15 @@
 {
-  "name": "app",
+  "name": "StockApp",
   "version": "0.0.1",
   "dependencies": {
     "serveup": "~0.0.5",
     "hem": "~0.1.8",
     "es5-shimify": "~0.0.1",
     "json2ify": "~0.0.1",
     "jqueryify": "~0.0.1",
+    "jquery.tmpl": "~0.0.1",
     "spine": "~1.0.7",
     "spine.mobile": "~1.0.0",
     "gfx": "~0.0.4"
   }
-}
+}

public/index.html

@@ -2,13 +2,9 @@
 <html>
 <head>
   <meta charset=utf-8>
-  <title>App</title>
-  <meta name="viewport" content="width=device-width; initial-scale=1.0; minimum-scale=1; maximum-scale=1.0; user-scalable=0;"/>
-  <meta name="apple-mobile-web-app-capable" content="yes" />
-  <meta name="format-detection" content="telephone=no" />
-
-  <link rel="stylesheet" href="/application.css" type="text/css" charset="utf-8">
-  <script src="/application.js" type="text/javascript" charset="utf-8"></script>
+  <title>Stock App</title>
+  <link rel="stylesheet" href="application.css" type="text/css" charset="utf-8">
+  <script src="application.js" type="text/javascript" charset="utf-8"></script>
   <script type="text/javascript" charset="utf-8">
     var jQuery  = require("jqueryify");
     var exports = this;
@@ -17,10 +13,14 @@
       exports.app = new App({el: $("body")});      
     });
   </script>
-
-  <!-- Getting started script - should be removed -->
-  <script src="http://maccman-spine.herokuapp.com/mobile/start.js" type="text/javascript" charset="utf-8"></script>
+  <meta name="viewport" content="width=device-width; initial-scale=1.0; minimum-scale=1; maximum-scale=1.0; user-scalable=0;"/>
+  <meta name="apple-mobile-web-app-capable" content="yes" />
+  <meta name="apple-mobile-web-app-status-bar-style" content="black">
+  <meta name="format-detection" content="telephone=no" />
+  <link rel="apple-touch-icon-precomposed" href="images/icons/appicon.png">
+  <link rel="apple-touch-icon-precomposed" sizes="114x114" href="images/icons/appicon-x2.png">
+  <link rel="apple-touch-startup-image" href="images/loading.png">
 </head>
 <body>
 </body>
-</html>
+</html>

slug.json

@@ -3,6 +3,7 @@
     "es5-shimify", 
     "json2ify", 
     "jqueryify", 
+    "jquery.tmpl",
     "gfx",
     "spine",
     "spine/lib/local",