Skip to content

Commit

Permalink
Merge pull request #375 from MurhafSousli/update-demo
Browse files Browse the repository at this point in the history 
Update demo
  • Loading branch information
@MurhafSousli
MurhafSousli authored Aug 29, 2024
2 parents 22a7243 + 34b6305 commit f6eda69
Show file tree
Hide file tree
Showing 10 changed files with 204 additions and 97 deletions.
12 changes: 12 additions & 0 deletions projects/ngx-progressbar-demo/src/app/app-routes.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
import { Routes } from '@angular/router';

export const appRoutes: Routes = [
{
path: '',
loadComponent: () => import('./home/home.component').then(m => m.HomeComponent)
},
{
path: 'custom',
loadComponent: () => import('./custom/custom.component').then(m => m.CustomComponent)
}
];
7 changes: 1 addition & 6 deletions projects/ngx-progressbar-demo/src/app/app.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,12 +10,7 @@ import { HeaderComponent } from './header/header.component';
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush,
imports: [
RouterModule,
HeaderComponent,
NgProgressbar,
NgProgressRouter
]
imports: [RouterModule, HeaderComponent, NgProgressbar, NgProgressRouter]
})
export class AppComponent {
}
2 changes: 1 addition & 1 deletion projects/ngx-progressbar-demo/src/app/custom/custom.component.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ mat-progress-spinner {

.bar-placeholder {
height: 4px;
background-color: #d1c4e9;
background-color: var(--mdc-linear-progress-track-color);
}

mat-card {
Expand Down
13 changes: 6 additions & 7 deletions projects/ngx-progressbar-demo/src/app/custom/custom.component.ts
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,10 @@
import { ChangeDetectionStrategy, Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { animate, state, style, transition, trigger } from '@angular/animations';
import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
import { MatIconModule } from '@angular/material/icon';
import { MatButtonModule } from '@angular/material/button';
import { MatProgressBarModule } from '@angular/material/progress-bar';
import { MatCardModule } from '@angular/material/card';
import { MatProgressSpinner } from '@angular/material/progress-spinner';
import { MatIcon } from '@angular/material/icon';
import { MatFabButton } from '@angular/material/button';
import { MatProgressBar } from '@angular/material/progress-bar';
import { MatCard } from '@angular/material/card';
import { NgProgressRef } from 'ngx-progressbar';

@Component({
Expand All @@ -23,7 +22,7 @@ import { NgProgressRef } from 'ngx-progressbar';
])
],
changeDetection: ChangeDetectionStrategy.OnPush,
imports: [CommonModule, MatCardModule, MatProgressBarModule, MatButtonModule, MatIconModule, MatProgressSpinnerModule, NgProgressRef]
imports: [MatCard, MatProgressBar, MatIcon, MatProgressSpinner, NgProgressRef, MatFabButton]
})
export class CustomComponent {
}
10 changes: 5 additions & 5 deletions projects/ngx-progressbar-demo/src/app/home/home.component.html
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<div class="progressbar-container">
<ng-progress #labProgress
<ng-progress #labProgress="ngProgress"
ngProgressHttp
[flat]="options.flat"
[min]="options.min"
Expand Down Expand Up @@ -63,15 +63,15 @@
</tr>
</table>
<div class="events">
<span class="chip" [class.changed]="startedClass | async"> NgProgress.
<span class="chip" [class.changed]="startedClass()"> NgProgress.
<strong>started</strong>
</span>
<span class="chip" [class.changed]="endedClass | async"> NgProgress.
<span class="chip" [class.changed]="endedClass()"> NgProgress.
<strong>completed</strong>
</span>

