From f292e512dc96b7b4eeb71cfdb67a372a4a55e965 Mon Sep 17 00:00:00 2001 From: James Barnsley Date: Wed, 5 Apr 2017 20:28:41 +1200 Subject: [PATCH] Creating processes --- src/js/components/DebugInfo.js | 5 +++- src/js/components/Notifications.js | 12 ++++----- src/js/services/mopidy/middleware.js | 10 ++++++- src/js/services/ui/actions.js | 36 +++++++++++++++++-------- src/js/services/ui/middleware.js | 4 +-- src/js/services/ui/reducer.js | 22 +++++++++++---- src/js/views/Debug.js | 2 +- src/scss/components/_notifications.scss | 2 +- 8 files changed, 65 insertions(+), 28 deletions(-) diff --git a/src/js/components/DebugInfo.js b/src/js/components/DebugInfo.js index b4d965fc..1716ff51 100755 --- a/src/js/components/DebugInfo.js +++ b/src/js/components/DebugInfo.js @@ -74,12 +74,15 @@ class DebugInfo extends React.Component{
Notifications: {this.props.ui.notifications ? Object.keys(this.props.ui.notifications).length : '0'}
+
+ Processes: {this.props.ui.processes ? Object.keys(this.props.ui.processes).length : '0'} +

_testMode: {window._testMode ? 'on' : 'off'}
- Touch: {helpers.isTouchDevice() ? 'yes' : 'no'} + Touch: {helpers.isTouchDevice() ? 'on' : 'off'}
{this.renderLoadQueue()} diff --git a/src/js/components/Notifications.js b/src/js/components/Notifications.js index 4b01bf3f..27e1666b 100755 --- a/src/js/components/Notifications.js +++ b/src/js/components/Notifications.js @@ -21,23 +21,23 @@ export default class Notifications extends React.Component{ switch (notification.type){ case 'shortcut': return ( -
+
) - case 'loading': + case 'process': return ( -
- this.props.uiActions.cancelLoading(notification.id) } /> +
+ this.props.uiActions.cancelProcess(notification.key) } /> { notification.content }
) default: return ( -
- this.props.uiActions.removeNotification(notification.id) } /> +
+ this.props.uiActions.removeNotification(notification.key) } /> { notification.content }
) diff --git a/src/js/services/mopidy/middleware.js b/src/js/services/mopidy/middleware.js index 8d7ea6ec..f8567f74 100755 --- a/src/js/services/mopidy/middleware.js +++ b/src/js/services/mopidy/middleware.js @@ -237,7 +237,13 @@ const MopidyMiddleware = (function(){ } } - let process_batch = function(){ + let process_batch = function(){ + + // process is not active, so abort + if (!store.getState().ui.processes || !store.getState().ui.processes[action.uri]){ + return false + } + store.dispatch(uiActions.createNotification('Adding '+remaining_uris.length+' URI(s)', 'loading', action.type)) var params = {uris: remaining_uris.splice(0,5)} @@ -274,11 +280,13 @@ const MopidyMiddleware = (function(){ // all done } else { store.dispatch(uiActions.removeNotification(action.type)) + store.dispatch(uiActions.stopProcess(action.type)) } }) } // start processing + store.dispatch(uiActions.startProcess(action.type)) process_batch() break diff --git a/src/js/services/ui/actions.js b/src/js/services/ui/actions.js index 7ab3ff68..3a8236b1 100755 --- a/src/js/services/ui/actions.js +++ b/src/js/services/ui/actions.js @@ -224,28 +224,21 @@ export function createBrowserNotification( data ){ } } -export function createNotification(content, type = 'default', id = helpers.generateGuid()){ +export function createNotification(content, type = 'default', key = helpers.generateGuid()){ return { type: 'CREATE_NOTIFICATION', notification: { - id: id, + key: key, type: type, content: content } } } -export function cancelLoading(id){ - return { - type: 'CANCEL_LOADING_'+id, - id: id - } -} - -export function removeNotification(id){ +export function removeNotification(key){ return { type: 'REMOVE_NOTIFICATION', - id: id + key: key } } @@ -268,3 +261,24 @@ export function stopLoading(key){ key: key } } + +export function startProcess(key){ + return { + type: 'START_PROCESS', + key: key + } +} + +export function cancelProcess(key){ + return { + type: 'CANCEL_PROCESS', + key: key + } +} + +export function stopProcess(key){ + return { + type: 'STOP_PROCESS', + key: key + } +} diff --git a/src/js/services/ui/middleware.js b/src/js/services/ui/middleware.js index 2a22f600..d9f05afb 100755 --- a/src/js/services/ui/middleware.js +++ b/src/js/services/ui/middleware.js @@ -269,10 +269,10 @@ const UIMiddleware = (function(){ case 'CREATE_NOTIFICATION': // start a timeout to remove this (non loading) notification - if (action.notification.type != 'loading'){ + if (action.notification.type != 'process'){ var timeout = setTimeout( function(){ - store.dispatch(uiActions.removeNotification(action.notification.id)) + store.dispatch(uiActions.removeNotification(action.notification.key)) }, (action.notification.type == 'shortcut' ? 1000 : 3000) ) diff --git a/src/js/services/ui/reducer.js b/src/js/services/ui/reducer.js index d8a8a783..42c29a1d 100755 --- a/src/js/services/ui/reducer.js +++ b/src/js/services/ui/reducer.js @@ -711,16 +711,16 @@ export default function reducer(ui = {}, action){ case 'CREATE_NOTIFICATION': var notifications = [...ui.notifications, action.notification] - notifications = helpers.mergeDuplicates(notifications,'id') + notifications = helpers.mergeDuplicates(notifications,'key') return Object.assign({}, ui, { notifications: notifications }) case 'REMOVE_NOTIFICATION': var notifications = Object.assign([], ui.notifications) - function getByID( notification ){ - return notification.id === action.id + function getByKey( notification ){ + return notification.key === action.key } - var index = notifications.findIndex(getByID) + var index = notifications.findIndex(getByKey) if( index > -1 ) notifications.splice(index, 1) return Object.assign({}, ui, { notifications: notifications }) @@ -728,7 +728,7 @@ export default function reducer(ui = {}, action){ /** - * Loader + * Loading and processes **/ case 'START_LOADING': @@ -743,6 +743,18 @@ export default function reducer(ui = {}, action){ } return Object.assign({}, ui, {load_queue: load_queue}) + case 'START_PROCESS': + var processes = Object.assign({}, (ui.processes ? ui.processes : [])) + processes[action.key] = 'active' + return Object.assign({}, ui, {processes: processes}) + + case 'STOP_PROCESS': + var processes = Object.assign({}, (ui.processes ? ui.processes : {})) + if (processes[action.key]){ + delete processes[action.key] + } + return Object.assign({}, ui, {processes: processes}) + default: return ui diff --git a/src/js/views/Debug.js b/src/js/views/Debug.js index 3050ea7a..6b716691 100755 --- a/src/js/views/Debug.js +++ b/src/js/views/Debug.js @@ -104,7 +104,7 @@ class Debug extends React.Component{
diff --git a/src/scss/components/_notifications.scss b/src/scss/components/_notifications.scss index da2ee27e..12d6d206 100755 --- a/src/scss/components/_notifications.scss +++ b/src/scss/components/_notifications.scss @@ -44,7 +44,7 @@ background: $red; } - &.loading { + &.process { position: relative; padding-right: 18px;