| {% extends "bootstrap/base.html" %} |
| {% block metas %} |
| <meta charset="utf-8"> |
| <meta http-equiv="X-UA-Compatible" content="IE=edge"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| {% endblock %} |
| |
| {% block styles %} |
| <!-- Latest compiled and minified CSS --> |
| <link rel="stylesheet" href="static/bootstrap/css/bootstrap.min.css"> |
| |
| <!-- Optional theme --> |
| <link rel="stylesheet" href="static/bootstrap/css/bootstrap-theme.min.css"> |
| {% endblock %} |
| {% block scripts %} |
| <!-- Latest compiled and minified JavaScript --> |
| <script src="static/jquery.min.js"></script> |
| |
| <!-- Latest compiled and minified JavaScript --> |
| <script src="static/bootstrap/js/bootstrap.min.js"></script> |
| |
| <script type="text/javascript"> |
| $('#login-modal').on('shown.bs.modal', function () { |
| $('#username').focus(); |
| }); |
| </script> |
| {% endblock %} |
| {% block title %}Simple Bookstore App{% endblock %} |
| {% block content %} |
| |
| <nav class="navbar navbar-inverse navbar-static-top"> |
| <div class="container"> |
| <div class="navbar-header"> |
| <a class="navbar-brand" href="#">BookInfo Sample</a> |
| </div> |
| {% if user: %} |
| <p class="navbar-text navbar-right"> |
| <i class="glyphicon glyphicon-user" aria-hidden="true"></i> |
| <span style="padding-left: 5px;">{{ user }} ( <a href="logout">sign out</a> )</span> |
| </p> |
| {% else %} |
| <button type="button" class="btn btn-default navbar-btn navbar-right" data-toggle="modal" href="#login-modal">Sign |
| in</button> |
| {% endif %} |
| </div> |
| </nav> |
| |
| <!--- |
| <div class="navbar navbar-inverse navbar-fixed-top"> |
| <div class="container"> |
| <div class="navbar-header pull-left"> |
| <a class="navbar-brand" href="#">Microservices Fabric BookInfo Demo</a> |
| </div> |
| <div class="navbar-header pull-right"> |
| <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> |
| <span class="icon-bar"></span> |
| <span class="icon-bar"></span> |
| <span class="icon-bar"></span> |
| </button> |
| </div> |
| <div class="navbar-collapse collapse"> |
| {% if user %} |
| <a href="logout"><button type="button" class="btn btn-default navbar-btn pull-right">Sign out</button></a> |
| <p class="navbar-text pull-right">Signed in as {{ user }}</p> |
| {% else %} |
| <button type="button" class="btn btn-default navbar-btn pull-right" data-toggle="modal" data-target="#login-modal">Sign in</button> |
| {% endif %} |
| </div> |
| </div> |
| </div> |
| --> |
| |
| <div id="login-modal" class="modal fade" role="dialog"> |
| <div class="modal-dialog"> |
| <div class="modal-content"> |
| <div class="modal-header"> |
| <button type="button" class="close" data-dismiss="modal">×</button> |
| <h4 class="modal-title">Please sign in</h4> |
| </div> |
| <div class="modal-body"> |
| <form method="post" action='login' name="login_form"> |
| <p><input type="text" class="form-control" name="username" id="username" placeholder="User Name"></p> |
| <p><input type="password" class="form-control" name="passwd" placeholder="Password"></p> |
| <p> |
| <button type="submit" class="btn btn-primary">Sign in</button> |
| <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button> |
| </p> |
| </form> |
| </div> |
| </div> |
| |
| </div> |
| </div> |
| |
| <div class="container-fluid"> |
| <div class="row"> |
| <div class="col-md-12"> |
| <h3 class="text-center text-primary">{{ product.title }}</h3> |
| {% autoescape false %} |
| <p>Summary: {{ product.descriptionHtml }}</p> |
| {% endautoescape %} |
| </div> |
| </div> |
| |
| <div class="row"> |
| <div class="col-md-6"> |
| {% if detailsStatus == 200: %} |
| <h4 class="text-center text-primary">Book Details</h4> |
| <dl> |
| <dt>Type:</dt>{{ details.type }} |
| <dt>Pages:</dt>{{ details.pages }} |
| <dt>Publisher:</dt>{{ details.publisher }} |
| <dt>Language:</dt>{{ details.language }} |
| <dt>ISBN-10:</dt>{{ details['ISBN-10'] }} |
| <dt>ISBN-13:</dt>{{ details['ISBN-13'] }} |
| </dl> |
| {% else %} |
| <h4 class="text-center text-primary">Error fetching product details!</h4> |
| {% if details: %} |
| <p>{{ details.error }}</p> |
| {% endif %} |
| {% endif %} |
| </div> |
| |
| <div class="col-md-6"> |
| {% if reviewsStatus == 200: %} |
| <h4 class="text-center text-primary">Book Reviews</h4> |
| {% for review in reviews.reviews %} |
| <blockquote> |
| <p>{{ review.text }}</p> |
| <small>{{ review.reviewer }}</small> |
| {% if review.rating: %} |
| {% if review.rating.stars: %} |
| <font color="{{ review.rating.color }}"> |
| <!-- full stars: --> |
| {% for n in range(review.rating.stars) %} |
| <span class="glyphicon glyphicon-star"></span> |
| {% endfor %} |
| <!-- empty stars: --> |
| {% for n in range(5 - review.rating.stars) %} |
| <span class="glyphicon glyphicon-star-empty"></span> |
| {% endfor %} |
| </font> |
| {% elif review.rating.error: %} |
| <p><i>{{ review.rating.error }}</i></p> |
| {% endif %} |
| {% endif %} |
| </blockquote> |
| {% endfor %} |
| {% else %} |
| <h4 class="text-center text-primary">Error fetching product reviews!</h4> |
| {% if reviews: %} |
| <p>{{ reviews.error }}</p> |
| {% endif %} |
| {% endif %} |
| </div> |
| </div> |
| </div> |
| {% endblock %} |