Request for updating channel setting

wlm-ui/package.json

@@ -21,6 +21,7 @@
     "react-router-dom": "^6.28.0",
     "react-scripts": "5.0.1",
     "redux": "^5.0.1",
+    "sass": "^1.81.0",
     "typescript": "^4.4.2",
     "web-vitals": "^2.1.0"
   },

wlm-ui/src/InitPage/InitPage.tsx

@@ -7,7 +7,6 @@ import { signin } from '../store/slices/user/user';
 const InitPage = () => {
     const [username, setUsername] = useState<string>('');
     const [password, setPassword] = useState<string>('');
-
     const dispatch = useDispatch<AppDispatch>();
 
     const onClickSignin = async () => {

wlm-ui/src/MainPage/Channel/Channel.scss

@@ -0,0 +1,20 @@
+.channel-item {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    border: 1px solid black;
+    padding: 10px;
+}
+
+.channel-title {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+}
+
+.channel-attr-editor-container {
+    display: grid;
+    grid-template-columns: auto 60px auto auto;
+    grid-template-rows: auto auto;
+    gap: 10px;
+}

wlm-ui/src/MainPage/Channel/Channel.tsx

@@ -0,0 +1,51 @@
+import React, { useState } from 'react';
+
+import { ChannelInfo } from '../../store/slices/channel/channel';
+import './Channel.scss'
+
+interface IProps extends ChannelInfo {
+    onClickUse: () => void;
+    onClickSetExposure: (exposure: number) => void;
+    onClickSetPeriod: (period: number) => void;
+};
+
+const Channel = (props: IProps) => {
+    const [exposure, setExposure] = useState<number>(0);
+    const [period, setPeriod] = useState<number>(0);
+
+    return (
+        <div className='channel-item'>
+            <div className='channel-title'>
+                <b>CH {props.channel.channel}</b>
+                <span>{props.channel.name}</span>
+                <button onClick={props.onClickUse} style={{ width: '60px' }}>{props.inUse ? 'In use' : 'Use'}</button>
+            </div>
+            <div className='channel-attr-editor-container'>
+                <b style={{ textAlign: 'left' }}>Exp. time</b>
+                <input
+                    type='number'
+                    min={0}
+                    step={10}
+                    value={exposure * 1e3}
+                    onChange={(e) => setExposure(Number(e.target.value) / 1e3)}
+                    style={{ textAlign: 'right' }}
+                />
+                <span style={{ textAlign: 'left' }}>ms</span>
+                <button onClick={() => props.onClickSetExposure(exposure)}>Set</button>
+                <b style={{ textAlign: 'left' }}>Period</b>
+                <input
+                    type='number'
+                    min={0}
+                    step={0.1}
+                    value={period}
+                    onChange={(e) => setPeriod(Number(e.target.value))}
+                    style={{ textAlign: 'right' }}
+                />
+                <span style={{ textAlign: 'left' }}>s</span>
+                <button onClick={() => props.onClickSetPeriod(period)}>Set</button>
+            </div>
+        </div>
+    );
+};
+
+export default Channel;

wlm-ui/src/MainPage/Channel/ChannelList.scss

@@ -0,0 +1,8 @@
+.channel-container {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: flex-start;
+    flex-wrap: wrap;
+    gap: 20px;
+}

wlm-ui/src/MainPage/Channel/ChannelList.tsx

@@ -0,0 +1,57 @@
+import React, { useEffect } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+
+import { AppDispatch } from '../../store';
+import {
+    channelListActions, fetchList, postExposure, postPeriod, selectChannelList,
+} from '../../store/slices/channel/channel';
+import Channel from './Channel';
+import './ChannelList.scss';
+
+const ChannelList = () => {
+    const channelListState = useSelector(selectChannelList);
+
+    useEffect(() => {
+        localStorage.setItem('channel.channelList', JSON.stringify(channelListState.channels));
+    }, [channelListState]);
+
+    const dispatch = useDispatch<AppDispatch>();
+
+    const onClickRefreshChannelList = async () => {
+        dispatch(fetchList());
+    };
+
+    const onClickUse = (channel: number) => {
+        dispatch(channelListActions.toggleUse({ channel: channel }));
+    };
+
+    const onClickSetExposure = (channel: number, exposure: number) => {
+        dispatch(postExposure({ channel: channel, exposure: exposure }));
+    };
+
+    const onClickSetPeriod = (channel: number, period: number) => {
+        dispatch(postPeriod({ channel: channel, period: period }));
+    };
+
+    return (
+        <div>
+            <button onClick={onClickRefreshChannelList}>Refresh</button>
+            <section className='channel-container'>
+                {channelListState.channels.map((info) => (
+                    <article key={info.channel.channel}>
+                        <Channel
+                            {...info}
+                            onClickUse={() => onClickUse(info.channel.channel)}
+                            onClickSetExposure={(exposure: number) =>
+                                onClickSetExposure(info.channel.channel, exposure)}
+                            onClickSetPeriod={(period: number) =>
+                                onClickSetPeriod(info.channel.channel, period)}
+                        />
+                    </article>
+                ))}
+            </section>
+        </div>
+    );
+};
+
+export default ChannelList;

wlm-ui/src/MainPage/MainPage.tsx

@@ -3,8 +3,7 @@ import { useDispatch } from 'react-redux';
 
 import { AppDispatch } from '../store';
 import { signout } from '../store/slices/user/user';
-import { fetchList } from '../store/slices/channel/channel';
-import ChannelListTable from './ChannelList';
+import ChannelList from './Channel/ChannelList';
 
 const MainPage = () => {
     const dispatch = useDispatch<AppDispatch>();
@@ -13,18 +12,10 @@ const MainPage = () => {
         dispatch(signout());
     };
 
-    const onClickRefreshChannelList = async () => {
-        dispatch(fetchList());
-    };
-
     return (
         <div>
             <button onClick={onClickSignout}>Sign out</button>
-            <div>
-                <h1>Channel list</h1>
-                <button onClick={onClickRefreshChannelList}>Refresh</button>
-                <ChannelListTable />
-            </div>
+            <ChannelList />
         </div>
     );
 };

wlm-ui/src/store/slices/channel/channel.ts

@@ -11,6 +11,8 @@ export interface ChannelType {
 export interface ChannelInfo {
     channel: ChannelType;
     inUse: boolean;
+    exposure: number;
+    period: number;
 };
 
 export interface ChannelListInfo {
@@ -29,6 +31,20 @@ export const fetchList = createAsyncThunk(
     },
 );
 
+export const postExposure = createAsyncThunk(
+    'channel/postExposure',
+    async (payload: Pick<ChannelType, 'channel'> & Pick<ChannelInfo, 'exposure'>) => {
+        await axios.post(`/setting/${payload.channel}/`, { 'exposure': payload.exposure });
+    },
+);
+
+export const postPeriod = createAsyncThunk(
+    'channel/postPeriod',
+    async (payload: Pick<ChannelType, 'channel'> & Pick<ChannelInfo, 'period'>) => {
+        await axios.post(`/setting/${payload.channel}/`, { 'period': payload.period });
+    },
+);
+
 export const channelListSlice = createSlice({
     name: 'channelList',
     initialState,