@mxtommy/kip 1.2.3 → 2.0.0

package/src/app/widget-historical/widget-historical.component.ts

@@ -1,306 +0,0 @@
-import { Component, OnInit, ViewChild, ElementRef, OnDestroy, Input, Inject } from '@angular/core';
-import Chart from 'chart.js/auto';
-import 'chartjs-adapter-moment';
-import { MatDialog } from '@angular/material/dialog';
-import { Subscription } from 'rxjs';
-
-import { ModalWidgetComponent } from '../modal-widget/modal-widget.component';
-
-import { dataPoint, DataSetService } from '../data-set.service';
-import { WidgetManagerService, IWidget, IWidgetConfig } from '../widget-manager.service';
-import { UnitsService } from '../units.service';
-import { AppSettingsService } from '../app-settings.service';
-
-const defaultConfig: IWidgetConfig = {
-  displayName: null,
-  filterSelfPaths: true,
-  convertUnitTo: "unitless",
-  dataSetUUID: null,
-  invertData: false,
-  displayMinMax: false,
-  includeZero: true,
-  minValue: null,
-  maxValue: null,
-  verticalGraph: true,
-};
-
-interface IDataSetOptions {
-    label: string;
-    data: any;
-    fill: string;
-    //borderWidth: 1
-    borderColor: any;
-    borderDash?: number[];
-}
-
-@Component({
-  selector: 'app-widget-historical',
-  templateUrl: './widget-historical.component.html',
-  styleUrls: ['./widget-historical.component.css']
-})
-export class WidgetHistoricalComponent implements OnInit, OnDestroy {
-
-  @Input('widgetUUID') widgetUUID: string;
-  @Input('unlockStatus') unlockStatus: boolean;
-
-  @ViewChild('lineGraph', {static: true, read: ElementRef}) lineGraph: ElementRef;
-
-  activeWidget: IWidget;
-  config: IWidgetConfig;
-
-  chartCtx;
-  chart = null;
-
-  chartDataMin = [];
-  chartDataAvg = [];
-  chartDataMax = [];
-
-  textColor; // store the color of text for the graph...
-
-  dataSetSub: Subscription = null;
-
-  // dynamics theme support
-  themeNameSub: Subscription = null;
-
-  constructor(
-    public dialog:MatDialog,
-    private DataSetService: DataSetService,
-    private WidgetManagerService: WidgetManagerService,
-    private UnitsService: UnitsService,
-    private AppSettingsService: AppSettingsService, // need for theme change subscription
-  ) { }
-
-  ngOnInit() {
-    this.activeWidget = this.WidgetManagerService.getWidget(this.widgetUUID);
-    if (this.activeWidget.config === null) {
-        // no data, let's set some!
-      this.WidgetManagerService.updateWidgetConfig(this.widgetUUID, defaultConfig);
-      this.config = defaultConfig; // load default config.
-    } else {
-      this.config = this.activeWidget.config;
-    }
-
-    //TODO, this only works on chart init... need to find when theme changes...
-    this.textColor = window.getComputedStyle(this.lineGraph.nativeElement).color;
-
-    this.chartCtx = this.lineGraph.nativeElement.getContext('2d');
-    this.startChart();
-    this.subscribeDataSet();
-    //setTimeout(this.subscribeDataSet(),1000);//TODO, see why destroy called before we even get subbed (or just after...)
-    this.subscribeTheme();
-
-  }
-
-  ngOnDestroy() {
-      if (this.chart !== null) {
-          //this.chart.destroy(); // doesn't seem to be needed since chart is destoryed when destroying component. was giving errors. (maybe html was destroyed before this is called?)
-      }
-      this.unsubscribeDataSet();
-      console.log("stopped Sub");
-      this.unsubscribeTheme();
-
-  }
-
-  startChart() {
-      if (this.chart !== null) {
-          this.chart.destroy();
-      }
-      // Setup DataSets
-      let ds: IDataSetOptions[] = [
-        {
-          label: this.config.displayName + '-Avg.',
-          data: this.chartDataAvg,
-          fill: 'false',
-          //borderWidth: 1
-          borderColor: this.textColor
-        }
-      ];
-      if (this.config.displayMinMax) {
-        ds.push(
-          {
-            label: this.config.displayName + '-Min',
-            data: this.chartDataMin,
-            fill: '+1',
-            //borderWidth: 1
-            borderColor: this.textColor,
-          borderDash: [10, 10]
-        },
-        {
-            label: this.config.displayName + '-Max',
-            data: this.chartDataMax,
-            fill: '-1',
-            //borderWidth: 1
-            borderColor: this.textColor,
-          borderDash: [5, 5]
-        }
-        );
-      }
-      let xAxis = this.config.verticalGraph ? 'y' : 'x';
-      let yAxis = this.config.verticalGraph ? 'x' : 'y';
-
-      this.chart = new Chart(this.chartCtx,{
-          type: 'line',
-          data: {
-              datasets: ds
-      },
-      options: {
-          maintainAspectRatio: false,
-          indexAxis: this.config.verticalGraph ? 'y' : 'x',
-          parsing: {
-            xAxisKey: xAxis,
-            yAxisKey: yAxis,
-        },
-          scales: {
-              [yAxis]: {
-                  position: this.config.verticalGraph ? 'top' : 'right',
-                  ...(this.config.minValue !== null && {suggestedMin: this.config.minValue}),
-                  ...(this.config.maxValue !== null && {suggestedMax: this.config.maxValue}),
-                  ...(this.config.includeZero && { beginAtZero: true}),
-              },
-              [xAxis]: {
-                  position: this.config.verticalGraph ? 'right': 'bottom',
-                  type: 'time',
-                  time: {
-                      minUnit: 'second',
-                      round: 'second',
-                  },
-                  ticks: {
-                    callback: timeDifferenceFromNow,
-                  }
-              }
-          }
-      }
-    });
-
-    function timeDifferenceFromNow(_value, index, values) {
-      let tickTime = values[index].value;
-      let nowTime = Date.now();
-      let timeDiff = Math.floor((nowTime - tickTime) / 1000);
-      if (timeDiff < 60) {
-        return "0:" + timeDiff.toString().padStart(2, "0") + " secs ago";
-      } else if (timeDiff < 3600) {
-        let minDiff = Math.floor(timeDiff / 60);
-        let secDiff = timeDiff % 60;
-        return (minDiff.toString() + ":" + secDiff.toString().padStart(2, "0") + " mins ago");
-      } else if (timeDiff < 86400) {
-        let hourDiff = Math.floor(timeDiff / 3600);
-        return (hourDiff.toString() + " hours ago");
-      } else {
-        let dayDiff = Math.floor(timeDiff / 86400);
-        return (dayDiff.toString() + " days ago");
-      }
-    }
-  }
-
-  subscribeDataSet() {
-      this.unsubscribeDataSet();
-      if (this.config.dataSetUUID === null) { return } // nothing to sub to...
-
-      this.dataSetSub = this.DataSetService.subscribeDataSet(this.widgetUUID, this.config.dataSetUUID).subscribe(
-          dataSet => {
-              if (dataSet === null) {
-                return; // we will get null back if we subscribe to a dataSet before the app has started it.when it learns about it we will get first value
-              }
-              let invert = 1;
-              if (this.config.invertData) { invert = -1; }
-              //Avg
-              this.chartDataAvg = [];
-              for (let i=0;i<dataSet.length;i++){
-                if (dataSet[i].average === null) {
-                  this.chartDataAvg.push({x: dataSet[i].timestamp, y: null });
-                  continue;
-                }
-                this.chartDataAvg.push({
-                  x: dataSet[i].timestamp,
-            y: (this.UnitsService.convertUnit(this.config.convertUnitTo, dataSet[i].average) * invert)
-                });
-              }
-              this.chart.config.data.datasets[0].data = this.chartDataAvg;
-
-              //min/max
-              if (this.config.displayMinMax) {
-                this.chartDataMin = [];
-                this.chartDataMax = [];
-                for (let i=0;i<dataSet.length;i++){
-                  //process datapoint and add it to our chart.
-                  if (dataSet[i].average === null) {
-                    this.chartDataMin.push({x: dataSet[i].timestamp, y: null });
-                  } else {
-                    this.chartDataMin.push({
-                        x: dataSet[i].timestamp,
-                y: (this.UnitsService.convertUnit(this.config.convertUnitTo, dataSet[i].minValue) * invert)
-                    });
-                    this.chartDataMax.push({
-                        x: dataSet[i].timestamp,
-                y: (this.UnitsService.convertUnit(this.config.convertUnitTo, dataSet[i].maxValue) * invert)
-                    });
-                  }
-                }
-                this.chart.config.data.datasets[1].data = this.chartDataMin;
-                this.chart.config.data.datasets[2].data = this.chartDataMax;
-              }
-
-            const average = arr => arr.reduce((p, c) => p + c, 0) / arr.length;
-              //if (this.widgetConfig.animateGraph) {
-              //  this.chart.update();
-              //} else {
-                // append the cumulated average to the label text
-            this.chart.data.datasets[0].label = this.config.displayName + " [" + average(this.chartDataAvg.map(e => e.y)).toFixed(2) + "]";
-            if (this.config.displayMinMax) {
-              this.chart.data.datasets[1].label = this.config.displayName + " [" + average(this.chartDataMin.map(e => e.y)).toFixed(2) + "]";
-              this.chart.data.datasets[2].label = this.config.displayName + " [" + average(this.chartDataMax.map(e => e.y)).toFixed(2) + "]";
-            }
-            this.chart.update('none');
-              //}
-          }
-      );
-  }
-
-  unsubscribeDataSet() {
-      if (this.dataSetSub !== null) {
-          this.dataSetSub.unsubscribe();
-          this.dataSetSub = null;
-      }
-  }
-
-
-// Subscribe to theme event
-subscribeTheme() {
-  this.themeNameSub = this.AppSettingsService.getThemeNameAsO().subscribe(
-    themeChange => {
-     setTimeout(() => {   // need a delay so browser getComputedStyles has time to complete theme application.
-      this.textColor = window.getComputedStyle(this.lineGraph.nativeElement).color;
-      this.startChart()
-     }, 100);
-  })
-}
-
-unsubscribeTheme(){
-  if (this.themeNameSub !== null) {
-    this.themeNameSub.unsubscribe();
-    this.themeNameSub = null;
-  }
-}
-
-  openWidgetSettings() {
-
-    let dialogRef = this.dialog.open(ModalWidgetComponent, {
-      width: '80%',
-      data: this.config
-    });
-
-    dialogRef.afterClosed().subscribe(result => {
-      // save new settings
-      if (result) {
-        console.log(result);
-        this.config = result;
-        this.WidgetManagerService.updateWidgetConfig(this.widgetUUID, this.config);
-        this.startChart(); //need to recreate chart to update options :P
-        this.subscribeDataSet();
-      }
-
-    });
-
-    }
-
-}

