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

   1 <template>
   2   <td class="cs-table__action-col">
   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__connector-col">{{ connectorId }}</td>
  21   <td class="cs-table__status-col">{{ connector.status }}</td>
  22   <td class="cs-table__transaction-col">{{ connector.transactionStarted ? 'Yes' : 'No' }}</td>
  23 </template>
  24
  25 <script setup lang="ts">
  26 // import { reactive } from 'vue'
  27 import Button from '../buttons/Button.vue'
  28 // import IdTagInputModal from './IdTagInputModal.vue'
  29 import type { ConnectorStatus } from '@/types'
  30 import { UIClient } from '@/composables/UIClient'
  31 // import { compose } from '@/composables/Utils'
  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 function startChargingStation(): void {
  66   UIClient.getInstance().startChargingStation(props.hashId)
  67 }
  68 function stopChargingStation(): void {
  69   UIClient.getInstance().stopChargingStation(props.hashId)
  70 }
  71 function openConnection(): void {
  72   UIClient.getInstance().openConnection(props.hashId)
  73 }
  74 function closeConnection(): void {
  75   UIClient.getInstance().closeConnection(props.hashId)
  76 }
  77 function startTransaction(): void {
  78   UIClient.getInstance().startTransaction(props.hashId, props.connectorId, props.idTag)
  79 }
  80 function stopTransaction(): void {
  81   UIClient.getInstance().stopTransaction(props.hashId, props.transactionId)
  82 }
  83 function startAutomaticTransactionGenerator(): void {
  84   UIClient.getInstance().startAutomaticTransactionGenerator(props.hashId, props.connectorId)
  85 }
  86 function stopAutomaticTransactionGenerator(): void {
  87   UIClient.getInstance().stopAutomaticTransactionGenerator(props.hashId, props.connectorId)
  88 }
  89 </script>