@meeovi/layer-departments 1.0.0

package/app/components/categories/restaurants.vue

@@ -0,0 +1,77 @@
+<template>
+    <div>
+        <v-row>
+            <v-col>
+                <v-card :disabled="loading" :loading="loading" class="mx-auto my-12" max-width="374">
+                    <template v-slot:loader="{ isActive }">
+                        <v-progress-linear :active="isActive" color="deep-purple" height="4"
+                            indeterminate></v-progress-linear>
+                    </template>
+
+                    <v-img height="250" src="https://cdn.vuetifyjs.com/images/cards/cooking.png" cover></v-img>
+
+                    <v-card-item>
+                        <v-card-title>Cafe Badilico</v-card-title>
+
+                        <v-card-subtitle>
+                            <span class="me-1">Local Favorite</span>
+
+                            <v-icon color="error" icon="mdi-fire-circle" size="small"></v-icon>
+                        </v-card-subtitle>
+                    </v-card-item>
+
+                    <v-card-text>
+                        <v-row align="center" class="mx-0">
+                            <v-rating :model-value="4.5" color="amber" density="compact" size="small" half-increments
+                                readonly></v-rating>
+
+                            <div class="text-grey ms-4">
+                                4.5 (413)
+                            </div>
+                        </v-row>
+
+                        <div class="my-4 text-subtitle-1">
+                            $ • Italian, Cafe
+                        </div>
+
+                        <div>Small plates, salads & sandwiches - an intimate setting with 12 indoor seats plus patio
+                            seating.</div>
+                    </v-card-text>
+
+                    <v-divider class="mx-4 mb-1"></v-divider>
+
+                    <v-card-title>Tonight's availability</v-card-title>
+
+                    <div class="px-4 mb-2">
+                        <v-chip-group v-model="selection" selected-class="bg-deep-purple-lighten-2">
+                            <v-chip>5:30PM</v-chip>
+
+                            <v-chip>7:30PM</v-chip>
+
+                            <v-chip>8:00PM</v-chip>
+
+                            <v-chip>9:00PM</v-chip>
+                        </v-chip-group>
+                    </div>
+
+                    <v-card-actions>
+                        <v-btn color="deep-purple-lighten-2" text="Reserve" block border @click="reserve"></v-btn>
+                    </v-card-actions>
+                </v-card>
+            </v-col>
+        </v-row>
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+
+const loading = ref(false)
+const selection = ref(1)
+
+function reserve () {
+  loading.value = true
+
+  setTimeout(() => (loading.value = false), 2000)
+}
+</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/features/alarms.vue

