From 999e900b7401ee7dab157f5e8e4351a2384c5615 Mon Sep 17 00:00:00 2001 From: Kamil Dobrzynski Date: Thu, 1 Feb 2018 14:29:46 +0100 Subject: [PATCH 1/4] remove unused old spinner --- package.json | 23 +++++++++++------------ 1 file changed, 11 insertions(+), 12 deletions(-) diff --git a/package.json b/package.json index a148909..24882f1 100644 --- a/package.json +++ b/package.json @@ -44,41 +44,38 @@ }, "devDependencies": { "@angular/animations": "^4.4.3", + "@angular/cli": "1.4.3", "@angular/common": "4.4.3", + "@angular/compiler": "4.4.3", + "@angular/compiler-cli": "4.4.3", "@angular/core": "4.4.3", "@angular/forms": "4.4.3", "@angular/http": "4.4.3", "@angular/platform-browser": "^4.4.3", "@angular/platform-browser-dynamic": "^4.4.3", "@angular/router": "4.4.3", - "core-js": "2.4.1", - "font-awesome": "^4.7.0", - "ionicons": "^3.0.0", - "ngx-loading": "^1.0.8", - "rxjs": "5.4.3", - "zone.js": "0.8.17", - "@angular/compiler": "4.4.3", - "electron-builder": "^19.37.2", - "electron-squirrel-startup": "^1.0.0", - "@angular/cli": "1.4.3", - "@angular/compiler-cli": "4.4.3", "@types/core-js": "0.9.36", "@types/jasmine": "2.5.54", "@types/node": "7.0.7", "autoprefixer": "7.1.4", "codelyzer": "3.2.0", "copyfiles": "1.2.0", + "core-js": "2.4.1", "cross-env": "5.0.5", "css-loader": "0.28.7", "cssnano": "3.10.0", "electron": "1.7.11", + "electron-builder": "^19.37.2", "electron-packager": "9.1.0", "electron-rebuild": "^1.6.0", "electron-reload": "1.2.1", + "electron-squirrel-startup": "^1.0.0", "electron-winstaller": "^2.6.3", "exports-loader": "0.6.4", "file-loader": "0.11.2", + "font-awesome": "^4.7.0", "html-loader": "0.5.1", + "ionicons": "^3.0.0", "istanbul-instrumenter-loader": "3.0.0", "jasmine-core": "2.8.0", "jasmine-spec-reporter": "4.2.1", @@ -98,6 +95,7 @@ "postcss-url": "7.1.2", "protractor": "5.1.2", "raw-loader": "0.5.1", + "rxjs": "5.4.3", "sass-loader": "6.0.6", "script-loader": "0.7.1", "source-map-loader": "0.2.1", @@ -109,7 +107,8 @@ "url-loader": "0.5.9", "webdriver-manager": "12.0.6", "webpack": "3.6.0", - "webpack-dev-server": "2.8.2" + "webpack-dev-server": "2.8.2", + "zone.js": "0.8.17" }, "license": "Apache-2.0" } From 9e3330af1aa5453d040781f8da9c8b4aea216944 Mon Sep 17 00:00:00 2001 From: Kamil Dobrzynski Date: Thu, 1 Feb 2018 14:35:42 +0100 Subject: [PATCH 2/4] move toaster to own component and for each state other method --- src/app/app.component.html | 9 +-- src/app/app.component.scss | 67 ------------------ src/app/app.module.ts | 13 +--- .../add-account/add-account.component.ts | 6 +- .../edit-account/edit-account.component.ts | 12 ++-- .../boards-choice/boards-choice.component.ts | 2 +- .../edit-board/edit-board.component.ts | 4 +- .../components/toaster/toaster.component.html | 8 +++ .../components/toaster/toaster.component.scss | 68 +++++++++++++++++++ .../toaster/toaster.component.spec.ts | 25 +++++++ .../components/toaster/toaster.component.ts | 19 ++++++ .../workspace/boards/boards.component.ts | 2 +- .../workspace/workspace.component.ts | 4 +- src/app/services/timer.service.ts | 7 +- src/app/services/toaster.service.ts | 23 +++++-- 15 files changed, 160 insertions(+), 109 deletions(-) create mode 100644 src/app/components/toaster/toaster.component.html create mode 100644 src/app/components/toaster/toaster.component.scss create mode 100644 src/app/components/toaster/toaster.component.spec.ts create mode 100644 src/app/components/toaster/toaster.component.ts diff --git a/src/app/app.component.html b/src/app/app.component.html index c9b3683..0afbd4a 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -1,10 +1,3 @@ -
- {{ toasterService.toasterText }} -
- -
-
\ No newline at end of file + \ No newline at end of file diff --git a/src/app/app.component.scss b/src/app/app.component.scss index 66537b7..91c3511 100644 --- a/src/app/app.component.scss +++ b/src/app/app.component.scss @@ -5,70 +5,3 @@ $fa-font-path: "../../node_modules/font-awesome/fonts"; body { background-color: $dark; } - -#default-notification, .default-notification { - visibility: hidden; - position: fixed; - bottom: 0; - right: 0; - left: 0; - width: 100%; - padding: 19px 19px 16px; - color: $white; - text-align: left; - box-sizing: border-box; - z-index: 99999; - &--default { - background-color: $font-grey; - } - &--success { - background-color: $notification-green; - } - &--error { - background-color: $input-error; - } - &.show { - visibility: visible; - -webkit-animation: fadein 0.5s, fadeout 0.5s 5.2s; - animation: fadein 0.5s, fadeout 0.5s 5.2s; - } - span { - color: $white; - font-family: 'Montserrat', sans-serif; - font-size: 12px; - line-height: 12px; - letter-spacing: 1px; - } - .close { - position: absolute; - top: 16px; - right: 13px; - button { - padding: 0; - background: transparent; - color: $white; - border: 0; - outline: none; - cursor: pointer; - span { - font-size: 22px; - } - } - } - @-webkit-keyframes fadein { - from {bottom: -55px; } - to {bottom: 0; } - } - @keyframes fadein { - from {bottom: -55px; } - to {bottom: 0; } - } - @-webkit-keyframes fadeout { - from {bottom: 0; } - to {bottom: -55px; } - } - @keyframes fadeout { - from {bottom: 0; } - to {bottom: -55px; } - } -} \ No newline at end of file diff --git a/src/app/app.module.ts b/src/app/app.module.ts index cffa1ce..125af3f 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -25,7 +25,6 @@ import { DatabaseService } from './services/database.service' import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; -import { LoadingModule, ANIMATION_TYPES } from 'ngx-loading'; import { HttpService } from './services/http.service'; import { SecondsToTimePipe } from './pipes/seconds-to-time.pipe'; @@ -40,6 +39,7 @@ import { ToolbarComponent } from './components/toolbar/toolbar.component'; import { SwitchAccountComponent } from './components/accounts/switch-account/switch-account.component' import { MenuService } from './services/menu.service'; import { LoadingSpinnerComponent } from './components/loading-spinner/loading-spinner.component'; +import { ToasterComponent } from './components/toaster/toaster.component'; @NgModule({ declarations: [ @@ -57,7 +57,8 @@ import { LoadingSpinnerComponent } from './components/loading-spinner/loading-sp LicensesComponent, ToolbarComponent, SwitchAccountComponent, - LoadingSpinnerComponent + LoadingSpinnerComponent, + ToasterComponent ], imports: [ BrowserModule, @@ -65,14 +66,6 @@ import { LoadingSpinnerComponent } from './components/loading-spinner/loading-sp FormsModule, HttpModule, AppRoutingModule, - LoadingModule.forRoot({ - animationType: ANIMATION_TYPES.threeBounce, - backdropBackgroundColour: 'rgba(0,0,0,0.1)', - backdropBorderRadius: '4px', - primaryColour: '#ffffff', - secondaryColour: '#ffffff', - tertiaryColour: '#ffffff' - }) ], providers: [ ElectronService, diff --git a/src/app/components/accounts/add-account/add-account.component.ts b/src/app/components/accounts/add-account/add-account.component.ts index a1065b2..a022475 100644 --- a/src/app/components/accounts/add-account/add-account.component.ts +++ b/src/app/components/accounts/add-account/add-account.component.ts @@ -68,7 +68,7 @@ export class AddAccountComponent implements OnInit { rAccount.token = this.token; rAccount.url = this.youTrackUrl; if (!window.navigator.onLine) { - this.toasterService.showToaster("No internet connection", "error") + this.toasterService.error("No internet connection") } else { this.apiService.getCurrentUser(rAccount).then( (data) => { @@ -83,7 +83,7 @@ export class AddAccountComponent implements OnInit { } }, (error) => { this.errorUrlOrToken() - this.toasterService.showToaster("Error eccoured! Incorrect URL or token", 'error') + this.toasterService.error("Error occoured! Incorrect URL or token") this.loader = false; } ) @@ -97,7 +97,7 @@ export class AddAccountComponent implements OnInit { public errorName() { let url = document.getElementById('add-account__name') url.className += " add-account__name--error" - this.toasterService.showToaster("Error eccoured! The name must be longer than 3 characters.", 'error') + this.toasterService.error("Error occoured! The name must be longer than 3 characters.") } public clearErrorUrlOrToken() { diff --git a/src/app/components/accounts/edit-account/edit-account.component.ts b/src/app/components/accounts/edit-account/edit-account.component.ts index 25c110f..b402e95 100644 --- a/src/app/components/accounts/edit-account/edit-account.component.ts +++ b/src/app/components/accounts/edit-account/edit-account.component.ts @@ -55,9 +55,9 @@ export class EditAccountComponent implements OnInit { editNameOrUrl(account) { this.databaseService.editAccount(account).then(data => { - this.toasterService.showToaster('Account updated!', "success") + this.toasterService.success('Account updated!') }, err => { - this.toasterService.showToaster('An error occured!', "error") + this.toasterService.error('An error occured!') }) } @@ -72,9 +72,9 @@ export class EditAccountComponent implements OnInit { public removeAccount(id) { this.databaseService.deleteAccount(id).then(data => { this.router.navigate(['/accounts']) - this.toasterService.showToaster('Account removed!', "success") + this.toasterService.success('Account removed!') }, err => { - this.toasterService.showToaster('An error occured!', "error") + this.toasterService.error('An error occured!') }) this.hideModal() } @@ -108,10 +108,10 @@ export class EditAccountComponent implements OnInit { agile.checked == true? agile.checked = 1 : agile.checked = 0 this.databaseService.updateBoardVisibility(this.editingAccount.id, agile.name, agile.checked).then(data => { if (data) { - this.toasterService.showToaster('Your changes have been saved!', "success") + this.toasterService.success('Your changes have been saved!') } }, err => { - this.toasterService.showToaster('An error occured!', "error") + this.toasterService.error('An error occured!') }) }) } diff --git a/src/app/components/boards-choice/boards-choice.component.ts b/src/app/components/boards-choice/boards-choice.component.ts index 38bfe87..5394ed5 100644 --- a/src/app/components/boards-choice/boards-choice.component.ts +++ b/src/app/components/boards-choice/boards-choice.component.ts @@ -55,7 +55,7 @@ export class BoardsChoiceComponent implements OnInit { }) }) if (this.justLoggedIn) { - this.toasterService.showToaster("Account " + this.accountName + " is synced!", "success") + this.toasterService.success("Account " + this.accountName + " is synced!") } } ) diff --git a/src/app/components/edit-board/edit-board.component.ts b/src/app/components/edit-board/edit-board.component.ts index 8360bcf..cdb217e 100644 --- a/src/app/components/edit-board/edit-board.component.ts +++ b/src/app/components/edit-board/edit-board.component.ts @@ -42,13 +42,13 @@ export class EditBoardComponent implements OnInit { updateStatesColors(boardStates) { for (let i = 0; i < boardStates.length; i++) { if (!/(^#[0-9A-F]{6}$)|(^#[0-9A-F]{3}$)/i.test(boardStates[i].hexColor)) { - this.toasterService.showToaster('It isn\'t hex format!', 'error') + this.toasterService.error('It isn\'t hex format!') return false } } boardStates.forEach((state) => { this.databaseService.changeBoardStates(state.accountId, state.boardName, state.state, state.hexColor).then(data => { - this.toasterService.showToaster('Color has been changed!', 'success') + this.toasterService.success('Color has been changed!') }) }) this.goBack() diff --git a/src/app/components/toaster/toaster.component.html b/src/app/components/toaster/toaster.component.html new file mode 100644 index 0000000..eeac2c1 --- /dev/null +++ b/src/app/components/toaster/toaster.component.html @@ -0,0 +1,8 @@ +
+ {{ toasterService.toasterText }} +
+ +
+
\ No newline at end of file diff --git a/src/app/components/toaster/toaster.component.scss b/src/app/components/toaster/toaster.component.scss new file mode 100644 index 0000000..bb611e4 --- /dev/null +++ b/src/app/components/toaster/toaster.component.scss @@ -0,0 +1,68 @@ +@import "../../theme/colors.scss"; + +#default-notification, .default-notification { + visibility: hidden; + position: fixed; + bottom: 0; + right: 0; + left: 0; + width: 100%; + color: $white; + text-align: left; + box-sizing: border-box; + z-index: 99999; + padding: 19px 19px 16px; + &--default { + background-color: $font-grey; + } + &--success { + background-color: $notification-green; + } + &--error { + background-color: $input-error; + } + &.show { + visibility: visible; + -webkit-animation: fadein 0.5s, fadeout 0.5s 5.2s; + animation: fadein 0.5s, fadeout 0.5s 5.2s; + } + span { + color: $white; + font-family: 'Montserrat', sans-serif; + font-size: 12px; + line-height: 12px; + letter-spacing: 1px; + } + .close { + position: absolute; + top: 16px; + right: 13px; + button { + padding: 0; + background: transparent; + color: $white; + border: 0; + outline: none; + cursor: pointer; + span { + font-size: 22px; + } + } + } + @-webkit-keyframes fadein { + from {bottom: -55px; } + to {bottom: 0; } + } + @keyframes fadein { + from {bottom: -55px; } + to {bottom: 0; } + } + @-webkit-keyframes fadeout { + from {bottom: 0; } + to {bottom: -55px; } + } + @keyframes fadeout { + from {bottom: 0; } + to {bottom: -55px; } + } + } \ No newline at end of file diff --git a/src/app/components/toaster/toaster.component.spec.ts b/src/app/components/toaster/toaster.component.spec.ts new file mode 100644 index 0000000..a0774c4 --- /dev/null +++ b/src/app/components/toaster/toaster.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { ToasterComponent } from './toaster.component'; + +describe('ToasterComponent', () => { + let component: ToasterComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ ToasterComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(ToasterComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/components/toaster/toaster.component.ts b/src/app/components/toaster/toaster.component.ts new file mode 100644 index 0000000..c2f4859 --- /dev/null +++ b/src/app/components/toaster/toaster.component.ts @@ -0,0 +1,19 @@ +import { Component, OnInit } from '@angular/core'; +import { ToasterService } from 'app/services/toaster.service'; + +@Component({ + selector: 'app-toaster', + templateUrl: './toaster.component.html', + styleUrls: ['./toaster.component.scss'] +}) +export class ToasterComponent implements OnInit { + + constructor( + public toasterService: ToasterService + ) { } + + ngOnInit() { + } + + +} diff --git a/src/app/components/workspace/boards/boards.component.ts b/src/app/components/workspace/boards/boards.component.ts index 6f00c81..108c034 100644 --- a/src/app/components/workspace/boards/boards.component.ts +++ b/src/app/components/workspace/boards/boards.component.ts @@ -69,7 +69,7 @@ export class BoardsComponent implements OnInit { ngOnInit() { if (!window.navigator.onLine) { - this.toasterService.showToaster("No internet connection", "error") + this.toasterService.error("No internet connection") } else { this.init() } diff --git a/src/app/components/workspace/workspace.component.ts b/src/app/components/workspace/workspace.component.ts index 25d5eb0..26c540d 100644 --- a/src/app/components/workspace/workspace.component.ts +++ b/src/app/components/workspace/workspace.component.ts @@ -116,7 +116,7 @@ export class WorkspaceComponent implements OnDestroy, OnInit { if (action == 'remove') { this.databaseService.deleteItem(item.startDate) this.hideModal() - this.toasterService.showToaster('Your tracking has been removed!', 'default') + this.toasterService.default('Your tracking has been removed!') } if (action == 'resume') { this.timerService.startItem(item); @@ -128,7 +128,7 @@ export class WorkspaceComponent implements OnDestroy, OnInit { this.databaseService.stopItem(item.duration, item.startDate) this.databaseService.setIsPublished(item.startDate) this.hideModal() - this.toasterService.showToaster('Your tracking has been saved!', 'default') + this.toasterService.default('Your tracking has been saved!') }) } this.unstoppedItem = undefined diff --git a/src/app/services/timer.service.ts b/src/app/services/timer.service.ts index 6035d89..58ee296 100644 --- a/src/app/services/timer.service.ts +++ b/src/app/services/timer.service.ts @@ -138,19 +138,18 @@ export class TimerService { return this.api.createNewWorkItem(issue).then( data => { this.stopIdleTime() - // stop issueTimer && saveInDb this.databaseService.stopItem(issue.duration, issue.startDate) this.databaseService.setIsPublished(issue.startDate) this.stopTrackingNotifications() - this.toasterService.showToaster('Your tracking has been saved!', 'default') + this.toasterService.default('Your tracking has been saved!') }, err => { - this.toasterService.showToaster('Can\'t report task to remote service.', 'error') + this.toasterService.error('Can\'t report task to remote service.') } ) } return new Promise((resolve, reject) => { this.stopTrackingNotifications() - this.toasterService.showToaster('Records shorter than 10 seconds will not be reported.', 'error') + this.toasterService.error('Records shorter than 10 seconds will not be reported.') reject("To small amount of data"); }) } diff --git a/src/app/services/toaster.service.ts b/src/app/services/toaster.service.ts index 7ec3a3a..76a1d26 100644 --- a/src/app/services/toaster.service.ts +++ b/src/app/services/toaster.service.ts @@ -2,17 +2,17 @@ import { Injectable } from '@angular/core'; @Injectable() export class ToasterService { - private toaster: HTMLElement + private toaster: any public toasterText: string constructor() { - } + + } public showToaster(text: string, type: string) { - console.log("in showToaster", text) - this.toaster = document.getElementById("default-notification") let that = this + this.toasterText = text + this.toaster = document.getElementById("default-notification") setTimeout(function() { - that.toasterText = text switch(type) { case 'default': { that.toaster.className += " show default-notification--default" @@ -39,4 +39,17 @@ export class ToasterService { public hideToaster() { this.toaster.className = this.toaster.className.replace("show", "") } + + public default(text) { + this.showToaster(text, 'default') + } + + public success(text) { + this.showToaster(text, 'success') + } + + public error(text) { + this.showToaster(text, 'error') + } + } From 08b11f4303bd73776bd3ffd45d643de69594a25e Mon Sep 17 00:00:00 2001 From: Kamil Dobrzynski Date: Thu, 1 Feb 2018 14:37:03 +0100 Subject: [PATCH 3/4] security when changing token --- .../change-account-token.component.ts | 24 ++++++++++++++----- 1 file changed, 18 insertions(+), 6 deletions(-) diff --git a/src/app/components/accounts/change-account-token/change-account-token.component.ts b/src/app/components/accounts/change-account-token/change-account-token.component.ts index b965dcd..1b9197e 100644 --- a/src/app/components/accounts/change-account-token/change-account-token.component.ts +++ b/src/app/components/accounts/change-account-token/change-account-token.component.ts @@ -3,6 +3,8 @@ import { Router, ActivatedRoute } from '@angular/router'; import { DatabaseService } from '../../../services/database.service' import { ToasterService } from '../../../services/toaster.service' +import { RemoteAccount } from 'app/models/RemoteAccount'; +import { ApiService } from 'app/services/api.service'; @Component({ selector: 'app-change-account-token', @@ -18,7 +20,8 @@ export class ChangeAccountTokenComponent implements OnInit { public activatedRoute: ActivatedRoute, public router: Router, public databaseService: DatabaseService, - public toasterService: ToasterService + public toasterService: ToasterService, + public api: ApiService ) { } ngOnInit() { @@ -32,11 +35,20 @@ export class ChangeAccountTokenComponent implements OnInit { } changeToken(accountId, newToken) { - this.databaseService.changeAccountToken(accountId, newToken).then(data => { - this.toasterService.showToaster('Token has been changed successfully', 'success') - this.goBack() - }, err => { - console.log(err) + let rAccount = new RemoteAccount() + rAccount.name = this.accountName + rAccount.url = this.accountUrl + rAccount.token = newToken + this.api.getCurrentUser(rAccount).then((res) => { + this.databaseService.changeAccountToken(accountId, newToken).then(data => { + this.toasterService.success('Token has been changed successfully') + this.goBack() + }, err => { + console.log(err) + this.toasterService.error('An error occoured!') + }) + }, (err) => { + this.toasterService.error('An error occoured! This token doesn\'t match any account') }) } From 967d9e56b8f678ef19624de2071ff5108b6b89fd Mon Sep 17 00:00:00 2001 From: Kamil Dobrzynski Date: Thu, 1 Feb 2018 14:37:18 +0100 Subject: [PATCH 4/4] clean up --- src/app/app.component.ts | 2 -- src/app/providers/electron.service.ts | 3 --- src/app/services/api.service.ts | 2 +- src/app/theme/colors.scss | 1 - 4 files changed, 1 insertion(+), 7 deletions(-) diff --git a/src/app/app.component.ts b/src/app/app.component.ts index e4504ba..65d0991 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -20,9 +20,7 @@ export class AppComponent { ) { if (electronService.isElectron()) { console.log('Mode electron'); - // Check if electron is correctly injected (see externals in webpack.config.js) console.log('c', electronService.ipcRenderer); - // Check if nodeJs childProcess is correctly injected (see externals in webpack.config.js) console.log('c', electronService.childProcess); } else { console.log('Mode web'); diff --git a/src/app/providers/electron.service.ts b/src/app/providers/electron.service.ts index dfe422e..528c1ec 100644 --- a/src/app/providers/electron.service.ts +++ b/src/app/providers/electron.service.ts @@ -1,7 +1,5 @@ import { Injectable } from '@angular/core'; -// If you import a module but never use any of the imported values other than as TypeScript types, -// the resulting javascript file will look as if you never imported the module at all. import { ipcRenderer } from 'electron'; import * as childProcess from 'child_process'; @@ -12,7 +10,6 @@ export class ElectronService { childProcess: typeof childProcess; constructor() { - // Conditional imports if (this.isElectron()) { this.ipcRenderer = window.require('electron').ipcRenderer; this.childProcess = window.require('child_process'); diff --git a/src/app/services/api.service.ts b/src/app/services/api.service.ts index 28da51f..83dea46 100644 --- a/src/app/services/api.service.ts +++ b/src/app/services/api.service.ts @@ -143,7 +143,7 @@ export class ApiService { let newItem = { date: data.date, duration: Math.round(data.duration / 60), - description: "Added by T-Rec App" + description: "Added by T-REC App" } return new Promise(resolve => { diff --git a/src/app/theme/colors.scss b/src/app/theme/colors.scss index 2224684..47f1828 100644 --- a/src/app/theme/colors.scss +++ b/src/app/theme/colors.scss @@ -3,7 +3,6 @@ $white: #ffffff; $dark: #000000; -// non-default $menu-color: #25292d; $content-color: #3b3e42; $border-color: #575757;