diff options
author | Christian Pointner <equinox@helsinki.at> | 2016-09-28 17:54:09 (GMT) |
---|---|---|
committer | Christian Pointner <equinox@helsinki.at> | 2016-09-28 17:54:09 (GMT) |
commit | 7e3963d4a0ca528f041023146ba37810c9aef027 (patch) | |
tree | 9c071df311865ea0631d547c45c387696b682d36 /www | |
parent | abff311cf69765ce7afebfb1523d37717af88e8e (diff) |
added npm build environment
Diffstat (limited to 'www')
-rw-r--r-- | www/index.html | 9 | ||||
-rw-r--r-- | www/js/bundle.js (renamed from www/js/clock.js) | 117 |
2 files changed, 55 insertions, 71 deletions
diff --git a/www/index.html b/www/index.html index 3b7c067..63adbd2 100644 --- a/www/index.html +++ b/www/index.html @@ -17,10 +17,7 @@ <script src="/javascript/react/react.min.js"></script> <script src="/javascript/react/react-dom.min.js"></script> --> - <script src="https://unpkg.com/babel-core@5.8.38/browser.min.js"></script> - <!-- <script src="/javascript/jquery/jquery.min.js"></script> --> - <!-- <script src="/js/utils.js"></script> --> - <!-- <script src="/js/clock.js"></script> --> + <script src="/js/utils.js"></script> </head> <body> <div id="container"> @@ -34,9 +31,7 @@ <!-- <script type="text/javascript"> --> <!-- clock_init(); --> <!-- </script> --> - <script type="text/babel"> - ReactDOM.render(<h1>Hello, world!</h1>, document.getElementById('clock')); - </script> + <script src="/js/bundle.js"></script> </body> </html> diff --git a/www/js/clock.js b/www/js/bundle.js index 722a979..7aa4b78 100644 --- a/www/js/clock.js +++ b/www/js/bundle.js @@ -1,3 +1,4 @@ +(function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){ /* * rhrdweb * @@ -22,66 +23,60 @@ 'use strict'; function Clock() { - this.draw_callbacks = $.Callbacks('unique'); - this.last_message = { t1: 0, t2: 0, t3: 0, t4: 0, tz_offset: 3600 }; this.clock_offset = 0; this.clock_rtt = 0; this.state = 'NEW'; - this.now = function() { + this.now = function () { return new Date(this.getRDTimeMS()); - } + }; - this.getRDTimeMS = function() { - return (+new Date()) + (this.last_message.tz_offset * 1000) + this.clock_offset; - } + this.getRDTimeMS = function () { + return +new Date() + this.last_message.tz_offset * 1000 + this.clock_offset; + }; - this.redraw = function() { - var rdtime_ms = this.getRDTimeMS() + this.redraw = function () { + var rdtime_ms = this.getRDTimeMS(); var rdtime = new Date(rdtime_ms); - var date_str = weekday_short[rdtime.getUTCDay()] + ', '; + var date_str = weekday_short[rdtime.getUTCDay()] + ', '; date_str += rdtime.getUTCDate() + '.' + (rdtime.getUTCMonth() + 1) + '.' + rdtime.getUTCFullYear(); var time_str = (rdtime.getUTCHours() > 9 ? ' ' : ' 0') + rdtime.getUTCHours(); time_str += (rdtime.getUTCMinutes() > 9 ? ':' : ':0') + rdtime.getUTCMinutes(); time_str += (rdtime.getUTCSeconds() > 9 ? ':' : ':0') + rdtime.getUTCSeconds(); - this.draw_callbacks.fireWith(window, [date_str, time_str, get_rd_week(rdtime_ms)]); - } + console.log([date_str, time_str, get_rd_week(rdtime_ms)]); + }; - this.addCallback = function(cb) { - this.draw_callbacks.add(cb); - } - - this.ntp_update = function(event) { - var t4 = (+new Date()); + this.ntp_update = function (event) { + var t4 = +new Date(); var msg = JSON.parse(event.data); msg.t4 = t4; this.last_message = msg; - this.clock_offset = ((msg.t2 - msg.t1) + (msg.t3 - msg.t4)) / 2; - this.clock_rtt = (msg.t4 - msg.t1) - (msg.t3 - msg.t2); -// console.log('got new ntp message from rhrdtime (rtt=' + this.clock_rtt + ' ms): new offset = ' + this.clock_offset + ' ms'); - } + this.clock_offset = (msg.t2 - msg.t1 + (msg.t3 - msg.t4)) / 2; + this.clock_rtt = msg.t4 - msg.t1 - (msg.t3 - msg.t2); + // console.log('got new ntp message from rhrdtime (rtt=' + this.clock_rtt + ' ms): new offset = ' + this.clock_offset + ' ms'); + }; - this.ntp_request = function() { - this.sock.send(JSON.stringify({ t1: (+new Date()), t2: 0, t3: 0, t4: 0, tz_offset: 0, week: 0 })); - } + this.ntp_request = function () { + this.sock.send(JSON.stringify({ t1: +new Date(), t2: 0, t3: 0, t4: 0, tz_offset: 0, week: 0 })); + }; - this.sock_onopen = function() { -// console.log('clock websocket connection established'); + this.sock_onopen = function () { + // console.log('clock websocket connection established'); this.state = 'CONNECTED'; this.ntp_request(); this.interval_request = setInterval(this.ntp_request.bind(this), 2000); - } + }; - this.sock_onclose = function(event) { - if(this.state == 'STOPPED') { + this.sock_onclose = function (event) { + if (this.state == 'STOPPED') { delete this.sock; } else { -// console.log('clock websocket closed with code ' + event.code + ', trying reconnect...'); + // console.log('clock websocket closed with code ' + event.code + ', trying reconnect...'); clearInterval(this.interval_request); delete this.interval_request; this.sock.close(); @@ -89,57 +84,51 @@ function Clock() { setTimeout(this.connect.bind(this), 1000); this.state = 'RECONNECTING'; } - } + }; - this.connect = function() { + this.connect = function () { this.sock = new WebSocket('wss://' + window.location.host + '/ntp'); this.sock.onmessage = this.ntp_update.bind(this); this.sock.onopen = this.sock_onopen.bind(this); this.sock.onclose = this.sock_onclose.bind(this); this.state = 'CONNECTING'; - } + }; - this.start = function() { + this.start = function () { this.connect(); this.interval_redraw = setInterval(this.redraw.bind(this), 200); - } + }; - this.stop = function() { + this.stop = function () { this.state = 'STOPPED'; clearInterval(this.interval_redraw); delete this.interval_redraw; clearInterval(this.interval_request); delete this.interval_request; this.sock.close(); - } + }; } var clock = new Clock(); +clock.start(); + +var ClockView = React.createClass({ + displayName: 'ClockView', + + render: function () { + return React.createElement( + 'p', + null, + 'Hello, ', + React.createElement('input', { type: 'text', placeholder: 'Your name here' }), + '! It is ', + this.props.date.toTimeString() + ); + } +}); -function clock_init() { - clock.start(); - clock_draw('Do, 1.1.1970', '00:00:00', 0); - clock.addCallback(clock_draw); -} +setInterval(function () { + ReactDOM.render(React.createElement(ClockView, { date: new Date() }), document.getElementById('clock')); +}, 500); -function clock_draw(date, time, week) { - $('#clock span.clock-date').text(date); - $('#clock span.clock-time').text(time); - var weekspan = $('#clock span.current-week').removeClass().addClass('current-week').addClass('label'); - switch(week) { - case 1: - weekspan.addClass('label-info').text('Woche 1'); - break; - case 2: - weekspan.addClass('label-warning').text('Woche 2'); - break; - case 3: - weekspan.addClass('label-success').text('Woche 3'); - break; - case 4: - weekspan.addClass('label-danger').text('Woche 4'); - break; - default: - weekspan.addClass('label-default').text('Fehler'); - } -} +},{}]},{},[1]); |