secstate/Iris
Public Access
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

Creating processes

Browse Source
This commit is contained in:
James Barnsley
2017-04-05 20:28:41 +12:00
parent 14509e6c8b
commit f292e512dc
8 changed files with 65 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
src/js/components/DebugInfo.js
View File

@ -74,12 +74,15 @@ class DebugInfo extends React.Component{
<div className="item">
Notifications: {this.props.ui.notifications ? Object.keys(this.props.ui.notifications).length : '0'}
</div>
<div className="item">
Processes: {this.props.ui.processes ? Object.keys(this.props.ui.processes).length : '0'}
</div>
<br />
<div className="item">
_testMode: {window._testMode ? 'on' : 'off'}
</div>
<div className="item">
Touch: {helpers.isTouchDevice() ? 'yes' : 'no'}
Touch: {helpers.isTouchDevice() ? 'on' : 'off'}
</div>
{this.renderLoadQueue()}
</div>

12
src/js/components/Notifications.js
View File

@ -21,23 +21,23 @@ export default class Notifications extends React.Component{
switch (notification.type){
case 'shortcut':
return (
<div className="shortcut-notification" key={notification.id}>
<div className="shortcut-notification" key={notification.key}>
<FontAwesome name={notification.content} />
</div>
)
case 'loading':
case 'process':
return (
<div className="loading notification" key={notification.id}>
<FontAwesome name="close" className="close-button" onClick={ e => this.props.uiActions.cancelLoading(notification.id) } />
<div className="process notification" key={notification.key}>
<FontAwesome name="close" className="close-button" onClick={ e => this.props.uiActions.cancelProcess(notification.key) } />
{ notification.content }
</div>
)
default:
return (
<div className={notification.type+" notification"} key={notification.id}>
<FontAwesome name="close" className="close-button" onClick={ e => this.props.uiActions.removeNotification(notification.id) } />
<div className={notification.type+" notification"} key={notification.key}>
<FontAwesome name="close" className="close-button" onClick={ e => this.props.uiActions.removeNotification(notification.key) } />
{ notification.content }
</div>
)

10
src/js/services/mopidy/middleware.js
View File

@ -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

36
src/js/services/ui/actions.js
View File

@ -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
}
}

4
src/js/services/ui/middleware.js
View File

@ -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)
)

22
src/js/services/ui/reducer.js
View File

@ -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

2
src/js/views/Debug.js
View File

@ -104,7 +104,7 @@ class Debug extends React.Component{
<div className="name"></div>
<div className="input">
<a className="button secondary" onClick={e => this.props.uiActions.createNotification('Test notification')}>Create notification</a>
<a className="button secondary" onClick={e => this.props.uiActions.createNotification('Test loader','loading')}>Create loader</a>
<a className="button secondary" onClick={e => this.props.uiActions.createNotification('Process running','process')}>Create process</a>
</div>
</div>
</form>

2
src/scss/components/_notifications.scss
View File

@ -44,7 +44,7 @@
background: $red;
}
&.loading {
&.process {
position: relative;
padding-right: 18px;