Skip to content

Commit 70a3d95

Browse files
crocsgcrocsg
committed
paper size edition
1 parent c5c115b commit 70a3d95

File tree

5 files changed

+240
-138
lines changed

5 files changed

+240
-138
lines changed

‎desktopbraillerap.py

Lines changed: 11 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -32,10 +32,17 @@
3232
"Speed":6000,
3333
"Accel":1500,
3434
"PaperUsableSize":[
35-
{"name":"A4","usablewidth":210, "usableheight":250, "lock":True},
36-
{"name":"A3","usablewidth":297, "usableheight":420-47, "lock":True},
37-
{"name":"A4 (BrailleRAP)","usablewidth":190, "usableheight":250, "lock":True}
38-
]
35+
{"name":"A4 (BrailleRAP XL)","width":210, "height":250, "lock":True},
36+
{"name":"A3 (BrailleRAP XL)","width":297, "height":420-47, "lock":True},
37+
{"name":"A4 (BrailleRAP)","width":190, "height":250, "lock":True}
38+
],
39+
"PaperSize":[
40+
{ "name": "A4 (BrailleRAP)", "width": 210, "height": 297 , "lock":True},
41+
{ "name": "A3 (BrailleRAP XL)", "width": 297, "height": 420 , "lock":True}
42+
43+
],
44+
"SizeIndex":0,
45+
"UsableSizeIndex":0
3946
}
4047

4148
# runtime option to automate some actions

‎src/components/AppOption.js

Lines changed: 10 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -13,10 +13,17 @@ const AppOption = {
1313
Speed:6000,
1414
Accel:1500,
1515
PaperUsableSize:[
16-
{name:"A4",usablewidth:210, usableheight:250,lock:true},
17-
{name:"A3",usablewidth:297, usableheight:420-47,lock:true},
16+
{name:"A4",width:210, height:250,lock:true},
17+
{name:"A3",width:297, height:420-47,lock:true},
1818
{name:"A4 (BrailleRAP)",usablewidth:190, usableheight:250,lock:true}
19-
]
19+
],
20+
PaperSize:[
21+
{ name: "A4", width: 210, height: 297 , lock:true},
22+
{ name: "A3", width: 297, height: 420 , lock:true}
23+
24+
],
25+
SizeIndex:0,
26+
UsableSizeIndex:0
2027
}
2128

2229
export default AppOption;

‎src/locales/en.json

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,10 @@
3131
"param.paper_height": "Paper height (mm)",
3232
"param.paper_width": "Paper width (mm)",
3333
"param.paper_size": "Paper size",
34+
"param.device_size": "BrailleRAP Size",
35+
"param.custom.device_size.aria":"Customize device size",
36+
"param.usable_size": "Print area size",
37+
"param.custom.usable_size.aria":"Customize print area size",
3438
"param.formtitle": "Options",
3539
"param.form_aria": "Application parameters form",
3640
"param.path_step": "Step delta along path (mm)",

‎src/pages/ModalUsablePrint.js renamed to ‎src/pages/ModalPrintSize.js

