Code Samples

View model for shipping process

Project: Sip Better - Admin PanelLanguage: TypeScriptFramework: Aurelia

import {autoinject, viewResources, PLATFORM} from 'aurelia-framework';
import {App} from 'app';
import {Route} from 'route';
import {WebService} from 'webservice';
import {copyValue} from 'utils';
import {DateFormatter} from 'dateFormatter';
import {Price} from 'price';
import {OkButton, YesButton, NoButton} from 'elements/dialog';
import {ProductData, addExtraBottles} from './order';

class Info {
	constructor(private readonly label: string, public value: string) {}
}

class CheckInResult {
	constructor(public readonly success: boolean, public readonly message: string) {}
}

class Product implements ProductData {
	public readonly product: ProductData['product'];
	public readonly quantity: number;
	public readonly subtotal: number;
	public readonly origPrice: number;
	public readonly unitPrice: number;
	public readonly image: string;
	public readonly originalImage: string;
	public isComplete: boolean = false;

	private readonly quantityInfo: Info;
	private readonly info: Info[];
	private checkedIn: number = 0;

	constructor(productData: ProductData, order: any) {
		Object.assign(this, productData);
		this.quantityInfo = new Info('Quantity', '0 of ' + this.quantity.toString());
		this.info = [
			new Info('Vintage', this.product.year),
			new Info('UPC', this.product.upc),
			new Info('Price', '$' + Price.fromCents(this.unitPrice).toString()),
			this.quantityInfo
		];
		if (this.product.hasImage) {
			const imgPath = `${order.imageUri}/products/${this.product._id}_`;
			this.image = `${imgPath}300.jpeg`;
			this.originalImage = `${imgPath}original.jpeg`;
		} else {
			this.image = this.originalImage = '/assets/wines/generic.jpg';
		}
	}

	public checkIn(): CheckInResult {
		if (this.isComplete) return new CheckInResult(false, `All bottles of ${this.product.name} already checked in`);
		this.checkedIn++;
		this.quantityInfo.value = `${this.checkedIn} of ${this.quantity}`;
		this.isComplete = this.checkedIn >= this.quantity;
		return new CheckInResult(true, `${this.product.name}: ${this.checkedIn} of ${this.quantity}`);
	}
}

class Box implements BoxData {
	public readonly bottles: number;
	public readonly size: number;
	public readonly weight: number;
	public readonly base: number;
	public readonly subtotal: number;
	public readonly handling: number;
	public readonly total: number;
	public readonly upcInput: HTMLInputElement;

	public tracking: string;
	public barcode?: string;

	private readonly isShipping: boolean;
	private formattedTracking: string;
	private error?: string;

	constructor(rawData: BoxData, private readonly order: any) {
		Object.assign(this, rawData);
		this.isShipping = !!order.shippingData.provider;
	}

	public track(): boolean {
		const {trackingRegex}: {trackingRegex: RegExp} = this.order.shippingData.provider;
		const barcode = this.barcode.match(trackingRegex);
		this.barcode = '';
		this.error = '';

		if (!barcode) {
			this.error = 'Invalid tracking number';
			this.upcInput.focus();
			return false;
		}

		this.tracking = barcode.slice(1).join('');
		this.formattedTracking = this.tracking.match(trackingRegex).slice(1).join(' ');

		return true;
	}
	
	public reset(): boolean {
		this.barcode = '';
		this.error = '';
		this.tracking = '';
		this.formattedTracking = '';
		setTimeout(() => {
			this.upcInput.focus();
		}, 0);
		return false;
	}
}

class Beep {
	private readonly context: AudioContext = new AudioContext();
	private readonly gain: GainNode = this.context.createGain();

	constructor(private readonly frequency: number, gainValue: number, private readonly seconds: number, private readonly type?: OscillatorType) {
		this.gain.gain.value = gainValue;
		this.gain.connect(this.context.destination);
	}

