Add in basic list of changes in track changes view

services/web/app/views/templates.jade

@@ -404,11 +404,6 @@
 			div(class='version-message') {{message}}
 			div(class='version-date') {{date}} 
 
-	script(type='text/template')#autoCompleteSuggestionTemplate
-		li
-			strong {{base}}
-			| {{completion}}
-
 	script(type='text/template')#versionListTemplate
 		ul#version-list.nav.nav-pills.nav-stacked
 			li.loading Loading...
@@ -428,6 +423,23 @@
 		div
 			a(href="#", title='Show Hot Keys List') Hot keys
 
+	script(type='text/template')#trackChangesPanelTemplate
+		#trackChangesPanel
+			.track-changes-side-bar
+				.change-list-area
+			.track-changes-diff
+
+	script(type='text/template')#changeListItemTemplate
+		a(href="#")
+			div(class='change-message') {{user_id}}
+			div(class='change-date') {{end_ts}} 
+			div(class='change-date') {{start_ts}} 
+
+	script(type='text/template')#changeListTemplate
+		ul.change-list.nav.nav-pills.nav-stacked
+			li.loading-changes Loading...
+			li.empty-message You haven't made any changes yet!
+
 	script(type='text/template')#hotKeysListTemplate
 		.hotkeys
 			h3 Common

services/web/public/coffee/editor/Editor.coffee

