detail formating

tiramon · Aug 19, 2023 · 36e88b7 · 36e88b7
1 parent dcacebb
commit 36e88b7
Show file tree

Hide file tree

Showing 2 changed files with 87 additions and 26 deletions.
diff --git a/src/app/map/component/detail-window/detail-window.component.html b/src/app/map/component/detail-window/detail-window.component.html
@@ -1,47 +1,91 @@
-<table style="border-spacing: 0; min-width : 280px; background-color: rgb(13,24,28,0.8);">
+<table
+  style="
+    border-spacing: 0;
+    min-width: 280px;
+    background-color: rgb(13, 24, 28, 0.8);
+  ">
     <tr>
-        <td colspan="3" class="tileHeader">TILE - {{face?.tileId}}</td>
+    <td colspan="3" class="tileHeader">TILE - {{ face?.tileId }}</td>
+  </tr>
     </tr>
     <tr>
-        <td class="leftColumn">OWNER</td><td class="rightColumn" colspan="2">{{face?.owner}}</td>
+    <td class="leftColumn">OWNER</td>
+    <td class="rightColumn" colspan="2">{{ face?.owner }}</td>
     </tr>
     <tr>
-        <td class="leftColumn">Latitude</td><td class="rightColumn" colspan="2">{{face?.latitude | number:'1.4-4'}}</td>
+    <td class="leftColumn">Latitude</td>
+    <td class="rightColumn" colspan="2">
+      {{ face?.latitude | number : '1.4-4' }}
+    </td>
     </tr>
     <tr>
-        <td class="leftColumn">Longitude</td><td class="rightColumn" colspan="2">{{face?.longitude | number:'1.4-4'}}</td>
+    <td class="leftColumn">Longitude</td>
+    <td class="rightColumn" colspan="2">
+      {{ face?.longitude | number : '1.4-4' }}
+    </td>
     </tr>
     <tr>
-
-        <td class="rightColumn" (click)="onPosClick()" colspan="3" style="cursor: pointer;" title="click to copy">
-            ::pos&#123;0,{{face?.duEntityId}},{{face?.latitude | number:'1.4-4'}},{{face?.longitude | number:'1.4-4'}},0.0&#125;
-            <fa-icon [icon]="faCopy" [styles]="{'color': 'white'}"></fa-icon>
+    <td
+      class="rightColumn"
+      (click)="onPosClick()"
+      colspan="3"
+      style="cursor: pointer"
+      title="click to copy">
+      {{ posLink() }}
+      <fa-icon [icon]="faCopy" [styles]="{ color: 'white' }"></fa-icon>
         </td>
     </tr>
     <tr>
         <td>&nbsp;</td>
     </tr>
     <ng-container *ngIf="scan">
         <tr>
-            <td colspan="3" class="tileHeader" style="text-align: center;">Scan <fa-icon [icon]="faCopy" [styles]="{'color': 'white'}" (click)="onScanClick()" title="click to copy export to discord"></fa-icon></td>
+      <td colspan="3" class="tileHeader" style="text-align: center">
+        Scan
+        <fa-icon
+          [icon]="faCopy"
+          [styles]="{ color: 'white' }"
+          (click)="onScanClick()"
+          title="click to copy export to discord"></fa-icon>
+      </td>
         </tr>
         <tr>
-            <td class="leftColumn">Scaned by</td><td class="rightColumn" colspan="2">{{scan?.owner}}</td>
+      <td class="leftColumn">Scaned by</td>
+      <td class="rightColumn" colspan="2">{{ scan?.owner }}</td>
         </tr>
         <tr>
-            <td class="leftColumn">Time</td><td class="rightColumn" colspan="2">{{scan?.time | date:'MMM dd, y HH:mm'}}</td>
+      <td class="leftColumn">Time</td>
+      <td class="rightColumn" colspan="2">
+        {{ scan?.time | date : 'MMM dd, y HH:mm' }}
+      </td>
         </tr>
 
         <tr *ngIf="scan">
-            <td class="rightColumn">&sum;</td><td class="rightColumn" style="text-align: right;">{{sumOre(scan) | number:'1.0-0':getUsersLocale('en-US')}} L/h</td>
+      <td class="rightColumn">&sum;</td>
+      <td class="rightColumn" style="text-align: right">
+        {{ sumOre(scan) | number : '1.0-0' : getUsersLocale('en-US') }} L/h
+      </td>
         </tr>
         <tr *ngIf="scan">
