@meeovi/layer-commerce 1.0.10 → 1.0.13

package/app/components/categories/charts.vue

@@ -0,0 +1,118 @@
+<template>
+  <div>
+      <!---->
+      <v-card elevation="0">
+          <v-toolbar :title="chartbar?.name" color="#1F7087">
+              <v-dialog min-width="500">
+                  <template v-slot:activator="{ props: activatorProps }">
+                      <v-btn v-bind="activatorProps" prepend-icon="fas:fa fa-plus" title="Create a Chart"
+                          variant="flat">Create a Chart
+                      </v-btn>
+                  </template>
+
+                  <template v-slot:default="{ isActive }">
+                      <createchart />
+                  </template>
+              </v-dialog>
+          </v-toolbar>
+
+          <v-tabs v-model="tab" bg-color="#1F7087">
+              <div v-for="(menu, index) in chartbar?.menus" :key="index">
+                  <v-tab :value="menu?.value">{{ menu?.name }}</v-tab>
+              </div>
+          </v-tabs>
+
+          <v-card-text>
+              <v-tabs-window v-model="tab">
+                  <v-tabs-window-item value="one">
+                      <v-row style="padding-top: 15px;">
+                          <v-col cols="4" v-for="(charts, index) in charts" :key="index">
+                              <chart :chart="charts" />
+                          </v-col>
+                      </v-row>
+                  </v-tabs-window-item>
+
+                  <v-tabs-window-item value="two">
+                      <v-row style="padding-top: 15px;">
+                          <v-col cols="4" v-for="(charts, index) in videocharts" :key="index">
+                              <chart :chart="charts" />
+                          </v-col>
+                      </v-row>
+                  </v-tabs-window-item>
+
+                  <v-tabs-window-item value="three">
+                      <v-row style="padding-top: 15px;">
+                          <v-col cols="4" v-for="(charts, index) in mycharts" :key="index">
+                              <chart :chart="charts" />
+                          </v-col>
+                      </v-row>
+                  </v-tabs-window-item>
+              </v-tabs-window>
+          </v-card-text>
+      </v-card>
+  </div>
+</template>
+
+<script setup>
+  import chart from './chart/chart.vue'
+  import createchart from './chart/add-chart.vue'
+  import { ref } from 'vue'
+  import {
+      useUserStore
+  } from '../../../../auth/app/stores/user'
+  
+  const userStore = useUserStore()
+
+  const tab = ref(null);
+  const {
+      $directus,
+      $readItems,
+      $readItem
+  } = useNuxtApp()
+
+  const {
+      data: charts
+  } = await useAsyncData('charts', () => {
+      return $directus.request($readItems('musicchart', {
+          fields: ['*', { '*': ['*'] }]
+      }))
+  })
+
+  const {
+      data: videocharts
+  } = await useAsyncData('videocharts', () => {
+      return $directus.request($readItems('musicchart', {
+          filter: {
+              type: {
+                  _eq: "Video"
+              }
+          }
+      }))
+  })
+
+  const {
+      data: mycharts
+  } = await useAsyncData('mycharts', () => {
+      return $directus.request($readItems('musicchart', {
+          filter: {
+              creator: {
+                  _eq: `${userStore?.email?.value}`
+              }
+          }
+      }))
+  })
+
+  const {
+      data: chartbar
+  } = await useAsyncData('chartbar', () => {
+      return $directus.request($readItem('navigation', '33'))
+  })
+
+  definePageMeta({
+      middleware: ['authenticated'],
+  })
+
+  useHead({
+      title: 'Charts',
+  })
+</script>

package/app/components/categories/deals.vue

