web สมบูรณ์

Document/Latex/1-introduction.tex

 \chapter{บทนำ}
 
 \section{ที่มาและเหตุผล }
-เนื่องจากปัจจุบัน การดำเนินธุรกิจร้านเสริมสวยที่ให้บริการเสริมความงาม เช่น การทำผม ตัดผม ออกแบบทรงผม อบไอน้ำ เวลาผู้ใช้บริการมาใช้บริการโดยจะมาที่ร้านเลยโดยที่ไม่จองคิวพบว่าร้านที่มาใช้บริการมีลูกค้าเป็นจำนวนมาก อาจจะทำให้ต้องรอคิวนานหรือต้องเสียเวลามาใช้บริการในวันอื่นบางครั้งผู้ใช้บริการมีเบอร์ของร้านเสริมสวยก็จะโทรมา สอบถามคิวและจองคิว แต่ช่างติดทำผมให้ลูกค้าท่านอื่นก็ไม่สามารถรับโทรศัพท์ได้ผู้พัฒนาจึงมีแนวคิดว่าจะทำระบบการจอง คิวร้านเสริมสวยขึ้น เพื่อแก้ปัญหาการรอคิวนานและให้มีความทันสมัยตลอดจนสามารถรองรับการแสดงผลบนอุปกรณ์ สมาร์ทโฟนในปัจจุบัน ทำให้สามารถจองคิวหรือติดต่อสื่อสารในเรื่องของการจองคิวทำผมกับทางร้านได้สะดวกมากยิ่งขึ้น
+เนื่องจากปัจจุบัน การดำเนินธุรกิจร้านเสริมสวยที่ให้บริการเสริมความงาม เช่น การทำผม ตัดผม ออกแบบทรงผม อบไอน้ำ โดยปกติผู้ใช้บริการจะมาที่ร้านเลยโดยที่ไม่จองคิว และพบว่าร้านที่มาใช้บริการมีลูกค้าเป็นจำนวนมาก จึงทำให้ผู้ใช้บริการต้องรอคิวนานหรือต้องเสียเวลามาใช้บริการในวันอื่น บางครั้งผู้ใช้บริการโทรมาสอบถามคิวและจองคิว แต่ช่างกำลังทำผมให้ลูกค้าท่านอื่นไม่สามารถรับโทรศัพท์ได้ ผู้พัฒนาจึงมีแนวคิดจะทำระบบการจองคิวร้านเสริมสวยขึ้น เพื่อแก้ปัญหาการรอคิวนานและสามารถรองรับการแสดงผลบนอุปกรณ์สมาร์ทโฟนในปัจจุบัน ทำให้สามารถจองคิวหรือติดต่อสื่อสารในเรื่องของการจองคิวทำผมกับทางร้านได้สะดวกมากยิ่งขึ้น
 
-แนวทางการแก้ปัญหา จัดทำการพัฒนาเป็นเว็บแอปพิเคชัน ระบบจองคิวร้านเสริมสวยที่ถูกพัฒนาขึ้นเป็นเว็บแอปพิเคชัน จะช่วยเพิ่มระเบียบในการจัดการจองคิวให้เป็นระบบ ลดขั้นตอนการดำเนินงานที่ซับซ้อน ลดระยะเวลาในการดำเนินงาน ลดความผิดพลาดที่จะเกิดขึ้นในขั้นตอนการดำเนินงาน และช่วยเพิ่มประสิทธิภาพในการทำงาน
+จากที่กล่าวมาข้างต้น ผู้พัฒนาจึงได้พัฒนาเว็บแอปพิเคชัน ระบบจองคิวร้านเสริมสวยขึ้นซึ่งช่วยในการจัดการจองคิวให้เป็นระบบ ลดขั้นตอนการดำเนินงานที่ซับซ้อน ลดระยะเวลาในการดำเนินงาน ลดความผิดพลาดที่จะเกิดขึ้นในขั้นตอนการดำเนินงาน และช่วยเพิ่มประสิทธิภาพในการทำงาน
 
 
 
 
 \section{วัตถุประสงค์}
 \begin{enumerate}
-	\item เพื่อออกแบบและพัฒนาเว็บแอปพลิเคชั่น จองคิวร้านเสริมสวย
+	\item เพื่อออกแบบและพัฒนาเว็บแอปพลิเคชั่นจองคิวร้านเสริมสวย
 	\item เพื่อแก้ปัญหาการรอคิวร้านเสริมสวย
 	 
 \end{enumerate}
@@ -69,7 +69,7 @@
 
 \subsection{ซอฟต์แวร์ (Software)}
 \begin{enumerate}
-	\item ReactJS เป็น JavaScript Framework โดยมีชุดคำสั่งและไลบารี่ (Library) ให้ใช้งานมากมาย 
+	\item ReactJS เป็น JavaScript Framework โดยมีชุดคำสั่งและไลบารี่ (Library) ให้ใช้งานเป็นจำนวนมาก
 	\item Node.js คือ Cross Platform Runtime Environment หรือเรียกอีกอย่างว่า Backend Framework ใช้สำหรับเป็นเว็บเซิฟเวอร์ (Web Server) ซึ่งเขียนด้วยภาษา JavaScript 
 	\item JavaScript เป็น ภาษาที่ใช้ในการพัฒนาเว็บ Environment) 
 	\item Xampp เป็นโปรแกรม Apache web server ไว้จำลอง web server เพื่อทดสอบระบบระหว่างพัฒนา 
@@ -80,7 +80,7 @@
 
 \newpage
 \subsection{แผนการดำเนินการ}
-ในการสร้างระบบแนะนำสถานที่ท่องเที่ยวในจังหวัดอุบลราชธานี ผู้พัฒนาได้แบ่งขั้นตอนการดำเนินงานไว้ด้วยกัน 8 ขั้นตอน ดังตารางที่ \ref{tab:ganttchart}
+ในการสร้างระบบจองคิวร้านเสริมสวย ผู้พัฒนาได้แบ่งขั้นตอนการดำเนินงานไว้ด้วยกัน 8 ขั้นตอน ดังตารางที่ \ref{tab:ganttchart}
 
 %\begin{landscape}
 %\sffamily

Document/Latex/6-conclusion.tex

 \chapter{สรุปและข้อเสนอแนะ}
 
-การดำเนินโครงงานเพื่อพัฒนาระบบจองคิวร้านเสริมสวยนี้ พบว่าระบบสามารถทำงานได้ตามที่วิเคราะห์และออกแบบไว้ แต่ก็พบปัญหาและอุปสรรคระหว่างการพัฒนา ในบทนี้ผู้พัฒนาจึงขอสรุปความสามารถของระบบ ชี้แจงปัญหาและอุปสรรค พร้อมเสนอแนวทางในการพัฒนาระบบจองคิวร้านเสริมสวย ต่อ ตามลำดับ
+การดำเนินโครงงานเพื่อพัฒนาระบบจองคิวร้านเสริมสวยนี้ พบว่าระบบสามารถทำงานได้ตามที่วิเคราะห์และออกแบบไว้ แต่ก็พบปัญหาและอุปสรรคระหว่างการพัฒนา ในบทนี้ผู้พัฒนาจึงขอสรุปความสามารถของระบบ ชี้แจงปัญหาและอุปสรรค พร้อมเสนอแนวทางในการพัฒนาระบบจองคิวร้านเสริมสวย ตามลำดับ
 
 \section{สรุปความสามารถของระบบ}
 	ระบบจองคิวร้านเสริมสวย เว็บแอปพลิเคชันสามารถสรุปความสามารถที่ระบบทำได้ดังนี้
@@ -51,11 +51,13 @@
 
 \section{แนวทางการพัฒนาต่อ}
 \begin{enumerate}
- 	\item การพัฒนาช่องทางการติดต่อ
- 	\item เจ้าของร้านสามารถยืนยันการจองคิวได้
- 	\item การพัฒนาเป็นแอปพลิเคชัน
- 	\item การเพิ่มข้อมูลโปรดมชั่น
- 	\item การค้นหาร้านตามวันและเวลาว่างของร้าน 
+ 	\item การพัฒนาช่องทางการติดต่อ ให้ผู้ใช้บริการสามารถติดต่อกับเจ้าของร้านได้
+ 	\item เจ้าของร้านสามารถยืนยันการจองคิวได้ เจ้าของร้านสามารถยืนยัน
+ 	\item ดูประวัติการจองคิว ผู้ใช้บริการสมารถดูประวัติการจองคิวของตัวเองได้
+ 	\item การพัฒนาเป็นแอปพลิเคชัน พัฒนาเป็บแอปพลิเคชันสำหรับ Android และ Ios
+ 	\item การเพิ่มข้อมูลโปรโมชั่น เจ้าของร้านสามารถเพิ่มโปรโมชั่นของร้านได้
+ 	\item แจ้งเตือนการจองคิว แจ้งเตือนการจองคิวบอกผู้ใช้บริการถึงสถานะการจองคิว
+ 	\item การเปลี่ยนวิธีการเลือกช่าง เลือกร้านและรายการ
  	
 \end{enumerate}
 

Document/Latex/CS59110440259.tex

@@ -77,7 +77,7 @@
 \CommitteeBlockAdvisor                  
 \CommitteeBlockCoAdvisor                
 \CommitteeBlock{กรรมการ}{อาจารย์ วาโย ปุยะติ} 
-\CommitteeBlock{กรรมการ}{อาจารย์ วาสนา เหง้าเกษ } 
+\CommitteeBlock{กรรมการ}{ดร.เกรียงศักดิ์ ตรีประพิณ} 
 }
 
 %%-------------------------------------------------------------------------------

Document/Latex/Figures/3/use case diagram (2).xml

