@ozdao/prometheus-framework 0.2.32 → 0.2.34

package/src/modules/events/components/pages/Event.vue

@@ -20,54 +20,129 @@
 
 
     <TransitionGroup tag="ul" name="fade" class="container">
-	    <CardEvent 
-	        v-if="!isLoading && event"
-	        @click="$router.push({name: 'Event', params: {url: event.url}})" 
-	        :event="event" 
-	        :owner="event.owner" 
-	        :user="auth.state.user._id"
-	        :type="'normal'"
-	        class="mn-b-medium bg-grey radius-big"
-	      >
-          <ButtonJoin 
-            v-if="auth.state.user._id"
-            :type="'event'" 
-            :hasTicket="event.hasTicket" 
-            :targetId="event._id" 
-            :userId="auth.state.user._id"
-            class="mn-b-small w-100 pd-medium mn-auto"
-            @updateTicket="handleTicketUpdate"
+      <HeroEvent
+        v-if="!isLoading && event && event.special"
+        :content="{
+          title: event.name,
+          description: event.description,
+          ticketLinkStripe: event.specialData.ticketLinkStripe,
+          subtitle: event.specialData.subtitle,
+          logos: event.specialData.logos,
+          video: event.specialData.video,
+          buyticket: 'Buy ticket',
+          booktable: 'Book table'
+        }"
+        :options="{
+          date: event.date.start,
+          price: event.specialData.ticketPrice,
+        }"
+        class="mn-b-thin"
+      />
+      <SectionMainGuest
+         v-if="!isLoading && event && event.special"
+        :content="{
+          title: event.specialData.guestTitle,
+          description: event.specialData.guestDescription,
+          socials: {
+            twitter:  event.specialData.guestTwitter,
+            telegram: event.specialData.guestTelegram,
+            instagram: event.specialData.guestInstagram,
+            facebook: event.specialData.guestFacebook
+          },
+          video: event.specialData.guestVideo,
+          spotify: event.specialData.guestSpotify,
+          soundcloud: event.specialData.guestSoundcloud,
+        }"
+        class="mn-b-thin"
+      />
+
+      <section 
+        v-if="!isLoading && event && event.special"
+        :style="`
+          background-image: url(${event.specialData.lineupBackground}); 
+          background-size: 100%; background-repeat: no-repeat;
+        `" 
+        class="mn-b-thin t-white gap-big w-100 h-max o-hidden radius-big pd-big pos-relative bg-black"
+      >
+        <h2 class="mn-b-big w-100 t-center">Event Details</h2>
+        <div class="gap-big mn-b-thin cols-2">
+          
+          <SectionSpecialGuests 
+            :content="{
+              title: 'Special Guests',
+              description:'Enjoy a festive dining experience  at The Commune, featuring a fine selection of dishes and drinks presented on your table throughout the evening.',
+              guests: event.specialData.guests
+            }"
+          />
+
+          <SectionLineUp
+            :content="{
+              title: 'Lineup',
+              lineup: event.specialData.lineup
+            }"
+          />
+
+        </div>
+
+        <SectionPreviousEvents
+          :content="{
+            ticket: event.specialData.ticketImage
+          }"
+          :options="{
+            link:  event.specialData.ticketLinkStripe,
+            video: event.specialData.previousVideo
+          }"
+        />
+    </section>
+
+    <CardEvent 
+        v-if="!isLoading && event && !event.special"
+        @click="$router.push({name: 'Event', params: {url: event.url}})" 
+        :event="event" 
+        :owner="event.owner" 
+        :user="auth.state.user._id"
+        :type="'normal'"
+        class="mn-b-medium bg-grey radius-big"
+      >
+        <ButtonJoin 
+          v-if="auth.state.user._id"
+          :type="'event'" 
+          :hasTicket="event.hasTicket" 
+          :targetId="event._id" 
+          :userId="auth.state.user._id"
+          class="mn-b-small w-100 pd-medium mn-auto"
+          @updateTicket="handleTicketUpdate"
+        />
+
+        <section>
+          <component
+            v-if="event && event.content"
+            v-for="(block, index) in event.content"
+            :is="ComponentMap[block.type]"
+            :key="index"
+            :index="index"
+            :component="block"
+            :prop="block"
+            :class="block.class"
+            content="content"
+            v-bind="getBlockProps(block)"
+            class="mn-b-regular"
           />
+        </section>
+
+    </CardEvent>
 
-          <section>
-            <component
-              v-if="event && event.content"
-              v-for="(block, index) in event.content"
-              :is="ComponentMap[block.type]"
-              :key="index"
-              :index="index"
-              :component="block"
-              :prop="block"
-              :class="block.class"
-              content="content"
-              v-bind="getBlockProps(block)"
-              class="mn-b-regular"
-            />
-          </section>
-
-      </CardEvent>
-
-	  
-
-	    <Comments 
-	    	v-if="!isLoading && event" 
-	    	:type="'event'" 
-	    	:target="event._id" 
-	    	:owner="auth.state.user._id"
-	    />
-	      
-    </TransitionGroup>  
   
+
+    <Comments 
+    	v-if="!isLoading && event && !event.special" 
+    	:type="'event'" 
+    	:target="event._id" 
+    	:owner="auth.state.user._id"
+    />
+      
+  </TransitionGroup>  
+
   </section>
 </template>
 
@@ -76,7 +151,14 @@
   
   import Loader from '@pf/src/components/Loader/Loader.vue';
   import EmptyState from '@pf/src/components/EmptyState/EmptyState.vue';
-  
+    
+  import HeroEvent from '@pf/src/modules/events/components/sections/HeroEvent.vue';
+  import SectionMainGuest from '@pf/src/modules/events/components/sections/SectionMainGuest.vue';
+  import SectionSpecialGuests from '@pf/src/modules/events/components/sections/SectionSpecialGuests.vue'
+  import SectionLineUp from '@pf/src/modules/events/components/sections/SectionLineUp.vue';
+  import SectionPreviousEvents from '@pf/src/modules/events/components/sections/SectionPreviousEvents.vue';
+
+
   import CardEvent from '@pf/src/modules/events/components/blocks/CardEvent.vue';
   import SkeletonEvent from '@pf/src/modules/icons/skeletons/SkeletonEvent.vue'
   import ButtonJoin from '@pf/src/modules/events/components/elements/ButtonJoin.vue';

package/src/modules/events/components/sections/HeroEvent.vue

@@ -0,0 +1,161 @@
+<template>
+  <section 
+  	class="
+	  	t-white
+	  	t-center
+	  	w-100 
+	  	h-100
+	  	pos-relative
+	  	gap-thin
+	  	cols-2
+	  	pos-relative
+	  "
+	 >
+   	<div 
+   		style="min-height: 20rem;"
+   		class="desktop-only radius-big o-hidden bg-black  pos-relative"
+   	>
+			<video 
+				v-if="content.video"
+				style="object-fit: cover;" 
+				ref="videoElement"  
+				class="pos-absolute pos-t-0 pos-l-0 w-100 h-100" 
+				preload autoplay muted loop playsinlineclass playsinline :src="content.video" 
+				itemprop="video" 
+				type="video/webm"
+			>
+			</video>
+	  </div>
+
+   	<div 
+   		class="
+   		content-hero-refactor
+   		radius-big 
+	  	o-hidden 
+	  	bg-black  
+	  	pd-big mn-r-auto mn-l-auto t-white flex-h-center flex-column o-hidden flex-v-start t-left flex w-100 h-100 gap-zero">
+    	<!-- <img src="/logo/jungle-stereo-cosmonaut.png"  class="h-8r mn-b-small z-index-1"/> -->
+    	<div class="mn-b-big z-index-1 flex-nowrap flex gap-small">
+	    	<img v-for="logo in content.logos" class="i-big" :src="logo">
+	    </div>
+
+    	<h3 class="pd-thin z-index-1  w-max br-solid br-2px br-white radius-extra 	mn-b-thin">
+					{{content?.subtitle}}
+	    </h3>
+
+    	<h1 class="z-index-1  t-main mn-b-semi">
+					{{content?.title}}
+	    </h1>
+
+	    <p class="z-index-1  p-big mn-b-semi">
+	    		{{content?.description}}
+	    </p>
+	  	
+	  	<p class="z-index-1  t-transp p-small mn-b-thin">
+
+			Hurry up and purchase your ticket at a special price of only <span class="bg-white t-black pd-t-nano pd-b-nano pd-r-micro pd-l-micro radius-extra">{{options?.price}} {{returnCurrency()}}</span>
+	    </p>
+	    
+
+	    <Countdown 
+	    	class="z-index-1  mn-b-small w-40"
+	    	:options="props.options"
+	    />
+	    <div v-if="content?.ticketLinkStripe" class="z-index-1  mn-t-medium mn-b-small 	flex-nowrap flex gap-thin">
+	    	<!-- <a href="#" class="pd-l-medium pd-r-medium pd-t-small pd-b-small radius-extra uppercase t-medium t-black bg-white  ">
+	    		Sold Out
+	    	</a> -->
+	    	<a href="#" @click="clickBuyTicket()" class="pd-l-medium pd-r-medium pd-t-small pd-b-small radius-extra uppercase t-medium t-black bg-white  ">
+	    			{{content?.buyticket}}
+	    	</a>
+	    </div>
+
+	    <video 
+		    v-if="content.video"
+				style="object-fit: cover; opacity: 0.2;" 
+				ref="videoElement"  
+				class="mobile-only pos-absolute z-index-0 pos-t-0 pos-l-0 w-100 h-100" 
+				preload autoplay muted loop playsinlineclass playsinline :src="content.video" 
+				itemprop="video" 
+				type="video/webm"
+			>
+			</video>
+	  
+    </div>
+
+
+  </section>
+</template>
+
+
+<script setup>
+	import { useI18n } from 'vue-i18n'
+
+	import Countdown from "@pf/src/components/Countdown/Countdown.vue"
+
+	import { ref, onMounted } from 'vue'
+	const videoElement = ref(null)
+
+	var isPlaying = false;
+
+	function	checkAndPlayVideo() {
+    // Initializing values
+
+		// On video playing toggle values
+		videoElement.value.onplaying = function() {
+		  isPlaying = true;
+		};
+
+		// On video pause toggle values
+		videoElement.value.onpause = function() {
+		  isPlaying = false;
+		};	
+  }
+
+  // Play video function
+	async function playVid() {      
+    if (videoElement.value.paused && !isPlaying) {
+      return videoElement.value.play();
+    }
+	} 
+
+	onMounted(() => {
+		checkAndPlayVideo()
+		playVid()
+	})
+	
+
+	const props = defineProps({
+		content: {
+			type: Object
+		},
+		options: {
+			type: Object
+		}
+	})
+
+
+	function clickBuyTicket () {
+		gtag('event', 'buy_ticket', {
+	    'event_category': 'conversion',
+	    'event_label': 'Buy Ticket'
+	  });
+
+	  window.open(props.content?.ticketLinkStripe);
+
+	}
+</script>
+
+<style lang="scss" scoped>
+	@media screen and (max-width: 1025px) {
+		.content-hero-refactor {
+			text-align: center;
+		}
+
+		h3, div {
+			margin-left: auto;
+			margin-right: auto;
+		}
+	}
+
+</style>

package/src/modules/events/components/sections/SectionLineup.vue

@@ -0,0 +1,42 @@
+<template>
+	  <div class="br-1px bg-blur-extra br-solid br-white-transp-20  radius-big o-hidden pos-relative">
+	  	<h3 class="t-center w-100 pd-small br-b br-white-transp-20 br-solid">{{content?.title || 'Event Program'}}</h3>
+
+    	<div 
+    		v-if="content?.lineup"
+    		v-for="(event, index) in content.lineup"
+    		:class="{'br-solid br-b br-white-transp-10': index < content.lineup.length - 1}" 
+    		class="flex-column flex-h-center t-center pd-medium flex w-100 gap-zero"
+    	>
+    	
+    	 	<h5 class="t-main t-nye204 mn-b-small">
+					{{event.djs}}
+		    </h5>
+		    
+		    <h4 class="t-unna t-nye204 mn-b-thin">
+					{{event.name}}
+		    </h4>
+		    	<span class="t-semi mn-b-thin mn-l-auto mn-r-auto pd-thin radius-extra br-solid br-2px br-main t-main w-max">
+					{{event.time}}
+				</span>
+		    
+				<p class="p-medium t-transp">
+					{{event.description}}
+				</p>
+    	</div>
+	  </div>
+</template>
+
+
+<script setup>
+	import { useI18n } from 'vue-i18n'
+
+	const props = defineProps({
+		content: {
+			type: Object
+		}
+	})
+</script>
+
+<style lang="scss">
+</style>

package/src/modules/events/components/sections/SectionMainGuest.vue

@@ -0,0 +1,104 @@
+<template>
+
+  	<div id="mainguest" class="o-hidden bg-black t-white pos-relative radius-big gap-zero pos-relative cols-2">
+
+	    <div class="pd-big pos-relative flex-column flex w-100 h-100 gap-zero">
+				 <Socials
+		    	:telegram="content?.socials?.telegram"
+	     		:facebook="content?.socials?.facebook"
+	     		:instagram="content?.socials?.instagram"
+	     		:twitter="content?.socials?.twitter"
+	     		class="mn-b-semi"
+		    />
+
+	    	<h2 class="mn-b-big">
+					{{content?.title}}
+		    </h2>
+
+		    <p class="p-medium" v-html="content?.description"/>
+		    <slot></slot>
+		    <iframe class="radius-big o-hidden mn-t-medium" v-if="content?.soundcloud" width="100%" height="200" scrolling="no" frameborder="no" allow="autoplay"
+					:src="`https://w.soundcloud.com/player/?url=https%3A//soundcloud.com/${content.soundcloud}
+					&color=%23ff5500&auto_play=false&hide_related=false
+					&show_comments=true&show_user=true&show_reposts=false&show_teaser=true&visual=true`">
+					</iframe>
+		    <iframe 
+		    	v-if="content?.spotify" 
+		    	:src="`https://open.spotify.com/embed/track/${content?.spotify}?utm_source=generator`" 
+		    	width="100%" 
+		    	height="152" 
+		    	frameBorder="0" 
+		    	allowfullscreen="" 
+		    	allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture" 
+		    	loading="lazy"
+		    	class="mn-t-big"
+		    ></iframe>
+	    </div>
+
+	    <div style="min-height: 20rem;" class="o-hidden pos-relative">
+				<video 
+					:src="content?.video" 
+					itemprop="video" 
+					type="video/mp4"
+					ref="videoElement"  
+					class="pos-absolute pos-t-0 pos-l-0 w-100 h-100 object-fit-cover" 
+					preload autoplay muted loop playsinlineclass playsinline></video>
+	    </div>
+
+  	</div>
+</template>
+
+
+<script setup>
+	import { useI18n } from 'vue-i18n'
+
+	import { ref, onMounted } from 'vue';
+
+	import { Socials } from '@ozdao/prometheus-framework/modules/organizations/client'	
+
+	const props = defineProps({
+		content: {
+			type: Object
+		}
+	})
+
+	const videoElement = ref(null)
+	let isPlaying = false;
+
+	function	checkAndPlayVideo() {
+    // Initializing values
+
+		// On video playing toggle values
+		videoElement.value.onplaying = function() {
+		  isPlaying = true;
+		};
+
+		// On video pause toggle values
+		videoElement.value.onpause = function() {
+		  isPlaying = false;
+		};	
+  }
+
+  // Play video function
+	async function playVid() {      
+    if (videoElement.value.paused && !isPlaying) {
+      return videoElement.value.play();
+    }
+	} 
+  
+	onMounted(() => {
+		checkAndPlayVideo()
+		playVid()
+	})
+
+</script>
+
+<style lang="scss">
+	 @media screen and (max-width: 1025px) {
+	 	#mainguest {
+	 		> div:first-of-type {
+	 			order: 2;
+	 		}
+	 	}
+	 }
+</style>