	public emit(): void {
		const oscillator = this.context.createOscillator();
		oscillator.frequency.value = this.frequency;
		if (this.type) oscillator.type = this.type;

		oscillator.connect(this.gain);
		oscillator.start();
		oscillator.stop(this.context.currentTime + this.seconds);
	}
}

@autoinject
@viewResources(PLATFORM.moduleName('elements/address'))
export class Ship {
	private route: Route;
	private order: any;
	private error?: string;
	private status?: CheckInResult;
	private isLoading: boolean = true;
	private isPackaged: boolean = false;
	private isPrinted: boolean = false;
	private isTracked: boolean = false;
	private isComplete: boolean = false;
	private upcInput: HTMLInputElement;
	private barcode: string;
	private infoList: Info[];
	private boxes: Box[];
	private referralBottles: number = 0;
	private products: Product[];
	private beepSuccess: Beep = new Beep(1000, 0.5, 0.2);
	private beepError: Beep = new Beep(180, 0.25, 0.5, 'square');

	constructor(private readonly app: App) {}

	private attached(): void {
		const {currentInstruction} = this.app.router;
		this.route = currentInstruction.config.settings.route;

		WebService.post('orders/details', {id: currentInstruction.params.id}).then(({order}) => {
			if (order.shippedAt) return location.href = '/orders/' + order.orderId;
			if (!order.customer) order.customer = order.guest;

			const {shippingData} = order;
			const {provider, service, boxes} = shippingData;

			this.order = order;
			this.infoList = [
				new Info('Order ID', order.orderId),
				new Info('Customer', order.customer.firstName + ' ' + order.customer.lastName),
				new Info('Created', DateFormatter.format(new Date(order.createdAt))),
				new Info('Order Type', (order.isGift ? 'Gift ' : '') + order.type.replace(/(\w)(\w+?)([A-Z]\w+)/, (match, a, b, c) => a.toUpperCase() + b + ' ' + c))
			];
			if (order.type === 'tastingKit') this.infoList.push(new Info('Tasting Kit', this.order.kitName));
			this.infoList.push(
				new Info('Insert', this.getInsert()),
				new Info('Promo Code', order.promoCode && order.promoCode.code || 'None'),
				new Info('Shipping', provider ? provider.name + (service ? ' ' + service : '') : 'In-Store Pickup')
			);

			this.boxes = boxes.map((box) => new Box(box, order));
			this.referralBottles = addExtraBottles(this.order);
			if (provider) provider.trackingRegex = new RegExp(provider.trackingRegex[0], provider.trackingRegex[1]);

			const missingUpc: ProductData['product'][] = [];
			this.products = order.products.filter((productData) => productData.quantity > 0).map((productData) => {
				const product = new Product(productData, order);
				if (!product.product.upc && product.product._id !== 'promo') missingUpc.push(product.product);
				return product;
			});

			const isDisabled = order.customer && (order.customer.isDisabled || order.customer.isRemoved);
			if (isDisabled || missingUpc.length) {
				this.app.dialogContainer.open(
					isDisabled ? PLATFORM.moduleName('views/dialogs/customer-disabled.html') : PLATFORM.moduleName('views/dialogs/missing-upc.html'),
					isDisabled ? {} : {products: missingUpc},
					{
						heading: isDisabled ? 'Account Disabled' : 'Missing UPC',
						hideCloseButton: true,
						buttons: [
							new OkButton((dialog) => {
								dialog.closeAll();
								this.app.router.navigateToRoute('order', {id: order.orderId});
							})
						]
					}
				);
			}

			this.isLoading = false;
			setTimeout(() => this.upcInput.focus(), 0);
		}, (error) => {
			this.error = error;
			this.isLoading = false;
		});
	}

	private copyValue(value: string): void {
		copyValue(value);
		this.focusUpc();
	}

