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)

Sacred Thought

5 May 2024 Hari Om Verse 50-51, chapter two:  In this chapter two Shree krishna explains a simple way of living. Free from desires and void ...