Chore: Moved the formatting to the main style sheet because it was used everywhere.
Also, moved to sass to get theme colors from the material design library
This commit is contained in:
tanshu committed
1 parent
d39712a347
commit
4e4cebf5d4
32 files changed
+367
-451
No files matched your search
@@ -1,18 +0,0 @@
|
||||
.square-button {
|
||||
min-width: 150px;
|
||||
max-width: 150px;
|
||||
min-height: 150px;
|
||||
cursor: pointer;
|
||||
margin: 20px;
|
||||
}
|
||||
.selected {
|
||||
background-color: green;
|
||||
}
|
||||
.item-name {
|
||||
text-align: center;
|
||||
padding: 0.5rem;
|
||||
}
|
||||
.face {
|
||||
background-color: #3f51b5;
|
||||
color: #ffffff;
|
||||
}
|
||||
@@ -5,28 +5,28 @@
|
||||
class="flex flex-col square-button mr-5, mb-5"
|
||||
matRipple
|
||||
(click)="select('REGULAR_BILL')"
|
||||
[class.selected]="selected === 'REGULAR_BILL'"
|
||||
[class.face]="selected !== 'REGULAR_BILL'"
|
||||
[class.strong-primary]="selected === 'REGULAR_BILL'"
|
||||
[class.primary]="selected !== 'REGULAR_BILL'"
|
||||
>
|
||||
<h3 class="item-name">Regular</h3>
|
||||
<h3>Regular</h3>
|
||||
</mat-card>
|
||||
<mat-card
|
||||
class="flex flex-col square-button mr-5, mb-5"
|
||||
matRipple
|
||||
(click)="select('STAFF')"
|
||||
[class.selected]="selected === 'STAFF'"
|
||||
[class.face]="selected !== 'STAFF'"
|
||||
[class.stron-primary]="selected === 'STAFF'"
|
||||
[class.primary]="selected !== 'STAFF'"
|
||||
>
|
||||
<h3 class="item-name">Staff</h3>
|
||||
<h3>Staff</h3>
|
||||
</mat-card>
|
||||
<mat-card
|
||||
class="flex flex-col square-button mr-5, mb-5"
|
||||
matRipple
|
||||
(click)="select('NO_CHARGE')"
|
||||
[class.selected]="selected === 'NO_CHARGE'"
|
||||
[class.face]="selected !== 'NO_CHARGE'"
|
||||
[class.strong-primary]="selected === 'NO_CHARGE'"
|
||||
[class.primary]="selected !== 'NO_CHARGE'"
|
||||
>
|
||||
<h3 class="item-name">No Charge</h3>
|
||||
<h3>No Charge</h3>
|
||||
</mat-card>
|
||||
</div>
|
||||
</mat-dialog-content>
|
||||
|
||||
@@ -1,77 +0,0 @@
|
||||
.square-button {
|
||||
min-width: 150px;
|
||||
max-width: 150px;
|
||||
min-height: 150px;
|
||||
}
|
||||
|
||||
.right-align {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
table {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.mat-column-select {
|
||||
flex: 0 0 60px;
|
||||
}
|
||||
|
||||
.grey900 {
|
||||
background-color: #1b5e20;
|
||||
color: #ffffff;
|
||||
font-size: 1.2em;
|
||||
}
|
||||
|
||||
.grey700 {
|
||||
background-color: #388e3c;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.grey500 {
|
||||
background-color: #4caf50;
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
.grey300 {
|
||||
background-color: #81c784;
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
.blue400 {
|
||||
background-color: #42a5f5;
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
.blue800 {
|
||||
background-color: #1565c0;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.red100 {
|
||||
background-color: #ffcdd2;
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
.deep-purple-50 {
|
||||
background-color: #ede7f6;
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
.deep-purple-100 {
|
||||
background-color: #d1c4e9;
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
.deep-purple-200 {
|
||||
background-color: #b39ddb;
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
.yellow300 {
|
||||
background-color: #fff176;
|
||||
}
|
||||
|
||||
.yellow-for-hh-printed {
|
||||
background-color: #f7ca18;
|
||||
}
|
||||
@@ -72,83 +72,107 @@
|
||||
<ng-container matColumnDef="quantity">
|
||||
<mat-header-cell *matHeaderCellDef>Quantity</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row" class="right-align">
|
||||
<button mat-icon-button (click)="subtractOne(row)" [disabled]="row.isPrinted" *ngIf="!row.isKot">
|
||||
<mat-icon class="del">indeterminate_check_box</mat-icon>
|
||||
<button
|
||||
mat-icon-button
|
||||
class="small-icon-button"
|
||||
(click)="subtractOne(row)"
|
||||
[disabled]="row.isPrinted"
|
||||
*ngIf="!row.isKot"
|
||||
>
|
||||
<mat-icon>indeterminate_check_box</mat-icon>
|
||||
</button>
|
||||
<button mat-icon-button (click)="quantity(row)" [disabled]="rowQuantityDisabled(row)" *ngIf="!row.isKot">
|
||||
<button
|
||||
mat-icon-button
|
||||
class="small-icon-button"
|
||||
(click)="quantity(row)"
|
||||
[disabled]="rowQuantityDisabled(row)"
|
||||
*ngIf="!row.isKot"
|
||||
>
|
||||
{{ row.quantity }}
|
||||
</button>
|
||||
<button mat-icon-button (click)="addOne(row)" [disabled]="row.isPrinted" *ngIf="!row.isKot">
|
||||
<mat-icon class="del">control_point</mat-icon>
|
||||
<button
|
||||
mat-icon-button
|
||||
class="small-icon-button"
|
||||
(click)="addOne(row)"
|
||||
[disabled]="row.isPrinted"
|
||||
*ngIf="!row.isKot"
|
||||
>
|
||||
<mat-icon>control_point</mat-icon>
|
||||
</button>
|
||||
<button mat-icon-button (click)="removeItem(row)" [disabled]="row.isPrinted" *ngIf="!row.isKot">
|
||||
<mat-icon class="del">cancel</mat-icon>
|
||||
</button>
|
||||
<button mat-icon-button (click)="modifier(row)" [disabled]="row.isPrinted" *ngIf="!row.isKot">
|
||||
<mat-icon class="del">assignment</mat-icon>
|
||||
<button
|
||||
mat-icon-button
|
||||
class="small-icon-button"
|
||||
(click)="modifier(row)"
|
||||
[disabled]="row.isPrinted"
|
||||
*ngIf="!row.isKot"
|
||||
>
|
||||
<mat-icon>assignment</mat-icon>
|
||||
</button>
|
||||
<button mat-icon-button (click)="moveKot(row)" [disabled]="row.isKot && !row.kotId" *ngIf="row.isKot">
|
||||
<mat-icon class="del">open_in_new</mat-icon>
|
||||
</button>
|
||||
</mat-cell>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="gross-title">
|
||||
<mat-footer-cell *matFooterCellDef class="grey300 bold">Gross</mat-footer-cell>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="gross-amount">
|
||||
<mat-footer-cell *matFooterCellDef class="grey300 bold right-align">{{
|
||||
bs.grossAmount | async | currency : 'INR'
|
||||
}}</mat-footer-cell>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="hh-title">
|
||||
<mat-footer-cell *matFooterCellDef class="grey300 bold">Happy Hour Discount</mat-footer-cell>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="hh-amount">
|
||||
<mat-footer-cell *matFooterCellDef class="grey300 bold right-align">{{
|
||||
bs.hhAmount | async | currency : 'INR'
|
||||
}}</mat-footer-cell>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="discount-title">
|
||||
<mat-footer-cell *matFooterCellDef class="grey500 bold">Discount</mat-footer-cell>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="discount-amount">
|
||||
<mat-footer-cell *matFooterCellDef class="grey500 bold right-align">{{
|
||||
bs.discountAmount | async | currency : 'INR'
|
||||
}}</mat-footer-cell>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="tax-title">
|
||||
<mat-footer-cell *matFooterCellDef class="grey700 bold">Tax</mat-footer-cell>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="tax-amount">
|
||||
<mat-footer-cell *matFooterCellDef class="grey700 bold right-align">{{
|
||||
bs.taxAmount | async | currency : 'INR'
|
||||
}}</mat-footer-cell>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="amount-title">
|
||||
<mat-footer-cell *matFooterCellDef class="grey900">Amount</mat-footer-cell>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="amount-amount">
|
||||
<mat-footer-cell *matFooterCellDef class="grey900 bold right-align">{{
|
||||
bs.amount | async | currency : 'INR'
|
||||
}}</mat-footer-cell>
|
||||
</ng-container>
|
||||
|
||||
<mat-header-row *matHeaderRowDef="['bill-no-title', 'bill-no-details']"></mat-header-row>
|
||||
<mat-header-row *matHeaderRowDef="['time-title', 'time-details']"></mat-header-row>
|
||||
<mat-header-row *matHeaderRowDef="['table-title', 'table-details']"></mat-header-row>
|
||||
<mat-row
|
||||
*matRowDef="let row; columns: displayedColumns"
|
||||
[class.blue400]="row.isOldKot"
|
||||
[class.blue800]="row.isNewKot"
|
||||
[class.red100]="row.isPrinted && !row.isHappyHour"
|
||||
[class.yellow300]="row.isHappyHour && !row.isPrinted"
|
||||
[class.yellow-for-hh-printed]="row.isPrinted && row.isHappyHour"
|
||||
[class.old-kot]="row.isOldKot"
|
||||
[class.new-kot]="row.isNewKot"
|
||||
[class.is-printed]="row.isPrinted && !row.isHappyHour"
|
||||
[class.hh-new]="row.isHappyHour && !row.isPrinted"
|
||||
[class.hh-printed]="row.isPrinted && row.isHappyHour"
|
||||
></mat-row>
|
||||
<mat-footer-row *matFooterRowDef="['gross-title', 'gross-amount']"></mat-footer-row>
|
||||
<ng-container matColumnDef="gross-title">
|
||||
<mat-footer-cell *matFooterCellDef class="bold">Gross</mat-footer-cell>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="gross-amount">
|
||||
<mat-footer-cell *matFooterCellDef class="bold right-align">{{
|
||||
bs.grossAmount | async | currency : 'INR'
|
||||
}}</mat-footer-cell>
|
||||
</ng-container>
|
||||
|
||||
<mat-footer-row *matFooterRowDef="['hh-title', 'hh-amount']"></mat-footer-row>
|
||||
<ng-container matColumnDef="hh-title">
|
||||
<mat-footer-cell *matFooterCellDef class="bold">Happy Hour Discount</mat-footer-cell>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="hh-amount">
|
||||
<mat-footer-cell *matFooterCellDef class="bold right-align">{{
|
||||
bs.hhAmount | async | currency : 'INR'
|
||||
}}</mat-footer-cell>
|
||||
</ng-container>
|
||||
|
||||
<mat-footer-row *matFooterRowDef="['discount-title', 'discount-amount']"></mat-footer-row>
|
||||
<ng-container matColumnDef="discount-title">
|
||||
<mat-footer-cell *matFooterCellDef class="bold">Discount</mat-footer-cell>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="discount-amount">
|
||||
<mat-footer-cell *matFooterCellDef class="bold right-align">{{
|
||||
bs.discountAmount | async | currency : 'INR'
|
||||
}}</mat-footer-cell>
|
||||
</ng-container>
|
||||
|
||||
<mat-footer-row *matFooterRowDef="['tax-title', 'tax-amount']"></mat-footer-row>
|
||||
<ng-container matColumnDef="tax-title">
|
||||
<mat-footer-cell *matFooterCellDef class="bold">Tax</mat-footer-cell>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="tax-amount">
|
||||
<mat-footer-cell *matFooterCellDef class="bold right-align">{{
|
||||
bs.taxAmount | async | currency : 'INR'
|
||||
}}</mat-footer-cell>
|
||||
</ng-container>
|
||||
|
||||
<mat-footer-row *matFooterRowDef="['amount-title', 'amount-amount']"></mat-footer-row>
|
||||
<ng-container matColumnDef="amount-title">
|
||||
<mat-footer-cell *matFooterCellDef>Amount</mat-footer-cell>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="amount-amount">
|
||||
<mat-footer-cell *matFooterCellDef class="bold right-align">{{
|
||||
bs.amount | async | currency : 'INR'
|
||||
}}</mat-footer-cell>
|
||||
</ng-container>
|
||||
</table>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
|
||||
@@ -0,0 +1,111 @@
|
||||
@use '@angular/material' as mat
|
||||
|
||||
$my-grey: mat.define-palette(mat.$grey-palette)
|
||||
$my-green: mat.define-palette(mat.$green-palette)
|
||||
|
||||
.right-align
|
||||
display: flex
|
||||
justify-content: flex-end
|
||||
|
||||
table
|
||||
width: 100%
|
||||
|
||||
.mat-column-select
|
||||
flex: 0 0 60px
|
||||
|
||||
.grey900, .mat-column-amount-title, .mat-column-amount-amount
|
||||
background-color: #1b5e20
|
||||
color: #ffffff
|
||||
font-size: 1.2em
|
||||
// color: mat.get-color-from-palette($my-grey, '900-contrast')
|
||||
// background: mat.get-color-from-palette($my-grey, 900)
|
||||
|
||||
.grey700, .mat-column-tax-title, .mat-column-tax-amount
|
||||
background-color: #388e3c
|
||||
color: #ffffff
|
||||
// color: mat.get-color-from-palette($my-grey, '900-contrast')
|
||||
// background: mat.get-color-from-palette($my-grey, 900)
|
||||
|
||||
.grey500, .mat-column-discount-title, .mat-column-discount-amount
|
||||
background-color: #4caf50
|
||||
color: #000000
|
||||
// color: mat.get-color-from-palette($my-grey, '300-contrast')
|
||||
// background: mat.get-color-from-palette($my-grey, 300)
|
||||
|
||||
.grey300, .mat-column-hh-title, .mat-column-hh-amount, .mat-column-gross-title, .mat-column-gross-amount
|
||||
background-color: #81c784
|
||||
color: #000000
|
||||
// color: mat.get-color-from-palette($my-grey, '300-contrast')
|
||||
// background: mat.get-color-from-palette($my-grey, 300)
|
||||
|
||||
.blue400, .old-kot
|
||||
background-color: #42a5f5
|
||||
color: #ffffff
|
||||
// color: mat.get-color-from-palette($my-green, 700)
|
||||
// background-color: mat.get-color-from-palette($my-green, 500)
|
||||
|
||||
.blue800, .new-kot
|
||||
background-color: #1565c0
|
||||
color: #ffffff
|
||||
// color: mat.get-color-from-palette($my-grey, '300-contrast')
|
||||
// background: mat.get-color-from-palette($my-grey, 300)
|
||||
|
||||
.red100, .is-printed
|
||||
// background-color: #ffcdd2
|
||||
// color: #000000
|
||||
// color: mat.get-color-from-palette($my-grey, '300-contrast')
|
||||
// background: mat.get-color-from-palette($my-grey, 300)
|
||||
|
||||
.deep-purple-50
|
||||
background-color: #ede7f6
|
||||
color: #000000
|
||||
// color: mat.get-color-from-palette($my-grey, '300-contrast')
|
||||
// background: mat.get-color-from-palette($my-grey, 300)
|
||||
|
||||
.deep-purple-100
|
||||
background-color: #d1c4e9
|
||||
color: #000000
|
||||
// color: mat.get-color-from-palette($my-grey, '300-contrast')
|
||||
// background: mat.get-color-from-palette($my-grey, 300)
|
||||
|
||||
.deep-purple-200
|
||||
background-color: #b39ddb
|
||||
color: #000000
|
||||
// color: mat.get-color-from-palette($my-grey, '300-contrast')
|
||||
// background: mat.get-color-from-palette($my-grey, 300)
|
||||
|
||||
.yellow300, .hh-new
|
||||
background-color: #fff176
|
||||
// color: mat.get-color-from-palette($my-grey, '300-contrast')
|
||||
// background: mat.get-color-from-palette($my-grey, 300)
|
||||
|
||||
.hh-printed
|
||||
background-color: #f7ca18
|
||||
// color: mat.get-color-from-palette($my-grey, '300-contrast')
|
||||
// background: mat.get-color-from-palette($my-grey, 300)
|
||||
|
||||
// https://github.com/btxtiger/mat-icon-button-sizes
|
||||
$button-size: 32px
|
||||
$icon-size: 19px
|
||||
|
||||
.small-icon-button
|
||||
width: $button-size !important
|
||||
height: $button-size !important
|
||||
padding: 0px !important
|
||||
display: inline-flex !important
|
||||
align-items: center
|
||||
justify-content: center
|
||||
font-size: $icon-size !important
|
||||
|
||||
& > *[role=img]
|
||||
width: $icon-size
|
||||
height: $icon-size
|
||||
font-size: $icon-size
|
||||
|
||||
svg
|
||||
width: $icon-size
|
||||
height: $icon-size
|
||||
|
||||
.mat-mdc-button-touch-target
|
||||
width: $button-size !important
|
||||
height: $button-size !important
|
||||
@@ -27,7 +27,7 @@ import { VoucherType } from './voucher-type';
|
||||
@Component({
|
||||
selector: 'app-bills',
|
||||
templateUrl: './bills.component.html',
|
||||
styleUrls: ['./bills.component.css'],
|
||||
styleUrls: ['./bills.component.sass'],
|
||||
})
|
||||
export class BillsComponent implements OnInit {
|
||||
dataSource: BillsDataSource = new BillsDataSource(this.bs.dataObs);
|
||||
@@ -196,10 +196,6 @@ export class BillsComponent implements OnInit {
|
||||
this.bs.subtractOne(item, canEdit);
|
||||
}
|
||||
|
||||
removeItem(item: BillViewItem): void {
|
||||
this.bs.removeItem(item);
|
||||
}
|
||||
|
||||
modifier(item: BillViewItem): void {
|
||||
this.bs.modifier(item);
|
||||
}
|
||||
|
||||
@@ -1,29 +0,0 @@
|
||||
.square-button {
|
||||
min-width: 150px;
|
||||
max-width: 150px;
|
||||
min-height: 150px;
|
||||
max-height: 150px;
|
||||
cursor: pointer;
|
||||
margin: 20px;
|
||||
}
|
||||
.item-name {
|
||||
text-align: center;
|
||||
padding: 0.5rem;
|
||||
}
|
||||
|
||||
.center {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.warn {
|
||||
background-color: red;
|
||||
}
|
||||
|
||||
.disabled {
|
||||
background-color: #dddddd;
|
||||
}
|
||||
|
||||
.face {
|
||||
background-color: #3f51b5;
|
||||
color: #ffffff;
|
||||
}
|
||||
@@ -1,76 +1,76 @@
|
||||
<div class="flex flex-row flex-wrap -mr-5 -mb-5">
|
||||
<mat-card
|
||||
class="face flex flex-col square-button mr-5, mb-5"
|
||||
class="primary flex flex-col square-button mr-5, mb-5"
|
||||
matRipple
|
||||
[routerLink]="['menu-categories']"
|
||||
queryParamsHandling="preserve"
|
||||
>
|
||||
<h3 class="item-name">Add Product</h3>
|
||||
<h3>Add Product</h3>
|
||||
</mat-card>
|
||||
<mat-card
|
||||
class="flex flex-col square-button mr-5, mb-5"
|
||||
matRipple
|
||||
(click)="discount()"
|
||||
[class.disabled]="!discountAllowed()"
|
||||
[class.face]="discountAllowed()"
|
||||
[class.primary]="discountAllowed()"
|
||||
>
|
||||
<h3 class="item-name">Discount</h3>
|
||||
<h3>Discount</h3>
|
||||
</mat-card>
|
||||
<mat-card
|
||||
class="flex flex-col square-button mr-5, mb-5"
|
||||
matRipple
|
||||
(click)="printKot()"
|
||||
[class.disabled]="!printKotAllowed()"
|
||||
[class.face]="printKotAllowed()"
|
||||
[class.primary]="printKotAllowed()"
|
||||
>
|
||||
<h3 class="item-name">Print KOT</h3>
|
||||
<h3>Print KOT</h3>
|
||||
</mat-card>
|
||||
<mat-card
|
||||
class="flex flex-col square-button mr-5, mb-5"
|
||||
matRipple
|
||||
(click)="printBill()"
|
||||
[class.disabled]="!printBillAllowed()"
|
||||
[class.face]="printBillAllowed()"
|
||||
[class.primary]="printBillAllowed()"
|
||||
>
|
||||
<h3 class="item-name">Print Bill</h3>
|
||||
<h3>Print Bill</h3>
|
||||
</mat-card>
|
||||
<mat-card class="flex flex-col square-button mr-5, mb-5 warn" matRipple [routerLink]="['/', 'sales', 'tables']">
|
||||
<h3 class="item-name">Back to Tables</h3>
|
||||
<h3>Back to Tables</h3>
|
||||
</mat-card>
|
||||
<mat-card
|
||||
class="flex flex-col square-button mr-5, mb-5"
|
||||
matRipple
|
||||
(click)="receivePayment()"
|
||||
[class.disabled]="!receivePaymentAllowed()"
|
||||
[class.face]="receivePaymentAllowed()"
|
||||
[class.primary]="receivePaymentAllowed()"
|
||||
>
|
||||
<h3 class="item-name">Receive Payment</h3>
|
||||
<h3>Receive Payment</h3>
|
||||
</mat-card>
|
||||
<mat-card
|
||||
class="flex flex-col square-button mr-5, mb-5"
|
||||
matRipple
|
||||
(click)="moveTable()"
|
||||
[class.disabled]="!moveTableAllowed()"
|
||||
[class.face]="moveTableAllowed()"
|
||||
[class.primary]="moveTableAllowed()"
|
||||
>
|
||||
<h3 class="item-name">Move Table</h3>
|
||||
<h3>Move Table</h3>
|
||||
</mat-card>
|
||||
<mat-card
|
||||
class="flex flex-col square-button mr-5, mb-5"
|
||||
matRipple
|
||||
(click)="cancelBill()"
|
||||
[class.disabled]="!cancelBillAllowed()"
|
||||
[class.face]="cancelBillAllowed()"
|
||||
[class.primary]="cancelBillAllowed()"
|
||||
>
|
||||
<h3 class="item-name">Cancel Bill</h3>
|
||||
<h3>Cancel Bill</h3>
|
||||
</mat-card>
|
||||
<mat-card
|
||||
class="flex flex-col square-button mr-5, mb-5"
|
||||
matRipple
|
||||
(click)="splitBill()"
|
||||
[class.disabled]="!splitBillAllowed()"
|
||||
[class.face]="splitBillAllowed()"
|
||||
[class.primary]="splitBillAllowed()"
|
||||
>
|
||||
<h3 class="item-name">Split Bill</h3>
|
||||
<h3>Split Bill</h3>
|
||||
</mat-card>
|
||||
</div>
|
||||
@@ -1,25 +0,0 @@
|
||||
.square-button {
|
||||
min-width: 150px;
|
||||
max-width: 150px;
|
||||
min-height: 150px;
|
||||
max-height: 150px;
|
||||
cursor: pointer;
|
||||
margin: 20px;
|
||||
}
|
||||
.item-name {
|
||||
text-align: center;
|
||||
padding: 0.5rem;
|
||||
}
|
||||
|
||||
.center {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.warn {
|
||||
background-color: red;
|
||||
}
|
||||
|
||||
.face {
|
||||
background-color: #3f51b5;
|
||||
color: #ffffff;
|
||||
}
|
||||
@@ -7,16 +7,16 @@
|
||||
[routerLink]="['../']"
|
||||
queryParamsHandling="preserve"
|
||||
>
|
||||
<h3 class="item-name">Back</h3>
|
||||
<h3>Back</h3>
|
||||
</mat-card>
|
||||
<mat-card
|
||||
class="face flex flex-col square-button mr-5, mb-5"
|
||||
class="primary flex flex-col square-button mr-5, mb-5"
|
||||
matRipple
|
||||
*ngFor="let item of list"
|
||||
[routerLink]="['../products', item.id]"
|
||||
queryParamsHandling="preserve"
|
||||
>
|
||||
<h3 class="item-name">{{ item.name }}</h3>
|
||||
<h3>{{ item.name }}</h3>
|
||||
</mat-card>
|
||||
</div>
|
||||
</mat-card-content>
|
||||
|
||||
Whitespace-only changes.
@@ -6,7 +6,7 @@ import { MenuCategory } from '../../core/menu-category';
|
||||
@Component({
|
||||
selector: 'app-menu-category',
|
||||
templateUrl: './menu-categories.component.html',
|
||||
styleUrls: ['./menu-categories.component.css'],
|
||||
styleUrls: ['./menu-categories.component.sass'],
|
||||
})
|
||||
export class MenuCategoriesComponent implements OnInit {
|
||||
list: MenuCategory[] = [];
|
||||
|
||||
@@ -1,11 +0,0 @@
|
||||
.square-button {
|
||||
min-width: 150px;
|
||||
max-width: 150px;
|
||||
min-height: 150px;
|
||||
cursor: pointer;
|
||||
margin: 20px;
|
||||
}
|
||||
|
||||
.selected {
|
||||
background-color: #dddddd;
|
||||
}
|
||||
@@ -14,9 +14,10 @@
|
||||
matRipple
|
||||
*ngFor="let m of item.modifiers"
|
||||
(click)="select(m)"
|
||||
[class.selected]="selectedIds.indexOf(m.id) !== -1"
|
||||
[class.primary]="selectedIds.indexOf(m.id) === -1"
|
||||
[class.strong-primary]="selectedIds.indexOf(m.id) !== -1"
|
||||
>
|
||||
<h3 class="item-name">{{ m.name }}</h3>
|
||||
<h3>{{ m.name }}</h3>
|
||||
</mat-card>
|
||||
</div>
|
||||
</mat-tab>
|
||||
|
||||
@@ -1,35 +0,0 @@
|
||||
.square-button {
|
||||
min-width: 150px;
|
||||
max-width: 150px;
|
||||
min-height: 150px;
|
||||
max-height: 150px;
|
||||
cursor: pointer;
|
||||
margin: 20px;
|
||||
}
|
||||
.item-name {
|
||||
text-align: center;
|
||||
padding: 0.5rem;
|
||||
}
|
||||
|
||||
.center {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.yellow300 {
|
||||
background-color: #fff176;
|
||||
}
|
||||
|
||||
.red700 {
|
||||
background-color: #d32f2f;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.grey800 {
|
||||
background-color: #424242;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.face {
|
||||
background-color: #3f51b5;
|
||||
color: #ffffff;
|
||||
}
|
||||
@@ -2,26 +2,24 @@
|
||||
<mat-card-content>
|
||||
<div class="flex flex-row flex-wrap -mr-5 -mb-5">
|
||||
<mat-card
|
||||
class="flex flex-col square-button mr-5, mb-5 red700"
|
||||
class="flex flex-col square-button mr-5, mb-5 warn"
|
||||
matRipple
|
||||
[routerLink]="['../../menu-categories']"
|
||||
queryParamsHandling="preserve"
|
||||
>
|
||||
<h3 class="item-name">Back</h3>
|
||||
<h3>Back</h3>
|
||||
</mat-card>
|
||||
<mat-card
|
||||
class="flex flex-col square-button mr-5, mb-5"
|
||||
matRipple
|
||||
*ngFor="let item of list"
|
||||
(click)="addProduct(item)"
|
||||
[class.yellow300]="item.hasHappyHour"
|
||||
[class.grey800]="item.isNotAvailable"
|
||||
[class.face]="!item.hasHappyHour && !item.isNotAvailable"
|
||||
[class.accent]="item.hasHappyHour"
|
||||
[class.strong-disabled]="item.isNotAvailable"
|
||||
[class.primary]="!item.hasHappyHour && !item.isNotAvailable"
|
||||
>
|
||||
<h3 class="item-name">{{ item.name }}</h3>
|
||||
<mat-card-subtitle class="center" [class.face]="!item.hasHappyHour && !item.isNotAvailable">{{
|
||||
item.price | currency : 'INR'
|
||||
}}</mat-card-subtitle>
|
||||
<h3>{{ item.name }}</h3>
|
||||
<span>{{ item.price | currency : 'INR' }}</span>
|
||||
</mat-card>
|
||||
</div>
|
||||
</mat-card-content>
|
||||
|
||||
@@ -1,39 +0,0 @@
|
||||
.face {
|
||||
background-color: #3f51b5;
|
||||
color: #ffffff;
|
||||
}
|
||||
.running {
|
||||
background-color: #f53d24;
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
.printed {
|
||||
background-color: #00f518;
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
.open-bill {
|
||||
background-color: #8e44ad;
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
.bold {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.square-button {
|
||||
min-width: 150px;
|
||||
max-width: 150px;
|
||||
min-height: 150px;
|
||||
max-height: 150px;
|
||||
cursor: pointer;
|
||||
margin: 20px;
|
||||
}
|
||||
.item-name {
|
||||
text-align: center;
|
||||
padding: 0.5rem;
|
||||
}
|
||||
|
||||
.center {
|
||||
text-align: center;
|
||||
}
|
||||
@@ -9,18 +9,18 @@
|
||||
matRipple
|
||||
*ngFor="let table of list"
|
||||
(click)="navigateToBill(table)"
|
||||
[class.face]="table.status !== 'running' && table.status !== 'printed'"
|
||||
[class.running]="table.status === 'running'"
|
||||
[class.printed]="table.status === 'printed'"
|
||||
[class.primary]="table.status !== 'running' && table.status !== 'printed'"
|
||||
[class.accent]="table.status === 'running'"
|
||||
[class.strong-accent]="table.status === 'printed'"
|
||||
>
|
||||
<h3 class="item-name">{{ table.name }}</h3>
|
||||
<mat-card-subtitle class="center" [class.bold]="table.bold">{{ table.guest }}</mat-card-subtitle>
|
||||
<span class="center">{{ table.pax ?? '-' }} / {{ table.seats }} / {{ table.section?.name }}</span>
|
||||
<span class="center" *ngIf="table.date">{{ table.date }}</span>
|
||||
<span class="center" *ngIf="table.amount">{{ table.amount | currency : 'INR' }}</span>
|
||||
<h3>{{ table.name }}</h3>
|
||||
<span>{{ table.guest }}</span>
|
||||
<span>{{ table.pax ?? '-' }} / {{ table.seats }} / {{ table.section?.name }}</span>
|
||||
<span *ngIf="table.date">{{ table.date }}</span>
|
||||
<span *ngIf="table.amount">{{ table.amount | currency : 'INR' }}</span>
|
||||
</mat-card>
|
||||
<mat-card class="flex flex-col square-button mr-5, mb-5 open-bill" matRipple (click)="openBill()">
|
||||
<h3 class="item-name">Open Bill</h3>
|
||||
<mat-card class="flex flex-col square-button mr-5, mb-5 strong-primary" matRipple (click)="openBill()">
|
||||
<h3>Open Bill</h3>
|
||||
</mat-card>
|
||||
</div>
|
||||
</mat-card-content>
|
||||
|
||||
Whitespace-only changes.
@@ -11,7 +11,7 @@ import { BillNumberComponent } from '../bill-number/bill-number.component';
|
||||
@Component({
|
||||
selector: 'app-running-tables',
|
||||
templateUrl: './running-tables.component.html',
|
||||
styleUrls: ['./running-tables.component.css'],
|
||||
styleUrls: ['./running-tables.component.sass'],
|
||||
})
|
||||
export class RunningTablesComponent implements OnInit {
|
||||
regimes: Regime[] = [];
|
||||
|
||||
@@ -1,30 +0,0 @@
|
||||
.running {
|
||||
background-color: #f53d24;
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
.printed {
|
||||
background-color: #00f518;
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
.square-button {
|
||||
min-width: 150px;
|
||||
max-width: 150px;
|
||||
min-height: 150px;
|
||||
max-height: 150px;
|
||||
cursor: pointer;
|
||||
margin: 20px;
|
||||
}
|
||||
.item-name {
|
||||
text-align: center;
|
||||
padding: 0.5rem;
|
||||
}
|
||||
|
||||
.center {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.selected {
|
||||
background-color: #dddddd;
|
||||
}
|
||||
@@ -6,15 +6,15 @@
|
||||
matRipple
|
||||
*ngFor="let table of list"
|
||||
(click)="select(table)"
|
||||
[class.running]="table.status === 'running'"
|
||||
[class.printed]="table.status === 'printed'"
|
||||
[class.selected]="table === selected"
|
||||
[class.primary]="table.status === 'running'"
|
||||
[class.accent]="table.status === 'printed'"
|
||||
[class.strong-accent]="table === selected"
|
||||
>
|
||||
<h3 class="item-name">{{ table.name }}</h3>
|
||||
<mat-card-subtitle class="center">{{ table.guest }}</mat-card-subtitle>
|
||||
<span class="center">{{ table.pax ?? 0 }} / {{ table.seats }} Seats</span>
|
||||
<span class="center" *ngIf="table.date">{{ table.date }}</span>
|
||||
<span class="center" *ngIf="table.amount">{{ table.amount | currency : 'INR' }}</span>
|
||||
<h3>{{ table.name }}</h3>
|
||||
<span>{{ table.guest }}</span>
|
||||
<span>{{ table.pax ?? 0 }} / {{ table.seats }} Seats</span>
|
||||
<span *ngIf="table.date">{{ table.date }}</span>
|
||||
<span *ngIf="table.amount">{{ table.amount | currency : 'INR' }}</span>
|
||||
</mat-card>
|
||||
</div>
|
||||
</mat-dialog-content>
|
||||
|
||||
Whitespace-only changes.
@@ -7,7 +7,7 @@ import { Table } from '../../core/table';
|
||||
@Component({
|
||||
selector: 'app-tables-dialog',
|
||||
templateUrl: './tables-dialog.component.html',
|
||||
styleUrls: ['./tables-dialog.component.css'],
|
||||
styleUrls: ['./tables-dialog.component.sass'],
|
||||
})
|
||||
export class TablesDialogComponent {
|
||||
list: Table[] = [];
|
||||
|
||||
Reference in new issue
Block a user