87 src/pages/_modals/kudos-modal/kudos-modal.scss
View file
@@ -0,0 +1,87 @@
page-kudos-modal {

.no-border-radius-bottom{
border-bottom-left-radius: 0!important;
border-bottom-right-radius: 0!important;
}

.margin-bottom {
margin-bottom: 16px;
}

.endorsement{
margin-top: 7px;
margin-left: 7px;
padding: 0 5px;
}

.kudos-form {
padding: 5px;
margin-top: 10px;
border-radius: 4px;
background: #f9f9f9;
.form-title {
margin-top: 7px;
margin-left: 7px;
padding: 0 5px;
color: #555459;
}
}

.input-holder {
margin: 7px;
padding: 5px;
textarea {
border-radius: 3px;
padding: 9px;
width: 100%;
border: 1px solid #fff;
resize: none;
&:focus {
border-color: #aeaeae;
}
}
input {
border-radius: 3px;
padding: 9px;
width: 100%;
border: 1px solid #fff;
&:focus {
border-color: #aeaeae;
}
}
.error{
margin-left: 7px;
padding: 3px 0px 3px 5px;
font-size: 12px;
color: #f53d3d;
}
}

.email-predicates-holder-wrapper {
position: relative;
width: 100%;
.email-predicates-holder {
position: absolute;
width: inherit;
background: #ffffff;
.predicated-item {
padding: 5px;
background: #ffffff;
border: 1px solid #aeaeae;
&:nth-child(n+1) {
border-top: 0;
}
&:last-child {
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
}
.predicated-user-email {
font-size: 12px;
padding-top: 5px;
}
}
}
}

}
126 src/pages/_modals/kudos-modal/kudos-modal.ts
View file
@@ -0,0 +1,126 @@
import {Component} from '@angular/core';
import {NavController, ViewController, ToastController, NavParams, ActionSheetController} from 'ionic-angular';
import {KudosForm} from "../../../app/forms/kudos.form";
import {KudosService} from "../../../app/services/kudos.service";
import {HomeService} from "../../../app/services/home.service";
import {Error} from "../../../app/forms/error";

@Component({
selector: 'page-kudos-modal',
templateUrl: 'kudos-modal.html'
})
export class KudosModalPage {

showMessageCharactersCounter = false;
emailInputFocused = false;
showPredicates = false;
predicatedEmails = [];
kudosForm: KudosForm = new KudosForm("", null, "");
user: any = {};
error: Error;

selectedEndorsement: string;

constructor(public navCtrl: NavController, params: NavParams, public viewController: ViewController, public kudosService: KudosService, public toastCtrl: ToastController, public homeService: HomeService, public actionSheetCtrl: ActionSheetController) {
this.user = params.get('user');
}

ionViewDidLoad() {

}

sendKudos() {
this.error = this.kudosForm.validate(this.user.weeklyKudos);

if (this.error.field == "") {
this.kudosService.giveKudos(this.kudosForm.receiverEmail, this.kudosForm.amount, this.kudosForm.message).subscribe(
result => {
this.presentToast("Kudos sent to " + result.receiverFullName);
this.viewController.dismiss(this.kudosForm.amount);
this.kudosForm = new KudosForm("", null, "");
}
);
}
}

loadPredicates(name) {
this.homeService.getEmailPredicates(name).subscribe(
emails => {
this.predicatedEmails = emails;
}
)
}

selectPredicate(email) {
this.kudosForm.receiverEmail = email;
this.showPredicates = false;
}

presentToast(message: string) {
this.toastCtrl.create({
message: message,
duration: 3000
}).present();
}

presentActionSheet() {
let actionSheet = this.actionSheetCtrl.create({
title: 'Modify your album',
buttons: [
this.createActionSheetButton("Nice"),
this.createActionSheetButton("Carry"),
this.createActionSheetButton("Open"),
this.createActionSheetButton("Cancel")
]
});

actionSheet.present();
}

onEmailInputChange(email) {
this.showPredicates = email.length > 2;
if (this.showPredicates) {
this.loadPredicates(email);
}
}

onEmailFocus() {
this.emailInputFocused = true;
}

onEmailBlur() {
setTimeout(() => {
this.emailInputFocused = false
}, 30)

}

onMessageFocus() {
this.showMessageCharactersCounter = true;
}

onMessageBlur() {
this.showMessageCharactersCounter = false;
}

dismiss() {
this.viewController.dismiss(null);
}

createActionSheetButton(title) {
if (title == "Cancel") {
return {
text: title,
handler: () => {}
}
} else {
return {
text: title,
handler: () => {
this.selectedEndorsement = title;
}
}
}
}

}
49 src/pages/_modals/user-modal/user-modal.html
View file
@@ -0,0 +1,49 @@
<ion-header>
<ion-toolbar>
<ion-title>
<ion-title text-center>{{userProfile.firstName}} Profile</ion-title>
</ion-title>
<ion-buttons left>
<button ion-button (click)="dismiss()">
<span color="primary" showWhen="ios">Close</span>
<ion-icon name="md-close" showWhen="android,windows"></ion-icon>
</button>
</ion-buttons>
</ion-toolbar>
</ion-header>

