Cookies Time with Mongo

by JoshGough

HTML

<script src="http://documentcloud.github.com/underscore/underscore-min.js"></script>
<script src="http://documentcloud.github.com/backbone/backbone-min.js"></script>
<script src="https://raw.github.com/powmedia/backbone-forms/master/distribution/backbone-forms.js"></script>
<script src="https://raw.github.com/powmedia/backbone-forms/master/distribution/editors/list.js"></script>
<script src="https://raw.github.com/powmedia/backbone-forms/master/distribution/adapters/backbone.bootstrap-modal.js"></script>
<script src="https://raw.github.com/powmedia/backbone-forms/master/distribution/templates/bootstrap.js"></script>
<link rel="stylesheet" href="http://twitter.github.io/bootstrap/assets/css/bootstrap.css">
<input id="searchTerms" placeholder="Search" /> <button id='Search' data-cmd='search'>Search</button>
<br/>

<button data-cmd='new'>New Recipe</button> <button data-cmd='save'>Save</button> 
<hr />
<div id='form'></div>

CSS

/* Date */
.bbf-date .bbf-date {
  width: 4em
}

.bbf-date .bbf-month {
  width: 9em;
}

.bbf-date .bbf-year {
  width: 5em;
}


/* DateTime */
.bbf-datetime select {
  width: 4em;
}


/* List */
.bbf-list .bbf-add {
  margin-top: -10px
}

body {
    border: 5px solid black;
    padding-top: 5px;
}

.control-label {
    background: #fcfcfc;
    font-weight: bold;        
    padding-right: 5px;
}

.bbf-list li {
  margin-bottom: 5px
}

.bbf-list .bbf-del {
  margin-left: 4px
}


/* List.Modal */
.bbf-list-modal {
  cursor: pointer;
  border: 1px solid #ccc;
  width: 208px;
  border-radius: 3px;
  padding: 4px;
  color: #555;
}

CoffeeScript

makeUrl = (fragment) ->
    return "https://api.mongolab.com/api/1/databases/tastily/collections/recipes/" + fragment + "?apiKey=bWK-cL1WKkJF6yyunAhSjhszvkkTTOlM"

rVals = ['required']

Recipe = Backbone.Model.extend(
  url: ->
    if not @isNew()
        return makeUrl @id
    return makeUrl ""
  schema:
    name:
      type: "Text"
      title: "Recipe name"
      validators: rVals        
    meal:
      type: "Select"
      title: "Meal category"
      options: ["Breakfast", "Lunch", "Dinner", "Dessert"]        
    authorEmail:
      validators: ["required", "email"]
    summary:
      type: "TextArea"
      validators: rVals
    ingredients:
      type: "List"
      title: "Ingredients list"
      itemType: "Object"
      itemToString: (item) ->
        item.name + " (" + item.measure + ")"
      subSchema:
        name:
          type: "Text"
          validators: rVals
        description: "Text"
        measure:
          type: "Text"
          validators: rVals
    preparation:
      type: "TextArea"
      title: "Preparation"
      validators: rVals
    servingInfo: "Text"
    servingCount: "Number"
)
form = {}

$ ->
    Backbone.Form.editors.List.Modal.ModalAdapter = Backbone.BootstrapModal

    wireCommands()
    
    # Kevin Cheesecake: 5161fe13e4b00bdf1ecef90a
    # Grammy Cookies: 5161fda3e4b08b993350c464
    grammyCookie = new Recipe(id:'5161fe13e4b00bdf1ecef90a')
    grammyCookie.fetch success: ->
        renderRecipe grammyCookie
        
renderRecipe = (model) ->
    form = new Backbone.Form(model: model)
    $('#form').empty().append(form.render().el)

wireCommands = ->
    $('*[@data-cmd]').each (item) -> console.log item
        
newRecipe = ->
    renderRecipe new Recipe()    
    
saveRecipe = ->
    model = form.getValue()
    newRecipe = new Recipe(model)
    newRecipe.save().done (data) ->
        console.log data
        
searchRecipe = ->