@meeovi/layer-departments 1.0.0

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

@@ -0,0 +1,191 @@
+<template>
+    <div>
+        <v-container>
+            <v-row justify="center">
+                <v-col cols="12" md="6">
+                    <v-card class="text-center pa-4">
+                        <v-card-title class="text-h4 justify-center">
+                            Timer
+                        </v-card-title>
+
+                        <v-card-text>
+                            <!-- Timer Display -->
+                            <div class="text-h2 my-4">
+                                {{ displayTime }}
+                            </div>
+
+                            <!-- Time Input Fields (shown when timer is not running) -->
+                            <v-row justify="center" v-if="!isRunning && !isPaused">
+                                <v-col cols="auto">
+                                    <v-text-field v-model="hours" label="Hours" type="number" min="0" max="99"
+                                        style="width: 100px" @input="validateInput('hours')"></v-text-field>
+                                </v-col>
+                                <v-col cols="auto">
+                                    <v-text-field v-model="minutes" label="Minutes" type="number" min="0" max="59"
+                                        style="width: 100px" @input="validateInput('minutes')"></v-text-field>
+                                </v-col>
+                                <v-col cols="auto">
+                                    <v-text-field v-model="seconds" label="Seconds" type="number" min="0" max="59"
+                                        style="width: 100px" @input="validateInput('seconds')"></v-text-field>
+                                </v-col>
+                            </v-row>
+
+                            <!-- Control Buttons -->
+                            <v-row justify="center" class="mt-4">
+                                <v-col cols="auto">
+                                    <v-btn color="primary" @click="startTimer" :disabled="isRunning || !isValidInput">
+                                        Start
+                                    </v-btn>
+                                </v-col>
+                                <v-col cols="auto">
+                                    <v-btn color="warning" @click="pauseTimer" :disabled="!isRunning">
+                                        Pause
+                                    </v-btn>
+                                </v-col>
+                                <v-col cols="auto">
+                                    <v-btn color="error" @click="resetTimer"
+                                        :disabled="!isRunning && !isPaused && totalSeconds === 0">
+                                        Reset
+                                    </v-btn>
+                                </v-col>
+                            </v-row>
+                        </v-card-text>
+                    </v-card>
+                </v-col>
+            </v-row>
+        </v-container>
+    </div>
+</template>
+
+<script setup>
+    import {
+        ref,
+        computed,
+        onBeforeUnmount
+    } from 'vue'
+
+    useHead({
+        title: 'Meeovi Time - Timer'
+    })
+
+    // State variables
+    const hours = ref('0')
+    const minutes = ref('0')
+    const seconds = ref('0')
+    const remainingTime = ref(0)
+    const isRunning = ref(false)
+    const isPaused = ref(false)
+    const timer = ref(null)
+
+    // Computed properties
+    const isValidInput = computed(() => {
+        const h = parseInt(hours.value) || 0
+        const m = parseInt(minutes.value) || 0
+        const s = parseInt(seconds.value) || 0
+        return h > 0 || m > 0 || s > 0
+    })
+
+    const totalSeconds = computed(() => {
+        return remainingTime.value
+    })
+
+    const displayTime = computed(() => {
+        const h = Math.floor(totalSeconds.value / 3600)
+        const m = Math.floor((totalSeconds.value % 3600) / 60)
+        const s = totalSeconds.value % 60
+        return `${padZero(h)}:${padZero(m)}:${padZero(s)}`
+    })
+
+    // Methods
+    const validateInput = (field) => {
+        switch (field) {
+            case 'hours':
+                hours.value = Math.min(Math.max(parseInt(hours.value) || 0, 0), 99).toString()
+                break
+            case 'minutes':
+                minutes.value = Math.min(Math.max(parseInt(minutes.value) || 0, 0), 59).toString()
+                break
+            case 'seconds':
+                seconds.value = Math.min(Math.max(parseInt(seconds.value) || 0, 0), 59).toString()
+                break
+        }
+    }
+
+    const startTimer = () => {
+        if (!isRunning.value) {
+            if (!isPaused.value) {
+                // Calculate total seconds from input
+                remainingTime.value = (
+                    parseInt(hours.value) * 3600 +
+                    parseInt(minutes.value) * 60 +
+                    parseInt(seconds.value)
+                )
+            }
+            isRunning.value = true
+            isPaused.value = false
+
+            timer.value = setInterval(() => {
+                if (remainingTime.value > 0) {
+                    remainingTime.value--
+                } else {
+                    playAlarm()
+                    resetTimer()
+                }
+            }, 1000)
+        }
+    }
+
+    const pauseTimer = () => {
+        if (isRunning.value) {
+            clearInterval(timer.value)
+            isRunning.value = false
+            isPaused.value = true
+        }
+    }
+
+    const resetTimer = () => {
+        clearInterval(timer.value)
+        isRunning.value = false
+        isPaused.value = false
+        remainingTime.value = 0
+        hours.value = '0'
+        minutes.value = '0'
+        seconds.value = '0'
+    }
+
+    const playAlarm = () => {
+        // Play sound when timer ends
+        const audio = new Audio()
+        audio.src = '/path/to/alarm-sound.mp3' // Add your alarm sound file
+        audio.play().catch(error => console.log('Error playing alarm:', error))
+    }
+
+    const padZero = (num) => {
+        return String(num).padStart(2, '0')
+    }
+
+    // Cleanup on component unmount
+    onBeforeUnmount(() => {
+        if (timer.value) {
+            clearInterval(timer.value)
+        }
+    })
+</script>
+
+<style scoped>
+    .v-card {
+        max-width: 600px;
+        margin: auto;
+    }
+
+    /* Remove spinner buttons from number inputs */
+    input::-webkit-outer-spin-button,
+    input::-webkit-inner-spin-button {
+        -webkit-appearance: none;
+        margin: 0;
+    }
+
+    input[type=number] {
+        -moz-appearance: textfield;
+    }
+</style>

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>

