Skip to content

Commit

Permalink
Merge pull request #13 from devfestindia/herodata
Browse files Browse the repository at this point in the history 
fix errors
  • Loading branch information
@priyaljain919
priyaljain919 authored Sep 28, 2024
2 parents d650a58 + ef7b1be commit 98abeb9
Showing 1 changed file with 2 additions and 105 deletions.
107 changes: 2 additions & 105 deletions components/home/FindEvent.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,116 +45,13 @@
<CoreCommunityMap/>
</v-col>
</v-row>
<!-- <v-row justify-center align="center">
<v-col md="12" sm="12" cols="12">
<div v-if="chunkedUpcomingEvents.length > 0">
<h3 style="text-align: center; color: #076EFF;">Upcoming Events</h3>
<v-carousel :show-arrows="true">
<v-carousel-item v-for="(chunk, index) in chunkedUpcomingEvents" :key="index">
<v-row align="center" justify="center" class="py-10">
<v-col cols="12" sm="12" md="4" lg="4" v-for="(event, evIndex) in chunk" :key="evIndex">
<v-card class="pa-10"
style="background: #000; border-color:#1f2023; border-width: 2px; border-radius: 60px; border-style: solid;">
<div :class="`pa-5 mb-5 d-flex flex-column align-center ${getStyle(evIndex)}`"
style="border-radius: 60px;">
<h1><strong>{{ event.city }}</strong></h1>
</div>
<h2 class="text-white">On {{ getFormattedDate(event.date) }}</h2>
<h5 class="text-white">at {{ event.place }}</h5>
<div class="d-flex flex-column">
<v-btn large rounded dark :href="`${event.rsvp}`" target="_blank" style="
background: linear-gradient(145.24deg,#076eff 541.5%,#69a3ff 8780.84%);
border-radius: 90px;
text-transform: capitalize;
" class="py-7 px-4 mt-4 google-font"><strong>Register Now</strong>
</v-btn>
<v-btn dark large rounded outlined :href="`${event.link}`" target="_blank"
style="text-transform: capitalize;" class="mt-4 google-font"><strong>Learn
More</strong></v-btn>
</div>
</v-card>
</v-col>
</v-row>
</v-carousel-item>
</v-carousel>
</div>
<div v-if="chunkedPastEvents.length > 0">
<h3 style="text-align: center; color: #EA4355;">Past Events</h3>
<v-carousel :show-arrows="true">
<v-carousel-item v-for="(chunk, index) in chunkedPastEvents" :key="index">
<v-row align="center" justify="center" class="py-10">
<v-col cols="12" sm="12" md="4" lg="4" v-for="(event, evIndex) in chunk" :key="evIndex">
<v-card class="pa-10"
style="background: #000; border-color:#1f2023; border-width: 2px; border-radius: 60px; border-style: solid;">
<div :class="`pa-5 mb-5 d-flex flex-column align-center ${getStyle(evIndex)}`"
style="border-radius: 60px;">
<h1><strong>{{ event.city }}</strong></h1>
</div>
<h2 class="text-white">On {{ getFormattedDate(event.date) }}</h2>
<h5 class="text-white">at {{ event.place }}</h5>
<div class="d-flex flex-column">
<v-btn large rounded dark :href="`${event.rsvp}`" target="_blank" style="
background: linear-gradient(145.24deg,#076eff 541.5%,#69a3ff 8780.84%);
border-radius: 90px;
text-transform: capitalize;
" class="py-7 px-4 mt-4 google-font"><strong>Register Now</strong>
</v-btn>
<v-btn dark large rounded outlined :href="`${event.link}`" target="_blank"
style="text-transform: capitalize;" class="mt-4 google-font"><strong>Learn
More</strong></v-btn>
</div>
</v-card>
</v-col>
</v-row>
</v-carousel-item>
</v-carousel>
</div>
</v-col>
</v-row> -->

</v-container>
</template>

<script setup>
import { useDisplay } from "vuetify";
const { width, mobile } = useDisplay();
const screenWidth = ref(width);
const { communitydata } = useJSONData();
import moment from "moment";
const DATE_FORMAT = "DD/MM/YYYY";
const DATE_DISPLAY_FORMAT = "D MMM YYYY";
let CHUNK_SIZE = 2;
// if(window.innerWidth < 998) {
// CHUNK_SIZE = 1;
// }
const chunkArray = (array, size) => {
const result = [];
for (let i = 0; i < array.length; i += size) {
result.push(array.slice(i, i + size));
}
return result;
};
function getStyle(indexNumber) {
const styles = ["blue-head", "green-head", "red-head", "yellow-head"];
return styles[indexNumber % styles.length];
}
function getFormattedDate(givenDate) {
return moment(givenDate, DATE_FORMAT).format(DATE_DISPLAY_FORMAT);
}
const upcomingEvent = communitydata.filter(event => moment(event.date, DATE_FORMAT).isAfter(moment(), "date"));
const pastEvents = communitydata.filter(event => moment(event.date, DATE_FORMAT).isBefore(moment(), "date"));
const chunkedUpcomingEvents = chunkArray(
communitydata.filter(event => moment(event.date, DATE_FORMAT).isAfter(moment(), "date")),
CHUNK_SIZE
);
const chunkedPastEvents = chunkArray(
communitydata.filter(event => moment(event.date, DATE_FORMAT).isBefore(moment(), "date")),
CHUNK_SIZE
)
</script>

<style scoped>
Expand Down

0 comments on commit 98abeb9

Please sign in to comment.