change

angular.json

@@ -26,8 +26,11 @@
             ],
             "styles": [
               "src/styles.css"
+              
             ],
-            "scripts": []
+            "scripts": [
+              
+            ]
           },
           "configurations": {
             "production": {
@@ -96,6 +99,6 @@
     }
   },
   "cli": {
-    "analytics": "9fdb4643-2379-4b0a-be04-6e4bf67f2743"
+    "analytics": "0bc6e4f8-bb1c-416f-b778-24cb5a0c67cc"
   }
 }

package-lock.json

@@ -17,6 +17,7 @@
         "@angular/platform-browser-dynamic": "^15.1.0",
         "@angular/router": "^15.1.0",
         "bootstrap": "^5.3.0-alpha1",
+        "ngx-bootstrap": "^10.2.0",
         "rxjs": "~7.8.0",
         "tslib": "^2.3.0",
         "zone.js": "~0.12.0"
@@ -8126,6 +8127,21 @@
       "integrity": "sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==",
       "dev": true
     },
+    "node_modules/ngx-bootstrap": {
+      "version": "10.2.0",
+      "resolved": "https://registry.npmjs.org/ngx-bootstrap/-/ngx-bootstrap-10.2.0.tgz",
+      "integrity": "sha512-bn5wdvH6QQ2JGu4TgUbozdULBFMxZNPNTgO7dRiosx9FRrFvKcgxkGSgU/xoj+4kP1vgh8zwzaiDfvH/Bfb+Aw==",
+      "dependencies": {
+        "tslib": "^2.3.0"
+      },
+      "peerDependencies": {
+        "@angular/animations": "^15.0.0",
+        "@angular/common": "^15.0.0",
+        "@angular/core": "^15.0.0",
+        "@angular/forms": "^15.0.0",
+        "rxjs": "^6.5.3 || ^7.6.0"
+      }
+    },
     "node_modules/nice-napi": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/nice-napi/-/nice-napi-1.0.2.tgz",

package.json

@@ -19,6 +19,7 @@
     "@angular/platform-browser-dynamic": "^15.1.0",
     "@angular/router": "^15.1.0",
     "bootstrap": "^5.3.0-alpha1",
+    "ngx-bootstrap": "^10.2.0",
     "rxjs": "~7.8.0",
     "tslib": "^2.3.0",
     "zone.js": "~0.12.0"

src/app/activity-service.service.spec.ts

