<template>
- <h2>Action Set Supervision Url</h2>
- <h3>Charging Station {{ chargingStationId }}</h3>
+ <h1 id="action">Set Supervision Url</h1>
+ <h2>{{ chargingStationId }}</h2>
<p>Supervision Url:</p>
<input
id="supervision-url"
- v-model="state.supervisionUrl"
- type="text"
+ v-model.trim="state.supervisionUrl"
+ type="url"
name="supervision-url"
- placeholder="supervision url"
+ placeholder="wss://"
/>
<br />
<Button
+ id="action-button"
@click="
() => {
- uiClient
- .setSupervisionUrl(props.hashId, state.supervisionUrl)
+ $uiClient
+ .setSupervisionUrl(hashId, state.supervisionUrl)
+ .then(() => {
+ $toast.success('Supervision url successfully set')
+ })
.catch((error: Error) => {
- // TODO: add code for UI notifications or other error handling logic
+ $toast.error('Error at setting supervision url')
console.error('Error at setting supervision url:', error)
})
.finally(() => {
})
}
"
- >Set Supervision Url</Button
>
- <Button @click="$router.push({ name: 'charging-stations' })">Cancel</Button>
+ Set Supervision Url
+ </Button>
</template>
<script setup lang="ts">
-import { getCurrentInstance, reactive } from 'vue'
+import { ref } from 'vue'
import Button from '@/components/buttons/Button.vue'
-const props = defineProps<{
+defineProps<{
hashId: string
chargingStationId: string
}>()
-const state = reactive({
+const state = ref<{ supervisionUrl: string }>({
supervisionUrl: ''
})
-
-const uiClient = getCurrentInstance()?.appContext.config.globalProperties.$uiClient
</script>
<style>
#supervision-url {
- text-align: center;
+ width: 90%;
+ text-align: left;
}
</style>