'testingabc'

Author: John Gorter

_labs/Lab. 8. Persistence/.DS_Store

@@ -1,52 +1,70 @@
 ## Lab 8. Ajax
-In this lab you will use AJAX calls to retrieve and store items from a webserver.
+In this lab you will use AJAX calls to retrieve and store votes from a webserver.
 > duration: 30 minutes
 
-### Step 1. Create a setup
-Create a directory 'polymer_labs\ajax' and navigate into it.
-Install NodeJS from it's website and use npm to install lite-server globally
-```
-$ sudo npm install lite-server -g
-```
+### Step 1. Setting the state
+Open file 'index.html' inside your current folder. If the exercise was not successful in the last
+lab, you can copy and paste a version of the files from the _solution folder from the last 
+exercise, these files can be found in './Lab. 8. Persistence/_solution/Lab. Local Storage/'.
 
-Install 'express' and 'body-parser' using the following command
-```
-$ npm install express body-parser
-```
+Make sure that the current setup works. Ask the instructor for help if you not have a valid setup.
 
-Copy the files from the starter files from this lab, found in the directory 
-'_starterfiles/Lab. Ajax' into your current folder and inspect the code from the file 'index.html'.
 
-Start the express server using the following command in the terminal
+### Step 2. Add Iron-Ajax to the application
+Open the earlier created 'index.html' and add the following contents
+
+* Copy the server.js file from the '_starterfiles' directory for this lab into the root of your 
+current working folder.
+* Install express as npm package from the command prompt
 ```
-node ./server.js
+npm install express body-parser
 ```
 
-If it started correctly, you should see the server listening on port 3001.
-Open a browser and navigate to http://localhost:3001/
+* Remove the iron-localstorage element from the page, since we are going to retrieve the data from the server.
 
-Test the application, it should work, however, the data is not retrieved and stored from/to the running server. 
+* Add two iron-ajax elements to the page, one to automatically retrieve votes from the server, and one to post 
+votes to the server.. Give them both ids, 'getVotes' and 'postVote' respectively. Bind the body of the postVote
+to a local variable named 'currentvote'. The postVote should use the content-type 'application/json' as value to 
+be able to post JSON data.
 
-### Step 2. Add Iron-Ajax to the application
-Open the earlier created 'index.html' and add the following contents
+* Use methods to call the generateRequest() api to post data to the server and retrieve new data from the server. 
+These methods should be placed in the vote method like so:
+```
+vote: function(e){
+    this.currentvote = e.detail;
+    this.$.postVote.generateRequest();
+    this.$.getVotes.generateRequest();
+    // this.push('votes', e.detail);
+}
+```
+
+Start the server to run the application, but this time use the following command to start the server
+```
+node server.js
+```
 
-* Add two iron-ajax elements to the page, one to retrieve todos from the server, and one to post 
-todos to the server..
-* Use methods to call the generateRequest() api to post data to the server and retrieve new data from the server
+Wait for the console to print that the server is up and running. 
 
 > Note that when retrieving new items from the back-end, the list is repopulated but not repainted. This is 
-> a well known issue. The workaround is to fire an 'iron-resize' from the list that needs to repaint. This 
+> a well-known issue. The workaround is to fire an 'iron-resize' from the list that needs to repaint. This 
 > code looks something like this: this.$.list.fire('iron-resize');
 
 Reopen or refresh the index.html and if all went well, the page displays a working setup.
-Add a few todos and refresh the page. Are the todos persisted? 
+Add a few votes and refresh the page. Are the votes persisted? 
+
 Does the ajax get call get logged in the server console?
 Does the ajax post call get logged in the server console? 
 
 
+### Extra: Step 3. Spot the bug
+when there are more than 10 votes, the current winner is calculated and shown on the screen. Does this functionality
+still work correctly? Why not? What is wrong here? Fix it!
+
+> Note: there are two bugs. Upon entry, the winner is not calculated. Upon voting, the wrong outcome is displayed. 
+
 
 ### Summary
-We've implemented ajax calls to retrieve and post todos for the todo application, 
+We've implemented ajax calls to retrieve and post votes for the vote application, 
 in the next lab, we will use other storage options. 
 
 -= End of lab =-

_labs/Lab. 8. Persistence/_docs/Lab. Ajax.md