<ion-content padding>

<div *ngIf="userProfile">

<div text-center>
<kudos-user-icon fullName="{{getUserFullName()}}" size="2"></kudos-user-icon>
<div>{{userProfile.firstName}} {{userProfile.lastName}}</div>
<span>Total Kudos <ion-badge>{{userProfile.totalKudos}}</ion-badge></span>
<div class="level">
<div class="title">{{userProfile.level}}</div>
<div class="subtitle">Level</div>
</div>
</div>

<ion-grid>
<ion-row>
<ion-col width-33>
<kudos-user-icon fullName="{{getUserFullName()}}" size="2"></kudos-user-icon>
</ion-col>
<ion-col width-67>
<span>{{userProfile.firstName}} {{userProfile.lastName}}</span>
<div>
<span>Total Kudos <ion-badge>{{userProfile.totalKudos}}</ion-badge></span>
<div class="level">
<div class="title">{{userProfile.level}}</div>
<div class="subtitle">Level</div>
</div>
</div>
</ion-col>
</ion-row>
</ion-grid>


</div>
</ion-content>
3 src/pages/_modals/user-modal/user-modal.scss
View file
@@ -0,0 +1,3 @@
page-user-modal {

}
44 src/pages/_modals/user-modal/user-modal.ts
View file
@@ -0,0 +1,44 @@
import { Component } from '@angular/core';
import {NavController, NavParams, ViewController} from 'ionic-angular';
import {HomeService} from "../../../app/services/home.service";

/*
Generated class for the UserModal page.
See http://ionicframework.com/docs/v2/components/#navigation for more info on
Ionic pages and navigation.
*/
@Component({
selector: 'page-user-modal',
templateUrl: 'user-modal.html'
})
export class UserModalPage {

userId: string;
userProfile: any = {};

constructor(public navCtrl: NavController, public params: NavParams, public viewController: ViewController, public homeService: HomeService) {
this.userId = params.get("userId");
}

ionViewDidLoad() {
this.loadUserProfile(this.userId);
}

loadUserProfile(id){
this.homeService.userProfile(id).subscribe(
profile => this.userProfile = profile,
error => console.log(error)
)
}

getUserFullName(){
return this.userProfile.firstName + ' ' + this.userProfile.lastName;
}


dismiss() {
this.viewController.dismiss(null);
}

}
19 src/pages/about/about.html
View file

This file was deleted.

3 src/pages/about/about.scss
View file

This file was deleted.

25 src/pages/history/history.html
View file
@@ -0,0 +1,25 @@
<ion-header>
<ion-navbar>
<ion-title>
History
</ion-title>
</ion-navbar>
</ion-header>