-<mxfile userAgent="Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/65.0.3325.181 Safari/537.36" version="8.5.12" editor="www.draw.io" type="device"><diagram id="120ff508-374b-bf88-8e7a-aaa9685ebcdc" name="Page-1">5VlLk+I2EP41PoayJD+PGGayqUqqpjKH7B4F1oBrbcuxxcDk16eFJduSzYZQwLK1cxmp1Xp9/fVDxiGL4vBrTavtHzxluYPd9OCQpYMx8nAA/6Tko5WE2G0FmzpLlVIveM3+YUqo1XZZyhpDUXCei6wyhWtelmwtDBmta7431d54bu5a0Q0bCV7XNB9L/8pSsW2lEQ57+SeWbbZ6ZxTE7ciKrr9uar4r1X4OJm/Hv3a4oHotddFmS1O+H4jIk0MWNeeibRWHBcslthq2dt7zidHu3DUrxTkT1LHfab5j+sTHc4kPjcV+mwn2WtG17O/B3g5JtqLIoYegSZuqtcBbdmCwavLGS/FMiyyXtv/E8ncmsjWFAbUVqwU7nDwu6kAAcjFeMFF/gMp+aAWF3XZggU5IleU33dz+9tBQAJxAD0+gEeSwRbKCxkYcL9EK5C0NnIK/d1wP/NIcGT0HBexVh36wW+XJdZLImS91w1eNBKlGDJZxdTuxR6Ol3UiwrTwneqhbx9MS3ZjHeqjViZ1ooSW6kcR6SCtHcy2J9DqhbnSIAdgtRiZuIB5gaVENiCFMdt2ETGoCJoozKkghv+0OuEY0JYZcI9egGvlBHK8L6SZWsTvCyp/yS/8qfumPwFoyIS8Pm3Gx53U6Ag9WgGQBneQ/YLwlal5gMcwbw4Ymw9k1UItGqM3XgtcjqCAHVbK5K/JWgSTy1oBC/jtdsfyFN5nIeAkqKy4EL0AhlwNJl+wWPJfzln2669eY59lGzhXcQp7vRJ6VbNHlcPfG5vBNa2B/wuEnjBFcwRjayEN/t8N0F/pl3vitrHYyeNJColaummoqYD4Ey0lo4krcO7JcV5oDYF8FhfILajF5xgJq08eEzU4/eAo2bwK28BqwTRR+io+j5B7p5B5huxLoCxhkVgtdSQPK3qgywTbl1RagrGuVKBnVKmRUojzbs/o6ZDkx6yFp4FlRqcsZ96ABmQhLOuaocm3Yy8p1vpP+pIQbQ2W6pmMpvKxUt+QlM5FlZTqX7zXo8oqVE2mjSzkpbbayzjnOO5F/1AYn7cUOmfgsM83MV70v3UEAusGQ7H5ROam9k7zIt20M9+a7es3MkC9ovWFi6HbffN4gbf+a5VRk7+aeU8ZWy73w7Pgk0eEliExe2dG2PauaNXwiWgt5rhXeQ99cqL3gaKEj97o7nkfHcVX8J2sqXjaPGsPR93Re7yd13oHrDrz189CT+7ELnTceO2/Lzrs4L4ksn4ssnzvXee2FvPh2zhv+LzrCU5/JMu1qbGzgKsLi44ChasJRS31whMf93fKNG2ODthGJVP+F1RnAzGpN7btkonuSGfkz36JzOLuQ0JCNZihGgRcGbkgCK8kRL55FLmiFhMSx7TRX5PoZ303Pjp1q8CQRT7OrY8o47GnmIYN1xPo7QcHLaKY/OBgFT3A3msXWc8ouU85lGA7sese9FY28qfL7/jR6EKq4340ql2ZXZGVXjG8WcTz0kxZ7s9gNDWIiPzwZ+9BVWaq/LQ1Z2n6Lvk/etL6rYXJpzrQjGroWTaHb/1bZqvc/CJOnfwE=</diagram></mxfile>
\ No newline at end of file

Document/Latex/abstractthai.tex

 \begin{thaiabstract}
 การเสริมสวยเป็นที่นิยมและเป็นธุรกิจที่ได้รับความนิยมจากลูกค้าเป็นจำนวนมากในปัจจุบัน โดยปกติเมื่อลูกค้าต้องการใช้บริการจะมาที่ร้านโดยไม่ได้นัดหมาย ซึ่งปัญหาคือร้านมีลูกค้าที่ใช้บริการอยู่ในขณะนั้นทำให้ต้องผู้ที่เข้ามาโดยไม่ได้นัดต้องรอคิวหรือถ้ามีลูกค้ากำลังรอรับบริการอยู่เป็นจำนวนมากอาจทำให้ต้องมาใช้บริการในวันอื่นแทน แม้ในบางกรณีที่ลูกค้าโทรมาสอบถามเพื่อทำการจองคิวล่วงหน้า แต่ช่างไม่สะดวกรับโทรศัพท์เนื่องจากกำลังให้บริการลูกค้าคนอื่นอยู่ 
 
-ดังนั้นผู้พัฒนาจึงมีแนวคิดสร้างเว็บแอปพลิเคชันระบบการจองคิวร้านเสริมสวยขึ้น เพื่อช่วยจัดการปัญหาดังกล่าว ระบบนี้ถูกพัฒนาด้วย React framework , material ui , nodejs และ MySql โดยระบบสามารถให้ลูกค้าทำการจองคิว ดูคิวว่างของร้านเสริมสวย หาตำแหน่งของร้าน ดูข้อมูลทั่วไปของร้าน และเขียนรีวิวติชมได้ ในส่วนของเจ้าของร้าน สามารถเพิ่มข้อมูลทั่วไปของร้าน และจัดการการจองคิวของร้านเสริมสวยได้ ระบบการจองคิวรองรับการแสดงผลบนอุปกรณ์สมาร์ทโพนและเว็บบราวเซอร์ 
+ดังนั้นผู้พัฒนาจึงมีแนวคิดสร้างเว็บแอปพลิเคชันระบบการจองคิวร้านเสริมสวยขึ้น เพื่อช่วยจัดการปัญหาดังกล่าว ระบบนี้ถูกพัฒนาด้วย React framework  material ui  nodejs และ MySql โดยระบบสามารถให้ลูกค้าทำการจองคิว ดูคิวว่างของร้านเสริมสวย หาตำแหน่งของร้าน ดูข้อมูลทั่วไปของร้าน และเขียนรีวิวติชมได้ ในส่วนของเจ้าของร้าน สามารถเพิ่มข้อมูลทั่วไปของร้าน และจัดการการจองคิวของร้านเสริมสวยได้ ระบบการจองคิวรองรับการแสดงผลบนอุปกรณ์สมาร์ทโพนและเว็บบราวเซอร์ 
 
 ระบบที่พัฒนาขึ้นจะช่วยอำนวยความสะดวกในการนัดหมายล่วงหน้า ลดการรอคิวของผู้ใช้บริการ และช่วยให้การจองคิวมีระเบียบมากขึ้น
 

Document/Latex/acknowledgement.tex

 \begin{acknowledgements} %TODO update here!
 	การพัฒนาโครงงานระบบจองคิวร้านเสริมสวย สำเร็จลุล่วงได้ด้วยความกรุณาแลความช่วยเหลือจากหลายๆ ท่าน ข้าพเจ้าขอขอพระคุณทุกท่าน ที่มีส่วนร่วมในการพัฒนาโครงงานนี้
 	
-    ขอขอบพระคุณอาจารย์ ดร ทศพร จูฉิม อาจารย์ที่ปรึกษาโครงงานที่ได้แนะนำทฤษฎีและแนวทางในแก้ปัญหาต่าง ๆ  ที่เกิดขึ้นระหว่างการพัฒนาระบบ อีกครั้งยังคอยตรวจสอบความก้าวหน้าของการทำงานเป็นระยะ ๆ รวมทั้งสร้างกำลังใจให้ผู้พัฒนาอยู่เสมอ
+    ขอขอบพระคุณอาจารย์ ดร.ทศพร จูฉิม อาจารย์ที่ปรึกษาโครงงานที่ได้แนะนำทฤษฎีและแนวทางในแก้ปัญหาต่าง ๆ  ที่เกิดขึ้นระหว่างการพัฒนาระบบ อีกครั้งยังคอยตรวจสอบความก้าวหน้าของการทำงานเป็นระยะ ๆ รวมทั้งสร้างกำลังใจให้ผู้พัฒนาอยู่เสมอ
 
       ขอบพระคุณอาจารย์ประจำสาขาวิทยาการคอมพิวเตอร์ อาจารย์ประจำภาควิชาคณิตศาสตร์ สถิติ และคอมพิวเตอร์ และอาจารย์ในคณะวิทยาศาสตร์ทุก ๆ ท่าน ที่คอยให้คำแนะนำ อบรมสั่งสอน และคอยช่วยเหลือข้าพเจ้าในการศึกษาตลอดมาขอบคุณเจ้าหน้าที่และบุคลากรของคณะวิทยาศาสตร์ ที่ได้อำนวยความสะดวกทางด้านอุปกรณ์และเครื่องมือต่าง ๆ    
     
@@ -15,5 +15,5 @@
 \begin{flushright}
     นางสาวปิยพร อาภรศรี
     \\
-    17 มีนาคม 62
+    17 มีนาคม 63
 \end{flushright}

Document/Latex/appendix1-setup.tex

 \chapter{การติดตั้งเครื่องมือที่ใช้พัฒนาโปรแกรม}
-การติดตั้งเครื่องมือที่ใช้ในการพัฒนาระบบสหกิจศึกษา คณะวิทยาศาสตร์ มหาวิทยาลัยอุบลราชธานี มีโปรแกรมที่จำเป็นในการพัฒนาระบบดังต่อไปนี้
+การติดตั้งเครื่องมือที่ใช้ในการพัฒนาระบบจองคิดร้านเสริมสวย มีโปรแกรมที่จำเป็นในการพัฒนาระบบดังต่อไปนี้
 \begin{itemize}
 	\item การติดตั้ง Node.js
 	\item การติดตั้ง React.js
@@ -22,7 +22,7 @@
 		\label{Fig:nodeInstall2}
 	\end{figure}
 	
-	\item แสดงหน้าต่างตอนรับของ Node.js ให้กด Next แสดงดังรูปที่ \ref{Fig:nodeInstall3}
+	\item แสดงหน้าต่างตอนรับของ Node.js ให้กดปุ่ม Next แสดงดังรูปที่ \ref{Fig:nodeInstall3}
 	\begin{figure}[H]
 		\centering
 		\includegraphics[width=10cm]{Figures/7/3}
