8000 WIP FTP ui bindings · arduino/lab-micropython-editor@88b35a4 · GitHub
[go: up one dir, main page]
Skip to content

Commit 88b35a4

Browse files
murilopolesemurilopolese
committed
WIP FTP ui bindings
1 parent 8dc5027 commit 88b35a4

11 files changed

+490
-236
lines changed

‎ui/ftp/components/diskView.tsx

Lines changed: 84 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
1+
import React from 'react'
2+
3+
const DiskView: React.FC = ({ logic }) => {
4+
const { waiting } = logic()
5+
return (
6+
<div className="column file-panel">
7+
<div className="toolbar row full-width">
8+
<button>Select folder</button>
9+
</div>
10+
<div className="row full-width navigation">
11+
<button>/</button>
12+
<button>home</button>
13+
<button>projects</button>
14+
<button>arduino</button>
15+
<button>micropython</button>
16+
<button>example</button>
17+
</div>
18+
<div className="column full-width full-height list">
19+
<div className="list-item">
20+
<div className="checkbox">📁</div>
21+
lib
22+
</div>
23+
<div className="list-item">
24+
<input type="checkbox" />
25+
<span>boot.py</span>
26+
</div>
27+
<div className="list-item">
28+
<input type="checkbox" />
29+
<span>main.py</span>
30+
</div>
31+
<div className="list-item">
32+
<input type="checkbox" />
33+
<span>turing_machine.py</span>
34+
</div>
35+
<div className="list-item">
36+
<input type="checkbox" />
37+
<span>README.md</span>
38+
</div>
39+
<div className="list-item">
40+
<div className="checkbox">📁</div>
41+
lib
42+
</div>
43+
<div className="list-item">
44+
<input type="checkbox" />
45+
<span>boot.py</span>
46+
</div>
47+
<div className="list-item">
48+
<input type="checkbox" />
49+
<span>main.py</span>
50+
</div>
51+
<div className="list-item">
52+
<input type="checkbox" />
53+
<span>turing_machine.py</span>
54+
</div>
55+
<div className="list-item">
56+
<input type="checkbox" />
57+
<span>README.md</span>
58+
</div>
59+
<div className="list-item">
60+
<div className="checkbox">📁</div>
61+
lib
62+
</div>
63+
<div className="list-item">
64+
<input type="checkbox" />
65+
<span>boot.py</span>
66+
</div>
67+
<div className="list-item">
68+
<input type="checkbox" />
69+
<span>main.py</span>
70+
</div>
71+
<div className="list-item">
72+
<input type="checkbox" />
73+
<span>turing_machine.py</span>
74+
</div>
75+
<div className="list-item">
76+
<input type="checkbox" />
77+
<span>README.md</span>
78+
</div>
79+
</div>
80+
</div>
81+
)
82+
}
83+
84+
export default DiskView

‎ui/ftp/components/fileManagementView.tsx

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
import React from 'react'
2+
3+
type FileManagementParams = () => {
4+
upload: () => void
5+
download: () => void
6+
remove: () => void
7+
refresh: () => void
8+
}
9+
10+
const FileManagementView: React.FC = ({ logic }) => {
11+
const { refresh } : FileManagementParams = logic()
12+
return (
13+
<div className="file-management column align-center justify-center">
14+
<button onClick={refresh}>↺</button>
15+
<button>←</button>
16+
<button>→</button>
17+
<button>×</button>
18+
</div>
19+
)
20+
}
21+
22+
export default FileManagementView

