Friday, June 9, 2017

5.1) App Screen 2 (UI + Backend integration)

Hello all!

My app
My app is powered by https://hasura.io/

screen 2

The Screen 2 of my app is the 'Questions' page, which fetches the most recent questions asked and lists them in that order in three columns. Each question title is a hyperlink, which takes the user to the Screen 3, which is the 'Answersheet' where he/she is supposed to answer to that question.

Following is the screenshot of screen 2

======================LATEST UPDATE ON 12-07-2017======================
          WITH NEW FEATURE WHICH LISTS UNANSWERED QUESTIONS SEPARATELY
                                       FROM THE ANSWERED QUESTIONS



=====================PREVIOUS UPDATED ON 21/06/17=====================

                                     SCREEN 2 - CHRONICLE LIST OF QUESTIONS


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



==================FRONT_END CODE of this screen============================

=======================LATEST UPDATES ON 12-07-2017=====================

<!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 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">
  
        <!--<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>Click on a question to answer it</h2>

</div>
<div class="container">

<div class="col-md-4">
<h2>Unanswered questions</h2>
<span id =all_questions1 class=white>
</div>
<div class="col-md-4">
<h2> Answered questions</h2>
<span id =all_questions2 class=white>
</div>
<div class="col-md-4">
<h2> Answered questions</h2>
<span id =all_questions3 class=white>
</div>

</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>
    <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>&nbsp;&nbsp;&nbsp;
</div>
   
</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 (below), or include individual files as needed -->
      <script src = "//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
        <script type="text/javascript">
        window.onload=function()
{
      
      
        var user_name = Cookies.get('user_name');
        console.log(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="";
        }
   
   
    var request = new XMLHttpRequest();
   
     var all_questions1 = document.getElementById('all_questions1');
     var all_questions2 = document.getElementById('all_questions2');
     var all_questions3 = document.getElementById('all_questions3');
    request.onreadystatechange = function ()
    {
        if (request.readyState === XMLHttpRequest.DONE)
        {
            if (request.status === 200)
            {
                var content1 = '<ol class=left>';
                var content2 = '<ol class=left>';
                var content3 = '<ol class=left>';
              
                 var orderedQuestions = JSON.parse(this.responseText);
                 var questions = orderedQuestions.result;
                 console.log(questions);
                 console.log((questions[18])[2]);
                 console.log(questions.length-1);
                for (var i= (questions.length)-1; i >=1; i--)
                {
                    //var time= new Date(questions[i].created_date);
                    content1 += "<li>"+
                    "<span style=color:white>"+(questions[i])[3]+" </span>"+" : "+"<a href=answersheet/"+(questions[i])[0]+">"+(questions[i])[6] +"..."+"</a>"+
                    "<span style=color:#fff380>"+"  "+(questions[i])[2]+"</span>"+
                    "</li>";
                }
               
                all_questions1.innerHTML = content1;
          
            }
            else{
                    all_questions2.innerHTML = 'Refresh page';
            }
            
            
        }
      
    }      
   
  
    request.open('POST', " https://data.veejay84.hasura-app.io/v1/query ", true);
    request.setRequestHeader('Content-type','application/json');
    request.send(JSON.stringify({type:"run_sql",args:{sql:"select * from ask_question where question_id not in (select answer2_question_id from your_answer) order by created_date"}}));
    all_questions2.innerHTML ='loading data...';
   
    var request1 = new XMLHttpRequest();
    request1.onreadystatechange = function ()
    {
      
        if (request1.readyState === XMLHttpRequest.DONE)
        {
            if (request1.status === 200)
            {
                var content1 = '<ol class=left>';
                var content2 = '<ol class=left>';
                var content3 = '<ol class=left>';
              
                 var orderedQuestions = JSON.parse(this.responseText);
                 var questions = orderedQuestions.result;
                 console.log(questions);
                
                 console.log((questions[18])[2]);
                 console.log(questions.length-1);
                
              
                for ( var j= (questions.length)-1; j >=(questions.length)-40; j--)
                {
                    //var time= new Date(questions[i].created_date);
                    content2 += "<li>"+
                    "<span style=color:white>"+(questions[j])[3]+"</span>"+" : "+"<a href=answersheet/"+(questions[j])[0]+">"+(questions[j])[6]+"..."+" </a>"+
                    "<span style=color:#fff380>"+"  "+ (questions[j])[2]+"</span>"+
                    "</li>";
                }
               
                all_questions2.innerHTML = content2;
              
                for (var k=(questions.length)-41; k >=1; k--)
                {
                    //var time= new Date(questions[k].created_date);
                    content3 += "<li>"+
                    "<span style=color:white> "+(questions[k])[3]+" </span>"+" : "+"<a href=answersheet/"+(questions[k])[0]+">"+(questions[k])[6]+"..."+" </a>"+
                    "<span style=color:#fff380>"+"  "+  (questions[k])[2]+"</span>"+
                    "</li>";
                }
               
                all_questions3.innerHTML = content3;
              
            }
            else{
                    all_questions2.innerHTML = 'Refresh page';
            }
            
            
        }
      
    }      
   
  
    request1.open('POST', " https://data.veejay84.hasura-app.io/v1/query ", true);
    request1.setRequestHeader('Content-type','application/json');
    request1.send(JSON.stringify({type:"run_sql",args:{sql:"select * from ask_question where question_id  in (select distinct answer2_question_id from your_answer) order by created_date"}}));
    all_questions2.innerHTML ='loading data...';
};
        </script>
        <script type="text/javascript">var d =new Date();
    var date_time= d.toDateString();
    document.getElementById("date").innerHTML=date_time;</script>
        <script type="text/javascript" src=/js.cookie.js></script>
