z/Scope Anywhere - HostSurfer Example

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>HostSurfer Application Example</title>
    <link rel="stylesheet" href="css/styles.css" type="text/css" />
    <link rel="stylesheet" href="css/index.css" type="text/css" />
    <script src="https://zanywhere.cybelesoft.com/terminal.api.min.js"></script>
    <script src="js/index.js" type="text/javascript"></script>
</head>
<body>
  <div class="apppnl" id="hs-view"></div>
  <div class="clearpnl">
    <span style="float:right"><input type="checkbox" id="showFields" checked="checked" /> <label for="showFields">show screen fields</label>
      <button onclick="clearlog()"> Clear log </button>
    </span>
  </div>
  <div class="apppnl" id="logbar">Messages will be displayed below:
      
  </div>
  <div class="apppnl" id="logger"></div>
</body>

</html>

    function log(msg) {
        var logPane = document.getElementById('logger');
        logPane.innerHTML += msg + "<br/>";
        logPane.scrollTop = logPane.scrollHeight;
    }
    function clearlog() {
        document.getElementById('logger').innerHTML = '';
    }
    var hs = new zScope.HostSurfer({
        term: {
            url: "https://zanywhere.cybelesoft.com/hsdemo/",
            float: { bottom: 5, right: 5, width: 350, height: 200 }
        },
        rules: {
            baseUrl: 'rules/',
            paths: ['cics', 'login', 'mainmenu', 'accountmenu']
        },
        view: {
            id: "hs-view"
        }
    });
    hs.on('ready', function () { log('Ready!'); });
    hs.on('pageLocked', function () { log('Page locked.'); });
    hs.on('pageUnlocked', function () {
        log('Page unlocked.');
    });
    hs.on('ruleSelected', function (value) {
        if (document.getElementById("showFields").checked) {
            for (field in hs.data) {
                if (hs.data[field] != "") {
                    if (typeof hs.data[field] == "object") {
                        log(field + ": " + JSON.stringify(hs.data[field]));
                    } else {
                        log(field + ": '" + hs.data[field] + "'");
                    }
                }
            }
        }
        if (value) {
            log('Rule selected: ' + value.id);
        } else {
            log('No matching rule');
        }
    });

hs.register({
    id: 'cics',
    match: [{ text: "CICS", row: 5, col: 1 }],
    apply: {
        handler: function (hs) {
            if (hs.screens.length==1) {
                hs.enter();
            }
        }

    }
});

hs.register({
    id: 'mainmenu',
    match: [{ text: 'MAIN MENU', row: 1, col: 35 }],
    apply: {
        fields: [
            { name: 'option', row: 18, col: 63, len: 2 }
        ],
        actions: {
            main: function (hs) {
                hs.data.option = '01';
                hs.enter();
            },
            exit: function (hs) {
                hs.pf1();
            }
        }
    }
});

hs.register({
    id: 'login',
    match: [
        { text: "USERNAME", row: 19, col: 55 },
        { text: "PASSWORD", row: 20, col: 55 }
    ],
    apply: {
        fields: [
            { name: 'shopsLastUpdate', row: 18, col: 29, len: 8 },
            { name: 'accountsLastUpdate', row: 18, col: 62, len: 8 },
            { name: 'username', row: 19, col: 67, len: 6 },
            { name: 'password', row: 20, col: 67, len: 6 },
            { name: 'newPassword', row: 21, col: 67, len: 6 }
        ],
        render: {
            view: {
                template: 'login.html'
            }
        },
        actions: {
            main: function (hs) {
                hs.enter();
            },
            exit: function (hs) {
                hs.pf1();
            }
        }
    }
});

hs.register({
    id: 'accountmenu',
    match: [{ text: 'CARDS / ACCOUNT INQUIRY', row: 1, col: 29 }],
    apply: {
        fields: [
            { name: 'screenTitle', row: 1, col: 29, len: 30, get: function (value) { return value.trim().toLowerCase().replace(/\b\w/g, function (i) { return i.toUpperCase() }) } },
            { name: 'option', row: 16, col: 20, len: 2 },
            {
                name: 'options', fromRow: 5, toRow: 15,
                items: [
                    { name: 'value', col: 16, len: 2 },
                    { name: 'description', col: 23, len: 40 }
                ], skip: function (obj) {
                    return (obj.value == '');
                }, break: function (obj) {
                    return false;
                }
            },
            {
                name: 'inputs', fromRow: 16, toRow: 19,
                items: [
                    { name: 'caption', col: 25, len: 30 },
                    { name: 'value', col: 57, len: 22 }
                ], skip: function (obj) {
                    return (obj.caption == '');
                }, break: function (obj) {
                    return false;
                }
            }
        ],
        actions: {
            logout: function (hs) {
                hs.pf9();
            },
            exit: function (hs) {
                hs.pf9();
            }
        },
        render: {
            view: {
                template: 'accountmenu.html'
            }
        },

    }
});

<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>HostSurfer Application Example</title>
    <link rel="stylesheet" href="css/styles.css">    