+import { TestBed } from '@angular/core/testing';
+
+import { ActivityServiceService } from './activity-service.service';
+
+describe('ActivityServiceService', () => {
+  let service: ActivityServiceService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(ActivityServiceService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

src/app/activity-service.service.ts

+import { Injectable } from '@angular/core';
+import { Activity } from './activity';
+import { ACTIVITIES } from './mock-activity';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class ActivityServiceService {
+  listactivity! : Activity[];
+
+  constructor() { }
+  get(){
+    return this.listactivity=ACTIVITIES;
+  }
+  getname(activityname : string) {
+      const activity = ACTIVITIES.find(activity => activity.name === activityname);
+            if (!activity) {
+                throw new Error('name not found!');
+            } else {
+                return activity;
+            }
+  }
+}

src/app/activity.ts

+export interface Activity {
+    type:string
+    name:string
+    date:Date
+    description:string
+    description_detail:string
+}

src/app/activity/activity.component.html

+
+<div class="card" style="width: 18rem;">
+    <div class="card-body">
+        <h5 class="card-title text-center">{{ activity.type }} : {{ activity.name}}</h5>
+        <h6 class="">Decription : {{ activity.description}}</h6>
+        <p class="card-text" style= "text-align: center">Date : {{activity.date}}</p>
+        <button class="btn btn-primary" (click)="select()">Select</button>
+    </div>
+</div>

src/app/activity/activity.component.spec.ts

+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ActivityComponent } from './activity.component';
+
+describe('ActivityComponent', () => {
+  let component: ActivityComponent;
+  let fixture: ComponentFixture<ActivityComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ ActivityComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(ActivityComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/activity/activity.component.ts

+import { Component, Input } from '@angular/core';
+import { Router } from '@angular/router';
+import { Activity } from '../activity';
+import { ActivityServiceService } from '../activity-service.service';
+
+
+@Component({
+  selector: 'app-activity',
+  templateUrl: './activity.component.html',
+  styleUrls: ['./activity.component.css']
+})
+export class ActivityComponent {
+
+  constructor(private activityservice : ActivityServiceService, private router: Router){}
+  @Input() activity!: Activity;
+  select(){
+      console.log(this.activity.name);
+      this.router.navigateByUrl(`activity/${this.activity.name}`)
+    }
+}

src/app/app-routing.module.ts

 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
+import { ActivityComponent } from './activity/activity.component';
+import { DetailActivityComponent } from './detail-activity/detail-activity.component';
+import { ListactivityComponent } from './listactivity/listactivity.component';
 import { ActivityCardsComponent } from './activity-cards/activity-cards.component';
 
+
 const routes: Routes = [
-  {path:"ActivityCards", component:ActivityCardsComponent}
+  {path:'activity', component:ListactivityComponent},
+  {path:'activity/:name', component:DetailActivityComponent},
+  {path:"ActivityCards", component:ActivityCardsComponent},
 ];
 
 @NgModule({

src/app/app.component.html

 <router-outlet></router-outlet>
+<app-change-page></app-change-page>
+
+

src/app/app.module.ts

 import { NgModule } from '@angular/core';
-
 import { BrowserModule } from '@angular/platform-browser';
-
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
+
 import { ActivityCardsComponent } from './activity-cards/activity-cards.component';
 import { ActivityContextDirective } from './activity-context.directive';
+import { ChangePageComponent } from './change-page/change-page.component';
+import { ListactivityComponent } from './listactivity/listactivity.component';
+import { ActivityComponent } from './activity/activity.component';
+import { DetailActivityComponent } from './detail-activity/detail-activity.component';
+import { StageAccordionComponent } from './stage-accordion/stage-accordion.component';
+import { StageDetailComponent } from './stage-detail/stage-detail.component';
+
 
 @NgModule({
   declarations: [
     AppComponent,
     ActivityCardsComponent,
-    ActivityContextDirective
+    ActivityContextDirective,
+    ChangePageComponent,
+    ListactivityComponent,
+    ActivityComponent,
+    DetailActivityComponent,
+    StageAccordionComponent,
+    StageDetailComponent
+
   ],
   imports: [
     BrowserModule,
-    AppRoutingModule
+    AppRoutingModule,
   ],
   providers: [],
   bootstrap: [AppComponent]

src/app/change-page/change-page.component.css

+.background{
+    display: flex;
+    flex-wrap: nowrap;
+    width: 180vw;
+}
+
+.border{
+    background-color: brown;
+    height: 100vh;
+    width: 10vw;
+    padding: 0px;
+    margin: 0px;
+    transition-property: width;
+    transition-duration: 0.3s;
+    transition-timing-function: cubic-bezier(.02,1,1,.98);
+    border: 0px !important;
+}
+.border2{
+
+    height: 100vh;
+    width: 90vw;
+    padding: 0px;
+    margin: 0px;
+    transition-property: width;
+    transition-duration: 0.3s;
+    transition-timing-function: cubic-bezier(.02,1,1,.98);
+    border: 0px;
+}
+
+.border:hover {
+    background-color: brown;
+    height: 100vh;  
+    width: 15vw;
+    padding: 0px;
+    margin: 0px;
+    transition-property: width;
+    transition-duration: 0.3s;
+    border: 0px;
+}
+.bordertest{
+    background-color:brown;
+    height: 100vh;
+    width: 90vw;
+    padding: 0px;
+    margin: 0px;
+    transition-property: width;
+    transition-duration: 0.5s;
+    transition-duration: cubic-bezier(.02,1,1,.98);
+    border: 0px;
+}
+.bordertest2{
+    height: 100vh;
+    width: 90vw;
+    margin: 0px;
+    border: 0px;
+    
+}
+.bordertest2:hover{
+    height: 100vh;
+    margin-right: 5vw;
+    padding: 0px;
+    transition-property: margin;
+    transition-duration: 0.3s;
+    border: 0px;
+}
\ No newline at end of file

src/app/change-page/change-page.component.html

+
+    <div class="background">
+    <app-stage-accordion class="border" id="border" (click)="changeclass()"></app-stage-accordion>
+    <app-activity-cards class="border2" id="border2" (click)="changeclass()"></app-activity-cards>
+    </div>

src/app/change-page/change-page.component.spec.ts

+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ChangePageComponent } from './change-page.component';
+
+describe('ChangePageComponent', () => {
+  let component: ChangePageComponent;
+  let fixture: ComponentFixture<ChangePageComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ ChangePageComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(ChangePageComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/change-page/change-page.component.ts

+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-change-page',
+  templateUrl: './change-page.component.html',
+  styleUrls: ['./change-page.component.css']
+})
+
+export class ChangePageComponent {
+  changeclass(): void {
+    var b1 = document.getElementById("border")  
+    if(b1 != null)
+    {
+      var b2 = document.getElementById("border2")
+      if(b1.matches(":hover")) {
+        if(b2 != null){
+          if(b1.className == "border"){
+            b1.className="bordertest"
+            b2.className="bordertest2"}
+          }
+      }
+      if(b2 != null){
+        if(b2.matches(":hover")) {     
+          if(b1.className == "bordertest"){
+            b1.className="border"
+            b2.className="border2"}
+          }
+      }
+    } 
+}
+}
\ No newline at end of file

src/app/detail-activity/detail-activity.component.html

+<div class="text-center">
+    <h1>{{ activity.name }}</h1>
+    <div>
+        <h5>Date : {{ activity.date }}</h5>
+        <h5>Description : {{ activity.description }}</h5>
+        <br>
+        <p>{{ activity.description_detail }}</p>
+    </div>
+</div>

src/app/detail-activity/detail-activity.component.spec.ts

+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DetailActivityComponent } from './detail-activity.component';
+
+describe('DetailActivityComponent', () => {
+  let component: DetailActivityComponent;
+  let fixture: ComponentFixture<DetailActivityComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ DetailActivityComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(DetailActivityComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});