ui/web/src/components/actions/SetSupervisionUrl.vue

   1 <template>
   2   <h1 id="action">Action</h1>
   3   <h2>Set Supervision Url</h2>
   4   <h3>Charging Station {{ chargingStationId }}</h3>
   5   <p>Supervision Url:</p>
   6   <input
   7     id="supervision-url"
   8     v-model.trim="state.supervisionUrl"
   9     type="url"
  10     name="supervision-url"
  11     placeholder="wss://"
  12   />
  13   <br />
  14   <Button
  15     id="action-button"
  16     @click="
  17       () => {
  18         uiClient
  19           .setSupervisionUrl(props.hashId, state.supervisionUrl)
  20           .then(() => {
  21             $toast.success('Supervision url successfully set')
  22           })
  23           .catch((error: Error) => {
  24             $toast.error('Error at setting supervision url')
  25             console.error('Error at setting supervision url:', error)
  26           })
  27           .finally(() => {
  28             $router.push({ name: 'charging-stations' })
  29           })
  30       }
  31     "
  32   >
  33     Set Supervision Url
  34   </Button>
  35   <Button id="action-button" @click="$router.push({ name: 'charging-stations' })">Cancel</Button>
  36 </template>
  37
  38 <script setup lang="ts">
  39 import { getCurrentInstance, reactive } from 'vue'
  40 import Button from '@/components/buttons/Button.vue'
  41
  42 const props = defineProps<{
  43   hashId: string
  44   chargingStationId: string
  45 }>()
  46
  47 const state = reactive({
  48   supervisionUrl: ''
  49 })
  50
  51 const uiClient = getCurrentInstance()?.appContext.config.globalProperties.$uiClient
  52 </script>
  53
  54 <style>
  55 #supervision-url {
  56   width: 90%;
  57   text-align: left;
  58 }
  59 </style>