From 1aead9d913573bb81c0a64fae9e8a935f9facca0 Mon Sep 17 00:00:00 2001 From: Michael Sorensen Date: Wed, 20 Sep 2023 16:16:45 -0700 Subject: [PATCH 1/2] digital clock --- app/src/renderer/angular.json | 2 +- app/src/renderer/package-lock.json | 17 ++- app/src/renderer/package.json | 3 +- .../app/@core/store/actions/gui.actions.ts | 2 + .../app/@core/store/reducers/gui.reducer.ts | 7 ++ .../@core/store/selectors/gui.selectors.ts | 4 +- .../analog-clock/analog-clock.component.html | 1 + .../analog-clock/analog-clock.component.scss | 6 + .../analog-clock.component.spec.ts | 25 +++++ .../analog-clock/analog-clock.component.ts | 102 +++++++++++++++++ .../analog-clock/analog-clock.module.ts | 14 +++ .../app/components/clock/clock.component.html | 18 ++- .../app/components/clock/clock.component.scss | 28 ++++- .../components/clock/clock.component.spec.ts | 10 +- .../app/components/clock/clock.component.ts | 103 ++---------------- .../src/app/components/clock/clock.module.ts | 18 ++- .../digital-clock.component.html | 3 + .../digital-clock.component.scss | 23 ++++ .../digital-clock.component.spec.ts | 21 ++++ .../digital-clock/digital-clock.component.ts | 37 +++++++ .../digital-clock/digital-clock.module.ts | 18 +++ .../task-list/task-list.component.ts | 6 +- .../task-terminal.component.html | 1 + .../task-terminal.component.scss | 0 .../task-terminal.component.spec.ts | 21 ++++ .../task-terminal/task-terminal.component.ts | 10 ++ .../task-terminal/task-terminal.module.ts | 15 +++ .../scaffolding/header/header.component.ts | 6 +- .../app/scaffolding/main/main.component.scss | 3 + .../app/scaffolding/main/main.component.ts | 6 +- .../src/app/scaffolding/main/main.module.ts | 2 +- .../renderer/src/assets/fonts/DS-DIGIB.TTF | Bin 0 -> 24896 bytes .../renderer/src/assets/fonts/font-file.css | 4 + app/src/renderer/src/styles.scss | 7 +- app/src/renderer/tsconfig.json | 8 +- 35 files changed, 426 insertions(+), 125 deletions(-) create mode 100644 app/src/renderer/src/app/components/analog-clock/analog-clock.component.html create mode 100644 app/src/renderer/src/app/components/analog-clock/analog-clock.component.scss create mode 100644 app/src/renderer/src/app/components/analog-clock/analog-clock.component.spec.ts create mode 100644 app/src/renderer/src/app/components/analog-clock/analog-clock.component.ts create mode 100644 app/src/renderer/src/app/components/analog-clock/analog-clock.module.ts create mode 100644 app/src/renderer/src/app/components/digital-clock/digital-clock.component.html create mode 100644 app/src/renderer/src/app/components/digital-clock/digital-clock.component.scss create mode 100644 app/src/renderer/src/app/components/digital-clock/digital-clock.component.spec.ts create mode 100644 app/src/renderer/src/app/components/digital-clock/digital-clock.component.ts create mode 100644 app/src/renderer/src/app/components/digital-clock/digital-clock.module.ts create mode 100644 app/src/renderer/src/app/components/task-terminal/task-terminal.component.html create mode 100644 app/src/renderer/src/app/components/task-terminal/task-terminal.component.scss create mode 100644 app/src/renderer/src/app/components/task-terminal/task-terminal.component.spec.ts create mode 100644 app/src/renderer/src/app/components/task-terminal/task-terminal.component.ts create mode 100644 app/src/renderer/src/app/components/task-terminal/task-terminal.module.ts create mode 100644 app/src/renderer/src/assets/fonts/DS-DIGIB.TTF create mode 100644 app/src/renderer/src/assets/fonts/font-file.css diff --git a/app/src/renderer/angular.json b/app/src/renderer/angular.json index 929c257d..c85a3884 100644 --- a/app/src/renderer/angular.json +++ b/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": { diff --git a/app/src/renderer/package-lock.json b/app/src/renderer/package-lock.json index 8a190f0a..342acad4 100644 --- a/app/src/renderer/package-lock.json +++ b/app/src/renderer/package-lock.json @@ -22,9 +22,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": { @@ -6459,9 +6460,12 @@ } }, "node_modules/cronstrue": { - "version": "1.113.0", - "resolved": "https://registry.npmjs.org/cronstrue/-/cronstrue-1.113.0.tgz", - "integrity": "sha512-j0+CQsQx0g0Iv6nQs0bHkLcpeCzYShWUdQ3QwSHV+dUyTLqI/3NPrHceeDfTXmC3Re4osMli5+wAYpffNO+e9w==" + "version": "2.32.0", + "resolved": "https://registry.npmjs.org/cronstrue/-/cronstrue-2.32.0.tgz", + "integrity": "sha512-dmNflOCNJL6lZEj0dp2YhGIPY83VTjFue6d9feFhnNtrER6mAjBrUvSgK95j3IB/xNGpLjaZDIDG6ACKTZr9Yw==", + "bin": { + "cronstrue": "bin/cli.js" + } }, "node_modules/cross-spawn": { "version": "7.0.3", @@ -14798,6 +14802,11 @@ "integrity": "sha512-JZnDKK8B0RCDw84FNdDAIpZK+JuJw+s7Lz8nksI7SIuU3UXJJslUthsi+uWBUYOwPFwW7W7PRLRfUKpxjtjFCw==", "dev": true }, + "node_modules/xterm": { + "version": "5.3.0", + "resolved": "https://registry.npmjs.org/xterm/-/xterm-5.3.0.tgz", + "integrity": "sha512-8QqjlekLUFTrU6x7xck1MsPzPA571K5zNqWm0M0oroYEWVOptZ0+ubQSkQ3uxIEhcIHRujJy6emDWX4A7qyFzg==" + }, "node_modules/y18n": { "version": "4.0.1", "resolved": "https://registry.npmjs.org/y18n/-/y18n-4.0.1.tgz", diff --git a/app/src/renderer/package.json b/app/src/renderer/package.json index 19d90d4a..b8401584 100644 --- a/app/src/renderer/package.json +++ b/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": { diff --git a/app/src/renderer/src/app/@core/store/actions/gui.actions.ts b/app/src/renderer/src/app/@core/store/actions/gui.actions.ts index 9457be11..5325917f 100644 --- a/app/src/renderer/src/app/@core/store/actions/gui.actions.ts +++ b/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'); \ No newline at end of file diff --git a/app/src/renderer/src/app/@core/store/reducers/gui.reducer.ts b/app/src/renderer/src/app/@core/store/reducers/gui.reducer.ts index 4903b0c1..d0fbc9b4 100644 --- a/app/src/renderer/src/app/@core/store/reducers/gui.reducer.ts +++ b/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 })) ); diff --git a/app/src/renderer/src/app/@core/store/selectors/gui.selectors.ts b/app/src/renderer/src/app/@core/store/selectors/gui.selectors.ts index 0cbb92c2..ebaf0934 100644 --- a/app/src/renderer/src/app/@core/store/selectors/gui.selectors.ts +++ b/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; \ No newline at end of file +export const selectFilter = (state: {gui: GUIState}) => state.gui.scheduleFilter; + +export const selectIsClockAnalog = (state: {gui:GUIState}) => state.gui.isClockAnalog; \ No newline at end of file diff --git a/app/src/renderer/src/app/components/analog-clock/analog-clock.component.html b/app/src/renderer/src/app/components/analog-clock/analog-clock.component.html new file mode 100644 index 00000000..881c91f2 --- /dev/null +++ b/app/src/renderer/src/app/components/analog-clock/analog-clock.component.html @@ -0,0 +1 @@ +
diff --git a/app/src/renderer/src/app/components/analog-clock/analog-clock.component.scss b/app/src/renderer/src/app/components/analog-clock/analog-clock.component.scss new file mode 100644 index 00000000..819bd3f0 --- /dev/null +++ b/app/src/renderer/src/app/components/analog-clock/analog-clock.component.scss @@ -0,0 +1,6 @@ +:host, +div { + display: block; + height: 100%; + width: 100%; +} diff --git a/app/src/renderer/src/app/components/analog-clock/analog-clock.component.spec.ts b/app/src/renderer/src/app/components/analog-clock/analog-clock.component.spec.ts new file mode 100644 index 00000000..366309a7 --- /dev/null +++ b/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; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ AnalogClockComponent ] + }) + .compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(AnalogClockComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/app/src/renderer/src/app/components/analog-clock/analog-clock.component.ts b/app/src/renderer/src/app/components/analog-clock/analog-clock.component.ts new file mode 100644 index 00000000..819c551d --- /dev/null +++ b/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(); +} diff --git a/app/src/renderer/src/app/components/analog-clock/analog-clock.module.ts b/app/src/renderer/src/app/components/analog-clock/analog-clock.module.ts new file mode 100644 index 00000000..b86e5942 --- /dev/null +++ b/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 { } diff --git a/app/src/renderer/src/app/components/clock/clock.component.html b/app/src/renderer/src/app/components/clock/clock.component.html index 881c91f2..c359822d 100644 --- a/app/src/renderer/src/app/components/clock/clock.component.html +++ b/app/src/renderer/src/app/components/clock/clock.component.html @@ -1 +1,17 @@ -
+
+
+ Digital + + Analog +
+
+ + + + + + + +
+ +
\ No newline at end of file diff --git a/app/src/renderer/src/app/components/clock/clock.component.scss b/app/src/renderer/src/app/components/clock/clock.component.scss index 819bd3f0..25b6aba1 100644 --- a/app/src/renderer/src/app/components/clock/clock.component.scss +++ b/app/src/renderer/src/app/components/clock/clock.component.scss @@ -1,6 +1,24 @@ -: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; +} + +.clock{ + flex: 1 1 0; + width: 100%; +} \ No newline at end of file diff --git a/app/src/renderer/src/app/components/clock/clock.component.spec.ts b/app/src/renderer/src/app/components/clock/clock.component.spec.ts index a3e9c02d..9334884f 100644 --- a/app/src/renderer/src/app/components/clock/clock.component.spec.ts +++ b/app/src/renderer/src/app/components/clock/clock.component.spec.ts @@ -6,14 +6,10 @@ describe('ClockComponent', () => { let component: ClockComponent; let fixture: ComponentFixture; - beforeEach(async () => { - await TestBed.configureTestingModule({ - declarations: [ ClockComponent ] - }) - .compileComponents(); - }); - beforeEach(() => { + TestBed.configureTestingModule({ + declarations: [ClockComponent] + }); fixture = TestBed.createComponent(ClockComponent); component = fixture.componentInstance; fixture.detectChanges(); diff --git a/app/src/renderer/src/app/components/clock/clock.component.ts b/app/src/renderer/src/app/components/clock/clock.component.ts index 7b9512df..a0e5bb69 100644 --- a/app/src/renderer/src/app/components/clock/clock.component.ts +++ b/app/src/renderer/src/app/components/clock/clock.component.ts @@ -1,102 +1,23 @@ -import { - AfterViewInit, - Component, - ElementRef, - OnInit, - ViewChild, -} from '@angular/core'; -import { SVG, Color } from '@svgdotjs/svg.js'; +import { Component } from '@angular/core'; +import { Store } from '@ngrx/store'; +import { toggleClock } from 'src/app/@core/store/actions/gui.actions'; +import { GUIState } from 'src/app/@core/store/reducers/gui.reducer'; +import { selectIsClockAnalog } from 'src/app/@core/store/selectors/gui.selectors'; @Component({ selector: 'app-clock', templateUrl: './clock.component.html', - styleUrls: ['./clock.component.scss'], + styleUrls: ['./clock.component.scss'] }) -export class ClockComponent implements AfterViewInit { - @ViewChild('clock') clockElem: ElementRef; +export class ClockComponent { + isClockAnalog$ = this.store.select(selectIsClockAnalog); - constructor(private elRef: ElementRef) {} + constructor(private store:Store<{gui:GUIState}>){ - ngAfterViewInit(): void { - this.renderClock(); - // @ts-ignore - const resizeObserver = new ResizeObserver(() => { - this.rerender(); - }).observe(this.clockElem.nativeElement); } - rerender() { - this.clockElem.nativeElement.innerHTML = ''; - this.renderClock(); + toggleClock(){ + console.log('toggle clock triggered'); + this.store.dispatch(toggleClock()); } - - /************************************ - 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(); } diff --git a/app/src/renderer/src/app/components/clock/clock.module.ts b/app/src/renderer/src/app/components/clock/clock.module.ts index 07234dfd..d68fbf87 100644 --- a/app/src/renderer/src/app/components/clock/clock.module.ts +++ b/app/src/renderer/src/app/components/clock/clock.module.ts @@ -1,14 +1,26 @@ import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; import { ClockComponent } from './clock.component'; +import { MatSlideToggleModule } from '@angular/material/slide-toggle'; +import { MatFormFieldModule } from '@angular/material/form-field'; +import { DigitalClockModule } from '../digital-clock/digital-clock.module'; +import { AnalogClockModule } from '../analog-clock/analog-clock.module'; @NgModule({ - declarations: [ClockComponent], + declarations: [ + ClockComponent + ], imports: [ - CommonModule + CommonModule, + MatSlideToggleModule, + MatFormFieldModule, + DigitalClockModule, + AnalogClockModule ], - exports: [ClockComponent] + exports: [ + ClockComponent + ] }) export class ClockModule { } diff --git a/app/src/renderer/src/app/components/digital-clock/digital-clock.component.html b/app/src/renderer/src/app/components/digital-clock/digital-clock.component.html new file mode 100644 index 00000000..1c969d6e --- /dev/null +++ b/app/src/renderer/src/app/components/digital-clock/digital-clock.component.html @@ -0,0 +1,3 @@ +
+ {{clockString$ | async}} {{ampmString$ | async}} +
diff --git a/app/src/renderer/src/app/components/digital-clock/digital-clock.component.scss b/app/src/renderer/src/app/components/digital-clock/digital-clock.component.scss new file mode 100644 index 00000000..8772cf37 --- /dev/null +++ b/app/src/renderer/src/app/components/digital-clock/digital-clock.component.scss @@ -0,0 +1,23 @@ + +.digital{ + font-family: "Digital", serif; +} + +.container{ + display:flex; + justify-content: center; + align-items: center; + flex: 1; +} + +.clock{ + position:relative; + font-size: calc(10vh + 10vw); +} + +.ampm{ + position: absolute; + font-size: calc(6vh + 6vw); + + left: 105%; +} \ No newline at end of file diff --git a/app/src/renderer/src/app/components/digital-clock/digital-clock.component.spec.ts b/app/src/renderer/src/app/components/digital-clock/digital-clock.component.spec.ts new file mode 100644 index 00000000..caefb391 --- /dev/null +++ b/app/src/renderer/src/app/components/digital-clock/digital-clock.component.spec.ts @@ -0,0 +1,21 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { DigitalClockComponent } from './digital-clock.component'; + +describe('DigitalClockComponent', () => { + let component: DigitalClockComponent; + let fixture: ComponentFixture; + + beforeEach(() => { + TestBed.configureTestingModule({ + declarations: [DigitalClockComponent] + }); + fixture = TestBed.createComponent(DigitalClockComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/app/src/renderer/src/app/components/digital-clock/digital-clock.component.ts b/app/src/renderer/src/app/components/digital-clock/digital-clock.component.ts new file mode 100644 index 00000000..da0ec7b6 --- /dev/null +++ b/app/src/renderer/src/app/components/digital-clock/digital-clock.component.ts @@ -0,0 +1,37 @@ +import { Component } from '@angular/core'; +import {BehaviorSubject} from 'rxjs' + +@Component({ + selector: 'app-digital-clock', + templateUrl: './digital-clock.component.html', + styleUrls: ['./digital-clock.component.scss'] +}) +export class DigitalClockComponent { + interval:NodeJS.Timeout | null; + clockString$ = new BehaviorSubject("00:00:00"); + ampmString$ = new BehaviorSubject("AM"); + + ngAfterViewInit(){ + this.startClock() + } + + startClock(){ + if(this.interval){ + clearInterval(this.interval); + this.interval = null; + } + + this.interval = setInterval(()=>{this.getClockString()}, 1000) + + } + + getClockString(){ + const date = new Date(); + const hours = (date.getHours() % 12) .toString().padStart(2, '0'); + const minutes = date.getMinutes().toString().padStart(2, '0'); + const seconds = date.getSeconds().toString().padStart(2, '0'); + + this.clockString$.next(`${hours}:${minutes}:${seconds}`) + this.ampmString$.next((date.getHours() / 12) > 1 ? 'PM' : 'AM') + } +} diff --git a/app/src/renderer/src/app/components/digital-clock/digital-clock.module.ts b/app/src/renderer/src/app/components/digital-clock/digital-clock.module.ts new file mode 100644 index 00000000..384fceeb --- /dev/null +++ b/app/src/renderer/src/app/components/digital-clock/digital-clock.module.ts @@ -0,0 +1,18 @@ +import { NgModule } from '@angular/core'; +import { CommonModule } from '@angular/common'; +import { DigitalClockComponent } from './digital-clock.component'; + + + +@NgModule({ + declarations: [ + DigitalClockComponent + ], + imports: [ + CommonModule + ], + exports:[ + DigitalClockComponent + ] +}) +export class DigitalClockModule { } diff --git a/app/src/renderer/src/app/components/task-list/task-list.component.ts b/app/src/renderer/src/app/components/task-list/task-list.component.ts index 7b155303..fbac1415 100644 --- a/app/src/renderer/src/app/components/task-list/task-list.component.ts +++ b/app/src/renderer/src/app/components/task-list/task-list.component.ts @@ -13,9 +13,11 @@ import { GUIState } from 'src/app/@core/store/reducers/gui.reducer'; styleUrls: ['./task-list.component.scss'], }) export class TaskListComponent implements OnInit { - schedule$ = this.store.select(selectSchedule) + schedule$ - constructor(private store: Store<{ schedule: Schedule, gui:GUIState }>) {} + constructor(private store: Store<{ schedule: Schedule, gui:GUIState }>) { + this.schedule$ = this.store.select(selectSchedule); + } ngOnInit(): void { this.store.dispatch(getSchedule()); diff --git a/app/src/renderer/src/app/components/task-terminal/task-terminal.component.html b/app/src/renderer/src/app/components/task-terminal/task-terminal.component.html new file mode 100644 index 00000000..b1838394 --- /dev/null +++ b/app/src/renderer/src/app/components/task-terminal/task-terminal.component.html @@ -0,0 +1 @@ +

task-terminal works!

diff --git a/app/src/renderer/src/app/components/task-terminal/task-terminal.component.scss b/app/src/renderer/src/app/components/task-terminal/task-terminal.component.scss new file mode 100644 index 00000000..e69de29b diff --git a/app/src/renderer/src/app/components/task-terminal/task-terminal.component.spec.ts b/app/src/renderer/src/app/components/task-terminal/task-terminal.component.spec.ts new file mode 100644 index 00000000..b0450e47 --- /dev/null +++ b/app/src/renderer/src/app/components/task-terminal/task-terminal.component.spec.ts @@ -0,0 +1,21 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { TaskTerminalComponent } from './task-terminal.component'; + +describe('TaskTerminalComponent', () => { + let component: TaskTerminalComponent; + let fixture: ComponentFixture; + + beforeEach(() => { + TestBed.configureTestingModule({ + declarations: [TaskTerminalComponent] + }); + fixture = TestBed.createComponent(TaskTerminalComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/app/src/renderer/src/app/components/task-terminal/task-terminal.component.ts b/app/src/renderer/src/app/components/task-terminal/task-terminal.component.ts new file mode 100644 index 00000000..30663abb --- /dev/null +++ b/app/src/renderer/src/app/components/task-terminal/task-terminal.component.ts @@ -0,0 +1,10 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-task-terminal', + templateUrl: './task-terminal.component.html', + styleUrls: ['./task-terminal.component.scss'] +}) +export class TaskTerminalComponent { + +} diff --git a/app/src/renderer/src/app/components/task-terminal/task-terminal.module.ts b/app/src/renderer/src/app/components/task-terminal/task-terminal.module.ts new file mode 100644 index 00000000..a2614cc1 --- /dev/null +++ b/app/src/renderer/src/app/components/task-terminal/task-terminal.module.ts @@ -0,0 +1,15 @@ +import { NgModule } from '@angular/core'; +import { CommonModule } from '@angular/common'; +import { TaskTerminalComponent } from './task-terminal.component'; + + + +@NgModule({ + declarations: [ + TaskTerminalComponent + ], + imports: [ + CommonModule + ] +}) +export class TaskTerminalModule { } diff --git a/app/src/renderer/src/app/scaffolding/header/header.component.ts b/app/src/renderer/src/app/scaffolding/header/header.component.ts index 115e1bd3..2bdbd9c2 100644 --- a/app/src/renderer/src/app/scaffolding/header/header.component.ts +++ b/app/src/renderer/src/app/scaffolding/header/header.component.ts @@ -14,8 +14,10 @@ import { selectLoading } from 'src/app/@core/store/selectors/gui.selectors'; styleUrls: ['./header.component.scss'], }) export class HeaderComponent { - loading$ = this.store.select(selectLoading); - constructor(private store: Store<{ gui: GUIState }>) {} + loading$ + constructor(private store: Store<{ gui: GUIState }>) { + this.loading$ = this.store.select(selectLoading); + } minimize() { this.store.dispatch(minimizeWindow()); diff --git a/app/src/renderer/src/app/scaffolding/main/main.component.scss b/app/src/renderer/src/app/scaffolding/main/main.component.scss index 0313300c..121f78e5 100644 --- a/app/src/renderer/src/app/scaffolding/main/main.component.scss +++ b/app/src/renderer/src/app/scaffolding/main/main.component.scss @@ -7,6 +7,9 @@ mat-sidenav-content { flex-direction: column; } +app-clock{ + flex: 1; +} mwlResizable { diff --git a/app/src/renderer/src/app/scaffolding/main/main.component.ts b/app/src/renderer/src/app/scaffolding/main/main.component.ts index 5e29ffde..4f242cd7 100644 --- a/app/src/renderer/src/app/scaffolding/main/main.component.ts +++ b/app/src/renderer/src/app/scaffolding/main/main.component.ts @@ -10,9 +10,11 @@ import { MatSidenav } from '@angular/material/sidenav'; styleUrls: ['./main.component.scss'], }) export class MainComponent { - sideNavOpened$ = this.store.select(selectSideNavOpen); + sideNavOpened$ sideNavWidth = "300px"; - constructor(private store: Store<{ gui: GUIState }>) {} + constructor(private store: Store<{ gui: GUIState }>) { + this.sideNavOpened$ = store.select(selectSideNavOpen); + } handleSideNavResize(event:ResizeEvent){ console.log(event); diff --git a/app/src/renderer/src/app/scaffolding/main/main.module.ts b/app/src/renderer/src/app/scaffolding/main/main.module.ts index a3c80324..380f781c 100644 --- a/app/src/renderer/src/app/scaffolding/main/main.module.ts +++ b/app/src/renderer/src/app/scaffolding/main/main.module.ts @@ -2,10 +2,10 @@ import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; import { MainComponent } from './main.component'; import { MatSidenavModule } from '@angular/material/sidenav'; -import { ClockModule } from 'src/app/components/clock/clock.module'; import { TaskFormModule } from 'src/app/components/task-form/task-form.module'; import { TaskListModule } from 'src/app/components/task-list/task-list.module'; import { ResizableModule } from 'angular-resizable-element'; +import { ClockModule } from 'src/app/components/clock/clock.module'; @NgModule({ declarations: [MainComponent], diff --git a/app/src/renderer/src/assets/fonts/DS-DIGIB.TTF b/app/src/renderer/src/assets/fonts/DS-DIGIB.TTF new file mode 100644 index 0000000000000000000000000000000000000000..064ad478a510a9c581bb16d295f659256e1f920a GIT binary patch literal 24896 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 Date: Thu, 21 Sep 2023 13:48:58 -0700 Subject: [PATCH 2/2] digital clock finished --- .../app/components/clock/clock.component.scss | 4 ++++ .../digital-clock.component.html | 7 ++++++- .../digital-clock.component.scss | 10 +++++++-- .../digital-clock/digital-clock.component.ts | 21 +++++++++++++------ 4 files changed, 33 insertions(+), 9 deletions(-) diff --git a/app/src/renderer/src/app/components/clock/clock.component.scss b/app/src/renderer/src/app/components/clock/clock.component.scss index 25b6aba1..0e0c9bac 100644 --- a/app/src/renderer/src/app/components/clock/clock.component.scss +++ b/app/src/renderer/src/app/components/clock/clock.component.scss @@ -16,6 +16,10 @@ app-digital-clock, app-analog-clock{ flex: 1; + display:flex; + justify-content: center; + align-items: center; + height: 100%; } .clock{ diff --git a/app/src/renderer/src/app/components/digital-clock/digital-clock.component.html b/app/src/renderer/src/app/components/digital-clock/digital-clock.component.html index 1c969d6e..44adf5ef 100644 --- a/app/src/renderer/src/app/components/digital-clock/digital-clock.component.html +++ b/app/src/renderer/src/app/components/digital-clock/digital-clock.component.html @@ -1,3 +1,8 @@
- {{clockString$ | async}} {{ampmString$ | async}} + + + {{character}} + + {{ampmString$ | async}} +
diff --git a/app/src/renderer/src/app/components/digital-clock/digital-clock.component.scss b/app/src/renderer/src/app/components/digital-clock/digital-clock.component.scss index 8772cf37..ef8cd55c 100644 --- a/app/src/renderer/src/app/components/digital-clock/digital-clock.component.scss +++ b/app/src/renderer/src/app/components/digital-clock/digital-clock.component.scss @@ -12,12 +12,18 @@ .clock{ position:relative; - font-size: calc(10vh + 10vw); + font-size: calc(8vh + 8vw); +} + +.monospace{ + display:inline-block; + text-align: end; + width: 6vw; } .ampm{ position: absolute; - font-size: calc(6vh + 6vw); + font-size: calc(2vh + 2vw); left: 105%; } \ No newline at end of file diff --git a/app/src/renderer/src/app/components/digital-clock/digital-clock.component.ts b/app/src/renderer/src/app/components/digital-clock/digital-clock.component.ts index da0ec7b6..013a0562 100644 --- a/app/src/renderer/src/app/components/digital-clock/digital-clock.component.ts +++ b/app/src/renderer/src/app/components/digital-clock/digital-clock.component.ts @@ -8,8 +8,8 @@ import {BehaviorSubject} from 'rxjs' }) export class DigitalClockComponent { interval:NodeJS.Timeout | null; - clockString$ = new BehaviorSubject("00:00:00"); - ampmString$ = new BehaviorSubject("AM"); + clockString$ = new BehaviorSubject(this.getClockString().clockString); + ampmString$ = new BehaviorSubject(this.getClockString().isAm ? 'AM' : 'PM'); ngAfterViewInit(){ this.startClock() @@ -21,17 +21,26 @@ export class DigitalClockComponent { this.interval = null; } - this.interval = setInterval(()=>{this.getClockString()}, 1000) + this.interval = setInterval(()=>{ + const {clockString, isAm} = this.getClockString() + this.clockString$.next(clockString) + this.ampmString$.next(isAm ? 'AM' : 'PM') + }, 1000) } getClockString(){ const date = new Date(); - const hours = (date.getHours() % 12) .toString().padStart(2, '0'); + const hours = (date.getHours() !== 12 ? date.getHours() % 12 : 12).toString().padStart(2, '0'); const minutes = date.getMinutes().toString().padStart(2, '0'); const seconds = date.getSeconds().toString().padStart(2, '0'); + const isAm = (date.getHours() / 12) < 1; + + return { + clockString:`${hours}:${minutes}:${seconds}`, + isAm, + } + - this.clockString$.next(`${hours}:${minutes}:${seconds}`) - this.ampmString$.next((date.getHours() / 12) > 1 ? 'PM' : 'AM') } }