set datamodel

angular.json

@@ -36,10 +36,8 @@
             ],
             "scripts": [],
             "server": "src/main.server.ts",
-            "prerender": true,
-            "ssr": {
-              "entry": "server.ts"
-            }
+            "prerender": false,
+            "ssr": false
           },
           "configurations": {
             "production": {

package.json

@@ -21,7 +21,10 @@
     "@angular/platform-server": "^18.0.0",
     "@angular/router": "^18.0.0",
     "@angular/ssr": "^18.0.2",
+    "bootstrap": "^5.3.3",
+    "echarts": "^5.5.1",
     "express": "^4.18.2",
+    "ngx-echarts": "^18.0.0",
     "rxjs": "~7.8.0",
     "tslib": "^2.3.0",
     "zone.js": "~0.14.3"
@@ -30,15 +33,15 @@
     "@angular-devkit/build-angular": "^18.0.2",
     "@angular/cli": "^18.0.2",
     "@angular/compiler-cli": "^18.0.0",
+    "@types/express": "^4.17.17",
+    "@types/jasmine": "~5.1.0",
+    "@types/node": "^18.18.0",
     "jasmine-core": "~5.1.0",
     "karma": "~6.4.0",
     "karma-chrome-launcher": "~3.2.0",
     "karma-coverage": "~2.2.0",
     "karma-jasmine": "~5.1.0",
     "karma-jasmine-html-reporter": "~2.1.0",
-    "typescript": "~5.4.2",
-    "@types/express": "^4.17.17",
-    "@types/jasmine": "~5.1.0",
-    "@types/node": "^18.18.0"
+    "typescript": "~5.4.2"
   }
-}
\ No newline at end of file
+}

src/app/app.component.ts

 import { Component } from '@angular/core';
 import { RouterOutlet } from '@angular/router';
