feat(): add contact page and add menu icons

app/pages/contact/contact.html

@@ -0,0 +1,54 @@
+<ion-menu [content]="content">
+  <ion-toolbar secondary>
+    <ion-title>Vertretungsplan</ion-title>
+  </ion-toolbar>
+  <ion-toolbar secondary *ngIf="currentUser">
+    <div padding-left>
+        <ion-icon name="contact"></ion-icon>
+        <span padding-left>
+          <strong>{{ currentUser }}</strong>
+        </span>
+    </div>
+  </ion-toolbar>
+  <ion-content>
+    <ion-list>
+      <button ion-item (click)="showRepresentations()">
+        <ion-icon name="calendar"></ion-icon>
+        <span padding-left>{{ currentClass !== '*' ? 'Klasse ' + currentClass : 'Klassen' }}</span>
+      </button>
+      <button ion-item (click)="toggleMenu()">
+        <ion-icon name="contacts"></ion-icon>
+        <span padding-left>Kontakt</span>
+      </button>
+      <button ion-item (click)="logout()">
+        <ion-icon name="power"></ion-icon>
+        <span padding-left>Abmelden</span>
+      </button>
+    </ion-list>
+  </ion-content>
+</ion-menu>
+
+<ion-navbar *navbar>
+  <button (click)="toggleMenu()" royal dark menuToggle>
+    <ion-icon name="menu"></ion-icon>
+  </button>
+  <ion-title>
+    Kontakt
+  </ion-title>
+</ion-navbar>
+
+<ion-content #content>
+
+  <div padding>
+    <div padding-bottom>
+      Diese App wurde von Paul Gschwendtner und Paul Thiel programmiert.
+    </div>
+    <a href="mailto:[email protected]">
+      <button outline block>
+        <ion-icon name="mail"></ion-icon>
+        <span>E-Mail senden</span>
+      </button>
+    </a>
+  </div>
+
+</ion-content>

app/pages/contact/contact.ts

@@ -0,0 +1,49 @@
+import {Page, NavController, MenuController} from 'ionic-angular/index';
+import {SessionAccessor} from '../../services/SessionAccessor';
+import {JWTDecoder} from '../../services/JWTDecoder'
+import {LoginPage} from "../login/login";
+import {RepresentationPage} from "../representation/representation";
+
+@Page({
+  templateUrl: 'build/pages/contact/contact.html',
+  providers: [SessionAccessor, JWTDecoder]
+})
+export class ContactPage {
+
+  isMenuAnimating: boolean = false;
+  currentUser: string;
+  currentClass: string;
+
+  constructor(private nav: NavController,
+              private session: SessionAccessor,
+              private jwtDecoder: JWTDecoder,
+              private menu: MenuController) {
+
+    session.getToken().then((token) => {
+      this.currentUser = JSON.parse(jwtDecoder.decodeToken(token)).username;
+      this.currentClass = JSON.parse(jwtDecoder.decodeToken(token)).class;
+    });
+  }
+
+  showRepresentations() {
+    this.menu.close().then(() => {
+      this.nav.setRoot(RepresentationPage);
+    });
+  }
+
+  toggleMenu() {
+    if (this.isMenuAnimating) return;
+
+    this.isMenuAnimating = true;
+    this.menu.toggle().then(() => {
+      this.isMenuAnimating = false;
+    });
+  }
+
+  logout() {
+    this.session.setToken(null);
+    this.menu.close().then(() => {
+      this.nav.setRoot(LoginPage);
+    });
+  }
+}

app/pages/representation/representation.html

@@ -1,17 +1,33 @@
 <ion-menu [content]="content">
-  <ion-toolbar primary>
+  <ion-toolbar secondary>
     <ion-title>Vertretungsplan</ion-title>
   </ion-toolbar>
+  <ion-toolbar secondary *ngIf="currentUser">
+    <div padding-left>
+        <ion-icon name="contact"></ion-icon>
+        <span padding-left>
+          <strong>{{ currentUser }}</strong>
+        </span>
+    </div>
+  </ion-toolbar>
   <ion-content>
     <ion-list>
+      <button ion-item (click)="showRepresentations()">
+        <ion-icon name="calendar"></ion-icon>
+        <span padding-left>{{ currentClass !== '*' ? 'Klasse ' + currentClass : 'Klassen' }}</span>
+      </button>
+      <button ion-item (click)="showImpressum()">
+        <ion-icon name="contacts"></ion-icon>
+        <span padding-left>Kontakt</span>
+      </button>
       <button ion-item (click)="logout()">
-        Abmelden
+        <ion-icon name="power"></ion-icon>
+        <span padding-left>Abmelden</span>
       </button>
     </ion-list>
   </ion-content>
 </ion-menu>
 
