From 6ea8ce6f5a1bb8f6874132ad77f690b990429f0a Mon Sep 17 00:00:00 2001
From: sandeepsajan0 <sandeepsajan0@gmail.com>
Date: Sun, 9 Sep 2018 11:15:53 +0530
Subject: [PATCH 1/2] update endpoints and change connect to disconnect

---
 app.py               |  6 ++--
 templates/index.html | 36 +++++++++++++------
 templates/query.html | 86 ++++++++++++++++++++++++++++++++++++++++++++
 3 files changed, 114 insertions(+), 14 deletions(-)
 create mode 100644 templates/query.html

diff --git a/app.py b/app.py
index c7f487e..50f6fff 100644
--- a/app.py
+++ b/app.py
@@ -34,7 +34,7 @@ def enter_url():
             check_url = str.encode(url)
             querying_mechanism.check_url_exist(check_url,facades)
             print(url,endpoints)
-            return render_template("index.html", apidoc = endpoints, history=history)
+            return render_template("query.html", apidoc = endpoints, history=history)
 #        elif 'query' in request.form:
 #            query = request.form['query']
 #            print(query)
@@ -46,7 +46,7 @@ def enter_url():
 def enter_query():
     global history
     if request.method == 'GET':
-        return render_template("index.html")
+        return render_template("query.html")
     if request.method == 'POST':
         if 'query' in request.form:
             print("here")
@@ -58,7 +58,7 @@ def enter_query():
                 history_rev.pop()
                 history = history_rev[::-1]
             output = facades.user_query(query)
-            return render_template("index.html", apidoc = endpoints, query_output = output, history=history_rev)
+            return render_template("query.html", apidoc = endpoints, query_output = output, history=history_rev)
 
 
 if __name__ == "__main__":
diff --git a/templates/index.html b/templates/index.html
index 177975d..0e8d7da 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -26,16 +26,17 @@ <h3 align="center">Satellite Assemblying with Smart Clients</h3>
           <input type="submit" style="margin-left: 6px" class="btn btn-success" value="Connect" />
         </div>
       </form>
-
-      <form action="http://localhost:5000/query" method="post">
-        <div id="url" class="input-group mb-3 col-sm">
-          <div class="input-group-prepend">
-            <span class="input-group-text" id="inputGroup-sizing-default">Query</span>
-          </div>
-          <input id="url-input" name="query" placeholder="Enter Query Here" type="text" class="form-control" aria-label="Default" />
-          <input type="submit" value="Send Query" style="margin-left: 6px" class="btn btn-success" />
-        </div>
-      </form>
+      
+
+<!--      <form action="http://localhost:5000/query" method="post">-->
+<!--        <div id="url" class="input-group mb-3 col-sm">-->
+<!--          <div class="input-group-prepend">-->
+<!--            <span class="input-group-text" id="inputGroup-sizing-default">Query</span>-->
+<!--          </div>-->
+<!--          <input id="url-input1" name="query" placeholder="Enter Query Here" type="text" class="form-control" aria-label="Default" />-->
+<!--          <input id="submit_query" type="submit" value="Send Query" style="margin-left: 6px" class="btn btn-success" />-->
+<!--        </div>-->
+<!--      </form>-->
     </div>
 
   </div>
@@ -132,11 +133,24 @@ <h4 class="panel-title">
       </div>
     </div>
   </div>-->
+<!--  <script>-->
+<!--    function put_input(name){-->
+<!--        var input = document.getElementById('url-input1');-->
+<!--        if (name.match("Collection")) {-->
+<!--            name = name + " members"-->
+<!--        }-->
+<!--        else{-->
+<!--        name = name+" properties"-->
+<!--        }-->
+<!--        input.value = name-->
+<!--    }-->
+<!--  </script>-->
   <div class = "row">
     <div class="col-sm-4" id="entrypoint-body" style="height:80%;">
       {% for element in apidoc %}
         {% if element != "@type" and element != "@id" and element != "@context" %}
-          <a href = ''><p>{{ element }} </p></a>
+
+          <p onClick = "put_input('{{element}}')" style="color: #0000FF;">{{element}}</p>
         {% endif %}
       {% endfor %}</div>
     <div class="col-sm-7" id="entrypoint-body">
