Show selected file + Nav folder and files active class + Add difference ratio on versions

site/app.class.js

@@ -40,12 +40,15 @@ class App
 		var project = this.projects.create_project( 'dummy' )
 		project.create_folder( './toto' )
 		project.get_folder( './toto//tutu/tete', true )
-		project.create_file( './coucou/coco.txt', 'content 0' )
+		project.create_file( './coucou/coco.txt', '1234' )
 		project.create_file( './test-1.txt', 'content 1' )
-		project.update_file( './toto/tata/lorem.txt', 'content 2' )
+		project.update_file( './test-1.txt', 'content 2' )
-		project.update_file( './toto/tata/ipsum.txt', 'content 3' )
+		project.update_file( './test-1.txt', 'content 31298' )
+		project.update_file( './toto/tata/lorem.txt', '123456789' )
+		project.update_file( './toto/tata/lorem.txt', '1aze' )
+		project.update_file( './toto/tata/ipsum.txt', 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia asperiores iure, animi voluptatibus ut officiis. Molestias, quod perferendis hic totam doloremque, porro aperiam enim tenetur, maxime inventore consequuntur nisi in?' )
 		project.delete_folder( './toto/tutu', true )
-		project.delete_file( './toto/tata/ipsum.txt' )
+		// project.delete_file( './toto/tata/ipsum.txt' )
 		// console.log( util.inspect( project.folders, { depth: null, colors: true } ) )
 	}
 

site/public/javascript/controllers/project.js

@@ -7,12 +7,28 @@ angular_module.controller(
         {
             $scope.folder_click = function( folder )
             {
-                console.log( folder );
+                project.each_folder( function( folder )
+                {
+                    folder.active = false;
+                } );
+
+                folder.active = true;
             };
 
             $scope.file_click = function( file )
             {
-                console.log( file );
+                project.each_file( function( file )
+                {
+                    file.active = false;
+                } );
+
+                file.active = true;
+                $scope.file = file;
+            };
+
+            $scope.version_click = function( version )
+            {
+                $scope.version = version;
             };
 
             $scope.init = function( project_slug )
@@ -29,6 +45,8 @@ angular_module.controller(
             } );
 
             $scope.project = project.data;
+            $scope.file    = null;
+            $scope.version = null;
         }
     ]
 );

site/public/javascript/services/project.js

