Merge pull request #98 from swordensen/feature/digitalClock

Feature/digital clock

app/src/renderer/angular.json

@@ -31,7 +31,7 @@
             "tsConfig": "tsconfig.app.json",
             "aot": true,
             "assets": ["src/favicon.ico", "src/assets"],
-            "styles": ["src/styles.scss", "src/themes/theme.scss"],
+            "styles": ["src/styles.scss", "src/themes/theme.scss", "src/assets/fonts/font-file.css"],
             "scripts": []
           },
           "configurations": {

app/src/renderer/package.json

@@ -25,9 +25,10 @@
     "@ngrx/store": "^16.2.0",
     "@svgdotjs/svg.js": "^3.2.0",
     "angular-resizable-element": "^7.0.2",
-    "cronstrue": "^1.113.0",
+    "cronstrue": "^2.32.0",
     "rxjs": "~6.6.0",
     "tslib": "^2.0.0",
+    "xterm": "^5.3.0",
     "zone.js": "^0.13.1"
   },
   "devDependencies": {

app/src/renderer/src/app/@core/store/actions/gui.actions.ts

@@ -7,3 +7,5 @@ export const startLoading = createAction('[GUI] app is loading');
 export const stopLoading = createAction('[GUI] Stop Loading');
 
 export const setFilter = createAction('[GUI] set filter', props<{filter:string}>());
+
+export const toggleClock = createAction('[GUI] Toggle Clock');

app/src/renderer/src/app/@core/store/reducers/gui.reducer.ts

@@ -3,18 +3,21 @@ import {
   setFilter,
   startLoading,
   stopLoading,
+  toggleClock,
   toggleSideNav,
 } from '../actions/gui.actions';
 
 export interface GUIState {
   sideNavOpen: boolean;
   loading: boolean;
+  isClockAnalog:boolean;
   scheduleFilter:string;
 }
 
 const initialGUIState: GUIState = {
   sideNavOpen: true,
   loading: false,
+  isClockAnalog: false,
   scheduleFilter: '',
 };
 
@@ -35,6 +38,10 @@ const _guiReducer = createReducer(
   on(setFilter,(state, props)=> ({
     ...state,
     scheduleFilter: props.filter
+  })),
+  on(toggleClock, (state) => ({
+    ...state,
+    isClockAnalog: !state.isClockAnalog
   }))
 );
 

app/src/renderer/src/app/@core/store/selectors/gui.selectors.ts

@@ -5,4 +5,6 @@ export const selectSideNavOpen = (state: { gui: GUIState }) =>
 
 export const selectLoading = (state: { gui: GUIState }) => state.gui.loading;
 
-export const selectFilter = (state: {gui: GUIState}) => state.gui.scheduleFilter;
+export const selectFilter = (state: {gui: GUIState}) => state.gui.scheduleFilter;
+
+export const selectIsClockAnalog = (state: {gui:GUIState}) => state.gui.isClockAnalog;

app/src/renderer/src/app/components/analog-clock/analog-clock.component.html

@@ -0,0 +1 @@
+<div #clock id="clock"></div>

app/src/renderer/src/app/components/analog-clock/analog-clock.component.scss

@@ -0,0 +1,6 @@
+:host,
+div {
+  display: block;
+  height: 100%;
+  width: 100%;
+}

app/src/renderer/src/app/components/analog-clock/analog-clock.component.spec.ts

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

app/src/renderer/src/app/components/analog-clock/analog-clock.component.ts

@@ -0,0 +1,102 @@
+import {
+  AfterViewInit,
+  Component,
+  ElementRef,
+  OnInit,
+  ViewChild,
+} from '@angular/core';
+import { SVG, Color } from '@svgdotjs/svg.js';
+
+@Component({
+  selector: 'app-analog-clock',
+  templateUrl: './analog-clock.component.html',
+  styleUrls: ['./analog-clock.component.scss'],
+})
+export class AnalogClockComponent implements AfterViewInit {
+  @ViewChild('clock') clockElem: ElementRef;
+
+  constructor(private elRef: ElementRef) {}
+
+  ngAfterViewInit(): void {
+    this.renderClock();
+    // @ts-ignore
+    const resizeObserver = new ResizeObserver(() => {
+      this.rerender();
+    }).observe(this.clockElem.nativeElement);
+  }
+
+  rerender() {
+    this.clockElem.nativeElement.innerHTML = '';
+    this.renderClock();
+  }
+
+  /************************************
+  This codepen is part of the svg.js
+  advent calendar. You can find all
+  the pens at twitter: @svg_js
+*************************************/
+
+  renderClock() {
+    const width = this.clockElem.nativeElement.clientWidth;
+    const height = this.clockElem.nativeElement.clientHeight;
+
+    if (width && height) {
+      const backGroundColor = '#03DAC6';
+      const hourHandColor = '#3700B3';
+      const minuteHandColor = '#180edc';
+      const secondHandColor = '#52008d';
+      const realHeight = height - 20;
+
+      // Create SVG and set viewbox
+      // so that we zoom into the center
+      const canvas = SVG()
+        .addTo('#clock')
+        .size(width, height)
+        .viewbox(-width / 8, -realHeight / 8, width / 4, realHeight / 4);
+
+      // Big circle
+      canvas.circle(80).center(0, 0).fill('none').stroke({
+        width: 1,
+        color: backGroundColor,
+      });
+
+      // Hours line
+      const hour = canvas.line(0, 0, 0, -20).stroke(hourHandColor);
+      //   .animate(new SVG.Spring(400, 20))
+
+      // Minutes line
+      const min = canvas.line(0, 0, 0, -30).stroke(minuteHandColor);
+      //   .animate(new SVG.Spring(400, 20))
+
+      // Seconds line
+      const sec = canvas.line(0, 0, 0, -38).stroke(secondHandColor);
+      //   .animate(new SVG.Spring(400, 20))
+
+      const update = () => {
+        // Get time
+        const localDate = new Date(Date.now());
+        let h = localDate.getHours();
+        let m = localDate.getMinutes();
+        let s = localDate.getSeconds();
+
+        // Make sure we see partial hours
+        h += m / 60;
+
+        // Calculate angle
+        const hAngle = (h / 24) * 360;
+        const mAngle = (m / 60) * 360;
+        const sAngle = (s / 60) * 360;
+
+        // Rotate
+        hour.transform({ rotate: hAngle, origin: [0, 0] });
+        min.transform({ rotate: mAngle, origin: [0, 0] });
+        sec.transform({ rotate: sAngle, origin: [0, 0] });
+      };
+
+      setInterval(update, 1000);
+      update();
+    }
+  }
+
+  // renderClock();
+}

app/src/renderer/src/app/components/analog-clock/analog-clock.module.ts

@@ -0,0 +1,14 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { AnalogClockComponent } from './analog-clock.component';
+
+
+
+@NgModule({
+  declarations: [AnalogClockComponent],
+  imports: [
+    CommonModule
+  ],
+  exports: [AnalogClockComponent]
+})
+export class AnalogClockModule { }

app/src/renderer/src/app/components/clock/clock.component.html

@@ -1 +1,17 @@
-<div #clock id="clock"></div>
+<div class="clock-container">
+    <div class="clock-toggle">
+        <mat-label class="mat-slide-toggle-content" >Digital</mat-label>
+        <mat-slide-toggle [checked]="isClockAnalog$ | async" [hideIcon]="true" (toggleChange)="toggleClock()"></mat-slide-toggle>
+        <mat-label class="mat-slide-toggle-content">Analog</mat-label>
+    </div>
+    <div class="clock">
+        <ng-container *ngIf="isClockAnalog$ | async; else digital">
+            <app-analog-clock></app-analog-clock>
+        </ng-container>
+
+        <ng-template #digital>
+            <app-digital-clock></app-digital-clock>
+        </ng-template>
+    </div>
+
+</div>

app/src/renderer/src/app/components/clock/clock.component.scss

@@ -1,6 +1,28 @@
-:host,
-div {
-  display: block;
-  height: 100%;
-  width: 100%;
+.clock-toggle{
+    display:flex;
+    flex-direction: row;
+    justify-content: flex-end;
+    padding: 16px;
+    display:flex;
+    gap: 8px;
 }
+
+.clock-container{
+    display:flex;
+    flex-direction: column;
+    flex: 1;
+    height: 100%;
+}
+
+app-digital-clock, app-analog-clock{
+    flex: 1;
+    display:flex;
+    justify-content: center;
+    align-items: center;
+    height: 100%;
+}
+
+.clock{
+    flex: 1 1 0;
+    width: 100%;
+}

app/src/renderer/src/app/components/clock/clock.component.spec.ts

@@ -6,14 +6,10 @@ describe('ClockComponent', () => {
   let component: ClockComponent;
   let fixture: ComponentFixture<ClockComponent>;
 
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      declarations: [ ClockComponent ]
-    })
-    .compileComponents();
-  });
-
   beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [ClockComponent]
+    });
     fixture = TestBed.createComponent(ClockComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();