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)

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 ...