Chargers: add meter filter

docs/devices/chargers.mdx

@@ -48,6 +48,7 @@ Enabled:        false
 - **1P/3P**: Unterstützung für automatische Phasenumschaltung. Breiterer Leistungsbereich (idR. 1,4 bis 11 kW).
 - **RFID**: Integration eines RFID Kartenlesers zur [Fahrzeugerkennung](../features/vehicle).
 - **mA Regelung**: Feinere Ladestromregelung (mA statt A) für bessere Nutzung von PV-Überschuss.
+- **Integrierter Zähler**: Integration vorhanden. Verfügbarkeit je nach Modell.
 - **ISO 15118**: Unterstützung für Plug & Charge (Fahrzeugerkennung, SoC Übermittlung)
 
 #### Nach Eigenschaften filtern

i18n/en/code.json

@@ -5,6 +5,9 @@
   "mA Regelung": {
     "message": "mA regulation"
   },
+  "Integrierter Zähler": {
+    "message": "Integrated meter"
+  },
   "ohne Sponsoring": {
     "message": "without sponsoring"
   },

i18n/en/docusaurus-plugin-content-docs/current/devices/chargers.mdx

@@ -48,6 +48,7 @@ Enabled:        false
 - **1P/3P**: Support for automatic phase switching. Wider power range (usually 1.4 to 11 kW).
 - **RFID**: Integration of an RFID card reader for [vehicle identification](../features/vehicle).
 - **mA regulation**: Finer charging current regulation (mA instead of A) for better use of PV surplus.
+- **Integrated meter**: Integration available. Availability depends on the model.
 - **ISO 15118**: Support for Plug & Charge (vehicle identification, SoC transmission)
 
 #### Filter by feature

src/components/DeviceFeatureFilter.jsx

@@ -43,8 +43,9 @@ function filterByFeatures(features) {
     });
   };
 
-  // Iterate through all child nodes of main
-  const firstElement = document.querySelector("main h2");
+  // Iterate through the auto-generated device list (everything after the <hr>
+  // that separates the introductory Einrichtung section from the devices).
+  const firstElement = document.querySelector("main hr ~ h2");
   let node = firstElement;
   let nodesToHideOrShow = [];
   let h2Nodes = [];
@@ -96,20 +97,14 @@ function filterByFeatures(features) {
   updateTableOfContents();
 }
 
-const currentFilters = [];
-
 function toggleFilter(feature) {
   const htmlClasslist = document.querySelector(":root").classList;
+  htmlClasslist.toggle(`feature-${feature}`);
 
-  const filterClass = `feature-${feature}`;
-  htmlClasslist.toggle(filterClass);
-  const index = currentFilters.indexOf(filterClass);
-  if (index === -1) {
-    currentFilters.push(filterClass);
-  } else {
-    currentFilters.splice(index, 1);
-  }
-  filterByFeatures(currentFilters);
+  const activeFilters = Array.from(htmlClasslist).filter((c) =>
+    c.startsWith("feature-"),
+  );
+  filterByFeatures(activeFilters);
 }
 
 export default ({ device }) => {

src/components/features.jsx

@@ -5,6 +5,7 @@ export const chargerFeatures = {
   "1p3p": <Translate>1P3P</Translate>,
   rfid: <Translate>RFID</Translate>,
   mA: <Translate>mA Regelung</Translate>,
+  meter: <Translate>Integrierter Zähler</Translate>,
   iso151182: <Translate>ISO 15118</Translate>,
   sponsorfree: <Translate>ohne Sponsoring</Translate>,
 };

src/css/custom.css

@@ -99,6 +99,7 @@ html[data-theme="dark"] .theme-code-block-highlighted-line {
 
 html.feature-1p3p .filter-1p3p,
 html.feature-mA .filter-mA,
+html.feature-meter .filter-meter,
 html.feature-battery-control .filter-battery-control,
 html.feature-rfid .filter-rfid,
 html.feature-sponsorfree .filter-sponsorfree,