Fix for Gemfile

Gemfile

@@ -2,4 +2,9 @@ source 'https://rubygems.org'
 ruby '2.0.0'
 
 gem 'rspec', '~> 2.14.1'
+gem 'sinatra', '~> 1.4.5'
+gem 'sinatra-contrib', '~> 1.4.2'
+gem 'rest-client'
+
+# Testing
 gem 'pry-byebug'

Gemfile.lock

@@ -1,6 +1,7 @@
 GEM
   remote: https://rubygems.org/
   specs:
+    backports (3.6.3)
     byebug (3.5.1)
       columnize (~> 0.8)
       debugger-linecache (~> 1.2)
@@ -10,13 +11,24 @@ GEM
     debugger-linecache (1.2.0)
     diff-lcs (1.2.5)
     method_source (0.8.2)
+    mime-types (1.25.1)
+    multi_json (1.10.1)
+    netrc (0.8.0)
     pry (0.10.1)
       coderay (~> 1.1.0)
       method_source (~> 0.8.1)
       slop (~> 3.4)
     pry-byebug (2.0.0)
       byebug (~> 3.4)
       pry (~> 0.10)
+    rack (1.5.2)
+    rack-protection (1.5.3)
+      rack
+    rack-test (0.6.2)
+      rack (>= 1.0)
+    rest-client (1.7.2)
+      mime-types (>= 1.16, < 3.0)
+      netrc (~> 0.7)
     rspec (2.14.1)
       rspec-core (~> 2.14.0)
       rspec-expectations (~> 2.14.0)
@@ -25,11 +37,26 @@ GEM
     rspec-expectations (2.14.5)
       diff-lcs (>= 1.1.3, < 2.0)
     rspec-mocks (2.14.5)
+    sinatra (1.4.5)
+      rack (~> 1.4)
+      rack-protection (~> 1.4)
+      tilt (~> 1.3, >= 1.3.4)
+    sinatra-contrib (1.4.2)
+      backports (>= 2.0)
+      multi_json
+      rack-protection
+      rack-test
+      sinatra (~> 1.4.0)
+      tilt (~> 1.3)
     slop (3.6.0)
+    tilt (1.4.1)
 
 PLATFORMS
   ruby
 
 DEPENDENCIES
   pry-byebug
+  rest-client
   rspec (~> 2.14.1)
+  sinatra (~> 1.4.5)
+  sinatra-contrib (~> 1.4.2)

public/css/app.css

@@ -0,0 +1,15 @@
+
+.tabs {
+  border: 2px solid #ccc;
+  float: left;
+  padding: 0.5em;
+}
+
+.tabs a + a {
+  margin-left: 1em;
+}
+
+.tab-content {
+  clear: both;
+  padding-top: 1em;
+}

public/css/pets.css

@@ -0,0 +1,22 @@
+
+.pets-view {
+  overflow: auto;
+}
+
+.pet {
+  float: left;
+  margin-right: 1em;
+}
+
+.pet .photo {
+  height: 150px;
+}
+
+.pet img {
+  max-width: 200px;
+  max-height: 150px;
+}
+
+.pet .info {
+  height: 100px;
+}

public/js/pet-container.js

@@ -0,0 +1,50 @@
+(function () {
+
+  window.PetContainer = {}
+
+  PetContainer.controller = function (appCtrl) {
+    var ctrl = {
+      user: appCtrl.user
+    }
+
+    return ctrl
+  }
+
+  PetContainer.view = function (ctrl) {
+    var content
+    if (ctrl.user()) {
+      content = [
+        petsView(ctrl, 'cats', ctrl.user().cats),
+        petsView(ctrl, 'dogs', ctrl.user().dogs)
+      ]
+    }
+    else {
+      content = m('h3', "Please sign in first.")
+    }
+
+    return m('.pet-container', [
+      m('h1', "Your Pet Container"),
+      content
+    ])
+  }
+
+  var petsView = function (ctrl, type, pets) {
+
+    var petDivs = pets.map(function(pet) {
+      return m('.pet', [
+        m('.photo',
+          m('img', { src: pet.imageUrl })
+        ),
+        m('.info', [
+          m('h4', pet.name)
+        ])
+      ])
+    })
+
+    return m('.pets-view', { className: type }, [
+      m('h2', "Your " + type.capitalize()),
+      petDivs
+    ])
+  }
+
+})()

public/js/pet-shop.js

