Markdown-Content-Preview Widget

bower.json

@@ -23,9 +23,10 @@
   ],
   "description": "SCM-Manager related widgets",
   "dependencies": {
-    "angular": ">=1.4 <=1.6",
-    "angular-dashboard-framework": "~0.12.0",
-    "angular-chart.js": "^0.10.2"
+    "angular": ">=1.4 <=1.6.4",
+    "angular-dashboard-framework": "v0.12.x",
+    "angular-chart.js": "^1.1.0",
+    "angular-markdown-directive": "^0.3.1"
   },
   "devDependencies": {
     "angular-local-storage": ">=0.2"

package.json

@@ -20,7 +20,7 @@
     "gulp-connect": "~2.2.0",
     "gulp-csslint": "^0.1.5",
     "gulp-headerfooter": "^1.0.3",
-    "gulp-if": "^1.2.5",
+    "gulp-if": "2.x",
     "gulp-inject": "^1.2.0",
     "gulp-jshint": "^1.9.4",
     "gulp-less": "^3.0.2",

src/charts/commitsByAuthor.js

@@ -25,8 +25,9 @@
 'use strict';
 
 angular.module('adf.widget.scm')
-  .controller('CommitsByAuthorController', function(config, repository, commitsByAuthor){
+  .controller('CommitsByAuthorController', function (config, repository, commitsByAuthor) {
     var vm = this;
+    vm.repository = repository;
 
     if (repository && commitsByAuthor) {
       vm.chart = createChart();
@@ -37,14 +38,22 @@ angular.module('adf.widget.scm')
 
       angular.forEach(commitsByAuthor.author, function (entry) {
         var author = entry.value;
-        data[author]= entry.count;
+        data[author] = entry.count;
       });
 
+      var options = {
+        legend: {
+          display: true,
+          position: "bottom"
+        }
+      };
+
       var chart = {
         labels: [],
         data: [],
         series: ["Commits"],
-        class: "chart-pie"
+        class: "chart-pie",
+        options: options
       };
 
       angular.forEach(data, function (count, author) {

src/charts/commitsByMonth.js

@@ -25,27 +25,41 @@
 'use strict';
 
 angular.module('adf.widget.scm')
-  .controller('CommitsByMonthController', function(config, repository, commitsByMonth) {
+  .controller('CommitsByMonthController', function (config, repository, commitsByMonth) {
     var vm = this;
+    vm.repository = repository;
+
     if (commitsByMonth) {
       vm.chart = createChart();
     }
 
-    function parseDate(input) {
-      var parts = input.split('-');
-      return Date.UTC(parseInt(parts[0]), parseInt(parts[1]) - 1, 1);
-    }
-
     function createChart() {
       var chartData = [];
+      var options = {
+        scales: {
+          yAxes: [
+            {
+              id: 'y-axis-1',
+              display: true,
+              position: 'left',
+              ticks: {fixedStepSize: 1},
+              scaleLabel: {
+                display: true,
+                labelString: 'Commits'
+              }
+            }
+          ]
+        }
+      };
       var chart = {
         labels: [],
         data: [chartData],
         series: ["Commits"],
-        class: "chart-line"
+        class: "chart-line",
+        options: options
       };
 
-      angular.forEach(commitsByMonth.month, function(month) {
+      angular.forEach(commitsByMonth.month, function (month) {
         chart.labels.push(month.value);
         chartData.push(month.count);
       });

src/charts/commitsLastCommits.js

@@ -25,28 +25,46 @@
 'use strict';
 
 angular.module('adf.widget.scm')
-  .controller('LastCommitsController', function($filter, config, repository, commits){
+  .controller('LastCommitsController', function ($filter, config, repository, commits) {
     var vm = this;
+    vm.repository = repository;
 
     if (repository && commits) {
       vm.chart = createChart();
     }
 
     function createChart() {
+      var options = {
+        scales: {
+          yAxes: [
+            {
+              id: 'y-axis-1',
+              display: true,
+              position: 'left',
+              ticks: {fixedStepSize: 1},
+              scaleLabel: {
+                display: true,
+                labelString: 'Commits'
+              }
+            }
+          ]
+        }
+      };
       var chartData = [];
       var chart = {
         labels: [],
         data: [chartData],
         series: ["Commits"],
-        class: "chart-line"
+        class: "chart-line",
+        options: options
       };
 
       var data = {};
-      angular.forEach(commits, function(commit){
+      angular.forEach(commits, function (commit) {
         var date = new Date(commit.date);
         var key = date.getUTCFullYear() + '-' + (date.getUTCMonth() + 1) + '-' + date.getUTCDate();
         var entry = data[key];
-        if (entry){
+        if (entry) {
           entry.count += 1;
         } else {
           data[key] = {
@@ -56,8 +74,7 @@ angular.module('adf.widget.scm')
         }
       });
 
-      angular.forEach(data, function(entry) {
-        console.log(entry);
+      angular.forEach(data, function (entry) {
         chart.labels.push(entry.date);
         chartData.push(entry.count);
       });

src/charts/line-chart.html

@@ -2,10 +2,15 @@
   <div class="alert alert-info" ng-if="!vm.chart">
     Please insert a repository path in the widget configuration
   </div>
+  <div ng-if="vm.repository.status == 404 || vm.repository.status == 500" class="alert alert-danger">
+    <b>Error {{vm.repository.status}}</b> the endpoint could not be reached, this could mean that the selected repository does not exist
+    or that the statistics plugin is not installed
+  </div>
   <div ng-if="vm.chart">
     <canvas id="line" class="chart chart-line"
             chart-data="vm.chart.data" chart-labels="vm.chart.labels"
-            chart-options="vm.chart.options" chart-series="vm.chart.series">
+            chart-series="vm.chart.series" chart-options="vm.chart.options">
     </canvas>
   </div>
+
 </div>

src/charts/pie-chart.html

@@ -2,10 +2,15 @@
   <div class="alert alert-info" ng-if="!vm.chart">
     Please insert a repository path in the widget configuration
   </div>
+  <div ng-if="vm.repository.status == 404 || vm.repository.status == 500" class="alert alert-danger">
+    <b>Error {{vm.repository.status}}</b> the endpoint could not be reached, this could mean that the selected repository does not exist
+    or that the statistics plugin is not installed
+  </div>
   <div ng-if="vm.chart">
     <canvas id="pie" class="chart chart-pie"
             chart-legend="true" chart-data="vm.chart.data"
-            chart-labels="vm.chart.labels">
+            chart-labels="vm.chart.labels" chart-options="vm.chart.options">
     </canvas>
   </div>
+
 </div>

src/commits/commits.js

@@ -25,22 +25,22 @@
 'use strict';
 
 angular.module('adf.widget.scm')
-  .controller('CommitsController', function($sce, config, repository, commits){
+  .controller('CommitsController', function ($sce, config, repository, commits) {
     var vm = this;
 
     vm.repository = repository;
 
     // allow html descriptions
-    angular.forEach(commits, function(commit){
+    angular.forEach(commits, function (commit) {
       commit.description = $sce.trustAsHtml(commit.description);
     });
     vm.commits = commits;
 
-    vm.gravatarHash = function(commit){
+    vm.gravatarHash = function (commit) {
       var hash;
-      if (commit.properties){
-        for (var i=0; i<commit.properties.length; i++){
-          if (commit.properties[0].key === 'gravatar-hash'){
+      if (commit.properties) {
+        for (var i = 0; i < commit.properties.length; i++) {
+          if (commit.properties[0].key === 'gravatar-hash') {
             hash = commit.properties[0].value;
             break;
           }

src/commits/view.html

@@ -2,6 +2,9 @@
   <div ng-if="!config.repository" class="alert alert-info">
     Please configure a repository
   </div>
+  <div ng-if="vm.repository.status == 404 || vm.repository.status == 500" class="alert alert-danger">
+    <b>Error {{vm.repository.status}}</b> the endpoint could not be reached, this could mean that the selected repository does not exist
+  </div>
   <div ng-if="config.repository">
     <ul class="media-list">
       <li class="media" ng-repeat="commit in vm.commits">
@@ -16,4 +19,5 @@
       </li>
     </ul>
   </div>
+
 </div>

src/markdownPreview/edit.html

@@ -0,0 +1,24 @@
+<form role="form">
+  <div class="form-group">
+    <p><label for="repository">Repository</label>
+      <select name="repository" id="repository" class="form-control" ng-model="config.repository"
+              ng-init="vm.getBranchesByRepositoryId(config.repository)"
+              ng-change="vm.getBranchesByRepositoryId(config.repository)">
+        <option ng-repeat="repository in vm.repositories | orderBy: 'name'" value="{{repository.id}}">
+          {{repository.name}}
+        </option>
+      </select>
+    </p>
+
+    <p ng-if="vm.branches"><label for="branch">Branch</label>
+      <select name="branch" id="branch" class="form-control" ng-model="config.branch">
+        <option ng-repeat="branch in vm.branches| orderBy: 'name'" value="{{branch.id}}">
+          {{branch.name}}
+        </option>
+      </select>
+    </p>
+    <label for="path">Path to Markdown File</label>
+    <input type="text" class="form-control" id="path" ng-model="config.path">
+  </div>
+</form>
+

src/markdownPreview/markdownPreview.js

@@ -0,0 +1,8 @@
+'use strict';
+
+angular.module('adf.widget.scm')
+  .controller('MarkdownPreviewController', function (repository, fileContent) {
+    var vm = this;
+    vm.repository = repository;
+    vm.fileContent = fileContent;
+  });

src/markdownPreview/markdownPreviewEdit.js

@@ -0,0 +1,21 @@
+'use strict';
+
+angular.module('adf.widget.scm')
+  .controller('MarkdownPreviewEditController', function (repositories, SCM) {
+    var vm = this;
+    vm.repositories = repositories;
+
+    vm.getBranchesByRepositoryId = function (repositoryId) {
+      if (repositoryId) {
+        SCM.getBranchesByRepositoryId(repositoryId).then(function (result) {
+          // catch repositories without branch support
+          if (result.status == 400)  {
+            vm.branches = null;
+          }else{
+            vm.branches = result.branch;
+          }
+        });
+      }
+    };
+
+  });

src/markdownPreview/view.html

@@ -0,0 +1,15 @@
+<style>
+  div.markdownContent{
+    overflow: auto;
+    width: 100%;
+  }
+</style>
+<div class="alert alert-info" ng-if="!vm.fileContent">
+  Please configure a specific file
+</div>
+<div ng-if="vm.fileContent" btf-markdown="vm.fileContent" class="markdownContent">
+</div>
+<div class="alert alert-danger" ng-if="vm.fileContent.status == 500 || vm.fileContent.status == 404">
+  <b>Error {{vm.fileContent.status}}</b> Markdown-File not found. Please check your configuration and try again.
+</div>
+