[WIP] New Sidebar Design for Alpha 1.0

package.json

@@ -25,7 +25,10 @@
     "@angular/platform-browser-dynamic": "~13.2.5",
     "@angular/router": "~13.2.5",
     "@fontsource/jost": "^4.5.4",
+    "@fontsource/nothing-you-could-do": "^4.5.8",
     "@sentry/angular": "^6.18.2",
+    "@tabler/icons": "^1.109.0",
+    "angular-tabler-icons": "^1.112.0",
     "ng-particles": "^2.40.2",
     "rxjs": "~7.5.0",
     "tslib": "^2.3.0",

src/app/api/devices/device.service.ts

@@ -11,7 +11,7 @@ export class DeviceService {
   constructor(private webSocket: WebsocketService) {
   }
 
-    getDeviceInfo(deviceUUID: string | null): Observable<DeviceWithHardware> {
+  getDeviceInfo(deviceUUID: string | null): Observable<DeviceWithHardware> {
     return this.deviceRequest(['device', 'info'], {device_uuid: deviceUUID});
   }
 

src/app/control-center/_control-center-style.scss

@@ -1,4 +1,5 @@
 @import "variables";
+@import "theme-colors";
 
 $header-background: #384044;
 $sidebar-background: #1e2529;
@@ -11,3 +12,58 @@ $button-border-color: $gray;
 $button-hover-color: #21292d;
 
 $table-header-color: #7d7d7d;
+
+// mixins \\
+
+@mixin sidebar-menu-item {
+  width: 100%;
+
+  .title {
+    display: flex;
+    align-items: center;
+
+    width: 250px;
+    height: 40px;
+
+    margin: 0 auto;
+
+    border-radius: 8px;
+
+    font-size: 20px;
+    vertical-align: middle;
+
+    cursor: pointer;
+    user-select: none;
+    outline: none;
+
+    &:hover, &.active {
+      background-color: $primary-default;
+      color: $input-background;
+      font-weight: 500;
+    }
+
+    .icon {
+      flex: 0 0 auto;
+      width: 24px;
+      height: 24px;
+      margin-left: 20px;
+    }
+
+    span {
+      flex: 1 1 auto;
+      margin-left: 15px;
+    }
+
+    .arrow {
+      flex: 0 0 auto;
+      margin-right: 15px;
+    }
+  }
+
+  .children {
+    position: absolute;
+    left: 350px;
+    top: 0;
+    height: 100%;
+  }
+}

src/app/control-center/control-center-computer-menu/control-center-computer-menu.component.html

@@ -0,0 +1,41 @@
+<div class="computer-menu">
+  <div class="title-bar">
+    <div class="title">Computer</div>
+    <div class="add-computer" (click)="newPcClicked()">
+      <i-tabler name="plus" alt="" class="add-computer-icon"></i-tabler>
+    </div>
+  </div>
+
+  <div *ngIf="menu.items.length === 0; else itemsThere">
+    <div class="no-items">
+      <div class="new-pc-indicator">
+        <div class="arrow">
+
+          <svg width="115" height="126" xmlns="http://www.w3.org/2000/svg">
+            <path d="M0 126 C50 117, 96 60, 105 0" stroke="white" fill="transparent"/>
+            <path d="M105 0 L115 30" stroke="white" fill="transparent"/>
+            <path d="M105 0 L82 27" stroke="white" fill="transparent"/>
+          </svg>
+
+        </div>
+        <div class="text">Create new<br>Computer</div>
+      </div>
+      <div class="no-pcs">You own no Computer</div>
+    </div>
+  </div>
+
+  <ng-template #itemsThere>
+    <div *ngFor="let item of menu.items; let i = index" (click)="itemClicked(item)" [class.active]="isItemActive(item)" class="item">
+      <div class="name">{{item.title}}</div>
+      <i-tabler name="power" alt="" class="power-icon"></i-tabler>
+      <div class="state" [ngSwitch]="states[i].state">
+        <span *ngSwitchCase="computerState.Offline" class="offline">Offline</span>
+        <span *ngSwitchCase="computerState.Online" class="online">Online</span>
+        <!-- <span *ngSwitchCase="computerState.Stopping" class="stopping">at Shutdown</span>
+        <span *ngSwitchCase="computerState.Starting" class="starting">at Startup</span> -->
+        <span *ngSwitchDefault class="unknown">Unknown State</span>
+      </div>
+    </div>
+  </ng-template>
+
+</div>

src/app/control-center/control-center-computer-menu/control-center-computer-menu.component.scss

@@ -0,0 +1,122 @@
+@import "../control-center-style";
+
+.computer-menu {
+  background-color: #2a2a31;
+
+  padding: 50px;
+
+  overflow: auto;
+
+  width: 500px;
+  height: 100vh;
+  box-sizing: border-box;
+
+  .title-bar {
+    display: flex;
+    align-items: center;
+
+    .title {
+      font-weight: 500;
+      font-size: 40px;
+    }
+
+    .add-computer {
+      margin-left: auto;
+      width: 50px;
+      height: 50px;
+      background-color: $input-background;
+      cursor: pointer;
+      border-radius: 16px;
+
+      &:hover {
+        background-color: $primary-default;
+        color: $input-background;
+      }
+
+      &-icon {
+        width: 24px;
+        height: 24px;
+        padding: 25% 0 0 25%;
+      }
+
+    }
+  }
+
+  .no-items {
+    .new-pc-indicator {
+      .arrow {
+        text-align: right;
+        position: relative;
+        right: 15px;
+      }
+      .text {
+        font-family: "Nothing You Could Do";
+        text-align: center;
+        position: relative;
+        left: 50px;
+      }
+    }
+    .no-pcs {
+      text-align: center;
+      margin: 233px 0 0;
+    }
+  }
+
+  .item {
+    cursor: pointer;
+    box-sizing: content-box;
+    padding: 13px 20px;
+    background-color: $input-background;
+    margin-top: 40px;
+    border-radius: 16px;
+    display: grid;
+    grid-template-areas:
+      "title icon" 
+      "state state";
+
+    &:hover, &.active {
+      background-color: $primary-default;
+      color: $input-background;
+
+      .state {
+        .online, .offline, .stopping, .starting, .unknown {
+          color: $input-background;
+        }
+      }
+    }
+
+    .name {
+      grid-area: title;
+      justify-self: start;
+      margin-bottom: 1px;
+    }
+
+    .state {
+      grid-area: state;
+      justify-self: start;
+      font-weight: 500;
+
+      .online {
+        color: $primary-default;
+      }
+
+      .offline {
+        color: $danger-default;
+      }
+
+      .at_startup, .at_shutdown, .unknown {
+        color: $warning-default;
+      }
+
+      .unknown {
+        font-style: italic;
+      }
+
+    }
+
+    .power-icon {
+      grid-area: icon;
+      justify-self: end;
+    }
+  }
+}

src/app/control-center/control-center-computer-menu/control-center-computer-menu.component.spec.ts

@@ -0,0 +1,29 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { RouterTestingModule } from '@angular/router/testing';
+import { SidebarMenu } from '../control-center-sidebar-menu/control-center-sidebar-menu.component';
+
+import { ControlCenterComputerMenuComponent } from './control-center-computer-menu.component';
+
+describe('ControlCenterComputerMenuComponent', () => {
+  let component: ControlCenterComputerMenuComponent;
+  let fixture: ComponentFixture<ControlCenterComputerMenuComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ ControlCenterComputerMenuComponent ],
+      imports: [RouterTestingModule]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ControlCenterComputerMenuComponent);
+    component = fixture.componentInstance;
+    component.menu = new SidebarMenu('', '');
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/control-center/control-center-computer-menu/control-center-computer-menu.component.ts

@@ -0,0 +1,86 @@
+import { Component, Input, Output, EventEmitter, OnInit } from '@angular/core';
+import { SidebarMenu, SidebarMenuItem } from '../control-center-sidebar-menu/control-center-sidebar-menu.component';
+import {Router} from '@angular/router';
+import {Device} from 'src/app/api/devices/device';
+
+@Component({
+  selector: 'app-control-center-computer-menu',
+  templateUrl: './control-center-computer-menu.component.html',
+  styleUrls: ['./control-center-computer-menu.component.scss']
+})
+export class ControlCenterComputerMenuComponent implements OnInit {
+
+  @Input() menu: SidebarMenu;
+  @Input() expanded!: boolean;
+  @Output() expandChange = new EventEmitter<boolean>();
+
+  @Input() devices: Device[];
+
+  states: any[] = [];
+  computerState = ComputerStateEnum;
+
+  constructor(private router: Router) {
+  }
+
+  ngOnInit(): void {
+    this.updatePcState();
+  }
+
+  updatePcState() {
+
+    if (this.devices != undefined) {
+      this.devices.forEach(device => {
+
+        switch (device.powered_on) {
+
+          case true:
+            this.states.push({uuid: device.uuid, state: ComputerStateEnum.Online});
+            break;
+
+          case false:
+            this.states.push({uuid: device.uuid, state: ComputerStateEnum.Offline});
+            break;
+
+          default:
+            this.states.push({uuid: device.uuid, state: ComputerStateEnum.Unknown});
+            break;
+        }
+
+      });
+
+    }
+
+  }
+
+  itemClicked(item: SidebarMenuItem) {
+    this.router.navigate([item.routerLink], {queryParams: item.queryParams}).then();
+    this.expanded = false;
+    this.expandChange.emit(this.expanded);
+  }
+
+  newPcClicked() {
+    this.router.navigate(['/create-device']).then();
+    this.expanded = false;
+    this.expandChange.emit(this.expanded);
+  }
+
+  isItemActive(item: SidebarMenuItem) {
+    // had to do this without routerLinkActive because of the lack of https://github.com/angular/angular/issues/31154
+    if (!item.routerLink) {
+      return false;
+    }
+    if (this.router.isActive(this.router.createUrlTree([item.routerLink], {queryParams: item.queryParams}), false)) {
+      return true;
+    }
+     return false;
+  }
+
+}
+
+enum ComputerStateEnum {
+  Online,
+  Offline,
+  Stopping,
+  Starting,
+  Unknown
+}

src/app/control-center/control-center-create-device-page/control-center-create-device-page.component.html

@@ -1,6 +1,6 @@
 <h1>Build a new device</h1>
 
-<span (click)="buildStarterDevice()" *ngIf="controlCenterService.deviceSidebarMenuItems.length === 1"
+<span (click)="buildStarterDevice()" *ngIf="controlCenterService.deviceSidebarMenuItems.length === 0"
       class="button starter-device" i18n>Build your first device</span>
 
 <form [formGroup]="form">