@@ -0,0 +1,74 @@
+(function () {
+
+  window.PetShop = {}
+
+  PetShop.controller = function (appCtrl) {
+    var ctrl = {
+      activePetShop: appCtrl.activePetShop,
+      petShops: appCtrl.petShops
+    }
+
+    ctrl.adopt = function (type, petId) {
+      if (!appCtrl.user()) {
+        return alert("You must log in first!")
+      }
+      var shop = ctrl.activePetShop()
+      var pets = shop[type]
+      var adoptUrl = "/shops/" + shop.id + "/" + type + "/" + petId + "/adopt"
+
+      m.request({ method: 'put', url: adoptUrl }).then(function() {
+        var pet = pets().find(function(p){ return p.id == petId })
+        pet.adopted = true
+        appCtrl.user()[type].push(pet)
+      }, genericError)
+    }
+
+    return ctrl
+  }
+
+  PetShop.view = function (ctrl) {
+    var shop = ctrl.activePetShop()
+    if (!shop) return null
+
+    return m('.pet-shop', [
+      m('h1', shop.name),
+      petsView(ctrl, 'cats', shop.cats()),
+      petsView(ctrl, 'dogs', shop.dogs())
+    ])
+  }
+
+
+  var petsView = function (ctrl, type, pets) {
+    if (!pets) return null
+
+    var petDivs = pets.map(function(pet) {
+      var adoptLink = m('a', {
+        onclick: ctrl.adopt.coldCurry(type, pet.id),
+        href: '#'
+      }, 'Adopt this pet')
+
+      return m('.pet', [
+        m('.photo',
+          m('img', { src: pet.imageUrl })
+        ),
+        m('.info', [
+          m('h4', pet.name),
+          m('b', "Adopted: "),
+          m('span', pet.adopted ? "Yes!" : "No..."),
+          m('br'),
+          pet.adopted ? null : adoptLink
+        ])
+      ])
+    })
+
+    return m('.pets-view', { className: type }, [
+      m('h2', type.capitalize()),
+      petDivs
+    ])
+  }
+
+  function genericError(e) {
+    console.log("An error happened:", e)
+    alert("Bad stuff happened (check the console)")
+  }
+})()

public/js/polyfill.js

@@ -0,0 +1,39 @@
+(function () {
+
+  var slice = Array.prototype.slice
+
+  if (!Array.prototype.find) {
+    Array.prototype.find = function (f) {
+      for (var i=0; i < this.length; i++) {
+        if ( f(this[i]) ) return this[i]
+      }
+    }
+  }
+
+  if (!String.prototype.capitalize) {
+    String.prototype.capitalize = function () {
+      return this[0].toUpperCase() + this.substring(1).toLowerCase()
+    }
+  }
+
+  Function.prototype.curry = function() {
+    var args, fn;
+    fn = this
+    args = slice.call(arguments)
+    return function() {
+      return fn.apply(this, args.concat(slice.call(arguments)))
+    }
+  }
+
+  // Curry and prevent default in one go
+  Function.prototype.coldCurry = function() {
+    var args, fn;
+    fn = this;
+    args = slice.call(arguments);
+    return function(e) {
+      e.preventDefault();
+      return fn.apply(this, args.concat(slice.call(arguments, 1)));
+    };
+  };
+
+})()

public/js/signin-panel.js

@@ -0,0 +1,55 @@
+(function () {
+
+  window.SigninPanel = {}
+
+  SigninPanel.controller = function (appCtrl) {
+    var ctrl = {
+      user: appCtrl.user,
+      formValues: {
+        username: '',
+        password: ''
+      }
+    }
+
+    ctrl.signin = function (e) {
+      e.preventDefault()
+      m.request({ method: 'post', url: '/signin', data: ctrl.formValues })
+        .then(ctrl.user, signinError)
+    }
+
+    ctrl.updateFormVal = function (e) {
+      ctrl.formValues[e.target.name] = e.target.value
+    }
+
+    return ctrl
+  }
+
+  SigninPanel.view = function (ctrl) {
+    if (ctrl.user())
+      return userInfo(ctrl)
+    else
+      return signinForm(ctrl)
+  }
+
+  var userInfo = function (ctrl) {
+    return m('.user-info', [
+      m('p', "Welcome, " + ctrl.user().username + "!")
+    ])
+  }
+
+  var signinForm = function (ctrl) {
+    return m('form', { onsubmit: ctrl.signin, onchange: ctrl.updateFormVal }, [
+      m('label', 'Username:'),
+      m('input[name=username]', { value: ctrl.formValues.username }),
+      m('label', 'Password:'),
+      m('input[type=password][name=password]', { value: ctrl.formValues.password }),
+      m('button', 'Sign In')
+    ])
+  }
+
+  // Helpers
+  function signinError() {
+    alert("Invalid username / password")
+  }
+
+})()