v1.0.6

sganis · Sep 30, 2023 · ad1be5e · ad1be5e
1 parent 79a2f0d
commit ad1be5e
Show file tree

Hide file tree

Showing 17 changed files with 294 additions and 113 deletions.
diff --git a/frontend/dist/assets/index-566a759a.css → frontend/dist/assets/index-0d55544a.css b/frontend/dist/assets/index-566a759a.css → frontend/dist/assets/index-0d55544a.css
diff --git a/frontend/dist/assets/index-ad413fda.js b/frontend/dist/assets/index-ad413fda.js
diff --git a/frontend/dist/assets/index-c395d700.js b/frontend/dist/assets/index-c395d700.js
diff --git a/frontend/dist/index.html b/frontend/dist/index.html
@@ -4,9 +4,9 @@
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="favicon.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Hotel App</title>
-    <script type="module" crossorigin src="/assets/index-ad413fda.js"></script>
-    <link rel="stylesheet" href="/assets/index-566a759a.css">
+    <title>Pyme</title>
+    <script type="module" crossorigin src="/assets/index-c395d700.js"></script>
+    <link rel="stylesheet" href="/assets/index-0d55544a.css">
   </head>
   <body>
     <div id="app"></div>

diff --git a/frontend/index.html b/frontend/index.html
@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="favicon.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Hotel App</title>
+    <title>Pyme</title>
   </head>
   <body>
     <div id="app"></div>