diff --git a/templates/query.html b/templates/query.html
new file mode 100644
index 0000000..9b57ba9
--- /dev/null
+++ b/templates/query.html
@@ -0,0 +1,86 @@
+<html>
+
+<head>
+  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
+    crossorigin="anonymous">
+
+  <link rel="stylesheet" type="text/css" href="{{ url_for('static',filename='styles/index.css') }}">
+  <title>
+    AstroDemo
+  </title>
+
+
+</head>
+
+
+<body>
+  <h1 align="center">Hydra Astrodemo</h1>
+  <h3 align="center">Satellite Assemblying with Smart Clients</h3>
+  <div class="container">
+    <div class="row">
+      <form method="post" action="http://localhost:5000">
+        <div id="url" class="input-group mb-3 col-sm">
+          <div class="input-group-prepend">
+            <span class="input-group-text" id="inputGroup-sizing-default">URL</span>
+          </div>
+
+          <input onclick="window.location.href='http://localhost:5000';" style="margin-left: 6px" class="btn btn-success" value="DisConnect" />
+        </div>
+      </form>
+
+    <form name = "query_submit" action="http://localhost:5000/query" method="post">
+        <div id="url" class="input-group mb-3 col-sm">
+          <div class="input-group-prepend">
+            <span class="input-group-text" id="inputGroup-sizing-default">Query</span>
+          </div>
+          <input id="url-input1" name="query" placeholder="Enter Query Here" type="text" class="form-control" aria-label="Default" />
+          <input id="submit_query" type="submit" value="Send Query" style="margin-left: 6px" class="btn btn-success" />
+        </div>
+    </form>
+    
+    </div>
+
+  </div>
+  <div class="row">
+    <div class="col-sm-4" id="endpoints-header">Endpoints</div>
+    <div class="col-sm-7" id="output-header">OutPut</div>
+  </div>
+  
+  
+  <script>
+    function put_input(name){
+        var input = document.getElementById('url-input1');
+        if (name.match("Collection")) {
+            name = name + " members"
+        }
+        else{
+        name = "class"+name+" properties"
+        }
+        input.value = name
+        document.query_submit.submit();
+
+    }
+  </script>
+  <div class = "row">
+    <div class="col-sm-4" id="entrypoint-body" style="height:80%;">
+      {% for element in apidoc %}
+        {% if element != "@type" and element != "@id" and element != "@context" %}
+
+          <p onClick = "put_input('{{element}}')" style="color: #0000FF;"  >{{element}}</p>
+        {% endif %}
+      {% endfor %}</div>
+    <div class="col-sm-7" id="entrypoint-body">
+      {% if query_output %}
+        {% for element in query_output %}
+          <p>{{element}}</p>
+        {% endfor %}
+      {% else %}
+        <p>{{query_output}}</p>
+      {% endif %}
+    </div>
+  </div>
+  <br><br>
+  <div class="col-sm-4" style="background-color: bisque; text-align: center; font-size: x-large; margin-right: 12px; height: 40px;">History</div>
+  <div class="col-sm-4" id="output-body">{{history}}</div>
+  
+</body>

From af0cb890903af16dc2d9e00dc57fec1f9c0046b6 Mon Sep 17 00:00:00 2001
From: sandeepsajan0 <sandeepsajan0@gmail.com>
Date: Sat, 29 Sep 2018 22:42:45 +0530
Subject: [PATCH 2/2] improve UI and change endpoints and history
 functionalities

---
 app.py                  |  2 ++
 static/styles/index.css |  3 +++
 templates/index.html    | 12 ++++++------
 templates/query.html    | 37 ++++++++++++++++++++++---------------
 4 files changed, 33 insertions(+), 21 deletions(-)

diff --git a/app.py b/app.py
index 50f6fff..8817b2d 100644
--- a/app.py
+++ b/app.py
@@ -13,6 +13,8 @@
     
 @app.route('/', methods= ['GET','POST'])
 def enter_url():
+    global history
+    history = []
     if request.method == 'GET':
         # print(render_template("index.html"))
         return render_template("index.html")
diff --git a/static/styles/index.css b/static/styles/index.css
index 4b596da..3bfa979 100644
--- a/static/styles/index.css
+++ b/static/styles/index.css
@@ -18,3 +18,6 @@
   margin-right: 12px;
   margin-top: 10px;
 }
+.row {
+  margin-right: 0px;
+}
diff --git a/templates/index.html b/templates/index.html
index 0e8d7da..e905c3b 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -16,9 +16,9 @@
   <h1 align="center">Hydra Astrodemo</h1>
   <h3 align="center">Satellite Assemblying with Smart Clients</h3>
   <div class="container">
-    <div class="row">
+    <div class="row" style="margin-right: 0px;">
       <form method="post">
-        <div id="url" class="input-group mb-3 col-sm">
+        <div id="url" class="input-group mb-3 col-sm" style="margin-left:240px;">
           <div class="input-group-prepend">
             <span class="input-group-text" id="inputGroup-sizing-default">URL</span>
           </div>
@@ -40,7 +40,7 @@ <h3 align="center">Satellite Assemblying with Smart Clients</h3>
     </div>
 
   </div>
-  <div class="row">
+  <div class="row" style="margin-right: 0px; margin-left:50px;">
     <div class="col-sm-4" id="endpoints-header">Endpoints</div>
     <div class="col-sm-7" id="output-header">OutPut</div>
   </div>
@@ -145,7 +145,7 @@ <h4 class="panel-title">
 <!--        input.value = name-->
 <!--    }-->
 <!--  </script>-->
