@ozdao/prometheus-framework 0.2.31 → 0.2.33

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

@@ -3,7 +3,7 @@
   	<div class="mn-b-thin radius-small w-100 h-10r bg-grey flex-center flex-column flex">
      	<UploadImage 
         v-model:photo="event.cover"
-        :uploadPath="'users/' +  auth.state.user._id + '/events'"
+        :uploadPath="'specials'"
         class="h-4r w-4r aspect-1x1 o-hidden mn-b-thin radius-extra" 
       />
       <h4>Upload Event Cover</h4>
@@ -21,6 +21,281 @@
       class="mn-b-semi w-100 bg-grey pd-medium radius-small" 
     />
 
+  
+    <h3
+     
+      class="mn-b-small"
+    >
+        Special Details
+    </h3>
+
+
+    <Checkbox 
+      :label="'Special'"
+      :radio="event.special"
+      @update:radio="updateEvent => event.special = !event.special"
+      class="mn-b-semi w-100 bg-black t-white pd-medium radius-small"
+    />
+
+    <div 
+      v-if="event.special"
+      class="mn-b-semi"
+    >
+      <h4
+        class="mn-b-thin"
+      >
+          Hero Section
+      </h4>
+
+      <Field 
+        v-model:field="event.specialData.subtitle" 
+        placeholder="Event subtitle" 
+        class="mn-b-thin w-100 bg-grey pd-medium radius-small" 
+      />
+
+      <EditImages 
+        :images="event.specialData.logos"
+        :uploadPath="'/specials'" 
+        :text="{
+          title: 'Drag & Drop Your Logos Here',
+          subtitle: 'Files supported: JPG, PNG, GIF'
+        }"
+        :options="{
+          showTitle: true,
+          showText: false
+        }"
+        @update:images="(newImages) => event.specialData.logos = newImages"  
+        class="mn-b-thin bg-grey radius-small"
+      />
+       <h5
+        class="mn-b-thin"
+      >
+          Video in Hero Section
+      </h5>
+      <Upload 
+        v-model:field="event.specialData.video"
+        :placeholder="'Upload video'" 
+        @file-change="(videoURL) => event.specialData.video = videoURL"
+        uploadPath="specials"
+        type="file"   
+        class="
+          mn-b-thin w-100 bg-grey pd-medium radius-small t-black
+        "
+      />
+
+      <h5
+        class="mn-b-thin"
+      >
+        Ticket
+      </h5>
+
+      <div 
+        class="mn-b-small gap-small cols-2-fit-content" 
+      > 
+        <UploadImage 
+          v-model:photo="event.specialData.ticketImage"
+          :uploadPath="'/specials'"
+          class="aspect-1x1 w-4r o-hidden radius-extra" 
+        />
+
+        <div class="gap-thin flex-nowrap flex w-100">
+          <Field 
+            v-model:field="event.specialData.ticketLinkStripe" 
+            placeholder="Link to ticket stripe payment page" 
+            class="mn-b-thin w-100 bg-grey pd-medium radius-small" 
+          />
+          <Field 
+            v-model:field="event.specialData.ticketPrice" 
+            type="number"
+            placeholder="Ticket price in baht" 
+            class="mn-b-thin w-100 bg-grey pd-medium radius-small" 
+          />
+
+          
+        </div>
+      </div>
+
+      <hr class="bg-black-transp-10 mn-b-semi mn-t-semi d-block">
+
+      <h4
+        class="mn-b-thin"
+      >
+          Guest Section
+      </h4>
+
+      <Field 
+        v-model:field="event.specialData.titleMainGuest" 
+        placeholder="Title for Main Guest section" 
+        class="mn-b-thin w-100 bg-grey pd-medium radius-small" 
+      />
+
+      <Field 
+        v-model:field="event.specialData.guestDescription" 
+        placeholder="Description for Main Guest section" 
+        class="mn-b-thin w-100 bg-grey pd-medium radius-small" 
+      />
+
+      <div class="gap-thin cols-3">
+        
+        <Field 
+          v-model:field="event.specialData.guestFacebook" 
+          placeholder="Facebook of Main Guest" 
+          class="mn-b-thin w-100 bg-grey pd-medium radius-small" 
+        />
+
+        <Field 
+          v-model:field="event.specialData.guestInstagram" 
+          placeholder="Instagram of Main Guest" 
+          class="mn-b-thin w-100 bg-grey pd-medium radius-small" 
+        />
+
+        <Field 
+          v-model:field="event.specialData.guestTwitter" 
+          placeholder="Twitter of Main Guest" 
+          class="mn-b-thin w-100 bg-grey pd-medium radius-small" 
+        />
+
+
+        <Field 
+          v-model:field="event.specialData.guestTelegram" 
+          placeholder="Telegram of Main Guest" 
+          class="mn-b-thin w-100 bg-grey pd-medium radius-small" 
+        />
+
+        <Field 
+          v-model:field="event.specialData.guestSoundcloud" 
+          placeholder="Link to Main Guest soundcloud track" 
+          class="mn-b-thin w-100 bg-grey pd-medium radius-small" 
+        />
+
+        <Field 
+          v-model:field="event.specialData.guestSpotify" 
+          placeholder="Link to Main guest spotify track" 
+          class="mn-b-thin w-100 bg-grey pd-medium radius-small" 
+        />
+      </div>
+
+      <h5
+        class="mn-b-thin"
+      >
+          Video in Guests Section
+      </h5>
+
+      <Upload 
+        v-model:field="event.specialData.guestVideo"
+        :placeholder="'Upload video'" 
+        @file-change="(videoURL) => event.specialData.guestVideo = videoURL"
+        uploadPath="/specials"
+        type="file"   
+        class="
+          mn-b-thin w-100 bg-grey pd-medium radius-small t-black
+        "
+      />
+
+      <Block
+        title="Guests"
+        placeholder="No guests added yet"
+        :actions="[{
+          label: '+',
+          function: () => event.specialData.guests.push({name: null, description: null, photo: null, main: false})
+        }]"
+        class="cols-1 mn-b-thin  t-black gap-thin"
+      >
+        <div 
+          class="mn-b-small gap-small cols-2-fit-content" 
+          v-for="(item, index) in event.specialData.guests" 
+          :key="index"
+        > 
+          <UploadImage 
+            v-model:photo="item.photo"
+            :uploadPath="'/specials'"
+            class="aspect-1x1 w-8r o-hidden radius-extra" 
+          />
+
+          <div class="gap-thin flex-nowrap flex w-100">
+            <div class="w-100">
+              <Field
+                v-model:field="item.name"
+                placeholder="Name"
+                class="w-100 mn-b-thin bg-white radius-small pd-medium"
+              />  
+              <Field
+                v-model:field="item.description"
+                placeholder="Description"
+                class="w-100 mn-b-thin bg-white radius-small pd-medium"
+              />
+            </div>
+            <div class="radius-small h-100 i-big flex-center flex aspect-1x1 bg-red">
+              <IconDelete 
+                @click="() => event.specialData.guests.splice(index, 1)" 
+                class="i-medium"
+              />
+            </div>
+          </div>
+        </div>
+      </Block>
+
+      <hr class="bg-black-transp-10 mn-b-semi mn-t-semi d-block">
+
+      <h4
+        class="mn-b-thin"
+      >
+        Lineup Section
+      </h4>
+
+      <Block
+        title="Line Up"
+        placeholder="No line ups added yet"
+        :actions="[{
+          label: '+',
+          function: () => event.specialData.lineup.push({name: null, description: null, photo: null, main: false})
+        }]"
+        class="cols-1 t-black gap-thin"
+      >
+        <div 
+          class="mn-b-thin gap-small flex-nowrap flex" 
+          v-for="(item, index) in event.specialData.lineup" 
+          :key="index"
+        > 
+          <Field
+            v-model:field="item.name"
+            placeholder="Name"
+            class="w-100  bg-grey radius-small pd-medium"
+          />  
+          <Field
+            v-model:field="item.time"
+            placeholder="Time"
+            class="w-100  bg-grey radius-small pd-medium"
+          />
+          <div class="radius-small h-100 i-big flex-center flex aspect-1x1 bg-red">
+            <IconDelete 
+              @click="() => event.specialData.lineup.splice(index, 1)" 
+              class="i-medium"
+            />
+          </div>
+        </div>
+      </Block>
+
+      <h5
+        class="mn-b-thin"
+      >
+          Background in Lineup Section
+      </h5>
+
+      <Upload 
+        v-model:field="event.specialData.lineupBackground"
+        :placeholder="'Upload image'" 
+        @file-change="(videoURL) => event.specialData.lineupBackground = videoURL"
+        uploadPath="/specials"
+        type="file"   
+        class="
+          mn-b-thin w-100 bg-grey pd-medium radius-small t-black
+        "
+      />
+
+
+    </div>
+
 		<h3 class="mn-b-small">Date</h3>
     <VueDatePicker v-model="date" :alt-position="customPosition" range class="mn-b-semi" />
 
