@for (bar of item.items; track $index) {
-
{{bar.title}}
}
diff --git a/src/app/gantt/gantt.component.scss b/src/app/gantt/gantt.component.scss
index 93b4545..9ef2f0c 100644
--- a/src/app/gantt/gantt.component.scss
+++ b/src/app/gantt/gantt.component.scss
@@ -119,11 +119,10 @@
top: 0;
left: 0;
height: var(--row-height);
- background-color: blue;
+ background-color: #6082b6;
color: #fff;
- box-sizing: border-box;
-
- border-radius: 0.2rem;
+ box-sizing: content-box;
+ border: solid thin #dbd7d2;
display: flex;
align-items: center;
@@ -134,7 +133,7 @@
white-space: nowrap;
&:hover {
- border: solid thin #fff;
+ border: solid thin #fd673a;
z-index: 99;
cursor: default;
}
@@ -232,7 +231,6 @@
&:last-child {
.tick {
- color: red;
&:last-child {
border-right: none;
}
@@ -306,3 +304,13 @@
font-size: 0.95rem;
}
}
+
+// DESIGN
+.flex {
+ display: flex;
+ align-items: center;
+}
+
+.head-controls {
+ padding: 0.25rem;
+}
diff --git a/src/app/gantt/gantt.component.ts b/src/app/gantt/gantt.component.ts
index ae3c455..5116d1e 100644
--- a/src/app/gantt/gantt.component.ts
+++ b/src/app/gantt/gantt.component.ts
@@ -2,6 +2,9 @@ import { ChangeDetectorRef, Component, ElementRef, Input, ViewChild } from '@ang
import { Observable } from 'rxjs';
import { DateTime } from 'luxon';
import { GanttView } from './views/view';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
+import { MatButtonToggleModule } from '@angular/material/button-toggle';
export interface GanttItem {
id: string;
@@ -11,8 +14,12 @@ export interface GanttItem {
export interface GanttBarElement {
title: string,
+ orig_start: number,
+ orig_end: number,
+ duration: number,
start: number,
- duration_sec: number,
+ end: number,
+ effective_duration: number,
}
interface WorkTime {
@@ -27,7 +34,7 @@ interface IntervalDescriptor {
@Component({
selector: 'app-gantt',
- imports: [],
+ imports: [MatButtonModule, MatIconModule, MatButtonToggleModule],
templateUrl: './gantt.component.html',
styleUrl: './gantt.component.scss'
})
@@ -43,16 +50,58 @@ export class GanttComponent {
startDate: DateTime;
- weekOpenTime: WorkTime[][] = [
- [{ start_day_sec: 8 * 3600, duration_sec: 8 * 3600 }],
- [{ start_day_sec: 8 * 3600, duration_sec: 8 * 3600 }],
- [{ start_day_sec: 8 * 3600, duration_sec: 8 * 3600 }],
- [{ start_day_sec: 8 * 3600, duration_sec: 8 * 3600 }],
- [{ start_day_sec: 8 * 3600, duration_sec: 8 * 3600 }],
- [{ start_day_sec: 8 * 3600, duration_sec: 8 * 3600 }],
- [{ start_day_sec: 8 * 3600, duration_sec: 8 * 3600 }],
- [{ start_day_sec: 8 * 3600, duration_sec: 8 * 3600 }],
- ];
+ weekOpenTime: { [key: number]: WorkTime[] } = {
+ "0": [
+ {
+ "start_day_sec": 32400,
+ "duration_sec": 10800
+ },
+ {
+ "start_day_sec": 46800,
+ "duration_sec": 14400
+ }
+ ],
+ "1": [
+ {
+ "start_day_sec": 32400,
+ "duration_sec": 10800
+ },
+ {
+ "start_day_sec": 46800,
+ "duration_sec": 14400
+ }
+ ],
+ "2": [
+ {
+ "start_day_sec": 32400,
+ "duration_sec": 10800
+ },
+ {
+ "start_day_sec": 46800,
+ "duration_sec": 14400
+ }
+ ],
+ "3": [
+ {
+ "start_day_sec": 32400,
+ "duration_sec": 10800
+ },
+ {
+ "start_day_sec": 46800,
+ "duration_sec": 14400
+ }
+ ],
+ "4": [
+ {
+ "start_day_sec": 32400,
+ "duration_sec": 10800
+ },
+ {
+ "start_day_sec": 46800,
+ "duration_sec": 14400
+ }
+ ]
+ };
constructor(private changeDetectorRef: ChangeDetectorRef) {
this.startDate = DateTime.now().minus({ weeks: 1 }).startOf('week').startOf('day').setLocale('de');
diff --git a/src/app/gantt/views/base.ts b/src/app/gantt/views/base.ts
index 96e96eb..7ec0411 100644
--- a/src/app/gantt/views/base.ts
+++ b/src/app/gantt/views/base.ts
@@ -1,7 +1,10 @@
import { DateTime, Settings } from "luxon";
import { DescriptorSet } from "./descriptors";
-export const defaultAvailable = [{ start_day_sec: 8 * 3600, duration_sec: 8 * 3600, onSaturday: false, onSunOrHoliday: false }];
+export const defaultAvailable = [
+ { start_day_sec: 9 * 3600, duration_sec: 3 * 3600, onSaturday: false, onSunOrHoliday: false },
+ { start_day_sec: 13 * 3600, duration_sec: 4 * 3600, onSaturday: false, onSunOrHoliday: false }
+];
export abstract class GanttViewType {
diff --git a/src/app/gross-net-calculator/gross-net-calculator-input.directive.spec.ts b/src/app/gross-net-calculator/gross-net-calculator-input.directive.spec.ts
new file mode 100644
index 0000000..8e14a7b
--- /dev/null
+++ b/src/app/gross-net-calculator/gross-net-calculator-input.directive.spec.ts
@@ -0,0 +1,8 @@
+import { GrossNetCalculatorInputDirective } from './gross-net-calculator-input.directive';
+
+describe('GrossNetCalculatorInputDirective', () => {
+ it('should create an instance', () => {
+ const directive = new GrossNetCalculatorInputDirective();
+ expect(directive).toBeTruthy();
+ });
+});
diff --git a/src/app/gross-net-calculator/gross-net-calculator-input.directive.ts b/src/app/gross-net-calculator/gross-net-calculator-input.directive.ts
new file mode 100644
index 0000000..8fb500a
--- /dev/null
+++ b/src/app/gross-net-calculator/gross-net-calculator-input.directive.ts
@@ -0,0 +1,63 @@
+import { Component, ComponentFactoryResolver, Directive, inject, Input, TemplateRef, ViewChild, ViewContainerRef } from '@angular/core';
+import { GrossNetCalculatorComponent } from './gross-net-calculator.component';
+import { MatButton } from '@angular/material/button';
+import { GrossNetCalculatorToggleButtonComponent } from './toggle-button/toggle-button.component';
+import { ComponentPortal, Portal, TemplatePortal } from '@angular/cdk/portal';
+
+@Component({
+ selector: 'component-portal-example',
+ template: '
',
+})
+export class ComponentPortalExample { }
+
+@Directive({
+ selector: 'input[grossNetCalculator]',
+})
+export class GrossNetCalculatorInputDirective {
+
+ private _viewContainerRef = inject(ViewContainerRef);
+
+ @ViewChild(TemplateRef) _template!: TemplateRef
;
+
+ private _portal!: ComponentPortal;
+
+ @Input()
+ set grossNetCalculator(calculator: GrossNetCalculatorComponent) {
+ console.log(calculator)
+
+ if (calculator) {
+ this._calculator = calculator;
+ // this._ariaOwns.set(datepicker.opened ? datepicker.id : null);
+ // this._closedSubscription = datepicker.closedStream.subscribe(() => {
+ // this._onTouched();
+ // this._ariaOwns.set(null);
+ // });
+ // this._openedSubscription = datepicker.openedStream.subscribe(() => {
+ // this._ariaOwns.set(datepicker.id);
+ // });
+ // this._registerModel(datepicker.registerInput(this));
+ }
+ }
+
+ _calculator?: GrossNetCalculatorComponent;
+
+
+ constructor() {
+ console.log(this._viewContainerRef);
+
+ this._viewContainerRef.createComponent(GrossNetCalculatorToggleButtonComponent)
+ this._viewContainerRef.createComponent(ComponentPortalExample)
+ }
+
+
+ ngAfterViewInit() {
+ this._portal = new ComponentPortal(GrossNetCalculatorComponent);
+ }
+
+ protected _openPopup(): void {
+ if (this._calculator) {
+ // this._datepicker.open();
+ }
+ }
+
+}
diff --git a/src/app/gross-net-calculator/gross-net-calculator.component.html b/src/app/gross-net-calculator/gross-net-calculator.component.html
new file mode 100644
index 0000000..48813b1
--- /dev/null
+++ b/src/app/gross-net-calculator/gross-net-calculator.component.html
@@ -0,0 +1,34 @@
+
+
+
+
+
\ No newline at end of file
diff --git a/src/app/gross-net-calculator/gross-net-calculator.component.scss b/src/app/gross-net-calculator/gross-net-calculator.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/gross-net-calculator/gross-net-calculator.component.spec.ts b/src/app/gross-net-calculator/gross-net-calculator.component.spec.ts
new file mode 100644
index 0000000..8f517cd
--- /dev/null
+++ b/src/app/gross-net-calculator/gross-net-calculator.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { GrossNetCalculatorComponent } from './gross-net-calculator.component';
+
+describe('GrossNetCalculatorComponent', () => {
+ let component: GrossNetCalculatorComponent;
+ let fixture: ComponentFixture;
+
+ beforeEach(async () => {
+ await TestBed.configureTestingModule({
+ imports: [GrossNetCalculatorComponent]
+ })
+ .compileComponents();
+
+ fixture = TestBed.createComponent(GrossNetCalculatorComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/src/app/gross-net-calculator/gross-net-calculator.component.ts b/src/app/gross-net-calculator/gross-net-calculator.component.ts
new file mode 100644
index 0000000..fe2410d
--- /dev/null
+++ b/src/app/gross-net-calculator/gross-net-calculator.component.ts
@@ -0,0 +1,13 @@
+import { OverlayModule } from '@angular/cdk/overlay';
+import { TemplatePortal } from '@angular/cdk/portal';
+import { Component, inject, ViewContainerRef } from '@angular/core';
+
+@Component({
+ selector: 'gross-net-calculator',
+ imports: [OverlayModule],
+ templateUrl: './gross-net-calculator.component.html',
+ styleUrl: './gross-net-calculator.component.scss'
+})
+export class GrossNetCalculatorComponent {
+
+}
diff --git a/src/app/gross-net-calculator/toggle-button/toggle-button.component.html b/src/app/gross-net-calculator/toggle-button/toggle-button.component.html
new file mode 100644
index 0000000..2ef2be7
--- /dev/null
+++ b/src/app/gross-net-calculator/toggle-button/toggle-button.component.html
@@ -0,0 +1,4 @@
+
+
\ No newline at end of file
diff --git a/src/app/gross-net-calculator/toggle-button/toggle-button.component.scss b/src/app/gross-net-calculator/toggle-button/toggle-button.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/gross-net-calculator/toggle-button/toggle-button.component.spec.ts b/src/app/gross-net-calculator/toggle-button/toggle-button.component.spec.ts
new file mode 100644
index 0000000..7d10255
--- /dev/null
+++ b/src/app/gross-net-calculator/toggle-button/toggle-button.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { GrossNetCalculatorToggleButtonComponent } from './toggle-button.component';
+
+describe('ToggleButtonComponent', () => {
+ let component: GrossNetCalculatorToggleButtonComponent;
+ let fixture: ComponentFixture;
+
+ beforeEach(async () => {
+ await TestBed.configureTestingModule({
+ imports: [GrossNetCalculatorToggleButtonComponent]
+ })
+ .compileComponents();
+
+ fixture = TestBed.createComponent(GrossNetCalculatorToggleButtonComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/src/app/gross-net-calculator/toggle-button/toggle-button.component.ts b/src/app/gross-net-calculator/toggle-button/toggle-button.component.ts
new file mode 100644
index 0000000..b3a0a88
--- /dev/null
+++ b/src/app/gross-net-calculator/toggle-button/toggle-button.component.ts
@@ -0,0 +1,14 @@
+import { Component, ViewEncapsulation } from '@angular/core';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
+
+@Component({
+ selector: 'gross-net-calculator-toggle-button',
+ imports: [MatIconModule, MatButtonModule],
+ templateUrl: './toggle-button.component.html',
+ styleUrl: './toggle-button.component.scss',
+ encapsulation: ViewEncapsulation.None,
+})
+export class GrossNetCalculatorToggleButtonComponent {
+
+}
diff --git a/src/app/progress-stepper/progress-stepper.component.html b/src/app/progress-stepper/progress-stepper.component.html
index d8b7665..5f4c6d0 100644
--- a/src/app/progress-stepper/progress-stepper.component.html
+++ b/src/app/progress-stepper/progress-stepper.component.html
@@ -1,6 +1,6 @@
- @for (item of steps; track item; let index = $index) {
+ @for (item of steps; track $index; let index = $index) {