consumerportal/js/src/controllers/diet/components/metrics.ts

mydna Custimised for you

/// <reference path="../../../includes.ts" />

module app {

    class MetricsController {

        public $onInit:Function;
        private details: any;
        public label: string;
        public valid: boolean;
        public state: any;
        public open: boolean = false;
        public loaded: boolean = false;
        private random: number = Math.random();

        public static $inject = [
            '$scope',
            '$routeParams',
            'dietService'
        ];
        constructor(
            private $scope: angular.IScope,
            $routeParams: angular.route.IRouteParamsService,
            private dietService: services.IDietService
        ) {
            this.$onInit = () => {
                this.dietService.details($routeParams.type).then((value: any) => {
                    this.details = value;
                    this.setGoal(value.goal);
                });

                $scope.$on('changeUser', (user: any) => {
                    this.details = null;
                });
            }
        }

        setGoal(value: string) {
            this.details.goal = value;
            this.label = value === 'maintenance' ? 'Weight Maintenance' : 'Weight Loss';
            this.dietService.setGoal(value);
            this.open = false;
        }

        private removeListeners() {
            $(document).off('click.toggle' + this.random);
            $(window).off('scroll.popup' + this.random);
        }

        public $onDestroy() {
            this.removeListeners();
        }

        private close = () => {
            this.open = false;
            this.removeListeners();
            this.$scope.$apply();
        };

        public showTabs(ev: any) {
            if (!this.open) {
                this.open = true;
                setTimeout(() => {
                    $(document).on('click.toggle' + this.random, this.close);
                    $(window).on('scroll.popup' + this.random, this.close)
                });
            }
        }
    }

    class Metrics {
        public bindings: any;
        public template: string = `
            <div class="tabs">
                <div class="menu" ng-click="vm.showTabs()"><div class="chevron" ng-class="{open: vm.open}"></div><div>My Goal:</div><div>{{vm.label}}</div></div>
                <span>My goal is...</span>
                <div class="links" ng-class="{open: vm.open}">
                    <div ng-click="vm.setGoal('loss')" ng-class="{selected: vm.details.goal === 'loss'}">Weight Loss</div>
                    <div ng-click="vm.setGoal('maintenance')" ng-class="{selected: vm.details.goal === 'maintenance'}">Weight Maintenance</div>
                </div>
            </div>
            
        `;
        public controller: any = MetricsController;
        public controllerAs: string = 'vm';

        constructor() {
        }

    }

    angular
        .module('app')
        .component('dietMetrics', new Metrics());
}