Friday, June 9, 2017

6.1) App Screen 3 (UI + Backend integration)

Hello all!

My app
My is powered by hasura

This is the screen 3 , where the user answers to a question of his choice.
This page , called 'Answersheet' , onload, fetches all the answers to that question , by different users. And provides a textarea to post his anwer. the answer , then gets inserted into the 'your_answer' table, with details like username, question_id, answer, date, etc.

Screen 3

Following are  a few screenshot of screen 3


=================LAST UPDATED ON 21/06/17===============================

                        SCREEN 3 -ANSWER SHEET- USER POSTING A ANSWER

                                    ANSWER POSTED SUCCESSFULLY AND GETS UPDATED
                                           AS THE USER HITS THE BUTTON


                                           FINALLY USER LOGGED-OUT SUCCESSFULLY


                   UNANSWERED QUESTIONS - YOU BEING THE FIRST TO ANSWER

=======================================================================



Your comments are awaited.


====================LAST UPDATED ON 12-07-2017=======================
var express = require('express');
var path = require('path');
var crypto =require('crypto');


var app = express();

function answerSheet(data1){
    var question_id = data1;
    var answersht =`
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>

<title>State of the Art</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<link href="/main.css" rel="stylesheet" />
<!--<link rel="icon" href="/logo.gif">-->   
</head>

<body id=body class=scroll>

<nav class="navbar navbar-default container">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">State-of-the-Art</a>
    </div>
    <ul class="nav navbar-nav">
      <li ><a href="/">Home</a></li>
      <li class="active"><a href="/subjects.html">QUESTIONS</a></li>
      <li id="sign_in"><a href="/">SIGNIN/SIGNUP</a></li>
      <li id="welcome_msg"></li>
     <!-- <li id="sign_out"></li>-->
      <li ><a id=date href="#"></a></li>
      <li ><a href="https://hasura.io/ " target=_blank>powered by : Hasura</a></li>
       <li id="sign_out"></li>
    </ul>
  </div>
</nav>

<div class="jumbotron text-center container">
 
   

    <div id=header>
    <h2>Answer Sheet</h2>
    </div>
 
<!--<span class=white style=float:left>This app is powered by: Hasura </span>--><!--<span id=date class=white style=float:right></span>-->
   <div id=header>
    <h2 id=question_title> </h2>
    </div>
    <span id=your_question class=white bold></span><br>
    <div id=header>
    <h2>Answers</h2> 
    </div>
   
   <span id=all_answers class=black bold>

    </span>

        <div id=header>
    <h2>Post your answer</h2>
    </div>
    <div class=form-group  ng-app="">
   
    <textarea id= "answer_text" placeholder="Type your answer here" class=class="black form-control" ng-model="yr_answer" cols=70 rows=10 maxlength=5000></textarea>
    <hr>
    <span class="white" maxlength=70>{{yr_answer}}</span>
    <hr>
        <input id="submit_btn" type =button value ="Post your answer" class ="btn btn-success">
    </div>
    <div id=footer>
    <span class=white>Site Owner & developer: Ashutosh Singh, U.P., India<br>
    Contact information:</span> <a href="mailto:webwithjs@gmail.com" class=hyperlinks>Send me a letter</a>&nbsp;&nbsp;&nbsp;
    <a href='https://stackoverflow.com/users/7394522/ashutosh-k-singh' target=_blank>Stack</a>&nbsp;&nbsp;&nbsp;
    <a href='http://ashutosh-hasura.blogspot.in/' target=_blank>Blog</a>&nbsp;&nbsp;&nbsp;
    <a href='https://github.com/internetadvancedsolutions' target= _blank>Git</a>
    </div>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
      <script src = "https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
     
      <!-- Include all compiled plugins (bel
      ow), or include individual files as needed -->
      <script src = "//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>

      <script >
     
                                         <!-- ON PAGE LOAD  -->
                                       
                                         <!-- LOADING ANSWERS -->
               
    var question_id=${question_id};
     var all_cookies;
     var user_id;
     var user_name;
   
        
    window.onload=function() {
    var d =new Date();
    var date_time= d.toDateString();
    document.getElementById("date").innerHTML=date_time;
    var request = new XMLHttpRequest();
       
     var all_answers = document.getElementById('all_answers');
    request.onreadystatechange = function () {
        if (request.readyState === XMLHttpRequest.DONE) {
            if (request.status === 200) {
           
                var content = '<ol class=left>';
                console.log(this.responseText);  // returns Arrray of Objects
                var  answers = JSON.parse(this.responseText);
                 console.log(answers);  // returns Array of JSON objects
                 if(answers.length!=0)
                 { for (var i=(answers.length)-1; i >=0; i--) {
                    var time= new Date(answers[i].answer_date);
                    content += "<li>"+
                   answers[i].your_answer+"<br>"
                    + "  "+"<span style=color:#fff380>"+ answers[i].user_name+"</span>"+ " - on "+time.toUTCString()
                   +" </li>";
                }
                content += "</ol>"
                all_answers.innerHTML = content;
                 }else{  all_answers.innerHTML = " <h2>"+" Be the first one to answer this question"+" </h2> ";}
               
            } else {
                all_answers.innerHTML('Please wait ...');
            }
        }
    };

   
   
     user_id=Cookies.get('user_id');
     user_name=Cookies.get('user_name');
    console.log("user_id cookie = "+  user_id);
    console.log("user_name cookie = "+ user_name);
      
    if(user_name!==undefined){
        document.getElementById("sign_out").innerHTML='<a  href="/logout.html">SIGNOUT</a>';
        document.getElementById("sign_in").innerHTML='';
        document.getElementById("welcome_msg").innerHTML="<a href=''>"+"Hello, " + " " +"<span style=color:blue>"+ user_name+"</span>"+"</a>";;
        }
        else{
        document.getElementById("sign_out").innerHTML='';
        document.getElementById("sign_in").innerHTML='<a  href="/">'+'SIGNIN/SIGNUP'+'</a>';
        document.getElementById("welcome_msg").innerHTML="";
        }
   
   
        request.open("POST", "https://data.veejay84.hasura-app.io/v1/query", true);
        request.setRequestHeader('Content-type','application/json');
        request.send(JSON.stringify({type:"select",args:{table:"your_answer", columns:["user_id","user_name",  "your_answer", "answer_date"],  where:{"answer2_question_id":question_id}}}));

            <!-- LOADING QUESTION -->
       
                             var request1 = new XMLHttpRequest();
     var your_question = document.getElementById('your_question');
     var question_title = document.getElementById('question_title');
    request1.onreadystatechange = function () {
        if (request1.readyState === XMLHttpRequest.DONE) {
            if (request1.status === 200) {
           
                var j = question_id;
                console.log("question id = " +j);
                //console.log(JSON.parse(this.responseText));  // returns Arrray of Objects
                // var  questions = this.responseText;
                var  questions = JSON.parse(this.responseText); // returns Array of JSON objects
                console.log(questions);
                var time= new Date(questions[0].created_date);
                question_title.innerHTML= questions[0].question_title;
                 your_question.innerHTML=questions[0].your_question+"<br>"+ "  " +"<span style=color:#fff380>"+ questions[0].user_name +"</span>" + " on "+ time.toUTCString();
               
                   
                }
             else {
                your_question.innerHTML='Please wait ...loading question';
            }
        }
    }
   
          
    request1.open('POST', 'https://data.veejay84.hasura-app.io/v1/query', true);
    request1.setRequestHeader('Content-type','application/json');
    request1.send(JSON.stringify({type:"select",args:{table:"ask_question", columns:["user_id","user_name",  "your_question", "created_date","question_title"],  where:{"question_id":question_id}}}));
   
   
   
   
   
};
           
   
     
     
                               <!-- POST ANSWER -->
  
   var submit_btn= document.getElementById("submit_btn");
  
   submit_btn.onclick=function()
{   var request = new XMLHttpRequest();
        request.onreadystatechange=function()
        {   
            if(request.readyState===XMLHttpRequest.DONE && request.status===200)
            {
                   
                    setTimeout( newQuestion, 2000);
                    document.getElementById("submit_btn").value="Thanks ! answer  more";
            }
            else
            {
                    document.getElementById("submit_btn").value="Sign in/Sign up";
                   
            }
  
        }
               
        var answer_text   = document.getElementById("answer_text").value;
        console.log("your_answer= "+answer_text);
        var user_id_int= parseInt(user_id);
        request.open('POST', "https://data.veejay84.hasura-app.io/v1/query",true);
        request.withCredentials=true;
        request.setRequestHeader('Content-type','application/json');
        request.setRequestHeader('Authorization','Bearer');
        request.send(JSON.stringify({type:"insert",args:{table:"your_answer", objects:[{user_id:user_id_int,user_name:user_name, answer2_question_id:question_id,your_answer:answer_text}]}}));
        document.getElementById("submit_btn").value= "Posting...";
        console.log("user_id = "+user_id);
        console.log("user_name = "+user_name);
        console.log("question_id = "+ question_id);
        console.log("user_id_int = "+ user_id_int);
};     

function newQuestion(){
    var request = new XMLHttpRequest();
       
     var all_answers = document.getElementById('all_answers');
    request.onreadystatechange = function () {
        if (request.readyState === XMLHttpRequest.DONE) {
            if (request.status === 200) {
           
                var content = '<ol class=left>';
                console.log(this.responseText);  // returns Arrray of Objects
                var  answers = JSON.parse(this.responseText);
                 console.log(answers);  // returns Array of JSON objects
                    for (var i=(answers.length)-1; i >=0; i--) {
                    var time= new Date(answers[i].answer_date);
                    content += "<li>"+
                   answers[i].your_answer+"<br>"
                    + "  "+"<span style=color:#fff380>"+ answers[i].user_name+"</span>"+ " - on "+time.toUTCString()
                   +" </li>";
                }
                content += "</ol>"
                all_answers.innerHTML = content;
            } else {
                all_answers.innerHTML('Oops ! re-try...');
            }
        }
    };
     
        request.open("POST", "https://data.veejay84.hasura-app.io/v1/query", true);
        request.setRequestHeader('Content-type','application/json');
        request.send(JSON.stringify({type:"select",args:{table:"your_answer", columns:["user_id","user_name",  "your_answer", "answer_date"],  where:{"answer2_question_id":question_id}}}));
         all_answers.innerHTML = "<h4>"+"loading data..."+"</h4>";
}

                                       
</script>  
     
      <script src=/js.cookie.js></script>
</body>
</html>

    `;
    return answersht; 
}   