@@ -30,7 +30,7 @@
 		\label{Fig:nodeInstall3}
 	\end{figure}
 	\newpage
-	\item แสดงหน้าต่างข้อตกลงในการใช้ Node.js ให้เลือกช่อง I accept the terms in the License Agreement และกด Next แสดงดังรูปที่ \ref{Fig:nodeInstall4}
+	\item แสดงหน้าต่างข้อตกลงในการใช้ Node.js ให้เลือกช่อง I accept the terms in the License Agreement และกดปุ่ม Next แสดงดังรูปที่ \ref{Fig:nodeInstall4}
 	\begin{figure}[H]
 		\centering
 		\includegraphics[width=10cm]{Figures/7/4}
@@ -46,7 +46,7 @@
 		\label{Fig:nodeInstall5}
 	\end{figure}
 	\newpage
-	\item แสดงหน้าต่างสำหรับติดตั้ง Node.js ให้กด Install เพื่อทำงานติดตั้ง แสดงดังรูปที่ \ref{Fig:nodeInstall6}
+	\item แสดงหน้าต่างสำหรับติดตั้ง Node.js ให้กดปุ่ม Install เพื่อทำงานติดตั้ง แสดงดังรูปที่ \ref{Fig:nodeInstall6}
 	\begin{figure}[H]
 		\centering
 		\includegraphics[width=10cm]{Figures/7/6}
@@ -65,15 +65,17 @@
 	\caption{คำสั่งสำหรับติดตั้ง React.js}
 	\label{Fig:reactinstall}
 \end{figure}
+\newpage
 \section{การติดตั้ง Visual Studio Code}
 \begin{enumerate}
 	\item สามารถดาวน์โหลด Visual Studio Code ได้ที่ https://code.visualstudio.com/download ดังแสดงในรูปที่ \ref{Fig:vscode}
 	\begin{figure}[H]
-		\includegraphics[width=\columnwidth]{Figures/prepareation/vscode}
+		\centering
+	\includegraphics[width=0.7\columnwidth]{Figures/prepareation/vscode}
 		\caption{หน้าเว็บดาวน์โหลด Visual Studio Code}
 		\label{Fig:vscode}
 	\end{figure}
-	\newpage
+
 	\item เมื่อเปิดตัวติดตั้งขึ้นมาแล้ว จะแสดงหน้าจอ Welcome to the Visual Studio Code Setup Wizard ให้กดปุ่ม Next เพื่อเริ่มกระบวนการติดตั้ง ดังแสดงในรูปที่ \ref{Fig:vsi1}
 	\begin{figure}[H]
 		\centering
@@ -81,16 +83,16 @@
 		\caption{หน้าต่างต้อนรับของ Visual Studio Code}
 		\label{Fig:vsi1}
 	\end{figure}
-	
-	\item หลังจากนั้นจะแสดงหน้าต่างข้อตกลงการใช้งาน Visual Studio Code ทำการติ๊กที่ I accept the areement แล้วกด Next ดังแสดงในรูปที่ \ref{Fig:vsi2}
+	\newpage
+	\item หลังจากนั้นจะแสดงหน้าต่างข้อตกลงการใช้งาน Visual Studio Code ทำการเลือกที่ I accept the areement แล้วกดปุ่ม Next ดังแสดงในรูปที่ \ref{Fig:vsi2}
 	\begin{figure}[H]
 		\centering
 		\includegraphics[width=0.7\columnwidth]{Figures/prepareation/vsi2}
 		\caption{หน้าต่างข้อตกลงการใช้งาน  Visual Studio Code}
 		\label{Fig:vsi2}
 	\end{figure}
-	\newpage
-	\item จากนั้นจะแสดงหน้าต่างที่จัดเก็บไฟล์ต่างๆ ของ Visual Studio Code ทำการกด Next ดังแสดงในรูปที่ \ref{Fig:vsi3}
+	
+	\item จากนั้นจะแสดงหน้าต่างที่จัดเก็บไฟล์ต่างๆ ของ Visual Studio Code ทำการกดปุ่ม Next ดังแสดงในรูปที่ \ref{Fig:vsi3}
 	\begin{figure}[H]
 		\centering
 		\includegraphics[width=0.7\columnwidth]{Figures/prepareation/vsi3}
@@ -98,27 +100,27 @@
 		\label{Fig:vsi3}
 	\end{figure}
 	
-	\item จากนั้นจะแสดงหน้าต่างการจัดการซอร์ดคัทของ Visual Studio Code ทำการกด Next ดังแสดงในรูปที่ \ref{Fig:vsi4}
+	\item จากนั้นจะแสดงหน้าต่างการจัดการซอร์ดคัทของ Visual Studio Code ทำการกดปุ่ม Next ดังแสดงในรูปที่ \ref{Fig:vsi4}
 	\begin{figure}[H]
 		\centering
-		\includegraphics[width=0.7\columnwidth]{Figures/7/vsi4}
+		\includegraphics[width=0.7\columnwidth]{Figures/prepareation/vsi4}
 		\caption{หน้าต่างการจัดการซอร์ดคัท ของ  Visual Studio Code}
 		\label{Fig:vsi4}
 	\end{figure}
-	\newpage
-	\item จากนั้นแสดงหน้าต่างเริ่มทำการติดตั้งทำการกด Next ดังแสดงในรูปที่ \ref{Fig:vsi5}
+
+	\item จากนั้นแสดงหน้าต่างเริ่มทำการติดตั้งกดปุ่ม Next ดังแสดงในรูปที่ \ref{Fig:vsi5}
 	\begin{figure}[H]
 		\centering
 		\includegraphics[width=0.7\columnwidth]{Figures/prepareation/vsi5}
-		\caption{หน้าต่างเริ่มทำการติดตั้งทำการกด ของ  Visual Studio Code}
+		\caption{หน้าต่างเริ่มทำการติดตั้งของ  Visual Studio Code}
 		\label{Fig:vsi5}
 	\end{figure}
 	
-	\item จากนั้นจะแสดงหน้าต่างเมื่อเข้าโปรแกรมหลังติตั้งเสร็จ ดังแสดงในรูปที่ \ref{Fig:vsi6}
+	\item จากนั้นจะแสดงหน้าต่างเมื่อเข้าโปรแกรมหลังติดตั้งเสร็จ ดังแสดงในรูปที่ \ref{Fig:vsi6}
 	\begin{figure}[H]
 		\centering
 		\includegraphics[width=0.7\columnwidth]{Figures/prepareation/vsi6}
-		\caption{ หน้าต่างเมื่อเข้าโปรแกรมหลังติตั้งเสร็จ ของ Visual Studio Code}
+		\caption{ หน้าต่างเมื่อเข้าโปรแกรมหลังติดตั้งเสร็จ ของ Visual Studio Code}
 		\label{Fig:vsi6}
 	\end{figure}
 \end{enumerate}

Document/Latex/appendix3-manual.tex

@@ -16,7 +16,7 @@
 				\item หมายเลข 2 คือ ปุ่มลงทะเบียนสำหรับผู้ใช้งานทั่วไป
 				\item หมายเลข 3 คือ ปุ่มลงทะเบียนสำหรับเจ้าของร้าน
 				\item หมายเลข 4 คือ ฟอร์มสำหรับค้นหาร้าน
-				\item หมายเลข 5 คือ คลิ๊กที่รูปภาพเพื่อนเปิดหน้าต่างรายละเอียดร้าน
+				\item หมายเลข 5 คือ เลือกที่รูปภาพเพื่อเปิดหน้าต่างรายละเอียดร้าน
 				\item หมายเลข 6 คือ ปุ่มสำหรับจองคิว
 			\end{itemize}
 			\item เมื่อผู้ใช้งานกดที่ปุ่ม Register ระบบจะทำการแสดงหน้าต่างลงทะเบียน ดังแสดงในรูปที่ \ref{Fig:register}
@@ -142,7 +142,7 @@
 		
 		\end{itemize}
 		
-		\item เมื่อเจ้าของร้านคลิ๊กที่เมนูข้อมูลร้าน ระบบจะแสดงหน้าข้อมูลร้าน ดังแสดงในรูปที่ \ref{Fig:datashop}
+		\item เมื่อเจ้าของร้านเลือกที่เมนูข้อมูลร้าน ระบบจะแสดงหน้าข้อมูลร้าน ดังแสดงในรูปที่ \ref{Fig:datashop}
 		\begin{figure}[H]
 			\centering
 			\includegraphics[width=0.7\columnwidth]{Figures/7/Manual/datashop}
@@ -158,7 +158,7 @@
 			
 		\end{itemize}
 		
-		\item เมื่อเจ้าของร้านคลิ๊กที่เมนูรายการ ระบบจะแสดงหน้ารายการ ดังแสดงในรูปที่ \ref{Fig:list}
+		\item เมื่อเจ้าของร้านเลือกที่เมนูรายการ ระบบจะแสดงหน้ารายการ ดังแสดงในรูปที่ \ref{Fig:list}
 		\begin{figure}[H]
 			\centering
 			\includegraphics[width=0.7\columnwidth]{Figures/7/Manual/list}
@@ -184,7 +184,7 @@
 			\item หมายเลข 1 คือ กดปุ่มเพื่อเพิ่มข้อมูลช่าง
 		\end{itemize}
 		
-			\item เมื่อเจ้าของร้านคลิ๊กที่เมนูดูคิวจอง ระบบจะแสดงหน้าข้อมูลการจองคิว  ดังแสดงในรูปที่ \ref{Fig:shopqely}
+			\item เมื่อเจ้าของร้านเลือกที่เมนูดูคิวจอง ระบบจะแสดงหน้าข้อมูลการจองคิว  ดังแสดงในรูปที่ \ref{Fig:shopqely}
 		\begin{figure}[H]
 			\centering
 			\includegraphics[width=0.7\columnwidth]{Figures/7/Manual/shopqely}
@@ -196,7 +196,7 @@
 			\item หมายเลข 1 คือ เลือกวันที่ที่ต้องการดูการจองคิว
 		\end{itemize}
 		