@@ -4,31 +4,133 @@ angular_module.factory(
         '$timeout',
         function( $timeout )
         {
-            update_callback = null;
+            var update_callback = null;
 
+            // Result
             var result  = {};
             result.data = null;
+
+            result.each_folder = function( folder, callback )
+            {
+                // Only callback provided
+                if( typeof folder === 'function' )
+                {
+                    callback = folder;
+                    folder   = result.data;
+                }
+
+                // Apply callback
+                callback.apply( folder, [ folder ] );
+
+                // Each folder
+                for(var _folder_key in folder.folders)
+                {
+                    var _folder = folder.folders[ _folder_key ];
+
+                    result.each_folder( _folder, callback );
+                }
+            }
+
+            result.each_file = function( folder, callback )
+            {
+                // Only callback provided
+                if( typeof folder === 'function' )
+                {
+                    callback = folder;
+                    folder   = result.data;
+                }
+
+                // Each folder
+                result.each_folder( folder, function( folder )
+                {
+                    // Each file
+                    for(var _file_key in folder.files)
+                    {
+                        var _file = folder.files[ _file_key ];
+
+                        callback.apply( _file, [ _file ] );
+                    }
+                } );
+            }
+
+            result.each_version = function( folder, callback )
+            {
+                // Only callback provided
+                if( typeof folder === 'function' )
+                {
+                    callback = folder;
+                    folder   = result.data;
+                }
+
+                // Each file
+                result.each_file( folder, function( file )
+                {
+                    // Each version
+                    for(var _version_key in file.versions)
+                    {
+                        var _version = file.versions[ _version_key ];
+
+                        callback.apply( _version, [ _version ] );
+                    }
+                } );
+            }
+
+            // Update callback
             result.on_update = function( callback )
             {
                 update_callback = callback;
             };
+
+            // Connect
             result.connect = function( project_name )
             {
+                // Connect to socket
                 var socket = io( 'http://192.168.1.4:3000/project/' + project_name );
 
+                // Connect event
                 socket.on( 'connect', function()
                 {
                     console.log('connected');
                 } );
 
+                // Update project event
                 socket.on( 'update_project', function( data )
                 {
+                    // Reformat versions
+                    result.each_version( data, function( version )
+                    {
+                        var count    = 0,
+                            modified = 0;
+
+                        if( !version.diff )
+                        {
+                            version.diff_ratio = 1;
+                            count    = 1;
+                            modified = 1;
+                        }
+                        else
+                        {
+                            for( var _diff_key in version.diff )
+                            {
+                                var _diff = version.diff[ _diff_key ];
+                                count += _diff.count;
+
+                                if( _diff.removed || _diff.added )
+                                    modified += _diff.count;
+                            }
+                            version.diff_ratio = modified / count;
+                        }
+
+                        version.diff_percent = Math.round( version.diff_ratio * 100 ) + '%';
+                    } );
+
+                    // Save in results
                     result.data = data;
 
+                    // Apply callback
                     if( typeof update_callback === 'function' )
                         update_callback.apply( this, [ data ] );
                 } );
-
             };
 
             result.data = {"name":"","folders":{}};

site/public/stylesheets/style.css

@@ -1,3 +1,7 @@
 body {
-	background:#eee;
+	background:#efefef;
+    font-family:Helvetica;
+    font-size:14px;
 }
+
+nav.files-tree-nav .active > span {font-weight:bold;}

site/views/pages/index/project.jade

@@ -1,43 +1,37 @@
 include ../../partials/header.jade
 
 script(type="text/ng-template",id="folder_template.html")
-    span(ng-click="folder_click(folder)")
+    span(ng-click="folder_click(_folder)",class="folder")
-        | {{folder.name}}
+        | {{_folder.name}}
     ul
-        li(ng-repeat="folder in folder.folders",ng-include="'folder_template.html'")
+        li(ng-repeat="_folder in _folder.folders",ng-include="'folder_template.html'",ng-class="_folder.active ? 'active' : 'inactive'")
-        li(ng-repeat="file in folder.files",ng-click="file_click(file)")
+        li(ng-repeat="_file in _folder.files",ng-class="_file.active ? 'active' : 'inactive'")
-            | {{file.name}}
+            span(ng-click="file_click(_file)")
+                | {{_file.name}}
 
 section(ng-controller="ProjectController as controller",ng-init="init('" + project_slug + "')")
     header.main-header
         h1
+            a(href="/")
                 | Code Spectat
     aside
         header.aside-header
             | {{project.name}}
-        nav.aside-nav
+        nav.files-tree-nav
             ul
-                li(ng-repeat="folder in project.folders",ng-include="'folder_template.html'")
+                li(ng-repeat="_folder in project.folders",ng-include="'folder_template.html'")
     section.file
-        section.historic
+        header.file-header
-            a.version(href="#")
+            | {{file.name}}
+        nav.versions-nav
+            a.version(href="#",ng-repeat="_version in file.versions",ng-click="version_click(_version)")
                 div.date
-                    | 14:23:14
+                    | {{_version.date}}
                 div.differences
-                    | Différences
+                    | {{_version.diff_percent}}
-            a.version(href="#")
-                div.date
-                    | 14:24:01
-                div.differences
-                    | Différences
-            a.version(href="#")
-                div.date
-                    | 14:27:42
-                div.differences
-                    | Différences
         section.code
             pre
-                | <html>
+                | {{version.content}}
 
 
 include ../../partials/footer.jade

site/views/partials/header.jade

@@ -11,4 +11,5 @@ html(ng-app="application")
         script(src="/javascript/controllers/projects.js")
         script(src="/javascript/services/project.js")
         script(src="/javascript/services/projects.js")
+        link(rel="stylesheet", href="/stylesheets/style.css")
     body