-            <td class="rightColumn">Quanta</td><td class="rightColumn" style="text-align: right;">~{{sumQuanta(scan) | number:'1.0-0':getUsersLocale('en-US')}} &#295;/h<br>~{{sumQuanta(scan)*7*24 | number:'1.0-0':getUsersLocale('en-US')}} &#295;/wk</td>
+      <td class="rightColumn">Quanta</td>
+      <td class="rightColumn" style="text-align: right">
+        ~{{
+          sumQuanta(scan) | number : '1.0-0' : getUsersLocale('en-US')
+        }}
+        &#295;/h<br />~{{
+          sumQuanta(scan) * 7 * 24 | number : '1.0-0' : getUsersLocale('en-US')
+        }}
+        &#295;/wk
+      </td>
         </tr>
         <ng-container *ngFor="let ore of oreNames">
-        <tr  *ngIf="scan?.ores[ore.name]">
-            <td class="rightColumn">{{ore.name}}</td><td class="rightColumn" style="text-align: right;">{{scan.ores[ore.name] | number:'1.0-0':getUsersLocale('en-US')}} {{postFix}}</td>
+      <tr *ngIf="scan?.ores[ore.name]">
+        <td class="rightColumn">{{ ore.name }}</td>
+        <td class="rightColumn" style="text-align: right">
+          {{ scan.ores[ore.name] | number : '1.0-0' : getUsersLocale('en-US') }}
+          {{ postFix }}
+        </td>
         </tr>
         </ng-container>
     </ng-container>
-</table>
+</table>
diff --git a/src/app/map/component/detail-window/detail-window.component.ts b/src/app/map/component/detail-window/detail-window.component.ts
@@ -23,16 +23,16 @@ export class DetailWindowComponent implements OnInit {
 
   constructor(
     private eventService: EventService,
-    @Inject('ORES') public oreNames: {name, tier, color, hc, quanta}[]
-  ) { }
+    @Inject('ORES') public oreNames: { name; tier; color; hc; quanta }[],
+  ) {}
 
   ngOnInit() {
     // changes the shown face and scan that was selected by a click on the map
-    this.eventService.faceSelected.subscribe( f => {
+    this.eventService.faceSelected.subscribe(f => {
       this.face = f;
       this.scan = this.face.scan;
       if (this.scan) {
-        this.postFix = (this.scan.time < this.demeter) ? 'L' : 'L/h';
+        this.postFix = this.scan.time < this.demeter ? 'L' : 'L/h';
       }
     });
 
@@ -54,7 +54,15 @@ export class DetailWindowComponent implements OnInit {
 
   posLink() {
     // tslint:disable-next-line:max-line-length
-    return `::pos{0,${this.face.duEntityId},${(Math.round(this.face.latitude * 10000) / 10000).toFixed(4)},${(Math.round(this.face.longitude * 10000) / 10000).toFixed(4)},0.0}`;
+    if (this.face) {
+      return `::pos{0,${this.face.duEntityId},${(
+        Math.round(this.face.latitude * 10000) / 10000
+      ).toFixed(4)},${(Math.round(this.face.longitude * 10000) / 10000).toFixed(
+        4
+      )},0.0}`;
+    } else {
+      return `no valid tile selected`;
+    }
   }
 
   /**
@@ -76,7 +84,10 @@ export class DetailWindowComponent implements OnInit {
   }
 
   getUsersLocale(defaultValue: string): string {
-    if (typeof window === 'undefined' || typeof window.navigator === 'undefined') {
+    if (
+      typeof window === 'undefined' ||
+      typeof window.navigator === 'undefined'
+    ) {
       return defaultValue;
     }
     const wn = window.navigator as any;
@@ -88,7 +99,7 @@ export class DetailWindowComponent implements OnInit {
     return lang;
   }
 
-  sumOre(scan: Scan): number  {
+  sumOre(scan: Scan): number {
     return Scan.sumOre(scan);
   }
 
@@ -114,11 +125,17 @@ export class DetailWindowComponent implements OnInit {
 
   onScanClick() {
     // tslint:disable-next-line:max-line-length
-    let out = `Planet: ${this.scan.planet}\nTile: ${this.scan.tileId}\nScaned by: ${this.scan.owner}\n${this.posLink()}\n${new DatePipe(this.getUsersLocale('en-US')).transform(this.scan.time, 'MMM dd, y HH:mm')}\n`;
+    let out = `Planet: ${this.scan.planet}\nTile: ${
+      this.scan.tileId
+    }\nScaned by: ${this.scan.owner}\n${this.posLink()}\n${new DatePipe(
+      this.getUsersLocale('en-US')
+    ).transform(this.scan.time, 'MMM dd, y HH:mm')}\n`;
     for (const ore of this.oreNames) {
       if (this.scan.ores[ore.name]) {
         out += `\n${ore.name}:${'            '.slice(ore.name.length)} `;
-        out += `${'         '.slice(this.scan.ores[ore.name].toLocaleString().length)}${this.scan.ores[ore.name].toLocaleString()}`;
+        out += `${'         '.slice(
+          this.scan.ores[ore.name].toLocaleString().length
+        )}${this.scan.ores[ore.name].toLocaleString()}`;
       }
     }
     this.copyToClipboard('```' + out + '```');