generated from seatplus/package-skeleton
-
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
d924a62
commit 71f0a62
Showing
25 changed files
with
873 additions
and
87 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
71 changes: 71 additions & 0 deletions
71
resources/js/Pages/BroadcastHub/Globals/GlobalBroadcasts.vue
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,71 @@ | ||
<script setup> | ||
import Card from "@/Shared/Layout/Cards/Card.vue"; | ||
import { ref, onMounted } from "vue"; | ||
import axios from 'axios' | ||
import GlobalNotification from "./GlobalNotification.vue"; | ||
const props = defineProps({ | ||
broadcasterId: { | ||
type: String, | ||
required: true | ||
}, | ||
recipientId: { | ||
type: String, | ||
required: true | ||
} | ||
}) | ||
const hasGlobals = ref(false) | ||
const isLoaded = ref(false) | ||
const notifications = ref([]) | ||
onMounted(() => { | ||
axios.get(route('global-subscriptions.index', [props.broadcasterId, props.recipientId])).then(response => { | ||
notifications.value = response.data | ||
hasGlobals.value = response.data.length > 0 | ||
}).finally(() => { | ||
isLoaded.value = true | ||
}) | ||
}) | ||
</script> | ||
|
||
<template> | ||
<Card> | ||
<div v-if="!isLoaded" | ||
class="relative block w-full border-2 border-gray-300 border-dashed rounded-lg p-12 text-center focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500" | ||
> | ||
<svg | ||
class="animate-spin mx-auto h-12 w-12 text-gray-400" | ||
xmlns="http://www.w3.org/2000/svg" | ||
fill="none" | ||
viewBox="0 0 24 24" | ||
> | ||
<circle | ||
class="opacity-25" | ||
cx="12" | ||
cy="12" | ||
r="10" | ||
stroke="currentColor" | ||
stroke-width="4" | ||
/> | ||
<path | ||
class="opacity-75" | ||
fill="currentColor" | ||
d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" | ||
/> | ||
</svg> | ||
<span class="mt-2 block text-sm font-medium text-gray-900"> | ||
loading global subscriptions... | ||
</span> | ||
</div> | ||
<dl class="grid grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-3"> | ||
<GlobalNotification v-for="notification in notifications" :key="notification.notification" :notification="notification" /> | ||
</dl> | ||
|
||
</Card> | ||
|
||
</template> |
75 changes: 75 additions & 0 deletions
75
resources/js/Pages/BroadcastHub/Globals/GlobalNotification.vue
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,75 @@ | ||
<script setup> | ||
import {ref, watch} from 'vue' | ||
import { Switch, SwitchDescription, SwitchGroup, SwitchLabel } from '@headlessui/vue' | ||
import {useToasts} from "@/Functions/useToasts.js"; | ||
const props = defineProps({ | ||
notification: { | ||
type: Object, | ||
required: true | ||
} | ||
}) | ||
const enabled = ref(props.notification.is_subscribed) | ||
const processing = ref(false) | ||
const toasts = useToasts() | ||
const subscribe = async (notification) => { | ||
await axios.post(route('subscriptions.store'), notification) | ||
.catch(error => { | ||
console.log(error) | ||
}).then((response) => { | ||
props.notification.subscription_id = response.data.subscription_id | ||
props.notification.is_subscribed = true | ||
toasts.addToast('Subscribed to ' + props.notification.title, {appearance: 'success'}) | ||
}) | ||
} | ||
const unsubscribe = async (notification) => { | ||
await axios.delete(route('subscriptions.destroy', notification.subscription_id)).then(() => { | ||
props.notification.is_subscribed = false | ||
props.notification.subscription_id = null | ||
toasts.addToast('Unsubscribed from ' + props.notification.title, {appearance: 'success'}) | ||
}).catch(error => { | ||
console.log(error) | ||
}) | ||
} | ||
watch(() => enabled.value, async (newShow) => { | ||
flipProcessing() | ||
if(newShow) { | ||
await subscribe(props.notification) | ||
} else { | ||
await unsubscribe(props.notification) | ||
} | ||
flipProcessing() | ||
}) | ||
const flipProcessing = () => { | ||
processing.value = !processing.value | ||
} | ||
</script> | ||
|
||
<template> | ||
<div class="bg-white shadow sm:rounded-lg"> | ||
<SwitchGroup as="div" class="px-4 py-5 sm:p-6"> | ||
<SwitchLabel as="h2" class="text-lg font-medium leading-6 text-gray-900 sm:truncate sm:tracking-tight" passive>{{ notification.title }}</SwitchLabel> | ||
<div class="mt-2 sm:flex sm:items-start sm:justify-between"> | ||
<div class="max-w-xl text-sm font-medium text-gray-500"> | ||
<SwitchDescription>{{ notification.description }}</SwitchDescription> | ||
</div> | ||
<div class="mt-5 sm:ml-6 sm:mt-0 sm:flex sm:flex-shrink-0 sm:items-center"> | ||
<Switch v-if="!processing" v-model="enabled" :class="[enabled ? 'bg-indigo-600' : 'bg-gray-200', 'relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-indigo-600 focus:ring-offset-2']"> | ||
<span aria-hidden="true" :class="[enabled ? 'translate-x-5' : 'translate-x-0', 'inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out']" /> | ||
</Switch> | ||
</div> | ||
</div> | ||
</SwitchGroup> | ||
</div> | ||
</template> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file was deleted.
Oops, something went wrong.
Oops, something went wrong.