hasura-imad · akash-joshi · Sep 17, 2016 · Sep 18, 2016 · Sep 20, 2016 · Sep 20, 2016
diff --git a/package.json b/package.json
@@ -4,12 +4,15 @@
   "description": "IMAD 2016 course app",
   "main": "server.js",
   "scripts": {
+    "start": "npm install",
+    "start": "node server.js",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "author": "",
   "license": "ISC",
   "dependencies": {
     "express": "^4.14.0",
-    "morgan": "^1.7.0"
-  }
+    "morgan": "^1.7.0",
+    "pg": "^6.1.0"
+  } 
 }
diff --git a/server.js b/server.js
@@ -1,24 +1,106 @@
 var express = require('express');
 var morgan = require('morgan');
 var path = require('path');
-
+var Pool = require('pg').Pool;
 var app = express();
 app.use(morgan('combined'));
 
+var counter =0;
+var config = {
+    user : 'krusty-crab',
+    database : 'krusty-crab',
+    host : 'db.imad.hasura-app.io',
+    port : '5432',
+    password : process.env.DB_PASSWORD
+}
+function createTemplate(data){
+    var title = data.title;
+    var heading = data.heading;
+    var date = data.date;
+    var content = data.content;
+    var htmlTemplate = `<html>
+        <head>
+            <link href="/ui/style.css" rel="stylesheet" />
+            ${title}
+         </head>     
+         <body>
+            <div>
+                <a href="/"> Home </a>
+            </div>
+            <hr/>
+            <div class="center">
+                <h1>
+                    ${heading}
+                </h1>
+            </div>
+            <div class="center">
+                ${date.toDateString()}
+            </div>
+            <div>
+              ${content}
+            </div>
+        </body>
+    </html>`;
+    return htmlTemplate;
+}
+
 app.get('/', function (req, res) {
   res.sendFile(path.join(__dirname, 'ui', 'index.html'));
 });
 
+var names=[];
+app.get('/submit-name', function(req, res) {
+   var name = req.query.name;
+   names.push(name);
+   res.send(JSON.stringify(names));
+});
+
+app.get('/counter', function (req,res){
+    counter++;
+    res.send(counter.toString());
+});
+
+var pool = new Pool(config);
+app.get('/test-db',function (req,res){
+   pool.query('SELECT * FROM test', function (err,result){
+       if(err){
+           res.status(500).send(err.toString());
+       } else{
+           res.send(JSON.stringify(result.rows));
+       }
+   })
+   //make select req and return response 
+});
+
+app.get('/articles/:articleName', function (req, res) {
+  // SELECT * FROM article WHERE title = '\'; DELETE WHERE a = \'asdf'
+  pool.query("SELECT * FROM article WHERE title = $1", [req.params.articleName], function (err, result) {
+    if (err) {
+        res.status(500).send(err.toString());
+    } else {
+        if (result.rows.length === 0) {
+            res.status(404).send('Article not found');
+        } else {
+            var articleData = result.rows[0];
+            res.send(createTemplate(articleData));
+        }
+    }
+  });
+});
+
 app.get('/ui/style.css', function (req, res) {
   res.sendFile(path.join(__dirname, 'ui', 'style.css'));
 });
 
+app.get('/ui/main.js', function (req, res) {
+  res.sendFile(path.join(__dirname, 'ui', 'main.js'));
+});
+
 app.get('/ui/madi.png', function (req, res) {
   res.sendFile(path.join(__dirname, 'ui', 'madi.png'));
 });
 
-
-var port = 8080; // Use 8080 for local development because you might already have apache running on 80
-app.listen(8080, function () {
+var port = process.env.PORT || 8080 // Use 8080 for local development because you might already have apache running on 80
+app.listen(port, function () {
   console.log(`IMAD course app listening on port ${port}!`);
 });
diff --git a/ui/index.html b/ui/index.html
@@ -3,15 +3,33 @@
     <head>
         <link href="/ui/style.css" rel="stylesheet" />
     </head>
-    <body>
+    <body class="mobile">
         <div class="center">
-            <img src="/ui/madi.png" class="img-medium"/>
+            <img id ="madi" src="https://upload.wikimedia.org/wikipedia/commons/7/7b/Donkey_1_arp_750px.jpg" class="img-medium"/>
         </div>
         <br>
-        <div class="center text-big bold">
-            Hi! I am your webapp.
+        <div class="center bold">
+            Hi! I am Akash, and this is my first webapp.
+						<h4> A new heading </h4>
+						I've made some changes
         </div>
         <script type="text/javascript" src="/ui/main.js">
+
         </script>
+        <div >
+        <p> Reasons to hire me : </p>
+        <ol>
+            <li> Am person </li>
+            <li> Have heartbeat </li>
+        </ol></div>
+        <div class="footer center">
+            This button <button id="counter"> Click me!</button> has been clicked <span id="count">0</span> times
+            <hr/>
+            <input type="text" id="name" placeholder="name"></input>
+            <input type="Submit" value="Submit" class="center" id="submit_btn"></input>
+            <ul id="namelist">
+            </ul>
+        </div>
+        <script type="text/javascript" src="/ui/main.js"></script>
     </body>
 </html>
diff --git a/ui/main.js b/ui/main.js
@@ -1 +1,50 @@
-console.log('Loaded!');
+// counter code
+var button = document.getElementById('counter');
+var counter=0;
+button.onclick = function () {
+
+   var request = new XMLHttpRequest(); 
+
+    request.onreadystatechange = function () {
+      if(request.readyState === XMLHttpRequest.DONE){
+             if(request.status === 200){  //DO NOT COMPARE WITH "200" INSTEAD WITH 200
+                var counter=request.responseText; //Should be request.responseText
+                var span = document.getElementById('count');
+                span.innerHTML= counter.toString();
+            }
+        }
+    };
+
+    request.open("GET", document.URL+"counter", true);
+    request.send(null);
+};
+
+// Get Name
+var submit = document.getElementById('submit_btn');
+submit.onclick = function () {
+    //make request to get names
+    var request = new XMLHttpRequest(); 
+    var nameInput = document.getElementById('name');
+    var name=nameInput.value;
+    request.onreadystatechange = function () {
+      if(request.readyState === XMLHttpRequest.DONE){
+             if(request.status === 200){  
+                var names = request.responseText;
+                names = JSON.parse(names);
+                var list='';
+                for(var i=0; i<names.length;i++){
+                    list += '<li>' + names[i] + '</li>';
+                    var ul=document.getElementById('namelist');
+                    ul.innerHTML = list;
+                }
+            }
+        }
+    };
+
+    request.open("GET", document.URL+"submit-name?name="+name, true);
+    request.send(null);
+    // capture names
+
+
+
+};
diff --git a/ui/style.css b/ui/style.css
@@ -1,5 +1,8 @@
 body {
+    height: 100%;
+    width: 100%;
     font-family: sans-serif;
+    font-size: 3vw;
     background-color: lightgrey;
     margin-top: 75px;
 }
@@ -9,14 +12,18 @@ body {
 }
 
 .text-big {
-    font-size: 300%;
+    /*font-size: 200%;*/
 }
 
 .bold {
     font-weight: bold;
 }
 
 .img-medium {
-    height: 200px;
+    height: 300px;
 }
 
+.mobile{
+    margin-left: 40px;
+    margin-right: 40px;
+}