Lines changed: 82 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,30 @@
1-
import React, { useState, useContext,useEffect } 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 }) => {
6+
const ModalPrintSize = ({ show, handleOK, handleCancel, paperusablesize }) => {
77
const { GetLocaleString } = useContext(AppContext);
8-
const [SelectedSize, setSelectedSize] = useState(1);
9-
const [Name, setName] = useState ('New');
8+
const [SelectedSize, setSelectedSize] = useState(0);
9+
const [Name, setName] = useState('New');
1010
const [usableWidth, setUsableWidth] = useState(210);
1111
const [usableHeight, setUsableHeight] = useState(297 - 45);
1212
const [usableSize, setUsableSize] = useState([...paperusablesize] || []);
13-
console.log("ModalUsablePrint");
14-
console.log(paperusablesize);
15-
console.log(usableSize);
1613

17-
18-
useEffect (()=>{
19-
console.log ("useeffect");
14+
useEffect(() => {
15+
2016
if (usableSize.length === 0)
17+
{
2118
setUsableSize([...paperusablesize] || []);
22-
23-
return (()=>{});
19+
if (paperusablesize && paperusablesize.length > 0)
20+
{
21+
setName (paperusablesize[0].name);
22+
setUsableHeight(paperusablesize[0].height);
23+
setUsableWidth(paperusablesize[0].width);
24+
}
25+
}
26+
27+
return (() => { });
2428
}, [usableSize]);
2529

2630
const render_lock = (locked) => {
@@ -36,64 +40,100 @@ const ModalUsablePrint = ({ show, handleOK, handleCancel, paperusablesize }) =>
3640
handleCancel();
3741
}
3842
const onAdd = () => {
39-
40-
let data = {name:Name,usablewidth:usableWidth, usableheight:usableHeight,lock:false};
43+
44+
let data = { name: Name, width: usableWidth, height: usableHeight, lock: false };
4145
setUsableSize([...usableSize, data]);
4246

4347
}
48+
const onUpdate = () =>
49+
{
50+
let index = parseInt(SelectedSize);
51+
let option = [...usableSize];
52+
let data = { name: Name, width: usableWidth, height: usableHeight, lock: false };
53+
option[index] = data;
54+
setUsableSize(option);
55+
}
4456
const onDelete = () => {
45-
if (SelectedSize)
46-
{
47-
console.log (SelectedSize);
57+
if (SelectedSize) {
58+
console.log(SelectedSize);
4859
console.log(usableSize[SelectedSize]);
49-
if (usableSize[SelectedSize].lock === false)
50-
{
60+
if (usableSize[SelectedSize].lock === false) {
5161
let data = [...usableSize];
52-
data.splice (SelectedSize, 1);
53-
setUsableSize (data);
62+
data.splice(SelectedSize, 1);
63+
setUsableSize(data);
5464
}
5565
}
5666
}
5767
const onDuplicate = () => {
68+
if (SelectedSize) {
69+
let data = [...usableSize];
70+
let elem = { ...data[SelectedSize] };
71+
elem.name += " Copy";
72+
elem.lock = false;
73+
data.push(elem);
74+
setUsableSize(data);
5875

76+
}
5977
}
6078

6179
return (
6280

63-
<>
81+
<div
82+
tabIndex={0}
83+
onKeyUp={(e) => {
84+
e.stopPropagation();
85+
console.log(e);
86+
if (e.key === "Escape")
87+
onCancel()
88+
else if (e.key === 'Enter')
89+
onOk();
90+
}}>
6491
<Modal
6592
isOpen={show}
6693
contentLabel=""
6794
aria={{ hidden: false, label: ' ' }}
95+
6896
>
69-
<div className='MakeColumn100'>
97+
<div className='MakeColumn100' >
7098
<div>
7199
<select
72-
onChange={(e)=>{setSelectedSize(e.target.value)}}
100+
onChange={(e) => {
101+
console.log (e);
102+
let index = parseInt(e.target.value);
103+
setUsableWidth (usableSize[index].width);
104+
setUsableHeight (usableSize[index].height);
105+
console.log (usableSize[index]);
106+
setName (usableSize[index].name);
107+
setSelectedSize(index);
108+
}}
73109
value={SelectedSize}
74110
id="usablepaper"
75111
name="usablepaper"
76112
className='select_param'
77113
size="6"
78114
>
79115
{usableSize.map((item, index) => {
80-
console.log (index);
81116
if (SelectedSize === index)
82-
return (<option aria-selected={true} key={item.name} value={index}>{render_lock(item.lock)} {item.name} [{item.usablewidth}mm x {item.usableheight}mm]</option>);
117+
return (<option aria-selected={true} key={item.name} value={index}>{render_lock(item.lock)} {item.name} [{item.width}mm x {item.height}mm]</option>);
83118
else
84-
return (<option aria-selected={false} key={item.name} value={index}>{render_lock(item.lock)} {item.name} [{item.usablewidth}mm x {item.usableheight}mm]</option>);
119+
return (<option aria-selected={false} key={item.name} value={index}>{render_lock(item.lock)} {item.name} [{item.width}mm x {item.height}mm]</option>);
85120
})
86121
}
87122
</select>
88123
</div>
89124
<div>
90125
<div className='pure-form pure-form-aligned'>
91126
<div className='content'>
92-
<div class="alert alert-success alert-white rounded">
127+
<div class="alert alert-danger alert-white rounded">
93128
blabla
94129
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
95130
<div class="icon"><i class="fa fa-check"></i></div>
96131
</div>
132+
<div class="rounded">
133+
&nbsp;
134+
135+
<div class="icon"><i class="fa fa-check"></i></div>
136+
</div>
97137
</div>
98138
<div className='pure-control-group'>
99139
<legend>A legend for size</legend>
@@ -103,22 +143,24 @@ const ModalUsablePrint = ({ show, handleOK, handleCancel, paperusablesize }) =>
103143
</label>
104144
<input type="text"
105145
defaultValue={Name}
146+
value={Name}
106147
name="myInputNameDiag"
107148
id="myInputNameDiag"
108149

109150
onChange={(e) => {
110151
//this.handleChangePaper('usablewidth', e.target.value);
111-
setName (e.target.value);
152+
setName(e.target.value);
112153
}}
113154
style={{ width: "12em" }}
114-
/><br/>
155+
/><br />
115156
<label for='myInputWUDiag'>
116157
{GetLocaleString("param.usable.diag.width")}:
117158
</label>
118159
<input type="number"
119160
min={100}
120161
max={420}
121162
defaultValue={usableWidth}
163+
value={usableWidth}
122164
name="myInputWUDiag"
123165
id="myInputWUDiag"
124166

@@ -127,7 +169,7 @@ const ModalUsablePrint = ({ show, handleOK, handleCancel, paperusablesize }) =>
127169
setUsableWidth(e.target.value);
128170
}}
129171
style={{ width: "5em" }}
130-
/><br/>
172+
/><br />
131173

132174

133175

@@ -139,13 +181,14 @@ const ModalUsablePrint = ({ show, handleOK, handleCancel, paperusablesize }) =>
139181
min={100}
140182
max={550}
141183
defaultValue={usableHeight}
184+
value={usableHeight}
142185
id="myInputHUDiag"
143186
name="myInputHUDiag"
144187
onChange={(e) => {
145188
setUsableHeight(e.target.value);//this.handleChangePaper('usableheight', e.target.value);
146189
}}
147190
style={{ width: "5em" }}
148-
/><br/>
191+
/><br />
149192
</fieldset>
150193

151194
<fieldset>
@@ -159,6 +202,11 @@ const ModalUsablePrint = ({ show, handleOK, handleCancel, paperusablesize }) =>
159202
>
160203
Delete
161204
</button>&nbsp;
205+
<button className="pad-button pure-button"
206+
onClick={() => { onUpdate() }}
207+
>
208+
Update
209+
</button>&nbsp;
162210
<button className="pad-button pure-button"
163211
onClick={() => { onDuplicate() }}
164212
>
@@ -185,7 +233,7 @@ const ModalUsablePrint = ({ show, handleOK, handleCancel, paperusablesize }) =>
185233
</div>
186234
</div>
187235
</Modal>
188-
</>
236+
</div>
189237
);
190238
}
191-
export default ModalUsablePrint;
239+
export default ModalPrintSize;

0 commit comments

Comments
 (0)