LABIGAIL 4EVER

lab-abigail/.env

@@ -0,0 +1 @@
+API_URL='http://localhost:3000'

lab-abigail/.eslintrc

@@ -0,0 +1,25 @@
+{
+  "rules": {
+    "quotes": ["error", "single", { "allowTemplateLiterals": true }],
+    "comma-dangle": ["error", "always-multiline"],
+    "no-console": "off",
+    "indent": [ "error", 2 ],
+    "semi": ["error", "always"]
+  },
+  "env": {
+    "es6": true,
+    "node": true,
+    "mocha": true,
+    "jasmine": true
+  },
+  "globals": {
+    "__API_URI__": false,
+    "__DEBUG__": false
+  },
+  "ecmaFeatures": {
+    "modules": true,
+    "experimentalObjectRestSpread": true,
+    "impliedStrict": true
+  },
+  "extends": "eslint:recommended"
+}

lab-abigail/.gitignore

@@ -0,0 +1,5 @@
+db
+node_modules/
+.babelrc
+package-lock
+build

lab-abigail/.travis.yml

@@ -0,0 +1,17 @@
+  language: node_js
+  node_js:
+    - 'stable'
+  dist: trusty
+  sudo: required
+  addons:
+    apt:
+      sources:
+        - google-chrome
+      packages:
+        - google-chrome-stable
+  before_script:
+    - export DISPLAY=:99.0
+    - sh -e /etc/init.d/xvfb start
+    - sleep 3
+  script:
+      - npm run test

lab-abigail/README.md

