AngularJS stuff

by Edmond Wu

HTML

<script src="https://cdn.jsdelivr.net/foundation/3.2.2/javascripts/foundation.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/foundation/3.2.2/stylesheets/foundation.min.css">
<script src="https://cdn.jsdelivr.net/foundation/3.2.2/javascripts/app.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/foundation/3.2.2/stylesheets/foundation.css">
<title>AngularJS Stuff</title>
<body>
<h1>Project Reports</h1>
  <h3>Here you can add/view project report summaries</h3>
  <div ng-app="myApp" ng-controller="ctrl">
  <center>
  <h4><b>Total Savings: ${{global_savings}}</b></h4>
  <div class="row">
    <div class="large-12 columns">
      <button ng-click="addNew()" class="button">
      Add Report
      </button>
    </div>
  </div>
  </center>
  <div class="row">
  <div class="large-6 columns">
  <div ng-repeat="itemToAdd in itemsToAdd">
    <table>
    <tr>
      <td>
        <b>Title:</b>
      </td>
      <td>
        <input type="text" ng-model="itemToAdd.title" required>
      </td>
    </tr>
    <tr>
      <td>
        <b>Manager:</b>
      </td>
      <td>
        <input type="text" ng-model="itemToAdd.manager" required>
      </td>
    </tr>
    <tr>
      <td>
        <b>Savings:</b>
      </td>
      <td>
        <input type="number" ng-model="itemToAdd.savings" required>
      </td>
    </tr>
    <tr>
      <td>
        <b>Project Summary:</b>
      </td>
      <td>
        <textarea ng-model="itemToAdd.summary" required>Project Summary</textarea>
      </td>
    </tr>
    <tr>
      <td>
        <b>Results:</b>
      </td>
      <td>
        <textarea ng-model="itemToAdd.result" required>Results</textarea>
      </td>
    </tr>
    <tr>
      <td>
        <b>Image:</b>
      </td>
      <td>
        <input type="file" class="button" ng-model="itemToAdd.image" accept="image/*">
      </td>
    </tr>
    </table>
    <input type="submit" class="button" ng-click="addReport(itemToAdd)"><br>
  </div>
  </div>
  
  <div...

CSS

body {
  font-family: helvetica;
  text-align: center;
}

h1 {
  color: #1b95e0;
}

JavaScript

'use strict';

// Declare app level module which depends on views, and components
var app = angular.module('myApp', []);
app.controller('ctrl', function($scope) {
  $scope.global_savings = 0;
  $scope.items = [];
  $scope.itemsToAdd = [];
  $scope.addReport = function(item) {
    var index = $scope.itemsToAdd.indexOf(item);
    $scope.global_savings += Number(item.savings);
    if ($scope.global_savings >= 100000) {
      alert("Your benchmark of $100,000 has been reached!");
    }
    $scope.itemsToAdd.splice(index, 1);
    $scope.items.push(angular.copy(item));
  }
  $scope.addNew = function() {
    $scope.itemsToAdd.push({
      title: '',
  	  manager: '',
  	  savings: '',
  	  summary: '',
  	  result: '',
  	  image: ''
    });
  }
  $scope.addImage = function(files) {
    var fd = new FormData();
    fd.append("file", files[0]);
    
    $http.post(uploadURL, fd, {
      withCredentials: true,
      headers: {'Content-Type': undefined},
      transformRequest: angular.identity
    }).success(nais).error(fuk);
  };
});