DEV Community

Need help / suggestions on a project

Igor Ilic on August 05, 2019

So for the past few days I have been developing a simple web base app to allow waiters at my brothers bar to manage tables and tabs for guests. I...

Read full post

Oz Ramos • Aug 6 '19

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:

<div class="room">
  <div class="table">
    <img>
    <button onClick="deleteTable">x</button>
  </div>
  <div class="table">...</div>
  <div class="table">...</div>
</div>

Then, I'd make use of one of the many drag and drop libraries, like:

Joe Beretta • Aug 5 '19

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.

Igor Ilic • Aug 5 '19

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.

Joe Beretta • Aug 5 '19

Yeah it's a problem. But for drag&drop there r many libs if u want

Igor Ilic • Aug 5 '19

Can you provide a link for some if you now them ? So I could take a look and maybe try and implement them.

Joe Beretta • Aug 5 '19

Check this one: draggable

William Antonelli • Aug 5 '19

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.

Igor Ilic • Aug 5 '19

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.

elfalem • Aug 10 '19

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:

William Antonelli • Aug 7 '19

Don't bother with drag and drop, can just click on the grid area and have a modal with add/remove.

Arber Braja • Aug 5 '19

One thing that can be done, dont know if its worth doing since it might require some time could be:

create a panel where you can add tables dynamically.
each new table added and saved in db gets shown in frontend as an empty div
style the div to have a specific with and height using css.
use some kind of drag and drop js/jquery library to make the divs draggable in a pane.
configure the div/tables by moving them around on the pane until you are happy.