<ion-content>
<ion-card *ngFor="let item of kudosHistoryList">
<ion-card-content>
<a href="javascript:"
(click)="openUserModal(item.senderId)">{{item.senderFullName}}</a> sent
<ion-badge>{{item.amount}}</ion-badge>
<span> kudos </span> to
<a href="javascript:"
(click)="openUserModal(item.receiverId)">{{item.receiverFullName}}</a>
<span class="date">{{item.date | date}}</span>
<div class="message">
<ion-icon name="mail"></ion-icon>
{{item.message}}
</div>
</ion-card-content>
</ion-card>
</ion-content>
24 src/pages/history/history.scss
View file
@@ -0,0 +1,24 @@
page-about {

a{
text-decoration: none;
}

ion-card {
background: #ffffff;
}

.date{
font-style: italic;
font-size: 12px;
color: #7f7f7f;
}

.transaction-item {
padding: 5px;
margin: 5px;
border-radius: 5px;
border: 1px solid #aeaeae;
}

}
13 src/pages/about/about.ts → src/pages/history/history.ts
View file
@@ -1,19 +1,20 @@
import {Component} from '@angular/core';

import {NavController} from 'ionic-angular';
import {NavController, ModalController} from 'ionic-angular';
import {KudosService} from "../../app/services/kudos.service";
import {KudosResponse} from "../../app/model/response/kudos.model";
import {UserModalPage} from "../_modals/user-modal/user-modal";

