Working on the Purchase Component

michelmany · Sep 12, 2018 · d6bd953 · d6bd953
1 parent aa9aa7a
commit d6bd953
Show file tree

Hide file tree

Showing 10 changed files with 35 additions and 29 deletions.
diff --git a/resources/assets/js/components/Purchase.vue b/resources/assets/js/components/Purchase.vue
@@ -7,8 +7,7 @@
                     <span class="number">1</span> Select the parade type
                 </div>
                 <ul class="purchase__items">
-                    <li class="purchase__item button" @click="nextStep(2, index)" 
-                        :class="{ selected: index === activeItem }" 
+                    <li class="purchase__item button" @click="nextStep(2, index)"
                         v-for="(parade, index) in paradeType" :key="index">{{ parade }}</li>
                 </ul>
             </div>
@@ -19,8 +18,8 @@
                         <span class="number">2</span> Select the date
                     </div>
                     <ul class="purchase__items">
-                        <li class="purchase__item button" @click="nextStep(3)">Friday (March 01)</li>
-                        <li class="purchase__item button" @click="nextStep(3)">Saturday (March 02)</li>
+                        <li class="purchase__item button" @click="nextStep(3, index)"
+                            v-for="(date, index) in dates" :key="index">{{ date.name }}</li>
                     </ul>
                 </div>
             </transition>
@@ -42,18 +41,10 @@
                     <div class="purchase__step-label">
                         <span class="number">4</span> Select the sector
                     </div>
-                    <div class="purchase__items">
-                        <div class="purchase__item button sector" @click="nextStep(5)">1</div>
-                        <div class="purchase__item button sector" @click="nextStep(5)">2</div>
-                        <div class="purchase__item button sector" @click="nextStep(5)">5</div>
-                        <div class="purchase__item button sector" @click="nextStep(5)">4</div>
-                        <div class="purchase__item button sector" @click="nextStep(5)">5</div>
-                        <div class="purchase__item button sector" @click="nextStep(5)">6</div>
-                        <div class="purchase__item button sector" @click="nextStep(5)">7</div>
-                        <div class="purchase__item button sector" @click="nextStep(5)">8</div>
-                        <div class="purchase__item button sector" @click="nextStep(5)">9</div>
-                        <div class="purchase__item button sector" @click="nextStep(5)">10</div>
-                    </div>
+                    <ul class="purchase__items">
+                        <li class="purchase__item button sector" 
+                            @click="nextStep(5)" v-for="(product, i) in products" :key="i">{{ product.name }}</li>
+                    </ul>
                 </div>
             </transition>
 
@@ -94,8 +85,25 @@
         data() {
             return {
                 currentStep: 1,
+                activeItem: -1,
                 paradeType: ['Preliminary Parades', 'Main Parades', 'Champions’ Parade'],
-                activeItem: -1
+                dates: [
+                    { name: 'Friday (March 01)'},
+                    { name: 'Saturday (March 02)'},
+                ],
+                products: [
+                    { name: '1', price: '1,00' },
+                    { name: '2', price: '1,00' },
+                    { name: '3', price: '1,00' },
+                    { name: '4', price: '1,00' },
+                    { name: '5', price: '1,00' },
+                    { name: '6', price: '1,00' },
+                    { name: '7', price: '1,00' },
+                    { name: '8', price: '1,00' },
+                    { name: '9', price: '1,00' },
+                    { name: '10', price: '1,00' },
+                    { name: '11', price: '1,00' },
+                ]
             }
         },
 

diff --git a/resources/views/template-tickets.twig b/resources/views/template-tickets.twig
@@ -10,9 +10,7 @@
             </div>
         </div>
 
-        <purchase>
-
-        </purchase>
+        <purchase></purchase>
 
     </div>
 {% endblock %}
diff --git a/static/css/admin.d61513ae22f2c267bdf4.css → static/css/admin.a997472eee64dbee4c7f.css b/static/css/admin.d61513ae22f2c267bdf4.css → static/css/admin.a997472eee64dbee4c7f.css
diff --git a/static/css/app.d61513ae22f2c267bdf4.css → static/css/app.a997472eee64dbee4c7f.css b/static/css/app.d61513ae22f2c267bdf4.css → static/css/app.a997472eee64dbee4c7f.css
diff --git a/static/css/login.d61513ae22f2c267bdf4.css → static/css/login.a997472eee64dbee4c7f.css b/static/css/login.d61513ae22f2c267bdf4.css → static/css/login.a997472eee64dbee4c7f.css
diff --git a/static/js/admin.d61513ae22f2c267bdf4.js → static/js/admin.a997472eee64dbee4c7f.js b/static/js/admin.d61513ae22f2c267bdf4.js → static/js/admin.a997472eee64dbee4c7f.js
diff --git a/static/js/app.d61513ae22f2c267bdf4.js → static/js/app.a997472eee64dbee4c7f.js b/static/js/app.d61513ae22f2c267bdf4.js → static/js/app.a997472eee64dbee4c7f.js
diff --git a/static/js/login.d61513ae22f2c267bdf4.js → static/js/login.a997472eee64dbee4c7f.js b/static/js/login.d61513ae22f2c267bdf4.js → static/js/login.a997472eee64dbee4c7f.js
diff --git a/static/js/vendor.d61513ae22f2c267bdf4.js → static/js/vendor.a997472eee64dbee4c7f.js b/static/js/vendor.d61513ae22f2c267bdf4.js → static/js/vendor.a997472eee64dbee4c7f.js
diff --git a/static/manifest.json b/static/manifest.json
@@ -1,10 +1,10 @@
 {
-  "admin.css": "css/admin.d61513ae22f2c267bdf4.css",
-  "admin.js": "js/admin.d61513ae22f2c267bdf4.js",
-  "app.css": "css/app.d61513ae22f2c267bdf4.css",
-  "app.js": "js/app.d61513ae22f2c267bdf4.js",
-  "login.css": "css/login.d61513ae22f2c267bdf4.css",
-  "login.js": "js/login.d61513ae22f2c267bdf4.js",
-  "vendor.js": "js/vendor.d61513ae22f2c267bdf4.js",
+  "admin.css": "css/admin.a997472eee64dbee4c7f.css",
+  "admin.js": "js/admin.a997472eee64dbee4c7f.js",
+  "app.css": "css/app.a997472eee64dbee4c7f.css",
+  "app.js": "js/app.a997472eee64dbee4c7f.js",
+  "login.css": "css/login.a997472eee64dbee4c7f.css",
+  "login.js": "js/login.a997472eee64dbee4c7f.js",
+  "vendor.js": "js/vendor.a997472eee64dbee4c7f.js",
   "images/base-camp-logo.png": "images/base-camp-logo.png"
 }