@ozdao/prometheus-framework 0.2.30 → 0.2.32

package/src/modules/products/components/sections/FilterProducts.vue

@@ -1,15 +1,12 @@
   <template>
     <div class="pd-medium bg-grey radius-big">
-      <h3 class="mn-b-small">{{ t('filters.title') }}</h3>
-      <hr class="mn-b-small">
-
       <!-- Categories Filter -->
       <Spoiler 
         class="radius-small o-hidden br-1px br-solid br-grey mn-b-small"
         :status="true"
       >
         <template #header>
-          <p class="mn-r-auto t-medium p-big">{{ t('categoriesTitle') }}</p>
+          <p class="cursor-pointer mn-r-auto t-medium p-big">{{ t('categoriesTitle') }}</p>
           <!-- SVG Icon -->
         </template>
         <template #content>
@@ -19,8 +16,8 @@
             :label="category.name"
             :value="category.url"
             class="w-100 mn-t-small mn-b-small bg-white radius-small pd-small"
-            :radio="selectedFilters.categories"
-            @change="emitFilterChange('categories', category.url)"
+            :radio="marketplace.state.filter.categories"
+            @update:radio="event => marketplace.state.filter.categories = event"
           />
         </template>
       </Spoiler>
@@ -33,7 +30,7 @@
         :status="false"
       >
         <template #header>
-          <p class="mn-r-auto t-medium p-big">{{ t('filters.price.title') }}</p>
+          <p class="cursor-pointer  mn-r-auto t-medium p-big">{{ t('filters.price.title') }}</p>
           <!-- SVG Icon -->
         </template>
         <template #content>
@@ -43,8 +40,8 @@
             :label="price.label"
             :value="price.value"
             class="w-100 mn-t-small bg-white radius-small pd-small"
-            :radio="selectedFilters.prices"
-            @change="emitFilterChange('prices', price.value)"
+            :radio="marketplace.state.filter.prices"
+          @update:radio="event => marketplace.state.filter.prices = event"
           />
         </template>
       </Spoiler>
@@ -57,7 +54,7 @@
         :status="false"
       >
         <template #header>
-          <p class="mn-r-auto t-medium p-big">Delivery</p>
+          <p class="cursor-pointer  mn-r-auto t-medium p-big">Delivery</p>
           <!-- SVG Icon -->
         </template>
         <template #content>
@@ -67,8 +64,8 @@
             :label="deliveryOption.label"
             :value="deliveryOption.value"
             class="w-100 mn-t-small bg-white radius-small pd-small"
-            :radio="selectedFilters.delivery"
-            @change="emitFilterChange('delivery', deliveryOption.value)"
+            :radio="marketplace.state.filter.delivery"
+            @update:radio="event => marketplace.state.filter.delivery = event"
           />
         </template>
       </Spoiler>
@@ -81,14 +78,19 @@
   </template>
 
 <script setup>
-import { ref, watch } from 'vue'
+import { ref, watch, onMounted } from 'vue'
 
 import Spoiler from "@pf/src/components/Spoiler/Spoiler.vue"
 import Checkbox from "@pf/src/components/Checkbox/Checkbox.vue"
 
 import { useI18n } from 'vue-i18n'
+import { useRoute, useRouter,onBeforeRouteLeave } from 'vue-router'
+
+const route = useRoute()
+const router = useRouter()
 
 import * as categories from '@pf/src/modules/products/store/categories';
+import * as marketplace from '@pf/src/modules/marketplace/store/marketplace';
 
 await categories.actions.fetchCategories()
 