@@ -7,7 +7,7 @@
         <link rel="import" href="/bower_components/neon-animation/neon-animation.html"/>
         <link rel="import" href="/bower_components/neon-animation/neon-animated-pages.html"/>
         <link rel="import" href="/bower_components/platinum-sw/platinum-sw-elements.html"/>
-        <link rel="manifest" href="./manifest.json">
+        <link rel="manifest" href="/manifest.json">
     </head>
     <body class="fullbleed layout vertical">
         <dom-module is="dom-bind" id="my-app">
@@ -23,20 +23,30 @@
                     </neon-animated-pages>
                 </paper-header-panel>
 
-                <platinum-sw-register skip-waiting  clients-claim reload-on-install auto-register>
-                    <platinum-sw-cache default-cache-strategy="networkFirst"></platinum-sw-cache>
-                </platinum-sw-register>
 
-                <iron-localstorage name="votes" value="{{votes}}" on-iron-localstorage-load-empty="initializeVotes"></iron-localstorage>
+                <iron-ajax id="getVotes" auto url="/data/votes" handle-as="json" last-response="{{votes}}"></iron-ajax>
+                <iron-ajax id="postVote" url="/data/vote" method="POST"  content-type="application/json" body="[[currentvote]]"></iron-ajax>
 
             </template>
              <script>
+                    var Candidate = function(name, lastname){
+                        this.name = name;
+                        this.lastname = lastname;  }
+                    var Vote = function(candidate, time){
+                        this.candidate = candidate;
+                        this.created = Date.now();
+                        this.time = time; }
+
                     Polymer({
                         is:'my-app',
                         properties:{
                             view:{
                                 type:String, 
                                 value:'vote'
+                            },
+                            candidates:{
+                                Type:Array,
+                                value:[ new Candidate('Donald', 'Dump'), new Candidate('Hilary', 'Reagan') ]
                             }
                         },
                         observers: ['_routeChanged(routeData.view)'],
@@ -55,7 +65,10 @@
                             this.set('route.path',"/details/" + this.candidates.indexOf(item.detail));
                         },
                         vote: function(e){
-                            this.push('votes', e.detail);
+                            this.currentvote = e.detail;
+                            this.$.postVote.generateRequest();
+                            this.$.getVotes.generateRequest();
+                            // this.push('votes', e.detail);
                         }
                     });
             </script>
@@ -64,19 +77,7 @@
         <my-app></my-app>
 
         <script>
-            var Candidate = function(name, lastname){
-                this.name = name;
-                this.lastname = lastname;  }
-            var Vote = function(candidate, time){
-                this.candidate = candidate;
-                this.created = Date.now();
-                this.time = time; }
             document.querySelector("my-app").message = "Election Day!";
-            document.querySelector("my-app").candidates = [
-                new Candidate('Donald', 'Dump'),
-                new Candidate('Hilary', 'Reagan') ];
-            //document.querySelector("my-app").votes = [];
         </script>
-
     </body>
 </html>

_labs/Lab. 8. Persistence/_solution/.DS_Store

@@ -0,0 +1,41 @@
+let portno = 3001;
+var express = require('express');
+var bodyParser = require('body-parser');
+var fs = require('fs');
+var app = express();
+
+arrVotes = []; 
+
+app.use(express.static('.'));
+app.use(bodyParser.json())
+
+
+app.get('/vote', function(req, res){
+    fs.readFile('./index.html', function(error, content) {
+		res.writeHead(200, { 'Content-Type': 'text/html' });
+		res.end(content, 'utf-8');
+	});
+}); 
+
+app.get('/details/*', function(req, res){
+    fs.readFile('./index.html', function(error, content) {
+		res.writeHead(200, { 'Content-Type': 'text/html' });
+		res.end(content, 'utf-8');
+	});
+}); 
+
+
+app.get('/data/votes', function(req, res){
+    console.log(`returning all votes`);
+    res.end(JSON.stringify(arrVotes));
+}); 
+app.post('/data/vote', function(req, res){
+    var object = req.body;
+    console.log(`adding a new vote to the list ${object}`, object);
+    arrVotes.push(object);
+    res.end();
+});
+
+app.listen(portno, function(){
+    console.log(`server listening on port ${portno}`);
+});