‎ui/ftp/components/files/diskFiles.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ const DiskFiles: React.FC = ({ diskFilesLogic }) => {
1515
const onSelect = (folder) => () => selectFile([diskPath,folder].join('/'))
1616
const files = diskFiles.map((folder, i) => {
1717
const checked = selectedFiles
18-
.filter(f => f.device === Device.disk)
18+
.filter(f => f.device === DeviceType.disk)
1919
.find(f => f.path === [diskPath,folder].join('/'))
2020
return (
2121
<li key={i}>

‎ui/ftp/components/files/serialFiles.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ const SerialFiles: React.FC = ({ serialFilesLogic }) => {
1515
const onSelect = (folder) => () => selectFile([serialPath,folder].join('/'))
1616
const files = serialFiles.map((folder, i) => {
1717
const checked = selectedFiles
18-
.filter(f => f.device === Device.serial)
18+
.filter(f => f.device === DeviceType.serial)
1919
.find(f => f.path === [serialPath,folder].join('/'))
2020
return (
2121
<li key={i}>

‎ui/ftp/components/loadinbView.tsx

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
import React from 'react'
2+
3+
const LoadingView: React.FC = ({ logic }) => {
4+
const { waiting } = logic()
5+
if (waiting) return <div id="loading">Wait</div>
6+
return <></>
7+
}
8+
9+
export default LoadingView

‎ui/ftp/components/serialView.tsx

Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
import { React } from 'react'
2+
3+
import {
4+
File,
5+
AvailableDevice
6+
} from '../main.type.ts'
7+
8+
type SerialParams = () => {
9+
availableDevices: AvailableDevices[]
10+
connectedDevice: string
11+
serialPath: string
12+
serialFiles: String[]
13+
selectedFiles: File[]
14+
connect: (path: string) => void
15+
disconnect: () => void
16+
selectFile: (path: string) => void
17+
refresh: () => void
18+
navigate: (path: string) => void
19+
}
20+
21+
const SerialView: React.FC = ({ logic }) => {
22+
const {
23+
availableDevices = [],
24+
serialFiles = [],
25+
serialPath = '',
26+
connect,
27+
disconnect
28+
} : SerialParams = logic()
29+
30+
const onSelectDevice = (e) => {
31+
const value = e.target.value
32+
if (value === "null") {
33+
disconnect()
34+
} else {
35+
connect(value)
36+
}
37+
}
38+
39+
const ListItem = (file: File, i: number) => (
40+
<div className="list-item" key={i}>
41+
<input className="checkbox" type="checkbox" />
42+
<span>{file}</span>
43+
</div>
44+
)
45+
46+
const NavigationItem = (name: string, i:number) => (
47+
<button key={i}>{name}</button>
48+
)
49+
let serialPathArray = []
50+
if (serialPath) {
51+
serialPathArray = ['/'].concat(
52+
serialPath.split('/').filter(s => s !== '')
53+
)
54+
}
55+
56+
return (
57+
<div className="column file-panel">
58+
<div className="toolbar row">
59+
<select onChange={onSelectDevice}>
60+
<option value="null">Select a device...</option>
61+
{availableDevices.map((d, i) => <option key={i}>{d.path}</option>)}
62+
</select>
63+
</div>
64+
<div className="row full-width navigation">
65+
{serialPathArray.map(NavigationItem)}
66+
</div>
67+
<div className="column full-width list full-height">
68+
{serialFiles.map(ListItem)}
69+
</div>
70+
</div>
71+
)
72+
}
73+
74+
export default SerialView

‎ui/ftp/components/toolbar/toolbar.tsx

Lines changed: 37 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -3,40 +3,44 @@ import styles from './toolbar.module.scss'
33
import Button from '../shared/button.tsx'
44

55

6-
const Toolbar: React.FC = ({ toolbarLogic }) => {
7-
const {
8-
openFolder,
9-
refresh,
10-
connect,
11-
disconnect,
12-
connectedDevice,
13-
availableDevices = []
14-
} = toolbarLogic()
15-
const [ selectedDevice, setSelectedDevice ] = useState<String | null>()
16-
const onChange = (e) => setSelectedDevice(e.target.value)
17-
const onConnect = () => connect(selectedDevice)
6+
const Toolbar: React.FC = ({ toolbarLogic }) => {
7+
const {
8+
openFolder,
9+
refresh,
10+
connect,
11+
disconnect,
12+
connectedDevice,
13+
availableDevices = []
14+
} = toolbarLogic()
15+
const [ selectedDevice, setSelectedDevice ] = useState<String | null>()
16+
const onChange = (e) => setSelectedDevice(e.target.value)
17+
const onConnect = () => {
18+
if (connectedDevice) {
19+
disconnect()
20+
} else {
21+
connect(selectedDevice)
22+
}
23+
}
1824

19-
const deviceSelector = (
20-
<select onChange={onChange} value={selectedDevice}>
21-
<option value="none">Select a device...</option>
22-
{availableDevices.map((d, i) => <option key={i} value={d.path}>{d.path}</option>)}
23-
</select>
24-
)
25-
const deviceDisplay = (
26-
<span>{connectedDevice}</span>
27-
)
25+
const deviceSelector = (
26+
<select onChange={onChange} value={selectedDevice}>
27+
<option value="none">Select a device...</option>
28+
{availableDevices.map((d, i) => <option key={i} value={d.path}>{d.path}</option>)}
29+
</select>
30+
)
31+
const deviceDisplay = <span>{connectedDevice}</span>
2832

29-
return (
30-
<div className={styles.body}>
31-
{connectedDevice ? deviceDisplay : deviceSelector}
32-
<Button onClick={refresh}>Refresh</Button>
33-
<Button onClick={connectedDevice ? disconnect : onConnect}>
34-
{connectedDevice ? 'Disconnect' : 'Connect'}
35-
</Button>
36-
<Button onClick={openFolder}>Select Folder</Button>
37-
{connectedDevice ? <span>Connected</span> : <span>Disconnected</span>}
38-
</div>
39-
)
33+
return (
34+
<div className={styles.body}>
35+
<Button onClick={refresh}>Refresh</Button>
36+
{connectedDevice ? deviceDisplay : deviceSelector}
37+
{connectedDevice ? <span>✅</span> : <span>⛔</span>}
38+
<Button onClick={onConnect}>
39+
{connectedDevice ? 'Disconnect' : 'Connect'}
40+
</Button>
41+
<Button onClick={openFolder}>Select Folder</Button>
42+
</div>
43+
)
4044
}
4145

42-
export default Toolbar
46+
export default Toolbar

0 commit comments

Comments
 (0)
0