Config UI: make messengers configurable devices

api/api.go

@@ -291,3 +291,8 @@ type Circuit interface {
 type Redactor interface {
 	Redacted() any
 }
+
+// Messenger implements message sending
+type Messenger interface {
+	Send(title, msg string)
+}

api/globalconfig/types.go

@@ -20,40 +20,50 @@ import (
 
 // ConfigStatus for publishing config, status and source to UI and external systems
 type ConfigStatus struct {
-	Config   any  `json:"config,omitempty"`
-	Status   any  `json:"status,omitempty"`
-	FromYaml bool `json:"fromYaml,omitempty"`
+	Config     any        `json:"config,omitempty"`
+	Status     any        `json:"status,omitempty"`
+	FromYaml   bool       `json:"fromYaml,omitempty"`
+	YamlSource YamlSource `json:"yamlSource,omitempty"`
 }
 
+type YamlSource string
+
+const (
+	YamlSourceFs   YamlSource = "fs"
+	YamlSourceDb   YamlSource = "db"
+	YamlSourceNone YamlSource = ""
+)
+
 type All struct {
-	Network      Network
-	Ocpp         ocpp.Config
-	Log          string
-	SponsorToken string
-	Plant        string // telemetry plant id
-	Telemetry    bool
-	Mcp          bool
-	Metrics      bool
-	Profile      bool
-	Levels       map[string]string
-	Interval     time.Duration
-	Database     DB
-	Mqtt         Mqtt
-	ModbusProxy  []ModbusProxy
-	Javascript   []Javascript
-	Go           []Go
-	Influx       Influx
-	EEBus        eebus.Config
-	HEMS         Hems
-	SHM          shm.Config
-	Messaging    Messaging
-	Meters       []config.Named
-	Chargers     []config.Named
-	Vehicles     []config.Named
-	Tariffs      Tariffs
-	Site         map[string]any
-	Loadpoints   []config.Named
-	Circuits     []config.Named
+	Network         Network
+	Ocpp            ocpp.Config
+	Log             string
+	SponsorToken    string
+	Plant           string // telemetry plant id
+	Telemetry       bool
+	Mcp             bool
+	Metrics         bool
+	Profile         bool
+	Levels          map[string]string
+	Interval        time.Duration
+	Database        DB
+	Mqtt            Mqtt
+	ModbusProxy     []ModbusProxy
+	Javascript      []Javascript
+	Go              []Go
+	Influx          Influx
+	EEBus           eebus.Config
+	HEMS            Hems
+	SHM             shm.Config
+	Messaging       Messaging
+	MessagingEvents MessagingEvents
+	Meters          []config.Named
+	Chargers        []config.Named
+	Vehicles        []config.Named
+	Tariffs         Tariffs
+	Site            map[string]any
+	Loadpoints      []config.Named
+	Circuits        []config.Named
 }
 
 type Javascript struct {
@@ -138,13 +148,17 @@ type DB struct {
 }
 
 type Messaging struct {
-	Events   map[string]MessagingEventTemplate
+	Events   MessagingEvents
 	Services []config.Typed
 }
 
+type MessagingEvents = map[string]MessagingEventTemplate
+
 // MessagingEventTemplate is the push message configuration for an event
 type MessagingEventTemplate struct {
-	Title, Msg string
+	Title    string `json:"title"`
+	Msg      string `json:"msg"`
+	Disabled bool   `json:"disabled"`
 }
 
 func (c Messaging) IsConfigured() bool {

assets/css/app.css

@@ -773,3 +773,26 @@ input::-webkit-date-and-time-value {
 .tabular {
 	font-variant-numeric: tabular-nums;
 }
+
+/* Collapsible wrapper pattern with choreographed animation */
+.collapsible-wrapper {
+	display: grid;
+	grid-template-rows: 0fr;
+	transition: grid-template-rows var(--evcc-transition-fast) ease 0.2s;
+}
+
+.collapsible-wrapper.open {
+	grid-template-rows: 1fr;
+	transition: grid-template-rows var(--evcc-transition-fast) ease;
+}
+
+.collapsible-content {
+	overflow: hidden;
+	opacity: 0;
+	transition: opacity 0.2s ease;
+}
+
+.collapsible-wrapper.open .collapsible-content {
+	opacity: 1;
+	transition: opacity var(--evcc-transition-fast) ease 0.2s;
+}

assets/js/components/ChargingPlans/PlanStrategy.vue

@@ -1,6 +1,6 @@
 <template>
-	<div class="strategy-wrapper" :class="{ open: show }">
-		<div class="strategy-content">
+	<div class="collapsible-wrapper" :class="{ open: show }">
+		<div class="collapsible-content pb-3">
 			<div v-if="disabled" class="row mb-4">
 				<div class="small text-muted">
 					<strong class="text-primary">{{ $t("general.note") }}</strong>
@@ -142,33 +142,3 @@ export default defineComponent({
 	},
 });
 </script>
-
-<style scoped>
-.strategy-wrapper {
-	display: grid;
-	grid-template-rows: 0fr;
-	margin-bottom: 0;
-	transition:
-		grid-template-rows 0.3s ease 0.2s,
-		margin-bottom 0.3s ease 0.2s;
-}
-
-.strategy-wrapper.open {
-	grid-template-rows: 1fr;
-	margin-bottom: 1rem;
-	transition:
-		grid-template-rows 0.3s ease,
-		margin-bottom 0.3s ease;
-}
-
-.strategy-content {
-	overflow: hidden;
-	opacity: 0;
-	transition: opacity 0.2s ease;
-}
-
-.open .strategy-content {
-	opacity: 1;
-	transition: opacity 0.3s ease 0.2s;
-}
-</style>

assets/js/components/Config/DeviceCard.vue

@@ -19,20 +19,12 @@
 				:title="name"
 				>{{ title }}</strong
 			>
-			<button
-				ref="tooltip"
-				type="button"
-				class="btn btn-sm btn-outline-secondary position-relative border-0 p-2 edit-button"
-				:class="{ 'opacity-25': !editable, invisible: noEditButton }"
-				data-bs-toggle="tooltip"
-				data-bs-html="true"
-				:title="tooltipTitle"
-				:aria-label="editable ? $t('config.main.edit') : null"
-				:disabled="!editable || noEditButton"
-				@click="edit"
-			>
-				<shopicon-regular-adjust size="s"></shopicon-regular-adjust>
-			</button>
+			<DeviceCardEditIcon
+				:editable="editable"
+				:noEditButton="noEditButton"
+				:badge="badge"
+				@edit="$emit('edit')"
+			/>
 		</div>
 		<div v-if="$slots.tags">
 			<hr class="my-3 divide" />
@@ -42,12 +34,11 @@
 </template>
 
 <script>
-import "@h2d2/shopicons/es/regular/adjust";
-import "@h2d2/shopicons/es/regular/invoice";
-import Tooltip from "bootstrap/js/dist/tooltip";
+import DeviceCardEditIcon from "./DeviceCardEditIcon.vue";
 
 export default {
 	name: "DeviceCard",
+	components: { DeviceCardEditIcon },
 	props: {
 		name: String,
 		title: String,
@@ -56,49 +47,9 @@ export default {
 		unconfigured: Boolean,
 		warning: Boolean,
 		noEditButton: Boolean,
+		badge: Boolean,
 	},
 	emits: ["edit"],
-	data() {
-		return {
-			tooltip: null,
-		};
-	},
-	computed: {
-		tooltipTitle() {
-			if (!this.name) {
-				return "";
-			}
-			let title = `${this.$t("config.main.name")}: <span class='font-monospace'>${this.name}</span>`;
-			if (!this.editable) {
-				title += `<div class="mt-1">${this.$t("config.general.fromYamlHint")}</div>`;
-			}
-			return `<div class="text-start">${title}</div>`;
-		},
-	},
-	watch: {
-		tooltipTitle() {
-			this.initTooltip();
-		},
-	},
-	mounted() {
-		this.initTooltip();
-	},
-	methods: {
-		edit() {
-			if (this.editable) {
-				this.tooltip?.hide();
-				this.$emit("edit");
-			}
-		},
-		initTooltip() {
-			this.$nextTick(() => {
-				this.tooltip?.dispose();
-				if (this.$refs.tooltip) {
-					this.tooltip = new Tooltip(this.$refs.tooltip);
-				}
-			});
-		},
-	},
 };
 </script>
 
@@ -129,15 +80,8 @@ export default {
 .icon:empty {
 	display: none;
 }
-.edit-button {
-	/* transparent button, right align icon */
-	margin-right: -0.5rem;
-}
 .divide {
 	margin-left: -1.5rem;
 	margin-right: -1.5rem;
 }
-button:disabled {
-	pointer-events: auto;
-}
 </style>

assets/js/components/Config/DeviceCardEditIcon.vue

@@ -0,0 +1,84 @@
+<template>
+	<button
+		ref="tooltip"
+		type="button"
+		class="btn btn-sm btn-outline-secondary position-relative border-0 p-2 edit-button"
+		:class="{ 'opacity-25': !editable, invisible: noEditButton }"
+		data-bs-toggle="tooltip"
+		data-bs-html="true"
+		:title="tooltipTitle"
+		:aria-label="editable ? $t('config.main.edit') : null"
+		:disabled="!editable || noEditButton"
+		@click="edit"
+	>
+		<span
+			v-if="badge"
+			class="position-absolute top-0 start-100 translate-middle p-2 rounded-circle bg-warning"
+		>
+			<span class="visually-hidden">new</span>
+		</span>
+		<shopicon-regular-adjust size="s"></shopicon-regular-adjust>
+	</button>
+</template>
+
+<script>
+import "@h2d2/shopicons/es/regular/adjust";
+import Tooltip from "bootstrap/js/dist/tooltip";
+
+export default {
+	name: "DeviceCardEditIcon",
+	props: {
+		editable: Boolean,
+		noEditButton: Boolean,
+		badge: Boolean,
+	},
+	emits: ["edit"],
+	data() {
+		return {
+			tooltip: null,
+		};
+	},
+	computed: {
+		tooltipTitle() {
+			if (!this.editable) {
+				return `<div class="text-start mt-1">${this.$t("config.general.fromYamlHint")}</div>`;
+			}
+			return "";
+		},
+	},
+	watch: {
+		tooltipTitle() {
+			this.initTooltip();
+		},
+	},
+	mounted() {
+		this.initTooltip();
+	},
+	methods: {
+		edit() {
+			if (this.editable) {
+				this.tooltip?.hide();
+				this.$emit("edit");
+			}
+		},
+		initTooltip() {
+			this.$nextTick(() => {
+				this.tooltip?.dispose();
+				if (this.$refs.tooltip && this.tooltipTitle) {
+					this.tooltip = new Tooltip(this.$refs.tooltip);
+				}
+			});
+		},
+	},
+};
+</script>
+
+<style scoped>
+.edit-button {
+	/* transparent button, right align icon */
+	margin-right: -0.5rem;
+}
+button:disabled {
+	pointer-events: auto;
+}
+</style>

assets/js/components/Config/DeviceModal/Actions.vue

@@ -7,7 +7,7 @@
 			@test="$emit('test')"
 		/>
 
-		<div class="my-4 d-flex justify-content-between">
+		<div class="mt-4 d-flex justify-content-between">
 			<button
 				v-if="isDeletable"
 				type="button"