package/app/components/related/relatedcharts.vue

@@ -0,0 +1,39 @@
+<template>
+  <div>
+    <v-sheet class="mx-auto row align-items-stretch items-row">
+      <v-toolbar title="Charts within the community" color="transparent">
+        <div><NuxtLink to="/departments/categories/charts/">All Charts</NuxtLink></div>
+      </v-toolbar>
+      <v-slide-group v-model="model" class="pa-4" selected-class="bg-success" show-arrows>
+        <v-slide-group-item v-slot="{ isSelected, toggle, selectedClass }" v-for="(result, index) in chart" :key="index">
+          <charts style="margin: 10px;" :chart="result" />
+        </v-slide-group-item>
+      </v-slide-group>
+    </v-sheet>
+  </div>
+</template>
+
+<script setup>
+    import {
+        ref,
+    } from 'vue';
+    import charts from '../categories/chart/musicchart.vue'
+    import createchart from '../categories/chart/add-chart.vue'
+    //import {groups} from '~/graphql/cms/queries/groups'
+    //import { getGroups } from '~/composables/social/getGroups.js'; // Import the composable function
+  
+    const tab = ref(null);
+    const model = ref(null);
+    const {
+        $directus,
+        $readItems
+    } = useNuxtApp()
+
+    const {
+        data: chart
+    } = await useAsyncData('chart', () => {
+        return $directus.request($readItems('musicchart', {
+            fields: ['*', { '*': ['*'] }]
+        }))
+    })
+</script>

package/app/components/related/short.vue

