Merge pull request #18 from toalina/playground

Playground

build/html/blogpost.html

@@ -0,0 +1,76 @@
+<!-- Blog Main SECTION -->
+<section class="page-banner">
+  <h1>Blog</h1>
+  <p>The secular cooling that must someday overtake our planet has already gone far indeed with our neighbour. Its physical condition is still largely a mystery, but we know now that</p>
+</section>
+
+<!-- MINI NAV  -->
+<div class="sub-nav-wrapper">
+  <nav class="sub-nav">
+    <ul>
+      <li><a href="#">HOME</a></li>
+      <li>BLOG</li>
+      <!-- BLOG link is breadcrumbs -->
+    </ul>
+  </nav>
+  <div class="share-social-icons">
+    <p>Share</p>
+    <ul>
+      <li><a class="icon-twitter" href="#"></a></li>
+      <li><a class="icon-facebook" href="#"></a></li>
+      <li><a class="icon-google" href="#"></a></li>
+      <li><a class="icon-pinterest" href="#"></a></li>
+    </ul>
+  </div>
+</div>
+
+<section class="blog-container">
+  <p nf-if="error">{{error}}</p>
+  <div ng-if="!error">
+    There are no error!
+
+    <input type="text" ng-model="search">
+    <p>Searching for: {{search}}</p>
+
+    <article ng-repeat="gist in gists|pager:pagination" class="blog-summary">
+     <!-- filter:search -->
+      <h1>{{ gist.description }}</h1>
+      <!-- <p> {{ Gist Files Here}}</p> -->
+      <a href="{{gist.html_url}}">View Original</a>
+      <img src="{{gist.owner.avatar_url}}" alt="Alina's big face" height="20%" width="20%">
+
+
+      <ul class="blog-metadata">
+        <li>Gist Login: {{ gist.owner.login }}</li>
+        <li class="date">Created on: {{ gist.created_at | date:"MM-dd-yyyy" }}</li>
+        <li>{{ gist.comments }} Comments</li>
+        <ul>
+          Filename(s):
+          <li ng-repeat="file in gist.files">
+            {{file.filename}}
+          </li>
+        </ul>
+        <ul>
+          Language(s):
+          <li ng-repeat="file in gist.files">
+            {{file.language}}
+          </li>
+        </ul>
+      </ul>
+
+			<a class="btn-primary" href="#/gists/{{ gist.id }}" >Read More</a>
+			<a class="btn-small" ng-click="deleteGist(gist.id)">Delete</a>
+
+    </article>
+
+    <a class="btn-primary-alt" href="#/gists/new">Add New</a>
+
+  </div>
+  <button class="btn-small" type="button" ng-click="pagination.prevPage()">Prev</button>
+  <button class="btn-small" type="button" ng-click="pagination.nextPage()">Next</button>
+
+</section>
+
+
+
+

build/html/form.html

@@ -0,0 +1,36 @@
+<section class="page-banner">
+  <h1>Add or Edit A Blogpost</h1>
+</section>
+
+<!-- MINI NAV  -->
+<div class="sub-nav-wrapper">
+  <nav class="sub-nav">
+    <ul>
+      <li><a href="#">HOME</a></li>
+      <li><a href="#">BLOG</a></li>
+      <li>Add/Edit</li>
+    </ul>
+  </nav>
+  <div class="share-social-icons">
+    <p>Share</p>
+    <ul>
+      <li><a class="icon-twitter" href="#"></a></li>
+      <li><a class="icon-facebook" href="#"></a></li>
+      <li><a class="icon-google" href="#"></a></li>
+      <li><a class="icon-pinterest" href="#"></a></li>
+    </ul>
+  </div>
+</div>
+<!-- Form -->
+<form name="gistForm" ng-submit="vm.save()" ng-controller="GistFormCtrl">
+  Gist Description
+  <input type="text" ng-model="vm.gist.description" placeholder="Description">{{vm.gist.description}}</input>
+
+  <input type="text" ng-model="vm.newContent">
+
+  <textarea type="text" ng-model="vm.gist.files" placeholder="Content">Gist Files</textarea>
+  <input type="checkbox" ng-model="vm.gist.public" value="Public">Public</input>
+  <input type="text" ng-model="vm.gist.owner.login" placeholder="Author">Gist Username</input>
+  <input type="date" ng-model="vm.gist.created_at" placeholder="Date">Date</input>
+  <input class="btn-primary-alt" type="submit" name="Submit">
+</form>

build/index.html

@@ -36,9 +36,14 @@ <h1 class="logo">intelly</h1>
     </header>
 
     <!-- SOME KIND OF NG-VIEW THING -->
-    <main ng-view ng-controller="GistsCtrl">
-       <div ng-include="'./html/blogpost.html'"></div>
+    <main ng-view>
+       <!-- <div ng-include="'./html/blogpost.html'"></div> -->
+       <!-- If it's main page, include blogpost.html (ALL posts)
+            If it's a single post, include blog.html (SINGLE post)
+            If it's a form, include form.html (FORM post)
+     -->
     </main>
