product.component.html

<ActionBar title="Products">
    <NavigationButton text="Go Back" android.systemIcon="ic_menu_back" (tap)="onTapBack()" tap="goBack()"></NavigationButton>
</ActionBar>
<StackLayout orientation="vertical">
    <GridLayout columns="*" rows="auto,*,auto,auto">
        <Label text="Which of these SKUs are available in the outlet? (should have atleast 2 bottles to be considered available)" row="0" textWrap="true" class="label-availability" horizontalAlign="center" verticalAlign="center"></Label>
        <ScrollView row="1" marginTop="5">
            <StackLayout orientation="vertical" [ngSwitch]="consumerOccasions">
                <GridLayout [visibility]="consumerOccasions == 'cokeSS' ? 'visible' : 'collapsed'" columns="*,*,*" rows="auto,150,150">
                    <Label text="Coke Single Serve" class="category-label" colSpan="3" row="0"></Label>
                    <GridLayout rows="*,auto" col="0" row="1">
                        <Image src="~/assets/img/coke200mlswakto.png" row="0" class="product-image" (tap)="onAvailableTap($event)"></Image>
                        <Label text="200ml" textWrap="true" class="product-label" row="1"></Label>
                    </GridLayout>
                    <GridLayout rows="*,auto" col="1" row="1">
                        <Image src="~/assets/img/coke237ml.png" class="product-image" row="0" (tap)="onAvailableTap($event)"></Image>
                        <Label text="237ml" textWrap="true" class="product-label" row="1"></Label>
                    </GridLayout>
                    <GridLayout rows="*,auto" col="2" row="1">
                        <Image src="~/assets/img/coke300ml.png" class="product-image" row="0" (tap)="onAvailableTap($event)"></Image>
                        <Label text="300ml" textWrap="true" class="product-label" row="1"></Label>
                    </GridLayout>
                    <GridLayout rows="*,auto" col="0" row="2">
                        <Image src="~/assets/img/coke355ml.png" class="product-image" row="0" (tap)="onAvailableTap($event)"></Image>
                        <Label text="355ml" textWrap="true" class="product-label" row="1"></Label>
                    </GridLayout>
                </GridLayout>
                <GridLayout [visibility]="consumerOccasions == 'flavorSS' ? 'visible' : 'collapsed'" columns="*,*,*" rows="auto,150,150,150,150">
                    <Label text="Flavors Single Serve" class="category-label" colSpan="3" row="0"></Label>
                    <GridLayout rows="*,auto" col="0" row="1">
                        <Image src="~/assets/img/sprite200mlswakto.png" class="product-image" row="0" (tap)="onAvailableTap($event)"></Image>
                        <Label text="sprite200ml" textWrap="true" class="product-label" row="1"></Label>
                    </GridLayout>
                    <GridLayout rows="*,auto" col="1" row="1">
                        <Image src="~/assets/img/royal200mlswakto.png" class="product-image" row="0" (tap)="onAvailableTap($event)"></Image>
                        <Label text="royal200ml" textWrap="true" class="product-label" row="1"></Label>
                    </GridLayout>
                    <GridLayout rows="*,auto" col="2" row="1">
                        <Image src="~/assets/img/sparkle200mlswakto.png" class="product-image" row="0" (tap)="onAvailableTap($event)"></Image>
                        <Label text="sparkle200ml" textWrap="true" class="product-label" row="1"></Label>
                    </GridLayout>
                    <GridLayout rows="*,auto" col="0" row="2">
                        <Image src="~/assets/img/sprite237ml.png" class="product-image" row="0" (tap)="onAvailableTap($event)"></Image>
                        <Label text="sprite237ml" textWrap="true" class="product-label" row="1"></Label>
                    </GridLayout>
                    <GridLayout rows="*,auto" col="1" row="2">
                        <Image src="~/assets/img/royal237ml.png" class="product-image" row="0" (tap)="onAvailableTap($event)"></Image>
                        <Label text="royal237ml" textWrap="true" class="product-label" row="1"></Label>
                    </GridLayout>
                    <GridLayout rows="*,auto" col="2" row="2">
                        <Image src="~/assets/img/sparkle240ml.png" class="product-image" row="0" (tap)="onAvailableTap($event)"></Image>
                        <Label text="sparkle240ml" textWrap="true" class="product-label" row="1"></Label>
                    </GridLayout>
                    <GridLayout rows="*,auto" col="0" row="3">
                        <Image src="~/assets/img/sprite300ml.png" class="product-image" row="0" (tap)="onAvailableTap($event)"></Image>
                        <Label text="sprite300ml" textWrap="true" class="product-label" row="1"></Label>
                    </GridLayout>
                    <GridLayout rows="*,auto" col="1" row="3">
                        <Image src="~/assets/img/royal300ml.png" class="product-image" row="0" (tap)="onAvailableTap($event)"></Image>
                        <Label text="royal300ml" textWrap="true" class="product-label" row="1"></Label>
                    </GridLayout>
                    <GridLayout rows="*,auto" col="2" row="3">
                        <Image src="~/assets/img/sparkle300mlpet.png" class="product-image" row="0" (tap)="onAvailableTap($event)"></Image>
                        <Label text="sparkle300ml" textWrap="true" class="product-label" row="1"></Label>
                    </GridLayout>
                    <GridLayout rows="*,auto" col="0" row="4">
                        <Image src="~/assets/img/sprite355ml.png" class="product-image" row="0" (tap)="onAvailableTap($event)"></Image>
                        <Label text="sprite355ml" textWrap="true" class="product-label" row="1"></Label>
                    </GridLayout>
                    <GridLayout rows="*,auto" col="1" row="4">
                        <Image src="~/assets/img/royal355ml.png" class="product-image" row="0" (tap)="onAvailableTap($event)"></Image>
                        <Label text="royal355ml" textWrap="true" class="product-label" row="1"></Label>
                    </GridLayout>
                    <GridLayout rows="*,auto" col="2" row="4">
                        <Image src="~/assets/img/sparkle355ml.png" class="product-image" row="0" (tap)="onAvailableTap($event)"></Image>        
                        <Label text="sparkle355ml" textWrap="true" class="product-label" row="1"></Label>
                    </GridLayout>
                </GridLayout>
                <GridLayout [visibility]="consumerOccasions == 'cokeMS' ? 'visible' : 'collapsed'" columns="*,*,*" rows="auto,150,150">
                    <Label text="Coke Multiple Serve" class="category-label" colSpan="3" row="0"></Label>
                    <GridLayout rows="*,auto" col="0" row="1">
                        <Image src="~/assets/img/coke750ml.png" class="product-image" row="0" (tap)="onAvailableTap($event)"></Image>
                        <Label text="750ml" textWrap="true" class="product-label" row="1"></Label>
                    </GridLayout>
                    <GridLayout rows="*,auto" col="1" row="1">
                        <Image src="~/assets/img/coke1000ml.png" class="product-image" row="0" (tap)="onAvailableTap($event)"></Image>
                        <Label text="1000ml" textWrap="true" class="product-label" row="1"></Label>
                    </GridLayout>
                    <GridLayout rows="*,auto" col="2" row="1">
                        <Image src="~/assets/img/coke1500ml.png" class="product-image" row="0" (tap)="onAvailableTap($event)"></Image>
                        <Label text="1500ml" textWrap="true" class="product-label" row="1"></Label>
                    </GridLayout>
                    <GridLayout rows="*,auto" col="0" row="2">
                        <Image src="~/assets/img/coke1750ml.png" class="product-image" row="0" (tap)="onAvailableTap($event)"></Image>
                        <Label text="1750ml" textWrap="true" class="product-label" row="1"></Label>
                    </GridLayout>
                </GridLayout>
                <GridLayout [visibility]="consumerOccasions == 'waterSS' ? 'visible' : 'collapsed'" columns="*,*,*" rows="auto,150,150">
                    <Label text="Water Single Serve" class="category-label" colSpan="3" row="0"></Label>
                    <GridLayout rows="*,auto" col="0" row="1">
                        <Image src="~/assets/img/wilkinspurewater330ml.png" class="product-image" row="0" (tap)="onAvailableTap($event)"></Image>
                        <Label text="pure 330ml" textWrap="true" class="product-label" row="1"></Label>
                    </GridLayout>
                    <GridLayout rows="*,auto" col="1" row="1">
                        <Image src="~/assets/img/wilkins_distilled_pet330ml.png" class="product-image" row="0" (tap)="onAvailableTap($event)"></Image>
                        <Label text="330ml" textWrap="true" class="product-label" row="1"></Label>
                    </GridLayout>
                    <GridLayout rows="*,auto" col="2" row="1">
                        <Image src="~/assets/img/wilkinspurewater500ml.png" class="product-image" row="0" (tap)="onAvailableTap($event)"></Image>
                        <Label text="pure 500ml" textWrap="true" class="product-label" row="1"></Label>
                    </GridLayout>
                    <GridLayout rows="*,auto" col="0" row="2">
                        <Image src="~/assets/img/wilkins_distilled_pet500ml.png" class="product-image" row="0" (tap)="onAvailableTap($event)"></Image>
                        <Label text="500ml" textWrap="true" class="product-label" row="1"></Label>
                    </GridLayout>
                    <GridLayout rows="*,auto" col="1" row="2">
                        <Image src="~/assets/img/wilkinspurewater1000ml.png" class="product-image" row="0" (tap)="onAvailableTap($event)"></Image>
                        <Label text="pure 1000ml" textWrap="true" class="product-label" row="1"></Label>
                    </GridLayout>
                    <GridLayout rows="*,auto" col="2" row="2">
                        <Image src="~/assets/img/wilkins1000ml.png" class="product-image" row="0" (tap)="onAvailableTap($event)"></Image>
                        <Label text="1000ml" textWrap="true" class="product-label" row="1"></Label>
                    </GridLayout>
                </GridLayout>
            </StackLayout>
        </ScrollView>
        <Label text="Price Compliance >>" (tap)="onProceedToPriceComplianceTap()" row="2" class="button-label"></Label>
        <ScrollView orientation="horizontal" row="3">
            <StackLayout orientation="horizontal" backgroundColor="#ec2028">
                <Label text="COKE SS" (tap)="cokeSSTap()" class="category-label"></Label>
                <Label text="FLAVOR SS" (tap)="flavorSSTap()" class="category-label"></Label>
                <Label text="COKE MS" (tap)="cokeMSTap()" class="category-label"></Label>
                <Label text="WATER SS" (tap)="waterSSTap()" class="category-label"></Label>
            </StackLayout>
        </ScrollView>
    </GridLayout>
</StackLayout>