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

Progress indicator for processes - could be prettier, but functional for now

Browse Source
This commit is contained in:
James Barnsley
2017-09-07 11:16:04 +12:00
parent 0a956a3fdd
commit aa0505802d
7 changed files with 72 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -41,13 +41,18 @@ export default class Notifications extends React.Component{
renderProcess(process){
var progress = ((process.data.total - process.data.remaining) / process.data.total * 100).toFixed()
if (isNaN(progress)){
progress = 0
}
switch (process.status){
case 'running':
return(
<div className="process notification" key={process.key}>
<div className="loader"></div>
{process.message} {progress ? progress+'%' : null}
<div className="loader">
<div className="progress" style={{borderWidth: (10-progress*0.1)+'px'}}></div>
</div>
{process.message}
<FontAwesome name="close" className="close-button" onClick={e => {this.props.uiActions.cancelProcess(process.key)}} />
</div>
)

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

@ -1186,7 +1186,15 @@ const MopidyMiddleware = (function(){
});
// Start our process to load the full album objects
store.dispatch(uiActions.startProcess('MOPIDY_LIBRARY_ALBUMS_PROCESSOR','Loading '+uris.length+' local albums', {uris: uris}))
store.dispatch(uiActions.startProcess(
'MOPIDY_LIBRARY_ALBUMS_PROCESSOR',
'Loading '+uris.length+' local albums',
{
uris: uris,
total: uris.length,
remaining: uris.length
}
))
})
} else if (last_run.status == 'cancelled'){
@ -1211,7 +1219,14 @@ const MopidyMiddleware = (function(){
var uris_to_load = uris.splice(0,50)
if (uris_to_load.length > 0){
store.dispatch(uiActions.updateProcess('MOPIDY_LIBRARY_ALBUMS_PROCESSOR', 'Loading '+uris.length+' local albums', {uris: uris}))
store.dispatch(uiActions.updateProcess(
'MOPIDY_LIBRARY_ALBUMS_PROCESSOR',
'Loading '+uris.length+' local albums',
{
uris: uris,
remaining: uris.length
}
))
store.dispatch(mopidyActions.getAlbums(uris_to_load, {name: 'MOPIDY_LIBRARY_ALBUMS_PROCESSOR', data: {uris: uris}}))
} else {
store.dispatch(uiActions.processFinished('MOPIDY_LIBRARY_ALBUMS_PROCESSOR'))

30
src/js/services/spotify/actions.js
View File

@ -1372,7 +1372,15 @@ export function getLibraryPlaylistsProcessor(data){
var total = response.total
var loaded = getState().spotify.library_playlists.length
var remaining = total - loaded
dispatch(uiActions.updateProcess('SPOTIFY_GET_LIBRARY_PLAYLISTS_PROCESSOR', 'Loading '+remaining+' Spotify playlists', {next: response.next}))
dispatch(uiActions.updateProcess(
'SPOTIFY_GET_LIBRARY_PLAYLISTS_PROCESSOR',
'Loading '+remaining+' Spotify playlists',
{
next: response.next,
total: response.total,
remaining: remaining
}
))
dispatch(uiActions.runProcess('SPOTIFY_GET_LIBRARY_PLAYLISTS_PROCESSOR', {next: response.next}))
} else {
dispatch(uiActions.processFinished('SPOTIFY_GET_LIBRARY_PLAYLISTS_PROCESSOR'))
@ -1425,7 +1433,15 @@ export function getLibraryArtistsProcessor(data){
var total = response.artists.total
var loaded = getState().spotify.library_artists.length
var remaining = total - loaded
dispatch(uiActions.updateProcess('SPOTIFY_GET_LIBRARY_ARTISTS_PROCESSOR', 'Loading '+remaining+' Spotify artists', {next: response.artists.next}))
dispatch(uiActions.updateProcess(
'SPOTIFY_GET_LIBRARY_ARTISTS_PROCESSOR',
'Loading '+remaining+' Spotify artists',
{
next: response.artists.next,
total: response.artists.total,
remaining: remaining
}
))
dispatch(uiActions.runProcess('SPOTIFY_GET_LIBRARY_ARTISTS_PROCESSOR', {next: response.artists.next}))
} else {
dispatch(uiActions.processFinished('SPOTIFY_GET_LIBRARY_ARTISTS_PROCESSOR'))
@ -1478,7 +1494,15 @@ export function getLibraryAlbumsProcessor(data){
var total = response.total
var loaded = getState().spotify.library_albums.length
var remaining = total - loaded
dispatch(uiActions.updateProcess('SPOTIFY_GET_LIBRARY_ALBUMS_PROCESSOR', 'Loading '+remaining+' Spotify albums', {next: response.next}))
dispatch(uiActions.updateProcess(
'SPOTIFY_GET_LIBRARY_ALBUMS_PROCESSOR',
'Loading '+remaining+' Spotify albums',
{
next: response.next,
total: response.total,
remaining: remaining
}
))
dispatch(uiActions.runProcess('SPOTIFY_GET_LIBRARY_ALBUMS_PROCESSOR', {next: response.next}))
} else {
dispatch(uiActions.processFinished('SPOTIFY_GET_LIBRARY_ALBUMS_PROCESSOR'))

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

@ -113,7 +113,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.startProcess('test_process', 'Test process')}>Start process</a>
<a className="button secondary" onClick={e => this.props.uiActions.startProcess('test_process', 'Test process', {total: 100, remaining: 76})}>Start process</a>
<a className="button secondary" onClick={e => this.props.uiActions.processFinished('test_process')}>Stop process</a>
</div>
</div>

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

@ -76,7 +76,9 @@
position: absolute;
top: 16px;
left: 18px;
opacity: 1;
opacity: 1;
z-index: 2;
border-radius: 50%;
&:before {
border-color: transparent;
@ -85,6 +87,18 @@
&:after {
border-right-color: $white;
}
.progress {
background: $light_blue;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 0px solid $blue;
box-sizing: border-box;
border-radius: 50%;
}
}
}
}

4
src/scss/global/_core.scss
View File

@ -262,6 +262,10 @@ button.placeholder {
@include clearfix;
}
.hidden {
display: none !important;
}
.pulse { @include pulse(); }
.one-liner { @include one_line_text; }
.centred-text { text-align: center; }

1
src/scss/global/_variables.scss
View File

@ -13,6 +13,7 @@ $black: #000000;
$red: #cf2d2d;
$green: #47af2a;
$blue: #32b5f2;
$light_blue: #96cfea;
$yellow: #FFF39C;
$orange: #f16f19;
$overlay_dark: rgba(0, 0, 0, 0.88);