Merge pull request #2 from norkator/Feature/pwa-support

Feature/pwa support
norkator · Jun 1, 2020 · 49f29e1 · 49f29e1
2 parents 7136d9d + 29850c1
commit 49f29e1
Show file tree

Hide file tree

Showing 13 changed files with 151 additions and 127 deletions.
diff --git a/yagi-pro/angular.json b/yagi-pro/angular.json
@@ -25,7 +25,8 @@
             "aot": true,
             "assets": [
               "src/favicon.ico",
-              "src/assets"
+              "src/assets",
+              "src/manifest.webmanifest"
             ],
             "styles": [
               "./node_modules/@angular/material/prebuilt-themes/deeppurple-amber.css",
@@ -60,7 +61,9 @@
                   "maximumWarning": "6kb",
                   "maximumError": "10kb"
                 }
-              ]
+              ],
+              "serviceWorker": true,
+              "ngswConfigPath": "ngsw-config.json"
             }
           }
         },
@@ -90,7 +93,8 @@
             "karmaConfig": "karma.conf.js",
             "assets": [
               "src/favicon.ico",
-              "src/assets"
+              "src/assets",
+              "src/manifest.webmanifest"
             ],
             "styles": [
               "./node_modules/@angular/material/prebuilt-themes/pink-bluegrey.css",

diff --git a/yagi-pro/ngsw-config.json b/yagi-pro/ngsw-config.json
@@ -0,0 +1,29 @@
+{
+  "$schema": "./node_modules/@angular/service-worker/config/schema.json",
+  "index": "/index.html",
+  "assetGroups": [
+    {
+      "name": "app",
+      "installMode": "prefetch",
+      "resources": {
+        "files": [
+          "/favicon.ico",
+          "/index.html",
+          "/manifest.webmanifest",
+          "/*.css",
+          "/*.js"
+        ]
+      }
+    }, {
+      "name": "assets",
+      "installMode": "lazy",
+      "updateMode": "prefetch",
+      "resources": {
+        "files": [
+          "/assets/**",
+          "/*.(eot|svg|cur|jpg|png|webp|gif|otf|ttf|woff|woff2|ani)"
+        ]
+      }
+    }
+  ]
+}
diff --git a/yagi-pro/package-lock.json b/yagi-pro/package-lock.json
diff --git a/yagi-pro/package.json b/yagi-pro/package.json
@@ -22,6 +22,7 @@
     "@angular/platform-browser": "~9.1.9",
     "@angular/platform-browser-dynamic": "~9.1.9",
     "@angular/router": "~9.1.9",
+    "@angular/service-worker": "~9.1.9",
     "rxjs": "~6.5.4",
     "tslib": "^1.10.0",
     "zone.js": "~0.10.2"

diff --git a/yagi-pro/src/app/app.component.html b/yagi-pro/src/app/app.component.html
@@ -16,6 +16,26 @@ <h2>Basics</h2>
   <p>Fill in your basic details for Yagi Uda antenna</p>
 
 
+  <mat-accordion class="injected-component-style">
+    <mat-expansion-panel>
+      <mat-expansion-panel-header>
+        <mat-panel-title>
+          Instructions
+        </mat-panel-title>
+        <mat-panel-description>
+        </mat-panel-description>
+      </mat-expansion-panel-header>
+      <p>A Yagi–Uda antenna, commonly known as a Yagi antenna, is a directional antenna consisting of multiple parallel
+        elements in a line, usually half-wave dipoles made of metal rods. Yagi–Uda antennas consist of a single
+        driven element connected to the transmitter or receiver with a transmission line, and additional "parasitic
+        elements" which are not connected to the transmitter or receiver: a so-called reflector and one or more
+        directors. It was invented in 1926 by Shintaro Uda of Tohoku Imperial University, Japan, and (with a
+        lesser role played by his colleague) Hidetsugu Yagi.</p>
+      <button class="btn-spacer" mat-stroked-button color="primary" (click)="yagiWikiLink()">Read more</button>
+    </mat-expansion-panel>
+  </mat-accordion>
+
+
   <app-details-form class="injected-component-style" [(yagi)]="yagi" (yagiChange)="reCalculateYagi()"
                     (change)="reCalculateYagi()"></app-details-form>
 

diff --git a/yagi-pro/src/app/app.component.scss b/yagi-pro/src/app/app.component.scss
@@ -3,6 +3,10 @@
   width: 100%;
 }
 
