BlockStorage/repertory-ui
Archived
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

[Repertory release notification icon] [Prevent release change when mount is busy] [Initial loading animation]

Browse Source
This commit is contained in:
Scott E. Graves
2018-09-26 02:20:11 -05:00
parent 762a7ec6e3
commit 0f12f7e33a
8 changed files with 119 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files

122
src/App.js
View File

@@ -12,7 +12,7 @@ import Modal from './components/UI/Modal/Modal';
import DownloadProgress from './components/DownloadProgress/DownloadProgress'; import DownloadProgress from './components/DownloadProgress/DownloadProgress';
import UpgradeUI from './components/UpgradeUI/UpgradeUI'; import UpgradeUI from './components/UpgradeUI/UpgradeUI';
import UpgradeIcon from './components/UpgradeIcon/UpgradeIcon'; import UpgradeIcon from './components/UpgradeIcon/UpgradeIcon';
import Loading from './components/UI/Loading/Loading';
const Scheduler = require('node-schedule'); const Scheduler = require('node-schedule');
let ipcRenderer = null; let ipcRenderer = null;
@@ -62,12 +62,21 @@ class App extends Component {
const locationsLookup = { const locationsLookup = {
...response.data.Locations[this.state.Platform], ...response.data.Locations[this.state.Platform],
}; };
const latestVersion = this.state.VersionLookup[this.state.ReleaseTypes[this.state.Release]].length - 1;
let version = this.state.Version;
if (version === -1) {
version = latestVersion;
}
this.setState({ this.setState({
AllowOptions: true, AllowOptions: true,
LocationsLookup: locationsLookup, LocationsLookup: locationsLookup,
Version: version,
VersionAvailable: version !== latestVersion,
VersionLookup: versionLookup, VersionLookup: versionLookup,
}); });
this.checkVersionInstalled(this.state.Release, this.state.Version, versionLookup); this.checkVersionInstalled(this.state.Release, version, versionLookup);
}).catch(error => { }).catch(error => {
console.log(error); console.log(error);
}); });
@@ -212,6 +221,7 @@ class App extends Component {
}, },
LocationsLookup: {}, LocationsLookup: {},
MissingDependencies: [], MissingDependencies: [],
MountsBusy: false,
Platform: 'unknown', Platform: 'unknown',
Release: 3, Release: 3,
ReleaseTypes: [ ReleaseTypes: [
@@ -228,7 +238,8 @@ class App extends Component {
UpgradeAvailable: false, UpgradeAvailable: false,
UpgradeData: {}, UpgradeData: {},
UpgradeDismissed: false, UpgradeDismissed: false,
Version: 0, Version: -1,
VersionAvailable: false,
VersionLookup: { VersionLookup: {
Alpha: [ Alpha: [
'unavailable' 'unavailable'
@@ -341,12 +352,13 @@ class App extends Component {
handleReleaseChanged = (e) => { handleReleaseChanged = (e) => {
const val = parseInt(e.target.value, 10); const val = parseInt(e.target.value, 10);
const versionIndex = this.state.VersionLookup[this.state.ReleaseTypes[this.state.Release]].length - 1;
this.setState({ this.setState({
Release: val, Release: val,
Version: 0 Version: versionIndex
}); });
this.saveState(val, 0, this.state.Sia, this.state.Hyperspace); this.saveState(val, versionIndex, this.state.Sia, this.state.Hyperspace);
this.checkVersionInstalled(val, 0); this.checkVersionInstalled(val, versionIndex);
}; };
handleReleaseDownload = () => { handleReleaseDownload = () => {
@@ -397,6 +409,10 @@ class App extends Component {
notifyAutoMountProcessed = () => { notifyAutoMountProcessed = () => {
this.setState({AutoMountChecked: true}); this.setState({AutoMountChecked: true});
}; };
notifyMountsBusy = (busy) => {
this.setState({MountsBusy: busy})
};
saveState = (release, version, sia, hyperspace)=> { saveState = (release, version, sia, hyperspace)=> {
if (ipcRenderer) { if (ipcRenderer) {
@@ -421,8 +437,11 @@ class App extends Component {
}; };
render() { render() {
const selectedVersion = this.state.VersionLookup[this.state.ReleaseTypes[this.state.Release]][this.state.Version]; const selectedVersion = (this.state.Version === -1) ?
'unavailable' :
this.state.VersionLookup[this.state.ReleaseTypes[this.state.Release]][this.state.Version];
const downloadEnabled = this.state.AllowDownload && const downloadEnabled = this.state.AllowDownload &&
!this.state.MountsBusy &&
!this.state.DownloadActive && !this.state.DownloadActive &&
(((selectedVersion !== 'unavailable') && (selectedVersion !== this.state.RepertoryVersion))); (((selectedVersion !== 'unavailable') && (selectedVersion !== this.state.RepertoryVersion)));
const allowMount = this.state.RepertoryVersion !== 'none'; const allowMount = this.state.RepertoryVersion !== 'none';
@@ -437,6 +456,7 @@ class App extends Component {
processAutoMount={!this.state.AutoMountChecked} processAutoMount={!this.state.AutoMountChecked}
autoMountProcessed={this.notifyAutoMountProcessed} autoMountProcessed={this.notifyAutoMountProcessed}
autoMountChanged={this.handleAutoMountChanged} autoMountChanged={this.handleAutoMountChanged}
mountsBusy={this.notifyMountsBusy}
version={this.state.RepertoryVersion} version={this.state.RepertoryVersion}
directory={Constants.DATA_LOCATIONS[this.state.Platform]} directory={Constants.DATA_LOCATIONS[this.state.Platform]}
disabled={!allowMount}/>; disabled={!allowMount}/>;
@@ -484,51 +504,53 @@ class App extends Component {
); );
} }
let options = null; let mainContent = null;
if (this.state.AllowOptions) { if (this.state.AllowOptions) {
options = ( mainContent = (
<table width='100%' cellPadding='2'> <table width='100%' cellPadding='2'>
<tbody> <tbody>
<tr> <tr>
<td width='33%'> <td width='33.33%'>
<h2>Release</h2> <h2>Release</h2>
</td> </td>
<td width='33%'> <td width='33.33%'>
<h2>Version</h2> <h2>Version<UpgradeIcon release available={this.state.VersionAvailable}/></h2>
</td> </td>
<td width='33%'> <td width='33.33%'>
<h2>Installed</h2> <h2>Installed</h2>
</td> </td>
</tr> </tr>
<tr> <tr>
<td> <td>
<DropDown disabled={this.state.DownloadActive || this.state.ExtractActive} <DropDown disabled={this.state.DownloadActive || this.state.ExtractActive || this.state.MountsBusy}
items={this.state.ReleaseTypes} items={this.state.ReleaseTypes}
selected={this.state.Release} selected={this.state.Release}
changed={this.handleReleaseChanged}/> changed={this.handleReleaseChanged}/>
</td> </td>
<td> <td>
<DropDown disabled={this.state.DownloadActive || this.state.ExtractActive} <DropDown disabled={this.state.DownloadActive || this.state.ExtractActive || this.state.MountsBusy}
items={this.state.VersionLookup[this.state.ReleaseTypes[this.state.Release]]} items={this.state.VersionLookup[this.state.ReleaseTypes[this.state.Release]]}
selected={this.state.Version} selected={this.state.Version}
changed={this.handleVersionChanged}/> changed={this.handleVersionChanged}/>
</td> </td>
<td> <td>
{this.state.RepertoryVersion} {this.state.RepertoryVersion}
</td> </td>
</tr> </tr>
<tr> <tr>
<td colSpan={3}> <td colSpan={3}>
{releaseDisplay} {releaseDisplay}
</td> </td>
</tr> </tr>
<tr> <tr>
<td colSpan={3}> <td colSpan={3}>
{mountDisplay} {mountDisplay}
</td> </td>
</tr> </tr>
</tbody> </tbody>
</table>); </table>);
} else {
mainContent = <Loading/>
} }
return ( return (
@@ -536,7 +558,7 @@ class App extends Component {
{dependencyDisplay} {dependencyDisplay}
{upgradeDisplay} {upgradeDisplay}
{downloadDisplay} {downloadDisplay}
<Box dxDark dxStyle={{'height': 'auto', 'padding': '2px'}}> <Box dxDark dxStyle={{height: '9.3%', padding: '2px'}}>
<table cellPadding={0} cellSpacing={0} style={{margin: 0, padding: 0}}> <table cellPadding={0} cellSpacing={0} style={{margin: 0, padding: 0}}>
<tbody style={{margin: 0, padding: 0}}> <tbody style={{margin: 0, padding: 0}}>
<tr style={{margin: 0, padding: 0}}> <tr style={{margin: 0, padding: 0}}>
@@ -553,8 +575,8 @@ class App extends Component {
</tbody> </tbody>
</table> </table>
</Box> </Box>
<Box dxStyle={{'padding': '4px', 'marginTop': '10px'}}> <Box dxStyle={{padding: '4px', marginTop: '10px', height: '90.7%'}}>
{options} {mainContent}
</Box> </Box>
</div> </div>
); );

BIN
src/assets/images/release_available.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 77 KiB

BIN
src/assets/images/upgrade_available.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 175 KiB

16
src/components/UI/Loading/Loading.css Normal file
View File

@@ -0,0 +1,16 @@
.Loading {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
.Content {
margin: 0;
padding: 0;
position: relative;
top: 50%; left: 50%;
transform: translate(-50%,-50%);
width: 28px;
height: 28px;
}

17
src/components/UI/Loading/Loading.js Normal file
View File

@@ -0,0 +1,17 @@
import React from 'react';
import CSSModules from 'react-css-modules';
import styles from './Loading.css'
import Loader from 'react-loader-spinner';
export default CSSModules((props) => {
return (
<div
styleName='Loading'>
<div styleName='Content'>
<Loader color={'var(--heading_text_color)'}
height='28px'
width='28px'
type='ThreeDots'/>
</div>
</div>);
}, styles, {allowMultiple: true});

5
src/components/UpgradeIcon/UpgradeIcon.css
View File

@@ -7,8 +7,5 @@
border: 0; border: 0;
box-sizing: border-box; box-sizing: border-box;
cursor: pointer; cursor: pointer;
} opacity: 0.65;
div.UpgradeIcon {
cursor: default;
} }

11
src/components/UpgradeIcon/UpgradeIcon.js
View File

@@ -1,10 +1,15 @@
import React from 'react'; import React from 'react';
import CSSModules from 'react-css-modules'; import CSSModules from 'react-css-modules';
import styles from './UpgradeIcon.css'; import styles from './UpgradeIcon.css';
import availableImage from '../../assets/images/upgrade_available.png'; import availableImage from '../../assets/images/release_available.png';
export default CSSModules((props) => { export default CSSModules((props) => {
let style;
if (props.release) {
style = {float: 'right', marginRight: '5%', cursor: 'default'};
}
return props.available ? return props.available ?
<img alt='' styleName='UpgradeIcon' src={availableImage} onClick={props.clicked}/> : <img alt='' style={style} styleName='UpgradeIcon' src={availableImage} onClick={props.clicked}/> :
<div styleName='UpgradeIcon'/> ; null;
}, styles, {allowMultiple: true}); }, styles, {allowMultiple: true});

5
src/containers/MountItems/MountItems.js
View File

@@ -35,6 +35,8 @@ class MountItems extends Component {
Sia: sia, Sia: sia,
}); });
this.props.mountsBusy(hs.Mounted || sia.Mounted);
let hsLocation = arg.data.Locations.Hyperspace; let hsLocation = arg.data.Locations.Hyperspace;
if ((hsLocation.length === 0) && (this.props.platform === 'win32')) { if ((hsLocation.length === 0) && (this.props.platform === 'win32')) {
hsLocation = this.props.hyperspace.MountLocation || arg.data.DriveLetters.Hyperspace[0]; hsLocation = this.props.hyperspace.MountLocation || arg.data.DriveLetters.Hyperspace[0];
@@ -92,6 +94,7 @@ class MountItems extends Component {
}; };
detectMounts = ()=> { detectMounts = ()=> {
this.props.mountsBusy(true);
ipcRenderer.send('detect_mounts', { ipcRenderer.send('detect_mounts', {
Directory: this.props.directory, Directory: this.props.directory,
Version: this.props.version, Version: this.props.version,
@@ -117,6 +120,8 @@ class MountItems extends Component {
[storageType]: state, [storageType]: state,
}); });
this.props.mountsBusy(true);
if (mount) { if (mount) {
ipcRenderer.send('mount_drive', { ipcRenderer.send('mount_drive', {
Directory: this.props.directory, Directory: this.props.directory,