-
Notifications
You must be signed in to change notification settings - Fork 0
/
orderView.js
62 lines (49 loc) · 1.79 KB
/
orderView.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
export const showOrder = (tables, menuPaper) => {
if (!document.querySelector("#order-div")) {
document.querySelector("#app").appendChild(makeOrderHTML(tables, menuPaper));
}
}
export const hideOrder = () => {
const menu = document.querySelector("#order-div");
if (menu) {
document.querySelector("#app").removeChild(menu);
}
}
export const getSelectedTable = () => {
return Array.prototype
.filter
.call(document.getElementsByName("table"), (table) => (table.checked === true))
.map((table) => Number(table.value));
}
const makeOrderHTML = (tables, menuPaper) => {
let menuHTML = document.createElement("div");
menuHTML.setAttribute("id", "order-div")
menuHTML.innerHTML = makeCheckBox(tables) + menuPaperHTML(menuPaper);
return menuHTML;
}
const menuPaperHTML = (menuPaper) => {
let menuPaperHTML = `<table border = 1px>
<th>순서</th><th>메뉴이름</th><th>가격</th><th>주문하기</th>
${makeMenuTable(menuPaper)}
</table>`;
return menuPaperHTML;
}
const makeMenuTable = (menuPaper) => {
let menuTable = "";
menuTable += Object.values(menuPaper).map((oneMenu, index) =>
`<tr>
<td>${index + 1}</td>
<td>${oneMenu.name}</td>
<td>${oneMenu.price}</td>
<td><button class=order-button data-menu-name=${oneMenu.name}>주문하기</button></td>
</tr>`
).join("");
return menuTable
}
const makeCheckBox = (tables) => {
let checkboxHTML =
`<form id=check-box-form>
${Object.values(tables).map((table) => `<label><input type=checkbox name=table value=${table.number}>${table.number}</label>`).join(" ")}
</form>`
return checkboxHTML;
}