@@ -0,0 +1,276 @@
+<template>
+    <div>
+        <v-container>
+            <v-row justify="center">
+                <v-col cols="12" md="8">
+                    <v-card class="mb-4">
+                        <v-card-title class="text-h4 justify-center">
+                            Alarms
+                        </v-card-title>
+
+                        <!-- Add New Alarm -->
+                        <v-card-text>
+                            <v-row align="center">
+                                <v-col cols="12" sm="4">
+                                    <v-time-picker v-model="newAlarmTime" format="24hr" class="mt-4"></v-time-picker>
+                                </v-col>
+                                <v-col cols="12" sm="8">
+                                    <v-text-field v-model="newAlarmLabel" label="Alarm Label"
+                                        placeholder="Enter alarm description"></v-text-field>
+
+                                    <!-- Repeat Days -->
+                                    <v-chip-group v-model="selectedDays" multiple class="mb-4">
+                                        <v-chip v-for="day in weekDays" :key="day.value" :value="day.value" filter>
+                                            {{ day.label }}
+                                        </v-chip>
+                                    </v-chip-group>
+
+                                    <v-btn color="primary" @click="addAlarm" :disabled="!newAlarmTime">
+                                        Add Alarm
+                                    </v-btn>
+                                </v-col>
+                            </v-row>
+                        </v-card-text>
+                    </v-card>
+
+                    <!-- Alarm List -->
+                    <v-card>
+                        <v-list>
+                            <v-list-item v-for="alarm in alarms" :key="alarm.id" class="mb-2">
+                                <v-list-item-content>
+                                    <v-row align="center">
+                                        <v-col cols="12" sm="4">
+                                            <div class="text-h5">{{ formatTime(alarm.time) }}</div>
+                                            <div class="text-caption">{{ alarm.label }}</div>
+                                        </v-col>
+                                        <v-col cols="12" sm="4">
+                                            <v-chip-group>
+                                                <v-chip v-for="day in alarm.days" :key="day" small label>
+                                                    {{ weekDays.find(d => d.value === day).shortLabel }}
+                                                </v-chip>
+                                            </v-chip-group>
+                                        </v-col>
+                                        <v-col cols="12" sm="4" class="text-right">
+                                            <v-switch v-model="alarm.active" @change="toggleAlarm(alarm)"
+                                                color="primary" hide-details inset></v-switch>
+                                            <v-btn icon color="error" @click="deleteAlarm(alarm.id)">
+                                                <v-icon>mdi-delete</v-icon>
+                                            </v-btn>
+                                        </v-col>
+                                    </v-row>
+                                </v-list-item-content>
+                            </v-list-item>
+                        </v-list>
+                    </v-card>
+                </v-col>
+            </v-row>
+        </v-container>
+    </div>
+</template>
+
+<script setup>
+    import {
+        ref,
+        onMounted,
+        watch
+    } from 'vue'
+
+    useHead({
+        title: 'Meeovi Time - Alarms'
+    })
+
+    // State
+    const alarms = ref([])
+    const newAlarmTime = ref('')
+    const newAlarmLabel = ref('')
+    const selectedDays = ref([])
+
+    // Constants
+    const weekDays = [{
+            value: 0,
+            label: 'Sunday',
+            shortLabel: 'Sun'
+        },
+        {
+            value: 1,
+            label: 'Monday',
+            shortLabel: 'Mon'
+        },
+        {
+            value: 2,
+            label: 'Tuesday',
+            shortLabel: 'Tue'
+        },
+        {
+            value: 3,
+            label: 'Wednesday',
+            shortLabel: 'Wed'
+        },
+        {
+            value: 4,
+            label: 'Thursday',
+            shortLabel: 'Thu'
+        },
+        {
+            value: 5,
+            label: 'Friday',
+            shortLabel: 'Fri'
+        },
+        {
+            value: 6,
+            label: 'Saturday',
+            shortLabel: 'Sat'
+        }
+    ]
+
+    // Methods
+    const loadAlarms = () => {
+        const savedAlarms = localStorage.getItem('alarms')
+        if (savedAlarms) {
+            alarms.value = JSON.parse(savedAlarms)
+            setupAlarmChecks()
+        }
+    }
+
+    const saveAlarms = () => {
+        localStorage.setItem('alarms', JSON.stringify(alarms.value))
+    }
+
+    const addAlarm = () => {
+        if (!newAlarmTime.value) return
+
+        const newAlarm = {
+            id: Date.now(),
+            time: newAlarmTime.value,
+            label: newAlarmLabel.value || 'Alarm',
+            days: selectedDays.value,
+            active: true,
+            nextTrigger: calculateNextTrigger(newAlarmTime.value, selectedDays.value)
+        }
+
+        alarms.value.push(newAlarm)
+        saveAlarms()
+        setupAlarmCheck(newAlarm)
+
+        // Reset form
+        newAlarmTime.value = ''
+        newAlarmLabel.value = ''
+        selectedDays.value = []
+    }
+
+    const deleteAlarm = (id) => {
+        alarms.value = alarms.value.filter(alarm => alarm.id !== id)
+        saveAlarms()
+    }
+
+    const toggleAlarm = (alarm) => {
+        alarm.active = !alarm.active
+        if (alarm.active) {
+            alarm.nextTrigger = calculateNextTrigger(alarm.time, alarm.days)
+        }
+        saveAlarms()
+    }
+
+    const formatTime = (time) => {
+        if (!time) return ''
+        return time
+    }
+
+    const calculateNextTrigger = (time, days) => {
+        const [hours, minutes] = time.split(':')
+        const now = new Date()
+        const today = now.getDay()
+
+        let nextDate = new Date()
+        nextDate.setHours(parseInt(hours), parseInt(minutes), 0, 0)
+
+        if (days.length === 0) {
+            if (nextDate <= now) {
+                nextDate.setDate(nextDate.getDate() + 1)
+            }
+            return nextDate.getTime()
+        }
+
+        // Find the next day that the alarm should trigger
+        let daysUntilNext = 7
+        for (const day of days) {
+            const diff = (day - today + 7) % 7
+            if (diff === 0 && nextDate > now) {
+                daysUntilNext = 0
+                break
+            }
+            if (diff < daysUntilNext && (diff > 0 || (diff === 0 && nextDate <= now))) {
+                daysUntilNext = diff
+            }
+        }
+
+        nextDate.setDate(nextDate.getDate() + daysUntilNext)
+        return nextDate.getTime()
+    }
+
+    const setupAlarmChecks = () => {
+        alarms.value.forEach(setupAlarmCheck)
+    }
+
+    const setupAlarmCheck = (alarm) => {
+        if (!alarm.active) return
+
+        const checkAlarm = () => {
+            const now = Date.now()
+            if (now >= alarm.nextTrigger) {
+                triggerAlarm(alarm)
+                alarm.nextTrigger = calculateNextTrigger(alarm.time, alarm.days)
+                saveAlarms()
+            }
+        }
+
+        // Check every minute
+        setInterval(checkAlarm, 60000)
+    }
+
+    const triggerAlarm = (alarm) => {
+        // Play alarm sound
+        const audio = new Audio()
+        audio.src = '/path/to/alarm-sound.mp3' // Add your alarm sound file
+        audio.loop = true
+
+        // Show notification if supported
+        if ('Notification' in window) {
+            Notification.requestPermission().then(permission => {
+                if (permission === 'granted') {
+                    const notification = new Notification('Alarm', {
+                        body: alarm.label,
+                        icon: '/path/to/alarm-icon.png' // Add your alarm icon
+                    })
+
+                    // Close notification and stop sound after 1 minute
+                    setTimeout(() => {
+                        notification.close()
+                        audio.pause()
+                    }, 60000)
+                }
+            })
+        }
+
+        audio.play().catch(error => console.log('Error playing alarm:', error))
+    }
+
+    // Watch for changes
+    watch(alarms, () => {
+        saveAlarms()
+    }, {
+        deep: true
+    })
+
+    // Initialize
+    onMounted(() => {
+        loadAlarms()
+    })
+</script>
+
+<style scoped>
+    .v-card {
+        max-width: 800px;
+        margin: auto;
+    }
+</style>

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

