#16 - Replaced default error for text in card when no aircrafts detected

fratsloos · Oct 11, 2022 · 8fca7d4 · 8fca7d4
1 parent 6f86619
commit 8fca7d4
Show file tree

Hide file tree

Showing 8 changed files with 126 additions and 95 deletions.
diff --git a/dist/fr24_card.css b/dist/fr24_card.css
diff --git a/dist/fr24_card.js b/dist/fr24_card.js
diff --git a/src/javascript/fr24_card.js b/src/javascript/fr24_card.js
@@ -287,11 +287,6 @@ class Fr24Card extends HTMLElement {
    * Renders the HTML table with the aircrafts in it
    */
   _renderTable() {
-    // Check for data
-    if (this._aircrafts.length === 0) {
-      throw new Error("No data found, check configuration and JSON output");
-    }
-
     // Create a new table
     const table = new Table();
     const needsUnits = this._config.units_in_table === true;
@@ -342,14 +337,63 @@ class Fr24Card extends HTMLElement {
     // Add header row
     table.row(headerCells, "thead");
 
-    // Body
-    let i = 0;
-    for (let aircraft of this._aircrafts) {
-      // First aircraft add units in table
-      if (needsUnits && !hasUnits) {
-        hasUnits = true;
+    if (this._aircrafts.length > 0) {
+      // Body
+      let i = 0;
+      for (let aircraft of this._aircrafts) {
+        // First aircraft add units in table
+        if (needsUnits && !hasUnits) {
+          hasUnits = true;
+
+          let unitCells = [];
+
+          this._config.columns.forEach((key) => {
+            // Get column from the available columns
+            let column = this._availableColumns[key];
+
+            // Check if column is visible
+            if (column.show === false) {
+              return;
+            }
+
+            // Content of the cell
+            let value = aircraft.units[key] ?? "";
+
+            // Styles of the cell
+            let styles = column.styles ?? null;
+
+            // Inline style
+            let style = "";
+            if (this._config.colors.table_units_bg !== null) {
+              style +=
+                "background-color:" +
+                this._config.colors.table_units_bg +
+                " !important;";
+            }
+            if (this._config.colors.table_units_text !== null) {
+              style +=
+                "color:" +
+                this._config.colors.table_units_text +
+                " !important;";
+            }
+
+            // Attributes
+            let attrs = [];
+            if (style.length > 0) {
+              attrs["style"] = style;
+            }
+
+            // Push header cell
+            let cell = table.cell(value, styles, "td", attrs);
+            unitCells.push(cell);
+          });
+
+          // Add units row
+          table.row(unitCells, "thead");
+        }
 
-        let unitCells = [];
+        // Add aircraft
+        let cells = [];
 
         this._config.columns.forEach((key) => {
           // Get column from the available columns
@@ -360,23 +404,23 @@ class Fr24Card extends HTMLElement {
             return;
           }
 
-          // Content of the cell
-          let value = aircraft.units[key] ?? "";
-
-          // Styles of the cell
-          let styles = column.styles ?? null;
-
           // Inline style
           let style = "";
-          if (this._config.colors.table_units_bg !== null) {
-            style +=
-              "background-color:" +
-              this._config.colors.table_units_bg +
-              " !important;";
-          }
-          if (this._config.colors.table_units_text !== null) {
-            style +=
-              "color:" + this._config.colors.table_units_text + " !important;";
+          if (i % 2 === 1) {
+            if (this._config.colors.table_even_row_bg !== null) {
+              style +=
+                "background-color:" +
+                this._config.colors.table_even_row_bg +
+                " !important;";
+            }
+            if (this._config.colors.table_even_row_text !== null) {
+              style +=
+                "color:" +
+                this._config.colors.table_even_row_text +
+                " !important;";
+            }
+          } else if (this._config.colors.table_text !== null) {
+            style += "color:" + this._config.colors.table_text + " !important;";
           }
 
           // Attributes
@@ -386,81 +430,58 @@ class Fr24Card extends HTMLElement {
           }
 
           // Push header cell
-          let cell = table.cell(value, styles, "td", attrs);
-          unitCells.push(cell);
+          let cell = table.cell(
+            aircraft.value(key),
+            column.styles ?? null,
+            "td",
+            attrs
+          );
+          cells.push(cell);
         });
 
-        // Add units row
-        table.row(unitCells, "thead");
-      }
-
-      // Add aircraft
-      let cells = [];
-
-      this._config.columns.forEach((key) => {
-        // Get column from the available columns
-        let column = this._availableColumns[key];
-
-        // Check if column is visible
-        if (column.show === false) {
-          return;
+        // Attributes of the row
+        let attrs = [];
+        if (this._config.popup) {
+          attrs["data-hex"] = aircraft.hex;
         }
 
-        // Inline style
-        let style = "";
-        if (i % 2 === 1) {
-          if (this._config.colors.table_even_row_bg !== null) {
-            style +=
-              "background-color:" +
-              this._config.colors.table_even_row_bg +
-              " !important;";
-          }
-          if (this._config.colors.table_even_row_text !== null) {
-            style +=
-              "color:" +
-              this._config.colors.table_even_row_text +
-              " !important;";
-          }
-        } else if (this._config.colors.table_text !== null) {
-          style += "color:" + this._config.colors.table_text + " !important;";
-        }
+        // Add body row
+        table.row(cells, null, attrs);
 
-        // Attributes
-        let attrs = [];
-        if (style.length > 0) {
-          attrs["style"] = style;
-        }
+        // Update iterator
+        i++;
 
-        // Push header cell
-        let cell = table.cell(
-          aircraft.value(key),
-          column.styles ?? null,
-          "td",
-          attrs
-        );
-        cells.push(cell);
-      });
-
-      // Attributes of the row
-      let attrs = [];
-      if (this._config.popup) {
-        attrs["data-hex"] = aircraft.hex;
+        // Check for limit
+        if (Number.isInteger(this._config.limit) && this._config.limit === i) {
+          break;
+        }
       }
+    }
 
-      // Add body row
-      table.row(cells, null, attrs);
-
-      // Update iterator
-      i++;
+    // Get content
+    let html = table.getHtml();
 
-      // Check for limit
-      if (Number.isInteger(this._config.limit) && this._config.limit === i) {
-        break;
+    // Add warning when no aircrafts detected
+    if (this._aircrafts.length === 0) {
+      let style = "";
+      if (this._config.colors.table_even_row_bg !== null) {
+        style +=
+          "background-color:" +
+          this._config.colors.table_even_row_bg +
+          " !important;";
       }
+      if (this._config.colors.table_even_row_text !== null) {
+        style +=
+          "color:" + this._config.colors.table_even_row_text + " !important;";
+      }
+
+      html += `<div class="no-data"${style !== "" ? ` style="${style}"` : ""}>${
+        this._lang.content.table.data.none
+      }</div>`;
     }
 
     // Set content
-    this.contentDiv.innerHTML = table.getHtml();
+    this.contentDiv.innerHTML = html;
 
     // Add popup if configured
     if (this._config.popup) {

diff --git a/src/javascript/lang/de.json b/src/javascript/lang/de.json
@@ -14,7 +14,8 @@
       "aircraft_type": "Typ"
     },
     "data": {
-      "not_available": "N/V"
+      "not_available": "N/V",
+      "none": "Keine Flugzeuge erkannt!"
     }
   },
   "popup": {

diff --git a/src/javascript/lang/en.json b/src/javascript/lang/en.json
@@ -14,7 +14,8 @@
       "aircraft_type": "Type"
     },
     "data": {
-      "not_available": "N/A"
+      "not_available": "N/A",
+      "none": "No aircrafts detected!"
     }
   },
   "popup": {

diff --git a/src/javascript/lang/nl.json b/src/javascript/lang/nl.json
@@ -14,7 +14,8 @@
       "aircraft_type": "Type"
     },
     "data": {
-      "not_available": "Nb"
+      "not_available": "Nb",
+      "none": "Geen vliegtuigen gedetecteerd!"
     }
   },
   "popup": {

diff --git a/src/javascript/lang/sl.json b/src/javascript/lang/sl.json
@@ -14,7 +14,8 @@
       "aircraft_type": "Vrsta"
     },
     "data": {
-      "not_available": "N/A"
+      "not_available": "N/A",
+      "none": "Ni zaznanih letal!"
     }
   },
   "popup": {

diff --git a/src/styles/fr24_card.less b/src/styles/fr24_card.less
@@ -50,4 +50,10 @@ fr24-card {
             }
         }
     }
+
+    .no-data {
+        padding: 4px;
+        background-color: var(--primary-background-color);
+        text-align: center;
+    }
 }