Merge pull request #17 from idaholab/UI-Start

Base UI

_old/Dockerfile

@@ -28,13 +28,13 @@ RUN apt-get update &&  apt-get install -y \
     python3-dev
 
 # # Install Python dependencies
-RUN pip install --upgrade pip setuptools wheel
-RUN pip install --no-deps \
+RUN pip install --trusted-host pypi.org --upgrade pip setuptools wheel
+RUN pip install --trusted-host pypi.org --no-deps \
     spinetoolbox==0.7.4 \
     spine_engine==0.23.4 \
     spine_items==0.21.5 \
     spinedb_api==0.30.5
-RUN pip install -r requirements.txt
+RUN pip install --trusted-host pypi.org -r requirements.txt
 
 # # Install Julia, SpineInterface and SpineOpt
 RUN python -m jill install --confirm

_old/install/install.sh

@@ -2,8 +2,8 @@
 # Copyright 2023, Battelle Energy Alliance, LLC
 apt update
 apt install python3 python3-pip git -y
-python3 -m pip install pip --upgrade
-python3 -m pip install -r requirements.txt
+python3 -m pip install --trusted-host pip --upgrade
+python3 -m pip install --trusted-host -r requirements.txt
 python3 -m jill install --confirm
 # should lock this to a commit hash
 julia -e 'using Pkg; Pkg.rm("SpineInterface")' || true

api/Dockerfile

@@ -16,8 +16,8 @@ ENV NODE_EXTRA_CA_CERTS=/etc/ssl/certs/ca-certificates.crt \
 # Install dependencies
 RUN apt-get update \
     && apt-get install -y build-essential cargo
-RUN pip install --upgrade pip \
-    && pip install -r requirements-test.txt
+RUN pip install --trusted-host pypi.org  --trusted-host files.pythonhosted.org--upgrade pip \
+    && pip install --trusted-host pypi.org --trusted-host files.pythonhosted.org -r requirements-test.txt
 
 COPY ./etc/entrypoint.sh /usr/local/bin/entrypoint.sh
 RUN chmod a+x /usr/local/bin/entrypoint.sh

web/angular.json

@@ -32,17 +32,16 @@
               }
             ],
             "styles": [
+              "./node_modules/@angular/material/prebuilt-themes/deeppurple-amber.css", "src/styles.scss",
               "src/styles.scss",
               "node_modules/bootstrap/dist/css/bootstrap.min.css"
             ],
             "scripts": [
               "node_modules/bootstrap/dist/js/bootstrap.min.js"
             ],
             "server": "src/main.server.ts",