@@ -0,0 +1,101 @@
+<template>
+    <div>
+        <v-card elevation="0" style="min-height: 100vh !important;">
+            <v-layout>
+                <v-main>
+                    <v-tabs center-active v-model="tab" bg-color="transparent">
+                        <div v-for="(menu, index) in dealbar?.menus" :key="index">
+                    <v-tab :value="menu?.value">{{ menu?.name }}</v-tab>
+                </div>
+                    </v-tabs>
+
+                    <v-card-text>
+                        <v-tabs-window v-model="tab">
+                            <v-tabs-window-item :value="dealbar?.menus[0]?.value">
+                                <v-row>
+                                    <v-col cols="3" v-for="products in dealsProducts" :key="products">
+                                        <productCard :product="products" />
+                                    </v-col>
+                                </v-row>
+                            </v-tabs-window-item>
+
+                            <v-tabs-window-item :value="dealbar?.menus[1]?.value">
+                                <v-row>
+                                    <v-col cols="3" v-for="products in dollar" :key="products">
+                                        <productCard :product="products" />
+                                    </v-col>
+                                </v-row>
+                            </v-tabs-window-item>
+                        </v-tabs-window>
+                    </v-card-text>
+                </v-main>
+            </v-layout>
+        </v-card>
+    </div>
+</template>
+
+<script setup>
+    import {
+        ref
+    } from 'vue'
+    import productCard from '#commerce/app/components/catalog/product/productCard.vue'
+
+
+    const {
+        $directus,
+        $readItem,
+        $readItems
+    } = useNuxtApp()
+
+    const {
+        data: dealbar
+    } = await useAsyncData('dealbar', () => {
+        return $directus.request($readItem('navigation', '49', {
+            fields: ['*', {
+                '*': ['*']
+            }]
+        }))
+    })
+
+    const {
+        data: dealsProducts
+    } = await useAsyncData('dealsProducts', () => {
+        return $directus.request($readItems('products', {
+            fields: ['*', {
+                '*': ['*']
+            }],
+            filter: {
+                price: {
+                    _lte: 20
+                }
+            }
+        }))
+    })
+
+    const {
+        data: dollar
+    } = await useAsyncData('dollar', () => {
+        return $directus.request($readItems('products', {
+            fields: ['*', {
+                '*': ['*']
+            }],
+            filter: {
+                price: {
+                    _lte: 1
+                }
+            }
+        }))
+    })    
+
+    const tab = ref(null)
+    const props = defineProps({
+        category: {
+            type: Number,
+            required: true,
+        },
+    });
+
+    useHead({
+        title: 'Deals',
+    })
+</script>

package/app/components/categories/eats.vue

@@ -0,0 +1,49 @@
+<template :style="`background: ${categoryEats?.color}`">
+    <div>
+        <v-toolbar :title="`Meeovi ${categoryEats?.name}`" :color="categoryEats?.color" :style="`color: ${categoryEats?.colortext}; font: bold;`"></v-toolbar>
+        <v-row class="eatsPage">
+            <v-col cols="12" v-for="(eats, index) in eats" :key="index">
+                <shorts :short="eats" />
+            </v-col>
+        </v-row>
+    </div>
+</template>
+
+<script setup>
+    import shorts from '@/components/placeholder/shorts.vue'
+    //import share from '~/components/partials/globals/share.vue'
+
+    const {
+        $directus,
+        $readItems,
+        $readItem
+    } = useNuxtApp()
+
+    const {
+        data: eats
+    } = await useAsyncData('eats', () => {
+        return $directus.request($readItems('shorts', {
+            filter: {
+                type: {
+                    _eq: 'Eats'
+                },
+                status: {
+                    _eq: 'Published'
+                }
+            },
+            fields: ['*', {
+                '*': ['*']
+            }]
+        }))
+    })
+
+    const {
+        data: categoryEats
+    } = await useAsyncData('categoryEats', () => {
+        return $directus.request($readItem('categories', '152', {
+            fields: ['*', {
+                '*': ['*']
+            }]
+        }))
+    })
+</script>

package/app/components/categories/restaurants.vue

