views/campgrounds/show.ejs
<%- include ("../partials/parallax-main") %>
<%- include ("../partials/nav") %>
<div class="container text-white">
<!-- CAMPGROUND INFO AND USER SECTION -->
<div class="row" id="campground-container">
<div class="col-lg-9">
<div class="card p-3 mb-4 dark-brown">
<img src="<%= campground.image %> " class="img-fluid rounded" alt="<%= campground.name %>">
<div>
<h4 class="text-end mt-2">$<%= campground.price %>/night</h4>
<h1 class="title-font mb-4"><a><%= campground.name %></a></h1>
<p class="card-body light-brown rounded p-4"><%= campground.description %></p>
<p class="text-end">Submitted by <strong><a class="link-light" href="/users/<%= campground.author.id %>"><%= campground.author.username %></a></strong> on
<em> <%= moment(campground.createdAt).format("dddd, MMMM Do YYYY")%></em>
</p>
<% if(currentUser && campground.author.id.equals(currentUser._id)|| currentUser && currentUser.isAdmin) { %>
<div class="d-inline-flex float-end gap-3">
<a href="/campgrounds/<%= campground._id %>/edit" class="btn btn-outline-warning">Edit</a>
<form action="/campgrounds/<%= campground._id %>?_method=DELETE" method="POST">
<button class="btn btn-outline-danger delete-button">Delete</button>
</form>
</div>
<% } %>
</div>
</div>
</div>
<!-- Tools Section -->
<div class="col-lg-3 d-flex flex-column" style="z-index: 2;">
<div class="card border border-white mb-2" id="map"></div>
<div class="mb-2">
<a href="https://www.accuweather.com/en/world-weather" class="btn light-brown text-white show-btn"><i class="fa fa-sun-o add" aria-hidden="true"></i> Weather</a>
</div>
<div class="mb-2">
<a href="https://ngmdb.usgs.gov/topoview/viewer/#4/39.98/-100.06" class="btn light-brown text-white show-btn"><i class="fa fa-map add" aria-hidden="true"></i> Topo Map</a>
</div>
<div class="mb-2">
<a href="https://www.rei.com/h/camping-and-hiking" class="btn light-brown text-white show-btn"><i class="fa fa-binoculars add" aria-hidden="true"></i> Gear Up</a>
</div>
<div class="card border border-white mb-2">
<!-- Google AdSense -->
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-1576072318340130"
crossorigin="anonymous"></script>
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-1576072318340130"
data-ad-slot="1885321990"
data-ad-format="auto"
data-full-width-responsive="true"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
</div>
</div>
<!-- REVIEWS SECTION -->
<div class="row mt-5">
<div class="col-lg-9 mb-4">
<div class="card dark-brown p-3" style="z-index: 2;">
<div class="d-flex flex-column">
<!-- DISPLAY REVIEW SECTION -->
<% if (campground.rating === 0) { %>
<h5>Be the first to write a review!</h5>
<span>
<a class="btn light-brown text-white float-end <% if (currentUser && campground.reviews.some(function (review) {return review.author.id.equals(currentUser._id)})) { %> disabled <% } %>" href="/campgrounds/<%= campground._id %>/reviews/new">
Add Review <i class="fa fa-pencil add" aria-hidden="true"></i></a>
</span>
</div>
<% } else { %>
<p>
<span class="fa fa-star bg-warning rounded-pill p-1 checked"></span>
<span class="fa fa-star bg-warning rounded-pill p-1 <% if (campground.rating > 1.5) { %> checked <% } else { %> transparent <% } %>"></span>
<span class="fa fa-star bg-warning rounded-pill p-1 <% if (campground.rating > 2.5) { %> checked <% } else { %> transparent <% } %>"></span>
<span class="fa fa-star bg-warning rounded-pill p-1 <% if (campground.rating > 3.5) { %> checked <% } else { %> transparent <% } %>"></span>
<span class="fa fa-star bg-warning rounded-pill p-1 <% if (campground.rating > 4.5) { %> checked <% } else { %> transparent <% } %>"></span>
<span class="ml-1"><%= campground.reviews.length %> reviews</span>
</p>
<p class="mb-0">
Average rating: <strong><%= campground.rating.toFixed(2) %></strong>
</p>
<!-- ADD REVIEW -->
<span>
<a class="btn light-brown text-white float-end <% if (currentUser && campground.reviews.some(function (review) {return review.author.id.equals(currentUser._id)})) { %> disabled <% } %>" href="/campgrounds/<%= campground._id %>/reviews/new">
Add Review <i class="fa fa-pencil add" aria-hidden="true"></i></a>
</span>
<!-- SEE ALL REVIEWS -->
<span class="float-end"><a class="link-light" href="/campgrounds/<%= campground._id %>/reviews"><i class="fa fa-search add" aria-hidden="true"></i> See all reviews</a></span>
<!-- DISPLAY RECENT REVIEWS -->
<p><h5>Recent reviews:</h5></p>
</div>
<hr class="mt-0">
<% campground.reviews.slice(0, 5).forEach(function(review){ %>
<div class="card mx-1 mb-2 light-brown">
<div class="card-body">
<p class="float-end"><em><%= moment(review.createdAt).fromNow() %></em></p>
<div class="card-title">
<%- '<span class="fa fa-star bg-warning rounded-pill p-1 mr-1 checked"></span>'.repeat(review.rating) %><%- '<span class="fa fa-star transparent"></span>'.repeat(5 - review.rating) %>
<div class="mt-1"><strong><%= review.author.username %></strong></div>
</div>
<div class="card-text">
<p style="text-align: justify; word-wrap: break-word;"><%= review.text %></p>
</div>
<div class="float-end d-inline-flex gap-3">
<% if(currentUser && review.author.id.equals(currentUser._id) || currentUser && currentUser.isAdmin){ %>
<a class="btn btn-xs btn-outline-warning"
href="/campgrounds/<%=campground._id %>/reviews/<%=review._id %>/edit">Edit</a>
<form id="delete-form" action="/campgrounds/<%=campground._id %>/reviews/<%=review._id %>?_method=DELETE" method="POST">
<input type="submit" class="btn btn-xs btn-outline-danger delete-button" value="Delete">
</form>
<% } %>
</div>
</div>
</div>
<% }); %>
<% } %>
</div>
</div>
<div class="col-lg-3 mb-4">
<div class="card border border-white mb-2" style="z-index: 2;">
<!-- Google AdSense -->
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-1576072318340130"
crossorigin="anonymous"></script>
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-1576072318340130"
data-ad-slot="3194258567"
data-ad-format="auto"
data-full-width-responsive="true">
</ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
</div>
</div>
<!-- COMMENT SECTION -->
<div class="row">
<div class="col-lg-9 mb-4">
<div class="card p-3 dark-brown" style="z-index: 2;">
<% if (campground.comments === undefined || campground.comments.length == 0) { %>
<div class="d-flex justify-content-between">
<h5>Be the first to write a comment!</h5>
<div>
<a href="/campgrounds/<%= campground._id %>/comments/new" class="btn light-brown text-white">Add Comment <i class="fa fa-comment add" aria-hidden="true"></i></a>
</div>
</div>
</div>
</div>
</div>
<% } else { %>
<div class="ms-auto">
<a href="/campgrounds/<%= campground._id %>/comments/new" class="btn light-brown text-white">Add Comment <i class="fa fa-comment add" aria-hidden="true"></i></a>
</div>
<hr>
<% campground.comments.forEach(function(comment){ %>
<div class="row">
<div class="col-12 mb-2">
<div class="card light-brown">
<div class="card-body">
<p class="float-end"><em><%= moment(comment.createdAt).fromNow() %></em></p>
<p class="card-title"><strong><%= comment.author.username %></strong></p>
<p class="card-text"><%= comment.text %></p>
<% if(currentUser && comment.author.id.equals(currentUser._id) || currentUser && currentUser.isAdmin){ %>
<div class="float-end d-inline-flex gap-3">
<a href="/campgrounds/<%=campground._id%>/comments/<%=comment._id%>/edit" class="btn btn-xs btn-outline-warning">Edit</a>
<form action="/campgrounds/<%=campground._id%>/comments/<%=comment._id%>?_method=DELETE" method="POST">
<button class="btn btn-xs btn-outline-danger delete-button">Delete</button>
</form>
</div>
<% } %>
</div>
</div>
</div>
</div>
<% }) %>
</div>
<% } %>
</div>
</div>
</div>
<!-- Google Maps API Script -->
<script>
function initMap() {
var lat = <%= campground.lat %>;
var lng = <%= campground.lng %>;
var center = {lat: lat, lng: lng };
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 8,
center: center,
scrollwheel: false
});
var contentString = `
<strong><%= campground.name %><br />
<%= campground.location %></strong>
<p><%= campground.description %></p>
`
var infowindow = new google.maps.InfoWindow({
content: contentString
});
var marker = new google.maps.Marker({
position: center,
map: map
});
marker.addListener('click', function() {
infowindow.open(map, marker);
});
}
</script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCY4KrSmNNdCc5jY1Kl77hXJYFzEwITSe0&callback=initMap"></script>
<%- include ("../partials/footer") %>