Initial commit

8c767d08 · ANDREW STEVEN KRAMM · 8c767d08 · 8c767d08 · 8c767d08 · 8c767d08
Commit 8c767d08 authored Jul 18, 2015 by ANDREW STEVEN KRAMM
7 changed files
--- a/.gitignore
+++ b/.gitignore
+node_modules
+bower_components
+.tmp
+*.sw*
+.log
+.DS_Store
--- a/bower.json
+++ b/bower.json
+{
+  "name": "angular-training-04",
+  "version": "0.0.0",
+  "authors": [
+    "Andrew Kramm <ask15@psu.edu>"
+  ],
+  "license": "MIT",
+  "ignore": [
+    "**/.*",
+    "node_modules",
+    "bower_components",
+    "test",
+    "tests"
+  ],
+  "dependencies": {
+    "angular": "~1.4.3",
+    "sugar": "~1.4.1",
+    "bootstrap-css-only": "~3.3.4"
+  }
+}
--- a/gulpfile.js
+++ b/gulpfile.js
+var gulp = require('gulp'),
+    browserSync = require('browser-sync')
+    wiredep = require('wiredep');
+    // proxy = require('http-proxy-middleware');
+
+var serverOptions = {
+  files: [
+    './src/*'
+  ],
+  host: '0.0.0.0',
+  port: 9000,
+  reloadDelay: 3000,
+  server: {
+    baseDir: ['./src'],
+    middleware: [
+      // proxy('/hr-payroll/', { target: 'https://apps.opp.psu.edu:8001/hr-payroll/' })
+    ],
+    routes: {
+      '/bower_components': './bower_components'
+    }
+  },
+  watchOptions: {
+    debounceDelay: 1000
+  }
+};
+
+gulp.task('default', ['serve']);
+
+gulp.task('serve', ['wire'], function() {
+  browserSync(serverOptions);
+});
+
+gulp.task('wire', function(cb) {
+  wiredep({ src: './src/index.html', cwd: './', ignorePath: '../' });
+  cb();
+}); 
--- a/package.json
+++ b/package.json
+{
+  "name": "Assignment",
+  "version": "0.0.1",
+  "dependencies": {},
+  "devDependencies": {
+    "browser-sync": "^2.5.2",
+    "gulp": "^3.9.0",
+    "http-proxy-middleware": "0.0.5",
+    "wiredep": "^2.2.2"
+  },
+  "engines": {
+    "node": ">=0.10.0"
+  }
+}
--- a/src/application.js
+++ b/src/application.js
+angular
+  .module('app', [])
+  .controller('TaskController', function($scope) {
+
+    $scope.tasks = [
+      { description: 'Task out the trash', complete: true },
+      { description: 'Feed the fish', complete: true },
+      { description: 'Write a small novel', complete: false },
+      { description: 'Learn AngularJS', complete: false }
+    ];
+
+    $scope.addTask = addTask;
+    $scope.description = '';
+    $scope.getToggleLabel = getToggleLabel;
+    $scope.toggleComplete = toggleComplete;
+
+    /*
+     * Adds a new task to the task list only the description is not blank or only spaces
+     * The task description input should be blanked out if a new task is added
+     */ 
+    function addTask() {
+      // add code here
+    }
+
+    function getToggleLabel(task) {
+      return task.complete ? 'Undo' : 'Complete';
+    }
+
+    /*
+     * Toggle the 'complete' property of a task
+     */ 
+    function toggleComplete(task) {
+      // add code here
+    }
+
+  });
--- a/src/index.html
+++ b/src/index.html
+<!DOCTYPE html>
+<html ng-app="app">
+
+  <head>
+    <!-- bower:css -->
+    <link rel="stylesheet" href="bower_components/bootstrap-css-only/css/bootstrap.css" />
+    <!-- endbower -->
+    <link rel="stylesheet" href="style.css" />
+  </head>
+
+  <body ng-controller="TaskController">
+
+    <div class="container">
+      <h1>Tasks</h1>
+
+      <div class="row">
+
+        <form ng-submit="addTask()">
+
+          <div class="input-group">
+            <input type="text" class="form-control" ng-model="description" placeholder="Task description...">
+            <span class="input-group-btn">
+              <button class="btn btn-primary" type="submit">Add Task</button>
+            </span>
+          </div>
+
+        </form>
+
+      </div>
+
+      <div class="row spacer">
+
+        <table class="table table-striped">
+          <tbody>
+            <tr ng-repeat="task in tasks">
+              <td ng-class="task.complete ? 'complete' : 'incomplete'">{{ task.description }}</td>
+              <td class="button-column"><button class="btn btn-sm btn-default" ng-click="toggleComplete(task)">{{ getToggleLabel(task) }}</button></td>
+            </tr>
+          </tbody>
+        </table>
+
+      </div>
+
+    </div>
+    
+    <!-- bower:js -->
+    <script src="bower_components/angular/angular.js"></script>
+    <script src="bower_components/sugar/release/sugar.min.js"></script>
+    <!-- endbower -->
+    <script src="application.js"></script>
+
+  </body>
+
+</html>
--- a/src/style.css
+++ b/src/style.css
+.spacer { 
+  margin-top: 10px; 
+}
+
+.button-column {
+  width: 100px;
+  text-align: center;
+}
+
+.complete { 
+  color: #aaa; 
+  text-decoration: line-through;
+}
+
+td {
+  vertical-align: middle !important;
+}