	private getInsert(): string {
		if (this.order.type === 'tastingKit') {
			if (this.order.isGift) return 'Gift: ' + this.order.kitName;
			return 'Welcome';
		}
		if (this.order.type === 'clubOrder') return 'Club Shipment';
		if (this.order.guest || this.order.customerType === 'limitedCustomer') return 'Store Order - Guest';
		return 'Store Order - Member';
	}

	private checkComplete(): boolean {
		this.isPackaged = !this.products.find((product) => !product.isComplete);
		this.isTracked = !this.order.shippingData.provider || !this.boxes.find((box) => !box.tracking);
		this.isComplete = this.isPackaged && this.isTracked;
		return this.isComplete;
	}

	private checkIn(product: Product): void {
		this.status = product.checkIn();
		if (this.checkComplete()) return;
		this.focusUpc();
	}

	private checkBarcode({key}: KeyboardEvent): boolean {
		if (key !== 'Enter' && key !== 'Tab' || !this.barcode) return true;
		const product = this.products.find((product) => product.product.upc === this.barcode);
		if (product) this.checkIn(product);
		else this.status = new CheckInResult(false, 'Invalid UPC or lookup code');
		this.barcode = '';
		this.beep(this.status.success);
		return false;
	}

	private checkTracking({key}: KeyboardEvent, box: Box): boolean {
		if (key !== 'Enter' && key !== 'Tab' || !box.barcode) return true;
		const success = box.track();
		this.beep(success);
		if (!success) return false;
		if (this.checkComplete()) return false;
		(this.isTracked ? this as any : this.boxes.find((box) => !box.tracking)).upcInput.focus();
		return false;
	}

	private focusUpc(): boolean {
		(this.isPackaged ? this.boxes.find((box) => !box.tracking) : this as any).upcInput.focus();
		return true;
	}

	public print(): void {
		if (this.isLoading || !this.order) return;
		this.isLoading = true;

		(new Promise((resolve, reject) => {
			if (!this.isPrinted || !this.order.shippingData.provider) return resolve();
			this.app.dialogContainer.open(PLATFORM.moduleName('views/dialogs/confirm-reprint.html'), {}, {
				heading: 'Print Labels',
				buttons: [
					new YesButton((dialog) => {
						resolve();
						dialog.close();
					}),
					new NoButton((dialog) => {
						reject();
						dialog.close();
					})
				]
			});
		})).then(() => WebService.get('auth/getKey').then(({key}) => {
			if (!key) {
				this.error = 'Could not get authorization key';
				return;
			}
			this.isPrinted = true;
			let {provider} = this.order.shippingData;
			provider = provider && provider.id || 'pickup';
			location.href = `sipbetter://${location.hostname}/label/${provider}/${this.order._id}?key=${key}&referralBottles=${this.referralBottles}`;
		}, (error) => {
			this.error = error;
		})).finally(() => {
			this.isLoading = false;
		});
	}

	private ship(): void {
		if (this.isLoading || !this.order || !this.isComplete) return;
		this.isLoading = true;
		this.status = null;

		WebService.post('orders/ship', {id: this.order._id, referralBottles: this.referralBottles, tracking: this.trackingNumbers}).then(() => {
			if (window.opener) window.opener.dispatchEvent(new CustomEvent('sbItemChanged', {detail: 'orders'}));
			location.href = '/orders/' + this.order.orderId;
		}, (error) => {
			this.error = error;
			this.isLoading = false;
		});
	}

	private beep(success: boolean): void {
		this[success ? 'beepSuccess' : 'beepError'].emit();
	}

	private get trackingNumbers(): string[] {
		return this.order.shippingData.provider && this.boxes.map((box) => box.tracking);
	}
}

interface BoxData {
	bottles: number;
	size: number;
	weight: number;
	base: number;
	subtotal: number;
	handling: number;
	total: number;
	tracking: string;
}

View model class

Project: RQR PartnersLanguage: TypeScript

import express from 'express';
import {App} from './app';
import {Config} from './config';
import {ViewRenderer} from './viewRenderer';
import {Session} from './session';
import {Translation, TranslationLink} from './translation';

