b.santos/cloud-cap-samples
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Adding Vue.js apps for reviews service

Browse Source
This commit is contained in:
Daniel
2020-11-19 12:41:11 +01:00
committed by Daniel Hutzel
parent 8f01bf911e
commit dae8e96fe1
13 changed files with 198 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
bookshop/app/vue/app.js
View File

@@ -9,7 +9,7 @@ const books = new Vue ({
data: {
list: [],
book: { descr:'( click on a row to see details... )' },
book: undefined,
order: { amount:1, succeeded:'', failed:'' }
},
@@ -31,7 +31,7 @@ const books = new Vue ({
},
async submitOrder () {
const {book,order} = books, amount = parseInt (order.amount) || 1
const {book,order} = books, amount = parseInt (order.amount) || 1 // REVISIT: Okra should be less strict
try {
const res = await POST(`/submitOrder`, { amount, book: book.ID })
book.stock = res.data.stock

38
bookshop/app/vue/index.html
View File

@@ -7,22 +7,21 @@
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<style>
#books tr:hover { background: #f2f2f2; cursor: pointer; }
form { float:right; display:flex; flex-direction: row-reverse }
form #amount { width: 5em }
.is-success { color: #0d920d }
.has-error { color: #df1010 }
.hovering tr:hover td { color:cyan; background: #123; cursor: pointer; }
.rating-stars { color:teal }
.succeeded { color:teal }
.failed { color:red }
</style>
</head>
<body class="small-container", style="margin-top: 70px;">
<div id='app'>
<h1> Capire Books </h1>
<h1> {{ document.title }} </h1>
<input type="text" placeholder="Search..." @input="search">
<table id='books'>
<table id='books' class="hovering">
<thead>
<th> Book </th>
<th> Author </th>
@@ -34,29 +33,30 @@
<td>{{ book.title }}</td>
<td>{{ book.author }}</td>
<td>{{ book.genre.name }}</td>
<td style="color:teal">{{ ('★'.repeat(Math.round(book.rating))+'☆☆☆☆☆').slice(0,5) }}</td>
<td class="rating-stars">
{{ ('★'.repeat(Math.round(book.rating))+'☆☆☆☆☆').slice(0,5) }}
</td>
<td>{{ book.currency.symbol }} {{ book.price }}</td>
</tr>
</table>
<div v-if="book.title">
<div v-if="book">
<img v-bind:src="book.image" alt=""/>
</div>
<div v-if="book.title">
<label style="text-align:right">
<span class="is-success"> {{ order.succeeded }} </span>
<span class="has-error"> {{ order.failed }} </span>
<span class="succeeded"> {{ order.succeeded }} </span>
<span class="failed"> {{ order.failed }} </span>
&nbsp;&nbsp; {{ book.stock }} in stock
</label>
<form @submit.prevent="submitOrder">
<input type="number" id="amount" v-model="order.amount" v-bind:class="{ 'has-error': order.failed }">
<form @submit.prevent="submitOrder" style="float:right; display:flex; flex-direction:row-reverse">
<input type="number" v-model="order.amount" 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>
<h4> {{ book.title }} </h4>
<p> {{ book.descr }} </p>
</div>
</body>