consumerportal/views/diet/meals.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 dietMenu" ng-init="reportLabel = vm.reportLabel || 'Diet'">
    <report-navigator title="reportLabel" links="vm.navigation" selected-value="'meals'"></report-navigator>
    <div class="main">
        <diet-age-warning ng-if="vm.user.Age < 19"></diet-age-warning>
        <div class="text desktop"><div class="title">So, what should your plate look like?</div></div>
        <div class="inline collapse">
            <div class="text">
                <p>
                    Here you can learn how your daily recommended number of servings for each food group can be combined to create healthy and delicious meals.
                </p>
                <p>
                    For each of your meals and snacks you are recommended to have a certain number of servings of
                    vegetables, fruit, grains, meat and meat alternatives, dairy and dairy alternatives, and healthy fat.
                </p>
            </div>
            <div class="text">
                <p>For example, a lunch option could contain the following:</p>
                <div class="iconLine">
                    <div><div class="dietVegetable"></div><div>3</div></div>
                    <!--<div><div class="dietFruit"></div><div>1</div></div>-->
                    <div><div class="dietGrain"></div><div>1</div></div>
                    <div><div class="dietMeat"></div><div>1</div></div>
                    <div><div class="dietDairy"></div><div>0.5</div></div>
                    <div><div class="dietFat"></div><div>1</div></div>
                </div>
                Knowing how many servings you need for each meal will allow you to create your own dishes or choose more appropriate take away or dining out options.
                </p>
            </div>
        </div>
        <diet-metrics ng-if="vm.details.loss"></diet-metrics>
        <diet-goal-title  title="vm.details[vm.details.goal].plan.Type" kj="vm.details[vm.details.goal].plan.Kj"></diet-goal-title>
        <mydna-tabs event-name="'menuTabChanged'" value="'breakfast'" tabs="vm.menuTabs" tab-class="'under'" short-message="'What should I have for...'"></mydna-tabs>
        <div class="blockTitle">
            <span>{{vm.selected.Name}}</span>
            <div class="sub breakdownBlock">
                <div ng-if="vm.selected.Grain"><div class="dietGrain"></div><div>{{vm.selected.Grain}}</div></div>
                <div ng-if="vm.selected.Meat"><div class="dietMeat"></div><div>{{vm.selected.Meat}}</div></div>
                <div ng-if="vm.selected.Dairy"><div class="dietDairy"></div><div>{{vm.selected.Dairy}}</div></div>
                <div ng-if="vm.selected.VegLowStarch"><div class="dietVegetable"></div><div>{{vm.selected.VegLowStarch}}</div></div>
                <div ng-if="vm.selected.VegStarchy"><div class="dietVegetable"></div><div>{{vm.selected.VegStarchy}}</div></div>
                <div ng-if="vm.selected.Fruit"><div class="dietFruit"></div><div>{{vm.selected.Fruit}}</div></div>
                <div ng-if="vm.selected.Fat"><div class="dietFat"></div><div>{{vm.selected.Fat}}</div></div>
            </div>
        </div>
        <div class="menuBlock" ng-if="vm.loaded">
            <div ng-repeat="meal in vm.selected.Meals track by $index" class="card">
                <div class="image" style="background-image: url('./images/diet/meals/{{meal.Reference}}.jpg')"></div>
                <div class="title"><div>{{meal.Name}}&nbsp;<span class="lower">({{meal.Kj}}kJ / {{meal.Kj / 4.17 | number:0}}Cal)</span></div></div>
                <div class="text">
                    <div>

                        <ul>
                            <li ng-repeat="item in meal.Items">{{item}}</li>
                        </ul>
                    </div>
                </div>
                <div class="keyline">
                    <div class="protein" ng-if="meal.Protein">PROTEIN: {{meal.Protein}}g</div>
                    <div class="fat" ng-if="meal.Fat">FAT: {{meal.Fat}}g</div>
                    <div class="carbs" ng-if="meal.Carbs">CARBS: {{meal.Carbs}}g</div>
                    <div class="fibre" ng-if="meal.Fibre">FIBRE: {{meal.Fibre}}g</div>
                    <div class="omega3" ng-if="meal.Omega3">OMEGA 3: {{meal.Omega3}}g</div>
                </div>
            </div>
        </div>
        <p class="small">
            Keep in mind that this is just an example of how to combine all this information and you are still
            encouraged to take your results to a healthcare professional who can further calculate your requirements
            based on your goals, height, weight, activity level, existing medical conditions and medical history,
            medication and supplementation, blood tests and current nutritional status.
        </p>
    </div>
</div>