Initial Commit

client/app/project/project.component.js

@@ -0,0 +1,121 @@
+'use strict';
+const angular = require('angular');
+
+const uiRouter = require('angular-ui-router');
+
+import routes from './project.routes';
+
+export class ProjectComponent {
+  /*@ngInject*/
+  constructor($scope, Projects) {
+    'ngInject';
+    var default_project_folder = '/opt/ehc-ansible-projects/';
+
+    $scope.blankProject = {
+      name: '',
+      ansibleEngine: {
+        ansibleHost: '',
+        ansibleHostUser: '',
+        ansibleHostPassword: '',
+        projectFolder: '',
+        customModules: ''
+
+      }
+    };
+
+    $scope.msg = "";
+    $scope.msg_status = "";
+
+    $scope.newProject = $scope.blankProject;
+
+    $scope.editProjectFlag = false;
+
+    $scope.saveButtonIcon = "fa-save";
+
+    $scope.showProjectForm = function(){
+      $scope.showCreateProject = true;
+      $scope.editProjectFlag = false;
+      $scope.newProject = $scope.blankProject;
+      $scope.msg = "";
+      $scope.msg_status = "";
+    };
+
+
+    $scope.hideProjectForm = function(){
+      $scope.showCreateProject = false;
+      $scope.editProjectFlag = false;
+      $scope.newProject = $scope.blankProject;
+      $scope.msg = "";
+      $scope.msg_status = "";
+    };
+
+    $scope.getProjects = function(){
+      console.log("Getting Projects");
+      $scope.projects = Projects.resource.query(function(){
+        console.log($scope.projects);
+      })
+
+    };
+
+    $scope.getProjects();
+
+    $scope.deleteProject = function(project){
+      project.$remove(function(){
+        $scope.getProjects();
+      })
+    };
+
+    $scope.editProject = function(project){
+      $scope.showCreateProject = true;
+      $scope.editProjectFlag = true;
+      $scope.newProject = project;
+    };
+
+    $scope.createProject = function(){
+      $scope.newProject.creationTime = new Date();
+      //$scope.newProject.ansibleEngine.projectFolder = default_project_folder + '/' + $scope.newProject.name
+      //$scope.newProject.ansibleEngine.customModules = $scope.newProject.ansibleEngine.projectFolder + '/library'
+
+      var projectSavedCallback = function(){
+        $scope.showCreateProject = false;
+        $scope.msg = "Project Saved Successfully";
+        $scope.msg_status = "success";
+        $scope.getProjects();
+        $scope.saveButtonIcon = 'fa-save';
+      };
+
+      var projectSaveFailedCallback = function(errResponse){
+        $scope.msg = errResponse.data;
+        $scope.msg_status = "danger";
+        $scope.saveButtonIcon = 'fa-save';
+      };
+
+      $scope.saveButtonIcon = 'fa-spinner fa-spin';
+
+      if($scope.editProjectFlag){
+        $scope.editProjectFlag = false;
+        $scope.newProject.$update(projectSavedCallback,projectSaveFailedCallback);
+      }else{
+        Projects.resource.save($scope.newProject,projectSavedCallback,projectSaveFailedCallback);
+      }
+
+
+    };
+
+    $scope.$watch('newProject.name', function(newValue, oldValue){
+      console.log("Changed");
+      $scope.newProject.ansibleEngine.projectFolder = '/opt/ansible-projects/' + newValue;
+      $scope.newProject.ansibleEngine.customModules = '/opt/ansible-projects/' + newValue + '/library';
+    });
+
+  }
+}
+
+export default angular.module('webAppApp.project', [uiRouter])
+  .config(routes)
+  .component('project', {
+    template: require('./project.html'),
+    controller: ProjectComponent,
+    controllerAs: 'projectCtrl'
+  })
+  .name;

client/app/project/project.component.spec.js

@@ -0,0 +1,17 @@
+'use strict';
+
+describe('Component: ProjectComponent', function() {
+  // load the controller's module
+  beforeEach(module('webAppApp.project'));
+
+  var ProjectComponent;
+
+  // Initialize the controller and a mock scope
+  beforeEach(inject(function($componentController) {
+    ProjectComponent = $componentController('project', {});
+  }));
+
+  it('should ...', function() {
+    expect(1).to.equal(1);
+  });
+});

