Merge pull request #25 from jaiminiprajapati/generate-cards-for-events

Generate cards for events

index.html

@@ -70,19 +70,20 @@ <h3>PULSE</h3>
   <br>
   <section id="topNav">
 
+    <!-- TODO move this to nav bar -->
     <div class="btn-group">
       <button type="button" class="btn btn-lg btn-secondary dropdown-toggle" data-bs-toggle="dropdown"
         data-bs-display="static" aria-expanded="false">
         SEARCH EVENT BY CATEGORIES
       </button>
       <ul class="dropdown-menu dropdown-menu-end dropdown-menu-lg-start">
+        <!-- TODO generate dynamically buttons for the drop down -->
         <li><button class="dropdown-item" type="button">MUSIC</button></li>
         <li><button class="dropdown-item" type="button">NIGHTLIFE</button></li>
         <li><button class="dropdown-item" type="button">PERFORMING & VISUAL ART</button></li>
         <li><button class="dropdown-item" type="button">NETWORKING</button></li>
         <li><button class="dropdown-item" type="button">FOOD & DRINK</button></li>
         <li><button class="dropdown-item" type="button">HOBBIES</button></li>
-
       </ul>
     </div>
 
@@ -93,6 +94,7 @@ <h3>PULSE</h3>
     <div class="container-fluid p-5">
       <h4 id="events-section-title">EVENTS</h4>
       <div id="events-row-container" class="row row-cols-1 row-cols-sm-2 row-cols-md-3 g-4">
+        <!-- All the cards are render here -->
       </div>
     </div>
   </section>

script.js

@@ -8,10 +8,13 @@ $(document).ready(function () {
   const eventsSectionRowContainer = $("#events-row-container");
 
   var cityName = ""; // remove name after finish with dev
+
   var eventsList = [];
+
   var seatGeekData = [];
+  var thistleData = [];
 
-  function serializedSeatgeekData(hasUpcomingEvents) {
+  function serializedSeatgeekData(hasUpcomingEvents = true) {
     seatGeekData.forEach((obj) => {
       if (obj.venue.has_upcoming_events === hasUpcomingEvents) {
         eventsList.push({
@@ -27,27 +30,23 @@ $(document).ready(function () {
           },
           eventIfo: {
             title: obj.title,
-            type: obj.type,
+            category: obj.type,
             dateTimeUTC: obj.datetime_utc,
             description: obj.description,
           },
           imagesUrls: [obj.performers[0].image, obj.performers[0].images.huge],
-          thicketsUrls: {
+          websiteUrl: {
             buyThicketsUrl: obj.url,
             findThicketsUrl: obj.venue.url,
           },
         });
-        // console.log(obj.title);
-        // console.log(obj.type);
-        // console.log(obj.datetime_utc);
-        // console.log(obj.venue.address);
-        // console.log(obj.venue.city);
-        // console.log(obj.venue.country);
-        // console.log(obj.url);
       }
     });
   }
 
+  // TODO finish- combine seatgeek data and thistle Data in eventsList
+  function mergeEventsData() {}
+
   function getDatathistleEventsByLocation(cityName) {
     var headers = new Headers();
 
@@ -60,7 +59,7 @@ $(document).ready(function () {
         return response.json();
       })
       .then(function (data) {
-        return data;
+        thistleData.push(data);
       });
   }
 
@@ -76,22 +75,44 @@ $(document).ready(function () {
         return response.json();
       })
       .then(function (data) {
-        serializedSeatgeekData(data, true);
         data.events.forEach((event) => {
           seatGeekData.push(event);
         });
       });
     console.log(seatGeekData);
   }
 
-  function createCard(
-    cardIndex,
-    websiteUrl,
-    imgUrl,
-    altDescription,
-    eventTitle,
-    footerText
-  ) {
+  function createCard(eventData) {
+    eventsList.push({
+      eventId: obj.id,
+      location: {
+        country: obj.venue.country,
+        city: obj.venue.city,
+        state: obj.venue.state,
+        address: obj.venue.address,
+        postCode: obj.venue.postal_code,
+        lat: obj.venue.location.lat,
+        lon: obj.venue.location.lon,
+      },
+      eventIfo: {
+        title: obj.title,
+        category: obj.type,
+        dateTimeUTC: obj.datetime_utc,
+        description: obj.description,
+      },
+      imagesUrls: [obj.performers[0].image, obj.performers[0].images.huge],
+      websiteUrl: {
+        buyThicketsUrl: obj.url,
+        findThicketsUrl: obj.venue.url,
+      },
+    });
+
+    var websiteUrl = eventData.websiteUrl;
+    var imgUrl = eventData.imagesUrls;
+    var altDescription = "TODO: alt text dynamically"; //? how to do dynamically img description
+    var eventTitle = eventData.eventInfo.title;
+    var footerText = "Some description, location, etc..."; //? to choose correct props etc
+
     var card = `<div id="event-card-${cardIndex}" class="col">
                   <div class="card h-100">
                     <a href="${websiteUrl}">
@@ -105,27 +126,31 @@ $(document).ready(function () {
                     </div>
                   </div>
                 </div>`;
+
     return card;
   }
 
   function renderEventsSection() {
-    // get arr form data and save it in  eventsList
-
-    // populate cards information
-    eventsList.forEach((eventData, cardIndex) => {
-      populateEventCardData(eventData, cardIndex);
+    eventsList.forEach((eventData) => {
+      // createCard()
     });
   }
 
   searchBtn.click(function () {
     cityName = $(inputEl).val();
 
-    // TODO add get user location
+    // TODO add get user location before clicking the button
     // ? if user have turn off location add default location
     cityName = "Chicago";
 
     getSeatgeekEventsByVenue(cityName);
 
+    // TODO get data from thistle
+
+    serializedSeatgeekData(true);
+
+    // TODO create function serializedThistleData() that transfer objects to objects like seatgeek
+
     renderEventsSection();
   });
 });