+
     <!-- CONTACT SECTION  -->
     <section>
       <div class="learn-more-wrapper">

gulp/tasks/watch.js

@@ -4,8 +4,8 @@ var config   = require('../config');
 gulp.task('watch', function() {
   gulp.watch(config.javascript.src, ['webpack']);
   gulp.watch(config.sass.src, ['sass']);
-  gulp.watch(config.sass.src, ['index']);
-  gulp.watch(config.sass.src, ['html']);
+  gulp.watch(config.index.src, ['index']);
+  gulp.watch(config.html.src, ['html']);
 
   gulp.watch(['./node_modules/angular/angular.js', './node_modules/angular-route/angular-route.js']);
   // Watchify will watch and recompile our JS, so no need to gulp.watch it

src/html/blog.html

@@ -21,18 +21,22 @@ <h1>Blog</h1>
     </ul>
   </div>
 </div>
+
+
 <section class="blog-container">
 <!--   <h1>Single Blogpost!</h1> -->
-	<article ng-controller="GistsCtrl" class="blog-summary">
-		<img src="{{gist.owner.avatar_url}}" alt="Alina's big face" height="20%" width="20%">
-    <h1>{{ gist.id }}</h1>
+	<article class="blog-summary">
+		<img src="{{ gist.owner.avatar_url }}" alt="Alina's big face" height="20%" width="20%">
+    <h1>{{ gists.id }}</h1>
 		<p> {{ gist.description }}</p>
     <ul class="blog-metadata">
-			<li>Author: {{ gist.owner.login }}</li>
-			<li class="date">Created on: {{ gist.created_at | date:"MM-dd-yyyy" }}</li>
-			<li>{{ gist.comments }} Comments</li>
+			<li>Gist login: {{ vm.gist.owner.login }}</li>
+			<li class="date">Created on: {{ vm.gist.created_at | date:"MM-dd-yyyy" }}</li>
+			<li>{{ vm.gist.comments }} Comments</li>
     </ul>
-    <a class="btn-primary" href="#/blogposts/{{ blogpost._id }}">View All</a>
+
+    <a class="btn-primary" href="#/gists/">View All</a>
     <a class= "btn-small" href="#/blogposts/{{vm.blogpost._id}}/edit">Edit</a>
+
   </article>
 </section>

src/html/blogpost.html

@@ -39,12 +39,11 @@ <h1>{{ gist.description }}</h1>
       <a href="{{gist.html_url}}">View Original</a>
       <img src="{{gist.owner.avatar_url}}" alt="Alina's big face" height="20%" width="20%">
 
+
       <ul class="blog-metadata">
-        <li>Author: {{ gist.owner.login }}</li>
+        <li>Gist Login: {{ gist.owner.login }}</li>
         <li class="date">Created on: {{ gist.created_at | date:"MM-dd-yyyy" }}</li>
         <li>{{ gist.comments }} Comments</li>
-
-        <!-- ////// These can access the object inside "files" object, and tap into a specific property //////   -->
         <ul>
           Filename(s):
           <li ng-repeat="file in gist.files">
@@ -59,16 +58,17 @@ <h1>{{ gist.description }}</h1>
         </ul>
       </ul>
 
-			<a class="btn-primary" href="#/blogposts/:blog {{ gist.id }}">Read More</a>
+			<a class="btn-primary" href="#/gists/{{ gist.id }}" >Read More</a>
 			<a class="btn-small" ng-click="deleteGist(gist.id)">Delete</a>
 
     </article>
 
-    <a class="btn-primary-alt" href="#/blogposts/new">Add New</a>
+    <a class="btn-primary-alt" href="#/gists/new">Add New</a>
 
   </div>
   <button class="btn-small" type="button" ng-click="pagination.prevPage()">Prev</button>
   <button class="btn-small" type="button" ng-click="pagination.nextPage()">Next</button>
+
 </section>
 
 

src/html/form.html

@@ -22,10 +22,15 @@ <h1>Add or Edit A Blogpost</h1>
   </div>
 </div>
 <!-- Form -->
-<form ng-submit="vm.save()" ng-controller="gisty">
-  <input type="text" ng-model="vm.blogpost.title" placeholder="Title" />
-  <textarea type="text" ng-model="vm.blogpost.text" placeholder="Text"></textarea>
-  <input type="text" ng-model="vm.blogpost.author" placeholder="Author" />
-  <input type="date" ng-model="vm.blogpost.date" placeholder="Date" />
+<form name="gistForm" ng-submit="vm.save()" ng-controller="GistFormCtrl">
+  Gist Description
+  <input type="text" ng-model="vm.gist.description" placeholder="Description">{{vm.gist.description}}</input>
+
+  <input type="text" ng-model="vm.newContent">
+
+  <textarea type="text" ng-model="vm.gist.files" placeholder="Content">Gist Files</textarea>
+  <input type="checkbox" ng-model="vm.gist.public" value="Public">Public</input>
+  <input type="text" ng-model="vm.gist.owner.login" placeholder="Author">Gist Username</input>
+  <input type="date" ng-model="vm.gist.created_at" placeholder="Date">Date</input>
   <input class="btn-primary-alt" type="submit" name="Submit">
 </form>

src/index.html

@@ -36,9 +36,14 @@ <h1 class="logo">intelly</h1>
     </header>
 
     <!-- SOME KIND OF NG-VIEW THING -->
-    <main ng-view ng-controller="GistsCtrl">
-       <div ng-include="'./html/blogpost.html'"></div>
+    <main ng-view>
+       <!-- <div ng-include="'./html/blogpost.html'"></div> -->
+       <!-- If it's main page, include blogpost.html (ALL posts)
+            If it's a single post, include blog.html (SINGLE post)
+            If it's a form, include form.html (FORM post)
+     -->
     </main>
+
     <!-- CONTACT SECTION  -->
     <section>
       <div class="learn-more-wrapper">

src/js/entry.js

@@ -1,3 +1,10 @@
 require("./gists-app.js");
+require("./gist-service.js");
+
 require("./gists-ctrl.js");
 require("./gists-filters.js");
+
+require("./gist-form-ctrl.js");
+require("./single-gist-ctrl.js");
+
+// require("./gist-date-ctrl.js");

src/js/gist-date-ctrl.js

@@ -0,0 +1,11 @@
+// require('./gists-app.js');
+
+// Controller to make DATE work!
+(function() {
+
+  angular.module("gisty").controller("DateCtrl", ["$scope", function($scope) {
+      $scope.date = new Date();
+  }]);
+
+
+})();

src/js/gist-form-ctrl.js

@@ -0,0 +1,80 @@
+require("./gists-app.js");
+
+(function() {
+'use strict';
+
+  angular.module("gisty").controller("GistFormCtrl", ["GistService", "$routeParams", "$location", function (GistService, $routeParams, $location) {
+
+      var vm = this;
+
+      vm.save = saveGist;
+
+      vm.gist = {};
+
+      start();
+
+      // IF statement only works when edit
+    function start() {
+
+      vm.gist.created_at = new Date(Date.now());
+      if ($routeParams.id) {
+        BlogpostService.get($routeParams.id).then(function (resp) {
+
+        vm.gist = resp.data;
+        vm.gist.created_at = vm.gist.created_at || new Date(Date.now());
+        });
+      }
+    }
+
+    function successHandler(response) {
+      vm.gist = response.data;
+      vm.newFilename = Object.keys(vm.gist.files)[0];
+      vm.newContent = vm.gist.files[vm.newFilename].content;
+
+      $log.info("response", response);
+      $log.info(vm.gist);
+    }
+
+    function errorHandler (response) {
+      $log.error("response", response);
+        } if ($routeParams.gist_id) {
+        GistService.get($routeParams.gist_id).then(function()
+
+        )
+      }
+    }
+
+
+    function saveGist () {
+
+      var method;
+
+      method = $routeParams.gist._id ? "update" : "create";
+
+      vm.gist.files = {};
+
+      if (!vm.oldFilename) {
+        vm.gist.files[vm.oldFilename] = {
+          filename:
+
+        }
+      }
+
+      vm.gist.files[vm.newFilename] = {
+        "content": "vm.newContent";
+      };
+
+      GistService[method](vm.gist).then(successHandler, errorHandler);
+
+
+      GistService[method](vm.gist).then(function (resp) {
+        $location.path("/gists/" + resp.data._id);
+      });
+
+    }
+  }]);
+
+}());  // ======= END OF IIFE =======//
+
+
+

src/js/gist-service.js

@@ -0,0 +1,45 @@
+var app = require("./gists-app.js");
+
+(function () {
+  "use strict";
+
+  angular.module("gisty").service("GistService", ["$http", "token", function ($http, token) {
+
+    var urlRoot = "https://api.github.com";
+    var username = "toalina";
+
+    var Gist = {
+      get: function (id) {
+        if (angular.isDefined(id)) {
+          // return $githubGist(id).read();
+          return $http.get(urlRoot + "/gists/" + id, {
+            headers: {'Authorization': 'token ' + token,}
+          });
+        } else {
+          // return $http.get(urlRoot);
+          console.warn('root url');
+        }
+      },
+      update: function (model) {
+        return $http.patch(urlRoot + "/gists/" + model.id, model, {
+          headers: {
+            'Authorization': 'token ' + token,
+          }
+        });
+      },
+      create: function (model) {
+        return $http.patch(urlRoot + "/gists", model, {
+          headers: {
+            'Authorization': 'token ' + token,
+          }
+        });
+      },
+
+      delete: function (model) {
+        return $http.delete(urlRoot + "/gists/" + model._id);
+      }
+    };
+    return Gist;
+  }]);
+
+}());