/* Styles go here */
.enjoy-css {
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
position: relative;
border: none;
font: normal 76px/1 "Aclonica", Helvetica, sans-serif;
color: #0096ff;
text-align: center;
-o-text-overflow: ellipsis;
text-overflow: ellipsis;
text-shadow: 1px 1px 0 rgba(204, 65, 37, 1), 4px 0 9px rgba(86, 170, 255, 0.9);
}
.content-section {
padding-top: 70px;
background: url('http://images7.alphacoders.com/475/475592.png') no-repeat center center fixed;
background-size: cover;
}
.col-centered {
float: none;
margin: 0 auto;
}
### Pomodoro Clock Angular2 Plunker - Typescript - RC.0
Derived from Angular2 Starter Plunker & Typescript
A simple plunker demonstrating Angular2 usage:
- Uses SystemJS + TypeScript to compile on the fly
- Includes binding, directives, http, pipes, and DI usage.
System.config({
//use typescript for compilation
transpiler: 'typescript',
//typescript compiler options
typescriptOptions: {
emitDecoratorMetadata: true
},
//map tells the System loader where to look for things
map: {
app: "./src",
'@angular': 'https://npmcdn.com/@angular',
'rxjs': 'https://npmcdn.com/rxjs@5.0.0-beta.6'
},
//packages defines our app package
packages: {
app: {
main: './main.ts',
defaultExtension: 'ts'
},
'@angular/core': {
main: 'bundles/core.umd.js',
defaultExtension: 'js'
},
'@angular/compiler': {
main: 'bundles/compiler.umd.js',
defaultExtension: 'js'
},
'@angular/common': {
main: 'bundles/common.umd.js',
defaultExtension: 'js'
},
'@angular/platform-browser-dynamic': {
main: 'bundles/platform-browser-dynamic.umd.js',
defaultExtension: 'js'
},
'@angular/platform-browser': {
main: 'bundles/platform-browser.umd.js',
defaultExtension: 'js'
},
rxjs: {
defaultExtension: 'js'
}
}
});
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';
const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule);
//output:index.html, pretty:true
doctype html
html(lang="en")
head
title Pomodoro Clock By Naresh Mehta
link(href='https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css', rel='stylesheet')
link(async href='http://fonts.googleapis.com/css?family=Aclonica', data-generated='http://enjoycss.com', rel='stylesheet', type='text/css')
link(rel='stylesheet', href="style.css")
link(rel='stylesheet', href="http://www.w3schools.com/lib/w3.css")
meta(charset="UTF-8", name="viewport", content="width=device-width, initial-scale=1")
script(data-require="jade@*", data-semver="0.27.7", src="//cdnjs.cloudflare.com/ajax/libs/jade/0.27.7/runtime.js")
script(data-require="jade@*", data-semver="0.27.7", src="//cdnjs.cloudflare.com/ajax/libs/jade/0.27.7/jade.js")
script(src="https://unpkg.com/zone.js@0.6.23?main=browser")
script(src="https://npmcdn.com/reflect-metadata@0.1.3/Reflect.js")
script(src="https://npmcdn.com/systemjs@0.19.31/dist/system.js")
script(src="https://npmcdn.com/typescript@1.8.10/lib/typescript.js")
script(src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js")
link(rel="stylesheet", type="text/css", href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.2/semantic.min.css")
script(src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.2/semantic.min.js")
script(src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/4.1.0/rx.all.min.js")
script(src="config.js")
script.
System.import('app')
.catch(console.error.bind(console));
body.content-section
h1.enjoy-css Pomodoro Clock
h2(style="text-align:center") By Naresh Mehta
div.content-section
div.ui.grid.container.centered
// Now starts the actual code to show the pomodoro clock
app
div.content-section
h4(style="text-align:center") Copyright (c) 2016 - Naresh Mehta
a(href='https://www.naresh.se/', target="_blank") https://www.naresh.se/
//our root app component
import {Component} from '@angular/core'
import {NumberInput} from './numberInput'
import {Observable} from 'rxjs/Rx';
@Component({
selector: 'app',
providers: [],
template: `
<div>
<div class="ui section divider">
</div>
<div class="label">Click on the progress bar to start/stop timer!</div>
<div class="ui indicating progress" (click)="startStopProgress()" data-value="0" data-total="100" id="myProgressBar">
<div class="bar">
<div class="progress"></div>
</div>
</div>
<div class="label">{{pgLabel}}</div>
<div class="ui section divider">
</div>
<div class="ui centered grid">
<numberInput [inputTimeValue]="sessionTime" [minValue]="1" [maxValue]="160" [inputDisabled]="inputDisabled" [inputTimeName]="'Session'" (changedNumberInputValue)="sessionTimeChanged($event)"></numberInput>
<numberInput [inputTimeValue]="breakTime" [minValue]="1" [maxValue]="60" [inputDisabled]="inputDisabled" [inputTimeName]="'Break'" (changedNumberInputValue)="breakTimeChanged($event)"></numberInput>
</div>
</div>
`,
directives: [NumberInput]
})
export class App {
sessionTime: Integer = 25;
breakTime: Integer = 5;
timeLeft: Integer = this.sessionTime * 60;
pgLabel: String = "";
/* True if Session runs otherwise false (i.e. if on break)*/
isSessionRunning: Boolean = true;
isClockRunning: Boolean = false;
resetProgressBar: Boolean = false;
inputDisabled: Boolean = false;
runTimerID = 0;
constructor() {
$("#myProgressBar").progress({total: this.timeLeft});
}
resetProgressBarFunction(): void {
if(this.resetProgressBar) {
$("#myProgressBar").progress("reset");
this.resetProgressBar = false;
if(this.isSessionRunning) {
this.timeLeft = this.sessionTime * 60;
} else {
this.timeLeft = this.breakTime * 60;
}
$("#myProgressBar").progress("reset");
$("#myProgressBar").progress({total: this.timeLeft});
}
}
updateTimer(): void {
this.timeLeft -= 1;
this.resetProgressBarFunction();
if(this.timeLeft < 0) {
/* Play sound here and swap the sessions... */
var wav = 'https://notificationsounds.com/wake-up-tones/alarm-frenzy-493/download/mp3';
var audio = new Audio(wav);
audio.play();
this.isSessionRunning = !this.isSessionRunning;
if(this.isSessionRunning) {
this.timeLeft = this.sessionTime * 60;
} else {
this.timeLeft = this.breakTime * 60;
}
$("#myProgressBar").progress("reset");
$("#myProgressBar").progress({total: this.timeLeft});
}
if(this.isSessionRunning) {
this.pgLabel = "Ongoing Session, Time Left = " + this.timeLeft + " seconds";
} else {
this.pgLabel = "Ongoing Break, Time Left = " + this.timeLeft + " seconds";
}
$("#myProgressBar").progress("increment");
}
startStopProgress(): void {
console.log("SessionTime: " + this.sessionTime + " BreakTime: " + this.breakTime);
/*
if(this.isSessionRunning) {
this.timeLeft = this.sessionTime * 60;
} else {
this.timeLeft = this.breakTime * 60;
}
*/
if(!this.isClockRunning) {
/* Function should run every second */
this.runTimerID = setInterval(function() {this.updateTimer()}.bind(this), 1000);
this.inputDisabled = true;
} else {
clearInterval(this.runTimerID);
this.inputDisabled = false;
}
this.isClockRunning = !this.isClockRunning;
}
sessionTimeChanged($event): void {
if(!this.isClockRunning) {
this.sessionTime = $event.value;
this.resetProgressBar = true;
}
}
breakTimeChanged($event): void {
if(!this.isClockRunning) {
this.breakTime = $event.value;
this.resetProgressBar = true;
}
}
}
//The numberInput component which emits the value of the number when changed
import {Component, Input, Output, EventEmitter} from '@angular/core'
@Component({
selector: 'numberInput',
providers: [],
template: `
<div class="ui circular segment center">
<h2>{{inputTimeName}} Time:</h2>
<h3><input name={{inputTimeName}} #inputTime type="number" min={{minValue}} max={{maxValue}} [disabled]="inputDisabled" (change)="onValueChanged(inputTime)" value={{inputTimeValue}}> minutes</h3>
</div>
`,
directives: []
})
export class NumberInput {
@Input() inputTimeValue = 0;
@Input() inputDisabled = false;
@Input() minValue = 0;
@Input() maxValue = 100;
@Input() inputTimeName = "";
@Output() changedNumberInputValue = new EventEmitter();
onValueChanged(inputTime: HTMLInputElement) {
this.inputTimeValue = parseInt(inputTime.value, 10);
this.changedNumberInputValue.emit({
value: this.inputTimeValue,
name: this.inputTimeName
});
}
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { App } from './app';
import { NumberInput } from './numberInput'
@NgModule({
imports: [ BrowserModule ],
declarations: [ App, NumberInput ],
bootstrap: [ App ]
})
export class AppModule { }