@@ -0,0 +1,26 @@
+<template>
+    <div>
+        <v-card elevation="0">
+            <v-toolbar :title="restaurant?.name" color="#1F7087"></v-toolbar>
+
+            <v-card-text>
+                <v-row>
+                    <v-col cols="12" v-for="item in restaurant?.items" :key="item.id">
+                        <v-list-item>
+                            <v-list-item-content>
+                                <v-list-item-title>{{ item.name }}</v-list-item-title>
+                                <v-list-item-subtitle>{{ item.description }}</v-list-item-subtitle>
+                            </v-list-item-content>
+                        </v-list-item>
+                    </v-col>
+                </v-row>
+            </v-card-text>
+        </v-card>
+    </div>
+</template>
+
+<script setup>
+    const props = defineProps({
+        restaurant: Object
+    })
+</script>

package/app/components/categories/station/[id].vue

@@ -0,0 +1,72 @@
+<template>
+    <div class="contentPage">
+        <v-row>
+            <v-col cols="12">
+                <v-card color="#b02564">
+                    <div class="d-flex flex-no-wrap justify-space-between">
+                        <div>
+                            <v-card-title class="text-h5">
+                                {{ station?.name }} <share style="display: inline-block; font-size: 15px;" />
+                            </v-card-title>
+
+                            <v-card-subtitle>Format: {{ station?.format }}</v-card-subtitle>
+
+                            <v-card-subtitle>Categories:
+                                <div v-for="category in station?.categories" :key="category">
+                                    {{ category?.categories_id?.name }}
+                                </div>
+                            </v-card-subtitle>
+
+                            <v-card-subtitle v-dompurify-html="station?.description"></v-card-subtitle>
+                        </div>
+
+                        <v-avatar class="ma-3" rounded="0" size="125">
+                            <NuxtImg :src="`${$directus.url}/assets/${station?.image?.filename_disk}`" />
+                        </v-avatar>
+                    </div>
+
+                    <audio :src="`${$directus.url}/assets/${station?.file?.filename_disk}`" controls loop class="radioStation"></audio>
+                </v-card>
+            </v-col>
+
+            <v-col cols="12">
+                <relatedstations />
+            </v-col>
+
+            <v-col cols="12">
+                <comments />
+            </v-col>
+        </v-row>
+    </div>
+</template>
+
+<script setup>
+    import {
+        ref,
+        computed
+    } from 'vue'
+    import relatedstations from '@/components/catalog/product/relatedstations.vue'
+        import comments from '~/components/partials/globals/comments.vue'
+        import share from '~/components/partials/globals/share.vue'
+
+    const route = useRoute()
+
+    const {
+        $directus,
+        $readItem
+    } = useNuxtApp()
+
+    const {
+        data: station
+    } = await useAsyncData('station', () => {
+        return $directus.request($readItem('radios', route.params.id, {
+            fields: ['*', {
+                '*': ['*']
+            }]
+        }))
+    })
+
+    useHead({
+        title: computed(() => station?.value?.name || 'Station Page'),
+    });
+</script>

package/app/components/categories/stations.vue