</head>
    <body>
        <script type="application/javascript">
            function send(optValue) {
                hs.data.option = optValue;
                hs.enter();
            }
        </script>
    <div class="fullbox nomenu">
    <div class="header">
        <div class="title">Blue Card / {{hs.data.screenTitle}}</div>
    </div>
    <div class="main">
        <div class="floatbox"><table class="verticalTable">
            {{#each hs.data.options}}
            <tr><td colspan="2" class="bigButton" onclick="send('{{value}}')">{{description}}</td></tr>
            {{/each}}
            <tr><td colspan="2">&nbsp;</td></tr>
            <tr>
                <th>{{hs.data.inputs[0].caption}}:</th>
                <td><input type="text" size="22"
                maxlength="22" hs-field="hs.data.inputs[0].value" value=""/></td>
            </tr>
            <tr>
                <th>{{hs.data.inputs[1].caption}}:</th>
                <td><input type="text" size="22"
                maxlength="22" hs-field="hs.data.inputs[1].value" value=""/></td>
            </tr>
            <tr>
                <th>{{hs.data.inputs[2].caption}}:</th>
                <td><input type="text" size="22"
                maxlength="22" hs-field="hs.data.inputs[2].value" value=""/></td>
            </tr>
            <tr>
                <th>{{hs.data.inputs[3].caption}}:</th>
                <td><input type="text" size="22"
                maxlength="22" hs-field="hs.data.inputs[3].value" value=""/></td>
            </tr>
        </table>
        </div>
    </div>
    <div class="footer">
        <span onclick="hs.navigate('logout')">Log out</span>
        <span onclick="hs.navigate('exit')">Exit</span>
    </div>
    </div>
</body>
</html>

<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>HostSurfer Application Example</title>
    <link rel="stylesheet" href="css/styles.css"/>
</head>
<body>
    <script>        
        function checkkey(e) {
            e = e || event;
            if (e.key == "Enter") {
                zScope.hostSurfer.navigate('main');
            };
        }
    </script>
    <div class="fullbox nomenu">
    <div class="header">
        <div class="title">Blue Card / User Login</div>
    </div>
    <div class="main">
        <div class="floatbox">
            <table class="verticalTable">
                <tr>
                    <th>Username:</th>
                    <td><input type="text" size="13" maxlength="6" hs-field="hs.data.username" onkeypress="checkkey()"/></td>
                </tr>
                <tr>
                    <th>Password:</th>
                    <td><input type="password" size="13" hs-field="hs.data.password" maxlength="6" onkeypress="checkkey()"/></td>
                </tr>
                <tr>
                    <th>New Password:</th>
                    <td><input type="password" size="13" hs-field="hs.data.newPassword" maxlength="6" onkeypress="checkkey()"/></td>
                </tr>
                <tr><td colspan="2">&nbsp;</td></tr>
                <tr>
                    <td colspan="2" class="center"><span class="button" id="login_btn" tabindex=0 onclick="hs.navigate('main')" onkeypress="checkkey()">Sign in</span>&nbsp;<span class="button" id="exit_btn" tabindex=0 onclick="hs.navigate('exit')">Exit</span></td>
                </tr>
            </table>
            <div class="fullwidth screenmsg nobreak center">
                <p>{{hs.data.R18C9}} {{hs.data.commerceLastUpdate}} &mdash; {{hs.data.R18C39}} {{hs.data.accountsLastUpdate}}</p>
            </div>
        </div>
    </div>
    <div class="footer">
        <span style="visibility: hidden">&nbsp;</span>
    </div>
    </div>
</body>
</html>

body {
    background-color: #FFFFFF;
    font-family: arial, sans-serif;
    overflow: hidden;
}
div.apppnl {
    position: relative;
    display: block;
    width: 1024px;
    max-width: 100%;
    margin: auto;
    margin-top: 10px;
    overflow-y: auto;
    border: solid 1px #CCCCCC;
    box-sizing: border-box;
}
div#hs-view {
/*    height: 720px;*/
    padding: 0px;
}
div#logbar {
    position:fixed;
    bottom: 130px;
    left:5px;
    right:5px;
    overflow:hidden;
    border: none;
    font-size: 10pt;
}
div#logger {
    position:fixed;
    bottom: 5px;
    left:5px;
    right:5px;
    height: 120px;
    padding: 5px;
    font-size: 8pt;
}

div.clearpnl{
  float:left;
  font-size:10pt;
}

:root {
  --app-height: 600px;
}
html {
    height: 100%;
    width: 100%;
    margin: 0px;
}
body {
    height: 100%;
    font-family: sans-serif;
    background-color: #ffffff;
    margin-top: 0px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 0px;
    padding: 0px;
    max-width: 920px;
    max-height: 100vh;
    max-height: var(--app-height);
    box-sizing: border-box;
}
.fullbox {
    min-height: 100%;
    display: block;
}
/*------- header ------*/
.fullbox > .header > .title {
    padding: 10pt;
    padding-top: 20pt;
    padding-left: 12pt;
    margin: 0;
    width: 100%;
    max-width: 100%;
    text-align: left;
    background-color: #000068;
    font-family: arial, sans-serif;
    font-size: 15pt;
    color: #FFFFFF;
    box-sizing: border-box;
}
.fullbox > .header > .row {
    margin: 0px;
    margin-top: 1px;
    display: block;
    width: 100%;
}
.fullbox > .header > .row > .item {
    font-size: 10pt;
    background-color: #0066CC;
    color: #FFFFFF;
    text-decoration: none;
    white-space: nowrap;
    text-align: center;
    cursor: pointer;
    margin: 0pt;
    border-left: solid 1px #FFFFFF;
    padding-top: 5pt;
    padding-bottom: 5pt;
    display: inline-block;
    box-sizing: border-box;
}
    .fullbox > .header > .row > .item:hover {
        background-color: #000068;
    }
