5/16/2017 - 6:41 PM

Test // source http://jsbin.com/jiruzoyece

Test

<!doctype html>
<html>
<head>
    <link type="text/css" rel="stylesheet" href="stylesheets/index.css"/>
    <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
    <script src="/socket.io/socket.io.js"></script>
    <script src="reporter.js"></script>
</head>
<body>

<div id='pfd' class="container">
    <div id="tDate" class="element ">..date..</div>
    <div id="btnDate" class="element btnHere">request Date</div>
    <div id="btnLogRequest" class="element btnHere">LogRequest</div>

    <div class="clearfix element" style="background:#aaccaa;">lastUpdate:
        <div id="tLastUpDate" class="element"></div>
    </div>

</div>

<div class="container clearfix">
    <div id="col1-wrapper" class="container clearfix">
        <h2>business</h2>

        <div id="tStatus" class="element"></div>
        <div id="col-business" class="element">
        </div>
    </div>
    <div id="col2-wrapper" class="container clearfix">
        <h2>local</h2>

        <div id="col-local" class="element clearfix">
        </div>
    </div>
    <div id="col3-wrapper" class="container clearfix">
        <h2>global</h2>

        <div id="col-global" class="element">
        </div>
    </div>
</div>

<script>

    var doLastUpDate = function (date) {
        $("#tLastUpDate").text(date);
    };

    $(document).ready(function () {

        c1 = c2 = c3 = 0;
        var socket = io.connect(); // 'http://localhost:32701');
        //
        reporter = Reporter.Reporter({socket: socket});
        Reporter.status($('#col2'), 'ready');


        $("#pfd").mousemove(function (args) {
            socket.emit('mousemove', {x: args.pageX, y: args.pageY});
        });

        $(".btnHere").mouseover(function (args) {
            $(this).css('background', 'lightgrey');
        });
        $(".btnHere").mouseout(function (args) {
            $(this).css('background', 'transparent');
        });

        $("#btnDate").click(function (args) {
            $("#tDate").text('waiting...');
            Reporter.emit_and_log('/request/date');
        });
        $("#btnLogRequest").click(function (args) {
            $("#tDate").text('waiting...');
            Reporter.emit_and_log('/request/logdump');
        });

        socket.on('/news/business', function (data) {
            doLastUpDate(data.date);
            data.counter = c1++;
            Reporter.log(data);
            data.localtype = 'business';
            Reporter.status($('#col-business'), data);
        });
        socket.on('/news/local', function (data) {
            doLastUpDate(data.date);
            data.counter = c2++;
            Reporter.log(data);

            data.localtype = 'local';
            Reporter.status($("#col-local"), data);
        });
        socket.on('/news/global', function (data) {
            doLastUpDate(data.date);
            data.counter = c3++;
            data.localtype = 'global';
            Reporter.status($("#col-global"), data);
        });
        socket.on('/response/date', function (data) {
            $("#tDate").text(data.date);
            doLastUpDate(data.date);
            Reporter.log('/response/date: ' + JSON.stringify(data));
            data.localtype = 'date';
            Reporter.status($("#tStatus"), data);
        });
        socket.on('/response/logdump', function (data) {
            doLastUpDate(data.date);
            Reporter.log('/response/logdump: ' + JSON.stringify(data));
            Reporter.status($('#tStatus'), data);
        });
    });

</script>
</body>
</html>

reporter.js

/**
 *  TODO: review
 *  mClient muss '.socket' besitzen.. is ein bissl viel verlangt
 *
 */
var module = [];
module.exports = []; // wir sind hier im browser...

var self = module.exports.Reporter = reporter = Reporter = {
    mClient: null,
    Reporter: function (client) {
        self.mClient = client;
    }
    , emit_and_log: function (args) {
        self.mClient.socket.emit("helo", args);
        console.log('Reporter emitting:', JSON.stringify(args));
    }
    , log: function (args) {
        console.log("Reporter @ " + (new Date()) + ": " + JSON.stringify(args));
    }
    , status: function (where, args) {
        // inspection: empty tag doesn't work in some browsers
        where.html($('<div ></div>').text('reporting status: ' + JSON.stringify(args)));
    }
};

package.json

{
  "name": "ase-server-45001-whbase",
  "version": "0.0.1",
  "description": "jetzt mit repos",
  "keywords": "testing",
  "homepage": "http://twitter.com/wolfhesse",
  "repository": {
    "type": "git",
    "url": "git://github.com/wolfhesse/ase-whbase.git"
  },
  "dependencies": {
    "express": "",
    "request": "",
    "socket.io": "1.3.7",
    "socket.io-client": "1.3.7"
  }
}

master.md

Rendered
Source

master-branch?

yes. merged into core;

index.html

