michael.reber/rclone-webui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

When mounts or remotes are empty hide them on UI

Browse Source
This commit is contained in:
Michael Reber 2025-05-06 19:10:35 +02:00
parent f49ff032d4
commit bc37b903b3
1 changed files with 29 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

49
src/App.js
View File

@ -43,11 +43,12 @@ class App extends Component {
// }
// ]
},
remotes: [{
//remotes: [{
// name: "gdrive",
// type: "drive",
// bytes: 84265292526
}],
//}],
remotes: [],
mounts: [],
transferred: [],
version: {
@ -286,13 +287,15 @@ class App extends Component {
* @returns {Component}
*/
renderRemotes = () => {
return this.state.remotes.map(v => (
const { remotes } = this.state
if (remotes.length === 0) return null
return remotes.map(v => (
<InfosRow
key={"mount" + v.name}
data-tip={bytesToString(v.bytes, { fixed: 2 })}
data-for={"size"+v.MountPoint}
//onClick={() => this.openBrowser(v.name)}
>
data-for={"size"+v.MountPoint}>
<p>{v.name}</p>
<p>{v.type}</p>
{/* add EDIT button */}
@ -306,11 +309,13 @@ class App extends Component {
* @returns {Component}
*/
renderMounts = () => {
return this.state.mounts.map(v => (
<Fragment key={v.MountPoint} >
<p> {v.Fs} </p>
<p> {v.MountPoint} </p>
{/* add DELETE button */}
const { mounts } = this.state
if (mounts.length === 0) return null
return mounts.map(v => (
<Fragment key={v.MountPoint}>
<p>{v.Fs}</p>
<p>{v.MountPoint}</p>
</Fragment>
))
}
@ -370,7 +375,7 @@ class App extends Component {
}
render = () => {
const { stats, version, endPointAvailable } = this.state
const { stats, version, endPointAvailable, remotes, mounts } = this.state
const { elapsedTime, transfers, bytes, errors, lastError, transferring } = stats
return (
@ -438,15 +443,19 @@ class App extends Component {
<p> { version.arch } </p>
</InfosWrapper>
<InfosWrapper style={{ minHeight: "6rem" }}>
<h2> Remotes </h2> {/* add NEW button */}
{ this.renderRemotes() }
</InfosWrapper>
{remotes.length > 0 && (
<InfosWrapper style={{ minHeight: "6rem" }}>
<h2> Remotes </h2> {/* add NEW button */}
{ this.renderRemotes() }
</InfosWrapper>
)}
<InfosWrapper style={{ minHeight: "4.5rem" }}>
<h2> Mounts </h2> {/* add NEW button */}
{ this.renderMounts() }
</InfosWrapper>
{mounts.length > 0 && (
<InfosWrapper style={{ minHeight: "4.5rem" }}>
<h2> Mounts </h2> {/* add NEW button */}
{ this.renderMounts() }
</InfosWrapper>
)}
<Settings />