Skip to content
GitLab
Explore
Sign in
Primary navigation
Search or go to…
Project
T
Tickcrypt
Manage
Activity
Members
Labels
Plan
Issues
Issue boards
Milestones
Wiki
Requirements
Code
Merge requests
Repository
Branches
Commits
Tags
Repository graph
Compare revisions
Snippets
Locked files
Build
Pipelines
Jobs
Pipeline schedules
Test cases
Artifacts
Deploy
Releases
Package registry
Container registry
Model registry
Operate
Environments
Terraform modules
Monitor
Incidents
Analyze
Value stream analytics
Contributor analytics
CI/CD analytics
Repository analytics
Code review analytics
Issue analytics
Insights
Model experiments
Help
Help
Support
GitLab documentation
Compare GitLab plans
Community forum
Contribute to GitLab
Provide feedback
Keyboard shortcuts
?
Snippets
Groups
Projects
Show more breadcrumbs
Fin Wallis
Tickcrypt
Commits
dcd0946d
Commit
dcd0946d
authored
3 years ago
by
Fin Wallis
Browse files
Options
Downloads
Patches
Plain Diff
Adding start of purchase window in EventCard with form component configuration similar to signUp
parent
4f1f5efc
No related branches found
No related tags found
1 merge request
!14
Buy tickets, view owned tickets and miscellaneous files added
Changes
3
Hide whitespace changes
Inline
Side-by-side
Showing
3 changed files
frontend/src/Components/EventCard.js
+264
-84
264 additions, 84 deletions
frontend/src/Components/EventCard.js
frontend/src/Pages/Marketplace.js
+7
-6
7 additions, 6 deletions
frontend/src/Pages/Marketplace.js
frontend/src/api/events.js
+14
-0
14 additions, 0 deletions
frontend/src/api/events.js
with
285 additions
and
90 deletions
frontend/src/Components/EventCard.js
+
264
−
84
View file @
dcd0946d
import
React
from
"
react
"
;
import
React
,
{
useEffect
,
useState
}
from
"
react
"
;
import
IconButton
from
"
@mui/material/IconButton
"
;
import
ChevronRight
from
"
@mui/icons-material/ChevronRight
"
;
import
ChevronLeft
from
"
@mui/icons-material/ChevronLeft
"
;
import
isEmpty
from
'
validator/lib/isEmpty
'
;
import
{
signUp
}
from
'
../api/auth
'
;
import
Close
from
"
@mui/icons-material/Close
"
;
import
Card
from
"
@mui/material/Card
"
;
import
Grid
from
"
@mui/material/Grid
"
;
...
...
@@ -9,14 +13,99 @@ import CardContent from "@mui/material/CardContent";
import
CardMedia
from
"
@mui/material/CardMedia
"
;
import
Button
from
"
@mui/material/Button
"
;
import
Typography
from
"
@mui/material/Typography
"
;
import
{
fontWeight
}
from
"
@mui/syste
m
"
;
import
{
useNavigate
}
from
"
react-router-do
m
"
;
// Event card - Using material UI framework to bootstrap this process
// Event Data - Individual event data
// Type - small or large
// SetSelectedEvent - Set event to be shown in modal
const
EventCard
=
({
eventData
,
type
,
setSelectedEvent
})
=>
{
const
EventCard
=
({
eventData
,
type
,
setSelectedEvent
,
user
})
=>
{
let
navigate
=
useNavigate
();
//Show/Hide ticket purchase component boolean
const
[
showBuyTicket
,
setShowBuyTicket
]
=
useState
(
false
);
//Current purchase stage
//1 = Ticket info
//2 = Contact Information
//3 = Payment information
const
[
stage
,
setStage
]
=
useState
(
1
);
//Contact info form
const
[
contactFormData
,
setContactFormData
]
=
useState
({
addressLine1
:
"
1 Melville Road
"
,
addressLine2
:
""
,
city
:
"
Falmouth
"
,
county
:
"
Cornwall
"
,
postCode
:
"
TR34 5TR
"
,
errorMsg
:
false
,
});
// Validate postcode
function
isPostcode
(
postcode
)
{
postcode
=
postcode
.
replace
(
/
\s
/g
,
""
);
var
regex
=
/^
[
A-Z
]{1,2}[
0-9
]{1,2}[
A-Z
]{0,1}
?[
0-9
][
A-Z
]{2}
$/i
;
return
regex
.
test
(
postcode
);
}
//When form values change on stage 2
const
handleContactFormChange
=
(
event
)
=>
{
setContactFormData
({
...
contactFormData
,
[
event
.
target
.
name
]:
event
.
target
.
value
,
errorMsg
:
""
,
});
console
.
log
(
contactFormData
);
};
//When user clicks next on stage 2
const
handleContactSubmit
=
(
event
)
=>
{
event
.
preventDefault
();
console
.
log
(
contactFormData
);
// Form validation
if
(
isEmpty
(
contactFormData
.
addressLine1
)
||
isEmpty
(
contactFormData
.
city
)
||
isEmpty
(
contactFormData
.
county
)
||
isEmpty
(
contactFormData
.
postCode
)
)
{
setContactFormData
({
...
contactFormData
,
errorMsg
:
"
All fields are required except address line 2
"
,
});
}
else
if
(
!
isPostcode
(
contactFormData
.
postCode
))
{
setContactFormData
({
...
contactFormData
,
errorMsg
:
"
Invalid UK postcode
"
,
});
}
else
{
const
{
addressLine1
,
addressLine2
,
city
,
county
,
postCode
}
=
contactFormData
;
const
data
=
{
addressLine1
,
addressLine2
,
city
,
county
,
postCode
};
signUp
(
data
)
.
then
((
response
)
=>
{
console
.
log
(
"
axios success
"
,
response
);
// setFormData({
// firstName: "",
// lastName: "",
// email: "",
// password: "",
// confirmPassword: "",
// successMsg: response.data.successMessage,
// });
})
.
catch
((
err
)
=>
{
console
.
log
(
"
Axios error:
"
,
err
);
// setFormData({
// ...formData,
// errorMsg: err.response.data.errorMessage,
// });
});
}
};
console
.
log
(
Object
.
values
(
eventData
));
return
(
<>
...
...
@@ -30,7 +119,7 @@ const EventCard = ({ eventData, type, setSelectedEvent }) => {
image
=
{
eventData
.
eventImage
}
alt
=
"
Event Image
"
/>
<
CardContent
>
<
CardContent
>
<
div
style
=
{{
overflow
:
"
hidden
"
,
textOverflow
:
"
ellipsis
"
}}
>
<
Typography
gutterBottom
variant
=
"
h5
"
noWrap
component
=
"
div
"
>
{
eventData
.
eventTitle
}
...
...
@@ -94,91 +183,182 @@ const EventCard = ({ eventData, type, setSelectedEvent }) => {
<
/Grid
>
<
/Grid
>
{
/* Right info panel */
}
<
Grid
item
container
xs
=
{
6
}
>
<
Typography
variant
=
{
"
h3
"
}
fontWeight
=
{
"
bolder
"
}
>
{
eventData
.
eventTitle
}
<
/Typography
>
{
/* Split up the info using MUI Grid */
}
<
Grid
xs
=
{
6
}
sx
=
{{
marginTop
:
"
25px
"
}}
>
<
Typography
variant
=
{
"
h6
"
}
fontWeight
=
{
"
bold
"
}
>
Date
<
/Typography
>
<
Typography
variant
=
{
"
body2
"
}
>
{
eventData
.
startDate
}
<
/Typography
>
<
/Grid
>
<
Grid
xs
=
{
6
}
sx
=
{{
marginTop
:
"
25px
"
}}
>
<
Typography
variant
=
{
"
h6
"
}
fontWeight
=
{
"
bold
"
}
>
Venue
<
/Typography
>
<
Typography
variant
=
{
"
body2
"
}
>
{
eventData
.
venueAddress
}
<
/Typography
>
<
/Grid
>
<
Grid
xs
=
{
6
}
sx
=
{{
marginTop
:
"
25px
"
}}
>
<
Typography
variant
=
{
"
h6
"
}
fontWeight
=
{
"
bold
"
}
>
Event
Type
<
/Typography
>
<
Typography
variant
=
{
"
body2
"
}
>
<
ul
>
<
li
>
{
eventData
.
eventGenre
}
<
/li
>
<
/ul
>
<
/Typography
>
<
/Grid
>
<
Grid
xs
=
{
6
}
sx
=
{{
marginTop
:
"
25px
"
}}
>
<
Typography
variant
=
{
"
h6
"
}
fontWeight
=
{
"
bold
"
}
>
Time
<
/Typography
>
<
Typography
variant
=
{
"
body2
"
}
>
{
eventData
.
startTime
}
-
{
eventData
.
endTime
}
<
/Typography
>
<
/Grid
>
{
/* Description */
}
<
Grid
>
{
/* If user has not clicked 'Buy ticket' show information */
}
<>
{
/* Right info panel */
}
<
Grid
item
container
xs
=
{
6
}
spacing
=
{
2
}
>
<
Typography
variant
=
{
"
h6
"
}
fontWeight
=
{
"
bold
"
}
sx
=
{{
marginTop
:
"
25px
"
,
width
:
"
100%
"
}}
variant
=
{
!
showBuyTicket
?
"
h3
"
:
"
h4
"
}
fontWeight
=
{
"
bolder
"
}
>
Description
<
/Typography
>
<
Typography
variant
=
{
"
body2
"
}
>
{
eventData
.
eventDescription
}
{
eventData
.
eventTitle
}
<
/Typography
>
<
/Grid
>
{
!
showBuyTicket
?
(
<>
{
/* Split up the info using MUI Grid */
}
<
Grid
xs
=
{
6
}
item
sx
=
{{
marginTop
:
"
25px
"
}}
>
<
Typography
variant
=
{
"
h6
"
}
fontWeight
=
{
"
bold
"
}
>
Date
<
/Typography
>
<
Typography
variant
=
{
"
body2
"
}
>
{
eventData
.
startDate
}
<
/Typography
>
<
/Grid
>
<
Grid
xs
=
{
6
}
item
sx
=
{{
marginTop
:
"
25px
"
}}
>
<
Typography
variant
=
{
"
h6
"
}
fontWeight
=
{
"
bold
"
}
>
Venue
<
/Typography
>
<
Typography
item
variant
=
{
"
body2
"
}
>
{
eventData
.
venueAddress
}
<
/Typography
>
<
/Grid
>
<
Grid
xs
=
{
6
}
item
sx
=
{{
marginTop
:
"
25px
"
}}
>
<
Typography
variant
=
{
"
h6
"
}
fontWeight
=
{
"
bold
"
}
>
Event
Type
<
/Typography
>
<
Typography
variant
=
{
"
body2
"
}
>
{
eventData
.
eventGenre
}
<
/Typography
>
<
/Grid
>
<
Grid
xs
=
{
6
}
item
sx
=
{{
marginTop
:
"
25px
"
}}
>
<
Typography
variant
=
{
"
h6
"
}
fontWeight
=
{
"
bold
"
}
>
Time
<
/Typography
>
<
Typography
variant
=
{
"
body2
"
}
>
{
eventData
.
startTime
}
-
{
eventData
.
endTime
}
<
/Typography
>
<
/Grid
>
{
/* Description */
}
<
Typography
variant
=
{
"
h6
"
}
fontWeight
=
{
"
bold
"
}
sx
=
{{
marginTop
:
"
25px
"
}}
>
Description
<
/Typography
>
<
Typography
variant
=
{
"
body2
"
}
>
{
eventData
.
eventDescription
}
<
/Typography
>
<
Grid
xs
=
{
14
}
item
sx
=
{{
marginTop
:
"
25px
"
}}
>
<
div
style
=
{{
color
:
"
#9f7aea
"
}}
>
<
Typography
variant
=
{
"
h6
"
}
fontWeight
=
{
"
bold
"
}
color
=
{
"
inherit
"
}
>
Current
Price
<
/Typography
>
<
/div
>
<
Typography
variant
=
{
"
body2
"
}
variant
=
{
"
h6
"
}
fontWeight
=
{
"
bold
"
}
>
£
{
eventData
.
ticketPrice
}
<
/Typography
>
<
Button
onClick
=
{()
=>
{}}
size
=
"
small
"
sx
=
{{
backgroundColor
:
"
#9f7aea
"
,
color
:
"
white
"
,
padding
:
"
15px
"
,
marginTop
:
"
40px
"
,
width
:
"
100%
"
,
marginBottom
:
"
80px
"
,
}}
>
Buy
Ticket
<
/Button
>
<
Grid
xs
=
{
6
}
item
sx
=
{{
marginTop
:
"
25px
"
}}
>
<
div
style
=
{{
color
:
"
#EB5D07
"
}}
>
<
Typography
variant
=
{
"
h6
"
}
fontWeight
=
{
"
bold
"
}
color
=
{
"
inherit
"
}
>
Current
Price
<
/Typography
>
<
/div
>
<
Typography
variant
=
{
"
body2
"
}
>
£
{
eventData
.
ticketPrice
}
<
/Typography
>
<
/Grid
>
<
Grid
xs
=
{
6
}
container
item
sx
=
{{
marginTop
:
"
25px
"
}}
>
{
/* Either show login to purchase, redirect to login or to buy ticket */
}
<
Button
onClick
=
{()
=>
{
//If user is not null, open purchase card, else redirect to login
if
(
user
!=
null
)
{
setShowBuyTicket
(
!
showBuyTicket
);
}
else
{
navigate
(
"
/Login
"
);
}
}}
size
=
"
small
"
sx
=
{{
backgroundColor
:
"
#EB5D07
"
,
color
:
"
white
"
,
padding
:
"
10px
"
,
}}
>
{
user
!==
null
?
"
Buy Ticket
"
:
"
Login to buy
"
}
<
/Button
>
<
/Grid
>
<
/
>
)
:
(
<>
{
stage
===
1
&&
(
<
Grid
container
sx
=
{{
border
:
"
1px solid grey
"
,
borderRadius
:
"
25px
"
,
padding
:
"
15px
"
,
}}
>
<
Typography
variant
=
{
"
h6
"
}
>
{
eventData
.
eventTitle
}
<
/Typography
>
<
Grid
item
container
xs
=
{
12
}
justifyContent
=
{
"
flex-start
"
}
>
<
Typography
variant
=
{
"
body2
"
}
sx
=
{{
fontWeight
:
"
normal
"
}}
>
Venue
:
<
/Typography
>
<
Typography
variant
=
{
"
body2
"
}
>
{
eventData
.
venueName
}
<
/Typography
>
<
/Grid
>
<
Grid
item
container
xs
=
{
4
}
justifyContent
=
{
"
flex-start
"
}
>
<
Typography
variant
=
{
"
body2
"
}
>
{
eventData
.
startDate
}
<
/Typography
>
<
/Grid
>
<
Grid
item
container
xs
=
{
4
}
justifyContent
=
{
"
flex-start
"
}
>
<
Typography
variant
=
{
"
body2
"
}
>
{
eventData
.
startTime
}
-
{
eventData
.
endTime
}
<
/Typography
>
<
/Grid
>
<
/Grid
>
)}
<
Grid
container
item
justifyContent
=
{
"
space-between
"
}
sx
=
{{
height
:
"
50px
"
}}
>
{
stage
===
1
?
(
<
IconButton
onPress
=
{()
=>
{
setStage
(
stage
+
1
);
}}
>
Cancel
<
/IconButton
>
)
:
(
<
IconButton
onPress
=
{()
=>
{
setStage
(
stage
+
1
);
}}
>
<
ChevronLeft
/>
Back
<
/IconButton
>
)}
<
IconButton
onClick
=
{()
=>
{
setStage
(
stage
+
1
);
console
.
log
(
stage
);
}}
>
Next
<
ChevronRight
/>
<
/IconButton
>
<
/Grid
>
<
/
>
)}
<
/Grid
>
<
/
Grid
>
<
/
>
<
/Grid
>
)}
<
/
>
...
...
This diff is collapsed.
Click to expand it.
frontend/src/Pages/Marketplace.js
+
7
−
6
View file @
dcd0946d
...
...
@@ -4,11 +4,15 @@ import { getAllEvents } from "../api/events";
import
Grid
from
"
@mui/material/Grid
"
;
import
Typography
from
"
@mui/material/Typography
"
;
import
Modal
from
"
@mui/material/Modal
"
;
import
{
getLocalStorage
,
}
from
"
../Helpers/localStorage
"
const
Marketplace
=
()
=>
{
// List of events taken from DB
const
[
allEvents
,
setAllEvents
]
=
useState
([]);
//User object
const
[
user
,
setUser
]
=
useState
(
null
);
// Selected event to show modal for - If null show list instead!
const
[
selectedEvent
,
setSelectedEvent
]
=
useState
(
null
);
...
...
@@ -19,6 +23,7 @@ const Marketplace = () => {
setAllEvents
(
tickets
.
data
);
}
getEvents
();
setUser
(
getLocalStorage
(
'
user
'
))
},
[]);
return
(
...
...
@@ -50,18 +55,14 @@ const Marketplace = () => {
aria
-
labelledby
=
"
View Event
"
aria
-
describedby
=
"
Learn more about your favourite artist and their events from this modal.
"
>
<
Grid
container
xs
=
{
12
}
sx
=
{{
height
:
"
100%
"
}}
alignItems
=
{
"
center
"
}
>
<
Grid
container
xs
=
{
12
}
sx
=
{{
height
:
'
90vh
'
,
marginTop
:
'
5vh
'
,
overflowY
:
'
scroll
'
}}
alignItems
=
{
'
center
'
}
>
<
Grid
item
container
xs
=
{
10
}
sx
=
{{
backgroundColor
:
"
white
"
,
margin
:
"
auto
"
,
padding
:
"
35px
"
}}
>
<
EventCard
eventData
=
{
selectedEvent
}
type
=
{
"
large
"
}
setSelectedEvent
=
{
setSelectedEvent
}
/
>
<
EventCard
eventData
=
{
selectedEvent
}
type
=
{
'
large
'
}
setSelectedEvent
=
{
setSelectedEvent
}
user
=
{
user
}
/
>
<
/Grid
>
<
/Grid
>
<
/Modal
>
...
...
This diff is collapsed.
Click to expand it.
frontend/src/api/events.js
+
14
−
0
View file @
dcd0946d
...
...
@@ -28,3 +28,17 @@ export const getAllEvents = async () => {
return
response
};
export
const
purchaseTicket
=
async
(
event_id
,
user_id
)
=>
{
const
config
=
{
headers
:
{
'
Content-Type
'
:
'
application/json
'
}
}
const
response
=
await
axios
.
get
(
'
/purchase/
'
+
event_id
+
'
/
'
+
user_id
,
config
)
return
response
};
This diff is collapsed.
Click to expand it.
Preview
0%
Loading
Try again
or
attach a new file
.
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Save comment
Cancel
Please
register
or
sign in
to comment