ssq-emulator
v1.1.1
Published
[TOC]
Readme
[TOC]
Insrtallationn
npm i ssq-emulatorAS400 Component
EmulatorController
เป็น function controller สำหรับจัดการการทำงานของ Emulator ประกอบไปด้วย
Method
| Name | Return | Type | Desc | | ------------------------------------------------------ | ---------------- | ------ | ---------------------------------------------------------- | | getHighlightDefault(rowSize, colSize) | textHighlight | String | เป็น function สำหรับดึงค่าตั้งต้นของ highlight | | setSelectionRange(elStr, selectionStart, selectionEnd) | - | | เป็น function สำหรับข้อความและตำแหน่งของข้อมูลที่ถูกเลือก | | getIndexByRowCol(row, colSize) | index | Number | เป็น function สำหรับดึงค่า index ของตำแหน่งบนหน้าจอ AS400 | | getAS400Cursor(index) | { row: 1, col:1} | String | เป็น function สำหรับดึงค่าตำแหน่งของ cursor | | getRowNumberByIndex(elStr, index) | row | Number | เป็น function สำหรับดึงค่าแถวที่ถูกเลือก | | getColNumberByIndex(elStr, index, colSize) | col | Number | เป็น function สำหรับดึงค่าคอลัมน์ที่ถูกเลือก | | getStartSelection(elStr, colSize) | { row: 1, col:1} | Object | เป็น function สำหรับดึงค่าตำแหน่งเริ่มต้นที่ถูกเลือก | | getEndSelection(elStr, colSize) | { row: 1, col:1} | Object | เป็น function สำหรับดึงค่าตำแหน่งสิ้นสุดที่ถูกเลือก | | getSelectionRange(elStr, selectionStart, selectionEnd) | textSelection | String | เป็น function สำหรับดึงค่าข้อความที่ถูกเลือก | | initScreen(id, row, col) | - | | เป็น function สำหรับ initail หน้าจอ AS400 | | setAs400Screen(id, text) | - | | เป็น function สำหรับแสดงข้อความบนหน้าจอ AS400 | | setAs400Style(id, text, style) | - | | เป็น function สำหรับแสดงของข้อความบนหน้าจอ AS400 | | setAS400Cursor(id, cursor) | - | | เป็น function สำหรับระบุตำแน่งของ cursor | | markAllCheckStringOnScreen(id, markListData) | - | | เป็น function สำหรับ highlight ข้อมูลบนหน้าจอ AS400 |
Emulator
Properties
| Name | Default | Type | Desc | | ---------- | ------- | ------- | -------------------------------------------------------- | | id | random | String | Id สำหรับอ้างอิง component | | row | 24 | Number | จำนวนแถว | | col | 80 | Number | จำนวนคอลัมน์ | | text | Default | String | ข้อความที่แสดงบนหน้าจอ as400 | | style | Default | String | สีของข้อความที่แสดงบนหน้าจอ as400 | | cursor | "0,0" | String | ตำแหน่งของ cursor | | hiddenInfo | fase | Boolean | flag สำหรับปิดการแสดงผลข้อความบนหน้าจอ as400 Information | | readOnly | false | Boolean | flag สำหรับปิดการแก้ไขข้อความบนหน้าจอ as400 |
Method
| Name | Return | Type | Desc | | ------------------------------ | ------ | ---- | ------------------------------------------------ | | initScreen(id, row, col) | - | | เป็น function สำหรับ initail หน้าจอ AS400 | | setAs400Screen(id, text) | - | | เป็น function สำหรับแสดงข้อความบนหน้าจอ AS400 | | setAs400Style(id, text, style) | - | | เป็น function สำหรับแสดงของข้อความบนหน้าจอ AS400 | | setAS400Cursor(id, cursor) | - | | เป็น function สำหรับระบุตำแน่งของ cursor |
Example
import { Emulator } from "ssq-emulator";
const data = {
HEADER: {
tokenId: "EWI112233445566",
requestId: "ABC123456789",
deviceId: "UUID9988776655"
},
DATA: {
screen: { row: 24, col: 80 },
Text:
" Sign On \n System . . . . . : S101CD3M \n Subsystem . . . . : QINTER \n Display . . . . . : QPADEV003R \n \n User . . . . . . . . . . . . . . \n Password . . . . . . . . . . . . \n Program/procedure . . . . . . . . \n Menu . . . . . . . . . . . . . . \n Current library . . . . . . . . . \n \n \n \n \n \n \n \n \n \n \n \n \n \n (C) COPYRIGHT IBM CORP. 1980, 2005. ",
Style:
".................................RRRRRRRRRRRRR..................................\n................................................................................\n................................................................................\n................................................................................\n................................................................................\n.........................................................UUUUUUUUUU.............\n.........................................................HHHHHHHHHH.............\n.........................................................UUUUUUUUUU.............\n.........................................................UUUUUUUUUU.............\n.........................................................UUUUUUUUUU.............\n................................................................................\n................................................................................\n................................................................................\n................................................................................\n................................................................................\n................................................................................\n................................................................................\n................................................................................\n................................................................................\n................................................................................\n................................................................................\n................................................................................\n................................................................................\n................................................................................",
Cursor: "5,53"
}
};
const id = "flow";
const { row, col } = data.DATA.screen;
const { Text: text, Style: style, Cursor: cursor } = data.DATA;
class DemoEmulator extends Component {
render() {
return (
<Emulator
id={id}
row={row}
col={col}
text={text}
style={style}
cursor={cursor}
// hiddenInfo
// readOnly
/>
);
}
}
export default DemoEmulator;Screen Mapping
Screen Mapping extend มาจาก Emulator comonent
เมื่อ double click หรือ ลาก mouse คลุมข้อความ หน้าจอ AS400 จะต้องทำการกำหนด markType ที่ต้องการโดยการกดปุ่ม
Properties
| Name | Default | Type | Desc | | ------------- | ------- | ------ | ------------------------------------------------------------------------------------------------- | | highlightList | {} | object | json object ของการ highlight screen | | markType | - | String | คือ type ของ highlight ประกอบด้วย "mark-1", "mark-2", "mark-3" โดยแต่ละ type จะมีสีที่แตกต่างกัน | | markList | - | object | list json data ของข้อมูลที่ต้องการการ highlight | | highlight | - | object | json data ของข้อมูลที่ต้องการการ highlight | | lastSelection | - | object | json data ของข้อมูลที่ถูกเลือกครั้งล่าสุด |
Method
| Name | Return | Desc | | --------------------------------- | ------------- | ----------------------------------------------------------------- | | getHighlight(markType) | markData | เป็น function สำหรับดึงค่าข้อมูลที่ถูก Highlight ตาม type ที่ระบุ | | setHighlight(markType, highlight) | - | เป็น function สำหรับ highlight ข้อความ ตาม type ที่ระบุ | | clearHighlight(markType) | - | เป็น function สำหรับ clear Highlight ตาม type ที่ระบุ | | getHighlightList() | markList | เป็น function สำหรับดึงค่าข้อมูลที่ถูก Highlight ทั้งหมด | | setHighlightList(highlightList) | - | เป็น function สำหรับ highlight ข้อความทั้งหมด | | clearHighlightList() | - | เป็น function สำหรับ clear Highlight ทั้งหมด | | getLastSelection() | lastSelection | เป็น function สำหรับดึงค่าของข้อมูลที่ถูกเลือกครั้งล่าสุด |
Example
import React, { Component } from "react";
import Axios from "axios";
import { ScreenMapping, EmulatorController } from "ssq-emulator";
const data = {
HEADER: {
tokenId: "EWI112233445566",
requestId: "ABC123456789",
deviceId: "UUID9988776655"
},
DATA: {
screen: { row: 24, col: 80 },
Text:
" Sign On \n System . . . . . : S101CD3M \n Subsystem . . . . : QINTER \n Display . . . . . : QPADEV003R \n \n User . . . . . . . . . . . . . . \n Password . . . . . . . . . . . . \n Program/procedure . . . . . . . . \n Menu . . . . . . . . . . . . . . \n Current library . . . . . . . . . \n \n \n \n \n \n \n \n \n \n \n \n \n \n (C) COPYRIGHT IBM CORP. 1980, 2005. ",
Style:
".................................RRRRRRRRRRRRR..................................\n................................................................................\n................................................................................\n................................................................................\n................................................................................\n.........................................................UUUUUUUUUU.............\n.........................................................HHHHHHHHHH.............\n.........................................................UUUUUUUUUU.............\n.........................................................UUUUUUUUUU.............\n.........................................................UUUUUUUUUU.............\n................................................................................\n................................................................................\n................................................................................\n................................................................................\n................................................................................\n................................................................................\n................................................................................\n................................................................................\n................................................................................\n................................................................................\n................................................................................\n................................................................................\n................................................................................\n................................................................................",
Cursor: "5,53"
}
};
const id = "flow2";
const { row, col } = data.DATA.screen;
const { Text: text, Style: style, Cursor: cursor } = data.DATA;
const highlightList = {
mark1: {
text: "Sign On",
row: 1,
col: 36
},
mark2: {
text: "User",
row: 6,
col: 17
},
mark3: {
text: "(C) COPYRIGHT IBM CORP. 1980, 2005.",
row: 24,
col: 41
}
};
const MARK1 = "mark-1";
const MARK2 = "mark-2";
const MARK3 = "mark-3";
const onDblClickHandler = event => {
// console.log(`| ========== ${event.type} ========== |`);
let eventKey = event.key;
if (event.keyCode >= 8 && event.keyCode < 48) {
eventKey = `[' + ${eventKey.toLowerCase()} + ']`;
}
const selected = EmulatorController.getStartSelection(id, col);
const dataForApi = {
HEADER: {
tokenId: "EWI112233445566",
requestId: "ABC123456789",
deviceId: "UUID9988776655"
// requestCount: this.resultCount
},
DATA: {
Event: "SELECTION",
KeyValue: eventKey,
Cursor: `${selected.row},${selected.col}`
}
};
Axios({
method: "post",
url: "http://localhost:8085/emulator",
data: JSON.stringify(dataForApi),
headers: { "Content-Type": "application/json" }
})
.then(response => {
// handle success
const data = response.data.DATA;
EmulatorController.setAs400Screen(id, data.Text);
EmulatorController.setAs400Style(id, data.Text, data.Style);
EmulatorController.setAS400Cursor(id, data.Cursor);
const fields = data.Fields;
let selection = null;
const index = EmulatorController.getAS400Cursor(data.Cursor);
fields.forEach(f => {
if (Math.abs(f.EndRow - f.StartRow) === 0) {
if (
index.col >= f.StartCol &&
index.col <= f.EndCol &&
f.StartRow === index.row
) {
selection = f;
}
}
});
const selectionStart = EmulatorController.getIndexByRowCol(
selection.StartRow,
selection.StartCol
);
const selectionEnd = EmulatorController.getIndexByRowCol(
selection.EndRow,
selection.EndCol
);
EmulatorController.setSelectionRange(id, selectionStart, selectionEnd);
})
.catch(response => {
// handle error
console.log(`response: ${response}`);
});
};
const onMouseUpHandler = event => {
// console.log(`| ========== ${event.type} ========== | `);
if (event.keyCode === 9 || (event.keyCode > 111 && event.keyCode !== 123)) {
event.preventDefault();
}
let eventKey = event.key;
const selected = EmulatorController.getStartSelection(id, col);
if (event.keyCode >= 8 && event.keyCode < 48) {
eventKey = `[' + ${eventKey.toLowerCase()} + ']`;
}
const dataForApi = {
HEADER: {
tokenId: "EWI112233445566",
requestId: "ABC123456789",
deviceId: "UUID9988776655"
// requestCount: this.resultCount
},
DATA: {
Event: "KEYDOWN",
KeyValue: eventKey,
Cursor: `${selected.row},${selected.col}`
}
};
Axios({
method: "post",
url: "http://localhost:8085/emulator",
data: JSON.stringify(dataForApi),
headers: { "Content-Type": "application/json" }
})
.then(response => {
// handle success
const data = response.data.DATA;
EmulatorController.setAs400Screen(id, data.Text);
EmulatorController.setAs400Style(id, data.Text, data.Style);
EmulatorController.setAS400Cursor(id, data.Cursor);
// this.clearAllMarkChackString(id);
})
.catch(response => {
// handle error
console.log(`response: ${response}`);
});
};
class ScreenMappingPage extends Component {
constructor(props) {
super(props);
this.smRef = React.createRef();
}
render() {
return (
<div>
<ScreenMapping
id={id}
ref={this.smRef}
row={row}
col={col}
text={text}
style={style}
cursor={cursor}
highlight={highlightList}
onDoubleClick={onDblClickHandler}
onMouseUp={onMouseUpHandler}
/>
<button
onClick={() => this.smRef.current.setHighlightList(highlightList)}
>
highlight list
</button>
<button
onClick={() => {
console.log(this.smRef.current.getHighlightList());
}}
>
get mark list
</button>
<button onClick={() => this.smRef.current.clearHighlightList()}>
clear mark list
</button>
<br />
<button
onClick={() => {
const highlight = this.smRef.current.getLastSelection();
this.smRef.current.setHighlight(MARK1, highlight);
}}
>
mark 1
</button>
<button
onClick={() => {
console.log(this.smRef.current.getHighlight(MARK1));
}}
>
get mark 1
</button>
<button
onClick={() => {
this.smRef.current.clearHighlight(MARK1);
}}
>
clear mark 1
</button>
<br />
<button
onClick={() => {
const highlight = this.smRef.current.getLastSelection();
this.smRef.current.setHighlight(MARK2, highlight);
}}
>
mark 2
</button>
<button
onClick={() => {
console.log(this.smRef.current.getHighlight(MARK2));
}}
>
get mark 2
</button>
<button
onClick={() => {
this.smRef.current.clearHighlight(MARK2);
}}
>
clear mark 2
</button>
<br />
<button
onClick={() => {
const highlight = this.smRef.current.getLastSelection();
this.smRef.current.setHighlight(MARK3, highlight);
}}
>
mark 3
</button>
<button
onClick={() => {
console.log(this.smRef.current.getHighlight(MARK3));
}}
>
get mark 3
</button>
<button
onClick={() => {
this.smRef.current.clearHighlight(MARK3);
}}
>
clear mark 3
</button>
</div>
);
}
}
export default ScreenMappingPage;
Fields Mapping
Fields Mapping extend มาจาก Emulator comonent
เมื่อ double click หรือ ลาก mouse คลุมข้อความ หน้าจอ AS400 จะทำการ highlight ให้อัตโนมัติ โดยใช้ markType เป็น "mark-1
Properties
| Name | Default | Type | Desc | | -------- | ------- | ------ | ----------------------------------------------- | | markList | - | object | list json data ของข้อมูลที่ต้องการการ highlight |
Method
| Name | Return | Desc | | --------------------- | -------- | ------------------------------------------------------------------ | | getFieldHighlight() | markData | เป็น function สำหรับดึงค่าข้อมูลที่ถูก Highlight ตาม type ที่ระบุ | | clearFieldHighlight() | - | เป็น function สำหรับ highlight ข้อความ ตาม type ที่ระบุ | | onDoubleClick | - | เป็น callback function สำหรับจัดการ event เช่นการ call api เป็นต้น | | onMouseUp | - | เป็น callback function สำหรับจัดการ event เช่นการ call api เป็นต้น |
Example
import React, { Component } from "react";
import Axios from "axios";
import { FieldsMapping, EmulatorController } from "ssq-emulator";
const data = {
HEADER: {
tokenId: "EWI112233445566",
requestId: "ABC123456789",
deviceId: "UUID9988776655"
},
DATA: {
screen: { row: 24, col: 80 },
Text:
" Sign On \n System . . . . . : S101CD3M \n Subsystem . . . . : QINTER \n Display . . . . . : QPADEV003R \n \n User . . . . . . . . . . . . . . \n Password . . . . . . . . . . . . \n Program/procedure . . . . . . . . \n Menu . . . . . . . . . . . . . . \n Current library . . . . . . . . . \n \n \n \n \n \n \n \n \n \n \n \n \n \n (C) COPYRIGHT IBM CORP. 1980, 2005. ",
Style:
".................................RRRRRRRRRRRRR..................................\n................................................................................\n................................................................................\n................................................................................\n................................................................................\n.........................................................UUUUUUUUUU.............\n.........................................................HHHHHHHHHH.............\n.........................................................UUUUUUUUUU.............\n.........................................................UUUUUUUUUU.............\n.........................................................UUUUUUUUUU.............\n................................................................................\n................................................................................\n................................................................................\n................................................................................\n................................................................................\n................................................................................\n................................................................................\n................................................................................\n................................................................................\n................................................................................\n................................................................................\n................................................................................\n................................................................................\n................................................................................",
Cursor: "5,53"
}
};
const id = "flow3";
const { row, col } = data.DATA.screen;
const { Text: text, Style: style, Cursor: cursor } = data.DATA;
const highlightList = {
mark1: { text: " ", row: 6, col: 58 }
};
const onDblClickHandler = event => {
// console.log(`| ========== ${event.type} ========== |`);
let eventKey = event.key;
if (event.keyCode >= 8 && event.keyCode < 48) {
eventKey = `[' + ${eventKey.toLowerCase()} + ']`;
}
const selected = EmulatorController.getStartSelection(id, col);
const dataForApi = {
HEADER: {
tokenId: "EWI112233445566",
requestId: "ABC123456789",
deviceId: "UUID9988776655"
// requestCount: this.resultCount
},
DATA: {
Event: "SELECTION",
KeyValue: eventKey,
Cursor: `${selected.row},${selected.col}`
}
};
Axios({
method: "post",
url: "http://localhost:8085/emulator",
data: JSON.stringify(dataForApi),
headers: { "Content-Type": "application/json" }
})
.then(response => {
// handle success
const data = response.data.DATA;
EmulatorController.setAs400Screen(id, data.Text);
EmulatorController.setAs400Style(id, data.Text, data.Style);
EmulatorController.setAS400Cursor(id, data.Cursor);
// clearAllMarkChackString(id);
const fields = data.Fields;
let selection = null;
const index = EmulatorController.getAS400Cursor(data.Cursor);
fields.forEach(f => {
if (Math.abs(f.EndRow - f.StartRow) === 0) {
if (
index.col >= f.StartCol &&
index.col <= f.EndCol &&
f.StartRow === index.row
) {
selection = f;
}
}
});
const selectionStart = EmulatorController.getIndexByRowCol(
selection.StartRow,
selection.StartCol
);
const selectionEnd = EmulatorController.getIndexByRowCol(
selection.EndRow,
selection.EndCol
);
EmulatorController.setSelectionRange(id, selectionStart, selectionEnd);
})
.catch(response => {
// handle error
console.log(`response: ${response}`);
});
};
const onMouseUpHandler = event => {
// console.log(`| ========== ${event.type} ========== | `);
if (event.keyCode === 9 || (event.keyCode > 111 && event.keyCode !== 123)) {
event.preventDefault();
}
let eventKey = event.key;
const selected = EmulatorController.getStartSelection(id, col);
if (event.keyCode >= 8 && event.keyCode < 48) {
eventKey = `[' + ${eventKey.toLowerCase()} + ']`;
}
const dataForApi = {
HEADER: {
tokenId: "EWI112233445566",
requestId: "ABC123456789",
deviceId: "UUID9988776655"
// requestCount: this.resultCount
},
DATA: {
Event: "KEYDOWN",
KeyValue: eventKey,
Cursor: `${selected.row},${selected.col}`
}
};
Axios({
method: "post",
url: "http://localhost:8085/emulator",
data: JSON.stringify(dataForApi),
headers: { "Content-Type": "application/json" }
})
.then(response => {
// console.log(`| ========== ${event.type} ========== | `);
const startSelection = EmulatorController.getStartSelection(id, col);
const endSelection = EmulatorController.getEndSelection(id, col);
const flag = "field";
// const flag = 'list';
if (flag === "list") {
const selectionStart =
EmulatorController.getIndexByRowCol(startSelection.row, 0) + 1;
const selectionEnd =
EmulatorController.getIndexByRowCol(endSelection.row, col) + 2;
EmulatorController.setSelectionRange(id, selectionStart, selectionEnd);
}
})
.catch(response => {
// handle error
console.log(`response: ${response}`);
});
};
class FieldsMappingPage extends Component {
constructor(props) {
super(props);
this.smRef = React.createRef();
}
render() {
return (
<div>
<FieldsMapping
id={id}
ref={this.smRef}
row={row}
col={col}
text={text}
style={style}
cursor={cursor}
highlight={highlightList}
onDoubleClick={onDblClickHandler}
onMouseUp={onMouseUpHandler}
/>
<button
onClick={() => {
console.log(this.smRef.current.getFieldHighlight());
}}
>
get field marker
</button>
<button
onClick={() => {
this.smRef.current.clearFieldHighlight();
}}
>
clear field marker
</button>
</div>
);
}
}
export default FieldsMappingPage;
List Mapping
List Mapping extend มาจาก Emulator comonent
Properties
| Name | Default | Type | Desc | | ------------- | ------- | ------ | ------------------------------------------------------------------------------------------------- | | highlightList | {} | object | json object ของการ highlight screen | | markType | - | String | คือ type ของ highlight ประกอบด้วย "mark-1", "mark-2", "mark-3" โดยแต่ละ type จะมีสีที่แตกต่างกัน | | markList | - | object | list json data ของข้อมูลที่ต้องการการ highlight | | highlight | - | object | json data ของข้อมูลที่ต้องการการ highlight | | lastSelection | - | object | json data ของข้อมูลที่ถูกเลือกครั้งล่าสุด |
Method
| Name | Return | Desc | | ---------------------------- | ------------- | --------------------------------------------------------- | | getListHighlight() | markData | เป็น function สำหรับดึงค่าข้อมูล List ที่ถูก Highlight | | setListHighlight(highlight) | - | เป็น function สำหรับ highlight List ที่เลือก | | clearListHighlight() | - | เป็น function สำหรับ clear Highlight List | | getFieldHighlight() | markList | เป็น function สำหรับดึงค่า field ข้อมูลที่ถูก Highlight | | setFieldHighlight(highlight) | - | เป็น function สำหรับ highlight field ที่เลือก | | clearFieldHighlight() | - | เป็น function สำหรับ clear highlight field | | getLastSelection() | lastSelection | เป็น function สำหรับดึงค่าของข้อมูลที่ถูกเลือกครั้งล่าสุด |
Example
import React, { Component } from "react";
import Axios from "axios";
import { ListMapping, EmulatorController } from "ssq-emulator";
// import {
// setAs400Screen,
// setAs400Style,
// getAS400Cursor,
// setAS400Cursor,
// getIndexByRowCol,
// setSelectionRange,
// getStartSelection,
// getEndSelection
// } from "../../components/Emulator/controller";
const data = {
HEADER: {
tokenId: "EWI112233445566",
requestId: "ABC123456789",
deviceId: "UUID9988776655"
},
DATA: {
screen: { row: 24, col: 80 },
Text:
" Sign On \n System . . . . . : S101CD3M \n Subsystem . . . . : QINTER \n Display . . . . . : QPADEV003R \n \n User . . . . . . . . . . . . . . \n Password . . . . . . . . . . . . \n Program/procedure . . . . . . . . \n Menu . . . . . . . . . . . . . . \n Current library . . . . . . . . . \n \n \n \n \n \n \n \n \n \n \n \n \n \n (C) COPYRIGHT IBM CORP. 1980, 2005. ",
Style:
".................................RRRRRRRRRRRRR..................................\n................................................................................\n................................................................................\n................................................................................\n................................................................................\n.........................................................UUUUUUUUUU.............\n.........................................................HHHHHHHHHH.............\n.........................................................UUUUUUUUUU.............\n.........................................................UUUUUUUUUU.............\n.........................................................UUUUUUUUUU.............\n................................................................................\n................................................................................\n................................................................................\n................................................................................\n................................................................................\n................................................................................\n................................................................................\n................................................................................\n................................................................................\n................................................................................\n................................................................................\n................................................................................\n................................................................................\n................................................................................",
Cursor: "5,53"
}
};
const id = "flow4";
const { row, col } = data.DATA.screen;
const { Text: text, Style: style, Cursor: cursor } = data.DATA;
const highlightList = {
mark1: { text: " ", row: 6, col: 58 }
};
const onDblClickHandler = event => {
// console.log(`| ========== ${event.type} ========== |`);
let eventKey = event.key;
if (event.keyCode >= 8 && event.keyCode < 48) {
eventKey = `[' + ${eventKey.toLowerCase()} + ']`;
}
const selected = EmulatorController.getStartSelection(id, col);
const dataForApi = {
HEADER: {
tokenId: "EWI112233445566",
requestId: "ABC123456789",
deviceId: "UUID9988776655"
// requestCount: this.resultCount
},
DATA: {
Event: "SELECTION",
KeyValue: eventKey,
Cursor: `${selected.row},${selected.col}`
}
};
Axios({
method: "post",
url: "http://localhost:8085/emulator",
data: JSON.stringify(dataForApi),
headers: { "Content-Type": "application/json" }
})
.then(response => {
// handle success
const data = response.data.DATA;
EmulatorController.setAs400Screen(id, data.Text);
EmulatorController.setAs400Style(id, data.Text, data.Style);
EmulatorController.setAS400Cursor(id, data.Cursor);
// clearAllMarkChackString(id);
const fields = data.Fields;
let selection = null;
const index = EmulatorController.getAS400Cursor(data.Cursor);
fields.forEach(f => {
if (Math.abs(f.EndRow - f.StartRow) === 0) {
if (
index.col >= f.StartCol &&
index.col <= f.EndCol &&
f.StartRow === index.row
) {
selection = f;
}
}
});
const selectionStart = EmulatorController.getIndexByRowCol(
selection.StartRow,
selection.StartCol
);
const selectionEnd = EmulatorController.getIndexByRowCol(
selection.EndRow,
selection.EndCol
);
EmulatorController.setSelectionRange(id, selectionStart, selectionEnd);
})
.catch(response => {
// handle error
console.log(`response: ${response}`);
});
};
const onMouseUpHandler = event => {
// console.log(`| ========== ${event.type} ========== | `);
if (event.keyCode === 9 || (event.keyCode > 111 && event.keyCode !== 123)) {
event.preventDefault();
}
let eventKey = event.key;
const selected = EmulatorController.getStartSelection(id, col);
if (event.keyCode >= 8 && event.keyCode < 48) {
eventKey = `[' + ${eventKey.toLowerCase()} + ']`;
}
const dataForApi = {
HEADER: {
tokenId: "EWI112233445566",
requestId: "ABC123456789",
deviceId: "UUID9988776655"
// requestCount: this.resultCount
},
DATA: {
Event: "KEYDOWN",
KeyValue: eventKey,
Cursor: `${selected.row},${selected.col}`
}
};
// Axios({
// method: "post",
// url: "http://localhost:8080/emulator",
// data: JSON.stringify(dataForApi),
// headers: { "Content-Type": "application/json" }
// })
// .then(response => {
// console.log(`| ========== ${event.type} ========== | `);
const startSelection = EmulatorController.getStartSelection(id, col);
const endSelection = EmulatorController.getEndSelection(id, col);
const selectionStart =
EmulatorController.getIndexByRowCol(startSelection.row, 0) + 2;
const selectionEnd =
EmulatorController.getIndexByRowCol(endSelection.row, col) + 2;
EmulatorController.setSelectionRange(id, selectionStart, selectionEnd);
// })
// .catch(response => {
// // handle error
// console.log(`response: ${response}`);
// });
};
class ListMappingPage extends Component {
constructor(props) {
super(props);
this.smRef = React.createRef();
}
render() {
return (
<div>
<ListMapping
id={id}
ref={this.smRef}
row={row}
col={col}
text={text}
style={style}
cursor={cursor}
highlight={highlightList}
onDoubleClick={onDblClickHandler}
onMouseUp={onMouseUpHandler}
/>
<button
onClick={() => {
console.log(this.smRef.current.getListHighlight());
}}
>
get list marker
</button>
<button
onClick={() => {
this.smRef.current.clearListHighlight();
}}
>
clear list marker
</button>
<button
onClick={() => {
console.log(this.smRef.current.getFieldHighlight());
}}
>
get field marker
</button>
<button
onClick={() => {
this.smRef.current.clearFieldHighlight();
}}
>
clear field marker
</button>
</div>
);
}
}
export default ListMappingPage;