@@ -0,0 +1,12 @@
+<template>
+    <div>
+
+    </div>
+</template>
+
+<script setup>
+
+useHead({
+    title: 'Meeovi Time - Bedtime'
+})
+</script>

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

@@ -0,0 +1,109 @@
+<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">
+                            Stopwatch
+                        </v-card-title>
+                        <v-card-text>
+                            <div class="text-h2 my-4">
+                                {{ hours | zeroPad }}:{{ minutes | zeroPad }}:{{ seconds | zeroPad }}.{{ milliseconds | zeroPad(3) }}
+                            </div>
+                            <v-row justify="center" class="mt-4">
+                                <v-col cols="auto">
+                                    <v-btn color="primary" @click="startTimer" :disabled="isRunning">
+                                        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">
+                                        Reset
+                                    </v-btn>
+                                </v-col>
+                            </v-row>
+                            <v-list v-if="laps.length" class="mt-4">
+                                <v-list-item v-for="(lap, index) in laps" :key="index">
+                                    <v-list-item-content>
+                                        Lap {{ index + 1 }}: {{ formatTime(lap) }}
+                                    </v-list-item-content>
+                                </v-list-item>
+                            </v-list>
+                        </v-card-text>
+                    </v-card>
+                </v-col>
+            </v-row>
+        </v-container>
+    </div>
+</template>
+
+<script setup>
+    import {
+        ref,
+        computed
+    } from 'vue'
+
+    useHead({
+        title: 'Meeovi Time - Stopwatch'
+    })
+
+    const time = ref(0)
+    const isRunning = ref(false)
+    const timer = ref(null)
+    const laps = ref([])
+
+    const hours = computed(() => Math.floor(time.value / 3600000))
+    const minutes = computed(() => Math.floor((time.value % 3600000) / 60000))
+    const seconds = computed(() => Math.floor((time.value % 60000) / 1000))
+    const milliseconds = computed(() => time.value % 1000)
+
+    const startTimer = () => {
+        if (!isRunning.value) {
+            isRunning.value = true
+            const startTime = Date.now() - time.value
+            timer.value = setInterval(() => {
+                time.value = Date.now() - startTime
+            }, 10)
+        }
+    }
+
+    const pauseTimer = () => {
+        isRunning.value = false
+        clearInterval(timer.value)
+    }
+
+    const resetTimer = () => {
+        pauseTimer()
+        time.value = 0
+        laps.value = []
+    }
+
+    const addLap = () => {
+        laps.value.push(time.value)
+    }
+
+    const formatTime = (timeValue) => {
+        const h = Math.floor(timeValue / 3600000)
+        const m = Math.floor((timeValue % 3600000) / 60000)
+        const s = Math.floor((timeValue % 60000) / 1000)
+        const ms = timeValue % 1000
+        return `${padZero(h)}:${padZero(m)}:${padZero(s)}.${padZero(ms, 3)}`
+    }
+
+    const padZero = (num, places = 2) => {
+        return String(num).padStart(places, '0')
+    }
+</script>
+
+<style scoped>
+    .v-card {
+        max-width: 600px;
+        margin: auto;
+    }
+</style>