app.js

/// <reference path="../ts/sammyjs-0.7.d.ts" />
/// <reference path="../ts/jquery-1.8.d.ts" />
/// <reference path="../ts/knockout-2.2.d.ts" />
/// <reference path="bootstrapper.ts" />

module dashboard {
    export class queryParameters {
        constructor (campaignId: string, interval: string, date?: Date, from?: Date, to?: Date) {
            this.campaignId = campaignId;
            this.interval = interval;
            this.date = date;
            this.from = from;
            this.to = to;
        }
        campaignId: string;
        interval: string;
        date: Date;
        from: Date;
        to: Date;
    }

    export class dataContext {
        baseUrl: string;
        constructor (baseUrl: string) {
            this.baseUrl = baseUrl;
        }

        private ajaxRequest(url: string, data?: any, type: string = 'GET') {
            var options = {
                dataType: "json",
                contentType: "application/json",
                cache: true,
                type: type,
                data: ko.toJSON(data)
            };
            return $.ajax(url, options);
        }

        avaibleCampaigns() {
            return this.ajaxRequest('api/campaign')
        }

        loadTopSellingProducts(query: queryParameters) {
            return this.ajaxRequest('api/topSellingProducts', query);
        }

        loadSalesByProduct(query: queryParameters) {
            return this.ajaxRequest('api/salesByProduct', query);
        }

        loadTopSellingCatalogues(query: queryParameters) {
            return this.ajaxRequest('api/topSellingCatalogues', query);
        }

        loadTopPaymentMethods(query: queryParameters) {
            return this.ajaxRequest('api/topPaymentMethods', query);
        }

        loadSalesByState(query: queryParameters) {
            return this.ajaxRequest('api/salesByState', query);
        }
    }

    export class app {
        main: main;
        constructor (baseUrl: string) {
            this.main = new main(baseUrl);
        }
    }
}
$(() => { var app = new app('/'); });

main.js

/// <reference path="../ts/sammyjs-0.7.d.ts" />
/// <reference path="../ts/jquery-1.8.d.ts" />
/// <reference path="../ts/knockout-2.2.d.ts" />
/// <reference path="report1ViewModel.ts" />

module dashboard {
    export class main {
        data: dataContext;
        report1ViewModel: report1ViewModel;
        constructor (baseUrl: string) {
            this.data = new dataContext(baseUrl);

            var self = this;

            self.hideAll();

            var app = Sammy('#main', function () {
                var sammy = this;

                this.get('#/', context => {
                    self.activateContent('#home');
                });

                this.get('#/report/:id', context => {
                    var reportId: number;
                    reportId = context.params['id'];
                    self.activateContent('#report-' + reportId);
                    this.runReport(reportId);
                });

                this.get('#/logout', context => {
                    //logout
                });
            });

            app.run('#/');
        }

        private hideAll() {
            $('section.report')
                .hide()
                .removeClass('active')
                .addClass('inactive')
                .css('opacity', 0)
                .css('margin-left', 18);
        }

        private activateContent(id: string) {
            this.hideAll();
            $(id).show().animate({ marginRight: 0, marginLeft: 0, opacity: 1 },
                 450, 'swing').removeClass('inactive').addClass('active');
        }

        private runReport(reportId: number) {
            switch (reportId) {
                case 1:
                   
                    break;
                case 2:
                case 3:
                case 4:
                default:
                    break;

            }
        }
    }
}

report1ViewModel.js

/// <reference path="../ts/sammyjs-0.7.d.ts" />
/// <reference path="../ts/jquery-1.8.d.ts" />
/// <reference path="../ts/knockout-2.2.d.ts" />
/// <reference path="app.ts" />

module dashboard {
    export class report1ViewModel {
        availableCampaigns: KnockoutObservableArray;
        selected: selectedItems;
        summary: summary;
        topSellingProducts: KnockoutObservableArray;
        otherProductsQuantity: KnockoutObservableNumber;
        topSellingCatalogues: KnockoutObservableArray;
        otherCataloguesQuantity: KnockoutObservableNumber;
        topPaymentMethods: KnockoutObservableArray;
        topSellingPerState: KnockoutObservableArray;
        otherStatesQuantity: KnockoutObservableNumber;
    }

    export class selectedItems {
        campaign: KnockoutObservableString;
        interval: KnockoutObservableString;
        date: KnockoutObservableDate;
        fromDate: KnockoutObservableDate;
        toDate: KnockoutObservableDate;
    }

    export class summary {
        totalAmount: KnockoutObservableNumber;
        averageTicket: KnockoutObservableNumber;
        salesTotal: KnockoutObservableNumber;
        shippingTotal: KnockoutObservableNumber;
    }

    export class topSellingProductViewModel {
        name: KnockoutObservableString;
        sellingQuantity: KnockoutObservableNumber;
    }

    export class topSellingCatalogueViewModel {
        name: KnockoutObservableString;
        sellingQuantity: KnockoutObservableNumber;
    }

    export class topPaymentMethodViewModel {
        name: KnockoutObservableString;
        sellingQuantity: KnockoutObservableNumber;
    }

    export class topSellingPerStateViewModel {
        name: KnockoutObservableString;
        sellingQuantity: KnockoutObservableNumber;
    }
}