@ozdao/prometheus-framework 0.2.32 → 0.2.34

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ozdao/prometheus-framework",
-  "version": "0.2.32",
+  "version": "0.2.34",
   "description": "Web3 Framework focused on user experience and ease of development.",
   "author": "OZ DAO <hello@ozdao.dev>",
   "license": "GPL-3.0-or-later",

package/src/components/Countdown/Countdown.vue

@@ -0,0 +1,75 @@
+<template>
+  <div class="gap-thin flex-nowrap flex flex-center">
+    <div v-if="isTimeOver" class="flex-child-grow-1  flex-child-shrink-0 flex-child-basis-auto pd-medium bg-blur-small bg-white-transp-5 radius-small">
+      <p class="p-small t-transp">Offer is over</p>
+    </div>
+
+    <div  v-if="!isTimeOver" class="flex-child-grow-1  flex-child-shrink-0 flex-child-basis-auto pd-nano bg-blur-small bg-white-transp-5 radius-small">
+    	<p class="p-big">{{ days }}</p>
+    	<p class="p-small t-transp">Days</p>
+    </div>
+     <div  v-if="!isTimeOver" class="flex-child-grow-1  flex-child-shrink-0 flex-child-basis-auto pd-nano bg-blur-small bg-white-transp-5 radius-small">
+    	<p class="p-big">{{ hours }}</p>
+    	<p class="p-small t-transp">hours</p>
+    </div>
+     <div  v-if="!isTimeOver" class="flex-child-grow-1  flex-child-shrink-0 flex-child-basis-auto pd-nano bg-blur-small bg-white-transp-5 radius-small">
+    	<p class="p-big">{{ minutes }}</p>
+    	<p class="p-small t-transp">minutes</p>
+    </div>
+     <div  v-if="!isTimeOver" class="flex-child-grow-1  flex-child-shrink-0 flex-child-basis-auto pd-nano bg-blur-small bg-white-transp-5 radius-small">
+    	<p class="p-big">{{ seconds }}</p>
+    	<p class="p-small t-transp">seconds</p>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted, onBeforeUnmount } from 'vue';
+
+const props = defineProps([
+  'content',
+  'options'
+])
+
+const targetDate = new Date(props.options?.date || 'January 13, 2024 16:00:00').getTime();
+const currentDate = ref(new Date().getTime());
+
+let interval;
+
+const days = ref(0);
+const hours = ref(0);
+const minutes = ref(0);
+const seconds = ref(0);
+
+const isTimeOver = ref(false);
+
+const calculateTime = () => {
+  const timeDifference = targetDate - currentDate.value;
+
+  if (timeDifference <= 0) {
+    // Target date has passed, set all values to 0
+    days.value = 0;
+    hours.value = 0;
+    minutes.value = 0;
+    seconds.value = 0;
+    isTimeOver.value = true
+    clearInterval(interval);
+  } else {
+    days.value = Math.floor(timeDifference / (1000 * 60 * 60 * 24));
+    hours.value = Math.floor((timeDifference % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
+    minutes.value = Math.floor((timeDifference % (1000 * 60 * 60)) / (1000 * 60));
+    seconds.value = Math.floor((timeDifference % (1000 * 60)) / 1000);
+  }
+};
+
+onMounted(() => {
+  interval = setInterval(() => {
+    currentDate.value = new Date().getTime();
+    calculateTime();
+  }, 1000);
+});
+
+onBeforeUnmount(() => {
+  clearInterval(interval);
+});
+</script>

package/src/components/EditImages/EditImages.vue

@@ -29,8 +29,10 @@
 		<UploadImageMultiple 	
       v-if="localImages.length < 1" 
       @update:images="onImagesUpdate"
-      :uploadPath="'photos'"
-      class="w-100 radius-medium pd-extra bg-white"
+      :uploadPath="props.uploadPath"
+      :text="props.text"
+      :options="props.options"
+      class="w-100 pd-extra"
     />
 	</div>	
 </template>
@@ -43,6 +45,12 @@ import IconCross from '@pf/src/modules/icons/navigation/IconCross.vue';
 
 const props = defineProps({
   images: Array,
+  text: Object,
+  options: Object,
+  uploadPath: {
+    type: Object,
+    default: 'unsorted'
+  }
 });
 
 const emit = defineEmits(['update:images'])

package/src/components/Upload/Upload.vue

@@ -1,13 +1,21 @@
 <template>
   <div :class="[$attrs.class, { 'bg-fourth-nano': validation }]" class="flex-center flex-nowrap flex">
-          {{fileURL}}
-
     <!-- Label -->
     <div v-if="label" class="t-transp mn-r-small">
       <span>{{label}}</span>
     </div>
 
-    <div class="w-100">
+    <div v-if="fileURL" class="flex-nowrap flex w-100  flex-v-center">
+      <a :href="fileURL" class="w-100" target="_blank">{{ fileURL }}</a>
+
+      <IconCross  
+        @click="removeFile" 
+        class="cursor-pointer  t-center flex-center flex radius-extra i-medium bg-red pd-micro"
+      />
+
+    </div>
+
+    <div v-else class="w-100">
       <!-- Input / File -->
       <input 
         @change="onFileChange"
@@ -30,25 +38,36 @@
 </template>
 
 <script setup>
-import { ref, computed,} from 'vue'
+import { ref, computed, watch} from 'vue'
 import axios from 'axios';
 
+import IconCross from '@pf/src/modules/icons/navigation/IconCross.vue';
+
 const emit = defineEmits(['update:field', 'focus', 'blur', 'file-change']);
 
 const props = defineProps({
+  field: String,
   label: null,
   type: 'file',
   placeholder: 'Upload a file',
   validation: false,
+  uploadPath: {
+    type: String,
+    default: '/files'
+  },
   multiple: {
     type: Boolean,
     default: false
   }
 });
 
-const fileURL = ref(null);
+const fileURL = ref(props.field);
 const fileInput = ref(null);
 
+watch(() => props.field, (newValue) => {
+  fileURL.value = newValue;
+});
+
 // Handles file change event
 
 async function onFileChange(e) {
@@ -67,12 +86,19 @@ async function onFileChange(e) {
       }
     });
 
-    fileURL.value = response.data.filepath;
+    console.log(response.data)
+    fileURL.value = response.data[0].filepath;
     emit('file-change', fileURL.value);
   } catch (error) {
     console.error(error);
   }
 }
