ssq-emulator v1.1.1

TOC

Insrtallationn

npm i ssq-emulator

AS400 Component

EmulatorController

เป็น function controller สำหรับจัดการการทำงานของ Emulator ประกอบไปด้วย

Method

Emulator

Properties

Method

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

Method

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

Method

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

Method

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;