diff --git a/frontend/package.json b/frontend/package.json
@@ -1,7 +1,7 @@
 {
   "name": "client",
   "private": true,
-  "version": "1.0.5",
+  "version": "1.0.6",
   "type": "module",
   "scripts": {
     "dev": "vite",

diff --git a/frontend/src/App.svelte b/frontend/src/App.svelte
@@ -16,14 +16,14 @@
   import Logout from './routes/Logout.svelte';
   import Error from './lib/Error.svelte';
   import Working from './lib/Working.svelte';
-  import ItemForm from './lib/ItemForm.svelte';
+  import Stats from './routes/Stats.svelte';
   
   
   const routes = {
       '/': Home,
       '/login': Login,
       '/logout': Logout,
-      '/add': ItemForm,
+      '/stats': Stats,
 
       // Catch-all
       '*': NotFound,

diff --git a/frontend/src/lib/ItemForm.svelte b/frontend/src/lib/ItemForm.svelte
@@ -21,18 +21,19 @@
     let url = `${API_URL}pyme/`
     let error;
     let errors = {};
-    let isModify = false;
     let manager = null;
     let today = dayjs().toDate();
 
     let customers = [];
+    let products = [];
     let currentCustomer;
+    let currentProduct;
 
-
-    let item = {
+    export let isModify;
+    export let item = {
         date: today,
         customer: '',
-        product: '',
+        product: 'A',
         quantity: 1,
         price: 0,
         paid: true,
@@ -55,6 +56,8 @@
     onMount(async () => {
         if (!manager)
             manager = new ItemManager(url);
+        products = await getProducts();
+        updatePrice();
         errors = {}
 	});
 
@@ -84,7 +87,7 @@
             return customers;
         }
         try {
-            const r = await fetch(`${API_URL}pyme/customer/?q=${q}`, {
+            const r = await fetch(`${API_URL}pyme/customers/?q=${q}`, {
                 headers: {
                     Authorization: 'Bearer ' + $state.token
                 }
@@ -102,7 +105,25 @@
         customers = []
         return customers;
     } 
-
+    const getProducts = async () => {
+        try {
+            const r = await fetch(`${API_URL}pyme/products/`, {
+                headers: {
+                    Authorization: 'Bearer ' + $state.token
+                }
+            });
+            const js = await r.json();
+            if (r.status == 200) {
+                //console.log(js);
+                customers = js;
+                return customers;
+            } 
+        }
+        catch (err) {
+            console.log(err)
+        }
+        return [];
+    } 
     const save = async () => {
         let itemToSave = JSON.parse(JSON.stringify(item))
         // convert date to string
@@ -116,15 +137,27 @@
             await manager.modify(itemToSave);
         }
         error = manager.error;
+        dispatch('saved');
     }
 
+    const remove = async () => {
+
+    }
     const handleCreate = (username) => {
         console.log('adding ', username);
         customers.unshift(username);
         customers = customers;
         return username;
     }
-
+    const updatePrice = () => {
+        console.log('updating price...');
+        for (const p of products) {
+            if (p[0]===item.product) {
+                item.price = item.quantity * Number(p[1]);
+                break;
+            }
+        }
+    }
 </script>
 
 <div class="container">
@@ -176,24 +209,21 @@
         <div class="col">
             <label for="id" class="form-label text-nowrap">Product</label>
             <select  disabled={$working}
-                class="form-select"
-                bind:value={item.product}>                
-                <option value="A">A</option>
-                <option value="B">B</option>
-                <option value="C">C</option>
-                <option value="W">W</option>
-                <option value="R">R</option>
-                <option value="T">T</option>
-                <option value="V">V</option>
-                <option value="O">Other</option>                        
+                class="form-select"                
+                bind:value={item.product}
+                on:change={updatePrice}>    
+                {#each products as p}            
+                    <option value={p[0]}>{p[0]} ({p[1]})</option>
+                {/each}
             </select>
             {#if errors.product}<small class="error">{errors.product}</small>{/if}
          </div>
         <div class="col">
-            <label for="quantity" class="form-label">Quantity</label>
+            <label for="quantity" class="form-label">Units</label>
             <input type="text" pattern="\d*" 
                 disabled={$working}
-                bind:value={item.quantity}                        
+                bind:value={item.quantity}
+                on:change={updatePrice}                        
                 class="form-control" id="quantity"
                     min="1" max="100">
             {#if errors.quantity}<small class="error">{errors.quantity}</small>{/if}
@@ -218,10 +248,30 @@
             {#if errors.price}<small class="error">{errors.price}</small>{/if}
         </div>  
     </div>
+    <div class="row">
+        <div class="col">
+            <label for="notes" class="form-label">Notes</label>
+            <input type="text"
+                disabled={$working}
+                bind:value={item.notes}
+                class="form-control" id="notes">
+        </div>  
+    </div>
     <br>
     <div class="row text-end">
         <div class="col">
-            <button class="btn btn-light w-100" 
+            {#if isModify}
+            <button class="btn btn-danger  w-100"
+                on:click={remove}
+                disabled={$working}>
+                <i class="bi-trash3"/>
+            </button>
+            {/if}
+        </div>
+        <div class="col">
+        </div>
+        <div class="col">
+            <button class="btn btn-secondary w-100" 
                 on:click={close}
                 disabled={$working}>
                 Close
@@ -236,6 +286,7 @@
         </div>
     </div>
 
+
 </form>
 </div>
 

diff --git a/frontend/src/lib/ItemTable.svelte b/frontend/src/lib/ItemTable.svelte
@@ -59,10 +59,6 @@
         class="btn btn-success  btn-width" on:click={showCreate}>
         New
     </button>
-    <button class="btn btn-danger" type="button" disabled
-        on:click={showRemove}>
-        <i class="bi-trash3"/>
-    </button>
 </div>
 <br>
 {/if}
@@ -85,7 +81,7 @@
             </thead>
             <tbody>
             {#each items as o, i}
-            <tr>
+            <tr class="clickable" on:click={()=>showModify(o)}>
                 {#each table.columns as col}
                 <td>{ o[col] || ""}</td>
                 {/each}
@@ -117,4 +113,7 @@
         content: "\2122";
         color: transparent !important;
     }
+    .clickable {
+        cursor: pointer;
+    }
 </style>
diff --git a/frontend/src/lib/StatItem.svelte b/frontend/src/lib/StatItem.svelte
@@ -0,0 +1,25 @@
+<script>
+    export let items = [];
+    export let title;
+</script>
+
+<!-- <div class="row bg-light border-bottom">
+    <div class="col h4">{title}</div>
+</div> -->
+
+<table class="table table-hover table-sm">
+    <thead  class="table-success">
+        <tr><th>{title}</th>
+            <th class="text-end">Units</th>
+            <th class="text-end">SAR</th>
+            <th class="text-end">USD</th></tr>
+    </thead>
+    {#each items as i}
+    <tbody>
+        <tr><td>{i[0]}</td>
+            <td class="text-end">{i[1]}</td>
+            <td class="text-end">{i[2]}</td>
+            <td class="text-end">{Math.round(Number(i[2]) /3.75)}</td></tr>
+    </tbody>
+    {/each}
+</table>
diff --git a/frontend/src/lib/itemManager.js b/frontend/src/lib/itemManager.js
@@ -3,10 +3,10 @@ import { push } from "svelte-spa-router";
 import { working, state, apierror } from "./store";
 
 export default class ItemManager {
-  constructor(url) {
+  constructor(url, sortcol, sortdesc) {
     this.url = url;
-    this.sortCol = "id";
-    this.sortDesc = false;
+    this.sortCol = sortcol;
+    this.sortDesc = sortdesc;
     this.searchText = "";
     this.result = [];
     this.error = "";

diff --git a/frontend/src/routes/Home.svelte b/frontend/src/routes/Home.svelte
@@ -1,6 +1,7 @@
 <script>
     import { onMount } from 'svelte';
-    import { push } from 'svelte-spa-router';
+    //import { push } from 'svelte-spa-router';
+    import dayjs from 'dayjs';
     import { API_URL, state, apierror } from '../lib/store';
     import ItemsTable from '../lib/ItemTable.svelte';
     import ItemManager from "../lib/itemManager.js"
@@ -10,24 +11,26 @@
     let isModal;
     let isModify;
     let isRemove;
-    let sortCol = 'id';
+    let sortCol = 'date';
     let sortDesc = true;
     let manager;
     let showForm = false;
     let showToolbar = true;
+    let today = dayjs().toDate();
 
     let title = "Items";
     let table = {
-        header : ['Date','Cust','Qty','Prod','Price'],
-        columns : ['date','customer','quantity','product','price'],
+        header : ['Date','Cust','Qty','Prod','Price', 'Paid'],
+        columns : ['date','customer','quantity','product','price','paid'],
+    }
+    let itemInit = {
+        date: today,
+        customer: '',
+        product: 'A',
+        quantity: 1,
+        price: 0,
+        paid: true,
     }
-    let itemInit  = {
-        id: 0,
-        name: "",
-        num_guests: 2,
-        max_guests: 3,
-    };
-
     let item = {...itemInit}
 
     let items = [];
@@ -39,7 +42,7 @@
         console.log('mouning home, state:', JSON.stringify($state));
         console.log(url);
         if (manager===undefined)
-            manager = new ItemManager(url);
+            manager = new ItemManager(url, sortCol, sortDesc);
         await manager.search();
         error = manager.error;
         items = manager.result;       
@@ -110,9 +113,11 @@
     }
     const showModify = (e) => {
         let o = e.detail;
+        o.date = dayjs(o.date).toDate();
         item = {...o};
+        showForm = true;
+        showToolbar = false;
         isModify = true;
-        isModal = true;
         error = '';
     }
     const showRemove = (e) => {
@@ -146,7 +151,7 @@
 <div class="row bg-light border-bottom">
     <div class="col h2">Item:</div>
 </div>
-<ItemForm on:close={closeForm}/>
+<ItemForm {item} {isModify} on:close={closeForm} on:saved={refresh}/>
 {/if}
 
 <br>