Přidání návodu k odebírání kalendáře akcí

web/src/app/components/calendar-sync-manual/calendar-sync-manual.component.html

@@ -0,0 +1,44 @@
+<div class="modal-header">
+  <h4 class="modal-title pull-left">Jak nastavit odběr kalendáře přes ical?</h4>
+  <button type="button" class="close pull-right" aria-label="Close" (click)="bsModalRef.hide()">
+    <span aria-hidden="true">&times;</span>
+  </button>
+</div>
+<div class="modal-body">
+    <div class="col-12 text-center">
+      <h5>Stačí postupovat podle návodu:</h5>
+    </div>
+    <div class="col-12" style="text-align: justify">
+      <p style="color: darkgray;"><i>Postup v různých aplikacích se může trochu lišit, ale tohle je ten asi nejobvyklejší. Může se ale stát, že bude potřeba ještě něco: třeba u Google Calendar se tento postup musí provést <a href="https://calendar.google.com">v prohlížeči</a> a pak přidaný kalendář povolit v aplikaci, některé menší aplikace potřebují ještě aplikaci třetí strany, která tohle umožní…</i></p>
+    </div>
+    <div class="col-12 pull-left">
+      <ol>
+        <li>Otevři svou kalendářovou aplikaci (případně mailového klienta, pokud používáš kalendář v něm).</li>
+        <li>Najdi tlačítko pro přidání kalendáře a klikni na něj.</li>
+        <li>Pokud už se ti nenabízí možnost vložit odkaz, zkus najít něco jako „ze sítě“/„z internetu“…</li>
+        <li><b>Zkopíruj tento odkaz do políčka pro vložení url adresy: <a href="https://interni.bosan.cz/api/program/ical">https://interni.bosan.cz/api/program/ical</a>.</b></li>
+        <li>Pokud to jde: pojmenuj si ho (třeba „Šánovské akce“), přebarvi si ho, nastav „jen pro čtení“ a interval synchronizace (po jaké době se změny v programu promítnou do tvého kalendáře).</li>
+        <li>Potvrď přidání kalendáře.</li>
+        <li>Jestli se ti ho předtím nepovedlo přejmenovat, můžeš najít nastavení vlastností tohoto kalendáře a upravit si ho dodatečně.</li>
+        <li>Pokud už nevidíš akce v kalendáři, zkus zmáčknout „Synchronizovat“ nebo tento kalenrář povolit/zobrazit.</li>
+      </ol>
+    </div>
+
+    <div class="col-12" style="color: dimgray; text-align: justify;">
+      <p>Hotovo. Teď máš náš program přímo ve svém kalendáři. Když ti bude překážet, můžeš si ho skrýt, kdyby sis chtěl označit akce, na které jedeš, můžeš si je zduplikovat do svého osobního kalendáře… jak je libo.:-)</p>
+      <hr>
+    </div>
+    <div class="col-12" style="color: dimgray; text-align: center;">
+      <h5>Jestli máš problém s nastavením, možná ti pomůže se podívat na pár příkladů:</h5>
+    </div>
+    <div class="col-12" style="color: dimgray; text-align: justify;">
+      <div style="margin-bottom: 0.3em">E-mailový klient pro počítač <b>Microsoft Outlook</b> umožňuje i přidání kalendáře. A není to vůbec složité.</div><p><i>Otevřeme si kartu s kalendářem, dáme „Otevřít kalendář“ <span style="color: red;">[1]</span>, z internetu <span style="color: red;">[2]</span> a vložíme náš odkaz do políčka, co se nám objeví <span style="color: red;">[3]</span>. Pokud si chceme právě vytvořený kalendář třeba přejmenovat, dáme „Upravit“, jinak prostě potvrdíme <span style="color: red;">[4]</span>. A máme to.</i></p>
+      <img src="../assets/img/Ical_Manual/Ical_Manual_Outlook.png" width="100%">
+      <br><hr>
+      <div style="margin-bottom: 0.3em"><b>Google Calendar</b> je potřeba nastavit nejdříve ve webovém rozhraní.</div><p><i>Otevřeme si tedy Google kalendář v prohlížeči, u kategorie „jiné kalendáře“ klikneme na „+“ (přidat další kalendáře) <span style="color: red;">[1]</span>, „Pomocí adresy URL“ <span style="color: red;" >[2]</span>, do připraveného políčka zkopírujeme náš odkaz <span style="color: red;">[3]</span> a potvrdíme <span style="color: red;">[4]</span>. Teď se můžeme přesunout do mobilní aplikace, kde nám zbývá ještě nově přidaný kalendář „zapnout“: Jdeme do nastavení <span style="color: red;">[5]</span>, najdeme si náš kalendář pod svým účtem <span style="color: red;">[6]</span> a zapneme synchronizaci <span style="color: red;">[7]</span>. Kdybysme chtěli, můžem si ho ještě přebarvit, přejmenovat… A máme hotovo.</i></p>
+      <img src="../assets/img/Ical_Manual/Ical_Manual_Google.png" width="100%">
+      <br><hr>
+      <div style="margin-bottom: 0.3em">Některé aplikace potřebují dodat nějaké rozšíření, nebo jinou aplikaci. Jako příklad můžeme uvést třeba oblíbenou aplikaci pro android <b>Simple Calendar</b>.</div><p><i>Začneme tím, že si najdeme nějakou aplikaci pro synchronizaci přes ical a stáhneme si jí <span style="color: red;">[1]</span>. Otevřeme jí a jdeme na to. Tahle konkrétní si říká o přístup ke kalendáři (což není nic zvláštního), tak jí ho udělíme <span style="color: red;">[2]</span>. No a přidáme ten kalendář s akcemi, takže „+“ <span style="color: red;">[3]</span>, vložíme odkaz <span style="color: red;">[4]</span> (autentizaci nevyžaduje, takže tuto možnost nezapínáme), jdeme dál <span style="color: red;">[5]</span>, můžem si ho případně přejmenovat a přebarvit a potvrdíme <span style="color: red;">[6]</span>. Přesuneme se do samotného Simple Calendar a sice do jeho nastavení. Najdeme tam možnost CALDav sync (to je sice zase jiný způsob synchronizace, ale tady to hází do jednoho pytle) a povolíme jí <span style="color: red;">[7]</span>. Nabídne nám to nějaké kalendáře, co máme v telefonu a díky druhé aplikaci je tam i ten, co chceme. Zaškrtneme ho a potvrdíme <span style="color: red;">[8]</span>. A je to.</i></p>
+      <img src="../assets/img/Ical_Manual/Ical_Manual_SimpleApp.png" width="100%">
+    </div>
+</div>

