minor adjustments, added firebase

Author: Pascal-Lohscheidt

.firebase/hosting.ZGlzdC9teS1maXJzdC1hcHA.cache

@@ -0,0 +1,7 @@
+favicon.ico,1603613920219,a2aee5309d0b59b9b66384ccc3969a07fab1b320d0bf76f1b25047a051d7f774
+index.html,1603613920234,a228718c347b5f7358d3807605eb4a36bd356ec20765fa2d0f807ac09c20fd0a
+runtime.acf0dec4155e77772545.js,1603613920113,c4aa0a348c0dcf9c6af4b7b3f066d0599bcec97472ed96ab232c8dceb70607cb
+styles.db9a73d3b9ec72d56901.css,1603613920113,f8e1c1ea2b85b16bd9f3e889e1df60cf3d2fb3ed4c1909401786e1db8abad37d
+3rdpartylicenses.txt,1603613920113,c1249b25cc8132d95a014b23a2bf9b100486e96ad1eb7a48ea6ee9e858d9b657
+polyfills.35a5ca1855eb057f016a.js,1603613920113,696eb043e309ace56506b69f85083dcd79b502a601892daaf91a27272d99c38b
+main.daa938bb5f984ef8c4cd.js,1603613920114,5c2e15c4cdfdc2f6988c5fa22a2357bb35494171a5bfb9e299517ccf25eef5b8

.firebaserc

@@ -0,0 +1,11 @@
+{
+  "targets": {
+    "signalgenerator-f4302": {
+      "hosting": {
+        "my-first-app": [
+          "signalgenerator-f4302"
+        ]
+      }
+    }
+  }
+}

angular.json

@@ -121,8 +121,13 @@
               "devServerTarget": "my-first-app:serve:production"
             }
           }
+        },
+        "deploy": {
+          "builder": "@angular/fire:deploy",
+          "options": {}
         }
       }
-    }},
+    }
+  },
   "defaultProject": "my-first-app"
-}
+}

firebase.json

@@ -0,0 +1,28 @@
+{
+  "hosting": [
+    {
+      "target": "my-first-app",
+      "public": "dist/my-first-app",
+      "ignore": [
+        "**/.*"
+      ],
+      "headers": [
+        {
+          "source": "*.[0-9a-f][0-9a-f][0-9a-f][0-9a-f][0-9a-f][0-9a-f][0-9a-f][0-9a-f][0-9a-f][0-9a-f][0-9a-f][0-9a-f][0-9a-f][0-9a-f][0-9a-f][0-9a-f][0-9a-f][0-9a-f][0-9a-f][0-9a-f].+(css|js)",
+          "headers": [
+            {
+              "key": "Cache-Control",
+              "value": "public,max-age=31536000,immutable"
+            }
+          ]
+        }
+      ],
+      "rewrites": [
+        {
+          "source": "**",
+          "destination": "/index.html"
+        }
+      ]
+    }
+  ]
+}

package-lock.json

@@ -15,6 +15,7 @@
     "@angular/common": "~10.1.6",
     "@angular/compiler": "~10.1.6",
     "@angular/core": "~10.1.6",
+    "@angular/fire": "^6.0.3",
     "@angular/forms": "~10.1.6",
     "@angular/platform-browser": "~10.1.6",
     "@angular/platform-browser-dynamic": "~10.1.6",
@@ -24,7 +25,8 @@
     "plotly.js": "^1.57.1",
     "rxjs": "~6.6.0",
     "tslib": "^2.0.0",
-    "zone.js": "~0.10.2"
+    "zone.js": "~0.10.2",
+    "firebase": "^7.13.1"
   },
   "devDependencies": {
     "@angular-devkit/build-angular": "~0.1001.7",
@@ -44,6 +46,12 @@
     "protractor": "~7.0.0",
     "ts-node": "~8.3.0",
     "tslint": "~6.1.0",
-    "typescript": "~4.0.2"
+    "typescript": "~4.0.2",
+    "@angular-devkit/architect": ">= 0.900 < 0.1100",
+    "firebase-tools": "^8.0.0",
+    "fuzzy": "^0.1.3",
+    "inquirer": "^6.2.2",
+    "inquirer-autocomplete-prompt": "^1.0.1",
+    "open": "^7.0.3"
   }
 }

package.json

@@ -4,4 +4,8 @@
   <app-top-nav-bar></app-top-nav-bar>
   <router-outlet>
   </router-outlet>
+  <footer>
+    Made by Pascal Lohscheidt - using Angular & Firebase<br>
+    Code available on GitHub
+  </footer>
 </div>

src/app/app.component.html

@@ -1,5 +1,9 @@
 .root-container
   width: 100%
-  height: 100vh
+  min-height: 100vh
   background-color: #212121
 
+footer
+  background-color: black
+  padding: 20px
+

src/app/app.component.sass

@@ -5,6 +5,7 @@
       <app-chart></app-chart>
       <div class="control-pane">
         <app-curve-selection-view></app-curve-selection-view>
