GoWasabi! (Frontend)

ส่วนของ Backend URL: https://github.com/pornthida030/final_backend.git

Member SE

1. 6210450075 ธันยธรณ์ ไกรกาญจน์
2. 6210450539 ญาณกร จารุเดชศิริ
3. 6210451179 ณิชธิตรา เมฆาพงศ์พันธุ์
4. 6210450644 ปุณยาพร ฤกษ์ฤดีกุล
5. 6210451691 พันธุ์ธัช เสมสมญาติ

Member Webtech

1. 6210401252 พงศ์พล โรจนอดิศร
2. 6210450075 ธันยธรณ์ ไกรกาญจน์
3. 6210450539 ญาณกร จารุเดชศิริ
4. 6210451179 ณิชธิตรา เมฆาพงศ์พันธุ์
5. 6210451314 พรธิดา สุขสรรควณิช

Project setup

1.git clone https://github.com/thefirstblair/final_frontend.git
2.npm install

เปิดใช้งาน

npm run serve

ตัวอย่างผู้ใช้งาน

• Admin

  • Admin1 Username: admin1 Password: password

  • Admin2 Username: admin2 Password: password

• Customer (User)

  • User1 Username: user1 Password: password

  • User2 Username: user2 Password: password

  • User3 Username: user3 Password: password

  • User4 Username: user4 Password: password

  • User5 Username: user5 Password: password

• Employee

  • ช่างมะนาว Username: employee1 Password: password

  • ช่างหยก Username: employee2 Password: password

  • ช่างเฟิร์ส Username: employee3 Password: password

  • ช่างตาต้า Username: employee4 Password: password

  • ช่างมุก Username: employee5 Password: password

ขั้นตอนการใช้งานทั่วไปสำหรับ User

1. ลงทะเบียนเข้าใช้งาน (สำหรับผู้ที่ยังไม่เคยลงทะเบียน สำหรับผู้ที่เคยลงทะเบียนใช้งานแล้วไปที่ข้อ 2.)
2. ทำการล็อคอิน (สำหรับผู้ที่เคยลงทะเบียนใช้งานแล้ว)
3. ไปที่หน้า Home ด้วยการกดที่ โลโก้ 'GoWasabi!'
4. ทำการเลือกประเภทบริการที่ท่านต้องการ วางเม้าท์ไว้ที่ตัวไอคอนจะแสดงชื่อบริการ เมื่อท่านเลือกได้แล้วกดที่ตัวไอคอน และทำการเลือกคูปองที่ท่านต้องการ
5. เมื่อท่านเลือกคูปองได้แล้วให้กด 'เลือกพนักงาน' และกด 'เพิ่มลงตะกร้าสินค้า'
6. ทำ 4-5 เพื่อเลือกตามใจชอบของท่าน
7. ชำระเงิน ด้วยการกดที่รูปรถเข็น (ตระกร้าสินค้า) และกดชำระเงิน เมื่อเข้ามาที่หน้าชำระเงิน ท่านสามารถเลือกประเภทที่ชำระเงินได้ และท่านสามารถใช้โค้ดส่วนลดได้ โดยการกด 'ใช้โค้ดส่วนลด' และทำการพิมพ์โค้ดส่วนลดที่ท่านต้องการกด 'ใช้โค้ด' เมื่อท่านทำสิ่งที่กล่าวไปข้างต้นเสร็จให้กด 'ยืนยันการสั่งซื้อ' เพื่อทำการจอง จบการทำงาน

• เพิ่มเติม

1. ถ้าคุณต้องการลบคูปองที่ท่านเลือกลงตระกร้าสินค้าให้กด 'delete'
2. ท่านสามารถดูบัญชีผู้ใช้ของท่านได้ด้วยการกดที่ จุดสามจุด ที่อยู่ติดกับรถเข็น (ตะกร้าสินค้า) เลือกที่ 'ตั้งค่าผู้ใช้งาน' กด 'บัญชีผู้ใช้' ท่านสามารถเปลี่ยนรหัสผ่านได้
3. ท่านสามารถดูประวัติการจองของท่านได้ด้วยการกดที่ จุดสามจุด ที่อยู่ติดกับรถเข็น (ตะกร้าสินค้า) เลือกที่ 'ตั้งค่าผู้ใช้งาน' กด 'ประวัติการจองของฉัน' และ หากได้ใช้งานคูปองไปแล้ว ท่านสามารถกดรีวิวให้คะแนนได้
4. ท่านสามารถดูประวัติการชำระเงินของท่านได้ด้วยการกดที่ จุดสามจุด ที่อยู่ติดกับรถเข็น (ตะกร้าสินค้า) เลือกที่ 'ตั้งค่าผู้ใช้งาน' กด 'ประวัติการชำระเงิน'