app.get('/', function (req, res) {
   
    res.sendFile(path.join(__dirname, 'index.html'));
});


app.get('/:fileName', function (req, res) {
  res.sendFile(path.join(__dirname, req.params.fileName));
});

app.get('/answersheet/:question_id', function(req,res){
    res.send(answerSheet(req.params.question_id));
});

app.listen(8080, function () {
  console.log('State-of-the-Art app listening on port 8080!');
});



====================PREVIOUS UPDATED ON 29-06-2017=======================

var express = require('express');
var path = require('path');
var crypto =require('crypto');


var app = express();

function answerSheet(data1){
    var question_id = data1;
    var answersht =`
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>

<title>State of the Art</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<link href="/main.css" rel="stylesheet" />
<!--<link rel="icon" href="/logo.gif">-->  
</head>

<body id=body class=scroll>

<nav class="navbar navbar-default container">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">State-of-the-Art</a>
    </div>
    <ul class="nav navbar-nav">
      <li ><a href="/">Home</a></li>
      <li class="active"><a href="/subjects.html">QUESTIONS</a></li>
      <li id="sign_in"><a href="/">SIGNIN/SIGNUP</a></li>
      <li id="welcome_msg"></li>
     <!-- <li id="sign_out"></li>-->
      <li ><a id=date href="#"></a></li>
      <li ><a href="https://hasura.io/ " target=_blank>powered by : Hasura</a></li>
       <li id="sign_out"></li>
    </ul>
  </div>
</nav>

<div class="jumbotron text-center container">
 
  

    <div id=header>
    <h2>Answer Sheet</h2>
    </div>
 
<!--<span class=white style=float:left>This app is powered by: Hasura </span>--><!--<span id=date class=white style=float:right></span>-->
   <div id=header>
    <h2 id=question_title> </h2>
    </div>
    <span id=your_question class=white bold></span><br>
    <div id=header>
    <h2>Answers</h2>
    </div>
  
   <span id=all_answers class=black bold>
    
    </span>

        <div id=header>
    <h2>Post your answer</h2>
    </div>
    <div class=form-group  ng-app="">
  
    <textarea id= "answer_text" placeholder="Type your answer here" class=class="black form-control" ng-model="yr_answer" cols=70 rows=10 maxlength=5000></textarea>
    <hr>
    <span class="white" maxlength=70>{{yr_answer}}</span>
    <hr>
        <input id="submit_btn" type =button value ="Post your answer" class ="btn btn-success">
    </div>
    <div id=footer>
    <span class=white>Site Owner & developer: Ashutosh Singh, U.P., India<br>
    Contact information:</span> <a href="mailto:webwithjs@gmail.com" class=hyperlinks>Send me a letter</a>&nbsp;&nbsp;&nbsp;
    <a href='https://stackoverflow.com/users/7394522/ashutosh-k-singh' target=_blank>Stack</a>&nbsp;&nbsp;&nbsp;
    <a href='http://ashutosh-hasura.blogspot.in/' target=_blank>Blog</a>&nbsp;&nbsp;&nbsp;
    <a href='https://github.com/internetadvancedsolutions' target= _blank>Git</a>
    </div>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
      <script src = "https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    
      <!-- Include all compiled plugins (bel
      ow), or include individual files as needed -->
      <script src = "//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>

      <script >
    
                                         <!-- ON PAGE LOAD  -->
                                        
                                         <!-- LOADING ANSWERS -->
              
    var question_id=${question_id};
     var all_cookies;
     var user_id;
     var user_name;
    
         
    window.onload=function() {
    var d =new Date();
    var date_time= d.toDateString();
    document.getElementById("date").innerHTML=date_time;
    var request = new XMLHttpRequest();
        
     var all_answers = document.getElementById('all_answers');
    request.onreadystatechange = function () {
        if (request.readyState === XMLHttpRequest.DONE) {
            if (request.status === 200) {
          
                var content = '<ol class=left>';
                console.log(this.responseText);  // returns Arrray of Objects
                var  answers = JSON.parse(this.responseText);
                 console.log(answers);  // returns Array of JSON objects
                    for (var i=(answers.length)-1; i >=0; i--) {
                    var time= new Date(answers[i].answer_date);
                    content += "<li>"+
                   answers[i].your_answer+"<br>"
                    + "  "+"<span style=color:#fff380>"+ answers[i].user_name+"</span>"+ " - on "+time.toUTCString()
                   +" </li>";
                }
                content += "</ol>"
                all_answers.innerHTML = content;
            } else {
                all_answers.innerHTML('Please wait ...');
            }
        }
    };

    
  
     user_id=Cookies.get('user_id');
     user_name=Cookies.get('user_name');
    console.log("user_id cookie = "+  user_id);
    console.log("user_name cookie = "+ user_name);
     
    if(user_name!==undefined){
        document.getElementById("sign_out").innerHTML='<a  href="/logout.html">SIGNOUT</a>';
        document.getElementById("sign_in").innerHTML='';
        document.getElementById("welcome_msg").innerHTML="<a href=''>"+"Hello, " + " " +"<span style=color:blue>"+ user_name+"</span>"+"</a>";;
        }
        else{
        document.getElementById("sign_out").innerHTML='';
        document.getElementById("sign_in").innerHTML='<a  href="/">'+'SIGNIN/SIGNUP'+'</a>';
        document.getElementById("welcome_msg").innerHTML="";
        }
    
  
        request.open("POST", "https://data.veejay84.hasura-app.io/v1/query", true);
        request.setRequestHeader('Content-type','application/json');
        request.send(JSON.stringify({type:"select",args:{table:"your_answer", columns:["user_id","user_name",  "your_answer", "answer_date"],  where:{"answer2_question_id":question_id}}}));

            <!-- LOADING QUESTION -->
      
                             var request1 = new XMLHttpRequest();
     var your_question = document.getElementById('your_question');
     var question_title = document.getElementById('question_title');
    request1.onreadystatechange = function () {
        if (request1.readyState === XMLHttpRequest.DONE) {
            if (request1.status === 200) {
          
                var j = question_id;
                console.log("question id = " +j);
                //console.log(JSON.parse(this.responseText));  // returns Arrray of Objects
                // var  questions = this.responseText;
                var  questions = JSON.parse(this.responseText); // returns Array of JSON objects
                console.log(questions);
                var time= new Date(questions[0].created_date);
                question_title.innerHTML= questions[0].question_title;
                 your_question.innerHTML=questions[0].your_question+"<br>"+ "  " +"<span style=color:#fff380>"+ questions[0].user_name +"</span>" + " on "+ time.toUTCString();
                
                  
                }
             else {
                your_question.innerHTML='Please wait ...loading question';
            }
        }
    }
  
         
    request1.open('POST', 'https://data.veejay84.hasura-app.io/v1/query', true);
    request1.setRequestHeader('Content-type','application/json');
    request1.send(JSON.stringify({type:"select",args:{table:"ask_question", columns:["user_id","user_name",  "your_question", "created_date","question_title"],  where:{"question_id":question_id}}}));
  
  
  
  
  
};
          
    
    
    
                               <!-- POST ANSWER -->
 
   var submit_btn= document.getElementById("submit_btn");
 
   submit_btn.onclick=function()
{   var request = new XMLHttpRequest();
        request.onreadystatechange=function()
        {  
            if(request.readyState===XMLHttpRequest.DONE && request.status===200)
            {
                  
                    setTimeout( newQuestion, 2000);
                    document.getElementById("submit_btn").value="Thanks ! answer  more";
            }
            else
            {
                    document.getElementById("submit_btn").value="Sign in/Sign up";
                  
            }
 
        }
              
        var answer_text   = document.getElementById("answer_text").value;
        console.log("your_answer= "+answer_text);
        var user_id_int= parseInt(user_id);
        request.open('POST', "https://data.veejay84.hasura-app.io/v1/query",true);
        request.withCredentials=true;
        request.setRequestHeader('Content-type','application/json');
        request.setRequestHeader('Authorization','Bearer');
        request.send(JSON.stringify({type:"insert",args:{table:"your_answer", objects:[{user_id:user_id_int,user_name:user_name, answer2_question_id:question_id,your_answer:answer_text}]}}));
        document.getElementById("submit_btn").value= "Posting...";
        console.log("user_id = "+user_id);
        console.log("user_name = "+user_name);
        console.log("question_id = "+ question_id);
        console.log("user_id_int = "+ user_id_int);
};    

function newQuestion(){
    var request = new XMLHttpRequest();
        
     var all_answers = document.getElementById('all_answers');
    request.onreadystatechange = function () {
        if (request.readyState === XMLHttpRequest.DONE) {
            if (request.status === 200) {
          
                var content = '<ol class=left>';
                console.log(this.responseText);  // returns Arrray of Objects
                var  answers = JSON.parse(this.responseText);
                 console.log(answers);  // returns Array of JSON objects
                    for (var i=(answers.length)-1; i >=0; i--) {
                    var time= new Date(answers[i].answer_date);
                    content += "<li>"+
                   answers[i].your_answer+"<br>"
                    + "  "+"<span style=color:#fff380>"+ answers[i].user_name+"</span>"+ " - on "+time.toUTCString()
                   +" </li>";
                }
                content += "</ol>"
                all_answers.innerHTML = content;
            } else {
                all_answers.innerHTML('Oops ! re-try...');
            }
        }
    };
    
        request.open("POST", "https://data.veejay84.hasura-app.io/v1/query", true);
        request.setRequestHeader('Content-type','application/json');
        request.send(JSON.stringify({type:"select",args:{table:"your_answer", columns:["user_id","user_name",  "your_answer", "answer_date"],  where:{"answer2_question_id":question_id}}}));
         all_answers.innerHTML = "<h4>"+"loading data..."+"</h4>";
}

                                      
</script> 
    
      <script src=/js.cookie.js></script>
</body>
</html>

    `;
    return answersht;
}  


