sam/fuware-be
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update code navbar and test qrcode

Browse Source
This commit is contained in:
Duy Dang
2024-07-23 12:52:25 +08:00
parent 55b6265985
commit 5eb89d3b99
2 changed files with 95 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/src/components/Navbar/Navbar.jsx
View File

@ -29,7 +29,7 @@ export const NAV_ITEM = (admin = false) => [
text: language?.ui.house,
},
{
path: 'warehouse',
pathName: 'warehouse',
show: true,
icon: IconBuildingWarehouse,
text: language?.ui.warehouse,

123
frontend/src/pages/WareHouse/Warehouse.jsx
View File

@ -1,40 +1,99 @@
import { IconPackage } from '@tabler/icons-solidjs'
import { For } from 'solid-js'
import { Dynamic } from 'solid-js/web'
import './warehouse.scss'
const data = [
{
id: 1,
name: 'Bếp',
listBox: [
{
id: 1,
code: 'bep-01',
name: 'Dụng cụ bếp',
items: ['dao', 'muỗng', 'đũa'],
},
{
id: 2,
code: 'bep-02',
name: 'Dụng cụ bếp',
items: ['nồi 20"', 'chảo 20"', 'chén nhỏ', 'chén ăn cơm'],
},
{
id: 3,
code: 'bep-02',
name: 'Dụng cụ bếp',
items: ['nồi 20"', 'chảo 20"', 'chén nhỏ', 'chén ăn cơm'],
},
{
id: 4,
code: 'bep-02',
name: 'Dụng cụ bếp',
items: ['nồi 20"', 'chảo 20"', 'chén nhỏ', 'chén ăn cơm'],
},
{
id: 5,
code: 'bep-02',
name: 'Dụng cụ bếp',
items: ['nồi 20"', 'chảo 20"', 'chén nhỏ', 'chén ăn cơm'],
},
{
id: 6,
code: 'bep-02',
name: 'Dụng cụ bếp',
items: ['nồi 20"', 'chảo 20"', 'chén nhỏ', 'chén ăn cơm'],
},
],
},
{
id: 2,
name: 'Bàn làm việc',
listBox: [
{
id: 1,
code: 'work-01',
name: 'Work 1',
items: ['Chuột Logitech MX', 'Tai nghe G503X'],
},
{
id: 2,
code: 'work-02',
name: 'Work 2',
items: ['Ổ cứng SSD 250GB', 'Điện thoại IP6'],
},
],
},
]
function PackageItem(props) {
const { item } = { ...props }
const isEmpty = item % 2 === 0
const { box, index } = { ...props }
// QRCode.toDataURL(box.code, {width: 200, margin: 1}, function (err, url) {
// if (err) throw err
// const img = document.getElementById(`${box.code}-${index}`)
// console.log(img, url)
// img.src = url
// })
return (
<a
href="#"
class="group/item w-20 h-20 m-[10px] hover:text-white hover:bg-fu-green rounded-[10px] block"
classList={{ 'bg-fu-warning/30': isEmpty, 'bg-fu-warning': !isEmpty }}
class="group/item w-28 h-28 m-[10px] hover:text-white hover:bg-fu-green rounded-[10px] block"
classList={{ 'bg-fu-warning/30': !box.items.length, 'bg-fu-warning': box.items.length }}
>
{/* <div class="text-base font-bold flex align-center justify-center h-[100%]">Nồi 20"</div> */}
<div class="qrcode-box">
<img id={`${box.code}-${index}`} src="" alt="" />
</div>
<div class="qrcode-box" />
<div class="bx-dec invisible group-hover/item:visible">
<div class="section-dec flex items-center absolute bg-fu-green/90 rounded-[10px] p-[10px] shadow-[0_5px_15px_4px_rgba(0, 135, 90, 0.25)]] mt-[20px] ml-[20px]">
<div class="box-img">
<Dynamic
class="mr-[10px] w-20 h-20 text-fu-warning"
component={IconPackage}
/>
{/* <div class="box-img">
<Dynamic class="mr-[10px] w-20 h-20 text-fu-warning" component={IconPackage} />
</div>
<div class="dec max-w-[200px]">
<h4 class="text-white mb-[5px] text-base font-bold">
{isEmpty ? 'Rỗng' : 'Dụng cụ bếp'}
</h4>
<p class="line-clamp-3">
{isEmpty
? ''
: `Nồi cơm điện, Bếp nấu ăn, Lò vi sóng, Máy xay sinh tố, Máy ép trái cây, Lò nướng, Nồi áp suất, Chảo chống dính, Xửng hấp, Bộ nồi chuyên dụng, Dao bếp, Thớt, Hộp đựng thực phẩm, Hũ
đựng gia vị , Dụng cụ đo lường, Bộ chén bát, Đũa, Muỗng, Thau, rổ, Khăn lau bếp, Thùng đựng gạo, Bộ ly cốc, Dung dịch tẩy rửa, Giá treo, Vòi rửa thông minh, Máy hút mùi, Máy lọc nước`}
</p>
</div>
<h4 class="text-white mb-[5px] text-base font-bold">{!box.items.length ? 'Rỗng' : box.name}</h4>
<p class="line-clamp-3">{box.items.join(', ')}</p>
</div> */}
</div>
</div>
</a>
@ -52,13 +111,19 @@ export default function Warehouse() {
<input class="form-control no-border bg-base-200 px-2 py-1" id="e" type="date" />
</div>
</div>
<div class="area-in-warehouse grid grid-cols-4">
<div class="area-block mb-10">
<div class="area-title text-center text-base font-bold mb-3">Khu bếp</div>
<div class="area-content flex justify-space-around flex-wrap">
<For each={[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]}>{(item) => <PackageItem item={item} />}</For>
</div>
</div>
<div class="area-in-warehouse grid grid-cols-3 gap-3">
<For each={data}>
{(warehouse) => (
<div class="card w-full bg-base-100 shadow-lg border border-gray-200 p-1">
<div class="area-block mb-10">
<div class="area-title text-center text-base font-bold mb-3 mt-3 font-size">{warehouse.name}</div>
<div class="area-content flex justify-space-around flex-wrap">
<For each={warehouse.listBox}>{(box, index) => <PackageItem box={box} index={index()} />}</For>
</div>
</div>
</div>
)}
</For>
</div>
</div>
</div>