</body>
</html>

==========================PREVIOUS UPDATE ==============================
                                                             ON 07-07-2017
========================================================================
<!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 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">
 
        <!--<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>Click on a question to answer it</h2>

</div>
<div class="container">

<div class="col-md-4">
<span id =all_questions1 class=white>
</div>
<div class="col-md-4">
<span id =all_questions2 class=white>
</div>
<div class="col-md-4">
<span id =all_questions3 class=white>
</div>

</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>
    <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>&nbsp;&nbsp;&nbsp;
</div>
  
</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 (below), or include individual files as needed -->
      <script src = "//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
        <script type="text/javascript">
        window.onload=function()
{
      
      
        var user_name = Cookies.get('user_name');
        console.log(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="";
        }
  
  
    var request = new XMLHttpRequest();
  
     var all_questions1 = document.getElementById('all_questions1');
     var all_questions2 = document.getElementById('all_questions2');
     var all_questions3 = document.getElementById('all_questions3');
    request.onreadystatechange = function ()
    {
        if (request.readyState === XMLHttpRequest.DONE)
        {
            if (request.status === 200)
            {
                var content1 = '<ol class=left>';
                var content2 = '<ol class=left>';
                var content3 = '<ol class=left>';
              
                 var orderedQuestions = JSON.parse(this.responseText);
                 var questions = orderedQuestions.result;
                
                 //console.log((questions[18])[2]);  // 5
                for (var i= (questions.length)-1; i >=(questions.length)-40; i--)
                {
                    //var time= new Date(questions[i].created_date);
                    content1 += "<li>"+
                    "<span style=color:white>"+(questions[i])[3]+" </span>"+" : "+"<a href=answersheet/"+(questions[i])[0]+">"+(questions[i])[6] +"..."+"</a>"+
                    "<span style=color:#fff380>"+"  "+(questions[i])[2]+"</span>"+
                    "</li>";
                }
              
                all_questions1.innerHTML = content1;
              
                for ( var j= (questions.length)-41; j >=(questions.length)-87; j--)
                {
                    //var time= new Date(questions[i].created_date);
                    content2 += "<li>"+
                    "<span style=color:white>"+(questions[j])[3]+"</span>"+" : "+"<a href=answersheet/"+(questions[j])[0]+">"+(questions[j])[6]+"..."+" </a>"+
                    "<span style=color:#fff380>"+"  "+ (questions[j])[2]+"</span>"+
                    "</li>";
                }
              
                all_questions2.innerHTML = content2;
              
                for (var k=(questions.length)-88; k >=1; k--)
                {
                    //var time= new Date(questions[k].created_date);
                    content3 += "<li>"+
                    "<span style=color:white> "+(questions[k])[3]+" </span>"+" : "+"<a href=answersheet/"+(questions[k])[0]+">"+(questions[k])[6]+"..."+" </a>"+
                    "<span style=color:#fff380>"+"  "+  (questions[k])[2]+"</span>"+
                    "</li>";
                }
              
                all_questions3.innerHTML = content3;
            }
            else{
                    all_questions2.innerHTML = 'Refresh page';
            }
            
            
        }
      
    }      
  
 
    request.open('POST', " https://data.veejay84.hasura-app.io/v1/query ", true);
    request.setRequestHeader('Content-type','application/json');
    request.send(JSON.stringify({type:"run_sql",args:{sql:"select * from ask_question order by created_date"}}));
    all_questions2.innerHTML ='loading data...';
};
        </script>
        <script type="text/javascript">var d =new Date();
    var date_time= d.toDateString();
    document.getElementById("date").innerHTML=date_time;</script>
        <script type="text/javascript" src=/js.cookie.js></script>
</body>
</html>
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...