This repository has been archived by the owner on Mar 19, 2019. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 0
/
hardware.pug
163 lines (148 loc) · 7.17 KB
/
hardware.pug
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
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
- var CHECKOUT = true;
doctype html
html(ng-app='app')
head
meta(charset='utf-8')
title Hardware | IC HealthHack
link(rel="icon",href="images/favicon.png")
meta(name='description', content="Hub for participants of IC HealthHack 2017")
meta(name='viewport', content='width=device-width, initial-scale=1.0')
meta(name='theme-color', content='#40ad6a')
link(rel='stylesheet', href='https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css')
link(href='https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.1/animate.min.css', rel='stylesheet')
link(rel='stylesheet', href='https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css')
link(rel='stylesheet', href='css/styles.css')
link(rel='stylesheet', href='css/marquee.css')
script(src='https://use.fontawesome.com/a9b62862e2.js')
body.bg-faded(ng-controller='hardwareCtrl')
include includes/navbar
section#one.bg-alt
.container
h2 Hardware Lab
br
.container
h4 Note
.row
ul
li
h6 Please use this page to reserve various devices from our hardware lab.
li
h6 Only devices can be booked through a mobile website. Please use the desktop version to order the modules.
li
h6 After submitting the form, you have 15 mins to collect your order.
li
h6 This list is only updated when the hardware has been collected.
br
.container
h3 Devices
br
.container.wow.fadeInUp
.card-group#schedule
.col-lg-4(ng-repeat="h in hardware.devices").no-padding
.card
img.card-img-top.img-fluid(ng-src='{{h.photo}}')
.card-block
h4.card-title {{h.title}}
h6 Quantity: {{h.remaining}} / {{h.stock}}
.container
.col-lg-12
.input-group
span.input-group-btn
button.btn.btn-secondary(type='button', data-ng-click='removeItem(h)') -
input.form-control.text-center(type='text', placeholder='0', ng-model='order["hardware"][h.title]', disabled)
span.input-group-btn
button.btn.btn-secondary(type='button', data-ng-click='addItem(h)') +
br
.bg-theme.text-white.text-center.status(ng-if='h.remaining > 0')
h6 Available
.bg-danger.text-white.text-center.status(ng-if='h.remaining <= 0')
h6 Out of stock
br.hidden-md-down
.container.hidden-md-down
h3 Components and Modules
br.hidden-md-down
.container.wow.fadeInUp.hidden-md-down
table.table.table-striped
thead.thead-inverse
tr
th.text-center Component
th.text-center Quantity
th.text-center Order
tbody
tr(ng-repeat="h in hardware.components")
td.text-center {{h.title}}
td.text-center {{h.remaining}} / {{h.stock}}
td.text-center
.bg-danger.text-white.text-center.status(ng-if='h.remaining <= 0')
h6 Out of stock
.input-group(ng-if='h.remaining > 0')
span.input-group-btn
button.btn.btn-secondary(type='button', data-ng-click='removeItem(h)') -
input.form-control.text-center(type='text', placeholder='0', ng-model='order["hardware"][h.title]', disabled)
span.input-group-btn
button.btn.btn-secondary(type='button', data-ng-click='addItem(h)') +
br
.container
a(data-toggle='modal', href='#confirmModal')
button.btn.btn-primary.btn-lg.btn-block(type='button') Checkout
a(data-toggle='modal', href='#confirmModal')
button.btn.bg-theme.btn-circle.btn-lg.checkout(type='button')
i.fa.fa-shopping-cart.fa-2x(aria-hidden='true')
#confirmModal.modal.fade(tabindex='-1', role='dialog', aria-hidden='true')
.modal-dialog
.modal-content
.modal-body
h3 Hardware Checkout
br
.form
.form-group.row
label.col-3.col-form-label(for='example-text-input') Name
.col-9
input#example-text-input.form-control(type='text', placeholder='Full Name', ng-model='order["name"]', required)
.form-group.row
label.col-3.col-form-label(for='example-search-input') University
.col-9
input#example-search-input.form-control(type='search', placeholder='Imperial College London', ng-model='order["university"]', required)
.form-group.row
label.col-3.col-form-label(for='example-email-input') Email
.col-9
input#example-email-input.form-control(type='email', placeholder='[email protected]', ng-model='order["email"]', required)
.form-group.row
label.col-3.col-form-label(for='example-url-input') ID
.col-9
input#example-url-input.form-control(type='text', placeholder='ID Number', ng-model='order["id"]', required)
.form-group.row
label.col-3.col-form-label(for='example-tel-input') Phone
.col-9
input#example-tel-input.form-control(type='tel', placeholder='Mobile Phone Number', ng-model='order["phone"]', required)
br
h5 Cart
.col-lg-12(ng-repeat="(h, q) in order.hardware").no-padding
h6(ng-if= 'q > 0') {{h}} - {{q}}
br
.row
.col-6
button.btn.btn-primary.btn-block(ng-click='completeOrder()', aria-hidden='true') Order
.col-6
button.btn.btn-primary.btn-block(data-dismiss='modal', aria-hidden='true') Close
br
.alert.alert-success#orderSuccess(role='alert', style="display:none;")
strong Awesome!
| You have 15 mins to collect your order.
.alert.alert-danger#orderFailure(role='alert', style="display:none;")
strong Oh snap!
| Change a few things up and try submitting again.
include includes/contact
// scripts loaded here
script(src='https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js')
script(src='https://cdnjs.cloudflare.com/ajax/libs/tether/1.2.0/js/tether.min.js')
script(src='https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js')
script(src='https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js')
script(src='https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.js')
script(src='https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js')
script(src='https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular-route.js')
script(src='https://www.gstatic.com/firebasejs/3.6.6/firebase.js')
script(src='js/moment.js')
script(src='js/moment-timezone-2010-2020.min.js')
script(src='js/scripts.js')
script(src='js/app.js')