forked from evcc-io/evcc
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Site: add config UI (BC) (evcc-io#9812)
- Loading branch information
Showing
47 changed files
with
3,844 additions
and
1,587 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,45 @@ | ||
| <template> | ||
| <li class="root"> | ||
| <button class="d-flex align-items-center justify-content-center p-3" @click="$emit('add')"> | ||
| <shopicon-regular-plus class="me-1"></shopicon-regular-plus> | ||
| {{ title }} | ||
| </button> | ||
| </li> | ||
| </template> | ||
|
|
||
| <script> | ||
| import "@h2d2/shopicons/es/regular/plus"; | ||
| export default { | ||
| name: "AddDeviceButton", | ||
| props: { | ||
| title: String, | ||
| }, | ||
| emits: ["add"], | ||
| }; | ||
| </script> | ||
|
|
||
| <style scoped> | ||
| .root { | ||
| padding: 0; | ||
| display: block; | ||
| list-style-type: none; | ||
| min-height: 9rem; | ||
| border-radius: 1rem; | ||
| border: 1px solid var(--evcc-gray-50); | ||
| padding: 1rem 1rem 0.5rem; | ||
| transition: border-color var(--evcc-transition-fast) linear; | ||
| } | ||
| .root:hover { | ||
| border-color: var(--evcc-default-text); | ||
| color: var(--evcc-default-text); | ||
| } | ||
| button { | ||
| border-radius: 1rem; | ||
| background: none; | ||
| border: none; | ||
| height: 100%; | ||
| width: 100%; | ||
| color: inherit; | ||
| } | ||
| </style> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,105 @@ | ||
| <template> | ||
| <li class="root py-2 px-4"> | ||
| <div class="d-flex align-items-center mb-2"> | ||
| <div class="icon me-2"> | ||
| <slot name="icon" /> | ||
| </div> | ||
| <strong class="flex-grow-1 text-nowrap text-truncate">{{ name }}</strong> | ||
| <button | ||
| v-if="unconfigured" | ||
| type="button" | ||
| class="btn btn-sm btn-outline-secondary position-relative border-0 p-2" | ||
| :title="$t('config.main.new')" | ||
| @click="$emit('configure')" | ||
| > | ||
| <shopicon-regular-adjust size="s"></shopicon-regular-adjust> | ||
| </button> | ||
| <button | ||
| v-else-if="editable" | ||
| type="button" | ||
| class="btn btn-sm btn-outline-secondary position-relative border-0 p-2" | ||
| :title="$t('config.main.edit')" | ||
| @click="$emit('edit')" | ||
| > | ||
| <shopicon-regular-adjust size="s"></shopicon-regular-adjust> | ||
| </button> | ||
| <button | ||
| v-else | ||
| ref="tooltip" | ||
| type="button" | ||
| class="btn btn-sm btn-outline-secondary position-relative border-0 p-2 opacity-25" | ||
| data-bs-toggle="tooltip" | ||
| :title="$t('config.main.yaml')" | ||
| > | ||
| <shopicon-regular-adjust size="s"></shopicon-regular-adjust> | ||
| </button> | ||
| </div> | ||
| <div v-if="unconfigured" class="text-center py-3 evcc-gray"> | ||
| {{ $t("config.main.unconfigured") }} | ||
| </div> | ||
| <slot v-else name="tags" /> | ||
| </li> | ||
| </template> | ||
|
|
||
| <script> | ||
| import "@h2d2/shopicons/es/regular/adjust"; | ||
| import "@h2d2/shopicons/es/regular/invoice"; | ||
| import "@h2d2/shopicons/es/regular/edit"; | ||
| import Tooltip from "bootstrap/js/dist/tooltip"; | ||
| export default { | ||
| name: "DeviceCard", | ||
| props: { | ||
| name: String, | ||
| editable: Boolean, | ||
| unconfigured: Boolean, | ||
| }, | ||
| data() { | ||
| return { | ||
| tooltip: null, | ||
| }; | ||
| }, | ||
| emits: ["edit", "configure"], | ||
| mounted() { | ||
| this.initTooltip(); | ||
| }, | ||
| watch: { | ||
| editable() { | ||
| this.initTooltip(); | ||
| }, | ||
| unconfigured() { | ||
| this.initTooltip(); | ||
| }, | ||
| }, | ||
| methods: { | ||
| initTooltip() { | ||
| this.$nextTick(() => { | ||
| this.tooltip?.dispose(); | ||
| if (this.$refs.tooltip) { | ||
| this.tooltip = new Tooltip(this.$refs.tooltip); | ||
| } | ||
| }); | ||
| }, | ||
| }, | ||
| }; | ||
| </script> | ||
| <style scoped> | ||
| .root { | ||
| display: block; | ||
| list-style-type: none; | ||
| min-height: 9rem; | ||
| color: var(--evcc-default-text); | ||
| border-radius: 1rem; | ||
| border: 1px solid var(--evcc-gray-50); | ||
| padding: 1rem 1rem 0.5rem; | ||
| transition: border-color var(--evcc-transition-fast) linear; | ||
| background: var(--evcc-box); | ||
| } | ||
| .root:hover { | ||
| border-color: var(--evcc-gray); | ||
| } | ||
| .icon:empty { | ||
| display: none; | ||
| } | ||
| </style> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,64 @@ | ||
| <template> | ||
| <div v-if="tags" class="d-flex mb-2 flex-wrap"> | ||
| <span | ||
| v-for="(entry, index) in entries" | ||
| :key="index" | ||
| class="badge text-bg-secondary me-2 mb-2" | ||
| :class="{ | ||
| 'text-bg-secondary': !entry.error, | ||
| 'text-bg-danger': entry.error, | ||
| }" | ||
| > | ||
| <strong>{{ $t(`config.deviceValue.${entry.name}`) }}:</strong> | ||
| {{ fmtDeviceValue(entry) }} | ||
| </span> | ||
| </div> | ||
| </template> | ||
| <script> | ||
| import formatter from "../../mixins/formatter"; | ||
| export default { | ||
| name: "DeviceTags", | ||
| props: { | ||
| tags: Object, | ||
| }, | ||
| mixins: [formatter], | ||
| computed: { | ||
| entries() { | ||
| return Object.entries(this.tags).map(([name, { value, error }]) => { | ||
| return { name, value, error }; | ||
| }); | ||
| }, | ||
| }, | ||
| methods: { | ||
| fmtDeviceValue(entry) { | ||
| const { name, value } = entry; | ||
| switch (name) { | ||
| case "power": | ||
| return this.fmtKw(value); | ||
| case "energy": | ||
| case "capacity": | ||
| case "chargedEnergy": | ||
| return this.fmtKWh(value * 1e3); | ||
| case "soc": | ||
| return `${this.fmtNumber(value, 1)}%`; | ||
| case "odometer": | ||
| case "range": | ||
| return `${this.fmtNumber(value, 0)} km`; | ||
| case "phaseCurrents": | ||
| return value.map((v) => this.fmtNumber(v, 0)).join(" ") + " A"; | ||
| case "phaseVoltages": | ||
| return value.map((v) => this.fmtNumber(v, 0)).join(" ") + " V"; | ||
| case "phasePowers": | ||
| return value.map((v) => this.fmtKw(v)).join(", "); | ||
| case "chargeStatus": | ||
| return value; | ||
| case "socLimit": | ||
| return `${this.fmtNumber(value)}%`; | ||
| } | ||
| return value; | ||
| }, | ||
| }, | ||
| }; | ||
| </script> | ||
| <style scoped></style> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.