gdg-sp · WesleyBatista · Aug 20, 2015 · Aug 20, 2015 · Aug 20, 2015 · Aug 20, 2015
diff --git a/blogproject/bower.json b/blogproject/bower.json
@@ -49,6 +49,10 @@
     "paper-dialog": "PolymerElements/paper-dialog#^1.0.0",
     "paper-button": "PolymerElements/paper-button#^1.0.0",
     "paper-dialog-scrollable": "PolymerElements/paper-dialog-scrollable#^1.0.0",
-    "paper-input": "PolymerElements/paper-input#^1.0.0"
+    "paper-input": "PolymerElements/paper-input#^1.0.0",
+    "angular-material": "~0.10.0"
+  },
+  "resolutions": {
+    "angular": "1.4.3"
   }
 }
diff --git a/blogproject/gulpfile.js b/blogproject/gulpfile.js
@@ -44,4 +44,4 @@ gulp.task('start-client', ['start-server'], function() {
   gulp.watch(['./web/**/*.css'], browserSync.reload);
 });
 
-gulp.task('default', ['start-client']);
+gulp.task('default', ['start-client']);
diff --git a/blogproject/web/core/app.js b/blogproject/web/core/app.js
@@ -4,6 +4,8 @@ angular.module( 'polymerblog', [
   'polymerblog.home',
   'polymerblog.login',
   'polymerblog.posts',
+  'polymerblog.services',
+  'ngMaterial',
   'angular-storage',
   'angular-jwt',
   'pascalprecht.translate'
@@ -72,4 +74,3 @@ angular.module( 'polymerblog', [
 })
 
 ;
-
diff --git a/blogproject/web/core/services.js b/blogproject/web/core/services.js
@@ -0,0 +1,58 @@
+var Post = function ($resource, $http) {
+  var actions = {
+    save: {
+    //   method: 'POST',
+    //   transformRequest: [function(data) {
+    //     var newData = _.extend({}, data);
+    //     if (newData.query_id === undefined) {
+    //       newData.query_id = newData.query.id;
+    //       delete newData.query;
+    //     }
+    //
+    //     return newData;
+    //   }].concat($http.defaults.transformRequest)
+    },
+
+    getAll: {
+
+    }
+
+  };
+
+  // var resource = $resource('/api/alerts/:id', {id: '@id'}, actions);
+
+  return resource;
+};
+
+AuthService = function(auth, $location, $filter, store){
+
+    var all = {
+        auth: auth,
+
+        login: function(){
+            auth.signin({}, function(profile, token) {
+                store.set('profile', profile);
+                store.set('token', token);
+                $location.path("/");
+            }, function(error) {
+                console.log($filter('translate')('login.loginFail'), error);
+            });
+
+        },
+
+        logout: function() {
+          auth.signout();
+          store.remove('profile');
+          store.remove('token');
+          $location.path('/login');
+        }
+
+    };
+
+    return all;
+};
+
+angular.module('polymerblog.services', ['auth0'])
+    // .factory('Post', ['$resource', '$timeout', '$q', '$http', Post])
+    .service('AuthService', ['auth', '$location', '$filter', 'store',  AuthService])
+    ;
diff --git a/blogproject/web/elements/post-list.html b/blogproject/web/elements/post-list.html
@@ -1,22 +1,23 @@
 <dom-module id="post-list">
-  <style>
-  </style>
-  <template>
-    <firebase-collection data="{{data}}"
-                      location="https://html5-blog.firebaseio.com/">
-    </firebase-collection>
 
-    <template is="dom-repeat" items="{{data}}">
-      <post-card>
-        <h2>{{item.title}}</h2>
-        <h3>{{item.author}}</h3>
-        <p>{{item.post}}</p>
-      </post-card>  
+    <template>
+        <firebase-collection data="{{data}}" location="https://html5-blog.firebaseio.com/"></firebase-collection>
+
+        <template is="dom-repeat" items="{{data}}">
+            <post-card>
+                <h2>{{item.title}}</h2>
+                <h3>{{item.author}}</h3>
+                <p>{{item.post}}</p>
+            </post-card>
+        </template>
+
     </template>
-  </template>  
+
   <script>
     Polymer({
-      is: "post-list"
+        is: "post-list",
+        reflectToAttribute: true
     });
   </script>
+
 </dom-module>
diff --git a/blogproject/web/home/home.css b/blogproject/web/home/home.css
@@ -1,7 +1,5 @@
 body{
   font-family: "proxima-nova",sans-serif;
-  text-align: center;
-  font-size: 300%;
   font-weight: 100;
 }
 
@@ -39,7 +37,7 @@ input[type=checkbox]:focus + label:before {
   outline: 0;
 }
 
-.btn{
+/*.btn{
   font-size: 140%;
   text-transform: uppercase;
   letter-spacing: 1px;
@@ -64,9 +62,40 @@ input[type=checkbox]:focus + label:before {
     color: #666;
   }
 }
-
+*/
 h1,h2,h3{
   font-weight: 100;
+  margin: 0;
+}
+.post-card > div{
+    padding: 0 0 0 10px;
+}
+
+.post-card.card-title{
+    border-bottom: 1px dotted #ddd;
+    margin-bottom: 0.3em;
+}
+.post-card.card-title h2{
+    font-size: 2em;
+    font-weight: normal;
+}
+.post-card.card-author h3{
+    font-size: 0.8em;
+    font-weight: bold;
+    text-transform: uppercase;
+}
+.post-card.card-post{
+
+}
+.card-post.post-card p {
+    font-size: 1.7em;
+    font-weight: normal;
+}
+.sidebar{
+    padding: 150px 0 0 0;
+}
+.cover {
+  margin: 60px;
 }
 
 #logo img{

diff --git a/blogproject/web/home/home.html b/blogproject/web/home/home.html
@@ -1,7 +1,13 @@
-<div class="home">
-  <h1 id="logo"><img src="content/images/auth0_logo_final_blue_RGB.png" /></h1>
-  <h2>{{'home.wellcome' | translate}} {{auth.profile.nickname}}</h2>
-  <button class="btn btn-lg btn-primary" ng-click="callApi()">{{'home.makeAuthCall' | translate}}</button> <br />
-  <button class="btn btn-lg btn-primary" ng-click="redirectPosts()">{{'home.viewPosts' | translate}}</button>
-  <button class="btn-lg btn-warning" ng-click="logout()">Logout</button>
-</div>
+<div layout="row" class="home">
+    <div class="content-wraper">
+        <h2>{{'home.wellcome' | translate}} {{auth.profile.nickname}}</h2>
+        <br/>
+        <br/>
+        <post-list></post-list>
+    </div>
+
+    <div class="sidebar">
+        <md-button  ng-click="callApi()" class="md-raised">{{'home.makeAuthCall' | translate}}</md-button>
+        <md-button  ng-click="redirectPosts()" class="md-raised md-primary">{{'home.viewPosts' | translate}}</md-button>
+        <md-button  ng-click="logout()" class="md-raised">Logout</md-button>
+    </div>
diff --git a/blogproject/web/home/home.js b/blogproject/web/home/home.js
@@ -50,7 +50,7 @@ angular.module( 'polymerblog.home', [
     store.remove('token');
     $location.path('/login');
   }
-  
+
   $scope.redirectPosts = function() {
     $location.path('/posts');
   }

diff --git a/blogproject/web/index.html b/blogproject/web/index.html
@@ -1,91 +1,102 @@
 <!DOCTYPE html>
 <html ng-app="polymerblog" ng-controller="AppCtrl">
+  <head>
+    <title ng-bind="pageTitle"></title>
 
-<head>
-  <title ng-bind="pageTitle"></title>
-  <script type="text/javascript" src="//use.typekit.net/iws6ohy.js"></script>
-  <script type="text/javascript">
-  try {
-    Typekit.load();
-  } catch (e) {}
-  </script>
-  <script src="bower_components/webcomponentsjs/webcomponents-lite.js"></script>
-  <!-- ELEMENTOS POLYMER -->
-  <link rel="import" href="bower_components/paper-toolbar/paper-toolbar.html">
-  <link rel="import" href="elements/post-card.html">
-  <link rel="import" href="elements/post-list.html">
-  <link rel="import" href="elements/post-card-form.html">
-  <link rel="import" href="bower_components/paper-header-panel/paper-header-panel.html">
-  <link rel="import" href="bower_components/paper-styles/paper-styles-classes.html">
-  <link rel="import" href="bower_components/firebase-element/firebase-collection.html">
-  <link rel="import" href="bower_components/paper-material/paper-material.html">
-  <link rel="import" href="bower_components/iron-icons/iron-icons.html">
-  <link rel="import" href="bower_components/paper-fab/paper-fab.html">
-  <link rel="import" href="bower_components/paper-dialog/paper-dialog.html">
-  <link rel="import" href="bower_components/paper-button/paper-button.html">
-  <meta name="viewport" content="width=device-width, initial-scale=1">
-  <!-- FONT AWESOME -->
-  <link href="bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
-  <link href="bower_components/font-awesome/css/font-awesome.min.css" rel="stylesheet">
-  <!-- ESTILOS DA APLICAÇÃO -->
-  <link rel="stylesheet" type="text/css" href="home/home.css">
-  <link rel="stylesheet" type="text/css" href="login/login.css">
-  <link rel="stylesheet" type="text/css" href="posts/posts.css">
-  <link rel="stylesheet" type="text/css" href="content/css/lavish.css">
-  <link rel="stylesheet" type="text/css" href="content/css/polymerblog.css">
-  <!-- CORE DO ANGULARJS E AUTH0 -->
-  <script src="core/auth0-variables.js"></script>
-  <script src="bower_components/angular/angular.min.js"></script>
-  <script src="bower_components/auth0-lock/build/auth0-lock.min.js"></script>
-  <script src="bower_components/auth0-angular/build/auth0-angular.min.js"></script>
-  <script src="bower_components/angular-cookies/angular-cookies.min.js"></script>
-  <script src="bower_components/angular-route/angular-route.min.js"></script>
-  <script src="bower_components/a0-angular-storage/dist/angular-storage.min.js">
-  </script>
-  <script src="bower_components/angular-jwt/dist/angular-jwt.min.js">
-  </script>
-  <script src="bower_components/angular-translate/angular-translate.min.js">
-  </script>
-  <!-- CONTROLLERS DO ANGULARJS -->
-  <script type="text/javascript" src="core/app.js"></script>
-  <script type="text/javascript" src="home/home.js"></script>
-  <script type="text/javascript" src="posts/posts.js"></script>
-  <script type="text/javascript" src="login/login.js"></script>
-</head>
-
-<body class="fullbleed layout vertical">
-  <paper-header-panel mode="waterfall-tall">
-    <paper-toolbar id="mainToolbar">
-      <paper-icon-button icon="menu"></paper-icon-button>
-      <div class="middle paper-font-display2 ">Polymer HTML5 Blog</div>
-    </paper-toolbar>
-    <div class="container" ng-view></div>
-  </paper-header-panel>
-  <paper-dialog id="add_post_dialog" modal  style="width: 600px">
-    <post-card-form></post-card-form>
-    <div class="buttons">
-      <paper-button dialog-dismiss>Cancelar</paper-button>
-      <paper-button dialog-confirm autofocus name="addPostValues" onclick="save_post_click()" id="addPostValues">Salvar</paper-button>
-    </div>
-  </paper-dialog>-
-</body>
+    <script type="text/javascript" src="//use.typekit.net/iws6ohy.js"></script>
+    <script type="text/javascript">try{Typekit.load();}catch(e){}</script>
+    <script src="bower_components/webcomponentsjs/webcomponents-lite.js"></script>
 
+    <!-- ELEMENTOS POLYMER -->
+    <link rel="import" href="bower_components/paper-toolbar/paper-toolbar.html">
+    <link rel="import" href="elements/post-card.html">
+    <link rel="import" href="elements/post-list.html">
+    <link rel="import" href="elements/post-card-form.html">
+    <link rel="import" href="bower_components/paper-header-panel/paper-header-panel.html">
+    <link rel="import" href="bower_components/paper-styles/paper-styles-classes.html">
+    <link rel="import" href="bower_components/firebase-element/firebase-collection.html">
+    <link rel="import" href="bower_components/paper-material/paper-material.html">
+    <link rel="import" href="bower_components/iron-icons/iron-icons.html">
+    <link rel="import" href="bower_components/paper-fab/paper-fab.html">
+    <link rel="import" href="bower_components/paper-dialog/paper-dialog.html">
+    <link rel="import" href="bower_components/paper-dialog-scrollable/paper-dialog-scrollable.html">
+    <link rel="import" href="bower_components/paper-button/paper-button.html">
+
+
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+
+    <!-- FONT AWESOME -->
+    <link href="bower_components/font-awesome/css/font-awesome.min.css" rel="stylesheet">
+
+    <!-- ESTILOS DA APLICAÇÃO -->
+
+    <link rel="stylesheet" type="text/css" href="home/home.css">
+    <link rel="stylesheet" type="text/css" href="login/login.css">
+    <link rel="stylesheet" type="text/css" href="posts/posts.css">
+    <link rel="stylesheet" type="text/css" href="content/css/polymerblog.css">
+    <link rel="stylesheet" href="bower_components/angular-material/angular-material.min.css">
+
+
+    <!-- CORE DO ANGULARJS E AUTH0 -->
+    <script src="core/auth0-variables.js"></script>
+    <script src="bower_components/angular/angular.min.js"></script>
+    <script src="bower_components/auth0-lock/build/auth0-lock.min.js"></script>
+    <script src="bower_components/auth0-angular/build/auth0-angular.min.js"></script>
+    <script src="bower_components/angular-cookies/angular-cookies.min.js"></script>
+    <script src="bower_components/angular-route/angular-route.min.js"></script>
+    <script src="bower_components/angular-aria/angular-aria.min.js"></script>
+    <script src="bower_components/angular-animate/angular-animate.min.js"></script>
+    <script src="bower_components/angular-material/angular-material.min.js"></script>
+    <script src="bower_components/a0-angular-storage/dist/angular-storage.min.js"> </script>
+    <script src="bower_components/angular-jwt/dist/angular-jwt.min.js"> </script>
+    <script src="bower_components/angular-translate/angular-translate.min.js"></script>
+
+    <!-- CONTROLLERS DO ANGULARJS -->
+    <script type="text/javascript" src="core/app.js"></script>
+    <script type="text/javascript" src="core/services.js"></script>
+    <script type="text/javascript" src="home/home.js"></script>
+    <script type="text/javascript" src="posts/posts.js"></script>
+    <script type="text/javascript" src="login/login.js"></script>
+  </head>
+
+  <body class="fullbleed layout vertical">
+    <paper-header-panel mode="cover">
+        <paper-toolbar class="tall"></paper-toolbar>
+        <div class="cover" ng-view></div>
+     </paper-header-panel>
+
+     <paper-dialog id="add_post_dialog" modal>
+       <paper-dialog-scrollable style="width: 600px; height: 600px; overflow:none">
+       <post-card-form></post-card-form>
+       </paper-dialog-scrollable>
+       <div class="buttons">
+         <paper-button dialog-dismiss>Cancelar</paper-button>
+         <paper-button dialog-confirm autofocus name="addPostValues" onclick="save_post_click()"  id="addPostValues">Salvar</paper-button>
+       </div>
+     </paper-dialog>-
+
+  </body>
 </html>
+
 <script>
-function add_post_click() {
+function add_post_click(){
 
   var dialog = document.getElementById("add_post_dialog");
-  if (dialog) {
-    dialog.open();
+    if (dialog) {
+      dialog.open();
   }
 }
 
 function save_post_click() {
-  var post = base.add({
-    title: document.getElementById('titulo-post').value,
-    author: JSON.parse(localStorage.getItem('profile')).name,
-    post: document.getElementById('conteudo-post').value,
-    timestamp: new Date().getTime()
-  });
-}
+
+     var post = base.add({
+       title: document.getElementById('titulo-post').value,
+       author: JSON.parse(localStorage.getItem('profile')).name,
+       post: document.getElementById('conteudo-post').value,
+       timestamp: new Date().getTime()
+     });
+
+
+ }
+
 </script>