added individual events page, and added colour support for event status

surreycompsoc · Oct 11, 2024 · a818067 · a818067
1 parent c698f46
commit a818067
Show file tree

Hide file tree

Showing 5 changed files with 224 additions and 55 deletions.
diff --git a/.yarn/install-state.gz b/.yarn/install-state.gz
diff --git a/components/EventsPanel.vue b/components/EventsPanel.vue
@@ -1,11 +1,14 @@
 <template>
   <div class="event-grid">
     <div v-for="event in reversedEvents" :key="event.id" class="event-card">
-      <img :src="event.img"  :alt="event.title"/>
-      <h3>{{ event.title }}</h3>
-      <p>Date: {{ event.date }}</p>
-      <p>Location: {{ event.location }}</p>
-      <p>Time: {{event.time}}</p>
+      <NuxtLink :to="`/events/${event.id}`">
+        <img :src="event.img" :alt="event.title" />
+        <h3>{{ event.title }}</h3>
+        <p>at: {{ event.date }}</p>
+        <p>
+          <span :class="getStatusClass(event.status)">{{ event.status }}</span>
+        </p>
+      </NuxtLink>
     </div>
   </div>
 </template>
@@ -15,20 +18,35 @@ export default {
   props: {
     events: {
       type: Array,
-      required: true
-    }
+      required: true,
+    },
   },
   computed: {
     reversedEvents() {
       return this.events.slice().reverse();
     },
   },
-}
+  methods: {
+    getStatusClass(status) {
+      switch (status) {
+        case 'Completed':
+          return 'status-completed';
+        case 'Ongoing':
+          return 'status-ongoing';
+        case 'Upcoming':
+          return 'status-upcoming';
+        default:
+          return '';
+      }
+    },
+  },
+};
 </script>
 
 <style>
 .event-grid {
   margin-top: 0.5rem;
+  padding: 16px;
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
   gap: 16px;
@@ -42,22 +60,35 @@ export default {
   padding: 16px;
   border-radius: 0.4rem;
   text-align: center;
+  cursor: pointer;
 
-  h3{
+  h3 {
     font-weight: bold;
   }
 
-  img{
+  img {
     border-radius: 0.3rem;
     margin-bottom: 0.5rem;
   }
 
   transition: transform 0.3s ease-in-out;
   transform: scale(1);
 
-  &:hover{
+  &:hover {
     transform: scale(1.05);
   }
+}
+
+/* Status styles */
+.status-completed {
+  color: green; /* Completed - green */
+}
+
+.status-ongoing {
+  color: yellow; /* Ongoing - yellow */
+}
 
+.status-upcoming {
+  color: blue; /* Upcoming - blue */
 }
 </style>
diff --git a/pages/events.vue b/pages/events.vue
diff --git a/pages/events/_id.vue b/pages/events/_id.vue
@@ -0,0 +1,93 @@
+<template>
+  <div class="content">
+    <div v-if="event" class="center-mount">
+      <h2>{{ event.title }}</h2>
+      <img :src="event.img" :alt="event.title" class="event-image" />
+      <p><span class="text-bold">Date:</span> {{ event.date }}</p>
+      <p><span class="text-bold">Location:</span> {{ event.location }}</p>
+      <p><span class="text-bold">Time:</span> {{ event.time }}</p>
+      <p><span class="text-bold">Status:</span> {{ event.status }}</p>
+    </div>
+    <div v-else class="center-mount">
+      <p>Event not found!</p>
+    </div>
+    <div style="text-align: center; margin-top: 2rem;">
+      <LinkButton extended to="/events" style="color: white">
+        <template #prefix><GlyphIcon of="arrow_back" /></template>
+        Back
+      </LinkButton>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      events: [
+        {
+          "id": 1,
+          "img": "/icon.png",
+          "title": "Refreshers Fair",
+          "date": "06/02/2024",
+          "location": "PATS Field",
+          "status" : "Completed",
+          "time": "10:00 - 16:00"
+        },
+        {
+          "id": 2,
+          "img": "/icon.png",
+          "title": "Node.js Workshop",
+          "date": "08/02/2024",
+          "location": "AP Lab 2",
+          "status" : "Completed",
+          "time": "18:00 - 20:00"
+        },
+        {
+          "id": 3,
+          "img": "/icon.png",
+          "title": "Stem Quiz",
+          "date": "15/02/24",
+          "location": "LTD",
+          "status" : "Completed",
+          "time": "18:20"
+        },
+        {
+          "id": 4,
+          "img": "/icon.png",
+          "title": "Hackathon (Introduction & Briefing)",
+          "date": "28/02/24",
+          "location": "LTE",
+          "status" : "Completed",
+          "time": "13:00"
+        },
+        {
+          "id": 5,
+          "img": "/icon.png",
+          "title": "Hackathon (Presentation & Awards)",
+          "date": "06/03/24",
+          "location": "TBC",
+          "status" : "Completed",
+          "time": "TBC"
+        },
+      ],
+      event: null // This will store the matched event
+    }
+  },
+  mounted() {
+    const eventId = parseInt(this.$route.params.id);
+    this.event = this.events.find(event => event.id === eventId);
+    console.log("Selected Event:", this.event);
+  }
+}
+</script>
+
+<style scoped>
+.event-image {
+  width: 200px;
+  height: 200px;
+  object-fit: cover;
+  margin-bottom: 20px;
+  border-radius: 10%;
+}
+</style>
diff --git a/pages/events/index.vue b/pages/events/index.vue
@@ -0,0 +1,89 @@
+<template>
+  <div>
+    <div class="title">
+      <h2>
+        Events Calendar
+      </h2>
+    </div>
+
+    <EventsPanel :events="events" />
+
+    <div style="text-align: center; margin-top: 2rem;">
+      <LinkButton extended to="/" style="color: white">
+        <template #prefix><GlyphIcon of="arrow_back" /></template>
+        Back
+      </LinkButton>
+    </div>
+  </div>
+</template>
+
+<script>
+import EventsPanel from '~/components/EventsPanel.vue';
+
+export default {
+  components: {
+    EventsPanel
+  },
+  data() {
+    return {
+      events: [
+        {
+          "id": 1,
+          "img": "/icon.png",
+          "title": "Refreshers Fair",
+          "date": "06/02/2024",
+          "location": "PATS Field",
+          "status" : "Completed",
+          "time": "10:00 - 16:00"
+        },
+        {
+          "id": 2,
+          "img": "/icon.png",
+          "title": "Node.js Workshop",
+          "date": "08/02/2024",
+          "location": "AP Lab 2",
+          "status" : "Completed",
+          "time": "18:00 - 20:00"
+        },
+        {
+          "id": 3,
+          "img": "/icon.png",
+          "title": "Stem Quiz",
+          "date": "15/02/24",
+          "location": "LTD",
+          "status" : "Completed",
+          "time": "18:20"
+        },
+        {
+          "id": 4,
+          "img": "/icon.png",
+          "title": "Hackathon (Introduction & Briefing)",
+          "date": "28/02/24",
+          "location": "LTE",
+          "status" : "Completed",
+          "time": "13:00"
+        },
+        {
+          "id": 5,
+          "img": "/icon.png",
+          "title": "Hackathon (Presentation & Awards)",
+          "date": "06/03/24",
+          "location": "TBC",
+          "status" : "Completed",
+          "time": "TBC"
+        },
+      ]
+    }
+  }
+}
+</script>
+
+<style>
+h2 {
+  text-align: center;
+  margin: 2rem;
+  color: #374151;
+  font-size: 2.3rem;
+  font-weight: bold;
+}
+</style>