/**
 * The Model class
 * @abstract
 */
export abstract class Model {
	public readonly mainView: string = 'index';
	protected readonly Request: typeof PageRequest = PageRequest;

	public abstract readonly route: string | null;
	public abstract readonly view: string;

	public readonly config: Config;
	private _viewRenderer?: ViewRenderer;

	constructor(public readonly app: App) {
		this.config = app.config;
	}

	/**
	 * Executes a request for this view model
	 * @param {express.Request} request The Express Request object
	 * @param {express.Response} response The Express Response object
	 * @memberof Model
	 */
	exec(request: express.Request, response: express.Response): void {
		const modelRequest = new this.Request(this, request, response);
		if (modelRequest.load) modelRequest.load.then(() => {
			modelRequest.render();
		});
	}

	/**
	 * Translates a string for this view model
	 * @param {string} id The string ID
	 * @param {PageRequest} request The PageRequest instance
	 * @returns {string} The translated string
	 * @memberof Model
	 */
	translate(id: string, request: PageRequest): string {
		return this.app.translate(this.view, id, request);
	}

	/**
	 * Gets or creates the ViewRenderer instance for this view model
	 * @readonly
	 * @type {ViewRenderer}
	 * @memberof Model
	 */
	get viewRenderer(): ViewRenderer {
		if (!this._viewRenderer) this._viewRenderer = new ViewRenderer(this.app, this.view);
		return this._viewRenderer;
	}
}

/**
 * The PageRequest class, which is instantiated for each request
 * @export
 * @class PageRequest
 */
export class PageRequest {
	public readonly load: Promise<void>;
	public readonly query: object;
	public readonly post: object;
	public session?: Session;
	public language?: string;
	public view: string = '';
	public title: string = '';
	public headerNav: string = '';
	public languages: TranslationLink[];

	/**
	 * Creates a PageRequest instance
	 * @param {Model} model The Model instance for the page being requested
	 * @param {express.Request} request The Express Request object
	 * @param {express.Response} response The Express Response object
	 * @memberof PageRequest
	 */
	constructor(public readonly model: Model, public readonly request: express.Request, public readonly response: express.Response) {
		this.query = request.query;
		this.post = request.body;
		this.language = Translation.languages[request.params.language] ? request.params.language : 'en';
		this.languages = Translation.linkList(this);

		const title = this.translate('title');
		this.title = this.model.config.title + (title ? ` ${this.model.config.titleSeparator} ${title}` : '');

		if (request.cookies[model.app.config.sessionCookie]) {
			this.load = Session.load(request.cookies[model.app.config.sessionCookie]).then((session) => {
				this.session = session;
			});
		} else {
			this.session = new Session();
			this.load = Promise.resolve();
		}
	}

	/**
	 * Translates a string for the requested page
	 * @param {string} id The string ID
	 * @returns {string} The translated string
	 * @memberof PageRequest
	 */
	translate(id: string): string {
		return this.model.translate(id, this);
	}

	/**
	 * Renders the page and sends it to the client
	 * @memberof PageRequest
	 */
	render(): void {
		const scope = {request: this, model: this.model};
		this.headerNav = this.model.app.navigation.header.render(this.model.view, this);
		this.view = this.model.viewRenderer.render(scope);
		if (this.session) this.response.cookie(this.model.app.config.sessionCookie, this.session.key, {httpOnly: true});
		this.response.send(this.model.app.viewRenderer.render(scope));
	}
}

Page and Nav classes

Project: ELEVENLanguage: PHP

<?php

class Page {
	var $route, $controller, $title, $active, $icon;
	public function __construct($route, $controller, $title = null, $icon = null, $description = null) {
		global $mainDescription;
		$this->route = $route;
		$this->controller = $controller;
		$this->title = $title;
		$this->icon = $icon;
		$this->description = $description ? $description : $mainDescription;
		$this->active = false;
	}
	public function write() {
		require_once('pages/' . $this->controller . '.php');
	}
	public function fullTitle() {
		global $mainTitle;
		return ($this->title && strlen($this->title) ? ($this->title . ' | ') : '') . $mainTitle;
	}
}

