From 1795fdf666e021005072263141ef76c21ebd2d61 Mon Sep 17 00:00:00 2001 From: Thomas Fransolet Date: Fri, 6 Mar 2020 23:08:38 +0100 Subject: [PATCH] CP adding sidebar + handle service PanelSection --- package-lock.json | 6 +- package.json | 2 +- src/app/_api/api.module.ts | 4 + src/app/_api/models.ts | 4 + src/app/_api/models/odd-h2h.ts | 6 + src/app/_api/models/odd-nice.ts | 8 + src/app/_api/models/panel-menu-item.ts | 9 + src/app/_api/models/panel-section.ts | 9 + src/app/_api/services.ts | 2 + src/app/_api/services/layout.service.ts | 61 ++++++ src/app/_api/services/odd.service.ts | 128 ++++++++++++ .../_layouts/sidebar/sidebar.component.scss | 0 src/app/_layouts/sidebar/sidebar.module.ts | 14 -- src/app/app-routing.module.ts | 4 +- src/app/app.component.css | 4 +- src/app/app.module.ts | 9 +- .../automation/automation.component.html | 1 - .../profile/dashboard/dashboard.component.css | 18 +- .../dashboard/dashboard.component.html | 18 +- .../profile/dashboard/dashboard.component.ts | 79 ++----- .../sidebar/sidebarDashboard.component.html | 84 ++++++++ .../sidebar/sidebarDashboard.component.scss | 195 ++++++++++++++++++ .../sidebarDashboard.component.spec.ts} | 10 +- .../sidebar/sidebarDashboard.component.ts} | 92 +++++---- 24 files changed, 615 insertions(+), 152 deletions(-) create mode 100644 src/app/_api/models/odd-h2h.ts create mode 100644 src/app/_api/models/odd-nice.ts create mode 100644 src/app/_api/models/panel-menu-item.ts create mode 100644 src/app/_api/models/panel-section.ts create mode 100644 src/app/_api/services/layout.service.ts create mode 100644 src/app/_api/services/odd.service.ts delete mode 100644 src/app/_layouts/sidebar/sidebar.component.scss delete mode 100644 src/app/_layouts/sidebar/sidebar.module.ts create mode 100644 src/app/control-panel/profile/dashboard/sidebar/sidebarDashboard.component.html create mode 100644 src/app/control-panel/profile/dashboard/sidebar/sidebarDashboard.component.scss rename src/app/{_layouts/sidebar/sidebar.component.spec.ts => control-panel/profile/dashboard/sidebar/sidebarDashboard.component.spec.ts} (57%) rename src/app/{_layouts/sidebar/sidebar.component.ts => control-panel/profile/dashboard/sidebar/sidebarDashboard.component.ts} (52%) diff --git a/package-lock.json b/package-lock.json index 5194c7d..b6c98ce 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1938,9 +1938,9 @@ } }, "bootstrap": { - "version": "4.3.1", - "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-4.3.1.tgz", - "integrity": "sha512-rXqOmH1VilAt2DyPzluTi2blhk17bO7ef+zLLPlWvG494pDxcM234pJ8wTc/6R40UWizAIIMgxjvxZg5kmsbag==" + "version": "4.4.1", + "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-4.4.1.tgz", + "integrity": "sha512-tbx5cHubwE6e2ZG7nqM3g/FZ5PQEDMWmMGNrCUBVRPHXTJaH7CBDdsLeu3eCh3B1tzAxTnAbtmrzvWEvT2NNEA==" }, "brace-expansion": { "version": "1.1.11", diff --git a/package.json b/package.json index 82d1db1..d20a803 100644 --- a/package.json +++ b/package.json @@ -25,7 +25,7 @@ "@ngx-translate/core": "^11.0.1", "@ngx-translate/http-loader": "^4.0.0", "angular-font-awesome": "^3.1.2", - "bootstrap": "^4.3.1", + "bootstrap": "^4.4.1", "core-js": "^2.5.4", "flag-icon-css": "^3.3.0", "font-awesome": "^4.7.0", diff --git a/src/app/_api/api.module.ts b/src/app/_api/api.module.ts index 8c793a1..ba1be03 100644 --- a/src/app/_api/api.module.ts +++ b/src/app/_api/api.module.ts @@ -9,7 +9,9 @@ import { DeviceService } from './services/device.service'; import { FacebookService } from './services/facebook.service'; import { GoogleService } from './services/google.service'; import { IOTService } from './services/iot.service'; +import { LayoutService } from './services/layout.service'; import { MQTTService } from './services/mqtt.service'; +import { OddService } from './services/odd.service'; import { TokenService } from './services/token.service'; import { TwitterService } from './services/twitter.service'; import { UserService } from './services/user.service'; @@ -34,7 +36,9 @@ import { ValuesService } from './services/values.service'; FacebookService, GoogleService, IOTService, + LayoutService, MQTTService, + OddService, TokenService, TwitterService, UserService, diff --git a/src/app/_api/models.ts b/src/app/_api/models.ts index ade2db4..8b7eb21 100644 --- a/src/app/_api/models.ts +++ b/src/app/_api/models.ts @@ -5,6 +5,10 @@ export { FacebookAuthModel } from './models/facebook-auth-model'; export { GoogleAuthModel } from './models/google-auth-model'; export { SmartPrinterMessage } from './models/smart-printer-message'; export { SmartGardenMessage } from './models/smart-garden-message'; +export { PanelSection } from './models/panel-section'; +export { PanelMenuItem } from './models/panel-menu-item'; +export { OddNice } from './models/odd-nice'; +export { OddH2H } from './models/odd-h2h'; export { TokenDTO } from './models/token-dto'; export { UserInfo } from './models/user-info'; export { ScreenConfiguration } from './models/screen-configuration'; diff --git a/src/app/_api/models/odd-h2h.ts b/src/app/_api/models/odd-h2h.ts new file mode 100644 index 0000000..50f6df0 --- /dev/null +++ b/src/app/_api/models/odd-h2h.ts @@ -0,0 +1,6 @@ +/* tslint:disable */ +export interface OddH2H { + homeOdd?: number; + drawOdd?: number; + visitOdd?: number; +} diff --git a/src/app/_api/models/odd-nice.ts b/src/app/_api/models/odd-nice.ts new file mode 100644 index 0000000..60c4ee4 --- /dev/null +++ b/src/app/_api/models/odd-nice.ts @@ -0,0 +1,8 @@ +/* tslint:disable */ +import { OddH2H } from './odd-h2h'; +export interface OddNice { + teams?: Array; + commence_time?: number; + home_team?: string; + odds?: OddH2H; +} diff --git a/src/app/_api/models/panel-menu-item.ts b/src/app/_api/models/panel-menu-item.ts new file mode 100644 index 0000000..a1f0600 --- /dev/null +++ b/src/app/_api/models/panel-menu-item.ts @@ -0,0 +1,9 @@ +/* tslint:disable */ +export interface PanelMenuItem { + label?: string; + route?: string; + icon?: string; + badgeValue?: number; + badgeType?: string; + children?: Array; +} diff --git a/src/app/_api/models/panel-section.ts b/src/app/_api/models/panel-section.ts new file mode 100644 index 0000000..67997dd --- /dev/null +++ b/src/app/_api/models/panel-section.ts @@ -0,0 +1,9 @@ +/* tslint:disable */ +import { PanelMenuItem } from './panel-menu-item'; +export interface PanelSection { + label?: string; + icon?: string; + color?: string; + defaultRoute?: string; + children?: Array; +} diff --git a/src/app/_api/services.ts b/src/app/_api/services.ts index 14f2824..3207783 100644 --- a/src/app/_api/services.ts +++ b/src/app/_api/services.ts @@ -4,7 +4,9 @@ export { DeviceService } from './services/device.service'; export { FacebookService } from './services/facebook.service'; export { GoogleService } from './services/google.service'; export { IOTService } from './services/iot.service'; +export { LayoutService } from './services/layout.service'; export { MQTTService } from './services/mqtt.service'; +export { OddService } from './services/odd.service'; export { TokenService } from './services/token.service'; export { TwitterService } from './services/twitter.service'; export { UserService } from './services/user.service'; diff --git a/src/app/_api/services/layout.service.ts b/src/app/_api/services/layout.service.ts new file mode 100644 index 0000000..c366a42 --- /dev/null +++ b/src/app/_api/services/layout.service.ts @@ -0,0 +1,61 @@ +/* tslint:disable */ +import { Injectable } from '@angular/core'; +import { HttpClient, HttpRequest, HttpResponse, HttpHeaders } from '@angular/common/http'; +import { BaseService as __BaseService } from '../base-service'; +import { ApiConfiguration as __Configuration } from '../api-configuration'; +import { StrictHttpResponse as __StrictHttpResponse } from '../strict-http-response'; +import { Observable as __Observable } from 'rxjs'; +import { map as __map, filter as __filter } from 'rxjs/operators'; + +import { PanelSection } from '../models/panel-section'; +@Injectable({ + providedIn: 'root', +}) +class LayoutService extends __BaseService { + static readonly GetPath = '/api/layout/panelSection'; + + constructor( + config: __Configuration, + http: HttpClient + ) { + super(config, http); + } + + /** + * @return Success + */ + GetResponse(): __Observable<__StrictHttpResponse>> { + let __params = this.newParams(); + let __headers = new HttpHeaders(); + let __body: any = null; + let req = new HttpRequest( + 'GET', + this.rootUrl + `/api/layout/panelSection`, + __body, + { + headers: __headers, + params: __params, + responseType: 'json' + }); + + return this.http.request(req).pipe( + __filter(_r => _r instanceof HttpResponse), + __map((_r) => { + return _r as __StrictHttpResponse>; + }) + ); + } + /** + * @return Success + */ + Get(): __Observable> { + return this.GetResponse().pipe( + __map(_r => _r.body as Array) + ); + } +} + +module LayoutService { +} + +export { LayoutService } diff --git a/src/app/_api/services/odd.service.ts b/src/app/_api/services/odd.service.ts new file mode 100644 index 0000000..c2c8555 --- /dev/null +++ b/src/app/_api/services/odd.service.ts @@ -0,0 +1,128 @@ +/* tslint:disable */ +import { Injectable } from '@angular/core'; +import { HttpClient, HttpRequest, HttpResponse, HttpHeaders } from '@angular/common/http'; +import { BaseService as __BaseService } from '../base-service'; +import { ApiConfiguration as __Configuration } from '../api-configuration'; +import { StrictHttpResponse as __StrictHttpResponse } from '../strict-http-response'; +import { Observable as __Observable } from 'rxjs'; +import { map as __map, filter as __filter } from 'rxjs/operators'; + +import { OddNice } from '../models/odd-nice'; +@Injectable({ + providedIn: 'root', +}) +class OddService extends __BaseService { + static readonly GetForCountryPath = '/api/odd/country/{id}/{oddRequest}'; + static readonly GetAllPath = '/api/odd/{oddRequest}'; + + constructor( + config: __Configuration, + http: HttpClient + ) { + super(config, http); + } + + /** + * @param params The `OddService.GetForCountryParams` containing the following parameters: + * + * - `oddRequest`: Odd Maximum value + * + * - `id`: id of country, e.g = BE for Belgium + * + * @return Success + */ + GetForCountryResponse(params: OddService.GetForCountryParams): __Observable<__StrictHttpResponse>> { + let __params = this.newParams(); + let __headers = new HttpHeaders(); + let __body: any = null; + + + let req = new HttpRequest( + 'GET', + this.rootUrl + `/api/odd/country/${params.id}/${params.oddRequest}`, + __body, + { + headers: __headers, + params: __params, + responseType: 'json' + }); + + return this.http.request(req).pipe( + __filter(_r => _r instanceof HttpResponse), + __map((_r) => { + return _r as __StrictHttpResponse>; + }) + ); + } + /** + * @param params The `OddService.GetForCountryParams` containing the following parameters: + * + * - `oddRequest`: Odd Maximum value + * + * - `id`: id of country, e.g = BE for Belgium + * + * @return Success + */ + GetForCountry(params: OddService.GetForCountryParams): __Observable> { + return this.GetForCountryResponse(params).pipe( + __map(_r => _r.body as Array) + ); + } + + /** + * @param oddRequest Odd Maximum value + * @return Success + */ + GetAllResponse(oddRequest: number): __Observable<__StrictHttpResponse>> { + let __params = this.newParams(); + let __headers = new HttpHeaders(); + let __body: any = null; + + let req = new HttpRequest( + 'GET', + this.rootUrl + `/api/odd/${oddRequest}`, + __body, + { + headers: __headers, + params: __params, + responseType: 'json' + }); + + return this.http.request(req).pipe( + __filter(_r => _r instanceof HttpResponse), + __map((_r) => { + return _r as __StrictHttpResponse>; + }) + ); + } + /** + * @param oddRequest Odd Maximum value + * @return Success + */ + GetAll(oddRequest: number): __Observable> { + return this.GetAllResponse(oddRequest).pipe( + __map(_r => _r.body as Array) + ); + } +} + +module OddService { + + /** + * Parameters for GetForCountry + */ + export interface GetForCountryParams { + + /** + * Odd Maximum value + */ + oddRequest: number; + + /** + * id of country, e.g = BE for Belgium + */ + id: string; + } +} + +export { OddService } diff --git a/src/app/_layouts/sidebar/sidebar.component.scss b/src/app/_layouts/sidebar/sidebar.component.scss deleted file mode 100644 index e69de29..0000000 diff --git a/src/app/_layouts/sidebar/sidebar.module.ts b/src/app/_layouts/sidebar/sidebar.module.ts deleted file mode 100644 index c0f81b0..0000000 --- a/src/app/_layouts/sidebar/sidebar.module.ts +++ /dev/null @@ -1,14 +0,0 @@ -import { NgModule } from '@angular/core'; -import { CommonModule } from '@angular/common'; -import { RouterModule } from '@angular/router'; -import { SidebarComponent, SidebarNavRootItemComponent, SidebarNavDropItemComponent, SidebarNavItemComponent } from './sidebar.component'; - -@NgModule({ - imports: [CommonModule, RouterModule], - declarations: [SidebarComponent, SidebarNavItemComponent, SidebarNavRootItemComponent, SidebarNavDropItemComponent], - exports: [SidebarComponent], - providers: [ ] -}) -export class SidebarModule { - -} diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts index a5cd47f..54029fc 100644 --- a/src/app/app-routing.module.ts +++ b/src/app/app-routing.module.ts @@ -22,7 +22,9 @@ const routes: Routes = { path: '', component: ProfileComponent}, { path: ':profileId', children: [ { path: '', component: ProfileComponent}, - { path: 'dashboard', component: DashboardComponent}, + { path: 'dashboard', component: DashboardComponent, children: [ + { path: '**', component: DashboardComponent} + ]}, { path: 'edit', component: EditProfileComponent}, { path: 'automation', children: [ { path: '', component: AutomationComponent}, diff --git a/src/app/app.component.css b/src/app/app.component.css index 5ff1169..816e739 100644 --- a/src/app/app.component.css +++ b/src/app/app.component.css @@ -14,8 +14,8 @@ p-toolbar img{ p-toolbar { background-color: lightgrey; opacity: 0.7; - z-index: 999; - position: absolute; + /*z-index: 999; + position: fixed;*/ width: 100%; border:none; } diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 0c36616..ea6ebf9 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -42,8 +42,7 @@ import { DashboardComponent } from './control-panel/profile/dashboard/dashboard. import { BetComponent } from './control-panel/bet/bet.component'; import { PanelMenuModule } from 'primeng/panelmenu'; import { EnergyComponent } from './control-panel/profile/dashboard/energy/energy.component'; -import { SidebarComponent } from './_layouts/sidebar/sidebar.component'; -import { SidebarModule } from './_layouts/sidebar/sidebar.module'; +import { SidebarDashboardComponent, SidebarNavItemComponent, SidebarNavDropItemComponent } from './control-panel/profile/dashboard/sidebar/sidebarDashboard.component'; @@ -80,7 +79,10 @@ export function HttpLoaderFactory(http: HttpClient) { DevicesComponent, DashboardComponent, BetComponent, - EnergyComponent + EnergyComponent, + SidebarDashboardComponent, + SidebarNavItemComponent, + SidebarNavDropItemComponent ], imports: [ BrowserModule, @@ -102,7 +104,6 @@ export function HttpLoaderFactory(http: HttpClient) { ToastModule, DropdownModule, PanelMenuModule, - SidebarModule, TranslateModule.forRoot({ loader: { provide: TranslateLoader, diff --git a/src/app/control-panel/profile/automation/automation.component.html b/src/app/control-panel/profile/automation/automation.component.html index e8b0119..288e0a4 100644 --- a/src/app/control-panel/profile/automation/automation.component.html +++ b/src/app/control-panel/profile/automation/automation.component.html @@ -4,7 +4,6 @@

-

My Automations

diff --git a/src/app/control-panel/profile/dashboard/dashboard.component.css b/src/app/control-panel/profile/dashboard/dashboard.component.css index 1793e2d..3f6cd83 100644 --- a/src/app/control-panel/profile/dashboard/dashboard.component.css +++ b/src/app/control-panel/profile/dashboard/dashboard.component.css @@ -1,4 +1,4 @@ -.sidebar { +/* .sidebar { position: fixed; width: 180px; } @@ -14,4 +14,20 @@ .info { position: relative; background: #f55; +} */ + +.wrapper { + display: flex; + align-items: stretch; +} + +/* --------------------------------------------------- + CONTENT STYLE +----------------------------------------------------- */ + +#content { + width: 100%; + padding: 20px; + min-height: 100vh; + transition: all 0.3s; } \ No newline at end of file diff --git a/src/app/control-panel/profile/dashboard/dashboard.component.html b/src/app/control-panel/profile/dashboard/dashboard.component.html index 105eca4..e48b011 100644 --- a/src/app/control-panel/profile/dashboard/dashboard.component.html +++ b/src/app/control-panel/profile/dashboard/dashboard.component.html @@ -1,15 +1,7 @@ - -

-
- - -
-
-

My Dashboard

-
- -
+
+ + +
+
\ No newline at end of file diff --git a/src/app/control-panel/profile/dashboard/dashboard.component.ts b/src/app/control-panel/profile/dashboard/dashboard.component.ts index 753babd..0282245 100644 --- a/src/app/control-panel/profile/dashboard/dashboard.component.ts +++ b/src/app/control-panel/profile/dashboard/dashboard.component.ts @@ -1,7 +1,5 @@ import { Component, OnInit } from '@angular/core'; -import {PanelMenuModule} from 'primeng/panelmenu'; -import {MenuItem} from 'primeng/api'; -import { ElementSchemaRegistry } from '@angular/compiler'; +import { Router, ActivatedRoute, NavigationEnd } from '@angular/router'; @Component({ selector: 'app-dashboard', @@ -10,71 +8,26 @@ import { ElementSchemaRegistry } from '@angular/compiler'; }) export class DashboardComponent implements OnInit { - items: MenuItem[]; + UrlRegex = /dashboard.*/; - ShowEnergy = false; + ActiveTab = ''; - constructor() { } + constructor(private _router: Router, + private _route: ActivatedRoute) { } ngOnInit() { - // TODO Retrieve list from service (depends on what the user has access to) - this.items = [ - { - icon: 'fas fa-seedling', - label: 'Energy', - items: [ - {label: 'Electricity', icon: 'fas fa-bolt', - items: [ - {label: 'Solar Panel', icon: 'fas fa-solar-panel', - command: () => { this.Open('Energy/Electricity/SolarPanel'); }} - ], - command: () => { this.Open('Energy/Electricity'); }}, - {label: 'Gas', icon: 'fas fa-burn'}, - {label: 'Water', icon: 'fas fa-tint'} - ], command: () => { this.Open('Energy'); } - }, - { - label: 'Security', - icon: 'fas fa-lock', - items: [ - {label: 'Alarm', icon: 'fas fa-bell'}, - {label: 'Camera', icon: 'fas fa-video'} - ] - }, - { - label: 'Entertainment', - icon: 'fas fa-music', - items: [ - { - label: 'Music', - icon: 'fas fa-music' - }, - { - label: 'Tv', - icon: 'fas fa-tv', - } - ] - }, - { - label: 'Health', - icon: 'fas fa-heartbeat', - items: [ - { - label: 'My body', - icon: ' fas fa-user-alt' - }, - { - label: 'Fitness', - icon: 'fas fa-running', - } - ] + this._router.events.subscribe(e => { + if (e instanceof NavigationEnd) { + console.log('current route: ', this._router.url.toString()); + console.log(this._router.url.match(this.UrlRegex)[0]); + this.ActiveTab = this._router.url.match(this.UrlRegex)[0]; + switch (this._router.url.match(this.UrlRegex)[0]) { + case 'dashboard/energy': + this.ActiveTab = 'energy'; + break; + } } - ]; - } - - Open(module: string) { - console.log(module); - this.ShowEnergy = true; + }); } } diff --git a/src/app/control-panel/profile/dashboard/sidebar/sidebarDashboard.component.html b/src/app/control-panel/profile/dashboard/sidebar/sidebarDashboard.component.html new file mode 100644 index 0000000..1ec80a5 --- /dev/null +++ b/src/app/control-panel/profile/dashboard/sidebar/sidebarDashboard.component.html @@ -0,0 +1,84 @@ + + \ No newline at end of file diff --git a/src/app/control-panel/profile/dashboard/sidebar/sidebarDashboard.component.scss b/src/app/control-panel/profile/dashboard/sidebar/sidebarDashboard.component.scss new file mode 100644 index 0000000..d4bf62f --- /dev/null +++ b/src/app/control-panel/profile/dashboard/sidebar/sidebarDashboard.component.scss @@ -0,0 +1,195 @@ +$base-color: #007ad9; +$second-color: #66AFE8; +$hover-color: #c1dff5; + +a, +a:hover, +a:focus { + color: inherit; + text-decoration: none; + transition: all 0.3s; +} + +/* --------------------------------------------------- + SIDEBAR STYLE +----------------------------------------------------- */ + +#sidebar { + min-width: 250px; + max-width: 250px; + background: $base-color; + color: #fff; + transition: all 0.3s; +} + +#sidebar.active { + min-width: 80px; + max-width: 80px; + text-align: center; +} + +#sidebar.active .sidebar-header h3, +#sidebar.active .CTAs { + display: none; +} + +#sidebar.active .sidebar-header strong { + display: block; +} + +#sidebar ul li a { + text-align: left; +} + +#sidebar.active ul li a { + padding: 20px 10px; + text-align: center; + font-size: 0.85em; +} + +#sidebar.active ul li a i { + margin-right: 0; + display: block; + font-size: 1.8em; + margin-bottom: 5px; +} + +#sidebar.active ul ul a { + padding: 10px !important; +} + +#sidebar.active .dropdown-toggle::after { + top: auto; + bottom: 10px; + right: 50%; + -webkit-transform: translateX(50%); + -ms-transform: translateX(50%); + transform: translateX(50%); +} + +#sidebar .sidebar-header { + padding: 20px; + background: $second-color; +} + +#sidebar .sidebar-header strong { + display: none; + font-size: 1.8em; +} + +#sidebar ul.components { + padding: 20px 0; + /*border-bottom: 1px solid #47748b;*/ +} + +#sidebar ul li a { + padding: 10px; + font-size: 1.1em; + display: block; +} + +#sidebar ul li a:hover { + color: $base-color; + background: $hover-color; +} + +#sidebar ul li a i { + margin-right: 10px; +} + +#sidebar ul li.active>a, +a[aria-expanded="true"] { + color: $hover-color; + background: $second-color; +} + +a[data-toggle="collapse"] { + position: relative; +} + +.dropdown-toggle::after { + display: block; + position: absolute; + top: 50%; + right: 20px; + transform: translateY(-50%); +} + +ul ul a { + font-size: 0.9em !important; + padding-left: 30px !important; + background: $second-color; +} + + +/* --------------------------------------------------- + CONTENT STYLE +----------------------------------------------------- */ + +#content { + width: 100%; + padding: 20px; + min-height: 100vh; + transition: all 0.3s; +} + +.btnCollapse { + position: absolute; + top: 1%; + left: 1%; + color: $base-color; + +} + +/* --------------------------------------------------- + MEDIAQUERIES +----------------------------------------------------- */ + +@media (max-width: 768px) { + #sidebar { + min-width: 80px; + max-width: 80px; + text-align: center; + margin-left: -80px !important; + } + .dropdown-toggle::after { + top: auto; + bottom: 10px; + right: 50%; + -webkit-transform: translateX(50%); + -ms-transform: translateX(50%); + transform: translateX(50%); + } + #sidebar.active { + margin-left: 0 !important; + } + #sidebar .sidebar-header h3, + #sidebar .CTAs { + display: none; + } + #sidebar .sidebar-header strong { + display: block; + } + #sidebar ul li a { + padding: 20px 10px; + } + #sidebar ul li a span { + font-size: 0.85em; + } + #sidebar ul li a i { + margin-right: 0; + display: block; + } + #sidebar ul ul a { + padding: 10px !important; + } + #sidebar ul li a i { + font-size: 1.3em; + } + #sidebar { + margin-left: 0; + } + #sidebarCollapse span { + display: none; + } +} \ No newline at end of file diff --git a/src/app/_layouts/sidebar/sidebar.component.spec.ts b/src/app/control-panel/profile/dashboard/sidebar/sidebarDashboard.component.spec.ts similarity index 57% rename from src/app/_layouts/sidebar/sidebar.component.spec.ts rename to src/app/control-panel/profile/dashboard/sidebar/sidebarDashboard.component.spec.ts index f29709f..9bb379b 100644 --- a/src/app/_layouts/sidebar/sidebar.component.spec.ts +++ b/src/app/control-panel/profile/dashboard/sidebar/sidebarDashboard.component.spec.ts @@ -1,20 +1,20 @@ import { async, ComponentFixture, TestBed } from '@angular/core/testing'; -import { SidebarComponent } from './sidebar.component'; +import { SidebarDashboardComponent } from './sidebarDashboard.component'; describe('SidebarComponent', () => { - let component: SidebarComponent; - let fixture: ComponentFixture; + let component: SidebarDashboardComponent; + let fixture: ComponentFixture; beforeEach(async(() => { TestBed.configureTestingModule({ - declarations: [ SidebarComponent ] + declarations: [ SidebarDashboardComponent ] }) .compileComponents(); })); beforeEach(() => { - fixture = TestBed.createComponent(SidebarComponent); + fixture = TestBed.createComponent(SidebarDashboardComponent); component = fixture.componentInstance; fixture.detectChanges(); }); diff --git a/src/app/_layouts/sidebar/sidebar.component.ts b/src/app/control-panel/profile/dashboard/sidebar/sidebarDashboard.component.ts similarity index 52% rename from src/app/_layouts/sidebar/sidebar.component.ts rename to src/app/control-panel/profile/dashboard/sidebar/sidebarDashboard.component.ts index e132897..ea8823c 100644 --- a/src/app/_layouts/sidebar/sidebar.component.ts +++ b/src/app/control-panel/profile/dashboard/sidebar/sidebarDashboard.component.ts @@ -1,31 +1,25 @@ import { Component, OnInit, Input } from '@angular/core'; -import { LayoutService } from '../../_api/services'; -import { PanelSection } from '../../_api/models'; -import { Router } from '@angular/router'; +import { LayoutService } from '../../../../_api/services'; +import { PanelSection } from '../../../../_api/models'; +import { Router, Route, ActivatedRoute } from '@angular/router'; @Component({ - selector: 'app-sidebar', - template: ` -
- -
`, - styleUrls: ['./sidebar.component.scss'] + selector: 'app-sidebar-dashboard', + templateUrl: './sidebarDashboard.component.html', + styleUrls: ['./sidebarDashboard.component.scss'] }) -export class SidebarComponent implements OnInit { +export class SidebarDashboardComponent implements OnInit { public navigation: Array; - public hasChildren(item) { - return item.children != null && item.children.length > 0 ? true : false; - } + CollapseBar = false; + CollapseSubBarBool = false; - constructor(private _layoutService: LayoutService) { } + UrlRegex = /.*dashboard/; + + constructor(private _layoutService: LayoutService, + private _router: Router, + private _route: ActivatedRoute + ) { } ngOnInit() { this.LoadMenu(); @@ -37,35 +31,43 @@ export class SidebarComponent implements OnInit { }); } -} - -@Component({ - selector: 'app-sidebar-nav-root-item', - template: `
  • - - - {{item.label}} - {{ item.badge }} - -
    • ` -}) -export class SidebarNavRootItemComponent { - @Input() item; - - public hasBadge() { - return this.item.badge ? true : false; + public hasChildren(item) { + return item.children != null && item.children.length > 0 ? true : false; } + + public hasBadge(item) { + return item.badge ? true : false; + } + + CollapseSideBar() { + this.CollapseBar = !this.CollapseBar; + //$('#sidebar').toggleClass('active'); + } + + ToggleOpen(route: string, item) { + item.isOpen = item.isOpen ? false : true; + if (route != null && route !== '') { + this._router.navigate([this._router.url.match(this.UrlRegex)[0], route]); + } + } + + GoToRoute(mainroute: string, route: string) { + if (mainroute != null && mainroute !== '' && route != null && route !== '') { + this._router.navigate([this._router.url.match(this.UrlRegex)[0], mainroute, route]); + } + } + } @Component({ selector: 'app-sidebar-nav-item', - template: `
  • - - + template: `
    • ` +
    ` }) export class SidebarNavItemComponent { @Input() item; @@ -78,8 +80,8 @@ export class SidebarNavItemComponent { @Component({ selector: 'app-sidebar-nav-dropdown-item', template: `
  • - - + + {{item.label}}
      @@ -110,7 +112,9 @@ export class SidebarNavDropItemComponent { } } + public hasChildren(item) { return item.children != null && item.children.length > 0 ? true : false; } } +