forked from zolcsi/map-of-pi
-
Notifications
You must be signed in to change notification settings - Fork 3
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
15 changed files
with
1,144 additions
and
595 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
266 changes: 183 additions & 83 deletions
266
frontend/src/app/business/business-settings/business-menu/business-menu.component.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,94 +1,194 @@ | ||
| <main class="menu-settings"> | ||
| <section class="menu-settings__section"> | ||
| <div class="menu-settings__toggle"> | ||
| <label for="menu-toggle" class="menu-settings__label">Menu <span class="toggle-status">{{ menuStatusLabel }}</span> | ||
| <input type="checkbox" id="menu-toggle" name="menu_toggle" class="menu-settings__checkbox" #menuToggle (change)="onToggleChange('menu-toggle')"> | ||
| <span class="menu-settings__slider"></span> | ||
| </label> | ||
| </div> | ||
| <div class="menu-settings__toggle hidden" #orderToggleDiv> | ||
| <label for="order-toggle" class="menu-settings__label">Accept orders without payment <span class="toggle-status">{{ orderStatusLabel }}</span> | ||
| <input type="checkbox" id="order-toggle" name="order_toggle" class="menu-settings__checkbox" (change)="onToggleChange('order-toggle')"> | ||
| <span class="menu-settings__slider"></span> | ||
| </label> | ||
| </div> | ||
| <div class="menu-settings__toggle hidden" #paymentToggleDiv> | ||
| <label for="payment-toggle" class="menu-settings__label">Accept Pi Transactions <span class="toggle-status">{{ paymentStatusLabel }}</span> | ||
| <input type="checkbox" id="payment-toggle" name="payment_toggle" class="menu-settings__checkbox" (change)="onToggleChange('payment-toggle')"> | ||
| <span class="menu-settings__slider"></span> | ||
| </label> | ||
| </div> | ||
| </section> | ||
|
|
||
| <section class="menu-setting__floating-button-section" #addItemButtonSection> | ||
| <button class="menu-setting__floating-button hidden" #floatingButton (click)="showModal()"> | ||
| <i class="fa-solid fa-circle-plus"></i> | ||
| </button> | ||
| </section> | ||
| <div id="items-display-area" #itemsDisplayArea></div> | ||
| </main> | ||
| <main class="mb-[100px]"> | ||
| <section class="menu-settings__section"> | ||
| <div class="mb-3">Shop name {{ shop.name }}</div> | ||
| <div class="menu-settings__toggle"> | ||
| <label for="menu-toggle" class="menu-settings__label" | ||
| >Menu <span class="toggle-status">{{ menuStatusLabel }}</span> | ||
| <input | ||
| type="checkbox" | ||
| id="menu-toggle" | ||
| name="menu_toggle" | ||
| class="menu-settings__checkbox" | ||
| #menuToggle | ||
| (change)="onToggleChange('menu-toggle')" /> | ||
| <span class="menu-settings__slider"></span> | ||
| </label> | ||
| </div> | ||
| <div class="menu-settings__toggle hidden" #orderToggleDiv> | ||
| <label for="order-toggle" class="menu-settings__label" | ||
| >Accept orders without payment | ||
| <span class="toggle-status">{{ orderStatusLabel }}</span> | ||
| <input | ||
| type="checkbox" | ||
| id="order-toggle" | ||
| name="order_toggle" | ||
| class="menu-settings__checkbox" | ||
| (change)="onToggleChange('order-toggle')" /> | ||
| <span class="menu-settings__slider"></span> | ||
| </label> | ||
| </div> | ||
| <div class="menu-settings__toggle hidden" #paymentToggleDiv> | ||
| <label for="payment-toggle" class="menu-settings__label" | ||
| >Accept Pi Transactions | ||
| <span class="toggle-status">{{ paymentStatusLabel }}</span> | ||
| <input | ||
| type="checkbox" | ||
| id="payment-toggle" | ||
| name="payment_toggle" | ||
| class="menu-settings__checkbox" | ||
| (change)="onToggleChange('payment-toggle')" /> | ||
| <span class="menu-settings__slider"></span> | ||
| </label> | ||
| </div> | ||
| </section> | ||
|
|
||
| <!-- The modal itself --> | ||
| <div class="modal" #addItemModal [style.display]="isPreviewImageVisible ? 'block' : 'none'"> | ||
| <div class="modal__content"> | ||
| <section class="menu-setting__floating-button-section" #addItemButtonSection> | ||
| <button | ||
| class="menu-setting__floating-button hidden" | ||
| #floatingButton | ||
| (click)="showModal()"> | ||
| <i class="fa-solid fa-circle-plus"></i> | ||
| </button> | ||
| </section> | ||
|
|
||
| <form [formGroup]="businessProductsForm"> | ||
| <button type="button" class="modal__close-button" aria-label="Close" | ||
| (click)="hideModal($event)">×</button> | ||
| <div class="container mx-auto px-4"> | ||
| <div class="grid grid-cols-2 sm:grid-cols-2 gap-2" #itemsDisplayArea></div> | ||
| </div> | ||
| </main> | ||
|
|
||
| <!-- Modal title --> | ||
| <h2 class="modal__title">Add new item</h2> | ||
| <!-- add product to shop model starts here --> | ||
| <div | ||
| class="modal" | ||
| #addItemModal | ||
| [style.display]="isPreviewImageVisible ? 'block' : 'none'"> | ||
| <div class="modal__content"> | ||
| <form [formGroup]="businessProductsForm"> | ||
| <button | ||
| type="button" | ||
| class="modal__close-button" | ||
| aria-label="Close" | ||
| (click)="hideModal($event)"> | ||
| × | ||
| </button> | ||
|
|
||
| <!-- Add item name --> | ||
| <div class="modal__item-name"> | ||
| <label for="item-name" class="modal__label">Item name</label> | ||
| <input type="text" id="item-name" class="modal__input modal__input-item-name" | ||
| formControlName="itemName" /> | ||
| </div> | ||
| <!-- Modal title --> | ||
| <h2 class="modal__title">Add Product into your shop</h2> | ||
|
|
||
| <!-- Add item button --> | ||
| <div class="modal__add-item-button"> | ||
| <input type="file" id="item-image-upload" class="modal__input-file" accept="image/*" | ||
| style="display: none;" (change)="handleImageUpload($event)" /> | ||
| <label for="item-image-upload" class="modal__add-button" aria-label="Add item"> | ||
| <img [src]="previewImageSrc ? previewImageSrc : '../../../../assets/images/business/add-item-button.png'" | ||
| alt="Add item button" /> | ||
| </label> | ||
| <div id="image-preview" class="modal__image-preview"> | ||
| <img [src]="previewImageSrc" alt="Image Preview" *ngIf="isPreviewImageVisible" /> | ||
| <span class="image-preview__close" (click)="clearPreviewImage()" *ngIf="isPreviewImageVisible">×</span> | ||
| </div> | ||
| </div> | ||
| <!-- product name--> | ||
| <div class="flex flex-col gap-0 w-full mb-2"> | ||
| <label for="item-name" class="modal__label font-bold" | ||
| >Product name</label | ||
| > | ||
| <input | ||
| type="text" | ||
| id="item-name" | ||
| class="appearance-none border border-gray-300 rounded-md py-2 px-4 leading-tight focus:outline-none focus:border-blue-500" | ||
| formControlName="itemName" /> | ||
| </div> | ||
|
|
||
| <!-- Add price input --> | ||
| <div class="modal__add-price"> | ||
| <label for="item-price" class="modal__label modal__label-text">Price</label> | ||
| <input type="text" id="item-price" class="modal__input modal__input--price" | ||
| formControlName="itemPrice" /> | ||
| <div class="modal__item-icon"> | ||
| <img src="../../../../assets/images/business/Pi-logo.png" alt="Pi logo"> | ||
| </div> | ||
| </div> | ||
| <!-- product images --> | ||
| <div class="flex flex-col gap-1 w-full mb-3"> | ||
| <label for="item-name" class="modal__label text-gray-700 font-bold" | ||
| >Product images</label | ||
| > | ||
| <input | ||
| type="file" | ||
| id="item-image-upload" | ||
| class="modal__input-file hidden" | ||
| accept="image/*" | ||
| (change)="handleImageUpload($event)" /> | ||
| <label | ||
| for="item-image-upload" | ||
| class="modal__add-button bg-blue-500 hover:bg-blue-600 text-white font-semibold py-2 px-4 rounded-md cursor-pointer flex items-center justify-center" | ||
| aria-label="Add item"> | ||
| <img | ||
| [src]=" | ||
| previewImageSrc | ||
| ? previewImageSrc | ||
| : '../../../../assets/images/business/add-item-button.png' | ||
| " | ||
| alt="Add item button" | ||
| class="w-6 h-6 mr-2" /> | ||
| Add Image | ||
| </label> | ||
| <div id="image-preview" class="modal__image-preview"> | ||
| <img | ||
| [src]="previewImageSrc" | ||
| alt="Image Preview" | ||
| *ngIf="isPreviewImageVisible" | ||
| class="w-full h-auto" /> | ||
| <span | ||
| class="image-preview__close absolute top-2 right-2 text-white bg-red-500 rounded-full w-6 h-6 flex items-center justify-center cursor-pointer" | ||
| (click)="clearPreviewImage()" | ||
| *ngIf="isPreviewImageVisible" | ||
| >×</span | ||
| > | ||
| </div> | ||
| </div> | ||
|
|
||
| <!-- Preparation time input group --> | ||
| <div class="modal__prep-time"> | ||
| <label for="prep-time" class="modal__label">How long to prepare this meal?</label> | ||
| <input type="text" id="prep-time" class="modal__input modal__input-prep-time" | ||
| formControlName="prepTime" /> | ||
| </div> | ||
| <!-- product price --> | ||
|
|
||
| <!-- Description input group --> | ||
| <div class="modal__description"> | ||
| <label for="description" class="modal__label">Description</label> | ||
| <textarea id="description" class="modal__textarea" maxlength="50" rows="4" | ||
| formControlName="description"></textarea> | ||
| </div> | ||
| <div class="flex flex-col gap-1 mb-3 w-full"> | ||
| <label for="item-price" class="text-gray-700 font-bold">Price</label> | ||
| <div class="relative"> | ||
| <input | ||
| type="text" | ||
| id="item-price" | ||
| class="border border-gray-300 w-full rounded-md px-3 py-2 focus:outline-none focus:border-blue-500" | ||
| formControlName="itemPrice" /> | ||
| <span | ||
| class="absolute inset-y-0 right-0 flex items-center px-2 text-gray-500"> | ||
| PI | ||
| </span> | ||
| </div> | ||
| <!-- <div class="modal__item-icon"> | ||
| <img | ||
| src="../../../../assets/images/business/Pi-logo.png" | ||
| alt="Pi logo" | ||
| class="w-8 h-8" /> | ||
| </div> --> | ||
| </div> | ||
|
|
||
| <!-- Confirm button --> | ||
| <div class="modal__confirm"> | ||
| <button type="button" class="modal__confirm-btn" (click)="onModalConfirm()">Confirm</button> | ||
| </div> | ||
| </form> | ||
| <!-- Preparation time input group --> | ||
| <div class="flex gap-0 flex-col mb-3"> | ||
| <label for="prep-time" class="modal__label font-bold" | ||
| >How long to prepare this meal?</label | ||
| > | ||
| <input | ||
| type="text" | ||
| id="prep-time" | ||
| class="appearance-none border border-gray-300 rounded-md py-2 px-4 leading-tight focus:outline-none focus:border-blue-500" | ||
| formControlName="prepTime" /> | ||
| </div> | ||
|
|
||
| </div> | ||
| <!-- Description input group --> | ||
| <div class="modal__description"> | ||
| <label for="description" class="modal__label font-bold" | ||
| >Description</label | ||
| > | ||
| <textarea | ||
| id="description" | ||
| class="border border-gray-300 rounded-md w-full px-3 py-2 focus:outline-none focus:border-blue-500 resize-none" | ||
| maxlength="50" | ||
| rows="4" | ||
| formControlName="description"></textarea> | ||
| </div> | ||
|
|
||
| <!-- Confirm button --> | ||
| <div class="modal__confirm"> | ||
| <button | ||
| type="button" | ||
| class="modal__confirm-btn" | ||
| (click)="addProductToShop()"> | ||
| @if (isLoading) { | ||
| Loading.. | ||
| } @else { | ||
| Confirm | ||
| } | ||
| </button> | ||
| </div> | ||
| </form> | ||
| </div> | ||
| </div> | ||
|
|
||
| <!-- add product to shop ends here --> |
Oops, something went wrong.