package/src/modules/events/components/sections/SectionPreviousEvents.vue

@@ -0,0 +1,119 @@
+<template>
+
+	<div class="cols-2 gap-big pos-relative ">
+		 <div class="cols-1 gap-small ">
+		  <a v-if="options?.link" @click="clickBuyTicket()" href="#"  class="bg-main flex-child-grow-1  flex-child-shrink-0 flex-child-basis-auto o-hidden  radius-big pd-big flex-center flex-column flex w-100 gap-zero">
+		  	<img class="w-100" :src="content?.ticket">
+
+	    	<a class="t-white bg-black pd-l-medium pd-b-thin pd-t-thin pd-r-small h4 radius-extra uppercase t-nye204">
+	    		<!-- SOLD OUT -->
+					{{t('nye2024.buyticket')}}
+		    </a>
+		    
+		  </a>
+
+		  <p class="pd-small radius-big bg-second flex flex-center gap-small p-medium t-medium t-white">
+	    	<span>For extra payment options contact</span> 
+  			<a class="t-black bg-white radius-extra pd-thin" href="https://t.me/thecommunebar" target="_blank">@thecommunebar</a>
+  		</p>
+  	</div>
+
+		<div class="br-solid br-1px br-white-transp-10 o-hidden radius-big bg-black ">
+			<video v-if="options?.video" style="max-height: 20rem; object-fit: cover;" ref="videoElement"  class="pos-t-0 pos-l-0 w-100 h-auto" preload autoplay muted loop playsinlineclass playsinline :src="options?.video" itemprop="video" type="video/mp4" ></video>
+
+
+	    <div class="pd-big flex-column flex w-100 h-100 gap-zero">
+	    	<h3 class="t-unna t-nye204 mn-b-small">
+					{{t('nye2024.title')}}
+		    </h3>
+		    
+		    <p class="p-medium t-transp mn-b-big">
+		    	{{t('nye2024.description')}}
+		    </p>
+
+		    <div class="flex-nowrap flex gap-thin">
+		    	<a href="https://www.instagram.com/thecommune.phuket/" 	target="_blank" class="pd-l-medium pd-r-medium pd-t-small pd-b-small t-black radius-extra uppercase t-medium bg-white">
+		    		{{t('nye2024.checkinblog')}}
+		    	</a>
+		    </div>
+	    </div>
+	  </div>
+
+	 
+	</div>
+</template>
+
+
+<script setup>
+	import { ref, onMounted } from 'vue'
+	import { useI18n } from 'vue-i18n'
+
+
+	const props = defineProps({
+		content: {
+			type: Object
+		},
+		options: {
+			type: Object
+		}
+	})
+
+
+	
+	const { t } = useI18n({ 
+		messages: {
+		  en:{
+		    "nye2024":{
+		      "title":"Explore our exclusive party archive",
+		      "titleTicket":"Are you ready?",
+		      "description":"Experience the ultimate party vibe at The Commune! Elevate your evening with distinctive and exhilarating activities, ensuring an unforgettable time. Dive into the excitement and make every moment special.",
+		      "checkinblog":"CHECK IN INSTAGRAM",
+		      "buyticket": "Buy Ticket Now →"
+		    }
+		  }
+		}
+	})
+
+	const videoElement = ref(null)
+
+	var isPlaying = false;
+
+	function	checkAndPlayVideo() {
+    // Initializing values
+
+		// On video playing toggle values
+		videoElement.value.onplaying = function() {
+		  isPlaying = true;
+		};
+
+		// On video pause toggle values
+		videoElement.value.onpause = function() {
+		  isPlaying = false;
+		};	
+  }
+
+  // Play video function
+	async function playVid() {      
+    if (videoElement.value.paused && !isPlaying) {
+      return videoElement.value.play();
+    }
+	} 
+
+	function clickBuyTicket () {
+		gtag('event', 'buy_ticket', {
+	    'event_category': 'conversion',
+	    'event_label': 'Buy Ticket'
+	  });
+
+	  window.open(props.options?.link);
+
+	}
+  
+	onMounted(() => {
+		checkAndPlayVideo()
+		playVid()
+	})
+</script>
+
+<style lang="scss">
+</style>

