Migrate to Bootstrap 5, improve notifications, add supporter confetti (…

…evcc-io#954)

.storybook/main.js

@@ -1,4 +1,4 @@
 module.exports = {
   stories: ["../assets/js/**/*.stories.mdx", "../assets/js/**/*.stories.@(js|jsx|ts|tsx)"],
-  addons: ["@storybook/addon-links", "@storybook/addon-essentials"],
+  addons: ["@storybook/addon-links", "@storybook/addon-essentials", "@storybook/addon-postcss"],
 };

.storybook/preview-head.html

@@ -1,2 +1,4 @@
 <link href="/css/bootstrap.min.css" rel="stylesheet" />
+<script src="/js/bootstrap.min.js"></script>
+
 <link href="/css/app.css" rel="stylesheet" />

assets/index.html

@@ -31,6 +31,5 @@
     </script>
 
     <div id="app"></div>
-    <div id="toasts"></div>
   </body>
 </html>

assets/js/app.js

@@ -1,11 +1,9 @@
 import "../css/app.css";
 import "bootstrap/dist/css/bootstrap.min.css";
-import "popper.js";
 import "bootstrap";
 import Vue from "vue";
 import axios from "axios";
 import App from "./views/App";
-import Toasts from "./components/Toasts";
 import router from "./router";
 import store from "./store";
 
@@ -14,29 +12,21 @@ axios.defaults.baseURL =
   loc.protocol + "//" + loc.hostname + (loc.port ? ":" + loc.port : "") + loc.pathname + "api";
 axios.defaults.headers.post["Content-Type"] = "application/json";
 
-window.toasts = new Vue({
-  el: "#toasts",
+window.app = new Vue({
+  el: "#app",
+  router,
+  data: { store, notifications: [] },
   render: function (h) {
-    return h(Toasts, { props: { items: this.items, count: this.count } });
-  },
-  data: {
-    items: {},
-    count: 0,
+    return h(App, { props: { notifications: this.notifications } });
   },
-  name: "ToastsRoot",
   methods: {
     raise: function (msg) {
-      let found = false;
-      Object.keys(this.items).forEach(function (k) {
-        let m = this.items[k];
-        if (m.type == msg.type && m.message == msg.message) {
-          found = true;
-        }
-      }, this);
-      if (!found) {
-        msg.id = this.count++;
-        Vue.set(this.items, msg.id, msg);
-      }
+      console[msg.type](msg);
+      const withoutThisMsg = this.notifications.filter((m) => m.message !== msg.message);
+      this.notifications = [msg, ...withoutThisMsg];
+    },
+    clear: function () {
+      this.notifications = [];
     },
     error: function (msg) {
       msg.type = "error";
@@ -46,22 +36,11 @@ window.toasts = new Vue({
       msg.type = "warn";
       this.raise(msg);
     },
-    remove: function (msg) {
-      Vue.delete(this.items, msg.id);
-    },
   },
 });
 
-new Vue({
-  el: "#app",
-  router,
-  data: { store },
-  render: (h) => h(App),
-});
-
 window.setInterval(function () {
-  axios.get("health").catch(function (res) {
-    res.message = "Server unavailable";
-    window.toasts.error(res);
+  axios.get("health").catch(function () {
+    window.app.error({ message: "Server unavailable" });
   });
 }, 5000);

assets/js/components/Footer.stories.js

@@ -16,6 +16,7 @@ export const KeinUpdate = Template.bind({});
 KeinUpdate.args = {
   version: { installed: "0.40" },
 };
+
 export const UpdateVerfuegbar = Template.bind({});
 UpdateVerfuegbar.args = {
   version: {
@@ -25,6 +26,15 @@ UpdateVerfuegbar.args = {
   },
 };
 
+export const Sponsor = Template.bind({});
+Sponsor.args = {
+  version: {
+    installed: "0.36",
+    available: "0.40",
+  },
+  sponsor: "naltatis",
+};
+
 export const Updater = Template.bind({});
 Updater.args = {
   version: {

assets/js/components/Footer.vue

@@ -1,40 +1,25 @@
 <template>
-	<footer class="py-3 py-md-5 mt-3 mt-md-5 border-top">
-		<div class="container">
-			<div class="row">
-				<div class="col-6">
-					<Version v-bind="version" />
-				</div>
-				<div class="col-6 text-right">
-					<small class="text-black">
-						<a href="https://github.com/sponsors/andig" target="_blank" class="link">
-							<fa-icon icon="heart" class="icon mr-1"></fa-icon
-							><span class="d-none d-sm-inline">Projekt </span>unterstützen
-						</a>
-					</small>
-				</div>
+	<footer class="container">
+		<div class="py-3 py-md-5 mt-3 mt-md-5 border-top">
+			<div class="d-flex justify-content-between">
+				<Version v-bind="version" />
+				<!-- Please don't mess with the sponsor status. You risk loosing your mojo. -->
+				<Sponsor :sponsor="sponsor" />
 			</div>
 		</div>
 	</footer>
 </template>
 
 <script>
 import Version from "./Version";
+import Sponsor from "./Sponsor";
 
 export default {
 	name: "Footer",
-	components: { Version },
+	components: { Version, Sponsor },
 	props: {
 		version: Object,
+		sponsor: String,
 	},
 };
 </script>
-
-<style scoped>
-.icon {
-	color: #0fdd42;
-}
-.text-black a {
-	color: #18191a;
-}
-</style>

assets/js/components/Loadpoint.vue

@@ -71,7 +71,7 @@ export default {
 		chargeCurrent: Number,
 		socCapacity: Number,
 		connectedDuration: Number,
-		chargeCurrents: Object,
+		chargeCurrents: Array,
 		chargeConfigured: Boolean,
 		chargeRemainingEnergy: Number,
 	},
@@ -119,7 +119,7 @@ export default {
 						this.mode = response.data.mode;
 					}.bind(this)
 				)
-				.catch(window.toasts.error);
+				.catch(window.app.error);
 		},
 		setTargetSoC: function (soc) {
 			axios
@@ -130,7 +130,7 @@ export default {
 						this.targetSoC = response.data.targetSoC;
 					}.bind(this)
 				)
-				.catch(window.toasts.error);
+				.catch(window.app.error);
 		},
 	},
 	destroyed: function () {

assets/js/components/LoadpointDetails.vue

@@ -5,17 +5,17 @@
 				<div class="mb-2 value">
 					Leistung
 					<fa-icon
-						class="text-primary ml-1"
+						class="text-primary ms-1"
 						icon="temperature-low"
 						v-if="climater == 'heating'"
 					></fa-icon>
 					<fa-icon
-						class="text-primary ml-1"
+						class="text-primary ms-1"
 						icon="temperature-high"
 						v-if="climater == 'cooling'"
 					></fa-icon>
 					<fa-icon
-						class="text-primary ml-1"
+						class="text-primary ms-1"
 						icon="thermometer-half"
 						v-if="climater == 'on'"
 					></fa-icon>

assets/js/components/Mode.vue

@@ -1,20 +1,50 @@
 <template>
 	<div>
 		<div class="mb-3">Modus</div>
-		<div class="btn-group btn-group-toggle bg-white shadow-none w-100">
-			<label class="btn btn-outline-primary first" :class="{ active: mode == 'off' }">
-				<input type="radio" value="off" @click="setTargetMode('off')" />Stop
-			</label>
-			<label class="btn btn-outline-primary" :class="{ active: mode == 'now' }">
-				<input type="radio" value="now" @click="setTargetMode('now')" />Sofort
-			</label>
-			<label class="btn btn-outline-primary" :class="{ active: mode == 'minpv' }">
-				<input type="radio" value="minpv" @click="setTargetMode('minpv')" />
+		<div class="btn-group w-100" role="group">
+			<input
+				id="mode_off"
+				type="radio"
+				name="mode"
+				class="btn-check"
+				value="off"
+				@click="setTargetMode('off')"
+				:checked="mode == 'off'"
+			/>
+			<label for="mode_off" class="btn btn-outline-primary"> Stop </label>
+			<input
+				id="mode_now"
+				type="radio"
+				name="mode"
+				class="btn-check"
+				value="now"
+				@click="setTargetMode('now')"
+				:checked="mode == 'now'"
+			/>
+			<label for="mode_now" class="btn btn-outline-primary"> Sofort </label>
+			<input
+				id="mode_minpv"
+				type="radio"
+				name="mode"
+				class="btn-check"
+				value="minpv"
+				@click="setTargetMode('minpv')"
+				:checked="mode == 'minpv'"
+			/>
+			<label for="mode_minpv" class="btn btn-outline-primary">
 				<span class="d-inline d-sm-none">Min</span>
 				<span class="d-none d-sm-inline">Min + PV</span>
 			</label>
-			<label class="btn btn-outline-primary" :class="{ active: mode == 'pv' }">
-				<input type="radio" value="pv" @click="setTargetMode('pv')" />
+			<input
+				id="mode_pv"
+				type="radio"
+				name="mode"
+				class="btn-check"
+				value="pv"
+				@click="setTargetMode('pv')"
+				:checked="mode == 'pv'"
+			/>
+			<label for="mode_pv" class="btn btn-outline-primary">
 				<span class="d-inline d-sm-none">PV</span>
 				<span class="d-none d-sm-inline">Nur PV</span>
 			</label>

assets/js/components/Notifications.stories.js

@@ -0,0 +1,32 @@
+import Notifications from "./Notifications.vue";
+
+export default {
+  title: "Main/Notifications",
+  component: Notifications,
+  argTypes: {},
+};
+
+const Template = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  components: { Notifications },
+  template: '<Notifications v-bind="$props"></Notifications>',
+});
+
+export const Base = Template.bind({});
+Base.args = {
+  notifications: [
+    {
+      message: "Server unavailable",
+      type: "error",
+    },
+    {
+      message: "charger out of sync: expected disabled, got enabled",
+      type: "warn",
+    },
+    {
+      message:
+        "Amet irure quis incididunt voluptate esse. Commodo ea sunt est ipsum tempor nisi laboris voluptate labore elit laborum. Ex irure commodo reprehenderit consequat consequat do ad tempor aliquip deserunt eu. Laboris minim nostrud quis nisi. Dolor occaecat reprehenderit velit dolore exercitation cupidatat et voluptate. Nulla pariatur deserunt esse minim nisi nisi nulla. Sit eiusmod do incididunt sint minim pariatur aute.",
+      type: "warn",
+    },
+  ],
+};