<button class="chip" (click)="testHttp()" [disabled]="preventAbuse | async">
{{ (preventAbuse | async) ? 'Wait...' : 'Test Http Request' }}
<button class="chip" (click)="testHttp()" [disabled]="preventAbuse()">
{{ preventAbuse() ? 'Wait...' : 'Test Http Request' }}
</button>
</div>
</div>
Expand Down
50 changes: 21 additions & 29 deletions projects/ngx-progressbar-demo/src/app/home/home.component.ts
View file
Original file line number Diff line number Diff line change
@@ -1,21 +1,16 @@
import { Component, ViewEncapsulation, ChangeDetectionStrategy } from '@angular/core';
import { CommonModule } from '@angular/common';
import { Component, signal, inject, WritableSignal, ChangeDetectionStrategy } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Subject } from 'rxjs';
import { NgProgressbar, NgProgressOptions } from 'ngx-progressbar';
import { NgProgressHttp, provideNgProgressHttp } from 'ngx-progressbar/http';
import { NgProgressHttp } from 'ngx-progressbar/http';
import { LabComponent } from './lab/lab.component';

@Component({
standalone: true,
selector: 'app-home',
templateUrl: './home.component.html',
styleUrls: ['./home.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush,
standalone: true,
providers: [
// provideNgProgressHttp(),
],
imports: [CommonModule, NgProgressbar, LabComponent, NgProgressHttp]
imports: [NgProgressbar, LabComponent, NgProgressHttp]
})
export class HomeComponent {

Expand All @@ -32,36 +27,33 @@ export class HomeComponent {
spinner: true
};

preventAbuse = new Subject<boolean>();
startedClass = new Subject<boolean>();
endedClass = new Subject<boolean>();
private readonly http: HttpClient = inject(HttpClient);

constructor(private http: HttpClient) {
}
preventAbuse: WritableSignal<boolean> = signal<boolean>(false);
startedClass: WritableSignal<boolean> = signal<boolean>(false);
endedClass: WritableSignal<boolean> = signal<boolean>(false);

onProgressStarted() {
this.startedClass.next(true);
onProgressStarted(): void {
this.startedClass.set(true);
setTimeout(() => {
this.startedClass.next(false);
this.startedClass.set(false);
}, 800);
}

onProgressCompleted() {
this.endedClass.next(true);
onProgressCompleted(): void {
this.endedClass.set(true);
setTimeout(() => {
this.endedClass.next(false);
this.endedClass.set(false);
}, 800);
}

testHttp() {
this.preventAbuse.next(true);
testHttp(): void {
this.preventAbuse.set(true);

this.http.get('https://reqres.in/api/users?delay=1')
.subscribe(() => {
setTimeout(() => {
this.preventAbuse.next(false);
}, 800);
});
this.http.get('https://reqres.in/api/users?delay=1').subscribe(() => {
setTimeout(() => {
this.preventAbuse.set(false);
}, 800);
});
}

}
24 changes: 0 additions & 24 deletions projects/ngx-progressbar-demo/src/app/routing.module.ts
View file

This file was deleted.

144 changes: 144 additions & 0 deletions projects/ngx-progressbar-demo/src/m3-theme.scss
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,144 @@
// This file was generated by running 'ng generate @angular/material:m3-theme'.
// Proceed with caution if making changes to this file.

@use 'sass:map';
@use '@angular/material' as mat;

// Note: Color palettes are generated from primary: #1EB77F, secondary: #2C7CD1, tertiary: #92c34e
$_palettes: (
primary: (
0: #000000,
10: #002113,
20: #003824,
25: #00452c,
30: #005236,
35: #005f3f,
40: #006c48,
50: #00885c,
60: #00a571,
70: #30c188,
80: #55dea2,
90: #74fbbd,
95: #beffdb,
98: #e8ffef,
99: #f4fff6,
100: #ffffff,
),
secondary: (
0: #000000,
10: #001c39,
20: #00315d,
25: #003c70,
30: #004884,
35: #005398,
40: #005fad,
50: #2779cd,
60: #4a93e9,
70: #6faeff,
80: #a4c9ff,
90: #d4e3ff,
95: #ebf1ff,
98: #f8f9ff,
99: #fdfcff,
100: #ffffff,
),
tertiary: (
0: #000000,
10: #112000,
20: #203600,
25: #294200,
30: #314f00,
35: #3a5c00,
40: #436900,
50: #578311,
60: #709e2d,
70: #89ba46,
80: #a4d65e,
90: #bff377,
95: #d3ff96,
98: #f0ffd5,
99: #f9ffe8,
100: #ffffff,
),
neutral: (
0: #000000,
10: #161d19,
20: #2b322d,
25: #363d38,
30: #414843,
35: #4d544f,
40: #59605b,
50: #717973,
60: #8b938c,
70: #a6ada7,
80: #c1c8c2,
90: #dde4dd,
95: #ebf3eb,
98: #f4fbf4,
99: #f7fef7,
100: #ffffff,
4: #09100c,
6: #0e1511,
12: #1a211d,
17: #252c27,
22: #2f3632,
24: #343b36,
87: #d5dcd5,
92: #e3eae3,
94: #e9f0e9,
96: #eef5ee,
),
neutral-variant: (
0: #000000,
10: #121e17,
20: #27332c,
25: #313e37,
30: #3d4a42,
35: #48564d,
40: #546259,
50: #6d7a71,
60: #86948a,
70: #a0afa4,
80: #bccabf,
90: #d7e6db,
95: #e6f4e9,
98: #eefdf2,
99: #f4fff6,
100: #ffffff,
),
error: (
0: #000000,
10: #410002,
20: #690005,
25: #7e0007,
30: #93000a,
35: #a80710,
40: #ba1a1a,
50: #de3730,
60: #ff5449,
70: #ff897d,
80: #ffb4ab,
90: #ffdad6,
95: #ffedea,
98: #fff8f7,
99: #fffbff,
100: #ffffff,
),
);

$_rest: (
secondary: map.get($_palettes, secondary),
neutral: map.get($_palettes, neutral),
neutral-variant: map.get($_palettes, neutral-variant),
error: map.get($_palettes, error),
);
$_primary: map.merge(map.get($_palettes, primary), $_rest);
$_tertiary: map.merge(map.get($_palettes, tertiary), $_rest);

$light-theme: mat.define-theme((
color: (
theme-type: light,
primary: $_primary,
tertiary: $_tertiary,
),
));
15 changes: 6 additions & 9 deletions projects/ngx-progressbar-demo/src/main.ts
View file
Original file line number Diff line number Diff line change
@@ -1,23 +1,20 @@
import { enableProdMode, importProvidersFrom } from '@angular/core';
import { enableProdMode } from '@angular/core';
import { provideHttpClient, withFetch, withInterceptors } from '@angular/common/http';
import { provideAnimations } from '@angular/platform-browser/animations';
import { BrowserModule, bootstrapApplication } from '@angular/platform-browser';

import { bootstrapApplication } from '@angular/platform-browser';
import { provideRouter, withHashLocation } from '@angular/router';
import { progressInterceptor } from 'ngx-progressbar/http';
import { environment } from './environments/environment';
import { AppComponent } from './app/app.component';
import { AppRoutingModule } from './app/routing.module';
import { progressInterceptor } from 'ngx-progressbar/http';
import { appRoutes } from './app/app-routes';

if (environment.production) {
enableProdMode();
}

bootstrapApplication(AppComponent, {
providers: [
importProvidersFrom(
BrowserModule,
AppRoutingModule
),
provideRouter(appRoutes, withHashLocation()),
provideAnimations(),
provideHttpClient(
withFetch(),
Expand Down
Loading

1 comment on commit f6eda69

@github-actions
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🎉 Published on https://ngx-progressbar.netlify.app as production
🚀 Deployed on https://66d10bc2db3130cac6878f82--ngx-progressbar.netlify.app

Please sign in to comment.