package/src/app/widget-iframe/widget-iframe.component.css

@@ -1,12 +0,0 @@
-.wrapper {
-  position: relative;
-  width: 100%;
-  height: 100%;
-}
-
-.settingsButton {
-  position: absolute;
-  bottom: 5%;
-  left: 50%;
-  transform: translate(-50%);
-}

package/src/app/widget-iframe/widget-iframe.component.html

@@ -1,21 +0,0 @@
-<div class="wrapper">
-  <iframe *ngIf="widgetUrl" [src]="widgetUrl | safe" width="100%" height="100%" frameborder="0"></iframe>
-  <div *ngIf="!widgetUrl">
-    Please set URL
-    <p>For Example in Graphana, select share for the graph you want, go to embed tab, and take the "src" url. Note you should probably change
-      the from/to timestamps to "from=now-15m" and "to=now" andmake sure you have "refresh=30" in the parameters as well!</p>
-      <p>Of note, cross-domain loading security rules apply! <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/X-Frame-Options" target="_blank">Link!</a></p>
-  </div>
-
-
-
-  <div class="settingsButton" *ngIf="unlockStatus">
-    <button  color="accent" mat-mini-fab class="selector-fab" (click)="openWidgetSettings()">
-        <span class="fa fa-cog"></span>
-    </button>
-  </div>
-</div>
-
-
-
-

