lab-davidw-33

lab-davidw/.eslintignore

@@ -0,0 +1,3 @@
+**/node_modules/*
+**/vendor/*
+**/*.min.js

lab-davidw/.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-davidw/.gitignore

@@ -0,0 +1,104 @@
+# ignore db directorys
+db
+
+# Created by https://www.gitignore.io/api/linux,node,osx,vim
+
+### Linux ###
+*~
+
+# temporary files which can be created if a process still has a handle open of a deleted file
+.fuse_hidden*
+
+# KDE directory preferences
+.directory
+
+# Linux trash folder which might appear on any partition or disk
+.Trash-*
+
+
+### Node ###
+# Logs
+logs
+*.log
+npm-debug.log*
+
+# Runtime data
+pids
+*.pid
+*.seed
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (http://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules
+jspm_packages
+
+# Optional npm cache directory
+.npm
+
+# Optional REPL history
+.node_repl_history
+
+
+### OSX ###
+*.DS_Store
+.AppleDouble
+.LSOverride
+
+# Icon must end with two \r
+Icon
+
+
+# Thumbnails
+._*
+
+# Files that might appear in the root of a volume
+.DocumentRevisions-V100
+.fseventsd
+.Spotlight-V100
+.TemporaryItems
+.Trashes
+.VolumeIcon.icns
+.com.apple.timemachine.donotpresent
+
+# Directories potentially created on remote AFP share
+.AppleDB
+.AppleDesktop
+Network Trash Folder
+Temporary Items
+.apdisk
+
+
+### Vim ###
+# swap
+[._]*.s[a-w][a-z]
+[._]s[a-w][a-z]
+# session
+Session.vim
+# temporary
+.netrwhist
+*~
+# auto-generated tag files
+tags
+
+# environment
+.env
+
+node_modules
+build/

lab-davidw/README.md

@@ -0,0 +1,72 @@
+# lab 31 Angular Image Uploads
+
+## Goal
+to build an auth service for our frontend app and hook it up to the slugram staging back-end, add a Gallery and logout.
+## How to use this app:
+Follow these steps for both the frontend and backend.
+1. Frontend:
+    1. Download the repo: https://github.com/DavidGWheeler/27-angular-auth.git
+    2. Add your .env file with the url target. For example:
+        `
+        API_URL=http:localhost:3000
+    `
+    3. Install the package dependencies with node package manager:
+    `
+        $ npm install
+    `  
+    4. Now you need to install the backend.
+
+2. Backend:
+    1. Download: https://github.com/slugbyte/slugram-backend
+    2. Add you .env file with the following paramaters:
+```Javascript
+MONGODB_URI='mongodb://localhost/cfgram-backend"  
+NODE_ENV='testing'
+APP_SECRET='<yoursecret>'
+PORT=<your port>
+AWS_BUCKET='<your bucket name>'
+AWS_ACCESS_KEY_ID='<your access key>'
+AWS_SECRET_ACCESS_KEY='<your secret key>'
+```
+
+3. Install the package dependencies with node package manager:
+    `
+        $ npm install
+    `  
+4. Run the server (with debug):
+    `
+        $ npm run start-debug
+    `
+5. Run the server:
+    `
+        $ npm run start
+    `
+6. Run the front end (with debug):
+    `
+        $ npm run build-watch
+    `
+ *-or- you can just build the web pack:*
+    `
+        $ npm run build
+    `
+6. You can run tests with the following command:
+    `
+        $ npm run test
+    `
+7. Open the website wherever you have it hosted.
+- locally hosted example url:` http://localhost:8080/ `
+
+### From the front end:
+- You can Sign up for "cfGram", the app.
+  - You will be taken to Home, upon sign up.
+- On subsequent visits, you can sign in, to be taken to home.
+- You can create a Gallery.
+- You can edit your Gallery name and description
+- You can logout, and will be taken to the login page.
+- add photos to an S3 bucket
+- and display the same images in the Gallery
+- delete images from a gallery
+
+##### Attributions:
+I had a peek at this repo: https://github.com/jessicamvs/lab-34-filters-and-directives/blob/master/lab-jessica/app/filter/fuzzy-search.js
+from that I learned about using a template literal string to clean up my sollution and using the RegExp constructor to create a regexp I could test, to check for a character in my string.

lab-davidw/app/component/gallery/create-gallery/_create-gallery.scss

@@ -0,0 +1,4 @@
+.btn-left {
+  float: left;
+  clear: right;
+}

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

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

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

@@ -0,0 +1,33 @@
+'use strict';
+
+require('./_create-gallery.scss');
+
+module.exports = {
+  template: require('./create-gallery.html'),
+  controllerAs: 'createGalleryCtrl',
+  controller: [
+    '$log',
+    '$rootScope',
+    'galleryService',
+    function($log, $rootScope, 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;
+              $rootScope.$emit('newGalleryCreated');
+              return res;
+            },
+            err => $log.error(err)
+          );
+        };
+      };
+    },
+  ],
+};

lab-davidw/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 type="text" name="name" ng-model="editGalleryCtrl.gallery.name">
+   </fieldset>
+   <fieldset>
+     <label for="description">desc</label>
+     <input type="text" name="description" ng-model="editGalleryCtrl.gallery.desc">
+   </fieldset>
+
+   <button class="btn-std" type="submit" name="update">update</button>
+  </form>
+</section>

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

@@ -0,0 +1,25 @@
+'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 succesfully'),
+            err => $log.error(err)
+          );
+        };
+      };
+    },
+  ],
+};

lab-davidw/app/component/gallery/gallery-item/_gallery-item.scss

@@ -0,0 +1,28 @@
+.gallery-name {
+  margin-top: 1em;
+  float: left;
+  clear: left;
+  font-size: 2.75vh;
+}
+
+.gallery-desc {
+  float: left;
+  clear: left;
+  font-size: 2.75vh;
+}
+
+.gallery-id {
+  float: left;
+  clear: left;
+  font-size: 2.75vh;
+}
+
+.gallery-date {
+  float: left;
+  clear: left;
+  font-size: 2.75vh;
+}
+
+li {
+  list-style: none;
+}

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

@@ -0,0 +1,24 @@
+<li>
+  <div ng-if="!galleryItemCtrl.showEditGallery">
+    <div>
+      <span class="gallery-name"><strong>name:</strong> {{ galleryItemCtrl.gallery.name | uppercase }}</span><br>
+      <span class="gallery-desc"><strong>description:</strong>  {{ galleryItemCtrl.gallery.desc | lowercase }}</span><br>
+      <span class="gallery-id"><strong> id:</strong>  {{ galleryItemCtrl.gallery._id | limitTo : 8 }}</span><br>
+      <span class="gallery-date"><strong> date:</strong> {{ galleryItemCtrl.gallery.created | date : 'longDate'  }}</span><br>
+    </div>
+  </div>
+
+  <edit-gallery ng-if="galleryItemCtrl.showEditGallery" gallery="galleryItemCtrl.gallery"></edit-gallery>
+
+  <button
+    class="btn-std"
+    name="edit"
+    ng-click="galleryItemCtrl.showEditGallery = !galleryItemCtrl.showEditGallery">edit
+  </button>
+
+  <button
+    class="btn-std"
+    name="delete gallery"
+    ng-click="galleryItemCtrl.deleteGallery()">delete gallery
+  </button>
+</li>