bb55c432c9
Show current user name, locale and tenant (if available). Useful in deployments w/ real auth and tenant contexts.
73 lines
2.4 KiB
HTML
73 lines
2.4 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
|
|
<head>
|
|
<title> Capire Books </title>
|
|
<link rel="stylesheet" href="https://unpkg.com/primitive-ui/dist/css/main.css">
|
|
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/vue@3/dist/vue.global.prod.js"></script>
|
|
<style>
|
|
.hovering tr:hover td { color:cyan; background: #123; cursor: pointer; }
|
|
.rating-stars { color:teal }
|
|
.succeeded { color:teal }
|
|
.failed { color:red }
|
|
.user {text-align: end; color: grey;}
|
|
</style>
|
|
</head>
|
|
|
|
<body class="small-container", style="margin-top: 70px;">
|
|
<div id='app'>
|
|
|
|
<div v-if="user" class="user">
|
|
<div>User: {{ user.ID || 'anonymous' }}</div>
|
|
<div>Locale: {{ user.locale }}</div>
|
|
<div v-if="user.tenant">Tenant: {{ user.tenant }}</div>
|
|
</div>
|
|
|
|
<h1> Capire Books </h1>
|
|
|
|
<input type="text" placeholder="Search..." @input="search">
|
|
|
|
<table id='books' class="hovering">
|
|
<thead>
|
|
<th> Book </th>
|
|
<th> Author </th>
|
|
<th> Genre </th>
|
|
<th> Rating </th>
|
|
<th> Price </th>
|
|
</thead>
|
|
<tr v-for="book in list" v-bind:id="book.ID" v-on:click="inspect">
|
|
<td>{{ book.title }}</td>
|
|
<td>{{ book.author }}</td>
|
|
<td>{{ book.genre.name }}</td>
|
|
<td class="rating-stars">
|
|
{{ ('★'.repeat(Math.round(book.rating))+'☆☆☆☆☆').slice(0,5) }} ({{ book.numberOfReviews }})
|
|
</td>
|
|
<td>{{ book.currency && book.currency.symbol }} {{ book.price }}</td>
|
|
</tr>
|
|
</table>
|
|
|
|
<div v-if="book">
|
|
<img v-bind:src="book.image" alt=""/>
|
|
<label style="text-align:right">
|
|
<span class="succeeded"> {{ order.succeeded }} </span>
|
|
<span class="failed"> {{ order.failed }} </span>
|
|
{{ book.stock }} in stock
|
|
</label>
|
|
<form @submit.prevent="submitOrder" style="float:right; display:flex; flex-direction:row-reverse">
|
|
<input type="number" v-model="order.quantity" v-bind:class="{ failed: order.failed }" style="width:5em">
|
|
<input type="submit" value="Order:" class="muted-button">
|
|
</form>
|
|
<h4> {{ book.title }} </h4>
|
|
<p> {{ book.descr }} </p>
|
|
</div>
|
|
<div v-else>
|
|
( click on a row to see details... )
|
|
</div>
|
|
|
|
</div>
|
|
</body>
|
|
|
|
<script src="app.js"></script>
|
|
</html>
|