-
 <ion-navbar *navbar>
   <button (click)="toggleMenu()" royal dark menuToggle>
     <ion-icon name="menu"></ion-icon>
@@ -24,7 +40,6 @@
 <ion-content #content>
 
   <div padding>
-
     <ion-segment [(ngModel)]="viewDay">
       <ion-segment-button value="today" >
         {{ todayDate | date: 'dd/MM/y'}}
@@ -36,17 +51,14 @@
   </div>
 
   <div [ngSwitch]="viewDay">
-
     <div *ngFor="#set of [{ data: todayPromise, key: 'today'}, { data: tomorrowPromise, key: 'tomorrow'}]">
       <ion-list *ngSwitchWhen="set.key">
         <div *ngFor="#item of set.data | async | asyncDefault: [{notFound: true}]">
-
           <div *ngIf="item.notFound">
             <ion-item>
               Es sind keine Vertretungen vorhanden.
             </ion-item>
           </div>
-
           <div *ngIf="!item.notFound">
             <button ion-item (click)="showMore(item)">
               <ion-icon item-right>
@@ -57,7 +69,6 @@ <h2>{{ item.type | toTitle }}</h2>
             </button>
           </div>
         </div>
-
       </ion-list>
     </div>
   </div>

app/pages/representation/representation.ts

@@ -1,20 +1,24 @@
 import {Page, NavController, Modal, MenuController} from "ionic-angular/index";
 import {BackendConnector} from "../../services/BackendConnector";
 import {SessionAccessor} from "../../services/SessionAccessor";
+import {JWTDecoder} from '../../services/JWTDecoder';
 import {DateUtil} from "../../services/DateUtil";
 import {ToTitlePipe} from "../../pipes/ToTitlePipe";
 import {ToIconPipe} from "../../pipes/ToIconPipe";
 import {AsyncDefaultPipe} from "../../pipes/AsyncDefaultPipe";
 import {MoreDetailsModal} from "../../modals/moredetails";
 import {LoginPage} from "../login/login";
+import {ContactPage} from '../contact/contact';
 
 @Page({
   templateUrl: 'build/pages/representation/representation.html',
-  providers: [BackendConnector, SessionAccessor, DateUtil],
+  providers: [BackendConnector, SessionAccessor, DateUtil, JWTDecoder],
   pipes: [ToTitlePipe, ToIconPipe, AsyncDefaultPipe]
 })
 export class RepresentationPage {
 
+  currentUser: string;
+  currentClass: string;
   viewDay: string = 'today';
   todayDate: Date;
   tomorrowDate: Date;
@@ -27,13 +31,15 @@ export class RepresentationPage {
               private nav: NavController,
               private session: SessionAccessor,
               private dateUtil: DateUtil,
+              private jwtDecoder: JWTDecoder,
               private menu: MenuController) {
 
-
     this.todayDate = dateUtil.getTodayDate();
     this.tomorrowDate = dateUtil.getTomorrowDate();
 
     session.getToken().then((token) => {
+      this.currentUser = JSON.parse(jwtDecoder.decodeToken(token)).username;
+      this.currentClass = JSON.parse(jwtDecoder.decodeToken(token)).class;
       this.todayPromise = backend.sendRepresentationRequest(this.todayDate, token);
       this.tomorrowPromise = backend.sendRepresentationRequest(this.tomorrowDate, token);
     });
@@ -60,4 +66,15 @@ export class RepresentationPage {
       this.nav.setRoot(LoginPage);
     });
   }
+
+  showRepresentations() {
+    //Add refreshing representations
+    this.toggleMenu();
+  }
+
+  showImpressum() {
+    this.menu.close().then(() => {
+      this.nav.setRoot(ContactPage);
+    });
+  }
 }

app/services/JWTDecoder.ts

@@ -0,0 +1,9 @@
+import {Injectable} from "angular2/core";
+
+@Injectable()
+export class JWTDecoder {
+
+  decodeToken(token: string): string {
+    return window.atob(token.split('.')[1]);
+  }
+}

app/services/SessionAccessor.ts

@@ -31,5 +31,4 @@ export class SessionAccessor {
     this.localStorage.set('VP_TOKEN', token);
     this.sqlStorage.set('VP_TOKEN', token);
   }
-
 }

config.xml

@@ -5,6 +5,7 @@
   <author email="[email protected]" href="http://github.com/DevVersion/">Paul Gschwendtner</author>
   <content src="index.html"/>
   <access origin="*"/>
+  <access origin="mailto:*" launch-external="true"/>
   <allow-intent href="http://*/*"/>
   <allow-intent href="https://*/*"/>
   <allow-intent href="tel:*"/>