package/src/modules/events/components/sections/SectionSpecialGuests.vue

@@ -0,0 +1,47 @@
+<template>
+
+  	<div class="o-hidden bg-black-transp-15 bg-blur-extra t-white pos-relative radius-big gap-zero pos-relative">
+  		<!-- <h3>Event Crew</h3> -->
+  		<h3 class="t-center w-100 pd-small br-b br-white-transp-20 br-solid">{{content?.title}}</h3>
+	   	
+	   	<div style="max-height: 100%"  class="cols-1 gap-semi">
+		    <div class="pd-medium br-solid" :class="{'br-solid br-b br-white-transp-10': index < content?.guests.length - 1}" v-for="(item, index) in content?.guests">
+			    <div class="o-hidden mn-b-semi bg-black radius-big h-4r w-4r  pos-relative">
+			    	<img class="w-100 h-100 object-fit-cover" :src='item.photo'>
+			    </div>
+
+		    	<h4 class="d-block uppercase mn-b-small t-semi">{{item.name}}</h4>
+		    	<span class="t-semi mn-b-small d-block uppercase t-main">{{item.time}}</span>
+
+		    	<p class="t-transp  mn-b-semi p-medium">{{item.description}}</p>
+
+		    	<Socials
+		    		v-if="item?.socials"
+			    	:telegram="item?.socials?.telegram"
+		     		:facebook="item?.socials?.facebook"
+		     		:instagram="item?.socials?.instagram"
+		     		:twitter="item?.socials?.twitter"
+			    />
+
+		   
+				</div>
+	    </div>
+  	</div>
+</template>
+
+
+<script setup>
+	import { useI18n } from 'vue-i18n'
+
+	import { Socials } from '@ozdao/prometheus-framework/modules/organizations/client'
+
+	const props = defineProps({
+		content: {
+			type: Object
+		}
+	})
+
+</script>
+
+<style lang="scss">
+</style>

package/src/modules/events/controllers/events.controller.js

@@ -90,6 +90,7 @@ const middlewareFactory = (db) => {
   };
 
   const update = async (req, res) => {
+    console.log(req.body)
     try {
       const event = await Event.findOneAndUpdate({ url: req.body.url }, { $set: req.body }, { new: true }).exec();
       if (!event) {

package/src/modules/events/controllers/utils/queryProcessor.js

@@ -180,6 +180,8 @@ function getProjectStage() {
       date: 1,
       numberOfTickets: 1,
       participantsPhotos: 1,
+      special: 1,
+      specialData: 1,
       hasTicket: 1,
       tickets: 1,
       createdAt: 1