Skip to content

Menu customization #48

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Charith345 wants to merge 6 commits into
base: post-release-1.0
Choose a base branch
from
Open

Menu customization #48

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
fe4f082
Order-Customization-Admin Completed
Charith345 Dec 4, 2023
69cdafd
Customer-Side Customization
Charith345 Dec 4, 2023
470ad70
small change
Charith345 Dec 5, 2023
5eeaeed
Merge branch 'main' into Menu_Customization
Jeffuz Dec 5, 2023
4ebd9b7
Revert "Merge branch 'main' into Menu_Customization"
Jeffuz Dec 5, 2023
9e26bfc
added image upload
ipsitabisht Dec 11, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
70 changes: 5 additions & 65 deletions client/src/WebSocketService.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
import { AiOutlineConsoleSql } from "react-icons/ai";
import { useState } from 'react';

/**
* WebSocketService is what the client systems will use to communicate with the server
Expand All @@ -10,11 +9,6 @@ const WebSocketService = {
isMaster: null, // type Bool
menu: null, // type json object

waitingOrders: [],
workingOrders: [],
finishedOrders: [],
allOrders: [],

/**
* Establishes a WebSocket connection with the server
* @param {String} hostname Hostname to use to connect to server. Defaults to '127.0.0.1'.
Expand All @@ -36,24 +30,12 @@ const WebSocketService = {
});
window.dispatchEvent(menuUpdateEvent);
}

function dispatchOrderUpdate(orders) {
const orderUpdateEvent = new CustomEvent('orderUpdate', {
detail: {
waitingOrders: orders.waitingOrders,
workingOrders: orders.workingOrders,
finishedOrders: orders.finishedOrders,
}
});
window.dispatchEvent(orderUpdateEvent);
}

function connectToServer(hostname, port) {
return new Promise((resolve, reject) => {
const socket = new WebSocket(`ws://${hostname}:${port}`);
var id = 'NO_ID';
var menu = {};
var allOrders = null;

socket.addEventListener('open', (e) => {
console.log('WebSocket connection is open (connected).');
Expand All @@ -73,11 +55,10 @@ const WebSocketService = {
console.log('Received INIT from server');
id = payload.ID;
menu = payload.menu;
allOrders = payload.allOrders;

console.log("Received menu", menu);

resolve([socket, id, menu, allOrders]);
resolve([socket, id, menu.menuList]);
return;

case 'BROADCAST':
Expand All @@ -94,7 +75,6 @@ const WebSocketService = {

case 'MENU':
WebSocketService.menu = payload.menuList;
console.log("RECEIVED MENU:", payload);
dispatchMenuUpdate('menuUpdate');
break;

Expand All @@ -104,22 +84,8 @@ const WebSocketService = {

case 'ORDERPLACED':
const message = payload.order;
console.log('order:', payload);
console.log(payload.waitingOrders);
allOrders = payload.allOrders;
WebSocketService.waitingOrders = payload.waitingOrders;
WebSocketService.workingOrders = payload.workingOrders;
WebSocketService.finishedOrders = payload.finishedOrders;
console.log("all queues:");
console.log('Waiting orders:', WebSocketService.waitingOrders);
console.log('Working orders:', WebSocketService.workingOrders);
console.log('FInished orders:', WebSocketService.finishedOrders);
dispatchOrderUpdate(allOrders);
break;

case 'ALLORDERS':
console.log('ALLORDERS payload:', payload.allOrders);
dispatchOrderUpdate(allOrders);
console.log(message);
alert("received message:", message);
break;

default:
Expand All @@ -133,16 +99,13 @@ const WebSocketService = {

//this.socket = connectToServer(this.socket, hostname, port);
connectToServer(hostname, port)
.then(([socket, id, menu, allOrders]) => {
.then(([socket, id, menu]) => {
console.log("PROMISE RESOLVED", socket, id);
this.socket = socket;
this.id = id;
this.menu = menu;
this.allOrders = allOrders;
console.log(menu)
if (isMaster){
this.requestMaster();
dispatchOrderUpdate(this.allOrders);
}
dispatchMenuUpdate('menuUpdate');
});
Expand Down Expand Up @@ -171,6 +134,7 @@ const WebSocketService = {
'order': order,
};

console.log(this.socket);
this.socket.send(JSON.stringify(actionObject));
return;
},
Expand All @@ -184,14 +148,6 @@ const WebSocketService = {
return;
},

requestOrders() {
const actionObject = {
'action': 'REQUESTORDERS'
};
this.socket.send(JSON.stringify(actionObject));
return;
},

/**
* Sends a actionObject request to the server
* @param {ActionObject} actionObject
Expand All @@ -203,22 +159,6 @@ const WebSocketService = {
this.socket.send(JSON.stringify(actionObject));
},

workOnItem(item) {
const actionObject = {
action: 'WORKONITEM',
item: item
};
this.socket.send(JSON.stringify(actionObject));
},

finishItem(item) {
const actionObject = {
action: 'FINISHITEM',
item: item
};
this.socket.send(JSON.stringify(actionObject));
},

addListener(callback) {
this.listeners.push(callback);
},
Expand Down
97 changes: 70 additions & 27 deletions client/src/components/admin-menu/AddEditMenuItemForm.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,11 @@ import React, { useState, useEffect } from 'react';
import Camera from '../admin-menu/camera-circle.png';
import Trash from '../admin-menu/trash-icon.png';
import Check from '../admin-menu/check-circle.png';
import MenuCustomization from './MenuCustomization';

const AddEditMenuItemForm = ({ selectedItem, addMenuItem, editMenuItem, deleteMenuItem, setIsOpen }) => {
const [itemData, setItemData] = useState(selectedItem || {});
const [categories, setCategories] = useState([]);
const [editMode, setEditMode] = useState({
id: false,
image: false,
Expand All @@ -24,6 +26,7 @@ const AddEditMenuItemForm = ({ selectedItem, addMenuItem, editMenuItem, deleteMe
itemPrice: '',
itemContent: '',
image: '',
categories: [],
});
}
}, [selectedItem]);
Expand Down Expand Up @@ -61,44 +64,50 @@ const AddEditMenuItemForm = ({ selectedItem, addMenuItem, editMenuItem, deleteMe
itemPrice: '',
itemContent: '',
image: '',
categories: [],
});
}
};

// const handleImageUpload = (files) => {
// const file = files[0];
// if (file) {
// const reader = new FileReader();
// reader.onload = (e) => {
// setItemData({
// ...itemData,
// image: e.target.result,
// });
// };
// reader.readAsDataURL(file);
// }
// };
const handleCategoriesUpdate = (updatedCategories) => {
setCategories(updatedCategories);
setItemData({...itemData, categories: updatedCategories});
}

const handleImageUpload = (files) => {
const file = files[0];
if (file) {
const relativePath = `test/${file.name}`;
setItemData({
...itemData,
image: relativePath,

});

const reader = new FileReader();
reader.onload = (e) => {
setItemData({
...itemData,
image: e.target.result,
});
};
reader.readAsDataURL(file);
}
};
const handleImageChange = (e) => {
setItemData({ ...itemData, image: e.target.value }); // update image as a string
};
// const handleImageUpload = (files) => {
// const file = files[0];
// if (file) {
// const relativePath = `test/${file.name}`;
// setItemData({
// ...itemData,
// image: relativePath,

// });

// }
// };
// const handleImageChange = (e) => {
// setItemData({ ...itemData, image: e.target.value }); // update image as a string
// };

return (
<div className="flex flex-col ">
<div className="flex">
<div className="w-3/5 p-8 bg-gray-100 relative">
{/* {itemData.image ? (
{itemData.image ? (
<div>
<img src={itemData.image} alt="Selected Image" className="w-full h-auto" />
<button
Expand All @@ -119,15 +128,15 @@ const AddEditMenuItemForm = ({ selectedItem, addMenuItem, editMenuItem, deleteMe
className="custom-file-input"
/>
</label>
)} */}
<input
)}
{/* <input
type="text"
name="image"
placeholder="Image Path"
value={itemData.image}
onChange={handleImageChange}
className="w-full break-all p-2 border border-gray-300 rounded"
/>
/> */}
</div>

<div className="w-1/2 p-4">
Expand Down Expand Up @@ -189,6 +198,40 @@ const AddEditMenuItemForm = ({ selectedItem, addMenuItem, editMenuItem, deleteMe
</div>
)}
</div>
<MenuCustomization categories={itemData.categories} setCategories={handleCategoriesUpdate}/>
{itemData?.categories?.map((category) => (
<div>
<div>{category.name}</div>
{category.optionType === 'Single Option Selectable' && (
<div>
{category.options.map((option) => (
<div>
<input
type="radio"
value={option}
name={category.name}
/>
<label>{option}</label>
</div>
))}
</div>
)}
{category.optionType === 'Multiple Options Selectable' && (
<div>
{category.options.map((option) => (
<div>
<input
type="checkbox"
value={option}
name={category.name}
/>
<label>{option}</label>
</div>
))}
</div>
)}
</div>
))}
</div>
</div>
<div className="flex justify-end space-x-4 p-4">
Expand Down
Loading