Friday, June 9, 2017

5.2) Updates to 5.1, 3.2 and 3.3

Hi all,

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

This is the latest update to 5.1 (Screen 2 - QUESTIONS)



========================CODE SCREEN =======================

<!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 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">
  
        <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>
</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>
        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=''>"+"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="";
        }
   
   
    var request = new XMLHttpRequest();
    //var questions;
     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]);  // 5
                for (var i= (questions.length)-1; i >=(questions.length)-30; i--) {
                    //var time= new Date(questions[i].created_date);
                    content1 += `<li>
                    <span style=color:#fff380> ${(questions[i])[3]} </span> :&nbsp;<a href="answersheet/${(questions[i])[0]}">${(questions[i])[6]} </a>
                    <span style=color:#fff380>by &nbsp;  ${(questions[i])[2]}</span>&nbsp;
                    </li>`;
                }
                content1 += "</ol>"
                all_questions1.innerHTML = content1;
               
                for ( var j= (questions.length)-31; j >=(questions.length)-60; j--) {
                    var time= new Date(questions[i].created_date);
                    content2 += `<li>
                    <span style=color:#fff380> ${(questions[j])[3]} </span> :&nbsp;<a href="answersheet/${(questions[j])[0]}">${(questions[j])[6]} </a>
                    <span style=color:#fff380>by &nbsp;  ${(questions[j])[2]}</span>&nbsp;
                    </li>`;
                }
                content2 += "</ol>"
                all_questions2.innerHTML = content2;
                console.log( questions.length-61);
                for (var k=(questions.length)-63; k >=0; k--) {
                    var time= new Date(questions[k].created_date);
                    content3 += `<li>
                    <span style=color:#fff380> ${(questions[k])[3]} </span> :&nbsp;<a href="answersheet/${(questions[k])[0]}">${(questions[k])[6]} </a>
                    <span style=color:#fff380>by &nbsp;  ${(questions[k])[2]}</span>&nbsp;
                    </li>`;
                }
                content3 += "</ol>"
                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"}}));
   
  
   // request.open('GET', 'https://data.veejay84.hasura-app.io/v1/template/questionlist', true);
    //request.send(null);
    }
        </script>
        <script>var d =new Date();
    var date_time= d.toDateString();
    document.getElementById("date").innerHTML=date_time;</script>
        <script src=/js.cookie.js></script>
</body>
</html>


Thanks

No comments:

Post a Comment

इश्क में ग़ैरत-ए-जज़्बात ने रोने ना दिया - सुदर्शन फ़ाकिर

 इश्क में ग़ैरत-ए-जज़्बात ने रोने ना दिया वरना क्या बात थी किस बात ने रोने ना दिया आप कहते थे कि रोने से ना बदलेंगे नसीब उमर भर आप की इस बात...