From cda416f5b7d1c2c7fe68b311ad9669442ec4345e Mon Sep 17 00:00:00 2001 From: kj1352 Date: Sat, 9 Dec 2023 17:08:21 +0530 Subject: [PATCH] Added chant mantras page --- package-lock.json | 25 ++++++++++- package.json | 1 + src/app/app-routing.module.ts | 4 ++ .../chant-mantras-routing.module.ts | 17 +++++++ src/app/chant-mantras/chant-mantras.module.ts | 23 ++++++++++ src/app/chant-mantras/chant-mantras.page.html | 20 +++++++++ src/app/chant-mantras/chant-mantras.page.scss | 13 ++++++ .../chant-mantras/chant-mantras.page.spec.ts | 17 +++++++ src/app/chant-mantras/chant-mantras.page.ts | 44 +++++++++++++++++++ src/app/home/home.page.html | 2 +- src/app/home/home.page.scss | 4 -- src/app/home/home.page.ts | 6 ++- src/global.scss | 1 + 13 files changed, 169 insertions(+), 8 deletions(-) create mode 100644 src/app/chant-mantras/chant-mantras-routing.module.ts create mode 100644 src/app/chant-mantras/chant-mantras.module.ts create mode 100644 src/app/chant-mantras/chant-mantras.page.html create mode 100644 src/app/chant-mantras/chant-mantras.page.scss create mode 100644 src/app/chant-mantras/chant-mantras.page.spec.ts create mode 100644 src/app/chant-mantras/chant-mantras.page.ts diff --git a/package-lock.json b/package-lock.json index 7459add..a1c9d8e 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "sripuram-pwa", - "version": "0.0.1", + "version": "1.0.0", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "sripuram-pwa", - "version": "0.0.1", + "version": "1.0.0", "dependencies": { "@angular/animations": "^17.0.2", "@angular/common": "^17.0.2", @@ -17,6 +17,7 @@ "@angular/platform-browser-dynamic": "^17.0.2", "@angular/router": "^17.0.2", "@ionic/angular": "^7.0.0", + "angular-svg-round-progressbar": "^12.0.0", "ionicons": "^7.0.0", "rxjs": "~7.8.0", "tslib": "^2.3.0", @@ -4733,6 +4734,18 @@ "ajv": "^8.8.2" } }, + "node_modules/angular-svg-round-progressbar": { + "version": "12.0.0", + "resolved": "https://registry.npmjs.org/angular-svg-round-progressbar/-/angular-svg-round-progressbar-12.0.0.tgz", + "integrity": "sha512-zf5TLC0goQZgirSp6g72SdN8Vz7a3VuKVqdSnIuAf0Q7Nx55crmlwLWIEYIxrKe5A1wea8fnOF8oFK5v8mCAsA==", + "dependencies": { + "tslib": "^2.3.0" + }, + "peerDependencies": { + "@angular/common": "^17.0.0", + "@angular/core": "^17.0.0" + } + }, "node_modules/ansi-colors": { "version": "4.1.3", "resolved": "https://registry.npmjs.org/ansi-colors/-/ansi-colors-4.1.3.tgz", @@ -19842,6 +19855,14 @@ "fast-deep-equal": "^3.1.3" } }, + "angular-svg-round-progressbar": { + "version": "12.0.0", + "resolved": "https://registry.npmjs.org/angular-svg-round-progressbar/-/angular-svg-round-progressbar-12.0.0.tgz", + "integrity": "sha512-zf5TLC0goQZgirSp6g72SdN8Vz7a3VuKVqdSnIuAf0Q7Nx55crmlwLWIEYIxrKe5A1wea8fnOF8oFK5v8mCAsA==", + "requires": { + "tslib": "^2.3.0" + } + }, "ansi-colors": { "version": "4.1.3", "resolved": "https://registry.npmjs.org/ansi-colors/-/ansi-colors-4.1.3.tgz", diff --git a/package.json b/package.json index f801fe8..e5135d5 100644 --- a/package.json +++ b/package.json @@ -22,6 +22,7 @@ "@angular/platform-browser-dynamic": "^17.0.2", "@angular/router": "^17.0.2", "@ionic/angular": "^7.0.0", + "angular-svg-round-progressbar": "^12.0.0", "ionicons": "^7.0.0", "rxjs": "~7.8.0", "tslib": "^2.3.0", diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts index 453c82b..b075e96 100644 --- a/src/app/app-routing.module.ts +++ b/src/app/app-routing.module.ts @@ -15,6 +15,10 @@ const routes: Routes = [ path: 'story-details', loadChildren: () => import('./story-details/story-details.module').then( m => m.StoryDetailsPageModule) }, + { + path: 'chant-mantras', + loadChildren: () => import('./chant-mantras/chant-mantras.module').then( m => m.ChantMantrasPageModule) + }, ]; @NgModule({ diff --git a/src/app/chant-mantras/chant-mantras-routing.module.ts b/src/app/chant-mantras/chant-mantras-routing.module.ts new file mode 100644 index 0000000..cf765ee --- /dev/null +++ b/src/app/chant-mantras/chant-mantras-routing.module.ts @@ -0,0 +1,17 @@ +import { NgModule } from '@angular/core'; +import { Routes, RouterModule } from '@angular/router'; + +import { ChantMantrasPage } from './chant-mantras.page'; + +const routes: Routes = [ + { + path: '', + component: ChantMantrasPage + } +]; + +@NgModule({ + imports: [RouterModule.forChild(routes)], + exports: [RouterModule], +}) +export class ChantMantrasPageRoutingModule {} diff --git a/src/app/chant-mantras/chant-mantras.module.ts b/src/app/chant-mantras/chant-mantras.module.ts new file mode 100644 index 0000000..8fda47f --- /dev/null +++ b/src/app/chant-mantras/chant-mantras.module.ts @@ -0,0 +1,23 @@ +import { NgModule } from '@angular/core'; +import { CommonModule } from '@angular/common'; +import { FormsModule } from '@angular/forms'; + +import { IonicModule } from '@ionic/angular'; + +import { ChantMantrasPageRoutingModule } from './chant-mantras-routing.module'; + +import { ChantMantrasPage } from './chant-mantras.page'; + +import { RoundProgressModule } from 'angular-svg-round-progressbar'; + +@NgModule({ + imports: [ + CommonModule, + FormsModule, + IonicModule, + ChantMantrasPageRoutingModule, + RoundProgressModule, + ], + declarations: [ChantMantrasPage], +}) +export class ChantMantrasPageModule {} diff --git a/src/app/chant-mantras/chant-mantras.page.html b/src/app/chant-mantras/chant-mantras.page.html new file mode 100644 index 0000000..4f775e9 --- /dev/null +++ b/src/app/chant-mantras/chant-mantras.page.html @@ -0,0 +1,20 @@ + +
+ +
+ {{ totalTime }} +
+
+ diff --git a/src/app/chant-mantras/chant-mantras.page.scss b/src/app/chant-mantras/chant-mantras.page.scss new file mode 100644 index 0000000..d0f5edb --- /dev/null +++ b/src/app/chant-mantras/chant-mantras.page.scss @@ -0,0 +1,13 @@ +.timer { + position: relative; + + .indicator { + background: linear-gradient(90deg, var(--brand-orange-shade1), var(--brand-orange-shade2)); + margin: 0 auto; + height: 30vh; + width: 30vh; + position: absolute; + border-top-left-radius: 50%; + border-top-right-radius: 50%; + } +} \ No newline at end of file diff --git a/src/app/chant-mantras/chant-mantras.page.spec.ts b/src/app/chant-mantras/chant-mantras.page.spec.ts new file mode 100644 index 0000000..d2a00fc --- /dev/null +++ b/src/app/chant-mantras/chant-mantras.page.spec.ts @@ -0,0 +1,17 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; +import { ChantMantrasPage } from './chant-mantras.page'; + +describe('ChantMantrasPage', () => { + let component: ChantMantrasPage; + let fixture: ComponentFixture; + + beforeEach(async(() => { + fixture = TestBed.createComponent(ChantMantrasPage); + component = fixture.componentInstance; + fixture.detectChanges(); + })); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/chant-mantras/chant-mantras.page.ts b/src/app/chant-mantras/chant-mantras.page.ts new file mode 100644 index 0000000..afc5cb7 --- /dev/null +++ b/src/app/chant-mantras/chant-mantras.page.ts @@ -0,0 +1,44 @@ +import { Component, OnInit, OnDestroy } from '@angular/core'; + +@Component({ + selector: 'app-chant-mantras', + templateUrl: './chant-mantras.page.html', + styleUrls: ['./chant-mantras.page.scss'], +}) +export class ChantMantrasPage implements OnInit, OnDestroy { + options = { + current: 100, + max: 100, + color: '#fa9900', + background: '#fce09f', + stroke: 10, + semicircle: true, + rounded: true, + clockwise: true, + responsive: true, + duration: 1000, + animation: 'easeInOutQuart', + animationDelay: 0, + }; + + totalTime: number = 100000; + currentTime: number = 0; + timerInterval: any; + + constructor() {} + ngOnDestroy() { + clearInterval(this.timerInterval); + } + + ngOnInit() { + this.currentTime = this.totalTime; + this.timerInterval = setInterval(() => { + if (this.currentTime > 0) { + this.currentTime -= 1000; + this.options.current = this.currentTime * 100 / this.totalTime; + } else { + clearInterval(this.timerInterval); + } + }, 1000); + } +} diff --git a/src/app/home/home.page.html b/src/app/home/home.page.html index 568dbc5..9510950 100644 --- a/src/app/home/home.page.html +++ b/src/app/home/home.page.html @@ -58,7 +58,7 @@ temple image
- diff --git a/src/app/home/home.page.scss b/src/app/home/home.page.scss index 7634f17..dc08beb 100644 --- a/src/app/home/home.page.scss +++ b/src/app/home/home.page.scss @@ -1,7 +1,3 @@ -ion-content { - --background: var(--brand-cream-shade1); -} - h5 { font-weight: 600; font-size: 1.6rem; diff --git a/src/app/home/home.page.ts b/src/app/home/home.page.ts index f215efd..8920dd0 100644 --- a/src/app/home/home.page.ts +++ b/src/app/home/home.page.ts @@ -11,7 +11,11 @@ export class HomePage { constructor(private router: Router) {} showStoryDetails(){ - this.router.navigate(['/story-details']) + this.router.navigate(['/story-details']); + } + + gotoChant() { + this.router.navigate(['/chant-mantras']); } } diff --git a/src/global.scss b/src/global.scss index 92adadb..b2af838 100644 --- a/src/global.scss +++ b/src/global.scss @@ -53,6 +53,7 @@ ion-content { --padding-start: 2rem; --padding-end: 2rem; --padding-bottom: 2rem; + --background: var(--brand-cream-shade1); } :root {