ขั้นตอนการใช้งานสำหรับ Admin

1. ล็อคอินเข้าสู่ระบบโดยใช้ Username และ Password สำหรับ Admin เท่านั้น
2. สามารถจัดการระบบต่างๆได้ด้วยการกดที่ จุดสามจุด ที่อยู่ติดกับรถเข็น มีทั้งหมด 4 ตัวจัดการด้วยกัน

• 2.1 ตัวจัดการบริการทั้งหมด

  • หมวดหมู่ (Type) : อยู่หน้าแรกของตัวจัดการบริการ สามารถเพิ่มหมวดหมู่ได้โดยกดปุ่ม + Add Type สามารถแก้ไขรายละเอียดได้โดยกดที่ Icon ดินสอ ในตาราง คอลั่มน์ "Action" และ สามารถลบหมวดหมู่ได้โดยกดที่ Icon ถังขยะ ซึ่งจะทำให้บริการและคูปองทั้งหมดภายในหมวดหมู่นั้น หายไปด้วยเช่นกัน อีกทั้งสามารถเพิ่ม Employee หรือ ช่าง ที่จะให้บริการในหมวดหมู่นั้นๆ ได้โดยกรอก Username ของ Employee

  • บริการ (Service) : อยู่ในหน้าที่ 2 ของตัวจัดการบริการ เข้าถึงได้โดยกดที่ Icon แว่นขยาย ในตาราง คอลั่มน์ "Action" สามารถเพิ่มบริการได้โดยกดปุ่ม + Add Service สามารถแก้ไขบริการได้โดยกด ที่ Icon ดินสอ และ ลบได้โดยกดที่ Icon ถังขยะ ในตาราง เช่นเดียวกับหมวดหมู่ หากลบบริการ จะทำให้คูปองที่อยู่ในบริการนั้นๆ หายไปด้วย

  • คูปอง (Coupon) : อยู่ภายในส่วนแก้ไขของบริการ สามารถเพิ่ม ลบ แก้ไข ได้เช่นเดียวกับหมวดหมู่และบริการที่ได้กล่าวไปข้างต้น

• 2.2 ตัวจัดการประวัติการจองของลูกค้า สามารถดูประวัติการจองของลูกค้าทั้งหมดได้ที่นี่และสามารถเปลี่ยนสถานะการใช้งานคูปองของลูกค้าได้ หลังจากมาใช้บริการที่ร้านแล้ว

• 2.3 ตัวจัดการผู้ใช้งาน สามารถจัดการเพิ่ม ลบ และ แก้ไข ผู้ใช้งาน โดยสามารถเปลี่ยนชื่อ, รหัสผ่าน และ สิทธิ์การได้รับอนุญาต ได้

• 2.4 ตัวจัดการคูปองส่วนลด สามารถเพิ่มคูปองส่วนลดใหม่ได้โดยกดปุ่ม + Add New Discount Coupon ได้ สามารถเพิ่มจำนวนคูปองได้โดยกดที่ Icon ดินสอ และ ลบได้ที่ Icon ถังขยะ

• เพิ่มเติม

1. แอดมินจะไม่สามารถเลือกซื้อคูปองและชำระเงินได้

ขั้นตอนการใช้งานสำหรับ Admin

1. ล็อคอินเข้าสู่ระบบโดยใช้ Username และ Password สำหรับ Employee เท่านั้น
2. สามารถจัดการการจองของลูกค้าที่ได้จองมากับตนเองได้ด้วยการกดที่ จุดสามจุด ที่อยู่ติดกับรถเข็น มีทั้งหมด 4 ตัวจัดการด้วยกัน
   • 2.1 ตัวจัดการการจองของลูกค้า สามารถเปลี่ยนสถานะการใช้งานคูปองของลูกค้าที่จองมาใช้บริการกับตนเองได้ โดยสามารถกดเปลี่ยนได้ที่ปุ่มเปลี่ยนสถานะได้

• เพิ่มเติม

1. ช่างจะไม่สามารถเลือกซื้อคูปองและชำระเงินได้

Compiles and minifies for production

npm run build

Lints and fixes files

npm run lint

Customize configuration

See Configuration Reference.