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