@@ -33,6 +308,8 @@
       />
     </section>
 
+   
+
     <section v-if="event" class="pd-thin pos-sticky pos-l-0 pos-b-0 w-100 ">
       <div class="pd-thin radius-big  bg-main w-100 flex-nowrap flex">
         <a v-if="route.params.url" @click="onDelete()" class="mn-r-auto bg-red t-white t-black button">Delete</a>
@@ -87,14 +364,20 @@ import Constructor from '@pf/src/modules/constructor/components/sections/Constru
 import VueDatePicker from '@vuepic/vue-datepicker';
 import '@vuepic/vue-datepicker/dist/main.css'
 
+import Block from '@pf/src/components/Block/Block.vue';
 import Popup from '@pf/src/components/Popup/Popup.vue';
 import Field         from '@pf/src/components/Field/Field.vue'
 import BlockTags from '@pf/src/components/FieldTags/BlockTags.vue';
 import Checkbox from '@pf/src/components/Checkbox/Checkbox.vue';
 import SelectMulti from '@pf/src/components/SelectMulti/SelectMulti.vue';
+import Upload  from '@pf/src/components/Upload/Upload.vue';
 import UploadImage   from '@pf/src/components/UploadImage/UploadImage.vue';
+import EditImages           from '@pf/src/components/EditImages/EditImages.vue';
 import Button from '@pf/src/components/Button/Button.vue';   
 
+
+  import IconDelete from '@pf/src/modules/icons/navigation/IconDelete.vue';
+
 import { ref, onMounted } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 
@@ -120,8 +403,11 @@ onMounted(async () =>{
   
   if (route.params.url) {
     const data = await events.read({ user: auth.state.user._id, url: route.params.url });
+
     event.value = data.pop();
 
+    console.log(event.value)
+
     const startDate = event.value.date.start;
     const endDate = event.value.date.end;
 
@@ -224,6 +510,7 @@ function onSubmit() {
 
   console.log(date.value)
   if (route.params.url) {
+    console.log(event.value)
     events.update(event.value)
       .then(response => {
         router.push({ name: 'Event', params: { url: response.url } });

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

@@ -20,54 +20,126 @@
 
 
     <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,
+        }"
+      />
+      <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,
+        }"
+      />
+
+      <section 
+        v-if="!isLoading && event && event.special"
+        :style="`
+          background-image: url(${event.specialData.lineupBackground}); 
+          background-size: 100%; background-repeat: no-repeat;
+        `" 
+        class="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
+          }"
+        />
+    </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 +148,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>