Subscribe and Publish implemented.

components/Cards/ChannelChatCard.vue

@@ -15,13 +15,45 @@
 // along with this program. If not, see <https://www.gnu.org/licenses/>.
 
 import UCard from '@nuxt/ui/components/Card.vue';
+import * as z from "zod";
+import type {FormSubmitEvent} from "@nuxt/ui";
 
 const props = defineProps<{ channel: string }>()
 const messages = ref<string[]>([])
 
 const { connect, close } = useSocket()
 const route = useRoute();
 
+const schema = z.object({
+  value: z.string(),
+})
+
+type Schema = z.output<typeof schema>
+
+const state = reactive<Partial<Schema>>({
+  value: '',
+})
+
+const submit = async (event: FormSubmitEvent<Schema>) => {
+  try {
+    const response = await $fetch(`/api/services/${route.params.id}/publish`, {
+      method: 'POST',
+      body: {
+        channel: props.channel,
+        value: event.data.value
+      }
+    })
+
+    toast.add({title: t('forms.event', { name: "Published"}), color: 'success'})
+    console.log("Published ⤑ Response", response)
+    emit('success');
+  } catch (error) {
+    toast.add({title: t('forms.event', { name: "Published ⤑ Exception"}), color: 'error'})
+    console.error("Published ⤑ Exception", error)
+    throw error;
+  }
+}
+
 onMounted(() => {
   connect(props.channel, route.params.id!, (msg) => {
     if (msg.event === "MESSAGE") {
@@ -40,10 +72,18 @@ onUnmounted(() => {
   <div>
     <h2 class="text-lg font-bold">Channel: {{ props.channel }}</h2>
     <pre
-        class="w-full h-64 p-2 border border-gray-700 rounded mt-2 font-mono"
+        class="w-full h-64 p-2 mb-4 border border-gray-700 rounded mt-2 font-mono"
         readonly
         v-html="messages.join('\n')"
     ></pre>
+
+    <UForm :schema="schema" :state="state" class="space-y-4" @submit="submit">
+      <UFormField label="Value" name="value">
+        <UInput v-model="state.value" type="text" class="w-full" />
+      </UFormField>
+
+      <UButton label="Send" type="submit"/>
+    </UForm>
   </div>
 </template>
 

components/Forms/SubscribeForm.vue

@@ -0,0 +1,71 @@
+<script setup lang="ts">
+// Copyright (C) 2025 Ian Torres
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+import * as z from "zod";
+import { TTLType } from "@throttr/sdk";
+import type {FormSubmitEvent} from "@nuxt/ui";
+
+const {t} = useI18n()
+
+const emit = defineEmits(["success"]);
+
+const schema = z.object({
+  channel: z.string(),
+})
+
+type Schema = z.output<typeof schema>
+
+const state = reactive<Partial<Schema>>({
+  channel: '',
+})
+
+const toast = useToast()
+const route = useRoute()
+
+const open_chat = ref(false);
+const channel_listen = ref("");
+
+const submit = async (event: FormSubmitEvent<Schema>) => {
+  try {
+    channel_listen.value = event.data.channel;
+    open_chat.value = true;
+  } catch (error) {
+    throw error;
+  }
+}
+</script>
+
+<template>
+  <!-- LISTEN -->
+  <UModal v-model:open="open_chat"
+          title="Listen Channel"
+          description="Intercept and view channel messages"
+          :dismissible="true"
+          :close="true"
+          class="max-w-3xl">
+    <template #body>
+      <CardsChannelChatCard :channel="channel_listen" />
+    </template>
+  </UModal>
+  <!-- FORM -->
+  <UForm :schema="schema" :state="state" class="space-y-4" @submit="submit">
+    <UFormField label="Channel" name="channel">
+      <UInput v-model="state.channel" type="text" class="w-full" />
+    </UFormField>
+
+    <UButton label="Confirm" type="submit"/>
+  </UForm>
+</template>

components/Resources/Services/Channels.vue

@@ -31,12 +31,13 @@ const data = ref({
 });
 
 const loading = ref(true);
+const open_subscribe = ref(false);
 
 
 const fetch = async () => {
   loading.value = true;
   data.value = await services.channels(route.params.id) as ChannelsResponse;
-  toast.add({title: t('forms.event', { name: "Channels Retrieved ⤑ Success"}), color: 'success'})
+  toast.add({title: t('forms.event', {name: "Channels Retrieved ⤑ Success"}), color: 'success'})
   console.log("Stats Retrieved ⤑ Success", data.value)
   loading.value = false;
 }
@@ -49,9 +50,24 @@ onMounted(async () => {
 <template>
   <div>
     <div v-if="!loading">
+      <!-- SUBSCRIBE -->
+      <UModal v-model:open="open_subscribe"
+              title="Subscribe"
+              description="Complete the form to start to intercept channel"
+              :dismissible="true"
+              :close="true"
+              class="max-w-sm">
+        <template #body>
+          <FormsSubscribeForm />
+        </template>
+      </UModal>
+
       <UCard>
-        <UButton type="button" @click="fetch">Reload</UButton>
-          <TablesChannelsTable :channels="data.channels" v-on:reload="fetch"/>
+        <div class="flex gap-2">
+          <UButton type="button" @click="fetch">Reload</UButton>
+          <UButton type="button" @click="open_subscribe = true">Subscribe</UButton>
+        </div>
+        <TablesChannelsTable :channels="data.channels" v-on:reload="fetch"/>
       </UCard>
     </div>
   </div>