+import { NgxEchartsDirective, provideEcharts } from 'ngx-echarts';
+import { ConsultancyComponent } from './components';
 
 @Component({
   selector: 'app-root',
   standalone: true,
-  imports: [RouterOutlet],
+  imports: [RouterOutlet, NgxEchartsDirective],
   templateUrl: './app.component.html',
-  styleUrl: './app.component.scss'
+  styleUrl: './app.component.scss',
+  providers: [
+    provideEcharts(),
+  ]
 })
 export class AppComponent {
   title = 'dynamic-myhr';

src/app/app.routes.ts

 import { Routes } from '@angular/router';
 import { ServicesComponent } from './services/services.component';
+import { SettingWidgetComponent } from './setting-widget/setting-widget.component';
 
 export const routes: Routes = [
   {
+    path: '',
+    component: SettingWidgetComponent
+    // loadComponent: () => import('./offerings/index')
+    //   .then(x => x.ServicesComponent),
+  },
+  {
+    path: 'setting-widjet',
+    component: SettingWidgetComponent
+    // loadComponent: () => import('./offerings/index')
+    //   .then(x => x.ServicesComponent),
+  },
+  {
     path: 'services/:id',
     component: ServicesComponent
     // loadComponent: () => import('./offerings/index')

src/app/components.ts

 import { Component } from "@angular/core";
+import { EChartsOption } from 'echarts';
+import { NgxEchartsModule } from 'ngx-echarts';
+import * as echarts from 'echarts';
 
 export interface Service {
   id: number;
   title: string;
   description: string;
+  dataModel : any;
+  dataSoure : any;
 }
 
 export enum ServiceTypes {
@@ -14,23 +19,124 @@ export enum ServiceTypes {
 
 @Component({
   selector: 'consultancy',
+  standalone: true,
+  imports: [NgxEchartsModule],
   template: `
-    This is the leaf content
+  <div>{{model}}</div>
+    <div echarts [options]="chartOption" class="demo-chart"></div>
   `,
 })
-export class ConsultancyComponent {}
+export class ConsultancyComponent {
+  model: any
+  chartOption: EChartsOption = {
+    xAxis: {
+      type: 'category',
+      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+    },
+    yAxis: {
+      type: 'value',
+    },
+    series: [
+      {
+        data: [820, 932, 901, 934, 1290, 1330, 1320],
+        type: 'line',
+      },
+    ],
+  };
+}
+
 @Component({
   selector: 'engineering',
+  standalone: true,
+  imports: [NgxEchartsModule],
   template: `
-    <p>This is the start of the outer container</p>
+    <div echarts [options]="chartOption" class="demo-chart"></div>
   `,
 })
-export class SoftwareEngineeringComponent {}
+export class SoftwareEngineeringComponent {
+  model: any
+  chartOption: EChartsOption = {
+    legend: {},
+    tooltip: {},
+    dataset: {
+      dimensions: ['product', '2015', '2016', '2017'],
+      source: [
+        { product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7 },
+        { product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1 },
+        { product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5 },
+        { product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1 }
+      ]
+    },
+    xAxis: { type: 'category' },
+    yAxis: {},
+    // Declare several bar series, each will be mapped
+    // to a column of dataset.source by default.
+    series: [{ type: 'bar' }, { type: 'bar' }, { type: 'bar' }]
+  };
+
+
+
+}
 
 @Component({
   selector: 'trainings',
+  standalone: true,
+  imports: [NgxEchartsModule],
   template: `
-    <p>This is the start of the outer container</p>
+    <div>{{model}}</div>
+    <div echarts [options]="chartOption" class="demo-chart"></div>
   `,
 })
-export class TrainingsComponent {}
+export class TrainingsComponent {
+  model: any
+  chartOption: EChartsOption = {
+    legend: {},
+    tooltip: {},
+    dataset: {
+      source: [
+        ['product', '2012', '2013', '2014', '2015', '2016', '2017'],
+        ['Milk Tea', 86.5, 92.1, 85.7, 83.1, 73.4, 55.1],
+        ['Matcha Latte', 41.1, 30.4, 65.1, 53.3, 83.8, 98.7],
+        ['Cheese Cocoa', 24.1, 67.2, 79.5, 86.4, 65.2, 82.5],
+        ['Walnut Brownie', 55.2, 67.1, 69.2, 72.4, 53.9, 39.1]
+      ]
+    },
+    series: [
+      {
+        type: 'pie',
+        radius: '20%',
+        center: ['25%', '30%']
+        // No encode specified, by default, it is '2012'.
+      },
+      {
+        type: 'pie',
+        radius: '20%',
+        center: ['75%', '30%'],
+        encode: {
+          itemName: 'product',
+          value: '2013'
+        }
+      },
+      {
+        type: 'pie',
+        radius: '20%',
+        center: ['25%', '75%'],
+        encode: {
+          itemName: 'product',
+          value: '2014'
+        }
+      },
+      {
+        type: 'pie',
+        radius: '20%',
+        center: ['75%', '75%'],
+        encode: {
+          itemName: 'product',
+          value: '2015'
+        }
+      }
+    ]
+  };
+
+
+}

src/app/services/services.component.ts

 import { Component, OnInit, ViewChild } from '@angular/core';
 import { ActivatedRoute, Params } from '@angular/router';
-import { Subject, from, switchMap, takeUntil, tap } from 'rxjs';
+import { Observable, Subject, from, mergeMap, of, switchMap, takeUntil, tap } from 'rxjs';
 import { ComponentHostDirective } from '../directives/component-host.directive';
 import { ServiceComponentType, servicesComponentFactory } from '../services-factory';
 import { Service, ServiceTypes } from '../components';
@@ -13,6 +13,29 @@ import { Service, ServiceTypes } from '../components';
   styleUrls: ['./services.component.scss'],
 })
 export class ServicesComponent implements OnInit {
+
+  componentList: Service[] = [{
+    id: 0,
+    title: "11111",
+    description: "111",
+    dataModel: "ss",
+    dataSoure: "sss"
+  },
+  {
+    id: 1,
+    title: "222",
+    description: "222",
+    dataModel: "ss",
+    dataSoure: "sss"
+  },
+  {
+    id: 2,
+    title: "3333",
+    description: "33333",
+    dataModel: "ss",
+    dataSoure: "sss"
+  }]
+
   @ViewChild(ComponentHostDirective, { static: true }) componentHost!: ComponentHostDirective;
 
   constructor(private readonly route: ActivatedRoute) { }
@@ -22,31 +45,33 @@ export class ServicesComponent implements OnInit {
   ngOnInit(): void { // subscribing to the stream when component has been created
     this.route.params
       .pipe(
-        // switchMap(({ id }: Params) => from([]))),
-        // tap((service: Service) => this.loadComponent(service)),
+        mergeMap(({ id }: Params) => this.getOne(id)),
+        tap((service: Service) => this.loadComponent(service)),
         takeUntil(this.destroy.asObservable()),
       )
-      .subscribe(result => {
-        this.loadComponent({
-          id: result['id'],
-          title: "string",
-          description: "string"
-        })
-      });
+      .subscribe();
 
   }
 
   loadComponent(service: Service): void {
+    console.log("service", service)
     const { viewContainerRef }: ComponentHostDirective = this.componentHost;
     viewContainerRef.clear();
 
     const { instance } = viewContainerRef.createComponent<ServiceComponentType>(
       servicesComponentFactory[service.id as ServiceTypes]
     );
-    // instance.data = service;
+    instance.model = service.title;
   }
 
   ngOnDestroy(): void {
     this.destroy.next();
   }
+
+  getOne(num: number): Observable<Service> {
+    console.log("num", num)
+    let componentFilter = this.componentList.filter(e =>
+      e.id == num)[0];
+    return of(componentFilter)
+  }
 }

src/app/setting-widget/setting-widget.component.html

+<div id="loginform">
+  <div class="position-relative overflow-hidden radial-gradient min-vh-100 w-100">
+    <div class="position-relative z-index-5" style="z-index: 5 !important;">
+      <div class="row">
+        <div class="col-xl-7 col-xxl-8" style="background-color: black;">
+          <!-- <a href="../main/index.html" class="text-nowrap logo-img d-block px-4 py-9 w-100">
+            <img src="assets/images/mylearn-logo.png" width="150px" class="dark-logo" alt="Logo-Dark">
+            <img src="assets/images/mylearn-logo.png" width="150px" class="light-logo" alt="Logo-light" style="display: none;">
+          </a> -->
+          <div class="d-none d-xl-flex align-items-center justify-content-center" style="height: calc(100vh - 80px);">
+            <!-- <img src="assets/images/background/login-register.jpg" alt="" class="img-fluid" width="100%"> -->
+          </div>
+        </div>
+        <div class="col-xl-5 col-xxl-4">
+          <div class="authentication-login min-vh-100 bg-body row justify-content-center align-items-center p-4">
+            <div class="col-sm-8 col-md-6 col-xl-9">
+
+              <h2 class="mb-3 fs-7 fw-bolder" style="text-align: center;
+              ">จัดการ Widget</h2>
+
+              <form class="needs-validation" novalidate>
+                <div class="mb-3 position-relative">
+                  <label for="exampleInputEmail1" class="form-label">เลือก Widget</label>
+                  <input name="username" type="text" class="form-control" id="exampleInputEmail1"
+                    aria-describedby="emailHelp" required>
+                  <div class="invalid-feedback">
+                    Please enter a Username
+                  </div>
+
+                </div>
+                <div class="mb-4 position-relative">
+                  <label for="exampleInputPassword1" class="form-label">Datasource</label>
+                  <input name="username" type="text" class="form-control" id="exampleInputEmail1"
+                    aria-describedby="emailHelp" required>
+                  <div class="invalid-feedback">
+                    Please enter a Username
+                  </div>
+                </div>
+                <div class="alert alert-danger" style="word-break: break-all;">Model</div>
+                <button type="submit" class="btn btn-primary w-100 py-8 mb-4 rounded-2">Save</button>
+                <button type="submit" class="btn btn-success w-100 py-8 mb-4 rounded-2">Preview</button>
+              </form>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

src/app/setting-widget/setting-widget.component.spec.ts

+/* tslint:disable:no-unused-variable */
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { DebugElement } from '@angular/core';
+
+import { SettingWidgetComponent } from './setting-widget.component';
+
+describe('SettingWidgetComponent', () => {
+  let component: SettingWidgetComponent;
+  let fixture: ComponentFixture<SettingWidgetComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ SettingWidgetComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(SettingWidgetComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/setting-widget/setting-widget.component.ts

+import { CommonModule } from '@angular/common';
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-setting-widget',
+  standalone: true,
+  imports: [CommonModule],
+  templateUrl: './setting-widget.component.html',
+  styleUrls: ['./setting-widget.component.css']
+})
+export class SettingWidgetComponent implements OnInit {
+  model = {
+    username : "",
+    password : ""
+  }
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

src/styles.scss

-/* You can add global styles to this file, and also import other style files */
+// Override Bootstrap's Sass default variables
+//
+// Nearly all variables in Bootstrap are written with the `!default` flag.
+// This allows you to override the default values of those variables before
+// you import Bootstrap's source Sass files.
+//
+// Overriding the default variable values is the best way to customize your
+// CSS without writing _new_ styles. For example, you can either change
+// `$body-color` or write more CSS that override's Bootstrap's CSS like so:
+// `body { color: red; }`.
+
+
+//
+// Bring in Bootstrap
+//
+
+// Option 1
+//
+// Import all of Bootstrap's CSS
+
+// @import "bootstrap/scss/bootstrap";
+
+// Option 2
+//
+// Place variable overrides first, then import just the styles you need. Note that some stylesheets are required no matter what.
+
+// Toggle global options
+$enable-gradients: true;
+$enable-shadows: true;
+
+$offcanvas-box-shadow: 0 1rem 3rem rgba(0, 0, 0, .175);
+
+// Include functions first
+@import "bootstrap/scss/functions";
+
+// Customize some defaults
+$body-color: #333;
+$body-bg: #fff;
+$border-radius: .4rem;
+$success: #7952b3;
+
+// Required
+@import "bootstrap/scss/variables";
+@import "bootstrap/scss/variables-dark";
+@import "bootstrap/scss/maps";
+@import "bootstrap/scss/mixins";
+@import "bootstrap/scss/utilities";
+@import "bootstrap/scss/root";
+@import "bootstrap/scss/reboot";
+
+@import "bootstrap/scss/type";
+@import "bootstrap/scss/images";
+@import "bootstrap/scss/containers";
+@import "bootstrap/scss/grid";
+@import "bootstrap/scss/tables";
+@import "bootstrap/scss/forms";
+@import "bootstrap/scss/buttons";
+@import "bootstrap/scss/transitions";
+@import "bootstrap/scss/dropdown";
+@import "bootstrap/scss/button-group";
+@import "bootstrap/scss/nav";
+@import "bootstrap/scss/navbar"; // Requires nav
+@import "bootstrap/scss/card";
+@import "bootstrap/scss/breadcrumb";
+@import "bootstrap/scss/accordion";
+@import "bootstrap/scss/pagination";
+@import "bootstrap/scss/badge";
+@import "bootstrap/scss/alert";
+@import "bootstrap/scss/progress";
+@import "bootstrap/scss/list-group";
+@import "bootstrap/scss/close";
+@import "bootstrap/scss/toasts";
+@import "bootstrap/scss/modal"; // Requires transitions
+@import "bootstrap/scss/tooltip";
+@import "bootstrap/scss/popover";
+@import "bootstrap/scss/carousel";
+@import "bootstrap/scss/spinners";
+@import "bootstrap/scss/offcanvas"; // Requires transitions
+@import "bootstrap/scss/placeholders";
+
+// Helpers
+@import "bootstrap/scss/helpers";
+
+// Utilities
+@import "bootstrap/scss/utilities/api";
+
+
+//
+// Custom styles
+//
+
+body {
+  padding: 1.5rem;
+}