-		\item เมื่อเจ้าของร้านคลิ๊กที่เมนูเพิ่มรูปภาพ ดังแสดงในรูปที่ \ref{Fig:shoppic}
+		\item เมื่อเจ้าของร้านเลือกที่เมนูเพิ่มรูปภาพ ดังแสดงในรูปที่ \ref{Fig:shoppic}
 		\begin{figure}[H]
 			\centering
 			\includegraphics[width=0.7\columnwidth]{Figures/7/Manual/shoppic}
@@ -237,7 +237,7 @@
 		
 		\end{itemize}
 		
-		\item เมื่อช่างคลิ๊กที่เมนูตารางงาน  ระบบจะแสดงหน้าดูตารางงาน ดังแสดงในรูปที่\ref{Fig:work}
+		\item เมื่อช่างเลือกที่เมนูตารางงาน  ระบบจะแสดงหน้าดูตารางงาน ดังแสดงในรูปที่\ref{Fig:work}
 		\begin{figure}[H]
 			\centering
 			\includegraphics[width=0.7\columnwidth]{Figures/7/Manual/work}
@@ -250,7 +250,7 @@
 		
 		\end{itemize}
 		
-		\item เมื่อช่างคลิ๊กที่เมนูภาพผลงาน ระบบจะแสดงหน้าเพิ่มผลงานช่าง ดังแสดงในรูปที่ \ref{Fig:bpic}
+		\item เมื่อช่างเลือกที่เมนูภาพผลงาน ระบบจะแสดงหน้าเพิ่มผลงานช่าง ดังแสดงในรูปที่ \ref{Fig:bpic}
 		\begin{figure}[H]
 			\centering
 			\includegraphics[width=0.5\columnwidth]{Figures/7/Manual/bpic}

Document/Latex/biography.tex

@@ -2,12 +2,12 @@
 \justify
 ชื่อ-สกุล: นางสาวปิยพร อาภรศรี \\
 รหัสประจำตัวนักศึกษา: 59110440259\\
-วัดเกิด: 12 06 2540\\
+วัดเกิด: 12 มิ.ย. 2540\\
 ที่อยู่ที่สามารถติดต่อได้: 7 ม.1 ต.หนองบก อ.เหล่าเสือโก้ก จ.อุบลราชธานี 34000\\
 เบอร์โทรศัพท์: (+66) 99 468 2013\\
 อิเมลล์: piyaphorn.ar.59@ubu.ac.th\\
 ระดับมัธยมต้น: โรงเรียนหกสิบพรรษาวิทยาคมอุบลราชธานี จังหวัดอุบลราชธานี\\
 ระดับมัธยมปลาย: โรงเรียนหกสิบพรรษาวิทยาคมอุบลราชธานี จังหวัดอุบลราชธานี\\
-ระดับอุดมศึกษา: ภาควิชาคณิตศาสตร์ สถิติ และคอมพิวเตอร์ สาขาวิทยาการ คอมพิวเตอร์ คณะวิทยาศาสตร์ มหาวิทยาลัยอุบลราชธานี
+ระดับอุดมศึกษา: ภาควิชาคณิตศาสตร์ สถิติ และคอมพิวเตอร์ สาขาวิทยาการคอมพิวเตอร์ คณะวิทยาศาสตร์ มหาวิทยาลัยอุบลราชธานี
 \end{biography}}
 

Document/Latex/references.bib

@@ -167,4 +167,15 @@
   url = {https://goo.gl/6ZhGQo},
   note = {12 พฤษภาคม 2561}
 }
+@misc{blackbox,
+	author = {{Atthaboon S.}},
+	title = {BLACK-BOX TESTING STRATEGY
+	},
+	url = {http://everybitsconsult.com/blog/2015/06/22/black-box-testing.html},
+	date = {},
+	month = {},
+	year = {2555},
+	note = {20 พฤษภาคม 2561}
+}
+
 

Source/Backend/controllers/beautician/index.js

 const Beautician = require("../../models/beautician");
+const config = require("../../config");
 
 exports.add = async (req, res) => {
   try {
@@ -34,15 +35,31 @@ exports.getbeauticianShopId  = async (req, res) => {
     });
   }
 };
