crate-conZole/index.html at master · megastef/crate-conZole · 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
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/html">
<head>
    <!--
        link to zebra library from zebra web site
     -->
    <script src='js/zebra.js'  type='text/javascript'>
    </script>
    <script src='js/jquery.min.js' type='text/javascript'>
    </script>
    <script src="js/bundle.js"></script>
    <script src="./conzole.js"></script>
    <script src="./bower_components/ace-builds/src-noconflict/ace.js" type="text/javascript" charset="utf-8"></script>
    <script src="./bower_components/ace-builds/src-noconflict/theme-chrome.js" type="text/javascript"
            charset="utf-8"></script>

    <script src="./bower_components/ace-builds/src-noconflict/mode-sql.js" type="text/javascript"
            charset="utf-8"></script>
    <script src="./bower_components/ace-builds/src-noconflict/ext-settings_menu.js" type="text/javascript"
            charset="utf-8"></script>
    <script src="./bower_components/ace-builds/src-noconflict/ext-keybinding_menu.js" type="text/javascript"
            charset="utf-8"></script>

    <style>

        #txt1 {
            -webkit-border-radius: 6px;
            -moz-border-radius: 6px;
            border-radius: 6px;
            border: 2px solid gray;
            -webkit-box-shadow: 1px 1px 0px #EFEFEF;
            -moz-box-shadow: 1px 1px 0px #efefef;
            box-shadow: 1px 1px 0px #EFEFEF;
            min-width:900px;
            width:80%;
            height:200px;
            margin-left:10%;
            margin-bottom:10px;
            margin-right:10%;
        }

        #txt1:focus {
            -webkit-border-radius: 6px;
            -moz-border-radius: 6px;
            border-radius: 6px;
            border: 2px solid steelblue;
            -webkit-box-shadow: 1px 1px 0px #EFEFEF;
            -moz-box-shadow: 1px 1px 0px #efefef;
            box-shadow: 1px 1px 0px #EFEFEF;
            min-width:900px;
            width:80%;
            height:200px;
            margin-left:10%;
            margin-bottom:10px;
            margin-right:10%;
        }


    </style>
    <script>

        //zebra.ui.configure("zebra/zebra.json");
        $(document).ready(function () {
            $('#title').text($('#title').text() + ' - ' + window.location.host)
            var editor = ace.edit("txt1");
            editor.setKeyboardHandler('vim');
            ace.require('ace/ext/settings_menu').init(editor);
            //ace.require('ace/ext/modelist').init(editor)
            ace.require("ace/ext/keybinding_menu").init(editor)
            editor.commands.addCommands([
                {
                    name: "showSettingsMenu",
                    bindKey: {mac: "Ctrl-m", win: "Command-m"},
                    exec: function (editor) {
                        editor.showSettingsMenu();
                    },
                    readOnly: true
                }
            ]);
            window.editor = editor;
            editor.setTheme("ace/theme/chrome");
            editor.getSession().setMode("ace/mode/sql");
            editor.on ('focus', function(){
                $('#txt1').css ('border','2px solid steelblue');
            })
            editor.on ('blur', function(){
                $('#txt1').css ('border','2px solid gray');
            })
        })


    </script>
</head>

<body style=" color: grey;background-color: white;">

<!--h2  align="center" style='font: "Arial; color: steelblue"'> conZole </h2> <hr/ -->
<h2 id="title"
    style="font-family: Helvetica;font-size: 18;font-style: bold;border-radius:4px;min-width:900px;width:80%;margin-left:10%;margin-right:10%">
    crate ConZole</h2>

<div title="CTRL+ENTER to run query. CTRL+M show options menu. CMD+F search" id="txt1" rows="5">select * from tweets limit 500
</div>
<canvas id="myCanvas" style="margin-top:0px;min-width:880px;height:500px;width:80%;margin-left:10%;margin-right:10%;">
</canvas>
<p style=";width:80%;margin-left:10%;">Contributions: zebra.ui (github: barmalei/zebra),
    node-crate (github: megastef/node-crate.js) </p> </font>

</body>
</html>