<html>
<head>
    <title>Test</title>
    <script src="https://code.jquery.com/jquery-1.9.1.js"></script>

    <script src="/socket.io/socket.io.js"></script>
    <script src="reporter.js"></script>

    <!--<script src="https://fb.me/react-0.14.3.min.js"></script>-->
    <!--<script src="https://fb.me/react-dom-0.14.3.min.js"></script>-->

    <script src="https://fb.me/react-0.14.3.js"></script>
    <script src="https://fb.me/react-dom-0.14.3.js"></script>

    <script src="https://fb.me/JSXTransformer-0.12.2.js"></script>
</head>
<body>


<div id="soln1">solution 1</div>
<div id="soln2">solution 2</div>
<div id="soln3">solution 3</div>
<hr/>
<div id="x-ase-panel-zulu">
    <div id="col2">col2</div>
    <div id="col-global"></div>
    <div id="col-local"></div>
    <div id="col-business"></div>
    <textarea rows="6" cols="80" id="tLastUpDate"></textarea>
</div>
<script type="text/jsx" id="jsx-main">
    /** @jsx React.DOM */


    var socket;
    $(document).ready(function () {

        socket = io.connect('http://metaloi.wolfspool.chickenkiller.com/');

        //
        reporter = Reporter.Reporter({socket: socket});

        Reporter.status($('#col2'), 'ready');
        var doLastUpDate = function (date) {
            try {
                $("#tLastUpDate").text(JSON.stringify(date));
            } catch (ex) {
                $("#tLastUpDate").text(date);
            }

        };
        socket.on("connect", function () {
            socket.on('data', function (data) {
                doLastUpDate(data);

                Reporter.log(data);
                data.localtype = 'business';
                Reporter.status($('#col-business'), JSON.stringify(data));
            });
            socket.on('tick', function (data) {
                doLastUpDate(data);

                Reporter.log(data);

                data.localtype = 'local';
                Reporter.status($("#col-local"), data);
            });
        });

        var TestApp = React.createClass({
            getComponent: function (index) {
                $(this.getDOMNode()).find('li:nth-child(' + index + ')').css({'background-color': '#ccc'});
            },
            render: function () {
                return (
                        <div>
                            <h5>TestApp</h5>
                            <ul>
                                <li onClick={this.getComponent.bind(this, 1)}>Component 1</li>
                                <li onClick={this.getComponent.bind(this, 2)}>Component 2</li>
                                <li onClick={this.getComponent.bind(this, 3)}>Component 3</li>
                            </ul>
                        </div>
                );
            }
        });
        ReactDOM.render(<TestApp />, document.getElementById('soln1'));

        var Switch1 = React.createClass({
            selections: [],
            getInitialState: function () {

                (function (sw) {
                    socket.on("data", function (data) {
                        data.client_now = Date();
                        sw.setState({message: "data: " + JSON.stringify(data)});
                    });
                })(this);

                return {
                    content: this.props.content,
                    isSelected: this.props.checked,
                    socket: this.props.socket,
                    message: "initial message",
                    checked: "nothing yet"
                };
            },
            handleClick: function (ev1, ev2) {

                var ev = [ev1, ev2]; // for debugging purposes

                console.log('click Switch ' + ev1.currentTarget.value);
                console.log(ev1.currentTarget.name);

                this.selections[parseInt(ev1.currentTarget.value)] = {
                    name: ev1.currentTarget.name,
                    value: ev1.currentTarget.value,
                    checked: ev1.currentTarget.checked
                };

                this.setState({checked: JSON.stringify(this.selections)});
                Reporter.emit_and_log({
                    data: {
                        op: 'handleClick'
                        , dataFormat: ['as-timeline']
                        , isSelected: [this.state.isSelected]
                        , selections: [this.selections]
//                    , message: [this.state.message]
                        , socket_connected: [this.state.socket.connected]
                    }
                });
                console.log(this);

            },
            render: function () {
                return (
                        <div>
                            <h5>{ this.state.content} </h5>
                            <div>
                                <p>
                                    {this.state.checked}
                                </p>
                                <p>
                                    message: {this.state.message}
                                </p>
                            </div>

                            <div>
                                <input name='vehicle-blue' type="checkbox" onChange={this.handleClick } value="0">
                                    <div>
                                        <h6>vehicle-blue</h6>
                                    </div>
                                </input >
                                <input name='vehicle-fast' type="checkbox" onChange={this.handleClick } value="1">
                                    <div>
                                        <h6>vehicle-fast</h6>
                                    </div>
                                </input >
                            </div>
                        </div>
                );
            }
        });


        //        render: function () {
        //            console.log('render Switch1');
        //            var style = {'background-color': ''};
        //            if (this.state.isSelected) {
        //                style = {'background-color': '#ccc'};
        //            }
        //
        //            return (
        //                    <checkbox onClick={this.handleClick} style={style}>{this.state.content}</checkbox>
        //            );
        //        }
        //    });

        var ListItem = React.createClass({
            counter: 0,
            getInitialState: function () {
                console.log('getInitialState');
                if (undefined != this.props.counter)
//                this.setInitialCounter(parseInt(this.props.counter));
                    this.setInitialCounter(this.props.counter);

                var content = this.props.content + ` .. Component :: counter set to ${this.counter}`;

                this.run();

                return {isSelected: false, x_ase_type: this.props.content, counter: this.counter, content: content};
            },
            setInitialCounter: function (i) {
                try {
                    this.counter = parseInt(i);

                }
                catch (ex) {
                    this.state.content = ex.message;
                    this.counter = -99;
                }
            },
            handleClick: function () {
                Reporter.emit_and_log({
                    data: {
                        date: Date(),
                        message: "handleClick",
                        step: 0,
                        counter: this.state.counter,
                        isSelected: this.state.isSelected
                    }
                });

                console.log('counter is ' + this.state.counter);
                this.setState({counter: (this.state.counter + 1)});
                console.log('counter is ' + this.state.counter);

                this.setState({
                    isSelected: !this.state.isSelected
                });

                this.setState({content: `${this.state.x_ase_type} -- \{ this.counter = ${this.state.counter} }`});

                console.log('handleClick: ' + this.state.x_ase_type);
                console.log('handleClick: ' + this.state.content);

                console.log('counter is ' + this.state.counter);
//                setTimeout(function () {
                Reporter.emit_and_log({
                    data: {
                        date: Date()
                        , message: "handleClick"
                        , step: 1
                        , counter: this.state.counter
                        , isSelected: this.state.isSelected
                        , x_ase_type: this.state.x_ase_type
                        , deferred: false
                        , bcast: ['demo-command-bus', 'demo']
                    }
                });
//                }(), 500);

            },
            interval: null,
            run: function () {
                // returns function, exec side-effekt
                this.interval = setInterval(() => {
//                console.log('interval ' + Date());
                    this.setState({content: `${this.state.x_ase_type}  - ${this.state.counter} @ interval: ${Date()}`});
                }, 500);
            },
            kill: function () {
                try {
                    console.log('killing');
                    clearInterval(this.interval);
                    try {
                        this.props.app.kill();
                    }
                    catch (ex1) {
                        console.log('cannot this.props.app.kill()');
                    }
                } catch (ex) {
                }

            },

            render: function () {
//            var isSelected = this.state.isSelected;

//            Reporter.log({data: `render @ ${Date()}`});

                var style = {'background-color': ''};
                if (this.state.isSelected) {
                    style = {'background-color': '#ccc'};
                }
                return (
                        <li onClick={this.handleClick} style={style}>{this.state.content}</li>
                );
            }
        });

        var TestApp2 = React.createClass({
            initial_counter: 21,
//        getComponent: function (index) {
//            $(this.getDOMNode()).find('li:nth-child(' + index + ')').css({'background-color': '#ccc'});
//        },
            render: function () {
                return (
                        <div>
                            <h5>TestApp2</h5>
                            <ul>
                                <ListItem content={"Component 1 - // " + this.initial_counter }
                                          counter={ this.initial_counter }/>
                                <ListItem content={"Component 2 - // " + this.initial_counter } counter="8"/>
                                <ListItem content={"Component 3 - // " + this.initial_counter} counter="9"/>
                            </ul>
                        </div>
                );
            }
        });
        ReactDOM.render(
                <TestApp2 />
            , document.getElementById('soln2'));

        var TestApp3 = React.createClass({
            name: '** TestApp3 Name ** ',
            getInitialState: function () {
                return ({content: '', isSelected: false, name: this.name});
            },
            kill: function () {
                console.log('kill in TestApp3');
            },
            setName: function (date) {
                this.setState({name: date});
            },
            render: function () {
                return (
                        <div>
                            <h5>{ this.state.name } - TestApp3</h5>
                            <ul>
                                <ListItem content="Component 1"/>
                                <ListItem content="Component 2"/>
                                <ListItem content="Component 3"/>

                            </ul>
                            <Switch1 id="a" content="Component switch" checked="false" socket={socket}/>
                        </div>
                );
            }
        });
        ReactDOM.render(
                <TestApp3 />
            , document.getElementById('soln3'));

    });