+
+const removeFile = () => {
+  fileURL.value = null;
+  emit('update:field', null); // Обновляем значение, связанное с v-model:field
+  emit('file-change', null); // Посылаем событие об изменении файла
+};
 </script>
 
 <style lang="scss" scoped>

package/src/components/UploadImage/UploadImage.vue

@@ -17,7 +17,7 @@
         </svg>
       </div>
       
-      <input type="file" ref="fileInput" @change="onFileChange" style="display: none"/>
+      <input type="file" name="file" ref="fileInput" @change="onFileChange" style="display: none"/>
   </div>
 </template>
 
@@ -45,25 +45,29 @@ function onComponentClick() {
 
 async function onFileChange(e) {
   let file = e.target.files[0];
+  if (!file) {
+    console.error("No file selected");
+    return;
+  }
+  
   let formData = new FormData();
-
   formData.append("file", file);
 
+  console.log("Sending file:", file.name); // Логируем имя файла перед отправкой
+
   try {
     const $axios = axios.create({ baseURL: process.env.API_URL, withCredentials: true }); 
 
-    let response = await $axios.post(`/api/upload/multiple?folderName=${encodeURIComponent(props.uploadPath)}`, formData, {
-      headers: {
-        "Content-Type": "multipart/form-data"
-      }
-    });
+    let response = await $axios.post(`/api/upload/multiple?folderName=${encodeURIComponent(props.uploadPath)}`, formData);
+    console.log("Upload response:", response); // Логируем ответ сервера
     imageUrl.value = response.data[0].filepath;
     emit('update:photo', imageUrl.value);
   } catch (error) {
-    console.error(error);
+    console.error("Upload error:", error); // Логируем ошибку
   }
 }
 
+
 function onDrop(e) {
   e.preventDefault();
   onFileChange({

package/src/components/UploadImageMultiple/UploadImageMultiple.vue

@@ -13,7 +13,7 @@
           fill="rgb(var(--main))"
         />
 
-        <span v-if="options.showText" class="mn-t-thin  mn-b-thin d-block h3 t-black">{{ text.title }}</span>
+        <span v-if="options.showText || options.showTitle" class="mn-t-thin  mn-b-thin d-block h3 t-black">{{ text.title }}</span>
         <span v-if="options.showText" class="mn-b-thin t-transp d-block ">{{ text.subtitle }}</span>
         <span  v-if="options.showText"class="mn-b-thin uppercase p-small t-medium d-block">or</span>
 
@@ -50,7 +50,8 @@ const props = defineProps({
     default: () => ({
       mimeType: ['jpg', 'png', 'gif'],
       maxSize: 10 * 1024 * 1024,
-      showText: true
+      showText: true,
+      showTitle: true
     })
   },
   text: {
@@ -78,6 +79,7 @@ async function onFileChange(e) {
     formData.append("file", file);
   }
 
+
   try {
     const $axios = axios.create({ baseURL: process.env.API_URL, withCredentials: true }); 
 

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,10 +21,302 @@
       class="mn-b-semi w-100 bg-grey pd-medium radius-small" 
     />
 
+  
+    <h3
+      v-if="(auth.state.access.roles) && (auth.state.access.roles.includes('ROLE_MODERATOR') || auth.state.access.roles.includes('ROLE_ADMIN'))"
+      class="mn-b-small"
+    >
+        Special Details
+    </h3>
+
+
+    <Checkbox 
+      v-if="(auth.state.access.roles) && (auth.state.access.roles.includes('ROLE_MODERATOR') || auth.state.access.roles.includes('ROLE_ADMIN'))"
+      :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
+        "
+      />
+
+      <h5
+        class="mn-b-thin"
+      >
+        Video in Previous Partys Section
+      </h5>
+
+      <Upload 
+        v-model:field="event.specialData.previousVideo"
+        :placeholder="'Upload image'" 
+        @file-change="(videoURL) => event.specialData.previousVideo = 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" />
 
-
     <h3 class="mn-b-small">Description</h3>
 		<section v-if="event" class="pd-b-extra w-100 bg-grey pd-big radius-big">
       <Constructor 
@@ -87,14 +379,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 +418,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 +525,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 } });