Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add more options for customizations and translations #52

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Add more options for customizations and translations #52

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
19,736 changes: 11,657 additions & 8,079 deletions package-lock.json
View file
Open in desktop
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I see you probably used a newer version of npm and this has lockfileVersion 3. However I wouldn't update it in this PR, so it would be nice if you could revert it to original.

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion src/components/cart/CartHeader.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@ class CartHeader extends Base<HTMLDivElement> {

private updateCartTitle(): void {
const count = this.store.countCartItems();
this.title.textContent = `Cart (${count})`;
this.title.textContent = `${this.store.getOptions().cart?.titleLabel ?? 'Cart'} (${count})`;
}
}

Expand Down
6 changes: 5 additions & 1 deletion src/components/cart/CartItem.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ class CartItem extends Base<HTMLDivElement> {
private ticket: CartTicket;
private seatPriceTd: HTMLTableCellElement;
private currency: string;
private currencyBehind: boolean;
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

A better alternative and naming for this property could be:

private currencyPosition: 'start' | 'end';


public constructor(index: SeatIndex, store: Store) {
const cartItem = document.createElement('tr');
Expand All @@ -27,6 +28,7 @@ class CartItem extends Base<HTMLDivElement> {

const { cart } = store.getOptions();
this.currency = cart?.currency || DEFAULT_CURRENCY;
this.currencyBehind = cart?.currencyBehind ?? false;
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

For consistency I would create a constant DEFAULT_CURRENCY_POSITION and set it to 'start', so this would be:

this.currencyPosition = cart?.currencyPosition || DEFAULT_CURRENCY_POSITION;


this.seatPriceTd = document.createElement('td');
this.seatPriceTd.textContent = this.formatPrice(typeOptions.price);
Expand All @@ -50,7 +52,9 @@ class CartItem extends Base<HTMLDivElement> {
}

private formatPrice(price: number) {
return `${this.currency}${price.toFixed(2)}`;
return this.currencyBehind
? `${price.toFixed(2)}${this.currency}`
: `${this.currency}${price.toFixed(2)}`;
Copy link
Owner

@omahili omahili Oct 12, 2023 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You can format the price once before creating the string:

const formattedValue = price.toFixed(2);
return this.currencyPosition === 'start'
  ? `${this.currency}${formattedValue}`
  : `${formattedValue}${this.currency}`;

}

public update(seatLabel: string, seatType: SeatType) {
Expand Down
9 changes: 8 additions & 1 deletion src/components/cart/CartTotal.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,8 @@ import { DEFAULT_CURRENCY } from 'consts';
class CartTotal extends Base<HTMLDivElement> {
private store: Store;
private currency: string;
private currencyBehind: boolean;
private label: string;

public constructor(store: Store) {
const total = document.createElement('p');
Expand All @@ -16,6 +18,8 @@ class CartTotal extends Base<HTMLDivElement> {

const { cart } = this.store.getOptions();
this.currency = cart?.currency || DEFAULT_CURRENCY;
this.currencyBehind = cart?.currencyBehind ?? false;
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Same improvements for currencyBehind as mentioned for CartItem.

this.label = cart?.totalLabel ?? 'Total';

this.updateTotalText(); // init total text
this.updateTotalText = this.updateTotalText.bind(this);
Expand All @@ -27,7 +31,10 @@ class CartTotal extends Base<HTMLDivElement> {

private updateTotalText() {
const total = this.store.getCartTotal();
this.element.textContent = `Total: ${this.currency}${total.toFixed(2)}`;
const totalString = this.currencyBehind
? `${total.toFixed(2)}${this.currency}`
: `${this.currency}${total.toFixed(2)}`
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Also here I would create formattedValue before building the string.

this.element.textContent = `${this.label}: ${totalString}`;
}
}

Expand Down
11 changes: 8 additions & 3 deletions src/components/legend/Legend.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import { DEFAULT_CURRENCY } from 'consts';

class Legend extends Base<HTMLUListElement> {
public constructor(store: Store) {
const { cart, map } = store.getOptions();
const { cart, map, reservedLegendLabel, hideLegendPrice } = store.getOptions();
const list = document.createElement('ul');
list.className = 'sc-legend';

Expand All @@ -17,12 +17,17 @@ class Legend extends Base<HTMLUListElement> {

for (const type of types) {
const seatType = seatTypesOptions[type];
const description = `${seatType.label} (${currency}${seatType.price})`;
const currencyLocation = cart?.currencyBehind
? `${seatType.price}${currency}`
: `${currency}${seatType.price}`;
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

currencyLocation naming can be improved here to formattedCurrency.

const description = hideLegendPrice
? `${seatType.label}`
: `${seatType.label} (${currencyLocation})`;
const item = new LegendItem(description, seatType.cssClass);
list.appendChild(item.element);
}

const reservedItem = new LegendItem('Reserved', 'sc-seat-reserved');
const reservedItem = new LegendItem(reservedLegendLabel ?? 'Reserved', 'sc-seat-reserved');
list.appendChild(reservedItem.element);

super(list);
Expand Down
4 changes: 2 additions & 2 deletions src/components/map/FrontIndicator.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
import Base from 'components/Base';

class MapFrontIndicator extends Base<HTMLDivElement> {
public constructor() {
public constructor(frontLabel: string) {
const front = document.createElement('div');
front.textContent = 'Front';
front.textContent = frontLabel;
front.className = 'sc-front';

super(front);
Expand Down
2 changes: 1 addition & 1 deletion src/components/map/Map.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,7 @@ class Map extends Base<HTMLDivElement> {
const innerContainer = document.createElement('div');
innerContainer.className = 'sc-map-inner-container';
if (frontVisible === undefined || frontVisible) {
const frontHeader = new FrontIndicator();
const frontHeader = new FrontIndicator(options.map.frontLabel ?? 'Front');
innerContainer.appendChild(frontHeader.element);
}

Expand Down
7 changes: 7 additions & 0 deletions src/types/options.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -81,6 +81,7 @@ interface Options {
* Sets front header visibility.
*/
frontVisible?: boolean;
frontLabel?: string;
};
/**
* Cart options.
Expand All @@ -98,11 +99,17 @@ interface Options {
* Label displayed on the submit button.
*/
submitLabel?: string;
titleLabel?: string;
totalLabel?: string;
currencyBehind?: boolean;
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

As mentioned above this would become:

currencyPosition: 'start' | 'end';

showTotal?: boolean;
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

showTotal was added but it's not used anywhere.

};
/**
* Legend visibility.
*/
legendVisible?: boolean;
reservedLegendLabel?: string;
hideLegendPrice?: boolean;
}

export { Options };