mirror of
https://github.com/bec-project/bec_atlas.git
synced 2025-07-14 07:01:48 +02:00
feat(overview): added overview component
This commit is contained in:
@ -1,10 +1,12 @@
|
||||
import { Routes } from '@angular/router';
|
||||
import { LoginComponent } from './login/login.component';
|
||||
import { DashboardComponent } from './dashboard/dashboard.component';
|
||||
import { OverviewComponent } from './overview/overview.component';
|
||||
|
||||
export const routes: Routes = [
|
||||
{ path: '', redirectTo: 'login', pathMatch: 'full' },
|
||||
{ path: 'login', component: LoginComponent },
|
||||
{ path: 'dashboard', component: DashboardComponent },
|
||||
{ path: '**', redirectTo: 'login' }
|
||||
{ path: 'overview', component: OverviewComponent },
|
||||
{ path: '**', redirectTo: 'login' },
|
||||
];
|
||||
|
||||
@ -5,11 +5,15 @@
|
||||
</button>
|
||||
<button mat-button class="menu-item">
|
||||
<mat-icon>home</mat-icon>
|
||||
<span class="menu-text">Home</span>
|
||||
<span class="menu-text">Data Browser</span>
|
||||
</button>
|
||||
<button mat-button class="menu-item">
|
||||
<mat-icon>science</mat-icon>
|
||||
<span class="menu-text">Experiment Control</span>
|
||||
</button>
|
||||
<button mat-button class="menu-item">
|
||||
<mat-icon>settings</mat-icon>
|
||||
<span class="menu-text">Settings</span>
|
||||
<span class="menu-text">Beamline Settings</span>
|
||||
</button>
|
||||
<button mat-button class="menu-item">
|
||||
<mat-icon>help</mat-icon>
|
||||
|
||||
@ -4,7 +4,7 @@
|
||||
}
|
||||
|
||||
mat-sidenav {
|
||||
width: 200px;
|
||||
width: 250px;
|
||||
background: var(--mat-sys-primary);
|
||||
color: var(--mat-sys-on-primary);
|
||||
border-radius: 0px;
|
||||
|
||||
@ -1,44 +1,43 @@
|
||||
|
||||
.device-box {
|
||||
max-width: 100px;
|
||||
max-height: 100px;
|
||||
max-width: 100px;
|
||||
max-height: 100px;
|
||||
}
|
||||
.center-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100%; /* Ensures the mat-card-content takes the full height */
|
||||
text-align: center; /* Centers text within the content */
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100%; /* Ensures the mat-card-content takes the full height */
|
||||
text-align: center; /* Centers text within the content */
|
||||
}
|
||||
|
||||
mat-card {
|
||||
width: 100%; /* Ensure card takes the full width of its container */
|
||||
height: 100%; /* Ensure card takes the full height of its container */
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: var(--mat-sys-secondary-container);
|
||||
color: var(--mat-sys-on-secondary-container);
|
||||
width: 100%; /* Ensure card takes the full width of its container */
|
||||
height: 100%; /* Ensure card takes the full height of its container */
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: var(--mat-sys-secondary-container);
|
||||
color: var(--mat-sys-on-secondary-container);
|
||||
}
|
||||
|
||||
mat-card.inner-card {
|
||||
flex-grow: 1;
|
||||
width: 100%;
|
||||
height: auto; /* Adjust height as needed */
|
||||
border-top-left-radius: 0px; /* Removes border radius */
|
||||
border-top-right-radius: 0px; /* Removes border radius */
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
color: var(--mat-sys-on-primary); /* Sets the text color */
|
||||
background: var(--mat-sys-primary) /* Sets the background color */
|
||||
flex-grow: 1;
|
||||
width: 100%;
|
||||
height: auto; /* Adjust height as needed */
|
||||
border-top-left-radius: 0px; /* Removes border radius */
|
||||
border-top-right-radius: 0px; /* Removes border radius */
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
color: var(--mat-sys-on-primary); /* Sets the text color */
|
||||
background: var(--mat-sys-primary); /* Sets the background color */
|
||||
}
|
||||
|
||||
mat-card-content {
|
||||
text-align: center; /* Ensures text itself is centered */
|
||||
text-align: center; /* Ensures text itself is centered */
|
||||
}
|
||||
|
||||
mat-card-title {
|
||||
font-size: 0.8em; /* Increases the font size of the title */
|
||||
}
|
||||
font-size: 0.8em; /* Increases the font size of the title */
|
||||
}
|
||||
|
||||
50
frontend/bec_atlas/src/app/overview/overview.component.html
Normal file
50
frontend/bec_atlas/src/app/overview/overview.component.html
Normal file
@ -0,0 +1,50 @@
|
||||
<div class="background-image"></div>
|
||||
<div class="login-form-flex">
|
||||
<!-- <mat-card
|
||||
class="mat-card"
|
||||
(click)="selection('admin')"
|
||||
*ngIf="hasAdminAccess"
|
||||
>
|
||||
<mat-card-title>
|
||||
<mat-icon class="icon-display"> admin_panel_settings</mat-icon>
|
||||
</mat-card-title>
|
||||
<mat-card-content class="content-container"> Admin Area </mat-card-content>
|
||||
</mat-card> -->
|
||||
|
||||
<mat-card class="mat-card" (click)="selection('data')">
|
||||
<mat-card-title>
|
||||
<mat-icon class="icon-display">analytics</mat-icon>
|
||||
</mat-card-title>
|
||||
<mat-card-content class="content-container">
|
||||
Data Browser
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
|
||||
<mat-card
|
||||
class="mat-card"
|
||||
(click)="selection('data')"
|
||||
matTooltip="Open the Experiment Control Area"
|
||||
*ngIf="hasExperimentControlAccess"
|
||||
>
|
||||
<mat-card-title>
|
||||
<mat-icon class="icon-display">science</mat-icon>
|
||||
</mat-card-title>
|
||||
<mat-card-content class="content-container">
|
||||
Beamline Access
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
|
||||
<!-- <mat-card
|
||||
class="mat-card"
|
||||
(click)="selection('data')"
|
||||
*ngIf="!hasExperimentControlAccess && !hasAdminAccess"
|
||||
>
|
||||
<mat-card-title>
|
||||
<mat-icon class="icon-display">warning</mat-icon>
|
||||
</mat-card-title>
|
||||
<mat-card-content class="content-container">
|
||||
You currently don't have access to any beamline. If you think this is a
|
||||
mistake, please contact your beamline manager.
|
||||
</mat-card-content>
|
||||
</mat-card> -->
|
||||
</div>
|
||||
55
frontend/bec_atlas/src/app/overview/overview.component.scss
Normal file
55
frontend/bec_atlas/src/app/overview/overview.component.scss
Normal file
@ -0,0 +1,55 @@
|
||||
.login-form-flex {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
z-index: 2;
|
||||
text-align: center;
|
||||
opacity: 0.95;
|
||||
}
|
||||
|
||||
.background-image {
|
||||
background-image: url("../../assets/psi_background.jpg");
|
||||
filter: blur(4px);
|
||||
-webkit-filter: blur(4px);
|
||||
height: 100vh;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
.mat-card {
|
||||
/* padding: 30px; */
|
||||
box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.2), 0 2px 8px 0 rgba(0, 0, 0, 0.14),
|
||||
0 4px 8px -1px rgba(0, 0, 0, 0.12);
|
||||
display: inline-block;
|
||||
margin: 10px;
|
||||
background-color: var(--mat-sys-surface);
|
||||
color: var(--mat-sys-on-surface);
|
||||
}
|
||||
|
||||
.mat-form-field {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.mat-card-actions {
|
||||
width: 100%;
|
||||
/* justify-content:right; */
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.errorText {
|
||||
color: rgb(194, 0, 0);
|
||||
}
|
||||
|
||||
.content-container {
|
||||
padding-top: 20px;
|
||||
}
|
||||
|
||||
.icon-display {
|
||||
padding: 10px;
|
||||
transform: scale(2);
|
||||
}
|
||||
// .material-symbols-outlined {
|
||||
// transform: scale(2);
|
||||
// }
|
||||
@ -0,0 +1,23 @@
|
||||
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { OverviewComponent } from './overview.component';
|
||||
|
||||
describe('OverviewComponent', () => {
|
||||
let component: OverviewComponent;
|
||||
let fixture: ComponentFixture<OverviewComponent>;
|
||||
|
||||
beforeEach(async () => {
|
||||
await TestBed.configureTestingModule({
|
||||
imports: [OverviewComponent]
|
||||
})
|
||||
.compileComponents();
|
||||
|
||||
fixture = TestBed.createComponent(OverviewComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
23
frontend/bec_atlas/src/app/overview/overview.component.ts
Normal file
23
frontend/bec_atlas/src/app/overview/overview.component.ts
Normal file
@ -0,0 +1,23 @@
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { Component } from '@angular/core';
|
||||
import { MatCardModule } from '@angular/material/card';
|
||||
import { MatIconModule } from '@angular/material/icon';
|
||||
import { MatTooltipModule } from '@angular/material/tooltip';
|
||||
import { Router } from '@angular/router';
|
||||
|
||||
@Component({
|
||||
selector: 'app-overview',
|
||||
imports: [MatCardModule, MatIconModule, MatTooltipModule, CommonModule],
|
||||
templateUrl: './overview.component.html',
|
||||
styleUrl: './overview.component.scss',
|
||||
})
|
||||
export class OverviewComponent {
|
||||
hasExperimentControlAccess: boolean = true;
|
||||
hasAdminAccess: boolean = true;
|
||||
|
||||
constructor(private router: Router) {}
|
||||
|
||||
selection($event: string) {
|
||||
this.router.navigateByUrl('/' + $event);
|
||||
}
|
||||
}
|
||||
@ -1,5 +1,5 @@
|
||||
/* You can add global styles to this file, and also import other style files */
|
||||
@use '@angular/material' as mat;
|
||||
@use "@angular/material" as mat;
|
||||
@import "gridstack/dist/gridstack.min.css";
|
||||
@import "gridstack/dist/gridstack-extra.min.css";
|
||||
|
||||
@ -8,38 +8,46 @@
|
||||
// width: 100%; /* Ensure the grid uses the full width */
|
||||
// height: 100%; /* Ensure grid height is sufficient */
|
||||
// }
|
||||
|
||||
|
||||
// gridstack-item {
|
||||
// display: block;
|
||||
// }
|
||||
|
||||
html, body { height: 100%; }
|
||||
body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }
|
||||
|
||||
|
||||
html,
|
||||
body {
|
||||
height: 100%;
|
||||
}
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: Roboto, "Helvetica Neue", sans-serif;
|
||||
}
|
||||
|
||||
html {
|
||||
color-scheme: light dark;
|
||||
|
||||
// Light theme
|
||||
@media (prefers-color-scheme: light) {
|
||||
@include mat.theme((
|
||||
color: mat.$violet-palette,
|
||||
color-scheme: light dark;
|
||||
|
||||
// Light theme
|
||||
@media (prefers-color-scheme: light) {
|
||||
@include mat.theme(
|
||||
(
|
||||
color: mat.$cyan-palette,
|
||||
typography: Roboto,
|
||||
density: 0
|
||||
), $overrides: (
|
||||
primary-container: orange, // Light-specific override
|
||||
));
|
||||
}
|
||||
|
||||
// Dark theme
|
||||
@media (prefers-color-scheme: dark) {
|
||||
@include mat.theme((
|
||||
color: mat.$violet-palette,
|
||||
density: 0,
|
||||
),
|
||||
$overrides: (primary-container: orange),
|
||||
// Light-specific override)
|
||||
);
|
||||
}
|
||||
|
||||
// Dark theme
|
||||
@media (prefers-color-scheme: dark) {
|
||||
@include mat.theme(
|
||||
(
|
||||
color: mat.$cyan-palette,
|
||||
typography: Roboto,
|
||||
density: 0
|
||||
), $overrides: (
|
||||
primary-container: darkorange, // Dark-specific override
|
||||
));
|
||||
}
|
||||
}
|
||||
density: 0,
|
||||
),
|
||||
$overrides: (primary-container: darkorange),
|
||||
// Dark-specific override)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user