tanshu/barker
1
0
Fork 0
Code Issues 1 Pull Requests Releases 4 Activity

Chore: Moved the formatting to the main style sheet because it was used everywhere.

Browse Source 
Also, moved to sass to get theme colors from the material design library
This commit is contained in:
Amritanshu Agrawal
2023-03-18 23:29:10 +05:30
parent d39712a347
commit 4e4cebf5d4
32 changed files with 367 additions and 451 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
bookie/src/app/guest-book/guest-book-list/guest-book-list.component.css
View File

@ -11,3 +11,7 @@
background-color: #00f518;
color: #000000;
}
.center {
display: flex;
justify-content: center;
}

16
bookie/src/app/home/home.component.css
View File

@ -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;
}

64
bookie/src/app/home/home.component.html
View File

@ -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">

18
bookie/src/app/sales/bill-type/bill-type.component.css
View File

@ -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;
}

18
bookie/src/app/sales/bill-type/bill-type.component.html
View File

@ -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>

77
bookie/src/app/sales/bills/bills.component.css
View File

@ -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;
}

136
bookie/src/app/sales/bills/bills.component.html
View File

@ -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
View 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

6
bookie/src/app/sales/bills/bills.component.ts
View File

@ -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);
}

29
bookie/src/app/sales/home/sales-home.component.css
View File

@ -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;
}

34
bookie/src/app/sales/home/sales-home.component.html
View File

@ -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>

25
bookie/src/app/sales/menu-categories/menu-categories.component.css
View File

@ -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;
}

6
bookie/src/app/sales/menu-categories/menu-categories.component.html
View File

@ -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>

0
bookie/src/app/sales/menu-categories/menu-categories.component.sass Normal file
View File

2
bookie/src/app/sales/menu-categories/menu-categories.component.ts
View File

@ -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[] = [];

11
bookie/src/app/sales/modifiers/modifiers.component.css
View File

@ -1,11 +0,0 @@
.square-button {
min-width: 150px;
max-width: 150px;
min-height: 150px;
cursor: pointer;
margin: 20px;
}
.selected {
background-color: #dddddd;
}

5
bookie/src/app/sales/modifiers/modifiers.component.html
View File

@ -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>

35
bookie/src/app/sales/products/products.component.css
View File

@ -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;
}

16
bookie/src/app/sales/products/products.component.html
View File

@ -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>

39
bookie/src/app/sales/running-tables/running-tables.component.css
View File

@ -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;
}

20
bookie/src/app/sales/running-tables/running-tables.component.html
View File

@ -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>

0
bookie/src/app/sales/running-tables/running-tables.component.sass Normal file
View File

2
bookie/src/app/sales/running-tables/running-tables.component.ts
View File

@ -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[] = [];

30
bookie/src/app/sales/tables-dialog/tables-dialog.component.css
View File

@ -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;
}

16
bookie/src/app/sales/tables-dialog/tables-dialog.component.html
View File

@ -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>

0
bookie/src/app/sales/tables-dialog/tables-dialog.component.sass Normal file
View File

2
bookie/src/app/sales/tables-dialog/tables-dialog.component.ts
View File

@ -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[] = [];

5
bookie/src/app/settings/settings.component.css
View File

@ -11,11 +11,6 @@
background: #f8d7da;
}
.center {
display: flex;
justify-content: center;
}
.img-container {
position: relative;
}

4
bookie/src/app/temporal-product/temporal-product-list/temporal-product-list.component.css
View File

@ -3,10 +3,6 @@
justify-content: flex-end;
}
.center {
text-align: center;
}
.material-icons {
vertical-align: middle;
}

4
bookie/src/index.html
View File

@ -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>

5
bookie/src/main.ts
View File

@ -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));

78
bookie/src/styles.sass
View File

@ -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)