Как создать гибкую планировку помещения? - PullRequest
Новая
       13

Как создать гибкую планировку помещения?

0 голосов
/ 03 июля 2019

Я пытаюсь создать поэтажный план для своего приложения разделения рабочего стола. Прямо сейчас комната жестко запрограммирована, но, поскольку это не очень хорошо, я отчаянно пытался найти лучшее решение, позволяющее пользователю выбирать свой собственный план этажа без необходимости создавать каждый HTML-файл вручную.

Я использую Jhipster, и я создал Entities Desk и Transaction. Если вы забронируете рабочий стол, он создаст запись в базе данных (Транзакция) со временем, идентификатором рабочего стола и пользователем.

Прямо сейчас это выглядит как это

Есть ряды и парты, в зависимости от того, как они мне нужны, я добавляю классы css в ряды / столы, такие как «spaceRight», чтобы добавить поле справа. (Код будет показан ниже)

Я все еще новичок, и я просто не знаю, как это решить ... 

<div class="row">
    <div id="test"></div>
    <div class="col-1"></div>
    <div class="col-2 desk card" *ngFor="let desk of allDesks | slice:0:1; let i = index">
        <div class="card-body">
            <div *ngIf="!desk.user" class="mycontainer" [routerLink]="['booking', desk.id]" routerLinkActive="active">
                <div class="container-left">
                    <img src="../../content/images/Icons/calendar-add.svg" class="add-icon">
                </div>
                <div class="container-right">
                    <div class="wrapperofcontainerright">
                        <h4 class="card-link-book">Book Desk</h4>
                    </div>
                </div>
            </div>
            <div *ngIf="desk.user" class="mycontainer">
                <div class="container-left">
                    <img src="../../content/images/Icons/desktop.svg" class="pc-icon">
                </div>
                <div class="container-right">
                    <div class="wrapperofcontainerright">
                        <h4 class="card-title">{{ desk.user.firstName }} {{ desk.user.lastName }}</h4>
                        <h4 class="card-title">{{ desk.placeholderForFuckingUp }}</h4>
                        <button *ngIf="checkIfSameUser(desk.user)" class="card-link-unbook" (click)="unbookDesk(desk.id)">Unbook</button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="col-2 desk card spaceRight" *ngFor="let desk of allDesks | slice:1:2; let i = index">
        <div class="card-body">
            <div *ngIf="!desk.user" class="mycontainer" [routerLink]="['booking', desk.id]" routerLinkActive="active">
                <div class="container-left">
                    <img src="../../content/images/Icons/calendar-add.svg" class="add-icon">
                </div>
                <div class="container-right">
                    <div class="wrapperofcontainerright">
                        <h4 class="card-link-book">Book Desk</h4>
                    </div>
                </div>
            </div>
            <div *ngIf="desk.user" class="mycontainer">
                <div class="container-left">
                    <img src="../../content/images/Icons/desktop.svg" class="pc-icon">
                </div>
                <div class="container-right">
                    <div class="wrapperofcontainerright">
                        <h4 class="card-title">{{ desk.user.firstName }} {{ desk.user.lastName }}</h4>
                        <h4 class="card-title">{{ desk.placeholderForFuckingUp }}</h4>
                        <button *ngIf="checkIfSameUser(desk.user)" class="card-link-unbook" (click)="unbookDesk(desk.id)">Unbook</button>
                </div>
                </div>
            </div>
        </div>
    </div>
...