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

mydna Custimised for you

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

module app {

    import ISportsResult = services.ISportsResult;
    import ISportsResultTab = services.ISportsResultTab;

    class Controller {
        public static $inject = ["$scope", "$sce"];

        private originalTab: string;
        public mine: boolean = true;
        private result: ISportsResult;
        private tab: ISportsResultTab;
        public open: boolean = false;
        public html: Function;

        constructor(
            private $scope: angular.IScope,
            private $sce: angular.ISCEService
        ) {
            this.html = $sce.trustAsHtml;
        }
        public $onInit = () => {
            this.result.tabs.forEach((tab: ISportsResultTab) => {
                if (tab.value.indexOf(this.result.result) >= 0) {
                    this.tab = tab;
                    this.originalTab = tab.value;
                }
            });

            this.$scope.$on('resultTabChanged', (ev: any, value: ISportsResultTab) => {
                this.tab = value;
                this.mine = this.originalTab === this.tab.value
            })

        };


        toggleOpen() {
            this.open = !this.open;
        }
    }

    class Result {
        public bindings: any = {
            result: '<',
            colors: '<'
        };
        public template: string = `
            <div class="result">
                <div class="bigTitle light" ng-click="vm.toggleOpen()">
                    <div class="chevron" ng-class="{open: vm.open}"></div>
                    <div class="block">
                        <div ng-bind="vm.result.gene + ' Gene'"></div>
                        <div ng-bind="vm.result.title"></div>
                    </div>
                    <div class="block sub">
                        <div>Your Result</div>
                        <div ng-class="vm.colors[vm.result.result]" ng-bind-template="{{vm.result.result | alleles : (vm.result.separator || '')}}"></div>
                    </div>
                </div>
                <div class="content" ng-if="vm.open">
                    <div class="text padding" ng-bind-html="vm.html(vm.result.description)"></div>
                    <mydna-tabs event-name="'resultTabChanged'" 
                    value="vm.originalTab" 
                    tabs="vm.result.tabs" 
                    tab-class="'secondary'" 
                    selected-class="vm.colors[vm.tab.value]"
                    short-message="'Selected result...'"></mydna-tabs>
                    <div class="blockTitle hideAtTabsAsSelector" ng-class="vm.colors[vm.tab.value]">
                        <div ng-bind-template="{{vm.tab.label}} ({{vm.tab.displayName || vm.tab.value}})"></div>
                    </div>
                    <div class="warning red" ng-if="!vm.mine">This is not your result. It is only here for comparison purposes</div>
                    <div class="stats" ng-if="vm.tab.pc">
                        <div class="pie" ng-class="{inv: vm.tab.visPC > 50}">
                            <div class="border"></div>
                            <div class="base"></div>
                            <div class="slice">
                                <div ng-style="{transform: 'rotate(' + ((vm.tab.visPC - 50) * 3.6) + 'deg)'}"></div>
                            </div>
                        </div>
                        <div ng-bind="vm.tab.pc + ' of the population share this result *'"></div>
                    </div>
                    <div class="block" ng-repeat="content in vm.tab.content" ng-class="{other: !vm.mine}">
                        <div class="title" ng-bind="content.title"></div>
                        <p ng-bind-html="vm.html(content.content)"></p>
                    </div>
                    <div class="text padding" ng-bind-html="vm.html(vm.result.notes)"></div>
                </div>
            </div>
        `;
        public controller: any = Controller;
        public controllerAs: string = 'vm';

        constructor() {
        }

    }

    angular
        .module('app')
        .component('sportsResult', new Result());
}