-
-exports.deletelist = async (req, res) => {
+exports.getbeauticianName = async (req, res) => {
   try {
-    const listId = req.params.listId;
-    await List.destroy({
+    const name  = req.params.name;
+    let beautician = await Beautician.findAll({
       where: {
-        id: listId
+        name:name
       }
     });
+    console.log('beautician', beautician)
+    res.status(200).send(beautician);
+  } catch (err) {
+    res.send({
+      error: err.message
+    });
+  }
+};
+
+exports.deletebeautician = async (req, res) => {
+  try {
+    const beauticianId = req.params.id;
+    await Beautician.destroy({
+      where: {
+        id: beauticianId,
+      },
+    });
     res.status(200).send("success");
   } catch (err) {
     console.log(err);

Source/Backend/controllers/booking/index.js

@@ -15,13 +15,72 @@ exports.addbooking = async (req, res) => {
 exports.getBooking = async (req, res) => {
   try {
     let booking = await Booking.findAll();
-    res.status(200).send("success");
+    res.status(200).send("booking");
+  } catch (err) {
+    console.log(err);
+    res.sendStatus(401);
+  }
+};
+exports.getBookingShopid = async (req, res) => {
+  try {
+    const shop = req.params.shop;
+    let booking = await Booking.findAll({
+      where: {
+        shop: shop,
+      },
+    });
+    res.status(200).send(booking);
   } catch (err) {
     console.log(err);
     res.sendStatus(401);
   }
 };
 
+exports.getBookingDate = async (req, res) => {
+  try {
+    const date = req.params.date;
+    let booking = await Booking.findAll({
+      where: {
+        date: date,
+      },
+    });
+    res.status(200).send(booking);
+  } catch (err) {
+    console.log(err);
+    res.sendStatus(401);
+  }
+};
+exports.searchBooking= async (req, res) => {
+  const date = req.body.date;
+  console.log("name", name);
 
+  if (name !== undefined) {
+    console.log("called1");
+    var condition = name ? { name: { [Op.like]: `%${name}%` } } : null;
+    const datasearch = await Booking.findAll({
+      where: condition,
+    });
+    res.status(200).send(datasearch);
+  } else {
+    console.log("called2");
 
-
+    const datasearch = await  Booking.findAll({
+     
+    });
+    res.status(200).send(datasearch);
+  }
+};
+exports.getBookingbeautician = async (req, res) => {
+  try {
+    const beautician= req.params.beautician;
+    let booking = await Booking.findAll({
+      where: {
+        beautician: beautician,
+      },
+    });
+    res.status(200).send(booking);
+  } catch (err) {
+    console.log(err);
+    res.sendStatus(401);
+  }
+};

Source/Backend/controllers/list/index.js

@@ -81,7 +81,7 @@ exports.getListshop = async (req, res) => {
   }
 };
 
-exports.updateList = async (req, res) => {
+exports.updateListId = async (req, res) => {
   try {
     const listData = req.body;
     const id = req.params.id;

Source/Backend/controllers/review/index.js

@@ -15,7 +15,7 @@ exports.addreview = async (req, res) => {
 exports.getReview = async (req, res) => {
   try {
     let review = await Review.findAll();
-    res.status(200).send("success");
+    res.status(200).send(review);
   } catch (err) {
     console.log(err);
     res.sendStatus(401);
@@ -39,13 +39,13 @@ exports.deleteReview = async (req, res) => {
 
 exports.getReviewShopid = async (req, res) => {
   try {
-    const shop = req.params.shop;
-    let review = await Review.findOne({
+    const shop= req.params.shop;
+    let review = await Review.findAll({
       where: {
-        id: shop
+        shop: shop
       }
     });
-    res.status(200).send("success");
+    res.status(200).send(review);
   } catch (err) {
     console.log(err);
     res.sendStatus(401);

Source/Backend/controllers/shop/index.js

+
+const db = require('../../db');
+const Op = db.Sequelize.Op;
+
 const Shop = require("../../models/shop");
 
 exports.addShop = async (req, res) => {
@@ -40,9 +44,28 @@ exports.deleteshop = async (req, res) => {
 exports.getShopId = async (req, res) => {
   try {
     const shopId = req.params.id;
-    let shop = await Shop.findOne({
+    if(Shop){
+      let shop = await Shop.findOne({
+        where: {
+          id: shopId,
+        },
+      });
+      res.status(200).send(shop);
+    }else{
+      res.status(200).send(); 
+    }
+   
+  } catch (err) {
+    console.log(err);
+    res.sendStatus(401);
+  }
+};
+exports.getShopBytype = async (req, res) => {
+  try {
+    const type = req.params.type;
+    let shop = await Shop.findAll({
       where: {
-        id: shopId,
+        type: type,
       },
     });
     res.status(200).send(shop);
@@ -51,7 +74,6 @@ exports.getShopId = async (req, res) => {
     res.sendStatus(401);
   }
 };
-
 exports.updateShop = async (req, res) => {
   try {
     const shopData = req.body;
@@ -68,7 +90,22 @@ exports.getUserId = async (req, res) => {
     const userId = req.params.userId;
     let response = await Shop.findOne({
       where: {
-       userId: userId,
+        userId: userId,
+      },
+    });
+    res.status(200).send(response);
+  } catch (err) {
+    console.log(err);
+    res.sendStatus(401);
+  }
+};
+exports.getType = async (req, res) => {
+
+  try {
+    const type = req.params.type;
+    let response = await Shop.findOne({
+      where: {
+        type: type
       },
     });
     res.status(200).send(response);
@@ -77,28 +114,56 @@ exports.getUserId = async (req, res) => {
     res.sendStatus(401);
   }
 };
-exports.updateuserId = async (req, res) => {
+
+exports.updateshopId = async (req, res) => {
   try {
     const shopData = req.body;
-    const userId = req.params.userId;
-    await Shop.update(shopData, { where: { userId: userId } });
+    const id = req.params.id;
+    await Shop.update(shopData, { where: { id: id } });
     res.status(200).send({ status: "done" });
+    console.log(shopData);
   } catch (err) {
     console.log(err);
     res.sendStatus(401);
   }
 };
-exports.searchShop= async (req, res) => {
+exports.searchShop = async (req, res) => {
   const name = req.body.name;
-  console.log('name', name);
-  
-  if(name !== undefined) {
-      console.log('called1');
-      var condition = name ? { name: { [Op.like]: `%${name}%` } } : null;
-      const datasearch = await Shop.findAll({
-          where: condition
-      })
-      res.status(200).send(datasearch)
-  } 
-  
-}
+  console.log("name", name);
+
+  if (name !== undefined) {
+    console.log("called1");
+    var condition = name ? { name: { [Op.like]: `%${name}%` } } : null;
+    const datasearch = await Shop.findAll({
+      where: condition,
+    });
+    res.status(200).send(datasearch);
+  } else {
+    console.log("called2");
+
+    const datasearch = await  Shop.findAll({
+     
+    });
+    res.status(200).send(datasearch);
+  }
+};
+// exports.searchType = async (req, res) => {
+//   const type = req.body.type;
+//   console.log("name", type);
+
+//   if (type !== undefined) {
+//     console.log("called1");
+//     var condition = type ? { name: { [Op.like]: `%${name}%` } } : null;
+//     const datasearch = await Shop.findAll({
+//       where: condition,
+//     });
+//     res.status(200).send(datasearch);
+//   } else {
+//     console.log("called2");
+
+//     const datasearch = await  Shop.findAll({
+     
+//     });
+//     res.status(200).send(datasearch);
+//   }
+// };

Source/Backend/models/beautician/index.js

 const Sequelize = require("sequelize");
 const db = require("../../db");
 const User = require('../user')
+const BeauticianImage = require("../beauticianImg")
 
-
-module.exports  = db.sequelize.define("beauticians", {
+const Beautician   = db.sequelize.define("beauticians", {
   id: {
     type: Sequelize.INTEGER,
     primaryKey: true,
@@ -29,4 +29,5 @@ module.exports  = db.sequelize.define("beauticians", {
   
 });
 
-
+Beautician.hasMany(BeauticianImage, { foreignKey: 'image_id' });
+module.exports = Beautician;
\ No newline at end of file

Source/Backend/models/beauticianImg/index.js

 const Sequelize = require("sequelize");
 const db = require("../../db");
 
-module.exports = db.sequelize.define("beauticianImages", {
-  id: {
+const BeauticianImages = db.sequelize.define("beauticianImages", {
+  image_id: {
     type: Sequelize.INTEGER,
     primaryKey: true,
-    autoIncrement: true
+    autoIncrement: true,
   },
-  beautician_id:{
+  beauticians_id: {
     type: Sequelize.INTEGER,
-    primaryKey: true
+    primaryKey: true,
   },
 
   image: {
-    type: Sequelize.BLOB
+    type: Sequelize.BLOB,
   },
   userId: {
     type: Sequelize.INTEGER,
     references: "users",
-    referencesKey: "id"
+    referencesKey: "id",
   },
   type: {
-    type: Sequelize.STRING
-  }
+    type: Sequelize.STRING,
+  },
 });
+module.exports = BeauticianImages;

Source/Backend/models/booking/index.js

@@ -8,9 +8,8 @@ module.exports = db.sequelize.define("bookings", {
     autoIncrement: true
   },
   name: {
-    type: Sequelize.INTEGER,
-    references: 'users',
-    referencesKey: 'id'
+    type: Sequelize.STRING
+  
   },
   shop: {
     type: Sequelize.INTEGER,
@@ -18,14 +17,11 @@ module.exports = db.sequelize.define("bookings", {
     referencesKey: 'id'
   },
   list: {
-    type: Sequelize.INTEGER,
-    references: 'lists',
-    referencesKey: 'id'
+    type: Sequelize.TEXT
   },
   beautician:{
-    type:Sequelize.INTEGER,
-    references: 'users',
-    referencesKey: 'id'
+    type:Sequelize.TEXT
+
   },
   date: {
     type: Sequelize.DATE

Source/Backend/models/reviews/index.js

@@ -22,9 +22,8 @@ module.exports = db.sequelize.define("reviews", {
     references: 'shops',
     referencesKey: 'id'
   },
-  userID: {
-    type: Sequelize.INTEGER,
-    references: 'users',
-    referencesKey: 'id'
+  name: {
+    type: Sequelize.STRING
+    
   }
 });

Source/Backend/models/shop/index.js

 const Sequelize = require("sequelize");
 const db = require("../../db");
 const ShopImage = require("../shopimage");
-const WorkImage = require("../workimage")
+
 
  const Shop = db.sequelize.define("shops", {
   id: {
@@ -58,5 +58,5 @@ const WorkImage = require("../workimage")
 });
 
 Shop.hasMany(ShopImage, { foreignKey: 'image_id' });
-// Shop.hasMany(ShopImage, { foreignKey: 'image_id' });
+
 module.exports = Shop;
\ No newline at end of file

Source/Backend/models/shopimage/index.js

 const Sequelize = require("sequelize");
 const db = require("../../db");
 const User =require("../user")
- const ShopImage = db.sequelize.define("shopimages", {
+const ShopImage = db.sequelize.define("shopimages", {
 
   image_id: {
     type: Sequelize.INTEGER,

Source/Backend/models/workimage/index.js

@@ -11,10 +11,6 @@ const WorkImage = db.sequelize.define("workimages", {
     type: Sequelize.INTEGER,
     primaryKey: true,
   },
-//   user_id: {
-//     type: Sequelize.INTEGER,
-//     primaryKey: true,
-//   },
   image: {
     type: Sequelize.BLOB,
   },

Source/Backend/routers/auth/index.js

@@ -11,6 +11,6 @@ router.get("/getUserById/:id", authController.getUserById);
 router.post("/register", authController.register);
 router.post("/login", authController.login);
 router.get('/currentuser', authController.currentUser);
-
+// router.put('/updateProfile/:id', authController.updateProfile)
 
 module.exports = router;

Source/Backend/routers/beautician/index.js

@@ -6,7 +6,7 @@ const BeauticianController = require("../../controllers/beautician");
 
 router.post("/add", BeauticianController.add);
 router.get("/getbeauticianShopId/:shopID", BeauticianController.getbeauticianShopId);
-
-
+router.get("/getbeauticianName/:name", BeauticianController.getbeauticianName);
+router.delete("/deletebeautician/:id", BeauticianController.deletebeautician);
 
 module.exports = router;

Source/Backend/routers/booking/index.js

@@ -6,7 +6,8 @@ const bookingController = require("\../../controllers/booking");
 
 router.post("/add", bookingController.addbooking);
 router.get('/all', bookingController.getBooking);
-
-
-
+router.get('/getBookingShopid/:shop',bookingController.getBookingShopid)
+router.get('/getBookingbeautician/:beautician',bookingController.getBookingbeautician)
+router.get('/getBookingDate/:date', bookingController.getBookingDate)
+router.post('/searchBooking',bookingController.searchBooking)
 module.exports = router;

Source/Backend/routers/list/index.js

@@ -9,7 +9,7 @@ router.get('/all', listController.getList);
 router.delete('/delete/:listId',listController.deletelist);
 router.get('/getListuser/:userId',listController.getListuser);
 router.get("/getListshop/:shop", listController.getListshop)
-router.put('/updateList/id',listController.updateList);
+router.put('/updateListId/:id',listController.updateListId);
 
 
 module.exports = router;

Source/Backend/routers/review/index.js

@@ -7,7 +7,7 @@ const reviewController = require("../../controllers/review");
 router.post("/add", reviewController.addreview);
 router.get('/all', reviewController.getReview);
 router.delete('/delete/:reviewId', reviewController.deleteReview);
-router.get('/getReviewShopid/:id', reviewController.getReviewShopid);
+router.get('/getReviewShopid/:shop', reviewController.getReviewShopid);
 router.put('/updateReview/id', reviewController.updateReview);
 
 

Source/Backend/routers/shop/index.js

@@ -9,6 +9,8 @@ router.delete("/delete/:shopId", shopController.updateShop);
 router.get("/getShopId/:id", shopController.getShopId);
 router.put("/updateshop/:id", shopController.updateShop);
 router.get("/getUserId/:userId", shopController.getUserId);
-router.put("/updateuserId/:userId", shopController.updateuserId);
-
+router.get("/getShopBytype/:type", shopController.getShopBytype)
+router.put("/updateshopId/:id", shopController.updateshopId);
+router.post("/searchShop", shopController.searchShop)
+// router.get("/getType/:type", shopController.getType)
 module.exports = router;

Source/Backend/routers/storage/index.js

@@ -27,12 +27,16 @@ router.get('/file/shop/:shopId', async (req, res) => {
             shop_id: req.params.shopId
         }
     })
-    const urlimg = existingImage.image.toString('base64');
-    const dataimg = {
-        url: urlimg,
-        type: existingImage.type
+    if (existingImage){
+        const urlimg = existingImage.image.toString('base64');
+        const dataimg = {
+            url: urlimg,
+            type: existingImage.type
+        }
+        res.status(200).send(dataimg);
+    }else{   
+        res.status(200).send();
     }
-    res.status(200).send(dataimg);
 })
 router.put('/file/shop/:shopId', storage.single('images') ,async (req, res) => {
     const editImage = req.file;

Source/Backend/routers/storagebeautician/index.js

@@ -5,15 +5,16 @@ const BeauticianImage = require("../../models/beauticianImg");
 const User = require("../../models/user");
 
 router.post(
-  "/upload/beautician/:beauticianId",storagebeautician.single("images"),async (req, res) => {
+  "/upload/beautician/:beauticianId",
+  storagebeautician.single("images"),
+  async (req, res) => {
     //  console.log(req.body.shopId);
     const images = req.file;
-    const shop_id = req.body.shopId;
     const beautician_id = req.params.beauticianId;
     // console.log(req);
 
     await BeauticianImage.create({
-      beautician_id: req.params.beauticianId,
+      beauticians_id: req.params.beauticianId,
       image: images.buffer,
       type: images.mimetype,
     });
@@ -21,17 +22,21 @@ router.post(
   }
 );
 //get file
-router.get('/file/beautician/:beauticianId', async (req, res) => {
-  const existingImage = await ShopImage.findAll({
-      where: {
-        beautician_id: req.params.beauticianId
-      }
-  })
-  const urlimg = existingImage.image.toString('base64');
-  const dataimg = {
+router.get("/file/beautician/:beauticianId", async (req, res) => {
+  const existingImage = await BeauticianImage.findAll({
+    where: {
+      beautician_id: req.params.beauticianId,
+    },
+  });
+  if (existingImage) {
+    const urlimg = existingImage.image.toString("base64");
+    const dataimg = {
       url: urlimg,
-      type: existingImage.type
+      type: existingImage.type,
+    };
+    res.status(200).send(dataimg);
+  } else {
+    res.status(200).send();
   }
-  res.status(200).send(dataimg);
-})
+});
 module.exports = router;

Source/Backend/routers/storageprofile/index.js

@@ -22,17 +22,23 @@ router.post('/upload/user/:userId', storageprofile.single('images'), async (req,
 })
 //get file
 router.get('/file/user/:userId', async (req, res) => {
-    const existingImage = await ShopImage.findOne({
+    const existingImage = await UserImage.findOne({
         where: {
             user_id: req.params.userId
         }
     })
-    const urlimg = existingImage.image.toString('base64');
-    const dataimg = {
-        url: urlimg,
-        type: existingImage.type
+    if (existingImage){
+        const urlimg = existingImage.image.toString('base64');
+        const dataimg = {
+            url: urlimg,
+            type: existingImage.type
+        }
+        res.status(200).send(dataimg);
+    }else{   
+        res.status(200).send();
     }
-    res.status(200).send(dataimg);
+   
+    
 })
 router.put('/file/user/:userId',  storageprofile.single('images') ,async (req, res) => {
     const editImage = req.file;
@@ -40,7 +46,7 @@ router.put('/file/user/:userId',  storageprofile.single('images') ,async (req, r
         image: editImage.buffer
     }
 
-    const userId = req.params.shopId;
+    const userId = req.params.userId;
 
     await UserImage.update(
         profileimage,

Source/Backend/routers/storageshop/index.js

+const router = require("express-promise-router")();
+const storageshop = require("../../multer");
 
+const WorkImage = require("../../models/workimage");
+const Shop = require("../../models/shop");
 
-const router = require('express-promise-router')();
-const storageshop = require('../../multer');
-
-const WorkImage = require('../../models/workimage');
-const Shop = require('../../models/shop')
-
-router.post('/upload/work/:shopId', storageshop.single('images'), async (req, res) => {
+router.post(
+  "/upload/work/:shopId",
+  storageshop.single("images"),
+  async (req, res) => {
     //  console.log(req.body.shopId);
     const images = req.file;
-    const shop_id = req.body.shopId
+    const shop_id = req.body.shopId;
     // const user_id = req.body.userId
 
     // console.log(req);
 
-        await WorkImage.create({
-            shop_id: req.params.shopId,
-            // user_id: req.params.userId,
-            image: images.buffer,
-            type: images.mimetype
-         });
-        res.send('success')
-})
+    await WorkImage.create({
+      shop_id: req.params.shopId,
+      // user_id: req.params.userId,
+      image: images.buffer,
+      type: images.mimetype,
+    });
+    res.send("success");
+  }
+);
 //get file
-router.get('/file/shop/:shopId', async (req, res) => {
-    const existingImage = await ShopImage.findAll({
-        where: {
-            shop_id: req.params.shopId
-        }
-    })
-    const urlimg = existingImage.image.toString('base64');
-    const dataimg = {
+router.get("/file/shop/:shopId", async (req, res) => {
+  const existingImage = await WorkImage.findAll({
+    where: {
+      shop_id: req.params.shopId,
+    },
+  });
+  console.log(existingImage);
+  
+  
+    let dataimg=[]
+    for (let i = 0; i < existingImage.length;i++) {
+      const urlimg = existingImage[i].image.toString("base64");
+      dataimg.push = {
         url: urlimg,
-        type: existingImage.type
+        type: existingImage[i].type,
+      };
+      res.status(200).send(dataimg);
     }
-    res.status(200).send(dataimg);
-})
+});
 
 module.exports = router;

Source/Backend/server.js

@@ -7,8 +7,8 @@ const port = process.env.PORT || 9000;
 const app = express();
 
 app.use(cors());
-app.use(bodyParser.json());
-app.use(bodyParser.urlencoded({ extended: false }));
+app.use(bodyParser.json({limit: '50mb'}));
+app.use(bodyParser.urlencoded({limit: '50mb', extended: true}));
 app.use("/api/auth", router.auth);
 app.use("/api/list", router.list);
 app.use("/api/shop", router.shop);

Source/b_beauty_project/package-lock.json

@@ -8821,6 +8821,11 @@
         "object.assign": "^4.1.0"
       }
     },
+    "keycode": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/keycode/-/keycode-2.2.0.tgz",
+      "integrity": "sha1-PQr1bce4uOXLqNCpfxByBO7CKwQ="
+    },
     "killable": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/killable/-/killable-1.0.1.tgz",
@@ -11853,6 +11858,16 @@
       "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.4.tgz",
       "integrity": "sha512-ueZzLmHltszTshDMwyfELDq8zOA803wQ1ZuzCccXa1m57k1PxSHfflPD5W9YIiTXLs0JTLzoj6o1LuM5N6zzNA=="
     },
+    "react-event-listener": {
+      "version": "0.6.6",
+      "resolved": "https://registry.npmjs.org/react-event-listener/-/react-event-listener-0.6.6.tgz",
+      "integrity": "sha512-+hCNqfy7o9wvO6UgjqFmBzARJS7qrNoda0VqzvOuioEpoEXKutiKuv92dSz6kP7rYLmyHPyYNLesi5t/aH1gfw==",
+      "requires": {
+        "@babel/runtime": "^7.2.0",
+        "prop-types": "^15.6.0",
+        "warning": "^4.0.1"
+      }
+    },
     "react-github-fork-ribbon": {
       "version": "0.6.0",
       "resolved": "https://registry.npmjs.org/react-github-fork-ribbon/-/react-github-fork-ribbon-0.6.0.tgz",
@@ -12006,6 +12021,85 @@
         "workbox-webpack-plugin": "4.3.1"
       }
     },
+    "react-swipeable-views": {
+      "version": "0.13.9",
+      "resolved": "https://registry.npmjs.org/react-swipeable-views/-/react-swipeable-views-0.13.9.tgz",
+      "integrity": "sha512-WXC2FKYvZ9QdJ31v9LjEJEl1bA7E4AcaloTkbW0uU0dYf5uvv4aOpiyxubvOkVl1a5L2UAHmKSif4TmJ9usrSg==",
+      "requires": {
+        "@babel/runtime": "7.0.0",
+        "prop-types": "^15.5.4",
+        "react-swipeable-views-core": "^0.13.7",
+        "react-swipeable-views-utils": "^0.13.9",
+        "warning": "^4.0.1"
+      },
+      "dependencies": {
+        "@babel/runtime": {
+          "version": "7.0.0",
+          "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.0.0.tgz",
+          "integrity": "sha512-7hGhzlcmg01CvH1EHdSPVXYX1aJ8KCEyz6I9xYIi/asDtzBPMyMhVibhM/K6g/5qnKBwjZtp10bNZIEFTRW1MA==",
+          "requires": {
+            "regenerator-runtime": "^0.12.0"
+          }
+        },
+        "regenerator-runtime": {
+          "version": "0.12.1",
+          "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.12.1.tgz",
+          "integrity": "sha512-odxIc1/vDlo4iZcfXqRYFj0vpXFNoGdKMAUieAlFYO6m/nl5e9KR/beGf41z4a1FI+aQgtjhuaSlDxQ0hmkrHg=="
+        }
+      }
+    },
+    "react-swipeable-views-core": {
+      "version": "0.13.7",
+      "resolved": "https://registry.npmjs.org/react-swipeable-views-core/-/react-swipeable-views-core-0.13.7.tgz",
+      "integrity": "sha512-ekn9oDYfBt0oqJSGGwLEhKvn+QaqMGTy//9dURTLf+vp7W5j6GvmKryYdnwJCDITaPFI2hujXV4CH9krhvaE5w==",
+      "requires": {
+        "@babel/runtime": "7.0.0",
+        "warning": "^4.0.1"
+      },
+      "dependencies": {
+        "@babel/runtime": {
+          "version": "7.0.0",
+          "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.0.0.tgz",
+          "integrity": "sha512-7hGhzlcmg01CvH1EHdSPVXYX1aJ8KCEyz6I9xYIi/asDtzBPMyMhVibhM/K6g/5qnKBwjZtp10bNZIEFTRW1MA==",
+          "requires": {
+            "regenerator-runtime": "^0.12.0"
+          }
+        },
+        "regenerator-runtime": {
+          "version": "0.12.1",
+          "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.12.1.tgz",
+          "integrity": "sha512-odxIc1/vDlo4iZcfXqRYFj0vpXFNoGdKMAUieAlFYO6m/nl5e9KR/beGf41z4a1FI+aQgtjhuaSlDxQ0hmkrHg=="
+        }
+      }
+    },
+    "react-swipeable-views-utils": {
+      "version": "0.13.9",
+      "resolved": "https://registry.npmjs.org/react-swipeable-views-utils/-/react-swipeable-views-utils-0.13.9.tgz",
+      "integrity": "sha512-QLGxRKrbJCbWz94vkWLzb1Daaa2Y/TZKmsNKQ6WSNrS+chrlfZ3z9tqZ7YUJlW6pRWp3QZdLSY3UE3cN0TXXmw==",
+      "requires": {
+        "@babel/runtime": "7.0.0",
+        "keycode": "^2.1.7",
+        "prop-types": "^15.6.0",
+        "react-event-listener": "^0.6.0",
+        "react-swipeable-views-core": "^0.13.7",
+        "shallow-equal": "^1.2.1"
+      },
+      "dependencies": {
+        "@babel/runtime": {
+          "version": "7.0.0",
+          "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.0.0.tgz",
+          "integrity": "sha512-7hGhzlcmg01CvH1EHdSPVXYX1aJ8KCEyz6I9xYIi/asDtzBPMyMhVibhM/K6g/5qnKBwjZtp10bNZIEFTRW1MA==",
+          "requires": {
+            "regenerator-runtime": "^0.12.0"
+          }
+        },
+        "regenerator-runtime": {
+          "version": "0.12.1",
+          "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.12.1.tgz",
+          "integrity": "sha512-odxIc1/vDlo4iZcfXqRYFj0vpXFNoGdKMAUieAlFYO6m/nl5e9KR/beGf41z4a1FI+aQgtjhuaSlDxQ0hmkrHg=="
+        }
+      }
+    },
     "react-transition-group": {
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.3.0.tgz",
@@ -14260,6 +14354,14 @@
         "makeerror": "1.0.x"
       }
     },
+    "warning": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz",
+      "integrity": "sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==",
+      "requires": {
+        "loose-envify": "^1.0.0"
+      }
+    },
     "watchpack": {
       "version": "1.6.0",
       "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-1.6.0.tgz",

Source/b_beauty_project/package.json

@@ -29,6 +29,7 @@
     "react-redux": "^7.2.0",
     "react-router-dom": "^5.1.2",
     "react-scripts": "3.3.0",
+    "react-swipeable-views": "^0.13.9",
     "recompose": "^0.30.0",
     "redux": "^4.0.5"
   },

Source/b_beauty_project/src/views/BeauticianShopPage/Addimage/index.js

@@ -7,7 +7,7 @@ import {
   DialogContent,
   DialogTitle,
   TextField,
-  InputAdornment
+  InputAdornment,
 } from "@material-ui/core";
 
 import { withRouter } from "react-router-dom";
@@ -16,8 +16,9 @@ import Fab from "@material-ui/core/Fab";
 import AddIcon from "@material-ui/icons/Add";
 import AddPhotoAlternateIcon from "@material-ui/icons/AddPhotoAlternate";
 import MaterialTable from "material-table";
-
-const styles = theme => ({
+import axios from "axios";
+import { connect } from "react-redux";
+const styles = (theme) => ({
   root: {
     height: 150,
     flexGrow: 1,
@@ -25,51 +26,47 @@ const styles = theme => ({
     // The position fixed scoping doesn't work in IE 11.
     // Disable this demo to preserve the others.
     "@media all and (-ms-high-contrast: none)": {
-      display: "none"
-    }
+      display: "none",
+    },
   },
   modal: {
     display: "flex",
     padding: theme.spacing(1),
     alignItems: "center",
-    justifyContent: "center"
+    justifyContent: "center",
   },
   fab: {
     position: "absolute",
     bottom: theme.spacing(2),
-    right: theme.spacing(2)
-  }
+    right: theme.spacing(2),
+  },
 });
 
-class Databeautician extends Component {
+class AddImage extends Component {
   state = {
     open: false,
-    columns: [
-      { title: "รูปภาพ", field: "img" }
-    ],
-    data: [
-      { img: "Mehmet"}
-      
-    ]
+    columns: [{ title: "รูปภาพ", field: "img" }],
+    data: [],
+    file: null,
+    beautician: [],
   };
   handleClickOpen = () => {
     this.setState({
-      open: true
+      open: true,
     });
   };
   handleClose = () => {
     this.setState({
-      open: false
+      open: false,
     });
   };
   handleCloseAndSave = () => {
     //Save to db
 
-    this.setState(prevState => {
+    this.setState((prevState) => {
       const data = [...prevState.data];
       const newData = {
         img: "Mehmet",
-       
       };
       data.push(newData);
       return { ...prevState, data: data, open: false };
@@ -79,61 +76,56 @@ class Databeautician extends Component {
     //   open: false
     // });
   };
-  componentDidMount = () => {
-    let { pathname } = this.props.location;
-    pathname = pathname.substring(1, pathname.length);
-    // console.log('pathname', pathname)
+  // componentDidMount = () => {
+  //   let { pathname } = this.props.location;
+  //   pathname = pathname.substring(1, pathname.length);
+  //   // console.log('pathname', pathname)
+  // };
+
+  componentDidMount = async () => {
+    const { location, userInfo } = this.props;
+    const { beautician } = this.state;
+
+    const  response = await axios.get(
+      `http://localhost:9000/api/beautician/getbeauticianName/${userInfo.name}`
+    );
+ 
+   
+    console.log("response.data",response.data);
+ 
+    if (response.data)
+      this.setState({
+        beautician: response.data,
+        // data: response.data
+      });
+   ;
   };
 
   render() {
     const { classes } = this.props;
 
-    const { open, columns, data } = this.state;
+    const { open, columns, data, file, beautician } = this.state;
     return (
       <div>
         <MaterialTable
-          title="ภาพผลงาน"
+          title="รูปภาพร้าน"
           columns={columns}
           data={data}
           options={{
-            selection: false
+            selection: false,
           }}
           editable={{
-           // onRowAdd: newData =>
-            //  new Promise(resolve => {
-           //     setTimeout(() => {
-            //      resolve();
-             //     this.setState(prevState => {
-              //      const data = [...prevState.data];
-              //      data.push(newData);
-              //      return { ...prevState, data };
-               //   });
-               // }, 600);
-             // }),
-            // onRowUpdate: (newData, oldData) =>
-            //   new Promise(resolve => {
-            //     setTimeout(() => {
-            //       resolve();
-            //       if (oldData) {
-            //         this.setState(prevState => {
-            //           const data = [...prevState.data];
-            //           data[data.indexOf(oldData)] = newData;
-            //           return { ...prevState, data };
-            //         });
-            //       }
-            //     }, 600);
-            //   }),
-            onRowDelete: oldData =>
-              new Promise(resolve => {
+            onRowDelete: (oldData) =>
+              new Promise((resolve) => {
                 setTimeout(() => {
                   resolve();
-                  this.setState(prevState => {
+                  this.setState((prevState) => {
                     const data = [...prevState.data];
                     data.splice(data.indexOf(oldData), 1);
                     return { ...prevState, data };
                   });
                 }, 600);
-              })
+              }),
           }}
         />
         <div className="row">
@@ -154,7 +146,6 @@ class Databeautician extends Component {
           >
             <DialogTitle id="alert-dialog-title">{"เพิ่มรูปภาพ"}</DialogTitle>
             <DialogContent>
-              
               <TextField
                 className={classes.margin}
                 id="outlined-file-input"
@@ -167,7 +158,12 @@ class Databeautician extends Component {
                     <InputAdornment position="start">
                       <AddPhotoAlternateIcon />
                     </InputAdornment>
-                  )
+                  ),
+                }}
+                onChange={(e) => {
+                  this.setState({
+                    file: e.target.files[0],
+                  });
                 }}
               />
             </DialogContent>
@@ -176,7 +172,30 @@ class Databeautician extends Component {
                 ยกเลิก
               </Button>
               <Button
-                onClick={this.handleCloseAndSave}
+                onClick={() => {
+                  const { location, userInfo } = this.props;
+                  const { beautician } = this.state;
+                  const formData = new FormData();
+                  console.log(file);
+
+                  formData.append("images", file);
+                  formData.append("beauticians_id", beautician.id);
+                  // formData.append('userId', userInfo.id)
+
+                  axios
+                    .post(
+                      `http://localhost:9000/api/storagebeautician/upload/beautician/${beautician.id}`,
+                      formData
+                    )
+                    .then((response) => {
+                      console.log("เพิ่มรูปภาพสำเร็จ", response);
+                      alert("เพิ่มรูปภาพสำเร็จ");
+                      this.handleClose();
+                    })
+                    .catch((error) => {
+                      console.log(error);
+                    });
+                }}
                 color="primary"
                 autoFocus
               >
@@ -189,5 +208,13 @@ class Databeautician extends Component {
     );
   }
 }
+const mapStateToProps = (state) => ({
+  userInfo: state.user,
+});
+
+const mapDispatchToProps = (dispatch) => {};
 
-export default compose(withStyles(styles), withRouter)(Databeautician);
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(compose(withStyles(styles), withRouter)(AddImage));

Source/b_beauty_project/src/views/BeauticianShopPage/Home/index.js

@@ -129,7 +129,7 @@ class ResponsiveDrawer extends Component {
             </ListItemIcon>
             <ListItemText primary="ตารางงาน" />
           </ListItem>
-          <ListItem
+          {/* <ListItem
             button
             onClick={() => {
               this.handleChangePath("addimage");
@@ -140,7 +140,7 @@ class ResponsiveDrawer extends Component {
               <MailIcon />
             </ListItemIcon>
             <ListItemText primary="ภาพผลงาน" />
-          </ListItem>
+          </ListItem> */}
           
          
          

Source/b_beauty_project/src/views/BeauticianShopPage/Work/index.js

@@ -8,7 +8,9 @@ import {
     KeyboardDatePicker,
   } from '@material-ui/pickers';
 import MaterialTable from "material-table";
+import axios from "axios";
 
+import { connect } from "react-redux";
 const styles = theme => ({
   root: {
     height: 150,
@@ -40,19 +42,13 @@ class Work extends Component {
     columns: [
       { title: "ชื่อคนจอง", field: "name" },
       { title: "รายการจอง", field: "list" },
+      { title: "วันที่จอง" , field: "date"},
 
       { title: "เวลาที่จอง", field: "time" },
 
-      { title: "ช่างที่จอง", field: "booking" }
-    ],
-    data: [
-      {
-        name: "Benz Piyaphorn",
-        list: "อบไอน้ำ",
-        time: "12:00",
-        booking: "ปิยพร อาภรศรี"
-      }
+      { title: "ช่างที่จอง", field: "beautician" }
     ],
+    data: [],
     selectedDate : new Date()
   };
   handleChangeDate = newDate => {
@@ -90,10 +86,24 @@ class Work extends Component {
     //   open: false
     // });
   };
-  componentDidMount = () => {
-    let { pathname } = this.props.location;
-    pathname = pathname.substring(1, pathname.length);
-    // console.log('pathname', pathname)
+  componentDidMount = async () => {
+    const { location, userInfo } = this.props;
+    const { beautician } = this.state;
+
+    const  response = await axios.get(
+      `http://localhost:9000/api/beautician/getbeauticianName/${userInfo.name}`
+    );
+    const  responsebeautician = await axios.get(
+      `http://localhost:9000/api/booking/getBookingbeautician/${userInfo.name}`
+    );
+   
+    console.log("response.data",response.data);
+    if (response.data)
+      this.setState({
+        beautician: response.data,
+        data: responsebeautician.data
+      });
+
   };
 
   render() {
@@ -102,7 +112,7 @@ class Work extends Component {
     const { open, columns, data, selectedDate } = this.state;
     return (
       <div>
-        <div className="row center">
+        {/* <div className="row center">
           <KeyboardDatePicker
             disableToolbar
             variant="inline"
@@ -116,7 +126,7 @@ class Work extends Component {
               "aria-label": "change date"
             }}
           />
-        </div>
+        </div> */}
         <div className="row">
           <MaterialTable
             title="ตารางงาน"
@@ -125,43 +135,7 @@ class Work extends Component {
             options={{
               selection: false
             }}
-            editable={{
-              // onRowAdd: newData =>
-              //  new Promise(resolve => {
-              //     setTimeout(() => {
-              //      resolve();
-              //     this.setState(prevState => {
-              //      const data = [...prevState.data];
-              //      data.push(newData);
-              //      return { ...prevState, data };
-              //   });
-              // }, 600);
-              // }),
-              // onRowUpdate: (newData, oldData) =>
-              //   new Promise(resolve => {
-              //     setTimeout(() => {
-              //       resolve();
-              //       if (oldData) {
-              //         this.setState(prevState => {
-              //           const data = [...prevState.data];
-              //           data[data.indexOf(oldData)] = newData;
-              //           return { ...prevState, data };
-              //         });
-              //       }
-              //     }, 600);
-              //   }),
-              // onRowDelete: oldData =>
-              //   new Promise(resolve => {
-              //     setTimeout(() => {
-              //       resolve();
-              //       this.setState(prevState => {
-              //         const data = [...prevState.data];
-              //         data.splice(data.indexOf(oldData), 1);
-              //         return { ...prevState, data };
-              //       });
-              //     }, 600);
-              //   })
-            }}
+           
           />
         </div>
       </div>
@@ -169,4 +143,14 @@ class Work extends Component {
   }
 }
 
-export default compose(withStyles(styles), withRouter)(Work);
+
+const mapStateToProps = (state) => ({
+  userInfo: state.user,
+});
+
+const mapDispatchToProps = (dispatch) => {};
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(compose(withStyles(styles), withRouter)(Work));

Source/b_beauty_project/src/views/DataShopPage/Databeautician/index.js

@@ -108,13 +108,13 @@ class Databeautician extends Component {
   };
   componentDidMount = async () => {
     const { location, userInfo } = this.props;
-    const { shops } = this.state;
+   
 
     const response = await axios.get(
       `http://localhost:9000/api/shop/getUserId/${userInfo.id}`
     );
     const responsedata = await axios.get(
-      `http://localhost:9000/api/beautician/getbeauticianShopId/${shops.id}`
+      `http://localhost:9000/api/beautician/getbeauticianShopId/${response.data.id}`
     );
     console.log(response.data);
     console.log(responsedata.data);
@@ -152,16 +152,22 @@ class Databeautician extends Component {
           }}
           editable={{
             onRowDelete: (oldData) =>
-              new Promise((resolve) => {
-                setTimeout(() => {
-                  resolve();
-                  this.setState((prevState) => {
-                    const data = [...prevState.data];
-                    data.splice(data.indexOf(oldData), 1);
-                    return { ...prevState, data };
-                  });
-                }, 600);
-              }),
+                new Promise((resolve) => {
+                  setTimeout(() => {
+                    axios.delete(
+                      `http://localhost:9000/api/beautician/deletebeautician/${oldData.id}`
+                    );
+                    console.log("ลบข้อมูลช่างสำเร็จ");
+                    alert("ลบข้อมูลช่างสำเร็จ");
+                    resolve();
+                    this.setState((prevState) => {
+                      const data = [...prevState.data];
+                      data.splice(data.indexOf(oldData), 1);
+                      return { ...prevState, data };
+                    });
+                  }, 600);
+                }),
+            
           }}
         />
         <div className="row">
@@ -332,6 +338,7 @@ class Databeautician extends Component {
                       })
                       .then((response) => {
                         console.log("สร้างผู้ใช้สำเร็จ", response);
+                         alert("เพิ่มข้อมูลช่างสำเร็จ");
                         this.handleClose();
                       })
                       .catch((error) => {

Source/b_beauty_project/src/views/DataShopPage/Home/index.js

@@ -173,7 +173,7 @@ class ResponsiveDrawer extends Component {
             </ListItemIcon>
             <ListItemText primary="ดูคิวจอง" />
           </ListItem>
-          <ListItem
+          {/* <ListItem
             button
             onClick={() => {
               this.handleChangePath("addimage");
@@ -184,7 +184,7 @@ class ResponsiveDrawer extends Component {
               <AddAPhotoIcon />
             </ListItemIcon>
             <ListItemText primary="เพิ่มรูปภาพ" />
-          </ListItem>
+          </ListItem> */}
         </List>
       </div>
     );

Source/b_beauty_project/src/views/DataShopPage/List/index.js

@@ -95,7 +95,7 @@ class List extends Component {
   };
 
   render() {
-    const { classes } = this.props;
+    const { classes ,userInfo} = this.props;
 
     const { columns, data, shop, userId, lists } = this.state;
     return (
@@ -111,7 +111,7 @@ class List extends Component {
             editable={{
               onRowAdd: (newData) =>
                 new Promise((resolve) => {
-                  const { userInfo  } = this.props;
+              
                   newData = { ...newData, shop: shop.id, userId: shop.userId };
 
                   axios
@@ -132,12 +132,14 @@ class List extends Component {
                     });
                 }),
               onRowUpdate: (newData, oldData) =>
+              
                 new Promise((resolve) => {
                   setTimeout(() => {
-                    newData = { ...newData, shop: shop, userId: userId };
+                   
+                    newData = { ...newData, shop: shop.id, userId: shop.userId };
 
                   axios
-                    .post(`http://localhost:9000/api/list/updateList/${oldData.id}`, newData)
+                    .put(`http://localhost:9000/api/list/updateListId/${oldData.id}`, newData)
                     .then((response) => {
                       console.log("แก้ไข list สำเร็จ", response);
                       alert("แก้ไขรายการสำเร็จ");

Source/b_beauty_project/src/views/DataShopPage/Managequeue/index.js

@@ -8,7 +8,9 @@ import {
   KeyboardDatePicker
 } from "@material-ui/pickers";
 import MaterialTable from "material-table";
+import axios from "axios";
 
+import { connect } from "react-redux";
 const styles = theme => ({
   root: {
     height: 150,
@@ -38,19 +40,13 @@ class Managequeue extends Component {
     columns: [
       { title: "ชื่อคนจอง", field: "name" },
       { title: "รายการจอง", field: "list" },
+      { title: "วันที่จอง" , field: "date"},
 
       { title: "เวลาที่จอง", field: "time" },
 
-      { title: "ช่างที่จอง", field: "booking" }
-    ],
-    data: [
-      {
-        name: "Benz Piyaphorn",
-        list: "อบไอน้ำ",
-        time: "12:00",
-        booking: "ปิยพร อาภรศรี"
-      }
+      { title: "ช่างที่จอง", field: "beautician" }
     ],
+    data: [],
     selectedDate: new Date()
   };
   handleChangeDate = newDate => {
@@ -79,10 +75,29 @@ class Managequeue extends Component {
     //   open: false
     // });
   };
-  componentDidMount = () => {
-    let { pathname } = this.props.location;
-    pathname = pathname.substring(1, pathname.length);
+  componentDidMount = async () => {
     // console.log('pathname', pathname)
+    const { location, userInfo } = this.props;
+    const {selectedDate} =this.state
+    // const id = location.state.id;
+    const response = await axios.get(
+      `http://localhost:9000/api/shop/getUserId/${userInfo.id}`
+    );
+    
+    const responsebooking = await axios.get(
+      `http://localhost:9000/api/booking/getBookingShopid/${response.data.id}`
+    );
+    // if (responsebooking.data){
+    //   const responsebookingdate = await axios.get(
+    //     `http://localhost:9000/api/booking/getBookingShopid/${selectedDate}`
+    //   );
+    //   console.log(responsebookingdate.data);
+    // }
+    
+   
+    
+    if (response.data) this.setState({ shop: response.data });
+    if (responsebooking .data) this.setState({ data: responsebooking .data });
   };
 
   render() {
@@ -91,7 +106,7 @@ class Managequeue extends Component {
     const { open, columns, data, selectedDate } = this.state;
     return (
       <div>
-        <div className="row center">
+        {/* <div className="row center">
           <KeyboardDatePicker
             disableToolbar
             variant="inline"
@@ -104,8 +119,25 @@ class Managequeue extends Component {
             KeyboardButtonProps={{
               "aria-label": "change date"
             }}
+            onClick={(e) => {
+              e.preventDefault();
+              axios
+                .post("http://localhost:9000/api/booking/searchBooking", {
+                  name: selectedDate,
+                })
+                .then(async (response) => {
+                  
+                  this.setState({ booking: response.data });
+                  console.log("ค้นหาสำเร็จ", response);
+                  // alert("ค้นหาสำเร็จ");
+                })
+                .catch((error) => {
+                  console.log(error);
+                  alert("ค้นหาไม่สำเร็จ");
+                });
+            }}
           />
-        </div>
+        </div> */}
         <div className="row">
           <MaterialTable
             title="คิวจอง"
@@ -122,4 +154,14 @@ class Managequeue extends Component {
   }
 }
 
-export default compose(withStyles(styles), withRouter)(Managequeue);
+const mapStateToProps = (state) => ({
+  userInfo: state.user,
+});
+
+const mapDispatchToProps = (dispatch) => {};
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(compose(withStyles(styles), withRouter)(Managequeue));
+