gapp/questPage.template.html at master · sztelzer/gapp · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
<div element-quest flex layout-fill layout="column" quest-page>

	<div class="progressOverlayAnimate" ng-if="quest.sending" style="position:absolute;background-color:#F4F2EF;z-index:99" flex layout-fill layout="column" layout-align="center center">
		<md-progress-circular md-mode="indeterminate"></md-progress-circular>
	</div>


	<md-toolbar flex="none" class="toolbar" layout="row" layout-align="start center" ng-class="$root.platform">
		<md-button ui-sref="startPage" ng-click class="md-icon-button" aria-label="Voltar">
			<md-icon md-svg-icon="imgs/arrow_left.svg" class="svg-white"></md-icon>
		</md-button> <img flex="none" src="imgs/able.svg" class="toolbar-logo">
		<div flex class="toolbar-title" layout="row" layout-align="center center">Criar Perfil</div>
		<div flex="none" style="width:78px"></div>
	</md-toolbar>
	<md-content flex id="quest-content">
		<div layout="row" layout-align="start start" style="margin:16px;" class="robot blue">
			<md-icon md-svg-src="imgs/robot.svg" class="robot-icon" style="width:3em;height:3em"></md-icon>
			<div flex class="robot-text" style="color: black !important; font-weight: 500;">Me conte suas preferências, vou selecionar as melhores cervejas para seu paladar.</div>
		</div>
		<form name="questForm" novalidate>
			<div style="margin-top:8px"></div>
			<!-- ng-hide="$index > quest.answered" -->
			<md-card flex class="card-full md-whiteframe-8dp" ng-repeat="tag in quest.tags">
				<div class="card-title" style="background-color:{{tag.c}};color:{{tag.t}}">{{tag.q}}</div>
				<div flex layout="column" class="card-content">
					<md-radio-group name="{{tag.i}}" ng-model="quest.payload[tag.i]" ng-required="true" required>
						<md-radio-button ng-repeat="a in tag.a" value="{{a.v}}">{{a.s}}</md-radio-button>
					</md-radio-group>
				</div>
			</md-card>
			<div flex class="md-padding" layout="column">
				<div ng-show="quest.least_tags" style="background-color:red;color:white;border-radius:5px" class="md-padding md-body">
					<center>Todos os cartões devem ser respondidos!</center>
				</div>
				<md-input-container>
					<label>Nome Completo</label>
					<input name="name" ng-model="quest.user.name" minlength="10" maxlength="64" ng-required="true" required ng-blur="Keyboard.close()" />
					<div ng-messages="questForm.name.$error">
						<div ng-message-exp="['required', 'minlength', 'maxlength']">Seu nome é necessário para entregas e identificação.
							<br/>Entre 10 a 64 caracteres.</div>
					</div>
				</md-input-container>
				<!-- <md-input-container>
						<label>CPF</label>
						<input type="tel" name="document" ng-model="quest.user.document" validate-cpf minlength="11" maxlength="11" ng-required="true" required ng-blur="Keyboard.close()"/>
						<div ng-messages="questForm.document.$error">
							<div ng-message-exp="['required', 'minlength', 'maxlength', 'cpf']" class="ng-animate">Um CPF válido é necessário para emissão de nota fiscal.</div>
						</div>
					</md-input-container> -->
				<md-input-container>
					<label>E-mail</label>
					<input name="email" ng-model="quest.user.email" type="email" minlength="6" maxlength="100" ng-pattern="/^.+@.+\..+$/" ng-required="true" required ng-blur="Keyboard.close()" />
					<div ng-messages="questForm.email.$error">
						<div ng-message-exp="['required', 'minlength', 'maxlength', 'pattern']" class="ng-animate">Seu e-mail deve ser válido.</div>
					</div>
				</md-input-container>
				<md-input-container>
					<label>Senha</label>
					<input name="password" ng-model="quest.user.password" type="password" minlength="8" maxlength="32" ng-required="true" required ng-blur="Keyboard.close()" />
					<div ng-messages="questForm.password.$error">
						<div ng-message-exp="['required', 'minlength', 'maxlength']" class="ng-animate">Crie uma senha de 8 a 32 caracteres.</div>
					</div>
				</md-input-container>
				<div class="md-caption"> Enviando seus dados você confirma que possui mais de 18 anos para navegar e realizar compras neste aplicativo. </div>
			</div>
			<div flex="none" layout="row">
				<md-button flex class="md-raised md-accent full-button" ng-click="quest.send()" ng-disabled="questForm.$invalid || quest.sending">Criar Perfil</md-button>
			</div>
		</form>
	</md-content>

</div>