Skip to content

Instantly share code, notes, and snippets.

@ponnex

ponnex/product.component.html

Created May 4, 2018 10:00
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save ponnex/fbff22b342be387cf1ecfe47c304ef1a to your computer and use it in GitHub Desktop.
Save ponnex/fbff22b342be387cf1ecfe47c304ef1a to your computer and use it in GitHub Desktop.
Download ZIP
Raw
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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment