add bx selector

.env.example

@@ -0,0 +1,3 @@
+VTK_KEYS='{"office":"TOKEN","park":"TOKEN"}'
+BX_API_CALL=
+TG_TOKEN=

front/assets/css/main.css

@@ -0,0 +1,12 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer components {
+    a[href][target="_blank"] {
+        @apply text-pink-500 hover:text-pink-700
+    }
+    code {
+        @apply bg-slate-200 border-slate-300 border rounded p-1 cursor-pointer
+    }
+}

front/nuxt.config.ts

@@ -7,6 +7,7 @@ export default defineNuxtConfig({
     viewer: true,
     // and more...
   },
+  css: ['~/assets/css/main.css'],
   ssr: false,
   devServer: {
     port: 3010

front/pages/bx/tg.vue

@@ -11,7 +11,7 @@ interface APIBody {
     status: 'success' | 'error'
 }
 
-const steps = ['get_me', 'get_user_id', 'get_bx']
+const steps = ['get_me', 'get_user_id', 'get_bx', "end_step", "test_webhook"]
 
 const { data, pending, error, status } = await useLazyFetch<APIBody>(`${config.public.apiBase}/api/tg/get_me`, { server: false })
 
@@ -21,8 +21,18 @@ const shown_steps = ref<typeof steps>(['get_me'])
 const loading = ref<boolean>(false)
 const disabled = ref<boolean>(false)
 
-const serverData = ref<any>()
+const tg_data = ref<any>()
-const serverData2 = ref<any>()
+const bx_data = ref<any>()
+
+const selected_tg = ref()
+const selected_bx = ref()
+
+const isShown = (step: typeof steps[number]) => {
+    return shown_steps.value.includes(step)
+}
+const isPassed = (step: typeof steps[number]) => {
+    return [{ 'line-through': passed_step.value.includes(step) }]
+}
 
 const passToStep = (stepName: typeof steps[number]) => {
     try {
@@ -35,7 +45,6 @@ const passToStep = (stepName: typeof steps[number]) => {
 }
 
 const nextStep = async () => {
-    passed_step.value.push(step.value)
     if (step.value == 'get_me') {
         await retryStep('get_user_id')
         passToStep('get_user_id')
@@ -44,50 +53,96 @@ const nextStep = async () => {
         await retryStep('get_bx')
         passToStep('get_bx')
     }
+    else if (step.value == 'get_bx') {
+        if (!selected_bx.value) {
+            return
+        }
+        await retryStep('end_step')
+        passToStep('end_step')
+    }
+    else if (step.value == 'end_step') {
+        await retryStep('test_webhook')
+        passToStep('test_webhook')
+    }
 }
 const retryStep = async (stepName: typeof steps[number]) => {
     if (stepName == 'get_user_id') {
         loading.value = true
         const tg_res = await $fetch<APIBody>(`${config.public.apiBase}/api/tg/get_updates`)
-        serverData.value = tg_res.data
+        tg_data.value = tg_res.data
         loading.value = false
     }
     else if (stepName == 'get_bx') {
         loading.value = true
+        selected_tg.value = tg_data.value[0].message.chat.id
         const bx_res = await $fetch<APIBody>(`${config.public.apiBase}/api/bx/get_users`)
-        serverData2.value = bx_res.data
+        bx_data.value = bx_res.data
         loading.value = false
     }
 }
+
+const testWebhook = async () => {
+    const bx_res = await $fetch<APIBody>(`${config.public.apiBase}/api/bx/test_webhook/${selected_tg.value}`)
+    console.log(bx_res)
+}
 </script>
 <template>
     <UCard v-if="!pending && data">
         <template #header>
             Для получения уведомлений в тг при пинге в битриксе:
         </template>
-        <div :class="[{ 'line-through': passed_step.includes('get_me') }]" v-if="shown_steps.includes('get_me')">
+        <ol class="list-decimal pl-4">
-            Напишите <code class="code">/start</code> боту <NuxtLink class="text-pink-500" :external="true"
+            <li :class="isPassed('get_me')" v-if="isShown('get_me')">
-                :href="`https://t.me/${data.data.username}`" target="_blank">@{{ data.data.username }}</NuxtLink>
+                Напишите боту <ULink :external="true" target="_blank"
-        </div>
+                    :to="`https://t.me/${data.data.username}?start=service_monitoring`">@{{
-        <div :class="[{ 'line-through': passed_step.includes('get_user_id') }]"
+                        data.data.username }}
-            v-if="shown_steps.includes('get_user_id') && serverData">
+                </ULink> (это ссылка)
-            Ваши данные пользователя
+            </li>
-            <ul>
+            <li :class="isPassed('get_user_id')" v-if="isShown('get_user_id') && tg_data">
-                <li>{{ [serverData[0].message.chat.first_name, serverData[0].message.chat.last_name,
+                Ваши данные пользователя. Нажмите зеленую кнопку, если все верно:
-                serverData[0].message.chat.username].filter(Boolean).join(' ') }}</li>
+                <ul>
-                <li>{{ serverData[0].message.chat.id }}</li>
+                    <li v-for="item in tg_data.slice(0, 1)">
-            </ul>
+                        Имя: {{ [item.message.chat.first_name, item.message.chat.last_name,
-        </div>
+                        item.message.chat.username].filter(Boolean).join(' ') }}<br />
-        <div :class="[{ 'line-through': passed_step.includes('get_bx') }]" v-if="shown_steps.includes('get_bx') && serverData2">
+                        ID: <code class="code">{{ item.message.chat.id }}</code>
-            Ваши данные в битриксе
+                    </li>
-            {{ serverData2 }}
+                </ul>
-        </div>
+            </li>
-
+            <li :class="isPassed('get_bx')" v-if="isShown('get_bx') && bx_data">
+                Ваши данные в битриксе. Выберите свой профиль :)
+                <USelectMenu clear-search-on-close class="w-full lg:w-48" placeholder="Ваш аккаунт" searchable
+                    searchable-placeholder="Искать..." :options="bx_data
+                        .sort((a: any, b: any) => a.LAST_NAME.localeCompare(b.LAST_NAME))
+                        .map((el: any) => { return { id: el.ID, label: [el.NAME, el.LAST_NAME].join(' ') } })"
+                    size="lg" v-model="selected_bx" :disabled="passed_step.includes('get_bx')" />
+            </li>
+            <li :class="isPassed('end_step')" v-if="shown_steps.includes('end_step')">
+                <p>
+                    Вот ваша ссылка для формирования вебхука
+                    <code>https://gi.svs-tech.pro/integration_tg/{{ selected_bx.id }}/{{ selected_tg }}</code>
+                </p>
+                <p>
+                    Теперь вам осталось <ULink to="https://crm.svs-tech.pro/devops/section/standard/" target="_blank">
+                        создать исходящий вебхук</ULink> в Битрикс24.
+                </p>
+                <p>
+                    Вставьте туда этот урл и укажите События <i>Добавление комментария к задаче (ONTASKCOMMENTADD)</i>
+                </p>
+            </li>
+            <li :class="isPassed('test_webhook')" v-if="shown_steps.includes('test_webhook')">
+                Если вы установили вебхук - можете его проверить!
+            </li>
+        </ol>
         <template #footer>
             <div class="flex gap-4">
-                <UButton color="orange" v-if="['get_user_id'].includes(step)" @click="retryStep(step)">Ошибка в данных
+                <UButton color="orange" v-if="['get_user_id'].includes(step)" @click="retryStep(step)"
+                    :loading="loading" :disabled="disabled">Ошибка в данных
                 </UButton>
-                <UButton :loading="loading" :disabled="disabled" @click="nextStep">Сделано</UButton>
+                <UButton @click="testWebhook" v-else-if="step == 'test_webhook'">Проверить</UButton>
+                
+                <UButton v-if="step !== 'test_webhook'" :loading="loading" :disabled="disabled || (step == 'get_bx' && !selected_bx)"
+                    @click="nextStep">
+                    Сделано</UButton>
             </div>
         </template>
     </UCard>

front/tailwind.config.js

@@ -9,4 +9,5 @@ module.exports = {
             }
         },
     },
+    plugins: []
 };

main.py

@@ -107,7 +107,7 @@ async def get_tg_data():
 @api_app.get("/tg/get_updates")
 async def get_tg_data():
     try:
-        url = f"https://api.telegram.org/bot{TG_TOKEN}/getUpdates"
+        url = f"https://api.telegram.org/bot{TG_TOKEN}/getUpdates?offset=-1"
         res = requests.get(url)
         logger.info(url)
         data = res.json()
@@ -119,7 +119,7 @@ async def get_tg_data():
         raise HTTPException(status_code=500, detail=str(e))
     
 @api_app.get("/bx/get_users")
-async def get_tg_data():
+async def get_bx_users():
     try:
         url = f"{BX_API_CALL}user.get.json"
         res = requests.get(url)
@@ -129,6 +129,18 @@ async def get_tg_data():
     except Exception as e:
         logger.error(e)
         raise HTTPException(status_code=500, detail=str(e))
+    
+@api_app.get("/bx/test_webhook/{bx_id}")
+async def bx_test_webhook(bx_id):
+    try:
+        url = f"{BX_API_CALL}task.commentitem.add?taskId=447&fields[POST_MESSAGE]=[USER={bx_id}]Упоминание[/USER]"
+        res = requests.get(url)
+        logger.info(url)
+        data = res.json()
+        return {"status": "success", "data": data}
+    except Exception as e:
+        logger.error(e)
+        raise HTTPException(status_code=500, detail=str(e))
 
 
 app = FastAPI(title="main app")