@@ -352,3 +352,9 @@ define [
 		getCurrentDocId: () ->
 			@current_doc_id
 
+		show: () ->
+			$("#editor").show()
+
+		hide: () ->
+			$("#editor").hide()
+

services/web/public/coffee/ide.coffee

@@ -25,6 +25,7 @@ define [
 	"file-view/FileViewManager"
 	"tour/IdeTour"
 	"analytics/AnalyticsManager"
+	"track-changes/TrackChangesManager"
 	"ace/ace"
 	"libs/jquery.color"
 	"libs/jquery-layout"
@@ -56,7 +57,8 @@ define [
 	BackspaceHighjack,
 	FileViewManager,
 	IdeTour,
-	AnalyticsManager
+	AnalyticsManager,
+	TrackChangesManager
 ) ->
 
 
@@ -117,6 +119,7 @@ define [
 			@cursorManager = new CursorManager(@)
 			@fileViewManager = new FileViewManager(@)
 			@analyticsManager = new AnalyticsManager(@)
+			@trackChangesManager = new TrackChangesManager(@)
 
 			@setLoadingMessage("Connecting")
 			firstConnect = true

services/web/public/coffee/track-changes/ChangeListView.coffee

@@ -0,0 +1,101 @@
+define [
+	"history/util"
+	"libs/mustache"
+	"libs/backbone"
+], (util)->
+	ChangeListView = Backbone.View.extend
+		template: $("#changeListTemplate").html()
+
+		events:
+			"scroll" : "loadUntilFull"
+
+		initialize: ->
+			@itemViews = []
+			@atEndOfCollection = false
+
+			self = this
+			@collection.on "add", (model) ->
+				self.addItem model
+			@collection.on "reset", (collection) ->
+				self.addItem model for model in collection.models
+
+			@render()
+			@hideLoading()
+
+		render: ->
+			@$el.html Mustache.to_html @template
+			@$el.css
+				overflow: "scroll"
+			this
+
+		addItem: (model) ->
+			view = new ChangeListItemView(model : model)
+			@itemViews.push view
+			index = @collection.indexOf(model)
+			elementAtIndex = @$(".change-list").children()[index]
+			view.$el.insertBefore(elementAtIndex)
+
+		listShorterThanContainer: ->
+			@$el.height() > @$(".change-list").height()
+		
+		atEndOfListView: ->
+			@$el.scrollTop() + @$el.height() >= @$(".change-list").height() - 30
+
+		loadUntilFull: (e, callback) ->
+			if (@listShorterThanContainer() or @atEndOfListView()) and not @atEndOfCollection and not @loading
+				@showLoading()
+				@hideEmptyMessage()
+				@collection.fetchNextBatch
+					error: =>
+						@hideLoading()
+						@showEmptyMessageIfCollectionEmpty()
+						callback() if callback?
+					success: (collection, response) =>
+						@hideLoading()
+						if response.updates.length == @collection.batchSize
+							@loadUntilFull(e, callback)
+						else
+							@atEndOfCollection = true
+							@showEmptyMessageIfCollectionEmpty()
+							callback() if callback?
+							
+			else
+				callback() if callback?
+
+		showEmptyMessageIfCollectionEmpty: ()->
+			if @collection.isEmpty()
+				@$(".empty-message").show()
+			else
+				@$(".empty-message").hide()
+
+		hideEmptyMessage: () ->
+			@$(".empty-message").hide()
+
+		showLoading: ->
+			@loading = true
+			@$(".loading-changes").show()
+		
+		hideLoading: ->
+			@loading = false
+			@$(".loading-changes").hide()
+	
+	ChangeListItemView = Backbone.View.extend
+		tagName: "li"
+	
+		template : $("#changeListItemTemplate").html()
+
+		initialize: ->
+			@render()
+
+		render: ->
+			@$el.html Mustache.to_html(@template, @modelView())
+			return this
+		
+		modelView: ->
+			modelView = @model.toJSON()
+			# modelView.start_ts = util.formatDate(modelView.start_ts)
+			# modelView.end_ts = util.formatDate(modelView.end_ts)
+			return modelView
+
+	return ChangeListView
+

services/web/public/coffee/track-changes/TrackChangesManager.coffee

@@ -0,0 +1,35 @@
+define [
+	"track-changes/models/ChangeList"
+	"track-changes/ChangeListView"
+], (ChangeList, ChangeListView) ->
+	class TrackChangesManager
+		template: $("#trackChangesPanelTemplate").html()
+		
+		constructor: (@ide) ->
+			@$el = $(@template)
+			$("#editorWrapper").append(@$el)
+			@hideEl()
+
+		show: () ->
+			project_id = window.userSettings.project_id
+			doc_id = @ide.editor.current_doc_id
+			@changes = new ChangeList([], doc_id: doc_id, project_id: project_id)
+
+			@changeListView = new ChangeListView(
+				collection : @changes,
+				el         : @$el.find(".change-list-area")
+			)
+			@changeListView.render()
+			@changeListView.loadUntilFull()
+
+			@showEl()
+
+		showEl: ->
+			@ide.editor.hide()
+			@$el.show()
+
+		hideEl: () ->
+			@ide.editor.show()
+			@$el.hide()
+
+	return TrackChangesManager

services/web/public/coffee/track-changes/models/Change.coffee

@@ -0,0 +1,10 @@
+define [
+	"libs/backbone"
+], ()->
+	Change = Backbone.Model.extend
+		parse: (change) ->
+			return {
+				start_ts: change.meta.start_ts
+				end_ts: change.meta.end_ts
+				user_id: change.meta.user_id
+			}

services/web/public/coffee/track-changes/models/ChangeList.coffee

@@ -0,0 +1,26 @@
+define [
+	"track-changes/models/Change"
+	"libs/backbone"
+], (Change)->
+	ChangeList = Backbone.Collection.extend
+		model: Change
+		batchSize: 3
+
+		initialize: (models, @options) ->
+			console.log arguments
+
+		url: () ->
+			url = "/project/#{@options.project_id}/doc/#{@options.doc_id}/updates?limit=#{@batchSize}"
+			if @models.length > 0
+				last = @models[@models.length - 1]
+				url += "&to=#{last.get("start_ts") - 1}"
+			return url
+
+		parse: (json) ->
+			return json.updates
+
+		fetchNextBatch: (options = {}) ->
+			options.add = true
+			@fetch options
+
+			

services/web/public/stylesheets/less/editor.less

@@ -200,6 +200,10 @@ body.editor {
 			bottom: 0;
 			z-index: 100;
 		}
+		#trackChangesPanel {
+			width: 100%;
+			height: 100%;
+		}
 	}
 
 	#undoConflictWarning {

services/web/public/stylesheets/less/trackchanges.less

@@ -0,0 +1,30 @@
+@changesListWidth:   200px;
+@versionsListPadding: 10px;
+
+#trackChangesPanel {
+	.track-changes-diff {
+		position: absolute;
+		right: @versionsListWidth + 1px;
+		right: 0;
+		padding: 0px 12px;
+		overflow: scroll;
+		height: 100%;
+	}
+
+	.track-changes-side-bar {
+		border-left: 1px solid #999;
+		height: 100%;
+		width: @versionsListWidth;
+		position: absolute;
+		right: 0;
+	}
+
+	.change-list-area {
+		overflow: scroll;
+		position: absolute;
+		left: 0px;
+		right: 0px;
+		top: 0px;
+		bottom: 0px;
+	}
+}

services/web/public/stylesheets/mainStyle.less

@@ -49,6 +49,7 @@
 @import "public/stylesheets/less/navbar.less";
 @import "public/stylesheets/less/footer.less";
 @import "public/stylesheets/less/list.less";
+@import "public/stylesheets/less/trackchanges.less";
 
 
 @import "public/stylesheets/less/fileuploader.less";