consumerportal/js/src/controllers/sports/components/diary.ts

mydna Custimised for you

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

module app {

    import ISportsResult = services.ISportsResult;
    import ISportsResultTab = services.ISportsResultTab;
    import ISportsService = services.ISportsService;
    import IUserService = services.IUserService;
    import IPatientService = services.IPatientService;
    import IPatientCase = services.IPatientCase;
    import IUser = services.IUser;
    import ISportsDetails = services.ISportsDetails;
    import SportsWorkoutCombined = services.SportsWorkoutCombined;

    class Controller {

        private patientCase: IPatientCase;
        private user: IUser;
        private details: ISportsDetails;

        public dayIndex: number = new Date().getDay() - 1;
        public dayTodayIndex: number = this.dayIndex;
        public days: string[] = ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"];
        public dayForIndex: string;
        public goal: string;
        public level: string;
        public goalText: string;
        public levelText: string;
        public loaded: boolean = false;
        public ready: boolean = false;

        public static $inject = [
            '$scope',
            'patientService',
            'sportsService',
            'userService'
        ];

        public levels: any[] = [
            {value: 'beginner', label: 'Beginner'},
            {value: 'intermediate', label: 'Intermediate'},
            {value: 'advanced', label: 'Advanced'}
        ];


        public goals: any[] = [
            {value: 'weightloss', label: 'Weight Loss'},
            {value: 'fitness', label: 'Fitness'},
            {value: 'strength', label: 'Strength'},
            {value: 'mixed', label: 'Mixed'}
        ];

        public diary: SportsWorkoutCombined[];


        constructor(
            private $scope: angular.IScope,
            private patientService: IPatientService,
            private sportsService: ISportsService,
            private userService: IUserService
        ) {

            $scope.$on('sportsGoal', (ev: any, tab: any) => {
                this.setGoal(tab.value);
            });
            $scope.$on('sportsLevel', (ev: any, tab: any) => {
                this.setLevel(tab.value);
            });
        }
        public $onInit = () => {
            this.userService.user().then((user: IUser) => {
                this.user = user;
                this.patientService.cases().then((cases: IPatientCase[]) => {
                    let pc: IPatientCase = this.patientCase = cases.filter((c: IPatientCase) => { return c.ReportType === 'Sports'})[0];
                    this.sportsService.details().then((value: ISportsDetails) => {
                        this.details = value;
                        this.selectDay(this.dayTodayIndex);
                        this.load();
                    });
                });
            });
        };

        load() {
            this.diary = this.sportsService.diaryForCurrentMetrics();
            this.selectDay(this.dayIndex);
        }

        selectDay(index: number) {
            this.dayIndex = index;
            this.dayForIndex = this.days[index];
            this.$scope.$emit('selectDay', index);
        }

        setGoal(value: string) {
            if (value !== this.goal) {
                this.goal = value;
                this.goalText = this.goals.filter((g: any) => { return g.value === value})[0].label;
                this.update();
            }

        }

        setLevel(value: string) {
            if (value !== this.level) {
                this.levelText = this.levels.filter((l: any) => {
                    return l.value === value
                })[0].label;
                this.level = value;
                this.update();
            }
        }

        update() {
            if (this.level && this.goal) {
                this.sportsService.updateMetrics(this.goal, this.level).then(() => {
                    this.load();
                });
            }
        }

        reset() {
            this.ready = false;
        }

    }


    class Diary {
        public bindings: any = {

        };
        public template: string = `
            <div class="sportsDiary">
                <mydna-tabs message="'My goal is...'" short-message="'My goal is...'" ng-if="vm.details.goal" event-name="'sportsGoal'" value="vm.details.goal" tabs="vm.goals"></mydna-tabs>
                <div class="bigTitle hideAtTabsAsSelector"><div class="block">
                        <div>Tailored for You</div>
                        <div>{{vm.details.Phenotype === 'power' ? 'Power' : 'Endurance'}} Training Diary</div>
                    </div>
                    <div class="block sub">
                        <div>Your Selection</div>
                        <div>{{vm.goalText}} / {{vm.levelText}}</div>
                    </div>
                </div>
                <mydna-tabs message="'My level is...'" short-message="'My level is...'" ng-if="vm.details.level" event-name="'sportsLevel'" tabs="vm.levels" value="vm.details.level" tab-class="'under'"></mydna-tabs>
                
                <div class="days">
                    <div ng-repeat="day in [0,1,2,3,4,5,6]" ng-class="{selected: vm.dayIndex === day, other: vm.dayIndex !== vm.dayTodayIndex}" ng-click="vm.selectDay(day)">
                        <div class="{{vm.dayIndex === day ? vm.diary[day].key : ''}}">{{vm.days[day]}}</div>
                        <div>{{vm.diary[day].name}}</div>
                    </div>
                </div>
            </div>`;
        public controller: any = Controller;
        public controllerAs: string = 'vm';

        constructor() {
        }

    }

    angular
        .module('app')
        .component('sportsDiary', new Diary());
}