class HiddenPage extends Page {
	var $hidden = true;
}

class Nav {
	var $pages, $activeRoute, $activePage;
	public function __construct($pages) {
		$this->pages = array();
		$this->activeRoute = $_SERVER['REDIRECT_URL'];
		foreach ($pages as &$page) {
			$this->addPage($page);
		}
	}
	public function activate($page) {
		$page->active = true;
		$this->activePage = &$page;
	}
	public function addPage($page) {
		if ($page->route == $this->activeRoute) $this->activate($page);
		$this->pages[] = &$page;
	}
}

Client-side carousel script

Project: ELEVENLanguage: JavaScript/jQuery

$(document).ready(function() {
	var page = $('body').data('page');

	if (page == 'home') {

		// Delay between automatic cycle
		var delay = 8000;

		for (var i = 0; i < 4; i++) {
			$('#preloader').append('<img src="/assets/home' + i + '.jpg">')
		}

		var moving = false;
		var position = 0;
		var body = $('body');
		var bgContainer = $('#bgContainer');
		var mainHeader = $('#container > main > header');
		var carousel = $('#container > main > div');
		var section = carousel.children('section');
		var secHeader = section.children('header');
		var headingsContainer = secHeader.children('div');
		var headings = headingsContainer.children('h2');
		var copyContainer = section.find('> main > div');
		var b = {
			prev: carousel.children('[data-prev]'),
			next: carousel.children('[data-next]')
		};

		var check = function() {
			b.prev.toggleClass('disabled', position <= 0);
			b.next.toggleClass('disabled', position >= headings.length - 1);
		};
		var flip = function(dir) {
			if (moving) return;
			moving = true;
			var origPos = position;
			position += dir;
			if (position >= headings.length) position = 0;
			if (position < 0) position = headings.length - 1;
			headingsContainer.css('top', (position * -100) + '%');
			copyContainer.css('left', (position * -100) + '%');
			mainHeader.css({
				top: position == 0 ? '0' : '-10em',
				opacity: position == 0 ? 1 : 0
			});
			bgContainer.attr('data-slide', origPos).removeClass('fading');
			body.attr('data-slide', position);
			bgContainer.css('opacity'); // Hack to force DOM redraw
			bgContainer.addClass('fading');
			check();
			if ('ontransitionend' in bgContainer[0]) {
				bgContainer.on('transitionend', function() {
					moving = false;
				});
			} else {
				setTimeout(function() {
					moving = false;
				}, 500);
			}
		}
		var auto = setInterval(function() {
			flip(1);
		}, delay);
		var stop = function() {
			if (!auto) return;
			clearInterval(auto);
			auto = null;
		}
		b.prev.click(function() {
			if (b.prev.hasClass('disabled')) return;
			stop();
			flip(-1);
		});
		b.next.click(function() {
			if (b.next.hasClass('disabled')) return;
			stop();
			flip(1);
		});
		check();

		if ('onwheel' in window) $(window).on('wheel', function(e) {
			if (e.originalEvent.deltaY > 0) b.next.click();
			if (e.originalEvent.deltaY < 0) b.prev.click();
		});
		if ('ontouchstart' in copyContainer[0]) {
			copyContainer.on('touchstart', function(e1) {
				var start = e1.originalEvent.changedTouches[0];
				var ts = Date.now();
				copyContainer.one('touchend', function(e2) {
					if (Date.now() - ts > 1000) return;
					var end = e2.originalEvent.changedTouches[0];
					if (end.screenX < start.screenX) b.next.click();
					if (end.screenX > start.screenX) b.prev.click();
					return false;
				});
			});
		}
	}
});