diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index 90abcad..62fe3fd 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -2,7 +2,34 @@ import { Component } from '@angular/core';
@Component({
selector: 'app-root',
- template: ``,
- styles: [],
+ template: `
+
+ My App
+
+
+
+
+
+
+
+
+
+ Any content
+
+
+ `,
+ styles: [
+ `
+ .content {
+ background-color: #fff;
+ padding: 2rem;
+ height: calc(100vh - 64px);
+ display: flex;
+ box-sizing: border-box;
+ justify-content: center;
+ align-items: center;
+ }
+ `,
+ ],
})
export class AppComponent {}
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 4b519a0..966d0bf 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -3,10 +3,29 @@ import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { MatToolbarModule } from '@angular/material/toolbar';
+import { MatButtonModule } from '@angular/material/button';
+import { MatDividerModule } from '@angular/material/divider';
+import { MatIconModule } from '@angular/material/icon';
+import { WidgetComponent } from './widget/widget.component';
+import { WetherContentComponent } from './widget/wether-content.component';
+import { VelocityContentComponent } from './widget/velocity-content.component';
@NgModule({
- declarations: [AppComponent],
- imports: [BrowserModule, BrowserAnimationsModule],
+ declarations: [
+ AppComponent,
+ WidgetComponent,
+ WetherContentComponent,
+ VelocityContentComponent,
+ ],
+ imports: [
+ BrowserModule,
+ BrowserAnimationsModule,
+ MatToolbarModule,
+ MatButtonModule,
+ MatDividerModule,
+ MatIconModule,
+ ],
providers: [],
bootstrap: [AppComponent],
})
diff --git a/src/app/widget/velocity-content.component.ts b/src/app/widget/velocity-content.component.ts
new file mode 100644
index 0000000..c58649f
--- /dev/null
+++ b/src/app/widget/velocity-content.component.ts
@@ -0,0 +1,18 @@
+import { Component } from '@angular/core';
+import { WidgetContent } from './widget-content';
+
+@Component({
+ selector: 'app-velocity-content',
+ template: `
+ Last sprint
+
+ assessment
+ Planned: 25
+ Achieved: 20
+
+ `,
+ styleUrls: ['./widget-content.scss'],
+})
+export class VelocityContentComponent implements WidgetContent {
+ id = 'random-string';
+}
diff --git a/src/app/widget/wether-content.component.ts b/src/app/widget/wether-content.component.ts
new file mode 100644
index 0000000..d7c6494
--- /dev/null
+++ b/src/app/widget/wether-content.component.ts
@@ -0,0 +1,25 @@
+import { Component } from '@angular/core';
+import { WidgetContent, Reloadable } from './widget-content';
+import { RELOADABLE_CONTENT } from './widget-content.token';
+
+@Component({
+ selector: 'app-wether-content',
+ template: `
+ Currently
+
+ `,
+ styleUrls: ['./widget-content.scss'],
+ providers: [
+ { provide: RELOADABLE_CONTENT, useExisting: WetherContentComponent },
+ ],
+})
+export class WetherContentComponent implements WidgetContent, Reloadable {
+ id = 'random-string';
+ isLoading = false;
+ reload() {
+ console.log('...reloading is happening...');
+ }
+}
diff --git a/src/app/widget/widget-base.ts b/src/app/widget/widget-base.ts
new file mode 100644
index 0000000..4216677
--- /dev/null
+++ b/src/app/widget/widget-base.ts
@@ -0,0 +1,10 @@
+import { Directive, Input } from '@angular/core';
+
+@Directive()
+export class WidgetBase {
+ @Input()
+ title: string = '';
+ onExportJson() {
+ console.log('Export Json logic..');
+ }
+}
diff --git a/src/app/widget/widget-content.scss b/src/app/widget/widget-content.scss
new file mode 100644
index 0000000..a4cb196
--- /dev/null
+++ b/src/app/widget/widget-content.scss
@@ -0,0 +1,17 @@
+:host {
+ display: block;
+ text-align: center;
+ position: relative;
+ min-width: 190px;
+}
+
+.widget-icon {
+ font-size: 64px;
+ width: 64px;
+ height: 64px;
+ color: orange;
+}
+.value {
+ font-size: 24px;
+ opacity: 0.7;
+}
diff --git a/src/app/widget/widget-content.token.ts b/src/app/widget/widget-content.token.ts
new file mode 100644
index 0000000..c6ed62e
--- /dev/null
+++ b/src/app/widget/widget-content.token.ts
@@ -0,0 +1,5 @@
+import { Reloadable } from './widget-content';
+import { InjectionToken } from '@angular/core';
+export const RELOADABLE_CONTENT = new InjectionToken(
+ 'reloadable-content'
+);
diff --git a/src/app/widget/widget-content.ts b/src/app/widget/widget-content.ts
new file mode 100644
index 0000000..df4b5e0
--- /dev/null
+++ b/src/app/widget/widget-content.ts
@@ -0,0 +1,8 @@
+export interface WidgetContent {
+ id: string;
+}
+
+export interface Reloadable {
+ reload: () => any;
+ isLoading: boolean;
+}
diff --git a/src/app/widget/widget.component.ts b/src/app/widget/widget.component.ts
new file mode 100644
index 0000000..ef8390f
--- /dev/null
+++ b/src/app/widget/widget.component.ts
@@ -0,0 +1,47 @@
+import { WetherContentComponent } from './wether-content.component';
+import { WidgetBase } from './widget-base';
+import { Component, ContentChild } from '@angular/core';
+import { RELOADABLE_CONTENT } from './widget-content.token';
+import { Reloadable } from './widget-content';
+
+@Component({
+ selector: 'app-widget',
+ template: `
+
+
+
+ `,
+ styles: [
+ `
+ :host {
+ display: block;
+ border: #f0ebeb solid 1px;
+ border-radius: 5px;
+ padding: 15px;
+ background-color: #fafafa;
+ width: 400px;
+ margin-left: 20px;
+ }
+ .header {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ }
+ `,
+ ],
+})
+export class WidgetComponent extends WidgetBase {
+ @ContentChild(RELOADABLE_CONTENT)
+ content?: Reloadable;
+
+ ngAfterContentInit(): void {
+ if (this.content) {
+ this.content.reload();
+ }
+ }
+}