@@ -105,11 +107,11 @@ const props = defineProps({
   prices: {
     type: Array,
     default: () => [
-      { label: 'Under $5', value: { min: 0, max: 5 } },
-      { label: '$5 to $10', value: { min: 5, max: 10 } },
-      { label: '$10 to $20', value: { min: 10, max: 20 } },
-      { label: '$20 and above', value: { min: 20, max: Infinity } }
-    ]
+    { label: 'Under 300฿',        value: '<300' },
+    { label: '300฿ to 600฿',      value: '300-600' },
+    { label: '600฿ to 1200฿',     value: '600-1200' },
+    { label: '$1200 and above',   value: '>1200' }
+  ]
   },
   deliveryOptions: {
     type: Array,
@@ -121,6 +123,42 @@ const props = defineProps({
   }
 })
 
+watch(() => marketplace.state.filter, (newFilterValue, oldFilterValue) => {
+  // Переводим фильтр в формат query
+  const query = { ...route.query };
+
+  // Удаляем старые значения фильтра из query
+  Object.keys(oldFilterValue).forEach(key => {
+    if (query[key]) {
+      delete query[key];
+    }
+  });
+
+  // Добавляем новые значения фильтра в query
+  const newQueryValues = Object.fromEntries(
+    Object.entries(newFilterValue)
+      .filter(([key, value]) => Array.isArray(value) && value.length > 0)
+      .map(([key, value]) => [key, value.join(',')])
+  );
+  Object.assign(query, newQueryValues);
+
+  // Обновляем маршрут с новым query
+  router.push({ query });
+}, { deep: true })
+
+onMounted(async () => {
+  if (route.query) {
+    const query = route.query;
+    const newFilterValue = {
+      categories: query.categories ? query.categories.split(',') : [],
+      prices: query.prices ? query.prices.split(',') : [],
+      delivery: query.delivery ? query.delivery.split(',') : [],
+      // Продолжайте этот паттерн для остальных полей фильтра
+    };
+    marketplace.state.filter = newFilterValue;
+  }
+})
+
 const emit = defineEmits(['updateFilters', 'resetFilters'])
 
 const emitFilterChange = (filterType, value) => {

package/src/modules/products/components/sections/HeroRecommendation.vue

@@ -1,50 +1,5 @@
-<i18n>
-{
-  "en": {
-    "title": "Increase Your High,<br><b class='t-main'>Powered by AI Budtender</b>",
-    "description": "AI at the helm of your chill, bro. We tailor the most cosmic weed products to your desired vibe!",
-    "placeholderTexts": [
-    	'I want lowest THC',
-    	'I want something with banana',
-    	'I want to smoke haze'
-    ],
-    "subdescription": "Or, select a tag, and our AI will guide you to the dopest selections:",
-    "presets": {
-      "sleep": "sleep",
-      "creative": "creative",
-      "giggly": "giggly",
-      "libido": "libido",
-      "trippy": "trippy",
-      "euphoric": "euphoric"
-    },
-    "placeholder": "Describe your desired high, bro...",
-    "action": "Transmit&nbsp→"
-  },
-  "ru": {
-    "title": "Персональный Накур,<br><b class='t-main'>Напрямую от AI</b>",
-    "description": "AI на страже твоего релакса, бро. Мы подбираем самые космические товары с учетом твоего желаемого настроения:",
-    "placeholderTexts": [
-    	'Я хочу самый низкий THC',
-    	'Я хочу чего-нибудь бананового',
-    	'Я хочу курнуть хейза'
-    ],
-   	 "presets": {
-      "sleep": "сон",
-      "creative": "креатив",
-      "giggly": "смех",
-      "libido": "либидо",
-      "trippy": "трип",
-      "euphoric": "кайф"
-    },
-    "subdescription": "Или выберите тег, и наш AI направит тебя к самым крутым вариантам:",
-    "placeholder": "Опиши свой желаемый хай, bro...",
-    "action": "Передать&nbsp→"
-  }
-}
-</i18n>
-
 <script setup>
-	import { ref } from 'vue'
+	import { ref, onMounted } from 'vue'
 
 	import FieldBig from "@pf/src/components/FieldBig/FieldBig.vue";
 
@@ -55,10 +10,52 @@
 
 	const router = useRouter()
 
-	const { t } = useI18n({
-    inheritLocale: true,
-    useScope: 'local'
-  })
+	const text = {
+    messages: {
+      "en": {
+		    "title": "Unlock Your Perfect High <br><b class='t-main'> with AI Budtender</b>",
+		    "description": "Say goodbye to endless browsing. Just tell us what you're want, and Weeder will find your ideal match.",
+		    "placeholderTexts": [
+		    	'Lowest THC, please!',
+		    	'Something with banana flavors?',
+		    	"I'm in the mood for trippy vibes."
+		    ],
+		    "subdescription": "AI Curated Recommendations for Your Mood:",
+		    "presets": {
+		      "sleep": "sleep",
+		      "creative": "creative",
+		      "giggly": "giggly",
+		      "libido": "libido",
+		      "trippy": "trippy",
+		      "euphoric": "euphoric"
+		    },
+		    "placeholder": "Tell us what you're after...",
+		    "action": "Transmit&nbsp→"
+		  },
+		  "ru": {
+		    "title": "Персональный Накур,<br><b class='t-main'>Напрямую от AI</b>",
+		    "description": "AI на страже твоего релакса, бро. Мы подбираем самые космические товары с учетом твоего желаемого настроения:",
+		    "placeholderTexts": [
+		    	'Я хочу самый низкий THC',
+		    	'Я хочу чего-нибудь бананового',
+		    	'Я хочу курнуть хейза'
+		    ],
+		   	 "presets": {
+		      "sleep": "сон",
+		      "creative": "креатив",
+		      "giggly": "смех",
+		      "libido": "либидо",
+		      "trippy": "трип",
+		      "euphoric": "кайф"
+		    },
+		    "subdescription": "Или выберите тег, и наш AI направит тебя к самым крутым вариантам:",
+		    "placeholder": "Опиши свой желаемый хай, bro...",
+		    "action": "Передать&nbsp→"
+		  }
+		}	
+	}
+
+	const { t, rt } = useI18n(text)
 
 	let mood = ref('')
 
@@ -68,6 +65,165 @@
 		const moodToSend = presetMood || mood.value;
 		await products.actions.submitMood(moodToSend);
 	}
+
+	onMounted(() => {
+  //   const canvas = document.getElementById('glcanvas');
+  //   const gl = canvas.getContext('webgl') || canvas.getContext('experimental-webgl');
+
+  //   const vsSource = `
+	//     attribute vec4 aVertexPosition;
+	//     void main() {
+	//       gl_Position = aVertexPosition;
+	//     }
+	// 	`;
+
+	// 	// Fragment shader (your GLSL code goes here)
+	// 	const fsSource = `
+	//     precision mediump float;
+
+	// 		const float PI = 3.14159265358979323846264;
+	// 		const float TWOPI = PI * 2.0;
+	// 		const vec4 WHITE = vec4(0.05, 0.05, 0.05, 1); // Для цвета F6F9F7
+	// 		const vec4 BLACK = vec4(0.0, 0.0, 0.0, 1); // Для цвета EBF2ED
+
+	// 		const int MAX_RINGS = 30;
+	// 		const float RING_DISTANCE = 0.03;
+	// 		const float WAVE_COUNT = 60.0;
+	// 		const float WAVE_DEPTH = 0.08;
+
+	// 		uniform float iTime;
+	// 		uniform vec2 iResolution;
+
+	// 		void main() {
+	// 		    float rot = mod(iTime * 0.6, TWOPI);
+	// 		    vec2 fragCoord = gl_FragCoord.xy;
+	// 		    vec2 pos = vec2(fragCoord.x / iResolution.x, fragCoord.y / iResolution.y);
+	// 		    pos = vec2(3.0 * (pos.x - 0.5), 3.0 * (pos.y - 0.4));
+	// 		    float x = pos.x;
+	// 		    float y = pos.y;
+
+	// 		    bool black = false;
+	// 		    float prevRingDist = RING_DISTANCE;
+	// 		    for (int i = 0; i < MAX_RINGS; i++) {
+	// 		        vec2 center = vec2(0.0, 0.7 - RING_DISTANCE * float(i) * 1.2);
+	// 		        float radius = 0.5 + RING_DISTANCE / (pow(float(i + 5), 1.1) * 0.006);
+	// 		        float dist = distance(center, pos);
+	// 		        dist = pow(dist, 0.3);
+	// 		        float ringDist = abs(dist - radius);
+	// 		        if (ringDist < RING_DISTANCE * prevRingDist * 7.0) {
+	// 		            float angle = atan(y - center.y, x - center.x);
+	// 		            float thickness = 1.1 * abs(dist - radius) / prevRingDist;
+	// 		            float depthFactor = WAVE_DEPTH * sin((angle + rot * radius) * WAVE_COUNT);
+	// 		            if (dist > radius) {
+	// 		                black = (thickness < RING_DISTANCE * 5.0 - depthFactor * 2.0);
+	// 		            } else {
+	// 		                black = (thickness < RING_DISTANCE * 5.0 + depthFactor);
+	// 		            }
+	// 		            break;
+	// 		        }
+	// 		        if (dist > radius) break;
+	// 		        prevRingDist = ringDist;
+	// 		    }
+
+	// 		    gl_FragColor = black ? BLACK : WHITE;
+	// 		}
+
+	// 	`;
+
+	// 	function compileShader(gl, type, source) {
+	// 	    const shader = gl.createShader(type);
+	// 	    gl.shaderSource(shader, source);
+	// 	    gl.compileShader(shader);
+
+	// 	    // Check for compilation errors
+	// 	    if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
+	// 	        alert('An error occurred compiling the shaders: ' + gl.getShaderInfoLog(shader));
+	// 	        gl.deleteShader(shader);
+	// 	        return null;
+	// 	    }
+
+	// 	    return shader;
+	// 	}
+
+	// 	const vertexShader = compileShader(gl, gl.VERTEX_SHADER, vsSource);
+	// 	const fragmentShader = compileShader(gl, gl.FRAGMENT_SHADER, fsSource);
+
+	// 	// Create the shader program
+	// 	const shaderProgram = gl.createProgram();
+
+	// 	gl.attachShader(shaderProgram, vertexShader);
+	// 	gl.attachShader(shaderProgram, fragmentShader);
+	// 	gl.linkProgram(shaderProgram);
+
+	// 	// Check for linking errors
+	// 	if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {
+	// 	    alert('Unable to initialize the shader program: ' + gl.getProgramInfoLog(shaderProgram));
+	// 	}
+
+	// 	function resizeCanvasToDisplaySize(canvas) {
+  //       const width = canvas.clientWidth * window.devicePixelRatio;
+  //       const height = canvas.clientHeight * window.devicePixelRatio;
+  //       if (canvas.width !== width || canvas.height !== height) {
+  //           canvas.width = width;
+  //           canvas.height = height;
+  //           return true; // размер изменился
+  //       }
+  //       return false; // размер не изменился
+  //   }
+
+
+	// 	function render() {
+	// 	 if (resizeCanvasToDisplaySize(gl.canvas)) {
+  //       gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);
+  //     }
+	//     gl.clearColor(0.0, 0.0, 0.0, 1.0); // Clear to black, fully opaque
+	//     gl.clearDepth(1.0);                 // Clear everything
+	//     gl.enable(gl.DEPTH_TEST);           // Enable depth testing
+	//     gl.depthFunc(gl.LEQUAL);            // Near things obscure far things
+
+	//     // Clear the canvas before we start drawing on it
+	//     gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
+
+	//     // Set the shader program
+	//     gl.useProgram(shaderProgram);
+
+	//     // Set up geometry, attributes, uniforms here
+	//     // Create a buffer for the square's positions
+	//     const positionBuffer = gl.createBuffer();
+	//     gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
+
+	//     // Now create an array of positions for the square
+	//     const positions = [
+	//         -1.0,  1.0,
+	//         1.0,  1.0,
+	//         -1.0, -1.0,
+	//         1.0, -1.0,
+	//     ];
+
+	//     // Pass the positions to WebGL
+	//     gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), gl.STATIC_DRAW);
+
+	//     // Tell WebGL how to pull out the positions from the position buffer
+	//     const vertexPosition = gl.getAttribLocation(shaderProgram, 'aVertexPosition');
+	//     gl.vertexAttribPointer(vertexPosition, 2, gl.FLOAT, false, 0, 0);
+	//     gl.enableVertexAttribArray(vertexPosition);
+
+	//     // Set the shader uniforms
+	//     var timeUniformLocation = gl.getUniformLocation(shaderProgram, 'iTime');
+	//     var resolutionUniformLocation = gl.getUniformLocation(shaderProgram, 'iResolution');
+
+	//     gl.uniform1f(timeUniformLocation, performance.now() / 3000.0);
+	//     gl.uniform2f(resolutionUniformLocation, gl.canvas.width, gl.canvas.height);
+
+	//     // Draw the scene
+	//     gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
+
+	//     // Call render again on the next frame
+	//     requestAnimationFrame(render);
+	// 	}
+	// requestAnimationFrame(render);
+
+});
 </script>
 
 <template>
@@ -77,102 +233,80 @@
 	>
 
 		<div 
-			class="pd-big radius-big o-hidden bg-black-gradient"
+			class="pd-big bg-black t-white pos-relative radius-big o-hidden "
 		>
-			<div class="flex-column flex-center flex t-center  z-index-1">
+			<div class="flex-column flex-center flex t-center pos-relative z-index-1">
 				
 				<h1 
-					class="t-white mn-b-semi" 
+					class="mn-b-semi" 
 					v-html="t('title')"
 				/>
 
 				<p 
-					class="mn-b-big p-big t-transp t-white " 
+					style="max-width: 40rem;"
+					class="mn-b-big p-big t-medium t-transp" 
 					v-html="t('description')"
 				/>
 				
 				<FieldBig 
+					style="max-width: 60rem;"
 					:input="mood" 
-			    :placeholderTexts="t('placeholderTexts')"
-			    :typingSpeed="75"
-			    :loopTyping="false"
-			    :enableTyping="false"
+			    :typingSpeed="100"
+			    :loopTyping="true"
+			    :enableTyping="true"
 			    :placeholder="t('placeholder')"
 			    :action="t('action')"
 			    @update:input="mood = $event"
 			    @action="router.push({name: 'Product Recommmendation', query: {mood: mood}})"
-					class="mn-b-big bg-white-transp-5 t-white bg-blur-medium w-m-40r"
+					class="mn-b-big pd-big bg-black-transp-50 bg-blur-thin w-100"
 				/>
 
 				<p 
-					class="w-m-60r t-white t-transp mn-b-semi p-medium" 
+					class="w-m-60r t-medium t-transp mn-b-semi p-medium" 
 					v-html="t('subdescription')"
 				/>
 
-				<div class="cols-6">
+				<div style="max-width: 50rem;" class="w-100 h-max gap-thin cols-6">
 
-					<button 
+					<a 
 						v-for="(preset,index) in presets" 
 						:key="preset" 
-						@click="router.push({name: 'Product Recommmendation', query: {mood: preset}})"
+						@click.stop="router.push({name: 'Product Recommmendation', query: {mood: preset}})"
 						class="
 							uppercase 
-							t-white
+							pd-thin
 							t-semi
-							bg-transp
-							flex-h-center
-							flex-v-center
+							flex-center
 							flex-column
+							flex-nowrap
 							flex
+							bg-black-transp-50 
+							bg-blur-thin
+							radius-semi
 							cursor-pointer
 							transition-elastic
 							hover-easeInOut-1 
 						"
 					>
 						<img 
-							:src="(FILE_SERVER_URL || '') + '/icons/moods/' + preset + '.png'" 
-							class="h-8r w-8r mn-b-thin"
+							:src="(FILE_SERVER_URL || '') + '/icons/moods/' + preset + '.svg'" 
+							class="w-100"
 						/>
 
-						<span>
+						<span class="t-white"> 
 							{{ t(`presets.` + preset) }}
 						</span>
-					</button>
+					</a>
 
 				</div>
 
 			</div>
 
-      <div class="w-100 h-100 pos-absolute pos-t-0 pos-r-0 z-index-0 grid">
-        <div class="spiral"></div>
+      <div class="w-100 h-100 pos-absolute pos-t-0 pos-r-0 z-index-0">
+      	<!-- <canvas id="glcanvas" class="w-100 h-100"></canvas> -->
       </div>
 
 		</div>
 
 	</section>
-</template>
-
-<style lang="scss" scoped>
-.spiral {
-  background-image: url('https://weeder.delivery//spiral.jpg');
-  background-size: cover;
-  width: 100rem;
-  height: 100rem;
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  opacity: 0.03;
-  transform: translate(-50%, -50%) rotate(0deg);
-  transform-origin: center center;
-  animation: spin 5s linear infinite;
-}
-
-@keyframes spin {
-  0% {
-    transform: translate(-50%, -50%) rotate(0deg);
-  }
-  100% {
-    transform: translate(-50%, -50%) rotate(360deg);
-  }
-}
-</style>
+</template>

package/src/modules/products/components/sections/MenuSection.vue

@@ -0,0 +1,127 @@
+<template>
+	<section id="main-menu" class="pd-thin pos-relative">
+		<h2 class="w-m-60r mn-auto pd-t-big pd-b-big t-center">
+			Find Extraordinary <span class="t-main t-semi">Cannabis Flowers</span> and <span class="t-main t-semi">Accessories</span> to Enhance Your Smoking Experience
+		</h2>
+
+		<transition name="fade" mode="out-in"  appear>
+			<div v-if="!menu"  class="w-100 h-15r radius-big flex-center bg-grey">
+				<Loader class="pos-relative"/>
+			</div>
+
+			<ul v-else class="gap-thin grid-container">
+				<router-link :to="getMarketplaceLink([category.url])"
+					v-for="(category,index) in store.categories.state.all" 
+					:key="category" 
+					class="cursor-pointer hover-scale-0 flex-v-center flex-h-center flex-nowrap flex-row flex bg-grey radius-big pd-medium grid-item"
+				>
+
+					<video 
+						v-if="category.url === 'buds'" 
+						class="w-33 radius-100 o-hidden mn-r-medium" 
+						autoplay loop muted
+					>
+					  <source 
+					  	src="/output.webm" 
+					  	type="video/webm"
+					  >
+					</video>
+
+					<div class="w-100" :class="{'mn-r-auto':category.url === 'buds'}">
+
+						<div class="w-100 flex-v-center flex-nowrap flex">
+
+							<h3 class="t-black capitalize h3">
+								{{category.name}}
+							</h3>
+
+							<img 
+								v-if="category.url !== 'buds'"
+								:src="'/icons/categories/' + category.url + '.svg'"
+								class="i-extra mn-l-auto"
+							>
+						
+						</div>
+						
+						<p v-if="category.url === 'buds'" class="mn-t-thin mn-b-thin t-transp t-black p-medium">
+							Unveiling the Exceptional User Curated Best Buds
+						</p>
+						
+						<button 
+							v-if="category.url === 'buds'"
+			        class="mn-t-small br-2px br-solid hover-bg-main br-main t-black button-small button"
+			      >
+			        <span class="t-black">Check {{countProduct.count}} products →</span>
+			      </button>
+
+					</div>
+				</router-link>
+
+			</ul>
+		</transition>
+	</section>
+</template>
+
+
+<script setup>
+	import { ref, onMounted,computed } from 'vue'
+		import Loader from '@pf/src/components/Loader/Loader.vue'
+
+	import { useRouter } from 'vue-router'
+	import { useStore } from '@/store';	
+	import { useI18n } from 'vue-i18n'
+		
+	
+	const store = useStore()
+	const router = useRouter()
+	
+
+ 	const text = {
+    locale: 'en',
+    messages: {
+      en: {
+      	categories: []
+      },
+      ru: {
+      	categories: []
+      }
+    }
+  }
+
+  store.categories.state.all.forEach( category => {
+    category.localization.forEach( localization => {
+      text.messages[localization.locale].categories.push(localization.text)
+    })
+  })
+
+	const { t } = useI18n(text)
+
+	const countProduct = ref(0)
+	const menu = ref(false)
+
+	onMounted( async () => {
+		countProduct.value = await store.products.actions.read({count: true})
+		await store.categories.actions.fetchCategories()
+		menu.value = true
+	})
+
+</script>
+
+<style lang="scss">
+	.grid-container {
+	  display: grid;
+	  grid-template-columns: repeat(4, 1fr);
+	  grid-template-rows: repeat(2, 1fr);
+	}
+
+	.grid-item {
+	  &:first-of-type {
+	  	grid-column: span 2;
+	  	grid-row: span 2;
+	  }
+	}
+
+	@media screen and (max-width: 1025px) {
+    .grid-container {  grid-template-columns: repeat(2, 1fr);  }
+  }
+</style>