admin-php-module/web/views/roommap/index.html

<div id="container-places" style="bottom: 20px; right: 20px; position: fixed;">
    <div class="m-b">
        <div class="btn-group">
            <button id="create_place" type="button" class="btn info btn-outline b-info" ng-click="createPlace()">
                Добавить зал
            </button>
            <button id="back" type="button" class="btn info p-x-md pull-left" data-toggle="modal"
                    data-target="#back_places">Назад
            </button>
            <button id="create_table" type="button" class="btn info btn-outline b-info"
                    ng-click="createTable(place_id)">Добавить стол
            </button>
            <button id="save_tables" type="button" class="btn info btn-outline b-info"
                    ng-click="saveTables(place_id, tables)">Сохранить
            </button>
            <button id="save_places" type="button" class="btn info btn-outline b-info" ng-click="savePlaces(roommap)">
                Сохранить
            </button>
        </div>

    </div>

</div>
<div id="back_places" class="modal confirm-box" data-backdrop="true" style="z-index: 1052">
    <div class="bottom white b-b" style="height: 90px">
        <div class="confirm-box-body p-lg">
            <p>Сохранить изменения в текущем зале?</p>
        </div>

        <div class="confirm-box-footer">
            <button type="button" class="btn dark-white p-x-md" data-dismiss="modal" ng-click="back()">Нет</button>
            <button type="button" class="btn danger p-x-md" ng-model="tables" data-dismiss="modal"
                    ng-click="saveTables(place_id, tables)">Да
            </button>
        </div>
    </div>
</div>
<div class="padding" id="places">
    <div class="box">
        <div class="padding">
            <h4>Список залов
                <ul class="nav pull-right">
                    <li class="nav-item ">
                        <span bs-tooltip="" title="FAQ" class="text-muted inline p-a-xs m-r-sm ng-scope">
								<h5><i class="fa fa-question"></i></h5>
                        </span>
                    </li>
                </ul>
            </h4>

            <hr/>
            <div class="table-responsive">
                <table class="table table-bordered m-a-0">
                    <thead>
                    <th ng-repeat="place in roommap">
                        <button type="button" class="btn info btn-block" sglclick="getTables(place.place_id)"
                                ios-dblclick="editPlace(place.place_id)" context-menu
                                data-target="place-{{ place.place_id }}">{{place.place_name}}
                        </button>
                        <div class="dropdown" id="place-{{ place.place_id }}" style="position: fixed; z-index: 2;">
                            <ul class="dropdown-menu" role="menu">
                                <li>
                                    <a class="pointer" role="menuitem" tabindex="1"
                                       ng-click="editPlace(place.place_id, place.place_name)">
                                        Редактировать
                                    </a>
                                    <a class="pointer" role="menuitem" tabindex="1"
                                       ng-click="deletePlace($index)">
                                        Удалить
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </th>
                    </thead>
                </table>
            </div>
        </div>
    </div>
</div>
<div class="padding" id="background_1" ng-style="{'max-width':(maxWidth) + 'px', 'width':(screenWidth) + 'vw'}">
    <div class="box">
        <div class="padding" id="background">
            <!--<div id="tables" class="box" ng-style="{'height':(windowHeight) + 'px'}">-->
            <div id="tables" class="box" ng-style="{'height':(windowHeight) + 'px'}" data-target="tables_editor"
                 context-menu>
                <div class="dropdown" id="tables_editor" style="position: fixed; z-index: 2;">
                    <ul class="dropdown-menu" role="menu">
                        <li>
                            <a class="pointer" role="menuitem" tabindex="1"
                               ng-click="alignTables()">
                                Выровнять по сетке
                            </a>
                        </li>
                    </ul>
                </div>
                <div ng-repeat="table in tables" ng-model="tables" context-menu>

                    <div ng-if="table.type == 0" id="{{ 'table_' + $index }}" class="demo-div" draggable resize
                         context-menu
                         data-target="table-{{ $index }}"
                         ng-mouseup="getCoords($event, $index, table.table_id, table.place_id)"
                         ng-style="{'width':'' + table.width * percentWidth + 'px', 'height':'' + table.height * percentHeight + 'px', 'top':'calc(' + top + 'px + ' + table.x * percentHeight + 'px)', 'left': 'calc(' + left + 'px + ' + table.y * percentWidth + 'px)'}"
                         style="position: fixed;cursor: default;font-family: sans-serif;text-align: center;background-color: #FFFFFF;border: 2px solid #2196f3; z-index: 1; border-radius: 5%">
                        <div class="box-header">
                            <small>{{table.name}}</small>
                            <small>{{table.table_id}}</small>
                        </div>

                    </div>

                    <div ng-if="table.type == 1" id="{{ 'table_' + $index }}" class="demo-div" draggable resize
                         context-menu
                         data-target="table-{{ $index }}"
                         ng-mouseup="getCoords($event, $index, table.table_id, table.place_id)"
                         ng-style="{'width':'' + table.width * percentWidth + 'px', 'height':'' + table.height * percentHeight + 'px', 'top':'calc(' + top + 'px + ' + table.x * percentHeight + 'px)', 'left': 'calc(' + left + 'px + ' + table.y * percentWidth + 'px)'}"
                         style="position: fixed;cursor: default;font-family: sans-serif;text-align: center;background-color: #FFFFFF;border: 2px solid #2196f3; z-index: 1; border-radius: 50%">
                        <div class="box"
                             ng-style="{'width':'' + table.width * percentWidth + 'px', 'height':'' + table.height * percentHeight + 'px'}"
                             style="background: transparent; box-shadow: 0 0px 0px transparent;">
                            <div class="box-header">
                                <small>{{table.name}}</small>
                                <small>{{table.table_id}}</small>
                            </div>
                            <div class="box-footer"></div>
                        </div>


                    </div>

                    <div class="dropdown" id="table-{{ $index }}" style="position: fixed; z-index: 2;">
                        <ul class="dropdown-menu" role="menu">
                            <li>
                                <a class="pointer" role="menuitem" tabindex="1"
                                   ng-click="duplicateTable($index, table.place_id)">
                                    Дублировать
                                </a>
                                <a class="pointer" role="menuitem" tabindex="2"
                                   ng-click="editTable($index, table)">
                                    Редактировать
                                </a>
                                <a class="pointer" role="menuitem" tabindex="3"
                                   ng-click="deleteTable($index)">
                                    Удалить
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>

            </div>
        </div>
    </div>
</div>


<div class="modal fade" id="table-edit" data-backdrop="true">
    <div ui-include="'../views/roommap/items/edit-table.html'"></div>
</div>
<div class="modal fade" id="table-create" data-backdrop="true">
    <div ui-include="'../views/roommap/items/create-table.html'"></div>
</div>
<div class="modal fade" id="place-create" data-backdrop="true">
    <div ui-include="'../views/roommap/items/create-place.html'"></div>
</div>
<div class="modal fade" id="place-edit" data-backdrop="true">
    <div ui-include="'../views/roommap/items/edit-place.html'"></div>
</div>

<script type="text/javascript" src="/libs/js/moment/locale/ru.js"></script>