Skip to content

Commit a818067

Browse files
Dhimant-PanchalDhimant-Panchal
committed
added individual events page, and added colour support for event status
1 parent c698f46 commit a818067

File tree

5 files changed

+224
-55
lines changed

5 files changed

+224
-55
lines changed

‎.yarn/install-state.gz

0 Bytes
Binary file not shown.

‎components/EventsPanel.vue

Lines changed: 42 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,14 @@
11
<template>
22
<div class="event-grid">
33
<div v-for="event in reversedEvents" :key="event.id" class="event-card">
4-
<img :src="event.img" :alt="event.title"/>
5-
<h3>{{ event.title }}</h3>
6-
<p>Date: {{ event.date }}</p>
7-
<p>Location: {{ event.location }}</p>
8-
<p>Time: {{event.time}}</p>
4+
<NuxtLink :to="`/events/${event.id}`">
5+
<img :src="event.img" :alt="event.title" />
6+
<h3>{{ event.title }}</h3>
7+
<p>at: {{ event.date }}</p>
8+
<p>
9+
<span :class="getStatusClass(event.status)">{{ event.status }}</span>
10+
</p>
11+
</NuxtLink>
912
</div>
1013
</div>
1114
</template>
@@ -15,20 +18,35 @@ export default {
1518
props: {
1619
events: {
1720
type: Array,
18-
required: true
19-
}
21+
required: true,
22+
},
2023
},
2124
computed: {
2225
reversedEvents() {
2326
return this.events.slice().reverse();
2427
},
2528
},
26-
}
29+
methods: {
30+
getStatusClass(status) {
31+
switch (status) {
32+
case 'Completed':
33+
return 'status-completed';
34+
case 'Ongoing':
35+
return 'status-ongoing';
36+
case 'Upcoming':
37+
return 'status-upcoming';
38+
default:
39+
return '';
40+
}
41+
},
42+
},
43+
};
2744
</script>
2845