@@ -0,0 +1,124 @@
+<template>
+  <div>
+      <!---->
+      <v-card elevation="0">
+          <v-toolbar :title="stationbar?.name" color="#b02564">
+              <v-dialog min-width="500">
+                  <template v-slot:activator="{ props: activatorProps }">
+                      <v-btn v-bind="activatorProps" prepend-icon="fas:fa fa-plus" title="Create a Station"
+                          variant="flat">Create a Station
+                      </v-btn>
+                  </template>
+
+                  <template v-slot:default="{ isActive }">
+                      <createstation />
+                  </template>
+              </v-dialog>
+          </v-toolbar>
+
+          <v-tabs v-model="tab" bg-color="#b02564">
+              <div v-for="(menu, index) in stationbar?.menus" :key="index">
+                  <v-tab :value="menu?.value">{{ menu?.name }}</v-tab>
+              </div>
+          </v-tabs>
+
+          <v-card-text>
+              <v-tabs-window v-model="tab">
+                  <v-tabs-window-item value="one">
+                      <v-row style="padding-top: 15px;">
+                          <v-col cols="6" v-for="(stations, index) in stations" :key="index">
+                              <station :radio="stations" />
+                          </v-col>
+                      </v-row>
+                  </v-tabs-window-item>
+
+                  <v-tabs-window-item value="two">
+                      <v-row style="padding-top: 15px;">
+                          <v-col cols="6" v-for="(stations, index) in livestations" :key="index">
+                              <station :radio="stations" />
+                          </v-col>
+                      </v-row>
+                  </v-tabs-window-item>
+
+                  <v-tabs-window-item value="three">
+                      <v-row style="padding-top: 15px;">
+                          <v-col cols="6" v-for="(stations, index) in mystations" :key="index">
+                              <station :radio="stations" />
+                          </v-col>
+                      </v-row>
+                  </v-tabs-window-item>
+              </v-tabs-window>
+          </v-card-text>
+      </v-card>
+
+  </div>
+</template>
+
+<script setup>
+    import station from '../../../../commerce/app/components/catalog/product/radiostation.vue'
+    import createstation from '../../../../commerce/app/components/catalog/product/add-station.vue'
+  import { ref } from 'vue'
+  import {
+      useUserStore
+  } from '../../../../auth/app/stores/user'
+  
+  const userStore = useUserStore()
+
+  const tab = ref(null);
+  const {
+      $directus,
+      $readItems,
+      $readItem
+  } = useNuxtApp()
+
+  const userDisplayName = computed(() => {
+      return userStore.user?.name || userStore.user?.username || 'User'
+  })
+
+  const {
+      data: stations
+  } = await useAsyncData('stations', () => {
+      return $directus.request($readItems('radios', {
+          fields: ['*', { '*': ['*'] }]
+      }))
+  })
+
+  const {
+      data: livestations
+  } = await useAsyncData('livestations', () => {
+      return $directus.request($readItems('radios', {
+          filter: {
+              type: {
+                  _eq: "Live"
+              }
+          },
+          fields: ['*', { '*': ['*'] }]
+      }))
+  })
+
+  const {
+      data: mystations
+  } = await useAsyncData('mystations', () => {
+      return $directus.request($readItems('radios', {
+          filter: {
+              creator: {
+                  _eq: `${userDisplayName.value}`
+              }
+          }
+      }))
+  })
+
+  const {
+      data: stationbar
+  } = await useAsyncData('stationbar', () => {
+      return $directus.request($readItem('navigation', '34'))
+  })
+
+  definePageMeta({
+      middleware: ['authenticated'],
+  })
+
+  useHead({
+      title: 'Radio Stations',
+  })
+</script>

package/app/components/categories/time/time.vue

@@ -0,0 +1,63 @@
+<template>
+    <div>
+        <h1 class="mbr-section-title mbr-fonts-style mbr-white mb-3 display-1" id="dateTime">
+        </h1>
+    </div>
+</template>
+
+<script setup>
+    import {
+        onMounted,
+        onUnmounted
+    } from 'vue';
+    const {
+        $directus,
+        $readItem
+    } = useNuxtApp()
+
+    const {
+        data: department
+    } = await useAsyncData('department', () => {
+        return $directus.request($readItem('departments', '68', {
+            fields: ['*', '*', '*']
+        }))
+    })
+
+    let intervalId;
+
+    const updateDateTime = () => {
+        const months = [
+            "January", "February", "March", "April", "May", "June", "July",
+            "August", "September", "October", "November", "December"
+        ];
+        const date = new Date();
+        const monthName = months[date.getMonth()];
+        const formattedDate = date.toLocaleString();
+
+        const dateTimeElement = document.getElementById("dateTime");
+        if (dateTimeElement) {
+            dateTimeElement.innerHTML = `${monthName} ${formattedDate}`;
+        }
+    };
+
+    onMounted(() => {
+        updateDateTime(); // Initial update
+        intervalId = setInterval(updateDateTime, 1000);
+    });
+
+    onUnmounted(() => {
+        if (intervalId) {
+            clearInterval(intervalId);
+        }
+    });
+
+    const props = defineProps({
+        category: {
+            type: String,
+            required: true,
+        },
+    });
+    const {
+        category
+    } = props;
+</script>

