Updated Links in Navbar (evcc-io#2045)

.eslintrc.js

@@ -6,8 +6,12 @@ module.exports = {
   },
   extends: [
     "eslint:recommended",
-    "plugin:vue/essential",
+    "plugin:vue/recommended",
     "plugin:prettier/recommended",
     "prettier",
   ],
+  rules: {
+    "vue/require-default-prop": "off",
+    "vue/attribute-hyphenation": "off",
+  },
 };

assets/js/app.js

@@ -22,9 +22,6 @@ window.app = new Vue({
   router,
   i18n,
   data: { store, notifications: [] },
-  render: function (h) {
-    return h(App, { props: { notifications: this.notifications } });
-  },
   methods: {
     raise: function (msg) {
       console[msg.type](msg);
@@ -56,6 +53,9 @@ window.app = new Vue({
       this.raise(msg);
     },
   },
+  render: function (h) {
+    return h(App, { props: { notifications: this.notifications } });
+  },
 });
 
 window.setInterval(function () {

assets/js/components/Energyflow/Energyflow.vue

@@ -5,18 +5,7 @@
 			@click="toggleDetails"
 		>
 			<Visualization
-				class="
-					col-12
-					offset-md-1
-					col-md-6
-					offset-lg-1
-					col-lg-8
-					offset-xl-1
-					col-xl-6
-					offset-xxl-1
-					col-xl-8
-					order-md-2
-				"
+				class="col-12 offset-md-1 col-md-6 offset-lg-1 col-lg-8 offset-xl-1 col-xl-6 offset-xxl-1 col-xl-8 order-md-2"
 				:showDetails="showDetails"
 				:gridImport="gridImport"
 				:selfConsumption="selfConsumption"
@@ -82,18 +71,8 @@
 				</div>
 			</div>
 			<div
-				class="
-					col-12 col-sm-6
-					offset-md-6
-					col-md-6
-					offset-lg-4
-					col-lg-8
-					d-block d-md-flex
-					order-md-3
-					justify-content-between
-					mt-2
-				"
 				v-if="showDetails"
+				class="col-12 col-sm-6 offset-md-6 col-md-6 offset-lg-4 col-lg-8 d-block d-md-flex order-md-3 justify-content-between mt-2"
 			>
 				<div class="text-nowrap d-flex d-md-block" data-test-grid-import>
 					<span class="color-grid details-icon"><fa-icon icon="square"></fa-icon></span>
@@ -136,6 +115,7 @@ import BatteryIcon from "./BatteryIcon.vue";
 export default {
 	name: "Energyflow",
 	components: { Visualization, BatteryIcon },
+	mixins: [formatter],
 	props: {
 		gridConfigured: Boolean,
 		gridPower: { type: Number, default: 0 },
@@ -151,7 +131,6 @@ export default {
 	data: function () {
 		return { showDetails: false };
 	},
-	mixins: [formatter],
 	computed: {
 		gridImport: function () {
 			return Math.max(0, this.gridPower);

assets/js/components/Energyflow/Visualization.vue

@@ -13,41 +13,41 @@
 				</LabelBar>
 			</div>
 		</div>
-		<div class="site-progress" ref="site_progress">
+		<div ref="site_progress" class="site-progress">
 			<div
 				class="site-progress-bar self-consumption"
 				:style="{ width: widthTotal(selfConsumptionAdjusted) }"
 			>
-				<span class="power" v-if="powerLabelEnoughSpace(selfConsumption)">
+				<span v-if="powerLabelEnoughSpace(selfConsumption)" class="power">
 					{{ kw(selfConsumption) }}
 				</span>
-				<span class="power" v-else-if="powerLabelSomeSpace(selfConsumption)">
+				<span v-else-if="powerLabelSomeSpace(selfConsumption)" class="power">
 					{{ kwNoUnit(selfConsumption) }}
 				</span>
 			</div>
 			<div
 				class="site-progress-bar grid-import"
 				:style="{ width: widthTotal(gridImportAdjusted) }"
 			>
-				<span class="power" v-if="powerLabelEnoughSpace(gridImport)">
+				<span v-if="powerLabelEnoughSpace(gridImport)" class="power">
 					{{ kw(gridImport) }}
 				</span>
-				<span class="power" v-else-if="powerLabelSomeSpace(gridImport)">
+				<span v-else-if="powerLabelSomeSpace(gridImport)" class="power">
 					{{ kwNoUnit(gridImport) }}
 				</span>
 			</div>
 			<div
 				class="site-progress-bar pv-export"
 				:style="{ width: widthTotal(pvExportAdjusted) }"
 			>
-				<span class="power" v-if="powerLabelEnoughSpace(pvExport)">
+				<span v-if="powerLabelEnoughSpace(pvExport)" class="power">
 					{{ kw(pvExport) }}
 				</span>
-				<span class="power" v-else-if="powerLabelSomeSpace(pvExport)">
+				<span v-else-if="powerLabelSomeSpace(pvExport)" class="power">
 					{{ kwNoUnit(pvExport) }}
 				</span>
 			</div>
-			<div class="site-progress-bar bg-light border no-wrap w-100" v-if="totalAdjusted <= 0">
+			<div v-if="totalAdjusted <= 0" class="site-progress-bar bg-light border no-wrap w-100">
 				<span>{{ $t("main.energyflow.noEnergy") }}</span>
 			</div>
 		</div>
@@ -80,6 +80,7 @@ import LabelBar from "./LabelBar.vue";
 export default {
 	name: "Visualization",
 	components: { BatteryIcon, LabelBar, GridIcon },
+	mixins: [formatter],
 	props: {
 		showDetails: Boolean,
 		gridImport: { type: Number, default: 0 },
@@ -96,16 +97,6 @@ export default {
 	data: function () {
 		return { width: 0, visualizationReady: false };
 	},
-	mounted: function () {
-		this.$nextTick(function () {
-			window.addEventListener("resize", this.updateElementWidth);
-			this.updateElementWidth();
-		});
-	},
-	beforeDestroy() {
-		window.removeEventListener("resize", this.updateElementWidth);
-	},
-	mixins: [formatter],
 	computed: {
 		gridExport: function () {
 			return this.pvExport;
@@ -137,6 +128,15 @@ export default {
 				}, 500);
 		},
 	},
+	mounted: function () {
+		this.$nextTick(function () {
+			window.addEventListener("resize", this.updateElementWidth);
+			this.updateElementWidth();
+		});
+	},
+	beforeDestroy() {
+		window.removeEventListener("resize", this.updateElementWidth);
+	},
 	methods: {
 		widthTotal: function (power) {
 			if (this.totalAdjusted === 0) return "0%";

assets/js/components/Loadpoint.vue

@@ -3,15 +3,15 @@
 		<p class="h3 mb-4 d-sm-block" :class="{ 'd-none': single }">
 			{{ title || $t("main.loadpoint.fallbackName") }}
 		</p>
-		<div class="alert alert-warning mt-4 mb-2" role="alert" v-if="remoteDisabled == 'soft'">
+		<div v-if="remoteDisabled == 'soft'" class="alert alert-warning mt-4 mb-2" role="alert">
 			{{ $t("main.loadpoint.remoteDisabledSoft", { source: remoteDisabledSource }) }}
 		</div>
-		<div class="alert alert-danger mt-4 mb-2" role="alert" v-if="remoteDisabled == 'hard'">
+		<div v-if="remoteDisabled == 'hard'" class="alert alert-danger mt-4 mb-2" role="alert">
 			{{ $t("main.loadpoint.remoteDisabledHard", { source: remoteDisabledSource }) }}
 		</div>
 
 		<div class="row">
-			<Mode class="col-12 col-md-6 col-lg-4 mb-4" :mode="mode" v-on:updated="setTargetMode" />
+			<Mode class="col-12 col-md-6 col-lg-4 mb-4" :mode="mode" @updated="setTargetMode" />
 			<Vehicle
 				class="col-12 col-md-6 col-lg-8 mb-4"
 				v-bind="vehicle"
@@ -33,6 +33,8 @@ import collector from "../mixins/collector";
 
 export default {
 	name: "Loadpoint",
+	components: { LoadpointDetails, Mode, Vehicle },
+	mixins: [formatter, collector],
 	props: {
 		id: Number,
 		single: Boolean,
@@ -82,8 +84,6 @@ export default {
 		pvRemaining: Number,
 		pvAction: String,
 	},
-	components: { LoadpointDetails, Mode, Vehicle },
-	mixins: [formatter, collector],
 	data: function () {
 		return {
 			tickerHandle: null,
@@ -113,6 +113,9 @@ export default {
 			}
 		},
 	},
+	destroyed: function () {
+		window.clearInterval(this.tickerHandle);
+	},
 	methods: {
 		api: function (func) {
 			return "loadpoints/" + this.id + "/" + func;
@@ -146,8 +149,5 @@ export default {
 				.catch(window.app.error);
 		},
 	},
-	destroyed: function () {
-		window.clearInterval(this.tickerHandle);
-	},
 };
 </script>

assets/js/components/LoadpointDetails.vue

@@ -6,9 +6,9 @@
 					{{ $t("main.loadpointDetails.power") }}
 					<div
 						v-if="chargePower && activePhases"
+						v-tooltip="{ content: phaseTooltip }"
 						class="badge rounded-pill bg-secondary text-light cursor-pointer"
 						tabindex="0"
-						v-tooltip="{ content: phaseTooltip }"
 					>
 						{{ activePhases }}P
 						<WaitingDots
@@ -19,32 +19,32 @@
 						/>
 					</div>
 					<fa-icon
+						v-if="climater == 'heating'"
 						class="text-primary ms-1"
 						icon="temperature-low"
-						v-if="climater == 'heating'"
 					></fa-icon>
 					<fa-icon
+						v-if="climater == 'cooling'"
 						class="text-primary ms-1"
 						icon="temperature-high"
-						v-if="climater == 'cooling'"
 					></fa-icon>
 					<fa-icon
+						v-if="climater == 'on'"
 						class="text-primary ms-1"
 						icon="thermometer-half"
-						v-if="climater == 'on'"
 					></fa-icon>
 				</div>
 				<h3 class="value">
 					{{ fmt(chargePower) }}
 					<small class="text-muted">
 						{{ fmtUnit(chargePower) }}W<small
-							class="cursor-pointer d-inline-block px-2"
 							v-if="pvTimerVisible"
 							v-tooltip="{
 								content: $t(`main.loadpointDetails.tooltip.pv.${pvAction}`, {
 									remaining: fmtRemaining(pvRemaining),
 								}),
 							}"
+							class="cursor-pointer d-inline-block px-2"
 							tabindex="0"
 						>
 							<WaitingDots
@@ -64,23 +64,23 @@
 				</h3>
 			</div>
 
-			<div class="col-6 col-sm-3 col-lg-2 mt-3" v-if="vehicleRange && vehicleRange >= 0">
+			<div v-if="vehicleRange && vehicleRange >= 0" class="col-6 col-sm-3 col-lg-2 mt-3">
 				<div class="mb-2 value">{{ $t("main.loadpointDetails.vehicleRange") }}</div>
 				<h3 class="value">
 					{{ Math.round(vehicleRange) }}
 					<small class="text-muted">km</small>
 				</h3>
 			</div>
 
-			<div class="col-6 col-sm-3 col-lg-2 mt-3" v-else>
+			<div v-else class="col-6 col-sm-3 col-lg-2 mt-3">
 				<div class="mb-2 value">{{ $t("main.loadpointDetails.duration") }}</div>
 				<h3 class="value">
 					{{ fmtShortDuration(chargeDuration) }}
 					<small class="text-muted">{{ fmtShortDurationUnit(chargeDuration) }}</small>
 				</h3>
 			</div>
 
-			<div class="col-6 col-sm-3 col-lg-2 mt-3" v-if="vehiclePresent">
+			<div v-if="vehiclePresent" class="col-6 col-sm-3 col-lg-2 mt-3">
 				<div class="mb-2 value">{{ $t("main.loadpointDetails.remaining") }}</div>
 				<h3 class="value">
 					{{ fmtShortDuration(chargeRemainingDuration) }}
@@ -101,6 +101,7 @@ import formatter from "../mixins/formatter";
 export default {
 	name: "LoadpointDetails",
 	components: { WaitingDots },
+	mixins: [formatter],
 	props: {
 		chargedEnergy: Number,
 		chargeDuration: Number,
@@ -115,12 +116,6 @@ export default {
 		pvRemaining: Number,
 		pvAction: String,
 	},
-	mixins: [formatter],
-	methods: {
-		fmtRemaining(remaining) {
-			return remaining > 0 ? this.fmtTimeAgo(new Date(Date.now() + remaining * 1000)) : null;
-		},
-	},
 	computed: {
 		phaseTooltip() {
 			if (["scale1p", "scale3p"].includes(this.phaseAction)) {
@@ -155,5 +150,10 @@ export default {
 			return false;
 		},
 	},
+	methods: {
+		fmtRemaining(remaining) {
+			return remaining > 0 ? this.fmtTimeAgo(new Date(Date.now() + remaining * 1000)) : null;
+		},
+	},
 };
 </script>

assets/js/components/Notifications.vue

@@ -51,7 +51,7 @@
 								<span class="flex-grow-1 px-2 py-1 text-break">
 									{{ msg.message }}
 								</span>
-								<span class="badge rounded-pill bg-secondary" v-if="msg.count > 1">
+								<span v-if="msg.count > 1" class="badge rounded-pill bg-secondary">
 									{{ msg.count }}
 								</span>
 							</p>
@@ -62,8 +62,8 @@
 							type="button"
 							data-bs-dismiss="modal"
 							aria-label="Close"
-							@click="clear"
 							class="btn btn-outline-secondary"
+							@click="clear"
 						>
 							{{ $t("notifications.dismissAll") }}
 						</button>
@@ -80,6 +80,7 @@ import formatter from "../mixins/formatter";
 
 export default {
 	name: "Notifications",
+	mixins: [formatter],
 	props: {
 		notifications: Array,
 	},
@@ -93,11 +94,6 @@ export default {
 				: "text-warning";
 		},
 	},
-	methods: {
-		clear: function () {
-			window.app && window.app.clear();
-		},
-	},
 	created: function () {
 		this.interval = setInterval(() => {
 			this.$forceUpdate();
@@ -106,6 +102,10 @@ export default {
 	destroyed: function () {
 		clearTimeout(this.interval);
 	},
-	mixins: [formatter],
+	methods: {
+		clear: function () {
+			window.app && window.app.clear();
+		},
+	},
 };
 </script>