consumerportal/views/alcohol/dashboard.html

mydna Custimised for you

<div ng-if="!vm.loaded" class="window shadow loading"><span>Loading Details...</span></div>
<div ng-if="vm.loaded" class="window shadow report dashboard alcohol">
    <report-navigator
            title="'Alcohol'"
            links="vm.navigation"
            selected-value="'dashboard'"></report-navigator>
    <div class="main">
        <div class="inline collapse">
            <div class="text shadow padding">
                <div class="big">{{vm.user.Username}}</div>
                <div>{{vm.user.Age}}yo {{vm.user.Gender === 'M' ? 'Male' : 'Female'}}</div>
            </div>
            <div class="hero" ng-click="vm.open('#/alcohol/report')">
                <div>
                    <div class="title">Your Personalised Alcohol Report</div>
                    <div class="text">
                        We have created a printable file for your Healthcare professional which explains
                        the clinical aspects of your personalised alcohol report. This document also includes 
                        the evidence rating for all our recommendations. Please download this report and take it with you to your health.
                    </div>
                    <div class="link">Print Your Report</div>
                </div>
            </div>
        </div>
        <div class="gap"></div>
        <div class="gap"></div>
        <div class="inline collapse">
            <gauge name="'Sensitivity'" pc="vm.sensitivity.value"
                   left-label="'Normal'" top-label="''" right-label="'Increased'"
                   caption="'How sensitive are you to alcohol?'"
                   result="vm.sensitivity.result"></gauge>
            <gauge name="'Side Effects'" pc="vm.sideEffects.value"
                   left-label="'Lower'" top-label="''" right-label="'Greater'"
                   caption="'Are you at a greater risk of side-effects?'"
                   result="vm.sideEffects.result"></gauge>
            <gauge name="'Dependence'" pc="vm.dependence.value"
                   left-label="'Lower'" top-label="''" right-label="'Greater'"
                   caption="'Are you at a greater risk of alcoholism?'"
                   result="vm.dependence.result"></gauge>
        </div>
        <div class="inline collapse">
            <gauge name="'Binge Drinking'" pc="vm.bingeDrinking.value"
                   left-label="'Lower'" top-label="''" right-label="'Higher'"
                   caption="'How likely are you to binge drink?'"
                   result="vm.bingeDrinking.result"></gauge>
            <gauge name="'Hangover'" pc="vm.hangover.value"
                   left-label="'Lower'" top-label="''" right-label="'Higher'"
                   caption="'How likely are you to get a hangover?'"
                   result="vm.hangover.result"></gauge>
            <div></div>
            <!--div class="gauge active" ng-click="vm.showLegend()">
                <div class="title">Recommendation</div>
                <div class="caption" ng-bind="vm.recommendation"></div>
                <div class="subtitle">Health Implications</div>
                <div class="labels">
                    <div class="solo">One drink or less per day:</div>
                </div>
                <div class="impact" ng-class="vm.light.className">
                    <div ng-bind="vm.light.label"></div>
                    <div ng-if="vm.lightAsian">(in Caucasian population)</div>
                    <div ng-if="vm.heavyAsian && !vm.lightAsian">(in Caucasian and East Asian populations)</div>
                </div>
                <div class="impact" ng-if="vm.lightAsian" ng-class="vm.lightAsian.className">
                    <div ng-bind="vm.lightAsian.label"></div>
                    <div>(in East Asian population)</div>
                </div>
                <div class="labels">
                    <div class="solo">More than five drinks per day:</div>
                </div>
                <div class="impact" ng-class="vm.heavy.className">
                    <div ng-bind="vm.heavy.label"></div>
                    <div ng-if="vm.heavyAsian">(in Caucasian population)</div>
                    <div ng-if="vm.lightAsian && !vm.heavyAsian">(in Caucasian and East Asian populations)</div>
                </div>

                <div class="impact" ng-if="vm.heavyAsian" ng-class="vm.heavyAsian.className">
                    <div ng-bind="vm.heavyAsian.label"></div>
                    <div>(in East Asian population)</div>
                </div>
            </div-->

        </div>
    </div>
</div>