add tweets and drag and drop

.gitignore

@@ -1,4 +1,6 @@
 .idea
+Meteor
+dump.rdb
 
 packages
 client/lib/*

.meteor/packages

@@ -17,6 +17,5 @@ user-status
 bootboxjs
 publish-with-relations
 accounts-testing
-turkserver
-collection-hooks
 sharejs
+turkserver

client/css/datastream.styl

@@ -1 +1,28 @@
+ul.popout-elements
+    padding: 4px
 
+.data-cell
+    position: relative
+    width: 100%
+    overflow: hidden
+    margin-bottom: 3px
+    border-radius: 5px
+    border: 3px dotted #CCCCCC
+
+.data-remove
+    position: absolute
+    bottom: 0
+    right: 0
+
+.data-cell:hover,
+.data-cell.ui-draggable-dragging
+    transform: rotate(-3deg)
+    -webkit-transform: rotate(-3deg)
+    -moz-transform: rotate(-3deg)
+    -ms-transform: rotate(-3deg)
+    -o-transform: rotate(-3deg)
+    -moz-box-shadow: 8px 8px 5px #666666
+    -webkit-box-shadow: 8px 8px 5px #666666
+    box-shadow: 8px 8px 5px #666666
+    background: white
+    border: 3px solid #CFF09E

client/css/index.styl

@@ -27,8 +27,15 @@ blockquote:before, blockquote:after, q:before, q:after
 table
     border-collapse: collapse;
     border-spacing: 0;
+    table-layout: fixed
+    // word-wrap: normal
+    word-wrap: break-word
 
 .user-list
     height: 80px
     max-height: 80px
     overflow: auto
+
+.scroll-vertical
+    overflow-x: hidden
+    overflow-y: auto

client/css/mapper.styl

@@ -2,7 +2,7 @@
     position: relative
 
 .stack > .pages:not(.active)
-  visibility: hidden
+    visibility: hidden
 
 .pages
     // overflow: hidden // become a BFC (height wrap), no longer relevant
@@ -17,9 +17,14 @@
     position: absolute
     top: 30px
     bottom: 0px
+    -webkit-box-shadow: 0px 0px 5px 5px rgba(0, 0, 0, 0.2);
+    box-shadow: 0px 0px 5px 5px rgba(0, 0, 0, 0.2);
 
 #map, #events
     display: block
+    -webkit-box-shadow: 0px 0px 5px 5px rgba(0, 0, 0, 0.2);
+    box-shadow: 0px 0px 5px 5px rgba(0, 0, 0, 0.2);
+    border-radius: 4px
 
 .popover-fix
     position: relative
@@ -40,11 +45,6 @@ newevent-height = 30px
     height: newevent-height
     bottom: 0px
 
-table
-    table-layout: fixed
-    word-wrap: normal
-    // word-wrap: break-word
-
 .header-buttons, .header-location
     width: 71px
 

client/subscriptions.coffee

@@ -2,6 +2,7 @@
 Meteor.subscribe("chatrooms")
 # Chat messages are subscribed to individually
 
+Meteor.subscribe("datastream")
 Meteor.subscribe("docs")
 Meteor.subscribe("events")
 

client/views/datastream.coffee

@@ -0,0 +1,13 @@
+Template.datastream.data = ->
+  Datastream.find()
+
+Template.dataItem.rendered = ->
+  $(this.firstNode).draggable
+    addClasses: false
+    revert: "invalid"
+    zIndex: 1000
+    cursorAt: { top: 0, left: 0 }
+    helper: ->
+      # Set explicit width on the clone
+      currentWidth = $(this).width()
+      return $(this).clone().width(currentWidth)

client/views/datastream.html

@@ -1,5 +1,16 @@
 <template name="datastream">
-    <div class="well full-height">
+    <ul class="well full-height scroll-vertical popout-elements">
+        {{#each data}}
+        {{> dataItem}}
+        {{/each}}
+    </ul>
+</template>
 
-    </div>
+<template name="dataItem">
+    <li class="data-cell">
+        {{{text}}}
+        <button class="btn btn-danger btn-mini data-remove" title="Hide this">
+            <i class="icon-white icon-remove"></i>
+        </button>
+    </li>
 </template>

client/views/docs.coffee

@@ -37,3 +37,9 @@ Template.docCurrent.events =
     id = Session.get("document")
     Documents.remove(id)
     Session.set("document", null)
+
+Template.docCurrent.config = ->
+  (editor) ->
+    # Set some reasonable options on the editor
+    editor.setShowPrintMargin(false)
+    editor.getSession().setUseWrapMode(true)

client/views/docs.html

@@ -30,6 +30,6 @@
     {{#if document}}
     <input class="input-xlarge" type="text" value="{{title}}">
     <button class="btn btn-danger btn-small">Delete this document</button>
-    {{sharejsAce document id="editor"}}
+    {{sharejsAce document callback=config id="editor"}}
     {{/if}}
 </template>

client/views/events.coffee

@@ -1,10 +1,11 @@
 Template.events.eventRecords = ->
-  sort = {}
+
   key = Session.get("eventSortKey")
-  sort[key] = Session.get("eventSortOrder") || 1 if key?
+  return Events.find() unless key
 
-  Events.find {},
-    sort: sort
+  sort = {}
+  sort[key] = Session.get("eventSortOrder") || 1 if key?
+  return Events.find {}, { sort: sort }
 
 edit = (e) ->
   Events.update @_id,
@@ -32,7 +33,7 @@ Template.events.events =
       region: "",
       type: "",
       description: "",
-      sources: ""
+      sources: []
 
   "click span.sorter": (e) ->
     key = $(e.target).closest("span").attr("data-key")
@@ -54,6 +55,18 @@ Template.events.iconClass = ->
   else
     "icon-resize-vertical"
 
+Template.eventRow.rendered = ->
+  data = @data
+  $(@firstNode).droppable
+    addClasses: false
+    hoverClass: "success"
+    tolerance: "pointer"
+    drop: (event, ui) ->
+      tweet = Spark.getDataContext(ui.draggable.context)
+
+      Events.update data._id,
+        $addToSet: { sources: tweet._id }
+
 Template.eventRow.events =
   "click .button-locate": (e) ->
     # In the future, bring to map edit interface

client/views/events.html

@@ -30,13 +30,19 @@
 </template>
 
 <template name="eventRow">
-    <tr {{#if editing}} class="info" {{/if}}>
+    <tr class="{{#if editing}}info{{/if}}">
 
         {{#each eventFields}}
         {{eventCell ../this this}}
         {{/each}}
 
-        {{eventCell this "sources"}}
+        <td>
+            <div>
+                {{#each sources}}
+                {{> tweetIcon this}}
+                {{/each}}
+            </div>
+        </td>
 
         <td><div>
         {{#if location}}
@@ -69,6 +75,12 @@
     </tr>
 </template>
 
+<template name="tweetIcon">
+    <span class="label label-info">
+        <i class="icon-white icon-tag"></i>
+    </span>
+</template>
+
 <template name="_eventCell">
     <td><div class="{{#if editable}}editable{{/if}}">
         {{value}}

client/views/index.html

@@ -1,10 +1,14 @@
 <head>
-  <title>CrowdMapper</title>
+    <title>CrowdMapper</title>
+
+    <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
+    <link href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css"/>
 </head>
 
 <template name="home">
     <div class="hero-unit">
         <h1>Welcome to CrowdMapper.</h1>
+        <p>Instructions would be here.</p>
         <a href="/mapper" class="btn btn-success">Get started!</a>
     </div>
 </template>

client/views/map.coffee

@@ -83,7 +83,8 @@ Template.map.rendered = ->
 
     changed: (id, fields) ->
       feature = vectorLayer.getFeatureById(id)
-      return unless feature # this should just draw the feature, probably
+      # don't draw unless the feature exists and location changed
+      return unless feature and fields.location
 
       feature.geometry.x = fields.location[0]
       feature.geometry.y = fields.location[1]

models/model.coffee

@@ -3,6 +3,9 @@ this.ChatRooms = new Meteor.Collection("chatrooms")
 this.ChatUsers = new Meteor.Collection("chatusers")
 this.ChatMessages = new Meteor.Collection("chatmessages")
 
+# Datastream
+this.Datastream = new Meteor.Collection("datastream")
+
 # Docs
 this.Documents = new Meteor.Collection("docs")