No-print styles to checkpoints

fboes · Mar 14, 2023 · dbbe167 · dbbe167
1 parent 1624383
commit dbbe167
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 18 deletions.
diff --git a/dist/Web/Components.js b/dist/Web/Components.js
@@ -63,7 +63,6 @@ class ComponentsOutputtable extends HTMLElement {
     <line x1="3" y1="10" x2="5" y2="10" transform="rotate(315, 10, 10)" />
     <rect x="1" y="${19 - degX}" width="18" height="${degX}" style="fill: currentColor" />
   </svg> ${Quote.html(sunState.sunState)}`;
-        //return super.outputSunState(sunState).replace(/\s/g, "&nbsp;");
     }
     outputCover(cloud) {
         const octas = Math.round(cloud.cover * 8);
@@ -179,10 +178,17 @@ export class ComponentsAirports extends ComponentsOutputtable {
 export class ComponentsCheckpoints extends ComponentsOutputtable {
     constructor() {
         super();
-        this.elementsTfoot = document.createElement("tfoot");
-        this.elementsP = document.createElement("p");
-        this.elements.table.appendChild(this.elementsTfoot);
-        this.appendChild(this.elementsP);
+        this.elements = {
+            table: document.createElement("table"),
+            caption: document.createElement("caption"),
+            thead: document.createElement("thead"),
+            tbody: document.createElement("tbody"),
+            tfoot: document.createElement("tfoot"),
+            p: document.createElement("p"),
+        };
+        this.elements.table.appendChild(this.elements.tfoot);
+        this.elements.p.className = "no-print";
+        this.appendChild(this.elements.p);
         this.elements.caption.innerText = "Checkpoints";
         this.elements.thead.innerHTML = this.outputLine([
             "#",
@@ -202,8 +208,8 @@ export class ComponentsCheckpoints extends ComponentsOutputtable {
         const m = this.mission;
         if (!m || !this.mission || m.checkpoints.length === 0) {
             this.elements.table.classList.add("empty");
-            this.elementsTfoot.innerHTML = "";
-            this.elementsP.innerHTML = "";
+            this.elements.tfoot.innerHTML = "";
+            this.elements.p.innerHTML = "";
             return;
         }
         const s = new SkyVector(m);
@@ -258,15 +264,15 @@ export class ComponentsCheckpoints extends ComponentsOutputtable {
                 Outputtable.pad(m.distance, 4, 1) + "&nbsp;NM",
                 '<span class="time_enroute">' + Outputtable.convertHoursToMinutesString(m.time_enroute) + "</span>",
             ]);
-            this.elementsTfoot.innerHTML = html;
+            this.elements.tfoot.innerHTML = html;
         }
         {
             let html = "";
             html += `<p class="no-print">Check your <a href="${s.toString(false)}" target="skyvector" title="${s
                 .getCheckpoints(false)
                 .join(" ")}">current flight plan on Sky Vector</a>.
     You may also want to take a look at <a href="https://www.google.com/maps/@?api=1&amp;map_action=map&amp;center=${encodeURIComponent(center.lat)},${encodeURIComponent(center.lon)}&amp;zoom=${encodeURIComponent(zoomLevel)}&amp;basemap=terrain" target="gmap">Google Maps</a> / <a href="https://www.openstreetmap.org/#map=${encodeURIComponent(zoomLevel)}/${encodeURIComponent(center.lat)}/${encodeURIComponent(center.lon)}" target="osm">OpenStreetMap</a>.</p>`;
-            this.elementsP.innerHTML = html;
+            this.elements.p.innerHTML = html;
         }
     }
 }
diff --git a/src/Web/Components.ts b/src/Web/Components.ts
@@ -75,7 +75,6 @@ class ComponentsOutputtable extends HTMLElement {
     <line x1="3" y1="10" x2="5" y2="10" transform="rotate(315, 10, 10)" />
     <rect x="1" y="${19 - degX}" width="18" height="${degX}" style="fill: currentColor" />
   </svg> ${Quote.html(sunState.sunState)}`;
-    //return super.outputSunState(sunState).replace(/\s/g, "&nbsp;");
   }
 
   protected outputCover(cloud: MissionConditionsCloud): string {
@@ -224,13 +223,20 @@ export class ComponentsAirports extends ComponentsOutputtable {
 export class ComponentsCheckpoints extends ComponentsOutputtable {
   mission?: Mission;
 
-  elementsTfoot = <HTMLTableSectionElement>document.createElement("tfoot");
-  elementsP = <HTMLParagraphElement>document.createElement("p");
+  protected elements = {
+    table: <HTMLTableElement>document.createElement("table"),
+    caption: <HTMLTableCaptionElement>document.createElement("caption"),
+    thead: <HTMLTableSectionElement>document.createElement("thead"),
+    tbody: <HTMLTableSectionElement>document.createElement("tbody"),
+    tfoot: <HTMLTableSectionElement>document.createElement("tfoot"),
+    p: <HTMLParagraphElement>document.createElement("p"),
+  };
 
   constructor() {
     super();
-    this.elements.table.appendChild(this.elementsTfoot);
-    this.appendChild(this.elementsP);
+    this.elements.table.appendChild(this.elements.tfoot);
+    this.elements.p.className = "no-print";
+    this.appendChild(this.elements.p);
     this.elements.caption.innerText = "Checkpoints";
     this.elements.thead.innerHTML = this.outputLine(
       [
@@ -255,8 +261,8 @@ export class ComponentsCheckpoints extends ComponentsOutputtable {
     const m = this.mission;
     if (!m || !this.mission || m.checkpoints.length === 0) {
       this.elements.table.classList.add("empty");
-      this.elementsTfoot.innerHTML = "";
-      this.elementsP.innerHTML = "";
+      this.elements.tfoot.innerHTML = "";
+      this.elements.p.innerHTML = "";
       return;
     }
 
@@ -336,7 +342,7 @@ export class ComponentsCheckpoints extends ComponentsOutputtable {
         Outputtable.pad(m.distance, 4, 1) + "&nbsp;NM",
         '<span class="time_enroute">' + Outputtable.convertHoursToMinutesString(m.time_enroute) + "</span>",
       ]);
-      this.elementsTfoot.innerHTML = html;
+      this.elements.tfoot.innerHTML = html;
     }
 
     {
@@ -352,7 +358,7 @@ export class ComponentsCheckpoints extends ComponentsOutputtable {
         zoomLevel
       )}/${encodeURIComponent(center.lat)}/${encodeURIComponent(center.lon)}" target="osm">OpenStreetMap</a>.</p>`;
 
-      this.elementsP.innerHTML = html;
+      this.elements.p.innerHTML = html;
     }
   }
 }