This script displays event detail cards that users have submitted. See related scripts add-event.js

browse.js

// Js file for listing related scripts
"use strict";

(function () {    
    // Reference to the events collection in Firebase database
var events = firebase.database().ref("events");

    // displays event listings on browse.html
    events.on('value', function(snapshot) {
        snapshot.forEach(function(childSnapshot) {
        var eventkey = childSnapshot.key;
        var eventdata = childSnapshot.val();
        var browseId = eventkey.toString(); 
          
        // listing data to be displayed
        var browseTitle = childSnapshot.val().title;
        var browseDate = childSnapshot.val().startdate;
        var browseAddrOne = childSnapshot.val().addressone;
        var browseAddrTwo = childSnapshot.val().addresstwo;
        var browseUrl = childSnapshot.val().website;
        var browseContact = childSnapshot.val().contact;
        var browseCity = childSnapshot.val().city;
        var browsePost = childSnapshot.val().postcode;
        var browseCost = childSnapshot.val().price;
        var browseDesc = childSnapshot.val().description;
        var browsePic = childSnapshot.val().image;
            console.log(browsePic);
        
        // display all listings on the page

        // create event card and assign class card to div
         var $card = $( '<div class="card"></div>' ); 
         // append the card to showcards div
        $( "#showcards" ).append( $card ); 
          
        // append event image to card
        var $cardimg = $( "<img src="+browsePic+" class='browseimg' alt="+browseTitle+" title="+browseTitle+"></img>" );
        $card.append($cardimg);
          
        // append event info to card 
            // title
        var $cardtitle = $( "<p id='evdata'></p>" );
        $cardtitle.html(browseTitle);
        $card.append($cardtitle);
            
            // date 
        var $showstart = $("<p><i class='fa fa-calendar' role='presentation' aria-label='Date' aria-hidden='true'></i> "+browseDate+"</p>");
        $card.append($showstart);
          
            // price
        var $showprice = $("<p><i class='fa fa-tag' role='presentation' aria-label='Price' aria-hidden='true'></i>    &pound;"+browseCost+"</p>");
        $card.append($showprice);
            
            // city
        var $showcity = $("<p><i class='fa fa-map-marker' role='presentation' aria-label='City' aria-hidden='true'></i> "+browseCity+"</p>");
        $card.append($showcity);
          
        // dialog trigger for description
        var $viewDetails = $("<p id='viewDetails'>...more info <i class='fa fa-window-restore' role='presentation' aria-label='More details' aria-hidden='true'></i></p>");
        $card.append($viewDetails);
         
        // display dialog with event description 
          $viewDetails.click(function() {  // on click of viewDetails
              
              var $fullDetails = $("<p id='fullDetails'>Address: " +browseAddrOne+ ", " +browseCity+ "<br> Post Code: "+browsePost+ "<br> Website:<a href='"+browseUrl+"'> " +browseUrl+ "</a> <br> Contact: " +browseContact+ "<br>" +browseDesc+ "</p>");
              $fullDetails.dialog({
                width: "auto",
                create: function( event, ui ) {
                  // Set maxWidth
                  $(this).css("maxWidth", "70vw");  // was "660px"
                }
              }); // end dialog
          });
    });  // end foreach childSnapshot function
  }); // end events.on function
})(); // end file wrapper