-  <div class = "row">
+  <div class = "row" style="margin-right: 0px; margin-left:50px;">
     <div class="col-sm-4" id="entrypoint-body" style="height:80%;">
       {% for element in apidoc %}
         {% if element != "@type" and element != "@id" and element != "@context" %}
@@ -153,7 +153,7 @@ <h4 class="panel-title">
           <p onClick = "put_input('{{element}}')" style="color: #0000FF;">{{element}}</p>
         {% endif %}
       {% endfor %}</div>
-    <div class="col-sm-7" id="entrypoint-body">
+    <div class="col-sm-7" id="entrypoint-body"style="margin-left:16px">
       {% if query_output %}
         {% for element in query_output %}
           <p>{{element}}</p>
@@ -164,7 +164,7 @@ <h4 class="panel-title">
     </div>
   </div>
   <br><br>
-  <div class="col-sm-4" style="background-color: bisque; text-align: center; font-size: x-large; margin-right: 12px; height: 40px;">History</div>
+  <div class="col-12" style="background-color: bisque; text-align: center; font-size: x-large; margin-right: 40px; height: 30px;">History</div>
   <div class="col-sm-4" id="output-body">{{history}}</div>
 
 
diff --git a/templates/query.html b/templates/query.html
index 9b57ba9..dd8f715 100644
--- a/templates/query.html
+++ b/templates/query.html
@@ -17,9 +17,9 @@
   <h1 align="center">Hydra Astrodemo</h1>
   <h3 align="center">Satellite Assemblying with Smart Clients</h3>
   <div class="container">
-    <div class="row">
+    <div class="row" style="margin-right: 0px;">
       <form method="post" action="http://localhost:5000">
-        <div id="url" class="input-group mb-3 col-sm">
+        <div id="url" class="input-group mb-3 col-sm" style="margin-left:75px;">
           <div class="input-group-prepend">
             <span class="input-group-text" id="inputGroup-sizing-default">URL</span>
           </div>
@@ -29,7 +29,7 @@ <h3 align="center">Satellite Assemblying with Smart Clients</h3>
       </form>
 
     <form name = "query_submit" action="http://localhost:5000/query" method="post">
-        <div id="url" class="input-group mb-3 col-sm">
+        <div id="url" class="input-group mb-3 col-sm" style="margin-left:0px">
           <div class="input-group-prepend">
             <span class="input-group-text" id="inputGroup-sizing-default">Query</span>
           </div>
@@ -41,35 +41,37 @@ <h3 align="center">Satellite Assemblying with Smart Clients</h3>
     </div>
 
   </div>
-  <div class="row">
+  <div class="row" style="margin-right:0px; margin-left:50px;">
     <div class="col-sm-4" id="endpoints-header">Endpoints</div>
     <div class="col-sm-7" id="output-header">OutPut</div>
   </div>
   
   
   <script>
-    function put_input(name){
+    function put_input(name,type){
         var input = document.getElementById('url-input1');
-        if (name.match("Collection")) {
-            name = name + " members"
-        }
-        else{
-        name = "class"+name+" properties"
+        if (type == 'endpoint'){
+            if (name.match("Collection")) {
+                name = name + " members"
+            }
+            else{
+            name = "class"+name+" properties"
+            }
         }
         input.value = name
         document.query_submit.submit();
 
     }
   </script>
-  <div class = "row">
+  <div class = "row" style="margin-right: 0px; margin-left:50px;">
     <div class="col-sm-4" id="entrypoint-body" style="height:80%;">
       {% for element in apidoc %}
         {% if element != "@type" and element != "@id" and element != "@context" %}
 
-          <p onClick = "put_input('{{element}}')" style="color: #0000FF;"  >{{element}}</p>
+          <p title = "@id: '{{element}} members'" onClick = "put_input('{{element}}','endpoint')" style="color: #0000FF;cursor: pointer;">{{element}}</p>
         {% endif %}
       {% endfor %}</div>
-    <div class="col-sm-7" id="entrypoint-body">
+    <div class="col-sm-7" id="entrypoint-body" style="margin-left: 16px">
       {% if query_output %}
         {% for element in query_output %}
           <p>{{element}}</p>
@@ -80,7 +82,12 @@ <h3 align="center">Satellite Assemblying with Smart Clients</h3>
     </div>
   </div>
   <br><br>
-  <div class="col-sm-4" style="background-color: bisque; text-align: center; font-size: x-large; margin-right: 12px; height: 40px;">History</div>
-  <div class="col-sm-4" id="output-body">{{history}}</div>
+  <div class="col-12" style="background-color: bisque; text-align: center; font-size: x-large; margin-right: 40px; height: 30px;">History</div>
+  <div class="col-12" id="output-body">
+    {% for elt in history %}
+      <p title="@id:'{{elt}}'" onClick = "put_input('{{elt}}','history')" style="color: #0000FF;cursor: pointer;">{{elt}}</p>
+      
+    {% endfor %}
+  </div>
   
 </body>