package/src/app/widget-iframe/widget-iframe.component.spec.ts

@@ -1,25 +0,0 @@
-import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
-
-import { WidgetIframeComponent } from './widget-iframe.component';
-
-describe('WidgetIframeComponent', () => {
-  let component: WidgetIframeComponent;
-  let fixture: ComponentFixture<WidgetIframeComponent>;
-
-  beforeEach(waitForAsync(() => {
-    TestBed.configureTestingModule({
-      declarations: [ WidgetIframeComponent ]
-    })
-    .compileComponents();
-  }));
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(WidgetIframeComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});

package/src/app/widget-iframe/widget-iframe.component.ts

@@ -1,63 +0,0 @@
-import { Component, Input, OnInit, OnDestroy, Inject } from '@angular/core';
-import { MatDialog } from '@angular/material/dialog';
-
-
-
-
-import { ModalWidgetComponent } from '../modal-widget/modal-widget.component';
-import { WidgetManagerService, IWidget, IWidgetConfig } from '../widget-manager.service';
-
-const defaultConfig: IWidgetConfig = {
-  widgetUrl: null
-};
-
-@Component({
-  selector: 'app-widget-iframe',
-  templateUrl: './widget-iframe.component.html',
-  styleUrls: ['./widget-iframe.component.css']
-})
-export class WidgetIframeComponent implements OnInit {
-
-  @Input('widgetUUID') widgetUUID: string;
-  @Input('unlockStatus') unlockStatus: boolean;
-
-  config: IWidgetConfig;
-
-  widgetUrl: string = null;
-  activeWidget: IWidget;
-
-  constructor(
-    public dialog:MatDialog,
-    private WidgetManagerService: WidgetManagerService) {
-  }
-
-  ngOnInit() {
-    this.activeWidget = this.WidgetManagerService.getWidget(this.widgetUUID);
-    if (this.activeWidget.config === null) {
-        // no data, let's set some!
-      this.WidgetManagerService.updateWidgetConfig(this.widgetUUID, defaultConfig);
-      this.config = defaultConfig; // load default config.
-    } else {
-      this.config = this.activeWidget.config;
-    }
-    this.widgetUrl = this.config.widgetUrl;
-  }
-
-  openWidgetSettings(content) {
-      
-    let dialogRef = this.dialog.open(ModalWidgetComponent, {
-      width: '80%',
-      data: this.config
-    });
-
-    dialogRef.afterClosed().subscribe(result => {
-      // save new settings
-      if (result) {
-        console.log(result);
-        this.config = result;
-        this.WidgetManagerService.updateWidgetConfig(this.widgetUUID, this.config);
-      }
-    });
-  }
-
-}

package/src/app/widget-list.service.spec.ts

@@ -1,15 +0,0 @@
-import { TestBed, inject } from '@angular/core/testing';
-
-import { WidgetListService } from './widget-list.service';
-
-describe('WidgetListService', () => {
-  beforeEach(() => {
-    TestBed.configureTestingModule({
-      providers: [WidgetListService]
-    });
-  });
-
-  it('should be created', inject([WidgetListService], (service: WidgetListService) => {
-    expect(service).toBeTruthy();
-  }));
-});

package/src/app/widget-list.service.ts

@@ -1,135 +0,0 @@
-import { Injectable } from '@angular/core';
-
-import { WidgetBlankComponent } from './widget-blank/widget-blank.component';
-import { WidgetUnknownComponent } from './widget-unknown/widget-unknown.component';
-import { WidgetNumericComponent } from './widget-numeric/widget-numeric.component';
-import { WidgetTextGenericComponent } from './widget-text-generic/widget-text-generic.component';
-import { WidgetHistoricalComponent } from './widget-historical/widget-historical.component';
-import { WidgetWindComponent } from './widget-wind/widget-wind.component';
-import { WidgetGaugeComponent } from './widget-gauge/widget-gauge.component';
-import { WidgetStateComponent } from './widget-state/widget-state.component';
-import { WidgetSwitchComponent } from './widget-switch/widget-switch.component';
-import { WidgetIframeComponent } from './widget-iframe/widget-iframe.component';
-import { WidgetTutorialComponent } from './widget-tutorial/widget-tutorial.component';
-import { WidgetGaugeNgLinearComponent} from './widget-gauge-ng-linear/widget-gauge-ng-linear.component';
-import { WidgetGaugeNgRadialComponent} from './widget-gauge-ng-radial/widget-gauge-ng-radial.component';
-import { WidgetAutopilotComponent } from "./widget-autopilot/widget-autopilot.component";
-import { WidgetSimpleLinearComponent } from "./widget-simple-linear/widget-simple-linear.component";
-
-class widgetInfo {
-  name: string;
-  componentName;
-  description: string;
-}
-
-export class widgetList {
-  [groupname: string]: widgetInfo[];
-}
-
-
-@Injectable()
-export class WidgetListService {
-
-  constructor() { }
-
-
-  widgetList: widgetList = {
-    "Basic": [
-      {
-        name: 'WidgetBlank',
-        componentName: WidgetBlankComponent,
-        description: 'Blank',
-      },
-      {
-        name: 'WidgetNumeric',
-        componentName: WidgetNumericComponent,
-        description: 'Numeric Value',
-      },
-      {
-        name: 'WidgetTextGeneric',
-        componentName: WidgetTextGenericComponent,
-        description: 'Text Value',
-      },
-      {
-        name: 'WidgetStateComponent',
-        componentName: WidgetStateComponent,
-        description: 'State (boolean) Value',
-      },      
-    ],
-    "Gauge": [
-      {
-        name: 'WidgetSimpleLinearComponent',
-        componentName: WidgetSimpleLinearComponent,
-        description: "Linear Electrical Gauge"
-      },
-      {
-        name: 'WidgetGaugeNgLinearComponent',
-        componentName: WidgetGaugeNgLinearComponent,
-        description: "Linear Gauge"
-      },
-      {
-        name: 'WidgetGaugeNgRadialComponent',
-        componentName: WidgetGaugeNgRadialComponent,
-        description: "Radial Gauge"
-      },
-      {
-        name: 'WidgetGaugeComponent',
-        componentName: WidgetGaugeComponent,
-        description: "Steel Gauge (Radial/Linear)"
-      },
-    ],
-    "Components": [
-      {
-        name: 'WidgetHistorical',
-        componentName: WidgetHistoricalComponent,
-        description: 'Historical DataSet',
-      },
-      {
-        name: 'WidgetWindComponent',
-        componentName: WidgetWindComponent,
-        description: 'Wind Gauge',
-      },
-      {
-        name: 'WidgetAutopilotComponent',
-        componentName: WidgetAutopilotComponent,
-        description: 'N2k Autopilot',
-      },
-      {
-        name: 'WidgetIframeComponent',
-        componentName: WidgetIframeComponent,
-        description: 'Embed Webpage',
-      },
-      {
-        name: 'WidgetTutorial',
-        componentName: WidgetTutorialComponent,
-        description: 'Tutorial'
-      }
-    ]
-
-  };
-  
-
-/*
-    {
-      name: 'WidgetSwitchComponent',
-      componentName: WidgetSwitchComponent,
-      description: 'Switch Input',
-    },  */
-
-
-
-  
-
-  getComponentName(typeName: string) {
-    for (let [group, widgetList] of Object.entries(this.widgetList)) {
-      let widget = widgetList.find(c => c.name == typeName);
-      if (widget) { return widget.componentName; }
-    }
-    return WidgetUnknownComponent;
-  }
-
-
-  getList (){
-    return this.widgetList;
-  }
-}

package/src/app/widget-manager.service.spec.ts

@@ -1,15 +0,0 @@
-import { TestBed, inject } from '@angular/core/testing';
-
-import { WidgetManagerService } from './widget-manager.service';
-
-describe('WidgetManagerService', () => {
-  beforeEach(() => {
-    TestBed.configureTestingModule({
-      providers: [WidgetManagerService]
-    });
-  });
-
-  it('should be created', inject([WidgetManagerService], (service: WidgetManagerService) => {
-    expect(service).toBeTruthy();
-  }));
-});