yunkong2.javascript/admin/tab.html
2018-07-21 19:30:07 +08:00

722 lines
31 KiB
HTML

<html>
<head>
<!-- these 4 files always have to be included -->
<link rel="stylesheet" type="text/css" href="../../lib/css/themes/jquery-ui/default/jquery-ui.min.css"/>
<link rel="stylesheet" type="text/css" href="../../lib/css/themes/jquery-ui/default/jquery-ui.structure.min.css"/>
<link rel="stylesheet" type="text/css" href="../../lib/css/themes/jquery-ui/default/jquery-ui.theme.min.css"/>
<link rel="stylesheet" type="text/css" href="../../lib/css/fancytree/ui.fancytree.min.css"/>
<link rel="stylesheet" type="text/css" href="jquery.cron.css"/>
<link rel="stylesheet" type="text/css" href="jquery-treetable/jquery.treetable.theme.css"/>
<link rel="stylesheet" type="text/css" href="../../css/adapter.css"/>
<script type="text/javascript" src="../../lib/js/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="../../lib/js/jquery-ui.min.js"></script>
<script type="text/javascript" src="../../socket.io/socket.io.js"></script>
<script type="text/javascript" src="../../lib/js/loStorage.js"></script>
<!-- original editor -->
<!--script type="text/javascript" src="../../lib/js/ace-1.2.0/ace.js"></script>
<script type="text/javascript" src="../../lib/js/ace-1.2.0/ext-language_tools.js"></script-->
<!-- improved VSCode editor -->
<script type="text/javascript" src="monaco-editor/monaco-editor.bundle.js"></script>
<script type="text/javascript" src="../../lib/js/translate.js"></script>
<script type="text/javascript" src="words.js"></script>
<script type="text/javascript" src="../../lib/js/jquery.fancytree-all.min.js"></script>
<script type="text/javascript" src="../../lib/js/colResizable-1.6.min.js"></script>
<script type="text/javascript" src="google-blockly/blockly_compressed.js"></script>
<script type="text/javascript" src="google-blockly/blocks_compressed.js"></script>
<script type="text/javascript" src="google-blockly/javascript_compressed.js"></script>
<script type="text/javascript" src="google-blockly/own/blocks_words.js"></script>
<script type="text/javascript" src="google-blockly/own/field_oid.js"></script>
<script type="text/javascript" src="google-blockly/own/field_cron.js"></script>
<script type="text/javascript" src="google-blockly/own/field_script.js"></script>
<script type="text/javascript" src="google-blockly/own/blocks_system.js"></script>
<script type="text/javascript" src="google-blockly/own/blocks_action.js"></script>
<script type="text/javascript" src="google-blockly/own/blocks_sendto.js"></script>
<script type="text/javascript" src="google-blockly/own/blocks_time.js"></script>
<script type="text/javascript" src="google-blockly/own/blocks_convert.js"></script>
<script type="text/javascript" src="google-blockly/own/blocks_trigger.js"></script>
<script type="text/javascript" src="google-blockly/own/blocks_procedures.js"></script>
<script type="text/javascript" src="google-blockly/own/blocks_timeout.js"></script>
<script type="text/javascript" src="../../lib/js/selectID.js"></script>
<script type="text/javascript" src="jquery-treetable/jquery.treetable.js"></script>
<script type="text/javascript" src="treeTable.js"></script>
<script type="text/javascript" src="cron2text.js"></script>
<script type="text/javascript" src="jquery.cron.words.js"></script>
<script type="text/javascript" src="jquery.cron.locale.js"></script>
<script type="text/javascript" src="jquery.cron.js"></script>
<link href="query-builder/bootstrap.css" rel="stylesheet">
<link href="query-builder/query-builder.default.min.css" rel="stylesheet">
<script src="query-builder/query-builder.standalone.min.js"></script>
<style>
body {
font-size: 11px;
margin: 0;
padding: 0;
height: 100%;
overflow: hidden;
}
.ui-state-active a, .ui-state-active a:link, .ui-state-active a:visited, .ui-state-hover a, .ui-state-hover a:link, .ui-state-hover a:visited {
outline: none;
}
.ui-jqgrid tr.jqgrow td {
font-size: 12px;
}
.ui-jqgrid .ui-pg-input {
height: 20px !important;
}
.ui-jqgrid-titlebar-close {
display: none !important;
}
#edit-script-source {
font-size: 12px;
width: 600px;
height: 240px;
padding:0;
margin:0;
border: 1px solid grey;
outline: none;
box-shadow: none;
resize:none;
}
.no-space {
border: 0 !important;
margin: 0;
padding: 0;
border-spacing: 0;
border-image-width: 0;
}
#script-main .ui-resizable-e {
cursor: e-resize;
width: 4px;
right: 0;
top: 0;
bottom: 0;
background-color: gray;
}
#script-main .ui-resizable-s {
cursor: s-resize;
height: 4px;
right: 0;
left: 0;
bottom: 0;
background-color: gray;
}
.warn, .error, .info, .debug {
font-size: small;
font-family: Arial;
}
.info {
color: black;
}
.warn {
color: orange;
}
.error {
color: red;
}
.debug {
color: darkgray;
}
.import-drop-zone {
width: calc(100% - 6px);
height: calc(100% - 6px);
position: absolute;
opacity: 0.95;
top: 0;
left: 0;
background: #eee;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
z-index: 1;
font-size: 32px;
font-weight: bold;
text-align: center;
border: 3px dashed black;
border-radius: 15px;
}
.import-dropzone-error {
background: #faa !important;
color: #f00;
}
.import-text-drop {
width: calc(100% - 6px);
height: 150px;
padding-top: 20px;
text-align: center;
cursor: pointer;
border: 3px dashed #c6c6c6;
border-radius: 15px;
color: #c6c6c6;
}
.import-text-drop-plus {
position: absolute;
top: 30px;
left: calc(50% - 40px);
font-size: 100px;
font-weight: bold;
opacity: 0.2;
}
.fancytree-force-folder span.fancytree-icon{
background-position: -32px -16px;
}
.dialog-new-script-button {
cursor: pointer;
}
.main-toolbar-table {
height: 30px;
width: 100%;
padding: 0;
border-spacing: 3px 0;
margin-bottom: 5px;
position: relative;
left: -2px;
}
table.main-toolbar-table > tbody > tr > td {
padding: 0;
width: 24px !important;
height: 24px !important;
}
table.main-toolbar-table > tbody > tr > td:last-child {
width: 100% !important;
text-align: right;
white-space: nowrap;
font-size: 0.75em;
font-weight: normal;
}
table.main-toolbar-table > tbody > tr > td > button {
width: 24px;
height: 24px;
}
table.main-toolbar-table > tr > td {
padding: 10px !important;
}
/*loader*/
@keyframes colors {
0% { stroke: #17572b; }
25% { stroke: #1B9A59; }
50% { stroke: #009a63; }
75% { stroke: #6a9a00; }
100% { stroke: #00f060; }
}
@keyframes dash {
0% { stroke-dashoffset: 187px; }
50% {
stroke-dashoffset: 47px;
transform: rotate(135deg);
}
100% {
stroke-dashoffset: 187px;
transform: rotate(450deg);
}
}
@keyframes rotator {
0% { transform: rotate(0deg); }
100% { transform: rotate(270deg); }
}
#connecting {
left: 0;
top: 0;
width: 100%;
height: 100%;
position: fixed;
background: rgba(0, 0, 0, 0.3);
z-index: 20000;
}
#connecting .connecting-div {
left: 40%;
top: 40%;
width: 20%;
height: 20%;
position: absolute;
}
#connecting .connecting-div .spinner {
animation: rotator 1.4s linear infinite;
}
#connecting .connecting-div .path {
stroke-dasharray: 187px;
stroke-dashoffset: 0;
transform-origin: center;
animation: dash 1.4s ease-in-out infinite, colors 5.2s ease-in-out infinite;
}
.cron-slider {
background: #dadada;
border-radius: 2px;
}
</style>
</head>
<body>
<div id="script-main" style="width: 100%; height: 100%; display: flex; flex-direction: row; flex-wrap: nowrap">
<div id="grid-scripts" style="height: 100%; width: 30%; padding-right: 8px; overflow-x: hidden; background: #efefef">
<!-- Loading indicator -->
<div id="connecting">
<div class="connecting-div">
<svg class="spinner" width="100%" height="100%" viewBox="0 0 66 66" xmlns="http://www.w3.org/2000/svg">
<circle class="path" fill="none" stroke-width="6" stroke-linecap="round" cx="33" cy="33" r="30"></circle>
</svg>
</div>
</div>
</div>
<div id="editor-scripts" style="height: calc(100% - 8px); width: calc(70% - 15px); flex-direction: column; flex-wrap: nowrap; display: none">
<div style="height: 80%; width: 100%; padding-bottom: 8px; overflow: hidden;" class="ui-widget" id="editor-scripts-textarea">
<table style="width: 100%; height: 100%">
<tr>
<td colspan="2">
<table style="width: calc(100% - 20px); border: 0;"><tr>
<td style="width: 500px;">
<label style="display: inline-block; padding-right: 5px" for="edit-script-group" class="translate">name</label>
<select style="display: inline-block" id="edit-script-group"></select><label style="display: inline-block;" for="edit-script-name">/</label><input style="display: inline-block; width: 200px" id="edit-script-name"/>
</td>
<td id="script-buttons" style="width: calc(100% - 410px);">
<label for="edit-script-debug" style="display: inline-block; padding-left: 25px" class="translate">debug</label>
<input id="edit-script-debug" type="checkbox" />
<label for="edit-script-verbose" style="display: inline-block; padding-left: 15px" class="translate">verbose</label>
<input id="edit-script-verbose" type="checkbox" />
<select style="float: right" id="edit-script-engine-type"></select>
<label for="edit-script-engine-type" style="float: right; padding-right: 5px" class="translate">engine type</label>
</td>
</tr></table>
</td>
</tr>
<tr>
<td colspan="2">
<table style="width: 100%"><tr>
<td><button id="script-edit-button-save"></button></td>
<td><button id="script-edit-button-cancel"></button></td>
<td class="edit-wrap-lines"><input id="edit-wrap-lines" type="checkbox"/></td>
<td class="edit-wrap-lines"><label class="translate" for="edit-wrap-lines">Wrap&nbsp;lines</label></td>
<td style="width: 100%"><span style="display: none; font-weight: bold; padding-left: 20px; text-decoration: none" id="global_hint"><a href="https://git.spacen.net/yunkong2/yunkong2.javascript#global-functions" target="_blank" class="translate" style="text-decoration: none; color: #40bf40">global_hint</a></span></td>
<td><button id="edit-export-blocks" class="translate script-edit"></button></td>
<td><button id="edit-import-blocks" class="translate script-edit"></button></td>
<td><button id="edit-check-blocks" class="translate script-edit" style="white-space: nowrap;">Check blocks</button></td>
<td><button id="show-blockly-id" class="translate script-edit">Show code</button></td>
<td><button class="translate script-edit edit-cron-id">Cron</button></td>
<td><button id="edit-insert-id" class="translate script-edit">Insert ID</button></td>
</tr></table>
</td>
</tr>
<tr style="height: 100%;" class="script-edit">
<td colspan="2" style="height: 100%; width: 100%; position: relative">
<div style="position: absolute; top: 0; bottom: 0; width: 10px" id="height-editor"></div>
<div id="script-editor" style="height: 100%; width: 100%"></div>
<div id="blockly-editor" style="height: 100%; width: 100%; overflow: hidden"></div>
<div id="builder-widgets" class="bootstrap" style="height: 100%; width: 100%; overflow: hidden"></div>
</td>
</tr>
</table>
</div>
<div style="height: 20%; width: 100%; display: flex; flex-direction: row; flex-wrap: nowrap" id="script-output-tab" class="script-edit">
<div style="width: 30px">
<table>
<tr><td class="translate" style="font-family: arial, sans-serif; font-weight: bold">Log</td></tr>
<tr><td><button id="script-output-clear"></button></td></tr>
<tr><td><button id="script-output-down"></button></td></tr>
</table>
</div>
<div style="overflow-x: auto; overflow-y: auto; width: calc(100% - 30px)">
<table style="width: 100%">
<thead>
<col width="80px"/>
<col width="50px"/>
<col width="*"/>
</thead>
<tbody id="script-output" ></tbody>
</table>
</div>
</div>
</div>
</div>
<div id="dialog-script" style="display: none">
<table style="height: 100%; width: 100%;">
<tr>
<td>
<button class="translate edit-cron-id">Cron</button>
<button id="dialog-edit-insert-id" class="translate">Insert ID</button>
<label class="translate" for="dialog-edit-wrap-lines" style="padding-left: 20px; display: inline-block;">Wrap&nbsp;lines</label>
<input id="dialog-edit-wrap-lines" type="checkbox"/>
</td>
</tr>
<tr style="height: 100%;">
<td style="height: 100%;">
<div style="height: 100%; width: 100%" id="dialog-script-editor"></div>
</td>
</tr>
</table>
</div>
<div id="dialog-new-group" style="display: none">
<table style="width: 100%">
<tr>
<td><label for="edit-new-group-name" class="translate">new group name</label></td>
<td><input style="display: inline-block; width: 200px" id="edit-new-group-name"></td>
</tr>
<tr>
<td><label for="edit-new-group-group" class="translate">Create in:</label></td>
<td><select id="edit-new-group-group"></select></td>
</tr>
</table>
</div>
<div id="dialog-message" title="Message" style="display: none">
<p>
<span id="dialog-message-icon" class="ui-icon ui-icon-circle-check" style="float: left; margin: 0 7px 50px 0;"></span>
<span id="dialog-message-text"></span>
</p>
</div>
<div id="dialog-confirm" title="Question" style="display: none">
<p>
<span id="dialog-confirm-icon" class="ui-icon ui-icon-circle-check" style="float: left; margin: 0 7px 50px 0;"></span>
<span id="dialog-confirm-text"></span>
</p>
</div>
<div id="dialog-new-script" title="Select type" style="display: none; width: 550px; height: 170px">
<table style="width: 100%"><tr>
<td style="text-align: center"><img src="blockly.png" data-type="Blockly" class="dialog-new-script-button" /></td>
<td style="text-align: center"><img src="js.png" data-type="Javascript/js" class="dialog-new-script-button" /></td>
<td style="text-align: center"><img src="typescript.png" data-type="TypeScript/ts" class="dialog-new-script-button" /></td>
<!--td style="text-align: center"><img src="coffeescript.png" data-type="Coffeescript/coffee" class="dialog-new-script-button" /></td-->
<!--td style="text-align: center"><img src="rule.png" data-type="Rule" class="dialog-new-script-button" /></td-->
</tr>
</table>
</div>
<div id="dialog-select-member" style="display:none"></div>
<div id="dialog-cron" style="display: none">
<div id="div-cron"></div>
</div>
<div id="dialog-export-blockly" style="display: none">
<textarea id="dialog-export-blockly-textarea" style="width: 99%; height: 98%; font-size: 11px; resize: none;" readonly></textarea>
</div>
<div style="display: none; overflow: hidden; text-align: center;" id="dialog_import_scripts" title="import scripts" class="translateT">
<div class="import-drop-zone" style="display: none">
<div style="padding-top: 20%" class="translate import-drop-text"></div>
<input type="file" class="import-drop-file" style="display: none">
</div>
<div class="import-text-drop">
<span class="import-file-name translate">Drop files here or click to select one</span>
<span class="import-text-drop-plus">+</span>
</div>
<button id="start_import_scripts" class="translateB" style="margin: 20px">import&nbsp;scripts</button>
</div>
<xml id="toolbox" style="display: none">
<category><block>%%CUSTOM_BLOCKS%%</block></category>
<sep></sep>
<category name="{catLogic}" colour="0">
<block type="controls_if"></block>
<block type="logic_compare"></block>
<block type="logic_operation"></block>
<block type="logic_negate"></block>
<block type="logic_boolean"></block>
<block type="logic_null"></block>
<block type="logic_ternary"></block>
</category>
<category name="{catLoops}" colour="120">
<block type="controls_repeat_ext">
<value name="TIMES">
<shadow type="math_number">
<field name="NUM">10</field>
</shadow>
</value>
</block>
<block type="controls_whileUntil"></block>
<block type="controls_for">
<value name="FROM">
<shadow type="math_number">
<field name="NUM">1</field>
</shadow>
</value>
<value name="TO">
<shadow type="math_number">
<field name="NUM">10</field>
</shadow>
</value>
<value name="BY">
<shadow type="math_number">
<field name="NUM">1</field>
</shadow>
</value>
</block>
<block type="controls_forEach"></block>
<block type="controls_flow_statements"></block>
</category>
<category name="{catMath}" colour="230">
<block type="math_number"></block>
<block type="math_arithmetic">
<value name="A">
<shadow type="math_number">
<field name="NUM">1</field>
</shadow>
</value>
<value name="B">
<shadow type="math_number">
<field name="NUM">1</field>
</shadow>
</value>
</block>
<block type="math_single">
<value name="NUM">
<shadow type="math_number">
<field name="NUM">9</field>
</shadow>
</value>
</block>
<block type="math_trig">
<value name="NUM">
<shadow type="math_number">
<field name="NUM">45</field>
</shadow>
</value>
</block>
<block type="math_constant"></block>
<block type="math_number_property">
<value name="NUMBER_TO_CHECK">
<shadow type="math_number">
<field name="NUM">0</field>
</shadow>
</value>
</block>
<block type="math_change">
<value name="DELTA">
<shadow type="math_number">
<field name="NUM">1</field>
</shadow>
</value>
</block>
<block type="math_round">
<value name="NUM">
<shadow type="math_number">
<field name="NUM">3.1</field>
</shadow>
</value>
</block>
<block type="math_rndfixed">
<value name="x">
<shadow type="math_number">
<field name="NUM">3.1234</field>
</shadow>
</value>
<value name="n">
<shadow type="math_number">
<field name="NUM">2</field>
</shadow>
</value>
</block>
<block type="math_on_list"></block>
<block type="math_modulo">
<value name="DIVIDEND">
<shadow type="math_number">
<field name="NUM">64</field>
</shadow>
</value>
<value name="DIVISOR">
<shadow type="math_number">
<field name="NUM">10</field>
</shadow>
</value>
</block>
<block type="math_constrain">
<value name="VALUE">
<shadow type="math_number">
<field name="NUM">50</field>
</shadow>
</value>
<value name="LOW">
<shadow type="math_number">
<field name="NUM">1</field>
</shadow>
</value>
<value name="HIGH">
<shadow type="math_number">
<field name="NUM">100</field>
</shadow>
</value>
</block>
<block type="math_random_int">
<value name="FROM">
<shadow type="math_number">
<field name="NUM">1</field>
</shadow>
</value>
<value name="TO">
<shadow type="math_number">
<field name="NUM">100</field>
</shadow>
</value>
</block>
<block type="math_random_float"></block>
</category>
<category name="{catText}" colour="160">
<block type="text"></block>
<block type="text_newline"></block>
<block type="text_join"></block>
<block type="text_append">
<value name="TEXT">
<shadow type="text"></shadow>
</value>
</block>
<block type="text_length">
<value name="VALUE">
<shadow type="text">
<field name="TEXT">abc</field>
</shadow>
</value>
</block>
<block type="text_isEmpty">
<value name="VALUE">
<shadow type="text">
<field name="TEXT"></field>
</shadow>
</value>
</block>
<block type="text_indexOf">
<value name="VALUE">
<block type="variables_get">
<field name="VAR">{textVariable}</field>
</block>
</value>
<value name="FIND">
<shadow type="text">
<field name="TEXT">abc</field>
</shadow>
</value>
</block>
<block type="text_charAt">
<value name="VALUE">
<block type="variables_get">
<field name="VAR">{textVariable}</field>
</block>
</value>
</block>
<block type="text_getSubstring">
<value name="STRING">
<block type="variables_get">
<field name="VAR">{textVariable}</field>
</block>
</value>
</block>
<block type="text_changeCase">
<value name="TEXT">
<shadow type="text">
<field name="TEXT">abc</field>
</shadow>
</value>
</block>
<block type="text_trim">
<value name="TEXT">
<shadow type="text">
<field name="TEXT">abc</field>
</shadow>
</value>
</block>
</category>
<category name="{catLists}" colour="260">
<block type="lists_create_with">
<mutation items="0"></mutation>
</block>
<block type="lists_create_with"></block>
<block type="lists_repeat">
<value name="NUM">
<shadow type="math_number">
<field name="NUM">5</field>
</shadow>
</value>
</block>
<block type="lists_length"></block>
<block type="lists_isEmpty"></block>
<block type="lists_indexOf">
<value name="VALUE">
<block type="variables_get">
<field name="VAR">{listVariable}</field>
</block>
</value>
</block>
<block type="lists_getIndex">
<value name="VALUE">
<block type="variables_get">
<field name="VAR">{listVariable}</field>
</block>
</value>
</block>
<block type="lists_setIndex">
<value name="LIST">
<block type="variables_get">
<field name="VAR">{listVariable}</field>
</block>
</value>
</block>
<block type="lists_getSublist">
<value name="LIST">
<block type="variables_get">
<field name="VAR">{listVariable}</field>
</block>
</value>
</block>
<block type="lists_split">
<value name="DELIM">
<shadow type="text">
<field name="TEXT">,</field>
</shadow>
</value>
</block>
<block type="lists_sort"></block>
</category>
<category name="{catColour}" colour="20">
<block type="colour_picker"></block>
<block type="colour_random"></block>
<block type="colour_rgb">
<value name="RED">
<shadow type="math_number">
<field name="NUM">100</field>
</shadow>
</value>
<value name="GREEN">
<shadow type="math_number">
<field name="NUM">50</field>
</shadow>
</value>
<value name="BLUE">
<shadow type="math_number">
<field name="NUM">0</field>
</shadow>
</value>
</block>
<block type="colour_blend">
<value name="COLOUR1">
<shadow type="colour_picker">
<field name="COLOUR">#ff0000</field>
</shadow>
</value>
<value name="COLOUR2">
<shadow type="colour_picker">
<field name="COLOUR">#3333ff</field>
</shadow>
</value>
<value name="RATIO">
<shadow type="math_number">
<field name="NUM">0.5</field>
</shadow>
</value>
</block>
</category>
<sep></sep>
<category name="{catVariables}" colour="330" custom="VARIABLE"></category>
<category name="{catFunctions}" colour="290" custom="PROCEDURE"></category>
</xml>
<script type="text/javascript" src="tab.js"></script>
</body>
</html>