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>