;
- 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..44adf5ef
--- /dev/null
+++ b/app/src/renderer/src/app/components/digital-clock/digital-clock.component.html
@@ -0,0 +1,8 @@
+
+
+
+ {{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
new file mode 100644
index 00000000..ef8cd55c
--- /dev/null
+++ b/app/src/renderer/src/app/components/digital-clock/digital-clock.component.scss
@@ -0,0 +1,29 @@
+
+.digital{
+ font-family: "Digital", serif;
+}
+
+.container{
+ display:flex;
+ justify-content: center;
+ align-items: center;
+ flex: 1;
+}
+
+.clock{
+ position:relative;
+ font-size: calc(8vh + 8vw);
+}
+
+.monospace{
+ display:inline-block;
+ text-align: end;
+ width: 6vw;
+}
+
+.ampm{
+ position: absolute;
+ 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.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..013a0562
--- /dev/null
+++ b/app/src/renderer/src/app/components/digital-clock/digital-clock.component.ts
@@ -0,0 +1,46 @@
+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(this.getClockString().clockString);
+ ampmString$ = new BehaviorSubject(this.getClockString().isAm ? 'AM' : 'PM');
+
+ ngAfterViewInit(){
+ this.startClock()
+ }
+
+ startClock(){
+ if(this.interval){
+ clearInterval(this.interval);
+ this.interval = null;
+ }
+
+ 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 ? 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,
+ }
+
+
+ }
+}
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 00000000..064ad478
Binary files /dev/null and b/app/src/renderer/src/assets/fonts/DS-DIGIB.TTF differ
diff --git a/app/src/renderer/src/assets/fonts/font-file.css b/app/src/renderer/src/assets/fonts/font-file.css
new file mode 100644
index 00000000..0c16d470
--- /dev/null
+++ b/app/src/renderer/src/assets/fonts/font-file.css
@@ -0,0 +1,4 @@
+@font-face {
+ font-family: "Digital";
+ src: url("./DS-DIGIB.TTF") format("opentype");
+ }
\ No newline at end of file
diff --git a/app/src/renderer/src/styles.scss b/app/src/renderer/src/styles.scss
index 5256e9ab..7074ea5c 100644
--- a/app/src/renderer/src/styles.scss
+++ b/app/src/renderer/src/styles.scss
@@ -6,5 +6,10 @@ body {
}
body {
margin: 0;
- font-family: Roboto, "Helvetica Neue", sans-serif;
+ font-family: Roboto, sans-serif;
+}
+
+@font-face {
+ font-family: "Digital";
+ src: url('/assets/digital-display-font/DigitalDisplayRegular-ODEO.ttf') format('truetype');
}
diff --git a/app/src/renderer/tsconfig.json b/app/src/renderer/tsconfig.json
index 92952ffb..c507551d 100644
--- a/app/src/renderer/tsconfig.json
+++ b/app/src/renderer/tsconfig.json
@@ -8,16 +8,18 @@
"strict": true,
"noImplicitReturns": true,
"noFallthroughCasesInSwitch": true,
- "sourceMap": true,
+ // "sourceMap": true,
+ "inlineSourceMap": true,
"declaration": false,
"downlevelIteration": true,
"experimentalDecorators": true,
"moduleResolution": "node",
"importHelpers": true,
"strictPropertyInitialization": false,
- "target": "es2015",
+ "target": "es2022",
"module": "es2020",
- "lib": ["es2018", "dom"]
+ "lib": ["es2018", "dom"],
+ "useDefineForClassFields": false,
},
"angularCompilerOptions": {
"enableI18nLegacyMessageIdFormat": false,