client/app/project/project.css

@@ -0,0 +1,5 @@
+.hint {
+  /* Copy styles from ng-messages */
+  font-size: 12px;
+  /* Set our own color */
+  color: grey; }

client/app/project/project.html

@@ -0,0 +1,80 @@
+<div class="container">
+  <div class="row" style="margin-top:50px;">
+    <div class="col-md-6">
+
+      <button class="btn btn-default" ng-click="showProjectForm()">Create <span class="fa fa-plus"></span></button>
+
+      <form ng-show="showCreateProject">
+        <p class="form-group">
+          <label>Project Name</label>
+          <input type="text" ng-model="newProject.name" class="form-control" ng-required="true">
+        </p>
+
+        <p class="form-group">
+          <label>Ansible Host</label>
+          <input type="text" ng-model="newProject.ansibleEngine.ansibleHost" class="form-control">
+        <div class="hint">Ansible Controller system - A linux system with Ansible Installed on it. Required if you want to execute Ansible playbooks. You could skip this and still generate playbooks but not test them.</div>
+        </p>
+
+        <p class="form-group" ng-if="newProject.ansibleEngine.ansibleHost">
+          <label>User</label>
+          <input type="text" ng-model="newProject.ansibleEngine.ansibleHostUser" class="form-control">
+        </p>
+
+        <p class="form-group" ng-if="newProject.ansibleEngine.ansibleHost">
+          <label>Host Password</label>
+          <input type="password" ng-model="newProject.ansibleEngine.ansibleHostPassword" class="form-control">
+        </p>
+
+        <p class="form-group" ng-if="newProject.ansibleEngine.ansibleHost">
+          <label>Project Folder</label>
+          <input ng-model="newProject.ansibleEngine.projectFolder" class="form-control">
+          <div ng-if="newProject.ansibleEngine.ansibleHost" class="hint">A directory path to store files of this project </div>
+        </p>
+
+        <p class="form-group" ng-if="newProject.ansibleEngine.ansibleHost">
+          <label>Custom Modules Location</label>
+          <input ng-model="newProject.ansibleEngine.customModules" class="form-control">
+          <div ng-if="newProject.ansibleEngine.ansibleHost" class="hint">A directory path to store custom modules for this project </div>
+        </p>
+
+        <button class="btn btn-success" ng-disabled="!newProject.name" ng-click="createProject()"> Save <span class="fa {{saveButtonIcon}}"></span></button>
+        <button class="btn btn-warning" ng-click="hideProjectForm()"> Cancel <span class="fa fa-times"></span></button>
+
+      </form>
+
+      <div ng-if="msg" class="alert alert-{{msg_status}}">{{msg}}</div>
+
+    </div>
+  </div>
+</div>
+
+<div class="container">
+  <div class="table-responsive">
+    <table class="table">
+      <thead>
+      <tr>
+        <th>Name</th>
+        <th>Ansible Host</th>
+        <th>Ansible Version</th>
+        <th>Time</th>
+        <th>Actions</th>
+      </tr>
+      </thead>
+      <tbody>
+      <tr ng-repeat="project in projects | orderBy : 'executionTime'">
+        <td>{{project.name}}</td>
+        <td>{{project.ansibleEngine.ansibleHost}}</td>
+        <td>{{project.ansibleVersion}}</td>
+        <td>{{project.creationTime | date : 'medium'}}</td>
+        <td>
+          <div class="btn-group">
+            <label class="btn btn-default" ng-click="editProject(project)" ><span class="fa fa-edit"></span></label>
+            <label class="btn btn-danger" ng-click="deleteProject(project)" confirm="Are you sure you want to delete?" ><span class="fa fa-trash"></span></label>
+          </div>
+        </td>
+      </tr>
+      </tbody>
+    </table>
+  </div>
+</div>

client/app/project/project.routes.js

@@ -0,0 +1,10 @@
+'use strict';
+
+export default function($stateProvider) {
+  'ngInject';
+  $stateProvider
+    .state('project', {
+      url: '/project',
+      template: '<project></project>'
+    });
+}