iotview/bind.html at master · zhengweixing/iotview · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <link rel="stylesheet" type="text/css" href="css/main.css">
    <link rel="stylesheet" type="text/css" href="lib/grapheditor/styles/grapheditor.css">
    <script type="text/javascript" src="lib/jquery/jquery.js"></script>
    <script type="text/javascript" src="lib/grapheditor/deflate/base64.js"></script>
    <script type="text/javascript" src="js/Init.js"></script>
    <script type="text/javascript" src="lib/mxgraph/src/js/mxClient.js"></script>
    <script type="text/javascript" src="js/App.js"></script>
    <script type="text/javascript">
        function hideWindow() {
            window.parent.openFile.cancel(true);
        }
        function insert(id){
            var code = defaultCode[id].toString();
            $('#' + id).val(code);
        }
        function main() {
            var graph = window.parent.graph;
            var type = window.parent.shapeType;
            switch (type){
                case 'MQTT':
                case 'HTTP':
                    var id = type + "Box";
                    $("#"+id).css("display", "block");
                    break;
                default:
                    $("#OTHERBox").css("display", "block");
                    break;
            }

            var cell = window.parent.cell;
            var props = $('.prop');
            props.each(function(i, item){
                var styleId = item.id;
                var state = graph.view.getState(cell);
                var val = mxUtils.getValue(state.style, styleId, '');
                $('#' + styleId).val(Base64.decode(val));
            });
            $('#applyBtn').click(function(){
                props.each(function(i, item){
                    var styleId = item.id;
                    if(!$(item).is(":hidden")){
                        var val = $('#' + styleId).val();
                        val = Base64.encode(val);
                        graph.setCellStyles(styleId, val, [cell]);
                    }
                });
                hideWindow(true);
            });
        }
    </script>
    <style type="text/css">
        body{
            margin: 0px;
        }
       .box {
           display: none;
       }
       .titleBox {
           margin: 10px 0px;
           font-size: 20px;
           font-weight: bolder;
       }
        .footer{
            height: 30px;
            width: 100%;
            background-color: #f5f5f5;
            position: fixed;
            bottom: 0;
            padding: 10px;
        }
        .insertBtn {
            font-size: small;
            padding: 10px;
            color: blue;
        }

    </style>
</head>
<body onload="main();">
<div id="mainBox">
    <div style="padding:10px 30px 10px 10px;border-bottom: 1px solid silver;">
        <div style="display:inline-block;font-weight:bolder;font-size: 25px;">高级设置</div>
    </div>
    <div style="padding:20px 20px 50px 20px">
        <div id="MQTTBox" class="box">
            <div>
                <div><span class="titleBox">订阅主题</span></div>
                <textarea class="prop" id="topics" cols="5" rows="10" style="width:100%"></textarea>
            </div>
            <div>
                <div><span class="titleBox">格式化</span><a class = "insertBtn" onclick="insert('doFormat')">插入模板</a></div>
                <textarea class="prop" id="doFormat" cols="5" rows="10" style="width:100%"></textarea>
            </div>
        </div>
        <div id="OTHERBox" class="box">
            <div>
                <div><span class="titleBox">消息处理</span><a class = "insertBtn" onclick="insert('doMsg')">插入模板</a></div>
                <textarea class="prop" id="doMsg" cols="5" rows="10" style="width:100%"></textarea>
            </div>
        </div>
        <div id="baseBox">
            <div>
                <div><span class="titleBox">单击事件</span><a class = "insertBtn" onclick="insert('onClick')">插入模板</a></div>
                <textarea class="prop" id="onClick" cols="5" rows="10" style="width:100%"></textarea>
            </div>
        </div>
    </div>
</div>
<div class="footer">
    <div style="float:right;padding-right:25px;">
        <input type="button" id="cancel" class="geBtn" value="取消" onclick="hideWindow();">
        <input type="submit" id="applyBtn" class="geBtn gePrimaryBtn" value="应用">
    </div>
</div>
</body>
</html>