From f65902070648d4cd4f3f16aebd94e10d4335f8d3 Mon Sep 17 00:00:00 2001 From: brunosimon Date: Tue, 7 Jun 2016 00:37:20 +0200 Subject: [PATCH] Show selected file + Nav folder and files active class + Add difference ratio on versions --- site/app.class.js | 11 +- site/public/javascript/controllers/project.js | 22 +++- site/public/javascript/services/project.js | 110 +++++++++++++++++- site/public/stylesheets/style.css | 8 +- site/views/pages/index/project.jade | 40 +++---- site/views/partials/header.jade | 1 + 6 files changed, 157 insertions(+), 35 deletions(-) diff --git a/site/app.class.js b/site/app.class.js index 80f6a51..481945d 100644 --- a/site/app.class.js +++ b/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( './toto/tata/ipsum.txt', 'content 3' ) + project.update_file( './test-1.txt', 'content 2' ) + 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 } ) ) } diff --git a/site/public/javascript/controllers/project.js b/site/public/javascript/controllers/project.js index eb31a21..ba8344e 100644 --- a/site/public/javascript/controllers/project.js +++ b/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; } ] ); diff --git a/site/public/javascript/services/project.js b/site/public/javascript/services/project.js index adea9e9..1de68a2 100644 --- a/site/public/javascript/services/project.js +++ b/site/public/javascript/services/project.js @@ -4,31 +4,133 @@ angular_module.factory( '$timeout', function( $timeout ) { - update_callback = null; + var update_callback = null; - var result = {}; - result.data = 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":{}}; diff --git a/site/public/stylesheets/style.css b/site/public/stylesheets/style.css index 751c632..7f6be33 100644 --- a/site/public/stylesheets/style.css +++ b/site/public/stylesheets/style.css @@ -1,3 +1,7 @@ body { - background:#eee; -} \ No newline at end of file + background:#efefef; + font-family:Helvetica; + font-size:14px; +} + +nav.files-tree-nav .active > span {font-weight:bold;} diff --git a/site/views/pages/index/project.jade b/site/views/pages/index/project.jade index 76e5719..735d8aa 100644 --- a/site/views/pages/index/project.jade +++ b/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)") - | {{folder.name}} + span(ng-click="folder_click(_folder)",class="folder") + | {{_folder.name}} ul - li(ng-repeat="folder in folder.folders",ng-include="'folder_template.html'") - li(ng-repeat="file in folder.files",ng-click="file_click(file)") - | {{file.name}} + 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-class="_file.active ? 'active' : 'inactive'") + span(ng-click="file_click(_file)") + | {{_file.name}} section(ng-controller="ProjectController as controller",ng-init="init('" + project_slug + "')") header.main-header h1 - | Code Spectat + 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 - a.version(href="#") + header.file-header + | {{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 - a.version(href="#") - div.date - | 14:24:01 - div.differences - | Différences - a.version(href="#") - div.date - | 14:27:42 - div.differences - | Différences + | {{_version.diff_percent}} section.code pre - | <html> + | {{version.content}} include ../../partials/footer.jade diff --git a/site/views/partials/header.jade b/site/views/partials/header.jade index 0a1b5c9..86f329d 100644 --- a/site/views/partials/header.jade +++ b/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