_labs/Lab. 8. Persistence/_solution/Lab. Ajax/.DS_Store

@@ -1,8 +1,9 @@
 <dom-module id="vote-page">
     <template>
-        <div name="vote"><strong>Candidates:</strong>
+        <div name="vote"><strong>
             <iron-list grid items="[[candidates]]" id="candidateGrid">
                 <template>
+                    
                 <paper-card heading="Vote for" style="margin-top:2px;zoom:96%;width:45%;">
                         <div class="card-content">  [[item.name]] [[item.lastname]] </div>
                         <div class="card-actions">
@@ -37,21 +38,28 @@
             behaviors: [ Polymer.NeonAnimationRunnerBehavior ],
             _getSort: function(a, b){  return b.created - a.created;  },
             getWinner: function(){
+                if (this.votes && this.votes.length > 10){
                             var filtered = this.votes.filter(function(item){
-                                return item.candidate === this.candidates[0];
+                                return item.candidate.name === this.candidates[0].name;
                             }.bind(this));
                             if (filtered.length == this.votes.length/2) return 'not defined, we need one more vote';
                             if (filtered.length < this.votes.length/2)  return this.candidates[1].name;
                             return this.candidates[0].name;
+                } 
+                return "";
             },
             vote: function(){
-                if (this.votes.length > 10) this.winner = this.getWinner();
+                this.winner = this.getWinner();
                 this.fire('vote', new Vote(event.model.item, new Date().toLocaleTimeString()));
                 this.playAnimation('vote');
             },
             showInfo: function(){
                 this.fire('show-info', event.model.item);
                 this.playAnimation('vote');
+            },
+            ready: function(){
+                this.winner = this.getWinner();
+                this.$.candidateGrid.fire('iron-resize');
             }
         });
     </script>

_labs/Lab. 8. Persistence/_solution/Lab. Ajax/index.html

@@ -1,21 +1,38 @@
 let portno = 3001;
 var express = require('express');
 var bodyParser = require('body-parser');
+var fs = require('fs');
 var app = express();
 
-arrTodos = [{title:'hond uitlaten', content:'hond goed uitlaten'}]; 
+arrVotes = []; 
 
 app.use(express.static('.'));
 app.use(bodyParser.json())
 
-app.get('/data/todos', function(req, res){
-    console.log(`returning all todos`);
-    res.end(JSON.stringify(arrTodos));
+
+app.get('/vote', function(req, res){
+    fs.readFile('./index.html', function(error, content) {
+		res.writeHead(200, { 'Content-Type': 'text/html' });
+		res.end(content, 'utf-8');
+	});
+}); 
+
+app.get('/details/*', function(req, res){
+    fs.readFile('./index.html', function(error, content) {
+		res.writeHead(200, { 'Content-Type': 'text/html' });
+		res.end(content, 'utf-8');
+	});
+}); 
+
+
+app.get('/data/votes', function(req, res){
+    console.log(`returning all votes`);
+    res.end(JSON.stringify(arrVotes));
 }); 
-app.post('/data/todo', function(req, res){
+app.post('/data/vote', function(req, res){
     var object = req.body;
-    console.log(`adding a new todo to the list ${object}`, object);
-    arrTodos.push(object);
+    console.log(`adding a new vote to the list ${object}`, object);
+    arrVotes.push(object);
     res.end();
 });
 

_labs/Lab. 8. Persistence/_solution/Lab. Ajax/server.js

@@ -21,8 +21,8 @@
 Example
 ```
 <paper-input value="{{idee}}"></paper-input>
-<app-localstorage-document key="idee" data="{{idee}}">
-</app-localstorage-document>
+<iron-localstorage name="idee" data="{{idee}}">
+</iron-localstorage>
 ```
 
 ---
@@ -74,6 +74,7 @@ Make AJAX calls through an element, example:
     auto
     method="POST|GET"
     url="https://www.googleapis.com/youtube/v3/search"
+    content-type="application/json"
     params='{"part":"snippet", "q":"polymer", "key": "YOUTUBE_API_KEY", "type": "video"}'
     handle-as="json"
     on-response="handleResponse"
@@ -129,6 +130,3 @@ PolymerFire
 
 url: https://github.com/firebase/polymerfire
 
----
-### Hybrid Storage
-Sometimes one techni