web/src/app/components/calendar-sync-manual/calendar-sync-manual.component.scss

@@ -0,0 +1,26 @@
+@import "styles/variables";
+
+:host {
+  display: flex;
+  width: 100%;
+  height: 100%;
+  flex-direction: column;
+}
+
+button {
+  position: relative;
+  z-index: 100;
+  top: 0;
+  right: 0;
+  opacity: 1;
+  padding: 1rem;
+  span {
+    color: #000000;
+    text-shadow: none;
+  }
+}
+.modal-body {
+  height: 100%;
+  padding: 10px;
+  border: 10px solid #fff;
+}

web/src/app/components/calendar-sync-manual/calendar-sync-manual.component.ts

@@ -0,0 +1,22 @@
+import { Component, OnInit } from '@angular/core';
+import { BsModalRef } from 'ngx-bootstrap/modal';
+
+@Component({
+  selector: 'calendar-sync-manual',
+  templateUrl: './calendar-sync-manual.component.html',
+  styleUrls: ['./calendar-sync-manual.component.scss']
+})
+export class CalendarSyncManualComponent implements OnInit {
+
+  title: string;
+  closeBtnName: string;
+  list: any[] = [];
+
+  constructor(
+    public bsModalRef: BsModalRef
+  ) { }
+
+  ngOnInit(): void {
+  }
+
+}

web/src/app/views/events-view/events-view.component.html

@@ -9,6 +9,8 @@ <h1>Program činnosti</h1>
           Kam se s námi vypravíš v příštích týdnech?
           <br>
           Info o <a class="scrollDown" [ngxScrollTo]="bosan">schůzkách</a>, <a class="scrollDown" [ngxScrollTo]="bazen">bazénu</a>, <a class="scrollDown" [ngxScrollTo]="troja">kanále</a> a <a class="scrollDown" [ngxScrollTo]="treninky">trénincích na K</a> najdeš pod programem.
+          <br>
+          Chceš, aby ti už žádná akce neutekla? Nastav si <a class="scrollDown" (click)="OpenManualForIcal()">odběr akcí</a> přímo do svého kalendáře.
         </p>
       </div>
     </div>

web/src/app/views/events-view/events-view.component.ts

@@ -4,6 +4,9 @@ import { TitleService } from "app/services/title.service";
 import { ConfigService } from "app/services/config.service";
 import { Observable } from "rxjs";
 import { map } from "rxjs/operators";
+import { BsModalService, BsModalRef } from 'ngx-bootstrap/modal';
+
+import { CalendarSyncManualComponent } from "app/components/calendar-sync-manual/calendar-sync-manual.component";
 
 @Component({
   selector: 'events-view',
@@ -15,9 +18,15 @@ export class EventsViewComponent implements OnInit {
   public canalFormUrl: Observable<string> = this.configService.config.pipe(map(config => config.general.canalFormUrl));
   public canalAttendeesUrl: Observable<string> = this.configService.config.pipe(map(config => config.general.canalAttendeesUrl));
 
-  constructor(private titleService: TitleService, private configService: ConfigService) { }
+  IcalManualRef:BsModalRef;
+
+  constructor(private titleService: TitleService, private configService: ConfigService, private IcalManualService: BsModalService) { }
 
   ngOnInit() {
     this.titleService.setPageTitle("Program");
   }
-}
+
+  OpenManualForIcal(){
+    this.IcalManualRef = this.IcalManualService.show(CalendarSyncManualComponent, Object.assign({}, { class: 'gray modal-lg' }));
+  }
+}