+.btn-spacer {
+  margin-top: 5px;
+}
+
 :host {
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
   font-size: 14px;
@@ -84,121 +88,3 @@ footer a {
   flex-direction: column;
   align-items: center;
 }
-
-svg.material-icons {
-  height: 24px;
-  width: auto;
-}
-
-svg.material-icons:not(:last-child) {
-  margin-right: 8px;
-}
-
-.card svg.material-icons path {
-  fill: #888;
-}
-
-.card-container {
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: center;
-  margin-top: 16px;
-}
-
-.card {
-  border-radius: 4px;
-  border: 1px solid #eee;
-  background-color: #fafafa;
-  height: 40px;
-  width: 200px;
-  margin: 0 8px 16px;
-  padding: 16px;
-  display: flex;
-  flex-direction: row;
-  justify-content: center;
-  align-items: center;
-  transition: all 0.2s ease-in-out;
-  line-height: 24px;
-}
-
-.card-container .card:not(:last-child) {
-  margin-right: 0;
-}
-
-.card.card-small {
-  height: 16px;
-  width: 168px;
-}
-
-.card-container .card:not(.highlight-card) {
-  cursor: pointer;
-}
-
-.card-container .card:not(.highlight-card):hover {
-  transform: translateY(-3px);
-  box-shadow: 0 4px 17px rgba(0, 0, 0, 0.35);
-}
-
-.card-container .card:not(.highlight-card):hover .material-icons path {
-  fill: rgb(105, 103, 103);
-}
-
-.card.highlight-card {
-  background-color: #1976d2;
-  color: white;
-  font-weight: 600;
-  border: none;
-  width: auto;
-  min-width: 30%;
-  position: relative;
-}
-
-.card.card.highlight-card span {
-  margin-left: 60px;
-}
-
-svg#rocket {
-  width: 80px;
-  position: absolute;
-  left: -10px;
-  top: -24px;
-}
-
-svg#rocket-smoke {
-  height: calc(100vh - 95px);
-  position: absolute;
-  top: 10px;
-  right: 180px;
-  z-index: -10;
-}
-
-a,
-a:visited,
-a:hover {
-  color: #1976d2;
-  text-decoration: none;
-}
-
-a:hover {
-  color: #125699;
-}
-
-.circle-link {
-  height: 40px;
-  width: 40px;
-  border-radius: 40px;
-  margin: 8px;
-  background-color: white;
-  border: 1px solid #eeeeee;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  cursor: pointer;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
-  transition: 1s ease-out;
-}
-
-.circle-link:hover {
-  transform: translateY(-0.25rem);
-  box-shadow: 0px 3px 15px rgba(0, 0, 0, 0.2);
-}
diff --git a/yagi-pro/src/app/app.component.ts b/yagi-pro/src/app/app.component.ts
@@ -36,4 +36,8 @@ export class AppComponent extends YagiCalculator implements OnInit {
     this.changeTrigger++;
   }
 
+  public yagiWikiLink(): void {
+    window.open('https://en.wikipedia.org/wiki/Yagi%E2%80%93Uda_antenna', "_blank");
+  }
+
 }
diff --git a/yagi-pro/src/app/app.module.ts b/yagi-pro/src/app/app.module.ts
@@ -15,6 +15,9 @@ import {YagiModelComponent} from './yagi-model/yagi-model.component';
 import {MatTableModule} from "@angular/material/table";
 import {YagiTableComponent} from './yagi-table/yagi-table.component';
 import {MatChipsModule} from "@angular/material/chips";
