Initial Commit

client/app/main/main.component.js

@@ -0,0 +1,42 @@
+import angular from 'angular';
+import uiRouter from 'angular-ui-router';
+import routing from './main.routes';
+
+export class MainController {
+
+  awesomeThings = [];
+  newThing = '';
+
+  /*@ngInject*/
+  constructor($http) {
+    this.$http = $http;
+  }
+
+  $onInit() {
+    this.$http.get('/api/things')
+      .then(response => {
+        this.awesomeThings = response.data;
+      });
+  }
+
+  addThing() {
+    if(this.newThing) {
+      this.$http.post('/api/things', {
+        name: this.newThing
+      });
+      this.newThing = '';
+    }
+  }
+
+  deleteThing(thing) {
+    this.$http.delete(`/api/things/${thing._id}`);
+  }
+}
+
+export default angular.module('app2App.main', [uiRouter])
+  .config(routing)
+  .component('main', {
+    template: require('./main.html'),
+    controller: MainController
+  })
+  .name;

client/app/main/main.component.spec.js

@@ -0,0 +1,37 @@
+'use strict';
+
+import main from './main.component';
+import {
+  MainController
+} from './main.component';
+
+describe('Component: MainComponent', function() {
+  beforeEach(angular.mock.module(main));
+  beforeEach(angular.mock.module('stateMock'));
+
+  var scope;
+  var mainComponent;
+  var state;
+  var $httpBackend;
+
+  // Initialize the controller and a mock scope
+  beforeEach(inject(function(_$httpBackend_, $http, $componentController, $rootScope, $state) {
+    $httpBackend = _$httpBackend_;
+    $httpBackend.expectGET('/api/things')
+      .respond(['HTML5 Boilerplate', 'AngularJS', 'Karma', 'Express']);
+
+    scope = $rootScope.$new();
+    state = $state;
+    mainComponent = $componentController('main', {
+      $http,
+      $scope: scope
+    });
+  }));
+
+  it('should attach a list of things to the controller', function() {
+    mainComponent.$onInit();
+    $httpBackend.flush();
+    expect(mainComponent.awesomeThings.length)
+      .to.equal(4);
+  });
+});

client/app/main/main.css

@@ -0,0 +1,27 @@
+.thing-form {
+  margin: 20px 0;
+}
+
+#banner {
+  border-bottom: none;
+  margin-top: -20px;
+}
+
+#banner h1 {
+  font-size: 60px;
+  line-height: 1;
+  letter-spacing: -1px;
+}
+
+.hero-unit {
+  position: relative;
+  padding: 30px 15px;
+  color: #F5F5F5;
+  text-align: center;
+  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
+  background: #2d363a;
+}
+
+.navbar-text {
+  margin-left: 15px;
+}

client/app/main/main.html

@@ -0,0 +1,82 @@
+<header class="hero-unit" id="banner">
+  <div class="container">
+    <p style="font-size:50px; font-family: 'ExpletusSans-Regular'">play<span style="font-size: 70px;">A</span>ble</p>
+    <p class="lead"><a style="color:#ff0050;" href="http://www.ansible.com" target="_blank">Ansible</a> Playbook generator and orchestrator</p>
+    <img src="assets/images/Button-1-play-icon.png" alt="I'm Yeoman">
+  </div>
+</header>
+
+<div class="container">
+  <div class="features-unit">
+    <div class="row" style="margin-top:50px;">
+      <div class="col-md-6">
+        <img class="md-whiteframe-21dp" width="100%" src="assets/images/playbook.png">
+      </div>
+      <div class="col-md-6 " style="text-align: left;">
+        <h2>Generate Ansible Playbooks</h2>
+        <ul>
+          <li>Generate Ansible playbooks using UI</li>
+          <li>Create playbooks, plays and tasks in few clicks</li>
+          <li>Lists all available ansible modules</li>
+          <li>Provides description and examples of modules</li>
+          <li>Provides an interface to input parameters for each module</li>
+        </ul>
+      </div>
+    </div>
+    <div class="row" style="margin-top:50px;">
+      <div class="col-lg-6" style="text-align: center;align-content: center;">
+        <h2>Import input</h2>
+        <p style="width:400px;">Import inputs into ansible inventory file format.</p>
+      </div>
+      <div class="col-lg-6 ">
+        <img class="md-whiteframe-21dp" src="assets/images/inventory.png" >
+      </div>
+
+    </div>
+    <div class="row" style="margin-top:50px;">
+      <div class="col-lg-6  ">
+        <img class="md-whiteframe-21dp" width="100%" src="assets/images/play.png">
+      </div>
+      <div class="col-lg-6 " style="text-align: left;">
+        <h2>Play!</h2>
+        <ul>
+          <li>Run your playbooks and view results</li>
+          <li>Run playbooks at a play or task level</li>
+        </ul>
+      </div>
+
+    </div>
+  </div>
+
+</div>
+
+<div style="color:white;background-color: #2d363a;padding-top:30px;padding-bottom:50px;">
+  <div class="container">
+    <div>
+      <div style="text-align: center">
+        <h1>About us</h1>
+      </div>
+      <div layout="row" layout-align="center" class="layout-align-center-stretch layout-row">
+        <div layout="column" layout-align="center" style="text-align: center;margin-left:30px;margin-right:30px;" class="layout-align-center-stretch layout-column">
+          <h3>Mumshad Mannambeth</h3>
+          <a href="mailto:mmumshad@gmail.com"><span class="fa fa-send"></span></a>
+        </div>
+      </div>
+      <div layout="row" layout-align="center" style="text-align: center;margin-top:30px;" class="layout-align-center-stretch layout-row">
+        <div class="alert alert-danger">This is a proof-of-concept implementation. This is only to be used for testing purpose and NOT to be used in production.</div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<div style="color:black;padding-top:20px;padding-bottom:50px;">
+  <div class="container" >
+    <div layout-align="center" style="text-align: center;">
+      <h3>Also check out</h3>
+      <div class="row" style="padding-top: 20px;">
+        <!--<div class="col-md-4"> <div class="md-whiteframe-23dp"><a href="" target="_blank"><img style="width:100%;height:100%;" src="assets/" /></a></div></div>-->
+
+      </div>
+    </div>
+  </div>
+</div>

client/app/main/main.routes.js

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