If you're going vanilla then I would start by visualizing the app as one .room that contains a bunch of .table's. By using HTML, you can even add sub elements to the table, like delete buttons:
Then, I'd make use of one of the many drag and drop libraries, like:
First thing is that came to mind is using two-dimensional square array. The easiest way is filling it with 1/0 or true/false and visualising it in the frontend. Also it's easy to store it in DB and manage it using check boxes if you need change something on the fly.
For styling it u would use css flexbox / grid.
Yeah, I thought of a 2D array as well. But in that case I would need to set each view port as a grid like 5 x 20 (each block being 1x1) and then fill each block with some color if it was set to 1 or true.
But this still leaves me with wondering how to implement like drag & drop ability or creation of new block for an admin to change the layout ? As the grid wouldn't be visible to them, only the filled spaces. So they would have to try and guess where the block would be placed. Also that kind of limits the movement of the block as they would need have like a free range movement all over the grid and could take up like 1/3 of one block and 2/3 of the one next to it.
Yeah it's a problem. But for drag&drop there r many libs if u want
Can you provide a link for some if you now them ? So I could take a look and maybe try and implement them.
Check this one: draggable
I would just make every object (table) a button/link. Each object can be placed onto a pre-defined grid.
Can then add/remove objects on the grid. Get more complex from there, such as assigning waiters to the grid section which would link to that table/object.
I've implemented the click functionality and everything that needs to come after that. So that each waiter can have their own table(s) and tabs on them.
But the problem mostly arrives when the admin wants to change the position of tables, move them freely around the screen and have them saved in that position. And I'm not sure if I can use the mouse X/Y cords due to the resolutions to use it as a center of block and draw around it and than store it like that in the db.
You can use the mouse DOM coordinates. You just have to make sure you translate them into SVG coordinates. You may find these links helpful:
Don't bother with drag and drop, can just click on the grid area and have a modal with add/remove.
One thing that can be done, dont know if its worth doing since it might require some time could be:
We're a place where coders share, stay up-to-date and grow their careers.
We strive for transparency and don't collect excess data.