+import {ServiceWorkerModule} from '@angular/service-worker';
+import {environment} from '../environments/environment';
+import {MatExpansionModule} from "@angular/material/expansion";
 
 @NgModule({
   declarations: [
@@ -37,6 +40,8 @@ import {MatChipsModule} from "@angular/material/chips";
     MatRadioModule,
     MatTableModule,
     MatChipsModule,
+    MatExpansionModule,
+    ServiceWorkerModule.register('ngsw-worker.js', {enabled: environment.production}),
   ],
   providers: [],
   bootstrap: [AppComponent]

diff --git a/yagi-pro/src/app/yagi-model/yagi-model.component.html b/yagi-pro/src/app/yagi-model/yagi-model.component.html
@@ -1,9 +1,9 @@
 <mat-card>
   <mat-chip-list aria-label="Fish selection">
     <mat-chip color="primary" selected>Gain approx. {{yagi.gain}} dBd</mat-chip>
-    <mat-chip>Boom length: {{yagi.boomLength * 1000}} mm</mat-chip>
+    <mat-chip>Boom length: {{getBoomLength(yagi.boomLength)}} mm</mat-chip>
   </mat-chip-list>
-  <div>
+  <div class="element-margin">
     <ng-container *ngFor="let element of yagi.yagiElements">
 
       <div class="center-element" [ngStyle]="getBoomStyle(element)"></div>

diff --git a/yagi-pro/src/app/yagi-model/yagi-model.component.scss b/yagi-pro/src/app/yagi-model/yagi-model.component.scss
@@ -10,7 +10,10 @@
   border: 0.5px solid black;
 }
 
-
 .parasitic-element {
   border-radius: 10px;
 }
+
+.element-margin {
+  margin-top: 20px;
+}
diff --git a/yagi-pro/src/app/yagi-model/yagi-model.component.ts b/yagi-pro/src/app/yagi-model/yagi-model.component.ts
@@ -21,6 +21,11 @@ export class YagiModelComponent implements OnInit {
   }
 
 
+  public getBoomLength(boomLength: number): number {
+    return Math.floor(boomLength * 1000);
+  }
+
+
   public getElementStyle(element: YagiElementInterface): any {
     return {
       'width': this.calculateWidthPercentage(element) + '%',
@@ -31,14 +36,14 @@ export class YagiModelComponent implements OnInit {
 
 
   public getBoomStyle(element: YagiElementInterface): any {
-    let h = (element.distance === null ? element.position : element.distance)  / 2;
+    let h = (element.distance === null ? element.position : element.distance) / 2;
     if (h <= 0) {
       h = 40;
     }
 
     return {
       'width': '2%',
-      'height':  h + 'px',
+      'height': h + 'px',
       'background-color': '#c2c3c4'
     }
   }

diff --git a/yagi-pro/src/index.html b/yagi-pro/src/index.html
@@ -6,10 +6,13 @@
   <base href="/">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="icon" type="image/x-icon" href="./assets/logo/mipmap-mdpi/logo.png">
-  <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500&amp;display=swap" rel="stylesheet">
   <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+  <link rel="manifest" href="manifest.webmanifest">
+  <meta name="theme-color" content="#1976d2">
 </head>
 <body>
   <app-root></app-root>
+  <noscript>Please enable JavaScript to continue using this application.</noscript>
 </body>
 </html>
diff --git a/yagi-pro/src/manifest.webmanifest b/yagi-pro/src/manifest.webmanifest
@@ -0,0 +1,59 @@
+{
+  "name": "Yagi-pro",
+  "short_name": "yagi-pro",
+  "theme_color": "#1976d2",
+  "background_color": "#fafafa",
+  "display": "standalone",
+  "scope": "./",
+  "start_url": "./",
+  "icons": [
+    {
+      "src": "assets/logo/mipmap-hdpi/logo.png",
+      "sizes": "72x72",
+      "type": "image/png",
+      "purpose": "maskable any"
+    },
+    {
+      "src": "assets/logo/mipmap-xhdpi/logo.png",
+      "sizes": "96x96",
+      "type": "image/png",
+      "purpose": "maskable any"
+    },
+    {
+      "src": "assets/logo/mipmap-xxhdpi/logo.png",
+      "sizes": "128x128",
+      "type": "image/png",
+      "purpose": "maskable any"
+    },
+    {
+      "src": "assets/logo/mipmap-xxhdpi/logo.png",
+      "sizes": "144x144",
+      "type": "image/png",
+      "purpose": "maskable any"
+    },
+    {
+      "src": "assets/logo/mipmap-xxxhdpi/logo.png",
+      "sizes": "152x152",
+      "type": "image/png",
+      "purpose": "maskable any"
+    },
+    {
+      "src": "assets/logo/mipmap-xxxhdpi/logo.png",
+      "sizes": "192x192",
+      "type": "image/png",
+      "purpose": "maskable any"
+    },
+    {
+      "src": "assets/logo/web_hi_res_512.png",
+      "sizes": "384x384",
+      "type": "image/png",
+      "purpose": "maskable any"
+    },
+    {
+      "src": "assets/logo/web_hi_res_512.png",
+      "sizes": "512x512",
+      "type": "image/png",
+      "purpose": "maskable any"
+    }
+  ]
+}