История страницы

this.$robot.faceRecognizeService.onInfo(info => {


})

getCount (info: FaceStructure[]): number {
  return info.filter(user => user.id > FACE_RECOGNIZING_CODE).length
}

const count = this.getCount(info)

data () {
  return {
    count: 0
  }
},

if (count !== this.count) {
  this.count = count
}

getGeneralUser (info: FaceStructure[]): FaceStructure | undefined {
  return info.find(user => user.id > FACE_RECOGNIZING_CODE && user.is_tracking)
}

import { FaceStructure } from '@pb/api/dist/src/services/face_recognize'
import { Commit } from 'vuex'

export const MODULE_NAME = 'user'

interface UserStore {
  user: FaceStructure | undefined
}

export const ACTIONS = {
  SET_FACE_INFO: 'SET_FACE_INFO'
}

export const MUTATIONS = {
  SET_FACE_INFO: 'SET_FACE_INFO'
}

export const GETTERS = {
  GET_USER: 'GET_USER'
}

export const user = {
  namespaced: true,
  state: (): UserStore => ({
    user: undefined
  }),
  actions: {
    [ACTIONS.SET_FACE_INFO]: ({ commit }: { commit: Commit }, payload?: FaceStructure): void => commit(MUTATIONS.SET_FACE_INFO, payload)
  },
  mutations: {
    [MUTATIONS.SET_FACE_INFO]: (state: UserStore, payload?: FaceStructure): void => {
      state.user = payload
    }
  },
  getters: {
    [GETTERS.GET_USER]: (status: UserStore): FaceStructure | undefined => status.user
  }
}

computed: {
  ...mapGetters(USER, {
    person: USER_GETTERS.GET_USER
  })
}

const general = this.getGeneralUser(info)

if (general?.id !== this.person.id) {

}

...mapActions(USER, {
  setFaceInfo: USER_ACTIONS.SET_FACE_INFO
}),

if (this.count !== 1) {
  this.$router.push('/video')
}

{
  path: '/video',
  name: 'Video',
  component: () => import('../views/VideoStream.vue')
},

import store from '@/store'
import { GETTERS as USER_GETTERS, MODULE_NAME as USER } from '@/store/modules/user'
import router from '@/router'

export function checkPerson () {
  const personFromStorageId = store.getters[`${USER}/${USER_GETTERS.GET_USER}`]?.id ?? ''
  const personFromLocalStorage = JSON.parse(localStorage.getItem(personFromStorageId) || 'null')

  personFromLocalStorage == null
    ? router.push('/acquaintance')
    : router.push('/menu')
}

  mounted () {
    this.$robot.faceRecognizeService.onInfo(info => {
      const count = this.getCount(info)

      if (count !== this.count) {
        this.count = count
      }

      const general = this.getGeneralUser(info)

      if (general?.id !== this.person.id) {
        this.setFaceInfo(general)
      }

      if (this.count !== 1) {
        this.$router.push('/video')
      }

      checkPerson()
    })
  },

{
  path: '/acquaintance',
  name: 'Acquaintance',
  component: () => import('../views/AcquaintanceForm.vue')
},
{
  path: '/menu',
  name: 'MainMenu',
  component: () => import('../views/MainMenu.vue')
},

<template>
  <section class="face-request">
    <img
      id="video-stream"
      class="video-stream"
      src="http://localhost:8070/stream?topic=/facerecognition/image_raw&quality=60"
      alt="Видеопоток"
      width="768"
      height="432"
      @click.left="handleClick"
    />

    <pb-button
      class="_md"
      :disabled="disabled"
      @click="moveNext"
    >
      Продолжить
    </pb-button>
  </section>
</template>

<script lang="ts">
import { defineComponent } from 'vue'

export default defineComponent({
  name: 'VideoStream'
})
</script>

<style lang="scss" scoped>
.face-request {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  height: 100%;
  padding-bottom: 20px;

  & button {
    margin-top: 30px;
  }
}
</style>

type UnsubscribeFunction = () => boolean

interface Data {
  faceEventSubscriber?: UnsubscribeFunction,
  disabled: boolean
}

data (): Data {
  return {
    faceEventSubscriber: undefined,
    disabled: true
  }
},

mounted () {
  this.faceEventSubscriber = this.$robot.faceRecognizeService.onGeneralSetted(() => {
    this.disabled = false
  })
}

handleClick: function (event: MouseEvent & { target: HTMLImageElement}) {
  if (event.target) {
    const coordinates = {
      x: event.offsetX / event.target.clientWidth,
      y: event.offsetY / event.target.clientHeight
    }

    this.$robot.faceRecognizeService.touchGeneral(coordinates)
  }
}

moveNext (): void {
  checkPerson()
}

beforeUnmount () {
  const image = document.getElementById('video-stream') as HTMLImageElement
  image.src = ''

  this.faceEventSubscriber?.()
}

<template>
  <Header title="Как вас зовут?"/>

  <section class="acquaintance">
    <pb-input
      class="acquaintance__input"
      v-model="name"
      :input-options="{
        label: 'Ваше имя',
        placeholder: 'Введите имя',
        enableErase: true
      }"
    />

    <pb-button
      class="_lg"
      :disabled="!isNotEmptyName"
      @click="saveUser"
    >
      Продолжить
    </pb-button>
  </section>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import Header from '@/components/Header.vue'
import { AcquaintanceCore, AcquaintanceProcessSteps } from '@/helpers/AcquintanceCore'
import { mapActions, mapGetters } from 'vuex'
import { ACTIONS as USER_ACTIONS, GETTERS as USER_GETTERS, MODULE_NAME as USER } from '@/store/modules/user'

export default defineComponent({
  name: 'AcquaintanceForm',
  components: {
    Header
  }
})
</script>

<style lang="scss" scoped>
.acquaintance {
  display: flex;
  flex-direction: column;
  align-items: center;

  padding: 30px;

  &__input {
    width: 720px;
    margin-bottom: 60px;
  }
}
</style>

data () {
  return {
    name: '',
    core: new AcquaintanceCore(this.$robot)
  }
}

computed: {
  ...mapGetters(USER, {
    person: USER_GETTERS.GET_USER
  })
}

isNotEmptyName (): boolean {
  return Boolean(this.name.length)
}

methods: {
  ...mapActions(USER, {
    setFaceInfo: USER_ACTIONS.SET_FACE_INFO
  }),

  async saveUser (): Promise<void> {
    const minValidId = 1000
    if (this.person && this.person.id < minValidId) {
      const { newId, step } = await this.core.startAcquaintance(this.person, undefined, this.name)

      if (step === AcquaintanceProcessSteps.LocalAcquainted) {
        this.core.delLocalUser(newId)
      } else {
        this.setFaceInfo({ ...this.person, id: newId })
      }
    }

    localStorage.setItem(`${this.person?.id}`, JSON.stringify(this.person))

    this.$router.push('/menu')
  }
}

{
  path: '/menu',
  name: 'MainMenu',
  component: () => import('../views/MainMenu.vue')
}

<template>
  <section class="main-menu">
    <button
      class="main-menu__button"
      @click="aboutHotel"
    >
      Об отеле
    </button>
    <button
      class="main-menu__button"
      @click="toChat"
    >
      Поболтать
    </button>
    <button
      class="main-menu__button"
      @click="toData"
    >
      Персональные<br>данные
    </button>
  </section>
</template>

<script lang="ts">
import { defineComponent } from 'vue'

export default defineComponent({
  name: 'MainMenu',
})
</script>

<style lang="scss" scoped>
.main-menu {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;

  height: 100%;
  padding: 100px 20px;

  &__button {
    font-family: inherit;

    font-weight: 600;
    font-size: 32px;
    line-height: 42px;

    background-color: #ffffff;
    box-shadow: 0px 10px 15px -8px rgba(29, 29, 47, 0.2);
    border: none;
    border-radius: 10px;
  }
}
</style>

aboutHotel (): void {
  this.$robot.dialogService.sayReplicByName('ABOUT-HOTEL')
}

toChat (): void {
  this.$router.push('/chat')
}

{
  path: '/chat',
  name: 'Chat',
  component: () => import('../views/Chat.vue')
}

<template>
  <Header show-back-button/>
  <section class="chat">
    <h2>Задайте ваш вопрос!</h2>
    <img src="@/assets/chat-robot.png" width="600" height="320" alt="chat-robot">
  </section>
  <Footer/>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import Header from '@/components/Header.vue'
import Footer from '@/components/Footer.vue'

export default defineComponent({
  name: 'Chat',
  components: {
    Header,
    Footer
  }
})
</script>

<style lang="scss" scoped>
.chat {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;

  height: 565px;
  padding: 20px;

  & h2 {
    margin-bottom: 64px;

    font-size: 40px;
    font-weight: 400;
    line-height: 48px;
  }
}
</style>

mounted () {
  this.$robot.dialogService.setCase('chat')
}