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:
parent
d39712a347
commit
4e4cebf5d4
bookie/src
app
guest-book/guest-book-list
home
sales
bill-type
bills
home
menu-categories
menu-categories.component.cssmenu-categories.component.htmlmenu-categories.component.sassmenu-categories.component.ts
modifiers
products
running-tables
running-tables.component.cssrunning-tables.component.htmlrunning-tables.component.sassrunning-tables.component.ts
tables-dialog
settings
temporal-product/temporal-product-list
@ -11,3 +11,7 @@
|
||||
background-color: #00f518;
|
||||
color: #000000;
|
||||
}
|
||||
.center {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
@ -1,16 +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;
|
||||
}
|
@ -5,7 +5,7 @@
|
||||
*ngIf="auth.allowed('customers')"
|
||||
[routerLink]="['/', 'guest-book']"
|
||||
>
|
||||
<h3 class="item-name">Guest Book</h3>
|
||||
<h3>Guest Book</h3>
|
||||
</mat-card>
|
||||
<mat-card
|
||||
class="flex flex-col square-button mr-5, mb-5"
|
||||
@ -13,7 +13,7 @@
|
||||
*ngIf="auth.allowed('sales')"
|
||||
[routerLink]="['/', 'sales']"
|
||||
>
|
||||
<h3 class="item-name">Sales</h3>
|
||||
<h3>Sales</h3>
|
||||
</mat-card>
|
||||
<mat-card
|
||||
class="flex flex-col square-button mr-5, mb-5"
|
||||
@ -21,7 +21,7 @@
|
||||
*ngIf="auth.allowed('customers')"
|
||||
[routerLink]="['/', 'customers']"
|
||||
>
|
||||
<h3 class="item-name">Customers</h3>
|
||||
<h3>Customers</h3>
|
||||
</mat-card>
|
||||
</div>
|
||||
<div class="flex flex-row flex-wrap -mr-5 -mb-5">
|
||||
@ -31,7 +31,7 @@
|
||||
*ngIf="auth.allowed('cashier-report')"
|
||||
[routerLink]="['/', 'cashier-report']"
|
||||
>
|
||||
<h3 class="item-name">Cashier Report</h3>
|
||||
<h3>Cashier Report</h3>
|
||||
</mat-card>
|
||||
<mat-card
|
||||
class="flex flex-col square-button mr-5, mb-5"
|
||||
@ -39,7 +39,7 @@
|
||||
*ngIf="auth.allowed('sale-report')"
|
||||
[routerLink]="['/', 'sale-report']"
|
||||
>
|
||||
<h3 class="item-name">Sale Report</h3>
|
||||
<h3>Sale Report</h3>
|
||||
</mat-card>
|
||||
<mat-card
|
||||
class="flex flex-col square-button mr-5, mb-5"
|
||||
@ -47,7 +47,7 @@
|
||||
*ngIf="auth.allowed('tax-report')"
|
||||
[routerLink]="['/', 'tax-report']"
|
||||
>
|
||||
<h3 class="item-name">Tax Report</h3>
|
||||
<h3>Tax Report</h3>
|
||||
</mat-card>
|
||||
<mat-card
|
||||
class="flex flex-col square-button mr-5, mb-5"
|
||||
@ -55,7 +55,7 @@
|
||||
*ngIf="auth.allowed('product-sale-report')"
|
||||
[routerLink]="['/', 'product-sale-report']"
|
||||
>
|
||||
<h3 class="item-name">Product Sale Report</h3>
|
||||
<h3>Product Sale Report</h3>
|
||||
</mat-card>
|
||||
<mat-card
|
||||
class="flex flex-col square-button mr-5, mb-5"
|
||||
@ -63,7 +63,7 @@
|
||||
*ngIf="auth.allowed('bill-settlement-report')"
|
||||
[routerLink]="['/', 'bill-settlement-report']"
|
||||
>
|
||||
<h3 class="item-name">Bill Settlement Report</h3>
|
||||
<h3>Bill Settlement Report</h3>
|
||||
</mat-card>
|
||||
<mat-card
|
||||
class="flex flex-col square-button mr-5, mb-5"
|
||||
@ -71,7 +71,7 @@
|
||||
*ngIf="auth.allowed('beer-sale-report')"
|
||||
[routerLink]="['/', 'beer-sale-report']"
|
||||
>
|
||||
<h3 class="item-name">Beer Sale Report</h3>
|
||||
<h3>Beer Sale Report</h3>
|
||||
</mat-card>
|
||||
<mat-card
|
||||
class="flex flex-col square-button mr-5, mb-5"
|
||||
@ -79,7 +79,7 @@
|
||||
*ngIf="auth.allowed('discount-report')"
|
||||
[routerLink]="['/', 'discount-report']"
|
||||
>
|
||||
<h3 class="item-name">Discount Report</h3>
|
||||
<h3>Discount Report</h3>
|
||||
</mat-card>
|
||||
<mat-card
|
||||
class="flex flex-col square-button mr-5, mb-5"
|
||||
@ -87,7 +87,7 @@
|
||||
*ngIf="auth.allowed('product-sale-report')"
|
||||
[routerLink]="['/', 'menu-engineering-report']"
|
||||
>
|
||||
<h3 class="item-name">Menu Engineering Report</h3>
|
||||
<h3>Menu Engineering Report</h3>
|
||||
</mat-card>
|
||||
</div>
|
||||
<div class="flex flex-row flex-wrap -mr-5 -mb-5">
|
||||
@ -97,7 +97,7 @@
|
||||
*ngIf="auth.allowed('products')"
|
||||
[routerLink]="['/', 'products']"
|
||||
>
|
||||
<h3 class="item-name">Products</h3>
|
||||
<h3>Products</h3>
|
||||
</mat-card>
|
||||
<mat-card
|
||||
class="flex flex-col square-button mr-5, mb-5"
|
||||
@ -105,7 +105,7 @@
|
||||
*ngIf="auth.allowed('temporal-products')"
|
||||
[routerLink]="['/', 'temporal-products']"
|
||||
>
|
||||
<h3 class="item-name">Temporal Products</h3>
|
||||
<h3>Temporal Products</h3>
|
||||
</mat-card>
|
||||
<mat-card
|
||||
class="flex flex-col square-button mr-5, mb-5"
|
||||
@ -113,7 +113,7 @@
|
||||
*ngIf="auth.allowed('products')"
|
||||
[routerLink]="['/', 'update-product-prices']"
|
||||
>
|
||||
<h3 class="item-name">Update Product Prices</h3>
|
||||
<h3>Update Product Prices</h3>
|
||||
</mat-card>
|
||||
<mat-card
|
||||
class="flex flex-col square-button mr-5, mb-5"
|
||||
@ -121,7 +121,7 @@
|
||||
*ngIf="auth.allowed('products')"
|
||||
[routerLink]="['/', 'product-updates-report']"
|
||||
>
|
||||
<h3 class="item-name">Product Updates Report</h3>
|
||||
<h3>Product Updates Report</h3>
|
||||
</mat-card>
|
||||
<mat-card
|
||||
class="flex flex-col square-button mr-5, mb-5"
|
||||
@ -129,7 +129,7 @@
|
||||
*ngIf="auth.allowed('modifiers')"
|
||||
[routerLink]="['/', 'modifiers']"
|
||||
>
|
||||
<h3 class="item-name">Modifiers</h3>
|
||||
<h3>Modifiers</h3>
|
||||
</mat-card>
|
||||
<mat-card
|
||||
class="flex flex-col square-button mr-5, mb-5"
|
||||
@ -137,7 +137,7 @@
|
||||
*ngIf="auth.allowed('modifiers')"
|
||||
[routerLink]="['/', 'modifier-categories']"
|
||||
>
|
||||
<h3 class="item-name">Modifier Categories</h3>
|
||||
<h3>Modifier Categories</h3>
|
||||
</mat-card>
|
||||
</div>
|
||||
<div class="flex flex-row flex-wrap -mr-5 -mb-5">
|
||||
@ -147,7 +147,7 @@
|
||||
*ngIf="auth.allowed('sections')"
|
||||
[routerLink]="['/', 'tables']"
|
||||
>
|
||||
<h3 class="item-name">Tables</h3>
|
||||
<h3>Tables</h3>
|
||||
</mat-card>
|
||||
<mat-card
|
||||
class="flex flex-col square-button mr-5, mb-5"
|
||||
@ -155,7 +155,7 @@
|
||||
*ngIf="auth.allowed('sections')"
|
||||
[routerLink]="['/', 'sections']"
|
||||
>
|
||||
<h3 class="item-name">Sections</h3>
|
||||
<h3>Sections</h3>
|
||||
</mat-card>
|
||||
<mat-card
|
||||
class="flex flex-col square-button mr-5, mb-5"
|
||||
@ -163,7 +163,7 @@
|
||||
*ngIf="auth.allowed('products')"
|
||||
[routerLink]="['/', 'menu-categories']"
|
||||
>
|
||||
<h3 class="item-name">Menu Categories</h3>
|
||||
<h3>Menu Categories</h3>
|
||||
</mat-card>
|
||||
<mat-card
|
||||
class="flex flex-col square-button mr-5, mb-5"
|
||||
@ -171,7 +171,7 @@
|
||||
*ngIf="auth.allowed('products')"
|
||||
[routerLink]="['/', 'sale-categories']"
|
||||
>
|
||||
<h3 class="item-name">Sale Categories</h3>
|
||||
<h3>Sale Categories</h3>
|
||||
</mat-card>
|
||||
<mat-card
|
||||
class="flex flex-col square-button mr-5, mb-5"
|
||||
@ -179,7 +179,7 @@
|
||||
*ngIf="auth.allowed('taxes')"
|
||||
[routerLink]="['/', 'taxes']"
|
||||
>
|
||||
<h3 class="item-name">Taxes</h3>
|
||||
<h3>Taxes</h3>
|
||||
</mat-card>
|
||||
<mat-card
|
||||
class="flex flex-col square-button mr-5, mb-5"
|
||||
@ -187,7 +187,7 @@
|
||||
*ngIf="auth.allowed('regimes')"
|
||||
[routerLink]="['/', 'regimes']"
|
||||
>
|
||||
<h3 class="item-name">Regimes</h3>
|
||||
<h3>Regimes</h3>
|
||||
</mat-card>
|
||||
<mat-card
|
||||
class="flex flex-col square-button mr-5, mb-5"
|
||||
@ -195,7 +195,7 @@
|
||||
*ngIf="auth.allowed('devices')"
|
||||
[routerLink]="['/', 'devices']"
|
||||
>
|
||||
<h3 class="item-name">Devices</h3>
|
||||
<h3>Devices</h3>
|
||||
</mat-card>
|
||||
<mat-card
|
||||
class="flex flex-col square-button mr-5, mb-5"
|
||||
@ -203,7 +203,7 @@
|
||||
*ngIf="auth.allowed('section-printers')"
|
||||
[routerLink]="['/', 'section-printers']"
|
||||
>
|
||||
<h3 class="item-name">Section Printers</h3>
|
||||
<h3>Section Printers</h3>
|
||||
</mat-card>
|
||||
<mat-card
|
||||
class="flex flex-col square-button mr-5, mb-5"
|
||||
@ -211,7 +211,7 @@
|
||||
*ngIf="auth.allowed('printers')"
|
||||
[routerLink]="['/', 'printers']"
|
||||
>
|
||||
<h3 class="item-name">Printers</h3>
|
||||
<h3>Printers</h3>
|
||||
</mat-card>
|
||||
</div>
|
||||
<div class="flex flex-row flex-wrap -mr-5 -mb-5">
|
||||
@ -221,7 +221,7 @@
|
||||
*ngIf="auth.allowed('users')"
|
||||
[routerLink]="['/', 'roles']"
|
||||
>
|
||||
<h3 class="item-name">Roles</h3>
|
||||
<h3>Roles</h3>
|
||||
</mat-card>
|
||||
<mat-card
|
||||
class="flex flex-col square-button mr-5, mb-5"
|
||||
@ -229,7 +229,7 @@
|
||||
*ngIf="auth.allowed('users')"
|
||||
[routerLink]="['/', 'users']"
|
||||
>
|
||||
<h3 class="item-name">Users</h3>
|
||||
<h3>Users</h3>
|
||||
</mat-card>
|
||||
<mat-card
|
||||
class="flex flex-col square-button mr-5, mb-5"
|
||||
@ -237,7 +237,7 @@
|
||||
*ngIf="auth.allowed('authenticated')"
|
||||
[routerLink]="['/', 'users', 'me']"
|
||||
>
|
||||
<h3 class="item-name">Change Password</h3>
|
||||
<h3>Change Password</h3>
|
||||
</mat-card>
|
||||
<mat-card
|
||||
class="flex flex-col square-button mr-5, mb-5"
|
||||
@ -245,7 +245,7 @@
|
||||
*ngIf="auth.allowed('owner')"
|
||||
[routerLink]="['/', 'header-footer']"
|
||||
>
|
||||
<h3 class="item-name">Header / Footer</h3>
|
||||
<h3>Header / Footer</h3>
|
||||
</mat-card>
|
||||
<mat-card
|
||||
class="flex flex-col square-button mr-5, mb-5"
|
||||
@ -253,7 +253,7 @@
|
||||
*ngIf="auth.allowed('owner')"
|
||||
[routerLink]="['/', 'settle-options']"
|
||||
>
|
||||
<h3 class="item-name">Settle Options</h3>
|
||||
<h3>Settle Options</h3>
|
||||
</mat-card>
|
||||
<mat-card
|
||||
class="flex flex-col square-button mr-5, mb-5"
|
||||
@ -261,7 +261,7 @@
|
||||
*ngIf="auth.allowed('settings')"
|
||||
[routerLink]="['/', 'settings']"
|
||||
>
|
||||
<h3 class="item-name">Settings</h3>
|
||||
<h3>Settings</h3>
|
||||
</mat-card>
|
||||
</div>
|
||||
<footer class="footer">
|
||||
|
@ -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>
|
||||
|
111
bookie/src/app/sales/bills/bills.component.sass
Normal file
111
bookie/src/app/sales/bills/bills.component.sass
Normal file
@ -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>
|
||||
|
@ -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>
|
||||
|
@ -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>
|
||||
|
@ -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[] = [];
|
||||
|
@ -11,11 +11,6 @@
|
||||
background: #f8d7da;
|
||||
}
|
||||
|
||||
.center {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.img-container {
|
||||
position: relative;
|
||||
}
|
||||
|
@ -3,10 +3,6 @@
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.center {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.material-icons {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
@ -7,8 +7,8 @@
|
||||
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<link rel="icon" type="image/x-icon" href="favicon.ico" />
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" />
|
||||
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet" />
|
||||
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
|
||||
</head>
|
||||
<body>
|
||||
|
@ -2,5 +2,6 @@ import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
|
||||
|
||||
import { AppModule } from './app/app.module';
|
||||
|
||||
platformBrowserDynamic().bootstrapModule(AppModule)
|
||||
.catch(err => console.error(err));
|
||||
platformBrowserDynamic()
|
||||
.bootstrapModule(AppModule)
|
||||
.catch((err) => console.error(err));
|
||||
|
@ -1,12 +1,82 @@
|
||||
/* You can add global styles to this file, and also import other style files */
|
||||
@use 'sass:map'
|
||||
@use '@angular/material' as mat
|
||||
@tailwind base
|
||||
@tailwind components
|
||||
@tailwind utilities
|
||||
|
||||
@include mat.core()
|
||||
|
||||
html,
|
||||
body
|
||||
height: 100%
|
||||
overscroll-behavior-y: contain
|
||||
height: 100%
|
||||
overscroll-behavior-y: contain
|
||||
a
|
||||
color: rgb(0, 0, 238)
|
||||
text-decoration: underline
|
||||
color: rgb(0, 0, 238)
|
||||
text-decoration: underline
|
||||
|
||||
|
||||
$my-primary: mat.define-palette(mat.$indigo-palette, 500)
|
||||
$my-accent: mat.define-palette(mat.$amber-palette, A200, A100, A400)
|
||||
/* The "warn" palette is optional and defaults to red if not specified.*/
|
||||
$my-warn: mat.define-palette(mat.$red-palette)
|
||||
$my-disabled: mat.define-palette(mat.$grey-palette, 500)
|
||||
|
||||
.square-button
|
||||
min-width: 150px
|
||||
max-width: 150px
|
||||
min-height: 150px
|
||||
max-height: 150px
|
||||
cursor: pointer
|
||||
margin: 20px
|
||||
h3
|
||||
text-align: center
|
||||
padding: 0.5rem
|
||||
span
|
||||
text-align: center
|
||||
|
||||
.center
|
||||
text-align: center
|
||||
|
||||
.warn
|
||||
background-color: red
|
||||
|
||||
.square-button.primary
|
||||
/* Read the 500 hue from the primary color palete.*/
|
||||
color: mat.get-color-from-palette($my-primary, '200-contrast')
|
||||
background: mat.get-color-from-palette($my-primary, 200)
|
||||
|
||||
.square-button.strong-primary
|
||||
/* Read the 500 hue from the primary color palete.*/
|
||||
color: mat.get-color-from-palette($my-primary, '700-contrast')
|
||||
background: mat.get-color-from-palette($my-primary, 700)
|
||||
|
||||
.square-button.accent
|
||||
/* Read the 500 hue from the primary color palete.*/
|
||||
color: mat.get-color-from-palette($my-accent, '200-contrast')
|
||||
background: mat.get-color-from-palette($my-accent, 200)
|
||||
|
||||
.square-button.strong-accent
|
||||
/* Read the 500 hue from the primary color palete.*/
|
||||
color: mat.get-color-from-palette($my-accent, '700-contrast')
|
||||
background: mat.get-color-from-palette($my-accent, 700)
|
||||
|
||||
.square-button.warn
|
||||
/* Read the 500 hue from the primary color palete.*/
|
||||
color: mat.get-color-from-palette($my-warn, '700-contrast')
|
||||
background: mat.get-color-from-palette($my-warn, 700)
|
||||
|
||||
.square-button.strong-warn
|
||||
/* Read the 500 hue from the primary color palete.*/
|
||||
color: mat.get-color-from-palette($my-warn, '700-contrast')
|
||||
background: mat.get-color-from-palette($my-warn, 700)
|
||||
|
||||
.square-button.disabled
|
||||
/* Read the 500 hue from the primary color palete.*/
|
||||
color: mat.get-color-from-palette($my-disabled, '500-contrast')
|
||||
background: mat.get-color-from-palette($my-disabled, 500)
|
||||
|
||||
.square-button.strong-disabled
|
||||
/* Read the 500 hue from the primary color palete.*/
|
||||
color: mat.get-color-from-palette($my-disabled, '800-contrast')
|
||||
background: mat.get-color-from-palette($my-disabled, 800)
|
||||
|
Loading…
x
Reference in New Issue
Block a user