template updates

README.md

@@ -1,7 +1,17 @@
-# NgTemplate
-
+# IoT UI
+Code repository for SWOPT's IoT (Internet of Things) UI project.    
 This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 17.2.3.
 
+## Getting Started
+After cloning this project, run `git submodule update --init --recursive` to fetch submodules.    
+
+Run `npm install` to install dependencies.    
+
+If you encounter the following error while trying to run `ng serve`, please delete all contents of this folder: [your_project_directory]/src/dependencies/angularlib/node_modules/@angular    
+```
+[ERROR] TS-993004: Unable to import class CommonModule.
+  The symbol is not exported from [your_project_directory]/src/dependencies/angularlib/node_modules/@angular/common/index.d.ts (module '@angular/common'). [plugin angular-compiler]    
+```
 ## Development server
 
 Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The application will automatically reload if you change any of the source files.

src/app/app.component.scss

@@ -0,0 +1,3 @@
+.content {
+    margin: 1rem;
+}

src/app/app.component.ts

@@ -1,14 +1,17 @@
-import { Component } from '@angular/core';
-import { RouterModule, RouterOutlet } from '@angular/router';
+import { Component, OnInit } from '@angular/core';
+import { Router, RouterModule, RouterOutlet, RoutesRecognized } from '@angular/router';
 import { MatModule } from '../dependencies/angularlib/mat.module';
 import { DialogModule } from 'angularlib/dialog/dialog.module';
 import { DialogUtil } from 'angularlib/dialog/dialog.util';
-import { NgxsModule } from '@ngxs/store'
+import { NgxsModule, Store } from '@ngxs/store'
 import { LabelState } from 'angularlib/labels/label.state';
 import { HttpClientModule } from '@angular/common/http';
 import { Angularlib } from 'angularlib/angularlib.module';
 import { CommonModule } from '@angular/common';
 import { LabelModule } from 'angularlib/labels/label.module';
+import { BaseComponent, untilDestroy } from 'angularlib/base.component';
+import { filter, map } from 'rxjs';
+import { Title } from '@angular/platform-browser';
 
 @Component({
   selector: 'app-root',
@@ -21,18 +24,31 @@ import { LabelModule } from 'angularlib/labels/label.module';
   ],
   templateUrl: './app.component.html',
   styleUrls: [
-    './app.component.scss', './ng-sample.scss'
+    './app.component.scss'
   ]
 })
-export class AppComponent {
-  title = 'ng-template';
+export class AppComponent extends BaseComponent implements OnInit {
+  title = 'SwOPT Angular';
 
-  constructor(private dialog: DialogUtil) {}
+  constructor(
+    private router: Router,
+    private store: Store,
+    /**Platform Browser title */
+    protected pbTitle: Title,
+  ) {
+    super(store);
+  }
 
-  showDialog() {
-    this.dialog.showDialog({
-      title: 'test dialog',
-      content: 'test dialog content'
+  ngOnInit(): void {
+    this.router.events.pipe(untilDestroy(this),
+    filter((event) => event instanceof RoutesRecognized),
+    map((res:any) => {
+      const data = res.state.root.firstChild.firstChild || res.state.root.firstChild;
+      return data.data?.title;
     })
+    ).subscribe(title => {
+      this.title = title;
+      this.pbTitle.setTitle(this.title);
+    });
   }
 }

src/app/app.routes.ts

@@ -1,3 +1,7 @@
 import { Routes } from '@angular/router';
+import { DashboardComponent } from './dashboard/dashboard.component';
 
-export const routes: Routes = [];
+export const routes: Routes = [
+    { path: '', redirectTo: '/dashboard', pathMatch: 'full' },
+    {path:'dashboard', component: DashboardComponent, data: {title: 'SwOPT Angular'}},
+];

src/app/dashboard/dashboard.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DashboardComponent } from './dashboard.component';
+
+describe('DashboardComponent', () => {
+  let component: DashboardComponent;
+  let fixture: ComponentFixture<DashboardComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [DashboardComponent]
+    })
+    .compileComponents();
+    
+    fixture = TestBed.createComponent(DashboardComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/dashboard/dashboard.component.ts

@@ -0,0 +1,15 @@
+import { Component } from '@angular/core';
+import { RouterModule } from '@angular/router';
+
+@Component({
+  selector: 'app-dashboard',
+  standalone: true,
+  imports: [
+    RouterModule
+  ],
+  templateUrl: './dashboard.component.html',
+  styleUrl: './dashboard.component.scss'
+})
+export class DashboardComponent {
+
+}

src/dependencies/angularlib

@@ -1 +1 @@
-Subproject commit 0496abe16260b9774dbe32c5e5fff7f9224263c2
+Subproject commit 3e466f2ff5e0ac7303f8bd4d6cd3e56cbf0b2e0f

src/index.html

@@ -2,12 +2,18 @@
 <html lang="en">
 <head>
   <meta charset="utf-8">
-  <title>NgTemplate</title>
+  <title>SwOPT Angular</title>
   <base href="/">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="icon" type="image/x-icon" href="favicon.ico">
+  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+
+  <link rel="manifest" href="manifest.webmanifest">
+  <meta name="theme-color" content="#1976d2">
+  <meta content='yes' name='apple-mobile-web-app-capable'/>
+  <meta content='yes' name='mobile-web-app-capable'/>
 </head>
 <body>
   <app-root></app-root>
 </body>
-</html>
+</html>

src/styles.scss

@@ -1 +1,4 @@
 /* You can add global styles to this file, and also import other style files */
+body {
+    margin: 0;
+}