patch(schedule): add new component schedule calendar

Author: michalspiegel

src/app/app-routing.module.ts

@@ -1,6 +1,7 @@
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
 import { PageWelcomeComponent } from './components/root/page-welcome/page-welcome.component';
+import { PageScheduleComponent } from './components/root/page-schedule/page-schedule.component';
 import { PageNotFoundComponent } from './components/root/page-not-found/page-not-found.component';
 import { PageForbiddenComponent } from './components/root/page-forbidden/page-forbidden.component';
 import { ROUTES } from '../routes/routes';
@@ -13,6 +14,7 @@ const routes: Routes = [
   { path: ROUTES.privacyPolicy, loadChildren: () => import('./components/privacy-policy/privacy-policy.module').then((m) => m.PrivacyPolicyModule) },
   { path: ROUTES.news, loadChildren: () => import('./components/news/news.module').then((m) => m.NewsModule)},
   { path: ROUTES.about, loadChildren: () => import('./components/about/about.module').then((m) => m.AboutModule)},
+  { path: ROUTES.schedule,  component: PageScheduleComponent, pathMatch: 'full'},
   { path: ROUTES.results, loadChildren: () => import('./components/results/results.module').then((m) => m.ResultsModule)},
   { path: ROUTES.tasks._, loadChildren: () => import('./components/tasks/tasks.module').then((m) => m.TasksModule)},
   { path: ROUTES.discussion, loadChildren: () => import('./components/discussion/discussion.module').then((m) => m.DiscussionModule)},

src/app/components/root/navbar/navbar.component.html

@@ -19,6 +19,9 @@
         <a class="nav-btn" [routerLink]="['/', routes.routes.news]" routerLinkActive="active" (click)="hideFullMenu($event)">
           {{'root.navbar.category.news' | translate}}
         </a>
+        <a class="nav-btn" [routerLink]="['/', routes.routes.schedule]" routerLinkActive="active" (click)="hideFullMenu($event)">
+          {{'root.navbar.category.schedule' | translate}}
+        </a>
         <a class="nav-btn" [routerLink]="['/', routes.routes.discussion]" routerLinkActive="active" (click)="hideFullMenu($event)">
           {{'root.navbar.category.discussion' | translate}}
         </a>

src/app/components/root/page-schedule/page-schedule.component.html

@@ -0,0 +1,17 @@
+<div class="schedule">
+  <h1 class="name">
+    <span>
+      {{'schedule.title' | translate}}
+    </span>
+  </h1>
+<p>
+Od 23. září do 26. září 2024 se na Fakultě informatiky Masarykovy univerzity uskuteční <strong>série workshopů a aktivit, které mají za úkol pomoct novým studentům FI lépe se začlenit</strong>. Některé aktivity se budou konat vícekrát v různých místnostech a v různých časech, aby se jich mohlo zúčastnit co nejvíce studentů. 
+</p>
+<p>
+Níže uvedený kalendář aktivit je k dispozici také jako <strong>veřejný Google kalendář </strong>. Můžete si jej tedy přidat do svých vlastních kalendářů a zařízení, abyste tak nic nezmeškali.
+<a href="https://calendar.google.com/calendar/u/2?cid=Y18xYzcwMzg0ODM3MmFlZTFiMjU4ZTQxNWRiOGExMDEwNjFjNzNlZTQ5NzM0NmVhMzVhZGZiODM2YzYzZWQ5MWE0QGdyb3VwLmNhbGVuZGFyLmdvb2dsZS5jb20"> Kliknutím na tento odkaz získáte přístup ke kalendáři.</a> 
+</p>
+
+<iframe src="https://calendar.google.com/calendar/embed?src=c_1c703848372aee1b258e415db8a101061c73ee497346ea35adfb836c63ed91a4%40group.calendar.google.com&ctz=Europe%2FPrague&color=%238E24AA&dates=20240923/20240926&height=600&wkst=2&bgcolor=%23f2d45c&showCalendars=0&mode=WEEK&showTabs=0&showPrint=0&title=Harmonogram%20aktivit&showDate=0&showTitle=0&showNav=0&showTz=0&" style="border-width:0" width="60%" height="600" frameborder="0" scrolling="no"></iframe>
+
+</div>

src/app/components/root/page-schedule/page-schedule.component.scss

@@ -0,0 +1,38 @@
+@import "src/app/styles/vars";
+@import "src/app/styles/mixins";
+
+:host {
+  .schedule {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    overflow: hidden;
+    height: auto;
+    padding-top: $ksi-padding;
+    padding-bottom: $ksi-padding;
+
+    background-repeat: no-repeat;
+    background-position: center;
+    background-size: cover;
+
+    justify-content: center;
+
+    @media screen and (max-width: $ksi-max-mobile-width) {
+      background-image: none;
+      height: auto;
+      padding-bottom: $ksi-margin;
+    }
+  }
+  .schedule h1 {
+      width: 60%;
+  }
+  .schedule p {
+      width: 60%;
+  }
+  .schedule ifram {
+      width: 60%;
+  }
+}
+  

src/app/components/root/page-schedule/page-schedule.component.spec.ts

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

src/app/components/root/page-schedule/page-schedule.component.ts

@@ -0,0 +1,28 @@
+import { Component, OnInit, ChangeDetectionStrategy, ChangeDetectorRef, ElementRef } from '@angular/core';
+import { BackendService, KsiTitleService, RoutesService, WindowService, YearsService } from '../../../services';
+
+@Component({
+  selector: 'ksi-page-schedule',
+  templateUrl: './page-schedule.component.html',
+  styleUrls: ['./page-schedule.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class PageScheduleComponent implements OnInit {
+
+  aboutInfoSlide = 0;
+  aboutInfoShown = false;
+
+  constructor(
+    private title: KsiTitleService,
+    public years: YearsService,
+    private backend: BackendService,
+    private cd: ChangeDetectorRef,
+    private elRef: ElementRef,
+    public routes: RoutesService
+  ) {
+  }
+
+  ngOnInit(): void {
+    this.title.subtitle = null;
+  }
+}

src/app/components/root/root.module.ts

@@ -5,6 +5,7 @@ import { ModalChangelogComponent } from '../shared/modal-changelog/modal-changel
 import { NavbarComponent } from './navbar/navbar.component';
 import { PageNotFoundComponent } from './page-not-found/page-not-found.component';
 import { PageWelcomeComponent } from './page-welcome/page-welcome.component';
+import { PageScheduleComponent } from './page-schedule/page-schedule.component';
 import { SharedModule } from '../shared/shared.module';
 import { TranslateModule } from '@ngx-translate/core';
 import { CarouselModule } from 'ngx-bootstrap/carousel';
@@ -14,14 +15,14 @@ import { RouterModule } from '@angular/router';
 import { NgbDropdownModule } from '@ng-bootstrap/ng-bootstrap';
 import { PageForbiddenComponent } from './page-forbidden/page-forbidden.component';
 
-
 @NgModule({
   declarations: [
     FooterComponent,
     ModalChangelogComponent,
     NavbarComponent,
     PageNotFoundComponent,
     PageWelcomeComponent,
+    PageScheduleComponent,
     PageForbiddenComponent
   ],
   exports: [

src/app/models/routes.ts

@@ -2,6 +2,7 @@ export interface IRoutes {
   news: string;
   about: string;
   results: string;
+  schedule: string;
   tasks: {
     _: string,
     solution: string;

src/assets/i18n/cs.json

@@ -29,7 +29,8 @@
         "about": "O Naskoč",
         "news": "Novinky",
         "discussion": "Diskuze",
-        "admin": "Admin"
+        "admin": "Admin",
+        "schedule": "Harmonogram"
       }
     },
     "not-found": {
@@ -568,5 +569,8 @@
   },
   "privacy-policy": {
     "title": "Zásady zpracování osobních údajů"
+  },
+  "schedule": {
+    "title": "Harmonogram aktivit"
   }
 }

src/routes/routes.cs.ts

@@ -5,6 +5,7 @@ export const ROUTES: IRoutes = {
   news: 'novinky',
   about: 'o-naskoc',
   results: 'vysledky',
+  schedule: 'harmonogram',
   tasks: {
     _: 'ulohy',
     solution: 'reseni',