package/app/components/categories/travel.vue

@@ -0,0 +1,75 @@
+<template>
+    <div>
+        <div id="map" style="height: 400px;"></div>
+        <p v-if="locationError">{{ locationError }}</p>
+    </div>
+</template>
+
+<script setup>
+    import {
+        onMounted,
+        ref
+    } from 'vue';
+
+    const props = defineProps({
+        category: {
+            type: String,
+            required: true,
+        },
+    });
+
+    const mapInstance = ref(null);
+    const locationError = ref(null);
+
+    onMounted(() => {
+        import('leaflet').then((L) => {
+            // Create the map with a default view
+            mapInstance.value = L.map('map').setView([0, 0], 2);
+
+            // Add the tile layer
+            L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+                attribution: '&copy; <NuxtLink to="https://www.openstreetmap.org/">OpenStreetMap</NuxtLink> contributors',
+                maxZoom: 18,
+            }).addTo(mapInstance.value);
+
+            // Try to get the user's location
+            if ("geolocation" in navigator) {
+                navigator.geolocation.getCurrentPosition(
+                    (position) => {
+                        const {
+                            latitude,
+                            longitude
+                        } = position.coords;
+                        mapInstance.value.setView([latitude, longitude], 13);
+
+                        // Add a marker at the user's location
+                        L.marker([latitude, longitude])
+                            .addTo(mapInstance.value)
+                            .bindPopup('You are here!')
+                            .openPopup();
+                    },
+                    (error) => {
+                        console.error("Error getting location:", error.message);
+                        locationError.value =
+                            `Unable to get your location: ${error.message}. Using default view.`;
+                        // Fallback to a default location (e.g., New York City)
+                        mapInstance.value.setView([40.7128, -74.0060], 13);
+                    }, {
+                        enableHighAccuracy: true,
+                        timeout: 10000, // Increased timeout to 10 seconds
+                        maximumAge: 0
+                    }
+                );
+            } else {
+                locationError.value =
+                    "Geolocation is not supported by this browser. Using default view.";
+                // Fallback to a default location
+                mapInstance.value.setView([40.7128, -74.0060], 13);
+            }
+        });
+    });
+</script>
+
+<style>
+    @import 'leaflet/dist/leaflet.css';
+</style>

package/app/components/categories/weather/weather.vue

@@ -0,0 +1,44 @@
+<template>
+    <div>
+        <div id="ww_5134399f73857" v='1.3' loc='auto' a='{"t":"responsive","lang":"en","sl_lpl":1,"ids":[],"font":"Arial","sl_ics":"one_a","sl_sot":"celsius","cl_bkg":"image","cl_font":"#FFFFFF","cl_cloud":"#FFFFFF","cl_persp":"#81D4FA","cl_sun":"#FFC107","cl_moon":"#FFC107","cl_thund":"#FF5722","cl_odd":"#0000000a"}'>Weather Data Source: <NuxtLink href="https://wetterlang.de" id="ww_5134399f73857_u" target="_blank">Wetter vorhersage 30 tage</NuxtLink></div>
+    </div>
+</template>
+
+<script setup>
+    import {
+        onMounted,
+        ref
+    } from 'vue'
+
+    const widgetId = 'ww_5134399f73857'
+
+    const loadExternalScript = (src) => {
+        return new Promise((resolve, reject) => {
+            const script = document.createElement('script')
+            script.type = 'text/javascript';
+            script.src = src
+            script.async = true
+            script.onload = resolve
+            document.head.appendChild(script)
+        })
+    }
+
+    onMounted(async () => {
+        try {
+            await loadExternalScript(`https://app3.weatherwidget.org/js/?id=${widgetId}`)
+            // You may need a delay to allow the widget script to initialize
+            setTimeout(() => {
+                // Check if additional initialization is needed here
+            }, 100)
+        } catch (error) {
+            console.error('Failed to load weather widget script:', error)
+        }
+    })
+
+    const props = defineProps({
+        category: {
+            type: String,
+            required: true,
+        },
+    });
+</script>