returning subfolders names

2020-12-23 13:38:09 +03:00
parent 9d28ca9844
commit 9abeb67d82
41 changed files with 0 additions and 0 deletions
--- a/bookshop/app/vue/app.js
+++ b/bookshop/app/vue/app.js
@@ -0,0 +1,48 @@
+/* global Vue axios */ //> from vue.html
+const $ = sel => document.querySelector(sel)
+const GET = (url) => axios.get('/browse'+url)
+const POST = (cmd,data) => axios.post('/browse'+cmd,data)
+
+const books = new Vue ({
+
+    el:'#app',
+
+    data: {
+        list: [],
+        book: undefined,
+        order: { amount:1, succeeded:'', failed:'' }
+    },
+
+    methods: {
+
+        search: ({target:{value:v}}) => books.fetch(v && '&$search='+v),
+
+        async fetch (etc='') {
+            const {data} = await GET(`/ListOfBooks?$expand=genre,currency${etc}`)
+            books.list = data.value
+        },
+
+        async inspect (eve) {
+            const book = books.book = books.list [eve.currentTarget.rowIndex-1]
+            const res = await GET(`/Books/${book.ID}?$select=descr,stock,image`)
+            Object.assign (book, res.data)
+            books.order = { amount:1 }
+            setTimeout (()=> $('form > input').focus(), 111)
+        },
+
+        async submitOrder () {
+            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
+                books.order = { amount, succeeded: `Successfully orderd ${amount} item(s).` }
+            } catch (e) {
+                books.order = { amount, failed: e.response.data.error.message }
+            }
+        }
+
+    }
+})
+
+// initially fill list of books
+books.fetch()
--- a/bookshop/app/vue/index.html
+++ b/bookshop/app/vue/index.html
@@ -0,0 +1,65 @@
+<!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"></script>
+    <style>
+        .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> {{ document.title }} </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) }}
+            </td>
+            <td>{{ 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.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>
+
+</div>
+</body>
+
+<script src="app.js"></script>
+</html>