summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--.babelrc1
-rw-r--r--.gitignore3
-rw-r--r--Makefile33
-rw-r--r--package.json20
-rw-r--r--src/clock.js (renamed from www/js/clock.js)48
-rw-r--r--www/index.html9
-rw-r--r--www/js/bundle.js134
7 files changed, 209 insertions, 39 deletions
diff --git a/.babelrc b/.babelrc
new file mode 100644
index 0000000..520d7f0
--- /dev/null
+++ b/.babelrc
@@ -0,0 +1 @@
+ { "presets": ["react"] }
diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..ae07117
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,3 @@
+/.bootstraped
+/node_modules/
+/npm-debug.log
diff --git a/Makefile b/Makefile
new file mode 100644
index 0000000..7dbd58c
--- /dev/null
+++ b/Makefile
@@ -0,0 +1,33 @@
+##
+## rhrdweb
+##
+##
+## Copyright (C) 2015-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 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 General Public License for more details.
+##
+## You should have received a copy of the GNU General Public License
+## along with rhrdweb. If not, see <http://www.gnu.org/licenses/>.
+##
+
+.PHONY: bootstrap build clean distclean
+all: build
+
+bootstrap:
+ npm install --save react react-dom babelify babel-preset-react browserify
+
+build:
+ npm run build
+
+distclean:
+ rm -rf node_modules
diff --git a/package.json b/package.json
new file mode 100644
index 0000000..66cf23d
--- /dev/null
+++ b/package.json
@@ -0,0 +1,20 @@
+{
+ "name": "rhrdweb",
+ "version": "0.1.0x",
+ "description": "Radio Helsinki Rivendell Integration Web Interface",
+ "license": "AGPL-3.0",
+ "repository": {
+ "type": "git",
+ "url": "https://git.helsinki.at/rhrdweb.git"
+ },
+ "scripts": {
+ "build": "browserify -t [ babelify ] src/*.js -o www/js/bundle.js"
+ },
+ "dependencies": {
+ "babel-preset-react": "^6.11.1",
+ "babelify": "^7.3.0",
+ "browserify": "^13.1.0",
+ "react": "^15.3.2",
+ "react-dom": "^15.3.2"
+ }
+}
diff --git a/www/js/clock.js b/src/clock.js
index 722a979..59390d8 100644
--- a/www/js/clock.js
+++ b/src/clock.js
@@ -22,8 +22,6 @@
'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;
@@ -48,11 +46,7 @@ function Clock() {
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);
+ console.log([date_str, time_str, get_rd_week(rdtime_ms)])
}
this.ntp_update = function(event) {
@@ -115,31 +109,21 @@ function Clock() {
}
var clock = new Clock();
+clock.start();
-function clock_init() {
- clock.start();
- clock_draw('Do, 1.1.1970', '00:00:00', 0);
- clock.addCallback(clock_draw);
-}
-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');
+
+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/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/bundle.js b/www/js/bundle.js
new file mode 100644
index 0000000..7aa4b78
--- /dev/null
+++ b/www/js/bundle.js
@@ -0,0 +1,134 @@
+(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.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();
+
+ console.log([date_str, time_str, get_rd_week(rdtime_ms)]);
+ };
+
+ 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',
+
+ render: function () {
+ return React.createElement(
+ 'p',
+ null,
+ 'Hello, ',
+ React.createElement('input', { type: 'text', placeholder: 'Your name here' }),
+ '! It is ',
+ this.props.date.toTimeString()
+ );
+ }
+});
+
+setInterval(function () {
+ ReactDOM.render(React.createElement(ClockView, { date: new Date() }), document.getElementById('clock'));
+}, 500);
+
+},{}]},{},[1]);
generated by cgit v0.10.2 at 2024-11-22 00:33:07 (GMT)