codefellows-sea-d45-javascript · tinasharma · Nov 30, 2015 · Dec 1, 2015 · Dec 2, 2015 · Dec 3, 2015
diff --git a/tinasharma/.DS_Store b/tinasharma/.DS_Store
diff --git a/tinasharma/.gitignore b/tinasharma/.gitignore
@@ -1 +1,6 @@
 node_modules
+db\
+.DS_Store
+notes.js
+**/*bundle.js
+**/build
diff --git a/tinasharma/app/index.html b/tinasharma/app/index.html
@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <meta charset="UTF-8">
+  <title>Parcel site</title>
+  <link rel="stylesheet" href="/main.css" type="text/css">
+</head>
+
+<body data-ng-app="ParcelStreamApp">
+
+<div id="greeting" data-dummy-directive data-greeting="please enter your name"></div>
+
+
+  <h1>Parcels App!</h1>
+
+  <main data-ng-view></main>
+
+  <!-- <main data-ng-controller="ParcelsController" data-ng-init="getAll()">
+    <ul id="errorslist">
+      <li data-ng-repeat="error in errors">{{error}}</li>
+    </ul>
+
+    <div data-parcel-transclude-directive>
+      <p>awesome transclusion</p>
+    </div> -->
+
+    <!-- <form class="containers" name="newParcelForm" data-ng-submit="create(newParcel)">
+      <h2>New parcel:</h2>
+
+      <label for="newParcelName">Name:</label>
+      <input type="text" id="newParcelName" required data-ng-model="newParcel.name">
+
+      <label for="newParcelSize">Parcel size: </label>
+      <input type="text" id="newParcelSize" data-ng-model="newParcel.size" placeholder="small/medium/large">
+
+      <label for="newParcelWeight">Parcel weight:</label>
+      <input type="text" id="newParcelWeight" data-ng-model="newParcel.weight" placeholder="less than 10 lbs">
+
+      <button type="submit" data-ng-disabled="newParcelForm.$invalid">Create New Parcel</button>
+    </form>
+ -->
+    <!-- <ul id="parcellist">
+      <li data-ng-repeat="parcel in parcels">
+        <div data-parcel-directive data-parcel="parcel"></div>
+
+        <form class="row" name="parcelForm{{parcel._id}}" data-ng-submit="update(parcel)" data-ng-if="parcel.editing">
+          <h2>Update: {{parcel.name}}</h2>
+
+          <label for="parcelName{{parcel._id}}">Name:</label>
+          <input type="text" id="parcelName{{parcel._id}}" required data-ng-model="parcel.name">
+
+          <label for="parcelSize{{parcel._id}}">Size:</label>
+          <input type="text" id="parcelSize{{parcel._id}}" data-ng-model="parcel.size" placeholder="small/medium/large">
+
+          <label for="parcelWeight{{parcel._id}}">Weight:</label>
+          <input type="text" id="parcelWeight{{parcel._id}}" data-ng-model="parcel.weight" placeholder="less than 10 lbs">
+
+          <button type="submit">Update</button>
+          <button data-ng-click="reset(parcel)">Don't update</button>
+
+        </form>
+
+        <button id="update-btn" data-ng-if="!parcel.editing" data-ng-click="startUpdate(parcel)">Update</button>
+
+        <button id="delete-btn" data-ng-if="!parcel.editing" data-ng-click="remove(parcel)">Remove This Parcel!</button>
+
+      </li>
+    </ul>
+  </main> -->
+  <script src="/bundle.js"></script>
+
+</body>
+
+
+</html>
+
diff --git a/tinasharma/app/js/controllers/controllers.js b/tinasharma/app/js/controllers/controllers.js
@@ -0,0 +1,3 @@
+module.exports = function(app) {
+  require('./dummy_controllers')(app);
+};
diff --git a/tinasharma/app/js/controllers/dummy_controllers.js b/tinasharma/app/js/controllers/dummy_controllers.js
@@ -0,0 +1,5 @@
+module.exports = function(app) {
+  app.controller('DummyController', ['$scope', function($scope) {
+
+  }]);
+};
diff --git a/tinasharma/app/js/directives/directives.js b/tinasharma/app/js/directives/directives.js
@@ -0,0 +1,4 @@
+module.exports = function(app) {
+  require('./dummy_directive')(app);
+  require('./list_directive')(app);
+};
diff --git a/tinasharma/app/js/directives/dummy_directive.js b/tinasharma/app/js/directives/dummy_directive.js
@@ -0,0 +1,11 @@
+module.exports = function(app) {
+  app.directive('dummyDirective', function() {
+    return {
+      restrict: 'AC',
+      template: '<h6>My name is: {{greeting}}</h6><input type="text" data-ng-model="greeting">',
+      scope: {
+        greeting: '@'
+      }
+    }
+  });
+};
diff --git a/tinasharma/app/js/directives/list_directive.js b/tinasharma/app/js/directives/list_directive.js
@@ -0,0 +1,14 @@
+module.exports = function(app) {
+  app.directive('listDirective', function() {
+    return {
+      restrict: 'AC',
+      templateUrl: '/templates/list_directive_template.html',
+      transclude: true,
+      replace: true,
+      scope: {
+        resource: '=',
+        title: '@'
+      }
+    }
+  });
+};
diff --git a/tinasharma/app/js/entry.js b/tinasharma/app/js/entry.js
@@ -0,0 +1,27 @@
+require('angular/angular');
+require('angular-route');
+var angular = window.angular;
+
+var parcelStreamApp = angular.module('ParcelStreamApp', ['ngRoute']);
+
+//order in which you require
+//services first because services can be dependency injected into controllers
+//then controllers because controllers can be dependency injected into directives
+//then directives
+require('./filters/filters')(parcelStreamApp);
+require('./services/services')(parcelStreamApp);
+require('./controllers/controllers')(parcelStreamApp);
+require('./directives/directives')(parcelStreamApp);
+
+require('./parcels/parcels')(parcelStreamApp);
+
+parcelStreamApp.config(['$routeProvider', function($route) {
+  $route
+    .when('/parcels', {
+      templateUrl: '/templates/parcels_view.html',
+      controller: 'ParcelsController'
+    })
+    .otherwise({
+      redirectTo: '/parcels'
+    })
+}]);
diff --git a/tinasharma/app/js/filters/filters.js b/tinasharma/app/js/filters/filters.js
@@ -0,0 +1,3 @@
+module.exports = function(app) {
+  require('./listify')(app);
+};
diff --git a/tinasharma/app/js/filters/listify.js b/tinasharma/app/js/filters/listify.js
@@ -0,0 +1,7 @@
+module.exports = function(app) {
+  app.filter('listify', function() {
+    return function(input) {
+      return input[0].toUpperCase() + input.slice(1, input.length) + ' List';
+    };
+  });
+};
diff --git a/tinasharma/app/js/parcels/controllers/parcels_controller.js b/tinasharma/app/js/parcels/controllers/parcels_controller.js
@@ -0,0 +1,81 @@
+var angular = window.angular;
+module.exports = function(app) {
+  app.controller('ParcelsController', ['$scope', '$http', 'cfResource', function($scope, $http, cfResource) {
+    $scope.parcels = [];
+    $scope.newParcel = null;
+    $scope.errors = [];
+    $scope.updatingParcels = {};
+    $scope.defaults = {size: 'small', weight: '3'};
+    $scope.newParcel = angular.copy($scope.defaults);
+    var parcelsResource = cfResource('parcels');
+
+    $scope.getAll = function() {
+      parcelsResource.getAll(function(err, data) {
+        if (err) return err;
+
+        $scope.parcels = data;
+      });
+      //remove the following because its done in cfResource
+      // $http.get('/api/parcels')
+      //   .then(function(res) {
+      //     $scope.parcels = res.data;
+      //   }, function(err) {
+      //     console.log(err.data);
+      //   });
+    };
+
+    $scope.create = function(parcel) {
+      parcelsResource.create(parcel, function(err, data) {
+        if (err) return err;
+        $scope.parcels.push(data);
+        $scope.newParcel = angular.copy($scope.defaults);
+      });
+      //remove the following because its done in cfResource
+      // $http.post('/api/parcels', parcel)
+      //   .then(function(res) {
+      //     $scope.parcels.push(res.data);
+      //     $scope.newParcel = angular.copy($scope.defaults);
+      //   }, function(err) {
+      //     console.log(err.data);
+      //   });
+    };
+
+    $scope.update = function(parcel) {
+      parcel.editing = false;
+      $http.put('/api/parcels/' + parcel._id, parcel)
+        .then(function(res) {
+          console.log('parcel is updated');
+        }, function(err) {
+          $scope.errors.push('could not update: ' + parcel.name + ' parcel');
+          console.log(err.data);
+      });
+    };
+
+    $scope.startUpdate = function(parcel) {
+      parcel.editing = true;
+      $scope.updatingParcels[parcel._id] = {name: parcel.name, size: parcel.size, weight: parcel.weight};
+    };
+
+    $scope.reset = function(parcel) {
+      var oldParcel = $scope.updatingParcels[parcel._id];
+      $scope.parcel = angular.copy($scope.defaults);
+      parcel.name = oldParcel.name;
+      parcel.size = oldParcel.size;
+      parcel.weight = oldParcel.weight;
+      parcel.editing = false;
+    };
+
+    $scope.remove = function(parcel) {
+      $scope.parcels.splice($scope.parcels.indexOf(parcel), 1);
+      $http.delete('/api/parcels/' + parcel._id)
+        .then(function(res) {
+          console.log('parcel deleted');
+        }, function(err) {
+          console.log(err.data);
+          $scope.errors.push('could not delete parcelzzz: ' + parcel.name);
+          $scope.getAll();
+      });
+    };
+
+  }]);
+};
diff --git a/tinasharma/app/js/parcels/directives/parcel_directive.js b/tinasharma/app/js/parcels/directives/parcel_directive.js
@@ -0,0 +1,11 @@
+module.exports = function(app) {
+  app.directive('parcelDirective', function() {
+    return {
+      restrict: 'AC',
+      templateUrl: '/templates/parcel_directive_template.html',
+      scope: {
+        parcel: '='
+      }
+    }
+  });
+};
diff --git a/tinasharma/app/js/parcels/directives/parcel_form_directive.js b/tinasharma/app/js/parcels/directives/parcel_form_directive.js
@@ -0,0 +1,17 @@
+module.exports = function(app) {
+  app.directive('parcelFormDirective', function() {
+    return {
+      restrict: 'AC',
+      replace: true,
+      templateUrl: 'templates/parcel_form_template.html',
+      transclude: true,
+      scope: {
+        buttonText: '@',
+        headingText: '@',
+        formName: '@',
+        parcel: '=',
+        save: '&'
+      }
+    }
+  });
+};
diff --git a/tinasharma/app/js/parcels/directives/parcel_transclude_directive.js b/tinasharma/app/js/parcels/directives/parcel_transclude_directive.js
@@ -0,0 +1,12 @@
+module.exports = function(app) {
+  app.directive('parcelTranscludeDirective', function() {
+    return {
+      restrict: 'AC',
+      templateUrl: '/templates/parcel_transclude_directive.html',
+      transclude: true,
+      scope: {
+        messageOne: '@'
+      }
+    }
+  });
+};
diff --git a/tinasharma/app/js/parcels/parcels.js b/tinasharma/app/js/parcels/parcels.js
@@ -0,0 +1,6 @@
+module.exports = function(app) {
+  require('./controllers/parcels_controller')(app);
+  require('./directives/parcel_directive')(app);
+  require('./directives/parcel_transclude_directive')(app);
+  require('./directives/parcel_form_directive')(app);
+};
diff --git a/tinasharma/app/js/services/cf_resources.js b/tinasharma/app/js/services/cf_resources.js
@@ -0,0 +1,31 @@
+var handleSuccess = function(callback) {
+  return function(res) {
+    callback(null, res.data);
+  };
+};
+
+var handleFail = function(callback) {
+  return function(res) {
+    callback(res.data);
+  }
+};
+
+module.exports = function(app) {
+  app.factory('cfResource', ['$http', function($http) {
+
+    return function(resourceName) {
+      var resource = {};
+        resource.getAll = function(callback) {
+          $http.get('/api/' + resourceName)
+            .then(handleSuccess(callback), handleFail(callback));
+        };
+
+    resource.create = function(data, callback) {
+      $http.post('/api/' + resourceName, data)
+        .then(handleSuccess(callback), handleFail(callback));
+    };
+    return resource;
+    };
+
+  }]);
+};
diff --git a/tinasharma/app/js/services/services.js b/tinasharma/app/js/services/services.js
@@ -0,0 +1,3 @@
+module.exports = function(app) {
+  require('./cf_resources')(app); //cf stands for code fellows
+};
diff --git a/tinasharma/app/sass/base/_base.scss b/tinasharma/app/sass/base/_base.scss
@@ -0,0 +1,59 @@
+body {
+  font-family: $font-stack;
+  line-height: 1.5;
+}
+
+h1,
+h2 {
+  font-family: 'Roboto Slab', serif;
+  text-decoration: underline;
+
+}
+
+h2 {
+  color: $primary-color;
+}
+
+h1 {
+  text-align: center;
+  @extend %large-type;
+}
+
+h6 {
+  text-align: center;
+}
+
+form {
+  @include default-box;
+  background-color: $background-color;
+  border-color: $border-color;
+}
+
+.row {
+    color: $primary-color;
+  }
+
+label {
+  color:blue;
+}
+
+#parcellist {
+  margin-left: 180px;
+}
+button,
+input {
+
+}
+
+#cancelbtn {
+  margin-left:500px;
+}
+
+input {
+  margin: 2em auto;
+  display: block;
+}
+
+#greeting {
+  font-size: 80%;
+}