@Component({
selector: 'page-about',
templateUrl: 'about.html',
templateUrl: 'history.html',
providers: [KudosService]
})
export class AboutPage {
export class HistoryPage {

kudosHistoryList: Array<KudosResponse>;

constructor(public navCtrl: NavController, private kudosService: KudosService) {
constructor(public navCtrl: NavController, private kudosService: KudosService, public modalCtrl: ModalController) {
this.getKudosHistory(0, 10);
}

@@ -23,6 +24,8 @@ export class AboutPage {
);
}


openUserModal(id) {
this.modalCtrl.create(UserModalPage, {userId: id}).present();
}

}
74 src/pages/home/home.html
View file
@@ -1,42 +1,52 @@
<ion-header>
<ion-navbar>
<ion-title>Hello Home</ion-title>
<ion-title>Home</ion-title>
</ion-navbar>
</ion-header>

<ion-content padding>

<h2 text-center>{{user?.firstName}} {{user?.lastName}}</h2>

<ion-card>

<ion-item>
<ion-icon name="happy" item-left></ion-icon>
Total Kudos
<ion-badge item-right>{{user?.totalKudos}}</ion-badge>
</ion-item>

<ion-item>
<ion-icon name="nutrition" item-left></ion-icon>
Weekly Kudos
<ion-badge item-right>{{user?.weeklyKudos}}</ion-badge>
</ion-item>

</ion-card>

<div padding>
<button ion-button type="button">Give</button>
<button ion-button type="button">Challenge</button>
</div>

<p>
This starter project comes with simple tabs-based layout for apps
that are going to primarily use a Tabbed UI.
</p>
<p>
Take a look at the <code>src/pages/</code> directory to add or change tabs,
update any existing page or create new pages.
</p>
<h5 text-center>Hello {{user?.firstName}}</h5>

<ion-grid *ngIf="user">
<ion-row>
<ion-col width-20>
<div class="level" text-center>
<div class="title">{{user.level}}</div>
<div class="subtitle">Level</div>
</div>
</ion-col>
<ion-col width-80>
<div class="progress-bar blue stripes">
<span [style.width]="experiencePointsPercentage + '%'">
</span>
</div>
<div class="experience-counter" text-center>
{{user.experiencePoints}} / {{user.experiencePointsToLevelUp}} xp
</div>
</ion-col>
</ion-row>
</ion-grid>

<ion-grid text-center>
<ion-row>
<ion-col width-50>
<span>Total Kudos</span>
<ion-badge item-right>{{user?.totalKudos}}</ion-badge>
</ion-col>
<ion-col width-50>
<span>Weekly Kudos</span>
<ion-badge item-right>{{user?.weeklyKudos}}</ion-badge>
</ion-col>
</ion-row>
</ion-grid>

<div text-center padding>
<button ion-button round outline
(click)="openKudosModal()"
type="button">Give Kudos
</button>
</div>

</ion-content>

61 src/pages/home/home.scss
View file
@@ -1,3 +1,64 @@
page-home {

$body_bg_color: #f9f9f9;
$text_primary_color: #555459;

$color-grey-borders: #c0c0c0;
$color-grey-borders-light: #ddd;
$color-grey: #777;
$color-grey-dark: #222;
$color-white: #ffffff;
$color-clouds: #ECF0F1;

.progress-bar {
background-color: #f5f5f5;
height: 20px;
padding: 3px;
width: 100%;
border-radius: 5px;
span {
display: inline-block;
height: 100%;
border-radius: 3px;
transition: width 0.7s ease-in-out;
}
}

.experience-counter {
margin-top: 5px;
font-size: 12px;
}

.blue span {
background-color: #1abc9c;
}

.orange span {
background-color: #fecf23;
background-image: linear-gradient(top, #fecf23, #fd9215);
}

.green span {
background-color: #a5df41;
background-image: linear-gradient(top, #a5df41, #4ca916);
}

.stripes span {
background-size: 30px 30px;
background-image: linear-gradient(135deg, rgba(255, 255, 255, .15) 25%, transparent 25%,
transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%,
transparent 75%, transparent);

//animation: animate-stripes 3s linear infinite;
}

@keyframes animate-stripes {
0% {
background-position: 0 0;
}
100% {
background-position: 60px 0;
}
}

}
56 src/pages/home/home.ts
View file
@@ -1,29 +1,71 @@
import { Component } from '@angular/core';
import {Component} from '@angular/core';

import { NavController } from 'ionic-angular';
import {NavController, ToastController, ModalController} from 'ionic-angular';
import {HomeService} from "../../app/services/home.service";
import {AuthenticationService} from "../../app/services/authentication.service";
import {KudosForm} from "../../app/forms/kudos.form";
import {KudosService} from "../../app/services/kudos.service";
import {KudosModalPage} from "../_modals/kudos-modal/kudos-modal";

@Component({
selector: 'page-home',
templateUrl: 'home.html'
templateUrl: 'home.html',
})
export class HomePage {

user = {};
user: any = {};

constructor(public navCtrl: NavController, private homeService: HomeService, private authService: AuthenticationService) {
experiencePointsPercentage = 0;

showMessageCharactersCounter = false;

constructor(public navCtrl: NavController, private homeService: HomeService, private authService: AuthenticationService, public modalCtrl: ModalController) {

}

ionViewDidLoad() {
this.getUserInformation();
}

getUserInformation(){
getUserInformation() {
this.homeService.home().subscribe(
user => this.user = user
user => {
this.user = user;
this.calculateExperiencePointsPercentage(user.experiencePoints, user.experiencePointsToLevelUp, user.previousLevelExperiencePoints);
}
)
}

calculateExperiencePointsPercentage(number, amount, previous) {
let percentage = (number - previous) / (amount - previous) * 100;
if (percentage <= 100) {
this.experiencePointsPercentage = (number - previous) / (amount - previous) * 100;
} else {
this.experiencePointsPercentage = 100;
}
}

increaseUserExperiencePoints(experiencePoints) {
this.user.experiencePoints += experiencePoints;
this.calculateExperiencePointsPercentage(this.user.experiencePoints, this.user.experiencePointsToLevelUp, this.user.previousLevelExperiencePoints);
if (this.user.experiencePoints >= this.user.experiencePointsToLevelUp) {
setTimeout(() => {
this.experiencePointsPercentage = 0;
this.getUserInformation();
}, 800);
}
}

openKudosModal() {
let modal = this.modalCtrl.create(KudosModalPage, {user: this.user});
modal.onDidDismiss(data => {
if (data){
this.increaseUserExperiencePoints(data * 2);
this.user.weeklyKudos -= data;
}
});

modal.present();
}

}
7 src/pages/login/login.ts
View file
@@ -20,6 +20,13 @@ export class LoginPage {

ionViewDidLoad() {
console.log('Hello LoginPage Page');
this.authService.isLogged().subscribe(
isLogged => {
if (isLogged){
this.navCtrl.push(TabsPage);
}
}
)
}

submitLogin(){
12 src/pages/shop/shop.html
View file
@@ -0,0 +1,12 @@
<ion-header>

<ion-navbar>
<ion-title>Kudos Store</ion-title>
</ion-navbar>

</ion-header>


<ion-content padding>

</ion-content>
3 src/pages/shop/shop.scss
View file
@@ -0,0 +1,3 @@
page-shop {

}
22 src/pages/shop/shop.ts
View file
@@ -0,0 +1,22 @@
import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';

/*
Generated class for the Shop page.
See http://ionicframework.com/docs/v2/components/#navigation for more info on
Ionic pages and navigation.
*/
@Component({
selector: 'page-shop',
templateUrl: 'shop.html'
})
export class ShopPage {

constructor(public navCtrl: NavController) {}

ionViewDidLoad() {
console.log('Hello ShopPage Page');
}

}
4 src/pages/tabs/tabs.html
View file
@@ -1,6 +1,6 @@
<ion-tabs>
<ion-tab [root]="tab4Root" tabTitle="Login" tabIcon="log-in"></ion-tab>
<ion-tab [root]="tab1Root" tabTitle="Home" tabIcon="home"></ion-tab>
<ion-tab [root]="tab2Root" tabTitle="About" tabIcon="information-circle"></ion-tab>
<ion-tab [root]="tab2Root" tabTitle="History" tabIcon="time"></ion-tab>
<ion-tab [root]="tab3Root" tabTitle="Contact" tabIcon="contacts"></ion-tab>
<ion-tab [root]="tab4Root" tabTitle="Store" tabIcon="basket"></ion-tab>
</ion-tabs>
8 src/pages/tabs/tabs.ts
View file
@@ -1,9 +1,9 @@
import {Component} from '@angular/core';

import {HomePage} from '../home/home';
import {AboutPage} from '../about/about';
import {ContactPage} from '../contact/contact';
import {LoginPage} from '../login/login';
import {HistoryPage} from "../history/history";
import {ShopPage} from "../shop/shop";

@Component({
templateUrl: 'tabs.html'
@@ -12,9 +12,9 @@ export class TabsPage {
// this tells the tabs component which Pages
// should be each tab's root Page
tab1Root: any = HomePage;
tab2Root: any = AboutPage;
tab2Root: any = HistoryPage;
tab3Root: any = ContactPage;
tab4Root: any = LoginPage;
tab4Root: any = ShopPage

constructor() {

12 src/theme/variables.scss
View file
@@ -10,8 +10,8 @@
// To view all the possible Ionic variables, see:
// http://ionicframework.com/docs/v2/theming/overriding-ionic-variables/

$text-color: #000;
$background-color: #fff;
$text-color: #555459;
$background-color: #fbfbfb;


// Named Color Variables
@@ -23,7 +23,7 @@ $background-color: #fff;
// The "primary" color is the only required color in the map.

$colors: (
primary: #387ef5,
primary: #1abc9c,
secondary: #32db64,
danger: #f53d3d,
light: #f4f4f4,
@@ -34,21 +34,21 @@ $colors: (
// App iOS Variables
// --------------------------------------------------
// iOS only Sass variables can go here

$card-ios-background-color: #ffffff;



// App Material Design Variables
// --------------------------------------------------
// Material Design only Sass variables can go here

$card-md-background-color: #ffffff;



// App Windows Variables
// --------------------------------------------------
// Windows only Sass variables can go here

$card-wp-background-color: #ffffff;