.fullbox > .header > .row > .item[disabled='disabled'],
.fullbox > .header > .row > .item[disabled='disabled']:hover {
    background-color: #0066CC;
    color: #CCCCCC;
    cursor: default;
}
.fullbox > .header > .row > .item:nth-child(1) {
    border-left: 0px;
}
.fullbox > .header > .row > .item.selected,
.fullbox > .header > .row > .item.selected:hover {
    background-color: #CC0000;
    cursor: default;
}
/*------- main ------*/
.fullbox > .main {
    height: calc(100vh - 171px);
    height: calc(var(--app-height) - 171px);
    display: block;
    overflow: auto;
}
.fullbox.nomenu > .main {
    height: calc(100vh - 113px);
    height: calc(var(--app-height) - 113px);
}
/*------- footer ------*/
.fullbox > .footer {
    padding: 4px;
    margin: 0;
    width:100%;
    text-align: right;
    background-color: #000068;
    color: #FFFFFF;
    font-size: 8pt;
    box-sizing: border-box;
}
.fullbox > .footer span {
    background-color: #F0F0F0;
    color: #000068;
    font-size: 10pt;
    padding-top: 5pt;
    padding-bottom: 5pt;
    padding-left: 10pt;
    padding-right: 10pt;
    margin: 5pt;
    border-radius: 2pt;
    display: inline-block;
    box-sizing: inherit;
    cursor: pointer;
    box-shadow: 1px 1px 3px rgba(0,0,0,.25);
}
.fullbox > .footer span:hover {
    background-color: #F8F8F8;
    color: black;
}
.fullbox > .footer span[disabled='disabled'],
.fullbox > .footer span[disabled='disabled']:hover {
    background-color: rgba(255, 255, 255, .55);
    color: #333333;
    cursor: default;
}
/*------------------end page structure-------------------*/
.floatbox {
    position: absolute;
    display: inline-block;
    padding: 20pt;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    border: solid 1px #E0E0E0;
    border: none;
}
.verticalTable {
    width: auto;
    text-align: left;
    font-size: 10pt;
    color: #000068;
    border: none;
    padding: 15pt;
    margin-right: auto;
    margin-left: auto;
    box-sizing: border-box;
}
.verticalTable tr > * > * {
    margin: 3pt;
}
.verticalTable input[type='text'],
.verticalTable input[type='password'] {
    box-sizing: border-box;
    border-radius: 2px;
    border-width: 1px;
    border-color: #C0C0C0;
    border-style: solid;
    padding: 5pt;
    outline-width: 1px;
}
.verticalTable input[type='button'] {
    cursor: pointer;
    padding: 5pt;
    padding-left: 10pt;
    padding-right: 10pt;
    margin-left: 5pt;
    margin-right: 5pt;
}
*::-ms-backdrop, .verticalTable {
    margin:auto;
    position:relative;
    min-height:1px;
}
.screenmsg {
    font-size: 8pt;
}
.nobreak {
    white-space: nowrap;
}
/*-------------------------------------------------------*/
.hidden {
    visibility: hidden;
}
.center {
    text-align: center !important;
}
/*-------- loading --------*/
#divLoading
{
    display : none;
}
#divLoading.show
{
    display : block;
    position : fixed;
    z-index: 100;
    background-image : url('../images/wait.gif');
    background-repeat : no-repeat;
    background-position : center;
    left : 0;
    bottom : 0;
    right : 0;
    top : 0;
}
#loadinggif.show
{
    left : 50%;
    top : 50%;
    position : absolute;
    z-index : 101;
    width : 32px;
    height : 32px;
    margin-left : -16px;
    margin-top : -16px;
}
.fullwidth {
    width: 100%;
    padding-left: 30pt;
    padding-right: 30pt;
    box-sizing: border-box;
}
.button {
    border-radius: 2px;
    border: solid 1px #C0C0C0;
    padding: 5pt;
    outline-width: 1px;
    background-color: #F0F0F0;
    color: #000000;
    font-size: 10pt;
    padding-left: 10pt;
    padding-right: 10pt;
    margin: 5pt;
    display: inline-block;
    box-sizing: inherit;
    cursor: pointer;
}
.button:hover {
    background-color: #F8F8F8;
}
@media screen and (max-height: 500px) {
    .fullbox {
        min-height: 500px;
    }
}
.bigButton {
    border: solid 1px #C0C0C0;
    background-color: #F0F0F0;
    padding: 5px;
    text-align: center;
    border-radius: 5px;
    cursor: pointer;
}