Skip to content

Commit 63cc099

Browse files
murilopolesemurilopolese
committed
Serial view plugged
1 parent 88b35a4 commit 63cc099

File tree

8 files changed

+85
-45
lines changed

8 files changed

+85
-45
lines changed

‎index.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -107,6 +107,7 @@ function createWindow () {
107107
}
108108
})
109109
// and load the index.html of the app.
110+
// win.loadFile('ui/editor/index.html')
110111
win.loadFile('ui/ftp/dist/index.html')
111112
}
112113

‎package-lock.json

Lines changed: 4 additions & 5 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -38,9 +38,8 @@
3838
"license": "MIT",
3939
"dependencies": {
4040
"about-window": "^1.15.2",
41-
"micropython.js": "github:murilopolese/micropython.js#v1.2.2",
42-
"mkdirp": "^1.0.3",
43-
"serialport": "^10.4.0"
41+
"micropython.js": "github:arduino/micropython.js#1.3.0",
42+
"mkdirp": "^1.0.3"
4443
},
4544
"engines": {
4645
"node": "18"

‎preload.js

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -50,6 +50,9 @@ const Serial = {
5050
listFiles: async (folder) => {
5151
return await board.fs_ls(folder)
5252
},
53+
ilistFiles: async (folder) => {
54+
return await board.fs_ils(folder)
55+
},
5356
loadFile: async (file) => {
5457
const output = await board.fs_cat(file)
5558
return output || ''

‎ui/ftp/components/serialView.tsx

Lines changed: 32 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import { React } from 'react'
22

33
import {
44
File,
5+
DeviceType,
56
AvailableDevice
67
} from '../main.type.ts'
78

@@ -22,9 +23,12 @@ const SerialView: React.FC = ({ logic }) => {
2223
const {
2324
availableDevices = [],
2425
serialFiles = [],
26+
selectedFiles = [],
2527
serialPath = '',
2628
connect,
27-
disconnect
29+
disconnect,
30+
navigate,
31+
selectFile
2832
} : SerialParams = logic()
2933

3034
const onSelectDevice = (e) => {
@@ -36,16 +40,34 @@ const SerialView: React.FC = ({ logic }) => {
3640
}
3741
}
3842

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-
)
43+
const ListItem = (file: File, i: number) => {
44+
const onClick = () => {
45+
if (file.type === 'file') {
46+
selectFile(file)
47+
} else {
48+
navigate(serialPath + '/' + file.path)
49+
}
50+
}
51+
const checked = selectedFiles
52+
.filter(f => f.device === DeviceType.serial)
53+
.find(f => f.path === file.path)
54+
const icon = file.type === 'file'
55+
? <div className="checkbox">📄</div>
56+
: <div className="checkbox">📁</div>
57+
return (
58+
<div className={`list-item ${checked?'checked':''}`} key={i} onClick={onClick}>
59+
{icon}<span>{file.path}</span>
60+
</div>
61+
)
62+
}
4563

46-
const NavigationItem = (name: string, i:number) => (
47-
<button key={i}>{name}</button>
48-
)
64+
const NavigationItem = (name: string, i:number) => {
65+
const crumbs = serialPath.split('/').filter(c => c !== '')
66+
const path = '/' + crumbs.slice(0, i).join('/')
67+
return (
68+
<button key={i} onClick={() => navigate(path)}>{name}</button>
69+
)
70+
}
4971
let serialPathArray = []
5072
if (serialPath) {
5173
serialPathArray = ['/'].concat(

‎ui/ftp/main.logic.ts

Lines changed: 35 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { useState } from 'react';
22

3-
import { Device, File, AvailableDevices } from './main.type'
3+
import { DeviceType, File, FileType, AvailableDevices } from './main.type'
44

55
export const useMainLogic = function() {
66
const { BridgeSerial, BridgeDisk } = window
@@ -28,11 +28,31 @@ export const useMainLogic = function() {
2828
}
2929

3030
const navigateSerial = async (newPath) => {
31-
const files = await BridgeSerial.listFiles(newPath)
31+
setWaiting(true)
3232
setSerialPath(newPath)
33-
setSerialFiles(files)
33+
await refreshSerialFiles(newPath)
3434
const newSelection = selectedFiles.filter(f => f.device !== DeviceType.serial)
3535
setSelectedFiles(newSelection)
36+
setWaiting(false)
37+
}
38+
39+
const refreshSerialFiles = async (path) => {
40+
const detailedFiles = await BridgeSerial.ilistFiles(path)
41+
const folders = detailedFiles.filter(f => f[1] === FileType.folder) || []
42+
const files = detailedFiles.filter(f => f[1] === FileType.file) || []
43+
const sortedFiles = folders.concat(files)
44+
.map(f => ({
45+
path: f[0],
46+
type: (f[1] === FileType.folder) ? 'folder' : 'file',
47+
size: f[3],
48+
device: DeviceType.serial
49+
})) || []
50+
setSerialFiles(sortedFiles)
51+
}
52+
53+
const refreshDiskFiles = async () => {
54+
const files = await BridgeDisk.listFiles(diskPath)
55+
setDiskFiles(files)
3656
}
3757

3858
const refresh = async () => {
@@ -41,19 +61,12 @@ export const useMainLogic = function() {
4161
const devices = await BridgeSerial.loadPorts()
4262
setAvailableDevices(devices)
4363
// list serial files
44-
if (connectedDevice) {
45-
const files = await BridgeSerial.listFiles(serialPath)
46-
setSerialFiles(files)
47-
} else {
48-
setSerialFiles([])
49-
}
64+
if (connectedDevice) await refreshSerialFiles(serialPath)
65+
else setSerialFiles([])
5066
// list disk files
51-
if (diskPath) {
52-
const files = await BridgeDisk.listFiles(diskPath)
53-
setDiskFiles(files)
54-
} else {
55-
setDiskFiles([])
56-
}
67+
if (diskPath) await refreshDiskFiles()
68+
else setDiskFiles([])
69+
5770
setWaiting(false)
5871
}
5972

@@ -63,13 +76,12 @@ export const useMainLogic = function() {
6376
serialPath: serialPath,
6477
serialFiles: serialFiles,
6578
selectedFiles: selectedFiles,
66-
connect: async (devicePath: String) => {
79+
connect: async (port: String) => {
6780
setWaiting(true)
68-
await BridgeSerial.connect(devicePath)
69-
setConnectedDevice(devicePath)
81+
await BridgeSerial.connect(port)
82+
setConnectedDevice(port)
7083
setSerialPath('/')
71-
const files = await BridgeSerial.listFiles('/')
72-
setSerialFiles(files)
84+
refreshSerialFiles(serialPath)
7385
setWaiting(false)
7486
},
7587
disconnect: async () => {
@@ -80,17 +92,13 @@ export const useMainLogic = function() {
8092
setSerialFiles([])
8193
setWaiting(false)
8294
},
83-
selectFile: (path) => {
95+
selectFile: (file: File) => {
8496
const serialFilesOnly = selectedFiles.filter(f => f.device === DeviceType.serial)
85-
const selected = serialFilesOnly.find(f => f.path === path)
97+
const selected = serialFilesOnly.find(f => f.path === file.path)
8698
if (selected) {
87-
let newSelection = serialFilesOnly.filter(f => f.path !== path)
99+
let newSelection = serialFilesOnly.filter(f => f.path !== file.path)
88100
setSelectedFiles(newSelection)
89101
} else {
90-
let file = {
91-
path: path,
92-
device: DeviceType.serial
93-
}
94102
serialFilesOnly.push(file)
95103
setSelectedFiles(serialFilesOnly.slice())
96104
}

‎ui/ftp/main.scss

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -91,6 +91,11 @@ main {
9191
&:hover {
9292
background: var(--dark-tone);
9393
}
94+
&.checked {
95+
background: var(--highlight-color);
96+
color: var(--light-color);
97+
font-weight: bold;
98+
}
9499
}
95100

96101
.navigation {

‎ui/ftp/main.type.ts

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,11 @@
11
export enum DeviceType { serial, disk }
2+
export enum FileType { file = 0x8000, folder = 0x4000 }
23

34
export type File = {
45
path: String
6+
type: FileType
57
device: Device
8+
size: Number
69
}
710

811
export type AvailableDevice = {

0 commit comments

Comments
 (0)
pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy