bookshop/app/vue/index.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'>

    <form class="user" @submit.prevent="login">
        <div v-if="user">
            <div v-if="user.tenant">Tenant: {{ user.tenant }}</div>
            <div> User: {{ user.id }}</div>
            <div>Locale: {{ user.locale }}</div>
        </div>
        <div v-else>
            <input type="submit" value="Login" class="muted-button">
            <!-- <a href="/user/login()">Login</a> -->
        </div>
    </form>

    <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>
            &nbsp;&nbsp; {{ 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>