</script>
</body>
</html>

html.uml

<?xml version="1.0" encoding="UTF-8"?>
<Diagram>
  <ID>JavaScript-modules-diagram</ID>
  <OriginalElement>/extdisker/extdisk/infopool.d/gists.d/0ca6729d9544ff5de9193ee8e913bc9b/index.html</OriginalElement>
  <nodes>
    <node x="0.0" y="70.0">/home/rogera/.IntelliJIdea2017.2/config/javascript/extLibs/http_code.jquery.com_jquery-1.9.1.js</node>
    <node x="122.0" y="297.0">/home/rogera/.IntelliJIdea2017.2/config/javascript/extLibs/http_fb.me_JSXTransformer-0.12.2.js</node>
    <node x="114.0" y="149.0">/extdisker/extdisk/infopool.d/gists.d/0ca6729d9544ff5de9193ee8e913bc9b/index.html</node>
    <node x="19.0" y="226.0">/extdisker/extdisk/infopool.d/gists.d/0ca6729d9544ff5de9193ee8e913bc9b/reporter.js</node>
    <node x="114.0" y="0.0">/extdisker/extdisk/infopool.d/gists.d/0ca6729d9544ff5de9193ee8e913bc9b/socket.io/socket.io.js</node>
    <node x="229.0" y="79.0">https://fb.me/react-0.14.3.js</node>
    <node x="240.0" y="199.0">https://fb.me/react-dom-0.14.3.js</node>
  </nodes>
  <notes />
  <edges>
    <edge source="/extdisker/extdisk/infopool.d/gists.d/0ca6729d9544ff5de9193ee8e913bc9b/index.html" target="/extdisker/extdisk/infopool.d/gists.d/0ca6729d9544ff5de9193ee8e913bc9b/socket.io/socket.io.js">
      <point x="0.0" y="0.0" />
      <point x="0.0" y="0.0" />
    </edge>
    <edge source="/extdisker/extdisk/infopool.d/gists.d/0ca6729d9544ff5de9193ee8e913bc9b/index.html" target="/extdisker/extdisk/infopool.d/gists.d/0ca6729d9544ff5de9193ee8e913bc9b/reporter.js">
      <point x="0.0" y="0.0" />
      <point x="0.0" y="0.0" />
    </edge>
    <edge source="/extdisker/extdisk/infopool.d/gists.d/0ca6729d9544ff5de9193ee8e913bc9b/index.html" target="https://fb.me/react-0.14.3.js">
      <point x="0.0" y="0.0" />
      <point x="0.0" y="0.0" />
    </edge>
    <edge source="/extdisker/extdisk/infopool.d/gists.d/0ca6729d9544ff5de9193ee8e913bc9b/index.html" target="/home/rogera/.IntelliJIdea2017.2/config/javascript/extLibs/http_fb.me_JSXTransformer-0.12.2.js">
      <point x="0.0" y="0.0" />
      <point x="0.0" y="0.0" />
    </edge>
    <edge source="/extdisker/extdisk/infopool.d/gists.d/0ca6729d9544ff5de9193ee8e913bc9b/index.html" target="https://fb.me/react-dom-0.14.3.js">
      <point x="0.0" y="0.0" />
      <point x="0.0" y="0.0" />
    </edge>
    <edge source="/extdisker/extdisk/infopool.d/gists.d/0ca6729d9544ff5de9193ee8e913bc9b/index.html" target="/home/rogera/.IntelliJIdea2017.2/config/javascript/extLibs/http_code.jquery.com_jquery-1.9.1.js">
      <point x="0.0" y="0.0" />
      <point x="0.0" y="0.0" />
    </edge>
  </edges>
  <settings layout="Hierarchic Group" zoom="1.0" x="183.0" y="163.0" />
  <SelectedNodes>
    <node>https://fb.me/react-dom-0.14.3.js</node>
  </SelectedNodes>
  <Categories>
    <Category>All</Category>
  </Categories>
  <VISIBILITY>Details</VISIBILITY>
</Diagram>

.gitignore

backup.local.d

socket.io
stylesheets

# Created by .ignore support plugin (hsz.mobi)
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pids
*.pid
*.seed
*.pid.lock
lib-cov
coverage
.nyc_output
.grunt
bower_components
.lock-wscript
build/Release
node_modules/
jspm_packages/
typings/
.npm
.eslintcache
.node_repl_history
*.tgz
.yarn-integrity
.env

._README.md

Rendered
Source

title: readme for gist-based frontentd
author: @wolfhesse

project in a file

operations

rsync -rvzP --size-only rogera@core.wolfspool.chickenkiller.com:/extdisker/extdisk/infopool.d/gists.d/0ca6729d9544ff5de9193ee8e913bc9b/backup.local.d/ ./backup.local.d/

copies of stylesheets/

copies of socket.io/

demo: http://index-page-sample-wolfhesse.c9users.io/backup.local.d/html.png

Cacher is the code snippet organizer for pro developers

We empower you and your team to get more done, faster

Test // source http://jsbin.com/jiruzoyece

project in a file

operations

copies of stylesheets/

copies of socket.io/