diff options
| -rw-r--r-- | src/clockView.js | 14 | ||||
| -rw-r--r-- | www/js/bundle.js | 130 | ||||
| -rw-r--r-- | www/js/clock.js (renamed from src/clock.js) | 18 | ||||
| -rw-r--r-- | www/weeks.html | 9 |
4 files changed, 23 insertions, 148 deletions
diff --git a/src/clockView.js b/src/clockView.js new file mode 100644 index 0000000..61a13f4 --- /dev/null +++ b/src/clockView.js @@ -0,0 +1,14 @@ +var ClockView = React.createClass({ + render: function() { + return ( + <p> + Hello, <input type="text" placeholder="Your name here" />! + It is {this.props.date.toTimeString()} + </p> + ); + } +}); + +setInterval(function() { + ReactDOM.render(<ClockView date={new Date()} />, document.getElementById('clock')); +}, 500); diff --git a/www/js/bundle.js b/www/js/bundle.js index 02b7f7c..72bc450 100644 --- a/www/js/bundle.js +++ b/www/js/bundle.js @@ -1,134 +1,14 @@ (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 - * - * Copyright (C) 2016 Christian Pointner <equinox@helsinki.at> - * - * This file is part of rhrdweb. - * - * rhrdweb is free software: you can redistribute it and/or modify - * it under the terms of the GNU Affero General Public License as published by - * the Free Software Foundation, either version 3 of the License, or - * any later version. - * - * rhrdweb is distributed in the hope that it will be useful, - * but WITHOUT ANY WARRANTY; without even the implied warranty of - * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the - * GNU Affero General Public License for more details. - * - * You should have received a copy of the GNU Affero General Public License - * along with rhrdweb. If not, see <http://www.gnu.org/licenses/>. - */ - -'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 () { - return new Date(this.getRDTimeMS()); - }; - - this.getRDTimeMS = function () { - return +new Date() + this.last_message.tz_offset * 1000 + this.clock_offset; - }; - - this.redraw = function () { - var rdtime_ms = this.getRDTimeMS(); - - var rdtime = new Date(rdtime_ms); - 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)]); - }; - - this.addCallback = function (cb) { - this.draw_callbacks.add(cb); - }; - - 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.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.state = 'CONNECTED'; - this.ntp_request(); - this.interval_request = setInterval(this.ntp_request.bind(this), 2000); - }; - - this.sock_onclose = function (event) { - if (this.state == 'STOPPED') { - delete this.sock; - } else { - // console.log('clock websocket closed with code ' + event.code + ', trying reconnect...'); - clearInterval(this.interval_request); - delete this.interval_request; - this.sock.close(); - delete this.sock; - setTimeout(this.connect.bind(this), 1000); - this.state = 'RECONNECTING'; - } - }; - - 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.connect(); - this.interval_redraw = setInterval(this.redraw.bind(this), 200); - }; - - 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', - + displayName: "ClockView", render: function () { return React.createElement( - 'p', + "p", null, - 'Hello, ', - React.createElement('input', { type: 'text', placeholder: 'Your name here' }), - '! It is ', + "Hello, ", + React.createElement("input", { type: "text", placeholder: "Your name here" }), + "! It is ", this.props.date.toTimeString() ); } diff --git a/src/clock.js b/www/js/clock.js index 163f464..a4cba2d 100644 --- a/src/clock.js +++ b/www/js/clock.js @@ -116,21 +116,3 @@ function Clock() { var clock = new Clock(); clock.start(); - - - -var ClockView = React.createClass({ - - render: function() { - return ( - <p> - Hello, <input type="text" placeholder="Your name here" />! - It is {this.props.date.toTimeString()} - </p> - ); - } -}); - -setInterval(function() { - ReactDOM.render(<ClockView date={new Date()} />, document.getElementById('clock')); -}, 500); diff --git a/www/weeks.html b/www/weeks.html index 8ca1e7c..1b3f90c 100644 --- a/www/weeks.html +++ b/www/weeks.html @@ -9,6 +9,9 @@ <link href="/javascript/bootstrap/css/bootstrap.min.css" rel="stylesheet"> <link href="/styles/common.css" rel="stylesheet"> <link href="/styles/weeks.css" rel="stylesheet"> + + <script src="/javascript/react/react.min.js"></script> + <script src="/javascript/react/react-dom.min.js"></script> <script src="/javascript/jquery/jquery.min.js"></script> <script src="/js/utils.js"></script> <script src="/js/clock.js"></script> @@ -20,13 +23,10 @@ <div class="col-md-4 col-md-offset-1"> <div id="title"> <h1>Rivendell Wochenplan</h1> + <h2>aktuelle Woche:</h2> </div> <div id="clock"> - <h2>aktuelle Woche:</h2> - <span class="current-week"></span> - <span class="clock-date"></span> - <span class="clock-time"></span> </div> <div id="buttons"> @@ -57,7 +57,6 @@ </div> <script type="text/javascript"> - clock_init(); calendar_init(); </script> |