-            "prerender": true,
-            "ssr": {
-              "entry": "server.ts"
-            }
+            "prerender": false,
+            "ssr": false
           },
           "configurations": {
             "production": {

web/src/app/about/about.component.html

@@ -0,0 +1 @@
+<p>about works!</p>

web/src/app/about/about.component.spec.ts

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

web/src/app/about/about.component.ts

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

web/src/app/app.component.html

@@ -5,12 +5,20 @@
       <span class="fs-4">ResDEEDS</span>
     </a>
 
-    <ul class="nav nav-pills">
-      <li class="nav-item"><a href="#" class="nav-link active" aria-current="page">Home</a></li>
-      <li class="nav-item"><a href="#" class="nav-link">Features</a></li>
-      <li class="nav-item"><a href="#" class="nav-link">Pricing</a></li>
-      <li class="nav-item"><a href="#" class="nav-link">FAQs</a></li>
-      <li class="nav-item"><a href="#" class="nav-link">About</a></li>
-    </ul>
-  </header>
-</nav>
+<main class="main">
+  <div class="content">
+    <!-- <app-layout></app-layout> -->
+     <router-outlet></router-outlet>
+  </div>
+</main>
+
+<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -->
+<!-- * * * * * * * * * * * The content above * * * * * * * * * * * * -->
+<!-- * * * * * * * * * * is only a placeholder * * * * * * * * * * * -->
+<!-- * * * * * * * * * * and can be replaced.  * * * * * * * * * * * -->
+<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -->
+<!-- * * * * * * * * * * End of Placeholder  * * * * * * * * * * * * -->
+<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -->
+
+
+<router-outlet />

web/src/app/app.component.scss

@@ -0,0 +1,8 @@
+.main{    
+  font-family: "Roboto", sans-serif;
+  margin:0
+}
+
+.content{
+    margin:0
+}

web/src/app/app.component.ts

@@ -1,6 +1,8 @@
 import { Component } from '@angular/core';
 import { RouterOutlet } from '@angular/router';
 
+import { LayoutComponent } from './layout/layout.component';
+
 @Component({
     selector: 'app-root',
     imports: [RouterOutlet],

web/src/app/app.config.server.ts

@@ -1,10 +1,19 @@
 import { mergeApplicationConfig, ApplicationConfig } from '@angular/core';
 import { provideServerRendering } from '@angular/platform-server';
 import { appConfig } from './app.config';
+import { LOCAL_STORAGE } from './tokens';
 
 const serverConfig: ApplicationConfig = {
   providers: [
-    provideServerRendering()
+    provideServerRendering(),
+    {
+      provide: LOCAL_STORAGE,
+        useFactory: () => ({
+        getItem: () => {},
+        setItem: () => {},
+        removeItem: () => {},
+      }),
+    },
   ]
 };
 

web/src/app/app.config.ts

@@ -1,9 +1,38 @@
-import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
+import { ApplicationConfig, provideZoneChangeDetection, PLATFORM_ID } from '@angular/core';
 import { provideRouter } from '@angular/router';
-
+import { isPlatformServer } from '@angular/common';
+import { LOCAL_STORAGE } from './tokens';
 import { routes } from './app.routes';
 import { provideClientHydration } from '@angular/platform-browser';
+import { provideAnimations } from '@angular/platform-browser/animations';
+import { ConfigService } from './services/config-service';
+import { DashService } from './services/dashboard-service';
+import { AuthService } from './services/auth-service';
+import { provideHttpClient, withFetch } from '@angular/common/http';
+import {ReactiveFormsModule} from '@angular/forms';
+import { LoginService } from './services/login.service';
 
 export const appConfig: ApplicationConfig = {
-  providers: [provideZoneChangeDetection({ eventCoalescing: true }), provideRouter(routes), provideClientHydration()]
+  providers: [
+      provideZoneChangeDetection({ eventCoalescing: true }), 
+      provideRouter(routes),
+      provideClientHydration(),
+      provideAnimations(),
+      ConfigService,
+      AuthService,      
+      DashService,
+      LoginService,
+      provideHttpClient(withFetch()),
+      ReactiveFormsModule,
+      {
+        provide: LOCAL_STORAGE,
+        useFactory: (platformId: object) => {
+        if (isPlatformServer(platformId)) {
+          return {}; // Return an empty object on the server
+        }
+        return localStorage; // Use the browser's localStorage
+        },
+        deps: [PLATFORM_ID],
+      },
+    ]
 };

web/src/app/app.routes.ts

@@ -1,6 +1,71 @@
 import { Routes } from '@angular/router';
-import { DiagramComponent } from './diagram/diagram.component';
+import { LayoutComponent } from './layout/layout.component';
+import { DashboardComponent } from './dashboard/dashboard.component';
+import { LayoutLoginComponent } from './layout-login/layout-login.component';
+import { AboutComponent } from './about/about.component';
+import { NotFoundComponent } from './not-found/not-found.component';
+import { UserManagementComponent } from './user-management/user-management.component';
+import { LoginComponent } from './login/login.component';
+import { RegisterComponent } from './register/register.component';
+import { PasswordRestoreComponent } from './password-restore/password-restore.component';
+import { AuthGuardGeneral } from './services/authGuards/auth-guard-general';
+import { InvestigationMainComponent } from './investigation/investigation-main/investigation-main.component';
 
 export const routes: Routes = [
-    { path: "diagram", component: DiagramComponent },
+
+
+    { path: '', redirectTo: 'login/signin', pathMatch: 'full' }, //default route
+    {
+        path: 'login', 
+        component: LayoutLoginComponent,
+        children: [
+            {
+                path: "signin",
+                component: LoginComponent                
+            },
+            {
+                path: "register",
+                component: RegisterComponent                
+            },
+            {
+                path: "passowrdReset",
+                component: PasswordRestoreComponent,                
+            },
+            { path: '**', component: NotFoundComponent }
+        ]
+    },
+
+    {
+        path: 'main', 
+        component: LayoutComponent,
+        children: [
+            {
+                path: "",
+                redirectTo: 'dashboard' , 
+                pathMatch: 'full' 
+            },
+            {
+                path: "dashboard",
+                component: DashboardComponent,
+                canActivate: [AuthGuardGeneral]        
+            },
+            {
+                path: "investigation/:id",
+                component: InvestigationMainComponent,
+                canActivate: [AuthGuardGeneral]        
+            },
+            {
+                path: "about",
+                component: AboutComponent,
+                canActivate: [AuthGuardGeneral]
+            },
+            {
+                path: "user",
+                component: UserManagementComponent,
+                canActivate: [AuthGuardGeneral],
+            },
+            { path: '**', component: NotFoundComponent }
+        ]
+    },
+
 ];

web/src/app/dashboard/dashboard.component.html

@@ -0,0 +1,59 @@
+
+<div class="dash-container">
+    <!-- <div class="dash-header">
+        ResDeeds
+    </div> -->
+    <div class="card-row">
+        <div class="card">
+            <div class="card-header">Recent Items</div>
+            <div class="card-body"> 
+               <app-recent-items style="display: flex; flex-grow:1"></app-recent-items>
+            </div>
+        </div>
+        <div class="card">
+            <div class="card-header">Header Test</div>
+            <div class="card-body"> 
+                <div class="card-item">
+                    This is my body text
+                </div>
+            </div>
+        </div>
+    </div>
+    <div class="card-row">
+        <div class="card">
+            <div class="card-header">Header Test</div>
+            <div class="card-body"> 
+                <div class="card-item">
+                    This is my body text
+                </div>
+            </div>
+        </div>
+    </div>
+    <div class="card-row">
+        <div class="card">
+            <div class="card-header">Header Test</div>
+            <div class="card-body"> 
+                <div class="card-item">
+                    This is my body text
+                </div>
+            </div>
+        </div>
+        <div class="card">
+            <div class="card-header">Header Test</div>
+            <div class="card-body"> 
+                <div class="card-item">
+                    This is my body text
+                </div>
+            </div>
+        </div>
+        <div class="card">
+            <div class="card-header">Header Test</div>
+            <div class="card-body"> 
+                <div class="card-item">
+                    This is my body text
+                </div>
+            </div>
+        </div>
+    </div>
+
+</div>

web/src/app/dashboard/dashboard.component.scss

@@ -0,0 +1,15 @@
+.dash-container{
+    display: flex;
+    flex-direction: column;
+    flex-grow: 1;
+    padding: 1em;
+    height: calc(100% - 1em);
+    max-width: 1180px;
+    margin: auto;
+}
+.dash-header{
+    display: flex;
+    flex-direction: column;
+
+    border-bottom: solid 1px var(--black);
+}

web/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();
+  });
+});