2946
<style>
3047
.event-grid {
3148
margin-top: 0.5rem;
49+
padding: 16px;
3250
display: grid;
3351
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
3452
gap: 16px;
@@ -42,22 +60,35 @@ export default {
4260
padding: 16px;
4361
border-radius: 0.4rem;
4462
text-align: center;
63+
cursor: pointer;
4564
46-
h3{
65+
h3 {
4766
font-weight: bold;
4867
}
4968
50-
img{
69+
img {
5170
border-radius: 0.3rem;
5271
margin-bottom: 0.5rem;
5372
}
5473
5574
transition: transform 0.3s ease-in-out;
5675
transform: scale(1);
5776
58-
&:hover{
77+
&:hover {
5978
transform: scale(1.05);
6079
}
80+
}
81+
82+
/* Status styles */
83+
.status-completed {
84+
color: green; /* Completed - green */
85+
}
86+
87+
.status-ongoing {
88+
color: yellow; /* Ongoing - yellow */
89+
}
6190
91+
.status-upcoming {
92+
color: blue; /* Upcoming - blue */
6293
}
6394
</style>

‎pages/events.vue

Lines changed: 0 additions & 44 deletions
This file was deleted.

‎pages/events/_id.vue

Lines changed: 93 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,93 @@
1+
<template>
2+
<div class="content">
3+
<div v-if="event" class="center-mount">
4+
<h2>{{ event.title }}</h2>
5+
<img :src="event.img" :alt="event.title" class="event-image" />
6+
<p><span class="text-bold">Date:</span> {{ event.date }}</p>
7+
<p><span class="text-bold">Location:</span> {{ event.location }}</p>
8+
<p><span class="text-bold">Time:</span> {{ event.time }}</p>
9+
<p><span class="text-bold">Status:</span> {{ event.status }}</p>
10+
</div>
11+
<div v-else class="center-mount">
12+
<p>Event not found!</p>
13+
</div>
14+
<div style="text-align: center; margin-top: 2rem;">
15+
<LinkButton extended to="/events" style="color: white">
16+
<template #prefix><GlyphIcon of="arrow_back" /></template>
17+
Back
18+
</LinkButton>
19+
</div>
20+
</div>
21+
</template>
22+
23+
<script>
24+
export default {
25+
data() {
26+
return {
27+
events: [
28+
{
29+
"id": 1,
30+
"img": "/icon.png",
31+
"title": "Refreshers Fair",
32+
"date": "06/02/2024",
33+
"location": "PATS Field",
34+
"status" : "Completed",
35+
"time": "10:00 - 16:00"
36+
},
37+
{
38+
"id": 2,
39+
"img": "/icon.png",
40+
"title": "Node.js Workshop",
41+
"date": "08/02/2024",
42+
"location": "AP Lab 2",
43+
"status" : "Completed",
44+
"time": "18:00 - 20:00"
45+
},
46+
{
47+
"id": 3,
48+
"img": "/icon.png",
49+
"title": "Stem Quiz",
50+
"date": "15/02/24",
51+
"location": "LTD",
52+
"status" : "Completed",
53+
"time": "18:20"
54+
},
55+
{
56+
"id": 4,
57+
"img": "/icon.png",
58+
"title": "Hackathon (Introduction & Briefing)",
59+
"date": "28/02/24",
60+
"location": "LTE",
61+
"status" : "Completed",
62+
"time": "13:00"
63+
},
64+
{
65+
"id": 5,
66+
"img": "/icon.png",
67+
"title": "Hackathon (Presentation & Awards)",
68+
"date": "06/03/24",
69+
"location": "TBC",
70+
"status" : "Completed",
71+
"time": "TBC"
72+
},
73+
],
74+
event: null // This will store the matched event
75+
}
76+
},
77+
mounted() {
78+
const eventId = parseInt(this.$route.params.id);
79+
this.event = this.events.find(event => event.id === eventId);
80+
console.log("Selected Event:", this.event);
81+
}
82+
}
83+
</script>
84+
85+
<style scoped>
86+
.event-image {
87+
width: 200px;
88+
height: 200px;
89+
object-fit: cover;
90+
margin-bottom: 20px;
91+
border-radius: 10%;
92+
}
93+
</style>

‎pages/events/index.vue

Lines changed: 89 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,89 @@
1+
<template>
2+
<div>
3+
<div class="title">
4+
<h2>
5+
Events Calendar
6+
</h2>
7+
</div>
8+
9+
<EventsPanel :events="events" />
10+
11+
<div style="text-align: center; margin-top: 2rem;">
12+
<LinkButton extended to="/" style="color: white">
13+
<template #prefix><GlyphIcon of="arrow_back" /></template>
14+
Back
15+
</LinkButton>
16+
</div>
17+
</div>
18+
</template>
19+
20+
<script>
21+
import EventsPanel from '~/components/EventsPanel.vue';
22+
23+
export default {
24+
components: {
25+
EventsPanel
26+
},
27+
data() {
28+
return {
29+
events: [
30+
{
31+
"id": 1,
32+
"img": "/icon.png",
33+
"title": "Refreshers Fair",
34+
"date": "06/02/2024",
35+
"location": "PATS Field",
36+
"status" : "Completed",
37+
"time": "10:00 - 16:00"
38+
},
39+
{
40+
"id": 2,
41+
"img": "/icon.png",
42+
"title": "Node.js Workshop",
43+
"date": "08/02/2024",
44+
"location": "AP Lab 2",
45+
"status" : "Completed",
46+
"time": "18:00 - 20:00"
47+
},
48+
{
49+
"id": 3,
50+
"img": "/icon.png",
51+
"title": "Stem Quiz",
52+
"date": "15/02/24",
53+
"location": "LTD",
54+
"status" : "Completed",
55+
"time": "18:20"
56+
},
57+
{
58+
"id": 4,
59+
"img": "/icon.png",
60+
"title": "Hackathon (Introduction & Briefing)",
61+
"date": "28/02/24",
62+
"location": "LTE",
63+
"status" : "Completed",
64+
"time": "13:00"
65+
},
66+
{
67+
"id": 5,
68+
"img": "/icon.png",
69+
"title": "Hackathon (Presentation & Awards)",
70+
"date": "06/03/24",
71+
"location": "TBC",
72+
"status" : "Completed",
73+
"time": "TBC"
74+
},
75+
]
76+
}
77+
}
78+
}
79+
</script>
80+
81+
<style>
82+
h2 {
83+
text-align: center;
84+
margin: 2rem;
85+
color: #374151;
86+
font-size: 2.3rem;
87+
font-weight: bold;
88+
}
89+
</style>

0 commit comments

Comments
 (0)