@@ -0,0 +1,50 @@
+![cf](https://i.imgur.com/7v5ASc8.png) Lab 27: CFgram Login and Sign Up
+======
+
+# CFgram: Abs' Gallery App
+This application allows users to create accounts, add, and store personal images. This app persists user login information.
+
+## Open Website in Browser
+In terminal tab, enter:
+1. `npm install` to install application resources.
+2. `rm -rf build` to remove build, if necessary.
+2. `npm run build-watch` to run webpack server
+3. Open on `http://localhost:8080/`
+
+## Login and Sign Up functionality with MongoDB
+1. In terminal tab, enter `mongod`
+2. In new tab, enter `mongo`
+* To view dbs, enter `show dbs`
+* To use local dbs, enter `use cfgram-backend`
+* To `show collections`
+* To view dbs, enter `db.users.find()`
+* To clear dbs, enter `db.users.drop()`
+
+## Run Test
+In terminal tab, enter:
+1. `npm install` to install application resources.
+2. `npm run test` to run tests using jasmine.
+--------------------
+## Application Resources
+* "angular"
+* "babel-core"
+* babel-loader"
+* "babel-preset-es2015"
+* "cowsay-browser"
+* "css-loader"
+* "extract-text-webpack-plugin"
+* "html-webpack-plugin"
+* "node-sass"
+* "sass-loader"
+* "style-loader"
+* "webpack"
+
+## Testing Resources
+* "angular-mocks"
+* "jasmine"
+* "jasmine-core"
+* "karma"
+* "karma-chrome-launcher"
+* "karma-jasmine"
+* "karma-webpack"
+* "webpack-dev-server"

lab-abigail/app/component/gallery/create-gallery/create-gallery.html

@@ -0,0 +1,25 @@
+<section>
+  <form name="createGalleryForm"
+    ng-submit="createGalleryCtrl.createGallery()">
+    <fieldset>
+      <label for="name">name</label>
+      <input
+        type="text"
+        name="name"
+        placeholder="name"
+        ng-model="createGalleryCtrl.gallery.name"
+        required>
+    </fieldset>
+    <fieldset>
+      <label for="description">desc</label>
+      <input
+      type="text"
+      name="description"
+      placeholder="description"
+      ng-model="createGalleryCtrl.gallery.desc"
+      required>
+    </fieldset>
+
+    <button type="submit">create gallery</button>
+  </form>
+</section>

lab-abigail/app/component/gallery/create-gallery/create-gallery.js

@@ -0,0 +1,31 @@
+'use strict';
+
+// require('./_create-gallery.scss')
+
+module.exports = {
+  template: require('./create-gallery.html'),
+  controllerAs: 'createGalleryCtrl',
+  controller: [
+    '$log',
+    'galleryService',
+    function($log, galleryService) {
+      this.$onInit = () => {
+        $log.debug('Create Gallery Controller');
+        this.gallery = {};
+
+        this.createGallery = () => {
+          return galleryService.createGallery(this.gallery)
+          .then(
+            () => {
+              let res = this.gallery;
+              this.gallery.name = null;
+              this.gallery.desc = null;
+              return res;
+            },
+            err => $log.error(err)
+          );
+        };
+      };
+    },
+  ],
+};

lab-abigail/app/component/gallery/edit-gallery/edit-gallery.html

@@ -0,0 +1,17 @@
+<section>
+  <form
+    name="editGalleryForm"
+    ng-submit="editGalleryCtrl.updateGallery()"
+    novalidate>
+    <fieldset>
+      <label for="name">name</label>
+      <input name="name" type="text" ng-model="editGalleryCtrl.gallery.name">
+    </fieldset>
+    <fieldset>
+      <label for="description">desc</label>
+      <input name="description" type="text" ng-model="editGalleryCtrl.gallery.desc">
+    </fieldset>
+
+    <button type="submit" name="submit update">update</button>
+  </form>
+</section>

lab-abigail/app/component/gallery/edit-gallery/edit-gallery.js

@@ -0,0 +1,21 @@
+'use strict';
+
+module.exports = {
+  template: require('./edit-gallery.html'),
+  controllerAs: 'editGalleryCtrl',
+  bindings: {
+    gallery: '<',
+  },
+  controller: ['$log', 'galleryService', function($log, galleryService) {
+    this.$onInit = () => {
+      $log.debug('Edit Gallery Controller');
+      this.updateGallery = () => {
+        galleryService.updateGallery(this.gallery._id, this.gallery)
+        .then(
+          () => $log.log('updated successfully'),
+          err => $log.error(err)
+        );
+      };
+    };
+  }],
+};

lab-abigail/app/component/gallery/gallery-item/gallery-item.html

@@ -0,0 +1,15 @@
+<li>
+  <div ng-if="!galleryItemCtrl.showEditGallery">
+    <div>
+      <span ng-click="galleryItemCtrl.makeCurrentGallery">Name: {{ galleryItemCtrl.gallery.name | uppercase }} | </span>
+      <span>Description: {{ galleryItemCtrl.gallery.desc | lowercase }} | </span>
+      <span>Gallery Created: {{ galleryItemCtrl.dateCreated | date: 'short' }} | </span>
+      <span>ID: {{ galleryItemCtrl.gallery._id | limitTo: 6 }}</span>
+    </div>
+  </div>
+
+  <edit-gallery ng-if="galleryItemCtrl.showEditGallery" gallery="galleryItemCtrl.gallery"></edit-gallery>
+  <button ng-click="galleryItemCtrl.showEditGallery = !galleryItemCtrl.showEditGallery">edit</button>
+  <button ng-click="galleryItemCtrl.deleteGallery()">delete</button>
+
+</li>

lab-abigail/app/component/gallery/gallery-item/gallery-item.js

@@ -0,0 +1,37 @@
+'use strict';
+
+module.exports = {
+  template: require('./gallery-item.html'),
+  controllerAs: 'galleryItemCtrl',
+  controller: ['$log', 'galleryService', function($log, galleryService) {
+    this.$onInit = () => {
+      $log.debug('Delete Gallery Controller');
+      this.dateCreated = this.gallery.created;
+      this.deleteGallery = () => {
+        galleryService.deleteGallery(this.gallery._id, this.gallery)
+        .then(
+          () => $log.log('deleted successfully'),
+          err => $log.error(err)
+        );
+      };
+
+      this.showEditGallery = false;
+
+      this.makeCurrentGallery = () => {
+        let index;
+        for(let i = 0; i< this.galleries.length; i++) {
+          if(this.galleries[i]._id === this.gallery._id) {
+            index = i
+          }
+        }
+        this.currentGallery = this.galleries[index];
+
+
+      };
+    };
+  }],
+
+  bindings: {
+    gallery: '<',
+  },
+};

lab-abigail/app/component/gallery/thumbnail-container/thumbnail-container.html

@@ -0,0 +1,11 @@
+<div>
+  <h3>{{ thumbnailContainerCtrl.gallery.name }}</h3>
+  <upload-pic gallery="thumbnailContainerCtrl.gallery"></upload-pic>
+
+  <div>
+    <thumbnail ng-repeat="item in thumbnailContainerCtrl.gallery.pics"
+    pic="item"
+    gallery="thumbnailContainerCtrl.gallery"
+    ></thumbnail>
+  </div>
+</div>

lab-abigail/app/component/gallery/thumbnail-container/thumbnail-container.js

@@ -0,0 +1,11 @@
+'use strict';
+
+// require('./_thumbnail-container.scss')
+
+module.exports = {
+  template: require('./thumbnail-container.html'),
+  controllerAs: 'thumbnailContainerCtrl',
+  bindings: {
+    gallery: '<',
+  },
+};

lab-abigail/app/component/gallery/thumbnail/thumbnail.html

@@ -0,0 +1,4 @@
+<div>
+  <img ng-src="{{ thumbnailCtrl.pic.imageURI }}" alt="{{ thumbnailCtrl.pic.desc }}">
+  <p ng-click="thumbnailCtrl.deletePic()">delete</p>
+</div>

lab-abigail/app/component/gallery/thumbnail/thumbnail.js

@@ -0,0 +1,27 @@
+'use strict';
+
+// require('./_thumbnail.scss')
+
+module.exports = {
+  template: require('./thumbnail.html'),
+  controllerAs: 'thumbnailCtrl',
+  bindings: {
+    pic: '<',
+    gallery: '<',
+  },
+  controller: [
+    '$log',
+    'picService',
+    function($log, picService) {
+      this.$onInit = () => {
+        $log.debug('thumbnailCtrl');
+
+        this.deletePic = () => {
+          $log.debug('#thumbnailCtrl.deletePic');
+
+          picService.deletePic(this.gallery, this.pic);
+        };
+      };
+    },
+  ],
+};

lab-abigail/app/component/gallery/upload-pic/upload-pic.html

@@ -0,0 +1,21 @@
+<section>
+  <form
+    ng-submit="uploadPicCtrl.uploadPic()"
+    novalidate>
+
+    <fieldset>
+      <label for="name">name</label>
+      <input type="text" name="name" placeholder="name" ng-model="uploadPicCtrl.pic.name">
+      <label for="desc">desc</label>
+      <input type="text" name="desc" placeholder="desc" ng-model="uploadPicCtrl.pic.desc">
+    </fieldset>
+
+    <div>
+      <button ngf-select ng-model="uploadPicCtrl.pic.file">
+        choose file
+      </button>
+      <button type="submit" name="upload picture">upload file</button>
+    </div>
+
+  </form>
+</section>

lab-abigail/app/component/gallery/upload-pic/upload-pic.js

@@ -0,0 +1,31 @@
+'use strict';
+
+// require('./_upload-pic.scss')
+
+module.exports = {
+  template: require('./upload-pic.html'),
+  controllerAs: 'uploadPicCtrl',
+  bindings: {
+    gallery: '<',
+  },
+  controller: [
+    '$log', 'picService', function($log, picService) {
+      this.$onInit = () => {
+        $log.debug('uploadPicController');
+        this.pic = {};
+
+        this.uploadPic = () => {
+          picService.uploadPic(this.gallery, this.pic)
+          .then(
+            () => {
+              this.pic.name = null;
+              this.pic.desc = null;
+              this.pic.file = null;
+            },
+            err => $log.error(err)
+          );
+        };
+      };
+    },
+  ],
+};

lab-abigail/app/component/landing/login/login.html

@@ -0,0 +1,33 @@
+<section class="login-form">
+  <h2>{{ loginCtrl.title }}</h2>
+
+  <form
+    name="loginForm"
+    ng-submit="loginCtrl.login()" novalidate>
+    <div
+      ng-class="{
+        'error': loginForm.username.$invalid,
+        'success': loginForm.username.$valid,
+      }">
+      <input type="text"
+        name="username"
+        placeholder="username"
+        ng-minlength="4"
+        ng-model="loginCtrl.user.username" required>
+    </div>
+
+    <div
+      ng-class="{
+        'error': loginForm.password.$invalid && loginForm.$submitted,
+        'success': loginForm.password.$valid,
+      }">
+      <input type="password" name="password"
+        ng-disabled="loginForm.username.$invalid"
+        placeholder="password"
+        ng-minlength="3"
+        ng-model="loginCtrl.user.password" required>
+    </div>
+
+    <button class="btn-std">sign in</button>
+  </form>
+</section>