app.get('/', function (req, res) {
  
    res.sendFile(path.join(__dirname, 'index.html'));
});


app.get('/:fileName', function (req, res) {
  res.sendFile(path.join(__dirname, req.params.fileName));
});

app.get('/answersheet/:question_id', function(req,res){
    res.send(answerSheet(req.params.question_id));
});

app.listen(8080, function () {
  console.log('State-of-the-Art app listening on port 8080!');
});


===============FRONT-END & SEVER-SIDE CODE    of this page :-==================

var express = require('express');
var path = require('path');
//var Pool= require('pg').Pool;
var crypto =require('crypto');


var app = express();

function answerSheet(data1){
    var question_id = data1;
    var answersht =`
    <!DOCTYPE html>
<html lang="en">
<head>

<title>State of the Art</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<link href="/main.css" rel="stylesheet" />
<link rel="icon" href="/logo.gif">  
</head>

<body id=body class=scroll>

<nav class="navbar navbar-default container">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">State-of-the-Art</a>
    </div>
    <ul class="nav navbar-nav">
      <li class="active"><a href="/">Home</a></li>
      <li><a href="/subjects.html">QUESTIONS</a></li>
      <li id="sign_in"><a href="/">SIGNIN/SIGNUP</a></li>
      <li id="welcome_msg"></li>
      <li id="sign_out"></li>
    </ul>
  </div>
</nav>

<div class="jumbotron text-center container">
 
  

    <div id=header>
    <h2>Answer Sheet <span id=date></span></h2>
    </div>
 

  
   <div id=header>
    <h2 id=question_title> </h2>
    </div>
    <span id=your_question class=white bold></span><br>
    <div id=header>
    <h2>Answers</h2>
    </div>
  
   <span id=all_answers class=black bold>
    
    </span>

        <div id=header>
    <h2>Post your answer</h2>
    </div>
    <div class=form-group  ng-app="">
  
    <textarea id= "answer_text" placeholder="Type your answer here" class=class="black form-control" ng-model="yr_answer" cols=70 rows=10 maxlength=1000></textarea>
    <hr>
    <span class="white" maxlength=70>{{yr_answer}}</span>
    <hr>
        <input id="submit_btn" type =button value ="Post answer" class ="btn btn-basic">
    </div>
    <div id=footer>
    <span class=white>Site Owner & developer: Ashutosh Singh, U.P., India<br>
    Contact information:</span> <a href="mailto:webwithjs@gmail.com" class=hyperlinks>Send me a letter</a>
    </div>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
      <script src = "https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    
      <!-- Include all compiled plugins (bel
      ow), or include individual files as needed -->
      <script src = "//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>

      <script >
    
                                         <!-- ON PAGE LOAD  -->
              
    var question_id=${question_id};
     var all_cookies;
     var user_id;
     var user_name;
    
    
    
    window.onload=function() {
    var d =new Date();
    var date_time= d.toDateString();
    document.getElementById("date").innerHTML=date_time;
    var request = new XMLHttpRequest();
        
     var all_answers = document.getElementById('all_answers');
    request.onreadystatechange = function () {
        if (request.readyState === XMLHttpRequest.DONE) {
            if (request.status === 200) {
          
                var content = '<ul>';
                console.log(this.responseText);  // returns Arrray of Objects
                var  answers = JSON.parse(this.responseText);
                 console.log(answers);  // returns Array of JSON objects
                    for (var i=(answers.length)-1; i >=0; i--) {
                    var time= new Date(answers[i].answer_date);
                    content += "<li>"+
                   answers[i].your_answer+"<br>"
                    + "by "+ answers[i].user_name+ " - on "+time.toUTCString()
                   +" </li>";
                }
                content += "</ul>"
                all_answers.innerHTML = content;
            } else {
                all_answers.innerHTML('Please wait ...');
            }
        }
    };

    
    // all_cookies=Cookies.get();
     user_id=Cookies.get('user_id');
     user_name=Cookies.get('user_name');
    //console.log("all cookies = "+ all_cookies);
    console.log("user_id cookie = "+  user_id);
    console.log("user_name cookie = "+ user_name);
     
    if(user_name!==undefined){
        document.getElementById("sign_out").innerHTML='<a  href="/logout.html">SIGNOUT</a>';
        document.getElementById("sign_in").innerHTML='';
        document.getElementById("welcome_msg").innerHTML="<a href=''>"+"WELCOME! " + " " +"<span style=color:blue>"+ user_name+"</span>"+"</a>";;
        }
        else{
        document.getElementById("sign_out").innerHTML='';
        document.getElementById("sign_in").innerHTML='<a  href="/">'+'SIGNIN/SIGNUP'+'</a>';
        document.getElementById("welcome_msg").innerHTML="";
        }
    
  
        request.open("POST", "https://data.veejay84.hasura-app.io/v1/query", true);
        //request.withCredentials=true;
        request.setRequestHeader('Content-type','application/json');
        //request.setRequestHeader('Authorization','Bearer');
        request.send(JSON.stringify({type:"select",args:{table:"your_answer", columns:["user_id","user_name",  "your_answer", "answer_date"],  where:{"answer2_question_id":question_id}}}));
        //request.send(null);
  

};
          
    
    
    
                                                               <!-- POST ANSWER -->
 
   var submit_btn= document.getElementById("submit_btn");
 
   submit_btn.onclick=function()
{   var request = new XMLHttpRequest();
        request.onreadystatechange=function()
        {  
            if(request.readyState===XMLHttpRequest.DONE && request.status===200)
            {
                    document.getElementById("submit_btn").value="Success ! Refresh page";
            }
            else
            {
                    document.getElementById("submit_btn").value="Sign in/Sign up";
                    //alert("Sign in or sign up");
            }
 
        }
              
        var answer_text   = document.getElementById("answer_text").value;
        console.log("your_answer= "+answer_text);
        var user_id_int= parseInt(user_id);
        request.open('POST', "https://data.veejay84.hasura-app.io/v1/query",true);
        request.withCredentials=true;
        request.setRequestHeader('Content-type','application/json');
        request.setRequestHeader('Authorization','Bearer');
        request.send(JSON.stringify({type:"insert",args:{table:"your_answer", objects:[{user_id:user_id_int,user_name:user_name, answer2_question_id:question_id,your_answer:answer_text}]}}));
        document.getElementById("submit_btn").value= "Please wait...";
        console.log("user_id = "+user_id);
        console.log("user_name = "+user_name);
        console.log("question_id = "+ question_id);
        console.log("user_id_int = "+ user_id_int);
};    

                    <!--LOAD QUESTION -->

    var body= document.getElementById('body');
    body.onmouseenter= function(){
         var request1 = new XMLHttpRequest();
     var your_question = document.getElementById('your_question');
     var question_title = document.getElementById('question_title');
    request1.onreadystatechange = function () {
        if (request1.readyState === XMLHttpRequest.DONE) {
            if (request1.status === 200) {
          
                var j = question_id;
                console.log("question id = " +j);
                //console.log(JSON.parse(this.responseText));  // returns Arrray of Objects
                // var  questions = this.responseText;
                var  questions = JSON.parse(this.responseText); // returns Array of JSON objects
                console.log(questions);
                var time= new Date(questions[0].created_date);
                question_title.innerHTML= questions[0].question_title;
                 your_question.innerHTML=questions[0].your_question+"<br>"+ " by " + questions[0].user_name + " on "+ time.toUTCString();
                
                  
                }
             else {
                your_question.innerHTML='Please wait ...loading question';
            }
        }
    }
  
         
    request1.open('POST', 'https://data.veejay84.hasura-app.io/v1/query', true);
    request1.setRequestHeader('Content-type','application/json');
    request1.send(JSON.stringify({type:"select",args:{table:"ask_question", columns:["user_id","user_name",  "your_question", "created_date","question_title"],  where:{"question_id":question_id}}}));
  
  
    };


  
                  
</script> 
    
      <script src=/js.cookie.js></script>
</body>
</html>

    `;
    return answersht;
}  


app.get('/', function (req, res) {
  
    res.sendFile(path.join(__dirname, 'index.html'));
});


app.get('/:fileName', function (req, res) {
  res.sendFile(path.join(__dirname, req.params.fileName));
});

app.get('/answersheet/:question_id', function(req,res){
    res.send(answerSheet(req.params.question_id));
});

app.listen(8080, function () {
  console.log('State-of-the-Art app listening on port 8080!');
});
at

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)

Derivatives stock list at NSE

Complete FNO stock list at NSE. ABB India Ltd ACC Ltd APL Apollo Tubes Ltd AU Small Finance Bank Ltd Aarti Industries Ltd Abbott India Ltd A...