diff --git a/counter/static/bundled/counter/counter-click-index.ts b/counter/static/bundled/counter/counter-click-index.ts index 46f61860..5755b7c7 100644 --- a/counter/static/bundled/counter/counter-click-index.ts +++ b/counter/static/bundled/counter/counter-click-index.ts @@ -9,6 +9,11 @@ exportToHtml("loadCounter", (config: CounterConfig) => { errors: [], customerBalance: config.customerBalance, codeField: undefined, + alertMessage: { + content: "", + show: false, + timeout: null, + }, init() { // Fill the basket with the initial data @@ -33,7 +38,7 @@ exportToHtml("loadCounter", (config: CounterConfig) => { delete this.basket[id]; }, - addToBasket(id: string, quantity: number): [boolean, string] { + addToBasket(id: string, quantity: number): string { const item: BasketItem = this.basket[id] || new BasketItem(config.products[id], 0); @@ -42,16 +47,20 @@ exportToHtml("loadCounter", (config: CounterConfig) => { if (item.quantity <= 0) { delete this.basket[id]; - return [true, ""]; - } - - if (item.sum() > this.customerBalance) { - item.quantity = oldQty; - return [false, gettext("Not enough money")]; + return ""; } this.basket[id] = item; - return [true, ""]; + + if (this.sumBasket() > this.customerBalance) { + item.quantity = oldQty; + if (item.quantity === 0) { + delete this.basket[id]; + } + return gettext("Not enough money"); + } + + return ""; }, getBasketSize() { @@ -69,6 +78,25 @@ exportToHtml("loadCounter", (config: CounterConfig) => { return total; }, + showAlertMessage(message: string) { + if (this.alertMessage.timeout !== null) { + clearTimeout(this.alertMessage.timeout); + } + this.alertMessage.content = message; + this.alertMessage.show = true; + this.alertMessage.timeout = setTimeout(() => { + this.alertMessage.show = false; + this.alertMessage.timeout = null; + }, 2000); + }, + + addToBasketWithMessage(id: string, quantity: number) { + const message = this.addToBasket(id, quantity); + if (message.length > 0) { + this.showAlertMessage(message); + } + }, + onRefillingSuccess(event: CustomEvent) { if (event.type !== "htmx:after-request" || event.detail.failed) { return; @@ -81,9 +109,11 @@ exportToHtml("loadCounter", (config: CounterConfig) => { }, finish() { - if (this.getBasketSize() > 0) { - this.$refs.basketForm.submit(); + if (this.getBasketSize() === 0) { + this.showAlertMessage(gettext("You can't send an empty basket.")); + return; } + this.$refs.basketForm.submit(); }, cancel() { @@ -104,7 +134,7 @@ exportToHtml("loadCounter", (config: CounterConfig) => { this.finish(); } } else { - this.addToBasket(code, quantity); + this.addToBasketWithMessage(code, quantity); } this.codeField.widget.clear(); this.codeField.widget.focus(); diff --git a/counter/templates/counter/counter_click.jinja b/counter/templates/counter/counter_click.jinja index 9f99c4b5..36ab3ad2 100644 --- a/counter/templates/counter/counter_click.jinja +++ b/counter/templates/counter/counter_click.jinja @@ -31,6 +31,14 @@
Javascript is required for the counter UI.
+ +