istio.io/istio@v0.0.0-20240520182934-d79c90f27776/samples/bookinfo/src/productpage/templates/productpage.html (about)

     1  {% extends "bootstrap/base.html" %}
     2  {% block metas %}
     3  <meta charset="utf-8">
     4  <meta http-equiv="X-UA-Compatible" content="IE=edge">
     5  <meta name="viewport" content="width=device-width, initial-scale=1.0">
     6  {% endblock %}
     7  
     8  {% block styles %}
     9  <!-- Latest compiled and minified CSS -->
    10  <link rel="stylesheet" href="static/bootstrap/css/bootstrap.min.css">
    11  
    12  <!-- Optional theme -->
    13  <link rel="stylesheet" href="static/bootstrap/css/bootstrap-theme.min.css">
    14  {% endblock %}
    15  {% block scripts %}
    16  <!-- Latest compiled and minified JavaScript -->
    17  <script src="static/jquery.min.js"></script>
    18  
    19  <!-- Latest compiled and minified JavaScript -->
    20  <script src="static/bootstrap/js/bootstrap.min.js"></script>
    21  
    22  <script type="text/javascript">
    23    $('#login-modal').on('shown.bs.modal', function () {
    24      $('#username').focus();
    25    });
    26  </script>
    27  {% endblock %}
    28  {% block title %}Simple Bookstore App{% endblock %}
    29  {% block content %}
    30  
    31  <nav class="navbar navbar-inverse navbar-static-top">
    32    <div class="container">
    33      <div class="navbar-header">
    34        <a class="navbar-brand" href="#">BookInfo Sample</a>
    35      </div>
    36      {% if user: %}
    37      <p class="navbar-text navbar-right">
    38        <i class="glyphicon glyphicon-user" aria-hidden="true"></i>
    39        <span style="padding-left: 5px;">{{ user }} ( <a href="logout">sign out</a> )</span>
    40      </p>
    41      {% else %}
    42      <button type="button" class="btn btn-default navbar-btn navbar-right" data-toggle="modal" href="#login-modal">Sign
    43        in</button>
    44      {% endif %}
    45    </div>
    46  </nav>
    47  
    48  <!---
    49  <div class="navbar navbar-inverse navbar-fixed-top">
    50    <div class="container">
    51      <div class="navbar-header pull-left">
    52        <a class="navbar-brand" href="#">Microservices Fabric BookInfo Demo</a>
    53      </div>
    54      <div class="navbar-header pull-right">
    55        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
    56          <span class="icon-bar"></span>
    57          <span class="icon-bar"></span>
    58          <span class="icon-bar"></span>
    59        </button>
    60      </div>
    61      <div class="navbar-collapse collapse">
    62  {% if user %}
    63        <a href="logout"><button type="button" class="btn btn-default navbar-btn pull-right">Sign out</button></a>
    64        <p class="navbar-text pull-right">Signed in as {{ user }}</p>
    65  {% else %}
    66        <button type="button" class="btn btn-default navbar-btn pull-right" data-toggle="modal" data-target="#login-modal">Sign in</button>
    67  {% endif %}
    68      </div>
    69    </div>
    70  </div>
    71  -->
    72  
    73  <div id="login-modal" class="modal fade" role="dialog">
    74    <div class="modal-dialog">
    75      <div class="modal-content">
    76        <div class="modal-header">
    77          <button type="button" class="close" data-dismiss="modal">&times;</button>
    78          <h4 class="modal-title">Please sign in</h4>
    79        </div>
    80        <div class="modal-body">
    81          <form method="post" action='login' name="login_form">
    82            <p><input type="text" class="form-control" name="username" id="username" placeholder="User Name"></p>
    83            <p><input type="password" class="form-control" name="passwd" placeholder="Password"></p>
    84            <p>
    85              <button type="submit" class="btn btn-primary">Sign in</button>
    86              <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
    87            </p>
    88          </form>
    89        </div>
    90      </div>
    91  
    92    </div>
    93  </div>
    94  
    95  <div class="container-fluid">
    96    <div class="row">
    97      <div class="col-md-12">
    98        <h3 class="text-center text-primary">{{ product.title }}</h3>
    99        {% autoescape false %}
   100        <p>Summary: {{ product.descriptionHtml }}</p>
   101        {% endautoescape %}
   102      </div>
   103    </div>
   104  
   105    <div class="row">
   106      <div class="col-md-6">
   107        {% if detailsStatus == 200: %}
   108        <h4 class="text-center text-primary">Book Details</h4>
   109        <dl>
   110          <dt>Type:</dt>{{ details.type }}
   111          <dt>Pages:</dt>{{ details.pages }}
   112          <dt>Publisher:</dt>{{ details.publisher }}
   113          <dt>Language:</dt>{{ details.language }}
   114          <dt>ISBN-10:</dt>{{ details['ISBN-10'] }}
   115          <dt>ISBN-13:</dt>{{ details['ISBN-13'] }}
   116        </dl>
   117        {% else %}
   118        <h4 class="text-center text-primary">Error fetching product details!</h4>
   119        {% if details: %}
   120        <p>{{ details.error }}</p>
   121        {% endif %}
   122        {% endif %}
   123      </div>
   124  
   125      <div class="col-md-6">
   126        {% if reviewsStatus == 200: %}
   127        <h4 class="text-center text-primary">Book Reviews</h4>
   128        {% for review in reviews.reviews %}
   129        <blockquote>
   130          <p>{{ review.text }}</p>
   131          <small>{{ review.reviewer }}</small>
   132          {% if review.rating: %}
   133          {% if review.rating.stars: %}
   134          <font color="{{ review.rating.color }}">
   135            <!-- full stars: -->
   136            {% for n in range(review.rating.stars) %}
   137            <span class="glyphicon glyphicon-star"></span>
   138            {% endfor %}
   139            <!-- empty stars: -->
   140            {% for n in range(5 - review.rating.stars) %}
   141            <span class="glyphicon glyphicon-star-empty"></span>
   142            {% endfor %}
   143          </font>
   144          {% elif review.rating.error: %}
   145          <p><i>{{ review.rating.error }}</i></p>
   146          {% endif %}
   147          {% endif %}
   148        </blockquote>
   149        {% endfor %}
   150        <dl>
   151          <dt>Reviews served by:</dt>
   152          <u>{{ reviews.podname }}</u>
   153          {% if reviews.clustername != "null" %}
   154          on cluster <u>{{ reviews.clustername }}</u>
   155          {% endif %}
   156        </dl>
   157        {% else %}
   158        <h4 class="text-center text-primary">Error fetching product reviews!</h4>
   159        {% if reviews: %}
   160        <p>{{ reviews.error }}</p>
   161        {% endif %}
   162        {% endif %}
   163      </div>
   164    </div>
   165  </div>
   166  {% endblock %}