Skip to content

Commit

Permalink
Merge pull request #51 from HusnainRashid/event_profile_route
Browse files Browse the repository at this point in the history 
removed search bar, finished styling, page rendering correctly
  • Loading branch information
@AliciaMoses
AliciaMoses authored Mar 9, 2023
2 parents ecbc7cb + fcc138e commit a0f92f6
Show file tree
Hide file tree
Showing 6 changed files with 138 additions and 414 deletions.
1 change: 1 addition & 0 deletions client/public/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<!-- Latest compiled and minified CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
Expand Down
30 changes: 20 additions & 10 deletions client/src/components/EventView/EventView.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,20 +21,30 @@ const EventView = () => {
<div className = "container">
<div className="card text-bg-dark mb-3 p-3">
<h1 className="card-header">{event.name}</h1><br></br>
<div className="card-body">
<h3>{event.description}</h3><br></br>
<h4>Genre: {event.genre}, {event.subgenre}</h4><br></br>
<h4>Accessibility: {event.accessibility}</h4><br></br>
<h4>Age restriction: {event.ageRestricted}</h4><br></br>
<h4 className="card-text">Address: {event.venueAddress}, {event.postCode}, London</h4><br></br>
<a href={`https://${event.url}`} target='_blank' rel='noreferrer'><button className="btn btn-light">
Grab a ticket here!
</button></a>
<h5>Genre:</h5> <h4>{event.genre}, {event.subgenre}</h4><br></br>
<h5>Accessibility:</h5><h4> {event.accessibility}</h4><br></br>
<h5>Age restriction:</h5><h4> {event.ageRestricted}</h4><br></br>
<h5>Venue:</h5><h4>{event.venueAddress}, {event.postCode}</h4><br></br>
<div className="card-footer">
<div className="d-flex justify-content-between">
<a href={`https://${event.url}`} target='_blank' rel='noreferrer'>
<button className="btn btn-light">
<i class="bi bi-ticket-perforated"></i> Grab a ticket here!
</button>
</a>
<a href='/gallery' rel='noreferrer'>
<button className="btn btn-light">
View all events
</button>
</a>
</div>
</div>
</div>
</div>

<div>
<a href="/gallery"><button className="btn btn-dark">View all events</button></a>
</div>

</>


Expand Down
134 changes: 113 additions & 21 deletions client/src/components/EventsView/EventsView.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,12 +11,14 @@ import { ReactComponent as ArenaIcon } from "../../assets/icons/stadium.svg";
import { ReactComponent as FilmIcon } from "../../assets/icons/movie.svg";
import { ReactComponent as SpaIcon } from "../../assets/icons/spa.svg";
import { ReactComponent as AdultIcon } from "../../assets/icons/age18.svg";
import { ReactComponent as ToggleIcon } from "../../assets/icons/toggle_on_FILL0_wght100_GRAD-25_opsz48.svg";
// import { ReactComponent as TheatreIcon } from "../../assets/icons/theatres.svg";
import "./EventsView.css"

const EventsView = () => {
const [events, setEvents] = useState([]);
const [selectedCategory, setCategory] = useState("");
const [selectedMaxPrice, setMaxPrice] = useState("");

useEffect(() => {
fetch("/events")
Expand All @@ -30,41 +32,131 @@ const EventsView = () => {
setCategory(category);
};

const handleMaxPriceClick = (price) =>{
setMaxPrice(price);
};
// checking my reasoning here

//null category conditions
//either there is no selected category selected category doesn't match event genre

// toggle null price = no price filter
// price rangemin > maxprice

// const sorted = filteredEvents.sort((a,b) => a.priceRange[0].min - b.priceRange[0].min);

const filteredEvents = events.filter((event) =>
(!selectedCategory || event.genre === selectedCategory) &&
(selectedMaxPrice === null || event.priceRange[0].min <= selectedMaxPrice)
)

const sortedEvents = filteredEvents.sort((a,b) => a.priceRange[0].min - b.priceRange[0].min);

const filteredEvents = selectedCategory
? events.filter((event) => event.genre === selectedCategory)
: events;
return (
<>
<div>
<div className="btn-group">
<button className="btn btn-dark" onClick={() => handleCategoryClick("Music")}><MusicIcon />Music</button>
<button className="btn btn-dark" onClick={() => handleCategoryClick("Sport")}><SportsIcon />Sports</button>
{/* <button className="btn btn-dark" onClick={() => handleCategoryClick("Theatre")}><TheatreIcon />Theatre</button> */}
<button className="btn btn-dark" onClick={() => handleCategoryClick("Arts")}><ArtsIcon />Arts</button>
<button className="btn btn-dark" onClick={() => handleCategoryClick("Nightlife")}><NightIcon />Nightlife</button>
<button className="btn btn-dark" onClick={() => handleCategoryClick("Film")}><FilmIcon />Film</button>
<button className="btn btn-dark" onClick={() => handleCategoryClick("Retreats")}><SpaIcon />Retreats</button>
<button className="btn btn-dark" onClick={() => handleCategoryClick("Family")}><FamilyIcon />Family</button>
<div className="container-fluid">
<div className="text-center">
<h1 className="display-4 mx-auto">Events</h1>
</div>

<div className="text-center">
<div className="btn-group price" role="price" aria-label="Basic radio toggle button group">

<button type="button" class="btn btn-secondary text-white">Price Filter</button>

<input type="radio" className="btn-check" onClick={() => handleMaxPriceClick(1000)} name="btnradioprice" id="btnradio1" autocomplete="off" />
<label className="btn btn-dark" for="btnradio1">Off</label>

<input type="radio" className="btn-check" onClick={() => handleMaxPriceClick(0)} name="btnradioprice" id="btnradio2" autocomplete="off" />
<label className="btn btn-dark" for="btnradio2">Free</label>

<input type="radio" className="btn-check" onClick={() => handleMaxPriceClick(10)} name="btnradioprice" id="btnradio3" autocomplete="off" />
<label className="btn btn-dark" for="btnradio3">£10</label>

<input type="radio" className="btn-check" onClick={() => handleMaxPriceClick(20)} name="btnradioprice" id="btnradio4" autocomplete="off" />
<label className="btn btn-dark" for="btnradio4">£20</label>

<input type="radio" className="btn-check" onClick={() => handleMaxPriceClick(30)} name="btnradioprice" id="btnradio5" autocomplete="off" />
<label className="btn btn-dark" for="btnradio5">£30</label>

<input type="radio" className="btn-check" onClick={() => handleMaxPriceClick(40)} name="btnradioprice" id="btnradio6" autocomplete="off" />
<label className="btn btn-dark" for="btnradio6">£40</label>

<input type="radio" className="btn-check" onClick={() => handleMaxPriceClick(50)} name="btnradioprice" id="btnradio7" autocomplete="off" />
<label className="btn btn-dark" for="btnradio7">£50</label>

<input type="radio" className="btn-check" onClick={() => handleMaxPriceClick(60)} name="btnradioprice" id="btnradio8" autocomplete="off" />
<label className="btn btn-dark" for="btnradio8">£60</label>

<input type="radio" className="btn-check" onClick={() => handleMaxPriceClick(70)} name="btnradioprice" id="btnradio9" autocomplete="off" />
<label className="btn btn-dark" for="btnradio9">£70</label>

<input type="radio" className="btn-check" onClick={() => handleMaxPriceClick(80)} name="btnradioprice" id="btnradio10" autocomplete="off" />
<label className="btn btn-dark" for="btnradio10">£80</label>

<input type="radio" className="btn-check" onClick={() => handleMaxPriceClick(90)} name="btnradioprice" id="btnradio11" autocomplete="off" />
<label className="btn btn-dark" for="btnradio11">£90</label>

<input type="radio" className="btn-check" onClick={() => handleMaxPriceClick(100)} name="btnradioprice" id="btnradio12" autocomplete="off" />
<label className="btn btn-dark" for="btnradio12">£100</label>
</div>
</div>
</div>


<div className="btn-group" role="group" aria-label="Category radio toggle button group">

<input type="radio" className="btn-check" onClick={() =>handleCategoryClick("")} name="btnradio" id="btnradiotoggle" autocomplete="off" />
<label className="btn btn-dark" for="btnradiotoggle"><ToggleIcon /> All</label>

<input type="radio" className="btn-check" onClick={() =>handleCategoryClick("Music")} name="btnradio" id="btnradiomusic" autocomplete="off" />
<label className="btn btn-dark" for="btnradiomusic"> <MusicIcon /> Music</label>

<input type="radio" className="btn-check" onClick={() =>handleCategoryClick("Sport")} name="btnradio" id="btnradiosports" autocomplete="off" />
<label className="btn btn-dark" for="btnradiosports"><SportsIcon /> Sports</label>

<input type="radio" className="btn-check" onClick={() =>handleCategoryClick("Arts")} name="btnradio" id="btnradioarts" autocomplete="off" />
<label className="btn btn-dark" for="btnradioarts"><ArtsIcon /> Arts</label>

<input type="radio" className="btn-check" onClick={() =>handleCategoryClick("Nightlife")} name="btnradio" id="btnradionight" autocomplete="off" />
<label className="btn btn-dark" for="btnradionight"><NightIcon /> Nightlife</label>

<input type="radio" className="btn-check" onClick={() =>handleCategoryClick("Film")} name="btnradio" id="btnradiofilm" autocomplete="off" />
<label className="btn btn-dark" for="btnradiofilm"><FilmIcon /> Film</label>

<input type="radio" className="btn-check" onClick={() =>handleCategoryClick("Retreats")} name="btnradio" id="btnradiospa" autocomplete="off" />
<label className="btn btn-dark" for="btnradiospa"><SpaIcon /> Retreats</label>

<input type="radio" className="btn-check" onClick={() =>handleCategoryClick("Family")} name="btnradio" id="btnradiofam" autocomplete="off" />
<label className="btn btn-dark" for="btnradiofam"><FamilyIcon /> Family</label>
</div>
</div><br></br><br></br>
<div>
<div className="container">
{filteredEvents.map((event) =>(
{sortedEvents.map((event) =>(
<div className="card text-bg-dark mb-3 p-3" key={event._id}>
<h5 className="card-header">{event.name}</h5>
<p>Type: {event.genre}, {event.subgenre}</p>
<p>Minimum Price: {event.priceRange[0].min === 0 ? "Free" : `£${event.priceRange[0].min}`}</p>
<p className="card-text">Postcode: {event.postCode}</p>
<div className="card-header"><h4>{event.name}</h4></div>
<div className="card-body">
<h6>Type:</h6>
<h5>{event.genre}, {event.subgenre}</h5>
<br></br>
<h6>Min Price:</h6><h5> {event.priceRange[0].min === 0 ? "Free" : `£${event.priceRange[0].min}`}</h5>
<br></br>
<h6 className="card-text">Postcode:</h6><h5>{event.postCode}</h5>

<br />
</div>
<div className="card-footer">
<div className="d-flex justify-content-between">
<a href={`/event/${event._id}`} target='_blank' rel='noreferrer'><button className="btn btn-light">
View details
<i class="bi bi-info-square"></i>View details
</button></a>
<br />
<a href={`https://${event.url}`} target='_blank' rel='noreferrer'><button className="btn btn-light">
Grab a ticket here!
<a href={`https://${event.url}`} target='_blank' rel='noreferrer'><button className="btn btn-light"><i class="bi bi-ticket-perforated"></i>
Buy Tickets
</button></a>
</div>
</div>
</div>
))}
</div>
Expand Down
2 changes: 1 addition & 1 deletion client/src/components/Gallery/Gallery.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ const Gallery = () => {
<Navbar /><br></br><br></br>
<body>
<div style={{ display: "flex", justifyContent: "center", alignItems: "center" }}>
<Search />

</div>

<main>
Expand Down
Loading

0 comments on commit a0f92f6

Please sign in to comment.