Skip to content

Commit e63fe53

Browse files
crocsgcrocsg
committed
add new size option feature added
1 parent 9f4596e commit e63fe53

File tree

3 files changed

+175
-109
lines changed

3 files changed

+175
-109
lines changed

‎src/App.css

Lines changed: 15 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -178,9 +178,23 @@ fieldset > p
178178
{
179179
display:flex;
180180
flex-direction: row;
181+
181182
}
182183

183-
184+
.MakeColumn100
185+
{
186+
display:flex;
187+
flex-direction: row;
188+
min-width: 100%;
189+
min-height: 100%;
190+
191+
}
192+
.MakeColumn
193+
{
194+
display:flex;
195+
flex-direction: column;
196+
197+
}
184198

185199
.button-secondary {
186200
color: white !important;

‎src/pages/ModalUsablePrint.js

Lines changed: 148 additions & 106 deletions
Original file line numberDiff line numberDiff line change
@@ -1,139 +1,181 @@
1-
import React, { useState, useContext} from 'react';
1+
import React, { useState, useContext,useEffect } from 'react';
22
import Modal from 'react-modal'
33
import AppContext from "../components/AppContext";
44

55

6-
const ModalUsablePrint = ({show, handleOK, handleCancel, paperusablesize}) =>
7-
{
8-
const {GetLocaleString} = useContext(AppContext);
9-
const [SelectedSize, setSelectedSize] = useState(0);
6+
const ModalUsablePrint = ({ show, handleOK, handleCancel, paperusablesize }) => {
7+
const { GetLocaleString } = useContext(AppContext);
8+
const [SelectedSize, setSelectedSize] = useState(1);
9+
const [Name, setName] = useState ('New');
1010
const [usableWidth, setUsableWidth] = useState(210);
11-
const [usableHeight, setUsableHeight] = useState(297-45);
11+
const [usableHeight, setUsableHeight] = useState(297 - 45);
12+
const [usableSize, setUsableSize] = useState([...paperusablesize] || []);
13+
console.log("ModalUsablePrint");
14+
console.log(paperusablesize);
15+
console.log(usableSize);
16+
1217

13-
const render_lock = (locked) => {
18+
useEffect (()=>{
19+
console.log ("useeffect");
20+
if (usableSize.length === 0)
21+
setUsableSize([...paperusablesize] || []);
1422

15-
return locked ? String.fromCodePoint(0x1f512) : " ";
23+
return (()=>{});
24+
}, [usableSize]);
25+
26+
const render_lock = (locked) => {
27+
28+
return locked ? String.fromCodePoint(0x1f512) : " ";
1629
if (locked)
1730
return String.fromCodePoint(0x1f512);
18-
//return "🔒";
19-
//return "🔒";
31+
//return "🔒";
32+
//return "🔒";
2033
else
2134
return " ";
2235
}
2336

24-
const onOk = () =>
25-
{
26-
console.log ("onOK()");
27-
console.log (handleOK);
37+
const onOk = () => {
38+
console.log("onOK()");
39+
console.log(handleOK);
2840
if (handleOK)
29-
handleOK();
41+
handleOK(usableSize);
3042
}
31-
const onCancel = () =>
32-
{
43+
const onCancel = () => {
3344
if (handleCancel)
3445
handleCancel();
3546
}
3647
const onAdd = () => {
48+
49+
let data = {name:Name,usablewidth:usableWidth, usableheight:usableHeight,lock:false};
50+
setUsableSize([...usableSize, data]);
3751

3852
}
3953
const onDelete = () => {
4054

55+
}
56+
const onDuplicate = () => {
57+
4158
}
4259

4360
return (
4461

45-
<>
62+
<>
4663
<Modal
47-
isOpen={show}
48-
contentLabel=""
49-
aria={{ hidden: false, label: ' ' }}
64+
isOpen={show}
65+
contentLabel=""
66+
aria={{ hidden: false, label: ' ' }}
5067
>
51-
<select
52-
id="usablepaper"
53-
name="usablepaper"
54-
className='select_param'
55-
size="6"
56-
>
57-
{paperusablesize.map((item, index) => {
58-
if (SelectedSize === index)
59-
return (<option aria-selected={true} key={item.name} value={index}>{render_lock(item.lock)} {item.name} [{item.usablewidth}mm x {item.usableheight}mm]</option>);
60-
else
61-
return (<option aria-selected={false} key={item.name} value={index}>{render_lock(item.lock)} {item.name} [{item.usablewidth}mm x {item.usableheight}mm]</option>);
62-
})
63-
}
64-
</select>
65-
<label for='myInputWUDiag'>
66-
{GetLocaleString("param.usable.diag.name")}:
67-
</label>
68-
<input type="text"
69-
defaultValue="New"
70-
name="myInputNameDiag"
71-
id="myInputNameDiag"
72-
73-
onChange={(e) => {
74-
//this.handleChangePaper('usablewidth', e.target.value);
75-
}}
76-
style={{ width: "12em" }}
77-
/>
78-
<label for='myInputWUDiag'>
79-
{GetLocaleString("param.usable.diag.width")}:
80-
</label>
81-
<input type="number"
82-
min={100}
83-
max={420}
84-
defaultValue={usableWidth}
85-
name="myInputWUDiag"
86-
id="myInputWUDiag"
87-
88-
onChange={(e) => {
89-
//this.handleChangePaper('usablewidth', e.target.value);
90-
}}
91-
style={{ width: "5em" }}
92-
/>
93-
94-
95-
96-
<label for="myInputHUDiag">
97-
{GetLocaleString("param.usable_height")}:
98-
</label>
99-
100-
<input type="number"
101-
min={100}
102-
max={550}
103-
defaultValue={usableHeight}
104-
id="myInputHUDiag"
105-
name="myInputHUDiag"
106-
onChange={(e) => {
107-
//this.handleChangePaper('usableheight', e.target.value);
108-
}}
109-
style={{ width: "5em" }}
110-
/>
111-
112-
113-
<button className="pad-button pure-button"
114-
onClick={() => { onOk () }}
115-
>
116-
Ok
117-
118-
</button>
119-
<button className="pad-button pure-button"
120-
onClick={() => { onCancel () }}
121-
>
122-
Cancel
123-
124-
</button>
125-
<button className="pad-button pure-button"
126-
onClick={() => { onAdd()}}
127-
>
128-
Add
129-
</button>
130-
<button className="pad-button pure-button"
131-
onClick={() => { onDelete()}}
132-
>
133-
Delete
134-
</button>
68+
<div className='MakeColumn100'>
69+
<div>
70+
<select
71+
id="usablepaper"
72+
name="usablepaper"
73+
className='select_param'
74+
size="6"
75+
>
76+
{usableSize.map((item, index) => {
77+
console.log (index);
78+
if (SelectedSize === index)
79+
return (<option aria-selected={true} key={item.name} value={index}>{render_lock(item.lock)} {item.name} [{item.usablewidth}mm x {item.usableheight}mm]</option>);
80+
else
81+
return (<option aria-selected={false} key={item.name} value={index}>{render_lock(item.lock)} {item.name} [{item.usablewidth}mm x {item.usableheight}mm]</option>);
82+
})
83+
}
84+
</select>
85+
</div>
86+
<div>
87+
<div className='pure-form pure-form-aligned'>
88+
<div className='pure-control-group'>
89+
<legend>A legend for size</legend>
90+
<fieldset>
91+
<label for='myInputWUDiag'>
92+
{GetLocaleString("param.usable.diag.name")}:
93+
</label>
94+
<input type="text"
95+
defaultValue={Name}
96+
name="myInputNameDiag"
97+
id="myInputNameDiag"
98+
99+
onChange={(e) => {
100+
//this.handleChangePaper('usablewidth', e.target.value);
101+
setName (e.target.value);
102+
}}
103+
style={{ width: "12em" }}
104+
/><br/>
105+
<label for='myInputWUDiag'>
106+
{GetLocaleString("param.usable.diag.width")}:
107+
</label>
108+
<input type="number"
109+
min={100}
110+
max={420}
111+
defaultValue={usableWidth}
112+
name="myInputWUDiag"
113+
id="myInputWUDiag"
114+
115+
onChange={(e) => {
116+
//this.handleChangePaper('usablewidth', e.target.value);
117+
setUsableWidth(e.target.value);
118+
}}
119+
style={{ width: "5em" }}
120+
/><br/>
121+
122+
123+
124+
<label for="myInputHUDiag">
125+
{GetLocaleString("param.usable_height")}:
126+
</label>
127+
128+
<input type="number"
129+
min={100}
130+
max={550}
131+
defaultValue={usableHeight}
132+
id="myInputHUDiag"
133+
name="myInputHUDiag"
134+
onChange={(e) => {
135+
setUsableHeight(e.target.value);//this.handleChangePaper('usableheight', e.target.value);
136+
}}
137+
style={{ width: "5em" }}
138+
/><br/>
139+
</fieldset>
140+
141+
<fieldset>
142+
<button className="pad-button pure-button"
143+
onClick={() => { onAdd() }}
144+
>
145+
Add
146+
</button>&nbsp;
147+
<button className="pad-button pure-button"
148+
onClick={() => { onDelete() }}
149+
>
150+
Delete
151+
</button>&nbsp;
152+
<button className="pad-button pure-button"
153+
onClick={() => { onDuplicate() }}
154+
>
155+
Duplicate
156+
</button>&nbsp;
157+
</fieldset>
158+
<fieldset>
159+
<button className="pad-button pure-button"
160+
onClick={() => { onOk() }}
161+
>
162+
Ok
163+
164+
</button>&nbsp;
165+
<button className="pad-button pure-button"
166+
onClick={() => { onCancel() }}
167+
>
168+
Cancel
169+
170+
</button>
171+
</fieldset>
172+
173+
</div>
174+
</div>
175+
</div>
176+
</div>
135177
</Modal>
136-
</>
178+
</>
137179
);
138180
}
139181
export default ModalUsablePrint;

‎src/pages/Parameter.js

Lines changed: 12 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -197,8 +197,18 @@ class Parameters extends React.Component {
197197
return (
198198
<ModalUsablePrint
199199
show={this.state.showModalUsable}
200-
handleOk = {()=>{this.display_usable_dialog(false)}}
200+
handleOK = {(newlist)=>{
201+
this.display_usable_dialog(false);
202+
this.setState ({paperusable:newlist});
203+
console.log (newlist);
204+
// set change in global options
205+
//this.context.Params.PaperUsableSize = newlist;
206+
let options = {...this.context.Params};
207+
options.PaperUsableSize = newlist;
208+
this.context.SetOption (options); // todo : clarify save option
209+
}}
201210
handleCancel = {()=>{this.display_usable_dialog(false)}}
211+
202212
paperusablesize = {this.state.paperusable}
203213
></ModalUsablePrint>
204214
);
@@ -258,7 +268,7 @@ class Parameters extends React.Component {
258268
<b>{selectedtable}</b>
259269
</p>
260270

261-
<label>
271+
<label for="combobraille">
262272
{this.context.GetLocaleString("param.brailleselectlabel")}
263273
</label>
264274
<select className='select_param'

0 commit comments

Comments
 (0)