Skip to content

Commit

Permalink
Merge pull request #54 from sustech-cs304/feat-ui
Browse files Browse the repository at this point in the history 
implement file open UI
  • Loading branch information
@vollate
vollate authored Apr 16, 2024
2 parents d91977e + 0158f4e commit 8142c9d
Show file tree
Hide file tree
Showing 7 changed files with 148 additions and 65 deletions.
1 change: 1 addition & 0 deletions src-ui/app/layout.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ export const metadata = {
};

export default function RootLayout({ children }) {

return (
<html lang="en">
<body>
Expand Down
23 changes: 23 additions & 0 deletions src-ui/app/page.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,31 @@ import MultifileCode from "@/components/MultifileCode";
import Register from "@/components/Register";
import MessageIO from "@/components/MessageIO";
import {Card, CardBody, Textarea} from "@nextui-org/react";
import { useEffect } from "react";
import { listen } from '@tauri-apps/api/event';
import useFileStore from "@/utils/state";

export default function Home() {
const state = useFileStore();

useEffect(() => {
const unListenedFileOpen = listen('front_file_open', (event) => {
// setOutput(prevOutput => prevOutput + '\nEvent received:\n' + JSON.stringify(event.payload));
state.addFile(
{
fileName: event.payload["file_path"],
code: event.payload["content"],
}
);
return event.payload;
});


return () => {
unListenedFileOpen.then(dispose => dispose());
};
}, []);

return (
<main className='h-[calc(100vh-45px)]'>
<div className='grid grid-cols-7 gap-4 p-2 max-h-[calc(100vh-45px)] w-full'>
Expand Down
108 changes: 63 additions & 45 deletions src-ui/components/Code.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import {Table, TableHeader, TableBody, TableRow, TableColumn, TableCell} from "@
import TestPage from "@/components/TestPage";


export default function Code() {
export default function Code({fileName}) {

return (
<div className="flex flex-col h-full">
Expand All @@ -18,68 +18,86 @@ export default function Code() {
<Tab key="file2" title="file2.m" className="h-full"> <Editor language='javascript' className='overflow-hidden h-full'/> </Tab>
<Tab key="file3" title="file3.m" className="h-full"> <Editor language='javascript' className='overflow-hidden h-full'/> </Tab>
</Tabs> */}
<ModifiedEditor />
<ModifiedEditor fileName={fileName}/>
</CardBody>
</Card>
</Tab>
<Tab key="excecute" title="Excecute" className="h-full">
<Tab key="excecute" title="Execute" className="h-full">
<Card className='h-full'>
<CardBody className="h-full flow grid-flow-row gap-4">
<Table aria-label="Example static collection table" className='row-span-1'>
<Table aria-label="Example static collection table" disallowEmptySelection selectionMode="single" className='row-span-1' color="success" defaultSelectedKeys={["r1"]}>
<TableHeader>
<TableColumn>NAME</TableColumn>
<TableColumn>ROLE</TableColumn>
<TableColumn>STATUS</TableColumn>
<TableColumn>Line</TableColumn>
<TableColumn>Code</TableColumn>
</TableHeader>
<TableBody>
<TableRow key="1">
<TableCell>Tony Reichert</TableCell>
<TableCell>CEO</TableCell>
<TableCell>Active</TableCell>
<TableRow key="r1">
<TableCell>1</TableCell>
<TableCell>li x1, 0</TableCell>
</TableRow>
<TableRow key="2">
<TableCell>Zoey Lang</TableCell>
<TableCell>Technical Lead</TableCell>
<TableCell>Paused</TableCell>
</TableRow>
<TableRow key="4">
<TableCell>William Howard</TableCell>
<TableCell>Community Manager</TableCell>
<TableCell>Vacation</TableCell>
</TableRow>
<TableRow key="5">
<TableCell>William Howard</TableCell>
<TableCell>Community Manager</TableCell>
<TableCell>Vacation</TableCell>
<TableRow key="r2" >
<TableCell>2</TableCell>
<TableCell>add x2, x1, x3 </TableCell>
</TableRow>
</TableBody>
</Table>
<Table aria-label="Example static collection table" className='row-span-1'>
<Table aria-label="Example static collection table" className='row-span-1' hideHeader>
<TableHeader>
<TableColumn>NAME</TableColumn>
<TableColumn>ROLE</TableColumn>
<TableColumn>STATUS</TableColumn>
<TableColumn>1</TableColumn>
<TableColumn>2</TableColumn>
<TableColumn>3</TableColumn>
<TableColumn>4</TableColumn>
<TableColumn>5</TableColumn>
<TableColumn>6</TableColumn>
</TableHeader>
<TableBody>
<TableRow key="1">
<TableCell>Tony Reichert</TableCell>
<TableCell>CEO</TableCell>
<TableCell>Active</TableCell>
<TableRow key="r1">
<TableCell>0x00000000</TableCell>
<TableCell>0x00000000</TableCell>
<TableCell>0x00000000</TableCell>
<TableCell>0x00000000</TableCell>
<TableCell>0x00000000</TableCell>
<TableCell>0x00000000</TableCell>
</TableRow>
<TableRow key="r2">
<TableCell>0x00000000</TableCell>
<TableCell>0x00000000</TableCell>
<TableCell>0x00000000</TableCell>
<TableCell>0x00000000</TableCell>
<TableCell>0x00000000</TableCell>
<TableCell>0x00000000</TableCell>
</TableRow>
<TableRow key="r3">
<TableCell>0x00000000</TableCell>
<TableCell>0x00000000</TableCell>
<TableCell>0x00000000</TableCell>
<TableCell>0x00000000</TableCell>
<TableCell>0x00000000</TableCell>
<TableCell>0x00000000</TableCell>
</TableRow>
<TableRow key="2">
<TableCell>Zoey Lang</TableCell>
<TableCell>Technical Lead</TableCell>
<TableCell>Paused</TableCell>
<TableRow key="r4">
<TableCell>0x00000000</TableCell>
<TableCell>0x00000000</TableCell>
<TableCell>0x00000000</TableCell>
<TableCell>0x00000000</TableCell>
<TableCell>0x00000000</TableCell>
<TableCell>0x00000000</TableCell>
</TableRow>
<TableRow key="3">
<TableCell>Jane Fisher</TableCell>
<TableCell>Senior Developer</TableCell>
<TableCell>Active</TableCell>
<TableRow key="r5">
<TableCell>0x00000000</TableCell>
<TableCell>0x00000000</TableCell>
<TableCell>0x00000000</TableCell>
<TableCell>0x00000000</TableCell>
<TableCell>0x00000000</TableCell>
<TableCell>0x00000000</TableCell>
</TableRow>
<TableRow key="4">
<TableCell>William Howard</TableCell>
<TableCell>Community Manager</TableCell>
<TableCell>Vacation</TableCell>
<TableRow key="r6">
<TableCell>0x00000000</TableCell>
<TableCell>0x00000000</TableCell>
<TableCell>0x00000000</TableCell>
<TableCell>0x00000000</TableCell>
<TableCell>0x00000000</TableCell>
<TableCell>0x00000000</TableCell>
</TableRow>
</TableBody>
</Table>
Expand Down
15 changes: 12 additions & 3 deletions src-ui/components/ModifiedEditor.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,13 @@ import Editor, {useMonaco} from "@monaco-editor/react";
import React, {useEffect} from "react";
import Image from "next/image";

import useFileStore from "@/utils/state";

export default function ModifiedEditor() {
const monaco = useMonaco()

export default function ModifiedEditor({fileName}) {
const monaco = useMonaco();
const state = useFileStore();
const file = useFileStore(state => state.files.find(file => file.fileName === fileName));
useEffect(() => {
if (monaco) {
monaco.editor.defineTheme('myTheme', {
Expand Down Expand Up @@ -44,7 +48,12 @@ export default function ModifiedEditor() {

return (
<div className='h-full relative'>
<Editor language='javascript' className='overflow-hidden h-full'/>
<Editor
language='javascript'
className='overflow-hidden h-full'
value={file.code}
onChange={(value) => state.updateFile(fileName, value)}
/>
<div className='absolute right-2 top-0 flex-row gap-2'>
<button className='bg-gray-100 rounded-2xl hover:bg-gray-200'>
<Image src='/icons/run.svg' width={16} height={16}/>
Expand Down
19 changes: 10 additions & 9 deletions src-ui/components/MultifileCode.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,18 +1,19 @@
import Code from "@/components/Code";
import {Tab, Tabs} from "@nextui-org/react";

import useFileStore from "@/utils/state";

export default function MultifileCode() {
const state = useFileStore();
const files = useFileStore(state => state.files);

return (
<Tabs size="small" aria-label="Files">
<Tab key="file1.m" title="file1.m" className="h-full">
<Code />
</Tab>
<Tab key="file2.m" title="file2.m" className="h-full">
<Code />
</Tab>
<Tab key="file3.m" title="file3.m" className="h-full">
<Code />
</Tab>
{files.map(file => (
<Tab key={file.fileName} title={file.fileName} className="h-full">
<Code fileName={file.fileName}/>
</Tab>
))}
</Tabs>
);
}
35 changes: 27 additions & 8 deletions src-ui/components/TestPage.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,10 +2,12 @@ import {Input, Button, Textarea} from "@nextui-org/react";
import {invoke} from '@tauri-apps/api/tauri';
import {useState, useEffect} from 'react';
import {listen} from "@tauri-apps/api/event";
import useFileStore from "@/utils/state";

export default function TestPage() {
const [inputValue, setInputValue] = useState('');
const [output, setOutput] = useState('');
const state = useFileStore();

const handleInputChange = (event) => {
setInputValue(event.target.value);
Expand All @@ -20,15 +22,32 @@ export default function TestPage() {
}
};

useEffect(() => {
const unListened = listen('front_file_open', (event) => {
setOutput(prevOutput => prevOutput + '\nEvent received:\n' + JSON.stringify(event.payload));
});
// useEffect(() => {
// const unListened = listen('front_file_open', (event) => {
// setOutput(prevOutput => prevOutput + '\nEvent received:\n' + JSON.stringify(event.payload));
// });

return () => {
unListened.then(dispose => dispose());
};
}, []);
// return () => {
// unListened.then(dispose => dispose());
// };
// }, []);

// useEffect(() => {
// const unListened = listen('front_file_open', (event) => {
// setOutput(prevOutput => prevOutput + '\nEvent received:\n' + JSON.stringify(event.payload));
// state.addFile(
// {
// fileName: event.payload["file_path"],
// code: event.payload["content"],
// }
// );
// return event.payload;
// });

// return () => {
// const result = unListened.then(dispose => dispose());
// };
// }, []);

return (
<div className='items-center gap-4'>
Expand Down
12 changes: 12 additions & 0 deletions src-ui/utils/state.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
import { create } from 'zustand';

// file = { fileName, code }
// fileName should be unique when adding a file
const useFileStore = create((set) => ({
files: [{fileName: 'untitled.S', code: ''}],
addFile: (file) => set(state => ({ files: [...state.files, file] })),
deleteFile: (fileName) => set(state => ({ files: state.files.filter(file => file.fileName !== fileName) })),
updateFile: (fileName, code) => set(state => ({ files: state.files.map(file => file.fileName === fileName ? {...file, code} : file) }))
}))

export default useFileStore;

0 comments on commit 8142c9d

Please sign in to comment.