ui/web/src/components/charging-stations/CSConnector.vue

   1 <template>
   2   <tr class="connectors-table__row">
   3     <td class="connectors-table__column">{{ connectorId }}</td>
   4     <td class="connectors-table__column">{{ connector.status ?? 'Ø' }}</td>
   5     <td class="connectors-table__column">
   6       {{ connector.transactionStarted === true ? 'Yes' : 'No' }}
   7     </td>
   8     <td class="connectors-table__column">
   9       {{ atgStatus?.start === true ? 'Yes' : 'No' }}
  10     </td>
  11     <td class="connectors-table__column">
  12       <Button @click="startTransaction()">Start Transaction</Button>
  13       <!-- <IdTagInputModal
  14         :visibility="state.isIdTagModalVisible"
  15         :id-tag="state.idTag"
  16         @close="hideIdTagModal()"
  17         @done="compose(state.transaction, hideIdTagModal)()"
  18       >
  19         Start Transaction
  20       </IdTagInputModal> -->
  21       <Button @click="stopTransaction()">Stop Transaction</Button>
  22       <Button @click="startAutomaticTransactionGenerator()">Start ATG</Button>
  23       <Button @click="stopAutomaticTransactionGenerator()">Stop ATG</Button>
  24     </td>
  25   </tr>
  26 </template>
  27
  28 <script setup lang="ts">
  29 import { getCurrentInstance } from 'vue'
  30 // import { reactive } from 'vue'
  31 // import IdTagInputModal from '@/components/charging-stations/IdTagInputModal.vue'
  32 import Button from '@/components/buttons/Button.vue'
  33 import type { ConnectorStatus, Status } from '@/types'
  34 // import { compose } from '@/composables'
  35
  36 const props = defineProps<{
  37   hashId: string
  38   connectorId: number
  39   connector: ConnectorStatus
  40   atgStatus?: Status
  41   transactionId?: number
  42   idTag?: string
  43 }>()
  44
  45 // type State = {
  46 //   isIdTagModalVisible: boolean
  47 //   idTag: string
  48 //   transaction: () => void
  49 // }
  50
  51 // const state: State = reactive({
  52 //   isIdTagModalVisible: false,
  53 //   idTag: '',
  54 //   transaction: startTransaction
  55 // })
  56
  57 // function getIdTag(transaction: () => void): void {
  58 //   state.transaction = transaction
  59 //   showTagModal()
  60 // }
  61
  62 // function showTagModal(): void {
  63 //   state.isIdTagModalVisible = true
  64 // }
  65 // function hideIdTagModal(): void {
  66 //   state.isIdTagModalVisible = false
  67 // }
  68
  69 const UIClient = getCurrentInstance()?.appContext.config.globalProperties.$UIClient
  70
  71 function startTransaction(): void {
  72   UIClient.startTransaction(props.hashId, props.connectorId, props.idTag)
  73 }
  74 function stopTransaction(): void {
  75   UIClient.stopTransaction(props.hashId, props.transactionId)
  76 }
  77 function startAutomaticTransactionGenerator(): void {
  78   UIClient.startAutomaticTransactionGenerator(props.hashId, props.connectorId)
  79 }
  80 function stopAutomaticTransactionGenerator(): void {
  81   UIClient.stopAutomaticTransactionGenerator(props.hashId, props.connectorId)
  82 }
  83 </script>