@@ -0,0 +1,207 @@
+<template>
+  <v-card class="mb-4" elevation="2">
+    <v-card-title class="d-flex align-center">
+      <v-avatar size="40" class="mr-3">
+        <v-img :src="short?.creator_avatar || '/images/display-2.png'" :alt="short?.creator" />
+      </v-avatar>
+      <div>
+        <div class="font-weight-bold">{{ short?.creator || 'Anonymous' }}</div>
+        <div class="text-caption text-grey">{{ formatDate(short?.date_created) }}</div>
+      </div>
+      <v-spacer />
+      <v-menu>
+        <template v-slot:activator="{ props }">
+          <v-btn icon="mdi-dots-vertical" variant="text" v-bind="props" />
+        </template>
+        <v-list>
+          <v-list-item @click="shareVibe">
+            <v-list-item-title>Share Vibe</v-list-item-title>
+          </v-list-item>
+          <v-list-item @click="reportVibe">
+            <v-list-item-title>Report</v-list-item-title>
+          </v-list-item>
+        </v-list>
+      </v-menu>
+    </v-card-title>
+
+    <video 
+      ref="videoRef"
+      class="vibe-video"
+      :src="`${$directus.url}/assets/${short?.video?.filename_disk}`"
+      controls
+      preload="metadata"
+      @click="togglePlay"
+    />
+
+    <v-card-text>
+      <h4 v-if="short?.name" class="mb-2">{{ short.name }}</h4>
+      <p v-if="short?.description">{{ short.description }}</p>
+      
+      <div v-if="hashtags.length" class="mt-2">
+        <v-chip
+          v-for="tag in hashtags"
+          :key="tag"
+          size="small"
+          color="primary"
+          variant="outlined"
+          class="mr-1 mb-1"
+          @click="$emit('hashtag-click', tag)"
+        >
+          #{{ tag }}
+        </v-chip>
+      </div>
+    </v-card-text>
+
+    <v-card-actions>
+      <v-btn icon="mdi-heart" variant="text" @click="toggleLike" :color="isLiked ? 'red' : 'grey'" />
+      <span class="text-caption">{{ short?.likes_count || 0 }}</span>
+      
+      <v-btn icon="mdi-comment" variant="text" @click="toggleComments" />
+      <span class="text-caption">{{ short?.comments_count || 0 }}</span>
+      
+      <v-btn icon="fas:fa:fa share-nodes" variant="text" @click="shareVibe" />
+      <span class="text-caption">{{ short?.shares_count || 0 }}</span>
+      
+      <v-spacer />
+      <v-btn :to="`/social/vibe/${short?.id}`" variant="text" size="small">View Vibe</v-btn>
+    </v-card-actions>
+
+    <!-- Comments Section -->
+    <v-expand-transition>
+      <div v-show="showComments">
+        <v-divider />
+        <v-card-text>
+          <v-text-field
+            v-model="newComment"
+            label="Add a comment..."
+            variant="outlined"
+            density="compact"
+            append-inner-icon="mdi-send"
+            @click:append-inner="addComment"
+            @keyup.enter="addComment"
+          />
+          
+          <div v-for="comment in vibeComments" :key="comment.id" class="mb-2">
+            <div class="d-flex align-start">
+              <v-avatar size="32" class="mr-2">
+                <v-img :src="comment.user_avatar || '/default-avatar.png'" />
+              </v-avatar>
+              <div>
+                <div class="font-weight-bold text-caption">{{ comment.username }}</div>
+                <div class="text-body-2">{{ comment.content }}</div>
+                <div class="text-caption text-grey">{{ formatDate(comment.date_created) }}</div>
+              </div>
+            </div>
+          </div>
+        </v-card-text>
+      </div>
+    </v-expand-transition>
+  </v-card>
+</template>
+
+<script setup>
+import { ref, computed, onMounted, onUnmounted } from 'vue'
+
+const props = defineProps({
+  short: {
+    type: Object,
+    required: true,
+  },
+})
+
+const emit = defineEmits(['hashtag-click', 'comment-click', 'share'])
+
+const { short } = props
+const videoRef = ref(null)
+const isLiked = ref(false)
+const showComments = ref(false)
+const newComment = ref('')
+const vibeComments = ref([])
+
+const hashtags = computed(() => {
+  if (!short?.description) return []
+  const matches = short.description.match(/#(\w+)/g)
+  return matches ? matches.map(tag => tag.slice(1)) : []
+})
+
+const formatDate = (dateString) => {
+  if (!dateString) return 'Unknown date'
+  return new Date(dateString).toLocaleDateString('en-US', {
+    year: 'numeric',
+    month: 'short',
+    day: 'numeric',
+    hour: '2-digit',
+    minute: '2-digit'
+  })
+}
+
+const togglePlay = () => {
+  if (videoRef.value) {
+    if (videoRef.value.paused) {
+      videoRef.value.play()
+    } else {
+      videoRef.value.pause()
+    }
+  }
+}
+
+const toggleLike = async () => {
+  isLiked.value = !isLiked.value
+  // TODO: Implement like functionality with Directus
+}
+
+const toggleComments = () => {
+  showComments.value = !showComments.value
+  if (showComments.value && vibeComments.value.length === 0) {
+    loadComments()
+  }
+}
+
+const addComment = async () => {
+  if (!newComment.value.trim()) return
+  
+  // TODO: Implement comment creation with Directus
+  const comment = {
+    id: Date.now(),
+    username: 'Current User',
+    content: newComment.value,
+    date_created: new Date().toISOString()
+  }
+  
+  vibeComments.value.unshift(comment)
+  newComment.value = ''
+}
+
+const loadComments = async () => {
+  // TODO: Load comments from Directus
+  vibeComments.value = [
+    {
+      id: 1,
+      username: 'User1',
+      content: 'Great vibe!',
+      date_created: new Date().toISOString()
+    }
+  ]
+}
+
+const shareVibe = () => {
+  emit('share', short)
+}
+
+const reportVibe = () => {
+  console.log('Reporting vibe:', short.id)
+}
+</script>
+
+<style scoped>
+.vibe-video {
+  width: 100%;
+  max-height: 400px;
+  object-fit: cover;
+  cursor: pointer;
+}
+
+.vibe-video:hover {
+  opacity: 0.9;
+}
+</style>