incident types

application.rb

@@ -25,3 +25,27 @@ def to_json(*)
   content_type :json
   provinces.to_json
 end
+
+class IncidentType
+  attr_accessor :name
+
+  def initialize(name)
+    @name = name
+  end
+
+  def to_json(*)
+    {name: @name}.to_json
+  end
+end
+
+incident_types = [ IncidentType.new('Fire'),
+                   IncidentType.new('Water outage'),
+                   IncidentType.new('Electricity outage'),
+                   IncidentType.new('Faulty traffic light'),
+                   IncidentType.new('Crime')
+                 ]
+
+get '/incident_types' do
+  content_type :json
+  incident_types.to_json
+end

public/index.html

@@ -45,12 +45,25 @@ <h1>Eish - Incident Reports for South Africa</h1>
         <div class="two columns">
           <select id="provinces"></select>
         </div>
-        <div class="eight columns">
+        <div class="seven columns">
           <input id="address" type="text" class="expand input-text"/>
         </div>
-        <div class="two columns">
+        <div class="three columns">
           <a href="#" id="find_address" class="green button">Find</a>
         </div>
+	</form>
+    </div>
+    <div class="row">
+      <form class="nice">
+      <div class="two columns">
+         <select id="incident_types"></select>
+      </div>
+      <div class="seven columns">
+        <textarea class="expand text-area"></textarea>
+      </div>
+      <div class="three columns">
+	<a  href="#" id="report_incident" class="green button">Report Incident</a>
+      </div>
       </form>
     </div>
 

public/javascripts/app.js

@@ -37,10 +37,49 @@ window.ProvinceListView = Backbone.View.extend({
   }
 })
 
+/* Incident Types */
+window.IncidentType = Backbone.Model.extend()
+
+window.IncidentTypeList = Backbone.Collection.extend({
+  model: IncidentType,
+  url: 'incident_types'
+})
+
+window.IncidentItemView = Backbone.View.extend({
+  tagName: 'option',
+
+  initialize: function() {
+    _.bindAll(this, 'render')
+  },
+
+  render: function() {
+    $(this.el).html(this.model.get('name') ).attr({ value: this.model.get('name') })
+    return this
+  }
+})
+
+window.IncidentListView = Backbone.View.extend({
+  el: $('#incident_types'),
+
+  initialize: function() {
+     _.bindAll(this, 'render')
+     this.collection.on('reset', this.render, this)
+  },
+
+  render: function() {
+    self = this
+     _.each(this.collection.models, function(province) {
+       $(self.el).append( new IncidentItemView({model: province}).render().el)
+     })
+    return this
+  }
+})
+
+
 /* Google maps wrappers */
 window.MapLocation = Backbone.Model.extend({
   initialize: function() {
-    this.geocoder = new google.maps.Geocoder();
+    this.geocoder = new google.maps.Geocoder()
   },
 
   setAddress: function(address){
@@ -113,6 +152,9 @@ jQuery(document).ready(function() {
   var province_list =  new ProvinceList()
   province_list.fetch()
   var province_list_view = new ProvinceListView({collection: province_list })
+  var incident_list = new IncidentTypeList()
+  incident_list.fetch()
+  var incident_list_view = new IncidentListView({collection: incident_list})
   var map = new Map()
   var map_location_form = new MapLocationForm({map: map})
   window.map_location_form = map_location_form