From 9b0c24d983f46a13484cb52bfb6a6b30c08970c7 Mon Sep 17 00:00:00 2001 From: Aaron Yu Date: Thu, 23 Dec 2021 21:51:43 +0800 Subject: [PATCH] add setting page --- src/App.js | 22 ++++++- src/Components/settingsFrame/index.css | 0 src/Components/settingsFrame/index.js | 81 +++++++++++++++++++++++++ src/images/check.png | Bin 0 -> 992 bytes src/images/generate-button.png | Bin 0 -> 2533 bytes src/images/setting-card.png | Bin 0 -> 1107 bytes 6 files changed, 102 insertions(+), 1 deletion(-) create mode 100644 src/Components/settingsFrame/index.css create mode 100644 src/Components/settingsFrame/index.js create mode 100644 src/images/check.png create mode 100644 src/images/generate-button.png create mode 100644 src/images/setting-card.png diff --git a/src/App.js b/src/App.js index d779b14..1e33268 100644 --- a/src/App.js +++ b/src/App.js @@ -3,6 +3,7 @@ import Pane from './Components/pane'; import DeviceFrame from './Components/deviceFrame'; import waterMarkPng from './images/water-mark.png' import React from 'react'; +import SettingFrame from './Components/settingsFrame'; class App extends React.Component { constructor() { @@ -49,6 +50,22 @@ class App extends React.Component { }))); } + UpdateSetting(obj) { + var body = { + ...obj, + Name: this.state.selectedProject.Name, + }; + var query = Object.keys(body).map(k => `${k}=${body[k]}`).join('&') + fetch(`http://123.56.161.61:1157/home/UpdateFileContentNew`, { + method: 'POST', + body: JSON.stringify(body) + }) + .then(() => + console.log('update success') + ) + .catch(e => console.log('update fails', e)); + } + render() { var { mode, device, projects, selectedProject } = this.state; @@ -77,7 +94,10 @@ class App extends React.Component { ? - :
setting content
+ : +v) : [1, 1, 1]} + generate={(value) => this.UpdateSetting(value)}/> } diff --git a/src/Components/settingsFrame/index.css b/src/Components/settingsFrame/index.css new file mode 100644 index 0000000..e69de29 diff --git a/src/Components/settingsFrame/index.js b/src/Components/settingsFrame/index.js new file mode 100644 index 0000000..efbb02e --- /dev/null +++ b/src/Components/settingsFrame/index.js @@ -0,0 +1,81 @@ +import { Grid, List, ListItem } from '@mui/material'; +import { useEffect, useState } from 'react' +import './index.css' +import settingCardPng from '../../images/setting-card.png'; +import checkPng from '../../images/check.png'; +import generateButtonPng from '../../images/generate-button.png'; + +var rows = ['TopText', 'CentText', 'MiddText'] +var rowTitles = ['开头', '中间', '结尾'] +function SettingFrame(props) { + var [settingArr, setSettingArr] = useState([1, 2, 3]) + useEffect(() => { + setSettingArr(props.settingValue) + }, [props.settingValue]) + + return ( +
+ + { + rows.map((rowKey, rowIndex) => ( + + {rowTitles[rowIndex]} + + {props.setting && props.setting[rowKey] && Array.from(props.setting[rowKey].split('|')).map((text, index) => ( + +
{ + var newSetting = settingArr.slice() + newSetting[rowIndex] = index + 1; + setSettingArr(newSetting); + }}> + {text} + check +
+ + ))} + + + )) + } + +
+ generate props.generate({ + topType: settingArr[0]+'', + centreType: settingArr[1]+'', + middleType: settingArr[2]+'' + })}/> +
+
+ ) +} + +export default SettingFrame; \ No newline at end of file diff --git a/src/images/check.png b/src/images/check.png new file mode 100644 index 0000000000000000000000000000000000000000..90cdb78bad104b6d6c7ac7d1ac1abf5fa0f87a64 GIT binary patch literal 992 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 literal 0 HcmV?d00001 diff --git a/src/images/setting-card.png b/src/images/setting-card.png new file mode 100644 index 0000000000000000000000000000000000000000..c2a78f6e691eab115048305f8a741c62451f9f1a GIT binary patch literal 1107 zcmeAS@N?(olHy`uVBq!ia0vp^kAQe32OE$y>wj1Qq&N#aB8wRqxP?KOkzv*x2?hoh zR!5V@Lz1b z;QCQ>)dL@$86~sJ7OS{TDxA2a?On{4;uAIZvu0R#Z~pml{~hba$NS}<^UAC4oc(08 zio8nY`?K;4|8L*-oTpwn=}F+E`1A35YTkYJnv_4O#!@n$_x0=7k+FLxB}&}88MI?X zUw{Ao+xP8v?A*S+yx8jYKdY1co^mQT{r_5}e>_^U*NuA?xAlSJ2RBpCYLjt*215l|XMLoWm*CO!G_qvE1CVmCi6>L$e80XvwY1c9@x_e5>W7CctgKEQJm~l>ZeLZcb=5if>62|vW_F}6yBxXf zeU{>f5|2;GlNP(`H>#FSd2(^WlgLT!+;YsPUnNdTPxto)=B!-@3^(-Do%5_-A0IEH z_S5F%ch5ifdGD=zJZDZz{F5(hkN&i;l~?_w^alQZm literal 0 HcmV?d00001