+        <div class="vertical-border"></div>
         <app-modulate-settings></app-modulate-settings>
       </div>
     </div>

src/app/chart-view/chart-view.component.html

@@ -9,7 +9,7 @@
   width: 80%
 
 .vertical-flex-body
-  background-color: green
+  background-color: rgb(40,40,40)
   width: 100%
   height: 100%
   display: flex
@@ -21,3 +21,13 @@
 
 .control-pane
   width: 100%
+  display: flex
+  flex-direction: row
+  justify-content: space-around
+
+.vertical-border
+  height: 380px
+  background-color: white
+  width: 2px
+  align-self: center
+

src/app/chart-view/chart-view.component.sass

@@ -68,7 +68,7 @@ export class ChartService {
   generateGraphs() {
     let data = [];
     this.curves.forEach(curve => {
-      if(curve.curveSettings.active) data.push(this.generateGraphData(curve.curveSettings)); //ONLY if the curve is active show it in the graph
+      if(curve.curveSettings.active) data.push(this.generateGraphData(curve.curveSettings, curve.id)); //ONLY if the curve is active show it in the graph
     });
 
 
@@ -92,15 +92,16 @@ export class ChartService {
         y: summedUpY,
         type: 'scatter',
         mode: 'lines+points',
-        marker: {color: 'cyan'}
+        marker: {color: 'cyan'},
+        name: 'result curve'
       }
       data.push(newCurveData);
     }
 
     return data;
   }
 
-  private generateGraphData(settings) {
+  private generateGraphData(settings, curveId) {
     let stepSize = 0.03;
 
 
@@ -117,7 +118,8 @@ export class ChartService {
       y: yCoordinates,
       type: 'scatter',
       mode: 'lines+points',
-      marker: {color: GRAPH_COLORS[settings.curveId]}
+      marker: {color: GRAPH_COLORS[settings.id]},
+      name: (curveId + 1).toString() + '# curve'
     }
     return data;
   }

src/app/chart.service.ts

@@ -1,8 +1,8 @@
 <div class="curve-selection-parent">
   <div class="curve-info" *ngFor="let curve of curves">
-    <h3>Curve: {{ curve.id + 1 }} </h3>
+    <h3>Curve:  {{ curve.id + 1 }} </h3>
     <h4>Amplitude: {{ curve.curveSettings.amplitude}} </h4>
-    <h4>Amplitude: {{ curve.curveSettings.frequency}} </h4>
+    <h4>Frequency: {{ curve.curveSettings.frequency}} </h4>
     <h4>Phase shift: {{ curve.curveSettings.shift}} </h4>
     <h4>Active: {{ curve.curveSettings.active }} </h4>
     <button (click)="selectCurve(curve.id)" class="standard-btn"> Select </button>

src/app/curve-selection-view/curve-selection-view.component.html

@@ -1,8 +1,6 @@
 .curve-selection-parent
   height: 400px
   background-color: rgb(40,40,40)
-  float: left
-  width: 70%
   box-sizing: border-box
   display: flex
   flex-direction: row
@@ -11,6 +9,5 @@
 .curve-info
   width: 400px
   height: 100%
-  border: white 2px solid
   padding: 15px
   box-sizing: border-box

src/app/curve-selection-view/curve-selection-view.component.sass

@@ -1,5 +1,5 @@
 <div class="settings-parent">
-  <h3>Settings</h3>
+  <h3>Curve settings</h3>
   <form [formGroup]="settingsForm"  (ngSubmit)="onSubmit(settingsForm.value)" >
     <div>
       <label for="curveType">
@@ -15,28 +15,28 @@ <h3>Settings</h3>
 
     <div>
       <label for="amplitude">
-        Amp
+        Amplitude:
       </label>
       <input id="amp" type="number" formControlName="amplitude" />
     </div>
 
     <div>
       <label for="frequency">
-        Freq
+        Frequency:
       </label>
       <input id="freq" type="number" formControlName="frequency" />
     </div>
 
     <div>
       <label for="shift">
-        Shft
+        Phase shift:
       </label>
       <input id="shft" type="number" formControlName="shift" />
     </div>
 
     <div>
       <label for="active">
-        Active
+        Active & visible
       </label>
       <input id="active" type="checkbox" formControlName="active" />
     </div>

src/app/modulate-settings/modulate-settings.component.html

@@ -2,29 +2,32 @@
   background-color: rgb(40,40,40)
   height: 100%
   min-height: 400px
+  min-width: 250px
   padding: 10px
-  width: 30%
-  float: left
   box-sizing: border-box
-  border-left: white 2px solid
 
 form
   width: 100%
-  height: 100%
+
   display: flex
   flex-direction: column
-  justify-content: center
+  justify-content: flex-start
   align-items: center
 
   div
-    width: 100px
+    display: flex
+    flex-direction: row
+    justify-content: space-between
+    width: 100%
     height: 40px
     margin-bottom: 10px
 
+    label
+      width: 100px
+      min-width: 100px
+      align-self: center
     input
       width: 50px
-
-    input, label
       height: 100%