|
| 1 | +<template> |
| 2 | + <JsonModal |
| 3 | + name="ocppforwarder" |
| 4 | + :title="$t('config.ocppforwarder.title')" |
| 5 | + :description="$t('config.ocppforwarder.description')" |
| 6 | + endpoint="/config/ocppforwarder" |
| 7 | + state-key="ocppforwarder" |
| 8 | + store-values-in-array |
| 9 | + disable-remove |
| 10 | + @changed="$emit('changed')" |
| 11 | + > |
| 12 | + <template #default="{ values }: { values: OcppForwarderRule[] }"> |
| 13 | + <div |
| 14 | + v-for="(rule, index) in values" |
| 15 | + :key="index" |
| 16 | + class="mb-3" |
| 17 | + data-testid="ocppforwarder-rule" |
| 18 | + > |
| 19 | + <hr v-if="index > 0" class="my-4" /> |
| 20 | + <FormRow |
| 21 | + :id="`ocppforwarderStationId-${index}`" |
| 22 | + :label="$t('config.ocppforwarder.stationId')" |
| 23 | + :help="$t('config.ocppforwarder.stationIdHelp')" |
| 24 | + > |
| 25 | + <input |
| 26 | + :id="`ocppforwarderStationId-${index}`" |
| 27 | + v-model="rule.stationId" |
| 28 | + type="text" |
| 29 | + class="form-control" |
| 30 | + placeholder="*" |
| 31 | + spellcheck="false" |
| 32 | + autocomplete="off" |
| 33 | + required |
| 34 | + /> |
| 35 | + </FormRow> |
| 36 | + <FormRow |
| 37 | + :id="`ocppforwarderUpstreamUrl-${index}`" |
| 38 | + :label="$t('config.ocppforwarder.upstreamUrl')" |
| 39 | + :help="$t('config.ocppforwarder.upstreamUrlHelp')" |
| 40 | + > |
| 41 | + <div class="d-flex align-items-center gap-2"> |
| 42 | + <input |
| 43 | + :id="`ocppforwarderUpstreamUrl-${index}`" |
| 44 | + v-model="rule.upstreamUrl" |
| 45 | + type="text" |
| 46 | + class="form-control" |
| 47 | + inputmode="url" |
| 48 | + spellcheck="false" |
| 49 | + autocomplete="off" |
| 50 | + required |
| 51 | + /> |
| 52 | + <span |
| 53 | + v-if="rule.upstreamUrl" |
| 54 | + class="badge flex-shrink-0" |
| 55 | + :class="upstreamStatusClass(rule.upstreamUrl)" |
| 56 | + :title="$t(`config.ocppforwarder.${upstreamStatusKey(rule.upstreamUrl)}Help`)" |
| 57 | + data-bs-toggle="tooltip" |
| 58 | + > |
| 59 | + {{ $t(`config.ocppforwarder.${upstreamStatusKey(rule.upstreamUrl)}`) }} |
| 60 | + </span> |
| 61 | + </div> |
| 62 | + </FormRow> |
| 63 | + <FormRow |
| 64 | + :id="`ocppforwarderUpstreamStationId-${index}`" |
| 65 | + :label="$t('config.ocppforwarder.upstreamStationId')" |
| 66 | + :help="$t('config.ocppforwarder.upstreamStationIdHelp')" |
| 67 | + > |
| 68 | + <input |
| 69 | + :id="`ocppforwarderUpstreamStationId-${index}`" |
| 70 | + v-model="rule.upstreamStationId" |
| 71 | + type="text" |
| 72 | + class="form-control" |
| 73 | + :placeholder="rule.stationId" |
| 74 | + spellcheck="false" |
| 75 | + autocomplete="off" |
| 76 | + /> |
| 77 | + </FormRow> |
| 78 | + <FormRow |
| 79 | + :id="`ocppforwarderPassword-${index}`" |
| 80 | + :label="$t('config.ocppforwarder.password')" |
| 81 | + :help="$t('config.ocppforwarder.passwordHelp')" |
| 82 | + > |
| 83 | + <input |
| 84 | + :id="`ocppforwarderPassword-${index}`" |
| 85 | + v-model="rule.password" |
| 86 | + type="password" |
| 87 | + class="form-control" |
| 88 | + autocomplete="new-password" |
| 89 | + /> |
| 90 | + </FormRow> |
| 91 | + <button |
| 92 | + type="button" |
| 93 | + class="d-flex btn btn-sm btn-outline-secondary border-0 align-items-center gap-2 evcc-gray ms-auto" |
| 94 | + :aria-label="$t('config.general.remove')" |
| 95 | + tabindex="0" |
| 96 | + @click="values.splice(index, 1)" |
| 97 | + > |
| 98 | + <shopicon-regular-trash size="s" class="flex-shrink-0"></shopicon-regular-trash> |
| 99 | + {{ $t("config.general.remove") }} |
| 100 | + </button> |
| 101 | + </div> |
| 102 | + |
| 103 | + <hr class="my-4" /> |
| 104 | + |
| 105 | + <button |
| 106 | + type="button" |
| 107 | + class="d-flex btn btn-sm align-items-center gap-2 mb-3" |
| 108 | + :class="values.length === 0 ? 'btn-secondary' : 'btn-outline-secondary border-0 evcc-gray'" |
| 109 | + data-testid="ocppforwarder-add" |
| 110 | + tabindex="0" |
| 111 | + @click="values.push({ stationId: '', upstreamUrl: '' })" |
| 112 | + > |
| 113 | + <shopicon-regular-plus size="s" class="flex-shrink-0"></shopicon-regular-plus> |
| 114 | + {{ $t("config.ocppforwarder.add") }} |
| 115 | + </button> |
| 116 | + </template> |
| 117 | + </JsonModal> |
| 118 | +</template> |
| 119 | + |
| 120 | +<script lang="ts"> |
| 121 | +import "@h2d2/shopicons/es/regular/plus"; |
| 122 | +import "@h2d2/shopicons/es/regular/trash"; |
| 123 | +import { defineComponent } from "vue"; |
| 124 | +import JsonModal from "./JsonModal.vue"; |
| 125 | +import FormRow from "./FormRow.vue"; |
| 126 | +import type { OcppForwarderSession } from "@/types/evcc"; |
| 127 | +import store from "@/store"; |
| 128 | +
|
| 129 | +export default defineComponent({ |
| 130 | + name: "OcppForwarderModal", |
| 131 | + components: { JsonModal, FormRow }, |
| 132 | + emits: ["changed"], |
| 133 | + computed: { |
| 134 | + sessions(): OcppForwarderSession[] { |
| 135 | + return store.state?.ocppforwarderstatus || []; |
| 136 | + }, |
| 137 | + }, |
| 138 | + methods: { |
| 139 | + // Returns true if any active session has an upstream connection to this URL. |
| 140 | + upstreamStatusKey(url: string): string { |
| 141 | + if (!this.sessions.length) return "upstreamIdle"; |
| 142 | + const base = url.replace(/\/$/, ""); |
| 143 | + const connected = this.sessions.some( |
| 144 | + (s) => s.upstreamUrl === base && s.upstreamConnected |
| 145 | + ); |
| 146 | + return connected ? "upstreamConnected" : "upstreamDisconnected"; |
| 147 | + }, |
| 148 | + upstreamStatusClass(url: string): string { |
| 149 | + if (!this.sessions.length) return "bg-secondary"; |
| 150 | + const base = url.replace(/\/$/, ""); |
| 151 | + const connected = this.sessions.some( |
| 152 | + (s) => s.upstreamUrl === base && s.upstreamConnected |
| 153 | + ); |
| 154 | + return connected ? "bg-success" : "bg-warning"; |
| 155 | + }, |
| 156 | + }, |
| 157 | +}); |
| 158 | +</script> |
0 commit comments