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

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