add bx selector

2024-05-15 21:51:42 +03:00 · 2024-05-15 21:51:42 +03:00 · c273a173c9
parent 24cf202964
commit c273a173c9
6 changed files with 112 additions and 28 deletions
--- a/.env.example
+++ b/.env.example
@ -0,0 +1,3 @@
+VTK_KEYS='{"office":"TOKEN","park":"TOKEN"}'
+BX_API_CALL=
+TG_TOKEN=
--- a/front/assets/css/main.css
+++ b/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
+    }
+}
--- a/front/nuxt.config.ts
+++ b/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
--- a/front/pages/bx/tg.vue
+++ b/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 serverData2 = ref<any>()
+const tg_data = 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')">
-            Напишите <code class="code">/start</code> боту <NuxtLink class="text-pink-500" :external="true"
-                :href="`https://t.me/${data.data.username}`" target="_blank">@{{ data.data.username }}</NuxtLink>
-        </div>
-        <div :class="[{ 'line-through': passed_step.includes('get_user_id') }]"
-            v-if="shown_steps.includes('get_user_id') && serverData">
-            Ваши данные пользователя
-            <ul>
-                <li>{{ [serverData[0].message.chat.first_name, serverData[0].message.chat.last_name,
-                serverData[0].message.chat.username].filter(Boolean).join(' ') }}</li>
-                <li>{{ serverData[0].message.chat.id }}</li>
-            </ul>
-        </div>
-        <div :class="[{ 'line-through': passed_step.includes('get_bx') }]" v-if="shown_steps.includes('get_bx') && serverData2">
-            Ваши данные в битриксе
-            {{ serverData2 }}
-        </div>
-
+        <ol class="list-decimal pl-4">
+            <li :class="isPassed('get_me')" v-if="isShown('get_me')">
+                Напишите боту <ULink :external="true" target="_blank"
+                    :to="`https://t.me/${data.data.username}?start=service_monitoring`">@{{
+                        data.data.username }}
+                </ULink> (это ссылка)
+            </li>
+            <li :class="isPassed('get_user_id')" v-if="isShown('get_user_id') && tg_data">
+                Ваши данные пользователя. Нажмите зеленую кнопку, если все верно:
+                <ul>
+                    <li v-for="item in tg_data.slice(0, 1)">
+                        Имя: {{ [item.message.chat.first_name, item.message.chat.last_name,
+                        item.message.chat.username].filter(Boolean).join(' ') }}<br />
+                        ID: <code class="code">{{ item.message.chat.id }}</code>
+                    </li>
+                </ul>
+            </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>
--- a/front/tailwind.config.js
+++ b/front/tailwind.config.js
@ -9,4 +9,5 @@ module.exports = {
            }
        },
    },
+    plugins: []
 };
--- a/main.py
+++ b/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")