chore: GUI 增加路由。
This commit is contained in:
107
src/App.tsx
107
src/App.tsx
@ -1,104 +1,17 @@
|
||||
import { createEffect, onCleanup } from 'solid-js';
|
||||
import { invoke } from '@tauri-apps/api/tauri';
|
||||
import { DisplayView } from './components/display-view';
|
||||
import { DisplayListContainer } from './components/display-list-container';
|
||||
import { displayStore, setDisplayStore } from './stores/display.store';
|
||||
import { LedStripConfigContainer } from './models/led-strip-config';
|
||||
import { setLedStripStore } from './stores/led-strip.store';
|
||||
import { listen } from '@tauri-apps/api/event';
|
||||
import { LedStripPartsSorter } from './components/led-strip-parts-sorter';
|
||||
import { createStore } from 'solid-js/store';
|
||||
import {
|
||||
LedStripConfigurationContext,
|
||||
LedStripConfigurationContextType,
|
||||
} from './contexts/led-strip-configuration.context';
|
||||
import { Routes, Route } from '@solidjs/router';
|
||||
import { LedStripConfiguration } from './components/led-strip-configuration/led-strip-configuration';
|
||||
|
||||
function App() {
|
||||
createEffect(() => {
|
||||
invoke<string>('list_display_info').then((displays) => {
|
||||
setDisplayStore({
|
||||
displays: JSON.parse(displays),
|
||||
});
|
||||
});
|
||||
invoke<LedStripConfigContainer>('read_led_strip_configs').then((configs) => {
|
||||
console.log(configs);
|
||||
setLedStripStore(configs);
|
||||
});
|
||||
});
|
||||
|
||||
// listen to config_changed event
|
||||
createEffect(() => {
|
||||
const unlisten = listen('config_changed', (event) => {
|
||||
const { strips, mappers } = event.payload as LedStripConfigContainer;
|
||||
console.log(event.payload);
|
||||
setLedStripStore({
|
||||
strips,
|
||||
mappers,
|
||||
});
|
||||
});
|
||||
|
||||
onCleanup(() => {
|
||||
unlisten.then((unlisten) => unlisten());
|
||||
});
|
||||
});
|
||||
|
||||
// listen to led_colors_changed event
|
||||
createEffect(() => {
|
||||
const unlisten = listen<Uint8ClampedArray>('led_colors_changed', (event) => {
|
||||
const colors = event.payload;
|
||||
|
||||
setLedStripStore({
|
||||
colors,
|
||||
});
|
||||
});
|
||||
|
||||
onCleanup(() => {
|
||||
unlisten.then((unlisten) => unlisten());
|
||||
});
|
||||
});
|
||||
|
||||
// listen to led_sorted_colors_changed event
|
||||
createEffect(() => {
|
||||
const unlisten = listen<Uint8ClampedArray>('led_sorted_colors_changed', (event) => {
|
||||
const sortedColors = event.payload;
|
||||
|
||||
setLedStripStore({
|
||||
sortedColors,
|
||||
});
|
||||
});
|
||||
|
||||
onCleanup(() => {
|
||||
unlisten.then((unlisten) => unlisten());
|
||||
});
|
||||
});
|
||||
|
||||
const [ledStripConfiguration, setLedStripConfiguration] = createStore<
|
||||
LedStripConfigurationContextType[0]
|
||||
>({
|
||||
selectedStripPart: null,
|
||||
});
|
||||
|
||||
const ledStripConfigurationContextValue: LedStripConfigurationContextType = [
|
||||
ledStripConfiguration,
|
||||
{
|
||||
setSelectedStripPart: (v) => {
|
||||
setLedStripConfiguration({
|
||||
selectedStripPart: v,
|
||||
});
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<div>
|
||||
<LedStripConfigurationContext.Provider value={ledStripConfigurationContextValue}>
|
||||
<LedStripPartsSorter />
|
||||
<DisplayListContainer>
|
||||
{displayStore.displays.map((display) => {
|
||||
return <DisplayView display={display} />;
|
||||
})}
|
||||
</DisplayListContainer>
|
||||
</LedStripConfigurationContext.Provider>
|
||||
<div>
|
||||
<a href="/led-strips-configuration">灯条配置</a>
|
||||
<a href="/white-balance">白平衡</a>
|
||||
</div>
|
||||
<Routes>
|
||||
<Route path="/led-strips-configuration" component={LedStripConfiguration} />
|
||||
<Route path="/white-balance" component={LedStripConfiguration} />
|
||||
</Routes>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
@ -1,5 +1,5 @@
|
||||
import { Component, JSX, ParentComponent, splitProps } from 'solid-js';
|
||||
import { DisplayInfo } from '../models/display-info.model';
|
||||
import { DisplayInfo } from '../../models/display-info.model';
|
||||
|
||||
type DisplayInfoItemProps = {
|
||||
label: string;
|
@ -6,8 +6,8 @@ import {
|
||||
onMount,
|
||||
ParentComponent,
|
||||
} from 'solid-js';
|
||||
import { displayStore, setDisplayStore } from '../stores/display.store';
|
||||
import background from '../assets/transparent-grid-background.svg?url';
|
||||
import { displayStore, setDisplayStore } from '../../stores/display.store';
|
||||
import background from '../../assets/transparent-grid-background.svg?url';
|
||||
|
||||
export const DisplayListContainer: ParentComponent = (props) => {
|
||||
let root: HTMLElement;
|
@ -1,7 +1,7 @@
|
||||
import { Component, createMemo } from 'solid-js';
|
||||
import { DisplayInfo } from '../models/display-info.model';
|
||||
import { displayStore } from '../stores/display.store';
|
||||
import { ledStripStore } from '../stores/led-strip.store';
|
||||
import { DisplayInfo } from '../../models/display-info.model';
|
||||
import { displayStore } from '../../stores/display.store';
|
||||
import { ledStripStore } from '../../stores/led-strip.store';
|
||||
import { DisplayInfoPanel } from './display-info-panel';
|
||||
import { LedStripPart } from './led-strip-part';
|
||||
import { ScreenView } from './screen-view';
|
@ -0,0 +1,106 @@
|
||||
import { createEffect, onCleanup } from 'solid-js';
|
||||
import { invoke } from '@tauri-apps/api/tauri';
|
||||
import { DisplayView } from './display-view';
|
||||
import { DisplayListContainer } from './display-list-container';
|
||||
import { displayStore, setDisplayStore } from '../../stores/display.store';
|
||||
import { LedStripConfigContainer } from '../../models/led-strip-config';
|
||||
import { setLedStripStore } from '../../stores/led-strip.store';
|
||||
import { listen } from '@tauri-apps/api/event';
|
||||
import { LedStripPartsSorter } from './led-strip-parts-sorter';
|
||||
import { createStore } from 'solid-js/store';
|
||||
import {
|
||||
LedStripConfigurationContext,
|
||||
LedStripConfigurationContextType,
|
||||
} from '../../contexts/led-strip-configuration.context';
|
||||
|
||||
export const LedStripConfiguration = () => {
|
||||
createEffect(() => {
|
||||
invoke<string>('list_display_info').then((displays) => {
|
||||
setDisplayStore({
|
||||
displays: JSON.parse(displays),
|
||||
});
|
||||
});
|
||||
invoke<LedStripConfigContainer>('read_led_strip_configs').then((configs) => {
|
||||
console.log(configs);
|
||||
setLedStripStore(configs);
|
||||
});
|
||||
});
|
||||
|
||||
// listen to config_changed event
|
||||
createEffect(() => {
|
||||
const unlisten = listen('config_changed', (event) => {
|
||||
const { strips, mappers } = event.payload as LedStripConfigContainer;
|
||||
console.log(event.payload);
|
||||
setLedStripStore({
|
||||
strips,
|
||||
mappers,
|
||||
});
|
||||
});
|
||||
|
||||
onCleanup(() => {
|
||||
unlisten.then((unlisten) => unlisten());
|
||||
});
|
||||
});
|
||||
|
||||
// listen to led_colors_changed event
|
||||
createEffect(() => {
|
||||
const unlisten = listen<Uint8ClampedArray>('led_colors_changed', (event) => {
|
||||
if (!window.document.hidden) {
|
||||
const colors = event.payload;
|
||||
setLedStripStore({
|
||||
colors,
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
onCleanup(() => {
|
||||
unlisten.then((unlisten) => unlisten());
|
||||
});
|
||||
});
|
||||
|
||||
// listen to led_sorted_colors_changed event
|
||||
createEffect(() => {
|
||||
const unlisten = listen<Uint8ClampedArray>('led_sorted_colors_changed', (event) => {
|
||||
if (!window.document.hidden) {
|
||||
const sortedColors = event.payload;
|
||||
setLedStripStore({
|
||||
sortedColors,
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
onCleanup(() => {
|
||||
unlisten.then((unlisten) => unlisten());
|
||||
});
|
||||
});
|
||||
|
||||
const [ledStripConfiguration, setLedStripConfiguration] = createStore<
|
||||
LedStripConfigurationContextType[0]
|
||||
>({
|
||||
selectedStripPart: null,
|
||||
});
|
||||
|
||||
const ledStripConfigurationContextValue: LedStripConfigurationContextType = [
|
||||
ledStripConfiguration,
|
||||
{
|
||||
setSelectedStripPart: (v) => {
|
||||
setLedStripConfiguration({
|
||||
selectedStripPart: v,
|
||||
});
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<div>
|
||||
<LedStripConfigurationContext.Provider value={ledStripConfigurationContextValue}>
|
||||
<LedStripPartsSorter />
|
||||
<DisplayListContainer>
|
||||
{displayStore.displays.map((display) => {
|
||||
return <DisplayView display={display} />;
|
||||
})}
|
||||
</DisplayListContainer>
|
||||
</LedStripConfigurationContext.Provider>
|
||||
</div>
|
||||
);
|
||||
};
|
@ -12,9 +12,9 @@ import {
|
||||
} from 'solid-js';
|
||||
import { useTippy } from 'solid-tippy';
|
||||
import { followCursor } from 'tippy.js';
|
||||
import { LedStripConfig } from '../models/led-strip-config';
|
||||
import { LedStripConfigurationContext } from '../contexts/led-strip-configuration.context';
|
||||
import { ledStripStore } from '../stores/led-strip.store';
|
||||
import { LedStripConfig } from '../../models/led-strip-config';
|
||||
import { LedStripConfigurationContext } from '../../contexts/led-strip-configuration.context';
|
||||
import { ledStripStore } from '../../stores/led-strip.store';
|
||||
|
||||
type LedStripPartProps = {
|
||||
config?: LedStripConfig | null;
|
@ -14,11 +14,11 @@ import {
|
||||
untrack,
|
||||
useContext,
|
||||
} from 'solid-js';
|
||||
import { LedStripConfig, LedStripPixelMapper } from '../models/led-strip-config';
|
||||
import { ledStripStore } from '../stores/led-strip.store';
|
||||
import { LedStripConfig, LedStripPixelMapper } from '../../models/led-strip-config';
|
||||
import { ledStripStore } from '../../stores/led-strip.store';
|
||||
import { invoke } from '@tauri-apps/api';
|
||||
import { LedStripConfigurationContext } from '../contexts/led-strip-configuration.context';
|
||||
import background from '../assets/transparent-grid-background.svg?url';
|
||||
import { LedStripConfigurationContext } from '../../contexts/led-strip-configuration.context';
|
||||
import background from '../../assets/transparent-grid-background.svg?url';
|
||||
|
||||
const SorterItem: Component<{ strip: LedStripConfig; mapper: LedStripPixelMapper }> = (
|
||||
props,
|
@ -3,5 +3,13 @@ import { render } from "solid-js/web";
|
||||
|
||||
import "./styles.css";
|
||||
import App from "./App";
|
||||
import { Router } from '@solidjs/router';
|
||||
|
||||
render(() => <App />, document.getElementById("root") as HTMLElement);
|
||||
render(
|
||||
() => (
|
||||
<Router>
|
||||
<App />
|
||||
</Router>
|
||||
),
|
||||
document.getElementById('root') as HTMLElement,
|
||||
);
|
||||
|
Reference in New Issue
Block a user