{this.state.title}
+{this.state.content}
+
+
+
+ {entry.comment}
+
+ );
+ }
+}
diff --git a/app/components/dashboard/Dashboard.scss b/app/components/dashboard/Dashboard.scss
new file mode 100644
index 0000000..291c55e
--- /dev/null
+++ b/app/components/dashboard/Dashboard.scss
@@ -0,0 +1,93 @@
+.dashboard {
+ display: flex;
+ flex-direction: column;
+ height: 100%;
+
+ &__content {
+ flex: 1;
+
+ overflow: scroll;
+
+ & > table {
+ width: 100%;
+ border-collapse: collapse;
+
+ tr:hover > td {
+ background-color: #eee;
+
+ cursor: pointer;
+ }
+
+ th {
+ background-color: #161f28;
+ color: #ccc;
+ text-align: left;
+ font-weight: 400;
+
+ padding: 10px 5px 5px;
+ }
+
+ td {
+ background-color: #fff;
+ color: #333;
+
+ padding: 5px;
+ border-bottom: 1px solid #ddd;
+ }
+
+ tr.dashboard__content__sep td {
+ background-color: #f8f8f8;
+ font-size: 11px;
+ text-transform: uppercase;
+ color: #aaa;
+
+ padding: 10px 6px 4px;
+ }
+
+ tr.is-active td {
+ background-color: #243342;
+ color: #D7DADB;
+ }
+ }
+
+ &__truncated {
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+
+ margin: 0;
+ width: 380px;
+ }
+
+ &__refresh {
+ color: #ccc;
+
+ &:hover {
+ color: #fff;
+
+ transition: color .3s;
+ }
+
+ &:active > i {
+ transition: all .1s;
+ transform: rotate(90deg);
+ }
+ }
+
+ &__sep {
+ & > td:last-of-type {
+ text-align: right;
+
+ & > a {
+ color: #333;
+
+ margin-left: 10px;
+ }
+ }
+ }
+ }
+
+ &__stats-recap {
+ flex: 0 0 100px;
+ }
+}
diff --git a/app/components/issues/Issues.js b/app/components/issues/Issues.js
new file mode 100644
index 0000000..f8d40b5
--- /dev/null
+++ b/app/components/issues/Issues.js
@@ -0,0 +1,119 @@
+import React, {Component} from 'react';
+import {shell} from 'electron';
+import {Link} from 'react-router';
+
+import * as StorageService from '../../services/StorageService';
+import * as IssueService from '../../services/IssueService';
+
+const ISSUE_BASE_URL = "https://arcbees.atlassian.net/browse";
+
+export default class Issues extends Component {
+ constructor(props) {
+ super(props);
+
+ this.state = {
+ issues: [],
+ filteredIssues: [],
+ sortedIssues: [],
+ searchQuery: "",
+ viewType: StorageService.getViewType(),
+ issuesStatusSortingOrder: [3,10601,10400,10600,10100]
+ };
+ }
+
+ componentDidMount() {
+ this.fetchIssues();
+ }
+
+ fetchIssues() {
+ let projectId = this.state.viewType === 'timer' ? StorageService.getActiveProjectId() : StorageService.getWorklogProjectId();
+ IssueService.getIssues(projectId).then(issues => {
+ this.setState({issues: issues.issues, filteredIssues: issues.issues})
+ this.sortIssuesByStatus(this.state.filteredIssues);
+ });
+ }
+
+ sortIssuesByStatus(issues) {
+ let sortedIssues = [];
+ this.state.issuesStatusSortingOrder.map((issueStatus, key) => {
+ sortedIssues[key] = issues.filter(issue => {
+ return issue && issue.fields.status.id == issueStatus;
+ });
+ });
+ sortedIssues[sortedIssues.length] = issues.filter(issue => {
+ return issue && !_.includes(this.state.issuesStatusSortingOrder, parseInt(issue.fields.status.id));
+ });
+ this.setState({sortedIssues: sortedIssues});
+ }
+
+ issueSelected(issueId, issueKey) {
+ if (this.state.viewType === 'timer') {
+ StorageService.setActiveIssueId(issueId);
+ StorageService.setActiveIssueKey(issueKey);
+ } else {
+ StorageService.setWorklogIssueId(issueId);
+ StorageService.setWorklogIssueKey(issueKey);
+ }
+ window.eventEmitter.emitEvent('issueChange');
+ }
+
+ searchChange(event) {
+ const searchQuery = event.target.value;
+ this.setState({
+ searchQuery: searchQuery,
+ filteredIssues: this.filterIssues(searchQuery.toLowerCase())
+ });
+ }
+
+ filterIssues(searchQuery) {
+ const filteredIssues = this.state.issues.filter(issue => {
+ return issue &&
+ (issue.key.toLowerCase().indexOf(searchQuery) >= 0 || issue.fields.summary.toLowerCase().indexOf(searchQuery) >= 0);
+ });
+ this.sortIssuesByStatus(filteredIssues);
+ return filteredIssues;
+ }
+
+ showIssues() {
+ return this.state.sortedIssues.map((issues, key) => {
+ if (issues.length > 0) {
+ return (
+
+
+
+
+
+
+ | Last entries | ++ this.props.refresh()}> + + + | +|
|---|---|---|
+
+
+
+ )
+ }
+ });
+ }
+
+ renderIssues(issues) {
+ return issues.map((issue) => (
+ {issues[0].fields.status.name}
+-
+ {this.renderIssues(issues)}
+
+
+
+ {this.showIssues()}
+
+ );
+ }
+}
diff --git a/app/components/login/Login.js b/app/components/login/Login.js
new file mode 100644
index 0000000..9c09f37
--- /dev/null
+++ b/app/components/login/Login.js
@@ -0,0 +1,73 @@
+import React, {Component} from 'react';
+
+import * as StorageService from '../../services/StorageService';
+
+import './Login.scss';
+
+export default class Login extends Component {
+ constructor(props) {
+ super(props);
+ this.state = {
+ instanceURL: StorageService.getInstanceURL()
+ }
+ }
+
+ submitForm(event) {
+ event.preventDefault();
+
+ const instanceURL = this.state.instanceURL.trim();
+ const username = this.state.username.trim();
+ const password = this.state.password.trim();
+ if (!username || !password || !instanceURL) {
+ return;
+ }
+
+ this.props.onFormSubmit({instanceURL, username, password});
+ }
+
+ handleInstanceUrlChange(event) {
+ this.setState({instanceURL: event.target.value});
+ }
+
+ handleUsernameChange(event) {
+ this.setState({username: event.target.value});
+ }
+
+ handlePasswordChange(event) {
+ this.setState({password: event.target.value});
+ }
+
+ render() {
+ return (
+ Tasks
+ + + + +
+ 
+ {/*
+
+
+ );
+ }
+}
diff --git a/app/components/login/Login.scss b/app/components/login/Login.scss
new file mode 100644
index 0000000..c915945
--- /dev/null
+++ b/app/components/login/Login.scss
@@ -0,0 +1,69 @@
+@import "../../assets/scss/settings/colors";
+
+.login {
+ background-color: #fff;
+
+ display: flex;
+ flex-direction: column;
+ width: 100%;
+ height: 100vh;
+ justify-content: center;
+ align-items: center;
+
+ &__logo {
+ width: 170px;
+ height: 146px;
+ margin-bottom: 20px;
+ }
+
+ &__google {
+ border: 1px solid #ccc;
+ background-color: #f5f5f5;
+ font-size: 16px;
+
+ width: 300px;
+ padding: 10px;
+ border-radius: 3px;
+ }
+
+ &__sep {
+ margin: 20px 0 5px;
+ }
+
+ &__input {
+ font-size: 16px;
+
+ width: 300px;
+ padding: 10px;
+ border: 1px solid #ddd;
+
+ &:focus {
+ border: 1px solid $c-primary--dark;
+
+ outline: 0;
+ }
+ }
+
+ &__btn {
+ background-color: $c-primary;
+ color: #fff;
+ font-size: 16px;
+ text-align: center;
+
+ width: 150px;
+ border: 0;
+ border-radius: 3px;
+ padding: 12px;
+ margin-left: 75px;
+
+ &:focus {
+ outline: 0;
+ }
+
+ &:hover {
+ background-color: $c-primary--dark;
+
+ cursor: pointer;
+ }
+ }
+}
diff --git a/app/components/projects/Projects.js b/app/components/projects/Projects.js
new file mode 100644
index 0000000..bd30ef8
--- /dev/null
+++ b/app/components/projects/Projects.js
@@ -0,0 +1,104 @@
+import React, {Component} from 'react';
+import {shell} from 'electron';
+import {Link} from 'react-router';
+
+import * as StorageService from '../../services/StorageService';
+import * as ProjectService from '../../services/ProjectService';
+
+const PROJECT_BASE_URL = "https://arcbees.atlassian.net/projects";
+
+export default class Projects extends Component {
+ constructor(props) {
+ super(props);
+
+ this.state = {
+ projects: [],
+ filteredProjects: [],
+ latestProjects: [],
+ searchQuery: "",
+ viewType: StorageService.getViewType()
+ };
+ }
+
+ componentDidMount() {
+ this.fetchProjects();
+ this.fetchLatestProjects();
+ }
+
+ fetchProjects() {
+ ProjectService.getProjects().then(projects => this.setState({projects: projects, filteredProjects: projects}));
+ }
+
+ fetchLatestProjects() {
+ ProjectService.getLatestProjects().then(latestProjects => this.setState({latestProjects: latestProjects, filteredLatestProjects: latestProjects}));
+ }
+
+ showLatestProjects() {
+ return this.renderProjects(this.state.filteredLatestProjects);
+ }
+
+ showProjects() {
+ return this.renderProjects(this.state.filteredProjects);
+ }
+
+ projectSelected(projectId) {
+ if (this.state.viewType === 'timer') {
+ StorageService.setActiveProjectId(projectId);
+ } else {
+ StorageService.setWorklogProjectId(projectId);
+ }
+ window.eventEmitter.emitEvent('projectChange');
+ }
+
+ searchChange(event) {
+ const searchQuery = event.target.value;
+ this.setState({
+ searchQuery: searchQuery,
+ filteredProjects: this.filterProjects(this.state.projects, searchQuery),
+ filteredLatestProjects: this.filterProjects(this.state.latestProjects, searchQuery)
+ });
+ }
+
+ filterProjects(projects, searchQuery) {
+ return projects.filter(key => {
+ return key && key.name.toLowerCase().indexOf(searchQuery) >= 0;
+ });
+ }
+
+ renderProjects(projects) {
+ if (projects) {
+ return projects.map((project) => (
+
+ {/*
+
+ or
+ */} + +No projects found
; + } + } + + render() { + return ( +
+
+
+
+ );
+ }
+}
diff --git a/app/components/settings/Settings.js b/app/components/settings/Settings.js
new file mode 100644
index 0000000..cd08667
--- /dev/null
+++ b/app/components/settings/Settings.js
@@ -0,0 +1,100 @@
+import React, {Component} from 'react';
+import {Link} from 'react-router';
+import Select from 'react-select';
+
+import * as StorageService from '../../services/StorageService';
+
+import './Settings.scss';
+
+export default class Settings extends Component {
+ static contextTypes = {
+ settings: React.PropTypes.object,
+ user: React.PropTypes.object
+ };
+
+ constructor(props) {
+ super(props);
+ this.state = {
+ disabled: false,
+ clearable: false
+ };
+ }
+
+ updateStateValue(key, newValue) {
+ window.eventEmitter.emitEvent('settingsHasChanged', [key, newValue]);
+ }
+
+ logout() {
+ StorageService.logout();
+ }
+
+ render() {
+ const Select = require('react-select');
+ const timeRoundOptions = [
+ { value: 0, label: 'Never' },
+ { value: 5, label: 'Nearest 5mn' },
+ { value: 10, label: 'Nearest 10mn' },
+ { value: 15, label: 'Nearest 15mn' },
+ { value: 20, label: 'Nearest 20mn' },
+ { value: 30, label: 'Nearest 30mn' },
+ { value: 60, label: 'Nearest 1h' }
+ ];
+ const inactivityOptions = [
+ { value: 0, label: 'Never' },
+ { value: 5, label: 'After 5mn' },
+ { value: 15, label: 'After 15mn' },
+ { value: 60, label: 'After 1h' }
+ ];
+
+ return (
+ Projects
+ + + + +Most recents
+-
+ {this.showLatestProjects()}
+
All projects
+-
+ {this.showProjects()}
+
+
+
+
+
+ );
+ }
+}
diff --git a/app/components/settings/Settings.scss b/app/components/settings/Settings.scss
new file mode 100644
index 0000000..3598923
--- /dev/null
+++ b/app/components/settings/Settings.scss
@@ -0,0 +1,22 @@
+@import "../../assets/scss/settings/colors";
+
+.settings {
+ &__label {
+ padding: 8px 0 8px 8px;
+ border-left: 2px solid $c-primary;
+ }
+
+ &__avatar {
+ float: right;
+ margin-top: 12px;
+ }
+
+ &__link {
+ color: $c-primary;
+ text-decoration: none;
+
+ &:hover {
+ text-decoration: underline;
+ }
+ }
+}
diff --git a/app/components/sidebar/Sidebar.js b/app/components/sidebar/Sidebar.js
new file mode 100644
index 0000000..2dff027
--- /dev/null
+++ b/app/components/sidebar/Sidebar.js
@@ -0,0 +1,19 @@
+import React, {Component} from 'react';
+import {Link} from 'react-router';
+import Timer from '../timer/Timer';
+import './Sidebar.scss';
+
+export default class Sidebar extends Component {
+ render() {
+ return (
+ Settings
+ + + +Profil
+User
+
+ 
+
+
+ {this.context.user.displayName}
+ {this.context.user.emailAddress}
+
+
Options
+ +
+
+ );
+ }
+}
diff --git a/app/components/sidebar/Sidebar.scss b/app/components/sidebar/Sidebar.scss
new file mode 100644
index 0000000..58131b1
--- /dev/null
+++ b/app/components/sidebar/Sidebar.scss
@@ -0,0 +1,20 @@
+.sidebar {
+ display: flex;
+ flex-direction: column;
+ height: 100%;
+
+ &__timer {
+ flex: 1;
+ overflow: scroll;
+ }
+
+ &__options {
+ background-color: #161f28;
+
+ padding: 10px 20px;
+
+ & a {
+ color: #aaa;
+ }
+ }
+}
diff --git a/app/components/stats-recap/StatsRecap.js b/app/components/stats-recap/StatsRecap.js
new file mode 100644
index 0000000..e758ba3
--- /dev/null
+++ b/app/components/stats-recap/StatsRecap.js
@@ -0,0 +1,29 @@
+import React, {Component} from 'react';
+import {Link} from 'react-router';
+import * as WorklogService from '../../services/WorklogService';
+import './StatsRecap.scss';
+
+export default class StatsRecap extends Component {
+ constructor(props) {
+ super(props);
+ }
+
+ render() {
+ return (
+
+
+
+
+
+
+
+ );
+ }
+}
diff --git a/app/components/stats-recap/StatsRecap.scss b/app/components/stats-recap/StatsRecap.scss
new file mode 100644
index 0000000..7f6a769
--- /dev/null
+++ b/app/components/stats-recap/StatsRecap.scss
@@ -0,0 +1,26 @@
+@import "../../assets/scss/settings/colors";
+
+.stats-recap {
+ background-color: $c-primary;
+ color: #fff;
+
+ height: 100%;
+ display: flex;
+ align-items: center;
+ justify-content: space-around;
+
+ &__stat {
+ flex: 0 0 33.3%;
+ padding: 0 20px;
+
+ &__data {
+ font-size: 44px;
+ font-weight: 700;
+ }
+
+ &__label {
+ text-transform: uppercase;
+ font-size: 12px;
+ }
+ }
+}
diff --git a/app/components/timer/Timer.js b/app/components/timer/Timer.js
new file mode 100644
index 0000000..36db0c2
--- /dev/null
+++ b/app/components/timer/Timer.js
@@ -0,0 +1,407 @@
+import moment from 'moment';
+import React, { Component } from 'react';
+import ReactTimeout from 'react-timeout';
+import DatePicker from 'react-datepicker';
+import TimePicker from 'rc-time-picker';
+import { Link } from 'react-router';
+
+import * as StorageService from '../../services/StorageService';
+import * as WorklogService from '../../services/WorklogService';
+import * as ProjectService from '../../services/ProjectService';
+import * as IssueService from '../../services/IssueService';
+import * as DateUtils from '../../utils/DateUtils';
+
+import './Timer.scss';
+
+const STATE = {
+ time: "0:00",
+ timeSeconds: "00",
+ projectId: StorageService.getActiveProjectId(),
+ projectName: StorageService.getActiveProjectName(),
+ issueId: StorageService.getActiveIssueId(),
+ issueKey: StorageService.getActiveIssueKey(),
+ date: StorageService.getActiveDate() ? StorageService.getActiveDate() : moment(),
+ comment: StorageService.getActiveComment() ? StorageService.getActiveComment() : "",
+ selectedWorklogId: null,
+ viewType: StorageService.getViewType() ? StorageService.getViewType() : "timer"
+};
+
+export default class Timer extends Component {
+ static contextTypes = {
+ settings: React.PropTypes.object,
+ user: React.PropTypes.object
+ };
+
+ constructor(props) {
+ super(props);
+
+ this.state = STATE;
+ this.time = 0;
+ this.showTimer();
+
+ window.eventEmitter.addListener('selectWorklog', this.setSelectedWorklog.bind(this));
+ window.eventEmitter.addListener('projectChange', this.fetchProject.bind(this));
+ window.eventEmitter.addListener('issueChange', this.fetchIssue.bind(this));
+ }
+
+ // Timer states
+
+ startTimer() {
+ StorageService.setDateStartMoment(moment().toISOString());
+ StorageService.startTimer();
+ this.tick();
+ }
+
+ showTimer() {
+ window.eventEmitter.emitEvent('unselectActiveWorklog');
+
+ this.setState({
+ time: "0:00",
+ timeSeconds: "00",
+ projectName: StorageService.getActiveProjectName(),
+ projectId: StorageService.getActiveProjectId(),
+ issueId: StorageService.getActiveIssueId(),
+ issueKey: StorageService.getActiveIssueKey(),
+ comment: StorageService.getActiveComment() ? StorageService.getActiveComment() : "",
+ date: StorageService.getActiveDate() ? StorageService.getActiveDate() : moment(),
+ selectedWorklogId: null,
+ viewType: 'timer'
+ });
+ StorageService.setViewType('timer');
+
+ if (StorageService.isTimerStarted() === 'true') {
+ if (StorageService.isTimerPaused() === 'false') {
+ this.tick();
+ } else {
+ const startTime = StorageService.getDateStartMoment();
+ const endTime = StorageService.getDatePauseMoment();
+ this.time = this.getDurationBetweenDates(moment(endTime), moment(startTime));
+ this.setState({
+ time: this.getTimeFromMilliseconds(),
+ timeSeconds: this.getSecondsFromDuration()
+ });
+ }
+ }
+ }
+
+ pauseTimer() {
+ StorageService.setDatePauseMoment(moment().toISOString());
+ StorageService.pauseTimer();
+ }
+
+ unpauseTimer() {
+ const startedAt = moment(StorageService.getDateStartMoment());
+ const pausedAt = moment(StorageService.getDatePauseMoment());
+ const timeElapsed = pausedAt.diff(startedAt);
+
+ StorageService.setDateStartMoment(moment().subtract(moment.duration(timeElapsed)).toISOString());
+ StorageService.unpauseTimer();
+ this.tick();
+ }
+
+ stopTimer() {
+ if (!StorageService.getActiveProjectId()) {
+ window.eventEmitter.emitEvent('requestModal', ["Oups!", "You need to select a project."]);
+ } else if (!StorageService.getActiveIssueKey()) {
+ window.eventEmitter.emitEvent('requestModal', ["Oups!", "You need to select a task."]);
+ } else {
+ StorageService.stopTimer();
+ StorageService.setTimeSpentInSeconds(Math.round(moment.duration(this.time).asSeconds()));
+
+ let worklog = this.buildWorklog();
+
+ WorklogService.createWorklog(worklog)
+ .then(() => {
+ window.eventEmitter.emitEvent('refreshWorklogsAndTime');
+ this.setState({
+ time: '0:00',
+ timeSeconds: '00'
+ });
+ this.clearData();
+ })
+ .catch(error => window.eventEmitter.emitEvent('requestModal', ["Oups!", error]));
+ }
+ }
+
+ // Worklogs
+
+ setSelectedWorklog(worklog) {
+ this.setState({
+ selectedWorklogId: worklog.id,
+ projectId: worklog.issue.projectId,
+ issueId: worklog.issue.id,
+ issueKey: worklog.issue.key,
+ viewType: 'worklog'
+ });
+ StorageService.setWorklogProjectId(worklog.issue.projectId);
+ StorageService.setViewType('worklog');
+
+ // TODO: Find a lighter way to get the project name than fetching the entire project
+ ProjectService.getProject(worklog.issue.projectId)
+ .then(project => {
+ this.setState({
+ projectName: project.name,
+ duration: worklog.timeSpentSeconds,
+ time: WorklogService.getTimeSpentInHours(worklog.timeSpentSeconds),
+ timeSeconds: "00",
+ issue: worklog.issue.key,
+ date: worklog.dateStarted,
+ comment: worklog.comment
+ });
+ StorageService.setWorklogProjectName(project.name);
+ });
+ }
+
+ saveSelectedWorklog() {
+ let worklog = this.buildWorklogForUpdate();
+
+ WorklogService.updateWorklog(this.state.selectedWorklogId, worklog)
+ .then(() => {
+ window.eventEmitter.emitEvent('refreshWorklogsAndTime');
+ this.showTimer();
+ })
+ .catch(error => window.eventEmitter.emitEvent('requestModal', ["Oups!", error]));
+ }
+
+ deleteSelectedWorklog() {
+ if (confirm("Are you sure you want to delete this entry?")) {
+ WorklogService.deleteWorklog(this.state.selectedWorklogId)
+ .then(() => {
+ window.eventEmitter.emitEvent('refreshWorklogsAndTime');
+ this.showTimer();
+ })
+ .catch(error => window.eventEmitter.emitEvent('requestModal', ["Oups!", error]));
+ }
+ }
+
+ // Functions and helpers
+
+ tick() {
+ let startTime = StorageService.getDateStartMoment();
+
+ this.time = this.getDurationBetweenDates(moment(), moment(startTime));
+ this.setState({
+ time: this.getTimeFromMilliseconds(),
+ timeSeconds: this.getSecondsFromDuration()
+ });
+
+ if (StorageService.isTimerStarted() === 'true' && StorageService.isTimerPaused() === 'false') {
+ // The tick will be called multiple times per second but it will result
+ // in a quicker response when clicking on the play/stop button
+ let timeout = setTimeout(() => this.tick(), 500);
+ }
+ }
+
+ buildWorklog() {
+ return {
+ author: {
+ name: this.context.user.name
+ },
+ issue: {
+ projectId: StorageService.getActiveProjectId(),
+ key: StorageService.getActiveIssueKey()
+ },
+ timeSpentSeconds: this.getRoundedTime(),
+ dateStarted: StorageService.getDateStartMoment(),
+ comment: this.state.comment
+ };
+ }
+
+ buildWorklogForUpdate() {
+ return {
+ timeSpentSeconds: this.state.duration > 0 ? this.state.duration : 60,
+ dateStarted: moment(this.state.date).toISOString(),
+ comment: this.state.comment,
+ issue: {
+ projectId: this.state.projectId,
+ key: this.state.issueKey
+ }
+ };
+ }
+
+ getTimeFromMilliseconds() {
+ return moment.duration(this.time, 'milliseconds').format(DateUtils.DateFormat.TIME, { trim: false });
+ }
+
+ getDurationBetweenDates(now, then) {
+ return now.diff(then);
+ }
+
+ getSecondsFromDuration() {
+ let seconds = moment.duration(this.time, 'milliseconds').seconds()
+ return seconds <= 9 ? "0" + seconds : seconds;
+ }
+
+ getRoundedTime() {
+ const round = this.context.settings.timeRound * 60;
+ const seconds = StorageService.getTimeSpentInSeconds();
+ if(round > 0) {
+ if(seconds < round) {
+ return round;
+ }
+ const rounded = (seconds % round) >= round / 2 ? parseInt(seconds / round) * round + round : parseInt(seconds / round) * round;
+ StorageService.setTimeSpentInSeconds(rounded);
+ return rounded;
+ } else {
+ return seconds;
+ }
+ }
+
+ fetchProject() {
+ if (this.state.viewType === 'timer') {
+ StorageService.setActiveIssueId("");
+ StorageService.setActiveIssueKey("");
+ } else {
+ StorageService.setWorklogIssueId("");
+ StorageService.setWorklogIssueKey("");
+ }
+
+ ProjectService.getProject(this.state.viewType === 'timer' ? StorageService.getActiveProjectId() : StorageService.getWorklogProjectId())
+ .then(project => {
+ this.setState({
+ projectId: project.id,
+ projectName: project.name,
+ time: "0:00",
+ timeSeconds: "00",
+ issueId: "",
+ issueKey: "-",
+ date: moment(),
+ comment: ""
+ });
+ if (this.state.viewType === 'timer') {
+ StorageService.setActiveProjectId(project.id);
+ StorageService.setActiveProjectName(project.name);
+ if (StorageService.isTimerStarted() === 'true' && StorageService.isTimerPaused() === 'false') {
+ this.tick();
+ }
+ } else {
+ StorageService.setWorklogProjectId(project.id);
+ StorageService.setWorklogProjectName(project.name);
+ }
+ });
+ }
+
+ fetchIssue() {
+ IssueService.getIssue(this.state.viewType === 'timer' ? StorageService.getActiveIssueId() : StorageService.getWorklogIssueId())
+ .then(issue => this.setState({
+ issueId: issue.id,
+ issueKey: issue.key
+ }));
+ }
+
+ clearData() {
+ StorageService.clearActiveTimer();
+ StorageService.stopTimer();
+ this.setState(STATE);
+ }
+
+ clearDataConfirm() {
+ if (confirm("Are you sure you want to delete this?")) {
+ this.clearData();
+ }
+ }
+
+ // Handling components change
+
+ timeChange(time) {
+ this.setState({ duration: ((time.minutes() * 60) + (time.hours() * 3600)) });
+ }
+
+ dateChange(date) {
+ this.setState({
+ date: date
+ });
+
+ if (this.state.viewType === 'timer') {
+ StorageService.setActiveDate(moment(date).toISOString());
+ }
+ }
+
+ commentChange(event) {
+ this.setState({
+ comment: event.target.value
+ });
+
+ if (this.state.viewType === 'timer') {
+ StorageService.setActiveComment(this.state.comment);
+ }
+ }
+
+ // Template rendering
+
+ renderSeconds() {
+ if (this.state.timeSeconds) {
+ return (.{this.state.timeSeconds});
+ }
+ }
+
+ renderTime() {
+ if (this.state.viewType === 'timer') {
+ return ({this.state.time}{this.renderSeconds()});
+ } else {
+ return (
+
+
+ {this.props.stats.lastWeekTime}
+ Last week
+
+
+ {this.props.stats.weekTime}
+ This week
+
+
+ {this.props.stats.todayTime}
+ Today
+
+
+ );
+ }
+}
diff --git a/app/components/timer/Timer.scss b/app/components/timer/Timer.scss
new file mode 100644
index 0000000..306cb78
--- /dev/null
+++ b/app/components/timer/Timer.scss
@@ -0,0 +1,107 @@
+.timer {
+ &__clock {
+ text-align: center;
+ font-weight: 700;
+
+ display: flex;
+ align-items: center;
+ padding: 0 20px;
+ height: 180px;
+
+ &__time {
+ font-size: 60px;
+
+ flex: 1;
+
+ &__seconds {
+ font-size: 30px;
+ }
+ }
+
+ &__buttons {
+ font-size: 40px;
+
+ display: flex;
+ flex-direction: column;
+ padding: 0;
+
+ & > i:not(:first-of-type) {
+ margin-top: 10px;
+ }
+ }
+ }
+
+ &__datas {
+
+ }
+
+ &__data {
+ text-decoration: none;
+ color: #d7dadb;;
+
+ display: block;
+ padding: 15px;
+
+ &:not(.timer__data--no-highlight):hover {
+ background-color: #546c83;
+ }
+
+ &__title {
+ font-weight: 100;
+ text-transform: uppercase;
+ font-size: 11px;
+ letter-spacing: .1em;
+
+ margin: 0 0 5px;
+ }
+
+ &__label {
+ margin: 0;
+ border-bottom: 1px solid rgba(255, 255, 255, .25);
+ padding-bottom: 5px;
+ }
+
+ &__date {
+ background-color: transparent;
+
+ width: 100%;
+ margin: 0;
+ border: 0;
+ border-bottom: 1px solid rgba(255, 255, 255, .25);
+ padding: 5px 0;
+
+ &:active,
+ &:focus {
+ color: #fff;
+
+ border-bottom-color: #fff;
+ outline: none;
+ }
+ }
+
+ &__textarea {
+ background-color: transparent;
+
+ width: 100%;
+ max-height: 50px;
+ border: 0;
+ border-bottom: 1px solid rgba(255, 255, 255, .25);
+ padding: 0 0 5px;
+
+ resize: none;
+
+ &:active,
+ &:focus {
+ color: #fff;
+
+ border-bottom-color: #fff;
+ outline: none;
+ }
+
+ &::selection {
+ background-color: #fff;
+ color: black;
+ }
+ }
+ }
+}
diff --git a/app/containers/App.js b/app/containers/App.js
new file mode 100644
index 0000000..2a749bc
--- /dev/null
+++ b/app/containers/App.js
@@ -0,0 +1,77 @@
+import React, {Component, PropTypes} from 'react';
+
+import AppModal from '../components/app-modal/AppModal';
+import Sidebar from '../components/sidebar/Sidebar';
+import LoginPage from './LoginPage';
+import * as authService from '../services/AuthService';
+import * as StorageService from '../services/StorageService';
+
+const DEFAULT_SETTINGS = {
+ timeRound: 10,
+ inactivity: 60,
+}
+
+export default class App extends Component {
+ static propTypes = {
+ children: PropTypes.element.isRequired
+ };
+
+ static childContextTypes = {
+ settings: React.PropTypes.object.isRequired,
+ user: React.PropTypes.object
+ };
+
+ constructor(props) {
+ super(props);
+ this.state = {
+ isAuth: false,
+ settings: StorageService.getSettings() ? StorageService.getSettings() : DEFAULT_SETTINGS,
+ user: StorageService.getUser() ? StorageService.getUser() : {}
+ };
+
+ window.eventEmitter.addListener('userHasLogged', this.updateUser.bind(this));
+ window.eventEmitter.addListener('settingsHasChanged', this.updateSettings.bind(this));
+ }
+
+ componentDidMount() {
+ this.setState({isAuth: authService.isAuth()});
+ }
+
+ showLayout() {
+ this.setState({isAuth: true});
+ }
+
+ getChildContext() {
+ return {
+ settings: this.state.settings,
+ user: this.state.user
+ }
+ }
+
+ updateUser(user) {
+ this.setState({user: user});
+ }
+
+ updateSettings(key, newValue) {
+ const newSettings = {...this.state.settings, [key]: newValue.value};
+ this.setState({settings: newSettings});
+ StorageService.setSettings(newSettings);
+ }
+
+ render() {
+ let appLayout =(
+
+ {this.renderTime()}
+ {this.renderButtons()}
+
+
+
+
+ Project
+{this.state.projectName}
+ + +Task
+{this.state.issueKey}
+ +
+
+ Date
+
+
+ Comment
+ +
+
+
+ );
+
+ return this.state.isAuth ? appLayout :
+ {this.props.children}
+
+
+